diff --git a/z_ele/.editorconfig b/z_ele/.editorconfig
new file mode 100644
index 0000000..3454886
--- /dev/null
+++ b/z_ele/.editorconfig
@@ -0,0 +1,14 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/z_ele/.env.development b/z_ele/.env.development
new file mode 100644
index 0000000..fb8521b
--- /dev/null
+++ b/z_ele/.env.development
@@ -0,0 +1,3 @@
+# 开发环境接口地址
+#VITE_API_URL=https://v2.eleadmin.com/api
+VITE_API_URL=http://a.tcp.run/adminapi
diff --git a/z_ele/.env.production b/z_ele/.env.production
new file mode 100644
index 0000000..e25fb9d
--- /dev/null
+++ b/z_ele/.env.production
@@ -0,0 +1,2 @@
+# 生产环境接口地址
+VITE_API_URL=https://v2.eleadmin.com/api
diff --git a/z_ele/.env.staging b/z_ele/.env.staging
new file mode 100644
index 0000000..de59373
--- /dev/null
+++ b/z_ele/.env.staging
@@ -0,0 +1,2 @@
+# 预发布环境接口地址
+VITE_API_URL=https://v2.eleadmin.com/api
diff --git a/z_ele/.eslintignore b/z_ele/.eslintignore
new file mode 100644
index 0000000..46b1426
--- /dev/null
+++ b/z_ele/.eslintignore
@@ -0,0 +1,4 @@
+public
+src/assets
+dist
+node_modules
diff --git a/z_ele/.eslintrc.json b/z_ele/.eslintrc.json
new file mode 100644
index 0000000..f14748d
--- /dev/null
+++ b/z_ele/.eslintrc.json
@@ -0,0 +1,76 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parser": "vue-eslint-parser",
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "jsxPragma": "React",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "vue/attributes-order": "off",
+    "vue/attribute-hyphenation": "off",
+    "vue/v-on-event-hyphenation": "off",
+    "vue/custom-event-name-casing": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/no-setup-props-destructure": "off",
+    "vue/script-setup-uses-vars": "error",
+    "vue/one-component-per-file": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/require-default-prop": "off",
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "always",
+          "normal": "never",
+          "component": "always"
+        },
+        "svg": "always",
+        "math": "always"
+      }
+    ],
+    "no-use-before-define": "off",
+    "space-before-function-paren": "off",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ]
+  }
+}
diff --git a/z_ele/.gitignore b/z_ele/.gitignore
new file mode 100644
index 0000000..acea6cc
--- /dev/null
+++ b/z_ele/.gitignore
@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+/dist-ssr
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.pnpm-debug.log
+.eslintcache
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/z_ele/.prettierignore b/z_ele/.prettierignore
new file mode 100644
index 0000000..f7e39e6
--- /dev/null
+++ b/z_ele/.prettierignore
@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
diff --git a/z_ele/README.md b/z_ele/README.md
new file mode 100644
index 0000000..a797a27
--- /dev/null
+++ b/z_ele/README.md
@@ -0,0 +1,27 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
+
+### If Using `<script setup>`
+
+[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
+
+### If Using Volar
+
+Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+### If Using Vetur
+
+1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
+2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
+3. Open `src/main.ts` in VSCode
+4. Open the VSCode command palette
+5. Search and run "Select TypeScript version" -> "Use workspace version"
diff --git a/z_ele/components.d.ts b/z_ele/components.d.ts
new file mode 100644
index 0000000..43f84cc
--- /dev/null
+++ b/z_ele/components.d.ts
@@ -0,0 +1,10 @@
+import 'element-plus/global';
+import 'ele-admin-plus/typings/global';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    DictData: (typeof import('@/components/DictData/index.vue'))['default'];
+  }
+}
+
+export {};
diff --git a/z_ele/index.html b/z_ele/index.html
new file mode 100644
index 0000000..1878d9c
--- /dev/null
+++ b/z_ele/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="icon" href="/favicon.ico" />
+    <script>
+      (function () {
+        var metaEl = document.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        var responsive = true;
+        try {
+          responsive = JSON.parse(
+            localStorage.getItem('theme') || '{}'
+          ).responsive;
+        } catch (e) {
+          console.error(e);
+        }
+        if (responsive === false) {
+          metaEl.setAttribute('content', 'width=1200, initial-scale=1.0');
+        } else {
+          metaEl.setAttribute(
+            'content',
+            'width=device-width, initial-scale=1.0'
+          );
+          document.documentElement.style.overflowX = 'hidden';
+        }
+        document.head.appendChild(metaEl);
+        if (navigator.userAgent.includes('WebKit')) {
+          document.documentElement.classList.add('is-webkit');
+        }
+      })();
+    </script>
+    <title>Ele Admin Plus</title>
+    <style>
+      .ele-admin-loading {
+        width: 28px;
+        height: 28px;
+        display: grid;
+        grid-gap: 8px;
+        grid-template-rows: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
+        transform: rotate(45deg);
+        animation: loadingRotate 1.2s infinite linear;
+        position: fixed;
+        top: calc(50% - 14px);
+        left: calc(50% - 14px);
+      }
+
+      .ele-admin-loading > i {
+        border-radius: 50%;
+        background: #2f54eb;
+      }
+
+      .ele-admin-loading > i:nth-child(2) {
+        opacity: 0.7;
+      }
+
+      .ele-admin-loading > i:nth-child(3) {
+        opacity: 0.5;
+      }
+
+      .ele-admin-loading > i:nth-child(4) {
+        opacity: 0.3;
+      }
+
+      @keyframes loadingRotate {
+        to {
+          transform: rotate(405deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div class="ele-admin-loading">
+        <i></i>
+        <i></i>
+        <i></i>
+        <i></i>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/z_ele/package-lock.json b/z_ele/package-lock.json
new file mode 100644
index 0000000..de8f965
--- /dev/null
+++ b/z_ele/package-lock.json
@@ -0,0 +1,6203 @@
+{
+  "name": "ele-admin-plus-ts",
+  "version": "1.4.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ele-admin-plus-ts",
+      "version": "1.4.0",
+      "dependencies": {
+        "@amap/amap-jsapi-loader": "1.0.1",
+        "@ant-design/colors": "7.2.1",
+        "@bytemd/plugin-gfm": "1.22.0",
+        "@bytemd/plugin-highlight": "1.22.0",
+        "@element-plus/icons-vue": "2.3.1",
+        "@vueuse/core": "13.3.0",
+        "axios": "1.9.0",
+        "bytemd": "1.22.0",
+        "countup.js": "2.8.2",
+        "cropperjs": "1.6.2",
+        "dayjs": "1.11.13",
+        "echarts": "5.6.0",
+        "echarts-wordcloud": "2.1.0",
+        "ele-admin-plus": "1.4.0",
+        "element-plus": "2.9.10",
+        "exceljs": "4.4.0",
+        "github-markdown-css": "5.8.1",
+        "highlight.js": "11.11.1",
+        "jsbarcode": "3.11.6",
+        "lodash-es": "4.17.21",
+        "monaco-editor": "0.47.0",
+        "nprogress": "0.2.0",
+        "pinia": "3.0.2",
+        "sortablejs": "1.15.6",
+        "tinymce": "5.10.9",
+        "vue": "3.5.15",
+        "vue-echarts": "7.0.3",
+        "vue-i18n": "11.1.5",
+        "vue-router": "4.5.1",
+        "vuedraggable": "4.1.0",
+        "xgplayer": "3.0.22",
+        "xgplayer-hls": "3.0.22",
+        "xgplayer-music": "3.0.22"
+      },
+      "devDependencies": {
+        "@types/node": "22.15.23",
+        "@types/nprogress": "0.2.3",
+        "@types/sortablejs": "1.15.8",
+        "@typescript-eslint/eslint-plugin": "7.18.0",
+        "@typescript-eslint/parser": "7.18.0",
+        "@vitejs/plugin-vue": "5.2.4",
+        "@vue/compiler-sfc": "3.5.15",
+        "eslint": "8.57.1",
+        "eslint-config-prettier": "9.1.0",
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-vue": "9.32.0",
+        "postcss": "8.5.3",
+        "prettier": "3.5.3",
+        "rimraf": "6.0.1",
+        "sass": "1.89.0",
+        "typescript": "5.8.3",
+        "unplugin-vue-components": "28.7.0",
+        "vite": "6.3.5",
+        "vite-plugin-compression": "0.5.1",
+        "vue-eslint-parser": "9.4.3",
+        "vue-tsc": "2.2.10"
+      }
+    },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/colors": {
+      "version": "7.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.27.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.27.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bytemd/plugin-gfm": {
+      "version": "1.22.0",
+      "license": "MIT",
+      "dependencies": {
+        "remark-gfm": "^3.0.1"
+      },
+      "peerDependencies": {
+        "bytemd": "^1.5.0"
+      }
+    },
+    "node_modules/@bytemd/plugin-highlight": {
+      "version": "1.22.0",
+      "license": "MIT",
+      "dependencies": {
+        "highlight.js": "^11.7.0"
+      },
+      "peerDependencies": {
+        "bytemd": "^1.5.0"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.5",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format": {
+      "version": "4.3.5",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format/node_modules/@types/node": {
+      "version": "14.18.63",
+      "license": "MIT"
+    },
+    "node_modules/@fast-csv/parse": {
+      "version": "4.3.6",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@fast-csv/parse/node_modules/@types/node": {
+      "version": "14.18.63",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "license": "MIT"
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.5",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.5",
+        "@intlify/shared": "11.1.5"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.5",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.5",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.5",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "license": "MIT"
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.41.1",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.41.1",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.15",
+      "license": "MIT",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.7",
+      "license": "MIT"
+    },
+    "node_modules/@types/hast": {
+      "version": "2.3.10",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.17",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "3.0.15",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.15.23",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/parse5": {
+      "version": "6.0.3",
+      "license": "MIT"
+    },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/tern": {
+      "version": "0.23.9",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.11",
+      "license": "MIT"
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.18.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.14",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.14"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.14",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.14",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.14",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.27.2",
+        "@vue/shared": "3.5.15",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.15",
+        "@vue/shared": "3.5.15"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.27.2",
+        "@vue/compiler-core": "3.5.15",
+        "@vue/compiler-dom": "3.5.15",
+        "@vue/compiler-ssr": "3.5.15",
+        "@vue/shared": "3.5.15",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.17",
+        "postcss": "^8.5.3",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.15",
+        "@vue/shared": "3.5.15"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.6",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.6"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.6",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.6",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.6",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.2.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "~2.4.11",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^1.0.3",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.15"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.15",
+        "@vue/shared": "3.5.15"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.15",
+        "@vue/runtime-core": "3.5.15",
+        "@vue/shared": "3.5.15",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.15",
+        "@vue/shared": "3.5.15"
+      },
+      "peerDependencies": {
+        "vue": "3.5.15"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.15",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "13.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.3.0",
+        "@vueuse/shared": "13.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.3.0",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.3.0",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "1.0.13",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "license": "MIT"
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/big-integer": {
+      "version": "1.6.52",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/binary": {
+      "version": "0.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.4.7",
+      "license": "MIT"
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/buffers": {
+      "version": "0.1.1",
+      "engines": {
+        "node": ">=0.2.0"
+      }
+    },
+    "node_modules/bytemd": {
+      "version": "1.22.0",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.11.7",
+        "@types/codemirror": "^5.60.7",
+        "@types/hast": "^2.3.4",
+        "@types/lodash-es": "^4.17.7",
+        "@types/mdast": "^3.0.11",
+        "codemirror-ssr": "^0.65.0",
+        "hast-util-sanitize": "^4.1.0",
+        "lodash-es": "^4.17.21",
+        "rehype-raw": "^6.1.1",
+        "rehype-sanitize": "^5.0.1",
+        "rehype-stringify": "^9.0.3",
+        "remark-parse": "^10.0.1",
+        "remark-rehype": "^10.1.0",
+        "select-files": "^1.0.1",
+        "tippy.js": "^6.3.7",
+        "unified": "^10.1.2",
+        "unist-util-visit": "^4.1.2",
+        "vfile": "^5.3.7",
+        "word-count": "^0.2.2"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chainsaw": {
+      "version": "0.1.0",
+      "license": "MIT/X11",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/codemirror-ssr": {
+      "version": "0.65.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/codemirror": "^5.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/concat-typed-array": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.42.0",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/countup.js": {
+      "version": "2.8.2",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/cropperjs": {
+      "version": "1.6.2",
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-es": {
+      "version": "1.2.7",
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "license": "ISC",
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/danmu.js": {
+      "version": "1.1.13",
+      "license": "MIT",
+      "dependencies": {
+        "event-emitter": "^0.3.5"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "license": "MIT"
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "license": "MIT"
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/diff": {
+      "version": "5.2.0",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/downloadjs": {
+      "version": "1.4.7",
+      "license": "MIT"
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.1.0",
+      "license": "ISC",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
+    "node_modules/ele-admin-plus": {
+      "version": "1.4.0",
+      "license": "SEE LICENSE IN <https://eleadmin.com/copyright>",
+      "peerDependencies": {
+        "element-plus": ">=2.7.0",
+        "vue": ">=3.1.0"
+      }
+    },
+    "node_modules/element-plus": {
+      "version": "2.9.10",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "license": "MIT"
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.5",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.5",
+        "@esbuild/android-arm": "0.25.5",
+        "@esbuild/android-arm64": "0.25.5",
+        "@esbuild/android-x64": "0.25.5",
+        "@esbuild/darwin-arm64": "0.25.5",
+        "@esbuild/darwin-x64": "0.25.5",
+        "@esbuild/freebsd-arm64": "0.25.5",
+        "@esbuild/freebsd-x64": "0.25.5",
+        "@esbuild/linux-arm": "0.25.5",
+        "@esbuild/linux-arm64": "0.25.5",
+        "@esbuild/linux-ia32": "0.25.5",
+        "@esbuild/linux-loong64": "0.25.5",
+        "@esbuild/linux-mips64el": "0.25.5",
+        "@esbuild/linux-ppc64": "0.25.5",
+        "@esbuild/linux-riscv64": "0.25.5",
+        "@esbuild/linux-s390x": "0.25.5",
+        "@esbuild/linux-x64": "0.25.5",
+        "@esbuild/netbsd-arm64": "0.25.5",
+        "@esbuild/netbsd-x64": "0.25.5",
+        "@esbuild/openbsd-arm64": "0.25.5",
+        "@esbuild/openbsd-x64": "0.25.5",
+        "@esbuild/sunos-x64": "0.25.5",
+        "@esbuild/win32-arm64": "0.25.5",
+        "@esbuild/win32-ia32": "0.25.5",
+        "@esbuild/win32-x64": "0.25.5"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-vue": {
+      "version": "9.32.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "globals": "^13.24.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.15",
+        "semver": "^7.6.3",
+        "vue-eslint-parser": "^9.4.3",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "license": "ISC",
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "license": "MIT",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "license": "MIT"
+    },
+    "node_modules/exceljs": {
+      "version": "4.4.0",
+      "license": "MIT",
+      "dependencies": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.0.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "license": "ISC",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "license": "MIT"
+    },
+    "node_modules/fast-csv": {
+      "version": "4.3.6",
+      "license": "MIT",
+      "dependencies": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat-cache/node_modules/rimraf": {
+      "version": "3.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "license": "ISC"
+    },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "license": "ISC",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/fstream/node_modules/rimraf": {
+      "version": "2.7.1",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/github-markdown-css": {
+      "version": "5.8.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "7.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hastscript": "^7.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^5.0.0",
+        "vfile-location": "^4.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "7.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/parse5": "^6.0.0",
+        "hast-util-from-parse5": "^7.0.0",
+        "hast-util-to-parse5": "^7.0.0",
+        "html-void-elements": "^2.0.0",
+        "parse5": "^6.0.0",
+        "unist-util-position": "^4.0.0",
+        "unist-util-visit": "^4.0.0",
+        "vfile": "^5.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-sanitize": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-html": {
+      "version": "8.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-raw": "^7.0.0",
+        "hast-util-whitespace": "^2.0.0",
+        "html-void-elements": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "7.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "7.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "license": "MIT"
+    },
+    "node_modules/html-void-elements": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "license": "MIT"
+    },
+    "node_modules/immutable": {
+      "version": "5.1.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "license": "ISC"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "4.1.1",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsbarcode": {
+      "version": "3.11.6",
+      "license": "MIT"
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/listenercount": {
+      "version": "1.0.1",
+      "license": "ISC"
+    },
+    "node_modules/local-pkg": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "license": "MIT"
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.groupby": {
+      "version": "4.6.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "license": "MIT"
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.1.0",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-definitions": {
+      "version": "5.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "2.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "1.3.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "micromark": "^3.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-decode-string": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "unist-util-stringify-position": "^3.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^1.0.0",
+        "mdast-util-gfm-autolink-literal": "^1.0.0",
+        "mdast-util-gfm-footnote": "^1.0.0",
+        "mdast-util-gfm-strikethrough": "^1.0.0",
+        "mdast-util-gfm-table": "^1.0.0",
+        "mdast-util-gfm-task-list-item": "^1.0.0",
+        "mdast-util-to-markdown": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "ccount": "^2.0.0",
+        "mdast-util-find-and-replace": "^2.0.0",
+        "micromark-util-character": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-markdown": "^1.3.0",
+        "micromark-util-normalize-identifier": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-markdown": "^1.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "1.0.7",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^1.0.0",
+        "mdast-util-to-markdown": "^1.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-markdown": "^1.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "12.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "mdast-util-definitions": "^5.0.0",
+        "micromark-util-sanitize-uri": "^1.1.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-generated": "^2.0.0",
+        "unist-util-position": "^4.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "1.5.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^3.0.0",
+        "mdast-util-to-string": "^3.0.0",
+        "micromark-util-decode-string": "^1.0.0",
+        "unist-util-visit": "^4.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "3.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "3.2.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-core-commonmark": "^1.0.1",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.1",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-factory-destination": "^1.0.0",
+        "micromark-factory-label": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-factory-title": "^1.0.0",
+        "micromark-factory-whitespace": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-classify-character": "^1.0.0",
+        "micromark-util-html-tag-name": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.1",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^1.0.0",
+        "micromark-extension-gfm-footnote": "^1.0.0",
+        "micromark-extension-gfm-strikethrough": "^1.0.0",
+        "micromark-extension-gfm-table": "^1.0.0",
+        "micromark-extension-gfm-tagfilter": "^1.0.0",
+        "micromark-extension-gfm-task-list-item": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "1.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-core-commonmark": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "1.0.7",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-classify-character": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "1.0.7",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "1.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "1.2.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "1.2.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "1.2.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "license": "MIT"
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/monaco-editor": {
+      "version": "0.47.0",
+      "license": "MIT"
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "license": "ISC"
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "license": "MIT"
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "license": "MIT"
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "3.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.1",
+        "exsolve": "^1.0.1",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "license": "MIT"
+    },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.10",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/rehype-raw": {
+      "version": "6.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-raw": "^7.2.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-sanitize": {
+      "version": "5.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-sanitize": "^4.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify": {
+      "version": "9.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-html": "^8.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-gfm": "^2.0.0",
+        "micromark-extension-gfm": "^2.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "10.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-from-markdown": "^1.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "10.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-hast": "^12.1.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "license": "MIT"
+    },
+    "node_modules/rimraf": {
+      "version": "6.0.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^11.0.0",
+        "package-json-from-dist": "^1.0.0"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "11.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^4.0.1",
+        "minimatch": "^10.0.0",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "10.0.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.41.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.7"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.41.1",
+        "@rollup/rollup-android-arm64": "4.41.1",
+        "@rollup/rollup-darwin-arm64": "4.41.1",
+        "@rollup/rollup-darwin-x64": "4.41.1",
+        "@rollup/rollup-freebsd-arm64": "4.41.1",
+        "@rollup/rollup-freebsd-x64": "4.41.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.41.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.41.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.41.1",
+        "@rollup/rollup-linux-arm64-musl": "4.41.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.41.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.41.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.41.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-gnu": "4.41.1",
+        "@rollup/rollup-linux-x64-musl": "4.41.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.41.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.41.1",
+        "@rollup/rollup-win32-x64-msvc": "4.41.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "license": "MIT",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.89.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "5.0.1",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/select-files": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/synckit": {
+      "version": "0.9.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/synckit/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.5",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinymce": {
+      "version": "5.10.9",
+      "license": "LGPL-2.1"
+    },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
+    "node_modules/tmp": {
+      "version": "0.2.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "license": "MIT/X11"
+    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "license": "0BSD"
+    },
+    "node_modules/type": {
+      "version": "2.7.3",
+      "license": "ISC"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unified": {
+      "version": "10.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "bail": "^2.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-generated": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "4.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "3.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "4.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^5.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "5.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "picomatch": "^4.0.2",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.2.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-utils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "28.7.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.1",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "tinyglobby": "^0.2.14",
+        "unplugin": "^2.3.4",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/chokidar": {
+      "version": "3.6.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/readdirp": {
+      "version": "3.6.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unzipper": {
+      "version": "0.10.14",
+      "license": "MIT",
+      "dependencies": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
+    "node_modules/unzipper/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/unzipper/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/unzipper/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/uvu": {
+      "version": "0.5.6",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0",
+        "diff": "^5.0.0",
+        "kleur": "^4.0.3",
+        "sade": "^1.7.3"
+      },
+      "bin": {
+        "uvu": "bin.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "5.3.7",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^3.0.0",
+        "vfile-message": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "vfile": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "3.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-compression": {
+      "version": "0.5.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "debug": "^4.3.3",
+        "fs-extra": "^10.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.4.5",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.15",
+        "@vue/compiler-sfc": "3.5.15",
+        "@vue/runtime-dom": "3.5.15",
+        "@vue/server-renderer": "3.5.15",
+        "@vue/shared": "3.5.15"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-eslint-parser": {
+      "version": "9.4.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "11.1.5",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.5",
+        "@intlify/shared": "11.1.5",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "license": "MIT"
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "license": "MIT"
+    },
+    "node_modules/vue-tsc": {
+      "version": "2.2.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~2.4.11",
+        "@vue/language-core": "2.2.10"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "license": "MIT"
+    },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-count": {
+      "version": "0.2.2",
+      "license": "MIT"
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "license": "ISC"
+    },
+    "node_modules/xgplayer": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "danmu.js": ">=1.1.6",
+        "delegate": "^3.2.0",
+        "downloadjs": "1.4.7",
+        "eventemitter3": "^4.0.7",
+        "xgplayer-subtitles": "3.0.22"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1"
+      }
+    },
+    "node_modules/xgplayer-hls": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.7",
+        "xgplayer-streaming-shared": "3.0.22",
+        "xgplayer-transmuxer": "3.0.22"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1",
+        "xgplayer": "3.0.22"
+      }
+    },
+    "node_modules/xgplayer-music": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^2.0.1",
+        "eventemitter3": "^4.0.7"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1",
+        "xgplayer": "3.0.22"
+      }
+    },
+    "node_modules/xgplayer-streaming-shared": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.7"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1"
+      }
+    },
+    "node_modules/xgplayer-subtitles": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.7"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1"
+      }
+    },
+    "node_modules/xgplayer-transmuxer": {
+      "version": "3.0.22",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.15.3",
+        "concat-typed-array": "^1.0.2",
+        "crypto-es": "^1.2.4"
+      },
+      "peerDependencies": {
+        "core-js": ">=3.12.1"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "license": "MIT"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/z_ele/package.json b/z_ele/package.json
new file mode 100644
index 0000000..b91847b
--- /dev/null
+++ b/z_ele/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "ele-admin-plus-ts",
+  "version": "1.4.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite --host",
+    "serve": "vite build && vite preview --host",
+    "build": "vite build",
+    "serve:staging": "vite build --mode staging && vite preview --host",
+    "build:staging": "vite build --mode staging",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"src/**/*.{vue,ts,js}\" --fix",
+    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite/",
+    "clean:lib": "rimraf node_modules"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "1.0.1",
+    "@ant-design/colors": "7.2.1",
+    "@bytemd/plugin-gfm": "1.22.0",
+    "@bytemd/plugin-highlight": "1.22.0",
+    "@element-plus/icons-vue": "2.3.1",
+    "@vueuse/core": "13.3.0",
+    "axios": "1.9.0",
+    "bytemd": "1.22.0",
+    "countup.js": "2.8.2",
+    "cropperjs": "1.6.2",
+    "dayjs": "1.11.13",
+    "echarts": "5.6.0",
+    "echarts-wordcloud": "2.1.0",
+    "ele-admin-plus": "1.4.0",
+    "element-plus": "2.9.10",
+    "exceljs": "4.4.0",
+    "github-markdown-css": "5.8.1",
+    "highlight.js": "11.11.1",
+    "jsbarcode": "3.11.6",
+    "lodash-es": "4.17.21",
+    "monaco-editor": "0.47.0",
+    "nprogress": "0.2.0",
+    "pinia": "3.0.2",
+    "sortablejs": "1.15.6",
+    "tinymce": "5.10.9",
+    "vue": "3.5.15",
+    "vue-echarts": "7.0.3",
+    "vue-i18n": "11.1.5",
+    "vue-router": "4.5.1",
+    "vuedraggable": "4.1.0",
+    "xgplayer": "3.0.22",
+    "xgplayer-hls": "3.0.22",
+    "xgplayer-music": "3.0.22"
+  },
+  "devDependencies": {
+    "@types/node": "22.15.23",
+    "@types/nprogress": "0.2.3",
+    "@types/sortablejs": "1.15.8",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vue/compiler-sfc": "3.5.15",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-vue": "9.32.0",
+    "postcss": "8.5.3",
+    "prettier": "3.5.3",
+    "rimraf": "6.0.1",
+    "sass": "1.89.0",
+    "typescript": "5.8.3",
+    "unplugin-vue-components": "28.7.0",
+    "vite": "6.3.5",
+    "vite-plugin-compression": "0.5.1",
+    "vue-eslint-parser": "9.4.3",
+    "vue-tsc": "2.2.10"
+  }
+}
diff --git a/z_ele/postcss.config.js b/z_ele/postcss.config.js
new file mode 100644
index 0000000..5bacb78
--- /dev/null
+++ b/z_ele/postcss.config.js
@@ -0,0 +1,3 @@
+export default {
+  plugins: {}
+};
diff --git a/z_ele/prettier.config.js b/z_ele/prettier.config.js
new file mode 100644
index 0000000..ff47d97
--- /dev/null
+++ b/z_ele/prettier.config.js
@@ -0,0 +1,19 @@
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  vueIndentScriptAndStyle: true,
+  endOfLine: 'lf'
+};
diff --git a/z_ele/public/ele-file-list/ic_file_android.png b/z_ele/public/ele-file-list/ic_file_android.png
new file mode 100644
index 0000000..08de045
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_android.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_android_sm.png b/z_ele/public/ele-file-list/ic_file_android_sm.png
new file mode 100644
index 0000000..4442119
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_android_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_bt.png b/z_ele/public/ele-file-list/ic_file_bt.png
new file mode 100644
index 0000000..909255c
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_bt.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_bt_sm.png b/z_ele/public/ele-file-list/ic_file_bt_sm.png
new file mode 100644
index 0000000..4e9aa96
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_bt_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_cad.png b/z_ele/public/ele-file-list/ic_file_cad.png
new file mode 100644
index 0000000..456943c
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_cad.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_cad_sm.png b/z_ele/public/ele-file-list/ic_file_cad_sm.png
new file mode 100644
index 0000000..e03193e
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_cad_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_code.png b/z_ele/public/ele-file-list/ic_file_code.png
new file mode 100644
index 0000000..6279b2c
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_code.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_code_sm.png b/z_ele/public/ele-file-list/ic_file_code_sm.png
new file mode 100644
index 0000000..c39d65f
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_code_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_excel.png b/z_ele/public/ele-file-list/ic_file_excel.png
new file mode 100644
index 0000000..20e6b2d
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_excel.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_excel_sm.png b/z_ele/public/ele-file-list/ic_file_excel_sm.png
new file mode 100644
index 0000000..59012f1
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_excel_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_exe.png b/z_ele/public/ele-file-list/ic_file_exe.png
new file mode 100644
index 0000000..a754581
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_exe.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_exe_sm.png b/z_ele/public/ele-file-list/ic_file_exe_sm.png
new file mode 100644
index 0000000..584892d
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_exe_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_flash.png b/z_ele/public/ele-file-list/ic_file_flash.png
new file mode 100644
index 0000000..dc60dd7
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_flash.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_flash_sm.png b/z_ele/public/ele-file-list/ic_file_flash_sm.png
new file mode 100644
index 0000000..d6c4e59
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_flash_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_folder.png b/z_ele/public/ele-file-list/ic_file_folder.png
new file mode 100644
index 0000000..c60a935
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_folder.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_folder_sm.png b/z_ele/public/ele-file-list/ic_file_folder_sm.png
new file mode 100644
index 0000000..5475f5b
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_folder_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_fonts.png b/z_ele/public/ele-file-list/ic_file_fonts.png
new file mode 100644
index 0000000..e757c99
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_fonts.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_fonts_sm.png b/z_ele/public/ele-file-list/ic_file_fonts_sm.png
new file mode 100644
index 0000000..bae84b9
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_fonts_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_htm.png b/z_ele/public/ele-file-list/ic_file_htm.png
new file mode 100644
index 0000000..264f1b4
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_htm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_htm_sm.png b/z_ele/public/ele-file-list/ic_file_htm_sm.png
new file mode 100644
index 0000000..2246728
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_htm_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ipa.png b/z_ele/public/ele-file-list/ic_file_ipa.png
new file mode 100644
index 0000000..71612bc
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ipa.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ipa_sm.png b/z_ele/public/ele-file-list/ic_file_ipa_sm.png
new file mode 100644
index 0000000..7d2e591
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ipa_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_misc.png b/z_ele/public/ele-file-list/ic_file_misc.png
new file mode 100644
index 0000000..acf4dc2
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_misc.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_misc_sm.png b/z_ele/public/ele-file-list/ic_file_misc_sm.png
new file mode 100644
index 0000000..aa2c12f
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_misc_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_music.png b/z_ele/public/ele-file-list/ic_file_music.png
new file mode 100644
index 0000000..0343055
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_music.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_music_sm.png b/z_ele/public/ele-file-list/ic_file_music_sm.png
new file mode 100644
index 0000000..20c2117
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_music_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_pdf.png b/z_ele/public/ele-file-list/ic_file_pdf.png
new file mode 100644
index 0000000..1944f1e
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_pdf.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_pdf_sm.png b/z_ele/public/ele-file-list/ic_file_pdf_sm.png
new file mode 100644
index 0000000..a180b05
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_pdf_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_picture.png b/z_ele/public/ele-file-list/ic_file_picture.png
new file mode 100644
index 0000000..e62922e
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_picture.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_picture_sm.png b/z_ele/public/ele-file-list/ic_file_picture_sm.png
new file mode 100644
index 0000000..076d2ad
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_picture_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ppt.png b/z_ele/public/ele-file-list/ic_file_ppt.png
new file mode 100644
index 0000000..deefc6e
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ppt.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ppt_sm.png b/z_ele/public/ele-file-list/ic_file_ppt_sm.png
new file mode 100644
index 0000000..6f14287
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ppt_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ps.png b/z_ele/public/ele-file-list/ic_file_ps.png
new file mode 100644
index 0000000..548fee4
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ps.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_ps_sm.png b/z_ele/public/ele-file-list/ic_file_ps_sm.png
new file mode 100644
index 0000000..3358eb7
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_ps_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_text.png b/z_ele/public/ele-file-list/ic_file_text.png
new file mode 100644
index 0000000..265f9ff
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_text.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_text_sm.png b/z_ele/public/ele-file-list/ic_file_text_sm.png
new file mode 100644
index 0000000..f55b602
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_text_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_video.png b/z_ele/public/ele-file-list/ic_file_video.png
new file mode 100644
index 0000000..2487c7c
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_video.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_video_sm.png b/z_ele/public/ele-file-list/ic_file_video_sm.png
new file mode 100644
index 0000000..fe45337
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_video_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_visio.png b/z_ele/public/ele-file-list/ic_file_visio.png
new file mode 100644
index 0000000..34728a5
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_visio.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_visio_sm.png b/z_ele/public/ele-file-list/ic_file_visio_sm.png
new file mode 100644
index 0000000..c158664
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_visio_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_word.png b/z_ele/public/ele-file-list/ic_file_word.png
new file mode 100644
index 0000000..3ed0c88
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_word.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_word_sm.png b/z_ele/public/ele-file-list/ic_file_word_sm.png
new file mode 100644
index 0000000..03a8b05
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_word_sm.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_zip.png b/z_ele/public/ele-file-list/ic_file_zip.png
new file mode 100644
index 0000000..eddd297
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_zip.png differ
diff --git a/z_ele/public/ele-file-list/ic_file_zip_sm.png b/z_ele/public/ele-file-list/ic_file_zip_sm.png
new file mode 100644
index 0000000..58a0298
Binary files /dev/null and b/z_ele/public/ele-file-list/ic_file_zip_sm.png differ
diff --git a/z_ele/public/favicon.ico b/z_ele/public/favicon.ico
new file mode 100644
index 0000000..bac3b38
Binary files /dev/null and b/z_ele/public/favicon.ico differ
diff --git a/z_ele/public/json/china-provinces.geo.json b/z_ele/public/json/china-provinces.geo.json
new file mode 100644
index 0000000..be70ca7
--- /dev/null
+++ b/z_ele/public/json/china-provinces.geo.json
@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":"65","size":"550","name":"新疆","cp":[84.9023,42.148],"childNum":18},"geometry":{"type":"Polygon","coordinates":[[[96.416,42.7588],[96.416,42.7148],[95.9766,42.4951],[96.0645,42.3193],[96.2402,42.2314],[95.9766,41.9238],[95.2734,41.6162],[95.1855,41.792],[94.5703,41.4844],[94.043,41.0889],[93.8672,40.6934],[93.0762,40.6494],[92.6367,39.6387],[92.373,39.3311],[92.373,39.1113],[92.373,39.0234],[90.1758,38.4961],[90.3516,38.2324],[90.6152,38.3203],[90.5273,37.8369],[91.0547,37.4414],[91.3184,37.0898],[90.7031,36.7822],[90.791,36.6064],[91.0547,36.5186],[91.0547,36.0791],[90.8789,36.0352],[90,36.2549],[89.9121,36.0791],[89.7363,36.0791],[89.209,36.2988],[88.7695,36.3428],[88.5938,36.4746],[87.3633,36.4307],[86.2207,36.167],[86.1328,35.8594],[85.6055,35.6836],[85.0781,35.7275],[84.1992,35.376],[83.1445,35.4199],[82.8809,35.6836],[82.4414,35.7275],[82.002,35.332],[81.6504,35.2441],[80.4199,35.4199],[80.2441,35.2881],[80.332,35.1563],[80.2441,35.2002],[79.8926,34.8047],[79.8047,34.4971],[79.1016,34.4531],[79.0137,34.3213],[78.2227,34.7168],[78.0469,35.2441],[78.0469,35.5078],[77.4316,35.4639],[76.8164,35.6396],[76.5527,35.8594],[76.2012,35.8154],[75.9375,36.0352],[76.0254,36.4746],[75.8496,36.6943],[75.498,36.7383],[75.4102,36.958],[75.0586,37.002],[74.8828,36.9141],[74.7949,37.0459],[74.5313,37.0898],[74.5313,37.2217],[74.8828,37.2217],[75.1465,37.4414],[74.8828,37.5732],[74.9707,37.749],[74.8828,38.4521],[74.3555,38.6719],[74.1797,38.6719],[74.0918,38.54],[73.8281,38.584],[73.7402,38.8477],[73.8281,38.9795],[73.4766,39.375],[73.916,39.5068],[73.916,39.6826],[73.8281,39.7705],[74.0039,40.0342],[74.8828,40.3418],[74.7949,40.5176],[75.2344,40.4297],[75.5859,40.6494],[75.7617,40.2979],[76.377,40.3857],[76.9043,41.001],[77.6074,41.001],[78.1348,41.2207],[78.1348,41.3965],[80.1563,42.0557],[80.2441,42.2754],[80.1563,42.627],[80.2441,42.8467],[80.5078,42.8906],[80.4199,43.0664],[80.7715,43.1982],[80.4199,44.165],[80.4199,44.6045],[79.9805,44.8242],[79.9805,44.9561],[81.7383,45.3955],[82.0898,45.2197],[82.5293,45.2197],[82.2656,45.6592],[83.0566,47.2412],[83.6719,47.0215],[84.7266,47.0215],[84.9023,46.8896],[85.5176,47.0654],[85.6934,47.2852],[85.5176,48.1201],[85.7813,48.4277],[86.5723,48.5596],[86.8359,48.8232],[86.748,48.9551],[86.8359,49.1309],[87.8027,49.1748],[87.8906,48.999],[87.7148,48.9111],[88.0664,48.7354],[87.9785,48.6035],[88.5059,48.3838],[88.6816,48.1641],[89.1211,47.9883],[89.5605,48.0322],[89.7363,47.8564],[90.0879,47.8564],[90.3516,47.6807],[90.5273,47.2412],[90.8789,46.9775],[91.0547,46.582],[90.8789,46.3184],[91.0547,46.0107],[90.7031,45.7471],[90.7031,45.5273],[90.8789,45.2197],[91.582,45.0879],[93.5156,44.9561],[94.7461,44.3408],[95.3613,44.2969],[95.3613,44.0332],[95.5371,43.9014],[95.8887,43.2422],[96.3281,42.9346],[96.416,42.7588]]]}},{"type":"Feature","properties":{"id":"54","size":"550","name":"西藏","cp":[87.8695,31.6846],"childNum":7},"geometry":{"type":"Polygon","coordinates":[[[79.0137,34.3213],[79.1016,34.4531],[79.8047,34.4971],[79.8926,34.8047],[80.2441,35.2002],[80.332,35.1563],[80.2441,35.2881],[80.4199,35.4199],[81.6504,35.2441],[82.002,35.332],[82.4414,35.7275],[82.8809,35.6836],[83.1445,35.4199],[84.1992,35.376],[85.0781,35.7275],[85.6055,35.6836],[86.1328,35.8594],[86.2207,36.167],[87.3633,36.4307],[88.5938,36.4746],[88.7695,36.3428],[89.209,36.2988],[89.7363,36.0791],[89.3848,36.0352],[89.4727,35.9033],[89.7363,35.7715],[89.7363,35.4199],[89.4727,35.376],[89.4727,35.2441],[89.5605,34.8926],[89.8242,34.8486],[89.7363,34.6729],[89.8242,34.3652],[89.6484,34.0137],[90.0879,33.4863],[90.7031,33.1348],[91.4063,33.1348],[91.9336,32.8271],[92.1973,32.8271],[92.2852,32.7393],[92.9883,32.7393],[93.5156,32.4756],[93.7793,32.5635],[94.1309,32.4316],[94.6582,32.6074],[95.1855,32.4316],[95.0098,32.2998],[95.1855,32.3438],[95.2734,32.2119],[95.3613,32.168],[95.3613,31.9922],[95.4492,31.8164],[95.8008,31.6846],[95.9766,31.8164],[96.1523,31.5967],[96.2402,31.9482],[96.5039,31.7285],[96.8555,31.6846],[96.7676,31.9922],[97.2949,32.0801],[97.3828,32.5635],[97.7344,32.5195],[98.1738,32.3438],[98.4375,31.8604],[98.877,31.4209],[98.6133,31.2012],[98.9648,30.7617],[99.1406,29.2676],[98.9648,29.1357],[98.9648,28.8281],[98.7891,28.8721],[98.7891,29.0039],[98.7012,28.916],[98.6133,28.5205],[98.7891,28.3447],[98.7012,28.2129],[98.3496,28.125],[98.2617,28.3887],[98.1738,28.125],[97.5586,28.5205],[97.2949,28.0811],[97.3828,27.9053],[97.0313,27.7295],[96.5039,28.125],[95.7129,28.2568],[95.3613,28.125],[95.2734,27.9492],[94.2188,27.5537],[93.8672,27.0264],[93.6035,26.9385],[92.1094,26.8506],[92.0215,27.4658],[91.582,27.5537],[91.582,27.9053],[91.4063,28.0371],[91.0547,27.8613],[90.7031,28.0811],[89.8242,28.2129],[89.6484,28.1689],[89.1211,27.5977],[89.1211,27.334],[89.0332,27.2021],[88.7695,27.4219],[88.8574,27.9932],[88.6816,28.125],[88.1543,27.9053],[87.8906,27.9492],[87.7148,27.8174],[87.0996,27.8174],[86.748,28.125],[86.5723,28.125],[86.4844,27.9053],[86.1328,28.125],[86.0449,27.9053],[85.6934,28.3447],[85.6055,28.2568],[85.166,28.3447],[85.166,28.6523],[84.9023,28.5645],[84.4629,28.7402],[84.2871,28.8721],[84.1992,29.2236],[84.1113,29.2676],[83.584,29.1797],[83.2324,29.5752],[82.1777,30.0586],[82.0898,30.3223],[81.3867,30.3662],[81.2109,30.0146],[81.0352,30.2344],[80.0684,30.5859],[79.7168,30.9375],[79.0137,31.0693],[78.75,31.333],[78.8379,31.5967],[78.6621,31.8164],[78.75,31.9043],[78.4863,32.124],[78.3984,32.5195],[78.75,32.6953],[78.9258,32.3438],[79.2773,32.5635],[79.1016,33.1787],[78.6621,33.6621],[78.6621,34.1016],[78.9258,34.1455],[79.0137,34.3213]]]}},{"type":"Feature","properties":{"id":"15","size":"450","name":"内蒙古","cp":[111.670801,41.818311],"childNum":12},"geometry":{"type":"Polygon","coordinates":[[[97.207,42.8027],[99.4922,42.583],[100.8105,42.6709],[101.7773,42.4951],[102.041,42.2314],[102.7441,42.1436],[103.3594,41.8799],[103.8867,41.792],[104.502,41.8799],[104.502,41.6602],[105.0293,41.5723],[105.7324,41.9238],[107.4023,42.4512],[109.4238,42.4512],[110.3906,42.7588],[111.0059,43.3301],[111.9727,43.6816],[111.9727,43.8135],[111.4453,44.3848],[111.7969,45],[111.9727,45.0879],[113.6426,44.7363],[114.1699,44.9561],[114.5215,45.3955],[115.6641,45.4395],[116.1914,45.7031],[116.2793,45.9668],[116.543,46.2744],[117.334,46.3623],[117.4219,46.582],[117.7734,46.5381],[118.3008,46.7578],[118.7402,46.7139],[118.916,46.7578],[119.0918,46.6699],[119.707,46.626],[119.9707,46.7139],[119.707,47.1973],[118.4766,47.9883],[117.8613,48.0322],[117.334,47.6807],[116.8066,47.9004],[116.1914,47.8564],[115.9277,47.6807],[115.5762,47.9004],[115.4883,48.1641],[115.8398,48.252],[115.8398,48.5596],[116.7188,49.834],[117.7734,49.5264],[118.5645,49.9219],[119.2676,50.0977],[119.3555,50.3174],[119.1797,50.3613],[119.5313,50.7568],[119.5313,50.8887],[119.707,51.0645],[120.1465,51.6797],[120.6738,51.9434],[120.7617,52.1191],[120.7617,52.251],[120.5859,52.3389],[120.6738,52.5146],[120.4102,52.6465],[120.0586,52.6025],[120.0586,52.7344],[120.8496,53.2617],[121.4648,53.3496],[121.8164,53.042],[121.2012,52.5586],[121.6406,52.4268],[121.7285,52.2949],[121.9922,52.2949],[122.168,52.5146],[122.6953,52.251],[122.6074,52.0752],[122.959,51.3281],[123.3105,51.2402],[123.6621,51.3721],[124.3652,51.2842],[124.541,51.3721],[124.8926,51.3721],[125.0684,51.6357],[125.332,51.6357],[126.0352,51.0205],[125.7715,50.7568],[125.7715,50.5371],[125.332,50.1416],[125.1563,49.834],[125.2441,49.1748],[124.8047,49.1309],[124.4531,48.1201],[124.2773,48.5156],[122.4316,47.373],[123.0469,46.7139],[123.3984,46.8896],[123.3984,46.9775],[123.4863,46.9775],[123.5742,46.8457],[123.5742,46.8896],[123.5742,46.6699],[123.0469,46.582],[123.2227,46.2305],[122.7832,46.0107],[122.6953,45.7031],[122.4316,45.8789],[122.2559,45.791],[121.8164,46.0107],[121.7285,45.7471],[121.9043,45.7031],[122.2559,45.2637],[122.0801,44.8682],[122.3438,44.2529],[123.1348,44.4727],[123.4863,43.7256],[123.3105,43.5059],[123.6621,43.374],[123.5742,43.0225],[123.3105,42.9785],[123.1348,42.8027],[122.7832,42.7148],[122.3438,42.8467],[122.3438,42.6709],[121.9922,42.7148],[121.7285,42.4512],[121.4648,42.4951],[120.498,42.0996],[120.1465,41.7041],[119.8828,42.1875],[119.5313,42.3633],[119.3555,42.2754],[119.2676,41.7041],[119.4434,41.6162],[119.2676,41.3086],[118.3887,41.3086],[118.125,41.748],[118.3008,41.792],[118.3008,42.0996],[118.125,42.0557],[117.9492,42.2314],[118.0371,42.4072],[117.7734,42.627],[117.5098,42.583],[117.334,42.4512],[116.8945,42.4072],[116.8066,42.0117],[116.2793,42.0117],[116.0156,41.792],[115.9277,41.9238],[115.2246,41.5723],[114.9609,41.6162],[114.873,42.0996],[114.5215,42.1436],[114.1699,41.792],[114.2578,41.5723],[113.9063,41.4404],[113.9941,41.2207],[113.9063,41.1328],[114.082,40.7373],[114.082,40.5176],[113.8184,40.5176],[113.5547,40.3418],[113.2031,40.3857],[112.7637,40.166],[112.3242,40.2539],[111.9727,39.5947],[111.4453,39.6387],[111.3574,39.4189],[111.0938,39.375],[111.0938,39.5947],[110.6543,39.2871],[110.127,39.4629],[110.2148,39.2871],[109.8633,39.2432],[109.9512,39.1553],[108.9844,38.3203],[109.0723,38.0127],[108.8965,37.9688],[108.8086,38.0127],[108.7207,37.7051],[108.1934,37.6172],[107.666,37.8809],[107.3145,38.1006],[106.7871,38.1885],[106.5234,38.3203],[106.9629,38.9795],[106.7871,39.375],[106.3477,39.2871],[105.9082,38.7158],[105.8203,37.793],[104.3262,37.4414],[103.4473,37.8369],[103.3594,38.0127],[103.5352,38.1445],[103.4473,38.3643],[104.2383,38.9795],[104.0625,39.4189],[103.3594,39.3311],[103.0078,39.1113],[102.4805,39.2432],[101.8652,39.1113],[102.041,38.8916],[101.7773,38.6719],[101.3379,38.7598],[101.25,39.0234],[100.9863,38.9355],[100.8105,39.4189],[100.5469,39.4189],[100.0195,39.7705],[99.4922,39.8584],[100.1074,40.2539],[100.1953,40.6494],[99.9316,41.001],[99.2285,40.8691],[99.0527,40.6934],[98.9648,40.7813],[98.7891,40.6055],[98.5254,40.7373],[98.6133,40.6494],[98.3496,40.5615],[98.3496,40.9131],[97.4707,41.4844],[97.8223,41.6162],[97.8223,41.748],[97.207,42.8027]]]}},{"type":"Feature","properties":{"id":"63","size":"800","name":"青海","cp":[95.2402,35.4199],"childNum":8},"geometry":{"type":"Polygon","coordinates":[[[89.7363,36.0791],[89.9121,36.0791],[90,36.2549],[90.8789,36.0352],[91.0547,36.0791],[91.0547,36.5186],[90.791,36.6064],[90.7031,36.7822],[91.3184,37.0898],[91.0547,37.4414],[90.5273,37.8369],[90.6152,38.3203],[90.3516,38.2324],[90.1758,38.4961],[92.373,39.0234],[92.373,39.1113],[93.1641,39.1992],[93.1641,38.9795],[93.6914,38.9355],[93.8672,38.7158],[94.3066,38.7598],[94.5703,38.3643],[95.0098,38.4082],[95.4492,38.2764],[95.7129,38.3643],[96.2402,38.1006],[96.416,38.2324],[96.6797,38.1885],[96.6797,38.4521],[97.1191,38.584],[97.0313,39.1992],[98.1738,38.8037],[98.3496,39.0234],[98.6133,38.9355],[98.7891,39.0674],[99.1406,38.9355],[99.8438,38.3643],[100.1953,38.2764],[100.0195,38.4521],[100.1074,38.4961],[100.459,38.2764],[100.7227,38.2324],[101.1621,37.8369],[101.5137,37.8809],[101.7773,37.6172],[101.9531,37.7051],[102.1289,37.4414],[102.5684,37.1777],[102.4805,36.958],[102.6563,36.8262],[102.5684,36.7383],[102.832,36.3428],[103.0078,36.2549],[102.9199,36.0791],[102.9199,35.9033],[102.6563,35.7715],[102.832,35.5957],[102.4805,35.5957],[102.3047,35.4199],[102.3926,35.2002],[101.9531,34.8486],[101.9531,34.6289],[102.2168,34.4092],[102.1289,34.2773],[101.6895,34.1016],[100.9863,34.3652],[100.8105,34.2773],[101.25,33.6621],[101.5137,33.7061],[101.6016,33.5303],[101.7773,33.5303],[101.6895,33.3105],[101.7773,33.2227],[101.6016,33.1348],[101.1621,33.2227],[101.25,32.6953],[100.7227,32.6514],[100.7227,32.5195],[100.3711,32.7393],[100.1074,32.6514],[100.1074,32.8711],[99.8438,33.0029],[99.7559,32.7393],[99.2285,32.915],[99.2285,33.0469],[98.877,33.1787],[98.4375,34.0576],[97.8223,34.1895],[97.6465,34.1016],[97.7344,33.9258],[97.3828,33.8818],[97.4707,33.5742],[97.7344,33.3984],[97.3828,32.8711],[97.4707,32.6953],[97.7344,32.5195],[97.3828,32.5635],[97.2949,32.0801],[96.7676,31.9922],[96.8555,31.6846],[96.5039,31.7285],[96.2402,31.9482],[96.1523,31.5967],[95.9766,31.8164],[95.8008,31.6846],[95.4492,31.8164],[95.3613,31.9922],[95.3613,32.168],[95.2734,32.2119],[95.1855,32.3438],[95.0098,32.2998],[95.1855,32.4316],[94.6582,32.6074],[94.1309,32.4316],[93.7793,32.5635],[93.5156,32.4756],[92.9883,32.7393],[92.2852,32.7393],[92.1973,32.8271],[91.9336,32.8271],[91.4063,33.1348],[90.7031,33.1348],[90.0879,33.4863],[89.6484,34.0137],[89.8242,34.3652],[89.7363,34.6729],[89.8242,34.8486],[89.5605,34.8926],[89.4727,35.2441],[89.4727,35.376],[89.7363,35.4199],[89.7363,35.7715],[89.4727,35.9033],[89.3848,36.0352],[89.7363,36.0791]]]}},{"type":"Feature","properties":{"id":"51","size":"900","name":"四川","cp":[101.9199,30.1904],"childNum":21},"geometry":{"type":"Polygon","coordinates":[[[101.7773,33.5303],[101.8652,33.5742],[101.9531,33.4424],[101.8652,33.0908],[102.4805,33.4424],[102.2168,33.9258],[102.9199,34.3213],[103.0957,34.1895],[103.1836,33.7939],[104.1504,33.6182],[104.2383,33.3984],[104.4141,33.3105],[104.3262,33.2227],[104.4141,33.0469],[104.3262,32.8711],[104.4141,32.7393],[105.2051,32.6074],[105.3809,32.7393],[105.3809,32.8711],[105.4688,32.915],[105.5566,32.7393],[106.084,32.8711],[106.084,32.7393],[106.3477,32.6514],[107.0508,32.6953],[107.1387,32.4756],[107.2266,32.4316],[107.4023,32.5195],[108.0176,32.168],[108.2813,32.2559],[108.5449,32.2119],[108.3691,32.168],[108.2813,31.9043],[108.5449,31.6846],[108.1934,31.5088],[107.9297,30.8496],[107.4902,30.8496],[107.4023,30.7617],[107.4902,30.6299],[107.0508,30.0146],[106.7871,30.0146],[106.6113,30.3223],[106.2598,30.1904],[105.8203,30.4541],[105.6445,30.2783],[105.5566,30.1025],[105.7324,29.8828],[105.293,29.5313],[105.4688,29.3115],[105.7324,29.2676],[105.8203,28.96],[106.2598,28.8721],[106.3477,28.5205],[105.9961,28.7402],[105.6445,28.4326],[105.9082,28.125],[106.1719,28.125],[106.3477,27.8174],[105.6445,27.6416],[105.5566,27.7734],[105.293,27.7295],[105.2051,27.9932],[105.0293,28.0811],[104.8535,27.9053],[104.4141,27.9492],[104.3262,28.0371],[104.4141,28.125],[104.4141,28.2568],[104.2383,28.4326],[104.4141,28.6084],[103.8867,28.6523],[103.7988,28.3008],[103.4473,28.125],[103.4473,27.7734],[102.9199,27.29],[103.0078,26.3672],[102.6563,26.1914],[102.5684,26.3672],[102.1289,26.1035],[101.8652,26.0596],[101.6016,26.2354],[101.6895,26.3672],[101.4258,26.5869],[101.4258,26.8066],[101.4258,26.7188],[101.1621,27.0264],[101.1621,27.1582],[100.7227,27.8613],[100.3711,27.8174],[100.2832,27.7295],[100.0195,28.125],[100.1953,28.3447],[99.668,28.8281],[99.4043,28.5205],[99.4043,28.1689],[99.2285,28.3008],[99.1406,29.2676],[98.9648,30.7617],[98.6133,31.2012],[98.877,31.4209],[98.4375,31.8604],[98.1738,32.3438],[97.7344,32.5195],[97.4707,32.6953],[97.3828,32.8711],[97.7344,33.3984],[97.4707,33.5742],[97.3828,33.8818],[97.7344,33.9258],[97.6465,34.1016],[97.8223,34.1895],[98.4375,34.0576],[98.877,33.1787],[99.2285,33.0469],[99.2285,32.915],[99.7559,32.7393],[99.8438,33.0029],[100.1074,32.8711],[100.1074,32.6514],[100.3711,32.7393],[100.7227,32.5195],[100.7227,32.6514],[101.25,32.6953],[101.1621,33.2227],[101.6016,33.1348],[101.7773,33.2227],[101.6895,33.3105],[101.7773,33.5303]]]}},{"type":"Feature","properties":{"id":"23","size":"700","name":"黑龙江","cp":[128.642464,46.756967],"childNum":13},"geometry":{"type":"Polygon","coordinates":[[[121.4648,53.3496],[123.6621,53.5693],[124.8926,53.0859],[125.0684,53.2178],[125.5957,53.0859],[125.6836,52.9102],[126.123,52.7783],[126.0352,52.6025],[126.2109,52.5146],[126.3867,52.2949],[126.3867,52.207],[126.5625,52.1631],[126.4746,51.9434],[126.9141,51.3721],[126.8262,51.2842],[127.002,51.3281],[126.9141,51.1084],[127.2656,50.7568],[127.3535,50.2734],[127.6172,50.2295],[127.5293,49.8779],[127.793,49.6143],[128.7598,49.5703],[129.1113,49.3506],[129.4629,49.4385],[130.2539,48.8672],[130.6934,48.8672],[130.5176,48.6475],[130.8691,48.2959],[130.6934,48.1201],[131.0449,47.6807],[132.5391,47.7246],[132.627,47.9443],[133.0664,48.1201],[133.5059,48.1201],[134.209,48.3838],[135.0879,48.4277],[134.7363,48.252],[134.5605,47.9883],[134.7363,47.6807],[134.5605,47.4609],[134.3848,47.4609],[134.209,47.2852],[134.209,47.1533],[133.8574,46.5381],[133.9453,46.2744],[133.5059,45.835],[133.418,45.5713],[133.2422,45.5273],[133.0664,45.1318],[132.8906,45.0439],[131.9238,45.3516],[131.5723,45.0439],[131.0449,44.8682],[131.3086,44.0771],[131.2207,43.7256],[131.3086,43.4619],[130.8691,43.418],[130.5176,43.6377],[130.3418,43.9893],[129.9902,43.8574],[129.9023,44.0332],[129.8145,43.9014],[129.2871,43.8135],[129.1992,43.5938],[128.8477,43.5498],[128.4961,44.165],[128.4082,44.4727],[128.0566,44.3408],[128.0566,44.1211],[127.7051,44.1211],[127.5293,44.6045],[127.0898,44.6045],[127.002,44.7803],[127.0898,45],[126.9141,45.1318],[126.5625,45.2637],[126.0352,45.1758],[125.7715,45.3076],[125.6836,45.5273],[125.0684,45.3955],[124.8926,45.5273],[124.3652,45.4395],[124.0137,45.7471],[123.9258,46.2305],[123.2227,46.2305],[123.0469,46.582],[123.5742,46.6699],[123.5742,46.8896],[123.5742,46.8457],[123.4863,46.9775],[123.3984,46.9775],[123.3984,46.8896],[123.0469,46.7139],[122.4316,47.373],[124.2773,48.5156],[124.4531,48.1201],[124.8047,49.1309],[125.2441,49.1748],[125.1563,49.834],[125.332,50.1416],[125.7715,50.5371],[125.7715,50.7568],[126.0352,51.0205],[125.332,51.6357],[125.0684,51.6357],[124.8926,51.3721],[124.541,51.3721],[124.3652,51.2842],[123.6621,51.3721],[123.3105,51.2402],[122.959,51.3281],[122.6074,52.0752],[122.6953,52.251],[122.168,52.5146],[121.9922,52.2949],[121.7285,52.2949],[121.6406,52.4268],[121.2012,52.5586],[121.8164,53.042],[121.4648,53.3496]]]}},{"type":"Feature","properties":{"id":"62","size":"690","name":"甘肃","cp":[103.823557,36.058039],"childNum":14},"geometry":{"type":"Polygon","coordinates":[[[96.416,42.7148],[97.207,42.8027],[97.8223,41.748],[97.8223,41.6162],[97.4707,41.4844],[98.3496,40.9131],[98.3496,40.5615],[98.6133,40.6494],[98.5254,40.7373],[98.7891,40.6055],[98.9648,40.7813],[99.0527,40.6934],[99.2285,40.8691],[99.9316,41.001],[100.1953,40.6494],[100.1074,40.2539],[99.4922,39.8584],[100.0195,39.7705],[100.5469,39.4189],[100.8105,39.4189],[100.9863,38.9355],[101.25,39.0234],[101.3379,38.7598],[101.7773,38.6719],[102.041,38.8916],[101.8652,39.1113],[102.4805,39.2432],[103.0078,39.1113],[103.3594,39.3311],[104.0625,39.4189],[104.2383,38.9795],[103.4473,38.3643],[103.5352,38.1445],[103.3594,38.0127],[103.4473,37.8369],[104.3262,37.4414],[104.5898,37.4414],[104.5898,37.2217],[104.8535,37.2217],[105.293,36.8262],[105.2051,36.6943],[105.4688,36.123],[105.293,35.9912],[105.3809,35.7715],[105.7324,35.7275],[105.8203,35.5518],[105.9961,35.4639],[105.9082,35.4199],[105.9961,35.4199],[106.084,35.376],[106.2598,35.4199],[106.3477,35.2441],[106.5234,35.332],[106.4355,35.6836],[106.6992,35.6836],[106.9629,35.8154],[106.875,36.123],[106.5234,36.2549],[106.5234,36.4746],[106.4355,36.5625],[106.6113,36.7822],[106.6113,37.0898],[107.3145,37.0898],[107.3145,36.9141],[108.7207,36.3428],[108.6328,35.9912],[108.5449,35.8594],[108.6328,35.5518],[108.5449,35.2881],[107.7539,35.2881],[107.7539,35.1123],[107.8418,35.0244],[107.666,34.9365],[107.2266,34.8926],[106.9629,35.0684],[106.6113,35.0684],[106.5234,34.7607],[106.3477,34.585],[106.6992,34.3213],[106.5234,34.2773],[106.6113,34.1455],[106.4355,33.9258],[106.5234,33.5303],[105.9961,33.6182],[105.7324,33.3984],[105.9961,33.1787],[105.9082,33.0029],[105.4688,32.915],[105.3809,32.8711],[105.3809,32.7393],[105.2051,32.6074],[104.4141,32.7393],[104.3262,32.8711],[104.4141,33.0469],[104.3262,33.2227],[104.4141,33.3105],[104.2383,33.3984],[104.1504,33.6182],[103.1836,33.7939],[103.0957,34.1895],[102.9199,34.3213],[102.2168,33.9258],[102.4805,33.4424],[101.8652,33.0908],[101.9531,33.4424],[101.8652,33.5742],[101.7773,33.5303],[101.6016,33.5303],[101.5137,33.7061],[101.25,33.6621],[100.8105,34.2773],[100.9863,34.3652],[101.6895,34.1016],[102.1289,34.2773],[102.2168,34.4092],[101.9531,34.6289],[101.9531,34.8486],[102.3926,35.2002],[102.3047,35.4199],[102.4805,35.5957],[102.832,35.5957],[102.6563,35.7715],[102.9199,35.9033],[102.9199,36.0791],[103.0078,36.2549],[102.832,36.3428],[102.5684,36.7383],[102.6563,36.8262],[102.4805,36.958],[102.5684,37.1777],[102.1289,37.4414],[101.9531,37.7051],[101.7773,37.6172],[101.5137,37.8809],[101.1621,37.8369],[100.7227,38.2324],[100.459,38.2764],[100.1074,38.4961],[100.0195,38.4521],[100.1953,38.2764],[99.8438,38.3643],[99.1406,38.9355],[98.7891,39.0674],[98.6133,38.9355],[98.3496,39.0234],[98.1738,38.8037],[97.0313,39.1992],[97.1191,38.584],[96.6797,38.4521],[96.6797,38.1885],[96.416,38.2324],[96.2402,38.1006],[95.7129,38.3643],[95.4492,38.2764],[95.0098,38.4082],[94.5703,38.3643],[94.3066,38.7598],[93.8672,38.7158],[93.6914,38.9355],[93.1641,38.9795],[93.1641,39.1992],[92.373,39.1113],[92.373,39.3311],[92.6367,39.6387],[93.0762,40.6494],[93.8672,40.6934],[94.043,41.0889],[94.5703,41.4844],[95.1855,41.792],[95.2734,41.6162],[95.9766,41.9238],[96.2402,42.2314],[96.0645,42.3193],[95.9766,42.4951],[96.416,42.7148]]]}},{"type":"Feature","properties":{"id":"53","size":"1200","name":"云南","cp":[101.512251,24.740609],"childNum":16},"geometry":{"type":"Polygon","coordinates":[[[98.1738,28.125],[98.2617,28.3887],[98.3496,28.125],[98.7012,28.2129],[98.7891,28.3447],[98.6133,28.5205],[98.7012,28.916],[98.7891,29.0039],[98.7891,28.8721],[98.9648,28.8281],[98.9648,29.1357],[99.1406,29.2676],[99.2285,28.3008],[99.4043,28.1689],[99.4043,28.5205],[99.668,28.8281],[100.1953,28.3447],[100.0195,28.125],[100.2832,27.7295],[100.3711,27.8174],[100.7227,27.8613],[101.1621,27.1582],[101.1621,27.0264],[101.4258,26.7188],[101.4258,26.8066],[101.4258,26.5869],[101.6895,26.3672],[101.6016,26.2354],[101.8652,26.0596],[102.1289,26.1035],[102.5684,26.3672],[102.6563,26.1914],[103.0078,26.3672],[102.9199,27.29],[103.4473,27.7734],[103.4473,28.125],[103.7988,28.3008],[103.8867,28.6523],[104.4141,28.6084],[104.2383,28.4326],[104.4141,28.2568],[104.4141,28.125],[104.3262,28.0371],[104.4141,27.9492],[104.8535,27.9053],[105.0293,28.0811],[105.2051,27.9932],[105.293,27.7295],[105.2051,27.3779],[104.5898,27.334],[104.4141,27.4658],[104.1504,27.2461],[103.8867,27.4219],[103.623,27.0264],[103.7109,26.9824],[103.7109,26.7627],[103.8867,26.543],[104.4141,26.6748],[104.6777,26.4111],[104.3262,25.708],[104.8535,25.2246],[104.5898,25.0488],[104.6777,24.9609],[104.502,24.7412],[104.6777,24.3457],[104.7656,24.4775],[105.0293,24.4336],[105.2051,24.082],[105.4688,24.0381],[105.5566,24.126],[105.9961,24.126],[106.1719,23.8184],[106.1719,23.5547],[105.6445,23.4229],[105.5566,23.2031],[105.293,23.3789],[104.8535,23.1592],[104.7656,22.8516],[104.3262,22.6758],[104.1504,22.8076],[103.9746,22.5439],[103.623,22.7637],[103.5352,22.5879],[103.3594,22.8076],[103.0957,22.4561],[102.4805,22.7637],[102.3047,22.4121],[101.8652,22.3682],[101.7773,22.5],[101.6016,22.1924],[101.8652,21.6211],[101.7773,21.1377],[101.6016,21.2256],[101.25,21.1816],[101.1621,21.7529],[100.6348,21.4453],[100.1074,21.4893],[99.9316,22.0605],[99.2285,22.1484],[99.4043,22.5879],[99.3164,22.7197],[99.4922,23.0713],[98.877,23.2031],[98.7012,23.9502],[98.877,24.126],[98.1738,24.082],[97.7344,23.8623],[97.5586,23.9063],[97.7344,24.126],[97.6465,24.4336],[97.5586,24.4336],[97.5586,24.7412],[97.7344,24.8291],[97.8223,25.2686],[98.1738,25.4004],[98.1738,25.6201],[98.3496,25.5762],[98.5254,25.8398],[98.7012,25.8838],[98.6133,26.0596],[98.7012,26.1475],[98.7891,26.5869],[98.7012,27.5098],[98.5254,27.6416],[98.3496,27.5098],[98.1738,28.125]]]}},{"type":"Feature","properties":{"id":"45","size":"1450","name":"广西","cp":[107.7813,23.6426],"childNum":14},"geometry":{"type":"Polygon","coordinates":[[[104.502,24.7412],[104.6777,24.6094],[105.2051,24.9609],[105.9961,24.6533],[106.1719,24.7852],[106.1719,24.9609],[106.875,25.1807],[107.0508,25.2686],[106.9629,25.4883],[107.2266,25.6201],[107.4902,25.2246],[107.7539,25.2246],[107.8418,25.1367],[108.1055,25.2246],[108.1934,25.4443],[108.3691,25.5322],[108.6328,25.3125],[108.6328,25.5762],[109.0723,25.5322],[108.9844,25.752],[109.3359,25.708],[109.5117,26.0156],[109.7754,25.8838],[109.9512,26.1914],[110.2148,25.9717],[110.5664,26.3232],[111.1816,26.3232],[111.2695,26.2354],[111.2695,25.8838],[111.4453,25.8398],[111.0059,25.0049],[111.0938,24.9609],[111.3574,25.1367],[111.5332,24.6533],[111.709,24.7852],[112.0605,24.7412],[111.8848,24.6533],[112.0605,24.3457],[111.8848,24.2139],[111.8848,23.9941],[111.7969,23.8184],[111.6211,23.8184],[111.6211,23.6865],[111.3574,23.4668],[111.4453,23.0273],[111.2695,22.8076],[110.7422,22.5439],[110.7422,22.2803],[110.6543,22.1484],[110.3027,22.1484],[110.3027,21.8848],[109.9512,21.8408],[109.8633,21.665],[109.7754,21.6211],[109.7754,21.4014],[109.5996,21.4453],[109.1602,21.3574],[109.248,20.874],[109.0723,20.9619],[109.0723,21.5332],[108.7207,21.5332],[108.6328,21.665],[108.2813,21.4893],[107.8418,21.6211],[107.4023,21.6211],[107.0508,21.7969],[107.0508,21.9287],[106.6992,22.0166],[106.6113,22.4121],[106.7871,22.7637],[106.6992,22.8955],[105.9082,22.9395],[105.5566,23.0713],[105.5566,23.2031],[105.6445,23.4229],[106.1719,23.5547],[106.1719,23.8184],[105.9961,24.126],[105.5566,24.126],[105.4688,24.0381],[105.2051,24.082],[105.0293,24.4336],[104.7656,24.4775],[104.6777,24.3457],[104.502,24.7412]]]}},{"type":"Feature","properties":{"id":"43","size":"1700","name":"湖南","cp":[111.782279,28.09409],"childNum":14},"geometry":{"type":"Polygon","coordinates":[[[109.248,28.4766],[109.248,29.1357],[109.5117,29.6191],[109.6875,29.6191],[109.7754,29.751],[110.4785,29.6631],[110.6543,29.751],[110.4785,30.0146],[110.8301,30.1465],[111.7969,29.9268],[112.2363,29.5313],[112.5,29.6191],[112.6758,29.5752],[112.9395,29.7949],[113.0273,29.751],[112.9395,29.4873],[113.0273,29.4434],[113.5547,29.8389],[113.5547,29.707],[113.7305,29.5752],[113.6426,29.3115],[113.7305,29.0918],[113.9063,29.0479],[114.1699,28.8281],[114.082,28.5645],[114.2578,28.3447],[113.7305,27.9492],[113.6426,27.5977],[113.6426,27.3779],[113.8184,27.29],[113.7305,27.1143],[113.9063,26.9385],[113.9063,26.6309],[114.082,26.5869],[113.9941,26.1914],[114.2578,26.1475],[113.9941,26.0596],[113.9063,25.4443],[113.6426,25.3125],[113.2031,25.5322],[112.8516,25.3564],[113.0273,25.2246],[113.0273,24.9609],[112.8516,24.917],[112.5879,25.1367],[112.2363,25.1807],[112.1484,24.873],[112.0605,24.7412],[111.709,24.7852],[111.5332,24.6533],[111.3574,25.1367],[111.0938,24.9609],[111.0059,25.0049],[111.4453,25.8398],[111.2695,25.8838],[111.2695,26.2354],[111.1816,26.3232],[110.5664,26.3232],[110.2148,25.9717],[109.9512,26.1914],[109.7754,25.8838],[109.5117,26.0156],[109.4238,26.2793],[109.248,26.3232],[109.4238,26.5869],[109.3359,26.7188],[109.5117,26.8066],[109.5117,27.0264],[109.3359,27.1582],[108.8965,27.0264],[108.8086,27.1143],[109.4238,27.5977],[109.3359,27.9053],[109.3359,28.2568],[109.248,28.4766]]]}},{"type":"Feature","properties":{"id":"61","size":"1150","name":"陕西","cp":[108.948024,34.263161],"childNum":10},"geometry":{"type":"Polygon","coordinates":[[[105.4688,32.915],[105.9082,33.0029],[105.9961,33.1787],[105.7324,33.3984],[105.9961,33.6182],[106.5234,33.5303],[106.4355,33.9258],[106.6113,34.1455],[106.5234,34.2773],[106.6992,34.3213],[106.3477,34.585],[106.5234,34.7607],[106.6113,35.0684],[106.9629,35.0684],[107.2266,34.8926],[107.666,34.9365],[107.8418,35.0244],[107.7539,35.1123],[107.7539,35.2881],[108.5449,35.2881],[108.6328,35.5518],[108.5449,35.8594],[108.6328,35.9912],[108.7207,36.3428],[107.3145,36.9141],[107.3145,37.0898],[107.3145,37.6172],[107.666,37.8809],[108.1934,37.6172],[108.7207,37.7051],[108.8086,38.0127],[108.8965,37.9688],[109.0723,38.0127],[108.9844,38.3203],[109.9512,39.1553],[109.8633,39.2432],[110.2148,39.2871],[110.127,39.4629],[110.6543,39.2871],[111.0938,39.5947],[111.0938,39.375],[111.1816,39.2432],[110.918,38.7158],[110.8301,38.4961],[110.4785,38.1885],[110.4785,37.9688],[110.8301,37.6611],[110.3906,37.002],[110.4785,36.123],[110.5664,35.6396],[110.2148,34.8926],[110.2148,34.6729],[110.3906,34.585],[110.4785,34.2334],[110.6543,34.1455],[110.6543,33.8379],[111.0059,33.5303],[111.0059,33.2666],[110.7422,33.1348],[110.5664,33.2666],[110.3027,33.1787],[109.5996,33.2666],[109.4238,33.1348],[109.7754,33.0469],[109.7754,32.915],[110.127,32.7393],[110.127,32.6074],[109.6875,32.6074],[109.5117,32.4316],[109.5996,31.7285],[109.248,31.7285],[109.0723,31.9482],[108.5449,32.2119],[108.2813,32.2559],[108.0176,32.168],[107.4023,32.5195],[107.2266,32.4316],[107.1387,32.4756],[107.0508,32.6953],[106.3477,32.6514],[106.084,32.7393],[106.084,32.8711],[105.5566,32.7393],[105.4688,32.915]]]}},{"type":"Feature","properties":{"id":"44","size":"1600","name":"广东","cp":[113.280637,23.125178],"childNum":21},"geometry":{"type":"Polygon","coordinates":[[[109.7754,21.4014],[109.7754,21.6211],[109.8633,21.665],[109.9512,21.8408],[110.3027,21.8848],[110.3027,22.1484],[110.6543,22.1484],[110.7422,22.2803],[110.7422,22.5439],[111.2695,22.8076],[111.4453,23.0273],[111.3574,23.4668],[111.6211,23.6865],[111.6211,23.8184],[111.7969,23.8184],[111.8848,23.9941],[111.8848,24.2139],[112.0605,24.3457],[111.8848,24.6533],[112.0605,24.7412],[112.1484,24.873],[112.2363,25.1807],[112.5879,25.1367],[112.8516,24.917],[113.0273,24.9609],[113.0273,25.2246],[112.8516,25.3564],[113.2031,25.5322],[113.6426,25.3125],[113.9063,25.4443],[113.9941,25.2686],[114.6094,25.4004],[114.7852,25.2686],[114.6973,25.1367],[114.4336,24.9609],[114.1699,24.6973],[114.4336,24.5215],[115.4004,24.7852],[115.8398,24.5654],[115.752,24.7852],[115.9277,24.917],[116.2793,24.7852],[116.3672,24.873],[116.543,24.6094],[116.7188,24.6533],[116.9824,24.1699],[116.9824,23.9063],[117.1582,23.5547],[117.334,23.2471],[116.8945,23.3789],[116.6309,23.1152],[116.543,22.8516],[115.9277,22.7197],[115.6641,22.7637],[115.5762,22.6318],[115.0488,22.6758],[114.6094,22.3682],[114.3457,22.5439],[113.9941,22.5],[113.8184,22.1924],[114.3457,22.1484],[114.4336,22.0166],[114.082,21.9287],[113.9941,21.7969],[113.5547,22.0166],[113.1152,21.8408],[112.9395,21.5771],[112.4121,21.4453],[112.2363,21.5332],[111.5332,21.4893],[111.2695,21.3574],[110.7422,21.3574],[110.6543,21.2256],[110.7422,20.918],[110.4785,20.874],[110.6543,20.2588],[110.5664,20.2588],[110.3906,20.127],[110.0391,20.127],[109.8633,20.127],[109.8633,20.3027],[109.5996,20.918],[109.7754,21.4014],[109.7754,21.4014]],[[113.5986,22.1649],[113.6096,22.1265],[113.5547,22.11],[113.5437,22.2034],[113.5767,22.2034],[113.5986,22.1649]]]}},{"type":"Feature","properties":{"id":"22","size":"1120","name":"吉林","cp":[125.7746,43.5938],"childNum":9},"geometry":{"type":"Polygon","coordinates":[[[123.2227,46.2305],[123.9258,46.2305],[124.0137,45.7471],[124.3652,45.4395],[124.8926,45.5273],[125.0684,45.3955],[125.6836,45.5273],[125.7715,45.3076],[126.0352,45.1758],[126.5625,45.2637],[126.9141,45.1318],[127.0898,45],[127.002,44.7803],[127.0898,44.6045],[127.5293,44.6045],[127.7051,44.1211],[128.0566,44.1211],[128.0566,44.3408],[128.4082,44.4727],[128.4961,44.165],[128.8477,43.5498],[129.1992,43.5938],[129.2871,43.8135],[129.8145,43.9014],[129.9023,44.0332],[129.9902,43.8574],[130.3418,43.9893],[130.5176,43.6377],[130.8691,43.418],[131.3086,43.4619],[131.3086,43.3301],[131.1328,42.9346],[130.4297,42.7148],[130.6055,42.6709],[130.6055,42.4512],[130.2539,42.7588],[130.2539,42.8906],[130.166,42.9785],[129.9023,43.0225],[129.7266,42.4951],[129.375,42.4512],[128.9355,42.0117],[128.0566,42.0117],[128.3203,41.5723],[128.1445,41.3525],[127.0898,41.5283],[127.1777,41.5723],[126.9141,41.792],[126.6504,41.6602],[126.4746,41.3965],[126.123,40.957],[125.6836,40.8691],[125.5957,40.9131],[125.7715,41.2207],[125.332,41.6602],[125.332,41.9678],[125.4199,42.0996],[125.332,42.1436],[124.8926,42.8027],[124.8926,43.0664],[124.7168,43.0664],[124.4531,42.8467],[124.2773,43.2422],[123.8379,43.4619],[123.6621,43.374],[123.3105,43.5059],[123.4863,43.7256],[123.1348,44.4727],[122.3438,44.2529],[122.0801,44.8682],[122.2559,45.2637],[121.9043,45.7031],[121.7285,45.7471],[121.8164,46.0107],[122.2559,45.791],[122.4316,45.8789],[122.6953,45.7031],[122.7832,46.0107],[123.2227,46.2305]]]}},{"type":"Feature","properties":{"id":"13","size":"1300","name":"河北","cp":[114.502461,38.045474],"childNum":11},"geometry":{"type":"MultiPolygon","coordinates":[[[[114.5215,39.5068],[114.3457,39.8584],[113.9941,39.9902],[114.5215,40.3418],[114.3457,40.3857],[114.2578,40.6055],[114.082,40.7373],[113.9063,41.1328],[113.9941,41.2207],[113.9063,41.4404],[114.2578,41.5723],[114.1699,41.792],[114.5215,42.1436],[114.873,42.0996],[114.9609,41.6162],[115.2246,41.5723],[115.9277,41.9238],[116.0156,41.792],[116.2793,42.0117],[116.8066,42.0117],[116.8945,42.4072],[117.334,42.4512],[117.5098,42.583],[117.7734,42.627],[118.0371,42.4072],[117.9492,42.2314],[118.125,42.0557],[118.3008,42.0996],[118.3008,41.792],[118.125,41.748],[118.3887,41.3086],[119.2676,41.3086],[118.8281,40.8252],[119.2676,40.5176],[119.5313,40.5615],[119.707,40.1221],[119.8828,39.9463],[119.5313,39.6826],[119.4434,39.4189],[118.916,39.0674],[118.4766,38.9355],[118.125,39.0234],[118.0371,39.1992],[118.0371,39.2432],[117.8613,39.4189],[117.9492,39.5947],[117.6855,39.5947],[117.5098,39.7705],[117.5098,39.9902],[117.6855,39.9902],[117.6855,40.0781],[117.4219,40.21],[117.2461,40.5176],[117.4219,40.6494],[116.9824,40.6934],[116.6309,41.0449],[116.3672,40.9131],[116.4551,40.7813],[116.1914,40.7813],[116.1035,40.6055],[115.752,40.5615],[115.9277,40.2539],[115.4004,39.9463],[115.4883,39.6387],[115.752,39.5068],[116.1914,39.5947],[116.3672,39.4629],[116.543,39.5947],[116.8066,39.5947],[116.8945,39.1113],[116.7188,38.9355],[116.7188,38.8037],[117.2461,38.54],[117.5977,38.6279],[117.9492,38.3203],[117.4219,37.8369],[116.8066,37.8369],[116.4551,37.4854],[116.2793,37.5732],[116.2793,37.3535],[116.0156,37.3535],[115.752,36.9141],[115.3125,36.5186],[115.4883,36.167],[115.3125,36.0791],[115.1367,36.2109],[114.9609,36.0791],[114.873,36.123],[113.7305,36.3428],[113.4668,36.6504],[113.7305,36.8701],[113.7305,37.1338],[114.1699,37.6611],[113.9941,37.7051],[113.8184,38.1445],[113.5547,38.2764],[113.5547,38.54],[113.8184,38.8037],[113.8184,38.9355],[113.9063,39.0234],[114.3457,39.0674],[114.5215,39.5068]]],[[[117.2461,40.0781],[117.1582,39.8145],[117.1582,39.6387],[116.8945,39.6826],[116.8945,39.8145],[116.8066,39.9902],[117.2461,40.0781]]]]}},{"type":"Feature","properties":{"id":"42","size":"1500","name":"湖北","cp":[113.298572,30.684355],"childNum":17},"geometry":{"type":"Polygon","coordinates":[[[110.2148,31.1572],[110.127,31.377],[109.6875,31.5527],[109.7754,31.6846],[109.5996,31.7285],[109.5117,32.4316],[109.6875,32.6074],[110.127,32.6074],[110.127,32.7393],[109.7754,32.915],[109.7754,33.0469],[109.4238,33.1348],[109.5996,33.2666],[110.3027,33.1787],[110.5664,33.2666],[110.7422,33.1348],[111.0059,33.2666],[111.5332,32.6074],[112.3242,32.3438],[113.2031,32.4316],[113.4668,32.2998],[113.7305,32.4316],[113.8184,31.8604],[113.9941,31.7725],[114.1699,31.8604],[114.5215,31.7725],[114.6094,31.5527],[114.7852,31.4648],[115.1367,31.5967],[115.2246,31.4209],[115.4004,31.4209],[115.5762,31.2012],[116.0156,31.0254],[115.752,30.6738],[116.1035,30.1904],[116.1035,29.8389],[115.9277,29.707],[115.4883,29.7949],[114.873,29.3994],[114.2578,29.3555],[113.9063,29.0479],[113.7305,29.0918],[113.6426,29.3115],[113.7305,29.5752],[113.5547,29.707],[113.5547,29.8389],[113.0273,29.4434],[112.9395,29.4873],[113.0273,29.751],[112.9395,29.7949],[112.6758,29.5752],[112.5,29.6191],[112.2363,29.5313],[111.7969,29.9268],[110.8301,30.1465],[110.4785,30.0146],[110.6543,29.751],[110.4785,29.6631],[109.7754,29.751],[109.6875,29.6191],[109.5117,29.6191],[109.248,29.1357],[109.0723,29.3555],[108.9844,29.3115],[108.6328,29.8389],[108.457,29.7949],[108.5449,30.2344],[108.457,30.4102],[108.6328,30.5859],[108.8086,30.498],[109.0723,30.6299],[109.1602,30.542],[109.248,30.6299],[109.4238,30.542],[109.8633,30.8936],[110.0391,30.8057],[110.2148,31.1572]]]}},{"type":"Feature","properties":{"id":"52","size":"2000","name":"贵州","cp":[106.6113,26.9385],"childNum":9},"geometry":{"type":"Polygon","coordinates":[[[104.1504,27.2461],[104.4141,27.4658],[104.5898,27.334],[105.2051,27.3779],[105.293,27.7295],[105.5566,27.7734],[105.6445,27.6416],[106.3477,27.8174],[106.1719,28.125],[105.9082,28.125],[105.6445,28.4326],[105.9961,28.7402],[106.3477,28.5205],[106.5234,28.5645],[106.4355,28.7842],[106.5234,28.7842],[106.6113,28.6523],[106.6113,28.5205],[106.6992,28.4766],[106.875,28.7842],[107.4023,28.8721],[107.4023,29.1797],[107.5781,29.2236],[107.8418,29.1357],[107.8418,29.0039],[108.2813,29.0918],[108.3691,28.6523],[108.5449,28.6523],[108.5449,28.3887],[108.7207,28.4766],[108.7207,28.2129],[109.0723,28.2129],[109.248,28.4766],[109.3359,28.2568],[109.3359,27.9053],[109.4238,27.5977],[108.8086,27.1143],[108.8965,27.0264],[109.3359,27.1582],[109.5117,27.0264],[109.5117,26.8066],[109.3359,26.7188],[109.4238,26.5869],[109.248,26.3232],[109.4238,26.2793],[109.5117,26.0156],[109.3359,25.708],[108.9844,25.752],[109.0723,25.5322],[108.6328,25.5762],[108.6328,25.3125],[108.3691,25.5322],[108.1934,25.4443],[108.1055,25.2246],[107.8418,25.1367],[107.7539,25.2246],[107.4902,25.2246],[107.2266,25.6201],[106.9629,25.4883],[107.0508,25.2686],[106.875,25.1807],[106.1719,24.9609],[106.1719,24.7852],[105.9961,24.6533],[105.2051,24.9609],[104.6777,24.6094],[104.502,24.7412],[104.6777,24.9609],[104.5898,25.0488],[104.8535,25.2246],[104.3262,25.708],[104.6777,26.4111],[104.4141,26.6748],[103.8867,26.543],[103.7109,26.7627],[103.7109,26.9824],[103.623,27.0264],[103.8867,27.4219],[104.1504,27.2461]]]}},{"type":"Feature","properties":{"id":"37","size":"1500","name":"山东","cp":[118.7402,36.4307],"childNum":17},"geometry":{"type":"Polygon","coordinates":[[[115.4883,36.167],[115.3125,36.5186],[115.752,36.9141],[116.0156,37.3535],[116.2793,37.3535],[116.2793,37.5732],[116.4551,37.4854],[116.8066,37.8369],[117.4219,37.8369],[117.9492,38.3203],[118.125,38.1445],[118.916,38.1445],[119.3555,37.6611],[119.0039,37.5293],[119.0039,37.3535],[119.3555,37.1338],[119.707,37.1338],[119.8828,37.3975],[120.498,37.8369],[120.5859,38.1445],[120.9375,38.4521],[121.0254,37.8369],[121.2012,37.6611],[121.9043,37.4854],[122.168,37.6172],[122.2559,37.4854],[122.6074,37.4854],[122.6953,37.3535],[122.6074,36.9141],[122.4316,36.7822],[121.8164,36.8701],[121.7285,36.6943],[121.1133,36.6064],[121.1133,36.4307],[121.377,36.2549],[120.7617,36.167],[120.9375,35.8594],[120.6738,36.0352],[119.707,35.4639],[119.9707,34.9805],[119.3555,35.0244],[119.2676,35.1123],[118.916,35.0244],[118.7402,34.7168],[118.4766,34.6729],[118.3887,34.4092],[118.2129,34.4092],[118.125,34.6289],[117.9492,34.6729],[117.5977,34.4531],[117.334,34.585],[117.2461,34.4531],[116.8066,34.9365],[116.4551,34.8926],[116.3672,34.6289],[116.1914,34.585],[115.5762,34.585],[115.4004,34.8486],[114.7852,35.0684],[115.0488,35.376],[115.2246,35.4199],[115.4883,35.7275],[116.1035,36.0791],[115.3125,35.8154],[115.4883,36.167]]]}},{"type":"Feature","properties":{"id":"36","size":"1700","name":"江西","cp":[115.592151,27.676493],"childNum":11},"geometry":{"type":"Polygon","coordinates":[[[114.2578,28.3447],[114.082,28.5645],[114.1699,28.8281],[113.9063,29.0479],[114.2578,29.3555],[114.873,29.3994],[115.4883,29.7949],[115.9277,29.707],[116.1035,29.8389],[116.2793,29.7949],[116.7188,30.0586],[116.8945,29.9268],[116.7188,29.751],[116.7188,29.6191],[117.1582,29.707],[117.0703,29.8389],[117.1582,29.9268],[117.5098,29.6191],[118.0371,29.5752],[118.2129,29.3994],[118.0371,29.1797],[118.0371,29.0479],[118.3887,28.7842],[118.4766,28.3447],[118.4766,28.3008],[118.3008,28.0811],[117.7734,27.8174],[117.5098,27.9932],[116.9824,27.6416],[117.1582,27.29],[117.0703,27.1143],[116.543,26.8066],[116.6309,26.4551],[116.3672,26.2354],[116.4551,26.1035],[116.1914,25.8838],[116.0156,25.2686],[115.8398,25.2246],[115.9277,24.917],[115.752,24.7852],[115.8398,24.5654],[115.4004,24.7852],[114.4336,24.5215],[114.1699,24.6973],[114.4336,24.9609],[114.6973,25.1367],[114.7852,25.2686],[114.6094,25.4004],[113.9941,25.2686],[113.9063,25.4443],[113.9941,26.0596],[114.2578,26.1475],[113.9941,26.1914],[114.082,26.5869],[113.9063,26.6309],[113.9063,26.9385],[113.7305,27.1143],[113.8184,27.29],[113.6426,27.3779],[113.6426,27.5977],[113.7305,27.9492],[114.2578,28.3447]]]}},{"type":"Feature","properties":{"id":"41","size":"1700","name":"河南","cp":[113.0668,33.8818],"childNum":17},"geometry":{"type":"Polygon","coordinates":[[[110.3906,34.585],[110.8301,34.6289],[111.1816,34.8047],[111.5332,34.8486],[111.7969,35.0684],[112.0605,35.0684],[112.0605,35.2881],[112.7637,35.2002],[113.1152,35.332],[113.6426,35.6836],[113.7305,36.3428],[114.873,36.123],[114.9609,36.0791],[115.1367,36.2109],[115.3125,36.0791],[115.4883,36.167],[115.3125,35.8154],[116.1035,36.0791],[115.4883,35.7275],[115.2246,35.4199],[115.0488,35.376],[114.7852,35.0684],[115.4004,34.8486],[115.5762,34.585],[116.1914,34.585],[116.1914,34.4092],[116.543,34.2773],[116.6309,33.9258],[116.1914,33.7061],[116.0156,33.9697],[115.6641,34.0576],[115.5762,33.9258],[115.5762,33.6621],[115.4004,33.5303],[115.3125,33.1787],[114.873,33.1348],[114.873,33.0029],[115.1367,32.8711],[115.2246,32.6074],[115.5762,32.4316],[115.8398,32.5195],[115.9277,31.7725],[115.4883,31.6846],[115.4004,31.4209],[115.2246,31.4209],[115.1367,31.5967],[114.7852,31.4648],[114.6094,31.5527],[114.5215,31.7725],[114.1699,31.8604],[113.9941,31.7725],[113.8184,31.8604],[113.7305,32.4316],[113.4668,32.2998],[113.2031,32.4316],[112.3242,32.3438],[111.5332,32.6074],[111.0059,33.2666],[111.0059,33.5303],[110.6543,33.8379],[110.6543,34.1455],[110.4785,34.2334],[110.3906,34.585]]]}},{"type":"Feature","properties":{"id":"21","size":"1500","name":"辽宁","cp":[122.0438,41.0889],"childNum":14},"geometry":{"type":"Polygon","coordinates":[[[119.2676,41.3086],[119.4434,41.6162],[119.2676,41.7041],[119.3555,42.2754],[119.5313,42.3633],[119.8828,42.1875],[120.1465,41.7041],[120.498,42.0996],[121.4648,42.4951],[121.7285,42.4512],[121.9922,42.7148],[122.3438,42.6709],[122.3438,42.8467],[122.7832,42.7148],[123.1348,42.8027],[123.3105,42.9785],[123.5742,43.0225],[123.6621,43.374],[123.8379,43.4619],[124.2773,43.2422],[124.4531,42.8467],[124.7168,43.0664],[124.8926,43.0664],[124.8926,42.8027],[125.332,42.1436],[125.4199,42.0996],[125.332,41.9678],[125.332,41.6602],[125.7715,41.2207],[125.5957,40.9131],[125.6836,40.8691],[124.541,40.21],[124.1016,39.6826],[123.3984,39.6826],[123.1348,39.4189],[123.1348,39.0234],[122.0801,39.0234],[121.5527,38.7158],[121.1133,38.6719],[120.9375,38.9795],[121.377,39.1992],[121.2012,39.5508],[122.0801,40.3857],[121.9922,40.6934],[121.7285,40.8252],[121.2012,40.8252],[120.5859,40.21],[119.8828,39.9463],[119.707,40.1221],[119.5313,40.5615],[119.2676,40.5176],[118.8281,40.8252],[119.2676,41.3086]]]}},{"type":"Feature","properties":{"id":"14","size":"1450","name":"山西","cp":[111.849248,36.857014],"childNum":11},"geometry":{"type":"Polygon","coordinates":[[[110.918,38.7158],[111.1816,39.2432],[111.0938,39.375],[111.3574,39.4189],[111.4453,39.6387],[111.9727,39.5947],[112.3242,40.2539],[112.7637,40.166],[113.2031,40.3857],[113.5547,40.3418],[113.8184,40.5176],[114.082,40.5176],[114.082,40.7373],[114.2578,40.6055],[114.3457,40.3857],[114.5215,40.3418],[113.9941,39.9902],[114.3457,39.8584],[114.5215,39.5068],[114.3457,39.0674],[113.9063,39.0234],[113.8184,38.9355],[113.8184,38.8037],[113.5547,38.54],[113.5547,38.2764],[113.8184,38.1445],[113.9941,37.7051],[114.1699,37.6611],[113.7305,37.1338],[113.7305,36.8701],[113.4668,36.6504],[113.7305,36.3428],[113.6426,35.6836],[113.1152,35.332],[112.7637,35.2002],[112.0605,35.2881],[112.0605,35.0684],[111.7969,35.0684],[111.5332,34.8486],[111.1816,34.8047],[110.8301,34.6289],[110.3906,34.585],[110.2148,34.6729],[110.2148,34.8926],[110.5664,35.6396],[110.4785,36.123],[110.3906,37.002],[110.8301,37.6611],[110.4785,37.9688],[110.4785,38.1885],[110.8301,38.4961],[110.918,38.7158]]]}},{"type":"Feature","properties":{"id":"34","size":"1700","name":"安徽","cp":[117.283042,31.26119],"childNum":17},"geometry":{"type":"Polygon","coordinates":[[[116.6309,33.9258],[116.543,34.2773],[116.1914,34.4092],[116.1914,34.585],[116.3672,34.6289],[116.8945,34.4092],[117.1582,34.0576],[117.5977,34.0137],[117.7734,33.7061],[118.125,33.75],[117.9492,33.2227],[118.0371,33.1348],[118.2129,33.2227],[118.3008,32.7832],[118.7402,32.7393],[118.916,32.959],[119.1797,32.8271],[119.1797,32.4756],[118.5645,32.5635],[118.6523,32.2119],[118.4766,32.168],[118.3887,31.9482],[118.916,31.5527],[118.7402,31.377],[118.8281,31.2451],[119.3555,31.2891],[119.4434,31.1572],[119.6191,31.1133],[119.6191,31.0693],[119.4434,30.6738],[119.2676,30.6299],[119.3555,30.4102],[118.916,30.3223],[118.916,29.9707],[118.7402,29.707],[118.2129,29.3994],[118.0371,29.5752],[117.5098,29.6191],[117.1582,29.9268],[117.0703,29.8389],[117.1582,29.707],[116.7188,29.6191],[116.7188,29.751],[116.8945,29.9268],[116.7188,30.0586],[116.2793,29.7949],[116.1035,29.8389],[116.1035,30.1904],[115.752,30.6738],[116.0156,31.0254],[115.5762,31.2012],[115.4004,31.4209],[115.4883,31.6846],[115.9277,31.7725],[115.8398,32.5195],[115.5762,32.4316],[115.2246,32.6074],[115.1367,32.8711],[114.873,33.0029],[114.873,33.1348],[115.3125,33.1787],[115.4004,33.5303],[115.5762,33.6621],[115.5762,33.9258],[115.6641,34.0576],[116.0156,33.9697],[116.1914,33.7061],[116.6309,33.9258]]]}},{"type":"Feature","properties":{"id":"35","size":"2000","name":"福建","cp":[118.306239,26.075302],"childNum":9},"geometry":{"type":"Polygon","coordinates":[[[118.4766,28.3008],[118.8281,28.2568],[118.7402,28.0371],[118.916,27.4658],[119.2676,27.4219],[119.6191,27.6855],[119.7949,27.29],[120.2344,27.4219],[120.4102,27.1582],[120.7617,27.0264],[120.6738,26.8945],[120.2344,26.8506],[120.2344,26.7188],[120.4102,26.6748],[120.498,26.3672],[120.2344,26.2793],[120.4102,26.1475],[120.0586,26.1914],[119.9707,25.9277],[119.7949,25.9277],[119.9707,25.4004],[119.7949,25.2686],[119.5313,25.1367],[119.4434,25.0049],[119.2676,25.0928],[118.916,24.8291],[118.6523,24.5215],[118.4766,24.5215],[118.4766,24.4336],[118.2129,24.3457],[118.2129,24.1699],[117.8613,23.9941],[117.7734,23.7744],[117.5098,23.5986],[117.1582,23.5547],[116.9824,23.9063],[116.9824,24.1699],[116.7188,24.6533],[116.543,24.6094],[116.3672,24.873],[116.2793,24.7852],[115.9277,24.917],[115.8398,25.2246],[116.0156,25.2686],[116.1914,25.8838],[116.4551,26.1035],[116.3672,26.2354],[116.6309,26.4551],[116.543,26.8066],[117.0703,27.1143],[117.1582,27.29],[116.9824,27.6416],[117.5098,27.9932],[117.7734,27.8174],[118.3008,28.0811],[118.4766,28.3008]]]}},{"type":"Feature","properties":{"id":"33","size":"2100","name":"浙江","cp":[120.498,29.0918],"childNum":11},"geometry":{"type":"Polygon","coordinates":[[[118.2129,29.3994],[118.7402,29.707],[118.916,29.9707],[118.916,30.3223],[119.3555,30.4102],[119.2676,30.6299],[119.4434,30.6738],[119.6191,31.0693],[119.6191,31.1133],[119.9707,31.1572],[120.498,30.8057],[120.9375,31.0254],[121.2891,30.6738],[121.9922,30.8057],[122.6953,30.8936],[122.8711,30.7178],[122.959,30.1465],[122.6074,30.1025],[122.6074,29.9268],[122.168,29.5313],[122.3438,28.8721],[121.9922,28.8721],[121.9922,28.4326],[121.7285,28.3447],[121.7285,28.2129],[121.4648,28.2129],[121.5527,28.0371],[121.2891,27.9492],[121.1133,27.4219],[120.6738,27.334],[120.6738,27.1582],[120.9375,27.0264],[120.7617,27.0264],[120.4102,27.1582],[120.2344,27.4219],[119.7949,27.29],[119.6191,27.6855],[119.2676,27.4219],[118.916,27.4658],[118.7402,28.0371],[118.8281,28.2568],[118.4766,28.3008],[118.4766,28.3447],[118.3887,28.7842],[118.0371,29.0479],[118.0371,29.1797],[118.2129,29.3994]]]}},{"type":"Feature","properties":{"id":"32","size":"1950","name":"江苏","cp":[119.767413,33.041544],"childNum":13},"geometry":{"type":"Polygon","coordinates":[[[116.3672,34.6289],[116.4551,34.8926],[116.8066,34.9365],[117.2461,34.4531],[117.334,34.585],[117.5977,34.4531],[117.9492,34.6729],[118.125,34.6289],[118.2129,34.4092],[118.3887,34.4092],[118.4766,34.6729],[118.7402,34.7168],[118.916,35.0244],[119.2676,35.1123],[119.3555,35.0244],[119.3555,34.8486],[119.707,34.585],[120.3223,34.3652],[120.9375,33.0469],[121.0254,32.6514],[121.377,32.4756],[121.4648,32.168],[121.9043,31.9922],[121.9922,31.6846],[121.9922,31.5967],[121.2012,31.8604],[121.1133,31.7285],[121.377,31.5088],[121.2012,31.4648],[120.9375,31.0254],[120.498,30.8057],[119.9707,31.1572],[119.6191,31.1133],[119.4434,31.1572],[119.3555,31.2891],[118.8281,31.2451],[118.7402,31.377],[118.916,31.5527],[118.3887,31.9482],[118.4766,32.168],[118.6523,32.2119],[118.5645,32.5635],[119.1797,32.4756],[119.1797,32.8271],[118.916,32.959],[118.7402,32.7393],[118.3008,32.7832],[118.2129,33.2227],[118.0371,33.1348],[117.9492,33.2227],[118.125,33.75],[117.7734,33.7061],[117.5977,34.0137],[117.1582,34.0576],[116.8945,34.4092],[116.3672,34.6289]]]}},{"type":"Feature","properties":{"id":"50","size":"2380","name":"重庆","cp":[107.304962,29.533155],"childNum":40},"geometry":{"type":"Polygon","coordinates":[[[108.5449,31.6846],[108.2813,31.9043],[108.3691,32.168],[108.5449,32.2119],[109.0723,31.9482],[109.248,31.7285],[109.5996,31.7285],[109.7754,31.6846],[109.6875,31.5527],[110.127,31.377],[110.2148,31.1572],[110.0391,30.8057],[109.8633,30.8936],[109.4238,30.542],[109.248,30.6299],[109.1602,30.542],[109.0723,30.6299],[108.8086,30.498],[108.6328,30.5859],[108.457,30.4102],[108.5449,30.2344],[108.457,29.7949],[108.6328,29.8389],[108.9844,29.3115],[109.0723,29.3555],[109.248,29.1357],[109.248,28.4766],[109.0723,28.2129],[108.7207,28.2129],[108.7207,28.4766],[108.5449,28.3887],[108.5449,28.6523],[108.3691,28.6523],[108.2813,29.0918],[107.8418,29.0039],[107.8418,29.1357],[107.5781,29.2236],[107.4023,29.1797],[107.4023,28.8721],[106.875,28.7842],[106.6992,28.4766],[106.6113,28.5205],[106.6113,28.6523],[106.5234,28.7842],[106.4355,28.7842],[106.5234,28.5645],[106.3477,28.5205],[106.2598,28.8721],[105.8203,28.96],[105.7324,29.2676],[105.4688,29.3115],[105.293,29.5313],[105.7324,29.8828],[105.5566,30.1025],[105.6445,30.2783],[105.8203,30.4541],[106.2598,30.1904],[106.6113,30.3223],[106.7871,30.0146],[107.0508,30.0146],[107.4902,30.6299],[107.4023,30.7617],[107.4902,30.8496],[107.9297,30.8496],[108.1934,31.5088],[108.5449,31.6846]]]}},{"type":"Feature","properties":{"id":"64","size":"2100","name":"宁夏","cp":[105.9961,37.3096],"childNum":5},"geometry":{"type":"Polygon","coordinates":[[[104.3262,37.4414],[105.8203,37.793],[105.9082,38.7158],[106.3477,39.2871],[106.7871,39.375],[106.9629,38.9795],[106.5234,38.3203],[106.7871,38.1885],[107.3145,38.1006],[107.666,37.8809],[107.3145,37.6172],[107.3145,37.0898],[106.6113,37.0898],[106.6113,36.7822],[106.4355,36.5625],[106.5234,36.4746],[106.5234,36.2549],[106.875,36.123],[106.9629,35.8154],[106.6992,35.6836],[106.4355,35.6836],[106.5234,35.332],[106.3477,35.2441],[106.2598,35.4199],[106.084,35.376],[105.9961,35.4199],[106.084,35.4639],[105.9961,35.4639],[105.8203,35.5518],[105.7324,35.7275],[105.3809,35.7715],[105.293,35.9912],[105.4688,36.123],[105.2051,36.6943],[105.293,36.8262],[104.8535,37.2217],[104.5898,37.2217],[104.5898,37.4414],[104.3262,37.4414]]]}},{"type":"Feature","properties":{"id":"46","size":"4500","name":"海南","cp":[109.9512,19.2041],"childNum":18},"geometry":{"type":"Polygon","coordinates":[[[108.6328,19.3799],[109.0723,19.6436],[109.248,19.9512],[109.5996,20.0391],[110.0391,20.127],[110.3906,20.127],[110.5664,20.2588],[110.6543,20.2588],[111.0938,19.9512],[111.2695,19.9951],[110.6543,19.1602],[110.5664,18.6768],[110.2148,18.5889],[110.0391,18.3691],[109.8633,18.3691],[109.6875,18.1055],[108.9844,18.2813],[108.6328,18.457],[108.6328,19.3799]]]}},{"type":"Feature","properties":{"id":"71","size":"3000","name":"台湾","cp":[120.0254,23.5986],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[121.9043,25.0488],[121.9922,25.0049],[121.8164,24.7412],[121.9043,24.5654],[121.6406,24.0381],[121.377,23.1152],[121.0254,22.6758],[120.8496,22.0605],[120.7617,21.9287],[120.6738,22.3242],[120.2344,22.5879],[120.0586,23.0713],[120.1465,23.6865],[121.0254,25.0488],[121.5527,25.3125],[121.9043,25.0488]]]}},{"type":"Feature","properties":{"id":"11","size":"5000","name":"北京","cp":[116.4551,40.2539],"childNum":19},"geometry":{"type":"Polygon","coordinates":[[[117.4219,40.21],[117.334,40.1221],[117.2461,40.0781],[116.8066,39.9902],[116.8945,39.8145],[116.8945,39.6826],[116.8066,39.5947],[116.543,39.5947],[116.3672,39.4629],[116.1914,39.5947],[115.752,39.5068],[115.4883,39.6387],[115.4004,39.9463],[115.9277,40.2539],[115.752,40.5615],[116.1035,40.6055],[116.1914,40.7813],[116.4551,40.7813],[116.3672,40.9131],[116.6309,41.0449],[116.9824,40.6934],[117.4219,40.6494],[117.2461,40.5176],[117.4219,40.21]]]}},{"type":"Feature","properties":{"id":"12","size":"5000","name":"天津","cp":[117.4219,39.4189],"childNum":18},"geometry":{"type":"Polygon","coordinates":[[[116.8066,39.5947],[116.8945,39.6826],[117.1582,39.6387],[117.1582,39.8145],[117.2461,40.0781],[117.334,40.1221],[117.4219,40.21],[117.6855,40.0781],[117.6855,39.9902],[117.5098,39.9902],[117.5098,39.7705],[117.6855,39.5947],[117.9492,39.5947],[117.8613,39.4189],[118.0371,39.2432],[118.0371,39.1992],[117.8613,39.1113],[117.5977,38.6279],[117.2461,38.54],[116.7188,38.8037],[116.7188,38.9355],[116.8945,39.1113],[116.8066,39.5947]]]}},{"type":"Feature","properties":{"id":"31","size":"7500","name":"上海","cp":[121.4648,31.2891],"childNum":19},"geometry":{"type":"Polygon","coordinates":[[[120.9375,31.0254],[121.2012,31.4648],[121.377,31.5088],[121.1133,31.7285],[121.2012,31.8604],[121.9922,31.5967],[121.9043,31.1572],[121.9922,30.8057],[121.2891,30.6738],[120.9375,31.0254]]]}},{"type":"Feature","properties":{"id":"81","size":"18000","name":"香港","cp":[114.1178,22.3242],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[114.6094,22.4121],[114.5215,22.1484],[114.3457,22.1484],[113.9063,22.1484],[113.8184,22.1924],[113.9063,22.4121],[114.1699,22.5439],[114.3457,22.5439],[114.4336,22.5439],[114.4336,22.4121],[114.6094,22.4121]]]}},{"type":"Feature","properties":{"id":"82","size":"27","name":"澳门","cp":[111.5547,22.1484],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.5986,22.1649],[113.6096,22.1265],[113.5547,22.11],[113.5437,22.2034],[113.5767,22.2034],[113.5986,22.1649]]]}}]}
diff --git a/z_ele/public/json/regions-data.json b/z_ele/public/json/regions-data.json
new file mode 100644
index 0000000..4cbd130
--- /dev/null
+++ b/z_ele/public/json/regions-data.json
@@ -0,0 +1 @@
+[{"label":"北京","value":"110000","children":[{"value":"110100","label":"北京市","children":[{"value":"110101","label":"东城区"},{"value":"110102","label":"西城区"},{"value":"110103","label":"崇文区"},{"value":"110104","label":"宣武区"},{"value":"110105","label":"朝阳区"},{"value":"110106","label":"丰台区"},{"value":"110107","label":"石景山区"},{"value":"110108","label":"海淀区"},{"value":"110109","label":"门头沟区"},{"value":"110111","label":"房山区"},{"value":"110112","label":"通州区"},{"value":"110113","label":"顺义区"},{"value":"110114","label":"昌平区"},{"value":"110115","label":"大兴区"},{"value":"110116","label":"怀柔区"},{"value":"110117","label":"平谷区"},{"value":"110228","label":"密云县"},{"value":"110229","label":"延庆县"}]}]},{"label":"天津","value":"120000","children":[{"value":"120100","label":"天津市","children":[{"value":"120101","label":"和平区"},{"value":"120102","label":"河东区"},{"value":"120103","label":"河西区"},{"value":"120104","label":"南开区"},{"value":"120105","label":"河北区"},{"value":"120106","label":"红桥区"},{"value":"120107","label":"塘沽区"},{"value":"120108","label":"汉沽区"},{"value":"120109","label":"大港区"},{"value":"120110","label":"东丽区"},{"value":"120111","label":"西青区"},{"value":"120112","label":"津南区"},{"value":"120113","label":"北辰区"},{"value":"120114","label":"武清区"},{"value":"120115","label":"宝坻区"},{"value":"120116","label":"滨海新区"},{"value":"120221","label":"宁河县"},{"value":"120223","label":"静海县"},{"value":"120225","label":"蓟县"}]}]},{"label":"河北省","value":"130000","children":[{"value":"130100","label":"石家庄市","children":[{"value":"130102","label":"长安区"},{"value":"130103","label":"桥东区"},{"value":"130104","label":"桥西区"},{"value":"130105","label":"新华区"},{"value":"130107","label":"井陉矿区"},{"value":"130108","label":"裕华区"},{"value":"130121","label":"井陉县"},{"value":"130123","label":"正定县"},{"value":"130124","label":"栾城县"},{"value":"130125","label":"行唐县"},{"value":"130126","label":"灵寿县"},{"value":"130127","label":"高邑县"},{"value":"130128","label":"深泽县"},{"value":"130129","label":"赞皇县"},{"value":"130130","label":"无极县"},{"value":"130131","label":"平山县"},{"value":"130132","label":"元氏县"},{"value":"130133","label":"赵县"},{"value":"130181","label":"辛集市"},{"value":"130182","label":"藁城市"},{"value":"130183","label":"晋州市"},{"value":"130184","label":"新乐市"},{"value":"130185","label":"鹿泉市"}]},{"value":"130200","label":"唐山市","children":[{"value":"130202","label":"路南区"},{"value":"130203","label":"路北区"},{"value":"130204","label":"古冶区"},{"value":"130205","label":"开平区"},{"value":"130207","label":"丰南区"},{"value":"130208","label":"丰润区"},{"value":"130223","label":"滦县"},{"value":"130224","label":"滦南县"},{"value":"130225","label":"乐亭县"},{"value":"130227","label":"迁西县"},{"value":"130229","label":"玉田县"},{"value":"130230","label":"唐海县"},{"value":"130281","label":"遵化市"},{"value":"130283","label":"迁安市"}]},{"value":"130300","label":"秦皇岛市","children":[{"value":"130302","label":"海港区"},{"value":"130303","label":"山海关区"},{"value":"130304","label":"北戴河区"},{"value":"130321","label":"青龙满族自治县"},{"value":"130322","label":"昌黎县"},{"value":"130323","label":"抚宁县"},{"value":"130324","label":"卢龙县"},{"value":"130399","label":"经济技术开发区"}]},{"value":"130400","label":"邯郸市","children":[{"value":"130402","label":"邯山区"},{"value":"130403","label":"丛台区"},{"value":"130404","label":"复兴区"},{"value":"130406","label":"峰峰矿区"},{"value":"130421","label":"邯郸县"},{"value":"130423","label":"临漳县"},{"value":"130424","label":"成安县"},{"value":"130425","label":"大名县"},{"value":"130426","label":"涉县"},{"value":"130427","label":"磁县"},{"value":"130428","label":"肥乡县"},{"value":"130429","label":"永年县"},{"value":"130430","label":"邱县"},{"value":"130431","label":"鸡泽县"},{"value":"130432","label":"广平县"},{"value":"130433","label":"馆陶县"},{"value":"130434","label":"魏县"},{"value":"130435","label":"曲周县"},{"value":"130481","label":"武安市"}]},{"value":"130500","label":"邢台市","children":[{"value":"130502","label":"桥东区"},{"value":"130503","label":"桥西区"},{"value":"130521","label":"邢台县"},{"value":"130522","label":"临城县"},{"value":"130523","label":"内丘县"},{"value":"130524","label":"柏乡县"},{"value":"130525","label":"隆尧县"},{"value":"130526","label":"任县"},{"value":"130527","label":"南和县"},{"value":"130528","label":"宁晋县"},{"value":"130529","label":"巨鹿县"},{"value":"130530","label":"新河县"},{"value":"130531","label":"广宗县"},{"value":"130532","label":"平乡县"},{"value":"130533","label":"威县"},{"value":"130534","label":"清河县"},{"value":"130535","label":"临西县"},{"value":"130581","label":"南宫市"},{"value":"130582","label":"沙河市"}]},{"value":"130600","label":"保定市","children":[{"value":"130602","label":"新市区"},{"value":"130603","label":"北市区"},{"value":"130604","label":"南市区"},{"value":"130621","label":"满城县"},{"value":"130622","label":"清苑县"},{"value":"130623","label":"涞水县"},{"value":"130624","label":"阜平县"},{"value":"130625","label":"徐水县"},{"value":"130626","label":"定兴县"},{"value":"130627","label":"唐县"},{"value":"130628","label":"高阳县"},{"value":"130629","label":"容城县"},{"value":"130630","label":"涞源县"},{"value":"130631","label":"望都县"},{"value":"130632","label":"安新县"},{"value":"130633","label":"易县"},{"value":"130634","label":"曲阳县"},{"value":"130635","label":"蠡县"},{"value":"130636","label":"顺平县"},{"value":"130637","label":"博野县"},{"value":"130638","label":"雄县"},{"value":"130681","label":"涿州市"},{"value":"130682","label":"定州市"},{"value":"130683","label":"安国市"},{"value":"130684","label":"高碑店市"},{"value":"130698","label":"高开区"}]},{"value":"130700","label":"张家口市","children":[{"value":"130702","label":"桥东区"},{"value":"130703","label":"桥西区"},{"value":"130705","label":"宣化区"},{"value":"130706","label":"下花园区"},{"value":"130721","label":"宣化县"},{"value":"130722","label":"张北县"},{"value":"130723","label":"康保县"},{"value":"130724","label":"沽源县"},{"value":"130725","label":"尚义县"},{"value":"130726","label":"蔚县"},{"value":"130727","label":"阳原县"},{"value":"130728","label":"怀安县"},{"value":"130729","label":"万全县"},{"value":"130730","label":"怀来县"},{"value":"130731","label":"涿鹿县"},{"value":"130732","label":"赤城县"},{"value":"130733","label":"崇礼县"}]},{"value":"130800","label":"承德市","children":[{"value":"130802","label":"双桥区"},{"value":"130803","label":"双滦区"},{"value":"130804","label":"鹰手营子矿区"},{"value":"130821","label":"承德县"},{"value":"130822","label":"兴隆县"},{"value":"130823","label":"平泉县"},{"value":"130824","label":"滦平县"},{"value":"130825","label":"隆化县"},{"value":"130826","label":"丰宁满族自治县"},{"value":"130827","label":"宽城满族自治县"},{"value":"130828","label":"围场满族蒙古族自治县"}]},{"value":"130900","label":"沧州市","children":[{"value":"130902","label":"新华区"},{"value":"130903","label":"运河区"},{"value":"130921","label":"沧县"},{"value":"130922","label":"青县"},{"value":"130923","label":"东光县"},{"value":"130924","label":"海兴县"},{"value":"130925","label":"盐山县"},{"value":"130926","label":"肃宁县"},{"value":"130927","label":"南皮县"},{"value":"130928","label":"吴桥县"},{"value":"130929","label":"献县"},{"value":"130930","label":"孟村回族自治县"},{"value":"130981","label":"泊头市"},{"value":"130982","label":"任丘市"},{"value":"130983","label":"黄骅市"},{"value":"130984","label":"河间市"}]},{"value":"131000","label":"廊坊市","children":[{"value":"131002","label":"安次区"},{"value":"131003","label":"广阳区"},{"value":"131022","label":"固安县"},{"value":"131023","label":"永清县"},{"value":"131024","label":"香河县"},{"value":"131025","label":"大城县"},{"value":"131026","label":"文安县"},{"value":"131028","label":"大厂回族自治县"},{"value":"131051","label":"开发区"},{"value":"131052","label":"燕郊经济技术开发区"},{"value":"131081","label":"霸州市"},{"value":"131082","label":"三河市"}]},{"value":"131100","label":"衡水市","children":[{"value":"131102","label":"桃城区"},{"value":"131121","label":"枣强县"},{"value":"131122","label":"武邑县"},{"value":"131123","label":"武强县"},{"value":"131124","label":"饶阳县"},{"value":"131125","label":"安平县"},{"value":"131126","label":"故城县"},{"value":"131127","label":"景县"},{"value":"131128","label":"阜城县"},{"value":"131181","label":"冀州市"},{"value":"131182","label":"深州市"}]}]},{"label":"山西省","value":"140000","children":[{"value":"140100","label":"太原市","children":[{"value":"140105","label":"小店区"},{"value":"140106","label":"迎泽区"},{"value":"140107","label":"杏花岭区"},{"value":"140108","label":"尖草坪区"},{"value":"140109","label":"万柏林区"},{"value":"140110","label":"晋源区"},{"value":"140121","label":"清徐县"},{"value":"140122","label":"阳曲县"},{"value":"140123","label":"娄烦县"},{"value":"140181","label":"古交市"}]},{"value":"140200","label":"大同市","children":[{"value":"140202","label":"城区"},{"value":"140203","label":"矿区"},{"value":"140211","label":"南郊区"},{"value":"140212","label":"新荣区"},{"value":"140221","label":"阳高县"},{"value":"140222","label":"天镇县"},{"value":"140223","label":"广灵县"},{"value":"140224","label":"灵丘县"},{"value":"140225","label":"浑源县"},{"value":"140226","label":"左云县"},{"value":"140227","label":"大同县"}]},{"value":"140300","label":"阳泉市","children":[{"value":"140302","label":"城区"},{"value":"140303","label":"矿区"},{"value":"140311","label":"郊区"},{"value":"140321","label":"平定县"},{"value":"140322","label":"盂县"}]},{"value":"140400","label":"长治市","children":[{"value":"140421","label":"长治县"},{"value":"140423","label":"襄垣县"},{"value":"140424","label":"屯留县"},{"value":"140425","label":"平顺县"},{"value":"140426","label":"黎城县"},{"value":"140427","label":"壶关县"},{"value":"140428","label":"长子县"},{"value":"140429","label":"武乡县"},{"value":"140430","label":"沁县"},{"value":"140431","label":"沁源县"},{"value":"140481","label":"潞城市"},{"value":"140482","label":"城区"},{"value":"140483","label":"郊区"},{"value":"140484","label":"高新区"}]},{"value":"140500","label":"晋城市","children":[{"value":"140502","label":"城区"},{"value":"140521","label":"沁水县"},{"value":"140522","label":"阳城县"},{"value":"140524","label":"陵川县"},{"value":"140525","label":"泽州县"},{"value":"140581","label":"高平市"}]},{"value":"140600","label":"朔州市","children":[{"value":"140602","label":"朔城区"},{"value":"140603","label":"平鲁区"},{"value":"140621","label":"山阴县"},{"value":"140622","label":"应县"},{"value":"140623","label":"右玉县"},{"value":"140624","label":"怀仁县"}]},{"value":"140700","label":"晋中市","children":[{"value":"140702","label":"榆次区"},{"value":"140721","label":"榆社县"},{"value":"140722","label":"左权县"},{"value":"140723","label":"和顺县"},{"value":"140724","label":"昔阳县"},{"value":"140725","label":"寿阳县"},{"value":"140726","label":"太谷县"},{"value":"140727","label":"祁县"},{"value":"140728","label":"平遥县"},{"value":"140729","label":"灵石县"},{"value":"140781","label":"介休市"}]},{"value":"140800","label":"运城市","children":[{"value":"140802","label":"盐湖区"},{"value":"140821","label":"临猗县"},{"value":"140822","label":"万荣县"},{"value":"140823","label":"闻喜县"},{"value":"140824","label":"稷山县"},{"value":"140825","label":"新绛县"},{"value":"140826","label":"绛县"},{"value":"140827","label":"垣曲县"},{"value":"140828","label":"夏县"},{"value":"140829","label":"平陆县"},{"value":"140830","label":"芮城县"},{"value":"140881","label":"永济市"},{"value":"140882","label":"河津市"}]},{"value":"140900","label":"忻州市","children":[{"value":"140902","label":"忻府区"},{"value":"140921","label":"定襄县"},{"value":"140922","label":"五台县"},{"value":"140923","label":"代县"},{"value":"140924","label":"繁峙县"},{"value":"140925","label":"宁武县"},{"value":"140926","label":"静乐县"},{"value":"140927","label":"神池县"},{"value":"140928","label":"五寨县"},{"value":"140929","label":"岢岚县"},{"value":"140930","label":"河曲县"},{"value":"140931","label":"保德县"},{"value":"140932","label":"偏关县"},{"value":"140981","label":"原平市"}]},{"value":"141000","label":"临汾市","children":[{"value":"141002","label":"尧都区"},{"value":"141021","label":"曲沃县"},{"value":"141022","label":"翼城县"},{"value":"141023","label":"襄汾县"},{"value":"141024","label":"洪洞县"},{"value":"141025","label":"古县"},{"value":"141026","label":"安泽县"},{"value":"141027","label":"浮山县"},{"value":"141028","label":"吉县"},{"value":"141029","label":"乡宁县"},{"value":"141030","label":"大宁县"},{"value":"141031","label":"隰县"},{"value":"141032","label":"永和县"},{"value":"141033","label":"蒲县"},{"value":"141034","label":"汾西县"},{"value":"141081","label":"侯马市"},{"value":"141082","label":"霍州市"}]},{"value":"141100","label":"吕梁市","children":[{"value":"141102","label":"离石区"},{"value":"141121","label":"文水县"},{"value":"141122","label":"交城县"},{"value":"141123","label":"兴县"},{"value":"141124","label":"临县"},{"value":"141125","label":"柳林县"},{"value":"141126","label":"石楼县"},{"value":"141127","label":"岚县"},{"value":"141128","label":"方山县"},{"value":"141129","label":"中阳县"},{"value":"141130","label":"交口县"},{"value":"141181","label":"孝义市"},{"value":"141182","label":"汾阳市"}]}]},{"label":"内蒙古自治区","value":"150000","children":[{"value":"150100","label":"呼和浩特市","children":[{"value":"150102","label":"新城区"},{"value":"150103","label":"回民区"},{"value":"150104","label":"玉泉区"},{"value":"150105","label":"赛罕区"},{"value":"150121","label":"土默特左旗"},{"value":"150122","label":"托克托县"},{"value":"150123","label":"和林格尔县"},{"value":"150124","label":"清水河县"},{"value":"150125","label":"武川县"}]},{"value":"150200","label":"包头市","children":[{"value":"150202","label":"东河区"},{"value":"150203","label":"昆都仑区"},{"value":"150204","label":"青山区"},{"value":"150205","label":"石拐区"},{"value":"150206","label":"白云矿区"},{"value":"150207","label":"九原区"},{"value":"150221","label":"土默特右旗"},{"value":"150222","label":"固阳县"},{"value":"150223","label":"达尔罕茂明安联合旗"}]},{"value":"150300","label":"乌海市","children":[{"value":"150302","label":"海勃湾区"},{"value":"150303","label":"海南区"},{"value":"150304","label":"乌达区"}]},{"value":"150400","label":"赤峰市","children":[{"value":"150402","label":"红山区"},{"value":"150403","label":"元宝山区"},{"value":"150404","label":"松山区"},{"value":"150421","label":"阿鲁科尔沁旗"},{"value":"150422","label":"巴林左旗"},{"value":"150423","label":"巴林右旗"},{"value":"150424","label":"林西县"},{"value":"150425","label":"克什克腾旗"},{"value":"150426","label":"翁牛特旗"},{"value":"150428","label":"喀喇沁旗"},{"value":"150429","label":"宁城县"},{"value":"150430","label":"敖汉旗"}]},{"value":"150500","label":"通辽市","children":[{"value":"150502","label":"科尔沁区"},{"value":"150521","label":"科尔沁左翼中旗"},{"value":"150522","label":"科尔沁左翼后旗"},{"value":"150523","label":"开鲁县"},{"value":"150524","label":"库伦旗"},{"value":"150525","label":"奈曼旗"},{"value":"150526","label":"扎鲁特旗"},{"value":"150581","label":"霍林郭勒市"}]},{"value":"150600","label":"鄂尔多斯市","children":[{"value":"150602","label":"东胜区"},{"value":"150621","label":"达拉特旗"},{"value":"150622","label":"准格尔旗"},{"value":"150623","label":"鄂托克前旗"},{"value":"150624","label":"鄂托克旗"},{"value":"150625","label":"杭锦旗"},{"value":"150626","label":"乌审旗"},{"value":"150627","label":"伊金霍洛旗"}]},{"value":"150700","label":"呼伦贝尔市","children":[{"value":"150702","label":"海拉尔区"},{"value":"150721","label":"阿荣旗"},{"value":"150722","label":"莫力达瓦达斡尔族自治旗"},{"value":"150723","label":"鄂伦春自治旗"},{"value":"150724","label":"鄂温克族自治旗"},{"value":"150725","label":"陈巴尔虎旗"},{"value":"150726","label":"新巴尔虎左旗"},{"value":"150727","label":"新巴尔虎右旗"},{"value":"150781","label":"满洲里市"},{"value":"150782","label":"牙克石市"},{"value":"150783","label":"扎兰屯市"},{"value":"150784","label":"额尔古纳市"},{"value":"150785","label":"根河市"}]},{"value":"150800","label":"巴彦淖尔市","children":[{"value":"150802","label":"临河区"},{"value":"150821","label":"五原县"},{"value":"150822","label":"磴口县"},{"value":"150823","label":"乌拉特前旗"},{"value":"150824","label":"乌拉特中旗"},{"value":"150825","label":"乌拉特后旗"},{"value":"150826","label":"杭锦后旗"}]},{"value":"150900","label":"乌兰察布市","children":[{"value":"150902","label":"集宁区"},{"value":"150921","label":"卓资县"},{"value":"150922","label":"化德县"},{"value":"150923","label":"商都县"},{"value":"150924","label":"兴和县"},{"value":"150925","label":"凉城县"},{"value":"150926","label":"察哈尔右翼前旗"},{"value":"150927","label":"察哈尔右翼中旗"},{"value":"150928","label":"察哈尔右翼后旗"},{"value":"150929","label":"四子王旗"},{"value":"150981","label":"丰镇市"}]},{"value":"152200","label":"兴安盟","children":[{"value":"152201","label":"乌兰浩特市"},{"value":"152202","label":"阿尔山市"},{"value":"152221","label":"科尔沁右翼前旗"},{"value":"152222","label":"科尔沁右翼中旗"},{"value":"152223","label":"扎赉特旗"},{"value":"152224","label":"突泉县"}]},{"value":"152500","label":"锡林郭勒盟","children":[{"value":"152501","label":"二连浩特市"},{"value":"152502","label":"锡林浩特市"},{"value":"152522","label":"阿巴嘎旗"},{"value":"152523","label":"苏尼特左旗"},{"value":"152524","label":"苏尼特右旗"},{"value":"152525","label":"东乌珠穆沁旗"},{"value":"152526","label":"西乌珠穆沁旗"},{"value":"152527","label":"太仆寺旗"},{"value":"152528","label":"镶黄旗"},{"value":"152529","label":"正镶白旗"},{"value":"152530","label":"正蓝旗"},{"value":"152531","label":"多伦县"}]},{"value":"152900","label":"阿拉善盟","children":[{"value":"152921","label":"阿拉善左旗"},{"value":"152922","label":"阿拉善右旗"},{"value":"152923","label":"额济纳旗"}]}]},{"label":"辽宁省","value":"210000","children":[{"value":"210100","label":"沈阳市","children":[{"value":"210102","label":"和平区"},{"value":"210103","label":"沈河区"},{"value":"210104","label":"大东区"},{"value":"210105","label":"皇姑区"},{"value":"210106","label":"铁西区"},{"value":"210111","label":"苏家屯区"},{"value":"210112","label":"东陵区"},{"value":"210113","label":"新城子区"},{"value":"210114","label":"于洪区"},{"value":"210122","label":"辽中县"},{"value":"210123","label":"康平县"},{"value":"210124","label":"法库县"},{"value":"210181","label":"新民市"},{"value":"210182","label":"浑南新区"},{"value":"210183","label":"张士开发区"},{"value":"210184","label":"沈北新区"}]},{"value":"210200","label":"大连市","children":[{"value":"210202","label":"中山区"},{"value":"210203","label":"西岗区"},{"value":"210204","label":"沙河口区"},{"value":"210211","label":"甘井子区"},{"value":"210212","label":"旅顺口区"},{"value":"210213","label":"金州区"},{"value":"210224","label":"长海县"},{"value":"210251","label":"开发区"},{"value":"210281","label":"瓦房店市"},{"value":"210282","label":"普兰店市"},{"value":"210283","label":"庄河市"},{"value":"210297","label":"岭前区"}]},{"value":"210300","label":"鞍山市","children":[{"value":"210302","label":"铁东区"},{"value":"210303","label":"铁西区"},{"value":"210304","label":"立山区"},{"value":"210311","label":"千山区"},{"value":"210321","label":"台安县"},{"value":"210323","label":"岫岩满族自治县"},{"value":"210351","label":"高新区"},{"value":"210381","label":"海城市"}]},{"value":"210400","label":"抚顺市","children":[{"value":"210402","label":"新抚区"},{"value":"210403","label":"东洲区"},{"value":"210404","label":"望花区"},{"value":"210411","label":"顺城区"},{"value":"210421","label":"抚顺县"},{"value":"210422","label":"新宾满族自治县"},{"value":"210423","label":"清原满族自治县"}]},{"value":"210500","label":"本溪市","children":[{"value":"210502","label":"平山区"},{"value":"210503","label":"溪湖区"},{"value":"210504","label":"明山区"},{"value":"210505","label":"南芬区"},{"value":"210521","label":"本溪满族自治县"},{"value":"210522","label":"桓仁满族自治县"}]},{"value":"210600","label":"丹东市","children":[{"value":"210602","label":"元宝区"},{"value":"210603","label":"振兴区"},{"value":"210604","label":"振安区"},{"value":"210624","label":"宽甸满族自治县"},{"value":"210681","label":"东港市"},{"value":"210682","label":"凤城市"}]},{"value":"210700","label":"锦州市","children":[{"value":"210702","label":"古塔区"},{"value":"210703","label":"凌河区"},{"value":"210711","label":"太和区"},{"value":"210726","label":"黑山县"},{"value":"210727","label":"义县"},{"value":"210781","label":"凌海市"},{"value":"210782","label":"北镇市"}]},{"value":"210800","label":"营口市","children":[{"value":"210802","label":"站前区"},{"value":"210803","label":"西市区"},{"value":"210804","label":"鲅鱼圈区"},{"value":"210811","label":"老边区"},{"value":"210881","label":"盖州市"},{"value":"210882","label":"大石桥市"}]},{"value":"210900","label":"阜新市","children":[{"value":"210902","label":"海州区"},{"value":"210903","label":"新邱区"},{"value":"210904","label":"太平区"},{"value":"210905","label":"清河门区"},{"value":"210911","label":"细河区"},{"value":"210921","label":"阜新蒙古族自治县"},{"value":"210922","label":"彰武县"}]},{"value":"211000","label":"辽阳市","children":[{"value":"211002","label":"白塔区"},{"value":"211003","label":"文圣区"},{"value":"211004","label":"宏伟区"},{"value":"211005","label":"弓长岭区"},{"value":"211011","label":"太子河区"},{"value":"211021","label":"辽阳县"},{"value":"211081","label":"灯塔市"}]},{"value":"211100","label":"盘锦市","children":[{"value":"211102","label":"双台子区"},{"value":"211103","label":"兴隆台区"},{"value":"211121","label":"大洼县"},{"value":"211122","label":"盘山县"}]},{"value":"211200","label":"铁岭市","children":[{"value":"211202","label":"银州区"},{"value":"211204","label":"清河区"},{"value":"211221","label":"铁岭县"},{"value":"211223","label":"西丰县"},{"value":"211224","label":"昌图县"},{"value":"211281","label":"调兵山市"},{"value":"211282","label":"开原市"}]},{"value":"211300","label":"朝阳市","children":[{"value":"211302","label":"双塔区"},{"value":"211303","label":"龙城区"},{"value":"211321","label":"朝阳县"},{"value":"211322","label":"建平县"},{"value":"211324","label":"喀喇沁左翼蒙古族自治县"},{"value":"211381","label":"北票市"},{"value":"211382","label":"凌源市"}]},{"value":"211400","label":"葫芦岛市","children":[{"value":"211402","label":"连山区"},{"value":"211403","label":"龙港区"},{"value":"211404","label":"南票区"},{"value":"211421","label":"绥中县"},{"value":"211422","label":"建昌县"},{"value":"211481","label":"兴城市"}]}]},{"label":"吉林省","value":"220000","children":[{"value":"220100","label":"长春市","children":[{"value":"220102","label":"南关区"},{"value":"220103","label":"宽城区"},{"value":"220104","label":"朝阳区"},{"value":"220105","label":"二道区"},{"value":"220106","label":"绿园区"},{"value":"220112","label":"双阳区"},{"value":"220122","label":"农安县"},{"value":"220181","label":"九台市"},{"value":"220182","label":"榆树市"},{"value":"220183","label":"德惠市"},{"value":"220184","label":"高新技术产业开发区"},{"value":"220185","label":"汽车产业开发区"},{"value":"220186","label":"经济技术开发区"},{"value":"220187","label":"净月旅游开发区"}]},{"value":"220200","label":"吉林市","children":[{"value":"220202","label":"昌邑区"},{"value":"220203","label":"龙潭区"},{"value":"220204","label":"船营区"},{"value":"220211","label":"丰满区"},{"value":"220221","label":"永吉县"},{"value":"220281","label":"蛟河市"},{"value":"220282","label":"桦甸市"},{"value":"220283","label":"舒兰市"},{"value":"220284","label":"磐石市"}]},{"value":"220300","label":"四平市","children":[{"value":"220302","label":"铁西区"},{"value":"220303","label":"铁东区"},{"value":"220322","label":"梨树县"},{"value":"220323","label":"伊通满族自治县"},{"value":"220381","label":"公主岭市"},{"value":"220382","label":"双辽市"}]},{"value":"220400","label":"辽源市","children":[{"value":"220402","label":"龙山区"},{"value":"220403","label":"西安区"},{"value":"220421","label":"东丰县"},{"value":"220422","label":"东辽县"}]},{"value":"220500","label":"通化市","children":[{"value":"220502","label":"东昌区"},{"value":"220503","label":"二道江区"},{"value":"220521","label":"通化县"},{"value":"220523","label":"辉南县"},{"value":"220524","label":"柳河县"},{"value":"220581","label":"梅河口市"},{"value":"220582","label":"集安市"}]},{"value":"220600","label":"白山市","children":[{"value":"220602","label":"八道江区"},{"value":"220621","label":"抚松县"},{"value":"220622","label":"靖宇县"},{"value":"220623","label":"长白朝鲜族自治县"},{"value":"220625","label":"江源市"},{"value":"220681","label":"临江市"}]},{"value":"220700","label":"松原市","children":[{"value":"220702","label":"宁江区"},{"value":"220721","label":"前郭尔罗斯蒙古族自治县"},{"value":"220722","label":"长岭县"},{"value":"220723","label":"乾安县"},{"value":"220724","label":"扶余县"}]},{"value":"220800","label":"白城市","children":[{"value":"220802","label":"洮北区"},{"value":"220821","label":"镇赉县"},{"value":"220822","label":"通榆县"},{"value":"220881","label":"洮南市"},{"value":"220882","label":"大安市"}]},{"value":"222400","label":"延边朝鲜族自治州","children":[{"value":"222401","label":"延吉市"},{"value":"222402","label":"图们市"},{"value":"222403","label":"敦化市"},{"value":"222404","label":"珲春市"},{"value":"222405","label":"龙井市"},{"value":"222406","label":"和龙市"},{"value":"222424","label":"汪清县"},{"value":"222426","label":"安图县"}]}]},{"label":"黑龙江省","value":"230000","children":[{"value":"230100","label":"哈尔滨市","children":[{"value":"230102","label":"道里区"},{"value":"230103","label":"南岗区"},{"value":"230104","label":"道外区"},{"value":"230106","label":"香坊区"},{"value":"230107","label":"动力区"},{"value":"230108","label":"平房区"},{"value":"230109","label":"松北区"},{"value":"230111","label":"呼兰区"},{"value":"230123","label":"依兰县"},{"value":"230124","label":"方正县"},{"value":"230125","label":"宾县"},{"value":"230126","label":"巴彦县"},{"value":"230127","label":"木兰县"},{"value":"230128","label":"通河县"},{"value":"230129","label":"延寿县"},{"value":"230181","label":"阿城市"},{"value":"230182","label":"双城市"},{"value":"230183","label":"尚志市"},{"value":"230184","label":"五常市"},{"value":"230185","label":"阿城市"}]},{"value":"230200","label":"齐齐哈尔市","children":[{"value":"230202","label":"龙沙区"},{"value":"230203","label":"建华区"},{"value":"230204","label":"铁锋区"},{"value":"230205","label":"昂昂溪区"},{"value":"230206","label":"富拉尔基区"},{"value":"230207","label":"碾子山区"},{"value":"230208","label":"梅里斯达斡尔族区"},{"value":"230221","label":"龙江县"},{"value":"230223","label":"依安县"},{"value":"230224","label":"泰来县"},{"value":"230225","label":"甘南县"},{"value":"230227","label":"富裕县"},{"value":"230229","label":"克山县"},{"value":"230230","label":"克东县"},{"value":"230231","label":"拜泉县"},{"value":"230281","label":"讷河市"}]},{"value":"230300","label":"鸡西市","children":[{"value":"230302","label":"鸡冠区"},{"value":"230303","label":"恒山区"},{"value":"230304","label":"滴道区"},{"value":"230305","label":"梨树区"},{"value":"230306","label":"城子河区"},{"value":"230307","label":"麻山区"},{"value":"230321","label":"鸡东县"},{"value":"230381","label":"虎林市"},{"value":"230382","label":"密山市"}]},{"value":"230400","label":"鹤岗市","children":[{"value":"230402","label":"向阳区"},{"value":"230403","label":"工农区"},{"value":"230404","label":"南山区"},{"value":"230405","label":"兴安区"},{"value":"230406","label":"东山区"},{"value":"230407","label":"兴山区"},{"value":"230421","label":"萝北县"},{"value":"230422","label":"绥滨县"}]},{"value":"230500","label":"双鸭山市","children":[{"value":"230502","label":"尖山区"},{"value":"230503","label":"岭东区"},{"value":"230505","label":"四方台区"},{"value":"230506","label":"宝山区"},{"value":"230521","label":"集贤县"},{"value":"230522","label":"友谊县"},{"value":"230523","label":"宝清县"},{"value":"230524","label":"饶河县"}]},{"value":"230600","label":"大庆市","children":[{"value":"230602","label":"萨尔图区"},{"value":"230603","label":"龙凤区"},{"value":"230604","label":"让胡路区"},{"value":"230605","label":"红岗区"},{"value":"230606","label":"大同区"},{"value":"230621","label":"肇州县"},{"value":"230622","label":"肇源县"},{"value":"230623","label":"林甸县"},{"value":"230624","label":"杜尔伯特蒙古族自治县"}]},{"value":"230700","label":"伊春市","children":[{"value":"230702","label":"伊春区"},{"value":"230703","label":"南岔区"},{"value":"230704","label":"友好区"},{"value":"230705","label":"西林区"},{"value":"230706","label":"翠峦区"},{"value":"230707","label":"新青区"},{"value":"230708","label":"美溪区"},{"value":"230709","label":"金山屯区"},{"value":"230710","label":"五营区"},{"value":"230711","label":"乌马河区"},{"value":"230712","label":"汤旺河区"},{"value":"230713","label":"带岭区"},{"value":"230714","label":"乌伊岭区"},{"value":"230715","label":"红星区"},{"value":"230716","label":"上甘岭区"},{"value":"230722","label":"嘉荫县"},{"value":"230781","label":"铁力市"}]},{"value":"230800","label":"佳木斯市","children":[{"value":"230802","label":"永红区"},{"value":"230803","label":"向阳区"},{"value":"230804","label":"前进区"},{"value":"230805","label":"东风区"},{"value":"230811","label":"郊区"},{"value":"230822","label":"桦南县"},{"value":"230826","label":"桦川县"},{"value":"230828","label":"汤原县"},{"value":"230833","label":"抚远县"},{"value":"230881","label":"同江市"},{"value":"230882","label":"富锦市"}]},{"value":"230900","label":"七台河市","children":[{"value":"230902","label":"新兴区"},{"value":"230903","label":"桃山区"},{"value":"230904","label":"茄子河区"},{"value":"230921","label":"勃利县"}]},{"value":"231000","label":"牡丹江市","children":[{"value":"231002","label":"东安区"},{"value":"231003","label":"阳明区"},{"value":"231004","label":"爱民区"},{"value":"231005","label":"西安区"},{"value":"231024","label":"东宁县"},{"value":"231025","label":"林口县"},{"value":"231081","label":"绥芬河市"},{"value":"231083","label":"海林市"},{"value":"231084","label":"宁安市"},{"value":"231085","label":"穆棱市"}]},{"value":"231100","label":"黑河市","children":[{"value":"231102","label":"爱辉区"},{"value":"231121","label":"嫩江县"},{"value":"231123","label":"逊克县"},{"value":"231124","label":"孙吴县"},{"value":"231181","label":"北安市"},{"value":"231182","label":"五大连池市"}]},{"value":"231200","label":"绥化市","children":[{"value":"231202","label":"北林区"},{"value":"231221","label":"望奎县"},{"value":"231222","label":"兰西县"},{"value":"231223","label":"青冈县"},{"value":"231224","label":"庆安县"},{"value":"231225","label":"明水县"},{"value":"231226","label":"绥棱县"},{"value":"231281","label":"安达市"},{"value":"231282","label":"肇东市"},{"value":"231283","label":"海伦市"}]},{"value":"232700","label":"大兴安岭地区","children":[{"value":"232721","label":"呼玛县"},{"value":"232722","label":"塔河县"},{"value":"232723","label":"漠河县"},{"value":"232724","label":"加格达奇区"}]}]},{"label":"上海","value":"310000","children":[{"value":"310100","label":"上海市","children":[{"value":"310101","label":"黄浦区"},{"value":"310103","label":"卢湾区"},{"value":"310104","label":"徐汇区"},{"value":"310105","label":"长宁区"},{"value":"310106","label":"静安区"},{"value":"310107","label":"普陀区"},{"value":"310108","label":"闸北区"},{"value":"310109","label":"虹口区"},{"value":"310110","label":"杨浦区"},{"value":"310112","label":"闵行区"},{"value":"310113","label":"宝山区"},{"value":"310114","label":"嘉定区"},{"value":"310115","label":"浦东新区"},{"value":"310116","label":"金山区"},{"value":"310117","label":"松江区"},{"value":"310118","label":"青浦区"},{"value":"310119","label":"南汇区"},{"value":"310120","label":"奉贤区"},{"value":"310152","label":"川沙区"},{"value":"310230","label":"崇明县"}]}]},{"label":"江苏省","value":"320000","children":[{"value":"320100","label":"南京市","children":[{"value":"320102","label":"玄武区"},{"value":"320103","label":"白下区"},{"value":"320104","label":"秦淮区"},{"value":"320105","label":"建邺区"},{"value":"320106","label":"鼓楼区"},{"value":"320107","label":"下关区"},{"value":"320111","label":"浦口区"},{"value":"320113","label":"栖霞区"},{"value":"320114","label":"雨花台区"},{"value":"320115","label":"江宁区"},{"value":"320116","label":"六合区"},{"value":"320124","label":"溧水县"},{"value":"320125","label":"高淳县"}]},{"value":"320200","label":"无锡市","children":[{"value":"320202","label":"崇安区"},{"value":"320203","label":"南长区"},{"value":"320204","label":"北塘区"},{"value":"320205","label":"锡山区"},{"value":"320206","label":"惠山区"},{"value":"320211","label":"滨湖区"},{"value":"320281","label":"江阴市"},{"value":"320282","label":"宜兴市"},{"value":"320296","label":"新区"}]},{"value":"320300","label":"徐州市","children":[{"value":"320302","label":"鼓楼区"},{"value":"320303","label":"云龙区"},{"value":"320304","label":"九里区"},{"value":"320305","label":"贾汪区"},{"value":"320311","label":"泉山区"},{"value":"320321","label":"丰县"},{"value":"320322","label":"沛县"},{"value":"320323","label":"铜山县"},{"value":"320324","label":"睢宁县"},{"value":"320381","label":"新沂市"},{"value":"320382","label":"邳州市"}]},{"value":"320400","label":"常州市","children":[{"value":"320402","label":"天宁区"},{"value":"320404","label":"钟楼区"},{"value":"320405","label":"戚墅堰区"},{"value":"320411","label":"新北区"},{"value":"320412","label":"武进区"},{"value":"320481","label":"溧阳市"},{"value":"320482","label":"金坛市"}]},{"value":"320500","label":"苏州市","children":[{"value":"320502","label":"沧浪区"},{"value":"320503","label":"平江区"},{"value":"320504","label":"金阊区"},{"value":"320505","label":"虎丘区"},{"value":"320506","label":"吴中区"},{"value":"320507","label":"相城区"},{"value":"320581","label":"常熟市"},{"value":"320582","label":"张家港市"},{"value":"320583","label":"昆山市"},{"value":"320584","label":"吴江市"},{"value":"320585","label":"太仓市"},{"value":"320594","label":"新区"},{"value":"320595","label":"园区"}]},{"value":"320600","label":"南通市","children":[{"value":"320602","label":"崇川区"},{"value":"320611","label":"港闸区"},{"value":"320612","label":"通州区"},{"value":"320621","label":"海安县"},{"value":"320623","label":"如东县"},{"value":"320681","label":"启东市"},{"value":"320682","label":"如皋市"},{"value":"320683","label":"通州市"},{"value":"320684","label":"海门市"},{"value":"320693","label":"开发区"}]},{"value":"320700","label":"连云港市","children":[{"value":"320703","label":"连云区"},{"value":"320705","label":"新浦区"},{"value":"320706","label":"海州区"},{"value":"320721","label":"赣榆县"},{"value":"320722","label":"东海县"},{"value":"320723","label":"灌云县"},{"value":"320724","label":"灌南县"}]},{"value":"320800","label":"淮安市","children":[{"value":"320802","label":"清河区"},{"value":"320803","label":"楚州区"},{"value":"320804","label":"淮阴区"},{"value":"320811","label":"清浦区"},{"value":"320826","label":"涟水县"},{"value":"320829","label":"洪泽县"},{"value":"320830","label":"盱眙县"},{"value":"320831","label":"金湖县"}]},{"value":"320900","label":"盐城市","children":[{"value":"320902","label":"亭湖区"},{"value":"320903","label":"盐都区"},{"value":"320921","label":"响水县"},{"value":"320922","label":"滨海县"},{"value":"320923","label":"阜宁县"},{"value":"320924","label":"射阳县"},{"value":"320925","label":"建湖县"},{"value":"320981","label":"东台市"},{"value":"320982","label":"大丰市"}]},{"value":"321000","label":"扬州市","children":[{"value":"321002","label":"广陵区"},{"value":"321003","label":"邗江区"},{"value":"321011","label":"维扬区"},{"value":"321023","label":"宝应县"},{"value":"321081","label":"仪征市"},{"value":"321084","label":"高邮市"},{"value":"321088","label":"江都市"},{"value":"321092","label":"经济开发区"}]},{"value":"321100","label":"镇江市","children":[{"value":"321102","label":"京口区"},{"value":"321111","label":"润州区"},{"value":"321112","label":"丹徒区"},{"value":"321181","label":"丹阳市"},{"value":"321182","label":"扬中市"},{"value":"321183","label":"句容市"}]},{"value":"321200","label":"泰州市","children":[{"value":"321202","label":"海陵区"},{"value":"321203","label":"高港区"},{"value":"321281","label":"兴化市"},{"value":"321282","label":"靖江市"},{"value":"321283","label":"泰兴市"},{"value":"321284","label":"姜堰市"}]},{"value":"321300","label":"宿迁市","children":[{"value":"321302","label":"宿城区"},{"value":"321311","label":"宿豫区"},{"value":"321322","label":"沭阳县"},{"value":"321323","label":"泗阳县"},{"value":"321324","label":"泗洪县"}]}]},{"label":"浙江省","value":"330000","children":[{"value":"330100","label":"杭州市","children":[{"value":"330102","label":"上城区"},{"value":"330103","label":"下城区"},{"value":"330104","label":"江干区"},{"value":"330105","label":"拱墅区"},{"value":"330106","label":"西湖区"},{"value":"330108","label":"滨江区"},{"value":"330109","label":"萧山区"},{"value":"330110","label":"余杭区"},{"value":"330122","label":"桐庐县"},{"value":"330127","label":"淳安县"},{"value":"330182","label":"建德市"},{"value":"330183","label":"富阳市"},{"value":"330185","label":"临安市"}]},{"value":"330200","label":"宁波市","children":[{"value":"330203","label":"海曙区"},{"value":"330204","label":"江东区"},{"value":"330205","label":"江北区"},{"value":"330206","label":"北仑区"},{"value":"330211","label":"镇海区"},{"value":"330212","label":"鄞州区"},{"value":"330225","label":"象山县"},{"value":"330226","label":"宁海县"},{"value":"330281","label":"余姚市"},{"value":"330282","label":"慈溪市"},{"value":"330283","label":"奉化市"}]},{"value":"330300","label":"温州市","children":[{"value":"330302","label":"鹿城区"},{"value":"330303","label":"龙湾区"},{"value":"330304","label":"瓯海区"},{"value":"330322","label":"洞头县"},{"value":"330324","label":"永嘉县"},{"value":"330326","label":"平阳县"},{"value":"330327","label":"苍南县"},{"value":"330328","label":"文成县"},{"value":"330329","label":"泰顺县"},{"value":"330381","label":"瑞安市"},{"value":"330382","label":"乐清市"}]},{"value":"330400","label":"嘉兴市","children":[{"value":"330402","label":"南湖区"},{"value":"330411","label":"秀洲区"},{"value":"330421","label":"嘉善县"},{"value":"330424","label":"海盐县"},{"value":"330481","label":"海宁市"},{"value":"330482","label":"平湖市"},{"value":"330483","label":"桐乡市"}]},{"value":"330500","label":"湖州市","children":[{"value":"330502","label":"吴兴区"},{"value":"330503","label":"南浔区"},{"value":"330521","label":"德清县"},{"value":"330522","label":"长兴县"},{"value":"330523","label":"安吉县"}]},{"value":"330600","label":"绍兴市","children":[{"value":"330602","label":"越城区"},{"value":"330621","label":"绍兴县"},{"value":"330624","label":"新昌县"},{"value":"330681","label":"诸暨市"},{"value":"330682","label":"上虞市"},{"value":"330683","label":"嵊州市"}]},{"value":"330700","label":"金华市","children":[{"value":"330702","label":"婺城区"},{"value":"330703","label":"金东区"},{"value":"330723","label":"武义县"},{"value":"330726","label":"浦江县"},{"value":"330727","label":"磐安县"},{"value":"330781","label":"兰溪市"},{"value":"330782","label":"义乌市"},{"value":"330783","label":"东阳市"},{"value":"330784","label":"永康市"}]},{"value":"330800","label":"衢州市","children":[{"value":"330802","label":"柯城区"},{"value":"330803","label":"衢江区"},{"value":"330822","label":"常山县"},{"value":"330824","label":"开化县"},{"value":"330825","label":"龙游县"},{"value":"330881","label":"江山市"}]},{"value":"330900","label":"舟山市","children":[{"value":"330902","label":"定海区"},{"value":"330903","label":"普陀区"},{"value":"330921","label":"岱山县"},{"value":"330922","label":"嵊泗县"}]},{"value":"331000","label":"台州市","children":[{"value":"331002","label":"椒江区"},{"value":"331003","label":"黄岩区"},{"value":"331004","label":"路桥区"},{"value":"331021","label":"玉环县"},{"value":"331022","label":"三门县"},{"value":"331023","label":"天台县"},{"value":"331024","label":"仙居县"},{"value":"331081","label":"温岭市"},{"value":"331082","label":"临海市"}]},{"value":"331100","label":"丽水市","children":[{"value":"331102","label":"莲都区"},{"value":"331121","label":"青田县"},{"value":"331122","label":"缙云县"},{"value":"331123","label":"遂昌县"},{"value":"331124","label":"松阳县"},{"value":"331125","label":"云和县"},{"value":"331126","label":"庆元县"},{"value":"331127","label":"景宁畲族自治县"},{"value":"331181","label":"龙泉市"}]}]},{"label":"安徽省","value":"340000","children":[{"value":"340100","label":"合肥市","children":[{"value":"340102","label":"瑶海区"},{"value":"340103","label":"庐阳区"},{"value":"340104","label":"蜀山区"},{"value":"340111","label":"包河区"},{"value":"340121","label":"长丰县"},{"value":"340122","label":"肥东县"},{"value":"340123","label":"肥西县"},{"value":"340151","label":"高新区"},{"value":"340191","label":"中区"},{"value":"341400","label":"巢湖市"},{"value":"341402","label":"居巢区"},{"value":"341421","label":"庐江县"}]},{"value":"340200","label":"芜湖市","children":[{"value":"340202","label":"镜湖区"},{"value":"340203","label":"弋江区"},{"value":"340207","label":"鸠江区"},{"value":"340208","label":"三山区"},{"value":"340221","label":"芜湖县"},{"value":"340222","label":"繁昌县"},{"value":"340223","label":"南陵县"},{"value":"341422","label":"无为县"}]},{"value":"340300","label":"蚌埠市","children":[{"value":"340302","label":"龙子湖区"},{"value":"340303","label":"蚌山区"},{"value":"340304","label":"禹会区"},{"value":"340311","label":"淮上区"},{"value":"340321","label":"怀远县"},{"value":"340322","label":"五河县"},{"value":"340323","label":"固镇县"}]},{"value":"340400","label":"淮南市","children":[{"value":"340402","label":"大通区"},{"value":"340403","label":"田家庵区"},{"value":"340404","label":"谢家集区"},{"value":"340405","label":"八公山区"},{"value":"340406","label":"潘集区"},{"value":"340421","label":"凤台县"}]},{"value":"340500","label":"马鞍山市","children":[{"value":"340502","label":"金家庄区"},{"value":"340503","label":"花山区"},{"value":"340504","label":"雨山区"},{"value":"340521","label":"当涂县"},{"value":"341423","label":"含山县"},{"value":"341424","label":"和县"}]},{"value":"340600","label":"淮北市","children":[{"value":"340602","label":"杜集区"},{"value":"340603","label":"相山区"},{"value":"340604","label":"烈山区"},{"value":"340621","label":"濉溪县"}]},{"value":"340700","label":"铜陵市","children":[{"value":"340702","label":"铜官山区"},{"value":"340703","label":"狮子山区"},{"value":"340711","label":"郊区"},{"value":"340721","label":"铜陵县"}]},{"value":"340800","label":"安庆市","children":[{"value":"340802","label":"迎江区"},{"value":"340803","label":"大观区"},{"value":"340811","label":"宜秀区"},{"value":"340822","label":"怀宁县"},{"value":"340823","label":"枞阳县"},{"value":"340824","label":"潜山县"},{"value":"340825","label":"太湖县"},{"value":"340826","label":"宿松县"},{"value":"340827","label":"望江县"},{"value":"340828","label":"岳西县"},{"value":"340881","label":"桐城市"}]},{"value":"341000","label":"黄山市","children":[{"value":"341002","label":"屯溪区"},{"value":"341003","label":"黄山区"},{"value":"341004","label":"徽州区"},{"value":"341021","label":"歙县"},{"value":"341022","label":"休宁县"},{"value":"341023","label":"黟县"},{"value":"341024","label":"祁门县"}]},{"value":"341100","label":"滁州市","children":[{"value":"341102","label":"琅琊区"},{"value":"341103","label":"南谯区"},{"value":"341122","label":"来安县"},{"value":"341124","label":"全椒县"},{"value":"341125","label":"定远县"},{"value":"341126","label":"凤阳县"},{"value":"341181","label":"天长市"},{"value":"341182","label":"明光市"}]},{"value":"341200","label":"阜阳市","children":[{"value":"341202","label":"颍州区"},{"value":"341203","label":"颍东区"},{"value":"341204","label":"颍泉区"},{"value":"341221","label":"临泉县"},{"value":"341222","label":"太和县"},{"value":"341225","label":"阜南县"},{"value":"341226","label":"颍上县"},{"value":"341282","label":"界首市"}]},{"value":"341300","label":"宿州市","children":[{"value":"341302","label":"埇桥区"},{"value":"341321","label":"砀山县"},{"value":"341322","label":"萧县"},{"value":"341323","label":"灵璧县"},{"value":"341324","label":"泗县"}]},{"value":"341500","label":"六安市","children":[{"value":"341502","label":"金安区"},{"value":"341503","label":"裕安区"},{"value":"341521","label":"寿县"},{"value":"341522","label":"霍邱县"},{"value":"341523","label":"舒城县"},{"value":"341524","label":"金寨县"},{"value":"341525","label":"霍山县"}]},{"value":"341600","label":"亳州市","children":[{"value":"341602","label":"谯城区"},{"value":"341621","label":"涡阳县"},{"value":"341622","label":"蒙城县"},{"value":"341623","label":"利辛县"}]},{"value":"341700","label":"池州市","children":[{"value":"341702","label":"贵池区"},{"value":"341721","label":"东至县"},{"value":"341722","label":"石台县"},{"value":"341723","label":"青阳县"}]},{"value":"341800","label":"宣城市","children":[{"value":"341802","label":"宣州区"},{"value":"341821","label":"郎溪县"},{"value":"341822","label":"广德县"},{"value":"341823","label":"泾县"},{"value":"341824","label":"绩溪县"},{"value":"341825","label":"旌德县"},{"value":"341881","label":"宁国市"}]}]},{"label":"福建省","value":"350000","children":[{"value":"350100","label":"福州市","children":[{"value":"350102","label":"鼓楼区"},{"value":"350103","label":"台江区"},{"value":"350104","label":"仓山区"},{"value":"350105","label":"马尾区"},{"value":"350111","label":"晋安区"},{"value":"350121","label":"闽侯县"},{"value":"350122","label":"连江县"},{"value":"350123","label":"罗源县"},{"value":"350124","label":"闽清县"},{"value":"350125","label":"永泰县"},{"value":"350128","label":"平潭县"},{"value":"350181","label":"福清市"},{"value":"350182","label":"长乐市"}]},{"value":"350200","label":"厦门市","children":[{"value":"350203","label":"思明区"},{"value":"350205","label":"海沧区"},{"value":"350206","label":"湖里区"},{"value":"350211","label":"集美区"},{"value":"350212","label":"同安区"},{"value":"350213","label":"翔安区"}]},{"value":"350300","label":"莆田市","children":[{"value":"350302","label":"城厢区"},{"value":"350303","label":"涵江区"},{"value":"350304","label":"荔城区"},{"value":"350305","label":"秀屿区"},{"value":"350322","label":"仙游县"}]},{"value":"350400","label":"三明市","children":[{"value":"350402","label":"梅列区"},{"value":"350403","label":"三元区"},{"value":"350421","label":"明溪县"},{"value":"350423","label":"清流县"},{"value":"350424","label":"宁化县"},{"value":"350425","label":"大田县"},{"value":"350426","label":"尤溪县"},{"value":"350427","label":"沙县"},{"value":"350428","label":"将乐县"},{"value":"350429","label":"泰宁县"},{"value":"350430","label":"建宁县"},{"value":"350481","label":"永安市"}]},{"value":"350500","label":"泉州市","children":[{"value":"350502","label":"鲤城区"},{"value":"350503","label":"丰泽区"},{"value":"350504","label":"洛江区"},{"value":"350505","label":"泉港区"},{"value":"350521","label":"惠安县"},{"value":"350524","label":"安溪县"},{"value":"350525","label":"永春县"},{"value":"350526","label":"德化县"},{"value":"350527","label":"金门县"},{"value":"350581","label":"石狮市"},{"value":"350582","label":"晋江市"},{"value":"350583","label":"南安市"}]},{"value":"350600","label":"漳州市","children":[{"value":"350602","label":"芗城区"},{"value":"350603","label":"龙文区"},{"value":"350622","label":"云霄县"},{"value":"350623","label":"漳浦县"},{"value":"350624","label":"诏安县"},{"value":"350625","label":"长泰县"},{"value":"350626","label":"东山县"},{"value":"350627","label":"南靖县"},{"value":"350628","label":"平和县"},{"value":"350629","label":"华安县"},{"value":"350681","label":"龙海市"}]},{"value":"350700","label":"南平市","children":[{"value":"350702","label":"延平区"},{"value":"350721","label":"顺昌县"},{"value":"350722","label":"浦城县"},{"value":"350723","label":"光泽县"},{"value":"350724","label":"松溪县"},{"value":"350725","label":"政和县"},{"value":"350781","label":"邵武市"},{"value":"350782","label":"武夷山市"},{"value":"350783","label":"建瓯市"},{"value":"350784","label":"建阳市"}]},{"value":"350800","label":"龙岩市","children":[{"value":"350802","label":"新罗区"},{"value":"350821","label":"长汀县"},{"value":"350822","label":"永定县"},{"value":"350823","label":"上杭县"},{"value":"350824","label":"武平县"},{"value":"350825","label":"连城县"},{"value":"350881","label":"漳平市"}]},{"value":"350900","label":"宁德市","children":[{"value":"350902","label":"蕉城区"},{"value":"350921","label":"霞浦县"},{"value":"350922","label":"古田县"},{"value":"350923","label":"屏南县"},{"value":"350924","label":"寿宁县"},{"value":"350925","label":"周宁县"},{"value":"350926","label":"柘荣县"},{"value":"350981","label":"福安市"},{"value":"350982","label":"福鼎市"}]}]},{"label":"江西省","value":"360000","children":[{"value":"360100","label":"南昌市","children":[{"value":"360102","label":"东湖区"},{"value":"360103","label":"西湖区"},{"value":"360104","label":"青云谱区"},{"value":"360105","label":"湾里区"},{"value":"360111","label":"青山湖区"},{"value":"360121","label":"南昌县"},{"value":"360122","label":"新建县"},{"value":"360123","label":"安义县"},{"value":"360124","label":"进贤县"},{"value":"360125","label":"红谷滩新区"},{"value":"360126","label":"经济技术开发区"},{"value":"360127","label":"昌北区"}]},{"value":"360200","label":"景德镇市","children":[{"value":"360202","label":"昌江区"},{"value":"360203","label":"珠山区"},{"value":"360222","label":"浮梁县"},{"value":"360281","label":"乐平市"}]},{"value":"360300","label":"萍乡市","children":[{"value":"360302","label":"安源区"},{"value":"360313","label":"湘东区"},{"value":"360321","label":"莲花县"},{"value":"360322","label":"上栗县"},{"value":"360323","label":"芦溪县"}]},{"value":"360400","label":"九江市","children":[{"value":"360402","label":"庐山区"},{"value":"360403","label":"浔阳区"},{"value":"360421","label":"九江县"},{"value":"360423","label":"武宁县"},{"value":"360424","label":"修水县"},{"value":"360425","label":"永修县"},{"value":"360426","label":"德安县"},{"value":"360427","label":"星子县"},{"value":"360428","label":"都昌县"},{"value":"360429","label":"湖口县"},{"value":"360430","label":"彭泽县"},{"value":"360481","label":"瑞昌市"}]},{"value":"360500","label":"新余市","children":[{"value":"360502","label":"渝水区"},{"value":"360521","label":"分宜县"}]},{"value":"360600","label":"鹰潭市","children":[{"value":"360602","label":"月湖区"},{"value":"360622","label":"余江县"},{"value":"360681","label":"贵溪市"}]},{"value":"360700","label":"赣州市","children":[{"value":"360702","label":"章贡区"},{"value":"360721","label":"赣县"},{"value":"360722","label":"信丰县"},{"value":"360723","label":"大余县"},{"value":"360724","label":"上犹县"},{"value":"360725","label":"崇义县"},{"value":"360726","label":"安远县"},{"value":"360727","label":"龙南县"},{"value":"360728","label":"定南县"},{"value":"360729","label":"全南县"},{"value":"360730","label":"宁都县"},{"value":"360731","label":"于都县"},{"value":"360732","label":"兴国县"},{"value":"360733","label":"会昌县"},{"value":"360734","label":"寻乌县"},{"value":"360735","label":"石城县"},{"value":"360751","label":"黄金区"},{"value":"360781","label":"瑞金市"},{"value":"360782","label":"南康市"}]},{"value":"360800","label":"吉安市","children":[{"value":"360802","label":"吉州区"},{"value":"360803","label":"青原区"},{"value":"360821","label":"吉安县"},{"value":"360822","label":"吉水县"},{"value":"360823","label":"峡江县"},{"value":"360824","label":"新干县"},{"value":"360825","label":"永丰县"},{"value":"360826","label":"泰和县"},{"value":"360827","label":"遂川县"},{"value":"360828","label":"万安县"},{"value":"360829","label":"安福县"},{"value":"360830","label":"永新县"},{"value":"360881","label":"井冈山市"}]},{"value":"360900","label":"宜春市","children":[{"value":"360902","label":"袁州区"},{"value":"360921","label":"奉新县"},{"value":"360922","label":"万载县"},{"value":"360923","label":"上高县"},{"value":"360924","label":"宜丰县"},{"value":"360925","label":"靖安县"},{"value":"360926","label":"铜鼓县"},{"value":"360981","label":"丰城市"},{"value":"360982","label":"樟树市"},{"value":"360983","label":"高安市"}]},{"value":"361000","label":"抚州市","children":[{"value":"361002","label":"临川区"},{"value":"361021","label":"南城县"},{"value":"361022","label":"黎川县"},{"value":"361023","label":"南丰县"},{"value":"361024","label":"崇仁县"},{"value":"361025","label":"乐安县"},{"value":"361026","label":"宜黄县"},{"value":"361027","label":"金溪县"},{"value":"361028","label":"资溪县"},{"value":"361029","label":"东乡县"},{"value":"361030","label":"广昌县"}]},{"value":"361100","label":"上饶市","children":[{"value":"361102","label":"信州区"},{"value":"361121","label":"上饶县"},{"value":"361122","label":"广丰县"},{"value":"361123","label":"玉山县"},{"value":"361124","label":"铅山县"},{"value":"361125","label":"横峰县"},{"value":"361126","label":"弋阳县"},{"value":"361127","label":"余干县"},{"value":"361128","label":"鄱阳县"},{"value":"361129","label":"万年县"},{"value":"361130","label":"婺源县"},{"value":"361181","label":"德兴市"}]}]},{"label":"山东省","value":"370000","children":[{"value":"370100","label":"济南市","children":[{"value":"370102","label":"历下区"},{"value":"370103","label":"市中区"},{"value":"370104","label":"槐荫区"},{"value":"370105","label":"天桥区"},{"value":"370112","label":"历城区"},{"value":"370113","label":"长清区"},{"value":"370124","label":"平阴县"},{"value":"370125","label":"济阳县"},{"value":"370126","label":"商河县"},{"value":"370181","label":"章丘市"}]},{"value":"370200","label":"青岛市","children":[{"value":"370202","label":"市南区"},{"value":"370203","label":"市北区"},{"value":"370205","label":"四方区"},{"value":"370211","label":"黄岛区"},{"value":"370212","label":"崂山区"},{"value":"370213","label":"李沧区"},{"value":"370214","label":"城阳区"},{"value":"370251","label":"开发区"},{"value":"370281","label":"胶州市"},{"value":"370282","label":"即墨市"},{"value":"370283","label":"平度市"},{"value":"370284","label":"胶南市"},{"value":"370285","label":"莱西市"}]},{"value":"370300","label":"淄博市","children":[{"value":"370302","label":"淄川区"},{"value":"370303","label":"张店区"},{"value":"370304","label":"博山区"},{"value":"370305","label":"临淄区"},{"value":"370306","label":"周村区"},{"value":"370321","label":"桓台县"},{"value":"370322","label":"高青县"},{"value":"370323","label":"沂源县"}]},{"value":"370400","label":"枣庄市","children":[{"value":"370402","label":"市中区"},{"value":"370403","label":"薛城区"},{"value":"370404","label":"峄城区"},{"value":"370405","label":"台儿庄区"},{"value":"370406","label":"山亭区"},{"value":"370481","label":"滕州市"}]},{"value":"370500","label":"东营市","children":[{"value":"370502","label":"东营区"},{"value":"370503","label":"河口区"},{"value":"370521","label":"垦利县"},{"value":"370522","label":"利津县"},{"value":"370523","label":"广饶县"},{"value":"370589","label":"西城区"},{"value":"370590","label":"东城区"}]},{"value":"370600","label":"烟台市","children":[{"value":"370602","label":"芝罘区"},{"value":"370611","label":"福山区"},{"value":"370612","label":"牟平区"},{"value":"370613","label":"莱山区"},{"value":"370634","label":"长岛县"},{"value":"370681","label":"龙口市"},{"value":"370682","label":"莱阳市"},{"value":"370683","label":"莱州市"},{"value":"370684","label":"蓬莱市"},{"value":"370685","label":"招远市"},{"value":"370686","label":"栖霞市"},{"value":"370687","label":"海阳市"}]},{"value":"370700","label":"潍坊市","children":[{"value":"370702","label":"潍城区"},{"value":"370703","label":"寒亭区"},{"value":"370704","label":"坊子区"},{"value":"370705","label":"奎文区"},{"value":"370724","label":"临朐县"},{"value":"370725","label":"昌乐县"},{"value":"370751","label":"开发区"},{"value":"370781","label":"青州市"},{"value":"370782","label":"诸城市"},{"value":"370783","label":"寿光市"},{"value":"370784","label":"安丘市"},{"value":"370785","label":"高密市"},{"value":"370786","label":"昌邑市"}]},{"value":"370800","label":"济宁市","children":[{"value":"370802","label":"市中区"},{"value":"370811","label":"任城区"},{"value":"370826","label":"微山县"},{"value":"370827","label":"鱼台县"},{"value":"370828","label":"金乡县"},{"value":"370829","label":"嘉祥县"},{"value":"370830","label":"汶上县"},{"value":"370831","label":"泗水县"},{"value":"370832","label":"梁山县"},{"value":"370881","label":"曲阜市"},{"value":"370882","label":"兖州市"},{"value":"370883","label":"邹城市"}]},{"value":"370900","label":"泰安市","children":[{"value":"370902","label":"泰山区"},{"value":"370903","label":"岱岳区"},{"value":"370921","label":"宁阳县"},{"value":"370923","label":"东平县"},{"value":"370982","label":"新泰市"},{"value":"370983","label":"肥城市"}]},{"value":"371000","label":"威海市","children":[{"value":"371002","label":"环翠区"},{"value":"371081","label":"文登市"},{"value":"371082","label":"荣成市"},{"value":"371083","label":"乳山市"}]},{"value":"371100","label":"日照市","children":[{"value":"371102","label":"东港区"},{"value":"371103","label":"岚山区"},{"value":"371121","label":"五莲县"},{"value":"371122","label":"莒县"}]},{"value":"371200","label":"莱芜市","children":[{"value":"371202","label":"莱城区"},{"value":"371203","label":"钢城区"}]},{"value":"371300","label":"临沂市","children":[{"value":"371302","label":"兰山区"},{"value":"371311","label":"罗庄区"},{"value":"371312","label":"河东区"},{"value":"371321","label":"沂南县"},{"value":"371322","label":"郯城县"},{"value":"371323","label":"沂水县"},{"value":"371324","label":"苍山县"},{"value":"371325","label":"费县"},{"value":"371326","label":"平邑县"},{"value":"371327","label":"莒南县"},{"value":"371328","label":"蒙阴县"},{"value":"371329","label":"临沭县"}]},{"value":"371400","label":"德州市","children":[{"value":"371402","label":"德城区"},{"value":"371421","label":"陵县"},{"value":"371422","label":"宁津县"},{"value":"371423","label":"庆云县"},{"value":"371424","label":"临邑县"},{"value":"371425","label":"齐河县"},{"value":"371426","label":"平原县"},{"value":"371427","label":"夏津县"},{"value":"371428","label":"武城县"},{"value":"371451","label":"开发区"},{"value":"371481","label":"乐陵市"},{"value":"371482","label":"禹城市"}]},{"value":"371500","label":"聊城市","children":[{"value":"371502","label":"东昌府区"},{"value":"371521","label":"阳谷县"},{"value":"371522","label":"莘县"},{"value":"371523","label":"茌平县"},{"value":"371524","label":"东阿县"},{"value":"371525","label":"冠县"},{"value":"371526","label":"高唐县"},{"value":"371581","label":"临清市"}]},{"value":"371600","label":"滨州市","children":[{"value":"371602","label":"滨城区"},{"value":"371621","label":"惠民县"},{"value":"371622","label":"阳信县"},{"value":"371623","label":"无棣县"},{"value":"371624","label":"沾化县"},{"value":"371625","label":"博兴县"},{"value":"371626","label":"邹平县"}]},{"value":"371700","label":"菏泽市","children":[{"value":"371702","label":"牡丹区"},{"value":"371721","label":"曹县"},{"value":"371722","label":"单县"},{"value":"371723","label":"成武县"},{"value":"371724","label":"巨野县"},{"value":"371725","label":"郓城县"},{"value":"371726","label":"鄄城县"},{"value":"371727","label":"定陶县"},{"value":"371728","label":"东明县"}]}]},{"label":"河南省","value":"410000","children":[{"value":"410100","label":"郑州市","children":[{"value":"410102","label":"中原区"},{"value":"410103","label":"二七区"},{"value":"410104","label":"管城回族区"},{"value":"410105","label":"金水区"},{"value":"410106","label":"上街区"},{"value":"410108","label":"惠济区"},{"value":"410122","label":"中牟县"},{"value":"410181","label":"巩义市"},{"value":"410182","label":"荥阳市"},{"value":"410183","label":"新密市"},{"value":"410184","label":"新郑市"},{"value":"410185","label":"登封市"},{"value":"410186","label":"郑东新区"},{"value":"410187","label":"高新区"}]},{"value":"410200","label":"开封市","children":[{"value":"410202","label":"龙亭区"},{"value":"410203","label":"顺河回族区"},{"value":"410204","label":"鼓楼区"},{"value":"410205","label":"禹王台区"},{"value":"410211","label":"金明区"},{"value":"410221","label":"杞县"},{"value":"410222","label":"通许县"},{"value":"410223","label":"尉氏县"},{"value":"410224","label":"开封县"},{"value":"410225","label":"兰考县"}]},{"value":"410300","label":"洛阳市","children":[{"value":"410302","label":"老城区"},{"value":"410303","label":"西工区"},{"value":"410304","label":"廛河回族区"},{"value":"410305","label":"涧西区"},{"value":"410306","label":"吉利区"},{"value":"410307","label":"洛龙区"},{"value":"410322","label":"孟津县"},{"value":"410323","label":"新安县"},{"value":"410324","label":"栾川县"},{"value":"410325","label":"嵩县"},{"value":"410326","label":"汝阳县"},{"value":"410327","label":"宜阳县"},{"value":"410328","label":"洛宁县"},{"value":"410329","label":"伊川县"},{"value":"410381","label":"偃师市"},{"value":"471004","label":"高新区"}]},{"value":"410400","label":"平顶山市","children":[{"value":"410402","label":"新华区"},{"value":"410403","label":"卫东区"},{"value":"410404","label":"石龙区"},{"value":"410411","label":"湛河区"},{"value":"410421","label":"宝丰县"},{"value":"410422","label":"叶县"},{"value":"410423","label":"鲁山县"},{"value":"410425","label":"郏县"},{"value":"410481","label":"舞钢市"},{"value":"410482","label":"汝州市"}]},{"value":"410500","label":"安阳市","children":[{"value":"410502","label":"文峰区"},{"value":"410503","label":"北关区"},{"value":"410505","label":"殷都区"},{"value":"410506","label":"龙安区"},{"value":"410522","label":"安阳县"},{"value":"410523","label":"汤阴县"},{"value":"410526","label":"滑县"},{"value":"410527","label":"内黄县"},{"value":"410581","label":"林州市"}]},{"value":"410600","label":"鹤壁市","children":[{"value":"410602","label":"鹤山区"},{"value":"410603","label":"山城区"},{"value":"410611","label":"淇滨区"},{"value":"410621","label":"浚县"},{"value":"410622","label":"淇县"}]},{"value":"410700","label":"新乡市","children":[{"value":"410702","label":"红旗区"},{"value":"410703","label":"卫滨区"},{"value":"410704","label":"凤泉区"},{"value":"410711","label":"牧野区"},{"value":"410721","label":"新乡县"},{"value":"410724","label":"获嘉县"},{"value":"410725","label":"原阳县"},{"value":"410726","label":"延津县"},{"value":"410727","label":"封丘县"},{"value":"410728","label":"长垣县"},{"value":"410781","label":"卫辉市"},{"value":"410782","label":"辉县市"}]},{"value":"410800","label":"焦作市","children":[{"value":"410802","label":"解放区"},{"value":"410803","label":"中站区"},{"value":"410804","label":"马村区"},{"value":"410811","label":"山阳区"},{"value":"410821","label":"修武县"},{"value":"410822","label":"博爱县"},{"value":"410823","label":"武陟县"},{"value":"410825","label":"温县"},{"value":"410882","label":"沁阳市"},{"value":"410883","label":"孟州市"}]},{"value":"410881","label":"济源市"},{"value":"410900","label":"濮阳市","children":[{"value":"410902","label":"华龙区"},{"value":"410922","label":"清丰县"},{"value":"410923","label":"南乐县"},{"value":"410926","label":"范县"},{"value":"410927","label":"台前县"},{"value":"410928","label":"濮阳县"}]},{"value":"411000","label":"许昌市","children":[{"value":"411002","label":"魏都区"},{"value":"411023","label":"许昌县"},{"value":"411024","label":"鄢陵县"},{"value":"411025","label":"襄城县"},{"value":"411081","label":"禹州市"},{"value":"411082","label":"长葛市"}]},{"value":"411100","label":"漯河市","children":[{"value":"411102","label":"源汇区"},{"value":"411103","label":"郾城区"},{"value":"411104","label":"召陵区"},{"value":"411121","label":"舞阳县"},{"value":"411122","label":"临颍县"}]},{"value":"411200","label":"三门峡市","children":[{"value":"411202","label":"湖滨区"},{"value":"411221","label":"渑池县"},{"value":"411222","label":"陕县"},{"value":"411224","label":"卢氏县"},{"value":"411281","label":"义马市"},{"value":"411282","label":"灵宝市"}]},{"value":"411300","label":"南阳市","children":[{"value":"411302","label":"宛城区"},{"value":"411303","label":"卧龙区"},{"value":"411321","label":"南召县"},{"value":"411322","label":"方城县"},{"value":"411323","label":"西峡县"},{"value":"411324","label":"镇平县"},{"value":"411325","label":"内乡县"},{"value":"411326","label":"淅川县"},{"value":"411327","label":"社旗县"},{"value":"411328","label":"唐河县"},{"value":"411329","label":"新野县"},{"value":"411330","label":"桐柏县"},{"value":"411381","label":"邓州市"}]},{"value":"411400","label":"商丘市","children":[{"value":"411402","label":"梁园区"},{"value":"411403","label":"睢阳区"},{"value":"411421","label":"民权县"},{"value":"411422","label":"睢县"},{"value":"411423","label":"宁陵县"},{"value":"411424","label":"柘城县"},{"value":"411425","label":"虞城县"},{"value":"411426","label":"夏邑县"},{"value":"411481","label":"永城市"}]},{"value":"411500","label":"信阳市","children":[{"value":"411502","label":"浉河区"},{"value":"411503","label":"平桥区"},{"value":"411521","label":"罗山县"},{"value":"411522","label":"光山县"},{"value":"411523","label":"新县"},{"value":"411524","label":"商城县"},{"value":"411525","label":"固始县"},{"value":"411526","label":"潢川县"},{"value":"411527","label":"淮滨县"},{"value":"411528","label":"息县"}]},{"value":"411600","label":"周口市","children":[{"value":"411602","label":"川汇区"},{"value":"411621","label":"扶沟县"},{"value":"411622","label":"西华县"},{"value":"411623","label":"商水县"},{"value":"411624","label":"沈丘县"},{"value":"411625","label":"郸城县"},{"value":"411626","label":"淮阳县"},{"value":"411627","label":"太康县"},{"value":"411628","label":"鹿邑县"},{"value":"411681","label":"项城市"}]},{"value":"411700","label":"驻马店市","children":[{"value":"411702","label":"驿城区"},{"value":"411721","label":"西平县"},{"value":"411722","label":"上蔡县"},{"value":"411723","label":"平舆县"},{"value":"411724","label":"正阳县"},{"value":"411725","label":"确山县"},{"value":"411726","label":"泌阳县"},{"value":"411727","label":"汝南县"},{"value":"411728","label":"遂平县"},{"value":"411729","label":"新蔡县"}]}]},{"label":"湖北省","value":"420000","children":[{"value":"420100","label":"武汉市","children":[{"value":"420102","label":"江岸区"},{"value":"420103","label":"江汉区"},{"value":"420104","label":"硚口区"},{"value":"420105","label":"汉阳区"},{"value":"420106","label":"武昌区"},{"value":"420107","label":"青山区"},{"value":"420111","label":"洪山区"},{"value":"420112","label":"东西湖区"},{"value":"420113","label":"汉南区"},{"value":"420114","label":"蔡甸区"},{"value":"420115","label":"江夏区"},{"value":"420116","label":"黄陂区"},{"value":"420117","label":"新洲区"}]},{"value":"420200","label":"黄石市","children":[{"value":"420202","label":"黄石港区"},{"value":"420203","label":"西塞山区"},{"value":"420204","label":"下陆区"},{"value":"420205","label":"铁山区"},{"value":"420222","label":"阳新县"},{"value":"420281","label":"大冶市"}]},{"value":"420300","label":"十堰市","children":[{"value":"420302","label":"茅箭区"},{"value":"420303","label":"张湾区"},{"value":"420321","label":"郧县"},{"value":"420322","label":"郧西县"},{"value":"420323","label":"竹山县"},{"value":"420324","label":"竹溪县"},{"value":"420325","label":"房县"},{"value":"420381","label":"丹江口市"},{"value":"420382","label":"城区"}]},{"value":"420500","label":"宜昌市","children":[{"value":"420502","label":"西陵区"},{"value":"420503","label":"伍家岗区"},{"value":"420504","label":"点军区"},{"value":"420505","label":"猇亭区"},{"value":"420506","label":"夷陵区"},{"value":"420525","label":"远安县"},{"value":"420526","label":"兴山县"},{"value":"420527","label":"秭归县"},{"value":"420528","label":"长阳土家族自治县"},{"value":"420529","label":"五峰土家族自治县"},{"value":"420551","label":"葛洲坝区"},{"value":"420552","label":"开发区"},{"value":"420581","label":"宜都市"},{"value":"420582","label":"当阳市"},{"value":"420583","label":"枝江市"}]},{"value":"420600","label":"襄阳市","children":[{"value":"420602","label":"襄城区"},{"value":"420606","label":"樊城区"},{"value":"420607","label":"襄州区"},{"value":"420624","label":"南漳县"},{"value":"420625","label":"谷城县"},{"value":"420626","label":"保康县"},{"value":"420682","label":"老河口市"},{"value":"420683","label":"枣阳市"},{"value":"420684","label":"宜城市"}]},{"value":"420700","label":"鄂州市","children":[{"value":"420702","label":"梁子湖区"},{"value":"420703","label":"华容区"},{"value":"420704","label":"鄂城区"}]},{"value":"420800","label":"荆门市","children":[{"value":"420802","label":"东宝区"},{"value":"420804","label":"掇刀区"},{"value":"420821","label":"京山县"},{"value":"420822","label":"沙洋县"},{"value":"420881","label":"钟祥市"}]},{"value":"420900","label":"孝感市","children":[{"value":"420902","label":"孝南区"},{"value":"420921","label":"孝昌县"},{"value":"420922","label":"大悟县"},{"value":"420923","label":"云梦县"},{"value":"420981","label":"应城市"},{"value":"420982","label":"安陆市"},{"value":"420984","label":"汉川市"}]},{"value":"421000","label":"荆州市","children":[{"value":"421002","label":"沙市区"},{"value":"421003","label":"荆州区"},{"value":"421022","label":"公安县"},{"value":"421023","label":"监利县"},{"value":"421024","label":"江陵县"},{"value":"421081","label":"石首市"},{"value":"421083","label":"洪湖市"},{"value":"421087","label":"松滋市"}]},{"value":"421100","label":"黄冈市","children":[{"value":"421102","label":"黄州区"},{"value":"421121","label":"团风县"},{"value":"421122","label":"红安县"},{"value":"421123","label":"罗田县"},{"value":"421124","label":"英山县"},{"value":"421125","label":"浠水县"},{"value":"421126","label":"蕲春县"},{"value":"421127","label":"黄梅县"},{"value":"421181","label":"麻城市"},{"value":"421182","label":"武穴市"}]},{"value":"421200","label":"咸宁市","children":[{"value":"421202","label":"咸安区"},{"value":"421221","label":"嘉鱼县"},{"value":"421222","label":"通城县"},{"value":"421223","label":"崇阳县"},{"value":"421224","label":"通山县"},{"value":"421281","label":"赤壁市"},{"value":"421282","label":"温泉城区"}]},{"value":"421300","label":"随州市","children":[{"value":"421302","label":"曾都区"},{"value":"421321","label":"随县"},{"value":"421381","label":"广水市"}]},{"value":"422800","label":"恩施土家族苗族自治州","children":[{"value":"422801","label":"恩施市"},{"value":"422802","label":"利川市"},{"value":"422822","label":"建始县"},{"value":"422823","label":"巴东县"},{"value":"422825","label":"宣恩县"},{"value":"422826","label":"咸丰县"},{"value":"422827","label":"来凤县"},{"value":"422828","label":"鹤峰县"}]},{"value":"429004","label":"仙桃市"},{"value":"429005","label":"潜江市"},{"value":"429006","label":"天门市"},{"value":"429021","label":"神农架林区"}]},{"label":"湖南省","value":"430000","children":[{"value":"430100","label":"长沙市","children":[{"value":"430102","label":"芙蓉区"},{"value":"430103","label":"天心区"},{"value":"430104","label":"岳麓区"},{"value":"430105","label":"开福区"},{"value":"430111","label":"雨花区"},{"value":"430121","label":"长沙县"},{"value":"430122","label":"望城县"},{"value":"430124","label":"宁乡县"},{"value":"430181","label":"浏阳市"}]},{"value":"430200","label":"株洲市","children":[{"value":"430202","label":"荷塘区"},{"value":"430203","label":"芦淞区"},{"value":"430204","label":"石峰区"},{"value":"430211","label":"天元区"},{"value":"430221","label":"株洲县"},{"value":"430223","label":"攸县"},{"value":"430224","label":"茶陵县"},{"value":"430225","label":"炎陵县"},{"value":"430281","label":"醴陵市"}]},{"value":"430300","label":"湘潭市","children":[{"value":"430302","label":"雨湖区"},{"value":"430304","label":"岳塘区"},{"value":"430321","label":"湘潭县"},{"value":"430381","label":"湘乡市"},{"value":"430382","label":"韶山市"}]},{"value":"430400","label":"衡阳市","children":[{"value":"430405","label":"珠晖区"},{"value":"430406","label":"雁峰区"},{"value":"430407","label":"石鼓区"},{"value":"430408","label":"蒸湘区"},{"value":"430412","label":"南岳区"},{"value":"430421","label":"衡阳县"},{"value":"430422","label":"衡南县"},{"value":"430423","label":"衡山县"},{"value":"430424","label":"衡东县"},{"value":"430426","label":"祁东县"},{"value":"430481","label":"耒阳市"},{"value":"430482","label":"常宁市"}]},{"value":"430500","label":"邵阳市","children":[{"value":"430502","label":"双清区"},{"value":"430503","label":"大祥区"},{"value":"430511","label":"北塔区"},{"value":"430521","label":"邵东县"},{"value":"430522","label":"新邵县"},{"value":"430523","label":"邵阳县"},{"value":"430524","label":"隆回县"},{"value":"430525","label":"洞口县"},{"value":"430527","label":"绥宁县"},{"value":"430528","label":"新宁县"},{"value":"430529","label":"城步苗族自治县"},{"value":"430581","label":"武冈市"}]},{"value":"430600","label":"岳阳市","children":[{"value":"430602","label":"岳阳楼区"},{"value":"430603","label":"云溪区"},{"value":"430611","label":"君山区"},{"value":"430621","label":"岳阳县"},{"value":"430623","label":"华容县"},{"value":"430624","label":"湘阴县"},{"value":"430626","label":"平江县"},{"value":"430681","label":"汨罗市"},{"value":"430682","label":"临湘市"}]},{"value":"430700","label":"常德市","children":[{"value":"430702","label":"武陵区"},{"value":"430703","label":"鼎城区"},{"value":"430721","label":"安乡县"},{"value":"430722","label":"汉寿县"},{"value":"430723","label":"澧县"},{"value":"430724","label":"临澧县"},{"value":"430725","label":"桃源县"},{"value":"430726","label":"石门县"},{"value":"430781","label":"津市市"}]},{"value":"430800","label":"张家界市","children":[{"value":"430802","label":"永定区"},{"value":"430811","label":"武陵源区"},{"value":"430821","label":"慈利县"},{"value":"430822","label":"桑植县"}]},{"value":"430900","label":"益阳市","children":[{"value":"430902","label":"资阳区"},{"value":"430903","label":"赫山区"},{"value":"430921","label":"南县"},{"value":"430922","label":"桃江县"},{"value":"430923","label":"安化县"},{"value":"430981","label":"沅江市"}]},{"value":"431000","label":"郴州市","children":[{"value":"431002","label":"北湖区"},{"value":"431003","label":"苏仙区"},{"value":"431021","label":"桂阳县"},{"value":"431022","label":"宜章县"},{"value":"431023","label":"永兴县"},{"value":"431024","label":"嘉禾县"},{"value":"431025","label":"临武县"},{"value":"431026","label":"汝城县"},{"value":"431027","label":"桂东县"},{"value":"431028","label":"安仁县"},{"value":"431081","label":"资兴市"}]},{"value":"431100","label":"永州市","children":[{"value":"431102","label":"零陵区"},{"value":"431103","label":"冷水滩区"},{"value":"431121","label":"祁阳县"},{"value":"431122","label":"东安县"},{"value":"431123","label":"双牌县"},{"value":"431124","label":"道县"},{"value":"431125","label":"江永县"},{"value":"431126","label":"宁远县"},{"value":"431127","label":"蓝山县"},{"value":"431128","label":"新田县"},{"value":"431129","label":"江华瑶族自治县"}]},{"value":"431200","label":"怀化市","children":[{"value":"431202","label":"鹤城区"},{"value":"431221","label":"中方县"},{"value":"431222","label":"沅陵县"},{"value":"431223","label":"辰溪县"},{"value":"431224","label":"溆浦县"},{"value":"431225","label":"会同县"},{"value":"431226","label":"麻阳苗族自治县"},{"value":"431227","label":"新晃侗族自治县"},{"value":"431228","label":"芷江侗族自治县"},{"value":"431229","label":"靖州苗族侗族自治县"},{"value":"431230","label":"通道侗族自治县"},{"value":"431281","label":"洪江市"}]},{"value":"431300","label":"娄底市","children":[{"value":"431302","label":"娄星区"},{"value":"431321","label":"双峰县"},{"value":"431322","label":"新化县"},{"value":"431381","label":"冷水江市"},{"value":"431382","label":"涟源市"}]},{"value":"433100","label":"湘西土家族苗族自治州","children":[{"value":"433101","label":"吉首市"},{"value":"433122","label":"泸溪县"},{"value":"433123","label":"凤凰县"},{"value":"433124","label":"花垣县"},{"value":"433125","label":"保靖县"},{"value":"433126","label":"古丈县"},{"value":"433127","label":"永顺县"},{"value":"433130","label":"龙山县"}]}]},{"label":"广东省","value":"440000","children":[{"value":"440100","label":"广州市","children":[{"value":"440103","label":"荔湾区"},{"value":"440104","label":"越秀区"},{"value":"440105","label":"海珠区"},{"value":"440106","label":"天河区"},{"value":"440111","label":"白云区"},{"value":"440112","label":"黄埔区"},{"value":"440113","label":"番禺区"},{"value":"440114","label":"花都区"},{"value":"440115","label":"南沙区"},{"value":"440116","label":"萝岗区"},{"value":"440183","label":"增城市"},{"value":"440184","label":"从化市"},{"value":"440188","label":"东山区"}]},{"value":"440200","label":"韶关市","children":[{"value":"440203","label":"武江区"},{"value":"440204","label":"浈江区"},{"value":"440205","label":"曲江区"},{"value":"440222","label":"始兴县"},{"value":"440224","label":"仁化县"},{"value":"440229","label":"翁源县"},{"value":"440232","label":"乳源瑶族自治县"},{"value":"440233","label":"新丰县"},{"value":"440281","label":"乐昌市"},{"value":"440282","label":"南雄市"}]},{"value":"440300","label":"深圳市","children":[{"value":"440303","label":"罗湖区"},{"value":"440304","label":"福田区"},{"value":"440305","label":"南山区"},{"value":"440306","label":"宝安区"},{"value":"440307","label":"龙岗区"},{"value":"440308","label":"盐田区"},{"value":"1032697","label":"光明新区"},{"value":"1032698","label":"坪山新区"},{"value":"1032699","label":"大鹏新区"},{"value":"1032700","label":"龙华新区"}]},{"value":"440400","label":"珠海市","children":[{"value":"440402","label":"香洲区"},{"value":"440403","label":"斗门区"},{"value":"440404","label":"金湾区"},{"value":"440486","label":"金唐区"},{"value":"440487","label":"南湾区"}]},{"value":"440500","label":"汕头市","children":[{"value":"440507","label":"龙湖区"},{"value":"440511","label":"金平区"},{"value":"440512","label":"濠江区"},{"value":"440513","label":"潮阳区"},{"value":"440514","label":"潮南区"},{"value":"440515","label":"澄海区"},{"value":"440523","label":"南澳县"}]},{"value":"440600","label":"佛山市","children":[{"value":"440604","label":"禅城区"},{"value":"440605","label":"南海区"},{"value":"440606","label":"顺德区"},{"value":"440607","label":"三水区"},{"value":"440608","label":"高明区"}]},{"value":"440700","label":"江门市","children":[{"value":"440703","label":"蓬江区"},{"value":"440704","label":"江海区"},{"value":"440705","label":"新会区"},{"value":"440781","label":"台山市"},{"value":"440783","label":"开平市"},{"value":"440784","label":"鹤山市"},{"value":"440785","label":"恩平市"}]},{"value":"440800","label":"湛江市","children":[{"value":"440802","label":"赤坎区"},{"value":"440803","label":"霞山区"},{"value":"440804","label":"坡头区"},{"value":"440811","label":"麻章区"},{"value":"440823","label":"遂溪县"},{"value":"440825","label":"徐闻县"},{"value":"440881","label":"廉江市"},{"value":"440882","label":"雷州市"},{"value":"440883","label":"吴川市"}]},{"value":"440900","label":"茂名市","children":[{"value":"440902","label":"茂南区"},{"value":"440903","label":"茂港区"},{"value":"440923","label":"电白县"},{"value":"440981","label":"高州市"},{"value":"440982","label":"化州市"},{"value":"440983","label":"信宜市"}]},{"value":"441200","label":"肇庆市","children":[{"value":"441202","label":"端州区"},{"value":"441203","label":"鼎湖区"},{"value":"441223","label":"广宁县"},{"value":"441224","label":"怀集县"},{"value":"441225","label":"封开县"},{"value":"441226","label":"德庆县"},{"value":"441283","label":"高要市"},{"value":"441284","label":"四会市"}]},{"value":"441300","label":"惠州市","children":[{"value":"441302","label":"惠城区"},{"value":"441303","label":"惠阳区"},{"value":"441322","label":"博罗县"},{"value":"441323","label":"惠东县"},{"value":"441324","label":"龙门县"}]},{"value":"441400","label":"梅州市","children":[{"value":"441402","label":"梅江区"},{"value":"441421","label":"梅县"},{"value":"441422","label":"大埔县"},{"value":"441423","label":"丰顺县"},{"value":"441424","label":"五华县"},{"value":"441426","label":"平远县"},{"value":"441427","label":"蕉岭县"},{"value":"441481","label":"兴宁市"}]},{"value":"441500","label":"汕尾市","children":[{"value":"441502","label":"城区"},{"value":"441521","label":"海丰县"},{"value":"441523","label":"陆河县"},{"value":"441581","label":"陆丰市"}]},{"value":"441600","label":"河源市","children":[{"value":"441602","label":"源城区"},{"value":"441621","label":"紫金县"},{"value":"441622","label":"龙川县"},{"value":"441623","label":"连平县"},{"value":"441624","label":"和平县"},{"value":"441625","label":"东源县"}]},{"value":"441700","label":"阳江市","children":[{"value":"441702","label":"江城区"},{"value":"441721","label":"阳西县"},{"value":"441723","label":"阳东县"},{"value":"441781","label":"阳春市"}]},{"value":"441800","label":"清远市","children":[{"value":"441802","label":"清城区"},{"value":"441821","label":"佛冈县"},{"value":"441823","label":"阳山县"},{"value":"441825","label":"连山壮族瑶族自治县"},{"value":"441826","label":"连南瑶族自治县"},{"value":"441827","label":"清新县"},{"value":"441881","label":"英德市"},{"value":"441882","label":"连州市"}]},{"value":"441900","label":"东莞市"},{"value":"442000","label":"中山市"},{"value":"445100","label":"潮州市","children":[{"value":"445102","label":"湘桥区"},{"value":"445121","label":"潮安县"},{"value":"445122","label":"饶平县"},{"value":"445185","label":"枫溪区"}]},{"value":"445200","label":"揭阳市","children":[{"value":"445202","label":"榕城区"},{"value":"445221","label":"揭东县"},{"value":"445222","label":"揭西县"},{"value":"445224","label":"惠来县"},{"value":"445281","label":"普宁市"},{"value":"445284","label":"东山区"}]},{"value":"445300","label":"云浮市","children":[{"value":"445302","label":"云城区"},{"value":"445321","label":"新兴县"},{"value":"445322","label":"郁南县"},{"value":"445323","label":"云安县"},{"value":"445381","label":"罗定市"}]}]},{"label":"广西壮族自治区","value":"450000","children":[{"value":"450100","label":"南宁市","children":[{"value":"450102","label":"兴宁区"},{"value":"450103","label":"青秀区"},{"value":"450105","label":"江南区"},{"value":"450107","label":"西乡塘区"},{"value":"450108","label":"良庆区"},{"value":"450109","label":"邕宁区"},{"value":"450122","label":"武鸣县"},{"value":"450123","label":"隆安县"},{"value":"450124","label":"马山县"},{"value":"450125","label":"上林县"},{"value":"450126","label":"宾阳县"},{"value":"450127","label":"横县"}]},{"value":"450200","label":"柳州市","children":[{"value":"450202","label":"城中区"},{"value":"450203","label":"鱼峰区"},{"value":"450204","label":"柳南区"},{"value":"450205","label":"柳北区"},{"value":"450221","label":"柳江县"},{"value":"450222","label":"柳城县"},{"value":"450223","label":"鹿寨县"},{"value":"450224","label":"融安县"},{"value":"450225","label":"融水苗族自治县"},{"value":"450226","label":"三江侗族自治县"}]},{"value":"450300","label":"桂林市","children":[{"value":"450302","label":"秀峰区"},{"value":"450303","label":"叠彩区"},{"value":"450304","label":"象山区"},{"value":"450305","label":"七星区"},{"value":"450311","label":"雁山区"},{"value":"450321","label":"阳朔县"},{"value":"450322","label":"临桂县"},{"value":"450323","label":"灵川县"},{"value":"450324","label":"全州县"},{"value":"450325","label":"兴安县"},{"value":"450326","label":"永福县"},{"value":"450327","label":"灌阳县"},{"value":"450328","label":"龙胜各族自治县"},{"value":"450329","label":"资源县"},{"value":"450330","label":"平乐县"},{"value":"450331","label":"荔浦县"},{"value":"450332","label":"恭城瑶族自治县"}]},{"value":"450400","label":"梧州市","children":[{"value":"450403","label":"万秀区"},{"value":"450404","label":"蝶山区"},{"value":"450405","label":"长洲区"},{"value":"450421","label":"苍梧县"},{"value":"450422","label":"藤县"},{"value":"450423","label":"蒙山县"},{"value":"450481","label":"岑溪市"}]},{"value":"450500","label":"北海市","children":[{"value":"450502","label":"海城区"},{"value":"450503","label":"银海区"},{"value":"450512","label":"铁山港区"},{"value":"450521","label":"合浦县"}]},{"value":"450600","label":"防城港市","children":[{"value":"450602","label":"港口区"},{"value":"450603","label":"防城区"},{"value":"450621","label":"上思县"},{"value":"450681","label":"东兴市"}]},{"value":"450700","label":"钦州市","children":[{"value":"450702","label":"钦南区"},{"value":"450703","label":"钦北区"},{"value":"450721","label":"灵山县"},{"value":"450722","label":"浦北县"}]},{"value":"450800","label":"贵港市","children":[{"value":"450802","label":"港北区"},{"value":"450803","label":"港南区"},{"value":"450804","label":"覃塘区"},{"value":"450821","label":"平南县"},{"value":"450881","label":"桂平市"}]},{"value":"450900","label":"玉林市","children":[{"value":"450902","label":"玉州区"},{"value":"450921","label":"容县"},{"value":"450922","label":"陆川县"},{"value":"450923","label":"博白县"},{"value":"450924","label":"兴业县"},{"value":"450981","label":"北流市"}]},{"value":"451000","label":"百色市","children":[{"value":"451002","label":"右江区"},{"value":"451021","label":"田阳县"},{"value":"451022","label":"田东县"},{"value":"451023","label":"平果县"},{"value":"451024","label":"德保县"},{"value":"451025","label":"靖西县"},{"value":"451026","label":"那坡县"},{"value":"451027","label":"凌云县"},{"value":"451028","label":"乐业县"},{"value":"451029","label":"田林县"},{"value":"451030","label":"西林县"},{"value":"451031","label":"隆林各族自治县"}]},{"value":"451100","label":"贺州市","children":[{"value":"451102","label":"八步区"},{"value":"451121","label":"昭平县"},{"value":"451122","label":"钟山县"},{"value":"451123","label":"富川瑶族自治县"}]},{"value":"451200","label":"河池市","children":[{"value":"451202","label":"金城江区"},{"value":"451221","label":"南丹县"},{"value":"451222","label":"天峨县"},{"value":"451223","label":"凤山县"},{"value":"451224","label":"东兰县"},{"value":"451225","label":"罗城仫佬族自治县"},{"value":"451226","label":"环江毛南族自治县"},{"value":"451227","label":"巴马瑶族自治县"},{"value":"451228","label":"都安瑶族自治县"},{"value":"451229","label":"大化瑶族自治县"},{"value":"451281","label":"宜州市"}]},{"value":"451300","label":"来宾市","children":[{"value":"451302","label":"兴宾区"},{"value":"451321","label":"忻城县"},{"value":"451322","label":"象州县"},{"value":"451323","label":"武宣县"},{"value":"451324","label":"金秀瑶族自治县"},{"value":"451381","label":"合山市"}]},{"value":"451400","label":"崇左市","children":[{"value":"451402","label":"江洲区"},{"value":"451421","label":"扶绥县"},{"value":"451422","label":"宁明县"},{"value":"451423","label":"龙州县"},{"value":"451424","label":"大新县"},{"value":"451425","label":"天等县"},{"value":"451481","label":"凭祥市"}]}]},{"label":"海南省","value":"460000","children":[{"value":"460100","label":"海口市","children":[{"value":"460105","label":"秀英区"},{"value":"460106","label":"龙华区"},{"value":"460107","label":"琼山区"},{"value":"460108","label":"美兰区"}]},{"value":"460200","label":"三亚市"},{"value":"469001","label":"五指山市"},{"value":"469002","label":"琼海市"},{"value":"469003","label":"儋州市"},{"value":"469005","label":"文昌市"},{"value":"469006","label":"万宁市"},{"value":"469007","label":"东方市"},{"value":"469025","label":"定安县"},{"value":"469026","label":"屯昌县"},{"value":"469027","label":"澄迈县"},{"value":"469028","label":"临高县"},{"value":"469030","label":"白沙黎族自治县"},{"value":"469031","label":"昌江黎族自治县"},{"value":"469033","label":"乐东黎族自治县"},{"value":"469034","label":"陵水黎族自治县"},{"value":"469035","label":"保亭黎族苗族自治县"},{"value":"469036","label":"琼中黎族苗族自治县"},{"value":"469037","label":"西沙群岛"},{"value":"469038","label":"南沙群岛"},{"value":"469039","label":"中沙群岛的岛礁及其海域"}]},{"label":"重庆","value":"500000","children":[{"value":"500100","label":"重庆市","children":[{"value":"500101","label":"万州区"},{"value":"500102","label":"涪陵区"},{"value":"500103","label":"渝中区"},{"value":"500104","label":"大渡口区"},{"value":"500105","label":"江北区"},{"value":"500106","label":"沙坪坝区"},{"value":"500107","label":"九龙坡区"},{"value":"500108","label":"南岸区"},{"value":"500109","label":"北碚区"},{"value":"500110","label":"万盛区"},{"value":"500111","label":"双桥区"},{"value":"500112","label":"渝北区"},{"value":"500113","label":"巴南区"},{"value":"500114","label":"黔江区"},{"value":"500115","label":"长寿区"},{"value":"500222","label":"綦江县"},{"value":"500223","label":"潼南县"},{"value":"500224","label":"铜梁县"},{"value":"500225","label":"大足县"},{"value":"500226","label":"荣昌县"},{"value":"500227","label":"璧山县"},{"value":"500228","label":"梁平县"},{"value":"500229","label":"城口县"},{"value":"500230","label":"丰都县"},{"value":"500231","label":"垫江县"},{"value":"500232","label":"武隆县"},{"value":"500233","label":"忠县"},{"value":"500234","label":"开县"},{"value":"500235","label":"云阳县"},{"value":"500236","label":"奉节县"},{"value":"500237","label":"巫山县"},{"value":"500238","label":"巫溪县"},{"value":"500240","label":"石柱土家族自治县"},{"value":"500241","label":"秀山土家族苗族自治县"},{"value":"500242","label":"酉阳土家族苗族自治县"},{"value":"500243","label":"彭水苗族土家族自治县"},{"value":"500381","label":"江津区"},{"value":"500382","label":"合川区"},{"value":"500383","label":"永川区"},{"value":"500384","label":"南川区"}]}]},{"label":"四川省","value":"510000","children":[{"value":"510100","label":"成都市","children":[{"value":"510104","label":"锦江区"},{"value":"510105","label":"青羊区"},{"value":"510106","label":"金牛区"},{"value":"510107","label":"武侯区"},{"value":"510108","label":"成华区"},{"value":"510112","label":"龙泉驿区"},{"value":"510113","label":"青白江区"},{"value":"510114","label":"新都区"},{"value":"510115","label":"温江区"},{"value":"510121","label":"金堂县"},{"value":"510122","label":"双流县"},{"value":"510124","label":"郫县"},{"value":"510129","label":"大邑县"},{"value":"510131","label":"蒲江县"},{"value":"510132","label":"新津县"},{"value":"510181","label":"都江堰市"},{"value":"510182","label":"彭州市"},{"value":"510183","label":"邛崃市"},{"value":"510184","label":"崇州市"}]},{"value":"510300","label":"自贡市","children":[{"value":"510302","label":"自流井区"},{"value":"510303","label":"贡井区"},{"value":"510304","label":"大安区"},{"value":"510311","label":"沿滩区"},{"value":"510321","label":"荣县"},{"value":"510322","label":"富顺县"}]},{"value":"510400","label":"攀枝花市","children":[{"value":"510402","label":"东区"},{"value":"510403","label":"西区"},{"value":"510411","label":"仁和区"},{"value":"510421","label":"米易县"},{"value":"510422","label":"盐边县"}]},{"value":"510500","label":"泸州市","children":[{"value":"510502","label":"江阳区"},{"value":"510503","label":"纳溪区"},{"value":"510504","label":"龙马潭区"},{"value":"510521","label":"泸县"},{"value":"510522","label":"合江县"},{"value":"510524","label":"叙永县"},{"value":"510525","label":"古蔺县"}]},{"value":"510600","label":"德阳市","children":[{"value":"510603","label":"旌阳区"},{"value":"510623","label":"中江县"},{"value":"510626","label":"罗江县"},{"value":"510681","label":"广汉市"},{"value":"510682","label":"什邡市"},{"value":"510683","label":"绵竹市"}]},{"value":"510700","label":"绵阳市","children":[{"value":"510703","label":"涪城区"},{"value":"510704","label":"游仙区"},{"value":"510722","label":"三台县"},{"value":"510723","label":"盐亭县"},{"value":"510724","label":"安县"},{"value":"510725","label":"梓潼县"},{"value":"510726","label":"北川羌族自治县"},{"value":"510727","label":"平武县"},{"value":"510751","label":"高新区"},{"value":"510781","label":"江油市"}]},{"value":"510800","label":"广元市","children":[{"value":"510802","label":"利州区"},{"value":"510811","label":"元坝区"},{"value":"510812","label":"朝天区"},{"value":"510821","label":"旺苍县"},{"value":"510822","label":"青川县"},{"value":"510823","label":"剑阁县"},{"value":"510824","label":"苍溪县"}]},{"value":"510900","label":"遂宁市","children":[{"value":"510903","label":"船山区"},{"value":"510904","label":"安居区"},{"value":"510921","label":"蓬溪县"},{"value":"510922","label":"射洪县"},{"value":"510923","label":"大英县"}]},{"value":"511000","label":"内江市","children":[{"value":"511002","label":"市中区"},{"value":"511011","label":"东兴区"},{"value":"511024","label":"威远县"},{"value":"511025","label":"资中县"},{"value":"511028","label":"隆昌县"}]},{"value":"511100","label":"乐山市","children":[{"value":"511102","label":"市中区"},{"value":"511111","label":"沙湾区"},{"value":"511112","label":"五通桥区"},{"value":"511113","label":"金口河区"},{"value":"511123","label":"犍为县"},{"value":"511124","label":"井研县"},{"value":"511126","label":"夹江县"},{"value":"511129","label":"沐川县"},{"value":"511132","label":"峨边彝族自治县"},{"value":"511133","label":"马边彝族自治县"},{"value":"511181","label":"峨眉山市"}]},{"value":"511300","label":"南充市","children":[{"value":"511302","label":"顺庆区"},{"value":"511303","label":"高坪区"},{"value":"511304","label":"嘉陵区"},{"value":"511321","label":"南部县"},{"value":"511322","label":"营山县"},{"value":"511323","label":"蓬安县"},{"value":"511324","label":"仪陇县"},{"value":"511325","label":"西充县"},{"value":"511381","label":"阆中市"}]},{"value":"511400","label":"眉山市","children":[{"value":"511402","label":"东坡区"},{"value":"511421","label":"仁寿县"},{"value":"511422","label":"彭山县"},{"value":"511423","label":"洪雅县"},{"value":"511424","label":"丹棱县"},{"value":"511425","label":"青神县"}]},{"value":"511500","label":"宜宾市","children":[{"value":"511502","label":"翠屏区"},{"value":"511521","label":"宜宾县"},{"value":"511522","label":"南溪县"},{"value":"511523","label":"江安县"},{"value":"511524","label":"长宁县"},{"value":"511525","label":"高县"},{"value":"511526","label":"珙县"},{"value":"511527","label":"筠连县"},{"value":"511528","label":"兴文县"},{"value":"511529","label":"屏山县"}]},{"value":"511600","label":"广安市","children":[{"value":"511602","label":"广安区"},{"value":"511621","label":"岳池县"},{"value":"511622","label":"武胜县"},{"value":"511623","label":"邻水县"},{"value":"511681","label":"华蓥市"},{"value":"511682","label":"市辖区"}]},{"value":"511700","label":"达州市","children":[{"value":"511702","label":"通川区"},{"value":"511721","label":"达县"},{"value":"511722","label":"宣汉县"},{"value":"511723","label":"开江县"},{"value":"511724","label":"大竹县"},{"value":"511725","label":"渠县"},{"value":"511781","label":"万源市"}]},{"value":"511800","label":"雅安市","children":[{"value":"511802","label":"雨城区"},{"value":"511821","label":"名山县"},{"value":"511822","label":"荥经县"},{"value":"511823","label":"汉源县"},{"value":"511824","label":"石棉县"},{"value":"511825","label":"天全县"},{"value":"511826","label":"芦山县"},{"value":"511827","label":"宝兴县"}]},{"value":"511900","label":"巴中市","children":[{"value":"511902","label":"巴州区"},{"value":"511921","label":"通江县"},{"value":"511922","label":"南江县"},{"value":"511923","label":"平昌县"}]},{"value":"512000","label":"资阳市","children":[{"value":"512002","label":"雁江区"},{"value":"512021","label":"安岳县"},{"value":"512022","label":"乐至县"},{"value":"512081","label":"简阳市"}]},{"value":"513200","label":"阿坝藏族羌族自治州","children":[{"value":"513221","label":"汶川县"},{"value":"513222","label":"理县"},{"value":"513223","label":"茂县"},{"value":"513224","label":"松潘县"},{"value":"513225","label":"九寨沟县"},{"value":"513226","label":"金川县"},{"value":"513227","label":"小金县"},{"value":"513228","label":"黑水县"},{"value":"513229","label":"马尔康县"},{"value":"513230","label":"壤塘县"},{"value":"513231","label":"阿坝县"},{"value":"513232","label":"若尔盖县"},{"value":"513233","label":"红原县"}]},{"value":"513300","label":"甘孜藏族自治州","children":[{"value":"513321","label":"康定县"},{"value":"513322","label":"泸定县"},{"value":"513323","label":"丹巴县"},{"value":"513324","label":"九龙县"},{"value":"513325","label":"雅江县"},{"value":"513326","label":"道孚县"},{"value":"513327","label":"炉霍县"},{"value":"513328","label":"甘孜县"},{"value":"513329","label":"新龙县"},{"value":"513330","label":"德格县"},{"value":"513331","label":"白玉县"},{"value":"513332","label":"石渠县"},{"value":"513333","label":"色达县"},{"value":"513334","label":"理塘县"},{"value":"513335","label":"巴塘县"},{"value":"513336","label":"乡城县"},{"value":"513337","label":"稻城县"},{"value":"513338","label":"得荣县"}]},{"value":"513400","label":"凉山彝族自治州","children":[{"value":"513401","label":"西昌市"},{"value":"513422","label":"木里藏族自治县"},{"value":"513423","label":"盐源县"},{"value":"513424","label":"德昌县"},{"value":"513425","label":"会理县"},{"value":"513426","label":"会东县"},{"value":"513427","label":"宁南县"},{"value":"513428","label":"普格县"},{"value":"513429","label":"布拖县"},{"value":"513430","label":"金阳县"},{"value":"513431","label":"昭觉县"},{"value":"513432","label":"喜德县"},{"value":"513433","label":"冕宁县"},{"value":"513434","label":"越西县"},{"value":"513435","label":"甘洛县"},{"value":"513436","label":"美姑县"},{"value":"513437","label":"雷波县"}]}]},{"label":"贵州省","value":"520000","children":[{"value":"520100","label":"贵阳市","children":[{"value":"520102","label":"南明区"},{"value":"520103","label":"云岩区"},{"value":"520111","label":"花溪区"},{"value":"520112","label":"乌当区"},{"value":"520113","label":"白云区"},{"value":"520114","label":"小河区"},{"value":"520121","label":"开阳县"},{"value":"520122","label":"息烽县"},{"value":"520123","label":"修文县"},{"value":"520151","label":"金阳开发区"},{"value":"520181","label":"清镇市"}]},{"value":"520200","label":"六盘水市","children":[{"value":"520201","label":"钟山区"},{"value":"520203","label":"六枝特区"},{"value":"520221","label":"水城县"},{"value":"520222","label":"盘县"}]},{"value":"520300","label":"遵义市","children":[{"value":"520302","label":"红花岗区"},{"value":"520303","label":"汇川区"},{"value":"520321","label":"遵义县"},{"value":"520322","label":"桐梓县"},{"value":"520323","label":"绥阳县"},{"value":"520324","label":"正安县"},{"value":"520325","label":"道真仡佬族苗族自治县"},{"value":"520326","label":"务川仡佬族苗族自治县"},{"value":"520327","label":"凤冈县"},{"value":"520328","label":"湄潭县"},{"value":"520329","label":"余庆县"},{"value":"520330","label":"习水县"},{"value":"520381","label":"赤水市"},{"value":"520382","label":"仁怀市"}]},{"value":"520400","label":"安顺市","children":[{"value":"520402","label":"西秀区"},{"value":"520421","label":"平坝县"},{"value":"520422","label":"普定县"},{"value":"520423","label":"镇宁布依族苗族自治县"},{"value":"520424","label":"关岭布依族苗族自治县"},{"value":"520425","label":"紫云苗族布依族自治县"}]},{"value":"522200","label":"铜仁地区","children":[{"value":"522201","label":"铜仁市"},{"value":"522222","label":"江口县"},{"value":"522223","label":"玉屏侗族自治县"},{"value":"522224","label":"石阡县"},{"value":"522225","label":"思南县"},{"value":"522226","label":"印江土家族苗族自治县"},{"value":"522227","label":"德江县"},{"value":"522228","label":"沿河土家族自治县"},{"value":"522229","label":"松桃苗族自治县"},{"value":"522230","label":"万山特区"}]},{"value":"522300","label":"黔西南布依族苗族自治州","children":[{"value":"522301","label":"兴义市"},{"value":"522322","label":"兴仁县"},{"value":"522323","label":"普安县"},{"value":"522324","label":"晴隆县"},{"value":"522325","label":"贞丰县"},{"value":"522326","label":"望谟县"},{"value":"522327","label":"册亨县"},{"value":"522328","label":"安龙县"}]},{"value":"522400","label":"毕节地区","children":[{"value":"522401","label":"毕节市"},{"value":"522422","label":"大方县"},{"value":"522423","label":"黔西县"},{"value":"522424","label":"金沙县"},{"value":"522425","label":"织金县"},{"value":"522426","label":"纳雍县"},{"value":"522427","label":"威宁彝族回族苗族自治县"},{"value":"522428","label":"赫章县"}]},{"value":"522600","label":"黔东南苗族侗族自治州","children":[{"value":"522601","label":"凯里市"},{"value":"522622","label":"黄平县"},{"value":"522623","label":"施秉县"},{"value":"522624","label":"三穗县"},{"value":"522625","label":"镇远县"},{"value":"522626","label":"岑巩县"},{"value":"522627","label":"天柱县"},{"value":"522628","label":"锦屏县"},{"value":"522629","label":"剑河县"},{"value":"522630","label":"台江县"},{"value":"522631","label":"黎平县"},{"value":"522632","label":"榕江县"},{"value":"522633","label":"从江县"},{"value":"522634","label":"雷山县"},{"value":"522635","label":"麻江县"},{"value":"522636","label":"丹寨县"}]},{"value":"522700","label":"黔南布依族苗族自治州","children":[{"value":"522701","label":"都匀市"},{"value":"522702","label":"福泉市"},{"value":"522722","label":"荔波县"},{"value":"522723","label":"贵定县"},{"value":"522725","label":"瓮安县"},{"value":"522726","label":"独山县"},{"value":"522727","label":"平塘县"},{"value":"522728","label":"罗甸县"},{"value":"522729","label":"长顺县"},{"value":"522730","label":"龙里县"},{"value":"522731","label":"惠水县"},{"value":"522732","label":"三都水族自治县"}]}]},{"label":"云南省","value":"530000","children":[{"value":"530100","label":"昆明市","children":[{"value":"530102","label":"五华区"},{"value":"530103","label":"盘龙区"},{"value":"530111","label":"官渡区"},{"value":"530112","label":"西山区"},{"value":"530113","label":"东川区"},{"value":"530121","label":"呈贡县"},{"value":"530122","label":"晋宁县"},{"value":"530124","label":"富民县"},{"value":"530125","label":"宜良县"},{"value":"530126","label":"石林彝族自治县"},{"value":"530127","label":"嵩明县"},{"value":"530128","label":"禄劝彝族苗族自治县"},{"value":"530129","label":"寻甸回族彝族自治县"},{"value":"530181","label":"安宁市"}]},{"value":"530300","label":"曲靖市","children":[{"value":"530302","label":"麒麟区"},{"value":"530321","label":"马龙县"},{"value":"530322","label":"陆良县"},{"value":"530323","label":"师宗县"},{"value":"530324","label":"罗平县"},{"value":"530325","label":"富源县"},{"value":"530326","label":"会泽县"},{"value":"530328","label":"沾益县"},{"value":"530381","label":"宣威市"}]},{"value":"530400","label":"玉溪市","children":[{"value":"530402","label":"红塔区"},{"value":"530421","label":"江川县"},{"value":"530422","label":"澄江县"},{"value":"530423","label":"通海县"},{"value":"530424","label":"华宁县"},{"value":"530425","label":"易门县"},{"value":"530426","label":"峨山彝族自治县"},{"value":"530427","label":"新平彝族傣族自治县"},{"value":"530428","label":"元江哈尼族彝族傣族自治县"}]},{"value":"530500","label":"保山市","children":[{"value":"530502","label":"隆阳区"},{"value":"530521","label":"施甸县"},{"value":"530522","label":"腾冲县"},{"value":"530523","label":"龙陵县"},{"value":"530524","label":"昌宁县"}]},{"value":"530600","label":"昭通市","children":[{"value":"530602","label":"昭阳区"},{"value":"530621","label":"鲁甸县"},{"value":"530622","label":"巧家县"},{"value":"530623","label":"盐津县"},{"value":"530624","label":"大关县"},{"value":"530625","label":"永善县"},{"value":"530626","label":"绥江县"},{"value":"530627","label":"镇雄县"},{"value":"530628","label":"彝良县"},{"value":"530629","label":"威信县"},{"value":"530630","label":"水富县"}]},{"value":"530700","label":"丽江市","children":[{"value":"530702","label":"古城区"},{"value":"530721","label":"玉龙纳西族自治县"},{"value":"530722","label":"永胜县"},{"value":"530723","label":"华坪县"},{"value":"530724","label":"宁蒗彝族自治县"}]},{"value":"530800","label":"普洱市","children":[{"value":"530802","label":"思茅区"},{"value":"530821","label":"宁洱哈尼族彝族自治县"},{"value":"530822","label":"墨江哈尼族自治县"},{"value":"530823","label":"景东彝族自治县"},{"value":"530824","label":"景谷傣族彝族自治县"},{"value":"530825","label":"镇沅彝族哈尼族拉祜族自治县"},{"value":"530826","label":"江城哈尼族彝族自治县"},{"value":"530827","label":"孟连傣族拉祜族佤族自治县"},{"value":"530828","label":"澜沧拉祜族自治县"},{"value":"530829","label":"西盟佤族自治县"}]},{"value":"530900","label":"临沧市","children":[{"value":"530902","label":"临翔区"},{"value":"530921","label":"凤庆县"},{"value":"530922","label":"云县"},{"value":"530923","label":"永德县"},{"value":"530924","label":"镇康县"},{"value":"530925","label":"双江拉祜族佤族布朗族傣族自治县"},{"value":"530926","label":"耿马傣族佤族自治县"},{"value":"530927","label":"沧源佤族自治县"}]},{"value":"532300","label":"楚雄彝族自治州","children":[{"value":"532301","label":"楚雄市"},{"value":"532322","label":"双柏县"},{"value":"532323","label":"牟定县"},{"value":"532324","label":"南华县"},{"value":"532325","label":"姚安县"},{"value":"532326","label":"大姚县"},{"value":"532327","label":"永仁县"},{"value":"532328","label":"元谋县"},{"value":"532329","label":"武定县"},{"value":"532331","label":"禄丰县"}]},{"value":"532500","label":"红河哈尼族彝族自治州","children":[{"value":"532501","label":"个旧市"},{"value":"532502","label":"开远市"},{"value":"532522","label":"蒙自县"},{"value":"532523","label":"屏边苗族自治县"},{"value":"532524","label":"建水县"},{"value":"532525","label":"石屏县"},{"value":"532526","label":"弥勒县"},{"value":"532527","label":"泸西县"},{"value":"532528","label":"元阳县"},{"value":"532529","label":"红河县"},{"value":"532530","label":"金平苗族瑶族傣族自治县"},{"value":"532531","label":"绿春县"},{"value":"532532","label":"河口瑶族自治县"}]},{"value":"532600","label":"文山壮族苗族自治州","children":[{"value":"532621","label":"文山县"},{"value":"532622","label":"砚山县"},{"value":"532623","label":"西畴县"},{"value":"532624","label":"麻栗坡县"},{"value":"532625","label":"马关县"},{"value":"532626","label":"丘北县"},{"value":"532627","label":"广南县"},{"value":"532628","label":"富宁县"}]},{"value":"532800","label":"西双版纳傣族自治州","children":[{"value":"532801","label":"景洪市"},{"value":"532822","label":"勐海县"},{"value":"532823","label":"勐腊县"}]},{"value":"532900","label":"大理白族自治州","children":[{"value":"532901","label":"大理市"},{"value":"532922","label":"漾濞彝族自治县"},{"value":"532923","label":"祥云县"},{"value":"532924","label":"宾川县"},{"value":"532925","label":"弥渡县"},{"value":"532926","label":"南涧彝族自治县"},{"value":"532927","label":"巍山彝族回族自治县"},{"value":"532928","label":"永平县"},{"value":"532929","label":"云龙县"},{"value":"532930","label":"洱源县"},{"value":"532931","label":"剑川县"},{"value":"532932","label":"鹤庆县"}]},{"value":"533100","label":"德宏傣族景颇族自治州","children":[{"value":"533102","label":"瑞丽市"},{"value":"533103","label":"潞西市"},{"value":"533122","label":"梁河县"},{"value":"533123","label":"盈江县"},{"value":"533124","label":"陇川县"}]},{"value":"533300","label":"怒江傈僳族自治州","children":[{"value":"533321","label":"泸水县"},{"value":"533323","label":"福贡县"},{"value":"533324","label":"贡山独龙族怒族自治县"},{"value":"533325","label":"兰坪白族普米族自治县"}]},{"value":"533400","label":"迪庆藏族自治州","children":[{"value":"533421","label":"香格里拉县"},{"value":"533422","label":"德钦县"},{"value":"533423","label":"维西傈僳族自治县"}]}]},{"label":"西藏自治区","value":"540000","children":[{"value":"540100","label":"拉萨市","children":[{"value":"540102","label":"城关区"},{"value":"540121","label":"林周县"},{"value":"540122","label":"当雄县"},{"value":"540123","label":"尼木县"},{"value":"540124","label":"曲水县"},{"value":"540125","label":"堆龙德庆县"},{"value":"540126","label":"达孜县"},{"value":"540127","label":"墨竹工卡县"}]},{"value":"542100","label":"昌都地区","children":[{"value":"542121","label":"昌都县"},{"value":"542122","label":"江达县"},{"value":"542123","label":"贡觉县"},{"value":"542124","label":"类乌齐县"},{"value":"542125","label":"丁青县"},{"value":"542126","label":"察雅县"},{"value":"542127","label":"八宿县"},{"value":"542128","label":"左贡县"},{"value":"542129","label":"芒康县"},{"value":"542132","label":"洛隆县"},{"value":"542133","label":"边坝县"}]},{"value":"542200","label":"山南地区","children":[{"value":"542221","label":"乃东县"},{"value":"542222","label":"扎囊县"},{"value":"542223","label":"贡嘎县"},{"value":"542224","label":"桑日县"},{"value":"542225","label":"琼结县"},{"value":"542226","label":"曲松县"},{"value":"542227","label":"措美县"},{"value":"542228","label":"洛扎县"},{"value":"542229","label":"加查县"},{"value":"542231","label":"隆子县"},{"value":"542232","label":"错那县"},{"value":"542233","label":"浪卡子县"}]},{"value":"542300","label":"日喀则地区","children":[{"value":"542301","label":"日喀则市"},{"value":"542322","label":"南木林县"},{"value":"542323","label":"江孜县"},{"value":"542324","label":"定日县"},{"value":"542325","label":"萨迦县"},{"value":"542326","label":"拉孜县"},{"value":"542327","label":"昂仁县"},{"value":"542328","label":"谢通门县"},{"value":"542329","label":"白朗县"},{"value":"542330","label":"仁布县"},{"value":"542331","label":"康马县"},{"value":"542332","label":"定结县"},{"value":"542333","label":"仲巴县"},{"value":"542334","label":"亚东县"},{"value":"542335","label":"吉隆县"},{"value":"542336","label":"聂拉木县"},{"value":"542337","label":"萨嘎县"},{"value":"542338","label":"岗巴县"}]},{"value":"542400","label":"那曲地区","children":[{"value":"542421","label":"那曲县"},{"value":"542422","label":"嘉黎县"},{"value":"542423","label":"比如县"},{"value":"542424","label":"聂荣县"},{"value":"542425","label":"安多县"},{"value":"542426","label":"申扎县"},{"value":"542427","label":"索县"},{"value":"542428","label":"班戈县"},{"value":"542429","label":"巴青县"},{"value":"542430","label":"尼玛县"}]},{"value":"542500","label":"阿里地区","children":[{"value":"542521","label":"普兰县"},{"value":"542522","label":"札达县"},{"value":"542523","label":"噶尔县"},{"value":"542524","label":"日土县"},{"value":"542525","label":"革吉县"},{"value":"542526","label":"改则县"},{"value":"542527","label":"措勤县"}]},{"value":"542600","label":"林芝地区","children":[{"value":"542621","label":"林芝县"},{"value":"542622","label":"工布江达县"},{"value":"542623","label":"米林县"},{"value":"542624","label":"墨脱县"},{"value":"542625","label":"波密县"},{"value":"542626","label":"察隅县"},{"value":"542627","label":"朗县"}]}]},{"label":"陕西省","value":"610000","children":[{"value":"610100","label":"西安市","children":[{"value":"610102","label":"新城区"},{"value":"610103","label":"碑林区"},{"value":"610104","label":"莲湖区"},{"value":"610111","label":"灞桥区"},{"value":"610112","label":"未央区"},{"value":"610113","label":"雁塔区"},{"value":"610114","label":"阎良区"},{"value":"610115","label":"临潼区"},{"value":"610116","label":"长安区"},{"value":"610122","label":"蓝田县"},{"value":"610124","label":"周至县"},{"value":"610125","label":"户县"},{"value":"610126","label":"高陵县"}]},{"value":"610200","label":"铜川市","children":[{"value":"610202","label":"王益区"},{"value":"610203","label":"印台区"},{"value":"610204","label":"耀州区"},{"value":"610222","label":"宜君县"}]},{"value":"610300","label":"宝鸡市","children":[{"value":"610302","label":"渭滨区"},{"value":"610303","label":"金台区"},{"value":"610304","label":"陈仓区"},{"value":"610322","label":"凤翔县"},{"value":"610323","label":"岐山县"},{"value":"610324","label":"扶风县"},{"value":"610326","label":"眉县"},{"value":"610327","label":"陇县"},{"value":"610328","label":"千阳县"},{"value":"610329","label":"麟游县"},{"value":"610330","label":"凤县"},{"value":"610331","label":"太白县"}]},{"value":"610400","label":"咸阳市","children":[{"value":"610402","label":"秦都区"},{"value":"610403","label":"杨陵区"},{"value":"610404","label":"渭城区"},{"value":"610422","label":"三原县"},{"value":"610423","label":"泾阳县"},{"value":"610424","label":"乾县"},{"value":"610425","label":"礼泉县"},{"value":"610426","label":"永寿县"},{"value":"610427","label":"彬县"},{"value":"610428","label":"长武县"},{"value":"610429","label":"旬邑县"},{"value":"610430","label":"淳化县"},{"value":"610431","label":"武功县"},{"value":"610481","label":"兴平市"}]},{"value":"610500","label":"渭南市","children":[{"value":"610502","label":"临渭区"},{"value":"610521","label":"华县"},{"value":"610522","label":"潼关县"},{"value":"610523","label":"大荔县"},{"value":"610524","label":"合阳县"},{"value":"610525","label":"澄城县"},{"value":"610526","label":"蒲城县"},{"value":"610527","label":"白水县"},{"value":"610528","label":"富平县"},{"value":"610581","label":"韩城市"},{"value":"610582","label":"华阴市"}]},{"value":"610600","label":"延安市","children":[{"value":"610602","label":"宝塔区"},{"value":"610621","label":"延长县"},{"value":"610622","label":"延川县"},{"value":"610623","label":"子长县"},{"value":"610624","label":"安塞县"},{"value":"610625","label":"志丹县"},{"value":"610626","label":"吴起县"},{"value":"610627","label":"甘泉县"},{"value":"610628","label":"富县"},{"value":"610629","label":"洛川县"},{"value":"610630","label":"宜川县"},{"value":"610631","label":"黄龙县"},{"value":"610632","label":"黄陵县"}]},{"value":"610700","label":"汉中市","children":[{"value":"610702","label":"汉台区"},{"value":"610721","label":"南郑县"},{"value":"610722","label":"城固县"},{"value":"610723","label":"洋县"},{"value":"610724","label":"西乡县"},{"value":"610725","label":"勉县"},{"value":"610726","label":"宁强县"},{"value":"610727","label":"略阳县"},{"value":"610728","label":"镇巴县"},{"value":"610729","label":"留坝县"},{"value":"610730","label":"佛坪县"}]},{"value":"610800","label":"榆林市","children":[{"value":"610802","label":"榆阳区"},{"value":"610821","label":"神木县"},{"value":"610822","label":"府谷县"},{"value":"610823","label":"横山县"},{"value":"610824","label":"靖边县"},{"value":"610825","label":"定边县"},{"value":"610826","label":"绥德县"},{"value":"610827","label":"米脂县"},{"value":"610828","label":"佳县"},{"value":"610829","label":"吴堡县"},{"value":"610830","label":"清涧县"},{"value":"610831","label":"子洲县"}]},{"value":"610900","label":"安康市","children":[{"value":"610902","label":"汉滨区"},{"value":"610921","label":"汉阴县"},{"value":"610922","label":"石泉县"},{"value":"610923","label":"宁陕县"},{"value":"610924","label":"紫阳县"},{"value":"610925","label":"岚皋县"},{"value":"610926","label":"平利县"},{"value":"610927","label":"镇坪县"},{"value":"610928","label":"旬阳县"},{"value":"610929","label":"白河县"}]},{"value":"611000","label":"商洛市","children":[{"value":"611002","label":"商州区"},{"value":"611021","label":"洛南县"},{"value":"611022","label":"丹凤县"},{"value":"611023","label":"商南县"},{"value":"611024","label":"山阳县"},{"value":"611025","label":"镇安县"},{"value":"611026","label":"柞水县"}]}]},{"label":"甘肃省","value":"620000","children":[{"value":"620100","label":"兰州市","children":[{"value":"620102","label":"城关区"},{"value":"620103","label":"七里河区"},{"value":"620104","label":"西固区"},{"value":"620105","label":"安宁区"},{"value":"620111","label":"红古区"},{"value":"620121","label":"永登县"},{"value":"620122","label":"皋兰县"},{"value":"620123","label":"榆中县"}]},{"value":"620200","label":"嘉峪关市"},{"value":"620300","label":"金昌市","children":[{"value":"620302","label":"金川区"},{"value":"620321","label":"永昌县"}]},{"value":"620400","label":"白银市","children":[{"value":"620402","label":"白银区"},{"value":"620403","label":"平川区"},{"value":"620421","label":"靖远县"},{"value":"620422","label":"会宁县"},{"value":"620423","label":"景泰县"}]},{"value":"620500","label":"天水市","children":[{"value":"620502","label":"秦州区"},{"value":"620503","label":"麦积区"},{"value":"620521","label":"清水县"},{"value":"620522","label":"秦安县"},{"value":"620523","label":"甘谷县"},{"value":"620524","label":"武山县"},{"value":"620525","label":"张家川回族自治县"}]},{"value":"620600","label":"武威市","children":[{"value":"620602","label":"凉州区"},{"value":"620621","label":"民勤县"},{"value":"620622","label":"古浪县"},{"value":"620623","label":"天祝藏族自治县"}]},{"value":"620700","label":"张掖市","children":[{"value":"620702","label":"甘州区"},{"value":"620721","label":"肃南裕固族自治县"},{"value":"620722","label":"民乐县"},{"value":"620723","label":"临泽县"},{"value":"620724","label":"高台县"},{"value":"620725","label":"山丹县"}]},{"value":"620800","label":"平凉市","children":[{"value":"620802","label":"崆峒区"},{"value":"620821","label":"泾川县"},{"value":"620822","label":"灵台县"},{"value":"620823","label":"崇信县"},{"value":"620824","label":"华亭县"},{"value":"620825","label":"庄浪县"},{"value":"620826","label":"静宁县"}]},{"value":"620900","label":"酒泉市","children":[{"value":"620902","label":"肃州区"},{"value":"620921","label":"金塔县"},{"value":"620922","label":"安西县"},{"value":"620923","label":"肃北蒙古族自治县"},{"value":"620924","label":"阿克塞哈萨克族自治县"},{"value":"620981","label":"玉门市"},{"value":"620982","label":"敦煌市"}]},{"value":"621000","label":"庆阳市","children":[{"value":"621002","label":"西峰区"},{"value":"621021","label":"庆城县"},{"value":"621022","label":"环县"},{"value":"621023","label":"华池县"},{"value":"621024","label":"合水县"},{"value":"621025","label":"正宁县"},{"value":"621026","label":"宁县"},{"value":"621027","label":"镇原县"}]},{"value":"621100","label":"定西市","children":[{"value":"621102","label":"安定区"},{"value":"621121","label":"通渭县"},{"value":"621122","label":"陇西县"},{"value":"621123","label":"渭源县"},{"value":"621124","label":"临洮县"},{"value":"621125","label":"漳县"},{"value":"621126","label":"岷县"}]},{"value":"621200","label":"陇南市","children":[{"value":"621202","label":"武都区"},{"value":"621221","label":"成县"},{"value":"621222","label":"文县"},{"value":"621223","label":"宕昌县"},{"value":"621224","label":"康县"},{"value":"621225","label":"西和县"},{"value":"621226","label":"礼县"},{"value":"621227","label":"徽县"},{"value":"621228","label":"两当县"}]},{"value":"622900","label":"临夏回族自治州","children":[{"value":"622901","label":"临夏市"},{"value":"622921","label":"临夏县"},{"value":"622922","label":"康乐县"},{"value":"622923","label":"永靖县"},{"value":"622924","label":"广河县"},{"value":"622925","label":"和政县"},{"value":"622926","label":"东乡族自治县"},{"value":"622927","label":"积石山保安族东乡族撒拉族自治县"}]},{"value":"623000","label":"甘南藏族自治州","children":[{"value":"623001","label":"合作市"},{"value":"623021","label":"临潭县"},{"value":"623022","label":"卓尼县"},{"value":"623023","label":"舟曲县"},{"value":"623024","label":"迭部县"},{"value":"623025","label":"玛曲县"},{"value":"623026","label":"碌曲县"},{"value":"623027","label":"夏河县"}]}]},{"label":"青海省","value":"630000","children":[{"value":"630100","label":"西宁市","children":[{"value":"630102","label":"城东区"},{"value":"630103","label":"城中区"},{"value":"630104","label":"城西区"},{"value":"630105","label":"城北区"},{"value":"630121","label":"大通回族土族自治县"},{"value":"630122","label":"湟中县"},{"value":"630123","label":"湟源县"}]},{"value":"632100","label":"海东地区","children":[{"value":"632121","label":"平安县"},{"value":"632122","label":"民和回族土族自治县"},{"value":"632123","label":"乐都县"},{"value":"632126","label":"互助土族自治县"},{"value":"632127","label":"化隆回族自治县"},{"value":"632128","label":"循化撒拉族自治县"}]},{"value":"632200","label":"海北藏族自治州","children":[{"value":"632221","label":"门源回族自治县"},{"value":"632222","label":"祁连县"},{"value":"632223","label":"海晏县"},{"value":"632224","label":"刚察县"}]},{"value":"632300","label":"黄南藏族自治州","children":[{"value":"632321","label":"同仁县"},{"value":"632322","label":"尖扎县"},{"value":"632323","label":"泽库县"},{"value":"632324","label":"河南蒙古族自治县"}]},{"value":"632500","label":"海南藏族自治州","children":[{"value":"632521","label":"共和县"},{"value":"632522","label":"同德县"},{"value":"632523","label":"贵德县"},{"value":"632524","label":"兴海县"},{"value":"632525","label":"贵南县"}]},{"value":"632600","label":"果洛藏族自治州","children":[{"value":"632621","label":"玛沁县"},{"value":"632622","label":"班玛县"},{"value":"632623","label":"甘德县"},{"value":"632624","label":"达日县"},{"value":"632625","label":"久治县"},{"value":"632626","label":"玛多县"}]},{"value":"632700","label":"玉树藏族自治州","children":[{"value":"632721","label":"玉树县"},{"value":"632722","label":"杂多县"},{"value":"632723","label":"称多县"},{"value":"632724","label":"治多县"},{"value":"632725","label":"囊谦县"},{"value":"632726","label":"曲麻莱县"}]},{"value":"632800","label":"海西蒙古族藏族自治州","children":[{"value":"632801","label":"格尔木市"},{"value":"632802","label":"德令哈市"},{"value":"632821","label":"乌兰县"},{"value":"632822","label":"都兰县"},{"value":"632823","label":"天峻县"}]}]},{"label":"宁夏回族自治区","value":"640000","children":[{"value":"640100","label":"银川市","children":[{"value":"640104","label":"兴庆区"},{"value":"640105","label":"西夏区"},{"value":"640106","label":"金凤区"},{"value":"640121","label":"永宁县"},{"value":"640122","label":"贺兰县"},{"value":"640181","label":"灵武市"}]},{"value":"640200","label":"石嘴山市","children":[{"value":"640202","label":"大武口区"},{"value":"640205","label":"惠农区"},{"value":"640221","label":"平罗县"}]},{"value":"640300","label":"吴忠市","children":[{"value":"640302","label":"利通区"},{"value":"640303","label":"红寺堡区"},{"value":"640323","label":"盐池县"},{"value":"640324","label":"同心县"},{"value":"640381","label":"青铜峡市"}]},{"value":"640400","label":"固原市","children":[{"value":"640402","label":"原州区"},{"value":"640422","label":"西吉县"},{"value":"640423","label":"隆德县"},{"value":"640424","label":"泾源县"},{"value":"640425","label":"彭阳县"}]},{"value":"640500","label":"中卫市","children":[{"value":"640502","label":"沙坡头区"},{"value":"640521","label":"中宁县"},{"value":"640522","label":"海原县"}]}]},{"label":"新疆维吾尔自治区","value":"650000","children":[{"value":"650100","label":"乌鲁木齐市","children":[{"value":"650102","label":"天山区"},{"value":"650103","label":"沙依巴克区"},{"value":"650104","label":"新市区"},{"value":"650105","label":"水磨沟区"},{"value":"650106","label":"头屯河区"},{"value":"650107","label":"达坂城区"},{"value":"650108","label":"东山区"},{"value":"650109","label":"米东区"},{"value":"650121","label":"乌鲁木齐县"}]},{"value":"650200","label":"克拉玛依市","children":[{"value":"650202","label":"独山子区"},{"value":"650203","label":"克拉玛依区"},{"value":"650204","label":"白碱滩区"},{"value":"650205","label":"乌尔禾区"}]},{"value":"652100","label":"吐鲁番地区","children":[{"value":"652101","label":"吐鲁番市"},{"value":"652122","label":"鄯善县"},{"value":"652123","label":"托克逊县"}]},{"value":"652200","label":"哈密地区","children":[{"value":"652201","label":"哈密市"},{"value":"652222","label":"巴里坤哈萨克自治县"},{"value":"652223","label":"伊吾县"}]},{"value":"652300","label":"昌吉回族自治州","children":[{"value":"652301","label":"昌吉市"},{"value":"652302","label":"阜康市"},{"value":"652303","label":"米泉市"},{"value":"652323","label":"呼图壁县"},{"value":"652324","label":"玛纳斯县"},{"value":"652325","label":"奇台县"},{"value":"652327","label":"吉木萨尔县"},{"value":"652328","label":"木垒哈萨克自治县"}]},{"value":"652700","label":"博尔塔拉蒙古自治州","children":[{"value":"652701","label":"博乐市"},{"value":"652722","label":"精河县"},{"value":"652723","label":"温泉县"}]},{"value":"652800","label":"巴音郭楞蒙古自治州","children":[{"value":"652801","label":"库尔勒市"},{"value":"652822","label":"轮台县"},{"value":"652823","label":"尉犁县"},{"value":"652824","label":"若羌县"},{"value":"652825","label":"且末县"},{"value":"652826","label":"焉耆回族自治县"},{"value":"652827","label":"和静县"},{"value":"652828","label":"和硕县"},{"value":"652829","label":"博湖县"}]},{"value":"652900","label":"阿克苏地区","children":[{"value":"652901","label":"阿克苏市"},{"value":"652922","label":"温宿县"},{"value":"652923","label":"库车县"},{"value":"652924","label":"沙雅县"},{"value":"652925","label":"新和县"},{"value":"652926","label":"拜城县"},{"value":"652927","label":"乌什县"},{"value":"652928","label":"阿瓦提县"},{"value":"652929","label":"柯坪县"}]},{"value":"653000","label":"克孜勒苏柯尔克孜自治州","children":[{"value":"653001","label":"阿图什市"},{"value":"653022","label":"阿克陶县"},{"value":"653023","label":"阿合奇县"},{"value":"653024","label":"乌恰县"}]},{"value":"653100","label":"喀什地区","children":[{"value":"653101","label":"喀什市"},{"value":"653121","label":"疏附县"},{"value":"653122","label":"疏勒县"},{"value":"653123","label":"英吉沙县"},{"value":"653124","label":"泽普县"},{"value":"653125","label":"莎车县"},{"value":"653126","label":"叶城县"},{"value":"653127","label":"麦盖提县"},{"value":"653128","label":"岳普湖县"},{"value":"653129","label":"伽师县"},{"value":"653130","label":"巴楚县"},{"value":"653131","label":"塔什库尔干塔吉克自治县"}]},{"value":"653200","label":"和田地区","children":[{"value":"653201","label":"和田市"},{"value":"653221","label":"和田县"},{"value":"653222","label":"墨玉县"},{"value":"653223","label":"皮山县"},{"value":"653224","label":"洛浦县"},{"value":"653225","label":"策勒县"},{"value":"653226","label":"于田县"},{"value":"653227","label":"民丰县"}]},{"value":"654000","label":"伊犁哈萨克自治州","children":[{"value":"654002","label":"伊宁市"},{"value":"654003","label":"奎屯市"},{"value":"654021","label":"伊宁县"},{"value":"654022","label":"察布查尔锡伯自治县"},{"value":"654023","label":"霍城县"},{"value":"654024","label":"巩留县"},{"value":"654025","label":"新源县"},{"value":"654026","label":"昭苏县"},{"value":"654027","label":"特克斯县"},{"value":"654028","label":"尼勒克县"}]},{"value":"654200","label":"塔城地区","children":[{"value":"654201","label":"塔城市"},{"value":"654202","label":"乌苏市"},{"value":"654221","label":"额敏县"},{"value":"654223","label":"沙湾县"},{"value":"654224","label":"托里县"},{"value":"654225","label":"裕民县"},{"value":"654226","label":"和布克赛尔蒙古自治县"}]},{"value":"654300","label":"阿勒泰地区","children":[{"value":"654301","label":"阿勒泰市"},{"value":"654321","label":"布尔津县"},{"value":"654322","label":"富蕴县"},{"value":"654323","label":"福海县"},{"value":"654324","label":"哈巴河县"},{"value":"654325","label":"青河县"},{"value":"654326","label":"吉木乃县"}]},{"value":"659001","label":"石河子市"},{"value":"659002","label":"阿拉尔市"},{"value":"659003","label":"图木舒克市"},{"value":"659004","label":"五家渠市"}]},{"label":"台湾省","value":"710000","children":[{"value":"710100","label":"台北市","children":[{"value":"710101","label":"中正区"},{"value":"710102","label":"大同区"},{"value":"710103","label":"中山区"},{"value":"710104","label":"松山区"},{"value":"710105","label":"大安区"},{"value":"710106","label":"万华区"},{"value":"710107","label":"信义区"},{"value":"710108","label":"士林区"},{"value":"710109","label":"北投区"},{"value":"710110","label":"内湖区"},{"value":"710111","label":"南港区"},{"value":"710112","label":"文山区"}]},{"value":"710200","label":"高雄市","children":[{"value":"710201","label":"新兴区"},{"value":"710202","label":"前金区"},{"value":"710203","label":"芩雅区"},{"value":"710204","label":"盐埕区"},{"value":"710205","label":"鼓山区"},{"value":"710206","label":"旗津区"},{"value":"710207","label":"前镇区"},{"value":"710208","label":"三民区"},{"value":"710209","label":"左营区"},{"value":"710210","label":"楠梓区"},{"value":"710211","label":"小港区"}]},{"value":"710300","label":"台南市","children":[{"value":"710301","label":"中西区"},{"value":"710302","label":"东区"},{"value":"710303","label":"南区"},{"value":"710304","label":"北区"},{"value":"710305","label":"安平区"},{"value":"710306","label":"安南区"}]},{"value":"710400","label":"台中市","children":[{"value":"710401","label":"中区"},{"value":"710402","label":"东区"},{"value":"710403","label":"南区"},{"value":"710404","label":"西区"},{"value":"710405","label":"北区"},{"value":"710406","label":"北屯区"},{"value":"710407","label":"西屯区"},{"value":"710408","label":"南屯区"}]},{"value":"710500","label":"金门县"},{"value":"710600","label":"南投县"},{"value":"710700","label":"基隆市","children":[{"value":"710701","label":"仁爱区"},{"value":"710702","label":"信义区"},{"value":"710703","label":"中正区"},{"value":"710704","label":"中山区"},{"value":"710705","label":"安乐区"},{"value":"710706","label":"暖暖区"},{"value":"710707","label":"七堵区"}]},{"value":"710800","label":"新竹市","children":[{"value":"710801","label":"东区"},{"value":"710802","label":"北区"},{"value":"710803","label":"香山区"}]},{"value":"710900","label":"嘉义市","children":[{"value":"710901","label":"东区"},{"value":"710902","label":"西区"}]},{"value":"711100","label":"新北市"},{"value":"711200","label":"宜兰县"},{"value":"711300","label":"新竹县"},{"value":"711400","label":"桃园县"},{"value":"711500","label":"苗栗县"},{"value":"711700","label":"彰化县"},{"value":"711900","label":"嘉义县"},{"value":"712100","label":"云林县"},{"value":"712400","label":"屏东县"},{"value":"712500","label":"台东县"},{"value":"712600","label":"花莲县"},{"value":"712700","label":"澎湖县"}]},{"label":"香港特别行政区","value":"810000","children":[{"value":"810100","label":"香港岛","children":[{"value":"810101","label":"中西区"},{"value":"810102","label":"湾仔"},{"value":"810103","label":"东区"},{"value":"810104","label":"南区"}]},{"value":"810200","label":"九龙","children":[{"value":"810201","label":"九龙城区"},{"value":"810202","label":"油尖旺区"},{"value":"810203","label":"深水埗区"},{"value":"810204","label":"黄大仙区"},{"value":"810205","label":"观塘区"}]},{"value":"810300","label":"新界","children":[{"value":"810301","label":"北区"},{"value":"810302","label":"大埔区"},{"value":"810303","label":"沙田区"},{"value":"810304","label":"西贡区"},{"value":"810305","label":"元朗区"},{"value":"810306","label":"屯门区"},{"value":"810307","label":"荃湾区"},{"value":"810308","label":"葵青区"},{"value":"810309","label":"离岛区"}]}]},{"label":"澳门特别行政区","value":"820000","children":[{"value":"820100","label":"澳门半岛"},{"value":"820200","label":"离岛"}]},{"label":"海外","value":"990000","children":[{"value":"990100","label":"海外"}]}]
diff --git a/z_ele/public/tinymce/langs/zh_CN.js b/z_ele/public/tinymce/langs/zh_CN.js
new file mode 100644
index 0000000..2a784f5
--- /dev/null
+++ b/z_ele/public/tinymce/langs/zh_CN.js
@@ -0,0 +1,462 @@
+tinymce.addI18n('zh_CN',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u9500",
+"Cut": "\u526a\u5207",
+"Copy": "\u590d\u5236",
+"Paste": "\u7c98\u8d34",
+"Select all": "\u5168\u9009",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u786e\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u7f51\u683c\u7ebf",
+"Bold": "\u7c97\u4f53",
+"Italic": "\u659c\u4f53",
+"Underline": "\u4e0b\u5212\u7ebf",
+"Strikethrough": "\u5220\u9664\u7ebf",
+"Superscript": "\u4e0a\u6807",
+"Subscript": "\u4e0b\u6807",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+"Justify": "\u4e24\u7aef\u5bf9\u9f50",
+"Bullet list": "\u9879\u76ee\u7b26\u53f7",
+"Numbered list": "\u7f16\u53f7\u5217\u8868",
+"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+"Close": "\u5173\u95ed",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+"Headers": "\u6807\u9898",
+"Header 1": "\u6807\u98981",
+"Header 2": "\u6807\u98982",
+"Header 3": "\u6807\u98983",
+"Header 4": "\u6807\u98984",
+"Header 5": "\u6807\u98985",
+"Header 6": "\u6807\u98986",
+"Headings": "\u6807\u9898",
+"Heading 1": "\u6807\u98981",
+"Heading 2": "\u6807\u98982",
+"Heading 3": "\u6807\u98983",
+"Heading 4": "\u6807\u98984",
+"Heading 5": "\u6807\u98985",
+"Heading 6": "\u6807\u98986",
+"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u7801",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u533a\u5757",
+"Inline": "\u6587\u672c",
+"Blocks": "\u57fa\u5757",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+"Fonts": "\u5b57\u4f53",
+"Font Sizes": "\u5b57\u53f7",
+"Class": "\u7c7b\u578b",
+"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+"Upload": "\u4e0a\u4f20",
+"Block": "\u5757",
+"Align": "\u5bf9\u9f50",
+"Default": "\u9ed8\u8ba4",
+"Circle": "\u7a7a\u5fc3\u5706",
+"Disc": "\u5b9e\u5fc3\u5706",
+"Square": "\u65b9\u5757",
+"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Anchor...": "\u951a\u70b9...",
+"Name": "\u540d\u79f0",
+"Id": "\u6807\u8bc6\u7b26",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
+"Source code": "\u6e90\u4ee3\u7801",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+"Language": "\u8bed\u8a00",
+"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+"Color Picker": "\u9009\u8272\u5668",
+"R": "R",
+"G": "G",
+"B": "B",
+"Left to right": "\u4ece\u5de6\u5230\u53f3",
+"Right to left": "\u4ece\u53f3\u5230\u5de6",
+"Emoticons": "\u8868\u60c5",
+"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+"Title": "\u6807\u9898",
+"Keywords": "\u5173\u952e\u8bcd",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u673a\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7f16\u7801",
+"Fullscreen": "\u5168\u5c4f",
+"Action": "\u64cd\u4f5c",
+"Shortcut": "\u5feb\u6377\u952e",
+"Help": "\u5e2e\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u63d2\u4ef6",
+"Handy Shortcuts": "\u5feb\u6377\u952e",
+"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+"Alternative description": "\u66ff\u4ee3\u63cf\u8ff0",
+"Accessibility": "\u8f85\u52a9\u529f\u80fd",
+"Image is decorative": "\u56fe\u50cf\u662f\u88c5\u9970\u6027\u7684",
+"Source": "\u5730\u5740",
+"Dimensions": "\u5927\u5c0f",
+"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+"General": "\u666e\u901a",
+"Advanced": "\u9ad8\u7ea7",
+"Style": "\u6837\u5f0f",
+"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+"Border": "\u8fb9\u6846",
+"Insert image": "\u63d2\u5165\u56fe\u7247",
+"Image...": "\u56fe\u7247...",
+"Image list": "\u56fe\u7247\u5217\u8868",
+"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+"Edit image": "\u7f16\u8f91\u56fe\u7247",
+"Image options": "\u56fe\u7247\u9009\u9879",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7f29\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8c03\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u9510\u5316",
+"Contrast": "\u5bf9\u6bd4\u5ea6",
+"Color levels": "\u989c\u8272\u5c42\u6b21",
+"Gamma": "\u4f3d\u9a6c\u503c",
+"Invert": "\u53cd\u8f6c",
+"Apply": "\u5e94\u7528",
+"Back": "\u540e\u9000",
+"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Text to display": "\u663e\u793a\u6587\u5b57",
+"Url": "\u5730\u5740",
+"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+"Current window": "\u5f53\u524d\u7a97\u53e3",
+"None": "\u65e0",
+"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+"Open link": "\u6253\u5f00\u94fe\u63a5",
+"Remove link": "\u5220\u9664\u94fe\u63a5",
+"Anchors": "\u951a\u70b9",
+"Link...": "\u94fe\u63a5...",
+"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required https:\/\/ prefix?": "\u60a8\u8f93\u5165\u7684 URL \u4f3c\u4e4e\u662f\u4e00\u4e2a\u5916\u90e8\u94fe\u63a5\u3002\u60a8\u60f3\u6dfb\u52a0\u6240\u9700\u7684 https:\/\/ \u524d\u7f00\u5417\uff1f",
+"Link list": "\u94fe\u63a5\u5217\u8868",
+"Insert video": "\u63d2\u5165\u89c6\u9891",
+"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+"Alternative source": "\u955c\u50cf",
+"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+"Embed": "\u5185\u5d4c",
+"Media...": "\u591a\u5a92\u4f53...",
+"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+"Page break": "\u5206\u9875\u7b26",
+"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+"Preview": "\u9884\u89c8",
+"Print...": "\u6253\u5370...",
+"Save": "\u4fdd\u5b58",
+"Find": "\u67e5\u627e",
+"Replace with": "\u66ff\u6362\u4e3a",
+"Replace": "\u66ff\u6362",
+"Replace all": "\u5168\u90e8\u66ff\u6362",
+"Previous": "\u4e0a\u4e00\u4e2a",
+"Next": "\u4e0b\u4e00\u4e2a",
+"Find and Replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+"Find whole words only": "\u5168\u5b57\u5339\u914d",
+"Find in selection": "\u5728\u9009\u533a\u4e2d\u67e5\u627e",
+"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
+"No misspellings found.": "\u6ca1\u6709\u53d1\u73b0\u62fc\u5199\u9519\u8bef",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5168\u90e8\u5ffd\u7565",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c5e\u6027",
+"Delete table": "\u5220\u9664\u8868\u683c",
+"Cell": "\u5355\u5143\u683c",
+"Row": "\u884c",
+"Column": "\u5217",
+"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+"Delete row": "\u5220\u9664\u884c",
+"Row properties": "\u884c\u5c5e\u6027",
+"Cut row": "\u526a\u5207\u884c",
+"Copy row": "\u590d\u5236\u884c",
+"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+"Delete column": "\u5220\u9664\u5217",
+"Cols": "\u5217",
+"Rows": "\u884c",
+"Width": "\u5bbd",
+"Height": "\u9ad8",
+"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+"Caption": "\u6807\u9898",
+"Show caption": "\u663e\u793a\u6807\u9898",
+"Left": "\u5de6\u5bf9\u9f50",
+"Center": "\u5c45\u4e2d",
+"Right": "\u53f3\u5bf9\u9f50",
+"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+"Scope": "\u8303\u56f4",
+"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+"H Align": "\u6c34\u5e73\u5bf9\u9f50",
+"V Align": "\u5782\u76f4\u5bf9\u9f50",
+"Top": "\u9876\u90e8\u5bf9\u9f50",
+"Middle": "\u5782\u76f4\u5c45\u4e2d",
+"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+"Header cell": "\u8868\u5934\u5355\u5143\u683c",
+"Row group": "\u884c\u7ec4",
+"Column group": "\u5217\u7ec4",
+"Row type": "\u884c\u7c7b\u578b",
+"Header": "\u8868\u5934",
+"Body": "\u8868\u4f53",
+"Footer": "\u8868\u5c3e",
+"Border color": "\u8fb9\u6846\u989c\u8272",
+"Insert template...": "\u63d2\u5165\u6a21\u677f...",
+"Templates": "\u6a21\u677f",
+"Template": "\u6a21\u677f",
+"Text color": "\u6587\u5b57\u989c\u8272",
+"Background color": "\u80cc\u666f\u8272",
+"Custom...": "\u81ea\u5b9a\u4e49...",
+"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+"No color": "\u65e0",
+"Remove color": "\u79fb\u9664\u989c\u8272",
+"Table of Contents": "\u5185\u5bb9\u5217\u8868",
+"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+"Word count": "\u5b57\u6570",
+"Count": "\u8ba1\u6570",
+"Document": "\u6587\u6863",
+"Selection": "\u9009\u62e9",
+"Words": "\u5355\u8bcd",
+"Words: {0}": "\u5b57\u6570\uff1a{0}",
+"{0} words": "{0} \u5b57",
+"File": "\u6587\u4ef6",
+"Edit": "\u7f16\u8f91",
+"Insert": "\u63d2\u5165",
+"View": "\u89c6\u56fe",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531{0}\u9a71\u52a8",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+"Image title": "\u56fe\u7247\u6807\u9898",
+"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+"Border style": "\u8fb9\u6846\u6837\u5f0f",
+"Error": "\u9519\u8bef",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+"System Font": "\u7cfb\u7edf\u5b57\u4f53",
+"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+"example": "\u793a\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8d27\u5e01",
+"Text": "\u6587\u5b57",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6570\u5b66",
+"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+"Symbols": "\u7b26\u53f7",
+"Arrows": "\u7bad\u5934",
+"User Defined": "\u81ea\u5b9a\u4e49",
+"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+"currency sign": "\u8d27\u5e01\u7b26\u53f7",
+"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+"colon sign": "\u5192\u53f7",
+"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+"lira sign": "\u91cc\u62c9\u7b26\u53f7",
+"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+"naira sign": "\u5948\u62c9\u7b26\u53f7",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+"won sign": "\u97e9\u5143\u7b26\u53f7",
+"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+"austral sign": "\u6fb3\u5143\u7b26\u53f7",
+"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+"cedi sign": "\u585e\u5730\u7b26\u53f7",
+"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+"spesmilo sign": "spesmilo\u7b26\u53f7",
+"tenge sign": "\u575a\u6208\u7b26\u53f7",
+"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+"ruble sign": "\u5362\u5e03\u7b26\u53f7",
+"yen character": "\u65e5\u5143\u5b57\u6837",
+"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+"People": "\u4eba\u7c7b",
+"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+"Activity": "\u6d3b\u52a8",
+"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u5e1c",
+"Characters": "\u5b57\u7b26",
+"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+"{0} characters": "{0} \u4e2a\u5b57\u7b26",
+"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u989c\u8272\u6837\u672c",
+"Turquoise": "\u9752\u7eff\u8272",
+"Green": "\u7eff\u8272",
+"Blue": "\u84dd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6d77\u519b\u84dd",
+"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+"Dark Green": "\u6df1\u7eff\u8272",
+"Medium Blue": "\u4e2d\u84dd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u6df1\u84dd\u8272",
+"Yellow": "\u9ec4\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7ea2\u8272",
+"Light Gray": "\u6d45\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6697\u9ec4\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6df1\u7ea2\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Light Green": "\u6d45\u7eff\u8272",
+"Light Yellow": "\u6d45\u9ec4\u8272",
+"Light Red": "\u6d45\u7ea2\u8272",
+"Light Purple": "\u6d45\u7d2b\u8272",
+"Light Blue": "\u6d45\u84dd\u8272",
+"Dark Purple": "\u6df1\u7d2b\u8272",
+"Dark Blue": "\u6df1\u84dd\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+"history": "\u5386\u53f2",
+"styles": "\u6837\u5f0f",
+"formatting": "\u683c\u5f0f\u5316",
+"alignment": "\u5bf9\u9f50",
+"indentation": "\u7f29\u8fdb",
+"Font": "\u5b57\u4f53",
+"Size": "\u5b57\u53f7",
+"More...": "\u66f4\u591a...",
+"Select...": "\u9009\u62e9...",
+"Preferences": "\u9996\u9009\u9879",
+"Yes": "\u662f",
+"No": "\u5426",
+"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
+"Version": "\u7248\u672c",
+"Code view": "\u4ee3\u7801\u89c6\u56fe",
+"Open popup menu for split buttons": "\u6253\u5f00\u5f39\u51fa\u5f0f\u83dc\u5355\uff0c\u7528\u4e8e\u62c6\u5206\u6309\u94ae",
+"List Properties": "\u5217\u8868\u5c5e\u6027",
+"List properties...": "\u6807\u9898\u5b57\u4f53\u5c5e\u6027",
+"Start list at number": "\u4ee5\u6570\u5b57\u5f00\u59cb\u5217\u8868",
+"Line height": "\u884c\u9ad8",
+"comments": "\u5907\u6ce8",
+"Format Painter": "\u683c\u5f0f\u5237",
+"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
+"Capitalization": "\u5927\u5199",
+"lowercase": "\u5c0f\u5199",
+"UPPERCASE": "\u5927\u5199",
+"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
+"permanent pen": "\u8bb0\u53f7\u7b14",
+"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
+"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
+"case change": "\u6848\u4f8b\u66f4\u6539",
+"page embed": "\u9875\u9762\u5d4c\u5165",
+"Advanced sort...": "\u9ad8\u7ea7\u6392\u5e8f...",
+"Advanced Sort": "\u9ad8\u7ea7\u6392\u5e8f",
+"Sort table by column ascending": "\u6309\u5217\u5347\u5e8f\u8868",
+"Sort table by column descending": "\u6309\u5217\u964d\u5e8f\u8868",
+"Sort": "\u6392\u5e8f",
+"Order": "\u6392\u5e8f",
+"Sort by": "\u6392\u5e8f\u65b9\u5f0f",
+"Ascending": "\u5347\u5e8f",
+"Descending": "\u964d\u5e8f",
+"Column {0}": "\u5217{0}",
+"Row {0}": "\u884c{0}",
+"Spellcheck...": "\u62fc\u5199\u68c0\u67e5...",
+"Misspelled word": "\u62fc\u5199\u9519\u8bef\u7684\u5355\u8bcd",
+"Suggestions": "\u5efa\u8bae",
+"Change": "\u66f4\u6539",
+"Finding word suggestions": "\u67e5\u627e\u5355\u8bcd\u5efa\u8bae",
+"Success": "\u6210\u529f",
+"Repair": "\u4fee\u590d",
+"Issue {0} of {1}": "\u5171\u8ba1{1}\u95ee\u9898{0}",
+"Images must be marked as decorative or have an alternative text description": "\u56fe\u50cf\u5fc5\u987b\u6807\u8bb0\u4e3a\u88c5\u9970\u6027\u6216\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0",
+"Images must have an alternative text description. Decorative images are not allowed.": "\u56fe\u50cf\u5fc5\u987b\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0\u3002\u4e0d\u5141\u8bb8\u4f7f\u7528\u88c5\u9970\u56fe\u50cf\u3002",
+"Or provide alternative text:": "\u6216\u63d0\u4f9b\u5907\u9009\u6587\u672c\uff1a",
+"Make image decorative:": "\u4f7f\u56fe\u50cf\u88c5\u9970\uff1a",
+"ID attribute must be unique": "ID \u5c5e\u6027\u5fc5\u987b\u662f\u552f\u4e00\u7684",
+"Make ID unique": "\u4f7f ID \u72ec\u4e00\u65e0\u4e8c",
+"Keep this ID and remove all others": "\u4fdd\u7559\u6b64 ID \u5e76\u5220\u9664\u6240\u6709\u5176\u4ed6",
+"Remove this ID": "\u5220\u9664\u6b64 ID",
+"Remove all IDs": "\u6e05\u9664\u5168\u90e8IDs",
+"Checklist": "\u6e05\u5355",
+"Anchor": "\u951a\u70b9",
+"Special character": "\u7279\u6b8a\u7b26\u53f7",
+"Code sample": "\u4ee3\u7801\u793a\u4f8b",
+"Color": "\u989c\u8272",
+"Document properties": "\u6587\u6863\u5c5e\u6027",
+"Image description": "\u56fe\u7247\u63cf\u8ff0",
+"Image": "\u56fe\u7247",
+"Insert link": "\u63d2\u5165\u94fe\u63a5",
+"Target": "\u6253\u5f00\u65b9\u5f0f",
+"Link": "\u94fe\u63a5",
+"Poster": "\u5c01\u9762",
+"Media": "\u5a92\u4f53",
+"Print": "\u6253\u5370",
+"Prev": "\u4e0a\u4e00\u4e2a",
+"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Whole words": "\u5168\u5b57\u5339\u914d",
+"Insert template": "\u63d2\u5165\u6a21\u677f"
+});
\ No newline at end of file
diff --git a/z_ele/public/tinymce/langs/zh_TW.js b/z_ele/public/tinymce/langs/zh_TW.js
new file mode 100644
index 0000000..1987486
--- /dev/null
+++ b/z_ele/public/tinymce/langs/zh_TW.js
@@ -0,0 +1,419 @@
+tinymce.addI18n('zh_TW',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u92b7",
+"Cut": "\u526a\u4e0b",
+"Copy": "\u8907\u88fd",
+"Paste": "\u8cbc\u4e0a",
+"Select all": "\u5168\u9078",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u78ba\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u5c0f\u5e6b\u624b",
+"Bold": "\u7c97\u9ad4",
+"Italic": "\u659c\u9ad4",
+"Underline": "\u4e0b\u5283\u7dda",
+"Strikethrough": "\u522a\u9664\u7dda",
+"Superscript": "\u4e0a\u6a19",
+"Subscript": "\u4e0b\u6a19",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u908a\u5c0d\u9f4a",
+"Align center": "\u4e2d\u9593\u5c0d\u9f4a",
+"Align right": "\u53f3\u908a\u5c0d\u9f4a",
+"Justify": "\u5de6\u53f3\u5c0d\u9f4a",
+"Bullet list": "\u9805\u76ee\u6e05\u55ae",
+"Numbered list": "\u6578\u5b57\u6e05\u55ae",
+"Decrease indent": "\u6e1b\u5c11\u7e2e\u6392",
+"Increase indent": "\u589e\u52a0\u7e2e\u6392",
+"Close": "\u95dc\u9589",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u60a8\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4\u5b58\u53d6\u526a\u8cbc\u7c3f\uff0c\u53ef\u4ee5\u4f7f\u7528\u5feb\u901f\u9375 Ctrl + X\/C\/V \u4ee3\u66ff\u526a\u4e0b\u3001\u8907\u88fd\u8207\u8cbc\u4e0a\u3002",
+"Headers": "\u6a19\u984c",
+"Header 1": "\u6a19\u984c 1",
+"Header 2": "\u6a19\u984c 2",
+"Header 3": "\u6a19\u984c 3",
+"Header 4": "\u6a19\u984c 4",
+"Header 5": "\u6a19\u984c 5",
+"Header 6": "\u6a19\u984c 6",
+"Headings": "\u6a19\u984c",
+"Heading 1": "\u6a19\u984c1",
+"Heading 2": "\u6a19\u984c2",
+"Heading 3": "\u6a19\u984c3",
+"Heading 4": "\u6a19\u984c4",
+"Heading 5": "\u6a19\u984c5",
+"Heading 6": "\u6a19\u984c6",
+"Preformatted": "\u9810\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u78bc",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u5340\u584a",
+"Inline": "\u5167\u806f",
+"Blocks": "\u57fa\u584a",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u76ee\u524d\u5c07\u4ee5\u7d14\u6587\u5b57\u7684\u6a21\u5f0f\u8cbc\u4e0a\uff0c\u60a8\u53ef\u4ee5\u518d\u9ede\u9078\u4e00\u6b21\u53d6\u6d88\u3002",
+"Fonts": "\u5b57\u578b",
+"Font Sizes": "\u5b57\u578b\u5927\u5c0f",
+"Class": "\u985e\u578b",
+"Browse for an image": "\u5f9e\u5716\u7247\u4e2d\u700f\u89bd",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u66f3\u5716\u7247\u81f3\u6b64",
+"Upload": "\u4e0a\u50b3",
+"Block": "\u5340\u584a",
+"Align": "\u5c0d\u9f4a",
+"Default": "\u9810\u8a2d",
+"Circle": "\u7a7a\u5fc3\u5713",
+"Disc": "\u5be6\u5fc3\u5713",
+"Square": "\u6b63\u65b9\u5f62",
+"Lower Alpha": "\u5c0f\u5beb\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5e0c\u81d8\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5beb\u7f85\u99ac\u6578\u5b57",
+"Upper Alpha": "\u5927\u5beb\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5beb\u7f85\u99ac\u6578\u5b57",
+"Anchor...": "\u9328\u9ede...",
+"Name": "\u540d\u7a31",
+"Id": "Id",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "Id\u61c9\u4ee5\u5b57\u6bcd\u958b\u982d\uff0c\u5f8c\u9762\u63a5\u8457\u5b57\u6bcd\uff0c\u6578\u5b57\uff0c\u7834\u6298\u865f\uff0c\u9ede\u6578\uff0c\u5192\u865f\u6216\u4e0b\u5283\u7dda\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u7de8\u8f2f\u5c1a\u672a\u88ab\u5132\u5b58\uff0c\u4f60\u78ba\u5b9a\u8981\u96e2\u958b\uff1f",
+"Restore last draft": "\u8f09\u5165\u4e0a\u4e00\u6b21\u7de8\u8f2f\u7684\u8349\u7a3f",
+"Special character...": "\u7279\u6b8a\u5b57\u5143......",
+"Source code": "\u539f\u59cb\u78bc",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7de8\u8f2f \u7a0b\u5f0f\u78bc\u7bc4\u4f8b",
+"Language": "\u8a9e\u8a00",
+"Code sample...": "\u7a0b\u5f0f\u78bc\u7bc4\u4f8b...",
+"Color Picker": "\u9078\u8272\u5668",
+"R": "\u7d05",
+"G": "\u7da0",
+"B": "\u85cd",
+"Left to right": "\u5f9e\u5de6\u5230\u53f3",
+"Right to left": "\u5f9e\u53f3\u5230\u5de6",
+"Emoticons...": "\u8868\u60c5\u7b26\u865f\u2026",
+"Metadata and Document Properties": "\u5f8c\u8a2d\u8cc7\u6599\u8207\u6587\u4ef6\u5c6c\u6027",
+"Title": "\u6a19\u984c",
+"Keywords": "\u95dc\u9375\u5b57",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u6a5f\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7de8\u78bc",
+"Fullscreen": "\u5168\u87a2\u5e55",
+"Action": "\u52d5\u4f5c",
+"Shortcut": "\u5feb\u901f\u9375",
+"Help": "\u5e6b\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u8df3\u81f3\u9078\u55ae\u5217",
+"Focus to toolbar": "\u8df3\u81f3\u5de5\u5177\u5217",
+"Focus to element path": "\u8df3\u81f3HTML\u5143\u7d20\u5217",
+"Focus to contextual toolbar": "\u8df3\u81f3\u5feb\u6377\u9078\u55ae",
+"Insert link (if link plugin activated)": "\u65b0\u589e\u6377\u5f91 (\u6377\u5f91\u5916\u639b\u555f\u7528\u6642)",
+"Save (if save plugin activated)": "\u5132\u5b58 (\u5132\u5b58\u5916\u639b\u555f\u7528\u6642)",
+"Find (if searchreplace plugin activated)": "\u5c0b\u627e (\u5c0b\u627e\u53d6\u4ee3\u5916\u639b\u555f\u7528\u6642)",
+"Plugins installed ({0}):": "({0}) \u500b\u5916\u639b\u5df2\u5b89\u88dd\uff1a",
+"Premium plugins:": "\u52a0\u503c\u5916\u639b\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u60a8\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u5916\u639b",
+"Handy Shortcuts": "\u5feb\u901f\u9375",
+"Horizontal line": "\u6c34\u5e73\u7dda",
+"Insert\/edit image": "\u63d2\u5165\/\u7de8\u8f2f \u5716\u7247",
+"Image description": "\u5716\u7247\u63cf\u8ff0",
+"Source": "\u5716\u7247\u7db2\u5740",
+"Dimensions": "\u5c3a\u5bf8",
+"Constrain proportions": "\u7b49\u6bd4\u4f8b\u7e2e\u653e",
+"General": "\u4e00\u822c",
+"Advanced": "\u9032\u968e",
+"Style": "\u6a23\u5f0f",
+"Vertical space": "\u9ad8\u5ea6",
+"Horizontal space": "\u5bec\u5ea6",
+"Border": "\u908a\u6846",
+"Insert image": "\u63d2\u5165\u5716\u7247",
+"Image...": "\u5716\u7247......",
+"Image list": "\u5716\u7247\u6e05\u55ae",
+"Rotate counterclockwise": "\u9006\u6642\u91dd\u65cb\u8f49",
+"Rotate clockwise": "\u9806\u6642\u91dd\u65cb\u8f49",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f49",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f49",
+"Edit image": "\u7de8\u8f2f\u5716\u7247",
+"Image options": "\u5716\u7247\u9078\u9805",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7e2e\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8abf\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u92b3\u5316",
+"Contrast": "\u5c0d\u6bd4",
+"Color levels": "\u984f\u8272\u5c64\u6b21",
+"Gamma": "\u4f3d\u99ac\u503c",
+"Invert": "\u53cd\u8f49",
+"Apply": "\u61c9\u7528",
+"Back": "\u5f8c\u9000",
+"Insert date\/time": "\u63d2\u5165 \u65e5\u671f\/\u6642\u9593",
+"Date\/time": "\u65e5\u671f\/\u6642\u9593",
+"Insert\/Edit Link": "\u63d2\u5165\/\u7de8\u8f2f\u9023\u7d50",
+"Insert\/edit link": "\u63d2\u5165\/\u7de8\u8f2f\u9023\u7d50",
+"Text to display": "\u986f\u793a\u6587\u5b57",
+"Url": "\u7db2\u5740",
+"Open link in...": "\u958b\u555f\u9023\u7d50\u65bc...",
+"Current window": "\u76ee\u524d\u8996\u7a97",
+"None": "\u7121",
+"New window": "\u53e6\u958b\u8996\u7a97",
+"Remove link": "\u79fb\u9664\u9023\u7d50",
+"Anchors": "\u52a0\u5165\u9328\u9ede",
+"Link...": "\u9023\u7d50...",
+"Paste or type a link": "\u8cbc\u4e0a\u6216\u8f38\u5165\u9023\u7d50",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5beb\u7684URL\u70ba\u96fb\u5b50\u90f5\u4ef6\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7db4\u55ce\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5beb\u7684URL\u5c6c\u65bc\u5916\u90e8\u93c8\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7db4\u55ce\uff1f",
+"Link list": "\u9023\u7d50\u6e05\u55ae",
+"Insert video": "\u63d2\u5165\u5f71\u97f3",
+"Insert\/edit video": "\u63d2\u4ef6\/\u7de8\u8f2f \u5f71\u97f3",
+"Insert\/edit media": "\u63d2\u5165\/\u7de8\u8f2f \u5a92\u9ad4",
+"Alternative source": "\u66ff\u4ee3\u5f71\u97f3",
+"Alternative source URL": "\u66ff\u4ee3\u4f86\u6e90URL",
+"Media poster (Image URL)": "\u5a92\u9ad4\u6d77\u5831\uff08\u5f71\u50cfImage URL\uff09",
+"Paste your embed code below:": "\u8acb\u5c07\u60a8\u7684\u5d4c\u5165\u5f0f\u7a0b\u5f0f\u78bc\u8cbc\u5728\u4e0b\u9762:",
+"Embed": "\u5d4c\u5165\u78bc",
+"Media...": "\u5a92\u9ad4...",
+"Nonbreaking space": "\u4e0d\u5206\u884c\u7684\u7a7a\u683c",
+"Page break": "\u5206\u9801",
+"Paste as text": "\u4ee5\u7d14\u6587\u5b57\u8cbc\u4e0a",
+"Preview": "\u9810\u89bd",
+"Print...": "\u5217\u5370...",
+"Save": "\u5132\u5b58",
+"Find": "\u641c\u5c0b",
+"Replace with": "\u66f4\u63db",
+"Replace": "\u66ff\u63db",
+"Replace all": "\u66ff\u63db\u5168\u90e8",
+"Previous": "\u4e0a\u4e00\u500b",
+"Next": "\u4e0b\u4e00\u500b",
+"Find and replace...": "\u5c0b\u627e\u53ca\u53d6\u4ee3...",
+"Could not find the specified string.": "\u7121\u6cd5\u67e5\u8a62\u5230\u6b64\u7279\u5b9a\u5b57\u4e32",
+"Match case": "\u76f8\u5339\u914d\u6848\u4ef6",
+"Find whole words only": "\u50c5\u627e\u51fa\u5b8c\u6574\u5b57\u532f",
+"Spell check": "\u62fc\u5beb\u6aa2\u67e5",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5ffd\u7565\u6240\u6709",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u52a0\u5165\u5b57\u5178\u4e2d",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c6c\u6027",
+"Delete table": "\u522a\u9664\u8868\u683c",
+"Cell": "\u5132\u5b58\u683c",
+"Row": "\u5217",
+"Column": "\u884c",
+"Cell properties": "\u5132\u5b58\u683c\u5c6c\u6027",
+"Merge cells": "\u5408\u4f75\u5132\u5b58\u683c",
+"Split cell": "\u5206\u5272\u5132\u5b58\u683c",
+"Insert row before": "\u63d2\u5165\u5217\u5728...\u4e4b\u524d",
+"Insert row after": "\u63d2\u5165\u5217\u5728...\u4e4b\u5f8c",
+"Delete row": "\u522a\u9664\u5217",
+"Row properties": "\u5217\u5c6c\u6027",
+"Cut row": "\u526a\u4e0b\u5217",
+"Copy row": "\u8907\u88fd\u5217",
+"Paste row before": "\u8cbc\u4e0a\u5217\u5728...\u4e4b\u524d",
+"Paste row after": "\u8cbc\u4e0a\u5217\u5728...\u4e4b\u5f8c",
+"Insert column before": "\u63d2\u5165\u6b04\u4f4d\u5728...\u4e4b\u524d",
+"Insert column after": "\u63d2\u5165\u6b04\u4f4d\u5728...\u4e4b\u5f8c",
+"Delete column": "\u522a\u9664\u884c",
+"Cols": "\u6b04\u4f4d\u6bb5",
+"Rows": "\u5217",
+"Width": "\u5bec\u5ea6",
+"Height": "\u9ad8\u5ea6",
+"Cell spacing": "\u5132\u5b58\u683c\u5f97\u9593\u8ddd",
+"Cell padding": "\u5132\u5b58\u683c\u7684\u908a\u8ddd",
+"Show caption": "\u986f\u793a\u6a19\u984c",
+"Left": "\u5de6\u908a",
+"Center": "\u4e2d\u9593",
+"Right": "\u53f3\u908a",
+"Cell type": "\u5132\u5b58\u683c\u7684\u985e\u578b",
+"Scope": "\u7bc4\u570d",
+"Alignment": "\u5c0d\u9f4a",
+"H Align": "\u6c34\u5e73\u4f4d\u7f6e",
+"V Align": "\u5782\u76f4\u4f4d\u7f6e",
+"Top": "\u7f6e\u9802",
+"Middle": "\u7f6e\u4e2d",
+"Bottom": "\u7f6e\u5e95",
+"Header cell": "\u6a19\u982d\u5132\u5b58\u683c",
+"Row group": "\u5217\u7fa4\u7d44",
+"Column group": "\u6b04\u4f4d\u7fa4\u7d44",
+"Row type": "\u884c\u7684\u985e\u578b",
+"Header": "\u6a19\u982d",
+"Body": "\u4e3b\u9ad4",
+"Footer": "\u9801\u5c3e",
+"Border color": "\u908a\u6846\u984f\u8272",
+"Insert template...": "\u63d2\u5165\u6a23\u7248...",
+"Templates": "\u6a23\u7248",
+"Template": "\u6a23\u677f",
+"Text color": "\u6587\u5b57\u984f\u8272",
+"Background color": "\u80cc\u666f\u984f\u8272",
+"Custom...": "\u81ea\u8a02",
+"Custom color": "\u81ea\u8a02\u984f\u8272",
+"No color": "No color",
+"Remove color": "\u79fb\u9664\u984f\u8272",
+"Table of Contents": "\u76ee\u9304",
+"Show blocks": "\u986f\u793a\u5340\u584a\u8cc7\u8a0a",
+"Show invisible characters": "\u986f\u793a\u96b1\u85cf\u5b57\u5143",
+"Word count": "\u8a08\u7b97\u5b57\u6578",
+"Count": "\u8a08\u7b97",
+"Document": "\u6587\u4ef6",
+"Selection": "\u9078\u9805",
+"Words": "\u5b57\u6578",
+"Words: {0}": "\u5b57\u6578\uff1a{0}",
+"{0} words": "{0} \u5b57\u5143",
+"File": "\u6a94\u6848",
+"Edit": "\u7de8\u8f2f",
+"Insert": "\u63d2\u5165",
+"View": "\u6aa2\u8996",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531 {0} \u63d0\u4f9b",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u8c50\u5bcc\u7684\u6587\u672c\u5340\u57df\u3002\u6309ALT-F9\u524d\u5f80\u4e3b\u9078\u55ae\u3002\u6309ALT-F10\u547c\u53eb\u5de5\u5177\u6b04\u3002\u6309ALT-0\u5c0b\u6c42\u5e6b\u52a9",
+"Image title": "\u5716\u7247\u6a19\u984c",
+"Border width": "\u6846\u7dda\u5bec\u5ea6",
+"Border style": "\u6846\u7dda\u6a23\u5f0f",
+"Error": "\u932f\u8aa4",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u8981\u958b\u555f\u5f48\u51fa\u8996\u7a97\uff0c\u8acb\u6309Shift+Enter",
+"Rich Text Area. Press ALT-0 for help.": "\u5bcc\u6587\u672c\u5340\u57df\u3002\u8acb\u6309ALT-0\u5c0b\u6c42\u5354\u52a9\u3002",
+"System Font": "\u7cfb\u7d71\u5b57\u578b",
+"Failed to upload image: {0}": "\u7121\u6cd5\u4e0a\u50b3\u5f71\u50cf\uff1a{0}",
+"Failed to load plugin: {0} from url {1}": "\u7121\u6cd5\u4e0a\u50b3\u63d2\u4ef6\uff1a{0}\u81eaurl{1}",
+"Failed to load plugin url: {0}": "\u7121\u6cd5\u4e0a\u50b3\u63d2\u4ef6\uff1a{0}",
+"Failed to initialize plugin: {0}": "\u7121\u6cd5\u555f\u52d5\u63d2\u4ef6\uff1a{0}",
+"example": "\u7bc4\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8ca8\u5e63",
+"Text": "\u6587\u672c",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6578\u5b78",
+"Extended Latin": "\u62c9\u4e01\u5b57\u6bcd\u64f4\u5145",
+"Symbols": "\u7b26\u865f",
+"Arrows": "\u7bad\u982d",
+"User Defined": "\u4f7f\u7528\u8005\u5df2\u5b9a\u7fa9",
+"dollar sign": "\u7f8e\u5143\u7b26\u865f",
+"currency sign": "\u8ca8\u5e63\u7b26\u865f",
+"euro-currency sign": "\u6b50\u5143\u7b26\u865f",
+"colon sign": "\u79d1\u6717\u7b26\u865f",
+"cruzeiro sign": "\u514b\u9b6f\u8cfd\u7f85\u7b26\u865f",
+"french franc sign": "\u6cd5\u6717\u7b26\u865f",
+"lira sign": "\u91cc\u62c9\u7b26\u865f",
+"mill sign": "\u6587\u7b26\u865f",
+"naira sign": "\u5948\u62c9\u7b26\u865f",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u865f",
+"rupee sign": "\u76e7\u6bd4\u7b26\u865f",
+"won sign": "\u97d3\u571c\u7b26\u865f",
+"new sheqel sign": "\u65b0\u8b1d\u514b\u723e\u7b26\u865f",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u865f",
+"kip sign": "\u8001\u64be\u5e63\u7b26\u865f",
+"tugrik sign": "\u8499\u53e4\u5e63\u7b26\u865f",
+"drachma sign": "\u5fb7\u514b\u62c9\u99ac\u7b26\u865f",
+"german penny symbol": "\u5fb7\u570b\u5206\u7b26\u865f",
+"peso sign": "\u62ab\u7d22\u7b26\u865f",
+"guarani sign": "\u5df4\u62c9\u572d\u5e63\u7b26\u865f",
+"austral sign": "\u963f\u6839\u5ef7\u5e63\u7b26\u865f",
+"hryvnia sign": "\u70cf\u514b\u862d\u5e63\u7b26\u865f",
+"cedi sign": "\u8fe6\u7d0d\u5e63\u7b26\u865f",
+"livre tournois sign": "\u91cc\u5f17\u723e\u7b26\u865f",
+"spesmilo sign": "\u570b\u969b\u5e63\u7b26\u865f",
+"tenge sign": "\u54c8\u85a9\u514b\u5e63\u7b26\u865f",
+"indian rupee sign": "\u5370\u5ea6\u76e7\u6bd4\u7b26\u865f",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9\u7b26\u865f",
+"nordic mark sign": "\u5317\u6b50\u99ac\u514b\u7b26\u865f",
+"manat sign": "\u4e9e\u585e\u62dc\u7136\u5e63\u7b26\u865f",
+"ruble sign": "\u76e7\u5e03\u7b26\u865f",
+"yen character": "\u65e5\u5713\u7b26\u865f",
+"yuan character": "\u4eba\u6c11\u5e63\u7b26\u865f",
+"yuan character, in hong kong and taiwan": "\u6e2f\u5143\u8207\u53f0\u5e63\u7b26\u865f",
+"yen\/yuan character variant one": "\u65e5\u5713\/\u4eba\u6c11\u5e63\u7b26\u865f\u8b8a\u5316\u578b",
+"Loading emoticons...": "\u8f09\u5165\u8868\u60c5\u7b26\u865f\u2026",
+"Could not load emoticons": "\u7121\u6cd5\u8f09\u5165\u8868\u60c5\u7b26\u865f",
+"People": "\u4eba",
+"Animals and Nature": "\u52d5\u7269\u8207\u81ea\u7136",
+"Food and Drink": "\u98f2\u98df",
+"Activity": "\u6d3b\u52d5",
+"Travel and Places": "\u65c5\u884c\u8207\u5730\u9ede",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u6a19",
+"Characters": "\u5b57\u5143",
+"Characters (no spaces)": "\u5b57\u5143\uff08\u7121\u7a7a\u683c\uff09",
+"{0} characters": "{0}\u5b57\u5143",
+"Error: Form submit field collision.": "\u932f\u8aa4\uff1a\u8868\u683c\u905e\u4ea4\u6b04\u4f4d\u885d\u7a81\u3002",
+"Error: No form element found.": "\u932f\u8aa4\uff1a\u627e\u4e0d\u5230\u8868\u683c\u5143\u7d20\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u8272\u5f69\u6a23\u672c",
+"Turquoise": "\u571f\u8033\u5176\u85cd",
+"Green": "\u7da0\u8272",
+"Blue": "\u85cd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6df1\u85cd\u8272",
+"Dark Turquoise": "\u6df1\u571f\u8033\u5176\u85cd",
+"Dark Green": "\u6df1\u7da0\u8272",
+"Medium Blue": "\u4e2d\u85cd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u9ed1\u85cd\u8272",
+"Yellow": "\u9ec3\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7d05\u8272",
+"Light Gray": "\u6dfa\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6df1\u9ec3\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6697\u7d05\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Light Green": "\u6de1\u7da0\u8272",
+"Light Yellow": "\u6dfa\u9ec3\u8272",
+"Light Red": "\u6dfa\u7d05\u8272",
+"Light Purple": "\u6dfa\u7d2b\u8272",
+"Light Blue": "\u6dfa\u85cd\u8272",
+"Dark Purple": "\u6df1\u7d2b\u8272",
+"Dark Blue": "\u6df1\u85cd\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u8f49\u63db\u81ea\/\u81f3\u5168\u87a2\u5e55\u6a21\u5f0f",
+"Open help dialog": "\u958b\u555f\u5354\u52a9\u5c0d\u8a71",
+"history": "\u6b77\u53f2",
+"styles": "\u6a23\u5f0f",
+"formatting": "\u683c\u5f0f",
+"alignment": "\u5c0d\u9f4a",
+"indentation": "\u7e2e\u6392",
+"permanent pen": "\u6c38\u4e45\u6027\u7b46",
+"comments": "\u8a3b\u89e3",
+"Format Painter": "\u8907\u88fd\u683c\u5f0f",
+"Insert\/edit iframe": "\u63d2\u5165\/\u7de8\u8f2fiframe",
+"Capitalization": "\u5927\u5beb",
+"lowercase": "\u5c0f\u5beb",
+"UPPERCASE": "\u5927\u5beb",
+"Title Case": "\u5b57\u9996\u5927\u5beb",
+"Permanent Pen Properties": "\u6c38\u4e45\u6a19\u8a18\u5c6c\u6027",
+"Permanent pen properties...": "\u6c38\u4e45\u6a19\u8a18\u5c6c\u6027......",
+"Font": "\u5b57\u578b",
+"Size": "\u5b57\u5f62\u5927\u5c0f",
+"More...": "\u66f4\u591a\u8cc7\u8a0a......",
+"Spellcheck Language": "\u62fc\u5beb\u8a9e\u8a00",
+"Select...": "\u9078\u64c7......",
+"Preferences": "\u9996\u9078\u9805",
+"Yes": "\u662f",
+"No": "\u5426",
+"Keyboard Navigation": "\u9375\u76e4\u5c0e\u822a",
+"Version": "\u7248\u672c",
+"Anchor": "\u52a0\u5165\u9328\u9ede",
+"Special character": "\u7279\u6b8a\u5b57\u5143",
+"Code sample": "\u7a0b\u5f0f\u78bc\u7bc4\u4f8b",
+"Color": "\u984f\u8272",
+"Emoticons": "\u8868\u60c5",
+"Document properties": "\u6587\u4ef6\u7684\u5c6c\u6027",
+"Image": "\u5716\u7247",
+"Insert link": "\u63d2\u5165\u9023\u7d50",
+"Target": "\u958b\u555f\u65b9\u5f0f",
+"Link": "\u9023\u7d50",
+"Poster": "\u9810\u89bd\u5716\u7247",
+"Media": "\u5a92\u9ad4",
+"Print": "\u5217\u5370",
+"Prev": "\u4e0a\u4e00\u500b",
+"Find and replace": "\u5c0b\u627e\u53ca\u53d6\u4ee3",
+"Whole words": "\u6574\u500b\u55ae\u5b57",
+"Spellcheck": "\u62fc\u5b57\u6aa2\u67e5",
+"Caption": "\u8868\u683c\u6a19\u984c",
+"Insert template": "\u63d2\u5165\u6a23\u7248"
+});
\ No newline at end of file
diff --git a/z_ele/public/tinymce/skins/content/dark/content.css b/z_ele/public/tinymce/skins/content/dark/content.css
new file mode 100644
index 0000000..bae7923
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/dark/content.css
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  background-color: #2f3742;
+  color: #dfe0e4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+a {
+  color: #4099ff;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #6d737b;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #8a8f97;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #6d737b;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #6d737b;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #6d737b;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #6d737b;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/z_ele/public/tinymce/skins/content/dark/content.min.css b/z_ele/public/tinymce/skins/content/dark/content.min.css
new file mode 100644
index 0000000..07d40c2
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/dark/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{background-color:#2f3742;color:#dfe0e4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}a{color:#4099ff}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#6d737b}figure{display:table;margin:1rem auto}figure figcaption{color:#8a8f97;display:block;margin-top:.25rem;text-align:center}hr{border-color:#6d737b;border-style:solid;border-width:1px 0 0 0}code{background-color:#6d737b;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #6d737b;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #6d737b;margin-right:1.5rem;padding-right:1rem}
diff --git a/z_ele/public/tinymce/skins/content/default/content.css b/z_ele/public/tinymce/skins/content/default/content.css
new file mode 100644
index 0000000..dd6a5c1
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/default/content.css
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #999;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #e8e8e8;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/z_ele/public/tinymce/skins/content/default/content.min.css b/z_ele/public/tinymce/skins/content/default/content.min.css
new file mode 100644
index 0000000..29cd987
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/default/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/z_ele/public/tinymce/skins/content/document/content.css b/z_ele/public/tinymce/skins/content/document/content.css
new file mode 100644
index 0000000..75f637a
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/document/content.css
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+@media screen {
+  html {
+    background: #f4f4f4;
+    min-height: 100%;
+  }
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+@media screen {
+  body {
+    background-color: #fff;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+    margin: 1rem auto 0;
+    max-width: 820px;
+    min-height: calc(100vh - 1rem);
+    padding: 4rem 6rem 6rem 6rem;
+  }
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure figcaption {
+  color: #999;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/z_ele/public/tinymce/skins/content/document/content.min.css b/z_ele/public/tinymce/skins/content/document/content.min.css
new file mode 100644
index 0000000..a1feef4
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/document/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+@media screen{html{background:#f4f4f4;min-height:100%}}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}@media screen{body{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);box-sizing:border-box;margin:1rem auto 0;max-width:820px;min-height:calc(100vh - 1rem);padding:4rem 6rem 6rem 6rem}}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure figcaption{color:#999;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/z_ele/public/tinymce/skins/content/writer/content.css b/z_ele/public/tinymce/skins/content/writer/content.css
new file mode 100644
index 0000000..ceee359
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/writer/content.css
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem auto;
+  max-width: 900px;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #999;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #e8e8e8;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/z_ele/public/tinymce/skins/content/writer/content.min.css b/z_ele/public/tinymce/skins/content/writer/content.min.css
new file mode 100644
index 0000000..0d8f5d3
--- /dev/null
+++ b/z_ele/public/tinymce/skins/content/writer/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem auto;max-width:900px}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.css
new file mode 100644
index 0000000..9c0e3a8
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.css
@@ -0,0 +1,714 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #282a36;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6272a4;
+}
+.token.punctuation {
+  color: #f8f8f2;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ff79c6;
+}
+.token.boolean,
+.token.number {
+  color: #bd93f9;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #50fa7b;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #f1fa8c;
+}
+.token.keyword {
+  color: #8be9fd;
+}
+.token.regex,
+.token.important {
+  color: #ffb86c;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 1298;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #4099ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #4099ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #4099ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid transparent;
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: lighten;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #4099ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.css
new file mode 100644
index 0000000..8e7521d
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.css
@@ -0,0 +1,726 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 1298;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.min.css
new file mode 100644
index 0000000..b4ab9a3
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.inline.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:1298}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.min.css
new file mode 100644
index 0000000..e27b8a0
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#50fa7b}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.important,.token.regex{color:#ffb86c}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:1298}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #4099ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #4099ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #4099ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #4099ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #4099ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#4099ff}.mce-content-body .mce-edit-focus{outline:3px solid #4099ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid transparent;bottom:-1px;content:'';left:-1px;mix-blend-mode:lighten;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#4099ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.css
new file mode 100644
index 0000000..4bdb8ba
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.css
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
+  /* Note: this file is used inside the content, so isn't part of theming */
+  background-color: green;
+  display: inline-block;
+  opacity: 0.5;
+  position: absolute;
+}
+body {
+  -webkit-text-size-adjust: none;
+}
+body img {
+  /* this is related to the content margin */
+  max-width: 96vw;
+}
+body table img {
+  max-width: 95%;
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
new file mode 100644
index 0000000..35f7dc0
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff b/z_ele/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/z_ele/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff differ
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.css
new file mode 100644
index 0000000..d34b9c1
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.css
@@ -0,0 +1,3047 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox {
+  box-shadow: none;
+  box-sizing: content-box;
+  color: #2A3746;
+  cursor: auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: initial;
+  white-space: normal;
+}
+.tox *:not(svg):not(rect) {
+  box-sizing: inherit;
+  color: inherit;
+  cursor: inherit;
+  direction: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-tap-highlight-color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow: inherit;
+  text-transform: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+.tox *:not(svg):not(rect) {
+  /* stylelint-disable-line no-duplicate-selectors */
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  float: none;
+  height: auto;
+  margin: 0;
+  max-width: none;
+  outline: 0;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+.tox:not([dir=rtl]) {
+  direction: ltr;
+  text-align: left;
+}
+.tox[dir=rtl] {
+  direction: rtl;
+  text-align: right;
+}
+.tox-tinymce {
+  border: 1px solid #000000;
+  border-radius: 0;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  position: relative;
+  visibility: inherit !important;
+}
+.tox-tinymce-inline {
+  border: none;
+  box-shadow: none;
+}
+.tox-tinymce-inline .tox-editor-header {
+  background-color: transparent;
+  border: 1px solid #000000;
+  border-radius: 0;
+  box-shadow: none;
+}
+.tox-tinymce-aux {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  z-index: 1300;
+}
+.tox-tinymce *:focus,
+.tox-tinymce-aux *:focus {
+  outline: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+.tox[dir=rtl] .tox-icon--flip svg {
+  transform: rotateY(180deg);
+}
+.tox .accessibility-issue__header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description {
+  align-items: stretch;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .accessibility-issue__description > div {
+  padding-bottom: 4px;
+}
+.tox .accessibility-issue__description > div > div {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description > *:last-child:not(:only-child) {
+  border-color: #000000;
+  border-style: solid;
+}
+.tox .accessibility-issue__repair {
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: #207ab7;
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child {
+  border-color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description {
+  background-color: rgba(255, 165, 0, 0.5);
+  border-color: rgba(255, 165, 0, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child {
+  border-color: rgba(255, 165, 0, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description {
+  background-color: rgba(204, 0, 0, 0.5);
+  border-color: rgba(204, 0, 0, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child {
+  border-color: rgba(204, 0, 0, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description {
+  background-color: rgba(120, 171, 70, 0.5);
+  border-color: rgba(120, 171, 70, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child {
+  border-color: rgba(120, 171, 70, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue__header h1,
+.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
+  margin-top: 0;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-left: auto;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 4px 4px 8px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-left-width: 1px;
+  padding-left: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-right: auto;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 8px 4px 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-right-width: 1px;
+  padding-right: 4px;
+}
+.tox .tox-anchorbar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-bar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-button {
+  background-color: #207ab7;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #207ab7;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  line-height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 4px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-button[disabled] {
+  background-color: #207ab7;
+  background-image: none;
+  border-color: #207ab7;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-button:focus:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:hover:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:active:not(:disabled) {
+  background-color: #185d8c;
+  background-image: none;
+  border-color: #185d8c;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary {
+  background-color: #3d546f;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #3d546f;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  outline: none;
+  padding: 4px 16px;
+  text-decoration: none;
+  text-transform: none;
+}
+.tox .tox-button--secondary[disabled] {
+  background-color: #3d546f;
+  background-image: none;
+  border-color: #3d546f;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-button--secondary:focus:not(:disabled) {
+  background-color: #34485f;
+  background-image: none;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary:hover:not(:disabled) {
+  background-color: #34485f;
+  background-image: none;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary:active:not(:disabled) {
+  background-color: #2b3b4e;
+  background-image: none;
+  border-color: #2b3b4e;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--icon,
+.tox .tox-button.tox-button--icon,
+.tox .tox-button.tox-button--secondary.tox-button--icon {
+  padding: 4px;
+}
+.tox .tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
+  display: block;
+  fill: currentColor;
+}
+.tox .tox-button-link {
+  background: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.tox .tox-button-link--sm {
+  font-size: 14px;
+}
+.tox .tox-button--naked {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #fff;
+}
+.tox .tox-button--naked[disabled] {
+  background-color: #3d546f;
+  border-color: #3d546f;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-button--naked:hover:not(:disabled) {
+  background-color: #34485f;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked:focus:not(:disabled) {
+  background-color: #34485f;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked:active:not(:disabled) {
+  background-color: #2b3b4e;
+  border-color: #2b3b4e;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked .tox-icon svg {
+  fill: currentColor;
+}
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+  color: #fff;
+}
+.tox .tox-checkbox {
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  height: 36px;
+  min-width: 36px;
+}
+.tox .tox-checkbox__input {
+  /* Hide from view but visible to screen readers */
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+.tox .tox-checkbox__icons {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px transparent;
+  box-sizing: content-box;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  padding: calc(4px - 1px);
+  width: 24px;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: block;
+  fill: rgba(255, 255, 255, 0.2);
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox--disabled {
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #207ab7;
+  padding: calc(4px - 1px);
+}
+.tox:not([dir=rtl]) .tox-checkbox__label {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-checkbox__input {
+  left: -10000px;
+}
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__label {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__input {
+  right: -10000px;
+}
+.tox[dir=rtl] .tox-bar .tox-checkbox {
+  margin-right: 4px;
+}
+.tox {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox .tox-collection--toolbar .tox-collection__group {
+  display: flex;
+  padding: 0;
+}
+.tox .tox-collection--grid .tox-collection__group {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 208px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+}
+.tox .tox-collection--list .tox-collection__group {
+  border-bottom-width: 0;
+  border-color: #1a1a1a;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-style: solid;
+  border-top-width: 1px;
+  padding: 4px 0;
+}
+.tox .tox-collection--list .tox-collection__group:first-child {
+  border-top-width: 0;
+}
+.tox .tox-collection__group-heading {
+  background-color: #333333;
+  color: #fff;
+  cursor: default;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 4px;
+  margin-top: -4px;
+  padding: 4px 8px;
+  text-transform: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection__item {
+  align-items: center;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection--list .tox-collection__item {
+  padding: 4px 8px;
+}
+.tox .tox-collection--toolbar .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--grid .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--list .tox-collection__item--enabled {
+  background-color: #2b3b4e;
+  color: #fff;
+}
+.tox .tox-collection--list .tox-collection__item--active {
+  background-color: #4a5562;
+}
+.tox .tox-collection--toolbar .tox-collection__item--enabled {
+  background-color: #757d87;
+  color: #fff;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active {
+  background-color: #4a5562;
+}
+.tox .tox-collection--grid .tox-collection__item--enabled {
+  background-color: #757d87;
+  color: #fff;
+}
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: #4a5562;
+  color: #fff;
+}
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #fff;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #fff;
+}
+.tox .tox-collection__item-icon,
+.tox .tox-collection__item-checkmark {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+.tox .tox-collection__item-icon svg,
+.tox .tox-collection__item-checkmark svg {
+  fill: currentColor;
+}
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
+  height: 48px;
+  width: 48px;
+}
+.tox .tox-collection__item-label {
+  color: currentColor;
+  display: inline-block;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  text-transform: none;
+  word-break: break-all;
+}
+.tox .tox-collection__item-accessory {
+  color: rgba(255, 255, 255, 0.5);
+  display: inline-block;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  text-transform: none;
+}
+.tox .tox-collection__item-caret {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
+.tox .tox-collection__item-caret::after {
+  content: '';
+  font-size: 0;
+  min-height: inherit;
+}
+.tox .tox-collection__item-caret svg {
+  fill: #fff;
+}
+.tox .tox-collection__item--state-disabled {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
+  display: none;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
+  display: none;
+}
+.tox .tox-collection--horizontal {
+  background-color: #2b3b4e;
+  border: 1px solid #1a1a1a;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  margin-bottom: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+.tox .tox-collection--horizontal .tox-collection__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item {
+  height: 34px;
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item-label {
+  white-space: nowrap;
+}
+.tox .tox-collection--horizontal .tox-collection__item-caret {
+  margin-left: 4px;
+}
+.tox .tox-collection__item-container {
+  display: flex;
+}
+.tox .tox-collection__item-container--row {
+  align-items: center;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-left {
+  margin-right: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top {
+  align-items: flex-start;
+  margin-bottom: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle {
+  align-items: center;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom {
+  align-items: flex-end;
+  margin-top: auto;
+}
+.tox .tox-collection__item-container--column {
+  -ms-grid-row-align: center;
+      align-self: center;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-left {
+  align-items: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-right {
+  align-items: flex-end;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top {
+  align-self: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom {
+  align-self: flex-end;
+}
+.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-right: 1px solid #000000;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-collection__item-accessory {
+  margin-left: 16px;
+  text-align: right;
+}
+.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
+  margin-left: 16px;
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-left: 1px solid #000000;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-collection__item-accessory {
+  margin-right: 16px;
+  text-align: left;
+}
+.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
+  margin-right: 16px;
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
+  margin-right: 4px;
+}
+.tox .tox-color-picker-container {
+  display: flex;
+  flex-direction: row;
+  height: 225px;
+  margin: 0;
+}
+.tox .tox-sv-palette {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+.tox .tox-sv-palette-spectrum {
+  height: 100%;
+}
+.tox .tox-sv-palette,
+.tox .tox-sv-palette-spectrum {
+  width: 225px;
+}
+.tox .tox-sv-palette-thumb {
+  background: none;
+  border: 1px solid black;
+  border-radius: 50%;
+  box-sizing: content-box;
+  height: 12px;
+  position: absolute;
+  width: 12px;
+}
+.tox .tox-sv-palette-inner-thumb {
+  border: 1px solid white;
+  border-radius: 50%;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox .tox-hue-slider {
+  box-sizing: border-box;
+  height: 100%;
+  width: 25px;
+}
+.tox .tox-hue-slider-spectrum {
+  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
+  height: 100%;
+  width: 100%;
+}
+.tox .tox-hue-slider,
+.tox .tox-hue-slider-spectrum {
+  width: 20px;
+}
+.tox .tox-hue-slider-thumb {
+  background: white;
+  border: 1px solid black;
+  box-sizing: content-box;
+  height: 4px;
+  width: 100%;
+}
+.tox .tox-rgb-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tox .tox-rgb-form div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: inherit;
+}
+.tox .tox-rgb-form input {
+  width: 6em;
+}
+.tox .tox-rgb-form input.tox-invalid {
+  /* Need !important to override Chrome's focus styling unfortunately */
+  border: 1px solid red !important;
+}
+.tox .tox-rgb-form .tox-rgba-preview {
+  border: 1px solid black;
+  flex-grow: 2;
+  margin-bottom: 0;
+}
+.tox:not([dir=rtl]) .tox-sv-palette {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider-thumb {
+  margin-left: -1px;
+}
+.tox:not([dir=rtl]) .tox-rgb-form label {
+  margin-right: 0.5em;
+}
+.tox[dir=rtl] .tox-sv-palette {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider-thumb {
+  margin-right: -1px;
+}
+.tox[dir=rtl] .tox-rgb-form label {
+  margin-left: 0.5em;
+}
+.tox .tox-toolbar .tox-swatches,
+.tox .tox-toolbar__primary .tox-swatches,
+.tox .tox-toolbar__overflow .tox-swatches {
+  margin: 2px 0 3px 4px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
+  border: 0;
+  margin: -4px 0;
+}
+.tox .tox-swatches__row {
+  display: flex;
+}
+.tox .tox-swatch {
+  height: 30px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  width: 30px;
+}
+.tox .tox-swatch:hover,
+.tox .tox-swatch:focus {
+  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
+  transform: scale(0.8);
+}
+.tox .tox-swatch--remove {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-swatch--remove svg path {
+  stroke: #e74c3c;
+}
+.tox .tox-swatches__picker-btn {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 30px;
+}
+.tox .tox-swatches__picker-btn svg {
+  height: 24px;
+  width: 24px;
+}
+.tox .tox-swatches__picker-btn:hover {
+  background: #4a5562;
+}
+.tox:not([dir=rtl]) .tox-swatches__picker-btn {
+  margin-left: auto;
+}
+.tox[dir=rtl] .tox-swatches__picker-btn {
+  margin-right: auto;
+}
+.tox .tox-comment-thread {
+  background: #2b3b4e;
+  position: relative;
+}
+.tox .tox-comment-thread > *:not(:first-child) {
+  margin-top: 8px;
+}
+.tox .tox-comment {
+  background: #2b3b4e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(42, 55, 70, 0.1);
+  padding: 8px 8px 16px 8px;
+  position: relative;
+}
+.tox .tox-comment__header {
+  align-items: center;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .tox-comment__date {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+}
+.tox .tox-comment__body {
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin-top: 8px;
+  position: relative;
+  text-transform: initial;
+}
+.tox .tox-comment__body textarea {
+  resize: none;
+  white-space: normal;
+  width: 100%;
+}
+.tox .tox-comment__expander {
+  padding-top: 8px;
+}
+.tox .tox-comment__expander p {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  font-style: normal;
+}
+.tox .tox-comment__body p {
+  margin: 0;
+}
+.tox .tox-comment__buttonspacing {
+  padding-top: 16px;
+  text-align: center;
+}
+.tox .tox-comment-thread__overlay::after {
+  background: #2b3b4e;
+  bottom: 0;
+  content: "";
+  display: flex;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__reply {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.tox .tox-comment__reply > *:first-child {
+  margin-bottom: 8px;
+  width: 100%;
+}
+.tox .tox-comment__edit {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+.tox .tox-comment__gradient::after {
+  background: linear-gradient(rgba(43, 59, 78, 0), #2b3b4e);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 5em;
+  margin-top: -40px;
+  position: absolute;
+  width: 100%;
+}
+.tox .tox-comment__overlay {
+  background: #2b3b4e;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__loading-text {
+  align-items: center;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.tox .tox-comment__loading-text > div {
+  padding-bottom: 16px;
+}
+.tox .tox-comment__overlaytext {
+  bottom: 0;
+  flex-direction: column;
+  font-size: 14px;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+.tox .tox-comment__overlaytext p {
+  background-color: #2b3b4e;
+  box-shadow: 0 0 8px 8px #2b3b4e;
+  color: #fff;
+  text-align: center;
+}
+.tox .tox-comment__overlaytext div:nth-of-type(2) {
+  font-size: 0.8em;
+}
+.tox .tox-comment__busy-spinner {
+  align-items: center;
+  background-color: #2b3b4e;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+}
+.tox .tox-comment__scroll {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  overflow: auto;
+}
+.tox .tox-conversations {
+  margin: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__edit {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__edit > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-comment__edit {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child,
+.tox[dir=rtl] .tox-comment__edit > *:last-child,
+.tox[dir=rtl] .tox-comment__reply > *:last-child {
+  margin-right: 8px;
+}
+.tox .tox-user {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-user__avatar svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-user__name {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.tox:not([dir=rtl]) .tox-user__avatar svg {
+  margin-right: 8px;
+}
+.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar svg {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
+  margin-right: 8px;
+}
+.tox .tox-dialog-wrap {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1100;
+}
+.tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(34, 47, 62, 0.75);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.tox .tox-dialog-wrap__backdrop--opaque {
+  background-color: #222f3e;
+}
+.tox .tox-dialog {
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 16px 16px -10px rgba(42, 55, 70, 0.15), 0 0 40px 1px rgba(42, 55, 70, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 95vw;
+  z-index: 2;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog {
+    align-self: flex-start;
+    margin: 8px auto;
+    width: calc(100vw - 16px);
+  }
+}
+.tox .tox-dialog-inline {
+  z-index: 1100;
+}
+.tox .tox-dialog__header {
+  align-items: center;
+  background-color: #2b3b4e;
+  border-bottom: none;
+  color: #fff;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 8px 16px 0 16px;
+  position: relative;
+}
+.tox .tox-dialog__header .tox-button {
+  z-index: 1;
+}
+.tox .tox-dialog__draghandle {
+  cursor: grab;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tox .tox-dialog__draghandle:active {
+  cursor: grabbing;
+}
+.tox .tox-dialog__dismiss {
+  margin-left: auto;
+}
+.tox .tox-dialog__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  text-transform: none;
+}
+.tox .tox-dialog__body {
+  color: #fff;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  min-width: 0;
+  text-align: left;
+  text-transform: none;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body {
+    flex-direction: column;
+  }
+}
+.tox .tox-dialog__body-nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
+    flex-direction: row;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+}
+.tox .tox-dialog__body-nav-item {
+  border-bottom: 2px solid transparent;
+  color: rgba(255, 255, 255, 0.5);
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 8px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tox .tox-dialog__body-nav-item:focus {
+  background-color: rgba(32, 122, 183, 0.1);
+}
+.tox .tox-dialog__body-nav-item--active {
+  border-bottom: 2px solid #207ab7;
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+  max-height: 650px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px 16px;
+}
+.tox .tox-dialog__body-content > * {
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content > *:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content a {
+  color: #207ab7;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:hover,
+.tox .tox-dialog__body-content a:focus {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:active {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content ul {
+  display: block;
+  list-style-type: disc;
+  margin-bottom: 16px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content .tox-form__group h1 {
+  color: #fff;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group h2 {
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group p {
+  margin-bottom: 16px;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:first-child,
+.tox .tox-dialog__body-content .tox-form__group h2:first-child,
+.tox .tox-dialog__body-content .tox-form__group p:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:last-child,
+.tox .tox-dialog__body-content .tox-form__group h2:last-child,
+.tox .tox-dialog__body-content .tox-form__group p:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:only-child,
+.tox .tox-dialog__body-content .tox-form__group h2:only-child,
+.tox .tox-dialog__body-content .tox-form__group p:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog--width-lg {
+  height: 650px;
+  max-width: 1200px;
+}
+.tox .tox-dialog--width-md {
+  max-width: 800px;
+}
+.tox .tox-dialog--width-md .tox-dialog__body-content {
+  overflow: auto;
+}
+.tox .tox-dialog__body-content--centered {
+  text-align: center;
+}
+.tox .tox-dialog__footer {
+  align-items: center;
+  background-color: #2b3b4e;
+  border-top: 1px solid #000000;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+.tox .tox-dialog__footer-start,
+.tox .tox-dialog__footer-end {
+  display: flex;
+}
+.tox .tox-dialog__busy-spinner {
+  align-items: center;
+  background-color: rgba(34, 47, 62, 0.75);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.tox .tox-dialog__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tox .tox-dialog__table thead th {
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+.tox .tox-dialog__table tbody tr {
+  border-bottom: 1px solid #000000;
+}
+.tox .tox-dialog__table tbody tr:last-child {
+  border-bottom: none;
+}
+.tox .tox-dialog__table td {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.tox .tox-dialog__popups {
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+}
+.tox .tox-dialog__body-iframe {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox .tox-dialog-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox .tox-dialog-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox .tox-dialog-dock-transition {
+  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
+}
+.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
+  transition-delay: 0s;
+}
+.tox.tox-platform-ie {
+  /* IE11 CSS styles go here */
+}
+.tox.tox-platform-ie .tox-dialog-wrap {
+  position: -ms-device-fixed;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-dialog__body {
+  text-align: right;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
+    margin-left: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
+    margin-right: 8px;
+  }
+}
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-right: 8px;
+}
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox .tox-dropzone-container {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dropzone {
+  align-items: center;
+  background: #fff;
+  border: 2px dashed #000000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-height: 100px;
+  padding: 10px;
+}
+.tox .tox-dropzone p {
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0 0 16px 0;
+}
+.tox .tox-edit-area {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  overflow: hidden;
+  position: relative;
+}
+.tox .tox-edit-area__iframe {
+  background-color: #fff;
+  border: 0;
+  box-sizing: border-box;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tox.tox-inline-edit-area {
+  border: 1px dotted #000000;
+}
+.tox .tox-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tox .tox-editor-header {
+  z-index: 1;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: none;
+  transition: box-shadow 0.5s;
+}
+.tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+.tox.tox-tinymce-inline .tox-editor-header {
+  margin-bottom: -1px;
+}
+.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+  background-color: transparent;
+  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
+}
+.tox-editor-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox-editor-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox-editor-dock-transition {
+  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.tox-editor-dock-transition.tox-editor-dock-fadein {
+  transition-delay: 0s;
+}
+.tox .tox-control-wrap {
+  flex: 1;
+  position: relative;
+}
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
+  display: none;
+}
+.tox .tox-control-wrap svg {
+  display: block;
+}
+.tox .tox-control-wrap__status-icon-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-control-wrap__status-icon-invalid svg {
+  fill: #c00;
+}
+.tox .tox-control-wrap__status-icon-unknown svg {
+  fill: orange;
+}
+.tox .tox-control-wrap__status-icon-valid svg {
+  fill: green;
+}
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
+  padding-right: 32px;
+}
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
+  right: 4px;
+}
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
+  padding-left: 32px;
+}
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
+  left: 4px;
+}
+.tox .tox-autocompleter {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-menu {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-autocompleter-highlight {
+  font-weight: bold;
+}
+.tox .tox-color-input {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+.tox .tox-color-input .tox-textfield {
+  z-index: -1;
+}
+.tox .tox-color-input span {
+  border-color: rgba(42, 55, 70, 0.2);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  height: 24px;
+  position: absolute;
+  top: 6px;
+  width: 24px;
+}
+.tox .tox-color-input span:hover:not([aria-disabled=true]),
+.tox .tox-color-input span:focus:not([aria-disabled=true]) {
+  border-color: #207ab7;
+  cursor: pointer;
+}
+.tox .tox-color-input span::before {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%);
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  background-size: 12px 12px;
+  border: 1px solid #2b3b4e;
+  border-radius: 3px;
+  box-sizing: border-box;
+  content: '';
+  height: 24px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+  z-index: -1;
+}
+.tox .tox-color-input span[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tox:not([dir=rtl]) .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
+  padding-left: 36px;
+}
+.tox:not([dir=rtl]) .tox-color-input span {
+  left: 6px;
+}
+.tox[dir="rtl"] .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir="rtl"] .tox-color-input .tox-textfield {
+  padding-right: 36px;
+}
+.tox[dir="rtl"] .tox-color-input span {
+  right: 6px;
+}
+.tox .tox-label,
+.tox .tox-toolbar-label {
+  color: rgba(255, 255, 255, 0.5);
+  display: block;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  padding: 0 8px 0 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-toolbar-label {
+  padding: 0 8px;
+}
+.tox[dir=rtl] .tox-label {
+  padding: 0 0 0 8px;
+}
+.tox .tox-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group {
+  box-sizing: border-box;
+  margin-bottom: 4px;
+}
+.tox .tox-form-group--maximize {
+  flex: 1;
+}
+.tox .tox-form__group--error {
+  color: #c00;
+}
+.tox .tox-form__group--collection {
+  display: flex;
+}
+.tox .tox-form__grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.tox .tox-form__grid--2col > .tox-form__group {
+  width: calc(50% - (8px / 2));
+}
+.tox .tox-form__grid--3col > .tox-form__group {
+  width: calc(100% / 3 - (8px / 2));
+}
+.tox .tox-form__grid--4col > .tox-form__group {
+  width: calc(25% - (8px / 2));
+}
+.tox .tox-form__controls-h-stack {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--inline {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--stretched {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-textarea {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,
+.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
+  display: none;
+}
+.tox .tox-textfield,
+.tox .tox-toolbar-textfield,
+.tox .tox-listboxfield .tox-listbox--select,
+.tox .tox-textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-textfield[disabled],
+.tox .tox-textarea[disabled] {
+  background-color: #222f3e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-textfield:focus,
+.tox .tox-listboxfield .tox-listbox--select:focus,
+.tox .tox-textarea:focus {
+  background-color: #2b3b4e;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-toolbar-textfield {
+  border-width: 0;
+  margin-bottom: 3px;
+  margin-top: 2px;
+  max-width: 250px;
+}
+.tox .tox-naked-btn {
+  background-color: transparent;
+  border: 0;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #207ab7;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.tox .tox-naked-btn svg {
+  display: block;
+  fill: #fff;
+}
+.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-toolbar-textfield + * {
+  margin-right: 4px;
+}
+.tox .tox-listboxfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-listboxfield .tox-listbox--select[disabled] {
+  background-color: #19232e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-listbox__select-label {
+  cursor: default;
+  flex: 1;
+  margin: 0 4px;
+}
+.tox .tox-listbox__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-listbox__select-chevron svg {
+  fill: #fff;
+}
+.tox .tox-listboxfield .tox-listbox--select {
+  align-items: center;
+  display: flex;
+}
+.tox:not([dir=rtl]) .tox-listboxfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-listboxfield svg {
+  left: 8px;
+}
+.tox .tox-selectfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-selectfield select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-selectfield select[disabled] {
+  background-color: #19232e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-selectfield select::-ms-expand {
+  display: none;
+}
+.tox .tox-selectfield select:focus {
+  background-color: #2b3b4e;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-selectfield svg {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox:not([dir=rtl]) .tox-selectfield select[size="0"],
+.tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
+  padding-right: 24px;
+}
+.tox:not([dir=rtl]) .tox-selectfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-selectfield select[size="0"],
+.tox[dir=rtl] .tox-selectfield select[size="1"] {
+  padding-left: 24px;
+}
+.tox[dir=rtl] .tox-selectfield svg {
+  left: 8px;
+}
+.tox .tox-textarea {
+  -webkit-appearance: textarea;
+     -moz-appearance: textarea;
+          appearance: textarea;
+  white-space: pre-wrap;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen,
+.tox-shadowhost.tox-fullscreen {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1200;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
+.tox .tox-help__more-link {
+  list-style: none;
+  margin-top: 1em;
+}
+.tox .tox-image-tools {
+  width: 100%;
+}
+.tox .tox-image-tools__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-image-tools__image {
+  background-color: #666;
+  height: 380px;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.tox .tox-image-tools__image,
+.tox .tox-image-tools__image + .tox-image-tools__toolbar {
+  margin-top: 8px;
+}
+.tox .tox-image-tools__image-bg {
+  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
+}
+.tox .tox-image-tools__toolbar > .tox-spacer {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-croprect-block {
+  background: black;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  position: absolute;
+  zoom: 1;
+}
+.tox .tox-croprect-handle {
+  border: 2px solid white;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tox .tox-croprect-handle-move {
+  border: 0;
+  cursor: move;
+  position: absolute;
+}
+.tox .tox-croprect-handle-nw {
+  border-width: 2px 0 0 2px;
+  cursor: nw-resize;
+  left: 100px;
+  margin: -2px 0 0 -2px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-ne {
+  border-width: 2px 2px 0 0;
+  cursor: ne-resize;
+  left: 200px;
+  margin: -2px 0 0 -20px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-sw {
+  border-width: 0 0 2px 2px;
+  cursor: sw-resize;
+  left: 100px;
+  margin: -20px 2px 0 -2px;
+  top: 200px;
+}
+.tox .tox-croprect-handle-se {
+  border-width: 0 2px 2px 0;
+  cursor: se-resize;
+  left: 200px;
+  margin: -20px 0 0 -20px;
+  top: 200px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-left: 32px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-left: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-right: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-right: 32px;
+}
+.tox .tox-insert-table-picker {
+  display: flex;
+  flex-wrap: wrap;
+  width: 170px;
+}
+.tox .tox-insert-table-picker > div {
+  border-color: #000000;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  height: 17px;
+  width: 17px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
+  margin: -4px 0;
+}
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: rgba(32, 122, 183, 0.5);
+}
+.tox .tox-insert-table-picker__label {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  padding: 4px;
+  text-align: center;
+  width: 100%;
+}
+.tox:not([dir=rtl]) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
+  border-right: 0;
+}
+.tox[dir=rtl] {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
+  border-right: 0;
+}
+.tox {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.tox .tox-menu {
+  background-color: #2b3b4e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(42, 55, 70, 0.1);
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  z-index: 1150;
+}
+.tox .tox-menu.tox-collection.tox-collection--list {
+  padding: 0;
+}
+.tox .tox-menu.tox-collection.tox-collection--toolbar {
+  padding: 4px;
+}
+.tox .tox-menu.tox-collection.tox-collection--grid {
+  padding: 4px;
+}
+.tox .tox-menu__label h1,
+.tox .tox-menu__label h2,
+.tox .tox-menu__label h3,
+.tox .tox-menu__label h4,
+.tox .tox-menu__label h5,
+.tox .tox-menu__label h6,
+.tox .tox-menu__label p,
+.tox .tox-menu__label blockquote,
+.tox .tox-menu__label code {
+  margin: 0;
+}
+.tox .tox-menubar {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;
+  background-color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 4px 0 4px;
+}
+.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
+  border-top: 1px solid #000000;
+}
+/* Deprecated. Remove in next major release */
+.tox .tox-mbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 4px;
+  text-transform: none;
+  width: auto;
+}
+.tox .tox-mbtn[disabled] {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-mbtn:focus:not(:disabled) {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn--active {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
+  cursor: not-allowed;
+}
+.tox .tox-mbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  display: none;
+}
+.tox .tox-notification {
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: -ms-grid;
+  display: grid;
+  font-size: 14px;
+  font-weight: normal;
+  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  margin-top: 4px;
+  opacity: 0;
+  padding: 4px;
+  transition: transform 100ms ease-in, opacity 150ms ease-in;
+}
+.tox .tox-notification p {
+  font-size: 14px;
+  font-weight: normal;
+}
+.tox .tox-notification a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-notification--in {
+  opacity: 1;
+}
+.tox .tox-notification--success {
+  background-color: #e4eeda;
+  border-color: #d7e6c8;
+  color: #fff;
+}
+.tox .tox-notification--success p {
+  color: #fff;
+}
+.tox .tox-notification--success a {
+  color: #547831;
+}
+.tox .tox-notification--success svg {
+  fill: #fff;
+}
+.tox .tox-notification--error {
+  background-color: #f8dede;
+  border-color: #f2bfbf;
+  color: #fff;
+}
+.tox .tox-notification--error p {
+  color: #fff;
+}
+.tox .tox-notification--error a {
+  color: #c00;
+}
+.tox .tox-notification--error svg {
+  fill: #fff;
+}
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
+  background-color: #fffaea;
+  border-color: #ffe89d;
+  color: #fff;
+}
+.tox .tox-notification--warn p,
+.tox .tox-notification--warning p {
+  color: #fff;
+}
+.tox .tox-notification--warn a,
+.tox .tox-notification--warning a {
+  color: #fff;
+}
+.tox .tox-notification--warn svg,
+.tox .tox-notification--warning svg {
+  fill: #fff;
+}
+.tox .tox-notification--info {
+  background-color: #d9edf7;
+  border-color: #779ecb;
+  color: #fff;
+}
+.tox .tox-notification--info p {
+  color: #fff;
+}
+.tox .tox-notification--info a {
+  color: #fff;
+}
+.tox .tox-notification--info svg {
+  fill: #fff;
+}
+.tox .tox-notification__body {
+  -ms-grid-row-align: center;
+      align-self: center;
+  color: #fff;
+  font-size: 14px;
+  -ms-grid-column-span: 1;
+  grid-column-end: 3;
+  -ms-grid-column: 2;
+      grid-column-start: 2;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  text-align: center;
+  white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
+}
+.tox .tox-notification__body > * {
+  margin: 0;
+}
+.tox .tox-notification__body > * + * {
+  margin-top: 1rem;
+}
+.tox .tox-notification__icon {
+  -ms-grid-row-align: center;
+      align-self: center;
+  -ms-grid-column-span: 1;
+  grid-column-end: 2;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification__icon svg {
+  display: block;
+}
+.tox .tox-notification__dismiss {
+  -ms-grid-row-align: start;
+      align-self: start;
+  -ms-grid-column-span: 1;
+  grid-column-end: 4;
+  -ms-grid-column: 3;
+      grid-column-start: 3;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification .tox-progress-bar {
+  -ms-grid-column-span: 3;
+  grid-column-end: 4;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 3;
+  -ms-grid-row: 2;
+      grid-row-start: 2;
+  -ms-grid-column-align: center;
+      justify-self: center;
+}
+.tox .tox-pop {
+  display: inline-block;
+  position: relative;
+}
+.tox .tox-pop--resizing {
+  transition: width 0.1s ease;
+}
+.tox .tox-pop--resizing .tox-toolbar,
+.tox .tox-pop--resizing .tox-toolbar__group {
+  flex-wrap: nowrap;
+}
+.tox .tox-pop--transition {
+  transition: 0.15s ease;
+  transition-property: left, right, top, bottom;
+}
+.tox .tox-pop--transition::before,
+.tox .tox-pop--transition::after {
+  transition: all 0.15s, visibility 0s, opacity 0.075s ease 0.075s;
+}
+.tox .tox-pop__dialog {
+  background-color: #222f3e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  min-width: 0;
+  overflow: hidden;
+}
+.tox .tox-pop__dialog > *:not(.tox-toolbar) {
+  margin: 4px 4px 4px 8px;
+}
+.tox .tox-pop__dialog .tox-toolbar {
+  background-color: transparent;
+  margin-bottom: -1px;
+}
+.tox .tox-pop::before,
+.tox .tox-pop::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  opacity: 1;
+  position: absolute;
+  width: 0;
+}
+.tox .tox-pop.tox-pop--inset::before,
+.tox .tox-pop.tox-pop--inset::after {
+  opacity: 0;
+  transition: all 0s 0.15s, visibility 0s, opacity 0.075s ease;
+}
+.tox .tox-pop.tox-pop--bottom::before,
+.tox .tox-pop.tox-pop--bottom::after {
+  left: 50%;
+  top: 100%;
+}
+.tox .tox-pop.tox-pop--bottom::after {
+  border-color: #222f3e transparent transparent transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: -1px;
+}
+.tox .tox-pop.tox-pop--bottom::before {
+  border-color: #000000 transparent transparent transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--top::before,
+.tox .tox-pop.tox-pop--top::after {
+  left: 50%;
+  top: 0;
+  transform: translateY(-100%);
+}
+.tox .tox-pop.tox-pop--top::after {
+  border-color: transparent transparent #222f3e transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: 1px;
+}
+.tox .tox-pop.tox-pop--top::before {
+  border-color: transparent transparent #000000 transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--left::before,
+.tox .tox-pop.tox-pop--left::after {
+  left: 0;
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--left::after {
+  border-color: transparent #222f3e transparent transparent;
+  border-width: 8px;
+  margin-left: -15px;
+}
+.tox .tox-pop.tox-pop--left::before {
+  border-color: transparent #000000 transparent transparent;
+  border-width: 10px;
+  margin-left: -19px;
+}
+.tox .tox-pop.tox-pop--right::before,
+.tox .tox-pop.tox-pop--right::after {
+  left: 100%;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--right::after {
+  border-color: transparent transparent transparent #222f3e;
+  border-width: 8px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--right::before {
+  border-color: transparent transparent transparent #000000;
+  border-width: 10px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--align-left::before,
+.tox .tox-pop.tox-pop--align-left::after {
+  left: 20px;
+}
+.tox .tox-pop.tox-pop--align-right::before,
+.tox .tox-pop.tox-pop--align-right::after {
+  left: calc(100% - 20px);
+}
+.tox .tox-sidebar-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  min-height: 0;
+}
+.tox .tox-sidebar {
+  background-color: #222f3e;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.tox .tox-sidebar__slider {
+  display: flex;
+  overflow: hidden;
+}
+.tox .tox-sidebar__pane-container {
+  display: flex;
+}
+.tox .tox-sidebar__pane {
+  display: flex;
+}
+.tox .tox-sidebar--sliding-closed {
+  opacity: 0;
+}
+.tox .tox-sidebar--sliding-open {
+  opacity: 1;
+}
+.tox .tox-sidebar--sliding-growing,
+.tox .tox-sidebar--sliding-shrinking {
+  transition: width 0.5s ease, opacity 0.5s ease;
+}
+.tox .tox-selector {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox.tox-platform-touch .tox-selector {
+  height: 12px;
+  width: 12px;
+}
+.tox .tox-slider {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 24px;
+  justify-content: center;
+  position: relative;
+}
+.tox .tox-slider__rail {
+  background-color: transparent;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  height: 10px;
+  min-width: 120px;
+  width: 100%;
+}
+.tox .tox-slider__handle {
+  background-color: #207ab7;
+  border: 2px solid #185d8c;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 24px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 14px;
+}
+.tox .tox-source-code {
+  overflow: auto;
+}
+.tox .tox-spinner {
+  display: flex;
+}
+.tox .tox-spinner > div {
+  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+}
+.tox .tox-spinner > div:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.tox .tox-spinner > div:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes tam-bouncing-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-statusbar {
+  align-items: center;
+  background-color: #222f3e;
+  border-top: 1px solid #000000;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: normal;
+  height: 18px;
+  overflow: hidden;
+  padding: 0 8px;
+  position: relative;
+  text-transform: uppercase;
+}
+.tox .tox-statusbar__text-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.tox .tox-statusbar__path {
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__path > * {
+  display: inline;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__wordcount {
+  flex: 0 0 auto;
+  margin-left: 1ch;
+}
+.tox .tox-statusbar a,
+.tox .tox-statusbar__path-item,
+.tox .tox-statusbar__wordcount {
+  color: #fff;
+  text-decoration: none;
+}
+.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-statusbar__resize-handle {
+  align-items: flex-end;
+  align-self: stretch;
+  cursor: nwse-resize;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: -8px;
+  padding-left: 1ch;
+}
+.tox .tox-statusbar__resize-handle svg {
+  display: block;
+  fill: #fff;
+}
+.tox .tox-statusbar__resize-handle:focus svg {
+  background-color: #4a5562;
+  border-radius: 1px;
+  box-shadow: 0 0 0 2px #4a5562;
+}
+.tox:not([dir=rtl]) .tox-statusbar__path > * {
+  margin-right: 4px;
+}
+.tox:not([dir=rtl]) .tox-statusbar__branding {
+  margin-left: 1ch;
+}
+.tox[dir=rtl] .tox-statusbar {
+  flex-direction: row-reverse;
+}
+.tox[dir=rtl] .tox-statusbar__path > * {
+  margin-left: 4px;
+}
+.tox .tox-throbber {
+  z-index: 1299;
+}
+.tox .tox-throbber__busy-spinner {
+  align-items: center;
+  background-color: rgba(34, 47, 62, 0.6);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.tox .tox-tbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-transform: none;
+  width: 34px;
+}
+.tox .tox-tbtn svg {
+  display: block;
+  fill: #fff;
+}
+.tox .tox-tbtn.tox-tbtn-more {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: inherit;
+}
+.tox .tox-tbtn:focus {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+}
+.tox .tox-tbtn:hover {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn:hover svg {
+  fill: #fff;
+}
+.tox .tox-tbtn:active {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn:active svg {
+  fill: #fff;
+}
+.tox .tox-tbtn--disabled,
+.tox .tox-tbtn--disabled:hover,
+.tox .tox-tbtn:disabled,
+.tox .tox-tbtn:disabled:hover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-tbtn--disabled svg,
+.tox .tox-tbtn--disabled:hover svg,
+.tox .tox-tbtn:disabled svg,
+.tox .tox-tbtn:disabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-tbtn--enabled,
+.tox .tox-tbtn--enabled:hover {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn--enabled > *,
+.tox .tox-tbtn--enabled:hover > * {
+  transform: none;
+}
+.tox .tox-tbtn--enabled svg,
+.tox .tox-tbtn--enabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: #fff;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+  color: #fff;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
+  fill: #fff;
+}
+.tox .tox-tbtn:active > * {
+  transform: none;
+}
+.tox .tox-tbtn--md {
+  height: 51px;
+  width: 51px;
+}
+.tox .tox-tbtn--lg {
+  flex-direction: column;
+  height: 68px;
+  width: 68px;
+}
+.tox .tox-tbtn--return {
+  -ms-grid-row-align: stretch;
+      align-self: stretch;
+  height: unset;
+  width: 16px;
+}
+.tox .tox-tbtn--labeled {
+  padding: 0 4px;
+  width: unset;
+}
+.tox .tox-tbtn__vlabel {
+  display: block;
+  font-size: 10px;
+  font-weight: normal;
+  letter-spacing: -0.025em;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+.tox .tox-tbtn--select {
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+  width: auto;
+}
+.tox .tox-tbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-tbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-tbtn__select-chevron svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 7em;
+}
+.tox .tox-split-button {
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: flex;
+  margin: 2px 0 3px 0;
+  overflow: hidden;
+}
+.tox .tox-split-button:hover {
+  box-shadow: 0 0 0 1px #4a5562 inset;
+}
+.tox .tox-split-button:focus {
+  background: #4a5562;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-split-button > * {
+  border-radius: 0;
+}
+.tox .tox-split-button__chevron {
+  width: 16px;
+}
+.tox .tox-split-button__chevron svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-split-button .tox-tbtn {
+  margin: 0;
+}
+.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
+  width: 30px;
+}
+.tox.tox-platform-touch .tox-split-button__chevron {
+  width: 20px;
+}
+.tox .tox-split-button.tox-tbtn--disabled:hover,
+.tox .tox-split-button.tox-tbtn--disabled:focus,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
+  background: transparent;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-toolbar-overlord {
+  background-color: #222f3e;
+}
+.tox .tox-toolbar,
+.tox .tox-toolbar__primary,
+.tox .tox-toolbar__overflow {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;
+  background-color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
+  height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  visibility: hidden;
+}
+.tox .tox-toolbar__overflow--growing {
+  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
+}
+.tox .tox-toolbar__overflow--shrinking {
+  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
+}
+.tox .tox-menubar + .tox-toolbar,
+.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
+  border-top: 1px solid #000000;
+  margin-top: -1px;
+}
+.tox .tox-toolbar--scrolling {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.tox .tox-pop .tox-toolbar {
+  border-width: 0;
+}
+.tox .tox-toolbar--no-divider {
+  background-image: none;
+}
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child,
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
+  border-top: 1px solid #000000;
+}
+.tox.tox-tinymce-aux .tox-toolbar__overflow {
+  background-color: #222f3e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.tox .tox-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0;
+  padding: 0 4px 0 4px;
+}
+.tox .tox-toolbar__group--pull-right {
+  margin-left: auto;
+}
+.tox .tox-toolbar--scrolling .tox-toolbar__group {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+  border-right: 1px solid #000000;
+}
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
+  border-left: 1px solid #000000;
+}
+.tox .tox-tooltip {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+}
+.tox .tox-tooltip__body {
+  background-color: #3d546f;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(42, 55, 70, 0.3);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 4px 8px;
+  text-transform: none;
+}
+.tox .tox-tooltip__arrow {
+  position: absolute;
+}
+.tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #3d546f;
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom: 8px solid #3d546f;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid #3d546f;
+  border-top: 8px solid transparent;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #3d546f;
+  border-top: 8px solid transparent;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-well {
+  border: 1px solid #000000;
+  border-radius: 3px;
+  padding: 8px;
+  width: 100%;
+}
+.tox .tox-well > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-well > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-well > *:only-child {
+  margin: 0;
+}
+.tox .tox-custom-editor {
+  border: 1px solid #000000;
+  border-radius: 3px;
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+/* stylelint-disable */
+.tox {
+  /* stylelint-enable */
+}
+.tox .tox-dialog-loading::before {
+  background-color: rgba(0, 0, 0, 0.5);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.tox .tox-tab {
+  cursor: pointer;
+}
+.tox .tox-dialog__content-js {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-content .tox-collection {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-image-tools-edit-panel {
+  height: 60px;
+}
+.tox .tox-image-tools__sidebar {
+  height: 60px;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.min.css
new file mode 100644
index 0000000..e71f6f0
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{box-shadow:none;box-sizing:content-box;color:#2a3746;cursor:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:normal;-webkit-tap-highlight-color:transparent;text-decoration:none;text-shadow:none;text-transform:none;vertical-align:initial;white-space:normal}.tox :not(svg):not(rect){box-sizing:inherit;color:inherit;cursor:inherit;direction:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-tap-highlight-color:inherit;text-align:inherit;text-decoration:inherit;text-shadow:inherit;text-transform:inherit;vertical-align:inherit;white-space:inherit}.tox :not(svg):not(rect){background:0 0;border:0;box-shadow:none;float:none;height:auto;margin:0;max-width:none;outline:0;padding:0;position:static;width:auto}.tox:not([dir=rtl]){direction:ltr;text-align:left}.tox[dir=rtl]{direction:rtl;text-align:right}.tox-tinymce{border:1px solid #000;border-radius:0;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;overflow:hidden;position:relative;visibility:inherit!important}.tox-tinymce-inline{border:none;box-shadow:none}.tox-tinymce-inline .tox-editor-header{background-color:transparent;border:1px solid #000;border-radius:0;box-shadow:none}.tox-tinymce-aux{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;z-index:1300}.tox-tinymce :focus,.tox-tinymce-aux :focus{outline:0}button::-moz-focus-inner{border:0}.tox[dir=rtl] .tox-icon--flip svg{transform:rotateY(180deg)}.tox .accessibility-issue__header{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description{align-items:stretch;border:1px solid #000;border-radius:3px;display:flex;justify-content:space-between}.tox .accessibility-issue__description>div{padding-bottom:4px}.tox .accessibility-issue__description>div>div{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description>:last-child:not(:only-child){border-color:#000;border-style:solid}.tox .accessibility-issue__repair{margin-top:16px}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description{background-color:rgba(32,122,183,.5);border-color:#207ab7;color:#fff}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description>:last-child{border-color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description{background-color:rgba(255,165,0,.5);border-color:rgba(255,165,0,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description>:last-child{border-color:rgba(255,165,0,.8)}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description{background-color:rgba(204,0,0,.5);border-color:rgba(204,0,0,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description>:last-child{border-color:rgba(204,0,0,.8)}.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description{background-color:rgba(120,171,70,.5);border-color:rgba(120,171,70,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description>:last-child{border-color:rgba(120,171,70,.8)}.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue__header h1,.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2{margin-top:0}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-left:4px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-left:auto}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description{padding:4px 4px 4px 8px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description>:last-child{border-left-width:1px;padding-left:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-right:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-right:auto}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description{padding:4px 8px 4px 4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description>:last-child{border-right-width:1px;padding-right:4px}.tox .tox-anchorbar{display:flex;flex:0 0 auto}.tox .tox-bar{display:flex;flex:0 0 auto}.tox .tox-button{background-color:#207ab7;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#207ab7;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;outline:0;padding:4px 16px;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap}.tox .tox-button[disabled]{background-color:#207ab7;background-image:none;border-color:#207ab7;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-button:focus:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:hover:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:active:not(:disabled){background-color:#185d8c;background-image:none;border-color:#185d8c;box-shadow:none;color:#fff}.tox .tox-button--secondary{background-color:#3d546f;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#3d546f;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;color:#fff;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;outline:0;padding:4px 16px;text-decoration:none;text-transform:none}.tox .tox-button--secondary[disabled]{background-color:#3d546f;background-image:none;border-color:#3d546f;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-button--secondary:focus:not(:disabled){background-color:#34485f;background-image:none;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--secondary:hover:not(:disabled){background-color:#34485f;background-image:none;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--secondary:active:not(:disabled){background-color:#2b3b4e;background-image:none;border-color:#2b3b4e;box-shadow:none;color:#fff}.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding:4px}.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display:block;fill:currentColor}.tox .tox-button-link{background:0;border:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;white-space:nowrap}.tox .tox-button-link--sm{font-size:14px}.tox .tox-button--naked{background-color:transparent;border-color:transparent;box-shadow:unset;color:#fff}.tox .tox-button--naked[disabled]{background-color:#3d546f;border-color:#3d546f;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-button--naked:hover:not(:disabled){background-color:#34485f;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--naked:focus:not(:disabled){background-color:#34485f;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--naked:active:not(:disabled){background-color:#2b3b4e;border-color:#2b3b4e;box-shadow:none;color:#fff}.tox .tox-button--naked .tox-icon svg{fill:currentColor}.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color:#fff}.tox .tox-checkbox{align-items:center;border-radius:3px;cursor:pointer;display:flex;height:36px;min-width:36px}.tox .tox-checkbox__input{height:1px;overflow:hidden;position:absolute;top:auto;width:1px}.tox .tox-checkbox__icons{align-items:center;border-radius:3px;box-shadow:0 0 0 2px transparent;box-sizing:content-box;display:flex;height:24px;justify-content:center;padding:calc(4px - 1px);width:24px}.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:block;fill:rgba(255,255,255,.2)}.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:none;fill:#207ab7}.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display:none;fill:#207ab7}.tox .tox-checkbox--disabled{color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg{fill:rgba(255,255,255,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{fill:rgba(255,255,255,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{fill:rgba(255,255,255,.5)}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display:block}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:block}.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{border-radius:3px;box-shadow:inset 0 0 0 1px #207ab7;padding:calc(4px - 1px)}.tox:not([dir=rtl]) .tox-checkbox__label{margin-left:4px}.tox:not([dir=rtl]) .tox-checkbox__input{left:-10000px}.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left:4px}.tox[dir=rtl] .tox-checkbox__label{margin-right:4px}.tox[dir=rtl] .tox-checkbox__input{right:-10000px}.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right:4px}.tox .tox-collection--toolbar .tox-collection__group{display:flex;padding:0}.tox .tox-collection--grid .tox-collection__group{display:flex;flex-wrap:wrap;max-height:208px;overflow-x:hidden;overflow-y:auto;padding:0}.tox .tox-collection--list .tox-collection__group{border-bottom-width:0;border-color:#1a1a1a;border-left-width:0;border-right-width:0;border-style:solid;border-top-width:1px;padding:4px 0}.tox .tox-collection--list .tox-collection__group:first-child{border-top-width:0}.tox .tox-collection__group-heading{background-color:#333;color:#fff;cursor:default;font-size:12px;font-style:normal;font-weight:400;margin-bottom:4px;margin-top:-4px;padding:4px 8px;text-transform:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection__item{align-items:center;color:#fff;cursor:pointer;display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection--list .tox-collection__item{padding:4px 8px}.tox .tox-collection--toolbar .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--grid .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--list .tox-collection__item--enabled{background-color:#2b3b4e;color:#fff}.tox .tox-collection--list .tox-collection__item--active{background-color:#4a5562}.tox .tox-collection--toolbar .tox-collection__item--enabled{background-color:#757d87;color:#fff}.tox .tox-collection--toolbar .tox-collection__item--active{background-color:#4a5562}.tox .tox-collection--grid .tox-collection__item--enabled{background-color:#757d87;color:#fff}.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){background-color:#4a5562;color:#fff}.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#fff}.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#fff}.tox .tox-collection__item-checkmark,.tox .tox-collection__item-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.tox .tox-collection__item-checkmark svg,.tox .tox-collection__item-icon svg{fill:currentColor}.tox .tox-collection--toolbar-lg .tox-collection__item-icon{height:48px;width:48px}.tox .tox-collection__item-label{color:currentColor;display:inline-block;flex:1;-ms-flex-preferred-size:auto;font-size:14px;font-style:normal;font-weight:400;line-height:24px;text-transform:none;word-break:break-all}.tox .tox-collection__item-accessory{color:rgba(255,255,255,.5);display:inline-block;font-size:14px;height:24px;line-height:24px;text-transform:none}.tox .tox-collection__item-caret{align-items:center;display:flex;min-height:24px}.tox .tox-collection__item-caret::after{content:'';font-size:0;min-height:inherit}.tox .tox-collection__item-caret svg{fill:#fff}.tox .tox-collection__item--state-disabled{background-color:transparent;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg{fill:rgba(255,255,255,.5)}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display:none}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory+.tox-collection__item-checkmark{display:none}.tox .tox-collection--horizontal{background-color:#2b3b4e;border:1px solid #1a1a1a;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:nowrap;margin-bottom:0;overflow-x:auto;padding:0}.tox .tox-collection--horizontal .tox-collection__group{align-items:center;display:flex;flex-wrap:nowrap;margin:0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item{height:34px;margin:2px 0 3px 0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item-label{white-space:nowrap}.tox .tox-collection--horizontal .tox-collection__item-caret{margin-left:4px}.tox .tox-collection__item-container{display:flex}.tox .tox-collection__item-container--row{align-items:center;flex:1 1 auto;flex-direction:row}.tox .tox-collection__item-container--row.tox-collection__item-container--align-left{margin-right:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--align-right{justify-content:flex-end;margin-left:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top{align-items:flex-start;margin-bottom:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle{align-items:center}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom{align-items:flex-end;margin-top:auto}.tox .tox-collection__item-container--column{-ms-grid-row-align:center;align-self:center;flex:1 1 auto;flex-direction:column}.tox .tox-collection__item-container--column.tox-collection__item-container--align-left{align-items:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--align-right{align-items:flex-end}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top{align-self:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle{-ms-grid-row-align:center;align-self:center}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom{align-self:flex-end}.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-right:1px solid #000}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left:8px}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-left:4px}.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left:16px;text-align:right}.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret{margin-left:16px}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-left:1px solid #000}.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right:8px}.tox[dir=rtl] .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-right:4px}.tox[dir=rtl] .tox-collection__item-accessory{margin-right:16px;text-align:left}.tox[dir=rtl] .tox-collection .tox-collection__item-caret{margin-right:16px;transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret{margin-right:4px}.tox .tox-color-picker-container{display:flex;flex-direction:row;height:225px;margin:0}.tox .tox-sv-palette{box-sizing:border-box;display:flex;height:100%}.tox .tox-sv-palette-spectrum{height:100%}.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width:225px}.tox .tox-sv-palette-thumb{background:0 0;border:1px solid #000;border-radius:50%;box-sizing:content-box;height:12px;position:absolute;width:12px}.tox .tox-sv-palette-inner-thumb{border:1px solid #fff;border-radius:50%;height:10px;position:absolute;width:10px}.tox .tox-hue-slider{box-sizing:border-box;height:100%;width:25px}.tox .tox-hue-slider-spectrum{background:linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);height:100%;width:100%}.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width:20px}.tox .tox-hue-slider-thumb{background:#fff;border:1px solid #000;box-sizing:content-box;height:4px;width:100%}.tox .tox-rgb-form{display:flex;flex-direction:column;justify-content:space-between}.tox .tox-rgb-form div{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px;width:inherit}.tox .tox-rgb-form input{width:6em}.tox .tox-rgb-form input.tox-invalid{border:1px solid red!important}.tox .tox-rgb-form .tox-rgba-preview{border:1px solid #000;flex-grow:2;margin-bottom:0}.tox:not([dir=rtl]) .tox-sv-palette{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left:-1px}.tox:not([dir=rtl]) .tox-rgb-form label{margin-right:.5em}.tox[dir=rtl] .tox-sv-palette{margin-left:15px}.tox[dir=rtl] .tox-hue-slider{margin-left:15px}.tox[dir=rtl] .tox-hue-slider-thumb{margin-right:-1px}.tox[dir=rtl] .tox-rgb-form label{margin-left:.5em}.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin:2px 0 3px 4px}.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{border:0;margin:-4px 0}.tox .tox-swatches__row{display:flex}.tox .tox-swatch{height:30px;transition:transform .15s,box-shadow .15s;width:30px}.tox .tox-swatch:focus,.tox .tox-swatch:hover{box-shadow:0 0 0 1px rgba(127,127,127,.3) inset;transform:scale(.8)}.tox .tox-swatch--remove{align-items:center;display:flex;justify-content:center}.tox .tox-swatch--remove svg path{stroke:#e74c3c}.tox .tox-swatches__picker-btn{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;outline:0;padding:0;width:30px}.tox .tox-swatches__picker-btn svg{height:24px;width:24px}.tox .tox-swatches__picker-btn:hover{background:#4a5562}.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left:auto}.tox[dir=rtl] .tox-swatches__picker-btn{margin-right:auto}.tox .tox-comment-thread{background:#2b3b4e;position:relative}.tox .tox-comment-thread>:not(:first-child){margin-top:8px}.tox .tox-comment{background:#2b3b4e;border:1px solid #000;border-radius:3px;box-shadow:0 4px 8px 0 rgba(42,55,70,.1);padding:8px 8px 16px 8px;position:relative}.tox .tox-comment__header{align-items:center;color:#fff;display:flex;justify-content:space-between}.tox .tox-comment__date{color:rgba(255,255,255,.5);font-size:12px}.tox .tox-comment__body{color:#fff;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;margin-top:8px;position:relative;text-transform:initial}.tox .tox-comment__body textarea{resize:none;white-space:normal;width:100%}.tox .tox-comment__expander{padding-top:8px}.tox .tox-comment__expander p{color:rgba(255,255,255,.5);font-size:14px;font-style:normal}.tox .tox-comment__body p{margin:0}.tox .tox-comment__buttonspacing{padding-top:16px;text-align:center}.tox .tox-comment-thread__overlay::after{background:#2b3b4e;bottom:0;content:"";display:flex;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:5}.tox .tox-comment__reply{display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.tox .tox-comment__reply>:first-child{margin-bottom:8px;width:100%}.tox .tox-comment__edit{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.tox .tox-comment__gradient::after{background:linear-gradient(rgba(43,59,78,0),#2b3b4e);bottom:0;content:"";display:block;height:5em;margin-top:-40px;position:absolute;width:100%}.tox .tox-comment__overlay{background:#2b3b4e;bottom:0;display:flex;flex-direction:column;flex-grow:1;left:0;opacity:.9;position:absolute;right:0;text-align:center;top:0;z-index:5}.tox .tox-comment__loading-text{align-items:center;color:#fff;display:flex;flex-direction:column;position:relative}.tox .tox-comment__loading-text>div{padding-bottom:16px}.tox .tox-comment__overlaytext{bottom:0;flex-direction:column;font-size:14px;left:0;padding:1em;position:absolute;right:0;top:0;z-index:10}.tox .tox-comment__overlaytext p{background-color:#2b3b4e;box-shadow:0 0 8px 8px #2b3b4e;color:#fff;text-align:center}.tox .tox-comment__overlaytext div:nth-of-type(2){font-size:.8em}.tox .tox-comment__busy-spinner{align-items:center;background-color:#2b3b4e;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}.tox .tox-comment__scroll{display:flex;flex-direction:column;flex-shrink:1;overflow:auto}.tox .tox-conversations{margin:8px}.tox:not([dir=rtl]) .tox-comment__edit{margin-left:8px}.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left:8px}.tox[dir=rtl] .tox-comment__edit{margin-right:8px}.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right:8px}.tox .tox-user{align-items:center;display:flex}.tox .tox-user__avatar svg{fill:rgba(255,255,255,.5)}.tox .tox-user__name{color:rgba(255,255,255,.5);font-size:12px;font-style:normal;font-weight:700;text-transform:uppercase}.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right:8px}.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left:8px}.tox[dir=rtl] .tox-user__avatar svg{margin-left:8px}.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right:8px}.tox .tox-dialog-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1100}.tox .tox-dialog-wrap__backdrop{background-color:rgba(34,47,62,.75);bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.tox .tox-dialog-wrap__backdrop--opaque{background-color:#222f3e}.tox .tox-dialog{background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 16px 16px -10px rgba(42,55,70,.15),0 0 40px 1px rgba(42,55,70,.15);display:flex;flex-direction:column;max-height:100%;max-width:480px;overflow:hidden;position:relative;width:95vw;z-index:2}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog{align-self:flex-start;margin:8px auto;width:calc(100vw - 16px)}}.tox .tox-dialog-inline{z-index:1100}.tox .tox-dialog__header{align-items:center;background-color:#2b3b4e;border-bottom:none;color:#fff;display:flex;font-size:16px;justify-content:space-between;padding:8px 16px 0 16px;position:relative}.tox .tox-dialog__header .tox-button{z-index:1}.tox .tox-dialog__draghandle{cursor:grab;height:100%;left:0;position:absolute;top:0;width:100%}.tox .tox-dialog__draghandle:active{cursor:grabbing}.tox .tox-dialog__dismiss{margin-left:auto}.tox .tox-dialog__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:1.3;margin:0;text-transform:none}.tox .tox-dialog__body{color:#fff;display:flex;flex:1;-ms-flex-preferred-size:auto;font-size:16px;font-style:normal;font-weight:400;line-height:1.3;min-width:0;text-align:left;text-transform:none}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body{flex-direction:column}}.tox .tox-dialog__body-nav{align-items:flex-start;display:flex;flex-direction:column;padding:16px 16px}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body-nav{flex-direction:row;-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:0}}.tox .tox-dialog__body-nav-item{border-bottom:2px solid transparent;color:rgba(255,255,255,.5);display:inline-block;font-size:14px;line-height:1.3;margin-bottom:8px;text-decoration:none;white-space:nowrap}.tox .tox-dialog__body-nav-item:focus{background-color:rgba(32,122,183,.1)}.tox .tox-dialog__body-nav-item--active{border-bottom:2px solid #207ab7;color:#207ab7}.tox .tox-dialog__body-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto;max-height:650px;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px 16px}.tox .tox-dialog__body-content>*{margin-bottom:0;margin-top:16px}.tox .tox-dialog__body-content>:first-child{margin-top:0}.tox .tox-dialog__body-content>:last-child{margin-bottom:0}.tox .tox-dialog__body-content>:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog__body-content a{color:#207ab7;cursor:pointer;text-decoration:none}.tox .tox-dialog__body-content a:focus,.tox .tox-dialog__body-content a:hover{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content a:active{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content svg{fill:#fff}.tox .tox-dialog__body-content ul{display:block;list-style-type:disc;margin-bottom:16px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.tox .tox-dialog__body-content .tox-form__group h1{color:#fff;font-size:20px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group h2{color:#fff;font-size:16px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group p{margin-bottom:16px}.tox .tox-dialog__body-content .tox-form__group h1:first-child,.tox .tox-dialog__body-content .tox-form__group h2:first-child,.tox .tox-dialog__body-content .tox-form__group p:first-child{margin-top:0}.tox .tox-dialog__body-content .tox-form__group h1:last-child,.tox .tox-dialog__body-content .tox-form__group h2:last-child,.tox .tox-dialog__body-content .tox-form__group p:last-child{margin-bottom:0}.tox .tox-dialog__body-content .tox-form__group h1:only-child,.tox .tox-dialog__body-content .tox-form__group h2:only-child,.tox .tox-dialog__body-content .tox-form__group p:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog--width-lg{height:650px;max-width:1200px}.tox .tox-dialog--width-md{max-width:800px}.tox .tox-dialog--width-md .tox-dialog__body-content{overflow:auto}.tox .tox-dialog__body-content--centered{text-align:center}.tox .tox-dialog__footer{align-items:center;background-color:#2b3b4e;border-top:1px solid #000;display:flex;justify-content:space-between;padding:8px 16px}.tox .tox-dialog__footer-end,.tox .tox-dialog__footer-start{display:flex}.tox .tox-dialog__busy-spinner{align-items:center;background-color:rgba(34,47,62,.75);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:3}.tox .tox-dialog__table{border-collapse:collapse;width:100%}.tox .tox-dialog__table thead th{font-weight:700;padding-bottom:8px}.tox .tox-dialog__table tbody tr{border-bottom:1px solid #000}.tox .tox-dialog__table tbody tr:last-child{border-bottom:none}.tox .tox-dialog__table td{padding-bottom:8px;padding-top:8px}.tox .tox-dialog__popups{position:absolute;width:100%;z-index:1100}.tox .tox-dialog__body-iframe{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox .tox-dialog-dock-fadeout{opacity:0;visibility:hidden}.tox .tox-dialog-dock-fadein{opacity:1;visibility:visible}.tox .tox-dialog-dock-transition{transition:visibility 0s linear .3s,opacity .3s ease}.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein{transition-delay:0s}.tox.tox-platform-ie .tox-dialog-wrap{position:-ms-device-fixed}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child){margin-left:8px}}.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left:8px}.tox[dir=rtl] .tox-dialog__body{text-align:right}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav{margin-left:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child){margin-right:8px}}.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right:8px}body.tox-dialog__disable-scroll{overflow:hidden}.tox .tox-dropzone-container{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dropzone{align-items:center;background:#fff;border:2px dashed #000;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;min-height:100px;padding:10px}.tox .tox-dropzone p{color:rgba(255,255,255,.5);margin:0 0 16px 0}.tox .tox-edit-area{display:flex;flex:1;-ms-flex-preferred-size:auto;overflow:hidden;position:relative}.tox .tox-edit-area__iframe{background-color:#fff;border:0;box-sizing:border-box;flex:1;-ms-flex-preferred-size:auto;height:100%;position:absolute;width:100%}.tox.tox-inline-edit-area{border:1px dotted #000}.tox .tox-editor-container{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.tox .tox-editor-header{z-index:1}.tox:not(.tox-tinymce-inline) .tox-editor-header{box-shadow:none;transition:box-shadow .5s}.tox.tox-tinymce--toolbar-bottom .tox-editor-header,.tox.tox-tinymce-inline .tox-editor-header{margin-bottom:-1px}.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header{background-color:transparent;box-shadow:0 4px 4px -3px rgba(0,0,0,.25)}.tox-editor-dock-fadeout{opacity:0;visibility:hidden}.tox-editor-dock-fadein{opacity:1;visibility:visible}.tox-editor-dock-transition{transition:visibility 0s linear .25s,opacity .25s ease}.tox-editor-dock-transition.tox-editor-dock-fadein{transition-delay:0s}.tox .tox-control-wrap{flex:1;position:relative}.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display:none}.tox .tox-control-wrap svg{display:block}.tox .tox-control-wrap__status-icon-wrap{position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-control-wrap__status-icon-invalid svg{fill:#c00}.tox .tox-control-wrap__status-icon-unknown svg{fill:orange}.tox .tox-control-wrap__status-icon-valid svg{fill:green}.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right:32px}.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right:4px}.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left:32px}.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left:4px}.tox .tox-autocompleter{max-width:25em}.tox .tox-autocompleter .tox-menu{max-width:25em}.tox .tox-autocompleter .tox-autocompleter-highlight{font-weight:700}.tox .tox-color-input{display:flex;position:relative;z-index:1}.tox .tox-color-input .tox-textfield{z-index:-1}.tox .tox-color-input span{border-color:rgba(42,55,70,.2);border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;height:24px;position:absolute;top:6px;width:24px}.tox .tox-color-input span:focus:not([aria-disabled=true]),.tox .tox-color-input span:hover:not([aria-disabled=true]){border-color:#207ab7;cursor:pointer}.tox .tox-color-input span::before{background-image:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.25) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border:1px solid #2b3b4e;border-radius:3px;box-sizing:border-box;content:'';height:24px;left:-1px;position:absolute;top:-1px;width:24px;z-index:-1}.tox .tox-color-input span[aria-disabled=true]{cursor:not-allowed}.tox:not([dir=rtl]) .tox-color-input .tox-textfield{padding-left:36px}.tox:not([dir=rtl]) .tox-color-input span{left:6px}.tox[dir=rtl] .tox-color-input .tox-textfield{padding-right:36px}.tox[dir=rtl] .tox-color-input span{right:6px}.tox .tox-label,.tox .tox-toolbar-label{color:rgba(255,255,255,.5);display:block;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;padding:0 8px 0 0;text-transform:none;white-space:nowrap}.tox .tox-toolbar-label{padding:0 8px}.tox[dir=rtl] .tox-label{padding:0 0 0 8px}.tox .tox-form{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group{box-sizing:border-box;margin-bottom:4px}.tox .tox-form-group--maximize{flex:1}.tox .tox-form__group--error{color:#c00}.tox .tox-form__group--collection{display:flex}.tox .tox-form__grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.tox .tox-form__grid--2col>.tox-form__group{width:calc(50% - (8px / 2))}.tox .tox-form__grid--3col>.tox-form__group{width:calc(100% / 3 - (8px / 2))}.tox .tox-form__grid--4col>.tox-form__group{width:calc(25% - (8px / 2))}.tox .tox-form__controls-h-stack{align-items:center;display:flex}.tox .tox-form__group--inline{align-items:center;display:flex}.tox .tox-form__group--stretched{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-textarea{flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right:4px}.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display:none}.tox .tox-listboxfield .tox-listbox--select,.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-textarea[disabled],.tox .tox-textfield[disabled]{background-color:#222f3e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-listboxfield .tox-listbox--select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{background-color:#2b3b4e;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-toolbar-textfield{border-width:0;margin-bottom:3px;margin-top:2px;max-width:250px}.tox .tox-naked-btn{background-color:transparent;border:0;border-color:transparent;box-shadow:unset;color:#207ab7;cursor:pointer;display:block;margin:0;padding:0}.tox .tox-naked-btn svg{display:block;fill:#fff}.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left:4px}.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right:4px}.tox .tox-listboxfield{cursor:pointer;position:relative}.tox .tox-listboxfield .tox-listbox--select[disabled]{background-color:#19232e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-listbox__select-label{cursor:default;flex:1;margin:0 4px}.tox .tox-listbox__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-listbox__select-chevron svg{fill:#fff}.tox .tox-listboxfield .tox-listbox--select{align-items:center;display:flex}.tox:not([dir=rtl]) .tox-listboxfield svg{right:8px}.tox[dir=rtl] .tox-listboxfield svg{left:8px}.tox .tox-selectfield{cursor:pointer;position:relative}.tox .tox-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-selectfield select[disabled]{background-color:#19232e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-selectfield select::-ms-expand{display:none}.tox .tox-selectfield select:focus{background-color:#2b3b4e;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-selectfield svg{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tox:not([dir=rtl]) .tox-selectfield select[size="0"],.tox:not([dir=rtl]) .tox-selectfield select[size="1"]{padding-right:24px}.tox:not([dir=rtl]) .tox-selectfield svg{right:8px}.tox[dir=rtl] .tox-selectfield select[size="0"],.tox[dir=rtl] .tox-selectfield select[size="1"]{padding-left:24px}.tox[dir=rtl] .tox-selectfield svg{left:8px}.tox .tox-textarea{-webkit-appearance:textarea;-moz-appearance:textarea;appearance:textarea;white-space:pre-wrap}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}.tox .tox-help__more-link{list-style:none;margin-top:1em}.tox .tox-image-tools{width:100%}.tox .tox-image-tools__toolbar{align-items:center;display:flex;justify-content:center}.tox .tox-image-tools__image{background-color:#666;height:380px;overflow:auto;position:relative;width:100%}.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top:8px}.tox .tox-image-tools__image-bg{background:url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==)}.tox .tox-image-tools__toolbar>.tox-spacer{flex:1;-ms-flex-preferred-size:auto}.tox .tox-croprect-block{background:#000;opacity:.5;position:absolute;zoom:1}.tox .tox-croprect-handle{border:2px solid #fff;height:20px;left:0;position:absolute;top:0;width:20px}.tox .tox-croprect-handle-move{border:0;cursor:move;position:absolute}.tox .tox-croprect-handle-nw{border-width:2px 0 0 2px;cursor:nw-resize;left:100px;margin:-2px 0 0 -2px;top:100px}.tox .tox-croprect-handle-ne{border-width:2px 2px 0 0;cursor:ne-resize;left:200px;margin:-2px 0 0 -20px;top:100px}.tox .tox-croprect-handle-sw{border-width:0 0 2px 2px;cursor:sw-resize;left:100px;margin:-20px 2px 0 -2px;top:200px}.tox .tox-croprect-handle-se{border-width:0 2px 2px 0;cursor:se-resize;left:200px;margin:-20px 0 0 -20px;top:200px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left:8px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left:32px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right:8px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right:32px}.tox .tox-insert-table-picker{display:flex;flex-wrap:wrap;width:170px}.tox .tox-insert-table-picker>div{border-color:#000;border-style:solid;border-width:0 1px 1px 0;box-sizing:border-box;height:17px;width:17px}.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin:-4px 0}.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color:rgba(32,122,183,.5);border-color:rgba(32,122,183,.5)}.tox .tox-insert-table-picker__label{color:#fff;display:block;font-size:14px;padding:4px;text-align:center;width:100%}.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right:0}.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right:0}.tox .tox-menu{background-color:#2b3b4e;border:1px solid #000;border-radius:3px;box-shadow:0 4px 8px 0 rgba(42,55,70,.1);display:inline-block;overflow:hidden;vertical-align:top;z-index:1150}.tox .tox-menu.tox-collection.tox-collection--list{padding:0}.tox .tox-menu.tox-collection.tox-collection--toolbar{padding:4px}.tox .tox-menu.tox-collection.tox-collection--grid{padding:4px}.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin:0}.tox .tox-menubar{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color:#222f3e;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 4px 0 4px}.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar{border-top:1px solid #000}.tox .tox-mbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#fff;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0 4px;text-transform:none;width:auto}.tox .tox-mbtn[disabled]{background-color:transparent;border:0;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-mbtn:focus:not(:disabled){background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn--active{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor:not-allowed}.tox .tox-mbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px;display:none}.tox .tox-notification{border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;display:-ms-grid;display:grid;font-size:14px;font-weight:400;-ms-grid-columns:minmax(40px,1fr) auto minmax(40px,1fr);grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);margin-top:4px;opacity:0;padding:4px;transition:transform .1s ease-in,opacity 150ms ease-in}.tox .tox-notification p{font-size:14px;font-weight:400}.tox .tox-notification a{cursor:pointer;text-decoration:underline}.tox .tox-notification--in{opacity:1}.tox .tox-notification--success{background-color:#e4eeda;border-color:#d7e6c8;color:#fff}.tox .tox-notification--success p{color:#fff}.tox .tox-notification--success a{color:#547831}.tox .tox-notification--success svg{fill:#fff}.tox .tox-notification--error{background-color:#f8dede;border-color:#f2bfbf;color:#fff}.tox .tox-notification--error p{color:#fff}.tox .tox-notification--error a{color:#c00}.tox .tox-notification--error svg{fill:#fff}.tox .tox-notification--warn,.tox .tox-notification--warning{background-color:#fffaea;border-color:#ffe89d;color:#fff}.tox .tox-notification--warn p,.tox .tox-notification--warning p{color:#fff}.tox .tox-notification--warn a,.tox .tox-notification--warning a{color:#fff}.tox .tox-notification--warn svg,.tox .tox-notification--warning svg{fill:#fff}.tox .tox-notification--info{background-color:#d9edf7;border-color:#779ecb;color:#fff}.tox .tox-notification--info p{color:#fff}.tox .tox-notification--info a{color:#fff}.tox .tox-notification--info svg{fill:#fff}.tox .tox-notification__body{-ms-grid-row-align:center;align-self:center;color:#fff;font-size:14px;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;text-align:center;white-space:normal;word-break:break-all;word-break:break-word}.tox .tox-notification__body>*{margin:0}.tox .tox-notification__body>*+*{margin-top:1rem}.tox .tox-notification__icon{-ms-grid-row-align:center;align-self:center;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification__icon svg{display:block}.tox .tox-notification__dismiss{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification .tox-progress-bar{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2;-ms-grid-column-align:center;justify-self:center}.tox .tox-pop{display:inline-block;position:relative}.tox .tox-pop--resizing{transition:width .1s ease}.tox .tox-pop--resizing .tox-toolbar,.tox .tox-pop--resizing .tox-toolbar__group{flex-wrap:nowrap}.tox .tox-pop--transition{transition:.15s ease;transition-property:left,right,top,bottom}.tox .tox-pop--transition::after,.tox .tox-pop--transition::before{transition:all .15s,visibility 0s,opacity 75ms ease 75ms}.tox .tox-pop__dialog{background-color:#222f3e;border:1px solid #000;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);min-width:0;overflow:hidden}.tox .tox-pop__dialog>:not(.tox-toolbar){margin:4px 4px 4px 8px}.tox .tox-pop__dialog .tox-toolbar{background-color:transparent;margin-bottom:-1px}.tox .tox-pop::after,.tox .tox-pop::before{border-style:solid;content:'';display:block;height:0;opacity:1;position:absolute;width:0}.tox .tox-pop.tox-pop--inset::after,.tox .tox-pop.tox-pop--inset::before{opacity:0;transition:all 0s .15s,visibility 0s,opacity 75ms ease}.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{left:50%;top:100%}.tox .tox-pop.tox-pop--bottom::after{border-color:#222f3e transparent transparent transparent;border-width:8px;margin-left:-8px;margin-top:-1px}.tox .tox-pop.tox-pop--bottom::before{border-color:#000 transparent transparent transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{left:50%;top:0;transform:translateY(-100%)}.tox .tox-pop.tox-pop--top::after{border-color:transparent transparent #222f3e transparent;border-width:8px;margin-left:-8px;margin-top:1px}.tox .tox-pop.tox-pop--top::before{border-color:transparent transparent #000 transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{left:0;top:calc(50% - 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--left::after{border-color:transparent #222f3e transparent transparent;border-width:8px;margin-left:-15px}.tox .tox-pop.tox-pop--left::before{border-color:transparent #000 transparent transparent;border-width:10px;margin-left:-19px}.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{left:100%;top:calc(50% + 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--right::after{border-color:transparent transparent transparent #222f3e;border-width:8px;margin-left:-1px}.tox .tox-pop.tox-pop--right::before{border-color:transparent transparent transparent #000;border-width:10px;margin-left:-1px}.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left:20px}.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left:calc(100% - 20px)}.tox .tox-sidebar-wrap{display:flex;flex-direction:row;flex-grow:1;-ms-flex-preferred-size:0;min-height:0}.tox .tox-sidebar{background-color:#222f3e;display:flex;flex-direction:row;justify-content:flex-end}.tox .tox-sidebar__slider{display:flex;overflow:hidden}.tox .tox-sidebar__pane-container{display:flex}.tox .tox-sidebar__pane{display:flex}.tox .tox-sidebar--sliding-closed{opacity:0}.tox .tox-sidebar--sliding-open{opacity:1}.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition:width .5s ease,opacity .5s ease}.tox .tox-selector{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;display:inline-block;height:10px;position:absolute;width:10px}.tox.tox-platform-touch .tox-selector{height:12px;width:12px}.tox .tox-slider{align-items:center;display:flex;flex:1;-ms-flex-preferred-size:auto;height:24px;justify-content:center;position:relative}.tox .tox-slider__rail{background-color:transparent;border:1px solid #000;border-radius:3px;height:10px;min-width:120px;width:100%}.tox .tox-slider__handle{background-color:#207ab7;border:2px solid #185d8c;border-radius:3px;box-shadow:none;height:24px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:14px}.tox .tox-source-code{overflow:auto}.tox .tox-spinner{display:flex}.tox .tox-spinner>div{animation:tam-bouncing-dots 1.5s ease-in-out 0s infinite both;background-color:rgba(255,255,255,.5);border-radius:100%;height:8px;width:8px}.tox .tox-spinner>div:nth-child(1){animation-delay:-.32s}.tox .tox-spinner>div:nth-child(2){animation-delay:-.16s}@keyframes tam-bouncing-dots{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right:4px}.tox .tox-statusbar{align-items:center;background-color:#222f3e;border-top:1px solid #000;color:#fff;display:flex;flex:0 0 auto;font-size:12px;font-weight:400;height:18px;overflow:hidden;padding:0 8px;position:relative;text-transform:uppercase}.tox .tox-statusbar__text-container{display:flex;flex:1 1 auto;justify-content:flex-end;overflow:hidden}.tox .tox-statusbar__path{display:flex;flex:1 1 auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tox .tox-statusbar__path>*{display:inline;white-space:nowrap}.tox .tox-statusbar__wordcount{flex:0 0 auto;margin-left:1ch}.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount{color:#fff;text-decoration:none}.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]){cursor:pointer;text-decoration:underline}.tox .tox-statusbar__resize-handle{align-items:flex-end;align-self:stretch;cursor:nwse-resize;display:flex;flex:0 0 auto;justify-content:flex-end;margin-left:auto;margin-right:-8px;padding-left:1ch}.tox .tox-statusbar__resize-handle svg{display:block;fill:#fff}.tox .tox-statusbar__resize-handle:focus svg{background-color:#4a5562;border-radius:1px;box-shadow:0 0 0 2px #4a5562}.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right:4px}.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left:1ch}.tox[dir=rtl] .tox-statusbar{flex-direction:row-reverse}.tox[dir=rtl] .tox-statusbar__path>*{margin-left:4px}.tox .tox-throbber{z-index:1299}.tox .tox-throbber__busy-spinner{align-items:center;background-color:rgba(34,47,62,.6);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.tox .tox-tbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#fff;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0;text-transform:none;width:34px}.tox .tox-tbtn svg{display:block;fill:#fff}.tox .tox-tbtn.tox-tbtn-more{padding-left:5px;padding-right:5px;width:inherit}.tox .tox-tbtn:focus{background:#4a5562;border:0;box-shadow:none}.tox .tox-tbtn:hover{background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn:hover svg{fill:#fff}.tox .tox-tbtn:active{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn:active svg{fill:#fff}.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{background:0 0;border:0;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill:rgba(255,255,255,.5)}.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn--enabled:hover>*,.tox .tox-tbtn--enabled>*{transform:none}.tox .tox-tbtn--enabled svg,.tox .tox-tbtn--enabled:hover svg{fill:#fff}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled){color:#fff}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg{fill:#fff}.tox .tox-tbtn:active>*{transform:none}.tox .tox-tbtn--md{height:51px;width:51px}.tox .tox-tbtn--lg{flex-direction:column;height:68px;width:68px}.tox .tox-tbtn--return{-ms-grid-row-align:stretch;align-self:stretch;height:unset;width:16px}.tox .tox-tbtn--labeled{padding:0 4px;width:unset}.tox .tox-tbtn__vlabel{display:block;font-size:10px;font-weight:400;letter-spacing:-.025em;margin-bottom:4px;white-space:nowrap}.tox .tox-tbtn--select{margin:2px 0 3px 0;padding:0 4px;width:auto}.tox .tox-tbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-tbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-tbtn__select-chevron svg{fill:rgba(255,255,255,.5)}.tox .tox-tbtn--bespoke .tox-tbtn__select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:7em}.tox .tox-split-button{border:0;border-radius:3px;box-sizing:border-box;display:flex;margin:2px 0 3px 0;overflow:hidden}.tox .tox-split-button:hover{box-shadow:0 0 0 1px #4a5562 inset}.tox .tox-split-button:focus{background:#4a5562;box-shadow:none;color:#fff}.tox .tox-split-button>*{border-radius:0}.tox .tox-split-button__chevron{width:16px}.tox .tox-split-button__chevron svg{fill:rgba(255,255,255,.5)}.tox .tox-split-button .tox-tbtn{margin:0}.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child{width:30px}.tox.tox-platform-touch .tox-split-button__chevron{width:20px}.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{background:0 0;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-toolbar-overlord{background-color:#222f3e}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color:#222f3e;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 0}.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height:0;opacity:0;padding-bottom:0;padding-top:0;visibility:hidden}.tox .tox-toolbar__overflow--growing{transition:height .3s ease,opacity .2s linear .1s}.tox .tox-toolbar__overflow--shrinking{transition:opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s}.tox .tox-menubar+.tox-toolbar,.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary{border-top:1px solid #000;margin-top:-1px}.tox .tox-toolbar--scrolling{flex-wrap:nowrap;overflow-x:auto}.tox .tox-pop .tox-toolbar{border-width:0}.tox .tox-toolbar--no-divider{background-image:none}.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary,.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child{border-top:1px solid #000}.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color:#222f3e;border:1px solid #000;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}.tox .tox-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;margin:0 0;padding:0 4px 0 4px}.tox .tox-toolbar__group--pull-right{margin-left:auto}.tox .tox-toolbar--scrolling .tox-toolbar__group{flex-shrink:0;flex-wrap:nowrap}.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right:1px solid #000}.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left:1px solid #000}.tox .tox-tooltip{display:inline-block;padding:8px;position:relative}.tox .tox-tooltip__body{background-color:#3d546f;border-radius:3px;box-shadow:0 2px 4px rgba(42,55,70,.3);color:rgba(255,255,255,.75);font-size:14px;font-style:normal;font-weight:400;padding:4px 8px;text-transform:none}.tox .tox-tooltip__arrow{position:absolute}.tox .tox-tooltip--down .tox-tooltip__arrow{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #3d546f;bottom:0;left:50%;position:absolute;transform:translateX(-50%)}.tox .tox-tooltip--up .tox-tooltip__arrow{border-bottom:8px solid #3d546f;border-left:8px solid transparent;border-right:8px solid transparent;left:50%;position:absolute;top:0;transform:translateX(-50%)}.tox .tox-tooltip--right .tox-tooltip__arrow{border-bottom:8px solid transparent;border-left:8px solid #3d546f;border-top:8px solid transparent;position:absolute;right:0;top:50%;transform:translateY(-50%)}.tox .tox-tooltip--left .tox-tooltip__arrow{border-bottom:8px solid transparent;border-right:8px solid #3d546f;border-top:8px solid transparent;left:0;position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-well{border:1px solid #000;border-radius:3px;padding:8px;width:100%}.tox .tox-well>:first-child{margin-top:0}.tox .tox-well>:last-child{margin-bottom:0}.tox .tox-well>:only-child{margin:0}.tox .tox-custom-editor{border:1px solid #000;border-radius:3px;display:flex;flex:1;position:relative}.tox .tox-dialog-loading::before{background-color:rgba(0,0,0,.5);content:"";height:100%;position:absolute;width:100%;z-index:1000}.tox .tox-tab{cursor:pointer}.tox .tox-dialog__content-js{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-content .tox-collection{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-image-tools-edit-panel{height:60px}.tox .tox-image-tools__sidebar{height:60px}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.css
new file mode 100644
index 0000000..875721a
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.css
@@ -0,0 +1,673 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+/* RESET all the things! */
+.tinymce-mobile-outer-container {
+  all: initial;
+  display: block;
+}
+.tinymce-mobile-outer-container * {
+  border: 0;
+  box-sizing: initial;
+  cursor: inherit;
+  float: none;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* TBIO-3691, stop the gray flicker on touch. */
+  text-shadow: none;
+  white-space: nowrap;
+}
+.tinymce-mobile-icon-arrow-back::before {
+  content: "\e5cd";
+}
+.tinymce-mobile-icon-image::before {
+  content: "\e412";
+}
+.tinymce-mobile-icon-cancel-circle::before {
+  content: "\e5c9";
+}
+.tinymce-mobile-icon-full-dot::before {
+  content: "\e061";
+}
+.tinymce-mobile-icon-align-center::before {
+  content: "\e234";
+}
+.tinymce-mobile-icon-align-left::before {
+  content: "\e236";
+}
+.tinymce-mobile-icon-align-right::before {
+  content: "\e237";
+}
+.tinymce-mobile-icon-bold::before {
+  content: "\e238";
+}
+.tinymce-mobile-icon-italic::before {
+  content: "\e23f";
+}
+.tinymce-mobile-icon-unordered-list::before {
+  content: "\e241";
+}
+.tinymce-mobile-icon-ordered-list::before {
+  content: "\e242";
+}
+.tinymce-mobile-icon-font-size::before {
+  content: "\e245";
+}
+.tinymce-mobile-icon-underline::before {
+  content: "\e249";
+}
+.tinymce-mobile-icon-link::before {
+  content: "\e157";
+}
+.tinymce-mobile-icon-unlink::before {
+  content: "\eca2";
+}
+.tinymce-mobile-icon-color::before {
+  content: "\e891";
+}
+.tinymce-mobile-icon-previous::before {
+  content: "\e314";
+}
+.tinymce-mobile-icon-next::before {
+  content: "\e315";
+}
+.tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-icon-style-formats::before {
+  content: "\e264";
+}
+.tinymce-mobile-icon-undo::before {
+  content: "\e166";
+}
+.tinymce-mobile-icon-redo::before {
+  content: "\e15a";
+}
+.tinymce-mobile-icon-removeformat::before {
+  content: "\e239";
+}
+.tinymce-mobile-icon-small-font::before {
+  content: "\e906";
+}
+.tinymce-mobile-icon-readonly-back::before,
+.tinymce-mobile-format-matches::after {
+  content: "\e5ca";
+}
+.tinymce-mobile-icon-small-heading::before {
+  content: "small";
+}
+.tinymce-mobile-icon-large-heading::before {
+  content: "large";
+}
+.tinymce-mobile-icon-small-heading::before,
+.tinymce-mobile-icon-large-heading::before {
+  font-family: sans-serif;
+  font-size: 80%;
+}
+.tinymce-mobile-mask-edit-icon::before {
+  content: "\e254";
+}
+.tinymce-mobile-icon-back::before {
+  content: "\e5c4";
+}
+.tinymce-mobile-icon-heading::before {
+  /* TODO: Translate */
+  content: "Headings";
+  font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h1::before {
+  content: "H1";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h2::before {
+  content: "H2";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h3::before {
+  content: "H3";
+  font-weight: bold;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: rgba(51, 51, 51, 0.5);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-size: 1em;
+  justify-content: space-between;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1em;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: white;
+  color: #207ab7;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
+  content: "\e900";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
+  z-index: 2;
+}
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
+  background: #ffffff;
+  border: none;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
+  position: relative;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
+  display: flex;
+  flex-grow: 1;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
+  display: flex !important;
+  flex-grow: 1;
+  height: auto !important;
+}
+.tinymce-mobile-android-scroll-reload {
+  overflow: hidden;
+}
+:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
+  margin-top: 23px;
+}
+.tinymce-mobile-toolstrip {
+  background: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  z-index: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex: 1;
+  height: 2.5em;
+  width: 100%;
+  /* Make it no larger than the toolstrip, so that it needs to scroll */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex-shrink: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
+  background: #f44336;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
+  flex-grow: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
+  align-items: center;
+  display: flex;
+  height: 80%;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
+  background: #c8cbcf;
+  color: #cccccc;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
+  background: #207ab7;
+  color: #eceff1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
+  /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
+  /* For widgets like the colour picker, use the whole height */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
+  display: flex;
+  min-height: 1.5em;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
+  display: flex;
+  height: 100%;
+  transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
+  font-family: Sans-serif;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
+  -ms-grid-row-align: center;
+      align-self: center;
+  background: inherit;
+  border: none;
+  border-radius: 50%;
+  color: #888;
+  font-size: 0.6em;
+  font-weight: bold;
+  height: 100%;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
+  display: none;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
+  visibility: hidden;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
+  color: #cccccc;
+  font-size: 10px;
+  line-height: 10px;
+  margin: 0 2px;
+  padding-top: 3px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
+  color: #c8cbcf;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
+  margin-left: 0.5em;
+  margin-right: 0.9em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
+  margin-left: 0.9em;
+  margin-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
+  display: flex;
+  flex: 1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.28em 0;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
+  background: #cccccc;
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
+  background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
+  /* Not part of theming */
+  background: black;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
+  /* Not part of theming */
+  background: white;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
+  /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
+     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
+     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
+     * this approach.
+    */
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #455a64;
+  border: 0.5em solid rgba(136, 136, 136, 0);
+  border-radius: 3em;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  height: 0.5em;
+  justify-content: center;
+  left: -10px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
+  width: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
+  border: 0.5em solid rgba(136, 136, 136, 0.39);
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
+  flex-direction: column;
+  justify-content: center;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
+  background: #ffffff;
+  border: none;
+  border-radius: 0;
+  color: #455a64;
+  flex-grow: 1;
+  font-size: 0.85em;
+  padding-bottom: 0.1em;
+  padding-left: 5px;
+  padding-top: 0.1em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+/* dropup */
+.tinymce-mobile-dropup {
+  background: white;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
+  transition: height 0.3s ease-out;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
+  transition: height 0.3s ease-in;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
+  flex-grow: 0;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
+  flex-grow: 1;
+}
+/* TODO min-height for device size and orientation */
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+  min-height: 200px;
+}
+@media only screen and (orientation: landscape) {
+  .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 200px;
+  }
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 150px;
+  }
+}
+/* styles menu */
+.tinymce-mobile-styles-menu {
+  font-family: sans-serif;
+  outline: 4px solid black;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"].transitioning {
+  transition: transform 0.5s ease-in-out;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
+  border-bottom: 1px solid #ddd;
+  color: #455a64;
+  cursor: pointer;
+  display: flex;
+  padding: 1em 1em;
+  position: relative;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
+  color: #455a64;
+  content: "\e314";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
+  color: #455a64;
+  content: "\e315";
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
+  align-items: center;
+  background: #fff;
+  border-top: #455a64;
+  color: #455a64;
+  display: flex;
+  min-height: 2.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
+  transform: translate(-100%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
+  transform: translate(0%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
+  transform: translate(100%);
+}
+@font-face {
+  font-family: 'tinymce-mobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
+}
+@media (min-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 25px;
+  }
+}
+@media (max-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 18px;
+  }
+}
+.tinymce-mobile-icon {
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.mixin-flex-and-centre {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mixin-flex-bar {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
+  background-color: #fff;
+  width: 100%;
+}
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+  /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
+  background-color: #207ab7;
+  border-radius: 50%;
+  bottom: 1em;
+  color: white;
+  font-size: 1em;
+  height: 2.1em;
+  position: fixed;
+  right: 2em;
+  width: 2.1em;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
+  height: 300px;
+  overflow: hidden;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
+  height: 100%;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
+  display: none;
+}
+/*
+  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
+  increased and the whole body becomes scrollable. It's important!
+ */
+input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    bottom: 50%;
+  }
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
new file mode 100644
index 0000000..3a45cac
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all:initial;display:block}.tinymce-mobile-outer-container *{border:0;box-sizing:initial;cursor:inherit;float:none;line-height:1;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:transparent;text-shadow:none;white-space:nowrap}.tinymce-mobile-icon-arrow-back::before{content:"\e5cd"}.tinymce-mobile-icon-image::before{content:"\e412"}.tinymce-mobile-icon-cancel-circle::before{content:"\e5c9"}.tinymce-mobile-icon-full-dot::before{content:"\e061"}.tinymce-mobile-icon-align-center::before{content:"\e234"}.tinymce-mobile-icon-align-left::before{content:"\e236"}.tinymce-mobile-icon-align-right::before{content:"\e237"}.tinymce-mobile-icon-bold::before{content:"\e238"}.tinymce-mobile-icon-italic::before{content:"\e23f"}.tinymce-mobile-icon-unordered-list::before{content:"\e241"}.tinymce-mobile-icon-ordered-list::before{content:"\e242"}.tinymce-mobile-icon-font-size::before{content:"\e245"}.tinymce-mobile-icon-underline::before{content:"\e249"}.tinymce-mobile-icon-link::before{content:"\e157"}.tinymce-mobile-icon-unlink::before{content:"\eca2"}.tinymce-mobile-icon-color::before{content:"\e891"}.tinymce-mobile-icon-previous::before{content:"\e314"}.tinymce-mobile-icon-next::before{content:"\e315"}.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content:"\e264"}.tinymce-mobile-icon-undo::before{content:"\e166"}.tinymce-mobile-icon-redo::before{content:"\e15a"}.tinymce-mobile-icon-removeformat::before{content:"\e239"}.tinymce-mobile-icon-small-font::before{content:"\e906"}.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content:"\e5ca"}.tinymce-mobile-icon-small-heading::before{content:"small"}.tinymce-mobile-icon-large-heading::before{content:"large"}.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family:sans-serif;font-size:80%}.tinymce-mobile-mask-edit-icon::before{content:"\e254"}.tinymce-mobile-icon-back::before{content:"\e5c4"}.tinymce-mobile-icon-heading::before{content:"Headings";font-family:sans-serif;font-size:80%;font-weight:700}.tinymce-mobile-icon-h1::before{content:"H1";font-weight:700}.tinymce-mobile-icon-h2::before{content:"H2";font-weight:700}.tinymce-mobile-icon-h3::before{content:"H3";font-weight:700}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{align-items:center;display:flex;justify-content:center;background:rgba(51,51,51,.5);height:100%;position:absolute;top:0;width:100%}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{align-items:center;border-radius:50%;display:flex;flex-direction:column;font-family:sans-serif;font-size:1em;justify-content:space-between}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items:center;display:flex;justify-content:center;flex-direction:column;font-size:1em}@media only screen and (min-device-width:700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size:1.2em}}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em;background-color:#fff;color:#207ab7}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{content:"\e900";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index:2}.tinymce-mobile-android-container.tinymce-mobile-android-maximized{background:#fff;border:none;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0}.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position:relative}.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display:flex;flex-grow:1}.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display:flex!important;flex-grow:1;height:auto!important}.tinymce-mobile-android-scroll-reload{overflow:hidden}:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top:23px}.tinymce-mobile-toolstrip{background:#fff;display:flex;flex:0 0 auto;z-index:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid #ccc;display:flex;flex:1;height:2.5em;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex-shrink:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background:#f44336}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{align-items:center;display:flex;height:80%;margin-left:2px;margin-right:2px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{background:#c8cbcf;color:#ccc}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{background:#207ab7;color:#eceff1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex:1;padding-bottom:.4em;padding-top:.4em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{display:flex;min-height:1.5em;overflow:hidden;padding-left:0;padding-right:0;position:relative;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display:flex;height:100%;transition:left cubic-bezier(.4,0,1,1) .15s;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display:flex;flex:0 0 auto;justify-content:space-between;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family:Sans-serif}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{display:flex;flex-grow:1;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{-ms-grid-row-align:center;align-self:center;background:inherit;border:none;border-radius:50%;color:#888;font-size:.6em;font-weight:700;height:100%;padding-right:2px;position:absolute;right:0}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display:none}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{align-items:center;display:flex;font-weight:700;height:100%;padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility:hidden}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{color:#ccc;font-size:10px;line-height:10px;margin:0 2px;padding-top:3px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color:#c8cbcf}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-left:.5em;margin-right:.9em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-left:.9em;margin-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{display:flex;flex:1;margin-left:0;margin-right:0;padding:.28em 0;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{background:#ccc;display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-left:2em;padding-right:2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{background:linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{background:#000;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{background:#fff;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{align-items:center;background-clip:padding-box;background-color:#455a64;border:.5em solid rgba(136,136,136,0);border-radius:3em;bottom:0;color:#fff;display:flex;height:.5em;justify-content:center;left:-10px;margin:auto;position:absolute;top:0;transition:border 120ms cubic-bezier(.39,.58,.57,1);width:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border:.5em solid rgba(136,136,136,.39)}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction:column;justify-content:center}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{background:#fff;border:none;border-radius:0;color:#455a64;flex-grow:1;font-size:.85em;padding-bottom:.1em;padding-left:5px;padding-top:.1em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color:#888}.tinymce-mobile-dropup{background:#fff;display:flex;overflow:hidden;width:100%}.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition:height .3s ease-out}.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition:height .3s ease-in}.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow:0}.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow:1}.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}@media only screen and (orientation:landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:150px}}.tinymce-mobile-styles-menu{font-family:sans-serif;outline:4px solid #000;overflow:hidden;position:relative;width:100%}.tinymce-mobile-styles-menu [role=menu]{display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.tinymce-mobile-styles-menu [role=menu].transitioning{transition:transform .5s ease-in-out}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{border-bottom:1px solid #ddd;color:#455a64;cursor:pointer;display:flex;padding:1em 1em;position:relative}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{color:#455a64;content:"\e314";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{color:#455a64;content:"\e315";font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{align-items:center;background:#fff;border-top:#455a64;color:#455a64;display:flex;min-height:2.5em;padding-left:1em;padding-right:1em}.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform:translate(-100%)}.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform:translate(0)}.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform:translate(100%)}@font-face{font-family:tinymce-mobile;font-style:normal;font-weight:400;src:url(fonts/tinymce-mobile.woff?8x92w3) format('woff')}@media (min-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:25px}}@media (max-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:18px}}.tinymce-mobile-icon{font-family:tinymce-mobile,sans-serif}.mixin-flex-and-centre{align-items:center;display:flex;justify-content:center}.mixin-flex-bar{align-items:center;display:flex;height:100%}.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{background-color:#fff;width:100%}.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{background-color:#207ab7;border-radius:50%;bottom:1em;color:#fff;font-size:1em;height:2.1em;position:fixed;right:2em;width:2.1em;align-items:center;display:flex;justify-content:center}@media only screen and (min-device-width:700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size:1.2em}}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height:300px;overflow:hidden}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height:100%}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display:none}input[type=file]::-webkit-file-upload-button{display:none}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom:50%}}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css
new file mode 100644
index 0000000..d2adc4d
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen,
+.tox-shadowhost.tox-fullscreen {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1200;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css
new file mode 100644
index 0000000..a0893b9
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.css b/z_ele/public/tinymce/skins/ui/oxide/content.css
new file mode 100644
index 0000000..2ac0cca
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.css
@@ -0,0 +1,732 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 1298;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.inline.css b/z_ele/public/tinymce/skins/ui/oxide/content.inline.css
new file mode 100644
index 0000000..8e7521d
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.inline.css
@@ -0,0 +1,726 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 1298;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.inline.min.css b/z_ele/public/tinymce/skins/ui/oxide/content.inline.min.css
new file mode 100644
index 0000000..b4ab9a3
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.inline.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:1298}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.min.css b/z_ele/public/tinymce/skins/ui/oxide/content.min.css
new file mode 100644
index 0000000..844858d
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:1298}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.mobile.css b/z_ele/public/tinymce/skins/ui/oxide/content.mobile.css
new file mode 100644
index 0000000..4bdb8ba
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.mobile.css
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
+  /* Note: this file is used inside the content, so isn't part of theming */
+  background-color: green;
+  display: inline-block;
+  opacity: 0.5;
+  position: absolute;
+}
+body {
+  -webkit-text-size-adjust: none;
+}
+body img {
+  /* this is related to the content margin */
+  max-width: 96vw;
+}
+body table img {
+  max-width: 95%;
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/content.mobile.min.css b/z_ele/public/tinymce/skins/ui/oxide/content.mobile.min.css
new file mode 100644
index 0000000..35f7dc0
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/content.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff b/z_ele/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/z_ele/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff differ
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.css b/z_ele/public/tinymce/skins/ui/oxide/skin.css
new file mode 100644
index 0000000..49a82fa
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.css
@@ -0,0 +1,3047 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox {
+  box-shadow: none;
+  box-sizing: content-box;
+  color: #222f3e;
+  cursor: auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: initial;
+  white-space: normal;
+}
+.tox *:not(svg):not(rect) {
+  box-sizing: inherit;
+  color: inherit;
+  cursor: inherit;
+  direction: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-tap-highlight-color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow: inherit;
+  text-transform: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+.tox *:not(svg):not(rect) {
+  /* stylelint-disable-line no-duplicate-selectors */
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  float: none;
+  height: auto;
+  margin: 0;
+  max-width: none;
+  outline: 0;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+.tox:not([dir=rtl]) {
+  direction: ltr;
+  text-align: left;
+}
+.tox[dir=rtl] {
+  direction: rtl;
+  text-align: right;
+}
+.tox-tinymce {
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  position: relative;
+  visibility: inherit !important;
+}
+.tox-tinymce-inline {
+  border: none;
+  box-shadow: none;
+}
+.tox-tinymce-inline .tox-editor-header {
+  background-color: transparent;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  box-shadow: none;
+}
+.tox-tinymce-aux {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  z-index: 1300;
+}
+.tox-tinymce *:focus,
+.tox-tinymce-aux *:focus {
+  outline: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+.tox[dir=rtl] .tox-icon--flip svg {
+  transform: rotateY(180deg);
+}
+.tox .accessibility-issue__header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description {
+  align-items: stretch;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .accessibility-issue__description > div {
+  padding-bottom: 4px;
+}
+.tox .accessibility-issue__description > div > div {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description > *:last-child:not(:only-child) {
+  border-color: #cccccc;
+  border-style: solid;
+}
+.tox .accessibility-issue__repair {
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description {
+  background-color: rgba(32, 122, 183, 0.1);
+  border-color: rgba(32, 122, 183, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child {
+  border-color: rgba(32, 122, 183, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 {
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg {
+  fill: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon {
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description {
+  background-color: rgba(255, 165, 0, 0.1);
+  border-color: rgba(255, 165, 0, 0.5);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child {
+  border-color: rgba(255, 165, 0, 0.5);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg {
+  fill: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description {
+  background-color: rgba(204, 0, 0, 0.1);
+  border-color: rgba(204, 0, 0, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child {
+  border-color: rgba(204, 0, 0, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg {
+  fill: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description {
+  background-color: rgba(120, 171, 70, 0.1);
+  border-color: rgba(120, 171, 70, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child {
+  border-color: rgba(120, 171, 70, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg {
+  fill: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue__header h1,
+.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
+  margin-top: 0;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-left: auto;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 4px 4px 8px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-left-width: 1px;
+  padding-left: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-right: auto;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 8px 4px 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-right-width: 1px;
+  padding-right: 4px;
+}
+.tox .tox-anchorbar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-bar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-button {
+  background-color: #207ab7;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #207ab7;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  line-height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 4px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-button[disabled] {
+  background-color: #207ab7;
+  background-image: none;
+  border-color: #207ab7;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-button:focus:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:hover:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:active:not(:disabled) {
+  background-color: #185d8c;
+  background-image: none;
+  border-color: #185d8c;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary {
+  background-color: #f0f0f0;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #f0f0f0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  color: #222f3e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  outline: none;
+  padding: 4px 16px;
+  text-decoration: none;
+  text-transform: none;
+}
+.tox .tox-button--secondary[disabled] {
+  background-color: #f0f0f0;
+  background-image: none;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-button--secondary:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary:active:not(:disabled) {
+  background-color: #d6d6d6;
+  background-image: none;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--icon,
+.tox .tox-button.tox-button--icon,
+.tox .tox-button.tox-button--secondary.tox-button--icon {
+  padding: 4px;
+}
+.tox .tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
+  display: block;
+  fill: currentColor;
+}
+.tox .tox-button-link {
+  background: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.tox .tox-button-link--sm {
+  font-size: 14px;
+}
+.tox .tox-button--naked {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #222f3e;
+}
+.tox .tox-button--naked[disabled] {
+  background-color: #f0f0f0;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-button--naked:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked:active:not(:disabled) {
+  background-color: #d6d6d6;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked .tox-icon svg {
+  fill: currentColor;
+}
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+  color: #222f3e;
+}
+.tox .tox-checkbox {
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  height: 36px;
+  min-width: 36px;
+}
+.tox .tox-checkbox__input {
+  /* Hide from view but visible to screen readers */
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+.tox .tox-checkbox__icons {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px transparent;
+  box-sizing: content-box;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  padding: calc(4px - 1px);
+  width: 24px;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: block;
+  fill: rgba(34, 47, 62, 0.3);
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox--disabled {
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #207ab7;
+  padding: calc(4px - 1px);
+}
+.tox:not([dir=rtl]) .tox-checkbox__label {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-checkbox__input {
+  left: -10000px;
+}
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__label {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__input {
+  right: -10000px;
+}
+.tox[dir=rtl] .tox-bar .tox-checkbox {
+  margin-right: 4px;
+}
+.tox {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox .tox-collection--toolbar .tox-collection__group {
+  display: flex;
+  padding: 0;
+}
+.tox .tox-collection--grid .tox-collection__group {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 208px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+}
+.tox .tox-collection--list .tox-collection__group {
+  border-bottom-width: 0;
+  border-color: #cccccc;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-style: solid;
+  border-top-width: 1px;
+  padding: 4px 0;
+}
+.tox .tox-collection--list .tox-collection__group:first-child {
+  border-top-width: 0;
+}
+.tox .tox-collection__group-heading {
+  background-color: #e6e6e6;
+  color: rgba(34, 47, 62, 0.7);
+  cursor: default;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 4px;
+  margin-top: -4px;
+  padding: 4px 8px;
+  text-transform: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection__item {
+  align-items: center;
+  color: #222f3e;
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection--list .tox-collection__item {
+  padding: 4px 8px;
+}
+.tox .tox-collection--toolbar .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--grid .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--list .tox-collection__item--enabled {
+  background-color: #fff;
+  color: #222f3e;
+}
+.tox .tox-collection--list .tox-collection__item--active {
+  background-color: #dee0e2;
+}
+.tox .tox-collection--toolbar .tox-collection__item--enabled {
+  background-color: #c8cbcf;
+  color: #222f3e;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active {
+  background-color: #dee0e2;
+}
+.tox .tox-collection--grid .tox-collection__item--enabled {
+  background-color: #c8cbcf;
+  color: #222f3e;
+}
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: #dee0e2;
+  color: #222f3e;
+}
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #222f3e;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #222f3e;
+}
+.tox .tox-collection__item-icon,
+.tox .tox-collection__item-checkmark {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+.tox .tox-collection__item-icon svg,
+.tox .tox-collection__item-checkmark svg {
+  fill: currentColor;
+}
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
+  height: 48px;
+  width: 48px;
+}
+.tox .tox-collection__item-label {
+  color: currentColor;
+  display: inline-block;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  text-transform: none;
+  word-break: break-all;
+}
+.tox .tox-collection__item-accessory {
+  color: rgba(34, 47, 62, 0.7);
+  display: inline-block;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  text-transform: none;
+}
+.tox .tox-collection__item-caret {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
+.tox .tox-collection__item-caret::after {
+  content: '';
+  font-size: 0;
+  min-height: inherit;
+}
+.tox .tox-collection__item-caret svg {
+  fill: #222f3e;
+}
+.tox .tox-collection__item--state-disabled {
+  background-color: transparent;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
+  display: none;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
+  display: none;
+}
+.tox .tox-collection--horizontal {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  margin-bottom: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+.tox .tox-collection--horizontal .tox-collection__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item {
+  height: 34px;
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item-label {
+  white-space: nowrap;
+}
+.tox .tox-collection--horizontal .tox-collection__item-caret {
+  margin-left: 4px;
+}
+.tox .tox-collection__item-container {
+  display: flex;
+}
+.tox .tox-collection__item-container--row {
+  align-items: center;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-left {
+  margin-right: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top {
+  align-items: flex-start;
+  margin-bottom: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle {
+  align-items: center;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom {
+  align-items: flex-end;
+  margin-top: auto;
+}
+.tox .tox-collection__item-container--column {
+  -ms-grid-row-align: center;
+      align-self: center;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-left {
+  align-items: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-right {
+  align-items: flex-end;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top {
+  align-self: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom {
+  align-self: flex-end;
+}
+.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-right: 1px solid #cccccc;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-collection__item-accessory {
+  margin-left: 16px;
+  text-align: right;
+}
+.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
+  margin-left: 16px;
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-left: 1px solid #cccccc;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-collection__item-accessory {
+  margin-right: 16px;
+  text-align: left;
+}
+.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
+  margin-right: 16px;
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
+  margin-right: 4px;
+}
+.tox .tox-color-picker-container {
+  display: flex;
+  flex-direction: row;
+  height: 225px;
+  margin: 0;
+}
+.tox .tox-sv-palette {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+.tox .tox-sv-palette-spectrum {
+  height: 100%;
+}
+.tox .tox-sv-palette,
+.tox .tox-sv-palette-spectrum {
+  width: 225px;
+}
+.tox .tox-sv-palette-thumb {
+  background: none;
+  border: 1px solid black;
+  border-radius: 50%;
+  box-sizing: content-box;
+  height: 12px;
+  position: absolute;
+  width: 12px;
+}
+.tox .tox-sv-palette-inner-thumb {
+  border: 1px solid white;
+  border-radius: 50%;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox .tox-hue-slider {
+  box-sizing: border-box;
+  height: 100%;
+  width: 25px;
+}
+.tox .tox-hue-slider-spectrum {
+  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
+  height: 100%;
+  width: 100%;
+}
+.tox .tox-hue-slider,
+.tox .tox-hue-slider-spectrum {
+  width: 20px;
+}
+.tox .tox-hue-slider-thumb {
+  background: white;
+  border: 1px solid black;
+  box-sizing: content-box;
+  height: 4px;
+  width: 100%;
+}
+.tox .tox-rgb-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tox .tox-rgb-form div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: inherit;
+}
+.tox .tox-rgb-form input {
+  width: 6em;
+}
+.tox .tox-rgb-form input.tox-invalid {
+  /* Need !important to override Chrome's focus styling unfortunately */
+  border: 1px solid red !important;
+}
+.tox .tox-rgb-form .tox-rgba-preview {
+  border: 1px solid black;
+  flex-grow: 2;
+  margin-bottom: 0;
+}
+.tox:not([dir=rtl]) .tox-sv-palette {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider-thumb {
+  margin-left: -1px;
+}
+.tox:not([dir=rtl]) .tox-rgb-form label {
+  margin-right: 0.5em;
+}
+.tox[dir=rtl] .tox-sv-palette {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider-thumb {
+  margin-right: -1px;
+}
+.tox[dir=rtl] .tox-rgb-form label {
+  margin-left: 0.5em;
+}
+.tox .tox-toolbar .tox-swatches,
+.tox .tox-toolbar__primary .tox-swatches,
+.tox .tox-toolbar__overflow .tox-swatches {
+  margin: 2px 0 3px 4px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
+  border: 0;
+  margin: -4px 0;
+}
+.tox .tox-swatches__row {
+  display: flex;
+}
+.tox .tox-swatch {
+  height: 30px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  width: 30px;
+}
+.tox .tox-swatch:hover,
+.tox .tox-swatch:focus {
+  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
+  transform: scale(0.8);
+}
+.tox .tox-swatch--remove {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-swatch--remove svg path {
+  stroke: #e74c3c;
+}
+.tox .tox-swatches__picker-btn {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 30px;
+}
+.tox .tox-swatches__picker-btn svg {
+  height: 24px;
+  width: 24px;
+}
+.tox .tox-swatches__picker-btn:hover {
+  background: #dee0e2;
+}
+.tox:not([dir=rtl]) .tox-swatches__picker-btn {
+  margin-left: auto;
+}
+.tox[dir=rtl] .tox-swatches__picker-btn {
+  margin-right: auto;
+}
+.tox .tox-comment-thread {
+  background: #fff;
+  position: relative;
+}
+.tox .tox-comment-thread > *:not(:first-child) {
+  margin-top: 8px;
+}
+.tox .tox-comment {
+  background: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
+  padding: 8px 8px 16px 8px;
+  position: relative;
+}
+.tox .tox-comment__header {
+  align-items: center;
+  color: #222f3e;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .tox-comment__date {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 12px;
+}
+.tox .tox-comment__body {
+  color: #222f3e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin-top: 8px;
+  position: relative;
+  text-transform: initial;
+}
+.tox .tox-comment__body textarea {
+  resize: none;
+  white-space: normal;
+  width: 100%;
+}
+.tox .tox-comment__expander {
+  padding-top: 8px;
+}
+.tox .tox-comment__expander p {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 14px;
+  font-style: normal;
+}
+.tox .tox-comment__body p {
+  margin: 0;
+}
+.tox .tox-comment__buttonspacing {
+  padding-top: 16px;
+  text-align: center;
+}
+.tox .tox-comment-thread__overlay::after {
+  background: #fff;
+  bottom: 0;
+  content: "";
+  display: flex;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__reply {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.tox .tox-comment__reply > *:first-child {
+  margin-bottom: 8px;
+  width: 100%;
+}
+.tox .tox-comment__edit {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+.tox .tox-comment__gradient::after {
+  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 5em;
+  margin-top: -40px;
+  position: absolute;
+  width: 100%;
+}
+.tox .tox-comment__overlay {
+  background: #fff;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__loading-text {
+  align-items: center;
+  color: #222f3e;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.tox .tox-comment__loading-text > div {
+  padding-bottom: 16px;
+}
+.tox .tox-comment__overlaytext {
+  bottom: 0;
+  flex-direction: column;
+  font-size: 14px;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+.tox .tox-comment__overlaytext p {
+  background-color: #fff;
+  box-shadow: 0 0 8px 8px #fff;
+  color: #222f3e;
+  text-align: center;
+}
+.tox .tox-comment__overlaytext div:nth-of-type(2) {
+  font-size: 0.8em;
+}
+.tox .tox-comment__busy-spinner {
+  align-items: center;
+  background-color: #fff;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+}
+.tox .tox-comment__scroll {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  overflow: auto;
+}
+.tox .tox-conversations {
+  margin: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__edit {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__edit > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-comment__edit {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child,
+.tox[dir=rtl] .tox-comment__edit > *:last-child,
+.tox[dir=rtl] .tox-comment__reply > *:last-child {
+  margin-right: 8px;
+}
+.tox .tox-user {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-user__avatar svg {
+  fill: rgba(34, 47, 62, 0.7);
+}
+.tox .tox-user__name {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.tox:not([dir=rtl]) .tox-user__avatar svg {
+  margin-right: 8px;
+}
+.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar svg {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
+  margin-right: 8px;
+}
+.tox .tox-dialog-wrap {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1100;
+}
+.tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.tox .tox-dialog-wrap__backdrop--opaque {
+  background-color: #fff;
+}
+.tox .tox-dialog {
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 16px 16px -10px rgba(34, 47, 62, 0.15), 0 0 40px 1px rgba(34, 47, 62, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 95vw;
+  z-index: 2;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog {
+    align-self: flex-start;
+    margin: 8px auto;
+    width: calc(100vw - 16px);
+  }
+}
+.tox .tox-dialog-inline {
+  z-index: 1100;
+}
+.tox .tox-dialog__header {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: none;
+  color: #222f3e;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 8px 16px 0 16px;
+  position: relative;
+}
+.tox .tox-dialog__header .tox-button {
+  z-index: 1;
+}
+.tox .tox-dialog__draghandle {
+  cursor: grab;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tox .tox-dialog__draghandle:active {
+  cursor: grabbing;
+}
+.tox .tox-dialog__dismiss {
+  margin-left: auto;
+}
+.tox .tox-dialog__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  text-transform: none;
+}
+.tox .tox-dialog__body {
+  color: #222f3e;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  min-width: 0;
+  text-align: left;
+  text-transform: none;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body {
+    flex-direction: column;
+  }
+}
+.tox .tox-dialog__body-nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
+    flex-direction: row;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+}
+.tox .tox-dialog__body-nav-item {
+  border-bottom: 2px solid transparent;
+  color: rgba(34, 47, 62, 0.7);
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 8px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tox .tox-dialog__body-nav-item:focus {
+  background-color: rgba(32, 122, 183, 0.1);
+}
+.tox .tox-dialog__body-nav-item--active {
+  border-bottom: 2px solid #207ab7;
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+  max-height: 650px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px 16px;
+}
+.tox .tox-dialog__body-content > * {
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content > *:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content a {
+  color: #207ab7;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:hover,
+.tox .tox-dialog__body-content a:focus {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:active {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content svg {
+  fill: #222f3e;
+}
+.tox .tox-dialog__body-content ul {
+  display: block;
+  list-style-type: disc;
+  margin-bottom: 16px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content .tox-form__group h1 {
+  color: #222f3e;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group h2 {
+  color: #222f3e;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group p {
+  margin-bottom: 16px;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:first-child,
+.tox .tox-dialog__body-content .tox-form__group h2:first-child,
+.tox .tox-dialog__body-content .tox-form__group p:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:last-child,
+.tox .tox-dialog__body-content .tox-form__group h2:last-child,
+.tox .tox-dialog__body-content .tox-form__group p:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:only-child,
+.tox .tox-dialog__body-content .tox-form__group h2:only-child,
+.tox .tox-dialog__body-content .tox-form__group p:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog--width-lg {
+  height: 650px;
+  max-width: 1200px;
+}
+.tox .tox-dialog--width-md {
+  max-width: 800px;
+}
+.tox .tox-dialog--width-md .tox-dialog__body-content {
+  overflow: auto;
+}
+.tox .tox-dialog__body-content--centered {
+  text-align: center;
+}
+.tox .tox-dialog__footer {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #cccccc;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+.tox .tox-dialog__footer-start,
+.tox .tox-dialog__footer-end {
+  display: flex;
+}
+.tox .tox-dialog__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.tox .tox-dialog__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tox .tox-dialog__table thead th {
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+.tox .tox-dialog__table tbody tr {
+  border-bottom: 1px solid #cccccc;
+}
+.tox .tox-dialog__table tbody tr:last-child {
+  border-bottom: none;
+}
+.tox .tox-dialog__table td {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.tox .tox-dialog__popups {
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+}
+.tox .tox-dialog__body-iframe {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox .tox-dialog-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox .tox-dialog-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox .tox-dialog-dock-transition {
+  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
+}
+.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
+  transition-delay: 0s;
+}
+.tox.tox-platform-ie {
+  /* IE11 CSS styles go here */
+}
+.tox.tox-platform-ie .tox-dialog-wrap {
+  position: -ms-device-fixed;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-dialog__body {
+  text-align: right;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
+    margin-left: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
+    margin-right: 8px;
+  }
+}
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-right: 8px;
+}
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox .tox-dropzone-container {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dropzone {
+  align-items: center;
+  background: #fff;
+  border: 2px dashed #cccccc;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-height: 100px;
+  padding: 10px;
+}
+.tox .tox-dropzone p {
+  color: rgba(34, 47, 62, 0.7);
+  margin: 0 0 16px 0;
+}
+.tox .tox-edit-area {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  overflow: hidden;
+  position: relative;
+}
+.tox .tox-edit-area__iframe {
+  background-color: #fff;
+  border: 0;
+  box-sizing: border-box;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tox.tox-inline-edit-area {
+  border: 1px dotted #cccccc;
+}
+.tox .tox-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tox .tox-editor-header {
+  z-index: 1;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: none;
+  transition: box-shadow 0.5s;
+}
+.tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+.tox.tox-tinymce-inline .tox-editor-header {
+  margin-bottom: -1px;
+}
+.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+  background-color: transparent;
+  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
+}
+.tox-editor-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox-editor-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox-editor-dock-transition {
+  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.tox-editor-dock-transition.tox-editor-dock-fadein {
+  transition-delay: 0s;
+}
+.tox .tox-control-wrap {
+  flex: 1;
+  position: relative;
+}
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
+  display: none;
+}
+.tox .tox-control-wrap svg {
+  display: block;
+}
+.tox .tox-control-wrap__status-icon-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-control-wrap__status-icon-invalid svg {
+  fill: #c00;
+}
+.tox .tox-control-wrap__status-icon-unknown svg {
+  fill: orange;
+}
+.tox .tox-control-wrap__status-icon-valid svg {
+  fill: green;
+}
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
+  padding-right: 32px;
+}
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
+  right: 4px;
+}
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
+  padding-left: 32px;
+}
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
+  left: 4px;
+}
+.tox .tox-autocompleter {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-menu {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-autocompleter-highlight {
+  font-weight: bold;
+}
+.tox .tox-color-input {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+.tox .tox-color-input .tox-textfield {
+  z-index: -1;
+}
+.tox .tox-color-input span {
+  border-color: rgba(34, 47, 62, 0.2);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  height: 24px;
+  position: absolute;
+  top: 6px;
+  width: 24px;
+}
+.tox .tox-color-input span:hover:not([aria-disabled=true]),
+.tox .tox-color-input span:focus:not([aria-disabled=true]) {
+  border-color: #207ab7;
+  cursor: pointer;
+}
+.tox .tox-color-input span::before {
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  background-size: 12px 12px;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  box-sizing: border-box;
+  content: '';
+  height: 24px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+  z-index: -1;
+}
+.tox .tox-color-input span[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tox:not([dir=rtl]) .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
+  padding-left: 36px;
+}
+.tox:not([dir=rtl]) .tox-color-input span {
+  left: 6px;
+}
+.tox[dir="rtl"] .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir="rtl"] .tox-color-input .tox-textfield {
+  padding-right: 36px;
+}
+.tox[dir="rtl"] .tox-color-input span {
+  right: 6px;
+}
+.tox .tox-label,
+.tox .tox-toolbar-label {
+  color: rgba(34, 47, 62, 0.7);
+  display: block;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  padding: 0 8px 0 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-toolbar-label {
+  padding: 0 8px;
+}
+.tox[dir=rtl] .tox-label {
+  padding: 0 0 0 8px;
+}
+.tox .tox-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group {
+  box-sizing: border-box;
+  margin-bottom: 4px;
+}
+.tox .tox-form-group--maximize {
+  flex: 1;
+}
+.tox .tox-form__group--error {
+  color: #c00;
+}
+.tox .tox-form__group--collection {
+  display: flex;
+}
+.tox .tox-form__grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.tox .tox-form__grid--2col > .tox-form__group {
+  width: calc(50% - (8px / 2));
+}
+.tox .tox-form__grid--3col > .tox-form__group {
+  width: calc(100% / 3 - (8px / 2));
+}
+.tox .tox-form__grid--4col > .tox-form__group {
+  width: calc(25% - (8px / 2));
+}
+.tox .tox-form__controls-h-stack {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--inline {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--stretched {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-textarea {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,
+.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
+  display: none;
+}
+.tox .tox-textfield,
+.tox .tox-toolbar-textfield,
+.tox .tox-listboxfield .tox-listbox--select,
+.tox .tox-textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #222f3e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-textfield[disabled],
+.tox .tox-textarea[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-textfield:focus,
+.tox .tox-listboxfield .tox-listbox--select:focus,
+.tox .tox-textarea:focus {
+  background-color: #fff;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-toolbar-textfield {
+  border-width: 0;
+  margin-bottom: 3px;
+  margin-top: 2px;
+  max-width: 250px;
+}
+.tox .tox-naked-btn {
+  background-color: transparent;
+  border: 0;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #207ab7;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.tox .tox-naked-btn svg {
+  display: block;
+  fill: #222f3e;
+}
+.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-toolbar-textfield + * {
+  margin-right: 4px;
+}
+.tox .tox-listboxfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-listboxfield .tox-listbox--select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-listbox__select-label {
+  cursor: default;
+  flex: 1;
+  margin: 0 4px;
+}
+.tox .tox-listbox__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-listbox__select-chevron svg {
+  fill: #222f3e;
+}
+.tox .tox-listboxfield .tox-listbox--select {
+  align-items: center;
+  display: flex;
+}
+.tox:not([dir=rtl]) .tox-listboxfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-listboxfield svg {
+  left: 8px;
+}
+.tox .tox-selectfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-selectfield select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #222f3e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-selectfield select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-selectfield select::-ms-expand {
+  display: none;
+}
+.tox .tox-selectfield select:focus {
+  background-color: #fff;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-selectfield svg {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox:not([dir=rtl]) .tox-selectfield select[size="0"],
+.tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
+  padding-right: 24px;
+}
+.tox:not([dir=rtl]) .tox-selectfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-selectfield select[size="0"],
+.tox[dir=rtl] .tox-selectfield select[size="1"] {
+  padding-left: 24px;
+}
+.tox[dir=rtl] .tox-selectfield svg {
+  left: 8px;
+}
+.tox .tox-textarea {
+  -webkit-appearance: textarea;
+     -moz-appearance: textarea;
+          appearance: textarea;
+  white-space: pre-wrap;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen,
+.tox-shadowhost.tox-fullscreen {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1200;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
+.tox .tox-help__more-link {
+  list-style: none;
+  margin-top: 1em;
+}
+.tox .tox-image-tools {
+  width: 100%;
+}
+.tox .tox-image-tools__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-image-tools__image {
+  background-color: #666;
+  height: 380px;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.tox .tox-image-tools__image,
+.tox .tox-image-tools__image + .tox-image-tools__toolbar {
+  margin-top: 8px;
+}
+.tox .tox-image-tools__image-bg {
+  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
+}
+.tox .tox-image-tools__toolbar > .tox-spacer {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-croprect-block {
+  background: black;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  position: absolute;
+  zoom: 1;
+}
+.tox .tox-croprect-handle {
+  border: 2px solid white;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tox .tox-croprect-handle-move {
+  border: 0;
+  cursor: move;
+  position: absolute;
+}
+.tox .tox-croprect-handle-nw {
+  border-width: 2px 0 0 2px;
+  cursor: nw-resize;
+  left: 100px;
+  margin: -2px 0 0 -2px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-ne {
+  border-width: 2px 2px 0 0;
+  cursor: ne-resize;
+  left: 200px;
+  margin: -2px 0 0 -20px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-sw {
+  border-width: 0 0 2px 2px;
+  cursor: sw-resize;
+  left: 100px;
+  margin: -20px 2px 0 -2px;
+  top: 200px;
+}
+.tox .tox-croprect-handle-se {
+  border-width: 0 2px 2px 0;
+  cursor: se-resize;
+  left: 200px;
+  margin: -20px 0 0 -20px;
+  top: 200px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-left: 32px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-left: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-right: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-right: 32px;
+}
+.tox .tox-insert-table-picker {
+  display: flex;
+  flex-wrap: wrap;
+  width: 170px;
+}
+.tox .tox-insert-table-picker > div {
+  border-color: #cccccc;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  height: 17px;
+  width: 17px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
+  margin: -4px 0;
+}
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: rgba(32, 122, 183, 0.5);
+}
+.tox .tox-insert-table-picker__label {
+  color: rgba(34, 47, 62, 0.7);
+  display: block;
+  font-size: 14px;
+  padding: 4px;
+  text-align: center;
+  width: 100%;
+}
+.tox:not([dir=rtl]) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
+  border-right: 0;
+}
+.tox[dir=rtl] {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
+  border-right: 0;
+}
+.tox {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.tox .tox-menu {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  z-index: 1150;
+}
+.tox .tox-menu.tox-collection.tox-collection--list {
+  padding: 0;
+}
+.tox .tox-menu.tox-collection.tox-collection--toolbar {
+  padding: 4px;
+}
+.tox .tox-menu.tox-collection.tox-collection--grid {
+  padding: 4px;
+}
+.tox .tox-menu__label h1,
+.tox .tox-menu__label h2,
+.tox .tox-menu__label h3,
+.tox .tox-menu__label h4,
+.tox .tox-menu__label h5,
+.tox .tox-menu__label h6,
+.tox .tox-menu__label p,
+.tox .tox-menu__label blockquote,
+.tox .tox-menu__label code {
+  margin: 0;
+}
+.tox .tox-menubar {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 4px 0 4px;
+}
+.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
+  border-top: 1px solid #cccccc;
+}
+/* Deprecated. Remove in next major release */
+.tox .tox-mbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 4px;
+  text-transform: none;
+  width: auto;
+}
+.tox .tox-mbtn[disabled] {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-mbtn:focus:not(:disabled) {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn--active {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
+  cursor: not-allowed;
+}
+.tox .tox-mbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  display: none;
+}
+.tox .tox-notification {
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: -ms-grid;
+  display: grid;
+  font-size: 14px;
+  font-weight: normal;
+  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  margin-top: 4px;
+  opacity: 0;
+  padding: 4px;
+  transition: transform 100ms ease-in, opacity 150ms ease-in;
+}
+.tox .tox-notification p {
+  font-size: 14px;
+  font-weight: normal;
+}
+.tox .tox-notification a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-notification--in {
+  opacity: 1;
+}
+.tox .tox-notification--success {
+  background-color: #e4eeda;
+  border-color: #d7e6c8;
+  color: #222f3e;
+}
+.tox .tox-notification--success p {
+  color: #222f3e;
+}
+.tox .tox-notification--success a {
+  color: #547831;
+}
+.tox .tox-notification--success svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--error {
+  background-color: #f8dede;
+  border-color: #f2bfbf;
+  color: #222f3e;
+}
+.tox .tox-notification--error p {
+  color: #222f3e;
+}
+.tox .tox-notification--error a {
+  color: #c00;
+}
+.tox .tox-notification--error svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
+  background-color: #fffaea;
+  border-color: #ffe89d;
+  color: #222f3e;
+}
+.tox .tox-notification--warn p,
+.tox .tox-notification--warning p {
+  color: #222f3e;
+}
+.tox .tox-notification--warn a,
+.tox .tox-notification--warning a {
+  color: #222f3e;
+}
+.tox .tox-notification--warn svg,
+.tox .tox-notification--warning svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--info {
+  background-color: #d9edf7;
+  border-color: #779ecb;
+  color: #222f3e;
+}
+.tox .tox-notification--info p {
+  color: #222f3e;
+}
+.tox .tox-notification--info a {
+  color: #222f3e;
+}
+.tox .tox-notification--info svg {
+  fill: #222f3e;
+}
+.tox .tox-notification__body {
+  -ms-grid-row-align: center;
+      align-self: center;
+  color: #222f3e;
+  font-size: 14px;
+  -ms-grid-column-span: 1;
+  grid-column-end: 3;
+  -ms-grid-column: 2;
+      grid-column-start: 2;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  text-align: center;
+  white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
+}
+.tox .tox-notification__body > * {
+  margin: 0;
+}
+.tox .tox-notification__body > * + * {
+  margin-top: 1rem;
+}
+.tox .tox-notification__icon {
+  -ms-grid-row-align: center;
+      align-self: center;
+  -ms-grid-column-span: 1;
+  grid-column-end: 2;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification__icon svg {
+  display: block;
+}
+.tox .tox-notification__dismiss {
+  -ms-grid-row-align: start;
+      align-self: start;
+  -ms-grid-column-span: 1;
+  grid-column-end: 4;
+  -ms-grid-column: 3;
+      grid-column-start: 3;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification .tox-progress-bar {
+  -ms-grid-column-span: 3;
+  grid-column-end: 4;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 3;
+  -ms-grid-row: 2;
+      grid-row-start: 2;
+  -ms-grid-column-align: center;
+      justify-self: center;
+}
+.tox .tox-pop {
+  display: inline-block;
+  position: relative;
+}
+.tox .tox-pop--resizing {
+  transition: width 0.1s ease;
+}
+.tox .tox-pop--resizing .tox-toolbar,
+.tox .tox-pop--resizing .tox-toolbar__group {
+  flex-wrap: nowrap;
+}
+.tox .tox-pop--transition {
+  transition: 0.15s ease;
+  transition-property: left, right, top, bottom;
+}
+.tox .tox-pop--transition::before,
+.tox .tox-pop--transition::after {
+  transition: all 0.15s, visibility 0s, opacity 0.075s ease 0.075s;
+}
+.tox .tox-pop__dialog {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  min-width: 0;
+  overflow: hidden;
+}
+.tox .tox-pop__dialog > *:not(.tox-toolbar) {
+  margin: 4px 4px 4px 8px;
+}
+.tox .tox-pop__dialog .tox-toolbar {
+  background-color: transparent;
+  margin-bottom: -1px;
+}
+.tox .tox-pop::before,
+.tox .tox-pop::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  opacity: 1;
+  position: absolute;
+  width: 0;
+}
+.tox .tox-pop.tox-pop--inset::before,
+.tox .tox-pop.tox-pop--inset::after {
+  opacity: 0;
+  transition: all 0s 0.15s, visibility 0s, opacity 0.075s ease;
+}
+.tox .tox-pop.tox-pop--bottom::before,
+.tox .tox-pop.tox-pop--bottom::after {
+  left: 50%;
+  top: 100%;
+}
+.tox .tox-pop.tox-pop--bottom::after {
+  border-color: #fff transparent transparent transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: -1px;
+}
+.tox .tox-pop.tox-pop--bottom::before {
+  border-color: #cccccc transparent transparent transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--top::before,
+.tox .tox-pop.tox-pop--top::after {
+  left: 50%;
+  top: 0;
+  transform: translateY(-100%);
+}
+.tox .tox-pop.tox-pop--top::after {
+  border-color: transparent transparent #fff transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: 1px;
+}
+.tox .tox-pop.tox-pop--top::before {
+  border-color: transparent transparent #cccccc transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--left::before,
+.tox .tox-pop.tox-pop--left::after {
+  left: 0;
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--left::after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 8px;
+  margin-left: -15px;
+}
+.tox .tox-pop.tox-pop--left::before {
+  border-color: transparent #cccccc transparent transparent;
+  border-width: 10px;
+  margin-left: -19px;
+}
+.tox .tox-pop.tox-pop--right::before,
+.tox .tox-pop.tox-pop--right::after {
+  left: 100%;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--right::after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 8px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--right::before {
+  border-color: transparent transparent transparent #cccccc;
+  border-width: 10px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--align-left::before,
+.tox .tox-pop.tox-pop--align-left::after {
+  left: 20px;
+}
+.tox .tox-pop.tox-pop--align-right::before,
+.tox .tox-pop.tox-pop--align-right::after {
+  left: calc(100% - 20px);
+}
+.tox .tox-sidebar-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  min-height: 0;
+}
+.tox .tox-sidebar {
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.tox .tox-sidebar__slider {
+  display: flex;
+  overflow: hidden;
+}
+.tox .tox-sidebar__pane-container {
+  display: flex;
+}
+.tox .tox-sidebar__pane {
+  display: flex;
+}
+.tox .tox-sidebar--sliding-closed {
+  opacity: 0;
+}
+.tox .tox-sidebar--sliding-open {
+  opacity: 1;
+}
+.tox .tox-sidebar--sliding-growing,
+.tox .tox-sidebar--sliding-shrinking {
+  transition: width 0.5s ease, opacity 0.5s ease;
+}
+.tox .tox-selector {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox.tox-platform-touch .tox-selector {
+  height: 12px;
+  width: 12px;
+}
+.tox .tox-slider {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 24px;
+  justify-content: center;
+  position: relative;
+}
+.tox .tox-slider__rail {
+  background-color: transparent;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  height: 10px;
+  min-width: 120px;
+  width: 100%;
+}
+.tox .tox-slider__handle {
+  background-color: #207ab7;
+  border: 2px solid #185d8c;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 24px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 14px;
+}
+.tox .tox-source-code {
+  overflow: auto;
+}
+.tox .tox-spinner {
+  display: flex;
+}
+.tox .tox-spinner > div {
+  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
+  background-color: rgba(34, 47, 62, 0.7);
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+}
+.tox .tox-spinner > div:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.tox .tox-spinner > div:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes tam-bouncing-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-statusbar {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #cccccc;
+  color: rgba(34, 47, 62, 0.7);
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: normal;
+  height: 18px;
+  overflow: hidden;
+  padding: 0 8px;
+  position: relative;
+  text-transform: uppercase;
+}
+.tox .tox-statusbar__text-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.tox .tox-statusbar__path {
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__path > * {
+  display: inline;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__wordcount {
+  flex: 0 0 auto;
+  margin-left: 1ch;
+}
+.tox .tox-statusbar a,
+.tox .tox-statusbar__path-item,
+.tox .tox-statusbar__wordcount {
+  color: rgba(34, 47, 62, 0.7);
+  text-decoration: none;
+}
+.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-statusbar__resize-handle {
+  align-items: flex-end;
+  align-self: stretch;
+  cursor: nwse-resize;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: -8px;
+  padding-left: 1ch;
+}
+.tox .tox-statusbar__resize-handle svg {
+  display: block;
+  fill: rgba(34, 47, 62, 0.7);
+}
+.tox .tox-statusbar__resize-handle:focus svg {
+  background-color: #dee0e2;
+  border-radius: 1px;
+  box-shadow: 0 0 0 2px #dee0e2;
+}
+.tox:not([dir=rtl]) .tox-statusbar__path > * {
+  margin-right: 4px;
+}
+.tox:not([dir=rtl]) .tox-statusbar__branding {
+  margin-left: 1ch;
+}
+.tox[dir=rtl] .tox-statusbar {
+  flex-direction: row-reverse;
+}
+.tox[dir=rtl] .tox-statusbar__path > * {
+  margin-left: 4px;
+}
+.tox .tox-throbber {
+  z-index: 1299;
+}
+.tox .tox-throbber__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.tox .tox-tbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-transform: none;
+  width: 34px;
+}
+.tox .tox-tbtn svg {
+  display: block;
+  fill: #222f3e;
+}
+.tox .tox-tbtn.tox-tbtn-more {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: inherit;
+}
+.tox .tox-tbtn:focus {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+}
+.tox .tox-tbtn:hover {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn:hover svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn:active {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn:active svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn--disabled,
+.tox .tox-tbtn--disabled:hover,
+.tox .tox-tbtn:disabled,
+.tox .tox-tbtn:disabled:hover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-tbtn--disabled svg,
+.tox .tox-tbtn--disabled:hover svg,
+.tox .tox-tbtn:disabled svg,
+.tox .tox-tbtn:disabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-tbtn--enabled,
+.tox .tox-tbtn--enabled:hover {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn--enabled > *,
+.tox .tox-tbtn--enabled:hover > * {
+  transform: none;
+}
+.tox .tox-tbtn--enabled svg,
+.tox .tox-tbtn--enabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: #222f3e;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+  color: #222f3e;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn:active > * {
+  transform: none;
+}
+.tox .tox-tbtn--md {
+  height: 51px;
+  width: 51px;
+}
+.tox .tox-tbtn--lg {
+  flex-direction: column;
+  height: 68px;
+  width: 68px;
+}
+.tox .tox-tbtn--return {
+  -ms-grid-row-align: stretch;
+      align-self: stretch;
+  height: unset;
+  width: 16px;
+}
+.tox .tox-tbtn--labeled {
+  padding: 0 4px;
+  width: unset;
+}
+.tox .tox-tbtn__vlabel {
+  display: block;
+  font-size: 10px;
+  font-weight: normal;
+  letter-spacing: -0.025em;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+.tox .tox-tbtn--select {
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+  width: auto;
+}
+.tox .tox-tbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-tbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-tbtn__select-chevron svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 7em;
+}
+.tox .tox-split-button {
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: flex;
+  margin: 2px 0 3px 0;
+  overflow: hidden;
+}
+.tox .tox-split-button:hover {
+  box-shadow: 0 0 0 1px #dee0e2 inset;
+}
+.tox .tox-split-button:focus {
+  background: #dee0e2;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-split-button > * {
+  border-radius: 0;
+}
+.tox .tox-split-button__chevron {
+  width: 16px;
+}
+.tox .tox-split-button__chevron svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-split-button .tox-tbtn {
+  margin: 0;
+}
+.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
+  width: 30px;
+}
+.tox.tox-platform-touch .tox-split-button__chevron {
+  width: 20px;
+}
+.tox .tox-split-button.tox-tbtn--disabled:hover,
+.tox .tox-split-button.tox-tbtn--disabled:focus,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
+  background: transparent;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-toolbar-overlord {
+  background-color: #fff;
+}
+.tox .tox-toolbar,
+.tox .tox-toolbar__primary,
+.tox .tox-toolbar__overflow {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
+  height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  visibility: hidden;
+}
+.tox .tox-toolbar__overflow--growing {
+  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
+}
+.tox .tox-toolbar__overflow--shrinking {
+  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
+}
+.tox .tox-menubar + .tox-toolbar,
+.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
+  border-top: 1px solid #cccccc;
+  margin-top: -1px;
+}
+.tox .tox-toolbar--scrolling {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.tox .tox-pop .tox-toolbar {
+  border-width: 0;
+}
+.tox .tox-toolbar--no-divider {
+  background-image: none;
+}
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child,
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
+  border-top: 1px solid #cccccc;
+}
+.tox.tox-tinymce-aux .tox-toolbar__overflow {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.tox .tox-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0;
+  padding: 0 4px 0 4px;
+}
+.tox .tox-toolbar__group--pull-right {
+  margin-left: auto;
+}
+.tox .tox-toolbar--scrolling .tox-toolbar__group {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+  border-right: 1px solid #cccccc;
+}
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
+  border-left: 1px solid #cccccc;
+}
+.tox .tox-tooltip {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+}
+.tox .tox-tooltip__body {
+  background-color: #222f3e;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(34, 47, 62, 0.3);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 4px 8px;
+  text-transform: none;
+}
+.tox .tox-tooltip__arrow {
+  position: absolute;
+}
+.tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #222f3e;
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom: 8px solid #222f3e;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid #222f3e;
+  border-top: 8px solid transparent;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #222f3e;
+  border-top: 8px solid transparent;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-well {
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  padding: 8px;
+  width: 100%;
+}
+.tox .tox-well > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-well > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-well > *:only-child {
+  margin: 0;
+}
+.tox .tox-custom-editor {
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+/* stylelint-disable */
+.tox {
+  /* stylelint-enable */
+}
+.tox .tox-dialog-loading::before {
+  background-color: rgba(0, 0, 0, 0.5);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.tox .tox-tab {
+  cursor: pointer;
+}
+.tox .tox-dialog__content-js {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-content .tox-collection {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-image-tools-edit-panel {
+  height: 60px;
+}
+.tox .tox-image-tools__sidebar {
+  height: 60px;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.min.css b/z_ele/public/tinymce/skins/ui/oxide/skin.min.css
new file mode 100644
index 0000000..f570b8e
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{box-shadow:none;box-sizing:content-box;color:#222f3e;cursor:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:normal;-webkit-tap-highlight-color:transparent;text-decoration:none;text-shadow:none;text-transform:none;vertical-align:initial;white-space:normal}.tox :not(svg):not(rect){box-sizing:inherit;color:inherit;cursor:inherit;direction:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-tap-highlight-color:inherit;text-align:inherit;text-decoration:inherit;text-shadow:inherit;text-transform:inherit;vertical-align:inherit;white-space:inherit}.tox :not(svg):not(rect){background:0 0;border:0;box-shadow:none;float:none;height:auto;margin:0;max-width:none;outline:0;padding:0;position:static;width:auto}.tox:not([dir=rtl]){direction:ltr;text-align:left}.tox[dir=rtl]{direction:rtl;text-align:right}.tox-tinymce{border:1px solid #ccc;border-radius:0;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;overflow:hidden;position:relative;visibility:inherit!important}.tox-tinymce-inline{border:none;box-shadow:none}.tox-tinymce-inline .tox-editor-header{background-color:transparent;border:1px solid #ccc;border-radius:0;box-shadow:none}.tox-tinymce-aux{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;z-index:1300}.tox-tinymce :focus,.tox-tinymce-aux :focus{outline:0}button::-moz-focus-inner{border:0}.tox[dir=rtl] .tox-icon--flip svg{transform:rotateY(180deg)}.tox .accessibility-issue__header{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description{align-items:stretch;border:1px solid #ccc;border-radius:3px;display:flex;justify-content:space-between}.tox .accessibility-issue__description>div{padding-bottom:4px}.tox .accessibility-issue__description>div>div{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description>:last-child:not(:only-child){border-color:#ccc;border-style:solid}.tox .accessibility-issue__repair{margin-top:16px}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description{background-color:rgba(32,122,183,.1);border-color:rgba(32,122,183,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description>:last-child{border-color:rgba(32,122,183,.4)}.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2{color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg{fill:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon{color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description{background-color:rgba(255,165,0,.1);border-color:rgba(255,165,0,.5);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description>:last-child{border-color:rgba(255,165,0,.5)}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg{fill:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description{background-color:rgba(204,0,0,.1);border-color:rgba(204,0,0,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description>:last-child{border-color:rgba(204,0,0,.4)}.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg{fill:#c00}.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description{background-color:rgba(120,171,70,.1);border-color:rgba(120,171,70,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description>:last-child{border-color:rgba(120,171,70,.4)}.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg{fill:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue__header h1,.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2{margin-top:0}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-left:4px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-left:auto}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description{padding:4px 4px 4px 8px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description>:last-child{border-left-width:1px;padding-left:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-right:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-right:auto}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description{padding:4px 8px 4px 4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description>:last-child{border-right-width:1px;padding-right:4px}.tox .tox-anchorbar{display:flex;flex:0 0 auto}.tox .tox-bar{display:flex;flex:0 0 auto}.tox .tox-button{background-color:#207ab7;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#207ab7;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;outline:0;padding:4px 16px;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap}.tox .tox-button[disabled]{background-color:#207ab7;background-image:none;border-color:#207ab7;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-button:focus:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:hover:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:active:not(:disabled){background-color:#185d8c;background-image:none;border-color:#185d8c;box-shadow:none;color:#fff}.tox .tox-button--secondary{background-color:#f0f0f0;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;color:#222f3e;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;outline:0;padding:4px 16px;text-decoration:none;text-transform:none}.tox .tox-button--secondary[disabled]{background-color:#f0f0f0;background-image:none;border-color:#f0f0f0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-button--secondary:focus:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--secondary:hover:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--secondary:active:not(:disabled){background-color:#d6d6d6;background-image:none;border-color:#d6d6d6;box-shadow:none;color:#222f3e}.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding:4px}.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display:block;fill:currentColor}.tox .tox-button-link{background:0;border:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;white-space:nowrap}.tox .tox-button-link--sm{font-size:14px}.tox .tox-button--naked{background-color:transparent;border-color:transparent;box-shadow:unset;color:#222f3e}.tox .tox-button--naked[disabled]{background-color:#f0f0f0;border-color:#f0f0f0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-button--naked:hover:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--naked:focus:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--naked:active:not(:disabled){background-color:#d6d6d6;border-color:#d6d6d6;box-shadow:none;color:#222f3e}.tox .tox-button--naked .tox-icon svg{fill:currentColor}.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color:#222f3e}.tox .tox-checkbox{align-items:center;border-radius:3px;cursor:pointer;display:flex;height:36px;min-width:36px}.tox .tox-checkbox__input{height:1px;overflow:hidden;position:absolute;top:auto;width:1px}.tox .tox-checkbox__icons{align-items:center;border-radius:3px;box-shadow:0 0 0 2px transparent;box-sizing:content-box;display:flex;height:24px;justify-content:center;padding:calc(4px - 1px);width:24px}.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:block;fill:rgba(34,47,62,.3)}.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:none;fill:#207ab7}.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display:none;fill:#207ab7}.tox .tox-checkbox--disabled{color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg{fill:rgba(34,47,62,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{fill:rgba(34,47,62,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{fill:rgba(34,47,62,.5)}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display:block}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:block}.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{border-radius:3px;box-shadow:inset 0 0 0 1px #207ab7;padding:calc(4px - 1px)}.tox:not([dir=rtl]) .tox-checkbox__label{margin-left:4px}.tox:not([dir=rtl]) .tox-checkbox__input{left:-10000px}.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left:4px}.tox[dir=rtl] .tox-checkbox__label{margin-right:4px}.tox[dir=rtl] .tox-checkbox__input{right:-10000px}.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right:4px}.tox .tox-collection--toolbar .tox-collection__group{display:flex;padding:0}.tox .tox-collection--grid .tox-collection__group{display:flex;flex-wrap:wrap;max-height:208px;overflow-x:hidden;overflow-y:auto;padding:0}.tox .tox-collection--list .tox-collection__group{border-bottom-width:0;border-color:#ccc;border-left-width:0;border-right-width:0;border-style:solid;border-top-width:1px;padding:4px 0}.tox .tox-collection--list .tox-collection__group:first-child{border-top-width:0}.tox .tox-collection__group-heading{background-color:#e6e6e6;color:rgba(34,47,62,.7);cursor:default;font-size:12px;font-style:normal;font-weight:400;margin-bottom:4px;margin-top:-4px;padding:4px 8px;text-transform:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection__item{align-items:center;color:#222f3e;cursor:pointer;display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection--list .tox-collection__item{padding:4px 8px}.tox .tox-collection--toolbar .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--grid .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--list .tox-collection__item--enabled{background-color:#fff;color:#222f3e}.tox .tox-collection--list .tox-collection__item--active{background-color:#dee0e2}.tox .tox-collection--toolbar .tox-collection__item--enabled{background-color:#c8cbcf;color:#222f3e}.tox .tox-collection--toolbar .tox-collection__item--active{background-color:#dee0e2}.tox .tox-collection--grid .tox-collection__item--enabled{background-color:#c8cbcf;color:#222f3e}.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){background-color:#dee0e2;color:#222f3e}.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#222f3e}.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#222f3e}.tox .tox-collection__item-checkmark,.tox .tox-collection__item-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.tox .tox-collection__item-checkmark svg,.tox .tox-collection__item-icon svg{fill:currentColor}.tox .tox-collection--toolbar-lg .tox-collection__item-icon{height:48px;width:48px}.tox .tox-collection__item-label{color:currentColor;display:inline-block;flex:1;-ms-flex-preferred-size:auto;font-size:14px;font-style:normal;font-weight:400;line-height:24px;text-transform:none;word-break:break-all}.tox .tox-collection__item-accessory{color:rgba(34,47,62,.7);display:inline-block;font-size:14px;height:24px;line-height:24px;text-transform:none}.tox .tox-collection__item-caret{align-items:center;display:flex;min-height:24px}.tox .tox-collection__item-caret::after{content:'';font-size:0;min-height:inherit}.tox .tox-collection__item-caret svg{fill:#222f3e}.tox .tox-collection__item--state-disabled{background-color:transparent;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg{fill:rgba(34,47,62,.5)}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display:none}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory+.tox-collection__item-checkmark{display:none}.tox .tox-collection--horizontal{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:nowrap;margin-bottom:0;overflow-x:auto;padding:0}.tox .tox-collection--horizontal .tox-collection__group{align-items:center;display:flex;flex-wrap:nowrap;margin:0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item{height:34px;margin:2px 0 3px 0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item-label{white-space:nowrap}.tox .tox-collection--horizontal .tox-collection__item-caret{margin-left:4px}.tox .tox-collection__item-container{display:flex}.tox .tox-collection__item-container--row{align-items:center;flex:1 1 auto;flex-direction:row}.tox .tox-collection__item-container--row.tox-collection__item-container--align-left{margin-right:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--align-right{justify-content:flex-end;margin-left:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top{align-items:flex-start;margin-bottom:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle{align-items:center}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom{align-items:flex-end;margin-top:auto}.tox .tox-collection__item-container--column{-ms-grid-row-align:center;align-self:center;flex:1 1 auto;flex-direction:column}.tox .tox-collection__item-container--column.tox-collection__item-container--align-left{align-items:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--align-right{align-items:flex-end}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top{align-self:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle{-ms-grid-row-align:center;align-self:center}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom{align-self:flex-end}.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-right:1px solid #ccc}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left:8px}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-left:4px}.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left:16px;text-align:right}.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret{margin-left:16px}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-left:1px solid #ccc}.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right:8px}.tox[dir=rtl] .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-right:4px}.tox[dir=rtl] .tox-collection__item-accessory{margin-right:16px;text-align:left}.tox[dir=rtl] .tox-collection .tox-collection__item-caret{margin-right:16px;transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret{margin-right:4px}.tox .tox-color-picker-container{display:flex;flex-direction:row;height:225px;margin:0}.tox .tox-sv-palette{box-sizing:border-box;display:flex;height:100%}.tox .tox-sv-palette-spectrum{height:100%}.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width:225px}.tox .tox-sv-palette-thumb{background:0 0;border:1px solid #000;border-radius:50%;box-sizing:content-box;height:12px;position:absolute;width:12px}.tox .tox-sv-palette-inner-thumb{border:1px solid #fff;border-radius:50%;height:10px;position:absolute;width:10px}.tox .tox-hue-slider{box-sizing:border-box;height:100%;width:25px}.tox .tox-hue-slider-spectrum{background:linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);height:100%;width:100%}.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width:20px}.tox .tox-hue-slider-thumb{background:#fff;border:1px solid #000;box-sizing:content-box;height:4px;width:100%}.tox .tox-rgb-form{display:flex;flex-direction:column;justify-content:space-between}.tox .tox-rgb-form div{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px;width:inherit}.tox .tox-rgb-form input{width:6em}.tox .tox-rgb-form input.tox-invalid{border:1px solid red!important}.tox .tox-rgb-form .tox-rgba-preview{border:1px solid #000;flex-grow:2;margin-bottom:0}.tox:not([dir=rtl]) .tox-sv-palette{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left:-1px}.tox:not([dir=rtl]) .tox-rgb-form label{margin-right:.5em}.tox[dir=rtl] .tox-sv-palette{margin-left:15px}.tox[dir=rtl] .tox-hue-slider{margin-left:15px}.tox[dir=rtl] .tox-hue-slider-thumb{margin-right:-1px}.tox[dir=rtl] .tox-rgb-form label{margin-left:.5em}.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin:2px 0 3px 4px}.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{border:0;margin:-4px 0}.tox .tox-swatches__row{display:flex}.tox .tox-swatch{height:30px;transition:transform .15s,box-shadow .15s;width:30px}.tox .tox-swatch:focus,.tox .tox-swatch:hover{box-shadow:0 0 0 1px rgba(127,127,127,.3) inset;transform:scale(.8)}.tox .tox-swatch--remove{align-items:center;display:flex;justify-content:center}.tox .tox-swatch--remove svg path{stroke:#e74c3c}.tox .tox-swatches__picker-btn{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;outline:0;padding:0;width:30px}.tox .tox-swatches__picker-btn svg{height:24px;width:24px}.tox .tox-swatches__picker-btn:hover{background:#dee0e2}.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left:auto}.tox[dir=rtl] .tox-swatches__picker-btn{margin-right:auto}.tox .tox-comment-thread{background:#fff;position:relative}.tox .tox-comment-thread>:not(:first-child){margin-top:8px}.tox .tox-comment{background:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 4px 8px 0 rgba(34,47,62,.1);padding:8px 8px 16px 8px;position:relative}.tox .tox-comment__header{align-items:center;color:#222f3e;display:flex;justify-content:space-between}.tox .tox-comment__date{color:rgba(34,47,62,.7);font-size:12px}.tox .tox-comment__body{color:#222f3e;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;margin-top:8px;position:relative;text-transform:initial}.tox .tox-comment__body textarea{resize:none;white-space:normal;width:100%}.tox .tox-comment__expander{padding-top:8px}.tox .tox-comment__expander p{color:rgba(34,47,62,.7);font-size:14px;font-style:normal}.tox .tox-comment__body p{margin:0}.tox .tox-comment__buttonspacing{padding-top:16px;text-align:center}.tox .tox-comment-thread__overlay::after{background:#fff;bottom:0;content:"";display:flex;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:5}.tox .tox-comment__reply{display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.tox .tox-comment__reply>:first-child{margin-bottom:8px;width:100%}.tox .tox-comment__edit{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.tox .tox-comment__gradient::after{background:linear-gradient(rgba(255,255,255,0),#fff);bottom:0;content:"";display:block;height:5em;margin-top:-40px;position:absolute;width:100%}.tox .tox-comment__overlay{background:#fff;bottom:0;display:flex;flex-direction:column;flex-grow:1;left:0;opacity:.9;position:absolute;right:0;text-align:center;top:0;z-index:5}.tox .tox-comment__loading-text{align-items:center;color:#222f3e;display:flex;flex-direction:column;position:relative}.tox .tox-comment__loading-text>div{padding-bottom:16px}.tox .tox-comment__overlaytext{bottom:0;flex-direction:column;font-size:14px;left:0;padding:1em;position:absolute;right:0;top:0;z-index:10}.tox .tox-comment__overlaytext p{background-color:#fff;box-shadow:0 0 8px 8px #fff;color:#222f3e;text-align:center}.tox .tox-comment__overlaytext div:nth-of-type(2){font-size:.8em}.tox .tox-comment__busy-spinner{align-items:center;background-color:#fff;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}.tox .tox-comment__scroll{display:flex;flex-direction:column;flex-shrink:1;overflow:auto}.tox .tox-conversations{margin:8px}.tox:not([dir=rtl]) .tox-comment__edit{margin-left:8px}.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left:8px}.tox[dir=rtl] .tox-comment__edit{margin-right:8px}.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right:8px}.tox .tox-user{align-items:center;display:flex}.tox .tox-user__avatar svg{fill:rgba(34,47,62,.7)}.tox .tox-user__name{color:rgba(34,47,62,.7);font-size:12px;font-style:normal;font-weight:700;text-transform:uppercase}.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right:8px}.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left:8px}.tox[dir=rtl] .tox-user__avatar svg{margin-left:8px}.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right:8px}.tox .tox-dialog-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1100}.tox .tox-dialog-wrap__backdrop{background-color:rgba(255,255,255,.75);bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.tox .tox-dialog-wrap__backdrop--opaque{background-color:#fff}.tox .tox-dialog{background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 16px 16px -10px rgba(34,47,62,.15),0 0 40px 1px rgba(34,47,62,.15);display:flex;flex-direction:column;max-height:100%;max-width:480px;overflow:hidden;position:relative;width:95vw;z-index:2}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog{align-self:flex-start;margin:8px auto;width:calc(100vw - 16px)}}.tox .tox-dialog-inline{z-index:1100}.tox .tox-dialog__header{align-items:center;background-color:#fff;border-bottom:none;color:#222f3e;display:flex;font-size:16px;justify-content:space-between;padding:8px 16px 0 16px;position:relative}.tox .tox-dialog__header .tox-button{z-index:1}.tox .tox-dialog__draghandle{cursor:grab;height:100%;left:0;position:absolute;top:0;width:100%}.tox .tox-dialog__draghandle:active{cursor:grabbing}.tox .tox-dialog__dismiss{margin-left:auto}.tox .tox-dialog__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:1.3;margin:0;text-transform:none}.tox .tox-dialog__body{color:#222f3e;display:flex;flex:1;-ms-flex-preferred-size:auto;font-size:16px;font-style:normal;font-weight:400;line-height:1.3;min-width:0;text-align:left;text-transform:none}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body{flex-direction:column}}.tox .tox-dialog__body-nav{align-items:flex-start;display:flex;flex-direction:column;padding:16px 16px}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body-nav{flex-direction:row;-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:0}}.tox .tox-dialog__body-nav-item{border-bottom:2px solid transparent;color:rgba(34,47,62,.7);display:inline-block;font-size:14px;line-height:1.3;margin-bottom:8px;text-decoration:none;white-space:nowrap}.tox .tox-dialog__body-nav-item:focus{background-color:rgba(32,122,183,.1)}.tox .tox-dialog__body-nav-item--active{border-bottom:2px solid #207ab7;color:#207ab7}.tox .tox-dialog__body-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto;max-height:650px;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px 16px}.tox .tox-dialog__body-content>*{margin-bottom:0;margin-top:16px}.tox .tox-dialog__body-content>:first-child{margin-top:0}.tox .tox-dialog__body-content>:last-child{margin-bottom:0}.tox .tox-dialog__body-content>:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog__body-content a{color:#207ab7;cursor:pointer;text-decoration:none}.tox .tox-dialog__body-content a:focus,.tox .tox-dialog__body-content a:hover{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content a:active{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content svg{fill:#222f3e}.tox .tox-dialog__body-content ul{display:block;list-style-type:disc;margin-bottom:16px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.tox .tox-dialog__body-content .tox-form__group h1{color:#222f3e;font-size:20px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group h2{color:#222f3e;font-size:16px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group p{margin-bottom:16px}.tox .tox-dialog__body-content .tox-form__group h1:first-child,.tox .tox-dialog__body-content .tox-form__group h2:first-child,.tox .tox-dialog__body-content .tox-form__group p:first-child{margin-top:0}.tox .tox-dialog__body-content .tox-form__group h1:last-child,.tox .tox-dialog__body-content .tox-form__group h2:last-child,.tox .tox-dialog__body-content .tox-form__group p:last-child{margin-bottom:0}.tox .tox-dialog__body-content .tox-form__group h1:only-child,.tox .tox-dialog__body-content .tox-form__group h2:only-child,.tox .tox-dialog__body-content .tox-form__group p:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog--width-lg{height:650px;max-width:1200px}.tox .tox-dialog--width-md{max-width:800px}.tox .tox-dialog--width-md .tox-dialog__body-content{overflow:auto}.tox .tox-dialog__body-content--centered{text-align:center}.tox .tox-dialog__footer{align-items:center;background-color:#fff;border-top:1px solid #ccc;display:flex;justify-content:space-between;padding:8px 16px}.tox .tox-dialog__footer-end,.tox .tox-dialog__footer-start{display:flex}.tox .tox-dialog__busy-spinner{align-items:center;background-color:rgba(255,255,255,.75);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:3}.tox .tox-dialog__table{border-collapse:collapse;width:100%}.tox .tox-dialog__table thead th{font-weight:700;padding-bottom:8px}.tox .tox-dialog__table tbody tr{border-bottom:1px solid #ccc}.tox .tox-dialog__table tbody tr:last-child{border-bottom:none}.tox .tox-dialog__table td{padding-bottom:8px;padding-top:8px}.tox .tox-dialog__popups{position:absolute;width:100%;z-index:1100}.tox .tox-dialog__body-iframe{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox .tox-dialog-dock-fadeout{opacity:0;visibility:hidden}.tox .tox-dialog-dock-fadein{opacity:1;visibility:visible}.tox .tox-dialog-dock-transition{transition:visibility 0s linear .3s,opacity .3s ease}.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein{transition-delay:0s}.tox.tox-platform-ie .tox-dialog-wrap{position:-ms-device-fixed}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child){margin-left:8px}}.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left:8px}.tox[dir=rtl] .tox-dialog__body{text-align:right}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav{margin-left:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child){margin-right:8px}}.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right:8px}body.tox-dialog__disable-scroll{overflow:hidden}.tox .tox-dropzone-container{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dropzone{align-items:center;background:#fff;border:2px dashed #ccc;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;min-height:100px;padding:10px}.tox .tox-dropzone p{color:rgba(34,47,62,.7);margin:0 0 16px 0}.tox .tox-edit-area{display:flex;flex:1;-ms-flex-preferred-size:auto;overflow:hidden;position:relative}.tox .tox-edit-area__iframe{background-color:#fff;border:0;box-sizing:border-box;flex:1;-ms-flex-preferred-size:auto;height:100%;position:absolute;width:100%}.tox.tox-inline-edit-area{border:1px dotted #ccc}.tox .tox-editor-container{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.tox .tox-editor-header{z-index:1}.tox:not(.tox-tinymce-inline) .tox-editor-header{box-shadow:none;transition:box-shadow .5s}.tox.tox-tinymce--toolbar-bottom .tox-editor-header,.tox.tox-tinymce-inline .tox-editor-header{margin-bottom:-1px}.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header{background-color:transparent;box-shadow:0 4px 4px -3px rgba(0,0,0,.25)}.tox-editor-dock-fadeout{opacity:0;visibility:hidden}.tox-editor-dock-fadein{opacity:1;visibility:visible}.tox-editor-dock-transition{transition:visibility 0s linear .25s,opacity .25s ease}.tox-editor-dock-transition.tox-editor-dock-fadein{transition-delay:0s}.tox .tox-control-wrap{flex:1;position:relative}.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display:none}.tox .tox-control-wrap svg{display:block}.tox .tox-control-wrap__status-icon-wrap{position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-control-wrap__status-icon-invalid svg{fill:#c00}.tox .tox-control-wrap__status-icon-unknown svg{fill:orange}.tox .tox-control-wrap__status-icon-valid svg{fill:green}.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right:32px}.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right:4px}.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left:32px}.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left:4px}.tox .tox-autocompleter{max-width:25em}.tox .tox-autocompleter .tox-menu{max-width:25em}.tox .tox-autocompleter .tox-autocompleter-highlight{font-weight:700}.tox .tox-color-input{display:flex;position:relative;z-index:1}.tox .tox-color-input .tox-textfield{z-index:-1}.tox .tox-color-input span{border-color:rgba(34,47,62,.2);border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;height:24px;position:absolute;top:6px;width:24px}.tox .tox-color-input span:focus:not([aria-disabled=true]),.tox .tox-color-input span:hover:not([aria-disabled=true]){border-color:#207ab7;cursor:pointer}.tox .tox-color-input span::before{background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.25) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border:1px solid #fff;border-radius:3px;box-sizing:border-box;content:'';height:24px;left:-1px;position:absolute;top:-1px;width:24px;z-index:-1}.tox .tox-color-input span[aria-disabled=true]{cursor:not-allowed}.tox:not([dir=rtl]) .tox-color-input .tox-textfield{padding-left:36px}.tox:not([dir=rtl]) .tox-color-input span{left:6px}.tox[dir=rtl] .tox-color-input .tox-textfield{padding-right:36px}.tox[dir=rtl] .tox-color-input span{right:6px}.tox .tox-label,.tox .tox-toolbar-label{color:rgba(34,47,62,.7);display:block;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;padding:0 8px 0 0;text-transform:none;white-space:nowrap}.tox .tox-toolbar-label{padding:0 8px}.tox[dir=rtl] .tox-label{padding:0 0 0 8px}.tox .tox-form{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group{box-sizing:border-box;margin-bottom:4px}.tox .tox-form-group--maximize{flex:1}.tox .tox-form__group--error{color:#c00}.tox .tox-form__group--collection{display:flex}.tox .tox-form__grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.tox .tox-form__grid--2col>.tox-form__group{width:calc(50% - (8px / 2))}.tox .tox-form__grid--3col>.tox-form__group{width:calc(100% / 3 - (8px / 2))}.tox .tox-form__grid--4col>.tox-form__group{width:calc(25% - (8px / 2))}.tox .tox-form__controls-h-stack{align-items:center;display:flex}.tox .tox-form__group--inline{align-items:center;display:flex}.tox .tox-form__group--stretched{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-textarea{flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right:4px}.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display:none}.tox .tox-listboxfield .tox-listbox--select,.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#222f3e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-textarea[disabled],.tox .tox-textfield[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-listboxfield .tox-listbox--select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{background-color:#fff;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-toolbar-textfield{border-width:0;margin-bottom:3px;margin-top:2px;max-width:250px}.tox .tox-naked-btn{background-color:transparent;border:0;border-color:transparent;box-shadow:unset;color:#207ab7;cursor:pointer;display:block;margin:0;padding:0}.tox .tox-naked-btn svg{display:block;fill:#222f3e}.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left:4px}.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right:4px}.tox .tox-listboxfield{cursor:pointer;position:relative}.tox .tox-listboxfield .tox-listbox--select[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-listbox__select-label{cursor:default;flex:1;margin:0 4px}.tox .tox-listbox__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-listbox__select-chevron svg{fill:#222f3e}.tox .tox-listboxfield .tox-listbox--select{align-items:center;display:flex}.tox:not([dir=rtl]) .tox-listboxfield svg{right:8px}.tox[dir=rtl] .tox-listboxfield svg{left:8px}.tox .tox-selectfield{cursor:pointer;position:relative}.tox .tox-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#222f3e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-selectfield select[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-selectfield select::-ms-expand{display:none}.tox .tox-selectfield select:focus{background-color:#fff;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-selectfield svg{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tox:not([dir=rtl]) .tox-selectfield select[size="0"],.tox:not([dir=rtl]) .tox-selectfield select[size="1"]{padding-right:24px}.tox:not([dir=rtl]) .tox-selectfield svg{right:8px}.tox[dir=rtl] .tox-selectfield select[size="0"],.tox[dir=rtl] .tox-selectfield select[size="1"]{padding-left:24px}.tox[dir=rtl] .tox-selectfield svg{left:8px}.tox .tox-textarea{-webkit-appearance:textarea;-moz-appearance:textarea;appearance:textarea;white-space:pre-wrap}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}.tox .tox-help__more-link{list-style:none;margin-top:1em}.tox .tox-image-tools{width:100%}.tox .tox-image-tools__toolbar{align-items:center;display:flex;justify-content:center}.tox .tox-image-tools__image{background-color:#666;height:380px;overflow:auto;position:relative;width:100%}.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top:8px}.tox .tox-image-tools__image-bg{background:url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==)}.tox .tox-image-tools__toolbar>.tox-spacer{flex:1;-ms-flex-preferred-size:auto}.tox .tox-croprect-block{background:#000;opacity:.5;position:absolute;zoom:1}.tox .tox-croprect-handle{border:2px solid #fff;height:20px;left:0;position:absolute;top:0;width:20px}.tox .tox-croprect-handle-move{border:0;cursor:move;position:absolute}.tox .tox-croprect-handle-nw{border-width:2px 0 0 2px;cursor:nw-resize;left:100px;margin:-2px 0 0 -2px;top:100px}.tox .tox-croprect-handle-ne{border-width:2px 2px 0 0;cursor:ne-resize;left:200px;margin:-2px 0 0 -20px;top:100px}.tox .tox-croprect-handle-sw{border-width:0 0 2px 2px;cursor:sw-resize;left:100px;margin:-20px 2px 0 -2px;top:200px}.tox .tox-croprect-handle-se{border-width:0 2px 2px 0;cursor:se-resize;left:200px;margin:-20px 0 0 -20px;top:200px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left:8px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left:32px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right:8px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right:32px}.tox .tox-insert-table-picker{display:flex;flex-wrap:wrap;width:170px}.tox .tox-insert-table-picker>div{border-color:#ccc;border-style:solid;border-width:0 1px 1px 0;box-sizing:border-box;height:17px;width:17px}.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin:-4px 0}.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color:rgba(32,122,183,.5);border-color:rgba(32,122,183,.5)}.tox .tox-insert-table-picker__label{color:rgba(34,47,62,.7);display:block;font-size:14px;padding:4px;text-align:center;width:100%}.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right:0}.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right:0}.tox .tox-menu{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 4px 8px 0 rgba(34,47,62,.1);display:inline-block;overflow:hidden;vertical-align:top;z-index:1150}.tox .tox-menu.tox-collection.tox-collection--list{padding:0}.tox .tox-menu.tox-collection.tox-collection--toolbar{padding:4px}.tox .tox-menu.tox-collection.tox-collection--grid{padding:4px}.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin:0}.tox .tox-menubar{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 4px 0 4px}.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar{border-top:1px solid #ccc}.tox .tox-mbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#222f3e;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0 4px;text-transform:none;width:auto}.tox .tox-mbtn[disabled]{background-color:transparent;border:0;box-shadow:none;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-mbtn:focus:not(:disabled){background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn--active{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor:not-allowed}.tox .tox-mbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px;display:none}.tox .tox-notification{border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;display:-ms-grid;display:grid;font-size:14px;font-weight:400;-ms-grid-columns:minmax(40px,1fr) auto minmax(40px,1fr);grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);margin-top:4px;opacity:0;padding:4px;transition:transform .1s ease-in,opacity 150ms ease-in}.tox .tox-notification p{font-size:14px;font-weight:400}.tox .tox-notification a{cursor:pointer;text-decoration:underline}.tox .tox-notification--in{opacity:1}.tox .tox-notification--success{background-color:#e4eeda;border-color:#d7e6c8;color:#222f3e}.tox .tox-notification--success p{color:#222f3e}.tox .tox-notification--success a{color:#547831}.tox .tox-notification--success svg{fill:#222f3e}.tox .tox-notification--error{background-color:#f8dede;border-color:#f2bfbf;color:#222f3e}.tox .tox-notification--error p{color:#222f3e}.tox .tox-notification--error a{color:#c00}.tox .tox-notification--error svg{fill:#222f3e}.tox .tox-notification--warn,.tox .tox-notification--warning{background-color:#fffaea;border-color:#ffe89d;color:#222f3e}.tox .tox-notification--warn p,.tox .tox-notification--warning p{color:#222f3e}.tox .tox-notification--warn a,.tox .tox-notification--warning a{color:#222f3e}.tox .tox-notification--warn svg,.tox .tox-notification--warning svg{fill:#222f3e}.tox .tox-notification--info{background-color:#d9edf7;border-color:#779ecb;color:#222f3e}.tox .tox-notification--info p{color:#222f3e}.tox .tox-notification--info a{color:#222f3e}.tox .tox-notification--info svg{fill:#222f3e}.tox .tox-notification__body{-ms-grid-row-align:center;align-self:center;color:#222f3e;font-size:14px;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;text-align:center;white-space:normal;word-break:break-all;word-break:break-word}.tox .tox-notification__body>*{margin:0}.tox .tox-notification__body>*+*{margin-top:1rem}.tox .tox-notification__icon{-ms-grid-row-align:center;align-self:center;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification__icon svg{display:block}.tox .tox-notification__dismiss{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification .tox-progress-bar{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2;-ms-grid-column-align:center;justify-self:center}.tox .tox-pop{display:inline-block;position:relative}.tox .tox-pop--resizing{transition:width .1s ease}.tox .tox-pop--resizing .tox-toolbar,.tox .tox-pop--resizing .tox-toolbar__group{flex-wrap:nowrap}.tox .tox-pop--transition{transition:.15s ease;transition-property:left,right,top,bottom}.tox .tox-pop--transition::after,.tox .tox-pop--transition::before{transition:all .15s,visibility 0s,opacity 75ms ease 75ms}.tox .tox-pop__dialog{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);min-width:0;overflow:hidden}.tox .tox-pop__dialog>:not(.tox-toolbar){margin:4px 4px 4px 8px}.tox .tox-pop__dialog .tox-toolbar{background-color:transparent;margin-bottom:-1px}.tox .tox-pop::after,.tox .tox-pop::before{border-style:solid;content:'';display:block;height:0;opacity:1;position:absolute;width:0}.tox .tox-pop.tox-pop--inset::after,.tox .tox-pop.tox-pop--inset::before{opacity:0;transition:all 0s .15s,visibility 0s,opacity 75ms ease}.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{left:50%;top:100%}.tox .tox-pop.tox-pop--bottom::after{border-color:#fff transparent transparent transparent;border-width:8px;margin-left:-8px;margin-top:-1px}.tox .tox-pop.tox-pop--bottom::before{border-color:#ccc transparent transparent transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{left:50%;top:0;transform:translateY(-100%)}.tox .tox-pop.tox-pop--top::after{border-color:transparent transparent #fff transparent;border-width:8px;margin-left:-8px;margin-top:1px}.tox .tox-pop.tox-pop--top::before{border-color:transparent transparent #ccc transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{left:0;top:calc(50% - 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--left::after{border-color:transparent #fff transparent transparent;border-width:8px;margin-left:-15px}.tox .tox-pop.tox-pop--left::before{border-color:transparent #ccc transparent transparent;border-width:10px;margin-left:-19px}.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{left:100%;top:calc(50% + 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--right::after{border-color:transparent transparent transparent #fff;border-width:8px;margin-left:-1px}.tox .tox-pop.tox-pop--right::before{border-color:transparent transparent transparent #ccc;border-width:10px;margin-left:-1px}.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left:20px}.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left:calc(100% - 20px)}.tox .tox-sidebar-wrap{display:flex;flex-direction:row;flex-grow:1;-ms-flex-preferred-size:0;min-height:0}.tox .tox-sidebar{background-color:#fff;display:flex;flex-direction:row;justify-content:flex-end}.tox .tox-sidebar__slider{display:flex;overflow:hidden}.tox .tox-sidebar__pane-container{display:flex}.tox .tox-sidebar__pane{display:flex}.tox .tox-sidebar--sliding-closed{opacity:0}.tox .tox-sidebar--sliding-open{opacity:1}.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition:width .5s ease,opacity .5s ease}.tox .tox-selector{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;display:inline-block;height:10px;position:absolute;width:10px}.tox.tox-platform-touch .tox-selector{height:12px;width:12px}.tox .tox-slider{align-items:center;display:flex;flex:1;-ms-flex-preferred-size:auto;height:24px;justify-content:center;position:relative}.tox .tox-slider__rail{background-color:transparent;border:1px solid #ccc;border-radius:3px;height:10px;min-width:120px;width:100%}.tox .tox-slider__handle{background-color:#207ab7;border:2px solid #185d8c;border-radius:3px;box-shadow:none;height:24px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:14px}.tox .tox-source-code{overflow:auto}.tox .tox-spinner{display:flex}.tox .tox-spinner>div{animation:tam-bouncing-dots 1.5s ease-in-out 0s infinite both;background-color:rgba(34,47,62,.7);border-radius:100%;height:8px;width:8px}.tox .tox-spinner>div:nth-child(1){animation-delay:-.32s}.tox .tox-spinner>div:nth-child(2){animation-delay:-.16s}@keyframes tam-bouncing-dots{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right:4px}.tox .tox-statusbar{align-items:center;background-color:#fff;border-top:1px solid #ccc;color:rgba(34,47,62,.7);display:flex;flex:0 0 auto;font-size:12px;font-weight:400;height:18px;overflow:hidden;padding:0 8px;position:relative;text-transform:uppercase}.tox .tox-statusbar__text-container{display:flex;flex:1 1 auto;justify-content:flex-end;overflow:hidden}.tox .tox-statusbar__path{display:flex;flex:1 1 auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tox .tox-statusbar__path>*{display:inline;white-space:nowrap}.tox .tox-statusbar__wordcount{flex:0 0 auto;margin-left:1ch}.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount{color:rgba(34,47,62,.7);text-decoration:none}.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]){cursor:pointer;text-decoration:underline}.tox .tox-statusbar__resize-handle{align-items:flex-end;align-self:stretch;cursor:nwse-resize;display:flex;flex:0 0 auto;justify-content:flex-end;margin-left:auto;margin-right:-8px;padding-left:1ch}.tox .tox-statusbar__resize-handle svg{display:block;fill:rgba(34,47,62,.7)}.tox .tox-statusbar__resize-handle:focus svg{background-color:#dee0e2;border-radius:1px;box-shadow:0 0 0 2px #dee0e2}.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right:4px}.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left:1ch}.tox[dir=rtl] .tox-statusbar{flex-direction:row-reverse}.tox[dir=rtl] .tox-statusbar__path>*{margin-left:4px}.tox .tox-throbber{z-index:1299}.tox .tox-throbber__busy-spinner{align-items:center;background-color:rgba(255,255,255,.6);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.tox .tox-tbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#222f3e;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0;text-transform:none;width:34px}.tox .tox-tbtn svg{display:block;fill:#222f3e}.tox .tox-tbtn.tox-tbtn-more{padding-left:5px;padding-right:5px;width:inherit}.tox .tox-tbtn:focus{background:#dee0e2;border:0;box-shadow:none}.tox .tox-tbtn:hover{background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn:hover svg{fill:#222f3e}.tox .tox-tbtn:active{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn:active svg{fill:#222f3e}.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{background:0 0;border:0;box-shadow:none;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill:rgba(34,47,62,.5)}.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn--enabled:hover>*,.tox .tox-tbtn--enabled>*{transform:none}.tox .tox-tbtn--enabled svg,.tox .tox-tbtn--enabled:hover svg{fill:#222f3e}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled){color:#222f3e}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg{fill:#222f3e}.tox .tox-tbtn:active>*{transform:none}.tox .tox-tbtn--md{height:51px;width:51px}.tox .tox-tbtn--lg{flex-direction:column;height:68px;width:68px}.tox .tox-tbtn--return{-ms-grid-row-align:stretch;align-self:stretch;height:unset;width:16px}.tox .tox-tbtn--labeled{padding:0 4px;width:unset}.tox .tox-tbtn__vlabel{display:block;font-size:10px;font-weight:400;letter-spacing:-.025em;margin-bottom:4px;white-space:nowrap}.tox .tox-tbtn--select{margin:2px 0 3px 0;padding:0 4px;width:auto}.tox .tox-tbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-tbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-tbtn__select-chevron svg{fill:rgba(34,47,62,.5)}.tox .tox-tbtn--bespoke .tox-tbtn__select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:7em}.tox .tox-split-button{border:0;border-radius:3px;box-sizing:border-box;display:flex;margin:2px 0 3px 0;overflow:hidden}.tox .tox-split-button:hover{box-shadow:0 0 0 1px #dee0e2 inset}.tox .tox-split-button:focus{background:#dee0e2;box-shadow:none;color:#222f3e}.tox .tox-split-button>*{border-radius:0}.tox .tox-split-button__chevron{width:16px}.tox .tox-split-button__chevron svg{fill:rgba(34,47,62,.5)}.tox .tox-split-button .tox-tbtn{margin:0}.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child{width:30px}.tox.tox-platform-touch .tox-split-button__chevron{width:20px}.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{background:0 0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-toolbar-overlord{background-color:#fff}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 0}.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height:0;opacity:0;padding-bottom:0;padding-top:0;visibility:hidden}.tox .tox-toolbar__overflow--growing{transition:height .3s ease,opacity .2s linear .1s}.tox .tox-toolbar__overflow--shrinking{transition:opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s}.tox .tox-menubar+.tox-toolbar,.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary{border-top:1px solid #ccc;margin-top:-1px}.tox .tox-toolbar--scrolling{flex-wrap:nowrap;overflow-x:auto}.tox .tox-pop .tox-toolbar{border-width:0}.tox .tox-toolbar--no-divider{background-image:none}.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary,.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child{border-top:1px solid #ccc}.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}.tox .tox-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;margin:0 0;padding:0 4px 0 4px}.tox .tox-toolbar__group--pull-right{margin-left:auto}.tox .tox-toolbar--scrolling .tox-toolbar__group{flex-shrink:0;flex-wrap:nowrap}.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right:1px solid #ccc}.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left:1px solid #ccc}.tox .tox-tooltip{display:inline-block;padding:8px;position:relative}.tox .tox-tooltip__body{background-color:#222f3e;border-radius:3px;box-shadow:0 2px 4px rgba(34,47,62,.3);color:rgba(255,255,255,.75);font-size:14px;font-style:normal;font-weight:400;padding:4px 8px;text-transform:none}.tox .tox-tooltip__arrow{position:absolute}.tox .tox-tooltip--down .tox-tooltip__arrow{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #222f3e;bottom:0;left:50%;position:absolute;transform:translateX(-50%)}.tox .tox-tooltip--up .tox-tooltip__arrow{border-bottom:8px solid #222f3e;border-left:8px solid transparent;border-right:8px solid transparent;left:50%;position:absolute;top:0;transform:translateX(-50%)}.tox .tox-tooltip--right .tox-tooltip__arrow{border-bottom:8px solid transparent;border-left:8px solid #222f3e;border-top:8px solid transparent;position:absolute;right:0;top:50%;transform:translateY(-50%)}.tox .tox-tooltip--left .tox-tooltip__arrow{border-bottom:8px solid transparent;border-right:8px solid #222f3e;border-top:8px solid transparent;left:0;position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-well{border:1px solid #ccc;border-radius:3px;padding:8px;width:100%}.tox .tox-well>:first-child{margin-top:0}.tox .tox-well>:last-child{margin-bottom:0}.tox .tox-well>:only-child{margin:0}.tox .tox-custom-editor{border:1px solid #ccc;border-radius:3px;display:flex;flex:1;position:relative}.tox .tox-dialog-loading::before{background-color:rgba(0,0,0,.5);content:"";height:100%;position:absolute;width:100%;z-index:1000}.tox .tox-tab{cursor:pointer}.tox .tox-dialog__content-js{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-content .tox-collection{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-image-tools-edit-panel{height:60px}.tox .tox-image-tools__sidebar{height:60px}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.css b/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.css
new file mode 100644
index 0000000..875721a
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.css
@@ -0,0 +1,673 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+/* RESET all the things! */
+.tinymce-mobile-outer-container {
+  all: initial;
+  display: block;
+}
+.tinymce-mobile-outer-container * {
+  border: 0;
+  box-sizing: initial;
+  cursor: inherit;
+  float: none;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* TBIO-3691, stop the gray flicker on touch. */
+  text-shadow: none;
+  white-space: nowrap;
+}
+.tinymce-mobile-icon-arrow-back::before {
+  content: "\e5cd";
+}
+.tinymce-mobile-icon-image::before {
+  content: "\e412";
+}
+.tinymce-mobile-icon-cancel-circle::before {
+  content: "\e5c9";
+}
+.tinymce-mobile-icon-full-dot::before {
+  content: "\e061";
+}
+.tinymce-mobile-icon-align-center::before {
+  content: "\e234";
+}
+.tinymce-mobile-icon-align-left::before {
+  content: "\e236";
+}
+.tinymce-mobile-icon-align-right::before {
+  content: "\e237";
+}
+.tinymce-mobile-icon-bold::before {
+  content: "\e238";
+}
+.tinymce-mobile-icon-italic::before {
+  content: "\e23f";
+}
+.tinymce-mobile-icon-unordered-list::before {
+  content: "\e241";
+}
+.tinymce-mobile-icon-ordered-list::before {
+  content: "\e242";
+}
+.tinymce-mobile-icon-font-size::before {
+  content: "\e245";
+}
+.tinymce-mobile-icon-underline::before {
+  content: "\e249";
+}
+.tinymce-mobile-icon-link::before {
+  content: "\e157";
+}
+.tinymce-mobile-icon-unlink::before {
+  content: "\eca2";
+}
+.tinymce-mobile-icon-color::before {
+  content: "\e891";
+}
+.tinymce-mobile-icon-previous::before {
+  content: "\e314";
+}
+.tinymce-mobile-icon-next::before {
+  content: "\e315";
+}
+.tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-icon-style-formats::before {
+  content: "\e264";
+}
+.tinymce-mobile-icon-undo::before {
+  content: "\e166";
+}
+.tinymce-mobile-icon-redo::before {
+  content: "\e15a";
+}
+.tinymce-mobile-icon-removeformat::before {
+  content: "\e239";
+}
+.tinymce-mobile-icon-small-font::before {
+  content: "\e906";
+}
+.tinymce-mobile-icon-readonly-back::before,
+.tinymce-mobile-format-matches::after {
+  content: "\e5ca";
+}
+.tinymce-mobile-icon-small-heading::before {
+  content: "small";
+}
+.tinymce-mobile-icon-large-heading::before {
+  content: "large";
+}
+.tinymce-mobile-icon-small-heading::before,
+.tinymce-mobile-icon-large-heading::before {
+  font-family: sans-serif;
+  font-size: 80%;
+}
+.tinymce-mobile-mask-edit-icon::before {
+  content: "\e254";
+}
+.tinymce-mobile-icon-back::before {
+  content: "\e5c4";
+}
+.tinymce-mobile-icon-heading::before {
+  /* TODO: Translate */
+  content: "Headings";
+  font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h1::before {
+  content: "H1";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h2::before {
+  content: "H2";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h3::before {
+  content: "H3";
+  font-weight: bold;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: rgba(51, 51, 51, 0.5);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-size: 1em;
+  justify-content: space-between;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1em;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: white;
+  color: #207ab7;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
+  content: "\e900";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
+  z-index: 2;
+}
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
+  background: #ffffff;
+  border: none;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
+  position: relative;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
+  display: flex;
+  flex-grow: 1;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
+  display: flex !important;
+  flex-grow: 1;
+  height: auto !important;
+}
+.tinymce-mobile-android-scroll-reload {
+  overflow: hidden;
+}
+:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
+  margin-top: 23px;
+}
+.tinymce-mobile-toolstrip {
+  background: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  z-index: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex: 1;
+  height: 2.5em;
+  width: 100%;
+  /* Make it no larger than the toolstrip, so that it needs to scroll */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex-shrink: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
+  background: #f44336;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
+  flex-grow: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
+  align-items: center;
+  display: flex;
+  height: 80%;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
+  background: #c8cbcf;
+  color: #cccccc;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
+  background: #207ab7;
+  color: #eceff1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
+  /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
+  /* For widgets like the colour picker, use the whole height */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
+  display: flex;
+  min-height: 1.5em;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
+  display: flex;
+  height: 100%;
+  transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
+  font-family: Sans-serif;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
+  -ms-grid-row-align: center;
+      align-self: center;
+  background: inherit;
+  border: none;
+  border-radius: 50%;
+  color: #888;
+  font-size: 0.6em;
+  font-weight: bold;
+  height: 100%;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
+  display: none;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
+  visibility: hidden;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
+  color: #cccccc;
+  font-size: 10px;
+  line-height: 10px;
+  margin: 0 2px;
+  padding-top: 3px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
+  color: #c8cbcf;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
+  margin-left: 0.5em;
+  margin-right: 0.9em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
+  margin-left: 0.9em;
+  margin-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
+  display: flex;
+  flex: 1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.28em 0;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
+  background: #cccccc;
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
+  background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
+  /* Not part of theming */
+  background: black;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
+  /* Not part of theming */
+  background: white;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
+  /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
+     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
+     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
+     * this approach.
+    */
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #455a64;
+  border: 0.5em solid rgba(136, 136, 136, 0);
+  border-radius: 3em;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  height: 0.5em;
+  justify-content: center;
+  left: -10px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
+  width: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
+  border: 0.5em solid rgba(136, 136, 136, 0.39);
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
+  flex-direction: column;
+  justify-content: center;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
+  background: #ffffff;
+  border: none;
+  border-radius: 0;
+  color: #455a64;
+  flex-grow: 1;
+  font-size: 0.85em;
+  padding-bottom: 0.1em;
+  padding-left: 5px;
+  padding-top: 0.1em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+/* dropup */
+.tinymce-mobile-dropup {
+  background: white;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
+  transition: height 0.3s ease-out;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
+  transition: height 0.3s ease-in;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
+  flex-grow: 0;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
+  flex-grow: 1;
+}
+/* TODO min-height for device size and orientation */
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+  min-height: 200px;
+}
+@media only screen and (orientation: landscape) {
+  .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 200px;
+  }
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 150px;
+  }
+}
+/* styles menu */
+.tinymce-mobile-styles-menu {
+  font-family: sans-serif;
+  outline: 4px solid black;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"].transitioning {
+  transition: transform 0.5s ease-in-out;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
+  border-bottom: 1px solid #ddd;
+  color: #455a64;
+  cursor: pointer;
+  display: flex;
+  padding: 1em 1em;
+  position: relative;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
+  color: #455a64;
+  content: "\e314";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
+  color: #455a64;
+  content: "\e315";
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
+  align-items: center;
+  background: #fff;
+  border-top: #455a64;
+  color: #455a64;
+  display: flex;
+  min-height: 2.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
+  transform: translate(-100%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
+  transform: translate(0%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
+  transform: translate(100%);
+}
+@font-face {
+  font-family: 'tinymce-mobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
+}
+@media (min-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 25px;
+  }
+}
+@media (max-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 18px;
+  }
+}
+.tinymce-mobile-icon {
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.mixin-flex-and-centre {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mixin-flex-bar {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
+  background-color: #fff;
+  width: 100%;
+}
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+  /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
+  background-color: #207ab7;
+  border-radius: 50%;
+  bottom: 1em;
+  color: white;
+  font-size: 1em;
+  height: 2.1em;
+  position: fixed;
+  right: 2em;
+  width: 2.1em;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
+  height: 300px;
+  overflow: hidden;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
+  height: 100%;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
+  display: none;
+}
+/*
+  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
+  increased and the whole body becomes scrollable. It's important!
+ */
+input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    bottom: 50%;
+  }
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.min.css b/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.min.css
new file mode 100644
index 0000000..3a45cac
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all:initial;display:block}.tinymce-mobile-outer-container *{border:0;box-sizing:initial;cursor:inherit;float:none;line-height:1;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:transparent;text-shadow:none;white-space:nowrap}.tinymce-mobile-icon-arrow-back::before{content:"\e5cd"}.tinymce-mobile-icon-image::before{content:"\e412"}.tinymce-mobile-icon-cancel-circle::before{content:"\e5c9"}.tinymce-mobile-icon-full-dot::before{content:"\e061"}.tinymce-mobile-icon-align-center::before{content:"\e234"}.tinymce-mobile-icon-align-left::before{content:"\e236"}.tinymce-mobile-icon-align-right::before{content:"\e237"}.tinymce-mobile-icon-bold::before{content:"\e238"}.tinymce-mobile-icon-italic::before{content:"\e23f"}.tinymce-mobile-icon-unordered-list::before{content:"\e241"}.tinymce-mobile-icon-ordered-list::before{content:"\e242"}.tinymce-mobile-icon-font-size::before{content:"\e245"}.tinymce-mobile-icon-underline::before{content:"\e249"}.tinymce-mobile-icon-link::before{content:"\e157"}.tinymce-mobile-icon-unlink::before{content:"\eca2"}.tinymce-mobile-icon-color::before{content:"\e891"}.tinymce-mobile-icon-previous::before{content:"\e314"}.tinymce-mobile-icon-next::before{content:"\e315"}.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content:"\e264"}.tinymce-mobile-icon-undo::before{content:"\e166"}.tinymce-mobile-icon-redo::before{content:"\e15a"}.tinymce-mobile-icon-removeformat::before{content:"\e239"}.tinymce-mobile-icon-small-font::before{content:"\e906"}.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content:"\e5ca"}.tinymce-mobile-icon-small-heading::before{content:"small"}.tinymce-mobile-icon-large-heading::before{content:"large"}.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family:sans-serif;font-size:80%}.tinymce-mobile-mask-edit-icon::before{content:"\e254"}.tinymce-mobile-icon-back::before{content:"\e5c4"}.tinymce-mobile-icon-heading::before{content:"Headings";font-family:sans-serif;font-size:80%;font-weight:700}.tinymce-mobile-icon-h1::before{content:"H1";font-weight:700}.tinymce-mobile-icon-h2::before{content:"H2";font-weight:700}.tinymce-mobile-icon-h3::before{content:"H3";font-weight:700}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{align-items:center;display:flex;justify-content:center;background:rgba(51,51,51,.5);height:100%;position:absolute;top:0;width:100%}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{align-items:center;border-radius:50%;display:flex;flex-direction:column;font-family:sans-serif;font-size:1em;justify-content:space-between}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items:center;display:flex;justify-content:center;flex-direction:column;font-size:1em}@media only screen and (min-device-width:700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size:1.2em}}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em;background-color:#fff;color:#207ab7}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{content:"\e900";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index:2}.tinymce-mobile-android-container.tinymce-mobile-android-maximized{background:#fff;border:none;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0}.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position:relative}.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display:flex;flex-grow:1}.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display:flex!important;flex-grow:1;height:auto!important}.tinymce-mobile-android-scroll-reload{overflow:hidden}:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top:23px}.tinymce-mobile-toolstrip{background:#fff;display:flex;flex:0 0 auto;z-index:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid #ccc;display:flex;flex:1;height:2.5em;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex-shrink:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background:#f44336}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{align-items:center;display:flex;height:80%;margin-left:2px;margin-right:2px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{background:#c8cbcf;color:#ccc}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{background:#207ab7;color:#eceff1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex:1;padding-bottom:.4em;padding-top:.4em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{display:flex;min-height:1.5em;overflow:hidden;padding-left:0;padding-right:0;position:relative;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display:flex;height:100%;transition:left cubic-bezier(.4,0,1,1) .15s;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display:flex;flex:0 0 auto;justify-content:space-between;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family:Sans-serif}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{display:flex;flex-grow:1;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{-ms-grid-row-align:center;align-self:center;background:inherit;border:none;border-radius:50%;color:#888;font-size:.6em;font-weight:700;height:100%;padding-right:2px;position:absolute;right:0}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display:none}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{align-items:center;display:flex;font-weight:700;height:100%;padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility:hidden}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{color:#ccc;font-size:10px;line-height:10px;margin:0 2px;padding-top:3px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color:#c8cbcf}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-left:.5em;margin-right:.9em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-left:.9em;margin-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{display:flex;flex:1;margin-left:0;margin-right:0;padding:.28em 0;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{background:#ccc;display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-left:2em;padding-right:2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{background:linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{background:#000;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{background:#fff;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{align-items:center;background-clip:padding-box;background-color:#455a64;border:.5em solid rgba(136,136,136,0);border-radius:3em;bottom:0;color:#fff;display:flex;height:.5em;justify-content:center;left:-10px;margin:auto;position:absolute;top:0;transition:border 120ms cubic-bezier(.39,.58,.57,1);width:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border:.5em solid rgba(136,136,136,.39)}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction:column;justify-content:center}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{background:#fff;border:none;border-radius:0;color:#455a64;flex-grow:1;font-size:.85em;padding-bottom:.1em;padding-left:5px;padding-top:.1em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color:#888}.tinymce-mobile-dropup{background:#fff;display:flex;overflow:hidden;width:100%}.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition:height .3s ease-out}.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition:height .3s ease-in}.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow:0}.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow:1}.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}@media only screen and (orientation:landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:150px}}.tinymce-mobile-styles-menu{font-family:sans-serif;outline:4px solid #000;overflow:hidden;position:relative;width:100%}.tinymce-mobile-styles-menu [role=menu]{display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.tinymce-mobile-styles-menu [role=menu].transitioning{transition:transform .5s ease-in-out}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{border-bottom:1px solid #ddd;color:#455a64;cursor:pointer;display:flex;padding:1em 1em;position:relative}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{color:#455a64;content:"\e314";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{color:#455a64;content:"\e315";font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{align-items:center;background:#fff;border-top:#455a64;color:#455a64;display:flex;min-height:2.5em;padding-left:1em;padding-right:1em}.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform:translate(-100%)}.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform:translate(0)}.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform:translate(100%)}@font-face{font-family:tinymce-mobile;font-style:normal;font-weight:400;src:url(fonts/tinymce-mobile.woff?8x92w3) format('woff')}@media (min-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:25px}}@media (max-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:18px}}.tinymce-mobile-icon{font-family:tinymce-mobile,sans-serif}.mixin-flex-and-centre{align-items:center;display:flex;justify-content:center}.mixin-flex-bar{align-items:center;display:flex;height:100%}.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{background-color:#fff;width:100%}.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{background-color:#207ab7;border-radius:50%;bottom:1em;color:#fff;font-size:1em;height:2.1em;position:fixed;right:2em;width:2.1em;align-items:center;display:flex;justify-content:center}@media only screen and (min-device-width:700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size:1.2em}}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height:300px;overflow:hidden}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height:100%}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display:none}input[type=file]::-webkit-file-upload-button{display:none}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom:50%}}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.css b/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.css
new file mode 100644
index 0000000..d2adc4d
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.css
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen,
+.tox-shadowhost.tox-fullscreen {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: 1200;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
diff --git a/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css b/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css
new file mode 100644
index 0000000..a0893b9
--- /dev/null
+++ b/z_ele/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}
diff --git a/z_ele/src/App.vue b/z_ele/src/App.vue
new file mode 100644
index 0000000..c8e9933
--- /dev/null
+++ b/z_ele/src/App.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-config-provider :locale="elLocale">
+    <ele-config-provider
+      :locale="eleLocale"
+      :table="tableConfig"
+      :map-key="MAP_KEY"
+      :license="LICENSE_CODE"
+    >
+      <ele-app>
+        <router-view />
+      </ele-app>
+    </ele-config-provider>
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+  import { MAP_KEY, LICENSE_CODE } from '@/config/setting';
+  import { useGlobalConfig } from '@/config/use-global-config';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { useLocale } from '@/i18n/use-locale';
+
+  /** 组件全局配置 */
+  const { tableConfig } = useGlobalConfig();
+
+  /** 恢复缓存主题 */
+  const themeStore = useThemeStore();
+  themeStore.recoverTheme();
+
+  /** 国际化配置 */
+  const { elLocale, eleLocale } = useLocale();
+</script>
diff --git a/z_ele/src/api/dashboard/analysis/index.ts b/z_ele/src/api/dashboard/analysis/index.ts
new file mode 100644
index 0000000..ed90570
--- /dev/null
+++ b/z_ele/src/api/dashboard/analysis/index.ts
@@ -0,0 +1,152 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import type { PayNumData, SaleroomResult, VisitData, CloudData } from './model';
+
+/**
+ * 获取支付笔数数据
+ */
+export async function getPayNumList() {
+  const res = await request.get<ApiResult<PayNumData[]>>(
+    'https://cdn.eleadmin.com/20200610/analysis-pay-num.json'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取销售量数据
+ */
+export async function getSaleroomList() {
+  const res = await request.get<ApiResult<SaleroomResult>>(
+    'https://cdn.eleadmin.com/20200610/analysis-saleroom.json'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取最近 1 小时访问情况数据
+ * @returns {Promise<Object>}
+ */
+export async function getVisitHourList() {
+  const res = await request.get<ApiResult<VisitData[]>>(
+    'https://cdn.eleadmin.com/20200610/analysis-visits.json'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取词云数据
+ */
+export async function getWordCloudList() {
+  const data: CloudData[] = [
+    { name: '社死', value: 28 },
+    { name: '集美', value: 19 },
+    { name: '神兽', value: 12 },
+    { name: '夺笋', value: 12 },
+    { name: '直播', value: 19 },
+    { name: '懂王', value: 16 },
+    { name: '硬核', value: 21 },
+    { name: '国潮', value: 17 },
+    { name: '冲鸭', value: 13 },
+    { name: 'C位', value: 22 },
+    { name: '上头', value: 23 },
+    { name: '安排', value: 13 },
+    { name: '好方', value: 13 },
+    { name: '社畜', value: 22 },
+    { name: 'CP', value: 8 },
+    { name: '笑哭', value: 11 },
+    { name: '吃土', value: 28 },
+    { name: '狗带', value: 27 },
+    { name: '懵逼', value: 19 },
+    { name: '宝宝', value: 19 },
+    { name: '破防', value: 12 },
+    { name: '小丑', value: 22 },
+    { name: '萝莉', value: 8 },
+    { name: '辣~', value: 22 },
+    { name: 'K歌', value: 14 },
+    { name: '女神', value: 28 },
+    { name: '米粉', value: 28 },
+    { name: '逛街', value: 18 },
+    { name: '坚持', value: 8 },
+    { name: '话唠', value: 8 },
+    { name: '果粉', value: 12 },
+    { name: '花粉', value: 22 },
+    { name: '宅男', value: 10 },
+    { name: '琼瑶', value: 11 },
+    { name: '正太', value: 22 },
+    { name: '逗比', value: 19 },
+    { name: '腹黑', value: 8 },
+    { name: '吃鸡', value: 21 },
+    { name: '民谣', value: 14 },
+    { name: '追剧', value: 27 },
+    { name: '锤粉', value: 12 },
+    { name: '欧皇', value: 26 },
+    { name: '软妹子', value: 19 },
+    { name: '汪星人', value: 26 },
+    { name: '大长腿', value: 23 },
+    { name: '川妹子', value: 20 },
+    { name: '黑长直', value: 17 },
+    { name: '萌萌哒', value: 10 },
+    { name: '喵星人', value: 12 },
+    { name: '衬衫控', value: 15 },
+    { name: '小清新', value: 26 },
+    { name: '眼镜男', value: 9 },
+    { name: '穷游党', value: 21 },
+    { name: '铲屎官', value: 11 },
+    { name: '中二病', value: 26 },
+    { name: '夜猫子', value: 22 },
+    { name: '背包客', value: 23 },
+    { name: '官宣体', value: 15 },
+    { name: '两年半', value: 12 },
+    { name: '年代感', value: 17 },
+    { name: '绝绝子', value: 24 },
+    { name: 'YYDS', value: 18 },
+    { name: 'emo了', value: 25 },
+    { name: '长腿欧巴', value: 24 },
+    { name: '专注设计', value: 9 },
+    { name: '海纳百川', value: 17 },
+    { name: '为了联盟', value: 13 },
+    { name: '为了部落', value: 23 },
+    { name: '懒癌患者', value: 9 },
+    { name: 'IT民工', value: 12 },
+    { name: '选择困难', value: 16 },
+    { name: '仙气十足', value: 28 },
+    { name: '杠精附体', value: 8 },
+    { name: '佛系青年', value: 14 },
+    { name: '内卷到底', value: 14 },
+    { name: '躺平青年', value: 18 },
+    { name: '社恐达人', value: 23 },
+    { name: '锦鲤附体', value: 26 },
+    { name: '鸡你太美', value: 9 },
+    { name: '秃然袭击', value: 19 },
+    { name: '带货女王', value: 13 },
+    { name: 'C位出道', value: 8 },
+    { name: '真香定律', value: 10 },
+    { name: '尬聊王者', value: 18 },
+    { name: '补刀能手', value: 12 },
+    { name: '流量密码', value: 8 },
+    { name: '爱了爱了', value: 13 },
+    { name: '溜了溜了', value: 21 },
+    { name: '蓝瘦香菇', value: 18 },
+    { name: '撩妹高手', value: 22 },
+    { name: '套路满满', value: 10 },
+    { name: '洪荒之力', value: 9 },
+    { name: '浪姐同款', value: 20 },
+    { name: '躺平摆烂', value: 27 },
+    { name: '消费主义', value: 25 },
+    { name: '伤害不大', value: 20 },
+    { name: '不懂就问', value: 17 },
+    { name: '有被冒犯', value: 25 },
+    { name: '吃瓜群众', value: 25 },
+    { name: 'CNB成员', value: 16 }
+  ];
+  return data;
+}
diff --git a/z_ele/src/api/dashboard/analysis/model/index.ts b/z_ele/src/api/dashboard/analysis/model/index.ts
new file mode 100644
index 0000000..1844807
--- /dev/null
+++ b/z_ele/src/api/dashboard/analysis/model/index.ts
@@ -0,0 +1,51 @@
+/**
+ * 支付笔数数据
+ */
+export interface PayNumData {
+  /** 日期 */
+  date?: string;
+  /** 支付笔数 */
+  value?: number;
+}
+
+/**
+ * 销售量数据
+ */
+export interface SaleroomData {
+  /** 月份 */
+  month?: string;
+  /** 销售量 */
+  value?: number;
+}
+
+/**
+ * 销售量和访问量数据
+ */
+export interface SaleroomResult {
+  /** 销售量 */
+  list1: SaleroomData[];
+  /** 访问量 */
+  list2: SaleroomData[];
+}
+
+/**
+ * 访问情况数据
+ */
+export interface VisitData {
+  /** 时间 */
+  time?: string;
+  /** 访问量 */
+  visits?: number;
+  /** 浏览量 */
+  views?: number;
+}
+
+/**
+ * 词云数据
+ */
+export interface CloudData {
+  /** 标题 */
+  name: string;
+  /** 数量 */
+  value: number;
+}
diff --git a/z_ele/src/api/dashboard/monitor/index.ts b/z_ele/src/api/dashboard/monitor/index.ts
new file mode 100644
index 0000000..37af9f4
--- /dev/null
+++ b/z_ele/src/api/dashboard/monitor/index.ts
@@ -0,0 +1,44 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import type { UserCount, BrowserCount } from './model';
+const BASE_URL = import.meta.env.BASE_URL;
+
+/**
+ * 获取中国地图geo数据
+ */
+export async function getChinaMapData() {
+  const res = await request.get<any>(
+    BASE_URL + 'json/china-provinces.geo.json',
+    { baseURL: '' }
+  );
+  if (res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error('获取地图数据失败'));
+}
+
+/**
+ * 获取用户分布数据
+ */
+export async function getUserCountList() {
+  const res = await request.get<ApiResult<UserCount[]>>(
+    'https://cdn.eleadmin.com/20200610/monitor-user-count.json'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取用户浏览器分布数据
+ */
+export async function getBrowserCountList() {
+  const res = await request.get<ApiResult<BrowserCount[]>>(
+    'https://cdn.eleadmin.com/20200610/monitor-browser-count.json'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/dashboard/monitor/model/index.ts b/z_ele/src/api/dashboard/monitor/model/index.ts
new file mode 100644
index 0000000..c715a0c
--- /dev/null
+++ b/z_ele/src/api/dashboard/monitor/model/index.ts
@@ -0,0 +1,21 @@
+/**
+ * 用户分布数据
+ */
+export interface UserCount {
+  /** 省份 */
+  name: string;
+  /** 用户数量 */
+  value: number;
+  /** 百分比 */
+  percent?: number;
+}
+
+/**
+ * 浏览器分布数据
+ */
+export interface BrowserCount {
+  /** 浏览器 */
+  name: string;
+  /** 用户数量 */
+  value: number;
+}
diff --git a/z_ele/src/api/example/index.ts b/z_ele/src/api/example/index.ts
new file mode 100644
index 0000000..ba75c4f
--- /dev/null
+++ b/z_ele/src/api/example/index.ts
@@ -0,0 +1,342 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type {
+  NoticeResult,
+  Message,
+  UserItem,
+  UserScore,
+  Piece,
+  PieceParam
+} from './model';
+
+/**
+ * 查询未读通知
+ */
+export async function getUnreadNotice(): Promise<NoticeResult> {
+  const res = await request.get(
+    'https://cdn.eleadmin.com/20200610/message.json'
+  );
+  return res.data;
+}
+
+/**
+ * 分页查询通知
+ */
+export async function pageNotices(_params: any) {
+  const res = await request.get<PageResult<Message>>(
+    'https://cdn.eleadmin.com/20200610/notices.json'
+  );
+  return res.data;
+}
+
+/**
+ * 分页查询私信
+ */
+export async function pageLetters(_params: any) {
+  const res = await request.get<PageResult<Message>>(
+    'https://cdn.eleadmin.com/20200610/letters.json'
+  );
+  return res.data;
+}
+
+/**
+ * 分页查询代办
+ */
+export async function pageTodos(_params: any) {
+  const res = await request.get<PageResult<Message>>(
+    'https://cdn.eleadmin.com/20200610/todos.json'
+  );
+  return res.data;
+}
+
+/**
+ * 查询未读数量
+ */
+export async function getUnReadNum() {
+  return { notice: 2, letter: 3, todo: 4 };
+}
+
+/**
+ * 获取已添加成员
+ */
+export async function listAddedUsers() {
+  const data: UserItem[] = [
+    {
+      key: '1',
+      number: '00001',
+      name: 'John Brown',
+      department: '研发部'
+    },
+    {
+      key: '2',
+      number: '00002',
+      name: 'Jim Green',
+      department: '产品部'
+    },
+    {
+      key: '3',
+      number: '00003',
+      name: 'Joe Black',
+      department: '产品部'
+    }
+  ];
+  return data;
+}
+
+/**
+ * 获取成绩
+ */
+export async function pageUserScores() {
+  const data: UserScore[] = [
+    {
+      id: 1,
+      userName: '张三',
+      courseName: '语文',
+      score: 90,
+      userNameRowSpan: 3
+    },
+    {
+      id: 2,
+      userName: '张三',
+      courseName: '数学',
+      score: 98,
+      userNameRowSpan: 0
+    },
+    {
+      id: 3,
+      userName: '张三',
+      courseName: '英语',
+      score: 80,
+      userNameRowSpan: 0
+    },
+    {
+      id: 4,
+      userName: '李四',
+      courseName: '语文',
+      score: 92,
+      userNameRowSpan: 4
+    },
+    {
+      id: 5,
+      userName: '李四',
+      courseName: '数学',
+      score: 96,
+      userNameRowSpan: 0
+    },
+    {
+      id: 6,
+      userName: '李四',
+      courseName: '英语',
+      score: 60,
+      userNameRowSpan: 0
+    },
+    {
+      id: 7,
+      userName: '李四',
+      courseName: '理综',
+      score: 150,
+      userNameRowSpan: 0
+    },
+    {
+      id: 8,
+      userName: '王五',
+      courseName: '语文',
+      score: 88,
+      userNameRowSpan: 2
+    },
+    {
+      id: 9,
+      userName: '王五',
+      courseName: '数学',
+      score: 80,
+      userNameRowSpan: 0
+    },
+    {
+      id: 10,
+      userName: '赵六',
+      courseName: '语文',
+      score: 90
+    },
+    {
+      id: 11,
+      userName: '支持跨多行多列',
+      courseName: '',
+      score: 0,
+      userNameRowSpan: 1,
+      userNameColSpan: 3,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 0,
+      scoreRowSpan: 0,
+      scoreColSpan: 0
+    },
+    {
+      id: 12,
+      userName: 'EleAdmin',
+      courseName: '',
+      score: 20,
+      userNameRowSpan: 3,
+      userNameColSpan: 2,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 0
+    },
+    {
+      id: 13,
+      userName: 'EleAdmin',
+      courseName: '',
+      score: 30,
+      userNameRowSpan: 0,
+      userNameColSpan: 1,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 1
+    },
+    {
+      id: 14,
+      userName: 'EleAdmin',
+      courseName: '',
+      score: 10,
+      userNameRowSpan: 0,
+      userNameColSpan: 1,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 1
+    },
+    {
+      id: 15,
+      userName: 'HTML',
+      courseName: 'CSS',
+      score: 0,
+      userNameRowSpan: 1,
+      userNameColSpan: 1,
+      courseNameRowSpan: 3,
+      courseNameColSpan: 2,
+      scoreRowSpan: 0,
+      scoreColSpan: 0
+    },
+    {
+      id: 16,
+      userName: 'JavaScript',
+      courseName: 'CSS',
+      score: 0,
+      userNameRowSpan: 3,
+      userNameColSpan: 1,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 1,
+      scoreRowSpan: 0,
+      scoreColSpan: 1
+    },
+    {
+      id: 17,
+      userName: 'JavaScript',
+      courseName: 'CSS',
+      score: 0,
+      userNameRowSpan: 0,
+      userNameColSpan: 1,
+      courseNameRowSpan: 0,
+      courseNameColSpan: 1,
+      scoreRowSpan: 0,
+      scoreColSpan: 1
+    },
+    {
+      id: 18,
+      userName: 'JavaScript',
+      courseName: 'Vue',
+      score: 100,
+      userNameRowSpan: 0,
+      userNameColSpan: 1,
+      courseNameRowSpan: 1,
+      courseNameColSpan: 1,
+      scoreRowSpan: 2,
+      scoreColSpan: 1
+    },
+    {
+      id: 19,
+      userName: 'element-plus',
+      courseName: 'element-plus',
+      score: 100,
+      userNameRowSpan: 1,
+      userNameColSpan: 2,
+      courseNameRowSpan: 1,
+      courseNameColSpan: 0,
+      scoreRowSpan: 0,
+      scoreColSpan: 1
+    },
+    {
+      id: 20,
+      userName: 'pinia',
+      courseName: 'axios',
+      score: 0,
+      userNameRowSpan: 1,
+      userNameColSpan: 1,
+      courseNameRowSpan: 1,
+      courseNameColSpan: 2,
+      scoreRowSpan: 1,
+      scoreColSpan: 0
+    }
+  ];
+  return data;
+}
+
+/**
+ * 获取案卷列表
+ */
+export async function getPieceList(params: PieceParam) {
+  const res = await request.get<ApiResult<PageResult<Piece>>>(
+    'https://cdn.eleadmin.com/20200610/document.json',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询项目进度
+ */
+export async function getProjectList() {
+  const res = await request.get(
+    'https://cdn.eleadmin.com/20200610/project-list.json'
+  );
+  return res.data;
+}
+
+/**
+ * 获取演示markdown
+ */
+export async function getDemoMD() {
+  const res = await request.get<string>(
+    'https://cdn.eleadmin.com/20200610/demo.md'
+  );
+  return res.data;
+}
+
+/**
+ * 获取演示多选卡片
+ */
+export async function getDemoCardData() {
+  return [
+    {
+      value: 1,
+      title: 'ElementUI',
+      content:
+        'Element, 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库, 提供了配套设计资源, 帮助你的网站快速成型。',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+    },
+    {
+      value: 2,
+      title: 'Vue.js',
+      content:
+        'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+    },
+    {
+      value: 3,
+      title: 'Vue Router',
+      content:
+        'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成, 让构建单页面应用变得易如反掌。',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+    }
+  ];
+}
diff --git a/z_ele/src/api/example/model/index.ts b/z_ele/src/api/example/model/index.ts
new file mode 100644
index 0000000..29cd4d8
--- /dev/null
+++ b/z_ele/src/api/example/model/index.ts
@@ -0,0 +1,187 @@
+import { PageParam } from '@/api';
+
+/**
+ * 通知数据格式
+ */
+export interface NoticeModel {
+  /** 通知id */
+  id: number;
+  /** 图标颜色 */
+  color?: string;
+  /** 图标 */
+  icon?: string;
+  /** 标题 */
+  title?: string;
+  /** 时间 */
+  time?: string;
+}
+
+/**
+ * 私信数据格式
+ */
+export interface LetterModel {
+  /** 私信id */
+  id: number;
+  /** 头像 */
+  avatar?: string;
+  /** 标题 */
+  title?: string;
+  /** 内容 */
+  content?: string;
+  /** 时间 */
+  time?: string;
+}
+
+/**
+ * 待办数据格式
+ */
+export interface TodoModel {
+  /** 待办id */
+  id: number;
+  /** 状态 */
+  status?: number;
+  /** 标题 */
+  title?: string;
+  /** 描述 */
+  description?: string;
+}
+
+/**
+ * 查询未读通知返回结果
+ */
+export interface NoticeResult {
+  /** 通知 */
+  notice: NoticeModel[];
+  /** 私信 */
+  letter: LetterModel[];
+  /** 待办 */
+  todo: TodoModel[];
+}
+
+/**
+ * 消息
+ */
+export interface Message {
+  /** 消息id */
+  id?: number;
+  /** 标题 */
+  title?: string;
+  /** 时间 */
+  time?: string;
+  /** 状态 */
+  status?: number;
+}
+
+/**
+ * 成员
+ */
+export interface UserItem {
+  /** 成员id */
+  key: string;
+  /** 工号 */
+  number?: string;
+  /** 用户名 */
+  name?: string;
+  /** 部门 */
+  department?: string;
+  /** 是否编辑状态 */
+  isEdit?: boolean;
+}
+
+/**
+ * 成绩
+ */
+export interface UserScore {
+  /** 成绩id */
+  id: number;
+  /** 姓名 */
+  userName: string;
+  /** 课程 */
+  courseName: string;
+  /** 得分 */
+  score: number;
+  /** 姓名跨行 */
+  userNameRowSpan?: number;
+  /** 姓名跨列 */
+  userNameColSpan?: number;
+  /** 课程跨行 */
+  courseNameRowSpan?: number;
+  /** 课程跨列 */
+  courseNameColSpan?: number;
+  /** 得分跨行 */
+  scoreRowSpan?: number;
+  /** 得分跨列 */
+  scoreColSpan?: number;
+}
+
+/**
+ * 案卷
+ */
+export interface Piece {
+  /** 案卷id */
+  id?: number;
+  /** 案卷题名 */
+  title?: string;
+  /** 案卷档号 */
+  piece_no?: string;
+  /** 密级 */
+  secret?: string;
+  /** 存放位置 */
+  location?: string;
+  /** 案卷类型 */
+  type?: string;
+  /** 保管期限 */
+  retention?: string;
+  /** 载体类型 */
+  carrier?: string;
+  /** 归档年度 */
+  year?: string;
+  /** 件数 */
+  amount?: number;
+}
+
+/**
+ * 案卷查询参数
+ */
+export interface PieceParam extends PageParam {
+  /** 案卷题名 */
+  title?: string;
+  /** 案卷档号 */
+  piece_no?: string;
+}
+
+/**
+ * 项目进度数据类型
+ */
+export interface Project {
+  /** id */
+  id: string;
+  /** 项目名称 */
+  projectName: string;
+  /** 状态 */
+  status: number;
+  /** 开始时间 */
+  startDate: string;
+  /** 结束时间 */
+  endDate: string;
+  /** 进度 */
+  progress: number;
+  /** 金额 */
+  money: number;
+}
+
+/**
+ * 房屋租赁合同
+ */
+export interface Contract {
+  /** 甲方 */
+  partyA?: string;
+  /** 乙方 */
+  partyB?: string;
+  /** 房屋地址 */
+  address?: string;
+  /** 日期 */
+  date?: string;
+  /** 项目 */
+  projects?: Project[];
+}
diff --git a/z_ele/src/api/index.ts b/z_ele/src/api/index.ts
new file mode 100644
index 0000000..b9dbd7f
--- /dev/null
+++ b/z_ele/src/api/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 接口统一返回结果
+ */
+export interface ApiResult<T> {
+  /** 状态码 */
+  code: number;
+  /** 状态信息 */
+  message?: string;
+  /** 返回数据 */
+  data?: T;
+}
+
+/**
+ * 分页查询统一结果
+ */
+export interface PageResult<T> {
+  /** 返回数据 */
+  list: T[];
+  /** 总数量 */
+  count: number;
+}
+
+/**
+ * 分页查询基本参数
+ */
+export interface PageParam {
+  /** 第几页 */
+  page?: number;
+  /** 每页多少条 */
+  limit?: number;
+  /** 排序字段 */
+  sort?: string;
+  /** 排序方式, asc升序, desc降序 */
+  order?: string;
+}
diff --git a/z_ele/src/api/layout/index.ts b/z_ele/src/api/layout/index.ts
new file mode 100644
index 0000000..8b2d4d7
--- /dev/null
+++ b/z_ele/src/api/layout/index.ts
@@ -0,0 +1,39 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import type { User } from '@/api/system/user/model';
+import type { UpdatePasswordParam } from './model';
+
+/**
+ * 获取当前登录用户的个人信息/菜单/权限/角色
+ */
+export async function getUserInfo(): Promise<User> {
+  const res = await request.get<ApiResult<User>>('/auth/user');
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改当前登录用户的密码
+ */
+export async function updatePassword(
+  data: UpdatePasswordParam
+): Promise<string> {
+  const res = await request.put<ApiResult<unknown>>('/auth/password', data);
+  if (res.data.code === 0) {
+    return res.data.message ?? '修改成功';
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改当前登录用户的个人信息
+ */
+export async function updateUserInfo(data: User): Promise<User> {
+  const res = await request.put<ApiResult<User>>('/auth/user', data);
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/layout/model/index.ts b/z_ele/src/api/layout/model/index.ts
new file mode 100644
index 0000000..acdb129
--- /dev/null
+++ b/z_ele/src/api/layout/model/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 修改密码参数
+ */
+export interface UpdatePasswordParam {
+  /** 新密码 */
+  password: string;
+  /** 原始密码 */
+  oldPassword: string;
+}
diff --git a/z_ele/src/api/login/index.ts b/z_ele/src/api/login/index.ts
new file mode 100644
index 0000000..81f9f98
--- /dev/null
+++ b/z_ele/src/api/login/index.ts
@@ -0,0 +1,27 @@
+import request from '@/utils/request';
+import { setToken } from '@/utils/token-util';
+import type { ApiResult } from '@/api';
+import type { LoginParam, LoginResult, CaptchaResult } from './model';
+
+/**
+ * 登录
+ */
+export async function login(data: LoginParam) {
+  const res = await request.post<ApiResult<LoginResult>>('/login', data);
+  if (res.data.code === 0) {
+    setToken('Bearer ' + res.data.data?.access_token, data.remember);
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取验证码
+ */
+export async function getCaptcha() {
+  const res = await request.get<ApiResult<CaptchaResult>>('/captcha');
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/login/model/index.ts b/z_ele/src/api/login/model/index.ts
new file mode 100644
index 0000000..33802a9
--- /dev/null
+++ b/z_ele/src/api/login/model/index.ts
@@ -0,0 +1,35 @@
+import type { User } from '../../system/user/model';
+
+/**
+ * 登录参数
+ */
+export interface LoginParam {
+  /** 账号 */
+  username?: string;
+  /** 密码 */
+  password?: string;
+  /** 租户id */
+  tenantId?: number;
+  /** 是否记住密码 */
+  remember?: boolean;
+}
+
+/**
+ * 登录返回结果
+ */
+export interface LoginResult {
+  /** token */
+  access_token?: string;
+  /** 用户信息 */
+  user?: User;
+}
+
+/**
+ * 图形验证码返回结果
+ */
+export interface CaptchaResult {
+  /** 图形验证码base64数据 */
+  base64: string;
+  /** 验证码文本 */
+  text: string;
+}
diff --git a/z_ele/src/api/system/dictionary-data/index.ts b/z_ele/src/api/system/dictionary-data/index.ts
new file mode 100644
index 0000000..30a411c
--- /dev/null
+++ b/z_ele/src/api/system/dictionary-data/index.ts
@@ -0,0 +1,86 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { DictionaryData, DictionaryDataParam } from './model';
+
+/**
+ * 分页查询字典数据
+ */
+export async function pageDictionaryData(params: DictionaryDataParam) {
+  const res = await request.get<ApiResult<PageResult<DictionaryData>>>(
+    '/system/dictionary-data/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询字典数据列表
+ */
+export async function listDictionaryData(params: DictionaryDataParam) {
+  const res = await request.get<ApiResult<DictionaryData[]>>(
+    '/system/dictionary-data',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加字典数据
+ */
+export async function addDictionaryData(data: DictionaryData) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/system/dictionary-data',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改字典数据
+ */
+export async function updateDictionaryData(data: DictionaryData) {
+  const res = await request.put<ApiResult<unknown>>(
+    '/system/dictionary-data',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除字典数据
+ */
+export async function removeDictionaryData(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/dictionary-data/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除字典数据
+ */
+export async function removeDictionaryDataBatch(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/dictionary-data/batch',
+    { data }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/dictionary-data/model/index.ts b/z_ele/src/api/system/dictionary-data/model/index.ts
new file mode 100644
index 0000000..cb416ed
--- /dev/null
+++ b/z_ele/src/api/system/dictionary-data/model/index.ts
@@ -0,0 +1,37 @@
+import { PageParam } from '@/api';
+
+/**
+ * 字典数据
+ */
+export interface DictionaryData {
+  /** 字典数据id */
+  dictDataId?: number;
+  /** 字典id */
+  dictId?: number;
+  /** 字典数据标识 */
+  dictDataCode: string;
+  /** 字典数据名称 */
+  dictDataName: string;
+  /** 排序号 */
+  sortNumber?: number;
+  /** 备注 */
+  comments?: string;
+  /** 创建时间 */
+  createTime?: string;
+}
+
+/**
+ * 字典数据搜索条件
+ */
+export interface DictionaryDataParam extends PageParam {
+  /** 关键字 */
+  keywords?: string;
+  /** 字典数据名称 */
+  dictDataName?: string;
+  /** 字典数据名称 */
+  dictDataCode?: string;
+  /** 字典标识 */
+  dictCode?: string;
+  /** 字典id */
+  dictId?: number;
+}
diff --git a/z_ele/src/api/system/dictionary/index.ts b/z_ele/src/api/system/dictionary/index.ts
new file mode 100644
index 0000000..ea18c74
--- /dev/null
+++ b/z_ele/src/api/system/dictionary/index.ts
@@ -0,0 +1,68 @@
+import request from '@/utils/request';
+import type { ApiResult } from '@/api';
+import type { Dictionary, DictionaryParam } from './model';
+
+/**
+ * 分页查询字典列表
+ */
+export async function pageDictionaries(params: DictionaryParam) {
+  const res = await request.get<ApiResult<Dictionary[]>>(
+    '/system/dictionary/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询字典列表
+ */
+export async function listDictionaries(params?: DictionaryParam) {
+  const res = await request.get<ApiResult<Dictionary[]>>('/system/dictionary', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加字典
+ */
+export async function addDictionary(data: Dictionary) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/system/dictionary',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改字典
+ */
+export async function updateDictionary(data: Dictionary) {
+  const res = await request.put<ApiResult<unknown>>('/system/dictionary', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除字典
+ */
+export async function removeDictionary(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/dictionary/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/dictionary/model/index.ts b/z_ele/src/api/system/dictionary/model/index.ts
new file mode 100644
index 0000000..0b20c87
--- /dev/null
+++ b/z_ele/src/api/system/dictionary/model/index.ts
@@ -0,0 +1,29 @@
+import { PageParam } from '@/api';
+
+/**
+ * 字典
+ */
+export interface Dictionary {
+  /** 字典id */
+  dictId?: number;
+  /** 字典标识 */
+  dictCode?: string;
+  /** 字典名称 */
+  dictName?: string;
+  /** 排序号 */
+  sortNumber?: number;
+  /** 备注 */
+  comments?: string;
+  /** 创建时间 */
+  createTime?: string;
+}
+
+/**
+ * 字典搜索条件
+ */
+export interface DictionaryParam extends PageParam {
+  /** 字典标识 */
+  dictCode?: string;
+  /** 字典名称 */
+  dictName?: string;
+}
diff --git a/z_ele/src/api/system/file/index.ts b/z_ele/src/api/system/file/index.ts
new file mode 100644
index 0000000..f6d83ba
--- /dev/null
+++ b/z_ele/src/api/system/file/index.ts
@@ -0,0 +1,100 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { FileRecord, FileRecordParam } from './model';
+import type { AxiosRequestConfig } from 'axios';
+
+/**
+ * 上传文件
+ * @param file 文件
+ * @param config 请求配置
+ * @param fileName 文件名称
+ */
+export async function uploadFile(
+  file: File,
+  config?: AxiosRequestConfig,
+  fileName?: string
+) {
+  const formData = new FormData();
+  formData.append('file', file, fileName);
+  const res = await request.post<ApiResult<FileRecord>>(
+    '/file/upload',
+    formData,
+    config
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 上传base64文件
+ * @param base64 base64数据
+ * @param fileName 文件名称
+ */
+export async function uploadBase64File(base64: string, fileName?: string) {
+  const formData = new FormData();
+  formData.append('base64', base64);
+  if (fileName) {
+    formData.append('fileName', fileName);
+  }
+  const res = await request.post<ApiResult<FileRecord>>(
+    '/file/upload/base64',
+    formData
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 分页查询文件上传记录
+ */
+export async function pageFiles(params: FileRecordParam) {
+  const res = await request.get<ApiResult<PageResult<FileRecord>>>(
+    '/file/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询文件上传记录列表
+ */
+export async function listFiles(params: FileRecordParam) {
+  const res = await request.get<ApiResult<FileRecord[]>>('/file/list', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除文件
+ */
+export async function removeFile(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>('/file/remove/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除文件
+ */
+export async function removeFiles(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>('/file/remove/batch', {
+    data
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/file/model/index.ts b/z_ele/src/api/system/file/model/index.ts
new file mode 100644
index 0000000..c1bb29f
--- /dev/null
+++ b/z_ele/src/api/system/file/model/index.ts
@@ -0,0 +1,43 @@
+import { PageParam } from '@/api';
+
+/**
+ * 文件上传记录
+ */
+export interface FileRecord {
+  /** id */
+  id: number;
+  /** 文件名称 */
+  name?: string;
+  /** 文件存储路径 */
+  path?: string;
+  /** 文件大小 */
+  length?: number;
+  /** 文件类型 */
+  contentType?: string;
+  /** 上传人id */
+  createUserId?: number;
+  /** 上传时间 */
+  createTime?: string;
+  /** 文件访问地址 */
+  url?: string;
+  /** 文件缩略图访问地址 */
+  thumbnail?: string;
+  /** 文件下载地址 */
+  downloadUrl?: string;
+  /** 上传人账号 */
+  createUsername?: string;
+  /** 上传人名称 */
+  createNickname?: string;
+}
+
+/**
+ * 文件上传记录查询参数
+ */
+export interface FileRecordParam extends PageParam {
+  /** 文件名称 */
+  name?: string;
+  /** 文件存储路径 */
+  path?: string;
+  /** 上传人名称 */
+  createNickname?: string;
+}
diff --git a/z_ele/src/api/system/login-record/index.ts b/z_ele/src/api/system/login-record/index.ts
new file mode 100644
index 0000000..ca76fd7
--- /dev/null
+++ b/z_ele/src/api/system/login-record/index.ts
@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { LoginRecord, LoginRecordParam } from './model';
+
+/**
+ * 分页查询登录日志
+ */
+export async function pageLoginRecords(params: LoginRecordParam) {
+  const res = await request.get<ApiResult<PageResult<LoginRecord>>>(
+    '/system/login-record/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询登录日志列表
+ */
+export async function listLoginRecords(params?: LoginRecordParam) {
+  const res = await request.get<ApiResult<LoginRecord[]>>(
+    '/system/login-record',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/login-record/model/index.ts b/z_ele/src/api/system/login-record/model/index.ts
new file mode 100644
index 0000000..bfbaf2f
--- /dev/null
+++ b/z_ele/src/api/system/login-record/model/index.ts
@@ -0,0 +1,43 @@
+import { PageParam } from '@/api';
+
+/**
+ * 登录日志
+ */
+export interface LoginRecord {
+  /** 登录日志id */
+  id: number;
+  /** 用户账号 */
+  username: string;
+  /** 操作系统 */
+  os: string;
+  /** 设备名称 */
+  device: string;
+  /** 浏览器类型 */
+  browser: string;
+  /** ip地址 */
+  ip: string;
+  /** 操作类型, 0登录成功, 1登录失败, 2退出登录, 3续签token */
+  loginType: number;
+  /** 备注 */
+  comments: string;
+  /** 操作时间 */
+  createTime: string;
+  /** 用户昵称 */
+  nickname: string;
+}
+
+/**
+ * 登录日志搜索条件
+ */
+export interface LoginRecordParam extends PageParam {
+  /** 用户账号 */
+  username?: string;
+  /** 用户昵称 */
+  nickname?: string;
+  /** 开始时间 */
+  createTimeStart?: string;
+  /** 截止时间 */
+  createTimeEnd?: string;
+  /** 操作类型 */
+  loginType?: number;
+}
diff --git a/z_ele/src/api/system/menu/index.ts b/z_ele/src/api/system/menu/index.ts
new file mode 100644
index 0000000..2113bff
--- /dev/null
+++ b/z_ele/src/api/system/menu/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Menu, MenuParam } from './model';
+
+/**
+ * 分页查询菜单
+ */
+export async function pageMenus(params: MenuParam) {
+  const res = await request.get<ApiResult<PageResult<Menu>>>(
+    '/system/menu/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询菜单列表
+ */
+export async function listMenus(params?: MenuParam) {
+  const res = await request.get<ApiResult<Menu[]>>('/system/menu', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加菜单
+ */
+export async function addMenu(data: Menu) {
+  const res = await request.post<ApiResult<unknown>>('/system/menu', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改菜单
+ */
+export async function updateMenu(data: Menu) {
+  const res = await request.put<ApiResult<unknown>>('/system/menu', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除菜单
+ */
+export async function removeMenu(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>('/system/menu/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/menu/model/index.ts b/z_ele/src/api/system/menu/model/index.ts
new file mode 100644
index 0000000..f6ccbb4
--- /dev/null
+++ b/z_ele/src/api/system/menu/model/index.ts
@@ -0,0 +1,51 @@
+/**
+ * 菜单
+ */
+export interface Menu {
+  /** 菜单id */
+  menuId?: number;
+  /** 上级id, 0是顶级 */
+  parentId?: number;
+  /** 菜单名称 */
+  title?: string;
+  /** 菜单路由地址 */
+  path: string;
+  /** 菜单组件地址 */
+  component?: string;
+  /** 菜单类型, 0菜单, 1按钮 */
+  menuType?: number;
+  /** 排序号 */
+  sortNumber?: number;
+  /** 权限标识 */
+  authority?: string;
+  /** 菜单图标 */
+  icon?: string;
+  /** 是否隐藏, 0否,1是(仅注册路由不显示左侧菜单) */
+  hide?: number;
+  /** 路由元信息 */
+  meta?: any;
+  /** 创建时间 */
+  createTime?: string;
+  /** 子菜单 */
+  children?: Menu[];
+  /** 打开方式 */
+  openType?: number;
+  /** 权限树回显选中状态, 0未选中, 1选中 */
+  checked?: boolean;
+  /** 父级重定向 */
+  redirect?: string;
+}
+
+/**
+ * 菜单搜索参数
+ */
+export interface MenuParam {
+  /** 菜单名称 */
+  title?: string;
+  /** 菜单路由地址 */
+  path?: string;
+  /** 权限标识 */
+  authority?: string;
+  /** 上级id */
+  parentId?: number;
+}
diff --git a/z_ele/src/api/system/operation-record/index.ts b/z_ele/src/api/system/operation-record/index.ts
new file mode 100644
index 0000000..c2eda50
--- /dev/null
+++ b/z_ele/src/api/system/operation-record/index.ts
@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { OperationRecord, OperationRecordParam } from './model';
+
+/**
+ * 分页查询操作日志
+ */
+export async function pageOperationRecords(params: OperationRecordParam) {
+  const res = await request.get<ApiResult<PageResult<OperationRecord>>>(
+    '/system/request-record/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询操作日志列表
+ */
+export async function listOperationRecords(params?: OperationRecordParam) {
+  const res = await request.get<ApiResult<OperationRecord[]>>(
+    '/system/request-record',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/operation-record/model/index.ts b/z_ele/src/api/system/operation-record/model/index.ts
new file mode 100644
index 0000000..c7e9c7f
--- /dev/null
+++ b/z_ele/src/api/system/operation-record/model/index.ts
@@ -0,0 +1,61 @@
+import { PageParam } from '@/api';
+
+/**
+ * 操作日志
+ */
+export interface OperationRecord {
+  /** 操作日志id */
+  id?: number;
+  /** 用户id */
+  userId?: number;
+  /** 操作模块 */
+  module: string;
+  /** 操作功能 */
+  description: string;
+  /** 请求地址 */
+  url: string;
+  /** 请求方式 */
+  requestMethod: string;
+  /** 调用方法 */
+  method: string;
+  /** 请求参数 */
+  params: string;
+  /** 返回结果 */
+  result: string;
+  /** 异常信息 */
+  error: string;
+  /** 消耗时间, 单位毫秒 */
+  spendTime: number;
+  /** 操作系统 */
+  os: string;
+  /** 设备名称 */
+  device: string;
+  /** 浏览器类型 */
+  browser: string;
+  /** ip地址 */
+  ip: string;
+  /** 状态, 0成功, 1异常 */
+  status: number;
+  /** 操作时间 */
+  createTime: string;
+  /** 用户昵称 */
+  nickname: string;
+  /** 用户账号 */
+  username: string;
+}
+
+/**
+ * 操作日志搜索条件
+ */
+export interface OperationRecordParam extends PageParam {
+  /** 用户昵称 */
+  username?: string;
+  /** 操作模块 */
+  module?: string;
+  /** 开始时间 */
+  createTimeStart?: string;
+  /** 截至时间 */
+  createTimeEnd?: string;
+  /** 状态 */
+  status?: number;
+}
diff --git a/z_ele/src/api/system/organization/index.ts b/z_ele/src/api/system/organization/index.ts
new file mode 100644
index 0000000..bf374b7
--- /dev/null
+++ b/z_ele/src/api/system/organization/index.ts
@@ -0,0 +1,72 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Organization, OrganizationParam } from './model';
+
+/**
+ * 分页查询机构
+ */
+export async function pageOrganizations(params: OrganizationParam) {
+  const res = await request.get<ApiResult<PageResult<Organization>>>(
+    '/system/organization/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询机构列表
+ */
+export async function listOrganizations(params?: OrganizationParam) {
+  const res = await request.get<ApiResult<Organization[]>>(
+    '/system/organization',
+    { params }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加机构
+ */
+export async function addOrganization(data: Organization) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/system/organization',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改机构
+ */
+export async function updateOrganization(data: Organization) {
+  const res = await request.put<ApiResult<unknown>>(
+    '/system/organization',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除机构
+ */
+export async function removeOrganization(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/organization/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/organization/model/index.ts b/z_ele/src/api/system/organization/model/index.ts
new file mode 100644
index 0000000..2009056
--- /dev/null
+++ b/z_ele/src/api/system/organization/model/index.ts
@@ -0,0 +1,41 @@
+import { PageParam } from '@/api';
+
+/**
+ * 机构
+ */
+export interface Organization {
+  /** 机构id */
+  organizationId?: number;
+  /** 上级id, 0是顶级 */
+  parentId?: number;
+  /** 机构名称 */
+  organizationName?: string;
+  /** 机构全称 */
+  organizationFullName?: string;
+  /** 机构代码 */
+  organizationCode?: string;
+  /** 机构类型(字典) */
+  organizationType?: string;
+  /** 排序号 */
+  sortNumber?: number;
+  /** 备注 */
+  comments?: string;
+  /** 创建时间 */
+  createTime?: string;
+  /** 机构类型名称 */
+  organizationTypeName?: string;
+  /** 子级 */
+  children?: Organization[];
+}
+
+/**
+ * 机构搜索条件
+ */
+export interface OrganizationParam extends PageParam {
+  /** 机构名称 */
+  organizationName?: string;
+  /** 机构全称 */
+  organizationFullName?: string;
+  /** 机构类型(字典) */
+  organizationType?: string;
+}
diff --git a/z_ele/src/api/system/role/index.ts b/z_ele/src/api/system/role/index.ts
new file mode 100644
index 0000000..9a89031
--- /dev/null
+++ b/z_ele/src/api/system/role/index.ts
@@ -0,0 +1,104 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Role, RoleParam } from './model';
+import type { Menu } from '../menu/model';
+
+/**
+ * 分页查询角色
+ */
+export async function pageRoles(params: RoleParam) {
+  const res = await request.get<ApiResult<PageResult<Role>>>(
+    '/system/role/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询角色列表
+ */
+export async function listRoles(params?: RoleParam) {
+  const res = await request.get<ApiResult<Role[]>>('/system/role', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加角色
+ */
+export async function addRole(data: Role) {
+  const res = await request.post<ApiResult<unknown>>('/system/role', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改角色
+ */
+export async function updateRole(data: Role) {
+  const res = await request.put<ApiResult<unknown>>('/system/role', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除角色
+ */
+export async function removeRole(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>('/system/role/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除角色
+ */
+export async function removeRoles(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>('/system/role/batch', {
+    data
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取角色分配的菜单
+ */
+export async function listRoleMenus(roleId?: number) {
+  const res = await request.get<ApiResult<Menu[]>>(
+    '/system/role-menu/' + roleId
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改角色菜单
+ */
+export async function updateRoleMenus(roleId?: number, data?: number[]) {
+  const res = await request.put<ApiResult<unknown>>(
+    '/system/role-menu/' + roleId,
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/role/model/index.ts b/z_ele/src/api/system/role/model/index.ts
new file mode 100644
index 0000000..ed10171
--- /dev/null
+++ b/z_ele/src/api/system/role/model/index.ts
@@ -0,0 +1,29 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 角色
+ */
+export interface Role {
+  /** 角色id */
+  roleId?: number;
+  /** 角色标识 */
+  roleCode?: string;
+  /** 角色名称 */
+  roleName?: string;
+  /** 备注 */
+  comments?: string;
+  /** 创建时间 */
+  createTime?: string;
+}
+
+/**
+ * 角色搜索条件
+ */
+export interface RoleParam extends PageParam {
+  /** 角色名称 */
+  roleName?: string;
+  /** 角色标识 */
+  roleCode?: string;
+  /** 备注 */
+  comments?: string;
+}
diff --git a/z_ele/src/api/system/user-file/index.ts b/z_ele/src/api/system/user-file/index.ts
new file mode 100644
index 0000000..1187f92
--- /dev/null
+++ b/z_ele/src/api/system/user-file/index.ts
@@ -0,0 +1,79 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { UserFile, UserFileParam } from './model';
+
+/**
+ * 分页查询用户文件
+ */
+export async function pageUserFiles(params: UserFileParam) {
+  const res = await request.get<ApiResult<PageResult<UserFile>>>(
+    '/system/user-file/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询用户文件列表
+ */
+export async function listUserFiles(params: UserFileParam) {
+  const res = await request.get<ApiResult<UserFile[]>>('/system/user-file', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加用户文件
+ */
+export async function addUserFile(data: UserFile) {
+  const res = await request.post<ApiResult<unknown>>('/system/user-file', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户文件
+ */
+export async function updateUserFile(data: UserFile) {
+  const res = await request.put<ApiResult<unknown>>('/system/user-file', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除用户文件
+ */
+export async function removeUserFile(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/user-file/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除用户文件
+ */
+export async function removeUserFiles(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    '/system/user-file/batch',
+    { data }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/user-file/model/index.ts b/z_ele/src/api/system/user-file/model/index.ts
new file mode 100644
index 0000000..9ca9850
--- /dev/null
+++ b/z_ele/src/api/system/user-file/model/index.ts
@@ -0,0 +1,45 @@
+import { PageParam } from '@/api';
+
+/**
+ * 用户文件
+ */
+export interface UserFile {
+  /** id */
+  id?: number;
+  /** 用户id */
+  userId?: number;
+  /** 文件名称 */
+  name?: string;
+  /** 是否是文件夹, 0否, 1是 */
+  isDirectory?: number;
+  /** 上级id */
+  parentId?: number;
+  /** 文件存储路径 */
+  path?: string;
+  /** 文件大小 */
+  length?: number;
+  /** 文件类型 */
+  contentType?: string;
+  /** 上传时间 */
+  createTime?: string;
+  /** 更新时间 */
+  updateTime?: string;
+  /** 文件访问地址 */
+  url?: string;
+  /** 文件缩略图访问地址 */
+  thumbnail?: string;
+  /** 文件下载地址 */
+  downloadUrl?: string;
+}
+
+/**
+ * 用户文件查询参数
+ */
+export interface UserFileParam extends PageParam {
+  /** 文件名称 */
+  name?: string;
+  /** 是否是文件夹, 0否, 1是 */
+  isDirectory?: number;
+  /** 上级id */
+  parentId?: number;
+}
diff --git a/z_ele/src/api/system/user/index.ts b/z_ele/src/api/system/user/index.ts
new file mode 100644
index 0000000..c5f594e
--- /dev/null
+++ b/z_ele/src/api/system/user/index.ts
@@ -0,0 +1,148 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { User, UserParam } from './model';
+
+/**
+ * 分页查询用户
+ */
+export async function pageUsers(params: UserParam) {
+  const res = await request.get<ApiResult<PageResult<User>>>(
+    '/system/user/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询用户列表
+ */
+export async function listUsers(params?: UserParam) {
+  const res = await request.get<ApiResult<User[]>>('/system/user', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询用户
+ */
+export async function getUser(id: number) {
+  const res = await request.get<ApiResult<User>>('/system/user/' + id);
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加用户
+ */
+export async function addUser(data: User) {
+  const res = await request.post<ApiResult<unknown>>('/system/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户
+ */
+export async function updateUser(data: User) {
+  const res = await request.put<ApiResult<unknown>>('/system/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除用户
+ */
+export async function removeUser(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>('/system/user/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除用户
+ */
+export async function removeUsers(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>('/system/user/batch', {
+    data
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户状态
+ */
+export async function updateUserStatus(userId?: number, status?: number) {
+  const res = await request.put<ApiResult<unknown>>('/system/user/status', {
+    userId,
+    status
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 重置用户密码
+ */
+export async function updateUserPassword(userId?: number, password = '123456') {
+  const res = await request.put<ApiResult<unknown>>('/system/user/password', {
+    userId,
+    password
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导入用户
+ */
+export async function importUsers(file: File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await request.post<ApiResult<unknown>>(
+    '/system/user/import',
+    formData
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 检查用户是否存在
+ */
+export async function checkExistence(
+  field: string,
+  value: string,
+  id?: number
+) {
+  const res = await request.get<ApiResult<unknown>>('/system/user/existence', {
+    params: { field, value, id }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/z_ele/src/api/system/user/model/index.ts b/z_ele/src/api/system/user/model/index.ts
new file mode 100644
index 0000000..0755024
--- /dev/null
+++ b/z_ele/src/api/system/user/model/index.ts
@@ -0,0 +1,77 @@
+import type { PageParam } from '@/api';
+import type { Role } from '../../role/model';
+import type { Menu } from '../../menu/model';
+
+/**
+ * 用户
+ */
+export interface User {
+  /** 用户id */
+  userId?: number;
+  /** 账号 */
+  username?: string;
+  /** 密码 */
+  password?: string;
+  /** 昵称 */
+  nickname?: string;
+  /** 头像 */
+  avatar?: string;
+  /** 性别(字典) */
+  sex?: string;
+  /** 手机号 */
+  phone?: string;
+  /** 邮箱 */
+  email?: string;
+  /** 出生日期 */
+  birthday?: string;
+  /** 个人简介 */
+  introduction?: string;
+  /** 机构id */
+  organizationId?: number;
+  /** 状态, 0正常, 1冻结 */
+  status?: number;
+  /** 性别名称 */
+  sexName?: string;
+  /** 机构名称 */
+  organizationName?: string;
+  /** 角色列表 */
+  roles?: Role[];
+  /** 权限列表 */
+  authorities?: Menu[];
+  /** 创建时间 */
+  createTime?: string;
+  /** 街道地址 */
+  address?: string;
+  /** 联系电话前缀 */
+  tellPre?: string;
+  /** 联系电话 */
+  tell?: string;
+}
+
+/**
+ * 用户搜索条件
+ */
+export interface UserParam extends PageParam {
+  /** 账号 */
+  username?: string;
+  /** 昵称 */
+  nickname?: string;
+  /** 性别(字典) */
+  sex?: string;
+  /** 手机号 */
+  phone?: string;
+  /** 状态 */
+  status?: number;
+  /** 机构id */
+  organizationId?: number;
+  /** 性别名称 */
+  sexName?: string;
+  /** 机构名称 */
+  organizationName?: string;
+  /** 邮箱 */
+  email?: string;
+  /** 创建时间开始时间 */
+  createTimeStart?: string;
+  /** 创建时间截止时间 */
+  createTimeEnd?: string;
+}
diff --git a/z_ele/src/as-needed.ts b/z_ele/src/as-needed.ts
new file mode 100644
index 0000000..543ecad
--- /dev/null
+++ b/z_ele/src/as-needed.ts
@@ -0,0 +1,8 @@
+/** 按需引入(生产环境) */
+import type { App, Plugin } from 'vue';
+
+const installer: Plugin = {
+  install(_app: App) {}
+};
+
+export default installer;
diff --git a/z_ele/src/assets/login-bg.png b/z_ele/src/assets/login-bg.png
new file mode 100644
index 0000000..787837a
Binary files /dev/null and b/z_ele/src/assets/login-bg.png differ
diff --git a/z_ele/src/assets/login-img.png b/z_ele/src/assets/login-img.png
new file mode 100644
index 0000000..8415c6a
Binary files /dev/null and b/z_ele/src/assets/login-img.png differ
diff --git a/z_ele/src/assets/logo.svg b/z_ele/src/assets/logo.svg
new file mode 100644
index 0000000..3359d58
--- /dev/null
+++ b/z_ele/src/assets/logo.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="280" height="280" viewBox="-18.75 0 280 280">
+    <defs xmlns="http://www.w3.org/2000/svg">
+        <linearGradient x1="20%" y1="0%" x2="100%" y2="80%" id="linearGradient-1">
+            <stop stop-color="#4285EB" offset="0%"/>
+            <stop stop-color="#2EC7FF" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="60%" y1="0%" x2="50%" y2="120%" id="linearGradient-2">
+            <stop stop-color="#29CDFF" offset="0%"/>
+            <stop stop-color="#148EFF" offset="60%"/>
+            <stop stop-color="#0A60FF" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="120%" y1="60%" x2="20%" y2="40%" id="linearGradient-3">
+            <stop stop-color="#FA816E" offset="0%"/>
+            <stop stop-color="#F74A5C" offset="60%"/>
+            <stop stop-color="#F51D2C" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <path d="M121.2435565 0 L242.4871131 70 L242.4871131 130 L121.2435565 200 L121.2435565 160 L207.8460969 110 L207.8460969 90 L121.2435565 40 Z"
+          fill="url(#linearGradient-1)"/>
+    <path d="M242.4871131 210 L121.2435565 280 L0 210 L0 70 L121.2435565 0 L181.8653348 35 Q 155.5544457 23.5 121.2435565 40 L34.64101615 90 L34.64101615 190 L121.2435565 240 L242.4871131 170 Z"
+          fill="url(#linearGradient-2)"/>
+    <path d="M173.2050808 170 L121.2435565 200 L69.2820323 170 L69.2820323 110 L121.2435565 80 L155.8845727 100 L103.9230485 130 L103.9230485 150 L121.2435565 160 L173.2050808 130 Z"
+          fill="url(#linearGradient-3)"/>
+</svg>
diff --git a/z_ele/src/assets/wallpaper-01-cover.jpg b/z_ele/src/assets/wallpaper-01-cover.jpg
new file mode 100644
index 0000000..8dcff91
Binary files /dev/null and b/z_ele/src/assets/wallpaper-01-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-01-dark-cover.jpg b/z_ele/src/assets/wallpaper-01-dark-cover.jpg
new file mode 100644
index 0000000..59bffc9
Binary files /dev/null and b/z_ele/src/assets/wallpaper-01-dark-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-01-dark.jpg b/z_ele/src/assets/wallpaper-01-dark.jpg
new file mode 100644
index 0000000..1e38c72
Binary files /dev/null and b/z_ele/src/assets/wallpaper-01-dark.jpg differ
diff --git a/z_ele/src/assets/wallpaper-01.jpg b/z_ele/src/assets/wallpaper-01.jpg
new file mode 100644
index 0000000..9c8429f
Binary files /dev/null and b/z_ele/src/assets/wallpaper-01.jpg differ
diff --git a/z_ele/src/assets/wallpaper-02-cover.jpg b/z_ele/src/assets/wallpaper-02-cover.jpg
new file mode 100644
index 0000000..d54c53a
Binary files /dev/null and b/z_ele/src/assets/wallpaper-02-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-02-dark-cover.jpg b/z_ele/src/assets/wallpaper-02-dark-cover.jpg
new file mode 100644
index 0000000..569914f
Binary files /dev/null and b/z_ele/src/assets/wallpaper-02-dark-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-02-dark.jpg b/z_ele/src/assets/wallpaper-02-dark.jpg
new file mode 100644
index 0000000..f4bf403
Binary files /dev/null and b/z_ele/src/assets/wallpaper-02-dark.jpg differ
diff --git a/z_ele/src/assets/wallpaper-02.jpg b/z_ele/src/assets/wallpaper-02.jpg
new file mode 100644
index 0000000..8bafdf0
Binary files /dev/null and b/z_ele/src/assets/wallpaper-02.jpg differ
diff --git a/z_ele/src/assets/wallpaper-03-cover.jpg b/z_ele/src/assets/wallpaper-03-cover.jpg
new file mode 100644
index 0000000..0d26842
Binary files /dev/null and b/z_ele/src/assets/wallpaper-03-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-03.jpg b/z_ele/src/assets/wallpaper-03.jpg
new file mode 100644
index 0000000..fdc20ee
Binary files /dev/null and b/z_ele/src/assets/wallpaper-03.jpg differ
diff --git a/z_ele/src/assets/wallpaper-04-cover.jpg b/z_ele/src/assets/wallpaper-04-cover.jpg
new file mode 100644
index 0000000..32c7198
Binary files /dev/null and b/z_ele/src/assets/wallpaper-04-cover.jpg differ
diff --git a/z_ele/src/assets/wallpaper-04.jpg b/z_ele/src/assets/wallpaper-04.jpg
new file mode 100644
index 0000000..3f1a8ee
Binary files /dev/null and b/z_ele/src/assets/wallpaper-04.jpg differ
diff --git a/z_ele/src/components/ByteMdEditor/index.vue b/z_ele/src/components/ByteMdEditor/index.vue
new file mode 100644
index 0000000..ca2cb7d
--- /dev/null
+++ b/z_ele/src/components/ByteMdEditor/index.vue
@@ -0,0 +1,143 @@
+<!-- markdown编辑器 -->
+<template>
+  <div ref="rootRef" class="ele-bytemd-wrap"></div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted } from 'vue';
+  import { Editor } from 'bytemd';
+  import type { BytemdPlugin, BytemdLocale, ViewerProps } from 'bytemd';
+  import 'bytemd/dist/index.min.css';
+
+  defineOptions({ name: 'ByteMdEditor' });
+
+  interface EditorConfig {
+    plugins?: BytemdPlugin[];
+    sanitize?: (schema: any) => any;
+    remarkRehype?: Record<any, any>;
+    mode?: 'split' | 'tab' | 'auto';
+    previewDebounce?: number;
+    placeholder?: string;
+    editorConfig?: Record<any, any>;
+    locale?: Partial<BytemdLocale>;
+    uploadImages?: (
+      files: File[]
+    ) => Promise<Pick<any, 'url' | 'alt' | 'title'>[]>;
+    overridePreview?: (el: HTMLElement, props: ViewerProps) => void;
+    maxLength?: number;
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      /** 绑定值 */
+      modelValue: string;
+      /** 编辑器配置 */
+      config?: EditorConfig;
+      /** 高度 */
+      height?: string;
+      /** 全屏时的层级 */
+      fullIndex?: number;
+    }>(),
+    {
+      fullIndex: 999
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+    (e: 'change', value?: string): void;
+  }>();
+
+  /** 编辑器实例 */
+  let editor: InstanceType<typeof Editor> | null = null;
+
+  /** 根节点 */
+  const rootRef = ref<HTMLElement | null>(null);
+
+  // 渲染编辑器
+  onMounted(() => {
+    // @ts-ignore
+    const ins = new Editor({
+      target: rootRef.value as HTMLElement,
+      props: Object.assign({}, props.config, { value: props.modelValue })
+    });
+    // @ts-ignore
+    ins.$on('change', (e: any) => {
+      emit('update:modelValue', e.detail.value);
+      emit('change', e.detail.value);
+    });
+    editor = ins;
+  });
+
+  // 更新配置
+  watch(
+    () => props.config,
+    (config) => {
+      const option = Object.assign({}, config);
+      Object.keys(option).forEach((key) => {
+        if (typeof option[key] === 'undefined') {
+          delete option[key];
+        }
+      });
+      // @ts-ignore
+      editor?.$set?.(option);
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.modelValue,
+    (value) => {
+      // @ts-ignore
+      editor?.$set?.({ value });
+    }
+  );
+
+  defineExpose({ editor });
+</script>
+
+<style lang="scss">
+  .ele-bytemd-wrap {
+    width: 100%;
+    line-height: initial;
+
+    /* 修改编辑器高度 */
+    .bytemd {
+      height: v-bind(height);
+      background: none;
+
+      .CodeMirror {
+        background: none;
+      }
+
+      /* 修改全屏的zIndex */
+      &.bytemd-fullscreen {
+        z-index: v-bind(fullIndex);
+      }
+
+      /* 去掉默认的最大宽度限制 */
+      .CodeMirror .CodeMirror-lines {
+        max-width: 100%;
+      }
+
+      pre.CodeMirror-line,
+      pre.CodeMirror-line-like {
+        padding: 0 24px;
+      }
+
+      .markdown-body {
+        max-width: 100%;
+        padding: 16px 24px;
+      }
+
+      /* 去掉github图标 */
+      .bytemd-toolbar-right > .bytemd-toolbar-icon:last-child {
+        display: none;
+      }
+    }
+  }
+
+  body .markdown-body {
+    background: none;
+  }
+</style>
diff --git a/z_ele/src/components/ByteMdViewer/index.vue b/z_ele/src/components/ByteMdViewer/index.vue
new file mode 100644
index 0000000..e39459d
--- /dev/null
+++ b/z_ele/src/components/ByteMdViewer/index.vue
@@ -0,0 +1,110 @@
+<!-- markdown解析 -->
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div
+    ref="rootRef"
+    v-html="content"
+    class="markdown-body"
+    @click="handleClick"
+  >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import type { BytemdPlugin } from 'bytemd';
+  import { getProcessor } from 'bytemd';
+
+  defineOptions({ name: 'ByteMdViewer' });
+
+  interface ViewerConfig {
+    plugins?: BytemdPlugin[];
+    sanitize?: (schema: any) => any;
+    remarkRehype?: Record<any, any>;
+  }
+
+  const props = defineProps<{
+    value: string;
+    config?: ViewerConfig;
+  }>();
+
+  /** 根节点 */
+  const rootRef = ref<HTMLElement | null>(null);
+
+  /** 解析后内容 */
+  const content = ref<any | null>(null);
+
+  /** 已绑定的插件 */
+  const cbs = ref<(void | (() => void))[]>([]);
+
+  /** 绑定插件 */
+  const on = () => {
+    if (props.config?.plugins && rootRef.value && content.value) {
+      cbs.value = props.config.plugins.map(({ viewerEffect }) => {
+        return (
+          viewerEffect &&
+          viewerEffect({
+            markdownBody: rootRef.value as HTMLElement,
+            file: content.value
+          })
+        );
+      });
+    }
+  };
+
+  /** 解绑插件 */
+  const off = () => {
+    if (cbs.value) {
+      cbs.value.forEach((cb) => cb && cb());
+    }
+  };
+
+  /** 处理点击事件支持锚点 */
+  const handleClick = (e: MouseEvent) => {
+    const $ = e.target as HTMLElement;
+    if ($.tagName !== 'A') {
+      return;
+    }
+    const href = $.getAttribute('href');
+    if (!href || !href.startsWith('#')) {
+      return;
+    }
+    const $root = rootRef.value;
+    if ($root) {
+      const dest = $root.querySelector('#user-content-' + href.slice(1));
+      if (dest) {
+        dest.scrollIntoView();
+      }
+    }
+  };
+
+  // 解析
+  watch(
+    [() => props.value, () => props.config],
+    () => {
+      try {
+        content.value = getProcessor(
+          Object.assign({}, props.config)
+        ).processSync(props.value);
+      } catch (e) {
+        console.error(e);
+      }
+      off();
+      nextTick(() => {
+        on();
+      });
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
+  onMounted(() => {
+    on();
+  });
+
+  onBeforeUnmount(() => {
+    off();
+  });
+</script>
diff --git a/z_ele/src/components/CommonUpload/index.vue b/z_ele/src/components/CommonUpload/index.vue
new file mode 100644
index 0000000..207a92a
--- /dev/null
+++ b/z_ele/src/components/CommonUpload/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <EleUploadList
+    v-model="images"
+    :readonly="readonly"
+    :disabled="disabled"
+    :preview="preview"
+    :limit="limit"
+    :multiple="multiple"
+    :drag="drag"
+    :accept="accept"
+    :itemStyle="itemStyle"
+    :buttonStyle="buttonStyle"
+    :sortable="sortable"
+    :imageProps="imageProps"
+    :progressProps="progressProps"
+    :previewProps="previewProps"
+    :tools="tools"
+    :listType="listType"
+    :beforeUploadClick="beforeUploadClick"
+    :beforeItemEdit="beforeItemEdit"
+    :beforePreview="beforePreview"
+    :locale="locale"
+    @upload="handleItemUpload"
+    @retry="(item) => handleItemUpload(item, true)"
+    @remove="handleItemRemove"
+    @editUpload="handleItemEditUpload"
+    @itemClick="handleItemClick"
+    @preview="handleItemPreview"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleUploadList>
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import type { AxiosProgressEvent } from 'axios';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    ElProgressProps,
+    ElImageProps
+  } from 'ele-admin-plus/es/ele-app/el';
+  import type { EleImageViewerProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type {
+    UploadItem,
+    EditUploadResult,
+    ListType,
+    BeforeUploadClick,
+    BeforeItemEdit,
+    BeforePreview,
+    UploadLocale
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+  import { uploadFile } from '@/api/system/file';
+
+  defineOptions({ name: 'CommonUpload' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 文件大小限制, 单位MB */
+      fileLimit?: number;
+      /** 是否只读 */
+      readonly?: boolean;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 是否支持点击预览 */
+      preview?: boolean;
+      /** 最大上传数量 */
+      limit?: number;
+      /** 是否支持多选文件 */
+      multiple?: boolean;
+      /** 是否启用拖拽上传 */
+      drag?: boolean;
+      /** 接受上传的文件类型 */
+      accept?: string;
+      /** 自定义样式 */
+      itemStyle?: CSSProperties;
+      /** 自定义上传按钮样式 */
+      buttonStyle?: CSSProperties;
+      /** 是否开启拖拽排序 */
+      sortable?: boolean | Record<keyof any, any>;
+      /** 自定义图片属性 */
+      imageProps?: ElImageProps;
+      /** 自定义进度条属性 */
+      progressProps?: ElProgressProps;
+      /** 自定义图片预览属性 */
+      previewProps?: EleImageViewerProps;
+      /** 是否开启底部预览和修改的操作按钮 */
+      tools?: boolean;
+      /** 列表显示样式 */
+      listType?: ListType;
+      /** 上传按钮点击前的钩子 */
+      beforeUploadClick?: BeforeUploadClick;
+      /** 修改按钮点击前的钩子 */
+      beforeItemEdit?: BeforeItemEdit;
+      /** 预览按钮点击前的钩子 */
+      beforePreview?: BeforePreview;
+      /** 国际化 */
+      locale?: Partial<UploadLocale>;
+    }>(),
+    {
+      fileLimit: 100,
+      preview: true,
+      drag: true,
+      accept: '',
+      sortable: () => ({ forceFallback: true }),
+      tools: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'itemClick', item: UploadItem): void;
+    (e: 'preview', item: UploadItem): void;
+  }>();
+
+  /** 已上传数据 */
+  const images = defineModel<UploadItem[]>({
+    type: Array,
+    default: () => []
+  });
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (props.accept === 'image/*') {
+      if (!file.type.startsWith('image')) {
+        EleMessage.error({ message: '只能选择图片', plain: true });
+        return;
+      }
+    } else if (props.accept === '.xls,.xlsx') {
+      if (
+        ![
+          'application/vnd.ms-excel',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        ].includes(file.type)
+      ) {
+        EleMessage.error({ message: '只能选择 excel 文件', plain: true });
+        return;
+      }
+    }
+    if (props.fileLimit && file.size / 1024 / 1024 > props.fileLimit) {
+      EleMessage.error({
+        message: `大小不能超过 ${props.fileLimit}MB`,
+        plain: true
+      });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleItemUpload = (data: UploadItem, retry?: boolean) => {
+    if (!data.file || !checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      images.value.push({ ...data });
+    }
+    const item = images.value.find((t) => t.key === data.key);
+    if (!item) {
+      return;
+    }
+    item.status = 'uploading';
+    item.progress = 0;
+    uploadFile(data.file, {
+      onUploadProgress: (e: AxiosProgressEvent) => {
+        if (e.total != null && item.status !== 'done') {
+          item.progress = (e.loaded / e.total) * 100;
+        }
+      }
+    })
+      .then((res) => {
+        item.progress = 100;
+        item.status = 'done';
+        item.url = res.url;
+        item.response = res;
+      })
+      .catch((e) => {
+        item.status = 'exception';
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 修改事件 */
+  const handleItemEditUpload = ({ item, newItem }: EditUploadResult) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = images.value.find((t) => t.key === item.key);
+    if (oldItem) {
+      oldItem.url = void 0;
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.progress = 0;
+      oldItem.status = void 0;
+      handleItemUpload(oldItem, true);
+    }
+  };
+
+  /** 删除事件 */
+  const handleItemRemove = (item: UploadItem) => {
+    images.value.splice(images.value.indexOf(item), 1);
+  };
+
+  /** 点击事件 */
+  const handleItemClick = (item: UploadItem) => {
+    emit('itemClick', item);
+  };
+
+  /** 预览事件 */
+  const handleItemPreview = (item: UploadItem) => {
+    emit('preview', item);
+  };
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-day.vue b/z_ele/src/components/CronBuilder/components/cron-day.vue
new file mode 100644
index 0000000..ef92e5b
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-day.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每日，允许的通配符[, - * ? / L W]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;号到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;号</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;号开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;天执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+      <ElRadio value="workday" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>每月&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="workday"
+              :min="minValue"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;号最近的一个工作日</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="last" label="本月最后一天" />
+      <ElRadio value="unset" label="不指定" />
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 1;
+  const maxValue = 31;
+
+  /** day */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue);
+
+  /** 工作日 */
+  const workday = ref(1);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections, workday],
+    () => {
+      if (type.value === 'workday') {
+        model.value = `${workday.value}W`;
+        return;
+      }
+      if (type.value === 'last') {
+        model.value = 'L';
+        return;
+      }
+      if (type.value === 'unset') {
+        model.value = '?';
+        return;
+      }
+      model.value = getValue();
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+
+  watch(
+    model,
+    (day) => {
+      if (day != null && day.endsWith('W')) {
+        type.value = 'workday';
+        workday.value = Number(day.slice(0, -1));
+        return;
+      }
+      if (day === 'L') {
+        type.value = 'last';
+        return;
+      }
+      if (day === '?') {
+        type.value = 'unset';
+        return;
+      }
+      parseValue(day);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-hour.vue b/z_ele/src/components/CronBuilder/components/cron-hour.vue
new file mode 100644
index 0000000..60109f7
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-hour.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每小时，允许的通配符[, - * /]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;点到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;点</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;点开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;个小时执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 0;
+  const maxValue = 23;
+
+  /** hour */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (hour) => {
+      parseValue(hour);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-minute.vue b/z_ele/src/components/CronBuilder/components/cron-minute.vue
new file mode 100644
index 0000000..c053ae9
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-minute.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每分钟，允许的通配符[, - * /]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;分到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;分</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;分开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;分钟执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 0;
+  const maxValue = 59;
+
+  /** minute */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (minute) => {
+      parseValue(minute);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-month.vue b/z_ele/src/components/CronBuilder/components/cron-month.vue
new file mode 100644
index 0000000..caaa66d
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-month.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每月，允许的通配符[, - * /]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;月到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;月</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;月开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;个月执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 1;
+  const maxValue = 12;
+
+  /** month */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (month) => {
+      parseValue(month);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-panel.vue b/z_ele/src/components/CronBuilder/components/cron-panel.vue
new file mode 100644
index 0000000..d3e4353
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-panel.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="cron-panel">
+    <div class="cron-panel-main">
+      <EleTabs
+        :addable="true"
+        type="border-card"
+        v-model="tabActive"
+        :items="[
+          { name: 'second', label: '秒' },
+          { name: 'minute', label: '分钟' },
+          { name: 'hour', label: '小时' },
+          { name: 'day', label: '日' },
+          { name: 'month', label: '月' },
+          { name: 'week', label: '周' },
+          { name: 'year', label: '年' }
+        ]"
+        @tab-add="openCronList"
+      >
+        <template #second>
+          <CronSecond v-model="second" />
+        </template>
+        <template #minute>
+          <CronMinute v-model="minute" />
+        </template>
+        <template #hour>
+          <CronHour v-model="hour" />
+        </template>
+        <template #day>
+          <CronDay v-model="day" />
+        </template>
+        <template #month>
+          <CronMonth v-model="month" />
+        </template>
+        <template #week>
+          <CronWeek v-model="week" />
+        </template>
+        <template #year>
+          <CronYear v-model="year" />
+        </template>
+        <template #add-icon>
+          <div>常用</div>
+        </template>
+      </EleTabs>
+    </div>
+    <div class="cron-panel-extra">
+      <div class="cron-panel-extra-item">
+        <div class="cron-panel-extra-header">结果</div>
+        <div class="cron-panel-extra-body">
+          <div class="cron-panel-result">
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">秒</div>
+              <div class="cron-panel-result-text">{{ second }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">分钟</div>
+              <div class="cron-panel-result-text">{{ minute }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">小时</div>
+              <div class="cron-panel-result-text">{{ hour }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">日</div>
+              <div class="cron-panel-result-text">{{ day }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">月</div>
+              <div class="cron-panel-result-text">{{ month }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">周</div>
+              <div class="cron-panel-result-text">{{ week }}</div>
+            </div>
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">年</div>
+              <div class="cron-panel-result-text">{{ year }}</div>
+            </div>
+          </div>
+          <div class="cron-panel-result">
+            <div class="cron-panel-result-item">
+              <div class="cron-panel-result-title">Cron 表达式</div>
+              <div
+                class="cron-panel-result-text"
+                :style="{ minWidth: '270px' }"
+              >
+                {{ model }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cron-panel-extra-item">
+        <div class="cron-panel-extra-header">最近 5 次运行时间</div>
+        <div class="cron-panel-extra-body">
+          <ul class="cron-panel-test">
+            <li
+              v-for="item in resultItems"
+              :key="item"
+              class="cron-panel-test-item"
+            >
+              {{ item }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!-- 常用列表 -->
+    <div
+      :class="['cron-list-mask', { 'is-show': cronListVisible }]"
+      @click="hideCronList"
+    >
+      <div class="cron-list-wrapper" @click.stop="">
+        <div
+          v-for="item in cronList"
+          :key="item.cron"
+          class="cron-list-item"
+          @click="handleItemClick(item)"
+        >
+          <div class="cron-list-item-value">{{ item.cron }}</div>
+          <div class="cron-list-item-label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import CronSecond from './cron-second.vue';
+  import CronMinute from './cron-minute.vue';
+  import CronHour from './cron-hour.vue';
+  import CronDay from './cron-day.vue';
+  import CronMonth from './cron-month.vue';
+  import CronWeek from './cron-week.vue';
+  import CronYear from './cron-year.vue';
+  import { getResultItems } from './util';
+
+  /** cron */
+  const model = defineModel<string>({ type: String });
+
+  /** 选项卡选中 */
+  const tabActive = ref('second');
+
+  /** 秒 */
+  const second = ref('*');
+
+  /** 分 */
+  const minute = ref('*');
+
+  /** 时 */
+  const hour = ref('*');
+
+  /** 日 */
+  const day = ref('*');
+
+  /** 月 */
+  const month = ref('*');
+
+  /** 星期 */
+  const week = ref('?');
+
+  /** 年 */
+  const year = ref('');
+
+  /** 最近 5 次运行时间 */
+  const resultItems = ref<string[]>([]);
+
+  /** 更新计算 */
+  const updateCron = () => {
+    const values = [
+      second.value,
+      minute.value,
+      hour.value,
+      day.value,
+      month.value,
+      week.value
+    ];
+    if (year.value != null && year.value !== '') {
+      values.push(year.value);
+    }
+    const cron = values.join(' ');
+    model.value = cron;
+    return cron;
+  };
+
+  /** 数据修正 */
+  watch(hour, (h) => {
+    if (h !== '*' && second.value === '*') {
+      second.value = '0';
+    }
+    if (h !== '*' && minute.value === '*') {
+      minute.value = '0';
+    }
+  });
+
+  watch(day, (d) => {
+    if (d !== '?' && week.value !== '?') {
+      week.value = '?';
+    }
+  });
+
+  watch(week, (w) => {
+    if (w !== '?' && day.value !== '?') {
+      day.value = '?';
+    }
+  });
+
+  /** 拼接 cron 表达式 */
+  watch(
+    [second, minute, hour, day, month, week, year],
+    () => {
+      updateCron();
+    },
+    { immediate: true }
+  );
+
+  /** 同步数据 */
+  watch(model, (cron) => {
+    if (!cron) {
+      tabActive.value = 'second';
+      second.value = '*';
+      minute.value = '*';
+      hour.value = '*';
+      day.value = '*';
+      month.value = '*';
+      week.value = '?';
+      year.value = '';
+      const str = updateCron();
+      resultItems.value = getResultItems(str);
+      return;
+    }
+    const [s, m, h, d, m2, w, y] = cron.split(' ');
+    second.value = s;
+    minute.value = m;
+    hour.value = h;
+    day.value = d;
+    month.value = m2;
+    week.value = w;
+    year.value = y || '';
+    resultItems.value = getResultItems(cron);
+  });
+
+  /** 是否显示常用列表 */
+  const cronListVisible = ref(false);
+
+  /** 常用列表数据 */
+  const cronList = ref([
+    { cron: '0 * * * * ?', label: '每分钟' },
+    { cron: '0 0 * * * ?', label: '每小时' },
+    { cron: '0 0/30 * * * ?', label: '每半个小时' },
+    { cron: '0 0/30 8-9 * * ?', label: '8 点到 9 点每半个小时' },
+    { cron: '0 0 0 * * ?', label: '每天 0 点' },
+    { cron: '0 30 8 * * ?', label: '每天 8:30' },
+    { cron: '0 0 8,14,19 * * ?', label: '每天 8 点 14 点 19 点' },
+    { cron: '0 0 0 1 * ?', label: '每月 1 号 0 点' },
+    { cron: '0 0 2 1 * ?', label: '每月 1 号 2 点' },
+    { cron: '0 30 8 15 * ?', label: '每月 15 号 8:30' },
+    { cron: '0 0 0 L * ?', label: '每月最后一天 0 点' },
+    { cron: '0 30 8 L * ?', label: '每月最后一天 8:30' },
+    { cron: '0 30 8 ? * 6L', label: '每月最后一个星期五 8:30' },
+    { cron: '0 0 0 ? * 1', label: '每周星期日 0 点' },
+    { cron: '0 0 8 ? * 2-4', label: '每周星期一到星期三 8 点' },
+    { cron: '0 0 0 1 10 ? 2025-2028', label: '2025 年至 2028 年每 10 月 1 号' }
+  ]);
+
+  /** 打开常用列表 */
+  const openCronList = () => {
+    cronListVisible.value = true;
+  };
+
+  /** 关闭常用列表 */
+  const hideCronList = () => {
+    cronListVisible.value = false;
+  };
+
+  /** 常用选择 */
+  const handleItemClick = (item: any) => {
+    model.value = item.cron;
+    hideCronList();
+  };
+
+  defineExpose({ hideCronList });
+</script>
+
+<style scoped lang="scss">
+  .cron-panel {
+    position: relative;
+
+    :deep(.ele-tabs) {
+      --ele-tab-height: 32px;
+
+      .el-tabs__content {
+        padding: 0;
+      }
+
+      .el-tabs__new-tab {
+        flex-shrink: 0;
+        width: 36px;
+        margin: 0 6px 0 0;
+      }
+    }
+  }
+
+  /* 内容 */
+  .cron-panel :deep(.cron-panel-content) {
+    height: 360px;
+    padding: 12px 20px 0 20px;
+    overflow: auto;
+    box-sizing: border-box;
+
+    > .el-radio-group {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: min-content;
+      min-width: 100%;
+
+      & > .el-radio {
+        margin: 0;
+
+        & + .el-radio {
+          margin-top: 8px;
+        }
+      }
+    }
+
+    .cron-panel-options {
+      padding: 6px 0 0 2px;
+      white-space: normal;
+
+      .el-checkbox {
+        margin: 0;
+        width: 66px;
+        height: 26px;
+      }
+    }
+  }
+
+  /* 底栏 */
+  .cron-panel-extra {
+    border: 1px solid var(--el-border-color-light);
+    border-top: none;
+    display: flex;
+  }
+
+  .cron-panel-extra-item {
+    flex-shrink: 0;
+    box-sizing: border-box;
+
+    &:first-child {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    & + .cron-panel-extra-item {
+      min-width: 220px;
+      border-left: 1px solid var(--el-border-color-light);
+    }
+  }
+
+  .cron-panel-extra-header {
+    height: 28px;
+    line-height: 28px;
+    font-size: 13px;
+    padding: 0 16px;
+    background: var(--el-fill-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-light);
+    box-sizing: border-box;
+    text-align: center;
+  }
+
+  .cron-panel-extra-body {
+    padding: 6px 0;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  /* 结果 */
+  .cron-panel-result {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 8px;
+    min-width: max-content;
+
+    & + .cron-panel-result {
+      margin: 12px 0 8px 0;
+    }
+  }
+
+  .cron-panel-result-item {
+    flex-shrink: 0;
+  }
+
+  .cron-panel-result-title {
+    font-size: 12px;
+    text-align: center;
+    margin-bottom: 2px;
+  }
+
+  .cron-panel-result-text {
+    font-size: 12px;
+    text-align: center;
+    min-width: 32px;
+    max-width: 100%;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 4px;
+    border-radius: 4px;
+    border: 1px solid var(--el-border-color);
+    box-sizing: border-box;
+  }
+
+  /* 最近运行时间 */
+  .cron-panel-test {
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+    width: max-content;
+    margin: 0 auto;
+  }
+
+  .cron-panel-test-item {
+    line-height: 22px;
+
+    &::marker {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  }
+
+  /* 常用列表 */
+  .cron-list-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+
+    &:not(.is-show) {
+      pointer-events: none;
+
+      .cron-list-wrapper {
+        opacity: 0;
+        transform: scale(0.6);
+        pointer-events: none;
+        visibility: hidden;
+      }
+    }
+  }
+
+  .cron-list-wrapper {
+    width: max-content;
+    max-height: calc(100% - 36px);
+    margin: 36px 0 0 auto;
+    padding: 8px;
+    border-radius: 6px;
+    background: var(--el-bg-color-overlay);
+    box-shadow: var(--el-box-shadow-light);
+    transition: all $transition-slow;
+    transform-origin: top right;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .cron-list-item {
+    padding: 6px 8px 2px 8px;
+    border: 1px solid var(--el-border-color);
+    border-radius: 4px;
+    transition: all 0.2s;
+    cursor: pointer;
+
+    & + .cron-list-item {
+      margin-top: 8px;
+    }
+
+    &:hover {
+      background: var(--el-fill-color-lighter);
+    }
+  }
+
+  .cron-list-item-label {
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: 2px;
+    opacity: 0.8;
+  }
+
+  .cron-list-item-value {
+    height: 18px;
+    line-height: 18px;
+    font-size: 12px;
+    border-radius: 4px;
+    padding: 0 6px;
+    width: max-content;
+    background: var(--el-color-info-light-9);
+    border: 1px solid var(--el-border-color);
+  }
+
+  /* 小屏幕 */
+  @media screen and (max-width: 768px) {
+    .cron-panel :deep(.cron-panel-content) {
+      height: 220px;
+    }
+
+    .cron-panel-extra {
+      flex-direction: column;
+
+      .cron-panel-extra-item {
+        flex: none;
+
+        & + .cron-panel-extra-item {
+          border-top: 1px solid var(--el-border-color-light);
+          border-left: none;
+        }
+      }
+    }
+
+    .cron-panel-result {
+      gap: 2px;
+    }
+  }
+</style>
diff --git a/z_ele/src/components/CronBuilder/components/cron-second.vue b/z_ele/src/components/CronBuilder/components/cron-second.vue
new file mode 100644
index 0000000..a77a974
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-second.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每秒，允许的通配符[, - * /]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;秒到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;秒</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;秒开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;秒执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 0;
+  const maxValue = 59;
+
+  /** second */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (second) => {
+      parseValue(second);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-week.vue b/z_ele/src/components/CronBuilder/components/cron-week.vue
new file mode 100644
index 0000000..9d43328
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-week.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每周，允许的通配符[, - * ? / L #]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从星期&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;到星期&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>第&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="4"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;周的每星期&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="minValue"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="weekNames[item - 1 - 1]"
+                :style="{ width: '98px' }"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+      <ElRadio value="last" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>每月最后一个星期&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="lastWeek"
+              :min="minValue"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+        </div>
+      </ElRadio>
+      <ElRadio value="unset" label="不指定" />
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 1;
+  const maxValue = 7;
+  const weekNames = [
+    '1 星期日',
+    '2 星期一',
+    '3 星期二',
+    '4 星期三',
+    '5 星期四',
+    '6 星期五',
+    '7 星期六'
+  ];
+
+  /** week */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue, 'unset');
+
+  /** 最后一个星期几 */
+  const lastWeek = ref(1);
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      if (type.value === 'last') {
+        model.value = `${lastWeek.value}L`;
+        return;
+      }
+      if (type.value === 'unset') {
+        model.value = '?';
+        return;
+      }
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (week) => {
+      if (week != null && week.endsWith('L')) {
+        type.value = 'last';
+        lastWeek.value = Number(week.slice(0, -1));
+        return;
+      }
+      if (week === '?') {
+        type.value = 'unset';
+        return;
+      }
+      parseValue(week);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/cron-year.vue b/z_ele/src/components/CronBuilder/components/cron-year.vue
new file mode 100644
index 0000000..cce4b7b
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/cron-year.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="cron-panel-content">
+    <ElRadioGroup v-model="type">
+      <ElRadio value="every" label="每年，允许的通配符[, - * /]" />
+      <ElRadio value="range" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>范围，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="start"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;年到&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="end"
+              :min="endMin"
+              :max="maxValue"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;年</div>
+        </div>
+      </ElRadio>
+      <ElRadio value="interval" :style="{ height: 'auto' }">
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <div>间隔，</div>
+          <div>从&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStart"
+              :min="minValue"
+              :max="maxValue - 1"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;年开始，每&emsp;</div>
+          <div :style="{ width: '98px' }">
+            <ElInputNumber
+              v-model="intervalStep"
+              :min="1"
+              :max="intervalStepMax"
+              placeholder=""
+              controlsPosition="right"
+              class="ele-fluid"
+            />
+          </div>
+          <div>&emsp;年执行一次</div>
+        </div>
+      </ElRadio>
+      <ElRadio
+        value="specified"
+        :style="{
+          height: 'auto',
+          padding: '4px 0 0 0',
+          alignItems: 'flex-start'
+        }"
+      >
+        <div>指定</div>
+        <div class="cron-panel-options">
+          <ElCheckboxGroup v-model="selections">
+            <template v-for="item in maxValue + 1" :key="item">
+              <ElCheckbox
+                v-if="item - 1 >= minValue"
+                :value="item - 1"
+                :label="item - 1"
+              />
+            </template>
+          </ElCheckboxGroup>
+        </div>
+      </ElRadio>
+      <ElRadio value="unset" label="不指定" />
+    </ElRadioGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import { useCron } from './util';
+  const minValue = 2024;
+  const maxValue = 2054;
+
+  /** year */
+  const model = defineModel<string>({ type: String });
+
+  const {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  } = useCron(minValue, maxValue, 'unset');
+
+  watch(
+    [type, start, end, intervalStart, intervalStep, selections],
+    () => {
+      if (type.value === 'unset') {
+        model.value = '';
+        return;
+      }
+      model.value = getValue();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    model,
+    (year) => {
+      if (year == null || year === '' || year === '?') {
+        type.value = 'unset';
+        return;
+      }
+      parseValue(year);
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/CronBuilder/components/util.ts b/z_ele/src/components/CronBuilder/components/util.ts
new file mode 100644
index 0000000..cf31465
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/components/util.ts
@@ -0,0 +1,705 @@
+import { ref, computed, watch } from 'vue';
+
+/**
+ * 任意* 范围 间隔 指定 通用封装
+ * @param minValue 最小值
+ * @param maxValue 最大值
+ * @param defaultType 默认类型
+ */
+export function useCron(
+  minValue: number,
+  maxValue: number,
+  defaultType?: string
+) {
+  /** 类型 */
+  const type = ref<string>(defaultType || 'every');
+
+  /** 开始值 */
+  const start = ref(0);
+
+  /** 结束值 */
+  const end = ref(1);
+
+  /** 结束值最小值 */
+  const endMin = computed(() => (start.value || 0) + 1);
+
+  /** 间隔起始值 */
+  const intervalStart = ref(0);
+
+  /** 间隔步数 */
+  const intervalStep = ref(1);
+
+  /** 间隔步数最大值 */
+  const intervalStepMax = computed(() => maxValue - (intervalStart.value || 0));
+
+  /** 指定时选中数据 */
+  const selections = ref<number[]>([]);
+
+  /** 获取值 */
+  const getValue = () => {
+    switch (type.value) {
+      case 'every':
+        return '*';
+      case 'range':
+        // eslint-disable-next-line no-case-declarations
+        const s = Math.min(Math.max(start.value, minValue), maxValue - 1);
+        // eslint-disable-next-line no-case-declarations
+        const e = Math.min(Math.max(end.value, endMin.value), maxValue);
+        return `${s}-${e}`;
+      case 'interval':
+        // eslint-disable-next-line no-case-declarations
+        const v = Math.min(
+          Math.max(intervalStart.value, minValue),
+          maxValue - 1
+        );
+        // eslint-disable-next-line no-case-declarations
+        const step = Math.min(
+          Math.max(intervalStep.value, 1),
+          intervalStepMax.value
+        );
+        return `${v}/${step}`;
+      case 'specified':
+        return selections.value.join() || String(minValue);
+    }
+  };
+
+  /** 解析值 */
+  const parseValue = (str?: string) => {
+    if (str == null || str === '') {
+      return;
+    }
+    if (str === '*') {
+      type.value = 'every';
+      return;
+    }
+    if (str.includes('-')) {
+      type.value = 'range';
+      const [s, e] = str.split('-');
+      start.value = Number(s);
+      end.value = Number(e);
+      return;
+    }
+    if (str.includes('/')) {
+      type.value = 'interval';
+      const [v, step] = str.split('/');
+      intervalStart.value = Number(v);
+      intervalStep.value = Number(step);
+      return;
+    }
+    type.value = 'specified';
+    selections.value = str.split(',').map((d) => Number(d));
+  };
+
+  /** 范围最小值纠正 */
+  watch(endMin, () => {
+    if (end.value != null && end.value < endMin.value) {
+      end.value = endMin.value;
+    }
+  });
+
+  /** 间隔最大值纠正 */
+  watch(intervalStepMax, () => {
+    if (
+      intervalStep.value != null &&
+      intervalStep.value > intervalStepMax.value
+    ) {
+      intervalStep.value = intervalStepMax.value;
+    }
+  });
+
+  return {
+    type,
+    start,
+    end,
+    endMin,
+    intervalStart,
+    intervalStep,
+    intervalStepMax,
+    selections,
+    getValue,
+    parseValue
+  };
+}
+
+/**
+ * 计算最近 5 次运行时间
+ * @param cron Cron 表达式
+ */
+export function getResultItems(cron: string) {
+  if (!cron) {
+    return [];
+  }
+  let dayRule = '';
+  let dayRuleSup: string | number | number[] = '';
+  const dateArr: number[][] = [];
+
+  // 用于计算某位数字在数组中的索引
+  function getIndex(arr: number[], value: number) {
+    if (value <= arr[0] || value > arr[arr.length - 1]) {
+      return 0;
+    } else {
+      for (let i = 0; i < arr.length - 1; i++) {
+        if (value > arr[i] && value <= arr[i + 1]) {
+          return i + 1;
+        }
+      }
+    }
+  }
+
+  // 获取"年"数组
+  function getYearArr(rule: string, year: number) {
+    dateArr[5] = getOrderArr(year, year + 100);
+    if (rule != null) {
+      if (rule.indexOf('-') >= 0) {
+        dateArr[5] = getCycleArr(rule, year + 100, false);
+      } else if (rule.indexOf('/') >= 0) {
+        dateArr[5] = getAverageArr(rule, year + 100);
+      } else if (rule !== '*') {
+        dateArr[5] = getAssignArr(rule);
+      }
+    }
+  }
+
+  // 获取"月"数组
+  function getMonthArr(rule: string) {
+    dateArr[4] = getOrderArr(1, 12);
+    if (rule.indexOf('-') >= 0) {
+      dateArr[4] = getCycleArr(rule, 12, false);
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr[4] = getAverageArr(rule, 12);
+    } else if (rule !== '*') {
+      dateArr[4] = getAssignArr(rule);
+    }
+  }
+
+  // 获取"日"数组-主要为日期规则
+  function getWeekArr(rule: string) {
+    // 只有当日期规则的两个值均为“”时则表达日期是有选项的
+    if (dayRule == '' && dayRuleSup == '') {
+      if (rule.indexOf('-') >= 0) {
+        dayRule = 'weekDay';
+        dayRuleSup = getCycleArr(rule, 7, false);
+      } else if (rule.indexOf('#') >= 0) {
+        dayRule = 'assWeek';
+        const matchRule = rule.match(/[0-9]{1}/g) ?? [];
+        dayRuleSup = [Number(matchRule[1]), Number(matchRule[0])];
+        dateArr[3] = [1];
+        if (dayRuleSup[1] == 7) {
+          dayRuleSup[1] = 0;
+        }
+      } else if (rule.indexOf('L') >= 0) {
+        dayRule = 'lastWeek';
+        dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)?.[0]);
+        dateArr[3] = [31];
+        if (dayRuleSup == 7) {
+          dayRuleSup = 0;
+        }
+      } else if (rule !== '*' && rule !== '?') {
+        dayRule = 'weekDay';
+        dayRuleSup = getAssignArr(rule);
+      }
+    }
+  }
+
+  // 获取"日"数组-少量为日期规则
+  function getDayArr(rule: string) {
+    dateArr[3] = getOrderArr(1, 31);
+    dayRule = '';
+    dayRuleSup = '';
+    if (rule.indexOf('-') >= 0) {
+      dateArr[3] = getCycleArr(rule, 31, false);
+      dayRuleSup = 'null';
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr[3] = getAverageArr(rule, 31);
+      dayRuleSup = 'null';
+    } else if (rule.indexOf('W') >= 0) {
+      dayRule = 'workDay';
+      dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)?.[0]);
+      dateArr[3] = [dayRuleSup];
+    } else if (rule.indexOf('L') >= 0) {
+      dayRule = 'lastDay';
+      dayRuleSup = 'null';
+      dateArr[3] = [31];
+    } else if (rule !== '*' && rule !== '?') {
+      dateArr[3] = getAssignArr(rule);
+      dayRuleSup = 'null';
+    } else if (rule == '*') {
+      dayRuleSup = 'null';
+    }
+  }
+
+  // 获取"时"数组
+  function getHourArr(rule: string) {
+    dateArr[2] = getOrderArr(0, 23);
+    if (rule.indexOf('-') >= 0) {
+      dateArr[2] = getCycleArr(rule, 24, true);
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr[2] = getAverageArr(rule, 23);
+    } else if (rule !== '*') {
+      dateArr[2] = getAssignArr(rule);
+    }
+  }
+
+  // 获取"分"数组
+  function getMinArr(rule: string) {
+    dateArr[1] = getOrderArr(0, 59);
+    if (rule.indexOf('-') >= 0) {
+      dateArr[1] = getCycleArr(rule, 60, true);
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr[1] = getAverageArr(rule, 59);
+    } else if (rule !== '*') {
+      dateArr[1] = getAssignArr(rule);
+    }
+  }
+
+  // 获取"秒"数组
+  function getSecondArr(rule: string) {
+    dateArr[0] = getOrderArr(0, 59);
+    if (rule.indexOf('-') >= 0) {
+      dateArr[0] = getCycleArr(rule, 60, true);
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr[0] = getAverageArr(rule, 59);
+    } else if (rule !== '*') {
+      dateArr[0] = getAssignArr(rule);
+    }
+  }
+
+  // 根据传进来的min-max返回一个顺序的数组
+  function getOrderArr(min: number, max: number) {
+    const arr: number[] = [];
+    for (let i = min; i <= max; i++) {
+      arr.push(i);
+    }
+    return arr;
+  }
+
+  // 根据规则中指定的零散值返回一个数组
+  function getAssignArr(rule: string) {
+    const arr: number[] = [];
+    const assiginArr = rule.split(',');
+    for (let i = 0; i < assiginArr.length; i++) {
+      arr[i] = Number(assiginArr[i]);
+    }
+    arr.sort(compare);
+    return arr;
+  }
+
+  // 根据一定算术规则计算返回一个数组
+  function getAverageArr(rule: string, limit: number) {
+    const arr: number[] = [];
+    const agArr = rule.split('/');
+    let min = Number(agArr[0]);
+    const step = Number(agArr[1]);
+    while (min <= limit) {
+      arr.push(min);
+      min += step;
+    }
+    return arr;
+  }
+
+  // 根据规则返回一个具有周期性的数组
+  function getCycleArr(rule: string, limit: number, status?: boolean) {
+    // status--表示是否从0开始（则从1开始）
+    const arr: number[] = [];
+    const cycleArr = rule.split('-');
+    const min = Number(cycleArr[0]);
+    let max = Number(cycleArr[1]);
+    if (min > max) {
+      max += limit;
+    }
+    for (let i = min; i <= max; i++) {
+      let add = 0;
+      if (status == false && i % limit == 0) {
+        add = limit;
+      }
+      arr.push(Math.round((i % limit) + add));
+    }
+    arr.sort(compare);
+    return arr;
+  }
+
+  // 比较数字大小（用于Array.sort）
+  function compare(value1: number, value2: number) {
+    if (value2 - value1 > 0) {
+      return -1;
+    } else {
+      return 1;
+    }
+  }
+
+  // 格式化日期格式如：2017-9-19 18:04:33
+  function formatDate(value: number | Date, type?: string) {
+    // 计算日期相关值
+    const time = typeof value == 'number' ? new Date(value) : value;
+    const Y = time.getFullYear();
+    const M = time.getMonth() + 1;
+    const D = time.getDate();
+    const h = time.getHours();
+    const m = time.getMinutes();
+    const s = time.getSeconds();
+    const week = time.getDay();
+    // 如果传递了type的话
+    if (type == null) {
+      return (
+        Y +
+        '-' +
+        (M < 10 ? '0' + M : M) +
+        '-' +
+        (D < 10 ? '0' + D : D) +
+        ' ' +
+        (h < 10 ? '0' + h : h) +
+        ':' +
+        (m < 10 ? '0' + m : m) +
+        ':' +
+        (s < 10 ? '0' + s : s)
+      );
+    } else if (type == 'week') {
+      // 在quartz中 1为星期日
+      return week + 1;
+    }
+  }
+
+  // 检查日期是否存在
+  function checkDate(value: number | string) {
+    const time = new Date(value);
+    const format = formatDate(time);
+    return value === format;
+  }
+
+  // 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
+  const ruleArr = cron.split(' ');
+  // 用于记录进入循环的次数
+  let nums = 0;
+  // 用于暂时存符号时间规则结果的数组
+  const resultArr: string[] = [];
+  // 获取当前时间精确至[年、月、日、时、分、秒]
+  const nTime = new Date();
+  const nYear = nTime.getFullYear();
+  let nMonth = nTime.getMonth() + 1;
+  let nDay = nTime.getDate();
+  let nHour = nTime.getHours();
+  let nMin = nTime.getMinutes();
+  let nSecond = nTime.getSeconds();
+  // 根据规则获取到近100年可能年数组、月数组等等
+  getSecondArr(ruleArr[0]);
+  getMinArr(ruleArr[1]);
+  getHourArr(ruleArr[2]);
+  getDayArr(ruleArr[3]);
+  getMonthArr(ruleArr[4]);
+  getWeekArr(ruleArr[5]);
+  getYearArr(ruleArr[6], nYear);
+  // 将获取到的数组赋值-方便使用
+  const sDate = dateArr[0];
+  const mDate = dateArr[1];
+  const hDate = dateArr[2];
+  const DDate = dateArr[3];
+  const MDate = dateArr[4];
+  const YDate = dateArr[5];
+  // 获取当前时间在数组中的索引
+  let sIdx = getIndex(sDate, nSecond) as number;
+  let mIdx = getIndex(mDate, nMin) as number;
+  let hIdx = getIndex(hDate, nHour) as number;
+  let DIdx = getIndex(DDate, nDay) as number;
+  let MIdx = getIndex(MDate, nMonth) as number;
+  const YIdx = getIndex(YDate, nYear) as number;
+  // 重置月日时分秒的函数(后面用的比较多)
+  const resetSecond = function () {
+    sIdx = 0;
+    nSecond = sDate[sIdx];
+  };
+  const resetMin = function () {
+    mIdx = 0;
+    nMin = mDate[mIdx];
+    resetSecond();
+  };
+  const resetHour = function () {
+    hIdx = 0;
+    nHour = hDate[hIdx];
+    resetMin();
+  };
+  const resetDay = function () {
+    DIdx = 0;
+    nDay = DDate[DIdx];
+    resetHour();
+  };
+  const resetMonth = function () {
+    MIdx = 0;
+    nMonth = MDate[MIdx];
+    resetDay();
+  };
+  // 如果当前年份不为数组中当前值
+  if (nYear !== YDate[YIdx]) {
+    resetMonth();
+  }
+  // 如果当前月份不为数组中当前值
+  if (nMonth !== MDate[MIdx]) {
+    resetDay();
+  }
+  // 如果当前“日”不为数组中当前值
+  if (nDay !== DDate[DIdx]) {
+    resetHour();
+  }
+  // 如果当前“时”不为数组中当前值
+  if (nHour !== hDate[hIdx]) {
+    resetMin();
+  }
+  // 如果当前“分”不为数组中当前值
+  if (nMin !== mDate[mIdx]) {
+    resetSecond();
+  }
+
+  // 循环年份数组
+  goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
+    const YY = YDate[Yi];
+    // 如果到达最大值时
+    if (nMonth > MDate[MDate.length - 1]) {
+      resetMonth();
+      continue;
+    }
+    // 循环月份数组
+    goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
+      // 赋值、方便后面运算
+      let MM: number | string = MDate[Mi];
+      MM = MM < 10 ? '0' + MM : MM;
+      // 如果到达最大值时
+      if (nDay > DDate[DDate.length - 1]) {
+        resetDay();
+        if (Mi == MDate.length - 1) {
+          resetMonth();
+          continue goYear;
+        }
+        continue;
+      }
+      // 循环日期数组
+      goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
+        // 赋值、方便后面运算
+        let DD: string | number = DDate[Di];
+        let thisDD = DD < 10 ? '0' + DD : DD;
+
+        // 如果到达最大值时
+        if (nHour > hDate[hDate.length - 1]) {
+          resetHour();
+          if (Di == DDate.length - 1) {
+            resetDay();
+            if (Mi == MDate.length - 1) {
+              resetMonth();
+              continue goYear;
+            }
+            continue goMonth;
+          }
+          continue;
+        }
+
+        // 判断日期的合法性，不合法的话也是跳出当前循环
+        if (
+          checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true &&
+          dayRule !== 'workDay' &&
+          dayRule !== 'lastWeek' &&
+          dayRule !== 'lastDay'
+        ) {
+          resetDay();
+          continue goMonth;
+        }
+        // 如果日期规则中有值时
+        if (dayRule == 'lastDay') {
+          // 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (
+              DD > 0 &&
+              checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true
+            ) {
+              DD--;
+              thisDD = DD < 10 ? '0' + DD : DD;
+            }
+          }
+        } else if (dayRule == 'workDay') {
+          // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (
+              DD > 0 &&
+              checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true
+            ) {
+              DD--;
+              thisDD = DD < 10 ? '0' + DD : DD;
+            }
+          }
+          // 获取达到条件的日期是星期X
+          const thisWeek = formatDate(
+            new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'),
+            'week'
+          );
+          // 当星期日时
+          if (thisWeek == 1) {
+            // 先找下一个日，并判断是否为月底
+            DD++;
+            thisDD = DD < 10 ? '0' + DD : DD;
+            // 判断下一日已经不是合法日期
+            if (
+              checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true
+            ) {
+              DD -= 3;
+            }
+          } else if (thisWeek == 7) {
+            // 当星期6时只需判断不是1号就可进行操作
+            if ((dayRuleSup as unknown as number) !== 1) {
+              DD--;
+            } else {
+              DD += 2;
+            }
+          }
+        } else if (dayRule == 'weekDay') {
+          // 如果指定了是星期几
+          // 获取当前日期是属于星期几
+          const thisWeek = formatDate(
+            new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'),
+            'week'
+          );
+          // 校验当前星期是否在星期池（dayRuleSup）中
+          if (dayRuleSup.indexOf(thisWeek as string) < 0) {
+            // 如果到达最大值时
+            if (Di == DDate.length - 1) {
+              resetDay();
+              if (Mi == MDate.length - 1) {
+                resetMonth();
+                continue goYear;
+              }
+              continue goMonth;
+            }
+            continue;
+          }
+        } else if (dayRule == 'assWeek') {
+          // 如果指定了是第几周的星期几
+          // 获取每月1号是属于星期几
+          const thisWeek = formatDate(
+            new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'),
+            'week'
+          );
+          if (thisWeek != null && dayRuleSup[1] >= thisWeek) {
+            // @ts-ignore
+            DD = (dayRuleSup[0] - 1) * 7 + dayRuleSup[1] - thisWeek + 1;
+          } else if (thisWeek != null) {
+            // @ts-ignore
+            DD = dayRuleSup[0] * 7 + dayRuleSup[1] - thisWeek + 1;
+          }
+        } else if (dayRule == 'lastWeek') {
+          // 如果指定了每月最后一个星期几
+          // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (
+              DD > 0 &&
+              checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true
+            ) {
+              DD--;
+              thisDD = DD < 10 ? '0' + DD : DD;
+            }
+          }
+          // 获取月末最后一天是星期几
+          const thisWeek = formatDate(
+            new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'),
+            'week'
+          ) as number;
+          // 找到要求中最近的那个星期几
+          if ((dayRuleSup as unknown as number) < thisWeek) {
+            DD -= thisWeek - (dayRuleSup as unknown as number);
+          } else if ((dayRuleSup as unknown as number) > thisWeek) {
+            DD -= 7 - ((dayRuleSup as unknown as number) - thisWeek);
+          }
+        }
+        // 判断时间值是否小于10置换成“05”这种格式
+        DD = DD < 10 ? '0' + DD : DD;
+
+        // 循环“时”数组
+        goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
+          const hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi];
+
+          // 如果到达最大值时
+          if (nMin > mDate[mDate.length - 1]) {
+            resetMin();
+            if (hi == hDate.length - 1) {
+              resetHour();
+              if (Di == DDate.length - 1) {
+                resetDay();
+                if (Mi == MDate.length - 1) {
+                  resetMonth();
+                  continue goYear;
+                }
+                continue goMonth;
+              }
+              continue goDay;
+            }
+            continue;
+          }
+          // 循环"分"数组
+          goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
+            const mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi];
+
+            // 如果到达最大值时
+            if (nSecond > sDate[sDate.length - 1]) {
+              resetSecond();
+              if (mi == mDate.length - 1) {
+                resetMin();
+                if (hi == hDate.length - 1) {
+                  resetHour();
+                  if (Di == DDate.length - 1) {
+                    resetDay();
+                    if (Mi == MDate.length - 1) {
+                      resetMonth();
+                      continue goYear;
+                    }
+                    continue goMonth;
+                  }
+                  continue goDay;
+                }
+                continue goHour;
+              }
+              continue;
+            }
+            // 循环"秒"数组
+            // eslint-disable-next-line no-unused-labels
+            goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
+              const ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si];
+              // 添加当前时间（时间合法性在日期循环时已经判断）
+              if (MM !== '00' && DD !== '00') {
+                resultArr.push(
+                  YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
+                );
+                nums++;
+              }
+              // 如果条数满了就退出循环
+              if (nums == 5) break goYear;
+              // 如果到达最大值时
+              if (si == sDate.length - 1) {
+                resetSecond();
+                if (mi == mDate.length - 1) {
+                  resetMin();
+                  if (hi == hDate.length - 1) {
+                    resetHour();
+                    if (Di == DDate.length - 1) {
+                      resetDay();
+                      if (Mi == MDate.length - 1) {
+                        resetMonth();
+                        continue goYear;
+                      }
+                      continue goMonth;
+                    }
+                    continue goDay;
+                  }
+                  continue goHour;
+                }
+                continue goMin;
+              }
+            } //goSecond
+          } //goMin
+        } //goHour
+      } //goDay
+    } //goMonth
+  }
+  // 判断100年内的结果条数
+  if (resultArr.length == 0) {
+    return ['没有达到条件的结果！'];
+  } else {
+    return resultArr.length !== 5
+      ? [...resultArr, '近100年内只有' + resultArr.length + '条结果']
+      : resultArr;
+  }
+}
diff --git a/z_ele/src/components/CronBuilder/index.vue b/z_ele/src/components/CronBuilder/index.vue
new file mode 100644
index 0000000..3fa8af4
--- /dev/null
+++ b/z_ele/src/components/CronBuilder/index.vue
@@ -0,0 +1,74 @@
+<!-- Cron 表达式生成器 -->
+<template>
+  <EleModal
+    :width="832"
+    :title="title"
+    position="center"
+    :bodyStyle="{ padding: '8px 12px 12px 12px' }"
+    v-bind="modalProps || {}"
+    v-model="visible"
+    @closed="handleClosed"
+  >
+    <CronPanel ref="cronPanelRef" v-model="cron" />
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleModalProps } from 'ele-admin-plus/es/ele-app/plus';
+  import CronPanel from './components/cron-panel.vue';
+
+  defineOptions({ name: 'CronBuilder' });
+
+  withDefaults(
+    defineProps<{
+      /** 标题 */
+      title?: string;
+      /** 弹窗参数 */
+      modalProps?: Omit<EleModalProps, 'modelValue'>;
+    }>(),
+    {
+      title: 'Cron表达式生成器'
+    }
+  );
+
+  const emit = defineEmits<{
+    /** 确定按钮点击事件 */
+    (e: 'done', cron?: string): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel<boolean>({ type: Boolean });
+
+  /** cron */
+  const cron = defineModel<string>('cron', { type: String });
+
+  /** 组件实例 */
+  const cronPanelRef = ref<InstanceType<typeof CronPanel> | null>(null);
+
+  /** 关闭常用列表 */
+  const hideCronList = () => {
+    cronPanelRef.value?.hideCronList?.();
+  };
+
+  /** 取消按钮点击事件 */
+  const handleCancel = () => {
+    hideCronList();
+    visible.value = false;
+  };
+
+  /** 确定按钮点击事件 */
+  const handleConfirm = () => {
+    hideCronList();
+    emit('done', cron.value);
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    hideCronList();
+  };
+</script>
diff --git a/z_ele/src/components/DictData/index.vue b/z_ele/src/components/DictData/index.vue
new file mode 100644
index 0000000..5662ae4
--- /dev/null
+++ b/z_ele/src/components/DictData/index.vue
@@ -0,0 +1,182 @@
+<!-- 字典组件 -->
+<template>
+  <template v-if="type === 'text'">
+    <span
+      v-for="item in valueData"
+      :key="item.key"
+      v-bind="componentProps || {}"
+    >
+      {{ item.label }}
+    </span>
+  </template>
+  <template v-else-if="type === 'tag'">
+    <el-tag
+      v-for="item in valueData"
+      :key="item.key"
+      size="small"
+      :disable-transitions="true"
+      v-bind="componentProps || {}"
+    >
+      {{ item.label }}
+    </el-tag>
+  </template>
+  <el-radio-group
+    v-else-if="type === 'radio'"
+    :disabled="disabled"
+    v-bind="componentProps || {}"
+    v-model="model"
+  >
+    <el-radio
+      v-for="item in data"
+      :key="item.key"
+      :value="item.value"
+      :label="item.label"
+    />
+  </el-radio-group>
+  <el-checkbox-group
+    v-else-if="type === 'checkbox'"
+    :disabled="disabled"
+    v-bind="componentProps || {}"
+    v-model="model"
+  >
+    <el-checkbox
+      v-for="item in data"
+      :key="item.key"
+      :value="item.value"
+      :label="item.label"
+    />
+  </el-checkbox-group>
+  <el-select
+    v-else
+    :disabled="disabled"
+    :clearable="clearable"
+    :placeholder="placeholder"
+    :filterable="filterable"
+    :teleported="teleported"
+    class="ele-fluid"
+    v-bind="componentProps || {}"
+    :multiple="type === 'multipleSelect'"
+    v-model="model"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.key"
+      :value="item.value"
+      :label="item.label"
+    />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+  import { computed, watch } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { storeToRefs } from 'pinia';
+  import { useUserStore } from '@/store/modules/user';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
+
+  defineOptions({ name: 'DictData' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 字典类型 */
+      code?: string;
+      /** 组件类型 */
+      type?:
+        | 'text'
+        | 'tag'
+        | 'radio'
+        | 'select'
+        | 'checkbox'
+        | 'multipleSelect';
+      /** 字典数据值类型 */
+      valueType?: 'string' | 'number' | 'boolean';
+      /** 组件属性 */
+      componentProps?: Record<string, any>;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 提示文本 */
+      placeholder?: string;
+      /** select是否可清除 */
+      clearable?: boolean;
+      /** select是否可搜索 */
+      filterable?: boolean;
+      /** select的下拉是否插入到body下 */
+      teleported?: boolean;
+    }>(),
+    {
+      clearable: true,
+      teleported: true
+    }
+  );
+
+  /** 字典值 */
+  const model = defineModel<any>({
+    type: [String, Number, Boolean, Array]
+  });
+
+  /** 已缓存的字典 */
+  const userStore = useUserStore();
+  const { dicts } = storeToRefs(userStore);
+
+  interface DataItem extends Record<string, any> {
+    key: string;
+    value: any;
+    label: string;
+  }
+
+  /** 字典的数据 */
+  const data = computed<DataItem[]>(() => {
+    const code = props.code;
+    const list = (code ? dicts.value[code] : void 0) || [];
+    return list.map((item) => ({
+      ...item,
+      key: item.dictDataCode,
+      value: (item.dictDataCode == null
+        ? null
+        : props.valueType === 'number'
+          ? Number(item.dictDataCode)
+          : props.valueType === 'boolean'
+            ? Boolean(item.dictDataCode)
+            : item.dictDataCode) as any,
+      label: item.dictDataName
+    }));
+  });
+
+  /** 绑定值对应的数据 */
+  const valueData = computed(() => {
+    const result: DataItem[] = [];
+    const val = model.value;
+    if (val == null || val === '') {
+      return result;
+    }
+    const values = Array.isArray(val) ? val : [val];
+    values.forEach((v) => {
+      const temp = data.value.find((d) => d.value == v);
+      if (temp != null) {
+        result.push(temp);
+      } else {
+        result.push({ key: v, value: v, label: v });
+      }
+    });
+    return result;
+  });
+
+  /** 若还未缓存过则获取字典数据 */
+  watch(
+    () => props.code,
+    (code) => {
+      if (!code || dicts.value[code] != null) {
+        return;
+      }
+      userStore.setDicts([], code);
+      listDictionaryData({ dictCode: code })
+        .then((list) => {
+          userStore.setDicts(list, code);
+        })
+        .catch((e) => {
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-group-add.vue b/z_ele/src/components/FilePicker/components/file-group-add.vue
new file mode 100644
index 0000000..8b98e56
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-group-add.vue
@@ -0,0 +1,150 @@
+<template>
+  <EleModal
+    :form="true"
+    :width="460"
+    title="添加分组"
+    :zIndex="baseIndex"
+    :appendToBody="false"
+    v-bind="modalProps || {}"
+    v-model="visible"
+    @open="handleOpen"
+    @closed="handleClosed"
+  >
+    <ElForm ref="formRef" :model="form" labelWidth="82px" @submit.prevent="">
+      <ElFormItem label="上级分组" prop="parentId">
+        <ElTreeSelect
+          v-model="form.parentId"
+          :data="groupData.filter((d) => d.id !== 0 && d.id !== -1)"
+          nodeKey="id"
+          :props="{ label: 'name' }"
+          :clearable="true"
+          :checkStrictly="true"
+          :defaultExpandAll="true"
+          placeholder="请选择上级分组"
+          :popperOptions="{ strategy: 'fixed' }"
+          :teleported="false"
+          class="ele-fluid"
+        >
+          <template #default="{ data }">
+            <img
+              src="/ele-file-list/ic_file_folder.png"
+              class="file-picker-tree-icon"
+            />
+            <span>{{ data.name }}</span>
+          </template>
+          <template v-if="form.parentId" #prefix>
+            <img
+              src="/ele-file-list/ic_file_folder.png"
+              class="file-picker-tree-icon"
+            />
+          </template>
+        </ElTreeSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="分组名称"
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: '请输入分组名称',
+            type: 'string',
+            trigger: 'blur'
+          }
+        ]"
+      >
+        <ElInput
+          :maxlength="20"
+          :clearable="true"
+          v-model="form.name"
+          placeholder="请输入分组名称"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" :loading="loading" @click="save">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { FormInstance } from 'element-plus';
+  import type { EleModalProps } from 'ele-admin-plus/es/ele-app/plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { addUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 上级分组 */
+    parentId?: number;
+    /** 分组数据 */
+    groupData: UserFile[];
+    /** 弹窗参数 */
+    modalProps?: Omit<EleModalProps, 'modelValue'>;
+    /** 统一设置层级 */
+    baseIndex?: number;
+    /** 消息提示组件 */
+    messageIns?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserFile>({
+    name: '',
+    parentId: void 0
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      addUserFile({ ...form, isDirectory: 1 })
+        .then((msg) => {
+          loading.value = false;
+          props.messageIns?.success?.(msg);
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          props.messageIns?.error?.(e.message);
+        });
+    });
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    if (props.parentId != null) {
+      form.parentId = props.parentId;
+    }
+  };
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-group.vue b/z_ele/src/components/FilePicker/components/file-group.vue
new file mode 100644
index 0000000..d57438a
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-group.vue
@@ -0,0 +1,98 @@
+<template>
+  <ElTree
+    ref="treeRef"
+    :data="groupData"
+    :highlightCurrent="true"
+    nodeKey="id"
+    :props="{ label: 'name' }"
+    :expandOnClickNode="false"
+    :defaultExpandAll="true"
+    class="file-picker-left"
+    @node-click="handleGroupSelect"
+    @node-contextmenu="handleGroupContextmenu"
+  >
+    <template #default="scope">
+      <img
+        src="/ele-file-list/ic_file_folder.png"
+        class="file-picker-tree-icon"
+      />
+      <span class="el-tree-node__label" :title="scope.data.name">
+        {{ scope.data.name }}
+      </span>
+      <ElIcon
+        v-if="scope.data.id !== 0 && scope.data.id !== -1"
+        class="file-picker-tree-more"
+        @click.stop="(e) => handleMoreIconClick(e, scope.data)"
+      >
+        <MoreOutlined style="transform: scale(1.1)" />
+      </ElIcon>
+    </template>
+  </ElTree>
+  <ElLink
+    type="primary"
+    underline="never"
+    class="file-picker-left-add"
+    @click="handleAddBtnClick"
+  >
+    添加分组
+  </ElLink>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ElTree } from 'element-plus';
+  import { queryChild } from 'ele-admin-plus';
+  import { MoreOutlined } from '@/components/icons';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  defineProps<{
+    /** 分组数据 */
+    groupData: UserFile[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'groupSelect', item: UserFile, isTreeClick?: boolean): void;
+    (e: 'addBtnClick'): void;
+    (e: 'moreIconClick', triggerEl: any, item: UserFile): void;
+    (e: 'hideGroupCtxMenu'): void;
+  }>();
+
+  /** 树组件 */
+  const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
+
+  /** 分组选中事件 */
+  const handleGroupSelect = (item: UserFile) => {
+    emit('groupSelect', item, true);
+  };
+
+  /** 添加分组按钮点击事件 */
+  const handleAddBtnClick = () => {
+    emit('addBtnClick');
+  };
+
+  /** 更多图标点击事件 */
+  const handleMoreIconClick = (e: MouseEvent, item: UserFile) => {
+    emit('moreIconClick', e.currentTarget, item);
+  };
+
+  /** 分组右键事件 */
+  const handleGroupContextmenu = (e: MouseEvent, item: UserFile) => {
+    if (item.id === 0 || item.id === -1) {
+      emit('hideGroupCtxMenu');
+      return;
+    }
+    const triggerEl = queryChild(
+      e.currentTarget as HTMLElement,
+      'el-tree-node__content'
+    )?.querySelector?.('.file-picker-tree-more');
+    // @ts-ignore
+    triggerEl && triggerEl.click();
+  };
+
+  /** 设置选中分组 */
+  const setSelectedGroup = (item: UserFile) => {
+    treeRef.value?.setCurrentKey?.(item.id);
+  };
+
+  defineExpose({ setSelectedGroup });
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-list.vue b/z_ele/src/components/FilePicker/components/file-list.vue
new file mode 100644
index 0000000..cab7214
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-list.vue
@@ -0,0 +1,531 @@
+<template>
+  <div class="file-picker-main">
+    <div class="file-picker-body">
+      <div class="file-picker-toolbar">
+        <ElUpload
+          action=""
+          :accept="accept"
+          :showFileList="false"
+          :beforeUpload="handleUpload"
+        >
+          <ElButton type="primary" class="ele-btn-icon" :icon="UploadOutlined">
+            上传
+          </ElButton>
+        </ElUpload>
+        <div class="file-picker-search">
+          <ElInput
+            :clearable="true"
+            v-model="searchKeyword"
+            placeholder="请输入文件名"
+            @clear="handleSearch"
+            @change="handleSearch"
+          />
+          <ElButton type="primary" @click="handleSearch">搜索</ElButton>
+        </div>
+        <EleSegmented
+          v-model="isGridMode"
+          :items="modeSegmentedItems"
+          :validateEvent="false"
+        />
+      </div>
+      <template v-if="fileData.length">
+        <div class="file-picker-file-list" @scroll="handleFileListScroll">
+          <EleFileList
+            :boxChoose="true"
+            :icons="localIcons"
+            :smallIcons="localSmallIcons"
+            :contextMenuProps="contextMenuProps"
+            v-bind="fileListProps || {}"
+            :data="fileData"
+            :grid="isGridMode === 1"
+            :selectionType="limit === 1 ? 'radio' : 'checkbox'"
+            :selections="fileSelections"
+            v-model:current="fileCurrent"
+            :contextMenus="fileContextMenus"
+            :class="[{ 'is-ping-top': isPingTop }]"
+            @itemClick="handleFileItemClick"
+            @itemContextMenu="handleFileCtxMenuClick"
+            @update:selections="updateSelections"
+            @itemContextOpen="handleFileCtxMenuOpen"
+          />
+        </div>
+        <ElePagination
+          size="small"
+          :teleported="false"
+          :pageSizes="[18, 24, 30, 36, 42]"
+          layout="total,prev,pager,next,sizes"
+          v-bind="paginationProps || {}"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :total="total"
+          @update:currentPage="handleCurrentPageChange"
+          @update:pageSize="handlePageSizeChange"
+        />
+      </template>
+      <ElEmpty
+        v-else
+        :imageSize="80"
+        description="无数据"
+        v-bind="emptyProps || {}"
+      />
+    </div>
+    <FileSelections
+      ref="fileSelectionsRef"
+      :fileSelections="
+        limit === 1 ? (fileCurrent ? [fileCurrent] : []) : fileSelections
+      "
+      :limit="limit"
+      :selectionListProps="selectionListProps"
+      :baseIndex="baseIndex"
+      @clearSelections="clearSelections"
+      @removeItem="removeItem"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch, markRaw } from 'vue';
+  import type { ElEmptyProps } from 'ele-admin-plus/es/ele-app/el';
+  import type {
+    EleFileListProps,
+    EleUploadListProps,
+    EleDropdownProps,
+    ElePaginationProps
+  } from 'ele-admin-plus/es/ele-app/plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import type {
+    FileItem,
+    ItemContextMenuOption
+  } from 'ele-admin-plus/es/ele-file-list/types';
+  import {
+    localIcons,
+    localSmallIcons
+  } from 'ele-admin-plus/es/ele-file-list/icons';
+  import {
+    UploadOutlined,
+    MenuOutlined,
+    AppstoreOutlined,
+    EditOutlined,
+    DragOutlined,
+    DeleteOutlined
+  } from '@/components/icons';
+  import { uploadFile } from '@/api/system/file';
+  import { pageUserFiles, addUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+  import FileSelections from './file-selections.vue';
+
+  const props = defineProps<{
+    /** 最大选择数量 */
+    limit?: number;
+    /** 文件大小限制, 单位MB */
+    fileLimit?: number;
+    /** 接受上传的文件类型 */
+    accept?: string;
+    /** 接口查询参数 */
+    params?: Record<string, any>;
+    /** 文件列表自定义属性 */
+    fileListProps?: EleFileListProps;
+    /** 已选列表自定义属性 */
+    selectionListProps?: EleUploadListProps;
+    /** 空组件属性 */
+    emptyProps?: ElEmptyProps;
+    /** 分页组件属性 */
+    paginationProps?: ElePaginationProps;
+    /** 统一设置层级 */
+    baseIndex?: number;
+    /** 消息提示组件 */
+    messageIns?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'queryStart'): void;
+    (e: 'queryDone'): void;
+    (e: 'renameFile', item: UserFile, isFile?: boolean): void;
+    (e: 'moveFile', item: UserFile, isFile?: boolean): void;
+    (e: 'removeFile', item: UserFile, isFile?: boolean): void;
+    (e: 'fileItemContextOpen'): void;
+  }>();
+
+  /** 查询方法参数 */
+  interface QueryDataParams {
+    /** 页码 */
+    page?: number;
+    /** 分组id */
+    parentId?: number;
+    /** 文件名 */
+    name?: string;
+  }
+
+  /** 当前分组id */
+  const fileParentId = ref<number>();
+
+  /** 文件数据 */
+  const fileData = ref<FileItem[]>([]);
+
+  /** 选中的文件数据 */
+  const fileSelections = ref<FileItem[]>([]);
+
+  /** 单选选中的文件数据 */
+  const fileCurrent = ref<FileItem>();
+
+  /** 是否网格模式 */
+  const isGridMode = ref(1);
+
+  /** 搜索关键字 */
+  const searchKeyword = ref('');
+
+  /** 当前页码 */
+  const currentPage = ref(1);
+
+  /** 每页显示数量 */
+  const pageSize = ref(24);
+
+  /** 总数量 */
+  const total = ref(0);
+
+  /** 文件列表是否固定表头 */
+  const isPingTop = ref(false);
+
+  /** 视图模式分段器数据 */
+  const modeSegmentedItems = [
+    { icon: MenuOutlined, value: 0, iconStyle: { transform: 'scale(0.9)' } },
+    { icon: AppstoreOutlined, value: 1 }
+  ];
+
+  /** 已选择列表组件 */
+  const fileSelectionsRef = ref<InstanceType<typeof FileSelections>>();
+
+  /** 文件列表右键菜单属性 */
+  const contextMenuProps = reactive<EleDropdownProps>({
+    menuStyle: { minWidth: '120px' },
+    iconProps: { size: 15 },
+    popperOptions: { strategy: 'fixed' },
+    zIndex: props.baseIndex
+  });
+
+  /** 校验最大选择数量 */
+  const checkLimit = (selections: FileItem[], isAdd?: boolean) => {
+    if (
+      props.limit &&
+      props.limit > 1 &&
+      (isAdd
+        ? selections.length >= props.limit
+        : selections.length > props.limit)
+    ) {
+      props.messageIns?.error?.(`最多只能选择 ${props.limit} 个`);
+      return false;
+    }
+  };
+
+  /** 更新选中数据 */
+  const updateSelections = (selections: FileItem[]) => {
+    if (checkLimit(selections) !== false) {
+      fileSelections.value = selections;
+      return;
+    }
+    if (props.limit && props.limit > 1) {
+      fileSelections.value = selections.slice(0, props.limit);
+    }
+  };
+
+  /** 清空选中 */
+  const clearSelections = () => {
+    fileSelections.value = [];
+    fileCurrent.value = void 0;
+  };
+
+  /** 获取选中数据 */
+  const getSelections = () => {
+    if (fileSelectionsRef.value) {
+      const selections = fileSelectionsRef.value.getSelections() || [];
+      return selections.map((d) => d.userFile as UserFile);
+    }
+    return [];
+  };
+
+  /** 移除选中 */
+  const removeItem = (item: FileItem) => {
+    if (props.limit === 1) {
+      clearSelections();
+      return;
+    }
+    const index = fileSelections.value.findIndex((d) => d.key === item.key);
+    if (index !== -1) {
+      fileSelections.value.splice(index, 1);
+    }
+  };
+
+  /** 搜索 */
+  const handleSearch = () => {
+    queryData({ page: 1 });
+  };
+
+  /** 切换当前页码 */
+  const handleCurrentPageChange = (page: number) => {
+    if (currentPage.value !== page) {
+      currentPage.value = page;
+      queryData();
+    }
+  };
+
+  /** 切换每页显示数量 */
+  const handlePageSizeChange = (limit: number) => {
+    if (pageSize.value !== limit) {
+      currentPage.value = 1;
+      pageSize.value = limit;
+      const maxPage = Math.ceil(total.value / limit);
+      if (maxPage && currentPage.value > maxPage) {
+        currentPage.value = maxPage;
+      }
+      queryData();
+    }
+  };
+
+  /** 文件列表点击事件 */
+  const handleFileItemClick = (item: FileItem) => {
+    if (props.limit === 1) {
+      fileCurrent.value = item;
+      return;
+    }
+    const index = fileSelections.value.findIndex((d) => d.key === item.key);
+    if (index !== -1) {
+      fileSelections.value.splice(index, 1);
+      return;
+    }
+    if (checkLimit(fileSelections.value, true) !== false) {
+      fileSelections.value.push(item);
+    }
+  };
+
+  /** 文件列表右键菜单点击事件 */
+  const handleFileCtxMenuClick = (option: ItemContextMenuOption) => {
+    const { key, item } = option;
+    const userFileItem = item.userFile as UserFile;
+    if (key === 'preview') {
+      if (!item.thumbnail) {
+        window.open(item.url);
+        return;
+      }
+      const data = fileData.value.filter((d) => !!d.thumbnail);
+      const urls = data.map((d) => d.url) as string[];
+      const index = data.indexOf(item);
+      if (index !== -1) {
+        fileSelectionsRef.value &&
+          fileSelectionsRef.value.openImagePreview(urls, index);
+      }
+    } else if (key === 'rename') {
+      emit('renameFile', userFileItem, true);
+    } else if (key === 'move') {
+      emit('moveFile', userFileItem, true);
+    } else if (key === 'remove') {
+      emit('removeFile', userFileItem, true);
+    }
+  };
+
+  /** 文件列表右键菜单数据 */
+  const fileContextMenus = (item: FileItem) => {
+    const menus: DropdownItem[] = [
+      {
+        title: '重命名',
+        command: 'rename',
+        icon: markRaw(EditOutlined)
+      },
+      {
+        title: '移动到',
+        command: 'move',
+        icon: markRaw(DragOutlined)
+      },
+      {
+        title: '删除',
+        command: 'remove',
+        icon: markRaw(DeleteOutlined),
+        divided: true,
+        danger: true
+      }
+    ];
+    if (item.thumbnail) {
+      menus[0].divided = true;
+      menus.unshift({ title: '预览', command: 'preview' });
+    } else {
+      menus[0].divided = true;
+      menus.unshift({ title: '打开', command: 'preview' });
+    }
+    return menus;
+  };
+
+  /** 文件列表右键菜单打开事件 */
+  const handleFileCtxMenuOpen = () => {
+    emit('fileItemContextOpen');
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (props.accept === 'image/*') {
+      if (!file.type.startsWith('image')) {
+        props.messageIns?.error?.('只能选择图片');
+        return;
+      }
+    } else if (props.accept === '.xls,.xlsx') {
+      if (
+        ![
+          'application/vnd.ms-excel',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        ].includes(file.type)
+      ) {
+        props.messageIns?.error?.('只能选择 excel 文件');
+        return;
+      }
+    }
+    if (props.fileLimit && file.size / 1024 / 1024 > props.fileLimit) {
+      props.messageIns?.error?.(`大小不能超过 ${props.fileLimit}MB`);
+      return;
+    }
+    return true;
+  };
+
+  /** 文件上传事件 */
+  const handleUpload = (file: File) => {
+    if (checkFile(file)) {
+      const loading = props.messageIns?.loading?.({
+        message: '上传中..',
+        plain: true,
+        mask: true
+      });
+      uploadFile(file)
+        .then((data) => {
+          addUserFile({
+            name: data.name,
+            isDirectory: 0,
+            parentId: fileParentId.value,
+            path: data.path,
+            length: data.length,
+            contentType: data.contentType
+          })
+            .then(() => {
+              loading?.close?.();
+              props.messageIns?.success?.('上传成功');
+              queryData();
+            })
+            .catch((e) => {
+              loading?.close?.();
+              props.messageIns?.error?.(e.message);
+            });
+        })
+        .catch((e) => {
+          loading?.close?.();
+          props.messageIns?.error?.(e.message);
+        });
+    }
+    return false;
+  };
+
+  /** 文件列表滚动事件 */
+  const handleFileListScroll = (e: MouseEvent) => {
+    const wrapEl = e.currentTarget as any;
+    const scrollTop = wrapEl.scrollTop;
+    isPingTop.value = scrollTop > 1;
+  };
+
+  /** 触发文件数据请求完成 */
+  const handleQueryDone = () => {
+    emit('queryDone');
+  };
+
+  /** 判断是否是图片文件 */
+  const isImageFile = (item: UserFile) => {
+    return (
+      typeof item.contentType === 'string' &&
+      item.contentType.startsWith('image/') &&
+      item.url
+    );
+  };
+
+  /** 格式化文件大小 */
+  const formatLength = (length?: number) => {
+    if (length == null) {
+      return '-';
+    }
+    if (length < 1024) {
+      return length + 'B';
+    } else if (length < 1024 * 1024) {
+      return (length / 1024).toFixed(1) + 'KB';
+    } else if (length < 1024 * 1024 * 1024) {
+      return (length / 1024 / 1024).toFixed(1) + 'M';
+    } else {
+      return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
+    }
+  };
+
+  /** 查询文件数据 */
+  const queryData = (params?: QueryDataParams) => {
+    emit('queryStart');
+    if (params) {
+      if (params.page != null) {
+        currentPage.value = params.page;
+      }
+      if (params.parentId != null) {
+        fileParentId.value = params.parentId;
+      }
+      if (params.name != null) {
+        searchKeyword.value = params.name;
+      }
+    }
+    const parentId = fileParentId.value;
+    pageUserFiles({
+      page: currentPage.value,
+      limit: pageSize.value,
+      parentId: parentId === -1 ? void 0 : parentId,
+      name: searchKeyword.value,
+      isDirectory: 0,
+      ...(props.params || {})
+    })
+      .then((result) => {
+        if (!result?.list?.length && result?.count) {
+          const maxPage = Math.ceil(result.count / pageSize.value);
+          if (maxPage && currentPage.value > maxPage) {
+            queryData({ page: maxPage });
+            return;
+          }
+        }
+        total.value = result?.count || 0;
+        fileData.value =
+          result?.list?.map?.((d) => {
+            return {
+              key: d.id as number,
+              name: d.name as string,
+              url: d.url,
+              thumbnail: isImageFile(d) ? d.thumbnail || d.url : void 0,
+              length: formatLength(d.length),
+              updateTime: d.updateTime,
+              isDirectory: d.isDirectory === 1,
+              userFile: d
+            };
+          }) || [];
+        handleQueryDone();
+      })
+      .catch((e) => {
+        fileData.value = [];
+        props.messageIns?.error?.(e.message);
+        handleQueryDone();
+      });
+  };
+
+  watch(
+    () => props.limit,
+    () => {
+      clearSelections();
+    }
+  );
+
+  watch(
+    () => props.baseIndex,
+    (baseIndex) => {
+      contextMenuProps.zIndex = baseIndex;
+    }
+  );
+
+  defineExpose({ queryData, clearSelections, getSelections });
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-move.vue b/z_ele/src/components/FilePicker/components/file-move.vue
new file mode 100644
index 0000000..0d1a740
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-move.vue
@@ -0,0 +1,116 @@
+<template>
+  <EleModal
+    :width="460"
+    title="移动到"
+    :zIndex="baseIndex"
+    :appendToBody="false"
+    v-bind="modalProps || {}"
+    v-model="visible"
+    @open="handleOpen"
+  >
+    <div class="file-picker-move-wrapper">
+      <ElTree
+        :data="groupData.filter((d) => d.id !== -1)"
+        nodeKey="id"
+        :props="{ label: 'name' }"
+        :expandOnClickNode="false"
+        :defaultExpandAll="true"
+        class="file-picker-move-tree"
+        @node-click="handleGroupSelect"
+      >
+        <template #default="scope">
+          <img
+            src="/ele-file-list/ic_file_folder.png"
+            class="file-picker-tree-icon"
+          />
+          <span
+            :class="[
+              'el-tree-node__label',
+              { 'is-active': scope.data.id === selectedId }
+            ]"
+          >
+            {{ scope.data.name }}
+          </span>
+          <ElRadio :value="true" :modelValue="scope.data.id === selectedId" />
+        </template>
+      </ElTree>
+    </div>
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" :loading="loading" @click="save">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleModalProps } from 'ele-admin-plus/es/ele-app/plus';
+  import { updateUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 文件数据 */
+    data?: UserFile | null;
+    /** 分组数据 */
+    groupData: UserFile[];
+    /** 弹窗参数 */
+    modalProps?: Omit<EleModalProps, 'modelValue'>;
+    /** 统一设置层级 */
+    baseIndex?: number;
+    /** 消息提示组件 */
+    messageIns?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 选中的id */
+  const selectedId = ref<number>();
+
+  /** 分组选中事件 */
+  const handleGroupSelect = (item: UserFile) => {
+    selectedId.value = item.id;
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    const parentId = selectedId.value;
+    if (parentId == null) {
+      props.messageIns?.error?.('请选择分组');
+      return;
+    }
+    loading.value = true;
+    updateUserFile({ id: props.data?.id, parentId })
+      .then((msg) => {
+        loading.value = false;
+        props.messageIns?.success?.(msg);
+        handleCancel();
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        props.messageIns?.error?.(e.message);
+      });
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    if (props.data) {
+      selectedId.value = props.data.parentId;
+    }
+  };
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-rename.vue b/z_ele/src/components/FilePicker/components/file-rename.vue
new file mode 100644
index 0000000..99c7244
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-rename.vue
@@ -0,0 +1,116 @@
+<template>
+  <EleModal
+    :form="true"
+    :width="460"
+    title="重命名"
+    :zIndex="baseIndex"
+    :appendToBody="false"
+    v-bind="modalProps || {}"
+    v-model="visible"
+    @open="handleOpen"
+    @closed="handleClosed"
+  >
+    <ElForm ref="formRef" :model="form" labelWidth="82px" @submit.prevent="">
+      <ElFormItem
+        :label="`${data && data.isDirectory ? '分组' : '文件'}名称`"
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: `请输入${data && data.isDirectory ? '分组' : '文件'}名称`,
+            type: 'string',
+            trigger: 'blur'
+          }
+        ]"
+      >
+        <ElInput
+          :maxlength="20"
+          :clearable="true"
+          v-model="form.name"
+          :placeholder="`请输入${data && data.isDirectory ? '分组' : '文件'}名称`"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" :loading="loading" @click="save">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { FormInstance } from 'element-plus';
+  import type { EleModalProps } from 'ele-admin-plus/es/ele-app/plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { updateUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 文件数据 */
+    data?: UserFile | null;
+    /** 弹窗参数 */
+    modalProps?: Omit<EleModalProps, 'modelValue'>;
+    /** 统一设置层级 */
+    baseIndex?: number;
+    /** 消息提示组件 */
+    messageIns?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserFile>({ name: '' });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      updateUserFile({ ...form, id: props.data?.id })
+        .then((msg) => {
+          loading.value = false;
+          props.messageIns?.success?.(msg);
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          props.messageIns?.error?.(e.message);
+        });
+    });
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    if (props.data) {
+      form.name = props.data.name;
+    }
+  };
+</script>
diff --git a/z_ele/src/components/FilePicker/components/file-selections.vue b/z_ele/src/components/FilePicker/components/file-selections.vue
new file mode 100644
index 0000000..0024366
--- /dev/null
+++ b/z_ele/src/components/FilePicker/components/file-selections.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="file-picker-right">
+    <div class="file-picker-right-header">
+      <div class="file-picker-right-title">
+        <span>已选择 </span>
+        <span>{{ fileSelections.length }}</span>
+        <template v-if="limit">
+          <span> / </span>
+          <span>{{ limit }}</span>
+        </template>
+        <span v-else> 个</span>
+      </div>
+      <ElLink
+        type="danger"
+        underline="never"
+        class="file-picker-right-clear"
+        @click="clearSelections"
+      >
+        清空
+      </ElLink>
+    </div>
+    <EleUploadList
+      :limit="limit"
+      :previewProps="previewProps"
+      v-bind="selectionListProps || {}"
+      ref="uploadListRef"
+      v-model="images"
+      :buttonStyle="false"
+      :sortable="{ delay: 150, delayOnTouchOnly: true }"
+      @remove="handleRemove"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type {
+    EleUploadListInstance,
+    EleUploadListProps,
+    EleImageViewerProps
+  } from 'ele-admin-plus/es/ele-app/plus';
+  import { valueIsChanged } from 'ele-admin-plus/es/ele-basic-select/util';
+  import type { FileItem } from 'ele-admin-plus/es/ele-file-list/types';
+  import type { UploadItem } from 'ele-admin-plus/es/ele-upload-list/types';
+
+  const props = defineProps<{
+    /** 选中的文件数据 */
+    fileSelections: FileItem[];
+    /** 最大选择数量 */
+    limit?: number;
+    /** 文件列表自定义属性 */
+    selectionListProps?: EleUploadListProps;
+    /** 统一设置层级 */
+    baseIndex?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'clearSelections'): void;
+    (e: 'removeItem', fileItem: FileItem): void;
+  }>();
+
+  /** 图片上传列表组件 */
+  const uploadListRef = ref<EleUploadListInstance>(null);
+
+  /** 数据 */
+  const images = ref<UploadItem[]>([]);
+
+  /** 图片预览组件属性 */
+  const previewProps = reactive<EleImageViewerProps>({
+    zIndex: props.baseIndex
+  });
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    const fileItem = props.fileSelections.find((d) => d.key === item.key);
+    if (fileItem) {
+      emit('removeItem', fileItem);
+    }
+  };
+
+  /** 清空选中数据 */
+  const clearSelections = () => {
+    emit('clearSelections');
+  };
+
+  /** 获取选中数据 */
+  const getSelections = () => {
+    const result: FileItem[] = [];
+    images.value.forEach((d) => {
+      const item = props.fileSelections.find((t) => t.key === d.key);
+      if (item) {
+        result.push(item);
+      }
+    });
+    return result;
+  };
+
+  /** 打开预览图片弹窗 */
+  const openImagePreview = (urls: string[], index: number) => {
+    uploadListRef.value && uploadListRef.value.openImagePreview(urls, index);
+  };
+
+  watch(
+    () => props.fileSelections,
+    (selections) => {
+      if (!selections || !selections.length) {
+        if (images.value.length) {
+          images.value = [];
+        }
+        return;
+      }
+      const temp = images.value.filter((d) =>
+        selections.some((t) => t.key === d.key)
+      );
+      selections.forEach((d) => {
+        if (!temp.some((t) => t.key === d.key)) {
+          temp.push({
+            key: d.key,
+            name: d.name,
+            url: d.url,
+            thumbnail: d.thumbnail || false,
+            status: 'done'
+          });
+        }
+      });
+      if (
+        valueIsChanged(
+          images.value.map((d) => d.key) as any,
+          temp.map((d) => d.key) as any,
+          true
+        )
+      ) {
+        images.value = temp;
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
+  watch(
+    () => props.baseIndex,
+    (baseIndex) => {
+      previewProps.zIndex = baseIndex;
+    }
+  );
+
+  defineExpose({ getSelections, openImagePreview });
+</script>
diff --git a/z_ele/src/components/FilePicker/index.vue b/z_ele/src/components/FilePicker/index.vue
new file mode 100644
index 0000000..18d41a5
--- /dev/null
+++ b/z_ele/src/components/FilePicker/index.vue
@@ -0,0 +1,496 @@
+<!-- 文件选择器 -->
+<template>
+  <EleModal
+    :width="988"
+    :title="title"
+    position="center"
+    :zIndex="baseIndex"
+    v-bind="modalProps || {}"
+    v-model="visible"
+    class="file-picker-modal"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <EleSplitPanel
+      space="0px"
+      size="186px"
+      :flexTable="true"
+      :allowCollapse="mobile"
+      v-model:collapse="collapse"
+      :customStyle="{ borderWidth: '0 1px 0 0', background: 'none' }"
+      class="file-picker-wrapper"
+    >
+      <FileGroup
+        ref="fileGroupRef"
+        :groupData="groupData"
+        @groupSelect="handleGroupSelect"
+        @addBtnClick="openGroupAdd()"
+        @moreIconClick="openCtxMenuDropdown"
+        @hideGroupCtxMenu="hideGroupContextmenu()"
+      />
+      <template #body>
+        <FileList
+          ref="fileListRef"
+          :limit="limit"
+          :fileLimit="fileLimit"
+          :accept="accept"
+          :params="params"
+          :fileListProps="fileListProps"
+          :selectionListProps="selectionListProps"
+          :emptyProps="emptyProps"
+          :paginationProps="paginationProps"
+          :baseIndex="componentIndex"
+          :messageIns="messageIns"
+          @queryStart="showLoading"
+          @queryDone="hideLoading"
+          @renameFile="openRenameItem"
+          @moveFile="openMoveItem"
+          @removeFile="removeItem"
+          @fileItemContextOpen="hideGroupContextmenu"
+        />
+      </template>
+    </EleSplitPanel>
+    <EleLoading :loading="loading" class="file-picker-loading" />
+    <!-- 添加分组弹窗 -->
+    <FileGroupAdd
+      v-model="showGroupAdd"
+      :parentId="groupParentId"
+      :groupData="groupData"
+      :modalProps="groupAddModalProps"
+      :baseIndex="componentIndex"
+      :messageIns="messageIns"
+      @done="handleReloadData"
+    />
+    <!-- 分组或文件重命名弹窗 -->
+    <FileRename
+      v-model="showRename"
+      :data="renameData"
+      :modalProps="renameModalProps"
+      :baseIndex="componentIndex"
+      :messageIns="messageIns"
+      @done="handleReloadData"
+    />
+    <!-- 文件移动弹窗 -->
+    <FileMove
+      v-model="showMove"
+      :data="moveData"
+      :groupData="groupData"
+      :modalProps="moveModalProps"
+      :baseIndex="componentIndex"
+      :messageIns="messageIns"
+      @done="handleReloadData"
+    />
+    <!-- 分组项右键菜单 -->
+    <EleDropdown
+      :triggerKeys="[]"
+      :persistent="false"
+      :validateEvent="false"
+      :zIndex="componentIndex"
+      placement="bottom-end"
+      :iconProps="{ size: 15 }"
+      :popperOptions="{
+        strategy: 'fixed',
+        modifiers: [{ name: 'offset', options: { offset: [6, 6] } }]
+      }"
+      v-bind="groupDropdownProps || {}"
+      ref="ctxMenuDropdownRef"
+      trigger="click"
+      componentType="pro"
+      :preventContextmenu="true"
+      :virtualTriggering="true"
+      :virtualRef="ctxMenuDropdownVirtualRef"
+      :items="ctxMenuDropdownItems"
+      @command="handleItemCommand"
+    />
+    <!-- 消息提示容器 -->
+    <div
+      ref="messageWrapRef"
+      class="ele-message-wrapper"
+      :style="{ position: 'fixed', zIndex: messageIndex }"
+    ></div>
+    <div
+      ref="messageBoxWrapRef"
+      class="ele-message-box-wrapper"
+      :style="{ position: 'fixed', zIndex: messageIndex }"
+    ></div>
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, nextTick, markRaw } from 'vue';
+  import { useMessage, useMessageBox, toTree, findTree } from 'ele-admin-plus';
+  import type { ElEmptyProps } from 'ele-admin-plus/es/ele-app/el';
+  import type {
+    EleModalProps,
+    EleDropdownInstance,
+    EleDropdownProps,
+    EleFileListProps,
+    EleUploadListProps,
+    ElePaginationProps
+  } from 'ele-admin-plus/es/ele-app/plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import {
+    EditOutlined,
+    FolderOutlined,
+    DeleteOutlined
+  } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import FileGroup from './components/file-group.vue';
+  import FileList from './components/file-list.vue';
+  import FileGroupAdd from './components/file-group-add.vue';
+  import FileRename from './components/file-rename.vue';
+  import FileMove from './components/file-move.vue';
+  import { listUserFiles, removeUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  defineOptions({ name: 'FilePicker' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 标题 */
+      title?: string;
+      /** 弹窗参数 */
+      modalProps?: Omit<EleModalProps, 'modelValue'>;
+      /** 最大选择数量 */
+      limit?: number;
+      /** 文件大小限制, 单位MB */
+      fileLimit?: number;
+      /** 接受上传的文件类型 */
+      accept?: string;
+      /** 接口查询参数 */
+      params?: Record<string, any>;
+      /** 分组下拉菜单属性 */
+      groupDropdownProps?: EleDropdownProps;
+      /** 添加分组弹窗参数 */
+      groupAddModalProps?: Omit<EleModalProps, 'modelValue'>;
+      /** 重命名弹窗参数 */
+      renameModalProps?: Omit<EleModalProps, 'modelValue'>;
+      /** 移动分组弹窗参数 */
+      moveModalProps?: Omit<EleModalProps, 'modelValue'>;
+      /** 文件列表自定义属性 */
+      fileListProps?: EleFileListProps;
+      /** 已选列表自定义属性 */
+      selectionListProps?: EleUploadListProps;
+      /** 空组件属性 */
+      emptyProps?: ElEmptyProps;
+      /** 分页组件属性 */
+      paginationProps?: ElePaginationProps;
+      /** 统一设置层级 */
+      baseIndex?: number;
+    }>(),
+    {
+      title: '文件选择',
+      fileLimit: 100
+    }
+  );
+
+  const emit = defineEmits<{
+    /** 确定按钮点击事件 */
+    (e: 'done', result: UserFile[]): void;
+    /** 弹窗关闭事件 */
+    (e: 'close'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+
+  /** 分割面板是否折叠 */
+  const collapse = ref(mobile.value);
+
+  /** 文件分组组件 */
+  const fileGroupRef = ref<InstanceType<typeof FileGroup> | null>(null);
+
+  /** 文件列表组件 */
+  const fileListRef = ref<InstanceType<typeof FileList> | null>(null);
+
+  /** 数据请求状态 */
+  const loading = ref(false);
+
+  /** 分组数据 */
+  const groupData = ref<UserFile[]>([]);
+
+  /** 选中分组数据 */
+  const groupSelected = ref<UserFile | null>(null);
+
+  /** 是否显示重命名弹窗 */
+  const showRename = ref(false);
+
+  /** 当前重命名数据 */
+  const renameData = ref<UserFile | null>(null);
+
+  /** 是否显示添加分组弹窗 */
+  const showGroupAdd = ref(false);
+
+  /** 添加分组的上级分组id */
+  const groupParentId = ref<number>();
+
+  /** 是否显示移动弹窗 */
+  const showMove = ref(false);
+
+  /** 当前移动数据 */
+  const moveData = ref<UserFile | null>(null);
+
+  /** 当前编辑是否是操作文件 */
+  const isEditFile = ref(false);
+
+  /** 右键菜单组件 */
+  const ctxMenuDropdownRef = ref<EleDropdownInstance>();
+
+  /** 右键菜单虚拟触发节点 */
+  const ctxMenuDropdownVirtualRef = ref<any>();
+
+  /** 右键菜单项数据 */
+  const ctxMenuDropdownItems = ref<DropdownItem[]>([]);
+
+  /** 当前打开的右键菜单对应的数据 */
+  let ctxMenuFileItem: UserFile | null = null;
+
+  /** 组件统一层级 */
+  const componentIndex = computed<number | undefined>(() => {
+    if (props.baseIndex == null) {
+      return;
+    }
+    return props.baseIndex + 100;
+  });
+
+  /** 消息提示组件层级 */
+  const messageIndex = computed<number | undefined>(() => {
+    if (componentIndex.value == null) {
+      return 3000;
+    }
+    return componentIndex.value + 100;
+  });
+
+  /** 消息提示容器 */
+  const messageWrapRef = ref<HTMLDivElement>();
+
+  /** 消息弹出框容器 */
+  const messageBoxWrapRef = ref<HTMLDivElement>();
+
+  /** 消息提示框 */
+  const messageIns = useMessage({
+    plain: true,
+    inner: true,
+    appendTo: messageWrapRef as any
+  });
+
+  /** 消息弹出框 */
+  const messageBoxIns = useMessageBox({
+    appendTo: messageBoxWrapRef as any
+  });
+
+  /** 获取分组右键菜单项数据 */
+  const getGroupCtxMenuItems = (_item: UserFile) => {
+    return [
+      { title: '重命名', command: 'rename', icon: markRaw(EditOutlined) },
+      {
+        title: '添加分组',
+        command: 'add',
+        icon: markRaw(FolderOutlined),
+        iconStyle: { transform: 'scale(0.92)' }
+      },
+      {
+        title: '删除分组',
+        command: 'remove',
+        icon: markRaw(DeleteOutlined),
+        divided: true,
+        danger: true
+      }
+    ];
+  };
+
+  /** 关闭分组右键菜单 */
+  const hideGroupContextmenu = () => {
+    ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleClose();
+  };
+
+  /** 打开分组右键菜单 */
+  const openCtxMenuDropdown = (triggerEl: any, item: UserFile) => {
+    ctxMenuFileItem = item;
+    if (triggerEl == null || ctxMenuDropdownVirtualRef.value === triggerEl) {
+      return;
+    }
+    hideGroupContextmenu();
+    nextTick(() => {
+      ctxMenuDropdownItems.value = getGroupCtxMenuItems(item) || [];
+      ctxMenuDropdownVirtualRef.value = triggerEl;
+      if (ctxMenuDropdownItems.value.length) {
+        nextTick(() => {
+          ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+        });
+      }
+    });
+  };
+
+  /** 分组选中 */
+  const handleGroupSelect = (item: UserFile, isTreeClick?: boolean) => {
+    if (groupSelected.value != null && mobile.value) {
+      collapse.value = true;
+    }
+    if (item && item.id != null) {
+      if (!isTreeClick) {
+        fileGroupRef.value?.setSelectedGroup?.(item);
+      }
+      if (groupSelected.value == null || groupSelected.value.id !== item.id) {
+        groupSelected.value = item;
+        queryData(item.id);
+      }
+    }
+  };
+
+  /** 编辑完成刷新数据事件 */
+  const handleReloadData = () => {
+    isEditFile.value ? queryData() : queryGroup();
+  };
+
+  /** 添加分组 */
+  const openGroupAdd = (item?: UserFile) => {
+    isEditFile.value = false;
+    groupParentId.value = item ? item.id : void 0;
+    showGroupAdd.value = true;
+  };
+
+  /** 重命名分组或文件 */
+  const openRenameItem = (item: UserFile, isFile?: boolean) => {
+    isEditFile.value = !!isFile;
+    renameData.value = item;
+    showRename.value = true;
+  };
+
+  /** 文件移动到指定分组 */
+  const openMoveItem = (item: UserFile, isFile?: boolean) => {
+    isEditFile.value = !!isFile;
+    moveData.value = item;
+    showMove.value = true;
+  };
+
+  /** 删除分组或文件 */
+  const removeItem = (item: UserFile, isFile?: boolean) => {
+    isEditFile.value = !!isFile;
+    messageBoxIns
+      ?.confirm?.(`确定要删除“${item.name}”吗?`, '系统提示', {
+        type: 'warning',
+        draggable: true
+      })
+      ?.then?.(() => {
+        const loading = messageIns?.loading?.({
+          message: '请求中..',
+          plain: true
+        });
+        removeUserFile(item.id as number)
+          .then((msg) => {
+            loading?.close?.();
+            messageIns?.success?.(msg);
+            handleReloadData();
+          })
+          .catch((e) => {
+            loading?.close?.();
+            messageIns?.error?.(e.message);
+          });
+      })
+      ?.catch?.(() => {});
+  };
+
+  /** 分组右键菜单项点击事件 */
+  const handleItemCommand = (command: any) => {
+    if (ctxMenuFileItem == null) {
+      return;
+    }
+    if (command === 'rename') {
+      openRenameItem(ctxMenuFileItem);
+    } else if (command === 'add') {
+      openGroupAdd(ctxMenuFileItem);
+    } else if (command === 'remove') {
+      removeItem(ctxMenuFileItem);
+    }
+  };
+
+  /** 关闭请求加载图标 */
+  const hideLoading = () => {
+    loading.value = false;
+  };
+
+  /** 打开请求加载图标 */
+  const showLoading = () => {
+    loading.value = true;
+  };
+
+  /** 查询分组数据 */
+  const queryGroup = () => {
+    showLoading();
+    listUserFiles({ isDirectory: 1 })
+      .then((list) => {
+        const result = [
+          { id: -1, name: '全部' },
+          { id: 0, name: '未分组' },
+          ...toTree({
+            data: list,
+            idField: 'id',
+            parentIdField: 'parentId'
+          })
+        ];
+        groupData.value = result;
+        const oldSelected =
+          groupSelected.value == null
+            ? void 0
+            : findTree(result, (d) => d.id === groupSelected.value?.id);
+        groupSelected.value = null;
+        nextTick(() => {
+          handleGroupSelect(oldSelected || result[0]);
+        });
+      })
+      .catch((e) => {
+        groupData.value = [];
+        messageIns.error(e.message);
+        hideLoading();
+      });
+  };
+
+  /** 刷新文件数据 */
+  const queryData = (parentId?: number) => {
+    showLoading();
+    const params = parentId == null ? void 0 : { page: 1, name: '', parentId };
+    fileListRef.value && fileListRef.value.queryData(params);
+  };
+
+  /** 清空文件选中 */
+  const clearSelections = () => {
+    fileListRef.value && fileListRef.value.clearSelections();
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    clearSelections();
+    queryGroup();
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClose = () => {
+    clearSelections();
+    emit('close');
+  };
+
+  /** 取消按钮点击事件 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 确定按钮点击事件 */
+  const handleConfirm = () => {
+    showLoading();
+    emit('done', fileListRef.value?.getSelections?.() || []);
+  };
+
+  defineExpose({ hideLoading });
+</script>
+
+<style lang="scss">
+  @use './style/index.scss';
+</style>
diff --git a/z_ele/src/components/FilePicker/style/index.scss b/z_ele/src/components/FilePicker/style/index.scss
new file mode 100644
index 0000000..c5309a1
--- /dev/null
+++ b/z_ele/src/components/FilePicker/style/index.scss
@@ -0,0 +1,410 @@
+.file-picker-modal {
+  height: 692px;
+  max-height: 94vh;
+  max-height: 94dvh;
+  min-height: 434px;
+  display: flex;
+  flex-direction: column;
+
+  & > .el-dialog__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    & > .ele-modal-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 0;
+    }
+  }
+}
+
+.file-picker-wrapper.ele-split-panel {
+  overflow: hidden !important;
+
+  .ele-split-collapse-button {
+    top: auto;
+    bottom: 124px;
+    margin-top: 0;
+  }
+
+  &.is-collapse .ele-split-collapse-button {
+    margin-left: 6px;
+  }
+}
+
+.file-picker-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  & > .ele-loading-spinner {
+    background: none;
+    border-radius: var(--el-border-radius-base);
+    pointer-events: auto;
+  }
+}
+
+.file-picker-tree-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  user-select: none;
+}
+
+.file-picker-wrapper .file-picker-left {
+  flex: 1;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: calc(var(--ele-tree-item-radius) * 2);
+  padding-right: calc(var(--ele-tree-item-radius) * 2);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  user-select: none;
+  --ele-tree-item-height: 36px;
+
+  .el-tree-node__content {
+    position: relative;
+
+    & > .el-tree-node__label::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    & > .file-picker-tree-more {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 -8px 0 0;
+      color: var(--el-text-color-placeholder);
+      font-size: 12px;
+      border-radius: var(--el-border-radius-base);
+      transition: all 0.2s;
+      z-index: 3;
+
+      &:hover {
+        color: var(--el-text-color-regular);
+        background: hsla(0, 0%, 60%, 0.15);
+      }
+    }
+  }
+}
+
+.file-picker-left-add {
+  flex-shrink: 0;
+  padding: 0 6px;
+  margin: 2px 12px 8px 12px;
+  border-radius: var(--el-border-radius-base);
+  border: 1px dashed var(--el-color-primary);
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 20px;
+  user-select: none;
+
+  &:hover {
+    border-color: var(--el-color-primary-light-5);
+  }
+}
+
+.file-picker-main {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+.file-picker-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.file-picker-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--el-border-color-light);
+  box-sizing: border-box;
+}
+
+.file-picker-search {
+  flex: 1;
+  display: flex;
+  max-width: 220px;
+  margin: 0 8px;
+
+  & > .el-input {
+    flex: 1;
+
+    & > .el-input__wrapper {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  & > .el-button {
+    flex-shrink: 0;
+    margin-left: -1px;
+    position: relative;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.file-picker-toolbar > .ele-segmented {
+  --ele-segmented-height: 26px;
+  --ele-segmented-font-size: 16px;
+  --ele-segmented-item-padding: 8px;
+}
+
+.file-picker-file-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.file-picker-file-list > .ele-file-list-group {
+  --ele-file-item-width: 102px;
+  --ele-file-item-padding: 4px 2px 2px 2px;
+
+  & > .ele-file-list {
+    & > .ele-file-list-header {
+      display: none;
+    }
+
+    & > .ele-file-list-body {
+      display: grid;
+      grid-gap: 14px 0px;
+      grid-template-columns: repeat(6, 1fr);
+      padding: 6px 1px 1px 1px;
+
+      & > .ele-file-list-item {
+        margin: 0 auto;
+
+        .ele-file-list-item-title {
+          font-size: 12px;
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  & > .ele-file-list-table {
+    min-width: 528px;
+
+    & > .ele-file-list-header {
+      position: sticky;
+      top: 0;
+      background: var(--el-bg-color-overlay);
+    }
+  }
+
+  &.is-ping-top > .ele-file-list-table > .ele-file-list-header {
+    z-index: 2;
+  }
+}
+
+.file-picker-body > .el-empty {
+  padding: 0;
+  flex: 1;
+}
+
+.file-picker-body > .el-pagination {
+  padding-bottom: 8px;
+}
+
+.file-picker-right {
+  flex-shrink: 0;
+  width: 128px;
+  border-left: 1px solid var(--el-border-color-light);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.file-picker-right-header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 12px 8px 12px;
+  box-sizing: border-box;
+}
+
+.file-picker-right-title {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  padding-right: 8px;
+  box-sizing: border-box;
+  font-size: 13px;
+}
+
+.file-picker-right-clear {
+  width: 100%;
+  padding: 0 6px;
+  margin-top: 6px;
+  border-radius: var(--el-border-radius-base);
+  border: 1px dashed var(--el-color-danger);
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 20px;
+  user-select: none;
+
+  &:hover {
+    border-color: var(--el-color-danger-light-5);
+  }
+}
+
+.file-picker-right > .ele-upload-list {
+  flex: 1;
+  overflow: auto;
+  padding: 6px 0 8px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0;
+
+  & > .ele-upload-item {
+    flex-shrink: 0;
+    margin: 0;
+
+    & + .ele-upload-item {
+      margin-top: 8px;
+    }
+  }
+}
+
+@media screen and (max-width: 980px) {
+  .file-picker-file-list {
+    & > .ele-file-list-group > .ele-file-list > .ele-file-list-body {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+}
+
+@media screen and (max-width: 888px) {
+  .file-picker-file-list {
+    & > .ele-file-list-group > .ele-file-list > .ele-file-list-body {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+}
+
+@media screen and (max-width: 788px) {
+  .file-picker-main {
+    flex-direction: column;
+  }
+
+  .file-picker-right {
+    width: auto;
+    height: 156px;
+    border-left: none;
+    border-top: 1px solid var(--el-border-color-light);
+
+    & > .file-picker-right-header {
+      padding-top: 8px;
+      padding-bottom: 0;
+      flex-direction: row;
+
+      & > .file-picker-right-title,
+      & > .file-picker-right-clear {
+        width: auto;
+        margin: 0;
+      }
+    }
+
+    & > .ele-upload-list {
+      flex-direction: row;
+      padding: 0 8px;
+
+      & > .ele-upload-item + .ele-upload-item {
+        margin-top: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .file-picker-right-title {
+    text-align: right;
+  }
+}
+
+@media screen and (max-width: 460px) {
+  .file-picker-file-list {
+    & > .ele-file-list-group > .ele-file-list > .ele-file-list-body {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+}
+
+@media screen and (max-width: 358px) {
+  .file-picker-file-list {
+    & > .ele-file-list-group > .ele-file-list > .ele-file-list-body {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+.file-picker-move-wrapper {
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+
+  & > .file-picker-move-tree {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: calc(var(--ele-tree-item-radius) * 2);
+    padding-right: calc(var(--ele-tree-item-radius) * 2);
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    user-select: none;
+    --ele-tree-item-height: 36px;
+
+    .el-tree-node__content {
+      position: relative;
+      z-index: 1;
+
+      & > .el-tree-node__label.is-active {
+        color: var(--el-color-primary);
+        font-weight: bold;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+          background: var(--el-color-primary-light-9);
+          border-radius: var(--ele-tree-item-radius);
+        }
+      }
+
+      & > .el-radio {
+        margin: 0 -12px 0 0;
+      }
+    }
+  }
+}
diff --git a/z_ele/src/components/FileUpload/index.vue b/z_ele/src/components/FileUpload/index.vue
new file mode 100644
index 0000000..45207b8
--- /dev/null
+++ b/z_ele/src/components/FileUpload/index.vue
@@ -0,0 +1,293 @@
+<template>
+  <CommonUpload
+    v-model="files"
+    :fileLimit="fileLimit"
+    :readonly="readonly"
+    :disabled="disabled"
+    :preview="preview"
+    :limit="limit"
+    :multiple="multiple"
+    :drag="drag"
+    :accept="accept"
+    :itemStyle="itemStyle"
+    :buttonStyle="buttonStyle"
+    :sortable="sortable"
+    :imageProps="imageProps"
+    :progressProps="progressProps"
+    :previewProps="previewProps"
+    :tools="tools"
+    :listType="listType"
+    :beforeUploadClick="beforeUploadClick"
+    :beforeItemEdit="beforeItemEdit"
+    :beforePreview="handleBeforePreview"
+    :locale="locale"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { ref, watch } from 'vue';
+  import type {
+    ElProgressProps,
+    ElImageProps
+  } from 'ele-admin-plus/es/ele-app/el';
+  import type { EleImageViewerProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type {
+    UploadItem,
+    ListType,
+    BeforeUploadClick,
+    BeforeItemEdit,
+    UploadLocale
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+  import CommonUpload from '../CommonUpload/index.vue';
+
+  defineOptions({ name: 'FileUpload' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 绑定值 */
+      modelValue?: string;
+      /** 文件大小限制, 单位MB */
+      fileLimit?: number;
+      /** 是否只读 */
+      readonly?: boolean;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 是否支持点击预览 */
+      preview?: boolean;
+      /** 最大上传数量 */
+      limit?: number;
+      /** 是否支持多选文件 */
+      multiple?: boolean;
+      /** 是否启用拖拽上传 */
+      drag?: boolean;
+      /** 接受上传的文件类型 */
+      accept?: string;
+      /** 自定义样式 */
+      itemStyle?: CSSProperties;
+      /** 自定义上传按钮样式 */
+      buttonStyle?: CSSProperties;
+      /** 是否开启拖拽排序 */
+      sortable?: boolean | Record<keyof any, any>;
+      /** 自定义图片属性 */
+      imageProps?: ElImageProps;
+      /** 自定义进度条属性 */
+      progressProps?: ElProgressProps;
+      /** 自定义图片预览属性 */
+      previewProps?: EleImageViewerProps;
+      /** 是否开启底部预览和修改的操作按钮 */
+      tools?: boolean;
+      /** 列表显示样式 */
+      listType?: ListType;
+      /** 上传按钮点击前的钩子 */
+      beforeUploadClick?: BeforeUploadClick;
+      /** 修改按钮点击前的钩子 */
+      beforeItemEdit?: BeforeItemEdit;
+      /** 国际化 */
+      locale?: Partial<UploadLocale>;
+    }>(),
+    {
+      fileLimit: 100,
+      preview: true,
+      drag: true,
+      accept: '',
+      sortable: () => ({ forceFallback: true }),
+      tools: true,
+      listType: 'file'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+    (e: 'change', value?: string): void;
+  }>();
+
+  /** 绑定值数据类型 */
+  interface DataValueItem {
+    url: string;
+    name?: string;
+  }
+
+  /** 上传组件数据 */
+  const files = ref<UploadItem[]>([]);
+
+  /** 判断是否是图片 */
+  const isImage = (url?: string) => {
+    const parts = url ? url.split('.') : [];
+    const suffix =
+      parts.length <= 1 || (parts[0] === '' && parts.length === 2)
+        ? ''
+        : parts.pop()?.toLowerCase?.();
+    return suffix && ['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(suffix);
+  };
+
+  /** 图片预览钩子 */
+  const handleBeforePreview = (item: UploadItem) => {
+    if (!isImage(item.url)) {
+      if (item.url) {
+        window.open(item.url);
+      } else if (item.file && !item.file.type.startsWith('image')) {
+        window.open(URL.createObjectURL(item.file));
+      }
+      return false;
+    }
+  };
+
+  /** 更新绑定值 */
+  const updateModelValue = (value: string) => {
+    const oldValue = props.modelValue ?? '';
+    const newValue = value ?? '';
+    if (oldValue !== newValue) {
+      emit('update:modelValue', newValue);
+      emit('change', value);
+    }
+  };
+
+  /** 清空上传组件数据 */
+  const clearData = () => {
+    files.value = [];
+  };
+
+  /** 判断是否全部上传完成 */
+  const isDone = () => {
+    return !files.value.some((d) => d.status !== 'done');
+  };
+
+  /** 获取上传数据对应的值 */
+  const getDataValue = (filesValue: UploadItem[]) => {
+    const result: DataValueItem[] = [];
+    filesValue.forEach((item) => {
+      if (item.status === 'done' && item.url != null) {
+        result.push({ url: item.url, name: item.name });
+      }
+    });
+    return result;
+  };
+
+  /** 获取值对应的上传数据 */
+  const getFilesValue = (
+    dataValue: string | undefined | null,
+    filesValue: UploadItem[]
+  ) => {
+    if (!dataValue) {
+      return filesValue.filter((item) => item.status !== 'done');
+    }
+    const result: UploadItem[] = [];
+    if (props.limit === 1) {
+      try {
+        const temp = JSON.parse(dataValue);
+        if (temp) {
+          const url = temp.url ?? '';
+          result.push({
+            key: `0-${url}`,
+            url,
+            name: temp.name ?? '',
+            status: 'done',
+            thumbnail: isImage(url)
+          });
+          return result;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+      const temp = filesValue.find((item) => item.status !== 'done');
+      if (temp != null) {
+        result.push(temp);
+      }
+      return result;
+    }
+    try {
+      const temps: DataValueItem[] = JSON.parse(dataValue);
+      filesValue.forEach((item) => {
+        if (
+          (item.url && temps.some((temp) => temp.url === item.url)) ||
+          item.status !== 'done'
+        ) {
+          result.push(item);
+        }
+      });
+      temps.forEach((temp, index) => {
+        const url = temp?.url ?? '';
+        if (url && !result.some((item) => item.url === url)) {
+          const key = `${index}-${url}`;
+          const oldIndex = result.findIndex((item) => item.key === key);
+          if (oldIndex !== -1) {
+            result.splice(oldIndex, 1);
+          }
+          result.push({
+            key,
+            url,
+            name: temp.name ?? '',
+            status: 'done',
+            thumbnail: isImage(url)
+          });
+        }
+      });
+      if (props.limit != null && result.length > props.limit) {
+        const temp = result.filter((item) => item.status !== 'done');
+        for (const t of temp) {
+          const i = result.indexOf(t);
+          result.splice(i, 1);
+          if (result.length <= props.limit) {
+            break;
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      filesValue.forEach((item) => {
+        if (item.status !== 'done') {
+          result.push(item);
+        }
+      });
+    }
+    return result;
+  };
+
+  /** 判断上传数据是否改变 */
+  const filesIsChanged = (newFiles: UploadItem[], oldFiles: UploadItem[]) => {
+    if (newFiles.length !== oldFiles.length) {
+      return true;
+    }
+    for (let i = 0; i < newFiles.length; i++) {
+      const newItem = newFiles[i];
+      const oldItem = oldFiles[i];
+      if (
+        newItem.key !== oldItem.key ||
+        newItem.name !== oldItem.name ||
+        newItem.url !== oldItem.url ||
+        newItem.status !== oldItem.status
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /** 同步绑定值 */
+  watch(
+    files,
+    (filesValue) => {
+      const dataValue = getDataValue(filesValue);
+      if (props.limit === 1) {
+        updateModelValue(dataValue.length ? JSON.stringify(dataValue[0]) : '');
+        return;
+      }
+      updateModelValue(dataValue.length ? JSON.stringify(dataValue) : '');
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.modelValue,
+    (dataValue) => {
+      const filesValue = getFilesValue(dataValue, files.value);
+      if (filesIsChanged(filesValue, files.value)) {
+        files.value = filesValue;
+      }
+    },
+    { immediate: true }
+  );
+
+  defineExpose({ clearData, isDone });
+</script>
diff --git a/z_ele/src/components/IconSelect/index.vue b/z_ele/src/components/IconSelect/index.vue
new file mode 100644
index 0000000..abd0387
--- /dev/null
+++ b/z_ele/src/components/IconSelect/index.vue
@@ -0,0 +1,39 @@
+<!-- 图标选择器 -->
+<template>
+  <EleIconSelect
+    v-bind="$props"
+    :data="iconData"
+    @update:modelValue="emitMethods['update:modelValue']"
+    @change="emitMethods['change']"
+    @visibleChange="emitMethods['visibleChange']"
+    @clear="emitMethods['clear']"
+    @focus="emitMethods['focus']"
+    @blur="emitMethods['blur']"
+  >
+    <template #icon="{ icon }">
+      <ElIcon>
+        <component :is="icon" />
+      </ElIcon>
+    </template>
+  </EleIconSelect>
+</template>
+
+<script lang="ts" setup>
+  import {
+    iconSelectProps,
+    iconSelectEmits
+  } from 'ele-admin-plus/es/ele-icon-select/props';
+  import { useComponentEvents } from 'ele-admin-plus/es/utils/hook';
+  import { getIconSelectData } from './util';
+
+  defineOptions({ name: 'IconSelect' });
+
+  defineProps(iconSelectProps);
+
+  const emit = defineEmits(iconSelectEmits);
+
+  const { emitMethods } = useComponentEvents(iconSelectEmits, emit);
+
+  /** 图标数据 */
+  const iconData = getIconSelectData();
+</script>
diff --git a/z_ele/src/components/IconSelect/util.ts b/z_ele/src/components/IconSelect/util.ts
new file mode 100644
index 0000000..7f45aa2
--- /dev/null
+++ b/z_ele/src/components/IconSelect/util.ts
@@ -0,0 +1,409 @@
+import type { App } from 'vue';
+import * as elIcons from '@element-plus/icons-vue';
+import * as eleIcons from '@/components/icons';
+/** element-plus 的图标全局安装的前缀 */
+const elIconPrefix = 'IconEl';
+/** ele-admin-plus 的图标全局安装的前缀 */
+const eleIconPrefix = 'IconPro';
+
+/**
+ * 获取全部图标数据
+ */
+export function getIconData() {
+  const iconData: Record<string, any> = {};
+  Object.keys(elIcons).forEach((key) => {
+    iconData[`${elIconPrefix}${key}`] = elIcons[key];
+  });
+  Object.keys(eleIcons).forEach((key) => {
+    iconData[`${eleIconPrefix}${key}`] = eleIcons[key];
+  });
+  return iconData;
+}
+
+/**
+ * 图标组件全局安装
+ */
+export const iconsInstaller = {
+  install(app: App) {
+    const iconData = getIconData();
+    Object.keys(iconData).forEach((key) => {
+      app.component(key, iconData[key]);
+    });
+  }
+};
+
+/**
+ * 获取图标下拉选择器数据
+ */
+export function getIconSelectData() {
+  const iconNames = Object.keys(getIconData());
+  const proIconNames = iconNames.filter((name) =>
+    name.startsWith(eleIconPrefix)
+  );
+  return [
+    {
+      title: 'EleAdminPlus',
+      children: [
+        {
+          title: '线框风格',
+          icons: proIconNames.filter((name) => !name.endsWith('Filled'))
+        },
+        {
+          title: '实底风格',
+          icons: proIconNames.filter((name) => name.endsWith('Filled'))
+        }
+      ]
+    },
+    {
+      title: 'ElementPlus',
+      children: elementIconData.map((group) => ({
+        ...group,
+        icons: group.icons.map((icon) => `IconEl${icon}`)
+      }))
+    }
+  ];
+}
+
+/**
+ * 图标下拉选择器的 element-plus 的图标数据
+ */
+export const elementIconData = [
+  {
+    title: 'System',
+    icons: [
+      'Plus',
+      'Minus',
+      'CirclePlus',
+      'Search',
+      'Female',
+      'Male',
+      'Aim',
+      'House',
+      'FullScreen',
+      'Loading',
+      'Link',
+      'Service',
+      'Pointer',
+      'Star',
+      'Notification',
+      'Connection',
+      'ChatDotRound',
+      'Setting',
+      'Clock',
+      'Position',
+      'Discount',
+      'Odometer',
+      'ChatSquare',
+      'ChatRound',
+      'ChatLineRound',
+      'ChatLineSquare',
+      'ChatDotSquare',
+      'View',
+      'Hide',
+      'Unlock',
+      'Lock',
+      'RefreshRight',
+      'RefreshLeft',
+      'Refresh',
+      'Bell',
+      'MuteNotification',
+      'User',
+      'Check',
+      'CircleCheck',
+      'Warning',
+      'CircleClose',
+      'Close',
+      'PieChart',
+      'More',
+      'Compass',
+      'Filter',
+      'Switch',
+      'Select',
+      'SemiSelect',
+      'CloseBold',
+      'EditPen',
+      'Edit',
+      'Message',
+      'MessageBox',
+      'TurnOff',
+      'Finished',
+      'Delete',
+      'Crop',
+      'SwitchButton',
+      'Operation',
+      'Open',
+      'Remove',
+      'ZoomOut',
+      'ZoomIn',
+      'InfoFilled',
+      'CircleCheckFilled',
+      'SuccessFilled',
+      'WarningFilled',
+      'CircleCloseFilled',
+      'QuestionFilled',
+      'WarnTriangleFilled',
+      'UserFilled',
+      'MoreFilled',
+      'Tools',
+      'HomeFilled',
+      'Menu',
+      'UploadFilled',
+      'Avatar',
+      'HelpFilled',
+      'Share',
+      'StarFilled',
+      'Comment',
+      'Histogram',
+      'Grid',
+      'Promotion',
+      'DeleteFilled',
+      'RemoveFilled',
+      'CirclePlusFilled'
+    ]
+  },
+  {
+    title: 'Arrow',
+    icons: [
+      'ArrowLeft',
+      'ArrowUp',
+      'ArrowRight',
+      'ArrowDown',
+      'ArrowLeftBold',
+      'ArrowUpBold',
+      'ArrowRightBold',
+      'ArrowDownBold',
+      'DArrowRight',
+      'DArrowLeft',
+      'Download',
+      'Upload',
+      'Top',
+      'Bottom',
+      'Back',
+      'Right',
+      'TopRight',
+      'TopLeft',
+      'BottomRight',
+      'BottomLeft',
+      'Sort',
+      'SortUp',
+      'SortDown',
+      'Rank',
+      'CaretLeft',
+      'CaretTop',
+      'CaretRight',
+      'CaretBottom',
+      'DCaret',
+      'Expand',
+      'Fold'
+    ]
+  },
+  {
+    title: 'Document',
+    icons: [
+      'DocumentAdd',
+      'Document',
+      'Notebook',
+      'Tickets',
+      'Memo',
+      'Collection',
+      'Postcard',
+      'ScaleToOriginal',
+      'SetUp',
+      'DocumentDelete',
+      'DocumentChecked',
+      'DataBoard',
+      'DataAnalysis',
+      'CopyDocument',
+      'FolderChecked',
+      'Files',
+      'Folder',
+      'FolderDelete',
+      'FolderRemove',
+      'FolderOpened',
+      'DocumentCopy',
+      'DocumentRemove',
+      'FolderAdd',
+      'FirstAidKit',
+      'Reading',
+      'DataLine',
+      'Management',
+      'Checked',
+      'Ticket',
+      'Failed',
+      'TrendCharts',
+      'List'
+    ]
+  },
+  {
+    title: 'Media',
+    icons: [
+      'Microphone',
+      'Mute',
+      'Mic',
+      'VideoPause',
+      'VideoCamera',
+      'VideoPlay',
+      'Headset',
+      'Monitor',
+      'Film',
+      'Camera',
+      'Picture',
+      'PictureRounded',
+      'Iphone',
+      'Cellphone',
+      'VideoCameraFilled',
+      'PictureFilled',
+      'Platform',
+      'CameraFilled',
+      'BellFilled'
+    ]
+  },
+  {
+    title: 'Traffic',
+    icons: [
+      'Location',
+      'LocationInformation',
+      'DeleteLocation',
+      'Coordinate',
+      'Bicycle',
+      'OfficeBuilding',
+      'School',
+      'Guide',
+      'AddLocation',
+      'MapLocation',
+      'Place',
+      'LocationFilled',
+      'Van'
+    ]
+  },
+  {
+    title: 'Food',
+    icons: [
+      'Watermelon',
+      'Pear',
+      'NoSmoking',
+      'Smoking',
+      'Mug',
+      'GobletSquareFull',
+      'GobletFull',
+      'KnifeFork',
+      'Sugar',
+      'Bowl',
+      'MilkTea',
+      'Lollipop',
+      'Coffee',
+      'Chicken',
+      'Dish',
+      'IceTea',
+      'ColdDrink',
+      'CoffeeCup',
+      'DishDot',
+      'IceDrink',
+      'IceCream',
+      'Dessert',
+      'IceCreamSquare',
+      'ForkSpoon',
+      'IceCreamRound',
+      'Food',
+      'HotWater',
+      'Grape',
+      'Fries',
+      'Apple',
+      'Burger',
+      'Goblet',
+      'GobletSquare',
+      'Orange',
+      'Cherry'
+    ]
+  },
+  {
+    title: 'Items',
+    icons: [
+      'Printer',
+      'Calendar',
+      'CreditCard',
+      'Box',
+      'Money',
+      'Refrigerator',
+      'Cpu',
+      'Football',
+      'Brush',
+      'Suitcase',
+      'SuitcaseLine',
+      'Umbrella',
+      'AlarmClock',
+      'Medal',
+      'GoldMedal',
+      'Present',
+      'Mouse',
+      'Watch',
+      'QuartzWatch',
+      'Magnet',
+      'Help',
+      'Soccer',
+      'ToiletPaper',
+      'ReadingLamp',
+      'Paperclip',
+      'MagicStick',
+      'Basketball',
+      'Baseball',
+      'Coin',
+      'Goods',
+      'Sell',
+      'SoldOut',
+      'Key',
+      'ShoppingCart',
+      'ShoppingCartFull',
+      'ShoppingTrolley',
+      'Phone',
+      'Scissor',
+      'Handbag',
+      'ShoppingBag',
+      'Trophy',
+      'TrophyBase',
+      'Stopwatch',
+      'Timer',
+      'CollectionTag',
+      'TakeawayBox',
+      'PriceTag',
+      'Wallet',
+      'Opportunity',
+      'PhoneFilled',
+      'WalletFilled',
+      'GoodsFilled',
+      'Flag',
+      'BrushFilled',
+      'Briefcase',
+      'Stamp'
+    ]
+  },
+  {
+    title: 'Weather',
+    icons: [
+      'Sunrise',
+      'Sunny',
+      'Ship',
+      'MostlyCloudy',
+      'PartlyCloudy',
+      'Sunset',
+      'Drizzling',
+      'Pouring',
+      'Cloudy',
+      'Moon',
+      'MoonNight',
+      'Lightning'
+    ]
+  },
+  {
+    title: 'Other',
+    icons: [
+      'ChromeFilled',
+      'Eleme',
+      'ElemeFilled',
+      'ElementPlus',
+      'Shop',
+      'SwitchFilled',
+      'WindPower'
+    ]
+  }
+];
diff --git a/z_ele/src/components/ImageUpload/index.vue b/z_ele/src/components/ImageUpload/index.vue
new file mode 100644
index 0000000..209358a
--- /dev/null
+++ b/z_ele/src/components/ImageUpload/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <CommonUpload
+    v-model="images"
+    :fileLimit="fileLimit"
+    :readonly="readonly"
+    :disabled="disabled"
+    :preview="preview"
+    :limit="limit"
+    :multiple="multiple"
+    :drag="drag"
+    :accept="accept"
+    :itemStyle="itemStyle"
+    :buttonStyle="buttonStyle"
+    :sortable="sortable"
+    :imageProps="imageProps"
+    :progressProps="progressProps"
+    :previewProps="previewProps"
+    :tools="tools"
+    :listType="listType"
+    :beforeUploadClick="beforeUploadClick"
+    :beforeItemEdit="beforeItemEdit"
+    :locale="locale"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { ref, watch } from 'vue';
+  import type {
+    ElProgressProps,
+    ElImageProps
+  } from 'ele-admin-plus/es/ele-app/el';
+  import type { EleImageViewerProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type {
+    UploadItem,
+    ListType,
+    BeforeUploadClick,
+    BeforeItemEdit,
+    UploadLocale
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+  import CommonUpload from '../CommonUpload/index.vue';
+
+  defineOptions({ name: 'ImageUpload' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 绑定值 */
+      modelValue?: string;
+      /** 文件大小限制, 单位MB */
+      fileLimit?: number;
+      /** 是否只读 */
+      readonly?: boolean;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 是否支持点击预览 */
+      preview?: boolean;
+      /** 最大上传数量 */
+      limit?: number;
+      /** 是否支持多选文件 */
+      multiple?: boolean;
+      /** 是否启用拖拽上传 */
+      drag?: boolean;
+      /** 接受上传的文件类型 */
+      accept?: string;
+      /** 自定义样式 */
+      itemStyle?: CSSProperties;
+      /** 自定义上传按钮样式 */
+      buttonStyle?: CSSProperties;
+      /** 是否开启拖拽排序 */
+      sortable?: boolean | Record<keyof any, any>;
+      /** 自定义图片属性 */
+      imageProps?: ElImageProps;
+      /** 自定义进度条属性 */
+      progressProps?: ElProgressProps;
+      /** 自定义图片预览属性 */
+      previewProps?: EleImageViewerProps;
+      /** 是否开启底部预览和修改的操作按钮 */
+      tools?: boolean;
+      /** 列表显示样式 */
+      listType?: ListType;
+      /** 上传按钮点击前的钩子 */
+      beforeUploadClick?: BeforeUploadClick;
+      /** 修改按钮点击前的钩子 */
+      beforeItemEdit?: BeforeItemEdit;
+      /** 国际化 */
+      locale?: Partial<UploadLocale>;
+    }>(),
+    {
+      fileLimit: 100,
+      preview: true,
+      drag: true,
+      accept: 'image/*',
+      sortable: () => ({ forceFallback: true }),
+      tools: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+    (e: 'change', value?: string): void;
+  }>();
+
+  /** 上传组件数据 */
+  const images = ref<UploadItem[]>([]);
+
+  /** 更新绑定值 */
+  const updateModelValue = (value: string) => {
+    const oldValue = props.modelValue ?? '';
+    const newValue = value ?? '';
+    if (oldValue !== newValue) {
+      emit('update:modelValue', newValue);
+      emit('change', value);
+    }
+  };
+
+  /** 清空上传组件数据 */
+  const clearData = () => {
+    images.value = [];
+  };
+
+  /** 判断是否全部上传完成 */
+  const isDone = () => {
+    return !images.value.some((item) => item.status !== 'done');
+  };
+
+  /** 获取上传数据对应的值 */
+  const getDataValue = (imagesValue: UploadItem[]) => {
+    const urls: string[] = [];
+    imagesValue.forEach((item) => {
+      if (item.status === 'done' && item.url != null) {
+        urls.push(item.url);
+      }
+    });
+    return urls;
+  };
+
+  /** 获取值对应的上传数据 */
+  const getImagesValue = (
+    dataValue: string | undefined | null,
+    imagesValue: UploadItem[]
+  ) => {
+    if (!dataValue) {
+      return imagesValue.filter((item) => item.status !== 'done');
+    }
+    const result: UploadItem[] = [];
+    if (props.limit === 1) {
+      result.push({ key: `0-${dataValue}`, url: dataValue, status: 'done' });
+      return result;
+    }
+    try {
+      const urls: string[] = JSON.parse(dataValue);
+      imagesValue.forEach((item) => {
+        if ((item.url && urls.includes(item.url)) || item.status !== 'done') {
+          result.push(item);
+        }
+      });
+      urls.forEach((url: string, index: number) => {
+        if (url && !result.some((item) => item.url === url)) {
+          const key = `${index}-${url}`;
+          const oldIndex = result.findIndex((item) => item.key === key);
+          if (oldIndex !== -1) {
+            result.splice(oldIndex, 1);
+          }
+          result.push({ key, url, status: 'done' });
+        }
+      });
+      if (props.limit != null && result.length > props.limit) {
+        const temp = result.filter((item) => item.status !== 'done');
+        for (const t of temp) {
+          const i = result.indexOf(t);
+          result.splice(i, 1);
+          if (result.length <= props.limit) {
+            break;
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      imagesValue.forEach((item) => {
+        if (item.status !== 'done') {
+          result.push(item);
+        }
+      });
+    }
+    return result;
+  };
+
+  /** 判断上传数据是否改变 */
+  const imagesIsChanged = (
+    newImages: UploadItem[],
+    oldImages: UploadItem[]
+  ) => {
+    if (newImages.length !== oldImages.length) {
+      return true;
+    }
+    for (let i = 0; i < newImages.length; i++) {
+      const newItem = newImages[i];
+      const oldItem = oldImages[i];
+      if (
+        newItem.key !== oldItem.key ||
+        newItem.url !== oldItem.url ||
+        newItem.status !== oldItem.status
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /** 同步绑定值 */
+  watch(
+    images,
+    (imagesValue) => {
+      const dataValue = getDataValue(imagesValue);
+      if (props.limit === 1) {
+        updateModelValue(dataValue.join());
+        return;
+      }
+      updateModelValue(dataValue.length ? JSON.stringify(dataValue) : '');
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.modelValue,
+    (dataValue) => {
+      const imagesValue = getImagesValue(dataValue, images.value);
+      if (imagesIsChanged(imagesValue, images.value)) {
+        images.value = imagesValue;
+      }
+    },
+    { immediate: true }
+  );
+
+  defineExpose({ clearData, isDone });
+</script>
diff --git a/z_ele/src/components/MonacoEditor/components/base-editor.vue b/z_ele/src/components/MonacoEditor/components/base-editor.vue
new file mode 100644
index 0000000..de4341e
--- /dev/null
+++ b/z_ele/src/components/MonacoEditor/components/base-editor.vue
@@ -0,0 +1,110 @@
+<template>
+  <div ref="editorRef"></div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+  const props = defineProps<{
+    /** v-model */
+    modelValue?: string;
+    /** 语言 */
+    language: string;
+    /** 主题 */
+    theme?: string;
+    /** 配置 */
+    config?: monaco.editor.IStandaloneEditorConstructionOptions;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+  }>();
+
+  /** 编辑器实例 */
+  let editorIns: monaco.editor.IStandaloneCodeEditor | null = null;
+
+  /** 编辑器节点 */
+  const editorRef = ref<HTMLElement | null>(null);
+
+  /** 更新modelValue */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 渲染编辑器 */
+  const render = () => {
+    if (!editorRef.value) {
+      return;
+    }
+    editorIns = monaco.editor.create(editorRef.value, {
+      value: props.modelValue || '',
+      language: props.language,
+      theme: props.theme,
+      automaticLayout: true,
+      ...(props.config || {})
+    });
+    // modelValue属性同步编辑器内容
+    editorIns.onDidChangeModelContent(() => {
+      updateModelValue(editorIns?.getValue?.());
+    });
+  };
+
+  /** 销毁编辑器 */
+  const destory = () => {
+    if (editorIns != null) {
+      editorIns.dispose();
+      editorIns = null;
+    }
+  };
+
+  /** 修改内容 */
+  const setContent = (value: string) => {
+    if (editorIns && value !== editorIns.getValue()) {
+      editorIns.setValue(value);
+    }
+  };
+
+  /** 获取编辑器实例 */
+  const getEditorIns = () => {
+    return editorIns;
+  };
+
+  /** 编辑器内容同步modelValue属性 */
+  watch(
+    () => props.modelValue,
+    (value) => {
+      setContent(value || '');
+    }
+  );
+
+  /** 更新代码语言和编辑器配置 */
+  watch(
+    [() => props.language, () => props.config],
+    () => {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    },
+    { deep: true }
+  );
+
+  /** 更新编辑器主题 */
+  watch(
+    () => props.theme,
+    (theme) => {
+      editorIns && editorIns.updateOptions({ theme });
+    }
+  );
+
+  onMounted(() => {
+    render();
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  defineExpose({ getEditorIns });
+</script>
diff --git a/z_ele/src/components/MonacoEditor/components/diff-editor.vue b/z_ele/src/components/MonacoEditor/components/diff-editor.vue
new file mode 100644
index 0000000..fd005a6
--- /dev/null
+++ b/z_ele/src/components/MonacoEditor/components/diff-editor.vue
@@ -0,0 +1,162 @@
+<template>
+  <div ref="editorRef"></div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+  const props = defineProps<{
+    /** v-model */
+    modelValue?: string;
+    /** 语言 */
+    language: string;
+    /** 主题 */
+    theme?: string;
+    /** 原始内容 */
+    original?: string;
+    /** 原始内容语言 */
+    originalLanguage?: string;
+    /** 配置 */
+    config?: monaco.editor.IStandaloneDiffEditorConstructionOptions;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+    (e: 'update:original', original?: string): void;
+  }>();
+
+  /** 编辑器实例 */
+  let editorIns: monaco.editor.IStandaloneDiffEditor | null = null;
+  /** 内容模型 */
+  let modifiedModel: monaco.editor.ITextModel | null = null;
+  /** 原始内容模型 */
+  let originalModel: monaco.editor.ITextModel | null = null;
+
+  /** 编辑器节点 */
+  const editorRef = ref<HTMLElement | null>(null);
+
+  /** 更新modelValue */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 更新original */
+  const updateOriginal = (original?: string) => {
+    emit('update:original', original);
+  };
+
+  /** 渲染编辑器 */
+  const render = () => {
+    if (!editorRef.value) {
+      return;
+    }
+    editorIns = monaco.editor.createDiffEditor(editorRef.value, {
+      theme: props.theme,
+      automaticLayout: true,
+      ...(props.config || {})
+    });
+    if (modifiedModel == null) {
+      modifiedModel = monaco.editor.createModel(
+        props.modelValue || '',
+        props.language
+      );
+      modifiedModel.onDidChangeContent(() => {
+        updateModelValue(modifiedModel?.getValue?.());
+      });
+    }
+    if (originalModel == null) {
+      originalModel = monaco.editor.createModel(
+        props.original || '',
+        props.originalLanguage || props.language
+      );
+      originalModel.onDidChangeContent(() => {
+        updateOriginal(originalModel?.getValue?.());
+      });
+    }
+    editorIns.setModel({
+      original: originalModel,
+      modified: modifiedModel
+    });
+  };
+
+  /** 销毁编辑器 */
+  const destory = () => {
+    if (editorIns != null) {
+      editorIns.dispose();
+      editorIns = null;
+    }
+  };
+
+  /** 销毁模型 */
+  const destoryModel = () => {
+    if (modifiedModel != null) {
+      modifiedModel.dispose();
+      modifiedModel = null;
+    }
+    if (originalModel != null) {
+      originalModel.dispose();
+      originalModel = null;
+    }
+  };
+
+  /** 获取编辑器实例 */
+  const getEditorIns = () => {
+    return editorIns;
+  };
+
+  /** 更新代码语言和编辑器内容 */
+  watch(
+    [
+      () => props.modelValue,
+      () => props.language,
+      () => props.original,
+      () => props.originalLanguage
+    ],
+    () => {
+      if (
+        modifiedModel == null ||
+        originalModel == null ||
+        modifiedModel.getLanguageId() !== props.language ||
+        originalModel.getLanguageId() !== props.originalLanguage
+      ) {
+        destoryModel();
+        destory();
+        nextTick(() => {
+          render();
+        });
+        return;
+      }
+      const content = props.modelValue || '';
+      if (content !== modifiedModel.getValue()) {
+        modifiedModel.setValue(content);
+      }
+      const originalContent = props.original || '';
+      if (originalContent !== originalModel.getValue()) {
+        originalModel.setValue(originalContent);
+      }
+    }
+  );
+
+  /** 更新主题和配置 */
+  watch(
+    [() => props.theme, () => props.config],
+    () => {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    },
+    { deep: true }
+  );
+
+  onMounted(() => {
+    render();
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  defineExpose({ getEditorIns });
+</script>
diff --git a/z_ele/src/components/MonacoEditor/index.vue b/z_ele/src/components/MonacoEditor/index.vue
new file mode 100644
index 0000000..c279535
--- /dev/null
+++ b/z_ele/src/components/MonacoEditor/index.vue
@@ -0,0 +1,73 @@
+<!-- 代码编辑器 -->
+<template>
+  <DiffEditor
+    v-if="diff"
+    ref="editorRef"
+    v-model="model"
+    :language="language"
+    :theme="theme"
+    v-model:original="original"
+    :originalLanguage="originalLanguage"
+    :config="config"
+    style="height: 600px"
+  />
+  <BaseEditor
+    v-else
+    ref="editorRef"
+    v-model="model"
+    :language="language"
+    :theme="theme"
+    :config="config"
+    style="height: 600px"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import BaseEditor from './components/base-editor.vue';
+  import DiffEditor from './components/diff-editor.vue';
+  import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+  import './user-worker';
+
+  defineOptions({ name: 'MonacoEditor' });
+
+  withDefaults(
+    defineProps<{
+      /** 语言 */
+      language?: string;
+      /** 主题 */
+      theme?: string;
+      /** 是否为diff模式 */
+      diff?: boolean;
+      /** 原始内容语言 */
+      originalLanguage?: string;
+      /** 配置 */
+      config?:
+        | editor.IStandaloneEditorConstructionOptions
+        | editor.IStandaloneDiffEditorConstructionOptions;
+    }>(),
+    { language: 'typescript' }
+  );
+
+  /** v-model */
+  const model = defineModel({ type: String });
+
+  /** 原始内容 */
+  const original = defineModel('original', { type: String });
+
+  /** 组件实例 */
+  const editorRef = ref<
+    InstanceType<typeof BaseEditor> | InstanceType<typeof DiffEditor> | null
+  >(null);
+
+  /** 获取编辑器实例 */
+  const getEditorIns = ():
+    | editor.IStandaloneCodeEditor
+    | editor.IStandaloneDiffEditor
+    | null
+    | undefined => {
+    return editorRef.value?.getEditorIns?.();
+  };
+
+  defineExpose({ getEditorIns });
+</script>
diff --git a/z_ele/src/components/MonacoEditor/user-worker.ts b/z_ele/src/components/MonacoEditor/user-worker.ts
new file mode 100644
index 0000000..39586e6
--- /dev/null
+++ b/z_ele/src/components/MonacoEditor/user-worker.ts
@@ -0,0 +1,26 @@
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new jsonWorker();
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new cssWorker();
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new htmlWorker();
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  }
+};
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
diff --git a/z_ele/src/components/ProCrud/index.vue b/z_ele/src/components/ProCrud/index.vue
new file mode 100644
index 0000000..a908139
--- /dev/null
+++ b/z_ele/src/components/ProCrud/index.vue
@@ -0,0 +1,51 @@
+<!-- 配置式增删改查 -->
+<template>
+  <EleCrud
+    v-bind="$props"
+    ref="crudRef"
+    :httpRequest="request"
+    :proFormComponent="proFormComponent || ProForm"
+    @tableSelectionsChange="emitMethods['tableSelectionsChange']"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleCrud>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import { useComponentEvents } from 'ele-admin-plus/es/utils/hook';
+  import type { EleCrudInstance } from 'ele-admin-plus/es/ele-app/plus';
+  import { crudProps, crudEmits } from 'ele-admin-plus/es/ele-crud/props';
+  import ProForm from '@/components/ProForm/index.vue';
+  import request from '@/utils/request';
+
+  defineOptions({ name: 'ProCrud' });
+
+  defineProps(crudProps);
+
+  const emit = defineEmits(crudEmits);
+
+  const { emitMethods } = useComponentEvents(crudEmits, emit);
+
+  /** 增删改查组件 */
+  const crudRef = ref<EleCrudInstance>(null);
+
+  /** 表格组件 */
+  const tableRef = computed(() => crudRef.value?.tableRef);
+
+  /** 获取表格选中数据 */
+  const getTableSelections = () => {
+    if (!crudRef.value) {
+      throw new Error('crudRef is null');
+    }
+    return crudRef.value.getTableSelections();
+  };
+
+  defineExpose({
+    crudRef,
+    tableRef,
+    getTableSelections
+  });
+</script>
diff --git a/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-advanced.vue b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-advanced.vue
new file mode 100644
index 0000000..bd6018d
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-advanced.vue
@@ -0,0 +1,155 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px',
+      marginTop: '6px'
+    }"
+  >
+    <div
+      class="ele-icon-border-color-base ele-icon-bg-fill-extra-light"
+      :style="{
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px',
+        borderRadius: '4px 4px 0 0'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '50%',
+          height: '100%',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          borderRightStyle: 'solid',
+          borderRightWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <div
+          class="ele-icon-border-color-base"
+          :style="{
+            height: '20px',
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            padding: '2px 8px',
+            boxSizing: 'border-box',
+            borderBottomStyle: 'solid',
+            borderBottomWidth: '1px'
+          }"
+        >
+          <IconSkeleton size="sm" style="width: 32px; margin: 0 auto" />
+        </div>
+        <div :style="{ height: '20px', display: 'flex', alignItems: 'center' }">
+          <div
+            :style="{
+              height: '100%',
+              width: '50%',
+              padding: '0 8px',
+              boxSizing: 'border-box',
+              display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column'
+            }"
+          >
+            <IconSkeleton size="sm" />
+          </div>
+          <div
+            class="ele-icon-border-color-base"
+            :style="{
+              height: '100%',
+              width: '50%',
+              padding: '0 8px',
+              boxSizing: 'border-box',
+              display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              borderLeftStyle: 'solid',
+              borderLeftWidth: '1px'
+            }"
+          >
+            <IconSkeleton size="sm" />
+          </div>
+        </div>
+      </div>
+      <div
+        :style="{ width: '25%', padding: '2px 8px', boxSizing: 'border-box' }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div :style="{ height: '20px', display: 'flex', alignItems: 'center' }">
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-basic.vue b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-basic.vue
new file mode 100644
index 0000000..d2b9554
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-basic.vue
@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px',
+      marginTop: '10px'
+    }"
+  >
+    <div
+      class="ele-icon-border-color-base ele-icon-bg-fill-extra-light"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px',
+        borderRadius: '4px 4px 0 0'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div :style="{ height: '20px', display: 'flex', alignItems: 'center' }">
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-split.vue b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-split.vue
new file mode 100644
index 0000000..c8c47c4
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-split.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :style="{ display: 'flex', marginTop: '10px' }">
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        width: '46px',
+        padding: '7px 6px',
+        boxSizing: 'border-box',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        marginRight: '10px'
+      }"
+    >
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconArrow
+          size="sm"
+          direction="down"
+          color="primary"
+          :style="{ marginRight: '1px', transform: 'translate(-2px, 1px)' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          paddingLeft: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '8px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          paddingLeft: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '8px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '8px' }">
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '8px' }">
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        flex: 1,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-base ele-icon-bg-fill-extra-light"
+        :style="{
+          height: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px',
+          borderRadius: '4px 4px 0 0'
+        }"
+      >
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div
+          class="ele-icon-border-color-base"
+          :style="{
+            flex: 1,
+            padding: '2px 8px',
+            borderLeftStyle: 'solid',
+            borderLeftWidth: '1px',
+            boxSizing: 'border-box'
+          }"
+        >
+          <IconSkeleton size="sm" />
+        </div>
+        <div
+          class="ele-icon-border-color-base"
+          :style="{
+            flex: 1,
+            padding: '2px 8px',
+            borderLeftStyle: 'solid',
+            borderLeftWidth: '1px',
+            boxSizing: 'border-box'
+          }"
+        >
+          <IconSkeleton size="sm" />
+        </div>
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          height: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px'
+        }"
+      >
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          height: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px'
+        }"
+      >
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+      </div>
+      <div :style="{ height: '20px', display: 'flex', alignItems: 'center' }">
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+        <div :style="{ flex: 1, padding: '0 8px', boxSizing: 'border-box' }">
+          <IconSkeleton size="sm" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconArrow
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-tree.vue b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-tree.vue
new file mode 100644
index 0000000..46c6f37
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/components/template-covers/cover-tree.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px',
+      marginTop: '10px'
+    }"
+  >
+    <div
+      class="ele-icon-border-color-base ele-icon-bg-fill-extra-light"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px',
+        borderRadius: '4px 4px 0 0'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          padding: '2px 8px',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      >
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div
+        :style="{
+          width: '25%',
+          padding: '0 8px',
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'center'
+        }"
+      >
+        <IconArrow
+          size="sm"
+          direction="down"
+          color="primary"
+          :style="{ marginRight: '1px', transform: 'translate(-2px, 1px)' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div
+        :style="{
+          width: '25%',
+          padding: '0 8px 0 16px',
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'center'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+    <div :style="{ height: '20px', display: 'flex', alignItems: 'center' }">
+      <div
+        :style="{
+          width: '25%',
+          padding: '0 8px',
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'center'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconArrow
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProCrudBuilder/components/template-data.ts b/z_ele/src/components/ProCrudBuilder/components/template-data.ts
new file mode 100644
index 0000000..ab75bd7
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/components/template-data.ts
@@ -0,0 +1,390 @@
+import { markRaw } from 'vue';
+import type { TemplateItem } from 'ele-admin-plus/es/ele-crud-builder/types';
+import CoverBasic from './template-covers/cover-basic.vue';
+import CoverAdvanced from './template-covers/cover-advanced.vue';
+import CoverTree from './template-covers/cover-tree.vue';
+import CoverSplit from './template-covers/cover-split.vue';
+
+/**
+ * 模板库数据
+ */
+export const defaultTemplateData: TemplateItem[] = [
+  {
+    name: '基础列表',
+    cover: markRaw(CoverBasic),
+    config: {
+      fields: [
+        {
+          key: 'f3bm9f9888k4kol8',
+          prop: 'username',
+          label: '用户账号',
+          columnProps: { sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'fubnc9dhl3s46dci',
+          prop: 'nickname',
+          label: '用户名',
+          columnProps: { sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'frsoa6vjkd002soj',
+          prop: 'sexName',
+          label: '性别',
+          columnProps: { width: 100, align: 'center', sortable: 'custom' },
+          addItemProps: {
+            required: true,
+            prop: 'sex',
+            type: 'dictRadio',
+            props: { code: 'sex' }
+          },
+          editItemProps: {
+            required: true,
+            prop: 'sex',
+            type: 'dictRadio',
+            props: { code: 'sex' }
+          }
+        },
+        {
+          key: 'fkndbwy5yucoxb5d',
+          prop: 'createTime',
+          label: '创建时间',
+          hideInSearch: true,
+          hideInAdd: true,
+          hideInEdit: true,
+          columnProps: { align: 'center', sortable: 'custom' }
+        }
+      ],
+      listApi:
+        "/*__PRO_CRUD__*/async ({ pages, where, orders }) => {\n    const res = await httpRequest.get('/system/user/page', {\n        params: Object.assign({}, where, orders, pages)\n    });\n    if (res.data.code === 0) {\n        return res.data.data;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      deleteApi:
+        "/*__PRO_CRUD__*/async (dataKeys) => {\n    const res = await httpRequest.delete('/system/user/batch', {\n        data: dataKeys\n    });\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      addApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.post('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      editApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.put('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      searchConfig: { cardProps: { bodyStyle: { paddingBottom: '2px' } } },
+      listConfig: {
+        cardProps: { bodyStyle: { paddingTop: '8px' } },
+        tableProps: { rowKey: 'userId', showOverflowTooltip: true }
+      },
+      pageConfig: { pageProps: true }
+    }
+  },
+  {
+    name: '复杂表头',
+    cover: markRaw(CoverAdvanced),
+    config: {
+      fields: [
+        {
+          key: 'f15itx5juqgtyqor',
+          prop: 'username',
+          label: '用户账号',
+          columnProps: { align: 'center', sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'f8dqe9k30w6l6sm3',
+          prop: 'nickname',
+          label: '用户名',
+          columnProps: { align: 'center', sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'f6u8d3tvczoo5tck',
+          prop: 'basicInfo',
+          label: '基本信息',
+          columnProps: { align: 'center' },
+          hideInSearch: 'flat',
+          hideInAdd: 'flat',
+          hideInEdit: 'flat',
+          children: [
+            {
+              key: 'f52i8gr6xedlyrxg',
+              prop: 'sexName',
+              label: '性别',
+              columnProps: { width: 100, align: 'center', sortable: 'custom' },
+              addItemProps: {
+                required: true,
+                prop: 'sex',
+                type: 'dictRadio',
+                props: { code: 'sex' }
+              },
+              editItemProps: {
+                required: true,
+                prop: 'sex',
+                type: 'dictRadio',
+                props: { code: 'sex' }
+              }
+            },
+            {
+              key: 'f08dwkuscdzrg2hv',
+              prop: 'phone',
+              label: '手机号',
+              columnProps: { align: 'center', sortable: 'custom' },
+              searchItemProps: { vIf: 'searchExpand' }
+            },
+            {
+              key: 'fl0a5i9wmfywj63m',
+              prop: 'organizationName',
+              label: '部门',
+              columnProps: { align: 'center', sortable: 'custom' },
+              searchItemProps: { vIf: 'searchExpand' }
+            }
+          ]
+        },
+        {
+          key: 'fult8ssfpsysczl7',
+          prop: 'createTime',
+          label: '创建时间',
+          hideInSearch: true,
+          hideInAdd: true,
+          hideInEdit: true,
+          columnProps: { align: 'center', sortable: 'custom' }
+        }
+      ],
+      listApi:
+        "/*__PRO_CRUD__*/async ({ pages, where, orders }) => {\n    const res = await httpRequest.get('/system/user/page', {\n        params: Object.assign({}, where, orders, pages)\n    });\n    if (res.data.code === 0) {\n        return res.data.data;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      deleteApi:
+        "/*__PRO_CRUD__*/async (dataKeys) => {\n    const res = await httpRequest.delete('/system/user/batch', {\n        data: dataKeys\n    });\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      addApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.post('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      editApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.put('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      searchConfig: {
+        cardProps: { bodyStyle: { paddingBottom: '2px' } },
+        formProps: { showSearchExpand: true }
+      },
+      listConfig: {
+        cardProps: { bodyStyle: { paddingTop: '8px' } },
+        tableProps: { rowKey: 'userId', showOverflowTooltip: true }
+      },
+      pageConfig: { pageProps: true }
+    }
+  },
+  {
+    name: '树形列表',
+    cover: markRaw(CoverTree),
+    config: {
+      fields: [
+        {
+          key: 'fzy9xxkozygila3e',
+          prop: 'parentId',
+          label: '上级机构',
+          addItemProps: {
+            type: 'treeSelect',
+            props: {
+              defaultExpandAll: true,
+              nodeKey: 'organizationId',
+              props: { label: 'organizationName' },
+              data: "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/organization/tree');\n    return res.data.data;\n}"
+            }
+          },
+          editItemProps: {
+            type: 'treeSelect',
+            props: {
+              defaultExpandAll: true,
+              nodeKey: 'organizationId',
+              props: { label: 'organizationName' },
+              data: "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/organization/tree');\n    return res.data.data;\n}"
+            }
+          },
+          hideInList: true,
+          hideInSearch: true
+        },
+        {
+          key: 'f6buzjg5wno9lxsx',
+          prop: 'organizationName',
+          label: '机构名称',
+          columnProps: { minWidth: 160, sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'fv7nvwq95idzcje2',
+          prop: 'organizationTypeName',
+          label: '机构类型',
+          columnProps: { align: 'center', minWidth: 100 },
+          addItemProps: {
+            required: true,
+            prop: 'organizationType',
+            type: 'dictSelect',
+            props: { code: 'organization_type' }
+          },
+          editItemProps: {
+            required: true,
+            prop: 'organizationType',
+            type: 'dictSelect',
+            props: { code: 'organization_type' }
+          }
+        },
+        {
+          key: 'fkuq8hm3kzmnt29t',
+          prop: 'sortNumber',
+          label: '排序号',
+          columnProps: { align: 'center', minWidth: 100 },
+          addItemProps: { required: true, type: 'inputNumber' },
+          editItemProps: { required: true, type: 'inputNumber' },
+          hideInSearch: true
+        },
+        {
+          key: 'fgy01h6mmxmzdotf',
+          prop: 'createTime',
+          label: '创建时间',
+          hideInSearch: true,
+          hideInAdd: true,
+          hideInEdit: true,
+          columnProps: { align: 'center', width: 180, sortable: 'custom' }
+        },
+        {
+          key: 'fng15so67wb4d8r8',
+          prop: 'comments',
+          label: '备注',
+          addItemProps: { type: 'textarea' },
+          editItemProps: { type: 'textarea' },
+          hideInList: true,
+          hideInSearch: true
+        }
+      ],
+      listApi:
+        "/*__PRO_CRUD__*/async ({ where, orders }) => {\n    const res = await httpRequest.get('/system/organization/tree', {\n        params: Object.assign({}, where, orders)\n    });\n    if (res.data.code === 0) {\n        return res.data.data;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      deleteApi:
+        "/*__PRO_CRUD__*/async (dataKeys) => {\n    const res = await httpRequest.delete('/system/organization/batch', {\n        data: dataKeys\n    });\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      addApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.post('/system/organization', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      editApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.put('/system/organization', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      searchConfig: { cardProps: { bodyStyle: { paddingBottom: '2px' } } },
+      listConfig: {
+        cardProps: { bodyStyle: { paddingTop: '8px' } },
+        tableProps: {
+          rowKey: 'organizationId',
+          showOverflowTooltip: true,
+          defaultExpandAll: true,
+          pagination: false
+        },
+        selectionColumnProps: false,
+        delBtnProps: false
+      },
+      pageConfig: { pageProps: true }
+    }
+  },
+  {
+    name: '左树右表',
+    cover: markRaw(CoverSplit),
+    config: {
+      fields: [
+        {
+          key: 'ftva2ignsk7s9t4v',
+          prop: 'organizationId',
+          label: '所属机构',
+          addItemProps: {
+            type: 'treeSelect',
+            props: {
+              defaultExpandAll: true,
+              nodeKey: 'organizationId',
+              props: { label: 'organizationName' },
+              data: "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/organization/tree');\n    return res.data.data;\n}"
+            }
+          },
+          editItemProps: {
+            type: 'treeSelect',
+            props: {
+              defaultExpandAll: true,
+              nodeKey: 'organizationId',
+              props: { label: 'organizationName' },
+              data: "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/organization/tree');\n    return res.data.data;\n}"
+            }
+          },
+          hideInList: true,
+          hideInSearch: true
+        },
+        {
+          key: 'f3r9kb783l24qpit',
+          prop: 'username',
+          label: '用户账号',
+          columnProps: { sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'fxy1ea06rvv14qkg',
+          prop: 'nickname',
+          label: '用户名',
+          columnProps: { sortable: 'custom' },
+          addItemProps: { required: true },
+          editItemProps: { required: true }
+        },
+        {
+          key: 'feh00v74vjp8wzbc',
+          prop: 'sexName',
+          label: '性别',
+          columnProps: { width: 100, align: 'center', sortable: 'custom' },
+          addItemProps: {
+            required: true,
+            prop: 'sex',
+            type: 'dictRadio',
+            props: { code: 'sex' }
+          },
+          editItemProps: {
+            required: true,
+            prop: 'sex',
+            type: 'dictRadio',
+            props: { code: 'sex' }
+          }
+        },
+        {
+          key: 'f2f5l2luqhpca0a2',
+          prop: 'createTime',
+          label: '创建时间',
+          hideInSearch: true,
+          hideInAdd: true,
+          hideInEdit: true,
+          columnProps: { align: 'center', sortable: 'custom' }
+        }
+      ],
+      listApi:
+        "/*__PRO_CRUD__*/async ({ pages, where, orders }) => {\n    const res = await httpRequest.get('/system/user/page', {\n        params: Object.assign({}, where, orders, pages)\n    });\n    if (res.data.code === 0) {\n        return res.data.data;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      deleteApi:
+        "/*__PRO_CRUD__*/async (dataKeys) => {\n    const res = await httpRequest.delete('/system/user/batch', {\n        data: dataKeys\n    });\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      addApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.post('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      editApi:
+        "/*__PRO_CRUD__*/async (data) => {\n    const res = await httpRequest.put('/system/user', data);\n    if (res.data.code === 0) {\n        return res.data.message;\n    }\n    return Promise.reject(new Error(res.data.message));\n}\n",
+      treeListApi:
+        "/*__PRO_CRUD__*/async () => {\n    const res = await httpRequest.get('/system/organization/tree');\n    if (res.data.code === 0) {\n        return res.data.data;\n    }\n    return Promise.reject(new Error(res.data.message));\n}",
+      searchConfig: { cardProps: false },
+      listConfig: {
+        cardProps: false,
+        tableProps: {
+          rowKey: 'userId',
+          showOverflowTooltip: true,
+          style: { paddingBottom: '16px', marginTop: '-14px' }
+        }
+      },
+      pageConfig: {
+        splitPanelProps: {
+          bodyStyle: { padding: '16px 16px 0 16px' },
+          flexTable: true
+        },
+        cardProps: {
+          flexTable: true,
+          bodyStyle: { padding: '0' }
+        },
+        pageProps: { flexTable: true },
+        tableFilterField: 'organizationId',
+        sideConfig: {
+          treeProps: {
+            nodeKey: 'organizationId',
+            props: { label: 'organizationName' }
+          }
+        }
+      }
+    }
+  }
+];
diff --git a/z_ele/src/components/ProCrudBuilder/index.vue b/z_ele/src/components/ProCrudBuilder/index.vue
new file mode 100644
index 0000000..d60f9da
--- /dev/null
+++ b/z_ele/src/components/ProCrudBuilder/index.vue
@@ -0,0 +1,59 @@
+<!-- 增删改查构建器 -->
+<template>
+  <EleCrudBuilder
+    v-bind="$props"
+    :templateData="templateData || defaultTemplateData"
+    :pageConfigFormItems="pageConfigFormItems || defaultPageConfigFormItems"
+    :fieldEditFormItems="fieldEditFormItems || defaultFieldEditFormItems"
+    :crudComponent="crudComponent || ProCrud"
+    :proFormComponent="proFormComponent || ProForm"
+    :proFormBuilderComponent="proFormBuilderComponent || ProFormBuilder"
+    :codeEditerComponent="codeEditerComponent || CodeEditer"
+    :jsonEditerComponent="jsonEditerComponent || JsonEditer"
+    :codeViewerComponent="codeViewerComponent || CodeViewer"
+    :headerTools="headerTools ?? defaultHeaderRightTools"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleCrudBuilder>
+</template>
+
+<script setup lang="ts">
+  import type { EleCrudProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type { HeaderRightToolName } from 'ele-admin-plus/es/ele-crud-builder/types';
+  import { crudBuilderProps } from 'ele-admin-plus/es/ele-crud-builder/props';
+  import {
+    defaultPageConfigFormItems,
+    defaultFieldEditFormItems
+  } from 'ele-admin-plus/es/ele-crud-builder/util';
+  import ProCrud from '@/components/ProCrud/index.vue';
+  import ProForm from '@/components/ProForm/index.vue';
+  import ProFormBuilder from '@/components/ProFormBuilder/index.vue';
+  import CodeEditer from '@/components/ProFormBuilder/components/code-editer.vue';
+  import JsonEditer from '@/components/ProFormBuilder/components/json-editer.vue';
+  import CodeViewer from '@/components/ProFormBuilder/components/code-viewer.vue';
+  import { defaultTemplateData } from './components/template-data';
+
+  defineOptions({ name: 'ProCrudBuilder' });
+
+  defineProps(crudBuilderProps);
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', config: EleCrudProps): void;
+  }>();
+
+  /** 顶栏右侧按钮布局 */
+  const defaultHeaderRightTools: HeaderRightToolName[] = [
+    'import',
+    'export',
+    'clear',
+    'code'
+  ];
+
+  /** 更新绑定值 */
+  const handleUpdateModelValue = (config: EleCrudProps) => {
+    emit('update:modelValue', config);
+  };
+</script>
diff --git a/z_ele/src/components/ProForm/index.vue b/z_ele/src/components/ProForm/index.vue
new file mode 100644
index 0000000..cb317f6
--- /dev/null
+++ b/z_ele/src/components/ProForm/index.vue
@@ -0,0 +1,173 @@
+<!-- 高级表单 -->
+<template>
+  <EleProForm
+    v-bind="$props"
+    ref="proFormRef"
+    :httpRequest="request"
+    @update:searchExpand="emitMethods['update:searchExpand']"
+    @updateValue="emitMethods['updateValue']"
+    @update:items="emitMethods['update:items']"
+    @update:activeItemKey="emitMethods['update:activeItemKey']"
+    @submit="emitMethods['submit']"
+    @reset="emitMethods['reset']"
+    @validate="emitMethods['validate']"
+  >
+    <template
+      v-for="name in Object.keys($slots).filter((k) => !ownSlots.includes(k))"
+      #[name]="slotProps"
+    >
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+    <template #dictRadio="{ item, modelValue, updateValue }">
+      <DictData
+        code=""
+        v-bind="item.props || {}"
+        type="radio"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #dictCheckbox="{ item, modelValue, updateValue }">
+      <DictData
+        code=""
+        v-bind="item.props || {}"
+        type="checkbox"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #dictSelect="{ item, modelValue, updateValue }">
+      <DictData
+        code=""
+        :placeholder="'请选择' + item.label"
+        v-bind="item.props || {}"
+        type="select"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #dictMultipleSelect="{ item, modelValue, updateValue }">
+      <DictData
+        code=""
+        :placeholder="'请选择' + item.label"
+        v-bind="item.props || {}"
+        type="multipleSelect"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template
+      #imageUpload="{ item, modelValue, updateValue, itemComponentRef }"
+    >
+      <ImageUpload
+        v-bind="item.props || {}"
+        :ref="itemComponentRef"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #fileUpload="{ item, modelValue, updateValue, itemComponentRef }">
+      <FileUpload
+        v-bind="item.props || {}"
+        :ref="itemComponentRef"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #regions="{ item, modelValue, updateValue }">
+      <RegionsSelect
+        :placeholder="'请选择' + item.label"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #multipleRegions="{ item, modelValue, updateValue }">
+      <RegionsSelect
+        :placeholder="'请选择' + item.label"
+        v-bind="item.props || {}"
+        :multiple="true"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #iconSelect="{ item, modelValue, updateValue }">
+      <IconSelect
+        :placeholder="'请选择' + item.label"
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template #editor="{ item, modelValue, updateValue }">
+      <TinymceEditor
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+  </EleProForm>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import type { ElFormInstanceMethods } from 'ele-admin-plus/es/ele-app/el';
+  import type { EleProFormInstance } from 'ele-admin-plus/es/ele-app/plus';
+  import { useComponentEvents } from 'ele-admin-plus/es/utils/hook';
+  import {
+    proFormProps,
+    proFormEmits
+  } from 'ele-admin-plus/es/ele-pro-form/props';
+  import ImageUpload from '@/components/ImageUpload/index.vue';
+  import FileUpload from '@/components/FileUpload/index.vue';
+  import RegionsSelect from '@/components/RegionsSelect/index.vue';
+  import IconSelect from '@/components/IconSelect/index.vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import request from '@/utils/request';
+  const ownSlots = [
+    'default',
+    'dictRadio',
+    'dictCheckbox',
+    'dictSelect',
+    'dictMultipleSelect',
+    'imageUpload',
+    'fileUpload',
+    'regions',
+    'multipleRegions',
+    'iconSelect',
+    'editor'
+  ];
+
+  defineOptions({ name: 'ProForm' });
+
+  defineProps(proFormProps);
+
+  const emit = defineEmits(proFormEmits);
+
+  const { emitMethods } = useComponentEvents(proFormEmits, emit);
+
+  /** 高级表单实例 */
+  const proFormRef = ref<EleProFormInstance>(null);
+
+  /** 表单实例 */
+  const formRef = computed(() => proFormRef.value?.formRef);
+
+  /** 实例方法 */
+  const exposeMethods = {} as ElFormInstanceMethods;
+  [
+    'validate',
+    'validateField',
+    'resetFields',
+    'scrollToField',
+    'clearValidate'
+  ].forEach((key) => {
+    exposeMethods[key] = (...params: any) => {
+      if (!proFormRef.value) {
+        throw new Error('proFormRef is null');
+      }
+      return proFormRef.value[key](...params);
+    };
+  });
+
+  defineExpose({ ...exposeMethods, proFormRef, formRef });
+</script>
diff --git a/z_ele/src/components/ProForm/util.ts b/z_ele/src/components/ProForm/util.ts
new file mode 100644
index 0000000..04586b1
--- /dev/null
+++ b/z_ele/src/components/ProForm/util.ts
@@ -0,0 +1,4 @@
+export {
+  getFormInitValue,
+  ChildrenRender
+} from 'ele-admin-plus/es/ele-pro-form/util';
diff --git a/z_ele/src/components/ProFormBuilder/components/code-editer.vue b/z_ele/src/components/ProFormBuilder/components/code-editer.vue
new file mode 100644
index 0000000..dc8bd34
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/code-editer.vue
@@ -0,0 +1,50 @@
+<!-- 代码编辑器 -->
+<template>
+  <MonacoEditor
+    theme="vs-dark"
+    language="javascript"
+    :modelValue="modelValue"
+    @update:modelValue="updateModelValue"
+    :config="editorConfig"
+    :style="{ height: '100%' }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+  const editorConfig: editor.IStandaloneEditorConstructionOptions = {
+    contextmenu: false,
+    minimap: { enabled: false },
+    suggest: { enabled: false } as any,
+    inlineSuggest: { enabled: false },
+    quickSuggestions: false,
+    parameterHints: { enabled: false },
+    autoClosingBrackets: 'never',
+    autoClosingQuotes: 'never',
+    formatOnType: false,
+    formatOnPaste: false,
+    codeLens: false,
+    lightbulb: { enabled: 'off' as editor.ShowLightbulbIconMode.Off },
+    snippetSuggestions: 'none',
+    wordBasedSuggestions: 'off',
+    selectionHighlight: false,
+    occurrencesHighlight: 'off',
+    matchBrackets: 'never',
+    hover: { enabled: false }
+  };
+
+  defineProps<{
+    /** 代码 */
+    modelValue?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+  }>();
+
+  /** 更新代码 */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/code-viewer.vue b/z_ele/src/components/ProFormBuilder/components/code-viewer.vue
new file mode 100644
index 0000000..56239b3
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/code-viewer.vue
@@ -0,0 +1,37 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="ele-pro-form-builder-code-line-numbers">
+    <div v-for="n in codeLines" :key="n">{{ n }}</div>
+  </div>
+  <pre class="ele-pro-form-builder-code-pre" v-html="codeHtml"></pre>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import hljs from 'highlight.js';
+  import 'highlight.js/styles/github-dark.css';
+  import xml from 'highlight.js/lib/languages/xml';
+
+  hljs.registerLanguage('vue', xml);
+
+  const props = defineProps<{
+    /** 代码 */
+    code?: string;
+  }>();
+
+  /** 高亮后代码 */
+  const codeHtml = ref('');
+
+  /** 代码行数 */
+  const codeLines = ref(1);
+
+  watch(
+    () => props.code,
+    (code) => {
+      const result = hljs.highlight(code ?? '', { language: 'vue' }).value;
+      codeHtml.value = result;
+      codeLines.value = result.split('\n').length;
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/component-data.ts b/z_ele/src/components/ProFormBuilder/components/component-data.ts
new file mode 100644
index 0000000..e9e00cb
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/component-data.ts
@@ -0,0 +1,1755 @@
+import { markRaw } from 'vue';
+import type { ComponentItem } from 'ele-admin-plus/es/ele-pro-form-builder/types';
+import { defaultComponentData as componentData } from 'ele-admin-plus/es/ele-pro-form-builder/util';
+import {
+  codeTips,
+  vIfCodeTips
+} from 'ele-admin-plus/es/ele-pro-form-builder/components/component-data';
+import CoverDictCheckbox from './covers/cover-dict-checkbox.vue';
+import CoverDictMultipleSelect from './covers/cover-dict-multiple-select.vue';
+import CoverDictRadio from './covers/cover-dict-radio.vue';
+import CoverDictSelect from './covers/cover-dict-select.vue';
+import CoverEditor from './covers/cover-editor.vue';
+import CoverFileUpload from './covers/cover-file-upload.vue';
+import CoverIconSelect from './covers/cover-icon-select.vue';
+import CoverImageUpload from './covers/cover-image-upload.vue';
+import CoverMultipleRegions from './covers/cover-multiple-regions.vue';
+import CoverRegions from './covers/cover-regions.vue';
+
+/**
+ * 自定义的组件
+ */
+const additionalItems: ComponentItem[] = [
+  {
+    type: 'iconSelect',
+    name: '图标选择',
+    cover: markRaw(CoverIconSelect),
+    presetProps: { popperWidth: 414, popperHeight: 260 },
+    defaultProps: {},
+    initialProps: {
+      popperWidth: 480,
+      popperHeight: 388,
+      filterable: 'popper',
+      gridStyle: { gridTemplateColumns: 'repeat(6, 1fr)' }
+    },
+    reservedProps: {},
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'input'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '占位文本',
+        prop: 'props.placeholder',
+        type: 'input'
+      },
+      {
+        label: '清除按钮',
+        prop: 'props.clearable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '事件设置',
+        prop: 'groupEventsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '选中值改变',
+        prop: 'props.onChange',
+        type: 'proFormBuilderEventEdit',
+        props: {
+          title: '设置 change 事件',
+          codeTips,
+          codePlaceholder: '(value) => {\n\n}'
+        }
+      },
+      {
+        label: '下拉框出现/隐藏',
+        prop: 'props.onVisibleChange',
+        type: 'proFormBuilderEventEdit',
+        props: {
+          title: '设置 visibleChange 事件',
+          codeTips,
+          codePlaceholder: '(visible) => {\n\n}'
+        }
+      },
+      {
+        label: '清空按钮点击',
+        prop: 'props.onClear',
+        type: 'proFormBuilderEventEdit',
+        props: {
+          title: '设置 clear 事件',
+          codeTips,
+          codePlaceholder: '() => {\n\n}'
+        }
+      },
+      {
+        label: '失去焦点',
+        prop: 'props.onBlur',
+        type: 'proFormBuilderEventEdit',
+        props: {
+          title: '设置 blur 事件',
+          codeTips,
+          codePlaceholder: '(enent) => {\n\n}'
+        }
+      },
+      {
+        label: '获得焦点',
+        prop: 'props.onFocus',
+        type: 'proFormBuilderEventEdit',
+        props: {
+          title: '设置 focus 事件',
+          codeTips,
+          codePlaceholder: '(enent) => {\n\n}'
+        }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'EleIconSelect',
+    componentImport: `import IconSelect from '@/components/IconSelect/index.vue';`
+  },
+  {
+    type: 'regions',
+    name: '省市区选择',
+    cover: markRaw(CoverRegions),
+    presetProps: {
+      type: 'default',
+      valueField: 'value',
+      clearable: true,
+      filterable: true,
+      separator: '/',
+      showAllLevels: true,
+      cascaderProps: { expandTrigger: 'click' }
+    },
+    defaultProps: {},
+    initialProps: { placeholder: '' },
+    reservedProps: {},
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'editTag'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '占位文本',
+        prop: 'props.placeholder',
+        type: 'input'
+      },
+      {
+        label: '清除按钮',
+        prop: 'props.clearable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否可搜索',
+        prop: 'props.filterable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '类型',
+        prop: 'props.type',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'default', label: '省市区选择' },
+            { value: 'provinceCity', label: '省市选择' },
+            { value: 'province', label: '省选择' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card is-loose'
+        }
+      },
+      {
+        label: '值类型',
+        prop: 'props.valueField',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'value', label: '区号' },
+            { value: 'label', label: '名称' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '显示选中值完整路径',
+        prop: 'props.showAllLevels',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '选项分隔符',
+        prop: 'props.separator',
+        type: 'input'
+      },
+      {
+        label: '父子节点不关联',
+        prop: 'props.cascaderProps.checkStrictly',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '次级菜单展开方式',
+        prop: 'props.cascaderProps.expandTrigger',
+        type: 'checkCard',
+        props: {
+          items: [
+            { label: '点击', value: 'click' },
+            { label: '鼠标移入', value: 'hover' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card is-loose'
+        }
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'RegionsSelect',
+    componentImport: `import RegionsSelect from '@/components/RegionsSelect/index.vue';`
+  },
+  {
+    type: 'multipleRegions',
+    name: '省市区多选',
+    cover: markRaw(CoverMultipleRegions),
+    presetProps: {
+      type: 'default',
+      valueField: 'value',
+      clearable: true,
+      filterable: true,
+      separator: '/',
+      showAllLevels: true,
+      collapseTags: true,
+      maxCollapseTags: 5,
+      cascaderProps: { expandTrigger: 'click' }
+    },
+    defaultProps: {},
+    initialProps: { placeholder: '' },
+    reservedProps: { multiple: true },
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'proFormBuilderJsonInput',
+        props: { placeholder: '输入 JSON 格式' }
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '占位文本',
+        prop: 'props.placeholder',
+        type: 'input'
+      },
+      {
+        label: '清除按钮',
+        prop: 'props.clearable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否可搜索',
+        prop: 'props.filterable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '类型',
+        prop: 'props.type',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'default', label: '省市区选择' },
+            { value: 'provinceCity', label: '省市选择' },
+            { value: 'province', label: '省选择' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card is-loose'
+        }
+      },
+      {
+        label: '值类型',
+        prop: 'props.valueField',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'value', label: '区号' },
+            { value: 'label', label: '名称' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '显示选中值完整路径',
+        prop: 'props.showAllLevels',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '选项分隔符',
+        prop: 'props.separator',
+        type: 'input'
+      },
+      {
+        label: '父子节点不关联',
+        prop: 'props.cascaderProps.checkStrictly',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '次级菜单展开方式',
+        prop: 'props.cascaderProps.expandTrigger',
+        type: 'checkCard',
+        props: {
+          items: [
+            { label: '点击', value: 'click' },
+            { label: '鼠标移入', value: 'hover' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card is-loose'
+        }
+      },
+      {
+        label: '折叠显示 Tag',
+        prop: 'props.collapseTags',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '最大显示 Tag 数量',
+        prop: 'props.maxCollapseTags',
+        type: 'inputNumber',
+        props: { min: 1, step: 1, stepStrictly: true }
+      },
+      {
+        label: '悬浮显示折叠的 Tag',
+        prop: 'props.collapseTagsTooltip',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'RegionsSelect',
+    componentImport: `import RegionsSelect from '@/components/RegionsSelect/index.vue';`
+  },
+  {
+    type: 'imageUpload',
+    name: '图片上传',
+    cover: markRaw(CoverImageUpload),
+    presetProps: { sortable: true, drag: true, fileLimit: 100 },
+    defaultProps: {},
+    initialProps: { limit: 3 },
+    reservedProps: {},
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'textarea'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '是否只读',
+        prop: 'props.readonly',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '最大上传数量',
+        prop: 'props.limit',
+        type: 'inputNumber',
+        props: { min: 1, step: 1, stepStrictly: true }
+      },
+      {
+        label: '文件大小限制',
+        prop: 'props.fileLimit',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '可多选文件',
+        prop: 'props.multiple',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '可拖拽上传',
+        prop: 'props.drag',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '可拖拽排序',
+        prop: 'props.sortable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '图片适应模式',
+        prop: 'props.imageProps.fit',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'fill', label: 'fill' },
+            { value: 'contain', label: 'contain' },
+            { value: 'cover', label: 'cover' },
+            { value: 'none', label: 'none' },
+            { value: 'scale-down', label: 'scale-down' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card is-loose'
+        }
+      },
+      {
+        label: '图片项样式',
+        prop: 'props.itemStyle',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '上传按钮样式',
+        prop: 'props.buttonStyle',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'ImageUpload',
+    componentImport: `import ImageUpload from '@/components/ImageUpload/index.vue';`
+  },
+  {
+    type: 'fileUpload',
+    name: '附件上传',
+    cover: markRaw(CoverFileUpload),
+    presetProps: { sortable: true, drag: true, fileLimit: 100 },
+    defaultProps: {},
+    initialProps: { limit: 6 },
+    reservedProps: {},
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'textarea'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '是否只读',
+        prop: 'props.readonly',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '最大上传数量',
+        prop: 'props.limit',
+        type: 'inputNumber',
+        props: { min: 1, step: 1, stepStrictly: true }
+      },
+      {
+        label: '文件大小限制',
+        prop: 'props.fileLimit',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '可多选文件',
+        prop: 'props.multiple',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '可拖拽上传',
+        prop: 'props.drag',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '可拖拽排序',
+        prop: 'props.sortable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '文件项样式',
+        prop: 'props.itemStyle',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '上传按钮样式',
+        prop: 'props.buttonStyle',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'FileUpload',
+    componentImport: `import FileUpload from '@/components/FileUpload/index.vue';`
+  },
+  {
+    type: 'dictRadio',
+    name: '字典单选',
+    cover: markRaw(CoverDictRadio),
+    presetProps: {},
+    defaultProps: {},
+    initialProps: { code: 'sex' },
+    reservedProps: { type: 'radio' },
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'input'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '字典类型值',
+        prop: 'props.code',
+        type: 'input'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'DictData'
+  },
+  {
+    type: 'dictCheckbox',
+    name: '字典多选',
+    cover: markRaw(CoverDictCheckbox),
+    presetProps: {},
+    defaultProps: {},
+    initialProps: { code: 'sex' },
+    reservedProps: { type: 'checkbox' },
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'editTag'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '字典类型值',
+        prop: 'props.code',
+        type: 'input'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'DictData'
+  },
+  {
+    type: 'dictSelect',
+    name: '字典下拉',
+    cover: markRaw(CoverDictSelect),
+    presetProps: { clearable: true },
+    defaultProps: {},
+    initialProps: { code: 'sex' },
+    reservedProps: { type: 'select' },
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'input'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '占位文本',
+        prop: 'props.placeholder',
+        type: 'input'
+      },
+      {
+        label: '清除按钮',
+        prop: 'props.clearable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否可搜索',
+        prop: 'props.filterable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '字典类型值',
+        prop: 'props.code',
+        type: 'input'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'DictData'
+  },
+  {
+    type: 'dictMultipleSelect',
+    name: '字典下拉多选',
+    cover: markRaw(CoverDictMultipleSelect),
+    presetProps: { clearable: true },
+    defaultProps: {},
+    initialProps: { code: 'sex' },
+    reservedProps: { type: 'multipleSelect' },
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'editTag'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '占位文本',
+        prop: 'props.placeholder',
+        type: 'input'
+      },
+      {
+        label: '清除按钮',
+        prop: 'props.clearable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '是否可搜索',
+        prop: 'props.filterable',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '字典类型值',
+        prop: 'props.code',
+        type: 'input'
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'DictData'
+  },
+  {
+    type: 'editor',
+    name: '富文本',
+    cover: markRaw(CoverEditor),
+    presetProps: {},
+    defaultProps: {},
+    initialProps: { init: { height: 380 } },
+    reservedProps: {},
+    configForm: [
+      {
+        label: '基础配置',
+        prop: 'groupBasicLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件类型',
+        prop: 'type',
+        type: 'proFormBuilderTypeEdit'
+      },
+      {
+        label: '字段名称',
+        prop: 'label',
+        type: 'input'
+      },
+      {
+        label: '字段属性',
+        prop: 'prop',
+        type: 'input'
+      },
+      {
+        label: '是否必填',
+        prop: 'required',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '必填校验信息',
+        prop: 'requiredMessage',
+        type: 'input'
+      },
+      {
+        label: '初始值',
+        prop: 'initValue',
+        type: 'textarea'
+      },
+      {
+        label: '标签宽度',
+        prop: 'itemProps.labelWidth',
+        type: 'inputNumber',
+        props: { min: 0 }
+      },
+      {
+        label: '标签位置',
+        prop: 'itemProps.labelPosition',
+        type: 'checkCard',
+        props: {
+          items: [
+            { value: 'left', label: '左对齐' },
+            { value: 'right', label: '右对齐' },
+            { value: 'top', label: '顶部' }
+          ],
+          class: 'ele-pro-form-builder-props-options-check-card'
+        }
+      },
+      {
+        label: '组件属性',
+        prop: 'groupPropsLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '是否禁用',
+        prop: 'props.disabled',
+        type: 'switch',
+        props: { activeValue: true, inactiveValue: false }
+      },
+      {
+        label: '样式设置',
+        prop: 'groupStylesLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '组件样式',
+        prop: 'props.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '组件类名',
+        prop: 'props.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '表单项样式',
+        prop: 'itemProps.style',
+        type: 'proFormBuilderStyleEdit'
+      },
+      {
+        label: '表单项类名',
+        prop: 'itemProps.class',
+        type: 'proFormBuilderStyleEdit',
+        props: { isClass: true }
+      },
+      {
+        label: '高级设置',
+        prop: 'groupAdvancedLabel',
+        type: 'label',
+        props: { class: 'ele-pro-form-builder-props-group-label' }
+      },
+      {
+        label: '显示条件',
+        prop: 'vIf',
+        type: 'proFormBuilderIfEdit',
+        props: {
+          title: '设置显示条件',
+          codeTips: vIfCodeTips
+        }
+      },
+      {
+        label: '开发者选项',
+        prop: '__sourceCode',
+        type: 'proFormBuilderSourceEdit',
+        props: { title: '编辑源码' }
+      }
+    ],
+    componentName: 'TinymceEditor',
+    componentImport: `import TinymceEditor from '@/components/TinymceEditor/index.vue';`
+  }
+];
+
+/**
+ * 表单组件库数据
+ */
+export const defaultComponentData = componentData.map(
+  (groupItem, groupIndex) => ({
+    ...groupItem,
+    items: (groupIndex !== 0
+      ? groupItem.items
+      : [
+          ...groupItem.items.slice(0, groupItem.items.length - 1),
+          ...additionalItems, // 插入自定义的组件数据
+          groupItem.items[groupItem.items.length - 1]
+        ]
+    ).map((item) => ({
+      ...item,
+      initialProps:
+        // 图标组件添加时设置默认值
+        item.type === 'icon'
+          ? { ...item.initialProps, name: 'IconProUserOutlined' }
+          : item.initialProps
+    }))
+  })
+);
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-checkbox.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-checkbox.vue
new file mode 100644
index 0000000..3dad547
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-checkbox.vue
@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="ele-icon-color-secondary"
+    :style="{ width: '68px', margin: '0 auto', fontSize: '12px' }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center' }">
+      <IconCheckbox size="md" />
+      <div>男</div>
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+      <IconCheckbox size="md" :checked="true" />
+      <div>女</div>
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+      <IconCheckbox size="md" />
+      <div>保密</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconCheckbox } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-multiple-select.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-multiple-select.vue
new file mode 100644
index 0000000..e90ad57
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-multiple-select.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <IconInput
+      size="sm"
+      class="ele-icon-color-secondary"
+      :style="{
+        fontSize: '12px',
+        lineHeight: '14px',
+        paddingLeft: '4px',
+        textAlign: 'center'
+      }"
+    >
+      <IconSkeleton :style="{ width: '22px', height: 'auto' }">
+        <div :style="{ transform: 'scale(0.8)' }">男</div>
+      </IconSkeleton>
+      <IconSkeleton
+        :style="{ width: '22px', height: 'auto', marginLeft: '4px' }"
+      >
+        <div :style="{ transform: 'scale(0.8)' }">女</div>
+      </IconSkeleton>
+      <SvgIcon name="ArrowUp" size="sm" :style="{ margin: '0 0 0 auto' }" />
+    </IconInput>
+    <IconPanel size="sm">
+      <div
+        :style="{ display: 'flex', alignItems: 'center', marginTop: '-2px' }"
+      >
+        <IconCheckbox size="sm" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+        <IconCheckbox size="sm" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '2px',
+          marginBottom: '-2px'
+        }"
+      >
+        <IconCheckbox size="sm" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCheckbox
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-radio.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-radio.vue
new file mode 100644
index 0000000..6d87d3a
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-radio.vue
@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="ele-icon-color-secondary"
+    :style="{ width: '68px', margin: '0 auto', fontSize: '12px' }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center' }">
+      <IconRadio size="md" />
+      <div>男</div>
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+      <IconRadio size="md" :checked="true" />
+      <div>女</div>
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+      <IconRadio size="md" />
+      <div>保密</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconRadio } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-select.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-select.vue
new file mode 100644
index 0000000..19934ad
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-dict-select.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <IconInput
+      size="sm"
+      class="ele-icon-color-secondary"
+      :style="{ fontSize: '12px', lineHeight: '18px', textAlign: 'center' }"
+    >
+      <div>女</div>
+      <SvgIcon name="ArrowUp" size="sm" :style="{ margin: '0 0 0 auto' }" />
+    </IconInput>
+    <IconPanel size="sm">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '4px' }" />
+      <IconSkeleton size="sm" :style="{ marginTop: '4px' }" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-editor.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-editor.vue
new file mode 100644
index 0000000..853c394
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-editor.vue
@@ -0,0 +1,25 @@
+<template>
+  <IconInput :style="{ height: 'auto', padding: '6px', display: 'block' }">
+    <div :style="{ display: 'flex', alignItems: 'center' }">
+      <IconImage size="sm" />
+      <div :style="{ flex: 1, marginLeft: '6px' }">
+        <IconSkeleton size="sm" />
+        <IconSkeleton size="sm" :style="{ marginTop: '6px' }" />
+      </div>
+    </div>
+    <IconSkeleton size="sm" :style="{ marginTop: '5px' }" />
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '3px' }">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <IconCursor />
+    </div>
+  </IconInput>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    IconCursor,
+    IconImage
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-file-upload.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-file-upload.vue
new file mode 100644
index 0000000..9b13dbd
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-file-upload.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :style="{ width: '120px', maxWidth: '100%', margin: '0 auto' }">
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        padding: '4px 8px',
+        borderRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        boxSizing: 'border-box'
+      }"
+    >
+      <IconSkeleton size="xs" />
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        padding: '4px 8px',
+        borderRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        boxSizing: 'border-box',
+        marginTop: '4px'
+      }"
+    >
+      <IconSkeleton size="xs" />
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        padding: '4px 8px',
+        borderRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        boxSizing: 'border-box',
+        marginTop: '4px'
+      }"
+    >
+      <IconSkeleton size="xs" />
+    </div>
+    <SvgIcon
+      name="PlusOutlined"
+      :iconStyle="{ transform: 'scale(0.8)' }"
+      color="placeholder"
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '14px',
+        borderRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        boxSizing: 'border-box',
+        marginTop: '4px',
+        fontSize: '12px'
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    SvgIcon
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-icon-select.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-icon-select.vue
new file mode 100644
index 0000000..d850320
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-icon-select.vue
@@ -0,0 +1,20 @@
+<template>
+  <IconInput
+    :style="{
+      height: 'auto',
+      padding: '6px',
+      maxWidth: '52px',
+      margin: '0 auto'
+    }"
+  >
+    <SvgIcon name="UserOutlined" color="base" />
+    <SvgIcon name="ArrowDown" size="sm" :style="{ margin: '0 0 0 auto' }" />
+  </IconInput>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    SvgIcon
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-image-upload.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-image-upload.vue
new file mode 100644
index 0000000..c520a89
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-image-upload.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"
+  >
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        width: '40px',
+        height: '40px',
+        padding: '0 4px',
+        boxSizing: 'border-box',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column'
+      }"
+    >
+      <IconImage size="sm" :style="{ width: '100%', height: '28px' }" />
+    </div>
+    <SvgIcon
+      name="PlusOutlined"
+      color="placeholder"
+      class="ele-icon-border-color-base"
+      :style="{
+        width: '40px',
+        height: '40px',
+        marginLeft: '6px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        fontSize: '20px'
+      }"
+      :iconStyle="{ strokeWidth: 3 }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconImage,
+    SvgIcon
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-multiple-regions.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-multiple-regions.vue
new file mode 100644
index 0000000..998117c
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-multiple-regions.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ flex: 1, maxWidth: '32px' }" />
+      <IconSkeleton
+        size="sm"
+        :style="{ flex: 1, maxWidth: '32px', margin: '0 0 0 6px' }"
+      />
+      <IconSkeleton
+        size="sm"
+        :style="{ flex: 1, maxWidth: '32px', margin: '0 6px 0 6px' }"
+      />
+      <SvgIcon
+        name="EnvironmentOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 auto' }"
+      />
+    </IconInput>
+    <IconPanel size="sm">
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconCheckbox size="xs" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconCheckbox size="xs" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    IconPanel,
+    IconArrow,
+    IconCheckbox,
+    SvgIcon
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/covers/cover-regions.vue b/z_ele/src/components/ProFormBuilder/components/covers/cover-regions.vue
new file mode 100644
index 0000000..35c249c
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/covers/cover-regions.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <SvgIcon
+        name="EnvironmentOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 auto' }"
+      />
+    </IconInput>
+    <IconPanel size="sm">
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    IconPanel,
+    IconArrow,
+    SvgIcon
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/html-editer.vue b/z_ele/src/components/ProFormBuilder/components/html-editer.vue
new file mode 100644
index 0000000..45639f8
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/html-editer.vue
@@ -0,0 +1,49 @@
+<!-- 富文本编辑器 -->
+<template>
+  <MonacoEditor
+    theme="vs-dark"
+    language="html"
+    :modelValue="modelValue"
+    @update:modelValue="updateModelValue"
+    :config="editorConfig"
+    :style="{ height: '100%' }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+  const editorConfig: editor.IStandaloneEditorConstructionOptions = {
+    contextmenu: false,
+    minimap: { enabled: false },
+    suggest: { enabled: false } as any,
+    inlineSuggest: { enabled: false },
+    quickSuggestions: false,
+    parameterHints: { enabled: false },
+    autoClosingBrackets: 'never',
+    autoClosingQuotes: 'never',
+    formatOnType: false,
+    formatOnPaste: false,
+    codeLens: false,
+    lightbulb: { enabled: 'off' as editor.ShowLightbulbIconMode.Off },
+    snippetSuggestions: 'none',
+    wordBasedSuggestions: 'off',
+    selectionHighlight: false,
+    occurrencesHighlight: 'off',
+    matchBrackets: 'never'
+  };
+
+  defineProps<{
+    /** 代码 */
+    modelValue?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+  }>();
+
+  /** 更新代码 */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/icon-editer.vue b/z_ele/src/components/ProFormBuilder/components/icon-editer.vue
new file mode 100644
index 0000000..0c2daf8
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/icon-editer.vue
@@ -0,0 +1,32 @@
+<!-- 图标编辑器 -->
+<template>
+  <IconSelect
+    :clearable="true"
+    :popperHeight="388"
+    filterable="popper"
+    :placeholder="placeholder ?? '请选择图标'"
+    :popperOptions="{ strategy: 'fixed' }"
+    :modelValue="modelValue"
+    @update:modelValue="updateModelValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import IconSelect from '@/components/IconSelect/index.vue';
+
+  defineProps<{
+    /** 图标 */
+    modelValue?: string;
+    /** 提示文本 */
+    placeholder?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+  }>();
+
+  /** 更新图标 */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/json-editer.vue b/z_ele/src/components/ProFormBuilder/components/json-editer.vue
new file mode 100644
index 0000000..487ebdd
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/json-editer.vue
@@ -0,0 +1,50 @@
+<!-- JSON 编辑器 -->
+<template>
+  <MonacoEditor
+    theme="vs-dark"
+    language="json"
+    :modelValue="modelValue"
+    @update:modelValue="updateModelValue"
+    :config="editorConfig"
+    :style="{ height: '100%' }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+  const editorConfig: editor.IStandaloneEditorConstructionOptions = {
+    contextmenu: false,
+    minimap: { enabled: false },
+    suggest: { enabled: false } as any,
+    inlineSuggest: { enabled: false },
+    quickSuggestions: false,
+    parameterHints: { enabled: false },
+    autoClosingBrackets: 'never',
+    autoClosingQuotes: 'never',
+    formatOnType: false,
+    formatOnPaste: false,
+    codeLens: false,
+    lightbulb: { enabled: 'off' as editor.ShowLightbulbIconMode.Off },
+    snippetSuggestions: 'none',
+    wordBasedSuggestions: 'off',
+    selectionHighlight: false,
+    occurrencesHighlight: 'off',
+    matchBrackets: 'never',
+    hover: { enabled: false }
+  };
+
+  defineProps<{
+    /** JSON */
+    modelValue?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value?: string): void;
+  }>();
+
+  /** 更新 JSON */
+  const updateModelValue = (value?: string) => {
+    emit('update:modelValue', value);
+  };
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-div.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-div.vue
new file mode 100644
index 0000000..5b5f40d
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-div.vue
@@ -0,0 +1,40 @@
+<template>
+  <IconSkeleton size="sm" :style="{ width: '30%', marginTop: '4px' }" />
+  <IconSkeleton size="sm" :style="{ marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '30%', margin: '16px 0 10px 0' }" />
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      padding: '12px',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px'
+    }"
+  >
+    <IconSkeleton size="sm" />
+    <IconSkeleton size="sm" :style="{ marginTop: '10px', width: '60%' }" />
+  </div>
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '8px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-group.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-group.vue
new file mode 100644
index 0000000..86bbb94
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-group.vue
@@ -0,0 +1,77 @@
+<template>
+  <div :style="{ display: 'flex', marginTop: '3px' }">
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        flex: 1,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          padding: '10px 12px',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px'
+        }"
+      >
+        <IconSkeleton size="sm" :style="{ width: '60%' }" />
+      </div>
+      <div :style="{ padding: '14px 12px' }">
+        <IconSkeleton />
+        <IconSkeleton :style="{ marginTop: '16px' }" />
+        <IconSkeleton :style="{ marginTop: '16px' }" />
+      </div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        flex: 1,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        marginLeft: '12px'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          padding: '10px 12px',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px'
+        }"
+      >
+        <IconSkeleton size="sm" :style="{ width: '60%' }" />
+      </div>
+      <div :style="{ padding: '14px 12px' }">
+        <IconSkeleton />
+        <IconSkeleton :style="{ marginTop: '16px' }" />
+        <IconSkeleton :style="{ marginTop: '16px' }" />
+      </div>
+    </div>
+  </div>
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '8px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-multiple.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-multiple.vue
new file mode 100644
index 0000000..872d512
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-multiple.vue
@@ -0,0 +1,30 @@
+<template>
+  <div :style="{ display: 'flex', alignItems: 'center', marginTop: '8px' }">
+    <IconSkeleton :style="{ flex: 1 }" />
+    <IconSkeleton :style="{ flex: 1, marginLeft: '16px' }" />
+  </div>
+  <div :style="{ display: 'flex', alignItems: 'center', marginTop: '16px' }">
+    <IconSkeleton :style="{ flex: 1 }" />
+    <IconSkeleton :style="{ flex: 1, marginLeft: '16px' }" />
+  </div>
+  <div :style="{ display: 'flex', alignItems: 'center', marginTop: '16px' }">
+    <IconSkeleton :style="{ flex: 1 }" />
+    <IconSkeleton :style="{ flex: 1, marginLeft: '16px' }" />
+  </div>
+  <IconSkeleton :style="{ marginTop: '16px' }" />
+  <div :style="{ display: 'flex', alignItems: 'center', marginTop: '20px' }">
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-question.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-question.vue
new file mode 100644
index 0000000..c9155c2
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-question.vue
@@ -0,0 +1,34 @@
+<template>
+  <IconSkeleton
+    size="sm"
+    :style="{ width: '38%', margin: '4px auto 0 auto' }"
+  />
+  <IconSkeleton size="sm" :style="{ marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '70%', marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '50%', marginTop: '16px' }" />
+  <IconSkeleton size="sm" :style="{ width: '90%', marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '90%', marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '50%', marginTop: '10px' }" />
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '14px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume-view.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume-view.vue
new file mode 100644
index 0000000..b0c3fe1
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume-view.vue
@@ -0,0 +1,55 @@
+<template>
+  <IconSkeleton
+    size="sm"
+    :style="{ width: '48px', margin: '2px auto 0 auto' }"
+  />
+  <div :style="{ display: 'flex', gap: '18px', marginTop: '12px' }">
+    <div :style="{ flex: 1 }">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '8px' }" />
+      <IconSkeleton size="sm" :style="{ marginTop: '8px' }" />
+    </div>
+    <div :style="{ flex: 1 }">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '8px' }" />
+      <IconSkeleton size="sm" :style="{ marginTop: '8px' }" />
+    </div>
+    <div
+      class="ele-icon-border-color-light"
+      :style="{
+        flexShrink: 0,
+        width: '28px',
+        height: '32px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '3px',
+        overflow: 'hidden'
+      }"
+    >
+      <IconSkeleton
+        :style="{
+          width: '14px',
+          height: '14px',
+          borderRadius: '50%',
+          margin: '6px auto 0 auto'
+        }"
+      />
+      <IconSkeleton
+        :style="{
+          width: '26px',
+          height: '26px',
+          borderRadius: '50%',
+          margin: '2px auto 0 auto'
+        }"
+      />
+    </div>
+  </div>
+  <IconSkeleton size="sm" :style="{ marginTop: '14px' }" />
+  <IconSkeleton size="sm" :style="{ width: '50%', marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ marginTop: '10px' }" />
+  <IconSkeleton size="sm" :style="{ width: '50%', marginTop: '10px' }" />
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume.vue
new file mode 100644
index 0000000..08e68d3
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-resume.vue
@@ -0,0 +1,23 @@
+<template>
+  <CoverResumeView />
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '8px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconButton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+  import CoverResumeView from './cover-resume-view.vue';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-search.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-search.vue
new file mode 100644
index 0000000..f54dc9f
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-search.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    :style="{ display: 'flex', alignItems: 'flex-start', marginTop: '28px' }"
+  >
+    <div :style="{ flex: 1 }">
+      <IconSkeleton />
+      <IconSkeleton :style="{ marginTop: '22px' }" />
+      <IconSkeleton :style="{ marginTop: '22px' }" />
+    </div>
+    <div :style="{ flex: 1, marginLeft: '10px' }">
+      <IconSkeleton />
+      <IconSkeleton :style="{ marginTop: '22px' }" />
+      <IconSkeleton :style="{ marginTop: '22px' }" />
+    </div>
+    <div :style="{ flex: 1, marginLeft: '10px' }">
+      <IconSkeleton />
+      <IconSkeleton :style="{ marginTop: '22px' }" />
+      <div
+        :style="{ display: 'flex', alignItems: 'center', marginTop: '19px' }"
+      >
+        <IconButton
+          type="primary"
+          :hideSkeleton="true"
+          :style="{ flex: 1, height: '16px' }"
+        />
+        <IconButton :style="{ flex: 1, height: '16px', marginLeft: '6px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-single.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-single.vue
new file mode 100644
index 0000000..065ae63
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-single.vue
@@ -0,0 +1,21 @@
+<template>
+  <IconSkeleton :style="{ marginTop: '8px' }" />
+  <IconSkeleton :style="{ marginTop: '16px' }" />
+  <IconSkeleton :style="{ marginTop: '16px' }" />
+  <IconSkeleton :style="{ marginTop: '16px' }" />
+  <div :style="{ display: 'flex', alignItems: 'center', marginTop: '20px' }">
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table-view.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table-view.vue
new file mode 100644
index 0000000..76e6475
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table-view.vue
@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      flex: 1,
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px',
+      marginTop: '3px'
+    }"
+  >
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          height: '100%',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          borderRightStyle: 'solid',
+          borderRightWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      ></div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          height: '100%',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      ></div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          height: '100%',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          borderRightStyle: 'solid',
+          borderRightWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      ></div>
+      <div :style="{ width: '25%', padding: '0 8px', boxSizing: 'border-box' }">
+        <IconSkeleton size="sm" />
+      </div>
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '25%',
+          height: '100%',
+          borderLeftStyle: 'solid',
+          borderLeftWidth: '1px',
+          boxSizing: 'border-box'
+        }"
+      ></div>
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        height: '36px',
+        display: 'flex',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          padding: '6px 10px',
+          height: '100%',
+          boxSizing: 'border-box',
+          borderRightStyle: 'solid',
+          borderRightWidth: '1px'
+        }"
+      >
+        <IconSkeleton size="sm" :style="{ width: '6px', height: '100%' }" />
+      </div>
+    </div>
+    <div :style="{ height: '22px', padding: '8px 10px' }">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '6px', width: '60%' }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table.vue
new file mode 100644
index 0000000..be82ec0
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-table.vue
@@ -0,0 +1,23 @@
+<template>
+  <CoverTableView />
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '8px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconButton } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+  import CoverTableView from './cover-table-view.vue';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-covers/cover-tabs.vue b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-tabs.vue
new file mode 100644
index 0000000..1c58aa5
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-covers/cover-tabs.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      padding: '0 32px 0 0',
+      marginTop: '6px'
+    }"
+  >
+    <div
+      v-for="i in 3"
+      :key="i"
+      class="ele-icon-border-color-base"
+      :style="{
+        flex: 1,
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderBottom: 'none',
+        padding: '8px 12px',
+        marginRight: '8px'
+      }"
+    >
+      <IconSkeleton size="sm" />
+    </div>
+  </div>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      padding: '14px 12px 18px 12px',
+      borderStyle: 'solid',
+      borderWidth: '1px'
+    }"
+  >
+    <IconSkeleton />
+    <IconSkeleton :style="{ marginTop: '14px' }" />
+    <IconSkeleton :style="{ marginTop: '14px', width: '60%' }" />
+  </div>
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '8px'
+    }"
+  >
+    <IconButton
+      size="sm"
+      type="primary"
+      :style="{ width: '52px', padding: '0 12px' }"
+    />
+    <IconButton size="sm" :style="{ width: '52px', marginLeft: '16px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconSkeleton,
+    IconButton
+  } from 'ele-admin-plus/es/ele-pro-form-builder/components/icons/index';
+</script>
diff --git a/z_ele/src/components/ProFormBuilder/components/template-data.ts b/z_ele/src/components/ProFormBuilder/components/template-data.ts
new file mode 100644
index 0000000..5bdd975
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/components/template-data.ts
@@ -0,0 +1,5455 @@
+import { markRaw } from 'vue';
+import type { TemplateItem } from 'ele-admin-plus/es/ele-pro-form-builder/types';
+import CoverSingle from './template-covers/cover-single.vue';
+import CoverMultiple from './template-covers/cover-multiple.vue';
+import CoverGroup from './template-covers/cover-group.vue';
+import CoverQuestion from './template-covers/cover-question.vue';
+import CoverResume from './template-covers/cover-resume.vue';
+import CoverResumeView from './template-covers/cover-resume-view.vue';
+import CoverTable from './template-covers/cover-table.vue';
+import CoverTableView from './template-covers/cover-table-view.vue';
+import CoverTabs from './template-covers/cover-tabs.vue';
+import CoverSearch from './template-covers/cover-search.vue';
+import CoverDiv from './template-covers/cover-div.vue';
+
+/**
+ * 表单模板库数据
+ */
+export const defaultTemplateData: TemplateItem[] = [
+  {
+    name: '单列表单',
+    cover: markRaw(CoverSingle),
+    config: {
+      labelWidth: 80,
+      footer: true,
+      items: [
+        {
+          key: 'f0sgef2spmqqor03',
+          prop: 'reason',
+          label: '请假事由',
+          type: 'textarea',
+          required: true,
+          props: {
+            placeholder: '请输入请假事由',
+            maxlength: 800,
+            showWordLimit: true
+          }
+        },
+        {
+          key: 'f4acnyndkzqxgduu',
+          prop: 'type',
+          label: '请假类型',
+          type: 'radio',
+          required: true,
+          props: {
+            options: [
+              {
+                label: '事假',
+                value: '1'
+              },
+              {
+                label: '病假',
+                value: '2'
+              },
+              {
+                label: '调休',
+                value: '3'
+              },
+              {
+                label: '年假',
+                value: '4'
+              },
+              {
+                label: '婚嫁',
+                value: '5'
+              },
+              {
+                label: '产假',
+                value: '6'
+              }
+            ]
+          },
+          initValue: '1',
+          requiredMessage: '请选择请假类型'
+        },
+        {
+          key: 'f12k0zon5e60rksk',
+          prop: 'time',
+          label: '起止时间',
+          type: 'datetimerange',
+          required: true,
+          props: {},
+          requiredMessage: '请选择起止时间'
+        },
+        {
+          key: 'ferg85hffz2hih8r',
+          prop: 'comment',
+          label: '备注',
+          type: 'textarea',
+          required: false,
+          props: {
+            placeholder: '请输入备注（选填）',
+            maxlength: 2000,
+            showWordLimit: true
+          }
+        },
+        {
+          key: 'fiqzss3ypp57mprj',
+          prop: 'attachment',
+          label: '图片',
+          type: 'imageUpload',
+          required: false,
+          props: {
+            limit: 8
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: '多列表单',
+    cover: markRaw(CoverMultiple),
+    config: {
+      labelWidth: 80,
+      footer: true,
+      items: [
+        {
+          key: 'fzvl5o0ir7yvbhpb',
+          prop: 'reason',
+          label: '出差事由',
+          type: 'textarea',
+          required: true,
+          props: {
+            placeholder: '请输入出差事由',
+            maxlength: 800,
+            showWordLimit: true
+          }
+        },
+        {
+          key: 'fnsizfrhii2ngvvd',
+          prop: 'f316337067sju341',
+          label: '',
+          type: 'row',
+          required: false,
+          props: {},
+          children: [
+            {
+              key: 'fc1xz5q53qxbqld4',
+              prop: 'f316337067gyx9zh',
+              label: '',
+              type: 'col',
+              props: {
+                span: 12,
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'f8ednk4d97mbliqz',
+                  prop: 'starting',
+                  label: '出发地',
+                  type: 'regions',
+                  required: true,
+                  props: {
+                    placeholder: '请选择出发地',
+                    type: 'provinceCity',
+                    showAllLevels: true
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fd8bjx1kj242lrpf',
+              prop: 'f316337067sgbqjm',
+              label: '',
+              type: 'col',
+              props: {
+                span: 12,
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'ff8orkcafsw0epc3',
+                  prop: 'focus',
+                  label: '目的地',
+                  type: 'regions',
+                  required: true,
+                  props: {
+                    placeholder: '请选择目的地',
+                    type: 'provinceCity',
+                    showAllLevels: true
+                  }
+                }
+              ]
+            },
+            {
+              prop: 'f316357134jivuj1',
+              label: '',
+              type: 'col',
+              props: {
+                span: 24
+              },
+              key: 'frccyzgyh7c7eg7k',
+              children: [
+                {
+                  key: 'fz1sea9d5ij2v6fz',
+                  prop: 'date',
+                  label: '起止日期',
+                  type: 'daterange',
+                  required: true,
+                  props: {},
+                  requiredMessage: '请选择起止日期'
+                }
+              ]
+            },
+            {
+              prop: 'f316439831wzwmai',
+              label: '',
+              type: 'col',
+              props: {
+                span: 12,
+                xs: {
+                  span: 24
+                }
+              },
+              key: 'fdvy5lhhyjyqecev',
+              children: [
+                {
+                  key: 'fc0orbdc1qb9as7y',
+                  prop: 'vehicle',
+                  label: '交通工具',
+                  type: 'radio',
+                  required: true,
+                  props: {
+                    options: [
+                      {
+                        label: '飞机',
+                        value: '1'
+                      },
+                      {
+                        label: '火车',
+                        value: '2'
+                      },
+                      {
+                        label: '汽车',
+                        value: '3'
+                      },
+                      {
+                        label: '其它',
+                        value: '4'
+                      }
+                    ]
+                  },
+                  requiredMessage: '请选择交通工具'
+                }
+              ]
+            },
+            {
+              prop: 'f316441368ez6vei',
+              label: '',
+              type: 'col',
+              props: {
+                span: 12,
+                xs: {
+                  span: 24
+                }
+              },
+              key: 'f9z5f960thgux08d',
+              children: [
+                {
+                  key: 'fg766s0wi7qmihyg',
+                  prop: 'type',
+                  label: '往返类型',
+                  type: 'radio',
+                  required: true,
+                  props: {
+                    options: [
+                      {
+                        label: '单程',
+                        value: '1'
+                      },
+                      {
+                        label: '往返',
+                        value: '2'
+                      }
+                    ]
+                  },
+                  initValue: '1',
+                  requiredMessage: '请选择往返类型'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'f4posldm1936cgpp',
+          prop: 'comment',
+          label: '备注',
+          type: 'textarea',
+          required: false,
+          props: {
+            placeholder: '请输入备注（选填）',
+            maxlength: 2000,
+            showWordLimit: true
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: '分组表单',
+    cover: markRaw(CoverGroup),
+    config: {
+      labelWidth: 94,
+      footer: true,
+      footerProps: {
+        labelWidth: 0
+      },
+      footerStyle: {
+        justifyContent: 'center'
+      },
+      style: {
+        background: 'hsla(216deg, 8%, 50%, 0.08)',
+        padding: '16px 16px 1px 16px'
+      },
+      items: [
+        {
+          key: 'f8oodwovpso5hdys',
+          prop: 'senderInfo',
+          type: 'card',
+          props: {
+            header: '寄件信息',
+            bordered: false,
+            style: {
+              marginBottom: '16px'
+            }
+          },
+          children: [
+            {
+              key: 'fuuyoc3uxd8nacj6',
+              prop: 'fgcdq644x1h53es3',
+              label: '',
+              type: 'row',
+              props: {
+                gutter: 20
+              },
+              children: [
+                {
+                  key: 'fc18rm3gpphfyig5',
+                  prop: 'fa4j3aenmqpoav1e',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 12
+                  },
+                  children: [
+                    {
+                      key: 'fpl8h24yjnu7dmel',
+                      prop: 'senderName',
+                      label: '寄件人姓名',
+                      type: 'input',
+                      required: true,
+                      props: {
+                        placeholder: '请输入寄件人姓名'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fayh0sjkcejmb9p5',
+                  prop: 'fpknex37szcmc7a9',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 12
+                  },
+                  children: [
+                    {
+                      key: 'fguc8v7khk1nhcxj',
+                      prop: 'senderPhone',
+                      label: '寄件人电话',
+                      type: 'input',
+                      required: true,
+                      props: {
+                        placeholder: '请输入寄件人电话'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f7kjmta6d1u6uqoo',
+                  prop: 'f52c6iu4dc42xjsr',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 24
+                  },
+                  children: [
+                    {
+                      key: 'f7myeu6hml2hak64',
+                      prop: 'senderAddress',
+                      label: '寄件地址',
+                      type: 'textarea',
+                      required: true,
+                      props: {
+                        placeholder: '请输入寄件地址'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'f5mamddkbbhubltc',
+          prop: 'receiverInfo',
+          type: 'card',
+          props: {
+            header: '收件信息',
+            bordered: false,
+            style: {
+              marginBottom: '16px'
+            }
+          },
+          children: [
+            {
+              key: 'fjgq9jw3e9iqoqqh',
+              prop: 'f6ly2bnrnenpcf4q',
+              label: '',
+              type: 'row',
+              props: {
+                gutter: 20
+              },
+              children: [
+                {
+                  key: 'fffhyq035sm0y897',
+                  prop: 'fhf3r5c89auqkv6x',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 12
+                  },
+                  children: [
+                    {
+                      key: 'ffr43vz3rtgvzj6x',
+                      prop: 'receiverName',
+                      label: '收件人姓名',
+                      type: 'input',
+                      required: true,
+                      props: {
+                        placeholder: '请输入收件人姓名'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fbzd2t8doh3gf03l',
+                  prop: 'fvdul4lugvawby4h',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 12
+                  },
+                  children: [
+                    {
+                      key: 'f1v7jk7ilmo3kupl',
+                      prop: 'receiverPhone',
+                      label: '收件人电话',
+                      type: 'input',
+                      required: true,
+                      props: {
+                        placeholder: '请输入收件人电话'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fvqizaxtvan0kofy',
+                  prop: 'f0jupanm70sbc169',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 24
+                  },
+                  children: [
+                    {
+                      key: 'fz1nt03c3wf8rkbr',
+                      prop: 'receiverAddress',
+                      label: '收件地址',
+                      type: 'textarea',
+                      required: true,
+                      props: {
+                        placeholder: '请输入收件地址'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'f50e9d1j7tf6y9rj',
+          prop: 'otherInfo',
+          type: 'card',
+          props: {
+            header: '可折叠卡片',
+            bordered: false,
+            collapsable: 'header',
+            bodyStyle: {
+              padding: '0'
+            },
+            headerStyle: {
+              cursor: 'pointer',
+              userSelect: 'none'
+            },
+            style: {
+              marginBottom: '16px'
+            }
+          },
+          children: [
+            {
+              key: 'fc51l0as7k78i2sn',
+              prop: 'service',
+              label: '快递服务',
+              type: 'checkCard',
+              props: {
+                items: [
+                  {
+                    label: '顺丰快递',
+                    value: '1'
+                  },
+                  {
+                    label: '中通快递',
+                    value: '2'
+                  },
+                  {
+                    label: '韵达快递',
+                    value: '3'
+                  }
+                ],
+                style: {
+                  display: 'flex',
+                  alignItems: 'flex-start'
+                },
+                itemStyle: {
+                  padding: '8px 22px',
+                  margin: '0 12px 0 0',
+                  lineHeight: 'normal'
+                }
+              },
+              required: true,
+              itemProps: {
+                labelWidth: 80,
+                style: {
+                  padding: '20px 20px 0 20px'
+                }
+              },
+              requiredMessage: '请选择快递服务'
+            },
+            {
+              key: 'fvk6ye5v7khy7ir5',
+              prop: 'privacy',
+              label: '隐私保护',
+              type: 'checkbox',
+              props: {
+                options: [
+                  {
+                    label: '姓名脱敏',
+                    value: '1'
+                  },
+                  {
+                    label: '使用虚拟号码',
+                    value: '2'
+                  },
+                  {
+                    label: '隐藏地址',
+                    value: '3'
+                  }
+                ]
+              },
+              itemProps: {
+                labelWidth: 80,
+                style: {
+                  padding: '0 20px 36px 20px',
+                  marginBottom: '0'
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: '问卷表单',
+    cover: markRaw(CoverQuestion),
+    config: {
+      labelPosition: 'top',
+      labelWidth: 80,
+      footer: true,
+      footerProps: { labelWidth: 0 },
+      footerStyle: { justifyContent: 'center' },
+      items: [
+        {
+          key: 'fy9ixva9wc9cyzx1',
+          prop: 'title',
+          label: '部门团建活动方案投票',
+          type: 'label',
+          props: {
+            size: 'xl',
+            strong: true,
+            style: { textAlign: 'center', marginBottom: '18px' }
+          }
+        },
+        {
+          key: 'fymxiudq58lask31',
+          prop: 'description',
+          label:
+            '为了感谢各位员工最近对公司发展做出的辛苦付出，也为了增强部门同事之间的凝聚力，开阔员工的视野，让大家在繁忙的工作中放松心情，以更饱满的精神状态迎接新一个月的工作，本部门计划于 06 月 01 日组织团建活动，现在开始征集部门团建活动方案的投票啦~ 请各位同事积极参与，认真填写。',
+          type: 'label',
+          props: {
+            style: {
+              textIndent: '2em',
+              lineHeight: '28px',
+              marginBottom: '28px'
+            }
+          }
+        },
+        {
+          key: 'fzdjtutjii3k380g',
+          prop: 'plan',
+          label: '（01）请选择你最喜欢的活动方案(可多选)：',
+          required: true,
+          requiredMessage: '请选择你最喜欢的活动方案',
+          itemProps: { style: { marginBottom: '36px' } },
+          type: 'checkbox',
+          props: {
+            options: [
+              { label: '方案一 龙湾度假村一日游', value: '1' },
+              { label: '方案二 欢乐谷一日游', value: '2' },
+              { label: '方案三 世界城吃饭 + 密室逃脱', value: '3' },
+              { label: '方案四 大悦城自助餐 + KTV', value: '4' }
+            ],
+            style: {
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'stretch',
+              paddingLeft: '22px'
+            }
+          }
+        },
+        {
+          key: 'f2lcxv9k5v9lq9ns',
+          prop: 'name',
+          label: '（02）您的姓名：',
+          required: true,
+          requiredMessage: '请输入您的姓名',
+          itemProps: { style: { marginBottom: '36px' } },
+          type: 'input',
+          props: {
+            placeholder: '请输入您的姓名',
+            style: {
+              flex: 1,
+              margin: '4px 0 8px 22px',
+              maxWidth: '320px'
+            }
+          }
+        },
+        {
+          key: 'fodwvoktwqe565xn',
+          prop: 'family',
+          label: '（03）是否携带家属(选是会继续选择携带数量)：',
+          required: true,
+          requiredMessage: '请选择是否携带家属',
+          itemProps: { style: { marginBottom: '36px' } },
+          type: 'radio',
+          props: {
+            options: [
+              { label: '是', value: '1' },
+              { label: '否', value: '0' }
+            ],
+            style: {
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'stretch',
+              paddingLeft: '22px'
+            }
+          }
+        },
+        {
+          key: 'f1byxn4hpukjds52',
+          prop: 'attendance',
+          label: '（04）携带家属数量：',
+          required: true,
+          requiredMessage: '请选择携带家属数量',
+          itemProps: { style: { marginBottom: '36px' } },
+          type: 'radio',
+          props: {
+            options: [
+              { label: '携带 1 人', value: '1' },
+              { label: '携带 2 人', value: '2' },
+              { label: '携带 3 人', value: '3' }
+            ],
+            style: {
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'stretch',
+              paddingLeft: '22px'
+            }
+          },
+          vIf: 'form.family == 1'
+        }
+      ]
+    }
+  },
+  {
+    name: '简历表单',
+    cover: markRaw(CoverResume),
+    config: {
+      labelWidth: 80,
+      footer: true,
+      footerProps: {
+        labelWidth: 0
+      },
+      footerStyle: {
+        justifyContent: 'center'
+      },
+      items: [
+        {
+          key: 'f0ulxrplqswvy5ib',
+          prop: 'faacqws7lcbhlyom',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderBottom: '4px solid var(--el-color-primary)',
+              margin: '6px 0 38px 0'
+            }
+          },
+          children: [
+            {
+              key: 'fffaxetsq6rmg3b6',
+              prop: 'fpex06b0x4qras8v',
+              label: '个人简历',
+              type: 'label',
+              props: {
+                size: 'xl',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '6px 28px 2px 28px',
+                  letterSpacing: '6px',
+                  borderRadius: '22px 22px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'frsthxd03n6nassq',
+          prop: 'fhz9xq8hyc7yxeri',
+          label: '',
+          type: 'table',
+          props: {
+            hasHeader: false,
+            style: {
+              tableLayout: 'fixed',
+              border: '0'
+            }
+          },
+          children: [
+            {
+              key: 'f2fncegapbug2fok',
+              prop: 'fts0labgcqju3omx',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fhd4uw6r0u4du7f4',
+                  prop: 'famr4c3y5ebufxi4',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      border: 'none',
+                      background: 'none',
+                      borderRadius: '0',
+                      padding: '0'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'f917fl2oyp0bfxz3',
+                      prop: 'f5ng3eco3d2zavpp',
+                      label: '',
+                      type: 'row',
+                      props: {
+                        gutter: 16
+                      },
+                      children: [
+                        {
+                          key: 'fqinfxb0tku4ehtq',
+                          prop: 'fi2dok0vclbz3ve2',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              label: '姓名',
+                              prop: 'name',
+                              type: 'input',
+                              required: true,
+                              key: 'fvfbqnj6qifnnz3e',
+                              props: {
+                                placeholder: '请输入姓名'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'f0kxjn4sxev9lbsf',
+                          prop: 'fbwmv1xjpcgy5k6i',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fz3oksv6kvhc0g0l',
+                              prop: 'sex',
+                              label: '性别',
+                              type: 'radio',
+                              props: {
+                                options: [
+                                  {
+                                    label: '男',
+                                    value: '男'
+                                  },
+                                  {
+                                    label: '女',
+                                    value: '女'
+                                  }
+                                ]
+                              },
+                              initValue: '男'
+                            }
+                          ]
+                        },
+                        {
+                          key: 'f40aykf6p9412frt',
+                          prop: 'f02h8957wduyrax1',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fm6zzybsancmq55q',
+                              prop: 'age',
+                              label: '年龄',
+                              type: 'inputNumber',
+                              required: true,
+                              props: {
+                                placeholder: '请输入年龄'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fziod8cqcoasrvx5',
+                          prop: 'f9lz054eb4ilor78',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fwuux2aucs82fpef',
+                              prop: 'phone',
+                              label: '联系方式',
+                              type: 'input',
+                              required: true,
+                              props: {
+                                placeholder: '请输入联系方式'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fc21b2abokf5rfzu',
+                          prop: 'fmljqcrqv715j2rj',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fbbpgi9m1qqvigsl',
+                              prop: 'education',
+                              label: '学历',
+                              type: 'input',
+                              required: true,
+                              props: {
+                                placeholder: '请输入学历'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fw9lwpw84hdzww5h',
+                          prop: 'frajbqsp6v2o298u',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fnflzcjq1fgg6nvj',
+                              prop: 'experience',
+                              label: '工作经验',
+                              type: 'input',
+                              required: true,
+                              props: {
+                                placeholder: '请输入工作经验'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fh6gx0f0naf0q9sf',
+                          prop: 'fels0t1xalif9vnw',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'fw6xxmba0tze73hi',
+                              prop: 'job',
+                              label: '意向岗位',
+                              type: 'input',
+                              required: true,
+                              props: {
+                                placeholder: '请输入意向岗位'
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'f88e8dcfnq9tqocz',
+                          prop: 'f56z68ybsw0ts807',
+                          label: '',
+                          type: 'col',
+                          props: {
+                            span: 12,
+                            xs: {
+                              span: 24
+                            }
+                          },
+                          children: [
+                            {
+                              key: 'f77l5qqags1a7n05',
+                              prop: 'salary',
+                              label: '期望薪资',
+                              type: 'input',
+                              required: true,
+                              props: {
+                                placeholder: '请输入期望薪资'
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  key: 'frc07z6gnmhcskig',
+                  prop: 'fmkl15pfvm5dj172',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      width: '140px',
+                      border: 'none',
+                      background: 'none',
+                      borderRadius: '0',
+                      padding: '0'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fhwkxaon6fqt6owp',
+                      prop: 'avatar',
+                      label: '头像',
+                      type: 'imageUpload',
+                      props: {
+                        limit: 1,
+                        itemStyle: {
+                          margin: '0',
+                          width: '120px',
+                          height: '148px'
+                        },
+                        buttonStyle: {
+                          margin: '0',
+                          width: '120px',
+                          height: '148px'
+                        }
+                      },
+                      itemProps: {
+                        labelWidth: 48,
+                        style: {
+                          flexDirection: 'column',
+                          width: 'max-content',
+                          margin: '0 0 0 auto'
+                        },
+                        labelPosition: 'right'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'ftuhbwjz1zjupc9x',
+          label: '',
+          prop: 'f7xfvh7gj2z18r2r',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '22px 0 12px 0'
+            }
+          },
+          children: [
+            {
+              key: 'fb75zjctc226xvnj',
+              prop: 'f69o2vkkzykl6iec',
+              label: '专业技能',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'fzsgt968z21chgty',
+          prop: 'skill',
+          label: '',
+          type: 'textarea',
+          props: {
+            rows: 12,
+            placeholder:
+              '1、熟练掌握 XXX 语言\n2、熟练使用 XXX 框架\n3、取得 XXX 证书'
+          },
+          itemProps: {
+            labelWidth: 0
+          },
+          required: true,
+          requiredMessage: '请输入专业技能'
+        },
+        {
+          key: 'fq55dqpcem3vjxuj',
+          prop: 'f4ku05p3m827gwjm',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '38px 0 20px 0'
+            }
+          },
+          children: [
+            {
+              key: 'fqxiupsdv93axbq7',
+              prop: 'fy20qom1976yb3bl',
+              label: '工作经历',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'frnlpxjyprvpwwck',
+          prop: 'fjllat5k38x968x2',
+          label: '',
+          type: 'row',
+          props: {
+            gutter: 16
+          },
+          children: [
+            {
+              key: 'fhztq1coypiw7azu',
+              prop: 'fk89vd6e4su2yu2p',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'fwc3u39nypy6fifb',
+                  prop: 'careerTime',
+                  label: '',
+                  type: 'daterange',
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'f8u4g8prnzcvpoom',
+              prop: 'f9en8k4mj2jbpx8j',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'fm8ve7akueugbm1g',
+                  prop: 'careerCompany',
+                  label: '',
+                  type: 'input',
+                  props: {
+                    placeholder: '公司名称'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'f2b9nhjatbg1kbdo',
+              prop: 'fi2jydsumdvvl4d6',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'f4s1jm9ey3gtiodn',
+                  prop: 'careerPost',
+                  label: '',
+                  type: 'input',
+                  props: {
+                    placeholder: '岗位名称'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fnm1y93v26k4hw0r',
+              prop: 'fzrnbyn69db1husp',
+              label: '',
+              type: 'col',
+              props: {
+                span: 24
+              },
+              children: [
+                {
+                  key: 'fu5oqbxkjs6eo2xv',
+                  label: '',
+                  prop: 'careerJobDescription',
+                  type: 'textarea',
+                  props: {
+                    placeholder:
+                      '工作内容：\n负责了什么项目，运用了什么技术，解决了什么难题，取得了什么成果'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fa8o77o1uzqnno5s',
+          prop: 'fwm8wejh5vuaihep',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              borderTop: '1px dashed var(--el-border-color)',
+              paddingTop: '24px',
+              marginTop: '12px',
+              position: 'relative'
+            }
+          },
+          children: [
+            {
+              key: 'ftm6u7lh10d4580k',
+              prop: 'fwbtw3vttvlva5qr',
+              label: '',
+              type: 'row',
+              props: {
+                gutter: 16
+              },
+              children: [
+                {
+                  key: 'f5657oh7srzspsrx',
+                  prop: 'f2tfk9fa7m3wj3ev',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'fwjks7h51a6v0pe2',
+                      label: '',
+                      prop: 'career02Time',
+                      type: 'daterange',
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f6rsshor38kqr42k',
+                  prop: 'ffltu7o8fhg6qvpu',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'f893hg5bxkeympla',
+                      prop: 'career02Company',
+                      label: '',
+                      type: 'input',
+                      props: {
+                        placeholder: '公司名称'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fsmkxyvpz6y0epnm',
+                  prop: 'fbyzt2cxcy2j421i',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'foj1u75f9zkc18dg',
+                      prop: 'career02Post',
+                      label: '',
+                      type: 'input',
+                      props: {
+                        placeholder: '岗位名称'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f9qdklxt8f9fulj6',
+                  prop: 'fbkew9b5sk0mis49',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 24
+                  },
+                  children: [
+                    {
+                      key: 'fq0ccecudc9s9e30',
+                      prop: 'career02JobDescription',
+                      label: '',
+                      type: 'textarea',
+                      props: {
+                        placeholder:
+                          '工作内容：\n负责了什么项目，运用了什么技术，解决了什么难题，取得了什么成果'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fspjph2pv9j8s98g',
+              prop: 'showCareer02',
+              label: '',
+              type: 'checkCard',
+              props: {
+                items: [
+                  {
+                    value: '1',
+                    label: 'X'
+                  }
+                ],
+                itemStyle: {
+                  padding: '3px 0 0 7px',
+                  margin: '0',
+                  lineHeight: '1',
+                  border: 'none',
+                  background: '#ff4d4f',
+                  color: '#fff',
+                  width: '20px',
+                  height: '20px',
+                  borderRadius: '0px 2px 0px 20px',
+                  fontSize: '13px'
+                },
+                allowUncheck: true,
+                arrow: false
+              },
+              itemProps: {
+                labelWidth: 0,
+                style: {
+                  position: 'absolute',
+                  top: '0',
+                  right: '0'
+                }
+              }
+            }
+          ],
+          vIf: '!!form.showCareer02'
+        },
+        {
+          key: 'ft8i0hxrlwv3bfnl',
+          prop: 'showCareer03',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                value: '1',
+                label: '+ 添加工作经历'
+              }
+            ],
+            style: {
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              marginBottom: '12px'
+            },
+            itemStyle: {
+              padding: '6px 0px',
+              margin: '0 0 0 0',
+              lineHeight: 'normal',
+              textAlign: 'center',
+              borderStyle: 'dashed',
+              '--ele-check-card-border-color': 'var(--el-border-color)'
+            }
+          },
+          itemProps: {
+            labelWidth: 0
+          },
+          vIf: '!!form.showCareer02&&!form.showCareer03'
+        },
+        {
+          key: 'fhdv5153mpdl2c3u',
+          prop: 'f8xxp2ensbjadab9',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              borderTop: '1px dashed var(--el-border-color)',
+              paddingTop: '24px',
+              marginTop: '12px',
+              position: 'relative'
+            }
+          },
+          vIf: '!!form.showCareer03',
+          children: [
+            {
+              key: 'f8hzqinw2dhpt5hl',
+              prop: 'f3o80jfuc0knvbey',
+              label: '',
+              type: 'row',
+              props: {
+                gutter: 16
+              },
+              children: [
+                {
+                  key: 'f1ac57w8rwcexxce',
+                  prop: 'fj30sd3vq10s17qk',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'fpolb8pi261ebo90',
+                      prop: 'career03Time',
+                      label: '',
+                      type: 'daterange',
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f9ja5vv44h8z4r79',
+                  prop: 'f60o8dmhro0d24oq',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'f0bvobgpj9m4mnyd',
+                      prop: 'career03Company',
+                      label: '',
+                      type: 'input',
+                      props: {
+                        placeholder: '公司名称'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f7l63ro06p30149r',
+                  prop: 'fz0kmdbuyedr9thf',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 8
+                  },
+                  children: [
+                    {
+                      key: 'fnn0qvr8bgajngux',
+                      prop: 'career03Post',
+                      label: '',
+                      type: 'input',
+                      props: {
+                        placeholder: '岗位名称'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'frtx8byr0taw5lfp',
+                  prop: 'fetpec2npqofwejs',
+                  label: '',
+                  type: 'col',
+                  props: {
+                    span: 24
+                  },
+                  children: [
+                    {
+                      key: 'fwbvwapfx373ppvx',
+                      prop: 'career03JobDescription',
+                      label: '',
+                      type: 'textarea',
+                      props: {
+                        placeholder:
+                          '工作内容：\n负责了什么项目，运用了什么技术，解决了什么难题，取得了什么成果'
+                      },
+                      itemProps: {
+                        labelWidth: 0
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f990xiiaorw3vv0a',
+              prop: 'showCareer03',
+              label: '',
+              type: 'checkCard',
+              props: {
+                items: [
+                  {
+                    value: '1',
+                    label: 'X'
+                  }
+                ],
+                itemStyle: {
+                  padding: '3px 0 0 7px',
+                  margin: '0',
+                  lineHeight: '1',
+                  border: 'none',
+                  background: '#ff4d4f',
+                  color: '#fff',
+                  width: '20px',
+                  height: '20px',
+                  borderRadius: '0px 2px 0px 20px',
+                  fontSize: '13px'
+                },
+                allowUncheck: true,
+                arrow: false
+              },
+              itemProps: {
+                labelWidth: 0,
+                style: {
+                  position: 'absolute',
+                  top: '0',
+                  right: '0'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'fwrct8zcshc1wo7t',
+          prop: 'showCareer02',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                value: '1',
+                label: '+ 添加工作经历'
+              }
+            ],
+            style: {
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              marginBottom: '12px'
+            },
+            itemStyle: {
+              padding: '6px 0px',
+              margin: '0 0 0 0',
+              lineHeight: 'normal',
+              textAlign: 'center',
+              borderStyle: 'dashed',
+              '--ele-check-card-border-color': 'var(--el-border-color)'
+            }
+          },
+          itemProps: {
+            labelWidth: 0
+          },
+          vIf: '!form.showCareer02'
+        },
+        {
+          key: 'fc6e7h6ye8i0vdrh',
+          prop: 'fw87p2968wgs31qb',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '22px 0 20px 0'
+            }
+          },
+          children: [
+            {
+              prop: 'fqiki56t447la1qt',
+              label: '项目经验',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              },
+              key: 'fppm7wlj12259d4l'
+            }
+          ]
+        },
+        {
+          key: 'fkqq6zvtf834mnxd',
+          prop: 'fgnvnudpzsuwfowb',
+          label: '',
+          type: 'row',
+          props: {
+            gutter: 16
+          },
+          children: [
+            {
+              key: 'fhxenym961aetikv',
+              prop: 'fbnguv0jktlnv9r5',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'f39ptfbn1o9vk4no',
+                  prop: 'projectTime',
+                  label: '',
+                  type: 'daterange',
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fqf1jyv1r4gton4b',
+              prop: 'f8n51wn6v3pudekr',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'fqaw36gsnaebdu0i',
+                  prop: 'projectName',
+                  label: '',
+                  type: 'input',
+                  props: {
+                    placeholder: '项目名称'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fuqamslrg9t6twxo',
+              prop: 'frcpqxyunqsdae9a',
+              label: '',
+              type: 'col',
+              props: {
+                span: 8
+              },
+              children: [
+                {
+                  key: 'fp0ejckrn4u4xr3t',
+                  prop: 'projectRole',
+                  label: '',
+                  type: 'input',
+                  props: {
+                    placeholder: 'XX 角色'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fcr1wx84kaqujc3l',
+              prop: 'fvw2ztch7aj9ay52',
+              label: '',
+              type: 'col',
+              props: {
+                span: 24
+              },
+              children: [
+                {
+                  key: 'fzquft0gv3woh5eg',
+                  prop: 'projectDescription',
+                  label: '',
+                  type: 'textarea',
+                  props: {
+                    rows: 8,
+                    placeholder:
+                      '技术栈：框架、数据库、中间件、工具\n团队规模：前端 XX 人、后端 XX 人\n项目简介：\n用于什么行业，包含什么功能，解决什么需求\n工作内容：\n主要负责哪些模块，遇到了什么难题，是如何解决的，从中汲取了什么经验'
+                  },
+                  itemProps: {
+                    labelWidth: 0
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: '只读简历表单',
+    cover: markRaw(CoverResumeView),
+    config: {
+      labelWidth: 94,
+      footer: false,
+      items: [
+        {
+          key: 'fiv7x3mi1raxsx7o',
+          prop: 'fiv7x3mi1raxsx7o',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderBottom: '4px solid var(--el-color-primary)',
+              margin: '6px 0 38px 0'
+            }
+          },
+          children: [
+            {
+              key: 'f1iz234d9mds0l5j',
+              prop: 'f1iz234d9mds0l5j',
+              label: '个人简历',
+              type: 'label',
+              props: {
+                size: 'xl',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '6px 28px 2px 28px',
+                  letterSpacing: '6px',
+                  borderRadius: '22px 22px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'fvtivxypy4n8da1d',
+          prop: 'fvtivxypy4n8da1d',
+          label: '',
+          type: 'table',
+          props: {
+            hasHeader: false,
+            style: { tableLayout: 'fixed', border: '0' }
+          },
+          children: [
+            {
+              key: 'fl3jj2fepn8djt17',
+              prop: 'fl3jj2fepn8djt17',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fipngn4mkjgzmwev',
+                  prop: 'fipngn4mkjgzmwev',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      border: 'none',
+                      background: 'none',
+                      borderRadius: '0',
+                      padding: '0'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'f8xuc2dg09lycf87',
+                      prop: 'f8xuc2dg09lycf87',
+                      label: '',
+                      type: 'row',
+                      props: { gutter: 16 },
+                      children: [
+                        {
+                          key: 'fu72iq8991fikmxp',
+                          prop: 'fu72iq8991fikmxp',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'fhw598d87a9wln7k',
+                              prop: 'name',
+                              label: '姓名：',
+                              type: 'text',
+                              initValue: 'XXX',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'ff1qhc6vm8zx6wgf',
+                          prop: 'ff1qhc6vm8zx6wgf',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'ftk5unlssnbnv2oi',
+                              prop: 'sex',
+                              label: '性别：',
+                              type: 'text',
+                              initValue: '男',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fap2q5ognostoi5b',
+                          prop: 'fap2q5ognostoi5b',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'fqgk96wtbj5azq4w',
+                              prop: 'age',
+                              label: '年龄：',
+                              type: 'text',
+                              initValue: '25',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fxwdoyc3rfrqy2p9',
+                          prop: 'fxwdoyc3rfrqy2p9',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'fqo97mw4gv0qtz8u',
+                              label: '联系方式：',
+                              prop: 'phone',
+                              type: 'text',
+                              initValue: '12345678901',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'f83hu7w7vl0dbfbo',
+                          prop: 'f83hu7w7vl0dbfbo',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'ffc3k3yrxjskqik8',
+                              prop: 'education',
+                              label: '学历：',
+                              type: 'text',
+                              initValue: '本科',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'f3aumviqxwhqzt7q',
+                          prop: 'f3aumviqxwhqzt7q',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'fo86pinnd5ubdaqz',
+                              prop: 'experience',
+                              label: '工作经验：',
+                              type: 'text',
+                              initValue: '三年',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fz2zfsylou3ns3ng',
+                          prop: 'fz2zfsylou3ns3ng',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'fovn866v7o5ims2e',
+                              label: '意向岗位：',
+                              prop: 'job',
+                              type: 'text',
+                              initValue: 'Java 开发工程师',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        },
+                        {
+                          key: 'fwyk7mu6605hol7j',
+                          prop: 'fwyk7mu6605hol7j',
+                          label: '',
+                          type: 'col',
+                          props: { span: 12, xs: { span: 24 } },
+                          children: [
+                            {
+                              key: 'f2m7rt4qdhp2hevn',
+                              prop: 'salary',
+                              label: '期望薪资：',
+                              type: 'text',
+                              initValue: '10K ~ 12K',
+                              itemProps: { style: { marginBottom: '0px' } }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  key: 'fd3f3ei6i15fteg5',
+                  prop: 'fd3f3ei6i15fteg5',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      width: '140px',
+                      border: 'none',
+                      background: 'none',
+                      borderRadius: '0',
+                      padding: '0'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fv8s78d5i7e0lb3q',
+                      prop: 'avatar',
+                      label: '',
+                      type: 'imageUpload',
+                      props: {
+                        limit: 1,
+                        itemStyle: {
+                          margin: '0',
+                          width: '112px',
+                          height: '128px',
+                          border: 'none',
+                          cursor: 'zoom-in'
+                        },
+                        buttonStyle: {
+                          margin: '0',
+                          width: '120px',
+                          height: '148px'
+                        },
+                        imageProps: { fit: 'cover' },
+                        readonly: true
+                      },
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { margin: '0 auto', width: 'max-content' },
+                        labelPosition: 'right'
+                      },
+                      initValue:
+                        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fmzq9sjz6l3l734t',
+          prop: 'fmzq9sjz6l3l734t',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '38px 0 16px 0'
+            }
+          },
+          children: [
+            {
+              key: 'foy1uyb5i7w4rlcn',
+              label: '专业技能',
+              prop: 'foy1uyb5i7w4rlcn',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'frnlyc3c8gsi4n5a',
+          prop: 'skill',
+          label: '',
+          type: 'text',
+          itemProps: { labelWidth: 0 },
+          initValue:
+            '1、熟练掌握 Java 基础知识，精通多线程并发，精通 JVM 原理；\n2、熟练使用 MySQL、Redis 及常见的优化手段；\n3、熟练使用 SpringBoot、MyBtais 等主流开发框架；\n4、熟练掌握 RabbitMQ、Kafka、Zookeeper 的使用和原理；\n5、熟练掌握分布式和微服务的系统设计与应用；\n6、熟练掌握常见的 CAP、Paxos 算法；\n7、熟练使用 Git、Maven、Docker 等工具；',
+          props: {
+            style: { flex: 1, whiteSpace: 'pre-wrap', padding: '0 10px' }
+          }
+        },
+        {
+          key: 'fewhnnlxv2j9avp6',
+          prop: 'fewhnnlxv2j9avp6',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '38px 0 20px 0'
+            }
+          },
+          children: [
+            {
+              key: 'fgq1h1s3nqztxjd8',
+              prop: 'fgq1h1s3nqztxjd8',
+              label: '工作经历',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'f2yth0acvqt4exug',
+          prop: 'fjllat5k38x968x2',
+          label: '',
+          type: 'row',
+          children: [
+            {
+              key: 'fvc2fa859jgbhgci',
+              prop: 'fk89vd6e4su2yu2p',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fstlpylt11vnr2ou',
+                  prop: 'careerTime',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: '2024/02/05 ~ 至今',
+                  props: { style: { padding: '0 10px', flex: '1' } }
+                }
+              ]
+            },
+            {
+              key: 'f6qg7prpeys2pxm9',
+              prop: 'f9en8k4mj2jbpx8j',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fjk5yuj4w8vzx0qs',
+                  prop: 'careerCompany',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: 'XXXXX 科技有限公司',
+                  props: { style: { flex: '1', textAlign: 'center' } }
+                }
+              ]
+            },
+            {
+              key: 'fwnvddc2cfhp6gwn',
+              prop: 'fi2jydsumdvvl4d6',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fff22pa8c6zoqqek',
+                  prop: 'careerPost',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: 'Java 开发工程师',
+                  props: {
+                    style: { padding: '0 10px', textAlign: 'right', flex: '1' }
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fnutcb3w031ljfyl',
+              prop: 'fzrnbyn69db1husp',
+              label: '',
+              type: 'col',
+              props: { span: 24 },
+              children: [
+                {
+                  key: 'fzfq7sj7iiqutl6h',
+                  prop: 'careerJobDescription',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginTop: '6px' } },
+                  initValue:
+                    '工作内容：\n负责 XXX 业务相关服务的开发和重构以及维护工作，负责线上产品端服务的同步，负责 SSO 单点登录系统后端的架构与开发。',
+                  props: {
+                    style: {
+                      padding: '0 10px',
+                      whiteSpace: 'pre-wrap',
+                      flex: '1'
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fq1l30icpjr7zp52',
+          prop: 'fq1l30icpjr7zp52',
+          label: '',
+          type: 'divider',
+          props: { borderStyle: 'dashed', style: { margin: '6px 0 24px 0' } }
+        },
+        {
+          key: 'f3zangv3u57djpu3',
+          prop: 'f3zangv3u57djpu3',
+          label: '',
+          type: 'row',
+          children: [
+            {
+              key: 'f0pm66gzx8gb5u4r',
+              prop: 'f0pm66gzx8gb5u4r',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fn893800624p1s9p',
+                  prop: 'career02Time',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: '2023/01/25 ~ 2024/01/02',
+                  props: { style: { padding: '0 10px', flex: '1' } }
+                }
+              ]
+            },
+            {
+              key: 'fl88r5inw6m5sf4z',
+              prop: 'fl88r5inw6m5sf4z',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fs8303qnjos4fwkg',
+                  prop: 'career02Company',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: 'XXX 集团股份有限公司',
+                  props: { style: { flex: 1, textAlign: 'center' } }
+                }
+              ]
+            },
+            {
+              key: 'f4gfhepu5faguzt0',
+              prop: 'f4gfhepu5faguzt0',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fmmw6nsmzc7v7di7',
+                  prop: 'career02Post',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: 'Java 开发工程师',
+                  props: {
+                    style: { flex: '1', textAlign: 'right', padding: '0 10px' }
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fi4qrui9wwwjklpp',
+              prop: 'fi4qrui9wwwjklpp',
+              label: '',
+              type: 'col',
+              props: { span: 24 },
+              children: [
+                {
+                  key: 'fpntk3iyah2kuyi8',
+                  prop: 'career02JobDescription',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginTop: '6px' } },
+                  initValue:
+                    '工作内容：\n负责了什么项目，运用了什么技术，解决了什么难题，取得了什么成果',
+                  props: {
+                    style: {
+                      flex: '1',
+                      whiteSpace: 'pre-wrap',
+                      padding: '0 10px'
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fj7hl5uhdrliko4j',
+          prop: 'fj7hl5uhdrliko4j',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '2px solid var(--el-color-primary)',
+              margin: '22px 0 20px 0'
+            }
+          },
+          children: [
+            {
+              key: 'fjde6xwxl8qrxvqn',
+              prop: 'fjde6xwxl8qrxvqn',
+              label: '项目经验',
+              type: 'label',
+              props: {
+                size: 'md',
+                strong: true,
+                style: {
+                  color: '#fff',
+                  background: 'var(--el-color-primary)',
+                  padding: '4px 20px 2px 20px',
+                  letterSpacing: '6px',
+                  borderRadius: '12px 12px 0px 0px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'fvb8pkk24welfcq4',
+          prop: 'fvb8pkk24welfcq4',
+          label: '',
+          type: 'row',
+          children: [
+            {
+              key: 'f8nda71ma9hvadrh',
+              prop: 'f8nda71ma9hvadrh',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fb4swjzacb9w95aa',
+                  prop: 'projectTime',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: '2024/03/22 ~ 2024/06/05',
+                  props: { style: { flex: '1', padding: '0 10px' } }
+                }
+              ]
+            },
+            {
+              key: 'fibucj3vl6ws1z7k',
+              prop: 'fibucj3vl6ws1z7k',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'f9k892rcl9muc5r5',
+                  prop: 'projectName',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: 'XXX 电商购物平台',
+                  props: { style: { flex: '1', textAlign: 'center' } }
+                }
+              ]
+            },
+            {
+              key: 'f3zjc6w02ovzut23',
+              prop: 'f3zjc6w02ovzut23',
+              label: '',
+              type: 'col',
+              props: { span: 8 },
+              children: [
+                {
+                  key: 'fgv29ondn5067cz0',
+                  prop: 'projectRole',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginBottom: '0px' } },
+                  initValue: '后端开发',
+                  props: {
+                    style: { flex: '1', textAlign: 'right', padding: '0 10px' }
+                  }
+                }
+              ]
+            },
+            {
+              key: 'fzgngfiaij44ztgd',
+              prop: 'fzgngfiaij44ztgd',
+              label: '',
+              type: 'col',
+              props: { span: 24 },
+              children: [
+                {
+                  key: 'f6674rm3v3secpub',
+                  prop: 'projectDescription',
+                  label: '',
+                  type: 'text',
+                  itemProps: { labelWidth: 0, style: { marginTop: '12px' } },
+                  initValue:
+                    '技术栈：SSM、MySQL、Redis、Nginx、MyCat\n团队规模：20人\n项目简介：\n    是一个完整的电商购物平台，主要功能是购物，包含登录、注册、退出登录、购物、支付、退货、换货等模块。\n工作内容：\n    主要负责购物模块，对老旧代码进行重构，解决了访问速度慢的问题，通过 Redis 缓存，解决了高并发问题，将网页的访问速度提高 50%，采用 RabbitMQ 解决不同系统之间的通信问题，并解决了应用 HttpClient 带来的系统耦合问题，使用 Nginx 做反向代理，搭建 Tomcat 服务器集群，实现了系统的高可用、易扩展、高性能。',
+                  props: {
+                    style: {
+                      flex: '1',
+                      whiteSpace: 'pre-wrap',
+                      padding: '0 10px'
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: '表格表单',
+    cover: markRaw(CoverTable),
+    config: {
+      labelWidth: 80,
+      footer: true,
+      footerProps: { labelWidth: 0 },
+      footerStyle: { justifyContent: 'center' },
+      items: [
+        {
+          key: 'frkqdx8pbeeipguo',
+          prop: 'filgf8q0ttascncd',
+          label: '员工离职申请表',
+          type: 'label',
+          props: {
+            size: 'xl',
+            strong: true,
+            style: { textAlign: 'center', marginBottom: '12px' }
+          }
+        },
+        {
+          key: 'f645yw5wtzrz4wy8',
+          prop: 'f8mvllrtbncy1vsk',
+          label: '',
+          type: 'table',
+          props: {
+            border: true,
+            hasHeader: false,
+            style: {
+              '--ele-table-border-color': 'var(--el-text-color-secondary)',
+              tableLayout: 'fixed',
+              marginBottom: '28px'
+            }
+          },
+          children: [
+            {
+              key: 'fo7ilm3xia9c9ytg',
+              prop: 'f7maev586jyrvvh1',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fabhugctpvrbkwv3',
+                  prop: 'f0f52mfbywogsbti',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      width: '116px',
+                      whiteSpace: 'pre-wrap',
+                      textAlign: 'right'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fcz45crf6f4b377u',
+                      prop: 'fy41m5s2zkyaefdj',
+                      label: '姓        名',
+                      type: 'label',
+                      props: {
+                        tag: 'span',
+                        class: 'pro-form-required-asterisk'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fiqkewjyk9aalxar',
+                  prop: 'fhf3dyeerdc48m6m',
+                  label: '',
+                  type: 'tableCell',
+                  props: { style: { minWidth: '140px' } },
+                  children: [
+                    {
+                      key: 'fimctwlzrx8ccyru',
+                      prop: 'name',
+                      label: '',
+                      type: 'input',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' },
+                        class: 'pro-form-error-popper'
+                      },
+                      props: { placeholder: '' },
+                      required: true,
+                      requiredMessage: '请输入姓名'
+                    }
+                  ]
+                },
+                {
+                  key: 'f091d418o9fu0ryu',
+                  prop: 'f059cggvr7ch4xut',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      whiteSpace: 'pre-wrap',
+                      textAlign: 'right',
+                      width: '116px'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'f4frr33np66ypdu3',
+                      prop: 'f9kasqs7tow2oher',
+                      label: '工        号',
+                      type: 'label',
+                      props: {
+                        tag: 'span',
+                        class: 'pro-form-required-asterisk'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fznxki7zikxxg7yj',
+                  prop: 'fa0ciq9junkveqnx',
+                  label: '',
+                  type: 'tableCell',
+                  props: { style: { minWidth: '140px' } },
+                  children: [
+                    {
+                      key: 'fq43nwei2zybry6p',
+                      prop: 'jobNumber',
+                      label: '',
+                      type: 'input',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' },
+                        class: 'pro-form-error-popper'
+                      },
+                      props: { placeholder: '' },
+                      required: true,
+                      requiredMessage: '请输入工号'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f4p3wexw4u83cems',
+              prop: 'fk42078emmhdmgqy',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fqqhrjnh7tdnoir3',
+                  prop: 'f2cv4wo8iaf7v3lr',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'right' }
+                  },
+                  children: [
+                    {
+                      key: 'f0c5llv1moro606z',
+                      prop: 'fxfvpgkr2nc5j5nj',
+                      label: '入职日期',
+                      type: 'label',
+                      props: { tag: 'span' }
+                    }
+                  ]
+                },
+                {
+                  key: 'f5vu6zevgt4rnbr2',
+                  prop: 'fwugrhtwkjgxwktm',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'f1dz5ppt68m3ezxk',
+                      prop: 'commencementDate',
+                      label: '',
+                      type: 'date',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' },
+                        class: 'pro-form-error-popper'
+                      },
+                      props: { placeholder: '' }
+                    }
+                  ]
+                },
+                {
+                  key: 'fvag59vog369mlir',
+                  prop: 'fjw3r2iyber3jvo7',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'right' }
+                  },
+                  children: [
+                    {
+                      key: 'f8mg2zagkx3oke77',
+                      prop: 'f8mg2zagkx3oke77',
+                      label: '最后工作日',
+                      type: 'label',
+                      props: { tag: 'span' }
+                    }
+                  ]
+                },
+                {
+                  key: 'f3zi8dedk39pw2iq',
+                  prop: 'fnm7ow3966q7b8ym',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'fjwifgrvasz0biyu',
+                      prop: 'termDate',
+                      label: '',
+                      type: 'date',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' },
+                        class: 'pro-form-error-popper'
+                      },
+                      props: { placeholder: '' }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fk6dluxgg8v0fcl5',
+              prop: 'fcnmncf9ue121uo3',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fto43t09iuw3dkxx',
+                  prop: 'femo1c3f6rreuiai',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'right' }
+                  },
+                  children: [
+                    {
+                      key: 'f27xr9mgooi3ngr7',
+                      prop: 'fcof4y5h3zxyp33j',
+                      label: '所在部门',
+                      type: 'label',
+                      props: { tag: 'span' }
+                    }
+                  ]
+                },
+                {
+                  key: 'f6s1ojac3bt2w4rr',
+                  prop: 'fvdq5t0dpvxddy6g',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'f89crqpu73uchyql',
+                      prop: 'department',
+                      label: '',
+                      type: 'input',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      },
+                      props: { placeholder: '' }
+                    }
+                  ]
+                },
+                {
+                  key: 'fk3c6k6rudl0dbry',
+                  prop: 'fyjc9vjnbwfo6ka5',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'right' }
+                  },
+                  children: [
+                    {
+                      key: 'f7r5o89kl9c97s2i',
+                      prop: 'f4v8tsayk8j1neye',
+                      label: '岗        位',
+                      type: 'label',
+                      props: { tag: 'span' }
+                    }
+                  ]
+                },
+                {
+                  key: 'fvbow7rcae1760ip',
+                  prop: 'fzhkjhgrb4x4qze4',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'fabjg4eu6i2gzgdu',
+                      prop: 'post',
+                      label: '',
+                      type: 'input',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      },
+                      props: { placeholder: '' }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f0frak7n6nqknu3r',
+              prop: 'fs9mxag9s5ws9zy3',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fiu572wp9883flfu',
+                  prop: 'fxueslwbun47k5dw',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'right' }
+                  },
+                  children: [
+                    {
+                      key: 'flc0n9cjkr7qdp3l',
+                      prop: 'fpgmne9blazyxia7',
+                      label: '离职原因',
+                      type: 'label',
+                      props: {
+                        tag: 'span',
+                        class: 'pro-form-required-asterisk'
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'f0bcesy1wqohiqkt',
+                  prop: 'fxbhulsyjm07fddl',
+                  label: '',
+                  type: 'tableCell',
+                  props: { colspan: '3' },
+                  children: [
+                    {
+                      key: 'fb72stuh2ghyrijv',
+                      prop: 'reason',
+                      label: '',
+                      type: 'textarea',
+                      props: { rows: 12, placeholder: '' },
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' },
+                        class: 'pro-form-error-popper'
+                      },
+                      required: true,
+                      requiredMessage: '请输入离职原因'
+                    },
+                    {
+                      key: 'fvqkxmt8ja5c9h3n',
+                      prop: 'fsm3kxc3fmgya152',
+                      label: '申请人签字：_____________    日期：_____________',
+                      type: 'label',
+                      props: {
+                        style: {
+                          textAlign: 'right',
+                          whiteSpace: 'pre-wrap',
+                          margin: '16px 0 10px 0'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f5q4jpm3w9drtw5x',
+              prop: 'fcsy8oqcn2kmkrcr',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'f8qmfyd96eeh5z6w',
+                  prop: 'feu23hb6wpgcsuxi',
+                  label: '',
+                  type: 'tableCell',
+                  props: { colspan: '4' },
+                  children: [
+                    {
+                      key: 'fle76eb5pdo1tmyk',
+                      prop: 'fs5voxssme7se0xh',
+                      label: '部门意见：',
+                      type: 'label',
+                      props: { style: { marginBottom: '12px' } }
+                    },
+                    {
+                      key: 'fjj1qx1zfcs0ztfq',
+                      prop: 'opinion',
+                      label: '',
+                      type: 'textarea',
+                      props: { placeholder: '' },
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    },
+                    {
+                      key: 'fbn8ffyor0vzdidw',
+                      prop: 'f2pg82osz3sb7snv',
+                      label:
+                        '部门主管签字：_____________    日期：_____________',
+                      type: 'label',
+                      props: {
+                        style: {
+                          textAlign: 'right',
+                          whiteSpace: 'pre-wrap',
+                          margin: '16px 0 10px 0'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: '只读表格表单',
+    cover: markRaw(CoverTableView),
+    config: {
+      labelWidth: 80,
+      footer: false,
+      items: [
+        {
+          key: 'fula2npbkf819vh4',
+          prop: 'fula2npbkf819vh4',
+          label: '员工离职申请表',
+          type: 'label',
+          props: {
+            size: 'xl',
+            strong: true,
+            style: { textAlign: 'center', marginBottom: '12px' }
+          }
+        },
+        {
+          key: 'fh4u0cks93v4xxrb',
+          prop: 'fh4u0cks93v4xxrb',
+          label: '',
+          type: 'table',
+          props: {
+            border: true,
+            hasHeader: false,
+            style: {
+              '--ele-table-border-color': 'var(--el-text-color-secondary)',
+              '--ele-table-tr-hover-bg': 'transparent',
+              '--ele-table-radius': 0,
+              tableLayout: 'fixed'
+            }
+          },
+          children: [
+            {
+              key: 'f1p7dng7gz69jnnc',
+              prop: 'f1p7dng7gz69jnnc',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'fj2phamyozphw4xi',
+                  prop: 'fj2phamyozphw4xi',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      width: '100px',
+                      whiteSpace: 'pre-wrap',
+                      textAlign: 'center'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fxonm77f6yq9pekm',
+                      prop: 'fxonm77f6yq9pekm',
+                      label: '姓        名',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'fujcysrf7u85czpb',
+                  prop: 'fujcysrf7u85czpb',
+                  label: '',
+                  type: 'tableCell',
+                  props: { style: { minWidth: '140px' } },
+                  children: [
+                    {
+                      key: 'fmb3pjtfgzt9qizp',
+                      prop: 'name',
+                      label: '',
+                      type: 'text',
+                      initValue: 'XXX',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fgou2bsavvrbk2ak',
+                  prop: 'fgou2bsavvrbk2ak',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: {
+                      width: '100px',
+                      whiteSpace: 'pre-wrap',
+                      textAlign: 'center'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fixj69j8xc42xl37',
+                      prop: 'fixj69j8xc42xl37',
+                      label: '性        别',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'fsqsvduns5ao7qno',
+                  prop: 'fsqsvduns5ao7qno',
+                  label: '',
+                  type: 'tableCell',
+                  props: { style: { minWidth: '140px' } },
+                  children: [
+                    {
+                      key: 'fji3s1oks50mp66b',
+                      prop: 'sex',
+                      label: '',
+                      type: 'text',
+                      initValue: '男',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fv4etxh10otlj3qx',
+              prop: 'fv4etxh10otlj3qx',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'ft8rejnjn1isf7h3',
+                  prop: 'ft8rejnjn1isf7h3',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'center' }
+                  },
+                  children: [
+                    {
+                      key: 'fgh1spj9nnqjkjn9',
+                      prop: 'fgh1spj9nnqjkjn9',
+                      label: '工        号',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'fx78mg3zbijrmc8c',
+                  prop: 'fx78mg3zbijrmc8c',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'fmmwlj9t047uyv8m',
+                      prop: 'jobNumber',
+                      label: '',
+                      type: 'text',
+                      initValue: '026',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fx63wiqttcy6nlnv',
+                  prop: 'fx63wiqttcy6nlnv',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'center' }
+                  },
+                  children: [
+                    {
+                      key: 'fur99irp6wcxkqv3',
+                      prop: 'fur99irp6wcxkqv3',
+                      label: '入职日期',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'fefn3xk6rosdr13r',
+                  prop: 'fefn3xk6rosdr13r',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'fgzpkfe32e6rpp7c',
+                      prop: 'commencementDate',
+                      label: '',
+                      type: 'text',
+                      initValue: '2021/11/04',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      },
+                      props: { style: { wordBreak: 'break-all' } }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'ffpqy7162hcuahon',
+              prop: 'ffpqy7162hcuahon',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'flqdmju7mhfgv9fm',
+                  prop: 'flqdmju7mhfgv9fm',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'center' }
+                  },
+                  children: [
+                    {
+                      key: 'fbujfamh5vmmu8fu',
+                      prop: 'fbujfamh5vmmu8fu',
+                      label: '所在部门',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'fvsp66elfr0q4eth',
+                  prop: 'fvsp66elfr0q4eth',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'ffbrwwjekvr2j8dk',
+                      prop: 'department',
+                      label: '',
+                      type: 'text',
+                      initValue: '研发部',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    }
+                  ]
+                },
+                {
+                  key: 'fxnluohhd036e6om',
+                  prop: 'fxnluohhd036e6om',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'center' }
+                  },
+                  children: [
+                    {
+                      key: 'fjhm798qeofzd0dm',
+                      prop: 'fjhm798qeofzd0dm',
+                      label: '岗        位',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'frn1bqlkol2ekp22',
+                  prop: 'frn1bqlkol2ekp22',
+                  label: '',
+                  type: 'tableCell',
+                  children: [
+                    {
+                      key: 'fb8dc1fxedvd1wos',
+                      prop: 'post',
+                      label: '',
+                      type: 'text',
+                      initValue: 'Java 开发工程师',
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fgsq9m2yh2fg6iqc',
+              prop: 'fgsq9m2yh2fg6iqc',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'f3okqh9zfgjbmh76',
+                  prop: 'f3okqh9zfgjbmh76',
+                  label: '',
+                  type: 'tableCell',
+                  props: {
+                    style: { whiteSpace: 'pre-wrap', textAlign: 'center' }
+                  },
+                  children: [
+                    {
+                      key: 'f5s46dbjq4rbf25d',
+                      prop: 'f5s46dbjq4rbf25d',
+                      label: '离职原因',
+                      type: 'label'
+                    }
+                  ]
+                },
+                {
+                  key: 'flhqteuml38v4jnw',
+                  prop: 'flhqteuml38v4jnw',
+                  label: '',
+                  type: 'tableCell',
+                  props: { colspan: '3' },
+                  children: [
+                    {
+                      key: 'fis63jfwjs4ji9ft',
+                      prop: 'reason',
+                      label: '',
+                      type: 'text',
+                      initValue:
+                        '我非常感谢在这里的工作经历，但我一直寻求在技术上和职业生涯上有更大的突破，在过去的一段时间里，我努力工作并为公司做出了不少贡献，然而，我注意到我的薪资水平并没有得到相应的提升，最近我收到了一份薪资更高、更具挑战性的工作邀请，它更符合我的职业发展规划，因此我决定接受这个机会，离开现在的环境！',
+                      props: {
+                        style: { textIndent: '2em', minHeight: '260px' }
+                      },
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    },
+                    {
+                      key: 'fgejhff67u1xobsm',
+                      prop: 'fgejhff67u1xobsm',
+                      label: '申请人签字：_____________    日期：_____________',
+                      type: 'label',
+                      props: {
+                        style: {
+                          textAlign: 'right',
+                          whiteSpace: 'pre-wrap',
+                          marginBottom: '10px'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fcc82kwpd2rrmdx0',
+              prop: 'fcc82kwpd2rrmdx0',
+              label: '',
+              type: 'tableRow',
+              children: [
+                {
+                  key: 'f31bua69jjaeu7si',
+                  prop: 'f31bua69jjaeu7si',
+                  label: '',
+                  type: 'tableCell',
+                  props: { colspan: '4' },
+                  children: [
+                    {
+                      key: 'farwg0pvzu2a391k',
+                      prop: 'farwg0pvzu2a391k',
+                      label: '部门意见：',
+                      type: 'label',
+                      props: { style: { marginBottom: '12px' } }
+                    },
+                    {
+                      key: 'fjd5sgqz0y8wa839',
+                      prop: 'opinion',
+                      label: '',
+                      type: 'text',
+                      initValue: '所有工作内容都已经交接完毕，同意离职！',
+                      props: { style: { minHeight: '120px' } },
+                      itemProps: {
+                        labelWidth: 0,
+                        style: { marginBottom: '0px' }
+                      }
+                    },
+                    {
+                      key: 'fxiele7md6dampim',
+                      prop: 'fxiele7md6dampim',
+                      label:
+                        '部门主管签字：_____________    日期：_____________',
+                      type: 'label',
+                      props: {
+                        style: {
+                          textAlign: 'right',
+                          whiteSpace: 'pre-wrap',
+                          marginBottom: '10px'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    name: '选项卡表单',
+    cover: markRaw(CoverTabs),
+    config: {
+      labelWidth: 94,
+      footer: true,
+      footerProps: {
+        labelWidth: 0
+      },
+      footerStyle: {
+        justifyContent: 'center'
+      },
+      items: [
+        {
+          key: 'fibmpsyy92r2zday',
+          prop: 'titleText1',
+          label: '卡片风格的选项卡',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '0 0 16px 0'
+            }
+          }
+        },
+        {
+          key: 'fgmklrcqwx5vqzmr',
+          prop: 'tab1',
+          label: '',
+          type: 'tabs',
+          children: [
+            {
+              key: 'fcnyklgwl68qo76f',
+              prop: 'senderInfo',
+              type: 'tabPane',
+              props: {
+                label: '寄件信息'
+              },
+              children: [
+                {
+                  key: 'fbs1rmmy8629o7vt',
+                  prop: 'fno4ts7elzjf7ita',
+                  label: '',
+                  type: 'row',
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      key: 'fcdcgw9sowjprh3x',
+                      prop: 'fd7ytymasw31p707',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fkxkeaizbzgbfmsc',
+                          label: '寄件人姓名',
+                          prop: 'senderName',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fmubw6fnj7g4kfgg',
+                      prop: 'f64c34oq0qmwgb5r',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fv41tn45llj8nbxn',
+                          label: '寄件人电话',
+                          prop: 'senderPhone',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fx6w9gvo54ivhxa5',
+                      prop: 'fm52k73gjl5uc6we',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      children: [
+                        {
+                          key: 'fjwd5gej1evu0m8m',
+                          label: '寄件地址',
+                          prop: 'senderAddress',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件地址'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f0kkofxrqsb5w2fw',
+              prop: 'receiverInfo',
+              type: 'tabPane',
+              props: {
+                label: '收件信息'
+              },
+              children: [
+                {
+                  key: 'f6b062nbp3ynnlyo',
+                  prop: 'f57262iw1oac2a77',
+                  label: '',
+                  type: 'row',
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      key: 'fix0iq1h01ernjdv',
+                      prop: 'fssdc1216v5zhhga',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fgqrz2sjsu61rtwq',
+                          label: '收件人姓名',
+                          prop: 'receiverName',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fy4jpy3jn13imk0g',
+                      prop: 'fugygwvfvekc7lu5',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'ff2iy6qmr4b9zq9t',
+                          label: '收件人电话',
+                          prop: 'receiverPhone',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fj5w7up9gmikyr14',
+                      prop: 'f4bc9n71gaap7kg0',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      children: [
+                        {
+                          key: 'fdhnusoztrq1a4li',
+                          prop: 'receiverAddress',
+                          label: '收件地址',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件地址'
+                          }
+                        },
+                        {
+                          key: 'fdsx9diwfzeo2u9p',
+                          prop: 'privacy',
+                          label: '隐私保护',
+                          type: 'checkbox',
+                          props: {
+                            options: [
+                              {
+                                label: '姓名脱敏',
+                                value: '1'
+                              },
+                              {
+                                label: '使用虚拟号码',
+                                value: '2'
+                              },
+                              {
+                                label: '隐藏地址',
+                                value: '3'
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fpk0y5p3ghy4iydi',
+          prop: 'titleText2',
+          label: '默认风格的选项卡',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '32px 0 16px 0'
+            }
+          }
+        },
+        {
+          key: 'fvdd6x15inmuq2x0',
+          prop: 'tab2',
+          label: '',
+          type: 'tabs',
+          props: {
+            type: 'default'
+          },
+          children: [
+            {
+              key: 'fy7inn0wj7ulf2fk',
+              prop: 'tab2_senderInfo',
+              type: 'tabPane',
+              props: {
+                label: '寄件信息'
+              },
+              children: [
+                {
+                  key: 'f5o08z4thuwvr5v7',
+                  prop: 'fh5buocjxrilg7re',
+                  label: '',
+                  type: 'row',
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      key: 'fuvhb55f4pv3yvhg',
+                      prop: 'fuuixzhf146vbmeo',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          label: '寄件人姓名',
+                          prop: 'senderName2',
+                          type: 'input',
+                          required: true,
+                          key: 'fgde9fpsix3e5f5u',
+                          itemProps: {
+                            style: {
+                              marginTop: '20px'
+                            }
+                          },
+                          props: {
+                            placeholder: '请输入寄件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'ff3ptathjmbe2xs6',
+                      prop: 'f0mot6jwdlgz60t6',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'f69i8zpjr6pmg6c0',
+                          label: '寄件人电话',
+                          prop: 'senderPhone2',
+                          type: 'input',
+                          required: true,
+                          itemProps: {
+                            style: {
+                              marginTop: '20px'
+                            }
+                          },
+                          props: {
+                            placeholder: '请输入寄件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fsv9hhlk5ebqvc56',
+                      prop: 'f8bvnaej2ft23g65',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      children: [
+                        {
+                          key: 'fubs5u3fpf4jh90n',
+                          label: '寄件地址',
+                          prop: 'senderAddress2',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件地址'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fgz0np8sexvbpmq7',
+              prop: 'tab2_receiverInfo',
+              type: 'tabPane',
+              props: {
+                label: '收件信息'
+              },
+              children: [
+                {
+                  key: 'f18yxduo76cgirhh',
+                  prop: 'f0jyy4jx3xgwlwpk',
+                  label: '',
+                  type: 'row',
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      key: 'fenc5jvxts5h64v5',
+                      prop: 'f1ju0dgdhhvl4l2b',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fhawf0gffmv633vt',
+                          prop: 'receiverName2',
+                          label: '收件人姓名',
+                          type: 'input',
+                          required: true,
+                          itemProps: {
+                            style: {
+                              marginTop: '20px'
+                            }
+                          },
+                          props: {
+                            placeholder: '请输入收件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fvysy40r76lak5bb',
+                      prop: 'fpfkh2ucy5ru7ycz',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fusim02hxcuddm8g',
+                          prop: 'receiverPhone2',
+                          label: '收件人电话',
+                          type: 'input',
+                          required: true,
+                          itemProps: {
+                            style: {
+                              marginTop: '20px'
+                            }
+                          },
+                          props: {
+                            placeholder: '请输入收件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      prop: 'famlbj0a85oxndz6',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      key: 'fshsssaynmabvn5z',
+                      children: [
+                        {
+                          key: 'flvo5q4bgf6vr0v7',
+                          prop: 'receiverAddress2',
+                          label: '收件地址',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件地址'
+                          }
+                        },
+                        {
+                          key: 'f9eswwsr562fjze6',
+                          prop: 'privacy2',
+                          label: '隐私保护',
+                          type: 'checkbox',
+                          props: {
+                            options: [
+                              {
+                                label: '姓名脱敏',
+                                value: '1'
+                              },
+                              {
+                                label: '使用虚拟号码',
+                                value: '2'
+                              },
+                              {
+                                label: '隐藏地址',
+                                value: '3'
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'f1py73zs4vxdpfkg',
+          prop: 'tab2',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                label: '切换到“收件信息”',
+                value: 'tab2_receiverInfo'
+              }
+            ],
+            style: {
+              display: 'flex',
+              alignItems: 'flex-start'
+            },
+            itemStyle: {
+              color: '#fff',
+              margin: '0 12px 0 0',
+              padding: '0 12px',
+              background: 'var(--el-color-primary)',
+              border: 'none'
+            }
+          },
+          vIf: "!form.tab2 || form.tab2 == 'tab2_senderInfo'",
+          itemProps: {
+            labelWidth: 0
+          }
+        },
+        {
+          key: 'f0qmevsnifd5un2s',
+          prop: 'tab2',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                label: '切换到“寄件信息”',
+                value: 'tab2_senderInfo'
+              }
+            ],
+            style: {
+              display: 'flex',
+              alignItems: 'flex-start'
+            },
+            itemStyle: {
+              color: '#fff',
+              margin: '0 12px 0 0',
+              padding: '0 12px',
+              background: 'var(--el-color-primary)',
+              border: 'none'
+            }
+          },
+          vIf: "form.tab2 == 'tab2_receiverInfo'",
+          itemProps: {
+            labelWidth: 0
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: '搜索表单',
+    cover: markRaw(CoverSearch),
+    config: {
+      labelWidth: 80,
+      grid: {
+        md: 8,
+        sm: 12,
+        xs: 24
+      },
+      footer: true,
+      footerProps: {
+        labelWidth: 16
+      },
+      autoFooterCol: true,
+      showSearchExpand: true,
+      submitText: '搜索',
+      items: [
+        {
+          label: '用户账号',
+          prop: 'username',
+          type: 'input',
+          key: 'fu39ruuab4dfamxa',
+          props: {
+            placeholder: '请输入'
+          }
+        },
+        {
+          label: '用户名',
+          prop: 'nickname',
+          type: 'input',
+          key: 'fz1dzyiymoq8fdaf',
+          props: {
+            placeholder: '请输入用户名'
+          }
+        },
+        {
+          label: '性别',
+          prop: 'sex',
+          type: 'dictSelect',
+          props: {
+            code: 'sex',
+            placeholder: '请选择性别'
+          },
+          vIf: 'searchExpand',
+          key: 'fkhgycwgm8fk7ov0'
+        },
+        {
+          label: '角色',
+          prop: 'roles',
+          type: 'multipleSelect',
+          props: {
+            options: [
+              {
+                label: '管理员',
+                value: 1
+              },
+              {
+                label: '普通用户',
+                value: 2
+              },
+              {
+                label: '游客',
+                value: 3
+              }
+            ],
+            placeholder: '请选择角色'
+          },
+          vIf: 'searchExpand',
+          key: 'fmz5rjc53cy38eqd'
+        },
+        {
+          label: '邮箱',
+          prop: 'email',
+          type: 'input',
+          vIf: 'searchExpand',
+          key: 'fc4a4teb9k8nqudr',
+          props: {
+            placeholder: '请输入邮箱'
+          }
+        },
+        {
+          label: '手机号',
+          prop: 'phone',
+          type: 'input',
+          vIf: 'searchExpand',
+          key: 'f2btybgpeees1z92',
+          props: {
+            placeholder: '请输入手机号'
+          }
+        },
+        {
+          label: '出生日期',
+          prop: 'birthday',
+          type: 'date',
+          vIf: 'searchExpand',
+          key: 'fb3ppq6nd9yz5bb1',
+          props: {
+            placeholder: '请选择出生日期'
+          }
+        }
+      ]
+    }
+  },
+  {
+    name: '更多高级示例',
+    cover: markRaw(CoverDiv),
+    config: {
+      labelWidth: 94,
+      footer: true,
+      footerProps: {
+        labelWidth: 0
+      },
+      footerStyle: {
+        justifyContent: 'center'
+      },
+      items: [
+        {
+          key: 'f06ezklpxbyyaj2b',
+          label: '自定义搜索表单布局',
+          prop: 'fzn3b56g88kfnnhn',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '6px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'fghotn8wcnau3wtz',
+          prop: 'fmikzii9bgqoqpjr',
+          label: '',
+          type: 'row',
+          required: false,
+          props: {
+            gutter: 0
+          },
+          children: [
+            {
+              prop: 'fzi1bfqvwziegu44',
+              type: 'col',
+              key: 'fwottkv7rvpnj6mi',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'f6rc8le3kwfcdln0',
+                  prop: 'f83x34ospvbvm16g',
+                  label: '用户账号',
+                  type: 'input',
+                  required: false,
+                  props: {
+                    placeholder: '请输入用户账号'
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ]
+            },
+            {
+              prop: 'fkln4gksqzq8nz0y',
+              type: 'col',
+              key: 'f0x5zax4bq5q3rvz',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fek80ak0dxyas6q1',
+                  prop: 'fw828cyeb0yqq4jv',
+                  label: '用户名',
+                  type: 'input',
+                  required: false,
+                  props: {
+                    placeholder: '请输入用户名'
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ]
+            },
+            {
+              prop: 'foh3l6i36qemv2jv',
+              type: 'col',
+              key: 'fbybr9m9iy9vmy4b',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fpwapl2syfv2vlsv',
+                  prop: 'fc1bqbd4pyxjjbw9',
+                  label: '性别',
+                  type: 'select',
+                  required: false,
+                  props: {
+                    placeholder: '请选择性别',
+                    options: [
+                      {
+                        label: '男',
+                        value: '男'
+                      },
+                      {
+                        label: '女',
+                        value: '女'
+                      }
+                    ]
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'fdx2n4qnttz4is67',
+              type: 'col',
+              key: 'f3sa30b1uniie45o',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'f29vj6w62ozh9hy4',
+                  prop: 'fkmmkt4s6n8p2xeq',
+                  label: '角色',
+                  type: 'select',
+                  required: false,
+                  props: {
+                    placeholder: '请选择角色',
+                    options: [
+                      {
+                        label: '男',
+                        value: '男'
+                      },
+                      {
+                        label: '女',
+                        value: '女'
+                      }
+                    ]
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'fyghhip4y3ic6tuc',
+              type: 'col',
+              key: 'fi4plmts2ikwfo8a',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'f031c4zk2bxu0kpx',
+                  prop: 'f9ad1qgpphh9br3b',
+                  label: '邮箱',
+                  type: 'input',
+                  required: false,
+                  props: {
+                    placeholder: '请输入邮箱'
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'fxbq9y220fv6pwyi',
+              type: 'col',
+              key: 'fsx2dgwfov2mvvwe',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fr6almf4v71nipsb',
+                  prop: 'fy778appcwq1u7aq',
+                  label: '手机号',
+                  type: 'input',
+                  required: false,
+                  props: {
+                    placeholder: '请输入手机号'
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'foxr3jrpc2vg2bhs',
+              type: 'col',
+              key: 'ffrzv01lquyxfc8r',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fd2bf12k608dodsg',
+                  prop: 'frg673r5objxo8kb',
+                  label: '出生日期',
+                  type: 'date',
+                  required: false,
+                  props: {
+                    placeholder: '请选择出生日期'
+                  },
+                  itemProps: {
+                    labelWidth: 80
+                  }
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'fj50a7p0drngaidf',
+              type: 'col',
+              key: 'fv48fuc0d63gnm0u',
+              props: {
+                span: null,
+                md: {
+                  span: 16
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fa3xh2rf06ehh286',
+                  prop: 'fn30zzt112btg45t',
+                  label: '',
+                  type: 'div',
+                  required: false,
+                  props: {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: '16px',
+                      justifyContent: 'flex-end'
+                    }
+                  },
+                  containerDraggable: false,
+                  children: [
+                    {
+                      key: 'f7gxm86agd8335yz',
+                      prop: 'fgbbk345g2xe08uz',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {},
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'fd3fvqeuo1sohezv',
+                          prop: 'f1dhule4vpeqt6yh',
+                          label: '搜索',
+                          type: 'button',
+                          required: false,
+                          props: {}
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fxfstlqk9ewhxnwu',
+                      prop: 'f8kfrjrii402ml9o',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {
+                        style: {
+                          paddingLeft: '12px'
+                        }
+                      },
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'fyyqilvv88iih91i',
+                          prop: 'ftvpox3mv42ey5ta',
+                          label: '重置',
+                          type: 'button',
+                          required: false,
+                          props: {
+                            size: 'default',
+                            type: 'default',
+                            plain: false
+                          },
+                          itemProps: {
+                            labelWidth: 94,
+                            labelPosition: 'right'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fds2bsbvz0dt6h8b',
+                      prop: 'fh9m4l23jlmxaty8',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {},
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'foay2krkkbqs4j95',
+                          prop: 'fsubrbvz39c3eiqv',
+                          label: ' 收起',
+                          type: 'label',
+                          required: false,
+                          props: {
+                            icon: 'IconProArrowUp',
+                            type: 'primary',
+                            style: {
+                              cursor: 'pointer',
+                              marginLeft: '12px'
+                            },
+                            onClick:
+                              '/*__PRO_FORM__*/(enent) => {\n    form.fsubrbvz39c3eiqv = !form.fsubrbvz39c3eiqv;\n}'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              vIf: 'form.fsubrbvz39c3eiqv === true'
+            },
+            {
+              prop: 'f3ucfmrp886v4wpq',
+              type: 'col',
+              key: 'fw1q9b6259aw7xrh',
+              props: {
+                span: null,
+                md: {
+                  span: 8
+                },
+                sm: {
+                  span: 12
+                },
+                xs: {
+                  span: 24
+                }
+              },
+              children: [
+                {
+                  key: 'fbdhme6gxlnhe0il',
+                  prop: 'fkhyfi8c4pyowstd',
+                  label: '',
+                  type: 'div',
+                  required: false,
+                  props: {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: '16px'
+                    }
+                  },
+                  containerDraggable: false,
+                  children: [
+                    {
+                      key: 'fv1krz16v8y5udx4',
+                      prop: 'fbl8xs4rw5l0qwe2',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {},
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'fw57sa4vienggjoy',
+                          prop: 'fa41x4uj2m7vvivk',
+                          label: '搜索',
+                          type: 'button',
+                          required: false,
+                          props: {}
+                        }
+                      ]
+                    },
+                    {
+                      key: 'f68bwb7jynefmont',
+                      prop: 'fwi63umnd8f8zgkj',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {
+                        style: {
+                          paddingLeft: '12px'
+                        }
+                      },
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'f2j4spmxgep4m3q4',
+                          prop: 'fma4czk8f5kcnrrk',
+                          label: '重置',
+                          type: 'button',
+                          required: false,
+                          props: {
+                            size: 'default',
+                            type: 'default',
+                            plain: false
+                          },
+                          itemProps: {
+                            labelWidth: 94,
+                            labelPosition: 'right'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fejlx7v18uh7ny2l',
+                      prop: 'f8rcllwcyul5xnzl',
+                      label: '',
+                      type: 'div',
+                      required: false,
+                      props: {},
+                      containerDraggable: true,
+                      children: [
+                        {
+                          key: 'fozelvgdqq6indne',
+                          prop: 'f22kpsz9kxh94kn0',
+                          label: ' 展开',
+                          type: 'label',
+                          required: false,
+                          props: {
+                            icon: 'IconProArrowDown',
+                            type: 'primary',
+                            style: {
+                              cursor: 'pointer',
+                              marginLeft: '12px'
+                            },
+                            onClick:
+                              '/*__PRO_FORM__*/(enent) => {\n    form.fsubrbvz39c3eiqv = !form.fsubrbvz39c3eiqv;\n}'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              vIf: '!form.fsubrbvz39c3eiqv'
+            }
+          ]
+        },
+        {
+          key: 'f5v32qim01tixh3o',
+          label: '使用折叠面板组件',
+          prop: 'filuy7tx6vlbdoe1',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'f7ma9aizwf8is86z',
+          prop: 'collapse1',
+          label: '',
+          type: 'collapse',
+          props: {
+            accordion: true,
+            style: {
+              marginBottom: '20px'
+            }
+          },
+          children: [
+            {
+              key: 'fh4sz7bjbswgx971',
+              prop: 'senderInfo',
+              type: 'collapseItem',
+              props: {
+                title: '寄件信息'
+              },
+              children: [
+                {
+                  key: 'fnzl2593yt8dgzsp',
+                  prop: 'ftpmou8tncyfp5v6',
+                  label: '',
+                  type: 'row',
+                  required: false,
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      prop: 'ft84hgakobr12jwd',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      key: 'f3tn225gtbfv9dc4',
+                      children: [
+                        {
+                          key: 'ftqxca8gl5syz93z',
+                          prop: 'senderName',
+                          label: '寄件人姓名',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'f3w35epnzdokzu0d',
+                      prop: 'foxoymo8un5iwi88',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fly3m5pf3zlo0ila',
+                          prop: 'senderPhone',
+                          label: '寄件人电话',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'ftbrfyjf14ced62y',
+                      prop: 'fdhdl830pdfegmzj',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      children: [
+                        {
+                          key: 'f2mqqdm5fqgoy7ci',
+                          prop: 'senderAddress',
+                          label: '寄件地址',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入寄件地址'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f5zsvt1h635r837f',
+              prop: 'receiverInfo',
+              type: 'collapseItem',
+              props: {
+                title: '收件信息'
+              },
+              children: [
+                {
+                  key: 'fe5zh8awlnvurd17',
+                  prop: 'f40lp463cchlv6gk',
+                  label: '',
+                  type: 'row',
+                  required: false,
+                  props: {
+                    gutter: 20
+                  },
+                  children: [
+                    {
+                      key: 'fokfuqowmzmi1m9c',
+                      prop: 'fmh264yd5aahiv46',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fgdqe47hd46oykeq',
+                          prop: 'receiverName',
+                          label: '收件人姓名',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件人姓名'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fl49e57okcg5any3',
+                      prop: 'fdgkscnuxkc5yj74',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 12,
+                        xs: {
+                          span: 24
+                        }
+                      },
+                      children: [
+                        {
+                          key: 'fck3glap332gow16',
+                          prop: 'receiverPhone',
+                          label: '收件人电话',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件人电话'
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      key: 'fvvl1x39yb23nn1n',
+                      prop: 'flfepq5dd9ik4zii',
+                      label: '',
+                      type: 'col',
+                      props: {
+                        span: 24
+                      },
+                      children: [
+                        {
+                          key: 'fjdfhqsqwnaacmh3',
+                          prop: 'receiverAddress',
+                          label: '收件地址',
+                          type: 'textarea',
+                          required: true,
+                          props: {
+                            placeholder: '请输入收件地址'
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fjcbu2832y4ntsr3',
+          prop: 'collapse1',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                label: '展开“收件信息”',
+                value: 'receiverInfo'
+              }
+            ],
+            style: {
+              display: 'flex',
+              alignItems: 'flex-start'
+            },
+            itemStyle: {
+              color: '#fff',
+              margin: '0 12px 0 0',
+              padding: '0 12px',
+              background: 'var(--el-color-primary)',
+              border: 'none'
+            }
+          },
+          vIf: "!form.collapse1 || form.collapse1 == 'senderInfo'",
+          itemProps: {
+            labelWidth: 0
+          }
+        },
+        {
+          key: 'fyl51um35bi2tg6s',
+          prop: 'collapse1',
+          label: '',
+          type: 'checkCard',
+          props: {
+            items: [
+              {
+                label: '展开“寄件信息”',
+                value: 'senderInfo'
+              }
+            ],
+            style: {
+              display: 'flex',
+              alignItems: 'flex-start'
+            },
+            itemStyle: {
+              color: '#fff',
+              margin: '0 12px 0 0',
+              padding: '0 12px',
+              background: 'var(--el-color-primary)',
+              border: 'none'
+            }
+          },
+          vIf: "form.collapse1 == 'receiverInfo'",
+          itemProps: {
+            labelWidth: 0
+          }
+        },
+        {
+          key: 'f8hba9ohldpupdjd',
+          label: '使用轮播图组件',
+          prop: 'f9d0a57nvyuuhyl7',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'f51ic86s27rsfiel',
+          prop: 'fazoiq7tevtgxtn3',
+          label: '',
+          type: 'carousel',
+          props: {
+            type: 'card'
+          },
+          children: [
+            {
+              key: 'ffcjob63ymssp8g0',
+              prop: 'f8qygq27s55tuvao',
+              label: '',
+              type: 'carouselItem',
+              props: {
+                style: {
+                  background:
+                    'top left/100% url(https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg)'
+                }
+              },
+              children: [
+                {
+                  key: 'fpplsd3pg6w0xd9u',
+                  prop: 'fjd1zcr9quvuxfne',
+                  label: '',
+                  type: 'div',
+                  props: {
+                    style: {
+                      height: '100%'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fqr15rkuw4vif4bm',
+                      prop: 'fcnpq5b1zjxh83kd',
+                      label: '',
+                      type: 'div',
+                      props: {
+                        is: 'img',
+                        src: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
+                        style: {
+                          width: 'auto',
+                          height: '100%',
+                          objectFit: 'contain',
+                          display: 'block',
+                          margin: '0 auto',
+                          maskImage:
+                            'linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 96%)'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'f80fmii1xlh52e11',
+              prop: 'fqc3jpweagfxxzue',
+              label: '',
+              type: 'carouselItem',
+              props: {
+                style: {
+                  background:
+                    'bottom left/76% url(https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg)'
+                }
+              },
+              children: [
+                {
+                  key: 'fw80nod7bci64rra',
+                  prop: 'fglszgd2wd322bcb',
+                  label: '',
+                  type: 'div',
+                  props: {
+                    style: {
+                      backdropFilter: 'blur(2px)',
+                      height: '100%'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fjsa0vdg801364ki',
+                      prop: 'frt34s0efcpyn1xd',
+                      label: '',
+                      type: 'div',
+                      props: {
+                        is: 'img',
+                        src: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
+                        style: {
+                          width: 'auto',
+                          height: '100%',
+                          objectFit: 'contain',
+                          display: 'block',
+                          margin: '0 auto',
+                          maskImage:
+                            'linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 96%)'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              key: 'fnhvuq5udvxf0xdj',
+              prop: 'ffz14kse8h6zyfuz',
+              label: '',
+              type: 'carouselItem',
+              props: {
+                style: {
+                  background:
+                    'left bottom/100% url(https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg)'
+                }
+              },
+              children: [
+                {
+                  key: 'frvgn26ug8kj5tol',
+                  prop: 'fuyg7z9mua4746gm',
+                  label: '',
+                  type: 'div',
+                  props: {
+                    style: {
+                      backdropFilter: 'blur(2px)',
+                      height: '100%'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'f50bj207zbs60cdw',
+                      prop: 'furrw3les1jp48q8',
+                      label: '',
+                      type: 'div',
+                      props: {
+                        is: 'img',
+                        src: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
+                        style: {
+                          width: 'auto',
+                          height: '100%',
+                          objectFit: 'contain',
+                          display: 'block',
+                          margin: '0 auto',
+                          maskImage:
+                            'linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 96%)'
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'fbtm4gewx2xlzecm',
+          prop: 'f0nhvyfv5qolw0mz',
+          label: '使用布局组件',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'f9z3edvdc84qp2nm',
+          prop: 'framHeader1',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              background: '#3C3C3C',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              height: '24px',
+              borderTopLeftRadius: '6px',
+              borderTopRightRadius: '6px',
+              padding: '0 12px'
+            }
+          },
+          children: [
+            {
+              key: 'fu6qg1viq9sbsup2',
+              prop: 'fram1Icon1',
+              label: '',
+              type: 'div',
+              props: {
+                style: {
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '50%',
+                  background: '#ff4a4a'
+                }
+              }
+            },
+            {
+              key: 'fg3fbnssu501g2cr',
+              prop: 'fram1Icon2',
+              label: '',
+              type: 'div',
+              props: {
+                style: {
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '50%',
+                  background: '#ffb83d'
+                }
+              }
+            },
+            {
+              key: 'fb4d5oxnb1upilrk',
+              prop: 'fram1Icon3',
+              label: '',
+              type: 'div',
+              props: {
+                style: {
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '50%',
+                  background: '#00c543'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'fc5k5bq0gjdt8cf1',
+          prop: 'framBody1',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              border: '7px solid #3C3C3C',
+              borderBottomLeftRadius: '6px',
+              borderBottomRightRadius: '6px',
+              borderTop: 'none',
+              overflow: 'hidden',
+              position: 'relative',
+              zIndex: 99
+            }
+          },
+          children: [
+            {
+              key: 'f5fa9bw9bgvd7ecz',
+              prop: 'layout1',
+              label: '',
+              type: 'adminLayout',
+              props: {
+                height: '520px',
+                fixedBody: true,
+                logoSrc: 'https://cdn.eleadmin.com/20200610/logo.svg',
+                logoTitle: 'ProForm',
+                logoInHeader: true,
+                headerCustomStyle: {
+                  gap: '22px'
+                },
+                menuScrollToActive: false,
+                layout: 'mix',
+                sidebarLayout: 'box',
+                sideboxActive: '/user',
+                sideboxMenus: [
+                  {
+                    index: '/user',
+                    title: '用户管理',
+                    icon: 'IconProUserOutlined'
+                  },
+                  {
+                    index: '/order',
+                    title: '订单管理',
+                    icon: 'IconProUserOutlined'
+                  }
+                ],
+                headerMenus: [
+                  {
+                    index: '/personnel',
+                    title: '人事系统',
+                    icon: 'IconProUserOutlined'
+                  },
+                  {
+                    index: '/finance',
+                    title: '财务系统',
+                    icon: 'IconProUserOutlined'
+                  }
+                ],
+                headerActive: '/personnel',
+                compact: false,
+                collapse: false,
+                tabBar: false,
+                breadcrumb: false,
+                backTop: false,
+                sidebarStyle: 'light'
+              },
+              children: [
+                {
+                  key: 'fb8hkn6iprg6tms0',
+                  prop: 'userInfoWrap',
+                  label: '',
+                  type: 'div',
+                  props: {
+                    style: {
+                      padding: '16px'
+                    }
+                  },
+                  children: [
+                    {
+                      key: 'fyyznwe3exe3zyk4',
+                      prop: 'userInfoCard',
+                      type: 'card',
+                      props: {
+                        header: '新增用户',
+                        bordered: false
+                      },
+                      children: [
+                        {
+                          key: 'fo2w3f38h63dace3',
+                          label: '用户名',
+                          prop: 'username',
+                          type: 'input',
+                          required: true,
+                          props: {
+                            placeholder: '请输入用户名'
+                          }
+                        },
+                        {
+                          key: 'fzogtgydtp9lpqci',
+                          label: '性别',
+                          prop: 'sex',
+                          type: 'radio',
+                          props: {
+                            options: [
+                              {
+                                label: '男',
+                                value: '1'
+                              },
+                              {
+                                label: '女',
+                                value: '2'
+                              }
+                            ]
+                          },
+                          required: true,
+                          requiredMessage: '请选择性别'
+                        },
+                        {
+                          key: 'fo1tjsri6dlpf9sv',
+                          prop: 'role',
+                          label: '角色',
+                          type: 'multipleCheckCard',
+                          props: {
+                            items: [
+                              {
+                                label: '管理员',
+                                value: '1'
+                              },
+                              {
+                                label: '普通用户',
+                                value: '2'
+                              }
+                            ],
+                            style: {
+                              display: 'flex',
+                              alignItems: 'flex-start'
+                            },
+                            itemStyle: {
+                              padding: '8px 22px',
+                              margin: '0 12px 0 0',
+                              lineHeight: 'normal'
+                            }
+                          },
+                          required: true,
+                          requiredMessage: '请选择角色'
+                        }
+                      ]
+                    }
+                  ],
+                  containerDraggable: true
+                }
+              ]
+            }
+          ],
+          containerDraggable: true
+        },
+        {
+          key: 'fww4qt5kbkeb87cj',
+          prop: 'fxuszraejibtmexg',
+          label: '使用图标',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'fs3to8l8mn8m6ozn',
+          prop: 'textPrimary1',
+          label: ' 主色文本',
+          type: 'label',
+          props: {
+            type: 'primary',
+            icon: 'IconProUserOutlined'
+          }
+        },
+        {
+          key: 'fbgfph9avdj67lp9',
+          prop: 'textSuccess1',
+          label: ' 成功文本',
+          type: 'label',
+          props: {
+            type: 'success',
+            icon: 'IconProCheckCircleOutlined',
+            style: {
+              marginTop: '12px'
+            }
+          }
+        },
+        {
+          key: 'fe1f3zgo79xknj4e',
+          prop: 'textDefault1',
+          label: '后置图标',
+          type: 'label',
+          props: {
+            style: {
+              marginTop: '12px'
+            }
+          },
+          children: [
+            {
+              key: 'fh4xbjrobvsay7qz',
+              prop: 'fpkm2d6mmrpsib2h',
+              type: 'icon',
+              props: {
+                name: 'IconProCheckCircleOutlined',
+                style: {
+                  marginLeft: '4px',
+                  verticalAlign: '-2px'
+                }
+              }
+            }
+          ]
+        },
+        {
+          key: 'f24p2978ldecrqxp',
+          prop: 'btnIconWrap',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              margin: '22px 0 0 0'
+            }
+          },
+          children: [
+            {
+              key: 'fgatxyehnnoro2ak',
+              prop: 'btnIcon1',
+              label: '前置图标',
+              type: 'button',
+              props: {
+                icon: 'IconProUserOutlined',
+                class: 'ele-btn-icon'
+              }
+            },
+            {
+              key: 'fffawohn4fh1vmpk',
+              prop: 'btnIcon2',
+              label: '后置图标',
+              type: 'button',
+              props: {
+                class: 'ele-btn-icon'
+              },
+              children: [
+                {
+                  key: 'fuu07ztffpmjhf51',
+                  prop: 'f6cew8ltcgdvpge2',
+                  type: 'icon',
+                  required: false,
+                  props: {
+                    name: 'IconProCheckCircleOutlined',
+                    style: {
+                      marginLeft: '4px'
+                    }
+                  }
+                }
+              ]
+            }
+          ],
+          containerDraggable: true
+        },
+        {
+          key: 'fu0zvawyxz2eq1u4',
+          prop: 'ffmyjz9r7e6hagp7',
+          label: '按钮事件处理',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'fts2o7sksxmgouxs',
+          prop: 'demoSteps',
+          label: '',
+          type: 'steps',
+          props: {
+            items: [
+              {
+                title: '第一步',
+                description: '填写转账信息'
+              },
+              {
+                title: '第二步',
+                description: '确认转账信息'
+              },
+              {
+                title: '第三步',
+                description: '转账成功'
+              }
+            ],
+            finishStatus: 'success'
+          }
+        },
+        {
+          key: 'f3y98sj9kyw2bock',
+          prop: 'btnStepsWrap',
+          label: '',
+          type: 'div',
+          props: {
+            style: {
+              margin: '16px 0 0 0'
+            }
+          },
+          children: [
+            {
+              key: 'fujcd5gu4dy97yog',
+              prop: 'btnPrevSteps',
+              label: '上一步',
+              type: 'button',
+              props: {
+                type: 'default',
+                onClick:
+                  '/*__PRO_FORM__*/() => {\r\n    if (form.demoSteps > 0) {\r\n        form.demoSteps--;\r\n    }\r\n}'
+              }
+            },
+            {
+              key: 'faw5yvvtayu7gzx6',
+              prop: 'btnNextSteps',
+              label: '下一步',
+              type: 'button',
+              props: {
+                onClick:
+                  '/*__PRO_FORM__*/() => {\r\n    if (!form.demoSteps) {\r\n        form.demoSteps = 1;\r\n    } else if (form.demoSteps < 3) {\r\n        form.demoSteps++;\r\n    }\r\n}'
+              }
+            }
+          ],
+          containerDraggable: true
+        },
+        {
+          key: 'fmwzd2hgas3mmx94',
+          prop: 'ftzavv3otsce65ob',
+          label: '使用远程数据',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'fg1wqocio0k8z6mg',
+          prop: 'f7hct9l9edwsfgco',
+          label: '',
+          type: 'div',
+          required: false,
+          props: {
+            style: {
+              display: 'flex'
+            }
+          },
+          children: [
+            {
+              key: 'fzo9zeo7w0jc3yt2',
+              prop: 'f2z8obfekhla82xp',
+              label: '',
+              type: 'div',
+              required: false,
+              props: {
+                style: {
+                  width: '320px',
+                  maxWidth: '100%'
+                }
+              },
+              children: [
+                {
+                  key: 'fg6uszfd7xtkurqu',
+                  prop: 'ft5a9dzi73asjpmg',
+                  label: '用户名',
+                  type: 'input',
+                  required: false,
+                  props: {
+                    placeholder: ''
+                  },
+                  itemProps: {
+                    labelWidth: 66,
+                    style: {
+                      marginBottom: '0'
+                    }
+                  }
+                }
+              ],
+              containerDraggable: true
+            },
+            {
+              key: 'fawbevmhzacfukqo',
+              prop: 'foh3c22ecuh1cawh',
+              label: '',
+              type: 'div',
+              required: false,
+              props: {
+                style: {
+                  flex: '1',
+                  paddingLeft: '16px'
+                }
+              },
+              children: [
+                {
+                  key: 'f712nyz43xwl6q5p',
+                  prop: 'fy7ezfq0dnwx82cl',
+                  label: '搜索',
+                  type: 'button',
+                  required: false,
+                  props: {
+                    onClick:
+                      "/*__PRO_FORM__*/(enent) => {\n    getProFormRefs()['fawnh9xd81lytli3Ref']?.reload?.({ page: 1 });\n}"
+                  }
+                }
+              ],
+              containerDraggable: true
+            }
+          ],
+          containerDraggable: false
+        },
+        {
+          key: 'ffsu1a81hk95ynfq',
+          prop: 'fawnh9xd81lytli3',
+          label: '',
+          type: 'proTable',
+          required: false,
+          props: {
+            showOverflowTooltip: true,
+            datasource:
+              "/*__PRO_FORM__*/async ({ pages, orders }) => {\n    const res = await httpRequest.get('/system/user/page', {\n        params: Object.assign({}, pages, orders, {\n            nickname: form.ft5a9dzi73asjpmg\n        })\n    });\n    return res.data.data;\n}",
+            columns: [
+              {
+                type: 'index',
+                columnKey: 'index',
+                width: 48,
+                align: 'center'
+              },
+              {
+                prop: 'username',
+                label: '账号',
+                align: 'center',
+                sortable: 'custom'
+              },
+              {
+                prop: 'nickname',
+                label: '用户名',
+                align: 'center',
+                sortable: 'custom'
+              },
+              {
+                prop: 'sexName',
+                label: '性别',
+                align: 'center',
+                sortable: 'custom'
+              }
+            ],
+            highlightCurrentRow: true,
+            style: {},
+            border: false
+          },
+          itemProps: {
+            labelWidth: 94,
+            labelPosition: 'right'
+          }
+        },
+        {
+          key: 'fhet4zrilks3vr37',
+          prop: 'fe4cawuy43y5pxme',
+          label: '远程数据联动',
+          type: 'label',
+          props: {
+            size: 'md',
+            strong: true,
+            style: {
+              borderLeft: '4px solid var(--el-color-primary)',
+              lineHeight: 1,
+              paddingLeft: '10px',
+              margin: '42px 0 22px 0'
+            }
+          }
+        },
+        {
+          key: 'fn31wgo0n9nnqpyb',
+          prop: 'fxy80sbtibftdj2c',
+          label: '机构',
+          type: 'radio',
+          required: false,
+          props: {
+            options:
+              "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/organization');\n    return res.data.data.map(d => ({ label: d.organizationName, value: d.organizationId }));\n}\n",
+            onChange:
+              "/*__PRO_FORM__*/(value) => {\n    form.f4g1toqz8p51675j = void 0;\n    getProFormRefs()['f4g1toqz8p51675jRef']?.reloadOptions?.();\n}"
+          },
+          itemProps: {
+            labelWidth: 56
+          }
+        },
+        {
+          key: 'fzxvjg87g103rgec',
+          prop: 'f1s1irhe7w8re7in',
+          label: '选择上面机构后会筛选下面用户数据',
+          type: 'label',
+          required: false,
+          props: {}
+        },
+        {
+          key: 'f0dkysx2wn7rocmu',
+          prop: 'f4g1toqz8p51675j',
+          label: '用户',
+          type: 'checkbox',
+          required: false,
+          props: {
+            options:
+              "/*__PRO_FORM__*/async () => {\n    const res = await httpRequest.get('/system/user', {\n        params: { organizationId: form.fxy80sbtibftdj2c }\n    });\n    return res.data.data.map(d => ({\n        label: `${d.nickname}(${d.organizationName})`,\n        value: d.userId\n    }));\n}"
+          },
+          itemProps: {
+            labelWidth: 56
+          }
+        }
+      ]
+    }
+  }
+];
diff --git a/z_ele/src/components/ProFormBuilder/index.vue b/z_ele/src/components/ProFormBuilder/index.vue
new file mode 100644
index 0000000..3a8830e
--- /dev/null
+++ b/z_ele/src/components/ProFormBuilder/index.vue
@@ -0,0 +1,78 @@
+<!-- 表单构建器 -->
+<template>
+  <EleProFormBuilder
+    v-bind="$props"
+    :componentData="componentData || defaultComponentData"
+    :templateData="templateData || defaultTemplateData"
+    :configFormItems="configFormItems || defaultConfigFormItems"
+    :configFormPresetProps="configFormPresetProps || formPresetProps"
+    :proFormComponent="proFormComponent || ProForm"
+    :codeEditerComponent="codeEditerComponent || CodeEditer"
+    :jsonEditerComponent="jsonEditerComponent || JsonEditer"
+    :htmlEditerComponent="htmlEditerComponent || HtmlEditer"
+    :codeViewerComponent="codeViewerComponent || CodeViewer"
+    :headerTools="headerTools ?? defaultHeaderRightTools"
+    :proFormInitialProps="{ footer: true }"
+    @update:modelValue="handleUpdateModelValue"
+    @previewFormSubmit="handlePreviewFormSubmit"
+  >
+    <template
+      v-if="!$slots.proFormBuilderIconInput"
+      #proFormBuilderIconInput="{ item, modelValue, updateValue }"
+    >
+      <IconEditer
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleProFormBuilder>
+</template>
+
+<script lang="ts" setup>
+  import type { EleProFormProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type { HeaderRightToolName } from 'ele-admin-plus/es/ele-pro-form-builder/types';
+  import { proFormBuilderProps } from 'ele-admin-plus/es/ele-pro-form-builder/props';
+  import {
+    defaultConfigFormItems,
+    defaultConfigFormPresetProps as formPresetProps
+  } from 'ele-admin-plus/es/ele-pro-form-builder/util';
+  import ProForm from '@/components/ProForm/index.vue';
+  import { defaultComponentData } from './components/component-data';
+  import { defaultTemplateData } from './components/template-data';
+  import CodeEditer from './components/code-editer.vue';
+  import JsonEditer from './components/json-editer.vue';
+  import HtmlEditer from './components/html-editer.vue';
+  import CodeViewer from './components/code-viewer.vue';
+  import IconEditer from './components/icon-editer.vue';
+
+  defineOptions({ name: 'ProFormBuilder' });
+
+  defineProps(proFormBuilderProps);
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', config: EleProFormProps): void;
+  }>();
+
+  /** 顶栏右侧按钮布局 */
+  const defaultHeaderRightTools: HeaderRightToolName[] = [
+    'import',
+    'export',
+    'clear',
+    'preview',
+    'code'
+  ];
+
+  /** 更新绑定值 */
+  const handleUpdateModelValue = (config: EleProFormProps) => {
+    emit('update:modelValue', config);
+  };
+
+  /** 预览表单提交事件 */
+  const handlePreviewFormSubmit = (data: Record<string, any>) => {
+    console.log(data);
+  };
+</script>
diff --git a/z_ele/src/components/RedirectLayout/index.vue b/z_ele/src/components/RedirectLayout/index.vue
new file mode 100644
index 0000000..9c4b32d
--- /dev/null
+++ b/z_ele/src/components/RedirectLayout/index.vue
@@ -0,0 +1,28 @@
+<!-- 路由刷新页面 -->
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter, useRoute } from 'vue-router';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+
+  defineOptions({ name: 'RedirectLayout' });
+
+  const { replace } = useRouter();
+  const { params, query } = useRoute();
+  const themeStore = useThemeStore();
+  const { tabs } = storeToRefs(themeStore);
+
+  const from = Array.isArray(params.path) ? params.path.join('/') : params.path;
+
+  setTimeout(() => {
+    tabs.value.forEach((t) => {
+      if (t.refresh) {
+        themeStore.tabSetItem({ key: t.key, refresh: false });
+      }
+    });
+    replace({ path: '/' + from, query });
+  }, 100);
+</script>
diff --git a/z_ele/src/components/RegionsSelect/index.vue b/z_ele/src/components/RegionsSelect/index.vue
new file mode 100644
index 0000000..72dd871
--- /dev/null
+++ b/z_ele/src/components/RegionsSelect/index.vue
@@ -0,0 +1,180 @@
+<!-- 省市区级联选择 -->
+<template>
+  <template v-if="component === 'text'">
+    <span v-if="typeof valueLabels === 'string'">{{ valueLabels }}</span>
+    <el-space v-else :wrap="true">
+      <el-tag
+        v-for="label in valueLabels"
+        :key="label"
+        :disable-transitions="true"
+        size="small"
+        type="info"
+      >
+        {{ label }}
+      </el-tag>
+    </el-space>
+  </template>
+  <el-cascader
+    v-else
+    ref="cascaderRef"
+    :size="size"
+    :disabled="disabled"
+    :clearable="clearable"
+    v-model="model"
+    :options="cascaderData"
+    :filterable="filterable"
+    :placeholder="placeholder"
+    :props="regionCascaderProps"
+    popper-class="ele-popper-higher"
+    :collapse-tags="collapseTags"
+    :max-collapse-tags="maxCollapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+    :showAllLevels="showAllLevels"
+    :separator="separator"
+    :teleported="teleported"
+    class="ele-fluid"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, reactive, watch } from 'vue';
+  import type {
+    ElCascaderProps,
+    ElCascaderInstance
+  } from 'ele-admin-plus/es/ele-app/el';
+  import type { CascaderProps } from 'element-plus';
+  import type { RegionsData } from './util';
+  import { useRegionsData, filterData, getValueLabel } from './util';
+
+  defineOptions({ name: 'RegionsSelect' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 自定义省市区数据 */
+      options?: RegionsData[];
+      /** 选中值对应的字段名 */
+      valueField?: 'value' | 'label';
+      /** 类型, 省市选择或省选择 */
+      type?: 'provinceCity' | 'province';
+      /** 是否多选 */
+      multiple?: boolean;
+      /** 组件类型 */
+      component?: 'text' | 'cascader';
+      /** 提示文本 */
+      placeholder?: string;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 是否可清除 */
+      clearable?: boolean;
+      /** 是否可搜索 */
+      filterable?: boolean;
+      /** 级联面板属性 */
+      cascaderProps?: ElCascaderProps;
+      /** 多选是否折叠标签 */
+      collapseTags?: boolean;
+      /** 多选最大显示标签数量 */
+      maxCollapseTags?: number;
+      /** 多选标签折叠时是否显示提示 */
+      collapseTagsTooltip?: boolean;
+      /** 显示所有选中路径 */
+      showAllLevels?: boolean;
+      /** 路径分隔符 */
+      separator?: string;
+      /** 下拉框是否插入body */
+      teleported?: boolean;
+      /** 尺寸 */
+      size?: 'small' | 'default' | 'large';
+    }>(),
+    {
+      clearable: true,
+      filterable: true,
+      collapseTags: true,
+      maxCollapseTags: 5,
+      showAllLevels: true,
+      teleported: true
+    }
+  );
+
+  /** 选中值 */
+  const model = defineModel<string[] | string[][]>({ type: Array });
+
+  /** 省市区数据 */
+  const regionsData = useRegionsData();
+
+  /** 级联选择器实例 */
+  const cascaderRef = ref<ElCascaderInstance>(null);
+
+  /** 级联选择器级联面板属性 */
+  const regionCascaderProps = reactive<CascaderProps>({
+    ...(props.cascaderProps || {}),
+    multiple: props.multiple || !!props.cascaderProps?.multiple
+  });
+
+  /** 级联选择器数据 */
+  const cascaderData = computed<any>(() => {
+    const data = props.options ?? regionsData.value ?? [];
+    return filterData(data, props.type, props.valueField);
+  });
+
+  /** 选中值对应的文本 */
+  const valueLabels = computed<string | string[]>(() => {
+    const separator = ' / ';
+    const values = model.value;
+    if (values && values.length && Array.isArray(values[0])) {
+      const result: string[] = [];
+      (values as Array<string[]>).forEach((v) => {
+        const labels = getValueLabel(v, cascaderData.value);
+        result.push(labels.join(separator));
+      });
+      return result;
+    }
+    const labels = getValueLabel(values as string[], cascaderData.value);
+    return labels.join(separator);
+  });
+
+  /** 同步级联选择器级联面板属性 */
+  watch(
+    () => props.cascaderProps,
+    (cascaderProps) => {
+      const cProps = cascaderProps || {};
+      [
+        'expandTrigger',
+        'checkStrictly',
+        'emitPath',
+        'lazy',
+        'lazyLoad',
+        'value',
+        'label',
+        'children',
+        'disabled',
+        'leaf',
+        'hoverThreshold'
+      ].forEach((k) => {
+        if (regionCascaderProps[k] == null && cProps[k] == null) {
+          return;
+        }
+        if (regionCascaderProps[k] !== cProps[k]) {
+          regionCascaderProps[k] = cProps[k];
+        }
+      });
+      if (props.multiple) {
+        if (!regionCascaderProps.multiple) {
+          regionCascaderProps.multiple = true;
+        }
+      } else if (!!regionCascaderProps.multiple !== !!cProps.multiple) {
+        regionCascaderProps.multiple = cProps.multiple;
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+
+  defineExpose({
+    cascaderRef,
+    getCheckedNodes: (leafOnly?: boolean) => {
+      return cascaderRef.value?.getCheckedNodes?.(!!leafOnly);
+    }
+  });
+</script>
diff --git a/z_ele/src/components/RegionsSelect/util.ts b/z_ele/src/components/RegionsSelect/util.ts
new file mode 100644
index 0000000..7fd42e0
--- /dev/null
+++ b/z_ele/src/components/RegionsSelect/util.ts
@@ -0,0 +1,151 @@
+import { defineStore, storeToRefs } from 'pinia';
+import { EleMessage } from 'ele-admin-plus';
+import request from '@/utils/request';
+const BASE_URL = import.meta.env.BASE_URL;
+
+/**
+ * 省市区数据
+ */
+export interface RegionsData {
+  label: string;
+  value: string;
+  children?: {
+    value: string;
+    label: string;
+    children?: {
+      value: string;
+      label: string;
+    }[];
+  }[];
+}
+
+/**
+ * 省市区数据状态管理
+ */
+export const useRegionsStore = defineStore('regions', {
+  state: () => ({
+    regionsData: null as RegionsData[] | null
+  }),
+  actions: {
+    setRegionsData(data: RegionsData[]) {
+      this.regionsData = data;
+    }
+  }
+});
+
+/**
+ * 获取省市区数据hook
+ */
+export function useRegionsData() {
+  const regionsStore = useRegionsStore();
+  const { regionsData } = storeToRefs(regionsStore);
+  // 若还未缓存过则获取省市区数据
+  if (regionsData.value == null) {
+    regionsStore.setRegionsData([]);
+    getRegionsData()
+      .then((data) => {
+        regionsStore.setRegionsData(data);
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  }
+  return regionsData;
+}
+
+/**
+ * 获取省市区数据
+ */
+export async function getRegionsData() {
+  const res = await request.get<RegionsData[]>(
+    BASE_URL + 'json/regions-data.json',
+    { baseURL: '' }
+  );
+  return res.data ?? [];
+}
+
+/**
+ * 省市区数据value处理
+ * @param data 省市区数据
+ * @param field value字段名
+ */
+export function formatData(data: RegionsData[], field?: string) {
+  if (field === 'label') {
+    return data.map((d) => {
+      const item: RegionsData = { label: d.label, value: d.label };
+      if (d.children) {
+        item.children = d.children.map((c) => {
+          const cItem: RegionsData = { label: c.label, value: c.label };
+          if (c.children) {
+            cItem.children = c.children.map((cc) => {
+              return { label: cc.label, value: cc.label };
+            });
+          }
+          return cItem;
+        });
+      }
+      return item;
+    });
+  }
+  return data;
+}
+
+/**
+ * 省市区数据筛选
+ * @param data 省市区数据
+ * @param type 只需要省市数据或只需要省数据
+ * @param field value字段名
+ */
+export function filterData(data: RegionsData[], type?: string, field?: string) {
+  if (type === 'provinceCity') {
+    return formatData(
+      data.map((d) => {
+        const item: RegionsData = { label: d.label, value: d.value };
+        if (d.children) {
+          item.children = d.children.map((c) => {
+            return { label: c.label, value: c.value };
+          });
+        }
+        return item;
+      }),
+      field
+    );
+  } else if (type === 'province') {
+    return formatData(
+      data.map((d) => ({ label: d.label, value: d.value })),
+      field
+    );
+  }
+  return formatData(data, field);
+}
+
+/**
+ * 获取选中值对应的文本
+ * @param values 选中值
+ * @param data 省市区数据
+ */
+export function getValueLabel(values?: string[], data?: RegionsData[]) {
+  const labels: string[] = [];
+  if (values && values.length && data) {
+    data.forEach((d) => {
+      if (d.value === values[0]) {
+        labels.push(d.label);
+        if (d.children && d.children.length) {
+          d.children.forEach((c) => {
+            if (c.value === values[1]) {
+              labels.push(c.label);
+            }
+            if (c.children && c.children.length) {
+              c.children.forEach((cc) => {
+                if (cc.value === values[2]) {
+                  labels.push(cc.label);
+                }
+              });
+            }
+          });
+        }
+      }
+    });
+  }
+  return labels;
+}
diff --git a/z_ele/src/components/RouterLayout/index.vue b/z_ele/src/components/RouterLayout/index.vue
new file mode 100644
index 0000000..797679c
--- /dev/null
+++ b/z_ele/src/components/RouterLayout/index.vue
@@ -0,0 +1,22 @@
+<!-- 路由出口 -->
+<template>
+  <router-view v-slot="{ route, Component }">
+    <transition :name="transitionName" mode="out-in" appear>
+      <keep-alive v-if="pageKeepAlive" :include="keepAliveInclude" :max="10">
+        <component :key="route.path" :is="Component" />
+      </keep-alive>
+      <component v-else :key="route.path" :is="Component" />
+    </transition>
+  </router-view>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+
+  defineOptions({ name: 'RouterLayout' });
+
+  const themeStore = useThemeStore();
+  const { keepAliveInclude, transitionName, pageKeepAlive } =
+    storeToRefs(themeStore);
+</script>
diff --git a/z_ele/src/components/TinymceEditor/index.vue b/z_ele/src/components/TinymceEditor/index.vue
new file mode 100644
index 0000000..ee71f99
--- /dev/null
+++ b/z_ele/src/components/TinymceEditor/index.vue
@@ -0,0 +1,331 @@
+<!-- 富文本编辑器 -->
+<template>
+  <component v-if="inlineEditor" :is="tagName" :id="elementId" />
+  <textarea v-else :id="elementId"></textarea>
+  <!-- 文件选择弹窗 -->
+  <FormItemRest>
+    <FilePicker
+      title="文件选择"
+      :limit="1"
+      :accept="filePickerAccept ? filePickerAccept + '*' : void 0"
+      :params="{ contentType: filePickerAccept }"
+      :base-index="19990099"
+      v-model="showFilePicker"
+      @done="handleFilePickerDone"
+      @close="handleFilePickerClose"
+    />
+  </FormItemRest>
+</template>
+
+<script lang="ts" setup>
+  import {
+    ref,
+    watch,
+    onMounted,
+    onBeforeUnmount,
+    onActivated,
+    onDeactivated,
+    nextTick,
+    useAttrs
+  } from 'vue';
+  import FormItemRest from 'ele-admin-plus/es/ele-app/components/form-item-rest';
+  import FilePicker from '@/components/FilePicker/index.vue';
+  import type { UserFile } from '@/api/system/user-file/model';
+  import tinymce from 'tinymce/tinymce';
+  import type {
+    Editor as TinyMCEEditor,
+    EditorEvent,
+    RawEditorSettings
+  } from 'tinymce';
+  import 'tinymce/themes/silver';
+  import 'tinymce/icons/default';
+  import 'tinymce/plugins/code';
+  import 'tinymce/plugins/preview';
+  import 'tinymce/plugins/fullscreen';
+  import 'tinymce/plugins/paste';
+  import 'tinymce/plugins/searchreplace';
+  //import 'tinymce/plugins/save';
+  //import 'tinymce/plugins/autosave';
+  import 'tinymce/plugins/link';
+  import 'tinymce/plugins/autolink';
+  import 'tinymce/plugins/image';
+  import 'tinymce/plugins/media';
+  import 'tinymce/plugins/table';
+  import 'tinymce/plugins/codesample';
+  import 'tinymce/plugins/lists';
+  import 'tinymce/plugins/advlist';
+  import 'tinymce/plugins/hr';
+  import 'tinymce/plugins/charmap';
+  import 'tinymce/plugins/emoticons';
+  import 'tinymce/plugins/anchor';
+  import 'tinymce/plugins/directionality';
+  import 'tinymce/plugins/pagebreak';
+  import 'tinymce/plugins/quickbars';
+  import 'tinymce/plugins/nonbreaking';
+  import 'tinymce/plugins/visualblocks';
+  import 'tinymce/plugins/visualchars';
+  import 'tinymce/plugins/wordcount';
+  import 'tinymce/plugins/emoticons/js/emojis';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { uploadFile } from '@/api/system/file';
+  import {
+    DEFAULT_CONFIG,
+    DARK_CONFIG,
+    uuid,
+    bindHandlers,
+    openAlert
+  } from './util';
+  import type { AlertOption } from './util';
+
+  defineOptions({ name: 'TinymceEditor' });
+
+  const props = withDefaults(
+    defineProps<{
+      /** 编辑器唯一id */
+      id?: string;
+      /** v-model */
+      modelValue?: string;
+      /** 编辑器配置 */
+      init?: RawEditorSettings;
+      /** 是否内联模式 */
+      inline?: boolean;
+      /** model events */
+      modelEvents?: string;
+      /** 内联模式标签名 */
+      tagName?: string;
+      /** 是否禁用 */
+      disabled?: boolean;
+      /** 是否跟随框架主题 */
+      autoTheme?: boolean;
+      /** 不跟随框架主题时是否使用暗黑主题 */
+      darkTheme?: boolean;
+    }>(),
+    {
+      inline: false,
+      modelEvents: 'change input undo redo',
+      tagName: 'div',
+      autoTheme: true
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+  }>();
+
+  const attrs = useAttrs();
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 编辑器唯一id */
+  const elementId: string = props.id || uuid('tiny-vue');
+
+  /** 编辑器实例 */
+  let editorIns: TinyMCEEditor | null = null;
+
+  /** 是否内联模式 */
+  const inlineEditor: boolean = props.init?.inline || props.inline;
+
+  /** 更新value */
+  const updateValue = (value: string) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 修改内容 */
+  const setContent = (value?: string) => {
+    if (
+      editorIns &&
+      typeof value === 'string' &&
+      value !== editorIns.getContent()
+    ) {
+      editorIns.setContent(value);
+    }
+  };
+
+  /** 渲染编辑器 */
+  const render = () => {
+    const isDark = props.autoTheme ? darkMode.value : props.darkTheme;
+    tinymce.init({
+      ...DEFAULT_CONFIG,
+      ...(isDark ? DARK_CONFIG : {}),
+      images_upload_handler: (blobInfo: any, success: any, error: any) => {
+        const file = blobInfo.blob();
+        uploadFile(file, void 0, file.name)
+          .then((res) => {
+            success(res.url);
+          })
+          .catch((e) => {
+            console.error(e);
+            error(e.message);
+          });
+      },
+      file_picker_callback: (callback: any, _value: any, meta: any) => {
+        if (meta.filetype === 'image') {
+          filePickerAccept.value = 'image/';
+        } else if (meta.filetype === 'media') {
+          filePickerAccept.value = 'video/';
+        } else {
+          filePickerAccept.value = void 0;
+        }
+        showFilePicker.value = true;
+        currentEditorCallback = callback;
+      },
+      ...props.init,
+      selector: `#${elementId}`,
+      readonly: props.disabled,
+      inline: inlineEditor,
+      setup: (editor: TinyMCEEditor) => {
+        editorIns = editor;
+        editor.on('init', (e: EditorEvent<any>) => {
+          // 回显初始值
+          if (props.modelValue) {
+            setContent(props.modelValue);
+          }
+          // v-model
+          editor.on(props.modelEvents, () => {
+            updateValue(editor.getContent());
+          });
+          // valid events
+          bindHandlers(e, attrs, editor);
+        });
+        if (typeof props.init?.setup === 'function') {
+          props.init.setup(editor);
+        }
+      }
+    });
+  };
+
+  /** 销毁编辑器 */
+  const destory = () => {
+    if (tinymce != null && editorIns != null) {
+      tinymce.remove(editorIns as any);
+      editorIns = null;
+    }
+  };
+
+  /** 弹出提示框 */
+  const alert = (option?: AlertOption) => {
+    openAlert(editorIns, option);
+  };
+
+  defineExpose({ editorIns, alert });
+
+  watch(
+    () => props.modelValue,
+    (val, prevVal) => {
+      if (val !== prevVal) {
+        setContent(val || '');
+      }
+    }
+  );
+
+  watch(
+    () => props.disabled,
+    (disable) => {
+      if (editorIns !== null) {
+        if (typeof editorIns.mode?.set === 'function') {
+          editorIns.mode.set(disable ? 'readonly' : 'design');
+        } else {
+          editorIns.setMode(disable ? 'readonly' : 'design');
+        }
+      }
+    }
+  );
+
+  watch(
+    () => props.tagName,
+    () => {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  );
+
+  watch(darkMode, () => {
+    if (props.autoTheme) {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  });
+
+  onMounted(() => {
+    render();
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  onActivated(() => {
+    render();
+  });
+
+  onDeactivated(() => {
+    destory();
+  });
+
+  /** 是否打开文件选择弹窗 */
+  const showFilePicker = ref(false);
+
+  /** 文件选择弹窗限制类型 */
+  const filePickerAccept = ref<string>();
+
+  /** 当前修改的文件项 */
+  let currentEditorCallback: any = null;
+
+  /** 文件选择弹窗选择完成事件 */
+  const handleFilePickerDone = (files: UserFile[]) => {
+    showFilePicker.value = false;
+    if (files.length) {
+      currentEditorCallback(files[0].url, {
+        text: files[0].name,
+        alt: files[0].name
+      });
+    }
+    currentEditorCallback = null;
+  };
+
+  /** 文件选择弹窗关闭事件 */
+  const handleFilePickerClose = () => {
+    currentEditorCallback = null;
+  };
+</script>
+
+<style lang="scss">
+  body {
+    .tox.tox-tinymce-aux,
+    &.tox-fullscreen .tox.tox-tinymce-aux {
+      z-index: 19990000;
+    }
+
+    .tox-menu.tox-collection.tox-collection--list {
+      max-height: 420px !important;
+    }
+
+    textarea[id^='tiny-vue'] {
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      box-sizing: border-box;
+    }
+
+    .tox .tox-menubar,
+    .tox .tox-toolbar-overlord,
+    .tox .tox-edit-area__iframe,
+    .tox .tox-statusbar {
+      background: none;
+    }
+
+    .tox .tox-toolbar,
+    .tox .tox-toolbar__overflow,
+    .tox .tox-toolbar__primary {
+      background: none;
+      box-shadow: 0 -0.8px 0 var(--el-border-color-light) inset;
+    }
+  }
+</style>
diff --git a/z_ele/src/components/TinymceEditor/util.ts b/z_ele/src/components/TinymceEditor/util.ts
new file mode 100644
index 0000000..56093c3
--- /dev/null
+++ b/z_ele/src/components/TinymceEditor/util.ts
@@ -0,0 +1,247 @@
+import type {
+  Editor as TinyMCEEditor,
+  EditorEvent,
+  RawEditorSettings
+} from 'tinymce';
+const BASE_URL = import.meta.env.BASE_URL;
+//const BASE_URL = location.protocol + '//' + location.host + import.meta.env.BASE_URL;
+
+/** 默认加载插件 */
+const PLUGINS: string = [
+  'code',
+  'preview',
+  'fullscreen',
+  'paste',
+  'searchreplace',
+  //'save',
+  //'autosave',
+  'link',
+  'autolink',
+  'image',
+  'media',
+  'table',
+  'codesample',
+  'lists',
+  'advlist',
+  'hr',
+  'charmap',
+  'emoticons',
+  'anchor',
+  'directionality',
+  'pagebreak',
+  'quickbars',
+  'nonbreaking',
+  'visualblocks',
+  'visualchars',
+  'wordcount'
+].join(' ');
+
+/** 默认工具栏布局 */
+const TOOLBAR: string = [
+  'fullscreen',
+  'preview',
+  'code',
+  '|',
+  'undo',
+  'redo',
+  '|',
+  'forecolor',
+  'backcolor',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  '|',
+  'alignleft',
+  'aligncenter',
+  'alignright',
+  'alignjustify',
+  '|',
+  'outdent',
+  'indent',
+  '|',
+  'numlist',
+  'bullist',
+  '|',
+  'formatselect',
+  'fontselect',
+  'fontsizeselect',
+  '|',
+  'link',
+  'image',
+  'media',
+  'emoticons',
+  'charmap',
+  'anchor',
+  'pagebreak',
+  'codesample',
+  '|',
+  'ltr',
+  'rtl'
+].join(' ');
+
+/** 默认配置 */
+export const DEFAULT_CONFIG: RawEditorSettings = {
+  height: 300,
+  branding: false,
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide',
+  content_css: BASE_URL + 'tinymce/skins/content/default/content.min.css',
+  language_url: BASE_URL + 'tinymce/langs/zh_CN.js',
+  language: 'zh_CN',
+  plugins: PLUGINS,
+  toolbar: TOOLBAR,
+  draggable_modal: true,
+  toolbar_mode: 'sliding',
+  quickbars_insert_toolbar: '',
+  convert_urls: false,
+  file_picker_types: 'media image file'
+};
+
+/** 暗黑主题配置 */
+export const DARK_CONFIG: RawEditorSettings = {
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide-dark',
+  content_css: BASE_URL + 'tinymce/skins/content/dark/content.min.css'
+};
+
+/** 支持监听的事件 */
+export const VALID_EVENTS = [
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBeforePaste',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResizeStart',
+  'onObjectResized',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid'
+];
+
+let unique = 0;
+
+/**
+ * 生成编辑器 id
+ */
+export function uuid(prefix: string): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}
+
+/**
+ * 绑定事件
+ */
+export function bindHandlers(
+  initEvent: EditorEvent<any>,
+  listeners: Record<string, any>,
+  editor: TinyMCEEditor
+): void {
+  const validEvents = VALID_EVENTS.map((event) => event.toLowerCase());
+  Object.keys(listeners)
+    .filter((key: string) => validEvents.includes(key.toLowerCase()))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.substring(2), (e: EditorEvent<any>) =>
+            handler(e, editor)
+          );
+        }
+      }
+    });
+}
+
+/**
+ * 弹出提示框
+ */
+export function openAlert(
+  editor: TinyMCEEditor | null,
+  option: AlertOption = {}
+) {
+  editor?.windowManager?.open?.({
+    title: option.title ?? '提示',
+    body: {
+      type: 'panel',
+      items: [
+        {
+          type: 'htmlpanel',
+          html: `<p>${option.content ?? ''}</p>`
+        }
+      ]
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        name: 'closeButton',
+        text: '确定',
+        primary: true
+      }
+    ]
+  });
+}
+
+/**
+ * 弹出提示框参数
+ */
+export interface AlertOption {
+  /** 标题 */
+  title?: string;
+  /** 内容 */
+  content?: string;
+}
diff --git a/z_ele/src/components/icons/AlipayFilled.vue b/z_ele/src/components/icons/AlipayFilled.vue
new file mode 100644
index 0000000..745398f
--- /dev/null
+++ b/z_ele/src/components/icons/AlipayFilled.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 48 48" fill="currentColor">
+    <path
+      d="M41 32C38 31 36 30 32.5 28 35 23 36 20 37 16H26V12H39V9H26V3H21C20 3 20 4 20 4V9H7V12H20V16H8V18H30A37 37 90 0127 25C19 21.5 12 21 8 23 6 24 3 26 2 29 0 37 5 42 12 43 20 43 26 38 29.5 33 38 38 47 43 48 43V34S47 34 41 32ZM12 39C8 39 5 37 4 34 3 30 8 26 12 26 15 26 19 27 24 30 20 35 18 38 12 39Z"
+    />
+  </svg>
+</template>
diff --git a/z_ele/src/components/icons/QqFilled.vue b/z_ele/src/components/icons/QqFilled.vue
new file mode 100644
index 0000000..925fdf1
--- /dev/null
+++ b/z_ele/src/components/icons/QqFilled.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 48 48" fill="currentColor">
+    <path
+      d="M42 28C41 25 40 23 38 20 38 9 32 2 24 2 16 2 10 9 10 20 8 23 7 25 6 28 4 34 5 38 6 38 7 38 10 33 10 32 10 35 11 40 15 42 14 42 10 43 10 44 10 46 23 45 24 44 25 45 38 46 38 44 38 43 34 42 33 42 37 40 38 35 38 32 38 33 41 38 42 38 43 38 44 34 42 28Z"
+    />
+  </svg>
+</template>
diff --git a/z_ele/src/components/icons/WechatFilled.vue b/z_ele/src/components/icons/WechatFilled.vue
new file mode 100644
index 0000000..6b5a8af
--- /dev/null
+++ b/z_ele/src/components/icons/WechatFilled.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 48 48" fill="currentColor">
+    <path
+      d="M33.4 17C33.7 17 34 17 34.3 17 33 10.2 25.9 4.9 17.4 4.9 7.9 4.9.2 11.3.2 19.2.2 23.5 2.5 27.4 6.1 30A1.1 1.1 90 016.6 30.9C6.3 32.4 5.84 34.1 5.81 34.2 5.78 34.3 5.7 34.5 5.7 34.6 5.7 34.9 6 35.2 6.3 35.2 6.4 35.2 6.5 35.16 6.6 35.1L10.4 32.8C10.6 32.7 10.9 32.6 11.3 32.6 11.4 32.6 11.6 32.64 11.8 32.7 13.5 33.2 15.4 33.5 17.4 33.5 17.7 33.5 18 33.5 18.3 33.5 17.9 32.4 17.7 31.2 17.7 30 17.7 22.8 24.7 17 33.4 17ZM23.1 12.4C24.4 12.4 25.4 13.4 25.4 14.7S24.4 16.9 23.1 16.9C21.8 16.9 20.8 15.9 20.8 14.7S21.8 12.4 23.1 12.4ZM11.7 16.9C10.4 16.9 9.4 15.9 9.4 14.7S10.4 12.4 11.7 12.4 13.9 13.4 13.9 14.7 12.9 16.9 11.7 16.9ZM43.2 39.5C46.2 37.3 48.1 34.1 48.1 30.5 48.1 23.9 41.7 18.6 33.8 18.6 25.9 18.6 19.5 23.9 19.5 30.5S25.9 42.4 33.8 42.4C35.4 42.4 37 42.1 38.5 41.72 38.6 41.7 38.68 41.69 38.9 41.7 39.2 41.72 39.4 41.8 39.6 41.9L42.8 43.7C42.9 43.76 42.96 43.8 43 43.8A.4.5 90 0043.4 43.6.5.4 90 0043.5 43.3C43.5 43.2 43.5 43.1 43.44 42.9 43.44 42.9 43 41.4 42.8 40.5 42.78 40.4 42.78 40.3 42.78 40.2 42.8 39.9 42.9 39.8 43.2 39.5ZM29 28.6C28 28.6 27.1 27.7 27.1 26.7 27.1 25.6 28 24.8 29 24.8S30.9 25.6 30.9 26.7C30.9 27.7 30.1 28.6 29 28.6ZM38.6 28.6C37.5 28.6 36.7 27.7 36.7 26.7 36.7 25.6 37.5 24.8 38.6 24.8S40.5 25.6 40.5 26.7A1.9 1.9 90 0138.6 28.6Z"
+    />
+  </svg>
+</template>
diff --git a/z_ele/src/components/icons/index.ts b/z_ele/src/components/icons/index.ts
new file mode 100644
index 0000000..64da9d0
--- /dev/null
+++ b/z_ele/src/components/icons/index.ts
@@ -0,0 +1,4 @@
+export * from 'ele-admin-plus/es/icons';
+export { default as AlipayFilled } from './AlipayFilled.vue';
+export { default as QqFilled } from './QqFilled.vue';
+export { default as WechatFilled } from './WechatFilled.vue';
diff --git a/z_ele/src/config/setting.ts b/z_ele/src/config/setting.ts
new file mode 100644
index 0000000..64bb5d0
--- /dev/null
+++ b/z_ele/src/config/setting.ts
@@ -0,0 +1,32 @@
+/** 接口地址 */
+export const API_BASE_URL: string = import.meta.env.VITE_API_URL;
+
+/** 项目名称 */
+export const PROJECT_NAME: string = import.meta.env.VITE_APP_NAME;
+
+/** 不需要登录的路由 */
+export const WHITE_LIST: string[] = ['/login', '/forget'];
+
+/** 首页路径, 为空则取第一个菜单的地址 */
+export const HOME_PATH: string | undefined = void 0;
+
+/** 外层布局的路由地址 */
+export const LAYOUT_PATH = '/';
+
+/** 刷新路由的路由地址 */
+export const REDIRECT_PATH = '/redirect';
+
+/** token本地缓存的名称 */
+export const TOKEN_CACHE_NAME = 'token';
+
+/** 主题配置本地缓存的名称 */
+export const THEME_CACHE_NAME = 'theme';
+
+/** i18n本地缓存的名称 */
+export const I18N_CACHE_NAME = 'i18n-lang';
+
+/** 高德地图key, 请到高德地图官网自行申请 */
+export const MAP_KEY = '006d995d433058322319fa797f2876f5';
+
+/** EleAdminPlus授权码 */
+export const LICENSE_CODE = import.meta.env.VITE_LICENSE;
diff --git a/z_ele/src/config/use-global-config.ts b/z_ele/src/config/use-global-config.ts
new file mode 100644
index 0000000..c7ccd69
--- /dev/null
+++ b/z_ele/src/config/use-global-config.ts
@@ -0,0 +1,108 @@
+import { ref } from 'vue';
+import type { TableGlobalConfig } from 'ele-admin-plus/es/ele-config-provider/types';
+import type { BeforeExportParams } from 'ele-admin-plus/es/ele-pro-table/types';
+import ExcelJS from 'exceljs';
+import { download } from '@/utils/common';
+
+/**
+ * 组件全局配置
+ */
+export function useGlobalConfig() {
+  /** 高级表格全局配置 */
+  const tableConfig = ref<TableGlobalConfig>({
+    response: {
+      dataName: 'list',
+      countName: 'count'
+    },
+    tools: ['reload', 'export', 'print', 'size', 'columns', 'maximized'],
+    exportConfig: {
+      // 使用 exceljs 进行导出
+      beforeExport: (params) => {
+        const { fileName, closeModal } = params;
+        const workbook = getExportWorkbook(params);
+        workbook.xlsx.writeBuffer().then((data) => {
+          download(data, `${fileName}.xlsx`);
+          closeModal();
+        });
+        return false;
+      }
+    }
+  });
+
+  return { tableConfig };
+}
+
+/**
+ * 导出生成 ExcelJS Workbook
+ * @param params 参数
+ */
+export function getExportWorkbook(params: BeforeExportParams) {
+  const { headerData, bodyData, footerData, bodyCols } = params;
+  const workbook = new ExcelJS.Workbook();
+  const sheet = workbook.addWorksheet('Sheet1');
+  // 遍历数据
+  const sheetRows: string[][] = [];
+  const sheetStyles: Record<string, any>[][] = [];
+  const sheetMerges: number[][] = [];
+  const sheetRowHeight: number[] = [];
+  [...headerData, ...bodyData, ...footerData].forEach((item, index) => {
+    const sheetCols: Array<any> = [];
+    const rowStyles: Record<string, any>[] = [];
+    item.forEach((d, colIndex) => {
+      if (!d.isTreeCell || !d.indent) {
+        sheetCols.push(d.text ?? '');
+      } else {
+        // 树表格缩进
+        const gap = Array.from({ length: d.indent }).fill('  ').join('');
+        sheetCols.push(gap + (d.text ?? ''));
+      }
+      // 单元格样式
+      rowStyles.push({
+        font: { size: 12, bold: index < headerData.length },
+        alignment: {
+          vertical: d.isTreeIndex && d.rowspan !== 1 ? 'top' : 'middle',
+          horizontal: d.isExpandCell ? 'left' : d.column?.align || 'left',
+          wrapText: d.isExpandCell ? true : false,
+          indent: d.isExpandCell ? 1 : 0
+        },
+        border: {
+          top: { style: 'thin' },
+          left: d.hideLeftBorder ? {} : { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: d.hideRightBorder ? {} : { style: 'thin' }
+        }
+      });
+      // 单元格合并
+      if ((d.rowspan && d.rowspan > 1) || (d.colspan && d.colspan > 1)) {
+        sheetMerges.push([
+          index + 1,
+          colIndex + 1,
+          index + (d.rowspan || 1),
+          colIndex + (d.colspan || 1)
+        ]);
+      }
+    });
+    sheetRows.push(sheetCols);
+    sheetStyles.push(rowStyles);
+    // 行高
+    const expandCell = item.find((d) => d.isExpandCell && d.colspan);
+    const lines = String(expandCell?.text ?? '').split('\n').length || 1;
+    sheetRowHeight.push(lines * 20);
+  });
+  // 添加到表格
+  sheet.addRows(sheetRows).forEach((row, index) => {
+    row.eachCell({ includeEmpty: true }, (cell, colIndex) => {
+      Object.assign(cell, sheetStyles[index][colIndex - 1]);
+    });
+    row.height = sheetRowHeight[index];
+  });
+  sheetMerges.forEach((merges) => {
+    sheet.mergeCells(merges as any);
+  });
+  // 列宽
+  bodyCols.forEach((col, colIndex) => {
+    const w = col.width ?? col.minWidth;
+    sheet.getColumn(colIndex + 1).width = w == null ? void 0 : w / 8;
+  });
+  return workbook;
+}
diff --git a/z_ele/src/global-import.ts b/z_ele/src/global-import.ts
new file mode 100644
index 0000000..0c59035
--- /dev/null
+++ b/z_ele/src/global-import.ts
@@ -0,0 +1,17 @@
+/** 全局安装(开发环境) */
+import type { App, Plugin } from 'vue';
+import ElementPlus from 'element-plus';
+import EleAdminPlus from 'ele-admin-plus';
+import 'element-plus/theme-chalk/src/index.scss';
+import 'ele-admin-plus/es/style/index.scss';
+import 'cropperjs/dist/cropper.css';
+import 'xgplayer/dist/index.min.css';
+
+const installer: Plugin = {
+  install(app: App) {
+    app.use(ElementPlus);
+    app.use(EleAdminPlus);
+  }
+};
+
+export default installer;
diff --git a/z_ele/src/i18n/index.ts b/z_ele/src/i18n/index.ts
new file mode 100644
index 0000000..6f21465
--- /dev/null
+++ b/z_ele/src/i18n/index.ts
@@ -0,0 +1,19 @@
+/**
+ * 国际化配置
+ */
+import { createI18n } from 'vue-i18n';
+import { getCacheLang } from './use-locale';
+import { zh_CN } from './lang/zh_CN';
+import { zh_TW } from './lang/zh_TW';
+import { en } from './lang/en';
+
+const messages = { zh_CN, zh_TW, en };
+
+const i18n = createI18n({
+  messages,
+  legacy: false,
+  silentTranslationWarn: true,
+  locale: getCacheLang()
+});
+
+export default i18n;
diff --git a/z_ele/src/i18n/lang/en.ts b/z_ele/src/i18n/lang/en.ts
new file mode 100644
index 0000000..05d7bbc
--- /dev/null
+++ b/z_ele/src/i18n/lang/en.ts
@@ -0,0 +1,162 @@
+import type { Locale } from './zh_CN';
+
+export const en: Locale = {
+  layout: {
+    home: 'Home',
+    header: {
+      profile: 'Profile',
+      password: 'Password',
+      logout: 'SignOut'
+    },
+    footer: {
+      website: 'Website',
+      document: 'Document',
+      authorization: 'Authorization',
+      copyright: 'Copyright © 2025 Wuhan EClouds Technology Co., Ltd'
+    },
+    logout: {
+      title: 'Confirm',
+      message: 'Are you sure you want to log out?'
+    },
+    tabs: {
+      reload: 'Refresh',
+      close: 'Close',
+      closeLeft: 'Close Left',
+      closeRight: 'Close Right',
+      closeOther: 'Close Other',
+      closeAll: 'Close All',
+      fullscreen: 'Fullscreen',
+      fullscreenExit: 'Fullscreen'
+    },
+    setting: {
+      title: 'Theme Setting',
+      sideStyles: {
+        dark: 'Dark Sidebar',
+        light: 'Light Sidebar'
+      },
+      headStyles: {
+        light: 'Light Header',
+        dark: 'Dark Header',
+        primary: 'Primary Header'
+      },
+      layoutStyles: {
+        side: 'Side Menu Layout',
+        top: 'Top Menu Layout',
+        mix: 'Mix Menu Layout'
+      },
+      colors: {
+        default: 'Daybreak Blue',
+        dust: 'Dust Blue',
+        sunset: 'Sunset Orange',
+        volcano: 'Volcano',
+        purple: 'Golden Purple',
+        green: 'Polar Green',
+        geekblue: 'Geek Blue'
+      },
+      darkMode: 'Dark Mode',
+      roundedTheme: 'Rounded Theme',
+      layout: 'Navigation Mode',
+      sidebarLayout: 'Sidebar Double Menu',
+      mixSidebarStyle: 'Dark Secondary Sidebar',
+      fluid: 'Full Body Width',
+      other: 'Other Setting',
+      more: 'More Setting',
+      tab: 'Tab Setting',
+      fixedHeader: 'Fixed Header',
+      fixedSidebar: 'Fixed Sidebar',
+      fixedBody: 'Scrollbar In Content',
+      logoInHeader: 'Logo In Header',
+      colorfulIcon: 'Colorful Icon',
+      uniqueOpened: 'Menu Unique Open',
+      responsive: 'Responsive',
+      weakMode: 'Weak Mode',
+      showTabs: 'Show Tabs',
+      fixedHome: 'Fixed Home Tab',
+      tabInHeader: 'Tab In Header',
+      tabStyle: 'Tab Style',
+      tabStyles: {
+        default: 'Default',
+        dot: 'Dot',
+        tag: 'Tag',
+        card: 'Card'
+      },
+      tabIcon: 'Tab Icon',
+      tabsCache: 'Tabs Cache',
+      menuItemTrigger: 'Menu Division',
+      footer: 'Global Footer',
+      pageKeepAlive: 'Page Keep Alive',
+      transitionName: 'Transition',
+      transitions: {
+        slideRight: 'Slide Right',
+        slideBottom: 'Slide Bottom',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        fade: 'Fade'
+      },
+      reset: 'Reset',
+      tabs: {
+        theme: 'Theme',
+        layout: 'Layout',
+        skin: 'Skin'
+      },
+      skins: {
+        custom: 'Custom',
+        gradient: 'Gradient',
+        technology: 'Technology',
+        aesthetic: 'Aesthetic',
+        cartoon: 'Cartoon'
+      },
+      skinConfig: {
+        wallpaper: 'Page Wallpaper',
+        maskColor: 'Page Wallpaper Mask',
+        headerBg: 'Header Background',
+        sidebarBg: 'Sidebar Background',
+        cardBg: 'Card Background',
+        overlayBg: 'Overlay Background',
+        overlayMaskColor: 'Overlay Background Mask',
+        darkConfig: 'Dark Theme'
+      },
+      layouts: {
+        default: 'Default',
+        mixedSidebar: 'Mixed Sidebar',
+        compactSidebar: 'Compact Sidebar',
+        tabInHeader: 'Tab In Header',
+        cardSidebar: 'Card Sidebar',
+        cardMixedSidebar: 'Card Mixed Side',
+        cardLayout: 'Card Layout',
+        verticalLayout: 'Vertical Layout',
+        topBarLayout: 'Top Bar Layout',
+        limitedWidth: 'Limited Width'
+      }
+    }
+  },
+  login: {
+    title: 'User Login',
+    username: 'please input username',
+    password: 'please input password',
+    code: 'please input code',
+    remember: 'remember',
+    login: 'Login',
+    passwordType: 'Password',
+    qrcodeType: 'QR Code',
+    refreshQrcode: 'Refresh'
+  },
+  list: {
+    // 基础列表
+    basic: {
+      table: {
+        avatar: 'Avatar',
+        username: 'Username',
+        nickname: 'Nickname',
+        organizationName: 'Organization',
+        phone: 'Phone',
+        email: 'Email',
+        roles: 'Roles',
+        sexName: 'Sex',
+        createTime: 'CreateTime',
+        status: 'Status',
+        action: 'Action'
+      }
+    }
+  }
+};
diff --git a/z_ele/src/i18n/lang/zh_CN.ts b/z_ele/src/i18n/lang/zh_CN.ts
new file mode 100644
index 0000000..3a9f443
--- /dev/null
+++ b/z_ele/src/i18n/lang/zh_CN.ts
@@ -0,0 +1,162 @@
+export const zh_CN = {
+  layout: {
+    home: '主页',
+    header: {
+      profile: '个人中心',
+      password: '修改密码',
+      logout: '退出登录'
+    },
+    footer: {
+      website: '官网',
+      document: '文档',
+      authorization: '授权',
+      copyright: 'Copyright © 2025 武汉易云智科技有限公司'
+    },
+    logout: {
+      title: '系统提示',
+      message: '确定要退出登录吗?'
+    },
+    tabs: {
+      reload: '刷新当前页签',
+      close: '关闭当前页签',
+      closeLeft: '关闭左侧页签',
+      closeRight: '关闭右侧页签',
+      closeOther: '关闭其它页签',
+      closeAll: '关闭全部页签',
+      fullscreen: '内容区域全屏',
+      fullscreenExit: '退出内容全屏'
+    },
+    setting: {
+      title: '主题风格设置',
+      sideStyles: {
+        dark: '暗色侧栏',
+        light: '亮色侧栏'
+      },
+      headStyles: {
+        light: '亮色顶栏',
+        dark: '暗色顶栏',
+        primary: '主色顶栏'
+      },
+      layoutStyles: {
+        side: '左侧菜单布局',
+        top: '顶部菜单布局',
+        mix: '混合菜单布局'
+      },
+      colors: {
+        default: '拂晓蓝',
+        dust: '薄暮',
+        sunset: '日暮',
+        volcano: '火山',
+        purple: '酱紫',
+        green: '极光绿',
+        geekblue: '极客蓝'
+      },
+      darkMode: '开启暗黑模式',
+      roundedTheme: '开启圆角主题',
+      layout: '导航模式',
+      sidebarLayout: '侧栏双排菜单',
+      mixSidebarStyle: '暗色二级侧栏',
+      fluid: '内容区域铺满',
+      other: '其它配置',
+      more: '更多配置',
+      tab: '页签配置',
+      fixedHeader: '固定顶栏区域',
+      fixedSidebar: '固定侧栏区域',
+      fixedBody: '内容区域滚动',
+      logoInHeader: 'Logo置于顶栏',
+      colorfulIcon: '侧栏彩色图标',
+      uniqueOpened: '侧栏排它展开',
+      responsive: '移动端响应式',
+      weakMode: '开启色弱模式',
+      showTabs: '开启多页签栏',
+      fixedHome: '固定主页页签',
+      tabInHeader: '页签置于顶栏',
+      tabStyle: '页签显示风格',
+      tabStyles: {
+        default: '默认',
+        dot: '圆点',
+        tag: '标签',
+        card: '卡片'
+      },
+      tabIcon: '页签显示图标',
+      tabsCache: '刷新保留页签',
+      menuItemTrigger: '混合菜单分割',
+      footer: '开启全局页脚',
+      pageKeepAlive: '页面切换缓存',
+      transitionName: '路由切换动画',
+      transitions: {
+        slideRight: '滑动消退',
+        slideBottom: '底部消退',
+        zoomIn: '放大渐变',
+        zoomOut: '缩小渐变',
+        fade: '淡入淡出'
+      },
+      reset: '重置',
+      tabs: {
+        theme: '主题设置',
+        layout: '常用布局',
+        skin: '皮肤背景'
+      },
+      skins: {
+        custom: '自定义',
+        gradient: '彩色渐变',
+        technology: '蓝色科技',
+        aesthetic: '唯美意境',
+        cartoon: '可爱卡通'
+      },
+      skinConfig: {
+        wallpaper: '页面背景图片',
+        maskColor: '页面背景蒙层',
+        headerBg: '顶栏背景颜色',
+        sidebarBg: '侧栏背景颜色',
+        cardBg: '卡片背景颜色',
+        overlayBg: '弹框背景图片',
+        overlayMaskColor: '弹框背景蒙层',
+        darkConfig: '暗黑模式'
+      },
+      layouts: {
+        default: '常规布局',
+        mixedSidebar: '双侧栏布局',
+        compactSidebar: '紧凑侧栏布局',
+        tabInHeader: '页签位于顶栏',
+        cardSidebar: '卡片侧栏布局',
+        cardMixedSidebar: '卡片双侧栏',
+        cardLayout: '卡片风格布局',
+        verticalLayout: '上下布局',
+        topBarLayout: '顶栏布局',
+        limitedWidth: '内容固定宽度'
+      }
+    }
+  },
+  login: {
+    title: '用户登录',
+    username: '请输入登录账号',
+    password: '请输入登录密码',
+    code: '请输入验证码',
+    remember: '记住密码',
+    login: '登录',
+    passwordType: '密码登录',
+    qrcodeType: '扫码登录',
+    refreshQrcode: '刷新二维码'
+  },
+  list: {
+    // 基础列表
+    basic: {
+      table: {
+        avatar: '头像',
+        username: '用户账号',
+        nickname: '用户名',
+        organizationName: '组织机构',
+        phone: '手机号',
+        email: '邮箱',
+        roles: '角色',
+        sexName: '性别',
+        createTime: '创建时间',
+        status: '状态',
+        action: '操作'
+      }
+    }
+  }
+};
+
+export type Locale = typeof zh_CN;
diff --git a/z_ele/src/i18n/lang/zh_TW.ts b/z_ele/src/i18n/lang/zh_TW.ts
new file mode 100644
index 0000000..3421515
--- /dev/null
+++ b/z_ele/src/i18n/lang/zh_TW.ts
@@ -0,0 +1,162 @@
+import type { Locale } from './zh_CN';
+
+export const zh_TW: Locale = {
+  layout: {
+    home: '主頁',
+    header: {
+      profile: '個人中心',
+      password: '修改密碼',
+      logout: '安全登出'
+    },
+    footer: {
+      website: '官網',
+      document: '檔案',
+      authorization: '授權',
+      copyright: 'Copyright © 2025 武漢易雲智科技有限公司'
+    },
+    logout: {
+      title: '詢問',
+      message: '確定要登出嗎?'
+    },
+    tabs: {
+      reload: '重繪當前頁簽',
+      close: '關閉當前頁簽',
+      closeLeft: '關閉左側頁簽',
+      closeRight: '關閉右側頁簽',
+      closeOther: '關閉其他頁簽',
+      closeAll: '關閉全部頁簽',
+      fullscreen: '內容區域全屏',
+      fullscreenExit: '退出內容全屏'
+    },
+    setting: {
+      title: '主題風格設定',
+      sideStyles: {
+        dark: '暗色側欄',
+        light: '亮色側欄'
+      },
+      headStyles: {
+        light: '亮色頂欄',
+        dark: '暗色頂欄',
+        primary: '主色頂欄'
+      },
+      layoutStyles: {
+        side: '左側選單佈局',
+        top: '頂部選單佈局',
+        mix: '混合選單佈局'
+      },
+      colors: {
+        default: '拂曉藍',
+        dust: '薄暮',
+        sunset: '日暮',
+        volcano: '火山',
+        purple: '醬紫',
+        green: '極光綠',
+        geekblue: '極客藍'
+      },
+      darkMode: '開啟暗黑模式',
+      roundedTheme: '開啟圓角主題',
+      layout: '導航模式',
+      sidebarLayout: '側欄雙排選單',
+      mixSidebarStyle: '暗色二級側欄',
+      fluid: '內容區域鋪滿',
+      other: '其它配寘',
+      more: '更多配寘',
+      tab: '頁簽配寘',
+      fixedHeader: '固定頂欄區域',
+      fixedSidebar: '固定側欄區域',
+      fixedBody: '內容區域滾動',
+      logoInHeader: 'Logo置於頂欄',
+      colorfulIcon: '側欄彩色圖標',
+      uniqueOpened: '側欄排它展開',
+      responsive: '移動端響應式',
+      weakMode: '開啟色弱模式',
+      showTabs: '開啟多頁簽欄',
+      fixedHome: '固定主頁頁簽',
+      tabInHeader: '頁簽置於頂欄',
+      tabStyle: '頁簽顯示風格',
+      tabStyles: {
+        default: '默認',
+        dot: '圓點',
+        tag: '标签',
+        card: '卡片'
+      },
+      tabIcon: '頁籤顯示圖標',
+      tabsCache: '刷新保留頁籤',
+      menuItemTrigger: '混合菜單分割',
+      footer: '開啟全局頁腳',
+      pageKeepAlive: '頁面切換緩存',
+      transitionName: '路由切換動畫',
+      transitions: {
+        slideRight: '滑動消退',
+        slideBottom: '底部消退',
+        zoomIn: '放大漸變',
+        zoomOut: '縮小漸變',
+        fade: '淡入淡出'
+      },
+      reset: '重置',
+      tabs: {
+        theme: '主題設定',
+        layout: '常用佈局',
+        skin: '皮膚背景'
+      },
+      skins: {
+        custom: '自定義',
+        gradient: '彩色漸變',
+        technology: '藍色科技',
+        aesthetic: '唯美意境',
+        cartoon: '可愛卡通'
+      },
+      skinConfig: {
+        wallpaper: '頁面背景圖片',
+        maskColor: '頁面背景蒙層',
+        headerBg: '頂欄背景顏色',
+        sidebarBg: '側欄背景顏色',
+        cardBg: '卡片背景顏色',
+        overlayBg: '彈框背景圖片',
+        overlayMaskColor: '彈框背景蒙層',
+        darkConfig: '暗黑模式'
+      },
+      layouts: {
+        default: '常規佈局',
+        mixedSidebar: '雙側欄佈局',
+        compactSidebar: '緊湊側欄佈局',
+        tabInHeader: '頁籤位於頂欄',
+        cardSidebar: '卡片側欄佈局',
+        cardMixedSidebar: '卡片雙側欄',
+        cardLayout: '卡片風格佈局',
+        verticalLayout: '上下佈局',
+        topBarLayout: '頂欄佈局',
+        limitedWidth: '內容固定寬度'
+      }
+    }
+  },
+  login: {
+    title: '用戶登錄',
+    username: '請輸入登入帳號',
+    password: '請輸入登入密碼',
+    code: '請輸入驗證碼',
+    remember: '記住密碼',
+    login: '登入',
+    passwordType: '密碼登入',
+    qrcodeType: '掃碼登入',
+    refreshQrcode: '重繪二維碼'
+  },
+  list: {
+    // 基础列表
+    basic: {
+      table: {
+        avatar: '頭像',
+        username: '用戶賬號',
+        nickname: '用戶名',
+        organizationName: '組織機構',
+        phone: '手機號',
+        email: '郵箱',
+        roles: '角色',
+        sexName: '性別',
+        createTime: '創建時間',
+        status: '狀態',
+        action: '操作'
+      }
+    }
+  }
+};
diff --git a/z_ele/src/i18n/use-locale.ts b/z_ele/src/i18n/use-locale.ts
new file mode 100644
index 0000000..f7a5673
--- /dev/null
+++ b/z_ele/src/i18n/use-locale.ts
@@ -0,0 +1,71 @@
+/**
+ * ElementPlus/EleAdminPlus/Dayjs国际化配置
+ */
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import type { RouteLocationNormalized } from 'vue-router';
+import { I18N_CACHE_NAME } from '@/config/setting';
+import { setPageTitle } from '@/utils/page-title-util';
+import type { Language } from 'element-plus/es/locale';
+import type { EleLocale } from 'ele-admin-plus/es/ele-config-provider/types';
+// ElementPlus
+import zh_CN from 'element-plus/es/locale/lang/zh-cn';
+import zh_TW from 'element-plus/es/locale/lang/zh-tw';
+import en from 'element-plus/es/locale/lang/en';
+// EleAdminPlus
+import eleZh_CN from 'ele-admin-plus/es/lang/zh_CN';
+import eleZh_TW from 'ele-admin-plus/es/lang/zh_TW';
+import eleEn from 'ele-admin-plus/es/lang/en_US';
+// Dayjs
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-tw';
+const elLocales = { zh_CN, zh_TW, en };
+const eleLocales = { zh_CN: eleZh_CN, zh_TW: eleZh_TW, en: eleEn };
+
+export function useLocale() {
+  const { currentRoute } = useRouter();
+  const { locale } = useI18n();
+  const elLocale = ref<Language>();
+  const eleLocale = ref<EleLocale>();
+
+  watch(
+    locale,
+    () => {
+      elLocale.value = elLocales[locale.value];
+      eleLocale.value = eleLocales[locale.value];
+      dayjs.locale(locale.value.toLowerCase().replace(/_/g, '-'));
+      setPageTitle(getRouteTitle(currentRoute.value));
+    },
+    { immediate: true }
+  );
+  return { elLocale, eleLocale };
+}
+
+/**
+ * 获取缓存的语言
+ */
+export function getCacheLang() {
+  return localStorage.getItem(I18N_CACHE_NAME) || 'zh_CN';
+}
+
+/**
+ * 获取缓存的语言
+ */
+export function setCacheLang(lang?: string) {
+  if (!lang) {
+    localStorage.removeItem(I18N_CACHE_NAME);
+    return;
+  }
+  localStorage.setItem(I18N_CACHE_NAME, lang);
+}
+
+/**
+ * 获取路由对应的标题
+ * @param route 路由
+ */
+export function getRouteTitle(route: RouteLocationNormalized) {
+  const lang = route.meta?.lang ?? {};
+  return lang[getCacheLang()] ?? route.meta?.title;
+}
diff --git a/z_ele/src/layout/components/covers/cover-card-layout.vue b/z_ele/src/layout/components/covers/cover-card-layout.vue
new file mode 100644
index 0000000..83c918b
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-card-layout.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    :style="{
+      height: '100%',
+      padding: '6px',
+      boxSizing: 'border-box',
+      display: 'flex'
+    }"
+  >
+    <div
+      class="setting-layout-cover-bg-dark"
+      :style="{ width: '10px', borderRadius: '3px' }"
+    ></div>
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{ width: '20px', borderRadius: '3px', margin: '0 4px' }"
+    ></div>
+    <div :style="{ flex: 1, display: 'flex', flexDirection: 'column' }">
+      <div
+        class="setting-layout-cover-bg-primary"
+        :style="{ height: '12px', borderRadius: '3px 3px 0 0' }"
+      ></div>
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{
+          height: '8px',
+          borderRadius: '0 0 3px 3px',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 4px'
+        }"
+      >
+        <IconSkeleton size="xs" :style="{ width: '10px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      </div>
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{ flex: 1, marginTop: '4px', borderRadius: '3px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-card-mixed-sidebar.vue b/z_ele/src/layout/components/covers/cover-card-mixed-sidebar.vue
new file mode 100644
index 0000000..53f695c
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-card-mixed-sidebar.vue
@@ -0,0 +1,40 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{
+        height: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingRight: '4px'
+      }"
+    >
+      <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+    </div>
+    <div :style="{ flex: 1, display: 'flex', padding: '6px' }">
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{ width: '32px', borderRadius: '4px' }"
+      >
+        <div
+          class="setting-layout-cover-border-lighter"
+          :style="{
+            width: '12px',
+            height: '100%',
+            borderRightStyle: 'solid',
+            borderRightWidth: '1px'
+          }"
+        ></div>
+      </div>
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{ flex: 1, marginLeft: '6px', borderRadius: '4px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-card-sidebar.vue b/z_ele/src/layout/components/covers/cover-card-sidebar.vue
new file mode 100644
index 0000000..41b7ed2
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-card-sidebar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{
+        height: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingRight: '4px'
+      }"
+    >
+      <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+    </div>
+    <div :style="{ flex: 1, display: 'flex', padding: '6px' }">
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{ width: '24px', borderRadius: '4px' }"
+      ></div>
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{ flex: 1, marginLeft: '6px', borderRadius: '4px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-compact-sidebar.vue b/z_ele/src/layout/components/covers/cover-compact-sidebar.vue
new file mode 100644
index 0000000..5948e9d
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-compact-sidebar.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex' }">
+    <div class="setting-layout-cover-bg-dark" :style="{ width: '14px' }"></div>
+    <div :style="{ flex: 1 }">
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{
+          height: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingRight: '4px'
+        }"
+      >
+        <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+      </div>
+      <div
+        class="setting-layout-cover-bg-light setting-layout-cover-border-lighter"
+        :style="{
+          height: '8px',
+          borderTopStyle: 'solid',
+          borderTopWidth: '1px',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 4px'
+        }"
+      >
+        <IconSkeleton size="xs" :style="{ width: '10px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-default.vue b/z_ele/src/layout/components/covers/cover-default.vue
new file mode 100644
index 0000000..70cd43c
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-default.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex' }">
+    <div class="setting-layout-cover-bg-dark" :style="{ width: '28px' }"></div>
+    <div :style="{ flex: 1 }">
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{
+          height: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingRight: '4px'
+        }"
+      >
+        <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+      </div>
+      <div
+        class="setting-layout-cover-bg-light setting-layout-cover-border-lighter"
+        :style="{
+          height: '8px',
+          borderTopStyle: 'solid',
+          borderTopWidth: '1px',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 4px'
+        }"
+      >
+        <IconSkeleton size="xs" :style="{ width: '10px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-limited-width.vue b/z_ele/src/layout/components/covers/cover-limited-width.vue
new file mode 100644
index 0000000..9ccba63
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-limited-width.vue
@@ -0,0 +1,29 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{
+        height: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingRight: '4px'
+      }"
+    >
+      <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+    </div>
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{
+        flex: 1,
+        width: '68%',
+        margin: '6px auto',
+        borderRadius: '4px'
+      }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-mixed-sidebar.vue b/z_ele/src/layout/components/covers/cover-mixed-sidebar.vue
new file mode 100644
index 0000000..833c0bf
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-mixed-sidebar.vue
@@ -0,0 +1,46 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex' }">
+    <div class="setting-layout-cover-bg-dark" :style="{ width: '14px' }"></div>
+    <div
+      class="setting-layout-cover-bg-light setting-layout-cover-border-lighter"
+      :style="{
+        width: '22px',
+        borderRightStyle: 'solid',
+        borderRightWidth: '1px'
+      }"
+    ></div>
+    <div :style="{ flex: 1 }">
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{
+          height: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingRight: '4px'
+        }"
+      >
+        <IconSkeleton :style="{ width: '8px', height: '8px' }" />
+      </div>
+      <div
+        class="setting-layout-cover-bg-light setting-layout-cover-border-lighter"
+        :style="{
+          height: '8px',
+          borderTopStyle: 'solid',
+          borderTopWidth: '1px',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 4px'
+        }"
+      >
+        <IconSkeleton size="xs" :style="{ width: '10px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-tab-in-header.vue b/z_ele/src/layout/components/covers/cover-tab-in-header.vue
new file mode 100644
index 0000000..d8c7444
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-tab-in-header.vue
@@ -0,0 +1,27 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex' }">
+    <div class="setting-layout-cover-bg-dark" :style="{ width: '28px' }"></div>
+
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{
+        flex: 1,
+        height: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 4px'
+      }"
+    >
+      <IconSkeleton size="xs" :style="{ width: '10px' }" />
+      <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      <IconSkeleton
+        :style="{ width: '8px', height: '8px', marginLeft: 'auto' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/cover-top-bar-layout.vue b/z_ele/src/layout/components/covers/cover-top-bar-layout.vue
new file mode 100644
index 0000000..cf5d81c
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-top-bar-layout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
+    <div
+      class="setting-layout-cover-bg-primary"
+      :style="{ height: '14px' }"
+    ></div>
+    <div
+      class="setting-layout-cover-bg-light"
+      :style="{ flex: 1, margin: '6px', borderRadius: '4px' }"
+    ></div>
+  </div>
+</template>
diff --git a/z_ele/src/layout/components/covers/cover-vertical-layout.vue b/z_ele/src/layout/components/covers/cover-vertical-layout.vue
new file mode 100644
index 0000000..192da6d
--- /dev/null
+++ b/z_ele/src/layout/components/covers/cover-vertical-layout.vue
@@ -0,0 +1,36 @@
+<template>
+  <div :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
+    <div
+      class="setting-layout-cover-bg-primary"
+      :style="{ height: '14px' }"
+    ></div>
+    <div :style="{ flex: 1, display: 'flex' }">
+      <div
+        class="setting-layout-cover-bg-light setting-layout-cover-border-lighter"
+        :style="{
+          width: '28px',
+          borderRightStyle: 'solid',
+          borderRightWidth: '1px'
+        }"
+      ></div>
+      <div
+        class="setting-layout-cover-bg-light"
+        :style="{
+          flex: 1,
+          height: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 4px'
+        }"
+      >
+        <IconSkeleton size="xs" :style="{ width: '10px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+        <IconSkeleton size="xs" :style="{ width: '10px', marginLeft: '4px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import IconSkeleton from './icon-skeleton.vue';
+</script>
diff --git a/z_ele/src/layout/components/covers/icon-image.vue b/z_ele/src/layout/components/covers/icon-image.vue
new file mode 100644
index 0000000..a64145a
--- /dev/null
+++ b/z_ele/src/layout/components/covers/icon-image.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="setting-layout-cover-bg-fill"
+    :style="{
+      width: '46px',
+      height: '34px',
+      borderRadius: '4px',
+      position: 'relative',
+      overflow: 'hidden'
+    }"
+  >
+    <div
+      class="setting-layout-cover-bg-fill-dark"
+      :style="{
+        width: '12px',
+        height: '12px',
+        borderRadius: '50%',
+        position: 'absolute',
+        right: '6px',
+        top: '6px'
+      }"
+    ></div>
+    <div
+      class="setting-layout-cover-bg-fill-dark"
+      :style="{
+        width: '40px',
+        height: '40px',
+        borderRadius: '6px',
+        transform: 'rotate(45deg)',
+        position: 'absolute',
+        bottom: '-24px',
+        left: '-4px'
+      }"
+    ></div>
+  </div>
+</template>
diff --git a/z_ele/src/layout/components/covers/icon-skeleton.vue b/z_ele/src/layout/components/covers/icon-skeleton.vue
new file mode 100644
index 0000000..63ad150
--- /dev/null
+++ b/z_ele/src/layout/components/covers/icon-skeleton.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="setting-layout-cover-bg-fill-light"
+    :style="{
+      flexShrink: 0,
+      height: { md: '10px', xs: '4px' }[size || 'md'],
+      borderRadius: size === 'xs' ? '2px' : '4px'
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    size?: 'xs' | 'md';
+  }>();
+</script>
diff --git a/z_ele/src/layout/components/header-notice.vue b/z_ele/src/layout/components/header-notice.vue
new file mode 100644
index 0000000..5907d20
--- /dev/null
+++ b/z_ele/src/layout/components/header-notice.vue
@@ -0,0 +1,317 @@
+<!-- 顶栏消息通知 -->
+<template>
+  <ele-popover
+    :width="336"
+    trigger="click"
+    transition="el-zoom-in-top"
+    :content-style="{ padding: 0 }"
+    :body-style="{ overflow: 'hidden' }"
+    :popper-style="{ maxWidth: 'calc(100% - 32px)' }"
+    :popper-options="{
+      strategy: 'fixed',
+      modifiers: [{ name: 'offset', options: { offset: [0, 5] } }]
+    }"
+  >
+    <template #reference>
+      <div style="display: flex; align-items: center; height: 100%">
+        <el-badge
+          :value="unreadNum"
+          :hidden="!unreadNum"
+          style="line-height: 1; padding: 4px 0"
+        >
+          <el-icon style="transform: scale(1.17) translateY(1px)">
+            <BellOutlined />
+          </el-icon>
+        </el-badge>
+      </div>
+    </template>
+    <ele-tabs
+      ref="tabRef"
+      :center="true"
+      v-model="active"
+      :items="[
+        { name: 'notice', label: '通知' },
+        { name: 'letter', label: '私信' },
+        { name: 'todo', label: '待办' }
+      ]"
+      class="notice-tabs"
+    >
+      <template #label="{ item, label }">
+        <span>{{ label }}</span>
+        <span v-if="item.name === 'notice' && notice.length">
+          ({{ notice.length }})
+        </span>
+        <span v-if="item.name === 'letter' && letter.length">
+          ({{ letter.length }})
+        </span>
+        <span v-if="item.name === 'todo' && todo.length">
+          ({{ todo.length }})
+        </span>
+      </template>
+      <template #notice>
+        <div class="list-wrapper">
+          <div v-for="item in notice" :key="item.id" class="list-item">
+            <div class="list-item-icon" :style="{ background: item.color }">
+              <el-icon>
+                <Comment
+                  v-if="item.icon === 'report'"
+                  style="transform: translateY(1px)"
+                />
+                <Stamp v-else-if="item.icon === 'leave'" />
+                <Promotion v-else-if="item.icon === 'meeting'" />
+                <Checked v-else-if="item.icon === 'interview'" />
+                <BellFilled v-else-if="item.icon === 'salary'" />
+              </el-icon>
+            </div>
+            <div class="list-item-body">
+              <ele-ellipsis>{{ item.title }}</ele-ellipsis>
+              <ele-ellipsis type="placeholder" class="list-item-text">
+                {{ item.time }}
+              </ele-ellipsis>
+            </div>
+          </div>
+        </div>
+        <div v-if="notice.length" class="bottom-tools">
+          <div class="bottom-tool" @click="clearNotice">清空通知</div>
+          <el-divider direction="vertical" style="margin: 0; width: 0" />
+          <router-link to="/user/message?type=notice" class="bottom-tool">
+            查看更多
+          </router-link>
+        </div>
+        <el-empty v-else description="已查看所有通知" :image-size="68" />
+      </template>
+      <template #letter>
+        <div class="list-wrapper">
+          <div v-for="item in letter" :key="item.id" class="list-item">
+            <el-avatar :size="32" :src="item.avatar" />
+            <div class="list-item-body">
+              <ele-ellipsis>{{ item.title }}</ele-ellipsis>
+              <ele-ellipsis type="placeholder" class="list-item-text">
+                {{ item.content }}
+              </ele-ellipsis>
+              <ele-ellipsis type="placeholder" class="list-item-text">
+                {{ item.time }}
+              </ele-ellipsis>
+            </div>
+          </div>
+        </div>
+        <div v-if="letter.length" class="bottom-tools">
+          <div class="bottom-tool" @click="clearLetter">清空私信</div>
+          <el-divider direction="vertical" style="margin: 0; width: 0" />
+          <router-link to="/user/message?type=letter" class="bottom-tool">
+            查看更多
+          </router-link>
+        </div>
+        <el-empty v-else description="已读完所有私信" :image-size="68" />
+      </template>
+      <template #todo>
+        <div class="list-wrapper">
+          <div v-for="item in todo" :key="item.id" class="list-item">
+            <div class="list-item-body">
+              <ele-ellipsis>{{ item.title }}</ele-ellipsis>
+              <ele-ellipsis type="placeholder" class="list-item-text">
+                {{ item.description }}
+              </ele-ellipsis>
+            </div>
+            <el-tag
+              v-if="item.status === 0"
+              type="info"
+              size="small"
+              :disable-transitions="true"
+            >
+              未开始
+            </el-tag>
+            <el-tag
+              v-else-if="item.status === 1"
+              type="danger"
+              size="small"
+              :disable-transitions="true"
+            >
+              即将到期
+            </el-tag>
+            <el-tag
+              v-else-if="item.status === 2"
+              size="small"
+              :disable-transitions="true"
+            >
+              进行中
+            </el-tag>
+          </div>
+        </div>
+        <div v-if="todo.length" class="bottom-tools">
+          <div class="bottom-tool" @click="clearTodo">清空待办</div>
+          <el-divider direction="vertical" style="margin: 0; width: 0" />
+          <router-link to="/user/message?type=todo" class="bottom-tool">
+            查看更多
+          </router-link>
+        </div>
+        <el-empty v-else description="已完成所有任务" :image-size="68" />
+      </template>
+    </ele-tabs>
+  </ele-popover>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, nextTick } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleTabs } from 'ele-admin-plus';
+  import {
+    Comment,
+    Stamp,
+    Promotion,
+    Checked,
+    BellFilled
+  } from '@element-plus/icons-vue';
+  import { BellOutlined } from '@/components/icons';
+  import { getUnreadNotice } from '@/api/example';
+  import type {
+    NoticeModel,
+    LetterModel,
+    TodoModel
+  } from '@/api/example/model';
+
+  /** 标签页 */
+  const tabRef = ref<InstanceType<typeof EleTabs> | null>(null);
+
+  /** 选项卡选中 */
+  const active = ref<string>('notice');
+
+  /** 通知数据 */
+  const notice = ref<NoticeModel[]>([]);
+
+  /** 私信数据 */
+  const letter = ref<LetterModel[]>([]);
+
+  /** 待办数据 */
+  const todo = ref<TodoModel[]>([]);
+
+  /** 未读数量 */
+  const unreadNum = computed(() => {
+    return notice.value.length + letter.value.length + todo.value.length;
+  });
+
+  /** 查询数据 */
+  const query = () => {
+    getUnreadNotice()
+      .then((result) => {
+        notice.value = result.notice;
+        letter.value = result.letter;
+        todo.value = result.todo;
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 清空通知 */
+  const clearNotice = () => {
+    notice.value = [];
+    updateActiveBar();
+  };
+
+  /** 清空私信 */
+  const clearLetter = () => {
+    letter.value = [];
+    updateActiveBar();
+  };
+
+  /** 清空待办 */
+  const clearTodo = () => {
+    todo.value = [];
+    updateActiveBar();
+  };
+
+  /** 更新标签页指示线 */
+  const updateActiveBar = () => {
+    nextTick(() => {
+      tabRef.value?.updateActiveBar?.();
+    });
+  };
+
+  query();
+</script>
+
+<style lang="scss" scoped>
+  .list-wrapper {
+    padding-top: 8px;
+    box-sizing: border-box;
+    max-height: calc(100vh - 180px);
+    min-height: 60px;
+    overflow: auto;
+  }
+
+  .list-item {
+    display: flex;
+    padding: 14px 24px;
+    box-sizing: border-box;
+    transition: background-color 0.2s;
+    cursor: pointer;
+
+    .list-item-body {
+      flex: 1;
+      overflow: hidden;
+
+      .list-item-text {
+        margin-top: 6px;
+      }
+    }
+
+    .list-item-icon {
+      width: 32px;
+      height: 32px;
+      color: #fff;
+      font-size: 16px;
+      border-radius: 50%;
+      text-align: center;
+      background-color: #60b2fc;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :deep(.el-avatar) {
+      flex-shrink: 0;
+    }
+
+    .list-item-icon + .list-item-body,
+    :deep(.el-avatar + .list-item-body) {
+      padding-left: 12px;
+    }
+
+    &:hover {
+      background-color: hsla(0, 0%, 60%, 0.08);
+    }
+
+    & + .list-item {
+      border-top: 1px solid hsla(0, 0%, 60%, 0.2);
+    }
+  }
+
+  /* 操作按钮 */
+  .bottom-tools {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid hsla(0, 0%, 60%, 0.2);
+
+    .bottom-tool {
+      flex: 1;
+      line-height: 46px;
+      text-align: center;
+      text-decoration: none;
+      transition: background-color 0.3s;
+      cursor: pointer;
+      color: inherit;
+
+      &:hover {
+        background: hsla(0, 0%, 60%, 0.08);
+      }
+    }
+  }
+
+  /* 修改标签页样式 */
+  .notice-tabs :deep(.el-tabs__header) {
+    --ele-tab-height: 44px;
+    --ele-tab-padding: 22px;
+  }
+</style>
diff --git a/z_ele/src/layout/components/header-user.vue b/z_ele/src/layout/components/header-user.vue
new file mode 100644
index 0000000..3e805b1
--- /dev/null
+++ b/z_ele/src/layout/components/header-user.vue
@@ -0,0 +1,105 @@
+<!-- 用户信息 -->
+<template>
+  <ele-dropdown
+    :items="[
+      {
+        title: t('layout.header.profile'),
+        command: 'profile',
+        icon: UserOutlined
+      },
+      {
+        title: t('layout.header.password'),
+        command: 'password',
+        icon: LockOutlined,
+        iconStyle: { transform: 'translateY(-1px)' }
+      },
+      {
+        title: t('layout.header.logout'),
+        command: 'logout',
+        icon: LogoutOutlined,
+        divided: true
+      }
+    ]"
+    :icon-props="{ size: 15 }"
+    :popper-options="{
+      modifiers: [{ name: 'offset', options: { offset: [0, 5] } }]
+    }"
+    @command="handleUserDropClick"
+  >
+    <div class="header-avatar">
+      <el-avatar
+        :size="28"
+        :src="loginUser.avatar"
+        :icon="loginUser.avatar ? void 0 : UserOutlined"
+        style="transform: translateY(-1px)"
+      />
+      <div
+        class="hidden-sm-and-down"
+        style="margin-left: 4px; line-height: 1.5"
+      >
+        {{ loginUser.nickname }}
+      </div>
+      <el-icon :size="13" style="margin: 0 -4px 0 2px">
+        <ArrowDown />
+      </el-icon>
+    </div>
+  </ele-dropdown>
+  <!-- 修改密码弹窗 -->
+  <password-modal v-model="passwordVisible" />
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from 'vue-i18n';
+  import { ElMessageBox } from 'element-plus';
+  import {
+    ArrowDown,
+    UserOutlined,
+    LockOutlined,
+    LogoutOutlined
+  } from '@/components/icons';
+  import { useUserStore } from '@/store/modules/user';
+  import { logout } from '@/utils/common';
+  import PasswordModal from './password-modal.vue';
+
+  const { t } = useI18n();
+  const { push } = useRouter();
+  const userStore = useUserStore();
+
+  /** 是否显示修改密码弹窗 */
+  const passwordVisible = ref(false);
+
+  /** 当前用户信息 */
+  const loginUser = computed(() => userStore.info ?? {});
+
+  /** 用户信息下拉点击 */
+  const handleUserDropClick = (command: string) => {
+    if (command === 'password') {
+      passwordVisible.value = true;
+    } else if (command === 'profile') {
+      push('/user/profile');
+    } else if (command === 'logout') {
+      // 退出登录
+      ElMessageBox.confirm(
+        t('layout.logout.message'),
+        t('layout.logout.title'),
+        { type: 'warning', draggable: true }
+      )
+        .then(() => {
+          logout(false);
+        })
+        .catch(() => {});
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .header-avatar {
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    outline: none;
+  }
+</style>
diff --git a/z_ele/src/layout/components/i18n-icon.vue b/z_ele/src/layout/components/i18n-icon.vue
new file mode 100644
index 0000000..b91144e
--- /dev/null
+++ b/z_ele/src/layout/components/i18n-icon.vue
@@ -0,0 +1,68 @@
+<!-- 国际化语言切换 -->
+<template>
+  <ele-dropdown
+    :items="items"
+    :model-value="locale"
+    :placement="placement"
+    :menu-style="{ minWidth: '108px' }"
+    :popper-options="{
+      modifiers: [{ name: 'offset', options: { offset: [0, 5] } }]
+    }"
+    :icon-props="{
+      size: 12,
+      style: { fontStyle: 'normal', fontWeight: '600' }
+    }"
+    style="line-height: inherit"
+    @command="changeLanguage"
+  >
+    <div
+      :style="{
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        outline: 'none'
+      }"
+    >
+      <slot>
+        <el-icon>
+          <GlobalOutlined :style="iconStyle" />
+        </el-icon>
+      </slot>
+    </div>
+  </ele-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { ref, markRaw, h } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import type { ElTooltipProps } from 'element-plus';
+  import { GlobalOutlined } from '@/components/icons';
+  import { setCacheLang } from '@/i18n/use-locale';
+
+  withDefaults(
+    defineProps<{
+      /** placement */
+      placement?: ElTooltipProps['placement'];
+      /** 自定义样式 */
+      iconStyle?: CSSProperties;
+    }>(),
+    {
+      placement: 'bottom'
+    }
+  );
+
+  const { locale } = useI18n();
+
+  const items = ref([
+    { title: '简体中文', command: 'zh_CN', icon: markRaw(h('span', {}, 'CN')) },
+    { title: '繁體中文', command: 'zh_TW', icon: markRaw(h('span', {}, 'HK')) },
+    { title: 'English', command: 'en', icon: markRaw(h('span', {}, 'US')) }
+  ]);
+
+  /** 切换语言 */
+  const changeLanguage = (command: string) => {
+    locale.value = command;
+    setCacheLang(command);
+  };
+</script>
diff --git a/z_ele/src/layout/components/page-footer.vue b/z_ele/src/layout/components/page-footer.vue
new file mode 100644
index 0000000..5377d6a
--- /dev/null
+++ b/z_ele/src/layout/components/page-footer.vue
@@ -0,0 +1,46 @@
+<!-- 全局页脚 -->
+<template>
+  <ele-text type="placeholder" class="ele-footer">
+    <el-space :size="24">
+      <el-link underline="never" href="https://eleadmin.com" target="_blank">
+        {{ t('layout.footer.website') }}
+      </el-link>
+      <el-link
+        underline="never"
+        href="https://eleadmin.com/doc/eleadminplus/"
+        target="_blank"
+      >
+        {{ t('layout.footer.document') }}
+      </el-link>
+      <el-link
+        underline="never"
+        href="https://eleadmin.com/goods/11"
+        target="_blank"
+      >
+        {{ t('layout.footer.authorization') }}
+      </el-link>
+    </el-space>
+    <div style="margin-top: 8px">
+      {{ t('layout.footer.copyright') }}
+    </div>
+  </ele-text>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+  @use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+  .ele-footer {
+    padding: 16px 0;
+    text-align: center;
+    #{getCssVarName('text-color', 'regular')}: getCssVar(
+      'text-color',
+      'placeholder'
+    );
+  }
+</style>
diff --git a/z_ele/src/layout/components/password-modal.vue b/z_ele/src/layout/components/password-modal.vue
new file mode 100644
index 0000000..8cd5d53
--- /dev/null
+++ b/z_ele/src/layout/components/password-modal.vue
@@ -0,0 +1,153 @@
+<!-- 修改密码弹窗 -->
+<template>
+  <ele-modal
+    form
+    :width="420"
+    title="修改密码"
+    :append-to-body="true"
+    v-model="visible"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-form-item label="旧密码" prop="oldPassword">
+        <el-input
+          show-password
+          type="password"
+          :maxlength="20"
+          v-model="form.oldPassword"
+          placeholder="请输入旧密码"
+        />
+      </el-form-item>
+      <el-form-item label="新密码" prop="password">
+        <el-input
+          show-password
+          type="password"
+          :maxlength="20"
+          v-model="form.password"
+          placeholder="请输入新密码"
+        />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="password2">
+        <el-input
+          show-password
+          type="password"
+          :maxlength="20"
+          v-model="form.password2"
+          placeholder="请再次输入新密码"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleOk">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { updatePassword } from '@/api/layout';
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 提交loading */
+  const loading = ref<boolean>(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData({
+    oldPassword: '',
+    password: '',
+    password2: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    oldPassword: [
+      {
+        required: true,
+        message: '请输入旧密码',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        message: '请输入新密码',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        pattern: /^[\S]{5,18}$/,
+        message: '密码必须为5-18位非空白字符'
+      }
+    ],
+    password2: [
+      {
+        required: true,
+        message: '请再次输入新密码',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (value && value !== form.password) {
+            return callback(new Error('两次输入密码不一致'));
+          }
+          callback();
+        }
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存修改 */
+  const handleOk = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      updatePassword(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+    loading.value = false;
+  };
+</script>
diff --git a/z_ele/src/layout/components/setting-drawer.vue b/z_ele/src/layout/components/setting-drawer.vue
new file mode 100644
index 0000000..9072a79
--- /dev/null
+++ b/z_ele/src/layout/components/setting-drawer.vue
@@ -0,0 +1,1848 @@
+<!-- 主题设置抽屉 -->
+<template>
+  <ele-drawer
+    :size="268"
+    v-model="visible"
+    :title="t('layout.setting.title')"
+    :z-index="2002"
+    :body-style="{
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    }"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    style="max-width: 100%"
+    @open="handleOpen"
+  >
+    <div class="setting-segmented-wrapper">
+      <ele-segmented
+        :block="true"
+        v-model="tabActive"
+        :items="[
+          { label: t('layout.setting.tabs.theme'), value: 'theme' },
+          { label: t('layout.setting.tabs.layout'), value: 'layout' },
+          { label: t('layout.setting.tabs.skin'), value: 'skin' }
+        ]"
+      />
+    </div>
+    <div v-if="tabActive === 'theme'" class="setting-wrapper">
+      <!-- 侧栏风格 -->
+      <div class="setting-theme">
+        <ele-tooltip
+          :content="t('layout.setting.sideStyles.dark')"
+          placement="bottom"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-side-dark"
+            @click="updateValue('sidebarStyle', 'dark')"
+          >
+            <ele-text
+              v-if="sidebarStyle === 'dark'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+        <ele-tooltip
+          :content="t('layout.setting.sideStyles.light')"
+          placement="bottom"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-side-light"
+            @click="updateValue('sidebarStyle', 'light')"
+          >
+            <ele-text
+              v-if="sidebarStyle === 'light'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+      </div>
+      <!-- 顶栏风格 -->
+      <div class="setting-theme">
+        <ele-tooltip
+          :content="t('layout.setting.headStyles.light')"
+          placement="bottom"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-head-light"
+            @click="updateValue('headerStyle', 'light')"
+          >
+            <ele-text
+              v-if="headerStyle === 'light'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+        <ele-tooltip
+          :content="t('layout.setting.headStyles.dark')"
+          placement="bottom"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-head-dark"
+            @click="updateValue('headerStyle', 'dark')"
+          >
+            <ele-text
+              v-if="headerStyle === 'dark'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+        <ele-tooltip
+          :content="t('layout.setting.headStyles.primary')"
+          placement="bottom"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-head-primary"
+            @click="updateValue('headerStyle', 'primary')"
+          >
+            <ele-text
+              v-if="headerStyle === 'primary'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+      </div>
+      <!-- 主题色 -->
+      <div class="setting-colors">
+        <div
+          v-for="item in themes"
+          :key="item.name"
+          :style="{ 'background-color': item.color || item.value }"
+          class="setting-color-item"
+          @click="updateColor(item.value)"
+        >
+          <el-icon v-if="item.value ? item.value === color : !color">
+            <CheckOutlined />
+          </el-icon>
+          <ele-tooltip
+            :content="t('layout.setting.colors.' + item.name)"
+            placement="bottom"
+            :hide-after="0"
+            :offset="9"
+          >
+            <div class="setting-color-tooltip"></div>
+          </ele-tooltip>
+        </div>
+        <!-- 颜色选择器 -->
+        <el-color-picker
+          v-model="colorPickerValue"
+          :predefine="predefineColors"
+          class="setting-color-picker"
+          @change="updateColor"
+        />
+      </div>
+      <!-- 暗黑模式 -->
+      <div class="setting-item">
+        <div class="setting-item-title">{{ t('layout.setting.darkMode') }}</div>
+        <div class="setting-item-control" ref="darkSwitchRef">
+          <el-switch
+            size="small"
+            :model-value="darkMode"
+            @update:modelValue="updateDarkMode"
+          />
+        </div>
+      </div>
+      <!-- 圆角主题 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.roundedTheme') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="roundedTheme"
+            @update:modelValue="(val) => updateValue('roundedTheme', val)"
+          />
+        </div>
+      </div>
+      <el-divider />
+      <!-- 导航布局 -->
+      <ele-text type="placeholder" class="setting-title">
+        {{ t('layout.setting.layout') }}
+      </ele-text>
+      <div class="setting-theme hidden-xs-only">
+        <ele-tooltip
+          :content="t('layout.setting.layoutStyles.side')"
+          placement="top"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-side-dark setting-layout-side"
+            @click="updateValue('layout', 'default')"
+          >
+            <ele-text
+              v-if="layout === 'default'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+        <ele-tooltip
+          :content="t('layout.setting.layoutStyles.top')"
+          placement="top"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div
+            class="setting-head-dark setting-layout-top"
+            @click="updateValue('layout', 'top')"
+          >
+            <ele-text
+              v-if="layout === 'top'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+        <ele-tooltip
+          :content="t('layout.setting.layoutStyles.mix')"
+          placement="top"
+          :hide-after="0"
+          :offset="9"
+        >
+          <div class="setting-layout-mix" @click="updateValue('layout', 'mix')">
+            <ele-text
+              v-if="layout === 'mix'"
+              type="primary"
+              :icon="CheckOutlined"
+            />
+          </div>
+        </ele-tooltip>
+      </div>
+      <!-- 侧栏菜单布局 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.sidebarLayout') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="layout === 'top'"
+            :model-value="sidebarLayout === 'mix'"
+            @update:modelValue="
+              (value) => updateValue('sidebarLayout', value ? 'mix' : 'default')
+            "
+          />
+        </div>
+      </div>
+      <!-- 双侧栏二级风格 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.mixSidebarStyle') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="sidebarLayout !== 'mix'"
+            :model-value="mixSidebarStyle === 'dark'"
+            @update:modelValue="
+              (value) =>
+                updateValue('mixSidebarStyle', value ? 'dark' : 'light')
+            "
+          />
+        </div>
+      </div>
+      <!-- 混合菜单分割 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.menuItemTrigger') }}
+        </div>
+        <div class="setting-item-control" style="width: 72px">
+          <el-select
+            size="small"
+            :disabled="
+              layout === 'top' || (sidebarLayout !== 'mix' && layout !== 'mix')
+            "
+            :model-value="menuItemTrigger"
+            @update:modelValue="(val) => updateValue('menuItemTrigger', val)"
+            :popper-options="{ strategy: 'fixed' }"
+          >
+            <el-option value="route" label="Route" />
+            <el-option value="click" label="Click" />
+            <el-option value="hover" label="Hover" />
+          </el-select>
+        </div>
+      </div>
+      <el-divider />
+      <ele-text type="placeholder" class="setting-title">
+        {{ t('layout.setting.more') }}
+      </ele-text>
+      <!-- 固定主体 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.fixedBody') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="fixedBody"
+            @update:modelValue="(val) => updateValue('fixedBody', val)"
+          />
+        </div>
+      </div>
+      <!-- 固定顶栏 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.fixedHeader') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="fixedBody"
+            :model-value="fixedHeader"
+            @update:modelValue="(val) => updateValue('fixedHeader', val)"
+          />
+        </div>
+      </div>
+      <!-- 固定侧栏 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.fixedSidebar') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="fixedSidebar"
+            :disabled="fixedBody || layout === 'top'"
+            @update:modelValue="(val) => updateValue('fixedSidebar', val)"
+          />
+        </div>
+      </div>
+      <!-- 图标是否置于顶栏 -->
+      <div class="setting-item hidden-xs-only">
+        <div class="setting-item-title">
+          {{ t('layout.setting.logoInHeader') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="logoInHeader"
+            :disabled="layout === 'top'"
+            @update:modelValue="(val) => updateValue('logoInHeader', val)"
+          />
+        </div>
+      </div>
+      <!-- 侧栏彩色图标 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.colorfulIcon') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="colorfulIcon"
+            :disabled="layout === 'top'"
+            @update:modelValue="(val) => updateValue('colorfulIcon', val)"
+          />
+        </div>
+      </div>
+      <!-- 侧栏排它展开 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.uniqueOpened') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="uniqueOpened"
+            @update:modelValue="(val) => updateValue('uniqueOpened', val)"
+          />
+        </div>
+      </div>
+      <!-- 内容区域铺满 -->
+      <div class="setting-item hidden-xs-only">
+        <div class="setting-item-title">
+          {{ t('layout.setting.fluid') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="fluid"
+            @update:modelValue="(val) => updateValue('fluid', val)"
+          />
+        </div>
+      </div>
+      <el-divider />
+      <ele-text type="placeholder" class="setting-title">
+        {{ t('layout.setting.tab') }}
+      </ele-text>
+      <!-- 页签 -->
+      <div class="setting-item">
+        <div class="setting-item-title">{{ t('layout.setting.showTabs') }}</div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="tabBar"
+            @update:modelValue="(value) => updateValue('tabBar', value)"
+          />
+        </div>
+      </div>
+      <!-- 固定主页页签 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.fixedHome') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="!tabBar"
+            :model-value="fixedHome"
+            @update:modelValue="(val) => updateValue('fixedHome', val)"
+          />
+        </div>
+      </div>
+      <!-- 页签置于顶栏 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.tabInHeader') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="!tabBar"
+            :model-value="tabInHeader"
+            @update:modelValue="(val) => updateValue('tabInHeader', val)"
+          />
+        </div>
+      </div>
+      <!-- 页签显示图标 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.tabIcon') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="!tabBar"
+            :model-value="tabIcon"
+            @update:modelValue="(val) => updateValue('tabIcon', val)"
+          />
+        </div>
+      </div>
+      <!-- 刷新保留页签 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.tabsCache') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :disabled="!tabBar"
+            :model-value="tabsCache"
+            @update:modelValue="(val) => updateValue('tabsCache', val)"
+          />
+        </div>
+      </div>
+      <!-- 页签风格 -->
+      <div class="setting-item">
+        <div class="setting-item-title">{{ t('layout.setting.tabStyle') }}</div>
+        <div class="setting-item-control" style="width: 90px">
+          <el-select
+            size="small"
+            :disabled="!tabBar"
+            :model-value="tabStyle"
+            @update:modelValue="(val) => updateValue('tabStyle', val)"
+            :popper-options="{ strategy: 'fixed' }"
+          >
+            <el-option
+              value="simple"
+              :label="t('layout.setting.tabStyles.default')"
+            />
+            <el-option
+              value="indicator"
+              :label="t('layout.setting.tabStyles.dot')"
+            />
+            <el-option value="tag" :label="t('layout.setting.tabStyles.tag')" />
+            <el-option
+              value="button"
+              :label="t('layout.setting.tabStyles.card')"
+            />
+          </el-select>
+        </div>
+      </div>
+      <el-divider />
+      <ele-text type="placeholder" class="setting-title">
+        {{ t('layout.setting.other') }}
+      </ele-text>
+      <!-- 切换路由是否缓存 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.pageKeepAlive') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="pageKeepAlive"
+            @update:modelValue="(val) => updateValue('pageKeepAlive', val)"
+          />
+        </div>
+      </div>
+      <!-- 全局页脚 -->
+      <div class="setting-item">
+        <div class="setting-item-title">{{ t('layout.setting.footer') }}</div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="footer"
+            @update:modelValue="(val) => updateValue('footer', val)"
+          />
+        </div>
+      </div>
+      <!-- 色弱模式 -->
+      <div class="setting-item">
+        <div class="setting-item-title">{{ t('layout.setting.weakMode') }}</div>
+        <div class="setting-item-control" ref="weakSwitchRef">
+          <el-switch
+            size="small"
+            :model-value="weakMode"
+            @update:modelValue="updateWeakMode"
+          />
+        </div>
+      </div>
+      <!-- 响应式开关 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.responsive') }}
+        </div>
+        <div class="setting-item-control">
+          <el-switch
+            size="small"
+            :model-value="responsive"
+            @update:modelValue="updateResponsive"
+          />
+        </div>
+      </div>
+      <!-- 切换动画 -->
+      <div class="setting-item">
+        <div class="setting-item-title">
+          {{ t('layout.setting.transitionName') }}
+        </div>
+        <div class="setting-item-control" style="width: 110px">
+          <el-select
+            size="small"
+            :model-value="transitionName"
+            @update:modelValue="(val) => updateValue('transitionName', val)"
+            :popper-options="{ strategy: 'fixed' }"
+          >
+            <el-option
+              value="slide-right"
+              :label="t('layout.setting.transitions.slideRight')"
+            />
+            <el-option
+              value="slide-bottom"
+              :label="t('layout.setting.transitions.slideBottom')"
+            />
+            <el-option
+              value="zoom-in"
+              :label="t('layout.setting.transitions.zoomIn')"
+            />
+            <el-option
+              value="zoom-out"
+              :label="t('layout.setting.transitions.zoomOut')"
+            />
+            <el-option
+              value="fade"
+              :label="t('layout.setting.transitions.fade')"
+            />
+          </el-select>
+        </div>
+      </div>
+      <el-divider />
+      <!-- 重置 -->
+      <div class="setting-footer">
+        <el-button size="small" class="ele-fluid" @click="resetSetting">
+          {{ t('layout.setting.reset') }}
+        </el-button>
+      </div>
+    </div>
+    <div v-else-if="tabActive === 'layout'" class="setting-wrapper">
+      <!-- 常用布局 -->
+      <div class="setting-layout-list">
+        <div
+          v-for="item in predefineLayouts"
+          :key="item.name"
+          class="setting-layout-item"
+          @click="handleLayoutItemClick(item)"
+        >
+          <div class="setting-layout-item-cover">
+            <component v-if="item.cover" :is="item.cover" />
+          </div>
+          <div class="setting-layout-item-label">
+            {{ t('layout.setting.layouts.' + item.name) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="tabActive === 'skin'" class="setting-wrapper">
+      <!-- 皮肤背景 -->
+      <div class="setting-skin-list">
+        <div class="setting-skin-item" @click="updateValue('skinConfig', null)">
+          <div class="setting-skin-item-cover">
+            <el-icon>
+              <StopOutlined style="stroke-width: 2.6" />
+            </el-icon>
+          </div>
+        </div>
+        <div
+          v-for="item in PREDEFINE_SKINS"
+          :key="item.name"
+          :class="[
+            'setting-skin-item',
+            {
+              'is-active':
+                !showUserSkin && skinConfig && skinConfig.name === item.name
+            }
+          ]"
+          @click="updateValue('skinConfig', item)"
+        >
+          <div
+            :style="{
+              background: darkMode ? item.darkConfig?.cover : item.cover
+            }"
+            class="setting-skin-item-cover"
+          ></div>
+          <div class="setting-skin-item-label">
+            {{ t('layout.setting.skins.' + item.name) }}
+          </div>
+        </div>
+        <div
+          :class="['setting-skin-item', { 'is-active': showUserSkin }]"
+          @click="initUserSkin(true)"
+        >
+          <div
+            class="setting-skin-item-cover"
+            :style="{
+              background: showUserSkin
+                ? darkMode
+                  ? userSkin.darkConfig?.wallpaper
+                  : userSkin.wallpaper
+                : void 0
+            }"
+          >
+            <IconImage
+              v-if="
+                !showUserSkin ||
+                !(darkMode
+                  ? userSkin.darkConfig?.wallpaper
+                  : userSkin.wallpaper)
+              "
+            />
+          </div>
+          <div class="setting-skin-item-label">
+            {{ t('layout.setting.skins.custom') }}
+          </div>
+        </div>
+      </div>
+      <!-- 自定义皮肤背景 -->
+      <template v-if="showUserSkin">
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.wallpaper') }}
+          </div>
+          <div class="setting-item-control">
+            <el-upload
+              action=""
+              accept="image/*"
+              :show-file-list="false"
+              :before-upload="(file) => saveUserSkin(file)"
+            >
+              <el-icon
+                class="setting-skin-item-cover setting-bg-upload"
+                :style="{ background: userSkin.wallpaper }"
+              >
+                <PlusOutlined style="stroke-width: 3" />
+              </el-icon>
+            </el-upload>
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.maskColor') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.maskColor"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.headerBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.headerBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.sidebarBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.sidebarBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.cardBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.cardBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.overlayBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-upload
+              action=""
+              accept="image/*"
+              :show-file-list="false"
+              :before-upload="(file) => saveUserSkin(file, true)"
+            >
+              <el-icon
+                class="setting-skin-item-cover setting-bg-upload"
+                :style="{ background: userSkin.overlayBg }"
+              >
+                <PlusOutlined style="stroke-width: 3" />
+              </el-icon>
+            </el-upload>
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.overlayMaskColor') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.overlayMaskColor"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <!-- 自定义暗黑模式皮肤背景 -->
+        <el-divider />
+        <ele-text type="placeholder" class="setting-title">
+          {{ t('layout.setting.skinConfig.darkConfig') }}
+        </ele-text>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.wallpaper') }}
+          </div>
+          <div class="setting-item-control">
+            <el-upload
+              action=""
+              accept="image/*"
+              :show-file-list="false"
+              :before-upload="(file) => saveUserSkin(file, false, true)"
+            >
+              <el-icon
+                class="setting-skin-item-cover setting-bg-upload"
+                :style="{ background: userSkin.darkConfig.wallpaper }"
+              >
+                <PlusOutlined style="stroke-width: 3" />
+              </el-icon>
+            </el-upload>
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.maskColor') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.darkConfig.maskColor"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.headerBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.darkConfig.headerBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.sidebarBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.darkConfig.sidebarBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.cardBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.darkConfig.cardBg"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.overlayBg') }}
+          </div>
+          <div class="setting-item-control">
+            <el-upload
+              action=""
+              accept="image/*"
+              :show-file-list="false"
+              :before-upload="(file) => saveUserSkin(file, true, true)"
+            >
+              <el-icon
+                class="setting-skin-item-cover setting-bg-upload"
+                :style="{ background: userSkin.darkConfig.overlayBg }"
+              >
+                <PlusOutlined style="stroke-width: 3" />
+              </el-icon>
+            </el-upload>
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="setting-item-title">
+            {{ t('layout.setting.skinConfig.overlayMaskColor') }}
+          </div>
+          <div class="setting-item-control">
+            <el-color-picker
+              :show-alpha="true"
+              v-model="userSkin.darkConfig.overlayMaskColor"
+              class="setting-bg-picker"
+              @change="saveUserSkin()"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+  </ele-drawer>
+</template>
+
+<script lang="ts" setup>
+  import type { Component } from 'vue';
+  import { ref, markRaw } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { storeToRefs } from 'pinia';
+  import type { SkinConfig } from 'ele-admin-plus/es/utils/theme-util';
+  import { isColorValue } from 'ele-admin-plus/es/utils/theme-util';
+  import {
+    CheckOutlined,
+    StopOutlined,
+    PlusOutlined
+  } from '@/components/icons';
+  import { useThemeStore, PREDEFINE_SKINS } from '@/store/modules/theme';
+  import type { ThemeStateProp, ThemeState } from '@/store/modules/theme';
+  import { doWithTransition } from '@/utils/common';
+  import IconImage from './covers/icon-image.vue';
+  import CoverDefault from './covers/cover-default.vue';
+  import CoverMixedSidebar from './covers/cover-mixed-sidebar.vue';
+  import CoverCompactSidebar from './covers/cover-compact-sidebar.vue';
+  import CoverTabInHeader from './covers/cover-tab-in-header.vue';
+  import CoverVerticalLayout from './covers/cover-vertical-layout.vue';
+  import CoverTopBarLayout from './covers/cover-top-bar-layout.vue';
+  import CoverLimitedWidth from './covers/cover-limited-width.vue';
+  import CoverCardLayout from './covers/cover-card-layout.vue';
+  import CoverCardSidebar from './covers/cover-card-sidebar.vue';
+  import CoverCardMixedSidebar from './covers/cover-card-mixed-sidebar.vue';
+
+  /** 抽屉是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  const { t } = useI18n();
+  const themeStore = useThemeStore();
+
+  const {
+    tabBar,
+    layout,
+    sidebarLayout,
+    headerStyle,
+    sidebarStyle,
+    mixSidebarStyle,
+    tabStyle,
+    fixedHeader,
+    fixedSidebar,
+    fixedBody,
+    fluid,
+    logoInHeader,
+    transitionName,
+    colorfulIcon,
+    uniqueOpened,
+    fixedHome,
+    tabInHeader,
+    menuItemTrigger,
+    weakMode,
+    darkMode,
+    color,
+    roundedTheme,
+    footer,
+    tabIcon,
+    tabsCache,
+    pageKeepAlive,
+    skinConfig,
+    responsive
+  } = storeToRefs(themeStore);
+
+  interface ThemeItem {
+    /** 主题名称 */
+    name: string;
+    /** 主题颜色值 */
+    value?: string;
+    /** 主题抽屉中显示的色块颜色 */
+    color?: string;
+  }
+
+  /** 预设主题颜色 */
+  const themes = ref<ThemeItem[]>([
+    { name: 'default', color: '#2f54eb' },
+    { name: 'dust', value: '#5f80c7' },
+    { name: 'sunset', value: '#faad14' },
+    { name: 'volcano', value: '#f5686f' },
+    { name: 'purple', value: '#9266f9' },
+    { name: 'green', value: '#33cc99' },
+    { name: 'geekblue', value: '#32a2d4' }
+  ]);
+
+  /** 颜色选择器预设颜色 */
+  const predefineColors = ref<string[]>([
+    '#f5222d',
+    '#fa541c',
+    '#fa8c16',
+    '#faad14',
+    '#a0d911',
+    '#52c41a',
+    '#13c2c2',
+    '#1677ff',
+    '#722ed1',
+    '#eb2f96'
+  ]);
+
+  /** 选项卡选中 */
+  const tabActive = ref('theme');
+
+  /** 暗黑主题切换开关 */
+  const darkSwitchRef = ref<HTMLElement | null>(null);
+
+  /** 色弱模式切换开关 */
+  const weakSwitchRef = ref<HTMLElement | null>(null);
+
+  /** 颜色选择器选中颜色 */
+  const colorPickerValue = ref<string | undefined>(void 0);
+
+  interface LayoutItem {
+    /** 布局名称 */
+    name: string;
+    /** 缩略图 */
+    cover: string | Component;
+    /** 布局配置 */
+    config: Partial<ThemeState>;
+  }
+
+  /** 常用布局 */
+  const predefineLayouts = ref<LayoutItem[]>([
+    {
+      name: 'default',
+      cover: markRaw(CoverDefault),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'default',
+        headerStyle: 'light',
+        sidebarStyle: 'dark',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: false,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'mixedSidebar',
+      cover: markRaw(CoverMixedSidebar),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'mix',
+        headerStyle: 'light',
+        sidebarStyle: 'dark',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: false,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'compactSidebar',
+      cover: markRaw(CoverCompactSidebar),
+      config: {
+        collapse: true,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'mix',
+        headerStyle: 'light',
+        sidebarStyle: 'dark',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: false,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'tabInHeader',
+      cover: markRaw(CoverTabInHeader),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'default',
+        headerStyle: 'light',
+        sidebarStyle: 'dark',
+        mixSidebarStyle: 'light',
+        tabStyle: 'tag',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: false,
+        tabInHeader: true,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'verticalLayout',
+      cover: markRaw(CoverVerticalLayout),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'default',
+        headerStyle: 'primary',
+        sidebarStyle: 'light',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: true,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'topBarLayout',
+      cover: markRaw(CoverTopBarLayout),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: false,
+        layout: 'top',
+        sidebarLayout: 'default',
+        headerStyle: 'primary',
+        sidebarStyle: 'light',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: true,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'limitedWidth',
+      cover: markRaw(CoverLimitedWidth),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: false,
+        layout: 'top',
+        sidebarLayout: 'default',
+        headerStyle: 'light',
+        sidebarStyle: 'light',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: false,
+        logoInHeader: true,
+        tabInHeader: false,
+        sidebarCustomStyle: null,
+        sideboxCustomStyle: null,
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: null
+      }
+    },
+    {
+      name: 'cardLayout',
+      cover: markRaw(CoverCardLayout),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: true,
+        layout: 'default',
+        sidebarLayout: 'mix',
+        headerStyle: 'primary',
+        sidebarStyle: 'dark',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: false,
+        tabInHeader: false,
+        sidebarCustomStyle: {
+          margin: '16px 0 16px 16px',
+          borderRadius: '8px'
+        },
+        sideboxCustomStyle: {
+          margin: '16px 0 16px 16px',
+          borderRadius: '8px'
+        },
+        sideCustomStyle: null,
+        headerCustomStyle: {
+          margin: '16px 16px 0 16px',
+          borderRadius: '8px 8px 0 0'
+        },
+        tabsCustomStyle: {
+          margin: '0 16px 0 16px',
+          borderRadius: '0 0 8px 8px'
+        },
+        contentCustomStyle: {
+          clipPath: 'rect(16px 100% calc(100% - 16px) 16px round 8px 0 0 8px)'
+        }
+      }
+    },
+    {
+      name: 'cardSidebar',
+      cover: markRaw(CoverCardSidebar),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: false,
+        layout: 'default',
+        sidebarLayout: 'default',
+        headerStyle: 'light',
+        sidebarStyle: 'light',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: true,
+        tabInHeader: false,
+        sidebarCustomStyle: {
+          margin: '16px 0 16px 16px',
+          borderRadius: '8px'
+        },
+        sideboxCustomStyle: {
+          margin: '16px 0 16px 16px',
+          borderRadius: '8px'
+        },
+        sideCustomStyle: null,
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: {
+          clipPath: 'rect(16px 100% calc(100% - 16px) 16px round 8px 0 0 8px)'
+        }
+      }
+    },
+    {
+      name: 'cardMixedSidebar',
+      cover: markRaw(CoverCardMixedSidebar),
+      config: {
+        collapse: false,
+        compact: false,
+        tabBar: false,
+        layout: 'default',
+        sidebarLayout: 'mix',
+        headerStyle: 'light',
+        sidebarStyle: 'light',
+        mixSidebarStyle: 'light',
+        fixedBody: true,
+        fluid: true,
+        logoInHeader: true,
+        tabInHeader: false,
+        sidebarCustomStyle: {
+          marginTop: '16px',
+          marginBottom: '16px',
+          borderRadius: '0 8px 8px 0'
+        },
+        sideboxCustomStyle: {
+          margin: '16px 0 16px 16px',
+          borderRadius: '8px 0 0 8px'
+        },
+        sideCustomStyle: {
+          clipPath: 'rect(16px 100% calc(100% - 16px) 16px round 8px)'
+        },
+        headerCustomStyle: null,
+        tabsCustomStyle: null,
+        contentCustomStyle: {
+          clipPath: 'rect(16px 100% calc(100% - 16px) 16px round 8px 0 0 8px)'
+        }
+      }
+    }
+  ]);
+
+  interface UserSkin extends Omit<SkinConfig, 'darkConfig'> {
+    darkConfig: Omit<SkinConfig, 'darkConfig'>;
+  }
+
+  /** 自定义皮肤背景 */
+  const userSkin = ref<UserSkin>({ darkConfig: {} });
+
+  /** 是否显示自定义皮肤背景 */
+  const showUserSkin = ref(false);
+
+  /** 初始化自定义主题 */
+  const initUserSkin = (isCustom?: boolean) => {
+    const cfg = skinConfig.value || {};
+    const wallpaper = cfg.wallpaper || cfg.darkConfig?.wallpaper;
+    const skin: UserSkin = {
+      skinName: cfg.name,
+      wallpaper: cfg.wallpaper || wallpaper,
+      maskColor:
+        (isColorValue(cfg.maskColor) ? cfg.maskColor : void 0) ||
+        'rgba(255, 255, 255, 0.4)',
+      headerBg: cfg.headerBg || 'rgba(255, 255, 255, 0.2)',
+      sidebarBg: cfg.sidebarBg || 'rgba(255, 255, 255, 0.2)',
+      cardBg: cfg.cardBg || 'rgba(255, 255, 255, 0.6)',
+      overlayBg: cfg.overlayBg || 'rgba(255, 255, 255, 0.84)',
+      overlayMaskColor:
+        (isColorValue(cfg.overlayMaskColor) ? cfg.overlayMaskColor : void 0) ||
+        'rgba(255, 255, 255, 0.4)',
+      darkConfig: {
+        wallpaper: cfg.darkConfig?.wallpaper || wallpaper,
+        maskColor:
+          (isColorValue(cfg.darkConfig?.maskColor)
+            ? cfg.darkConfig?.maskColor
+            : void 0) || 'rgba(0, 0, 0, 0.4)',
+        headerBg: cfg.darkConfig?.headerBg || 'rgba(0, 0, 0, 0.2)',
+        sidebarBg: cfg.darkConfig?.sidebarBg || 'rgba(0, 0, 0, 0.2)',
+        cardBg: cfg.darkConfig?.cardBg || 'rgba(0, 0, 0, 0.4)',
+        overlayBg: cfg.darkConfig?.overlayBg || 'hsla(0, 0%, 20%, 0.88)',
+        overlayMaskColor:
+          (isColorValue(cfg.darkConfig?.overlayMaskColor)
+            ? cfg.darkConfig?.overlayMaskColor
+            : void 0) || 'rgba(0, 0, 0, 0.4)'
+      }
+    };
+    userSkin.value = skin;
+    if (isCustom) {
+      showUserSkin.value = true;
+    } else if (!skinConfig.value) {
+      showUserSkin.value = false;
+    } else {
+      showUserSkin.value = !cfg.name;
+    }
+  };
+
+  /** 更新主题配置 */
+  const updateValue = (prop: ThemeStateProp, value?: any) => {
+    themeStore
+      .setValue(prop, value)
+      .then(() => {
+        if (prop === 'skinConfig') {
+          initUserSkin();
+          if (value) {
+            if (headerStyle.value !== 'light') {
+              updateValue('headerStyle', 'light');
+            }
+            if (sidebarStyle.value !== 'light') {
+              updateValue('sidebarStyle', 'light');
+            }
+            if (weakMode.value) {
+              updateValue('weakMode', false);
+            }
+            /* if (value.name === PREDEFINE_SKINS[1]?.name && !darkMode.value) {
+              updateValue('darkMode', true);
+            } */
+          }
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  /** 初始化主题色选择器选中 */
+  const initColorValue = () => {
+    if (color.value && !themes.value.some((t) => t.value === color.value)) {
+      colorPickerValue.value = color.value;
+    } else {
+      colorPickerValue.value = void 0;
+    }
+  };
+
+  /** 切换主题色 */
+  const updateColor = (val?: string | null) => {
+    updateValue('color', val);
+    initColorValue();
+  };
+
+  /** 切换暗黑模式 */
+  const updateDarkMode = (val: boolean) => {
+    doWithTransition(
+      async () => updateValue('darkMode', val),
+      darkSwitchRef.value?.querySelector?.('.el-switch__action'),
+      !val
+    );
+  };
+
+  /** 切换色弱模式 */
+  const updateWeakMode = (val: boolean) => {
+    doWithTransition(
+      async () => updateValue('weakMode', val),
+      weakSwitchRef.value?.querySelector?.('.el-switch__action'),
+      !val,
+      true
+    );
+  };
+
+  /** 开关移动端响应式 */
+  const updateResponsive = (val: boolean) => {
+    updateValue('responsive', val);
+    location.reload();
+  };
+
+  /** 重置 */
+  const resetSetting = () => {
+    const lastResponsive = responsive.value;
+    themeStore
+      .resetSetting()
+      .then(() => {
+        initColorValue();
+        if (responsive.value !== lastResponsive) {
+          location.reload();
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  /** 保存自定义皮肤背景 */
+  const saveUserSkin = (
+    file?: File,
+    isOverlayBg?: boolean,
+    isDark?: boolean
+  ) => {
+    updateValue('skinConfig', async (storeWallpaperFile: any) => {
+      const skin: UserSkin = {
+        ...userSkin.value,
+        darkConfig: { ...(userSkin.value.darkConfig || {}) }
+      };
+      if (file) {
+        const fileId = await storeWallpaperFile(file);
+        if (isDark) {
+          if (isOverlayBg) {
+            skin.darkConfig.overlayBg = fileId;
+          } else {
+            skin.darkConfig.wallpaper = fileId;
+          }
+        } else {
+          if (isOverlayBg) {
+            skin.overlayBg = fileId;
+          } else {
+            skin.wallpaper = fileId;
+          }
+        }
+      }
+      const wallpaper = skin.wallpaper || skin.darkConfig.wallpaper;
+      if (!skin.wallpaper) {
+        skin.wallpaper = wallpaper;
+      }
+      if (!skin.darkConfig.wallpaper) {
+        skin.darkConfig.wallpaper = wallpaper;
+      }
+      return skin;
+    });
+    return false;
+  };
+
+  /** 切换常用布局 */
+  const handleLayoutItemClick = (item: LayoutItem) => {
+    Object.keys(item.config).forEach((key: ThemeStateProp) => {
+      updateValue(key, item.config[key]);
+    });
+  };
+
+  /** 抽屉打开事件 */
+  const handleOpen = () => {
+    initColorValue();
+    initUserSkin();
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+  .setting-wrapper {
+    flex: 1;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 10px 12px 18px 12px;
+    $header-primary-bg: linear-gradient(
+      12deg,
+      getCssVar('color-primary'),
+      getCssVar('color-primary', 'light-3') 28%,
+      getCssVar('color-primary', 'light-5') 46%,
+      getCssVar('color-primary', 'light-3') 72%,
+      getCssVar('color-primary') 92%,
+      getCssVar('color-primary', 'dark-2')
+    );
+
+    .setting-title {
+      font-size: 13px;
+      padding: 0 6px;
+      margin-bottom: 8px;
+    }
+
+    /* 主题风格 */
+    .setting-theme {
+      padding: 0 6px;
+      box-sizing: border-box;
+
+      & > div {
+        width: 52px;
+        height: 36px;
+        line-height: 1;
+        font-size: 16px;
+        margin: 0 18px 18px 0;
+        padding: 14px 0 0 24px;
+        background: getCssVar('bg-color', 'page');
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+        border-radius: getCssVar('border-radius', 'base');
+        transition: background-color 0.2s;
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+
+        &::before,
+        &::after {
+          content: '';
+          width: 100%;
+          height: 10px;
+          background: getCssVar('bg-color');
+          transition: background-color 0.2s;
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+
+        &::after {
+          width: 14px;
+          height: 100%;
+        }
+
+        &.setting-side-dark::after,
+        &.setting-head-dark::before,
+        &.setting-layout-mix::before,
+        &.setting-layout-mix::after {
+          background: #262626;
+        }
+
+        &.setting-head-light::before,
+        &.setting-head-dark::before,
+        &.setting-head-primary::before {
+          z-index: 1;
+        }
+
+        &.setting-side-light::before,
+        &.setting-side-dark:not(.setting-layout-side)::before,
+        &.setting-head-light::after,
+        &.setting-head-dark::after,
+        &.setting-head-primary::after {
+          opacity: 0.5;
+        }
+
+        &.setting-head-primary::before {
+          background: $header-primary-bg !important;
+        }
+
+        &.setting-layout-top {
+          padding-left: 18px;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    /* 主题色选择 */
+    .setting-colors {
+      color: #fff;
+      padding: 0 6px;
+      margin-bottom: 18px;
+      box-sizing: border-box;
+      line-height: 0;
+    }
+
+    .setting-color-item {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      border-radius: getCssVar('border-radius', 'small');
+      margin: 8px 8px 0 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: top;
+      position: relative;
+      text-align: center;
+      cursor: pointer;
+
+      .setting-color-tooltip {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+
+    .setting-colors .setting-color-item:last-child {
+      margin-right: 0;
+    }
+
+    /* 主题配置项 */
+    .setting-item {
+      display: flex;
+      align-items: center;
+      padding: 0 6px;
+      box-sizing: border-box;
+      border-radius: getCssVar('border-radius', 'base');
+      transition: background-color 0.2s;
+      margin-bottom: 6px;
+
+      .setting-item-title {
+        flex: 1;
+        line-height: 32px;
+      }
+
+      .setting-item-control {
+        line-height: 1;
+      }
+
+      &:hover {
+        background: getCssVar('fill-color', 'light');
+      }
+    }
+
+    .el-divider.el-divider--horizontal {
+      width: calc(100% - 12px);
+      margin: 14px auto 10px auto;
+      opacity: 0.6;
+    }
+
+    /* 颜色选择器 */
+    .setting-colors :deep(.el-color-picker) {
+      margin-top: 8px;
+      line-height: 0;
+
+      .el-color-picker__trigger {
+        padding: 0;
+        width: 20px;
+        height: 20px;
+        border: none;
+      }
+
+      .el-color-picker__color {
+        border: none;
+      }
+
+      .el-color-picker__empty {
+        background: conic-gradient(
+          from 90deg at 50% 50%,
+          rgb(255, 0, 0) -19.41deg,
+          rgb(255, 0, 0) 18.76deg,
+          rgb(255, 138, 0) 59.32deg,
+          rgb(255, 230, 0) 99.87deg,
+          rgb(20, 255, 0) 141.65deg,
+          rgb(0, 163, 255) 177.72deg,
+          rgb(5, 0, 255) 220.23deg,
+          rgb(173, 0, 255) 260.13deg,
+          rgb(255, 0, 199) 300.69deg,
+          rgb(255, 0, 0) 340.59deg,
+          rgb(255, 0, 0) 378.76deg
+        );
+        height: 100%;
+        width: 100%;
+
+        & > svg {
+          display: none;
+        }
+      }
+    }
+
+    /* 常用布局 */
+    .setting-layout-list {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 28px 18px;
+      padding: 4px;
+      box-sizing: border-box;
+    }
+
+    .setting-layout-item {
+      height: 98px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      &.is-active {
+        border-color: getCssVar('color-primary');
+      }
+    }
+
+    .setting-layout-item-cover {
+      flex: 1;
+      width: 100%;
+      box-sizing: border-box;
+      background: getCssVar('bg-color', 'page');
+      border-radius: getCssVar('border-radius', 'base');
+      border: 1px solid getCssVar('border-color', 'light');
+      transition: all 0.3s;
+      overflow: hidden;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    .setting-layout-item-label {
+      flex-shrink: 0;
+      line-height: 1;
+      font-size: 13px;
+      padding: 12px 0 0 0;
+      box-sizing: border-box;
+      text-align: center;
+    }
+
+    /* 皮肤背景 */
+    .setting-skin-list {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .setting-skin-item {
+      height: 88px;
+      padding: 6px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      border-radius: getCssVar('border-radius', 'base');
+      border: 1px solid getCssVar('border-color');
+      transition: all 0.2s;
+      cursor: pointer;
+
+      &:hover {
+        border-color: getCssVar('color-primary');
+        transform: translateY(-4px);
+      }
+
+      &.is-active {
+        border-color: getCssVar('color-primary');
+      }
+    }
+
+    .setting-skin-item-cover {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 34px;
+      color: getCssVar('text-color', 'placeholder');
+      border-radius: inherit;
+      box-sizing: border-box;
+    }
+
+    .setting-skin-item-label {
+      flex-shrink: 0;
+      line-height: 1;
+      font-size: 13px;
+      padding: 6px 0 0 0;
+      box-sizing: border-box;
+      text-align: center;
+    }
+
+    /* 背景上传 */
+    .setting-bg-upload {
+      width: 28px;
+      height: 28px;
+      font-size: 15px;
+      color: getCssVar('text-color', 'placeholder');
+      border: 1px dashed getCssVar('border-color');
+      border-radius: getCssVar('border-radius', 'base');
+      box-sizing: border-box;
+      transition: (color 0.2s, border-color 0.2s);
+
+      &:hover {
+        color: getCssVar('color-primary');
+        border-color: getCssVar('color-primary');
+      }
+    }
+
+    :deep(.el-upload) {
+      display: flex;
+    }
+
+    /* 背景颜色选择 */
+    :deep(.setting-bg-picker) {
+      display: flex;
+      margin-right: 1.5px;
+
+      .el-color-picker__trigger {
+        padding: 0;
+        width: 25px;
+        height: 25px;
+      }
+
+      .el-color-picker__color {
+        border: none;
+      }
+
+      .el-color-picker__color-inner * {
+        display: none;
+      }
+    }
+
+    /* 布局缩略图 */
+    :deep(div) {
+      .setting-layout-cover-bg-dark {
+        background: #262626;
+      }
+
+      .setting-layout-cover-bg-light {
+        background: getCssVar('bg-color');
+      }
+
+      .setting-layout-cover-bg-primary {
+        background: $header-primary-bg;
+      }
+
+      .setting-layout-cover-border-lighter {
+        border-color: getCssVar('border-color', 'lighter');
+      }
+
+      .setting-layout-cover-bg-fill {
+        background: getCssVar('fill-color');
+      }
+
+      .setting-layout-cover-bg-fill-light {
+        background: getCssVar('border-color', 'light');
+      }
+
+      .setting-layout-cover-bg-fill-dark {
+        background: getCssVar('border-color');
+      }
+    }
+  }
+
+  /* 选项卡 */
+  .setting-segmented-wrapper {
+    flex-shrink: 0;
+    padding: 10px 14px 6px 14px;
+    box-sizing: border-box;
+  }
+
+  /* 底栏 */
+  .setting-footer {
+    padding: 6px 6px 0 6px;
+  }
+</style>
diff --git a/z_ele/src/layout/index.vue b/z_ele/src/layout/index.vue
new file mode 100644
index 0000000..c7d9635
--- /dev/null
+++ b/z_ele/src/layout/index.vue
@@ -0,0 +1,528 @@
+<template>
+  <ele-pro-layout
+    :menus="menus"
+    :tabs="tabs"
+    :collapse="collapse"
+    :compact="compact"
+    :maximized="maximized"
+    :tab-bar="tabBar ? (tabInHeader ? 'header' : true) : false"
+    :breadcrumb="layout === 'default' && (!tabBar || !tabInHeader)"
+    :layout="layout"
+    :sidebar-layout="sidebarLayout"
+    :header-style="headerStyle"
+    :sidebar-style="sidebarStyle"
+    :mix-sidebar-style="mixSidebarStyle"
+    :tab-style="tabStyle"
+    :fixed-header="fixedHeader"
+    :fixed-sidebar="fixedSidebar"
+    :fixed-body="fixedBody"
+    :fluid="fluid"
+    :logo-in-header="logoInHeader"
+    :colorful-icon="colorfulIcon"
+    :sidebox-menu-props="colorfulIcon ? { colorful: true } : void 0"
+    :unique-opened="uniqueOpened"
+    :fixed-home="fixedHome"
+    :home-path="HOME_PATH"
+    :redirect-path="REDIRECT_PATH"
+    :locale="locale"
+    :i18n="i18n"
+    :tab-sortable="!mobileDevice"
+    :tab-context-menu="{
+      iconProps: { size: 15 },
+      popperOptions: {
+        strategy: 'fixed',
+        modifiers: [{ name: 'offset', options: { offset: [0, 8] } }]
+      }
+    }"
+    :tab-context-menus="tabContext"
+    :nav-trigger="layout === 'top' ? void 0 : menuItemTrigger"
+    :box-trigger="menuItemTrigger"
+    :keep-alive="pageKeepAlive"
+    :transition-name="transitionName"
+    :ellipsis-props="{ hideTimeout: 800 }"
+    :sidebarCustomStyle="sidebarCustomStyle"
+    :sideboxCustomStyle="sideboxCustomStyle"
+    :sideCustomStyle="sideCustomStyle"
+    :headerCustomStyle="headerCustomStyle"
+    :tabsCustomStyle="tabsCustomStyle"
+    :contentCustomStyle="contentCustomStyle"
+    :responsive="responsive"
+    @update:collapse="updateCollapse"
+    @update:maximized="updateMaximized"
+    @tabAdd="addPageTab"
+    @tabClick="handleTabClick"
+    @tabRemove="removePageTab"
+    @tabContextMenu="handleTabContextMenu"
+    @tabSortChange="setPageTabs"
+    @bodySizeChange="handleBodySizeChange"
+  >
+    <router-layout />
+    <!-- logo -->
+    <template #logo>
+      <img src="@/assets/logo.svg" style="width: 30px; height: 30px" />
+    </template>
+    <template #logoTitle>
+      <h1>{{ PROJECT_NAME }}</h1>
+    </template>
+    <!-- 顶栏左侧按钮 -->
+    <template #left="{ sidebar }">
+      <!-- 折叠侧栏 -->
+      <layout-tool v-if="sidebar" @click="updateCollapse(!collapse)">
+        <el-icon style="transform: scale(1.14)">
+          <MenuUnfoldOutlined v-if="collapse" />
+          <MenuFoldOutlined v-else />
+        </el-icon>
+      </layout-tool>
+      <!-- 刷新 -->
+      <layout-tool
+        :class="{ 'hidden-sm-and-down': tabBar && tabInHeader }"
+        @click="reloadPageTab()"
+      >
+        <el-icon style="transform: scale(1.09)">
+          <ReloadOutlined />
+        </el-icon>
+      </layout-tool>
+    </template>
+    <!-- 顶栏右侧按钮 -->
+    <template #right>
+      <!-- 全屏切换 -->
+      <layout-tool class="hidden-sm-and-down" @click="toggleFullscreen">
+        <el-icon style="transform: scale(1.18)">
+          <CompressOutlined v-if="isFullscreen" style="stroke-width: 4" />
+          <ExpandOutlined v-else style="stroke-width: 4" />
+        </el-icon>
+      </layout-tool>
+      <!-- 语言切换 -->
+      <layout-tool :class="{ 'hidden-sm-and-down': tabBar && tabInHeader }">
+        <i18n-icon :icon-style="{ transform: 'scale(1.15)' }" />
+      </layout-tool>
+      <!-- 消息通知 -->
+      <layout-tool :class="{ 'hidden-sm-and-down': tabBar && tabInHeader }">
+        <header-notice />
+      </layout-tool>
+      <!-- 用户信息 -->
+      <layout-tool>
+        <header-user />
+      </layout-tool>
+      <!-- 夜间模式 -->
+      <layout-tool
+        ref="darkSwitchRef"
+        :class="[
+          'dark-switch',
+          { 'hidden-sm-and-down': tabBar && tabInHeader }
+        ]"
+      >
+        <el-switch
+          :active-action-icon="MoonOutlined"
+          :inactive-action-icon="SunOutlined"
+          :model-value="darkMode"
+          @update:modelValue="updateDarkMode"
+        />
+      </layout-tool>
+      <!-- 主题设置 -->
+      <layout-tool @click="openSetting">
+        <el-icon>
+          <MoreOutlined />
+        </el-icon>
+      </layout-tool>
+    </template>
+    <!-- 页签栏右侧下拉菜单 -->
+    <template v-if="tabBar && !tabInHeader" #tabExtra="{ active }">
+      <tab-dropdown
+        :items="tabExtra"
+        :dropdown-props="{
+          iconProps: { size: 15 },
+          popperOptions: {
+            strategy: 'fixed',
+            modifiers: [{ name: 'offset', options: { offset: [12, 8] } }]
+          }
+        }"
+        @menuClick="(key) => handleTabDropdownMenu(key, active)"
+      />
+    </template>
+    <!-- 折叠双侧栏一级 -->
+    <template #boxBottom>
+      <div :style="{ flexShrink: 0, padding: roundedTheme ? '4px 8px' : 0 }">
+        <layout-tool style="height: 32px" @click="updateCompact(!compact)">
+          <el-icon style="transform: scale(1.05)">
+            <MenuUnfoldOutlined v-if="compact" />
+            <MenuFoldOutlined v-else />
+          </el-icon>
+        </layout-tool>
+      </div>
+    </template>
+    <!-- 全局页脚 -->
+    <template v-if="footer" #footer>
+      <page-footer />
+    </template>
+    <!-- 页签标题 -->
+    <template #tabTitle="{ label, item }">
+      <el-icon
+        v-if="tabIcon && item.meta?.icon"
+        class="ele-tab-icon"
+        v-bind="item.meta?.props?.iconProps || {}"
+      >
+        <component :is="item.meta.icon" :style="item.meta?.props?.iconStyle" />
+      </el-icon>
+      <span :style="tabIcon && item.meta?.icon ? { paddingLeft: '4px' } : {}">
+        {{ label }}
+      </span>
+    </template>
+  </ele-pro-layout>
+  <!-- 主题设置抽屉 -->
+  <setting-drawer v-model="settingVisible" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, markRaw } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
+  import {
+    LayoutTool,
+    TabDropdown,
+    requestFullscreen,
+    exitFullscreen,
+    checkFullscreen,
+    EleMessage
+  } from 'ele-admin-plus';
+  import type {
+    MenuI18n,
+    TabItemEventOption,
+    BodySizeChangeOption
+  } from 'ele-admin-plus/es/ele-pro-layout/types';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    ReloadOutlined,
+    ExpandOutlined,
+    CompressOutlined,
+    MoreOutlined,
+    CloseOutlined,
+    ArrowLeftOutlined,
+    ArrowRightOutlined,
+    MinusCircleOutlined,
+    CloseCircleOutlined,
+    MoonOutlined,
+    SunOutlined
+  } from '@/components/icons';
+  import { PROJECT_NAME, HOME_PATH, REDIRECT_PATH } from '@/config/setting';
+  import { doWithTransition } from '@/utils/common';
+  import { useUserStore } from '@/store/modules/user';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { useMobileDevice } from '@/utils/use-mobile';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import RouterLayout from '@/components/RouterLayout/index.vue';
+  import HeaderUser from './components/header-user.vue';
+  import HeaderNotice from './components/header-notice.vue';
+  import I18nIcon from './components/i18n-icon.vue';
+  import PageFooter from './components/page-footer.vue';
+  import SettingDrawer from './components/setting-drawer.vue';
+
+  defineOptions({ name: 'Layout' });
+
+  const { push } = useRouter();
+  const { t, locale } = useI18n();
+  const {
+    addPageTab,
+    removePageTab,
+    removeAllPageTab,
+    removeLeftPageTab,
+    removeRightPageTab,
+    removeOtherPageTab,
+    reloadPageTab,
+    setPageTabs
+  } = usePageTab();
+  const { mobileDevice } = useMobileDevice();
+  const userStore = useUserStore();
+  const themeStore = useThemeStore();
+
+  /** 菜单数据 */
+  const { menus } = storeToRefs(userStore);
+
+  /** 布局风格 */
+  const {
+    tabs,
+    collapse,
+    compact,
+    maximized,
+    tabBar,
+    layout,
+    sidebarLayout,
+    headerStyle,
+    sidebarStyle,
+    mixSidebarStyle,
+    tabStyle,
+    fixedHeader,
+    fixedSidebar,
+    fixedBody,
+    fluid,
+    logoInHeader,
+    colorfulIcon,
+    transitionName,
+    uniqueOpened,
+    fixedHome,
+    tabInHeader,
+    sidebarCustomStyle,
+    sideboxCustomStyle,
+    sideCustomStyle,
+    headerCustomStyle,
+    tabsCustomStyle,
+    contentCustomStyle,
+    roundedTheme,
+    menuItemTrigger,
+    footer,
+    tabIcon,
+    pageKeepAlive,
+    responsive,
+    darkMode
+  } = storeToRefs(themeStore);
+
+  /** 是否全屏 */
+  const isFullscreen = ref(false);
+
+  /** 是否显示主题设置抽屉 */
+  const settingVisible = ref(false);
+
+  /** 页签右键菜单 */
+  const tabContext = computed<DropdownItem[]>(() => {
+    return [
+      {
+        title: t('layout.tabs.reload'),
+        command: 'reload',
+        icon: markRaw(ReloadOutlined),
+        iconStyle: { transform: 'scale(0.98)' }
+      },
+      {
+        title: t('layout.tabs.close'),
+        command: 'close',
+        icon: markRaw(CloseOutlined)
+      },
+      {
+        title: t('layout.tabs.closeLeft'),
+        command: 'left',
+        icon: markRaw(ArrowLeftOutlined),
+        divided: true
+      },
+      {
+        title: t('layout.tabs.closeRight'),
+        command: 'right',
+        icon: markRaw(ArrowRightOutlined)
+      },
+      {
+        title: t('layout.tabs.closeOther'),
+        command: 'other',
+        icon: markRaw(MinusCircleOutlined),
+        divided: true
+      },
+      {
+        title: t('layout.tabs.closeAll'),
+        command: 'all',
+        icon: markRaw(CloseCircleOutlined)
+      }
+    ];
+  });
+
+  /** 页签栏右侧下拉菜单 */
+  const tabExtra = computed<DropdownItem[]>(() => {
+    const isMax = maximized.value;
+    return [
+      {
+        title: t(`layout.tabs.${isMax ? 'fullscreenExit' : 'fullscreen'}`),
+        command: 'fullscreen',
+        icon: isMax ? markRaw(CompressOutlined) : markRaw(ExpandOutlined)
+      },
+      ...tabContext.value
+    ];
+  });
+
+  /** 侧栏折叠切换 */
+  const updateCollapse = (value: boolean) => {
+    themeStore.setValue('collapse', value).catch((e) => console.error(e));
+  };
+
+  /** 双侧栏一级折叠切换 */
+  const updateCompact = (value: boolean) => {
+    themeStore.setValue('compact', value).catch((e) => console.error(e));
+  };
+
+  /** 内容区全屏切换 */
+  const updateMaximized = (value: boolean) => {
+    themeStore.setValue('maximized', value).catch((e) => console.error(e));
+  };
+
+  /** 页签点击事件 */
+  const handleTabClick = (option: TabItemEventOption) => {
+    const { key, active, item } = option;
+    const path = item?.fullPath || key;
+    if (key !== active && path) {
+      push(path);
+    }
+  };
+
+  /** 内容区尺寸改变事件 */
+  const handleBodySizeChange = ({ width }: BodySizeChangeOption) => {
+    themeStore
+      .setValue('contentWidth', width ?? null)
+      .catch((e) => console.error(e));
+    isFullscreen.value = checkFullscreen();
+  };
+
+  /** 全屏切换 */
+  const toggleFullscreen = () => {
+    if (isFullscreen.value) {
+      exitFullscreen();
+      isFullscreen.value = false;
+      return;
+    }
+    try {
+      requestFullscreen();
+      isFullscreen.value = true;
+    } catch (e) {
+      console.error(e);
+      EleMessage.error({ message: '您的浏览器不支持全屏模式', plain: true });
+    }
+  };
+
+  /** 页签右键菜单点击事件 */
+  const handleTabContextMenu = (option: TabItemEventOption) => {
+    const { command, key, item, active } = option;
+    if (command === 'reload') {
+      reloadPageTab({ fullPath: item?.fullPath || key });
+    } else if (command === 'close') {
+      removePageTab({ key, active });
+    } else if (command === 'left') {
+      removeLeftPageTab({ key, active });
+    } else if (command === 'right') {
+      removeRightPageTab({ key, active });
+    } else if (command === 'other') {
+      removeOtherPageTab({ key, active });
+    } else if (command === 'all') {
+      removeAllPageTab({ key, active });
+    }
+  };
+
+  /** 页签栏右侧下拉菜单点击事件 */
+  const handleTabDropdownMenu = (command: string, active: string) => {
+    if (command === 'reload') {
+      reloadPageTab();
+    } else if (command === 'fullscreen') {
+      updateMaximized(!maximized.value);
+    } else {
+      handleTabContextMenu({ command, key: active, active });
+    }
+  };
+
+  /** 菜单标题国际化 */
+  const i18n: MenuI18n = ({ menu, locale, tab }) => {
+    if (locale) {
+      if (tab && tab.meta?.lang && tab.meta.lang[locale]) {
+        return tab.meta.lang[locale];
+      }
+      if (menu?.meta?.lang && menu.meta.lang[locale]) {
+        return menu.meta.lang[locale];
+      }
+    }
+    return menu?.meta?.title;
+  };
+
+  /** 打开主题设置抽屉 */
+  const openSetting = () => {
+    settingVisible.value = true;
+  };
+
+  /** 暗黑主题切换开关 */
+  const darkSwitchRef = ref<any>(null);
+
+  /** 切换暗黑模式 */
+  const updateDarkMode = (isDark?: any) => {
+    doWithTransition(
+      () => themeStore.setValue('darkMode', isDark),
+      darkSwitchRef.value?.$el?.querySelector?.('.el-switch__action'),
+      !isDark
+    );
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+  /* 暗黑主题切换开关 */
+  .dark-switch {
+    padding: 0 6px;
+    position: relative;
+
+    :deep(.el-switch) {
+      height: 22px;
+      line-height: 22px;
+      position: static;
+
+      .el-switch__core {
+        #{getCssVarName('switch', 'off-color')}: getCssVar(
+          'border-color',
+          'extra-light'
+        );
+        #{getCssVarName('switch', 'on-color')}: getCssVar(
+          'border-color',
+          'extra-light'
+        );
+        height: 22px;
+        border-radius: 11px;
+        border: 1px solid getCssVar('border-color');
+
+        .el-switch__action {
+          color: getCssVar('text-color', 'regular');
+          background: getCssVar('bg-color');
+          width: 18px;
+          height: 18px;
+          font-size: 12px;
+          left: 1.35px;
+        }
+      }
+
+      &.is-checked .el-switch__core .el-switch__action {
+        left: calc(100% - 19.35px);
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  @use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+  /* 暗色和主色顶栏下暗黑主题切换开关 */
+  .ele-admin-header.is-dark .dark-switch .el-switch,
+  .ele-admin-header.is-primary .dark-switch .el-switch {
+    .el-switch__core {
+      border: none;
+      background: rgba(255, 255, 255, 0.38);
+
+      .el-switch__action {
+        left: 2.65px;
+      }
+    }
+
+    &.is-checked .el-switch__core .el-switch__action {
+      left: calc(100% - 20px);
+    }
+  }
+
+  .ele-admin-header.is-dark .dark-switch .el-switch .el-switch__core {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  /* 主色顶栏 logo 增加白色滤镜 */
+  .ele-admin-header.is-primary .ele-admin-logo img {
+    filter: contrast(0%) brightness(1000%);
+  }
+</style>
diff --git a/z_ele/src/main.ts b/z_ele/src/main.ts
new file mode 100644
index 0000000..ad1ba28
--- /dev/null
+++ b/z_ele/src/main.ts
@@ -0,0 +1,27 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import store from './store';
+import router from './router';
+import permission from './utils/permission';
+import DictData from '@/components/DictData/index.vue';
+import i18n from './i18n';
+import installer from './as-needed';
+import { iconsInstaller } from '@/components/IconSelect/util';
+import 'element-plus/theme-chalk/display.css';
+import 'ele-admin-plus/es/style/nprogress.scss';
+import './styles/themes/rounded.scss';
+import './styles/themes/dark.scss';
+import './styles/themes/transparent.scss';
+import './styles/index.scss';
+
+const app = createApp(App);
+
+app.use(store);
+app.use(router);
+app.use(permission);
+app.use(i18n);
+app.use(installer);
+app.use(iconsInstaller);
+app.component('DictData', DictData);
+
+app.mount('#app');
diff --git a/z_ele/src/router/index.ts b/z_ele/src/router/index.ts
new file mode 100644
index 0000000..9fb74d6
--- /dev/null
+++ b/z_ele/src/router/index.ts
@@ -0,0 +1,66 @@
+/**
+ * 路由配置
+ */
+import NProgress from 'nprogress';
+import type { _RouteLocationBase } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import { REDIRECT_PATH, LAYOUT_PATH } from '@/config/setting';
+import { useUserStore } from '@/store/modules/user';
+import { getToken } from '@/utils/token-util';
+import { setPageTitle } from '@/utils/page-title-util';
+import { getRouteTitle } from '@/i18n/use-locale';
+import { routes, getMenuRoutes, isWhiteList } from './routes';
+
+NProgress.configure({
+  speed: 200,
+  minimum: 0.02,
+  trickleSpeed: 200,
+  showSpinner: false
+});
+
+const router = createRouter({
+  routes,
+  history: createWebHistory(),
+  scrollBehavior: () => {
+    return { top: 0 };
+  }
+});
+
+/**
+ * 路由守卫
+ */
+router.beforeEach(async (to) => {
+  if (!to.path.includes(REDIRECT_PATH)) {
+    NProgress.start();
+    setPageTitle(getRouteTitle(to));
+  }
+  if (!getToken()) {
+    // 未登录跳转登录界面
+    if (!isWhiteList(to.path)) {
+      const query = { from: encodeURIComponent(to.fullPath) };
+      return { path: '/login', query: to.path === LAYOUT_PATH ? {} : query };
+    }
+    return;
+  }
+  // 注册动态路由
+  const userStore = useUserStore();
+  if (!userStore.menus) {
+    const { menus, homePath } = await userStore.fetchUserInfo();
+    if (menus) {
+      getMenuRoutes(menus, homePath).forEach((r) => {
+        router.addRoute(r);
+      });
+      return { ...to, replace: true };
+    }
+  }
+});
+
+router.afterEach((to) => {
+  if (!to.path.includes(REDIRECT_PATH) && NProgress.isStarted()) {
+    setTimeout(() => {
+      NProgress.done(true);
+    }, 200);
+  }
+});
+
+export default router;
diff --git a/z_ele/src/router/routes.ts b/z_ele/src/router/routes.ts
new file mode 100644
index 0000000..c467225
--- /dev/null
+++ b/z_ele/src/router/routes.ts
@@ -0,0 +1,95 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { menuToRoutes, eachTree } from 'ele-admin-plus';
+import type { MenuItem } from 'ele-admin-plus/es/ele-pro-layout/types';
+import {
+  HOME_PATH,
+  LAYOUT_PATH,
+  REDIRECT_PATH,
+  WHITE_LIST
+} from '@/config/setting';
+import Layout from '@/layout/index.vue';
+import RedirectLayout from '@/components/RedirectLayout/index.vue';
+const modules = import.meta.glob('/src/views/**/index.vue');
+
+/**
+ * 静态路由
+ */
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录' }
+  },
+  // 404
+  {
+    path: '/:path(.*)*',
+    component: () => import('@/views/exception/404/index.vue')
+  }
+];
+
+/**
+ * 根据菜单生成动态路由
+ * @param menus 菜单数据
+ * @param homePath 主页地址
+ */
+export function getMenuRoutes(menus?: MenuItem[], homePath?: string) {
+  const childRoutes: RouteRecordRaw[] = [
+    // 用于刷新的路由
+    {
+      path: REDIRECT_PATH + '/:path(.*)',
+      component: RedirectLayout,
+      meta: { hideFooter: true }
+    }
+  ];
+  const layoutRoutes: RouteRecordRaw[] = [
+    {
+      path: LAYOUT_PATH,
+      component: Layout,
+      redirect: HOME_PATH ?? homePath,
+      children: childRoutes
+    }
+  ];
+  // 路由铺平处理
+  eachTree(menuToRoutes(menus, getComponent, routes), (route) => {
+    const temp = Object.assign({}, route, { children: void 0 });
+    if (temp.meta?.layout === false) {
+      layoutRoutes.push(temp); // 不需要外层布局的路由
+    } else {
+      childRoutes.push(temp); // 需要外层布局的路由
+    }
+  });
+  return layoutRoutes;
+}
+
+/**
+ * 判断是否是白名单路由
+ * @param path 路由地址
+ */
+export function isWhiteList(path: string) {
+  if (!path) {
+    return false;
+  }
+  return WHITE_LIST.some((whitePath) => {
+    if (whitePath === path) {
+      return true;
+    }
+    if (whitePath.endsWith('*') && path.startsWith(whitePath.slice(0, -1))) {
+      return true;
+    }
+    return false;
+  });
+}
+
+/**
+ * 解析路由组件
+ * @param component 组件名称
+ */
+function getComponent(component?: string) {
+  if (component) {
+    const module = modules[`/src/views${component}.vue`];
+    if (!module) {
+      return modules[`/src/views${component}/index.vue`];
+    }
+    return module;
+  }
+}
diff --git a/z_ele/src/shims-vue.d.ts b/z_ele/src/shims-vue.d.ts
new file mode 100644
index 0000000..fe7917e
--- /dev/null
+++ b/z_ele/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/z_ele/src/store/index.ts b/z_ele/src/store/index.ts
new file mode 100644
index 0000000..bf43b30
--- /dev/null
+++ b/z_ele/src/store/index.ts
@@ -0,0 +1,6 @@
+/**
+ * pinia
+ */
+import { createPinia } from 'pinia';
+
+export default createPinia();
diff --git a/z_ele/src/store/modules/theme.ts b/z_ele/src/store/modules/theme.ts
new file mode 100644
index 0000000..61cccb4
--- /dev/null
+++ b/z_ele/src/store/modules/theme.ts
@@ -0,0 +1,965 @@
+/**
+ * 主题状态管理
+ */
+import type { CSSProperties } from 'vue';
+import { defineStore } from 'pinia';
+import { cloneDeep } from 'lodash-es';
+import type {
+  TabItem,
+  Layout,
+  SidebarLayout,
+  HeaderStyle,
+  SidebarStyle,
+  TabStyle,
+  TabItemEventOption,
+  MenuItemTrigger
+} from 'ele-admin-plus/es/ele-pro-layout/types';
+import { changeColor, changeSkin } from 'ele-admin-plus/es/utils/theme-util';
+import type { SkinConfig } from 'ele-admin-plus/es/utils/theme-util';
+import { THEME_CACHE_NAME } from '@/config/setting';
+import wallpaper01 from '@/assets/wallpaper-01.jpg';
+import wallpaper01Cover from '@/assets/wallpaper-01-cover.jpg';
+import wallpaper01Dark from '@/assets/wallpaper-01-dark.jpg';
+import wallpaper01DarkCover from '@/assets/wallpaper-01-dark-cover.jpg';
+import wallpaper02 from '@/assets/wallpaper-02.jpg';
+import wallpaper02Cover from '@/assets/wallpaper-02-cover.jpg';
+import wallpaper02Dark from '@/assets/wallpaper-02-dark.jpg';
+import wallpaper02DarkCover from '@/assets/wallpaper-02-dark-cover.jpg';
+import wallpaper03 from '@/assets/wallpaper-03.jpg';
+import wallpaper03Cover from '@/assets/wallpaper-03-cover.jpg';
+import wallpaper04 from '@/assets/wallpaper-04.jpg';
+import wallpaper04Cover from '@/assets/wallpaper-04-cover.jpg';
+
+/**
+ * 关闭页签返回结果
+ */
+export interface TabRemoveResult {
+  /** 关闭后要跳转的地址 */
+  path?: string;
+  /** 关闭后是否跳转到首页 */
+  home?: boolean;
+}
+
+export type TabRemoveReturn = Promise<TabRemoveResult>;
+
+/**
+ * 主题状态数据
+ */
+export interface ThemeState {
+  tabs: TabItem[];
+  collapse: boolean;
+  compact: boolean;
+  maximized: boolean;
+  tabBar: boolean;
+  layout: Layout;
+  sidebarLayout: SidebarLayout;
+  headerStyle: HeaderStyle;
+  sidebarStyle: SidebarStyle;
+  mixSidebarStyle: SidebarStyle;
+  tabStyle: TabStyle;
+  fixedHeader: boolean;
+  fixedSidebar: boolean;
+  fixedBody: boolean;
+  fluid: boolean;
+  logoInHeader: boolean;
+  colorfulIcon: boolean;
+  uniqueOpened: boolean;
+  fixedHome: boolean;
+  tabInHeader: boolean;
+  sidebarCustomStyle: CSSProperties | null;
+  sideboxCustomStyle: CSSProperties | null;
+  sideCustomStyle: CSSProperties | null;
+  headerCustomStyle: CSSProperties | null;
+  tabsCustomStyle: CSSProperties | null;
+  contentCustomStyle: CSSProperties | null;
+  transitionName: string;
+  weakMode: boolean;
+  darkMode: boolean;
+  color: string | null;
+  contentWidth: number | null;
+  roundedTheme: boolean;
+  menuItemTrigger: MenuItemTrigger;
+  footer: boolean;
+  tabIcon: boolean;
+  tabsCache: boolean;
+  pageKeepAlive: boolean;
+  skinConfig: SkinConfig | null;
+  responsive: boolean;
+}
+
+export type ThemeStateProp = keyof ThemeState;
+
+/**
+ * 默认值
+ */
+const DEFAULT_STATE: ThemeState = {
+  /** 页签数据 */
+  tabs: [],
+  /** 是否折叠侧栏 */
+  collapse: false,
+  /** 侧栏一级是否紧凑风格 */
+  compact: false,
+  /** 内容区是否最大化 */
+  maximized: false,
+  /** 是否需要页签栏 */
+  tabBar: true,
+  /** 布局类型 */
+  layout: 'default',
+  /** 侧栏布局类型 */
+  sidebarLayout: 'default',
+  /** 顶栏风格 */
+  headerStyle: 'light',
+  /** 侧栏风格 */
+  sidebarStyle: 'dark',
+  /** 双侧栏二级风格 */
+  mixSidebarStyle: 'light',
+  /** 页签风格 */
+  tabStyle: 'simple',
+  /** 是否固定顶栏 */
+  fixedHeader: true,
+  /** 是否固定侧栏 */
+  fixedSidebar: true,
+  /** 是否固定内容区 */
+  fixedBody: true,
+  /** 内容区是否撑满 */
+  fluid: true,
+  /** 图标是否置于顶栏 */
+  logoInHeader: false,
+  /** 侧栏菜单是否彩色图标 */
+  colorfulIcon: false,
+  /** 侧栏排他展开 */
+  uniqueOpened: true,
+  /** 固定主页页签 */
+  fixedHome: true,
+  /** 页签是否置于顶栏 */
+  tabInHeader: false,
+  /** 自定义侧栏样式 */
+  sidebarCustomStyle: null,
+  /** 自定义双侧栏一级样式 */
+  sideboxCustomStyle: null,
+  /** 自定义侧栏容器样式 */
+  sideCustomStyle: null,
+  /** 自定义顶栏样式 */
+  headerCustomStyle: null,
+  /** 自定义页签栏样式 */
+  tabsCustomStyle: null,
+  /** 自定义内容区样式 */
+  contentCustomStyle: null,
+  /** 路由切换动画 */
+  transitionName: 'slide-right',
+  /** 是否色弱模式 */
+  weakMode: false,
+  /** 是否暗黑模式 */
+  darkMode: false,
+  /** 主题色 */
+  color: null,
+  /** 内容区宽度 */
+  contentWidth: null,
+  /** 是否开启圆角主题 */
+  roundedTheme: true,
+  /** 菜单触发模式 */
+  menuItemTrigger: 'click',
+  /** 是否开启全局页脚 */
+  footer: true,
+  /** 页签是否显示图标 */
+  tabIcon: true,
+  /** 刷新是否保留已打开页签 */
+  tabsCache: false,
+  /** 切换路由是否缓存 */
+  pageKeepAlive: true,
+  /** 皮肤背景配置 */
+  skinConfig: null,
+  /** 是否开启响应式 */
+  responsive: true
+};
+
+/**
+ * 需要排除缓存的属性
+ */
+const CACHE_EXCLUDES: ThemeStateProp[] = [
+  'collapse',
+  'compact',
+  'maximized',
+  'contentWidth'
+];
+
+/**
+ * 预设皮肤背景
+ */
+export const PREDEFINE_SKINS: SkinConfig[] = [
+  {
+    name: 'gradient',
+    cover: `url(${wallpaper01Cover}) center / 100% 100%`,
+    wallpaper: `url(${wallpaper01}) center / 100% 100%`,
+    maskColor: 'rgba(222, 242, 249, 0.4)',
+    headerBg: 'rgba(255, 255, 255, 0.28)',
+    sidebarBg: 'rgba(255, 255, 255, 0.28)',
+    cardBg: 'rgba(255, 255, 255, 0.88)',
+    overlayBg: `url(${wallpaper01}) center / 100% 100%`,
+    overlayMaskColor:
+      'linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.8)) center / 102% 102%',
+    darkConfig: {
+      cover: `url(${wallpaper01DarkCover}) center / 100% 100%`,
+      wallpaper: `url(${wallpaper01Dark}) center / 100% 100%`,
+      maskColor: 'rgba(0, 0, 0, 0.8)',
+      headerBg: 'rgba(0, 0, 0, 0.2)',
+      sidebarBg: 'rgba(0, 0, 0, 0.2)',
+      cardBg: 'rgba(0, 0, 0, 0.2)',
+      overlayBg: `url(${wallpaper01Dark}) center / 100% 100%`,
+      overlayMaskColor: 'rgba(0, 0, 0, 0.82)'
+    }
+  },
+  {
+    name: 'technology',
+    color: '#1677ff',
+    cover: `url(${wallpaper02Cover}) center / 100% 100%`,
+    wallpaper: `url(${wallpaper02}) center / 100% 100%`,
+    maskColor: 'rgba(214, 227, 250, 0.4)',
+    headerBg: 'rgba(255, 255, 255, 0.28)',
+    sidebarBg: 'rgba(255, 255, 255, 0.28)',
+    cardBg: 'rgba(255, 255, 255, 0.6)',
+    overlayBg: `url(${wallpaper02}) center / 100% 100%`,
+    overlayMaskColor:
+      'linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(214, 227, 250, 0.4), rgba(255, 255, 255, 0.8)) center / 102% 102%',
+    darkConfig: {
+      color: '#13c2c2',
+      cover: `url(${wallpaper02DarkCover}) center / 100% 100%`,
+      wallpaper: `url(${wallpaper02Dark}) center / 100% 100%`,
+      maskColor: 'rgba(0, 0, 0, 0)',
+      headerBg: 'rgba(22, 44, 78, 0.4)',
+      sidebarBg: 'rgba(22, 44, 78, 0.4)',
+      cardBg: 'rgba(22, 44, 78, 0.4)',
+      overlayBg: `url(${wallpaper02Dark}) center / 100% 100%`,
+      overlayMaskColor:
+        'linear-gradient(0deg, rgba(18, 44, 82, 0.8), rgba(22, 44, 78, 0.4), rgba(18, 44, 82, 0.8)) center / 102% 102%'
+    }
+  },
+  {
+    name: 'aesthetic',
+    color: '#2f54eb',
+    cover: `url(${wallpaper03Cover}) bottom center / cover`,
+    wallpaper: `url(${wallpaper03}) bottom center / cover`,
+    maskColor:
+      'linear-gradient(22deg, rgba(240, 242, 245, 0.08) 0%, rgba(240, 242, 245, 0.88) 100%) center / 100% 100%',
+    headerBg: 'rgba(255, 255, 255, 0.2)',
+    sidebarBg: 'rgba(255, 255, 255, 0.2)',
+    cardBg: 'rgba(255, 255, 255, 0.68)',
+    overlayBg: `url(${wallpaper03}) bottom center / cover`,
+    overlayMaskColor: 'rgba(255, 255, 255, 0.8)',
+    darkConfig: {
+      color: '#2f54eb',
+      cover: `url(${wallpaper03Cover}) bottom center / cover`,
+      wallpaper: `url(${wallpaper03}) bottom center / cover`,
+      maskColor: 'rgba(0, 0, 0, 0.68)',
+      headerBg: 'rgba(0, 0, 0, 0.08)',
+      sidebarBg: 'rgba(0, 0, 0, 0.08)',
+      cardBg: 'rgba(0, 0, 0, 0.28)',
+      overlayBg: `url(${wallpaper03}) bottom center / cover`,
+      overlayMaskColor: 'rgba(0, 0, 0, 0.8)'
+    }
+  },
+  {
+    name: 'cartoon',
+    color: '#32a2d4',
+    cover: `url(${wallpaper04Cover}) top center / cover`,
+    wallpaper: `url(${wallpaper04}) top center / cover`,
+    maskColor: 'rgba(255, 255, 255, 0.2)',
+    headerBg: 'rgba(255, 255, 255, 0.2)',
+    sidebarBg: 'rgba(255, 255, 255, 0.2)',
+    cardBg: 'rgba(255, 255, 255, 0.8)',
+    overlayBg: 'linear-gradient(238deg, #fff1eb 0%, #ace0f9 120%)',
+    darkConfig: {
+      color: '#32a2d4',
+      cover: `url(${wallpaper04Cover}) top center / cover`,
+      wallpaper: `url(${wallpaper04}) top center / cover`,
+      maskColor: 'rgba(0, 0, 0, 0.68)',
+      headerBg: 'rgba(0, 0, 0, 0.08)',
+      sidebarBg: 'rgba(0, 0, 0, 0.08)',
+      cardBg: 'rgba(0, 0, 0, 0.28)',
+      overlayBg: 'linear-gradient(238deg, #372406 0%, #04293a 120%)'
+    }
+  }
+];
+
+/**
+ * 读取缓存配置
+ */
+function getCacheSetting(): Record<string, any> {
+  try {
+    const value = localStorage.getItem(THEME_CACHE_NAME);
+    if (value) {
+      const cache = JSON.parse(value);
+      if (typeof cache === 'object') {
+        return cache;
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return {};
+}
+
+/**
+ * 缓存配置
+ * @param key 属性名
+ * @param value 值
+ */
+function cacheSetting(key: ThemeStateProp, value: unknown) {
+  if (CACHE_EXCLUDES.includes(key)) {
+    return;
+  }
+  const cache = getCacheSetting();
+  if (cache[key] !== value) {
+    cache[key] = value;
+    localStorage.setItem(THEME_CACHE_NAME, JSON.stringify(cache));
+  }
+}
+
+/**
+ * 皮肤背景文件访问链接缓存
+ */
+const SKIN_BG_CACHE = new Map<string, string>();
+
+/**
+ * 缓存皮肤背景文件访问链接
+ * @param id 文件 id
+ * @param file 文件
+ */
+function cacheSkinBg(id: string, file?: File | Blob) {
+  const bg = SKIN_BG_CACHE.get(id);
+  if (bg) {
+    return bg;
+  }
+  const url = file ? URL.createObjectURL(file) : void 0;
+  if (url) {
+    const bg = `url(${url}) top / cover`;
+    SKIN_BG_CACHE.set(id, bg);
+    return bg;
+  }
+}
+
+/**
+ * 皮肤背景文件缓存表名
+ */
+const WALLPAPER_STORE_NAME = 'wallpaperFileCacheStore';
+
+/**
+ * 初始化皮肤背景文件缓存数据库
+ */
+function initWallpaperDB() {
+  const WALLPAPER_DB_NAME = 'wallpaperFileCacheDB';
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    const request = indexedDB.open(WALLPAPER_DB_NAME, 1);
+    request.onupgradeneeded = (e: any) => {
+      const db: IDBDatabase = e.target?.result;
+      if (!db.objectStoreNames.contains(WALLPAPER_STORE_NAME)) {
+        db.createObjectStore(WALLPAPER_STORE_NAME, { keyPath: 'id' });
+      }
+    };
+    request.onsuccess = (e: any) => resolve(e.target?.result);
+    request.onerror = (e: any) => reject(e.target?.error);
+  });
+}
+
+/**
+ * 缓存皮肤背景文件
+ * @param file 文件
+ */
+async function storeWallpaperFile(file: File) {
+  const id = JSON.stringify({
+    name: file.name,
+    type: file.type,
+    lastModified: file.lastModified
+  });
+  const content = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(new Uint8Array(e.target?.result as any));
+    reader.onerror = (e) => reject(e.target?.error);
+    reader.readAsArrayBuffer(file);
+  });
+  const db = await initWallpaperDB();
+  const transaction = db.transaction(WALLPAPER_STORE_NAME, 'readwrite');
+  const store = transaction.objectStore(WALLPAPER_STORE_NAME);
+  const request = store.put({ id, type: file.type, content });
+  await new Promise<void>((resolve, reject) => {
+    request.onsuccess = () => resolve();
+    request.onerror = (e: any) => reject(e.target?.error);
+  });
+  return id;
+}
+
+/**
+ * 获取缓存的皮肤背景文件
+ * @param id 文件 id
+ */
+async function getWallpaperFile(id: string) {
+  const db = await initWallpaperDB();
+  const transaction = db.transaction(WALLPAPER_STORE_NAME, 'readonly');
+  const store = transaction.objectStore(WALLPAPER_STORE_NAME);
+  const request = store.get(id);
+  const content = await new Promise<Blob | undefined>((resolve, reject) => {
+    request.onsuccess = (e: any) => {
+      const data = e.target?.result;
+      if (!data) {
+        resolve(void 0);
+      } else {
+        const blob = new Blob([data.content], { type: data.type });
+        resolve(blob);
+      }
+    };
+    request.onerror = (e: any) => reject(e.target?.error);
+  });
+  return content;
+}
+
+/**
+ * 清空缓存的皮肤背景文件
+ */
+async function clearAllWallpaperFile() {
+  const db = await initWallpaperDB();
+  const transaction = db.transaction(WALLPAPER_STORE_NAME, 'readwrite');
+  const store = transaction.objectStore(WALLPAPER_STORE_NAME);
+  const request = store.clear();
+  await new Promise<void>((resolve, reject) => {
+    request.onsuccess = () => resolve();
+    request.onerror = (e: any) => reject(e.target?.error);
+  });
+}
+
+/**
+ * 删除未使用的缓存的皮肤背景文件
+ * @param ids 还在使用的文件 id
+ */
+async function clearWallpaperFile(ids: string[]) {
+  const db = await initWallpaperDB();
+  const transaction = db.transaction(WALLPAPER_STORE_NAME, 'readwrite');
+  const store = transaction.objectStore(WALLPAPER_STORE_NAME);
+  const request = store.getAll();
+  const data: any = await new Promise((resolve, reject) => {
+    request.onsuccess = (e: any) => resolve(e.target?.result);
+    request.onerror = (e: any) => reject(e.target?.error);
+  });
+  for (const item of data) {
+    if (!ids.includes(item.id)) {
+      const deleteRequest = store.delete(item.id);
+      await new Promise<void>((resolve, reject) => {
+        deleteRequest.onsuccess = () => resolve();
+        deleteRequest.onerror = (e: any) => reject(e.target?.error);
+      });
+    }
+  }
+}
+
+/**
+ * 判断图片背景是否为文件 id 形式
+ * @param wallpaper 图片背景
+ */
+function isWallpaperFileId(wallpaper?: string) {
+  return wallpaper != null && wallpaper.startsWith('{');
+}
+
+/**
+ * 获取皮肤背景配置
+ * @param config 配置
+ * @param isId 背景图片是否返回文件 id 的形式
+ * @param isCache 是否是缓存的数据需要同步最新的配置
+ */
+async function getSkinConfig(
+  config?: SkinConfig | null,
+  isId?: boolean,
+  isCache?: boolean
+) {
+  if (!config) {
+    return config ?? null;
+  }
+  const skin: SkinConfig = { ...config };
+  if (isCache) {
+    // 缓存的旧图片同步最新的预设皮肤
+    if (skin.name) {
+      const ps = PREDEFINE_SKINS.find((s) => s.name === skin.name);
+      if (ps) {
+        Object.assign(skin, ps);
+      }
+    } else if (skin.skinName) {
+      const ps = PREDEFINE_SKINS.find((s) => s.name === skin.skinName);
+      if (ps) {
+        if (skin.wallpaper && !isWallpaperFileId(skin.wallpaper)) {
+          skin.wallpaper = ps.wallpaper;
+        }
+        if (skin.overlayBg && !isWallpaperFileId(skin.overlayBg)) {
+          skin.overlayBg = ps.overlayBg;
+        }
+        if (
+          skin.darkConfig?.wallpaper &&
+          !isWallpaperFileId(skin.darkConfig.wallpaper)
+        ) {
+          skin.darkConfig.wallpaper = ps.darkConfig?.wallpaper;
+        }
+        if (
+          skin.darkConfig?.overlayBg &&
+          !isWallpaperFileId(skin.darkConfig.overlayBg)
+        ) {
+          skin.darkConfig.overlayBg = ps.darkConfig?.overlayBg;
+        }
+      }
+    }
+  }
+  const keys = Object.keys(skin);
+  for (const key of keys) {
+    const value = skin[key];
+    if (key === 'darkConfig') {
+      skin[key] = (await getSkinConfig(value, isId)) as any;
+    } else if (value != null && typeof value === 'string') {
+      if (isId) {
+        for (const [id, url] of SKIN_BG_CACHE.entries()) {
+          if (url === value) {
+            skin[key] = id;
+            break;
+          }
+        }
+      } else if (isWallpaperFileId(value)) {
+        const url = SKIN_BG_CACHE.get(value);
+        if (url) {
+          skin[key] = url;
+        } else {
+          const blob = await getWallpaperFile(value);
+          skin[key] = cacheSkinBg(value, blob);
+        }
+      }
+    }
+  }
+  return skin;
+}
+
+/**
+ * 获取缓存的皮肤背景
+ * @param cfg 默认的皮肤背景
+ */
+async function getCacheSkinConfig(cfg?: SkinConfig | null) {
+  const cache = getCacheSetting();
+  const skin = typeof cache.skinConfig !== 'undefined' ? cache.skinConfig : cfg;
+  const skinConfig = await getSkinConfig(skin, false, true);
+  return skinConfig;
+}
+
+/**
+ * 切换主题
+ * @param color 主题色
+ * @param dark 是否是暗黑模式
+ * @param skinConfig 皮肤背景配置
+ */
+function changeTheme(
+  color?: string | null,
+  dark?: boolean,
+  skinConfig?: SkinConfig | null
+) {
+  const isTransparent = !!skinConfig;
+  changeColor(
+    isTransparent ? (color ?? '#2f54eb') : color,
+    dark,
+    isTransparent
+  );
+  changeSkin(skinConfig, dark);
+}
+
+/**
+ * 切换圆角主题
+ * @param roundedTheme 是否开启圆角主题
+ */
+function changeRoundedTheme(roundedTheme: boolean) {
+  const classes = 'rounded';
+  const $html = document.documentElement;
+  if ($html && roundedTheme) {
+    $html.classList.add(classes);
+  } else if ($html) {
+    $html.classList.remove(classes);
+  }
+}
+
+/**
+ * 切换色弱模式
+ * @param weakMode 是否开启色弱模式
+ */
+function changeWeakMode(weakMode: boolean) {
+  const classes = 'ele-admin-weak';
+  if (weakMode) {
+    document.body.classList.add(classes);
+  } else {
+    document.body.classList.remove(classes);
+  }
+}
+
+/**
+ * 开关响应式布局
+ * @param responsive 是否开启移动端响应式
+ */
+function changeResponsive(responsive: boolean) {
+  const classes = 'ele-body-limited';
+  if (responsive) {
+    document.body.classList.remove(classes);
+  } else {
+    document.body.classList.add(classes);
+  }
+}
+
+export const useThemeStore = defineStore('theme', {
+  state: (): ThemeState => {
+    const state: ThemeState = cloneDeep(DEFAULT_STATE);
+    // 读取本地缓存
+    const cache = getCacheSetting();
+    Object.keys(state).forEach((key) => {
+      if (key !== 'skinConfig') {
+        const value = cache[key];
+        if (typeof value !== 'undefined') {
+          state[key] = value;
+        }
+      }
+    });
+    return state;
+  },
+  getters: {
+    /** 需要缓存的路由组件 */
+    keepAliveInclude(): string[] {
+      if (!this.pageKeepAlive || !this.tabs) {
+        return [];
+      }
+      const components = new Set<string>();
+      this.tabs.forEach((t) => {
+        if (t.meta?.keepAlive !== false && !t.refresh && t.components) {
+          t.components.forEach((c) => {
+            if (typeof c === 'string' && c) {
+              components.add(c);
+            }
+          });
+        }
+      });
+      return Array.from(components);
+    }
+  },
+  actions: {
+    /**
+     * 释放无用的皮肤背景文件缓存
+     * @param isAll 是否全部释放
+     */
+    async releaseSkinBgCache(isAll?: boolean) {
+      // 释放全部
+      if (isAll || !this.skinConfig) {
+        SKIN_BG_CACHE.forEach((url) => {
+          URL.revokeObjectURL(url);
+        });
+        SKIN_BG_CACHE.clear();
+        await clearAllWallpaperFile();
+        return;
+      }
+      // 释放未使用的文件
+      const urls = [
+        this.skinConfig.wallpaper,
+        this.skinConfig.overlayBg,
+        this.skinConfig.darkConfig?.wallpaper,
+        this.skinConfig.darkConfig?.overlayBg
+      ];
+      const delIds: string[] = [];
+      SKIN_BG_CACHE.forEach((url, id) => {
+        if (!urls.some((u) => u && u.includes(url))) {
+          URL.revokeObjectURL(url);
+          delIds.push(id);
+        }
+      });
+      delIds.forEach((id) => {
+        SKIN_BG_CACHE.delete(id);
+      });
+      await clearWallpaperFile(SKIN_BG_CACHE ? [...SKIN_BG_CACHE.keys()] : []);
+    },
+    /**
+     * 修改配置
+     * @param prop 属性名
+     * @param value 值
+     */
+    async setValue(prop: ThemeStateProp, value?: any) {
+      if (prop === 'skinConfig') {
+        // 皮肤背景文件特殊处理
+        if (typeof value === 'function') {
+          const skin = await value(async (file: File) => {
+            const id = await storeWallpaperFile(file);
+            cacheSkinBg(id, file);
+            return id;
+          });
+          this.skinConfig = await getSkinConfig(skin, false, true);
+        } else {
+          this.skinConfig = value;
+        }
+        cacheSetting(prop, await getSkinConfig(this.skinConfig, true, false));
+      } else {
+        this[prop as any] = value;
+        if (prop !== 'tabs' || this.tabsCache) {
+          cacheSetting(prop, value);
+        }
+      }
+      if (prop === 'tabsCache') {
+        // 页签缓存开关切换后同时更新缓存的页签数据
+        cacheSetting('tabs', value ? this.tabs : void 0);
+      } else if (
+        prop === 'color' ||
+        prop === 'darkMode' ||
+        prop === 'skinConfig'
+      ) {
+        // 切换主题色、暗黑模式、皮肤背景
+        if (prop === 'skinConfig') {
+          await this.releaseSkinBgCache();
+        }
+        if (prop === 'darkMode' || prop === 'skinConfig') {
+          const skinColor = this.darkMode
+            ? this.skinConfig?.darkConfig?.color
+            : this.skinConfig?.color;
+          if (skinColor && skinColor !== this.color) {
+            this.color = skinColor;
+            cacheSetting('color', this.color);
+          }
+        }
+        changeTheme(this.color, this.darkMode, this.skinConfig);
+      } else if (prop === 'roundedTheme') {
+        changeRoundedTheme(value); // 切换圆角主题
+      } else if (prop === 'weakMode') {
+        changeWeakMode(value); // 切换色弱模式
+      } else if (prop === 'responsive') {
+        changeResponsive(value); // 切换移动端响应式
+      }
+    },
+    /**
+     * 重置
+     */
+    async resetSetting() {
+      const excludes = ['tabs', 'collapse', 'contentWidth'];
+      Object.keys(DEFAULT_STATE).forEach((key) => {
+        if (!excludes.includes(key)) {
+          this[key] = cloneDeep(DEFAULT_STATE[key]);
+        }
+      });
+      localStorage.removeItem(THEME_CACHE_NAME);
+      await this.releaseSkinBgCache(true);
+      changeResponsive(this.responsive);
+      changeRoundedTheme(this.roundedTheme);
+      changeWeakMode(this.weakMode);
+      changeTheme(this.color, this.darkMode, this.skinConfig);
+    },
+    /**
+     * 恢复主题
+     */
+    recoverTheme() {
+      // 关闭响应式布局
+      if (!this.responsive) {
+        changeResponsive(false);
+      }
+      // 开启圆角主题
+      if (this.roundedTheme) {
+        changeRoundedTheme(true);
+      }
+      // 开启色弱模式
+      if (this.weakMode) {
+        changeWeakMode(true);
+      }
+      // 读取缓存的皮肤背景
+      getCacheSkinConfig(this.skinConfig)
+        .then((skin) => {
+          this.skinConfig = skin;
+          // 恢复主题色、暗黑模式、皮肤背景
+          if (this.color || this.darkMode || this.skinConfig) {
+            changeTheme(this.color, this.darkMode, this.skinConfig);
+          }
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    /**
+     * 添加页签或更新页签数据
+     * @param data 页签数据
+     */
+    tabAdd(data: TabItem) {
+      const i = this.tabs.findIndex((d) => d.key === data.key);
+      if (i === -1) {
+        const temps = [...this.tabs, data];
+        this.setValue('tabs', temps).catch((e) => console.error(e));
+      } else if (data.fullPath !== this.tabs[i].fullPath) {
+        const temps = [...this.tabs];
+        temps[i] = data;
+        this.setValue('tabs', temps).catch((e) => console.error(e));
+      }
+    },
+    /**
+     * 关闭页签
+     */
+    async tabRemove({ key, active }: TabItemEventOption): TabRemoveReturn {
+      const i = this.tabs.findIndex((t) => t.key === key || t.fullPath === key);
+      if (i === -1) {
+        return {};
+      }
+      const t = this.tabs[i];
+      if (
+        !t.closable ||
+        (t.home && (this.tabs.length === 1 || this.fixedHome))
+      ) {
+        return Promise.reject();
+      }
+      const path = this.tabs[i + (i === 0 ? 1 : -1)]?.fullPath;
+      this.setValue(
+        'tabs',
+        this.tabs.filter((_d, j) => j !== i)
+      );
+      return t.key === active ? { path, home: !path } : {};
+    },
+    /**
+     * 关闭左侧页签
+     */
+    async tabRemoveLeft({ key, active }: TabItemEventOption): TabRemoveReturn {
+      let index = -1; // 选中页签的索引
+      for (let i = 0; i < this.tabs.length; i++) {
+        if (this.tabs[i].key === active) {
+          index = i;
+        }
+        if (this.tabs[i].key === key) {
+          if (i === 0) {
+            break;
+          }
+          const temp = this.tabs.filter((d, j) => !d.closable && j < i);
+          if (temp.length === i) {
+            break;
+          }
+          const path = index === -1 ? void 0 : this.tabs[i].fullPath;
+          await this.setValue('tabs', temp.concat(this.tabs.slice(i)));
+          return { path };
+        }
+      }
+      return Promise.reject();
+    },
+    /**
+     * 关闭右侧页签
+     */
+    async tabRemoveRight({ key, active }: TabItemEventOption): TabRemoveReturn {
+      let index = -1; // 选中页签的索引
+      for (let i = 0; i < this.tabs.length; i++) {
+        if (this.tabs[i].key === active) {
+          index = i;
+        }
+        if (this.tabs[i].key === key) {
+          if (i === this.tabs.length - 1) {
+            break;
+          }
+          const temp = this.tabs.filter((d, j) => !d.closable && j > i);
+          if (temp.length === this.tabs.length - i - 1) {
+            break;
+          }
+          const path = index === -1 ? this.tabs[i].fullPath : void 0;
+          await this.setValue('tabs', this.tabs.slice(0, i + 1).concat(temp));
+          return { path };
+        }
+      }
+      return Promise.reject();
+    },
+    /**
+     * 关闭其它页签
+     */
+    async tabRemoveOther({ key, active }: TabItemEventOption): TabRemoveReturn {
+      let path: string | undefined; // 关闭后跳转的地址
+      const temps = this.tabs.filter((d) => {
+        if (d.key === key) {
+          path = d.fullPath;
+        }
+        return !d.closable || d.key === key;
+      });
+      if (temps.length === this.tabs.length) {
+        return Promise.reject();
+      }
+      await this.setValue('tabs', temps);
+      return key === active ? {} : { path };
+    },
+    /**
+     * 关闭全部页签
+     */
+    async tabRemoveAll({ active }: TabItemEventOption): TabRemoveReturn {
+      if (this.tabs.length === 1 && this.tabs[0].home) {
+        return Promise.reject();
+      }
+      const temps = this.tabs.filter(
+        (t) => !t.closable || (t.home && this.fixedHome)
+      );
+      if (temps.length === this.tabs.length) {
+        return Promise.reject();
+      }
+      const t = active ? this.tabs.find((d) => d.key === active) : void 0;
+      const jump = t != null && t.closable === true; // 关闭后是否跳转
+      if (!temps.length) {
+        const h = this.tabs.find((d) => d.home);
+        if (!h) {
+          await this.setValue('tabs', []);
+          return { home: true };
+        }
+        await this.setValue('tabs', [h]);
+        return { home: t?.home ? void 0 : true };
+      }
+      await this.setValue('tabs', temps);
+      return { path: jump ? temps[0].fullPath : void 0 };
+    },
+    /**
+     * 修改页签
+     * @param data 页签数据
+     */
+    tabSetItem(data: TabItem) {
+      if (!data.key && !data.fullPath) {
+        if (!data.path) {
+          return;
+        }
+        this.tabs.forEach((d) => {
+          if (data.path === d.path) {
+            this.tabSetItem({ ...data, key: d.key });
+          }
+        });
+        return;
+      }
+      const k = data.key ? 'key' : 'fullPath';
+      const i = this.tabs.findIndex((d) => data[k] === d[k]);
+      if (i === -1) {
+        return;
+      }
+      const item = { ...this.tabs[i] };
+      if (data.title) {
+        const title = data.title;
+        item.title = title;
+        if (item.meta) {
+          item.meta.lang = { zh_CN: title, zh_TW: title, en: title };
+        }
+      }
+      if (typeof data.closable === 'boolean') {
+        item.closable = data.closable;
+      }
+      if (typeof data.refresh === 'boolean') {
+        item.refresh = data.refresh;
+      }
+      if (data.components) {
+        item.components = data.components;
+      }
+      const temps = [...this.tabs];
+      temps[i] = item;
+      this.setValue('tabs', temps).catch((e) => console.error(e));
+    },
+    /** 为兼容旧版保留方法 */
+    setTabs(value: TabItem[]) {
+      this.setValue('tabs', value).catch((e) => console.error(e));
+    },
+    setCollapse(value: boolean) {
+      this.setValue('collapse', value).catch((e) => console.error(e));
+    },
+    setCompact(value: boolean) {
+      this.setValue('compact', value).catch((e) => console.error(e));
+    },
+    setMaximized(value: boolean) {
+      this.setValue('maximized', value).catch((e) => console.error(e));
+    },
+    setContentWidth(value: number | null) {
+      this.setValue('contentWidth', value).catch((e) => console.error(e));
+    },
+    setDarkMode(value: boolean) {
+      return this.setValue('darkMode', value);
+    }
+  }
+});
diff --git a/z_ele/src/store/modules/user.ts b/z_ele/src/store/modules/user.ts
new file mode 100644
index 0000000..f574ac8
--- /dev/null
+++ b/z_ele/src/store/modules/user.ts
@@ -0,0 +1,170 @@
+/**
+ * 登录用户状态管理
+ */
+import { defineStore } from 'pinia';
+import type { BadgeProps } from 'element-plus';
+import { toTree, mapTree, isExternalLink } from 'ele-admin-plus';
+import type { MenuItem } from 'ele-admin-plus/es/ele-pro-layout/types';
+import type { User } from '@/api/system/user/model';
+import type { Menu } from '@/api/system/menu/model';
+import type { DictionaryData } from '@/api/system/dictionary-data/model';
+import { getUserInfo } from '@/api/layout';
+/** 直接指定菜单数据 */
+const USER_MENUS: Menu[] | null = null;
+
+export interface UserState {
+  info: User | null;
+  menus: MenuItem[] | null;
+  authorities: (string | undefined)[];
+  roles: (string | undefined)[];
+  dicts: Record<string, DictionaryData[]>;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    /** 当前登录用户的信息 */
+    info: null,
+    /** 当前登录用户的菜单 */
+    menus: null,
+    /** 当前登录用户的权限 */
+    authorities: [],
+    /** 当前登录用户的角色 */
+    roles: [],
+    /** 字典数据缓存 */
+    dicts: {}
+  }),
+  actions: {
+    /**
+     * 请求登录用户的个人信息/权限/角色/菜单
+     */
+    async fetchUserInfo() {
+      const result = await getUserInfo().catch((e) => console.error(e));
+      if (!result) {
+        return {};
+      }
+      // 用户信息
+      this.setInfo(result);
+      // 用户权限
+      if (result.authorities) {
+        this.authorities =
+          result.authorities.map((d) => d.authority).filter((a) => !!a) ?? [];
+      }
+      // 用户角色
+      this.roles = result.roles?.map?.((d) => d.roleCode) ?? [];
+      // 用户菜单, 过滤掉按钮类型并转为children形式
+      const { menus, homePath } = formatMenus(
+        USER_MENUS ??
+          toTree({
+            data: result.authorities?.filter?.((d) => d.menuType !== 1),
+            idField: 'menuId',
+            parentIdField: 'parentId'
+          })
+      );
+      this.setMenus(menus);
+      return { menus, homePath };
+    },
+    /**
+     * 更新用户信息
+     */
+    setInfo(value: User) {
+      this.info = value;
+    },
+    /**
+     * 更新菜单数据
+     */
+    setMenus(menus: MenuItem[] | null) {
+      this.menus = menus;
+    },
+    /**
+     * 更新菜单的徽章
+     * @param path 菜单地址
+     * @param value 徽章值
+     * @param type 徽章类型
+     */
+    setMenuBadge(
+      path: string,
+      value?: number | string | null,
+      type?: BadgeProps['type']
+    ) {
+      this.menus = mapTree(this.menus, (m) => {
+        if (path === m.path) {
+          const meta = m.meta || {};
+          return {
+            ...m,
+            meta: {
+              ...meta,
+              props: {
+                ...meta.props,
+                badge: value == null ? void 0 : { value, type }
+              }
+            }
+          };
+        }
+        return m;
+      });
+    },
+    /**
+     * 更新字典数据
+     */
+    setDicts(
+      value: DictionaryData[] | Record<string, DictionaryData[]>,
+      code?: string | null
+    ) {
+      if (code == null) {
+        this.dicts = value as Record<string, DictionaryData[]>;
+        return;
+      }
+      this.dicts[code] = value as DictionaryData[];
+    }
+  }
+});
+
+/**
+ * 菜单数据处理为EleProLayout所需要的格式
+ * @param data 菜单数据
+ * @param childField 子级的字段名称
+ */
+function formatMenus(data: Menu[], childField = 'children') {
+  let homePath: string | undefined;
+  let homeTitle: string | undefined;
+  const menus = mapTree<Menu, MenuItem>(
+    data,
+    (item) => {
+      const meta: MenuItem['meta'] =
+        typeof item.meta === 'string'
+          ? JSON.parse(item.meta || '{}')
+          : item.meta;
+      const menu: MenuItem = {
+        path: item.path,
+        component: item.component,
+        meta: { title: item.title, icon: item.icon, hide: !!item.hide, ...meta }
+      };
+      const children = item[childField]
+        ? item[childField].filter((d: any) => !(d.meta?.hide ?? d.hide))
+        : void 0;
+      if (!children?.length) {
+        if (!homePath && menu.path && !isExternalLink(menu.path)) {
+          homePath = menu.path;
+          homeTitle = menu.meta?.title;
+        }
+      } else {
+        const childPath = children[0].path;
+        if (childPath) {
+          if (!menu.redirect) {
+            menu.redirect = childPath;
+          }
+          if (!menu.path) {
+            menu.path = childPath.substring(0, childPath.lastIndexOf('/'));
+          }
+        }
+      }
+      if (!menu.path) {
+        console.error('菜单path不能为空且要唯一:', item);
+        return;
+      }
+      return menu;
+    },
+    childField
+  );
+  return { menus, homePath, homeTitle };
+}
diff --git a/z_ele/src/styles/index.scss b/z_ele/src/styles/index.scss
new file mode 100644
index 0000000..6291b81
--- /dev/null
+++ b/z_ele/src/styles/index.scss
@@ -0,0 +1,142 @@
+/** 全局样式 */
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+@use './transition.scss' as *;
+
+* {
+  outline: none;
+}
+
+html {
+  overflow: auto;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  line-height: 1.58;
+  color: getCssVar('text-color', 'regular');
+  font-size: getCssVar('font-size', 'base');
+  font-family: getCssVar('font-family');
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+}
+
+/* 关闭响应式 */
+body.ele-body-limited {
+  min-width: 1200px;
+}
+
+/* 色弱模式 */
+.ele-admin-weak {
+  filter: invert(0.8);
+}
+
+/* 按钮加图标减少间距 */
+.ele-btn-icon.el-button,
+.ele-btn-icon.el-button.is-round {
+  padding-left: 12px;
+  padding-right: 12px;
+
+  & > .el-icon {
+    margin-left: -2px;
+    margin-right: -2px;
+  }
+
+  &.el-button--small {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &.el-button--large {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
+/* 级联选择器增加高度 */
+.ele-popper-higher .el-cascader-menu__wrap.el-scrollbar__wrap {
+  height: 280px;
+}
+
+/* 间距组件样式优化 */
+.el-space--horizontal > .el-space__item:last-child {
+  margin-right: 0 !important;
+}
+
+.el-space--vertical > .el-space__item:last-child {
+  padding-bottom: 0 !important;
+}
+
+/* echarts */
+.echarts > div > div {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* 小屏幕时分页去掉一些组件 */
+@media screen and (max-width: 768px) {
+  .ele-pro-table .el-pagination {
+    .el-pagination__sizes,
+    .el-pagination__jump {
+      display: none;
+    }
+  }
+}
+
+/* 表单验证气泡形式 */
+.pro-form-error-popper.el-form-item > .el-form-item__content {
+  & > .el-form-item__error {
+    position: absolute;
+    left: 0;
+    top: auto;
+    bottom: calc(100% + 3px);
+    width: max-content;
+    color: #fff;
+    font-size: 12px;
+    background: getCssVar('color-danger');
+    transition: all 0.2s;
+    padding: 4px 6px;
+    border-radius: 3px;
+    z-index: 999;
+    transform: none;
+
+    &:after {
+      content: '';
+      border: 4px solid transparent;
+      border-top-color: getCssVar('color-danger');
+      position: absolute;
+      left: 8px;
+      bottom: -7px;
+    }
+  }
+}
+
+/* 主题切换过渡 */
+::view-transition-old(root),
+::view-transition-new(root),
+::view-transition-old(body),
+::view-transition-new(body) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root),
+html.dark::view-transition-old(root),
+::view-transition-new(body),
+html:has(> body.ele-admin-weak)::view-transition-old(body) {
+  z-index: 1;
+}
+
+::view-transition-old(root),
+html.dark::view-transition-new(root),
+::view-transition-old(body),
+html:has(> body.ele-admin-weak)::view-transition-new(body) {
+  z-index: 2147483646;
+}
+
+html.disabled-transition,
+html.disabled-transition :not(.view-transition-trigger) * {
+  transition: none !important;
+}
diff --git a/z_ele/src/styles/themes/dark.scss b/z_ele/src/styles/themes/dark.scss
new file mode 100644
index 0000000..65ea9f1
--- /dev/null
+++ b/z_ele/src/styles/themes/dark.scss
@@ -0,0 +1,77 @@
+/** 暗黑主题(css-var) */
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #0052d9
+    ),
+    'success': (
+      'base': #49aa19
+    ),
+    'warning': (
+      'base': #d89614
+    ),
+    'danger': (
+      'base': #dc4446
+    ),
+    'error': (
+      'base': #dc4446
+    ),
+    'info': (
+      'base': #8b8b8b
+    )
+  ),
+  $text-color: (
+    'primary': rgba(255, 255, 255, 0.9),
+    'regular': rgba(255, 255, 255, 0.85),
+    'secondary': rgba(255, 255, 255, 0.4),
+    'placeholder': rgba(255, 255, 255, 0.3),
+    'disabled': rgba(255, 255, 255, 0.28)
+  ),
+  $border-color: (
+    '': #424242,
+    'light': #303030,
+    'lighter': #303030,
+    'extra-light': #282828,
+    'dark': #303030,
+    'darker': #424242
+  ),
+  $fill-color: (
+    '': #303030,
+    'light': #282828,
+    'lighter': #1d1d1d,
+    'extra-light': #1a1a1a,
+    'dark': #282828,
+    'darker': #303030
+  ),
+  $bg-color: (
+    '': #141414,
+    'page': #080808,
+    'overlay': #1f1f1f
+  ),
+  $box-shadow: (
+    '': (
+      0px 0px 12px rgba(0, 0, 0, 0.8)
+    ),
+    'light': (
+      0 3px 6px -4px rgba(0, 0, 0, 0.48),
+      0 6px 16px 0 rgba(0, 0, 0, 0.32),
+      0 9px 28px 8px rgba(0, 0, 0, 0.2)
+    ),
+    'lighter': (
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    ),
+    'dark': (
+      0 3px 6px -4px rgba(0, 0, 0, 0.48),
+      0 6px 16px 0 rgba(0, 0, 0, 0.32),
+      0 9px 28px 8px rgba(0, 0, 0, 0.2)
+    )
+  ),
+  $mask-color: (
+    '': rgba(20, 20, 20, 0.8),
+    'extra-light': rgba(20, 20, 20, 0.6)
+  )
+);
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
+@use 'ele-admin-plus/es/style/themes/dark-css-var.scss';
diff --git a/z_ele/src/styles/themes/rounded.scss b/z_ele/src/styles/themes/rounded.scss
new file mode 100644
index 0000000..af46b82
--- /dev/null
+++ b/z_ele/src/styles/themes/rounded.scss
@@ -0,0 +1,13 @@
+/** 圆角主题(css-var) */
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;
+@use 'ele-admin-plus/es/style/themes/rounded-css-var.scss' as *;
+
+#{$rounded-selector} {
+  @include set-component-css-var(
+    'border-radius',
+    (
+      'base': 6px,
+      'small': 4px
+    )
+  );
+}
diff --git a/z_ele/src/styles/themes/transparent.scss b/z_ele/src/styles/themes/transparent.scss
new file mode 100644
index 0000000..7c942b3
--- /dev/null
+++ b/z_ele/src/styles/themes/transparent.scss
@@ -0,0 +1,6 @@
+/** 透明主题(css-var) */
+@use 'ele-admin-plus/es/style/themes/transparent-css-var.scss' as *;
+
+html.is-transparent div.login-wrapper {
+  background: none;
+}
diff --git a/z_ele/src/styles/transition.scss b/z_ele/src/styles/transition.scss
new file mode 100644
index 0000000..a559791
--- /dev/null
+++ b/z_ele/src/styles/transition.scss
@@ -0,0 +1,92 @@
+/** 路由切换动画 */
+
+/* 执行动画时隐藏页脚 */
+.fade-enter-active,
+.fade-leave-active,
+.slide-bottom-enter-active,
+.slide-bottom-leave-active,
+.slide-right-leave-active,
+.slide-right-enter-active,
+.zoom-in-enter-active,
+.zoom-in-leave-active,
+.zoom-out-leave-active,
+.zoom-out-enter-active {
+  & + .ele-footer {
+    visibility: hidden;
+  }
+}
+
+/* 渐变 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 底部消退 */
+.slide-bottom-enter-active,
+.slide-bottom-leave-active {
+  transition: (opacity 0.2s ease-out, transform 0.25s ease-out);
+}
+
+.slide-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.slide-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+/* 右侧消退 */
+.slide-right-leave-active,
+.slide-right-enter-active {
+  transition: (opacity 0.2s ease-out, transform 0.25s ease-out);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-60px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(60px);
+}
+
+/* 放大渐变 */
+.zoom-in-enter-active,
+.zoom-in-leave-active {
+  transition: (opacity 0.2s ease-out, transform 0.25s ease-out);
+}
+
+.zoom-in-enter-from {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.zoom-in-leave-to {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+/* 缩小渐变 */
+.zoom-out-leave-active,
+.zoom-out-enter-active {
+  transition: (opacity 0.2s ease-out, transform 0.25s ease-out);
+}
+
+.zoom-out-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
diff --git a/z_ele/src/styles/variables.scss b/z_ele/src/styles/variables.scss
new file mode 100644
index 0000000..d784832
--- /dev/null
+++ b/z_ele/src/styles/variables.scss
@@ -0,0 +1,97 @@
+/** ElementPlus样式变量修改(影响所有scss) */
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #2f54eb
+    ),
+    'success': (
+      'base': #52c41a
+    ),
+    'warning': (
+      'base': #faad14
+    ),
+    'danger': (
+      'base': #ff4d4f
+    ),
+    'error': (
+      'base': #ff4d4f
+    )
+  ),
+  $text-color: (
+    'primary': rgba(0, 0, 0, 0.92),
+    'regular': rgba(0, 0, 0, 0.88),
+    'secondary': rgba(0, 0, 0, 0.6),
+    'placeholder': rgba(0, 0, 0, 0.36),
+    'disabled': rgba(0, 0, 0, 0.28)
+  ),
+  $border-color: (
+    '': #d9d9d9,
+    'light': #e8e8e8,
+    'lighter': #e8e8e8,
+    'extra-light': #f0f0f0
+  ),
+  $fill-color: (
+    '': #f0f0f0,
+    'light': #f5f5f5,
+    'lighter': #f7f7f7,
+    'extra-light': #fafafa
+  ),
+  $bg-color: (
+    '': #ffffff,
+    'page': #f0f2f5,
+    'overlay': #ffffff
+  ),
+  $box-shadow: (
+    '': (
+      0 2px 10px 2px rgba(0, 0, 0, 0.1)
+    ),
+    'light': (
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    ),
+    'lighter': (
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    ),
+    'dark': (
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    )
+  ),
+  $overlay-color: (
+    '': rgba(0, 0, 0, 0.8),
+    'light': rgba(0, 0, 0, 0.6),
+    'lighter': rgba(0, 0, 0, 0.45)
+  ),
+  $mask-color: (
+    '': rgba(255, 255, 255, 0.4),
+    'extra-light': rgba(255, 255, 255, 0.6)
+  ),
+  $border-radius: (
+    'base': 3px,
+    'small': 2px
+  )
+);
+
+@forward 'ele-admin-plus/es/style/themes/default.scss' with (
+  $scrollbar-selector: 'pc',
+  $ele: (
+    'header': (
+      'primary-bg': linear-gradient(
+          12deg,
+          getCssVar('color-primary'),
+          getCssVar('color-primary', 'light-3') 28%,
+          getCssVar('color-primary', 'light-5') 46%,
+          getCssVar('color-primary', 'light-3') 72%,
+          getCssVar('color-primary') 92%,
+          getCssVar('color-primary', 'dark-2')
+        ),
+      'primary-shadow': 'none'
+    )
+  )
+);
diff --git a/z_ele/src/utils/common.ts b/z_ele/src/utils/common.ts
new file mode 100644
index 0000000..e64455c
--- /dev/null
+++ b/z_ele/src/utils/common.ts
@@ -0,0 +1,221 @@
+import type { Router } from 'vue-router';
+import type { Action } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
+import { removeToken } from '@/utils/token-util';
+
+/**
+ * 退出登录
+ * @param route 是否使用路由跳转
+ * @param from 登录后跳转的地址
+ * @param push 路由跳转方法
+ */
+export function logout(route?: boolean, from?: string, push?: Router['push']) {
+  removeToken();
+  if (route && push) {
+    push({
+      path: '/login',
+      query: from ? { from: encodeURIComponent(from) } : void 0
+    });
+    return;
+  }
+  // 这样跳转避免再次登录重复注册动态路由, hash 路由模式使用 location.reload();
+  const BASE_URL = import.meta.env.BASE_URL;
+  const url = BASE_URL + 'login';
+  location.replace(from ? `${url}?from=${encodeURIComponent(from)}` : url);
+}
+
+/**
+ * 显示登录过期退出重新登录弹窗
+ * @param from 登录后跳转的地址
+ * @param push 路由跳转方法
+ */
+export function showLogoutConfirm(from: string, push?: Router['push']) {
+  ElMessageBox.close();
+  ElMessageBox.alert('登录状态已过期, 请退出重新登录!', '系统提示', {
+    confirmButtonText: '重新登录',
+    callback: (action: Action) => {
+      if (action === 'confirm') {
+        logout(!!push, from, push);
+      }
+    },
+    type: 'warning',
+    draggable: true
+  });
+}
+
+/**
+ * 下载文件
+ * @param url 文件地址
+ * @param name 文件名
+ */
+export function downloadUrl(url: string, name: string) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+/**
+ * 下载文件
+ * @param data 二进制数据
+ * @param name 文件名
+ * @param type 文件类型
+ */
+export function download(
+  data: Blob | ArrayBuffer | string,
+  name: string,
+  type?: string
+) {
+  const blob = new Blob([data], { type: type || 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  downloadUrl(url, name);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * 参数转url字符串
+ * @param params 参数
+ * @param url 需要拼接参数的地址
+ */
+export function toURLSearch(
+  params?: Record<keyof any, any> | null,
+  url?: string
+): string {
+  if (typeof params !== 'object' || params == null) {
+    return '';
+  }
+  const result = transformParams(params)
+    .map((d) => `${encodeURIComponent(d[0])}=${encodeURIComponent(d[1])}`)
+    .join('&');
+  if (!url) {
+    return result;
+  }
+  return (url.includes('?') ? `${url}&` : `${url}?`) + result;
+}
+
+/**
+ * 参数转表单数据
+ * @param params 参数
+ */
+export function toFormData(params?: Record<keyof any, any> | null): FormData {
+  const formData = new FormData();
+  if (typeof params !== 'object' || params == null) {
+    return formData;
+  }
+  transformParams(params).forEach((d) => {
+    formData.append(d[0], d[1]);
+  });
+  return formData;
+}
+
+/**
+ * get请求处理数组和对象类型参数
+ * @param params 参数
+ */
+export function transformParams(params?: Record<string, any> | null) {
+  const result: [string, string][] = [];
+  if (params != null && typeof params === 'object') {
+    Object.keys(params).forEach((key) => {
+      const value = params[key];
+      if (value != null && value !== '') {
+        if (typeof value === 'object' && !isBlobFile(value)) {
+          getObjectParamsArray(value).forEach((item) => {
+            result.push([`${key}${item[0]}`, item[1]]);
+          });
+        } else {
+          result.push([key, value]);
+        }
+      }
+    });
+  }
+  return result;
+}
+
+/**
+ * 对象转参数数组
+ * @param obj 对象
+ */
+export function getObjectParamsArray(obj: Record<string, any>) {
+  const result: [string, string][] = [];
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    if (value != null && value !== '') {
+      const name = `[${key}]`;
+      if (typeof value === 'object' && !isBlobFile(value)) {
+        getObjectParamsArray(value).forEach((item) => {
+          result.push([`${name}${item[0]}`, item[1]]);
+        });
+      } else {
+        result.push([name, value]);
+      }
+    }
+  });
+  return result;
+}
+
+/**
+ * 判断是否是文件
+ * @param obj 对象
+ */
+export function isBlobFile(obj: any) {
+  return obj != null && (obj instanceof Blob || obj instanceof File);
+}
+
+/**
+ * 切换主题过渡动画
+ * @param callback 执行的方法
+ * @param el 过渡动画触发元素
+ * @param isOut 是否是退出方向
+ * @param isBody 是否在 body 上执行动画
+ */
+export function doWithTransition(
+  callback: () => Promise<void>,
+  el?: HTMLElement | null,
+  isOut?: boolean,
+  isBody?: boolean
+) {
+  // @ts-ignore
+  if (!el || typeof document.startViewTransition !== 'function') {
+    callback().catch((e) => console.error(e));
+    return;
+  }
+  document.documentElement.classList.add('disabled-transition');
+  el.classList.add('view-transition-trigger');
+  el.style.setProperty('view-transition-name', 'view-transition-trigger');
+  if (isBody) {
+    document.body.style.setProperty('view-transition-name', 'body');
+  }
+  const rect = el.getBoundingClientRect();
+  const x = rect.left + rect.width / 2;
+  const y = rect.top + rect.height / 2;
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y)
+  );
+  // @ts-ignore
+  document.startViewTransition(callback).ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`
+    ];
+    const anim = document.documentElement.animate(
+      { clipPath: isOut ? [...clipPath].reverse() : clipPath },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isOut
+          ? `::view-transition-old(${isBody ? 'body' : 'root'})`
+          : `::view-transition-new(${isBody ? 'body' : 'root'})`
+      }
+    );
+    anim.onfinish = () => {
+      document.body.style.removeProperty('view-transition-name');
+      el.style.removeProperty('view-transition-name');
+      el.classList.remove('view-transition-trigger');
+      document.documentElement.classList.remove('disabled-transition');
+    };
+  });
+}
diff --git a/z_ele/src/utils/page-title-util.ts b/z_ele/src/utils/page-title-util.ts
new file mode 100644
index 0000000..e7f2f30
--- /dev/null
+++ b/z_ele/src/utils/page-title-util.ts
@@ -0,0 +1,16 @@
+import { PROJECT_NAME } from '@/config/setting';
+
+/**
+ * 修改浏览器标题
+ * @param title 标题
+ */
+export function setPageTitle(title?: string) {
+  const names: string[] = [];
+  if (title) {
+    names.push(title);
+  }
+  if (PROJECT_NAME) {
+    names.push(PROJECT_NAME);
+  }
+  document.title = names.join(' - ');
+}
diff --git a/z_ele/src/utils/permission.ts b/z_ele/src/utils/permission.ts
new file mode 100644
index 0000000..bf8e17f
--- /dev/null
+++ b/z_ele/src/utils/permission.ts
@@ -0,0 +1,42 @@
+/**
+ * 按钮级权限控制指令
+ */
+import type { App } from 'vue';
+import { usePermission } from './use-permission';
+
+export default {
+  install(app: App) {
+    app.directive('role', {
+      mounted: (el, binding) => {
+        const { hasRole } = usePermission();
+        if (!hasRole(binding.value)) {
+          el.parentNode?.removeChild?.(el);
+        }
+      }
+    });
+    app.directive('any-role', {
+      mounted: (el, binding) => {
+        const { hasAnyRole } = usePermission();
+        if (!hasAnyRole(binding.value)) {
+          el.parentNode?.removeChild?.(el);
+        }
+      }
+    });
+    app.directive('permission', {
+      mounted: (el, binding) => {
+        const { hasPermission } = usePermission();
+        if (!hasPermission(binding.value)) {
+          el.parentNode?.removeChild?.(el);
+        }
+      }
+    });
+    app.directive('any-permission', {
+      mounted: (el, binding) => {
+        const { hasAnyPermission } = usePermission();
+        if (!hasAnyPermission(binding.value)) {
+          el.parentNode?.removeChild?.(el);
+        }
+      }
+    });
+  }
+};
diff --git a/z_ele/src/utils/request.ts b/z_ele/src/utils/request.ts
new file mode 100644
index 0000000..bf3eef9
--- /dev/null
+++ b/z_ele/src/utils/request.ts
@@ -0,0 +1,92 @@
+/**
+ * axios实例
+ */
+import axios from 'axios';
+import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import { unref } from 'vue';
+import { API_BASE_URL, LAYOUT_PATH } from '@/config/setting';
+import type { ApiResult } from '@/api';
+import router from '@/router';
+import { isWhiteList } from '@/router/routes';
+import { getToken, setToken } from './token-util';
+import { logout, showLogoutConfirm, toURLSearch } from './common';
+
+/**
+ * 请求拦截处理
+ */
+export function requestInterceptor(config: InternalAxiosRequestConfig<any>) {
+  // 添加token到header
+  const token = getToken();
+  if (token && config.headers) {
+    config.headers['Authorization'] = token;
+  }
+  // get请求处理数组和对象类型参数
+  if (config.method === 'get' && config.params) {
+    config.url = toURLSearch(config.params, config.url);
+    config.params = {};
+  }
+  config.headers['Client'] = "PAdmin";
+  config.headers['Client-Id'] = 1;
+  config.headers['Client-Version'] = "1.0.0";
+}
+
+/**
+ * 响应拦截处理
+ */
+export function responseInterceptor(res: AxiosResponse<ApiResult<unknown>>) {
+  // 登录过期处理
+  if (res.data?.code === 401 || (res.data?.code === 403 && !getToken())) {
+    const { path, fullPath } = unref(router.currentRoute);
+    if (!(isWhiteList(path) || isWhiteList(location.pathname))) {
+      if (path == LAYOUT_PATH) {
+        logout(true, void 0, router.push);
+      } else if (path !== '/login') {
+        showLogoutConfirm(fullPath);
+      }
+    }
+    return res.data.message;
+  }
+  // 续期token
+  const newToken = res.headers['authorization'];
+  if (newToken) {
+    setToken(newToken);
+  }
+}
+
+/** 创建axios实例 */
+const service = axios.create({
+  baseURL: API_BASE_URL
+});
+
+/**
+ * 添加响应拦截器
+ */
+service.interceptors.response.use(
+  (res: AxiosResponse<ApiResult<unknown>>) => {
+    const errorMessage = responseInterceptor(res);
+    if (errorMessage) {
+      return Promise.reject(new Error(errorMessage));
+    }
+    return res;
+  },
+  (error) => {
+    console.error(error);
+    return Promise.reject(new Error('网络错误'));
+  }
+);
+
+/**
+ * 添加请求拦截器
+ */
+service.interceptors.request.use(
+  (config) => {
+    requestInterceptor(config);
+    return config;
+  },
+  (error) => {
+    console.error(error);
+    return Promise.reject(new Error('网络错误'));
+  }
+);
+
+export default service;
diff --git a/z_ele/src/utils/token-util.ts b/z_ele/src/utils/token-util.ts
new file mode 100644
index 0000000..7477550
--- /dev/null
+++ b/z_ele/src/utils/token-util.ts
@@ -0,0 +1,39 @@
+/**
+ * token操作封装
+ */
+import { TOKEN_CACHE_NAME } from '@/config/setting';
+
+/**
+ * 获取缓存的token
+ */
+export function getToken(): string | null {
+  const token = localStorage.getItem(TOKEN_CACHE_NAME);
+  if (!token) {
+    return sessionStorage.getItem(TOKEN_CACHE_NAME);
+  }
+  return token;
+}
+
+/**
+ * 缓存token
+ * @param token token
+ * @param remember 是否永久存储
+ */
+export function setToken(token?: string, remember?: boolean) {
+  removeToken();
+  if (token) {
+    if (remember) {
+      localStorage.setItem(TOKEN_CACHE_NAME, token);
+    } else {
+      sessionStorage.setItem(TOKEN_CACHE_NAME, token);
+    }
+  }
+}
+
+/**
+ * 移除token
+ */
+export function removeToken() {
+  localStorage.removeItem(TOKEN_CACHE_NAME);
+  sessionStorage.removeItem(TOKEN_CACHE_NAME);
+}
diff --git a/z_ele/src/utils/use-body-resize.ts b/z_ele/src/utils/use-body-resize.ts
new file mode 100644
index 0000000..0970afc
--- /dev/null
+++ b/z_ele/src/utils/use-body-resize.ts
@@ -0,0 +1,21 @@
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeStore } from '@/store/modules/theme';
+
+/**
+ * 主体区尺寸改变hook
+ * @param hook 改变回调
+ */
+export function useBodyResize(hook: Function) {
+  if (!hook) {
+    return;
+  }
+  const themeStore = useThemeStore();
+  const { contentWidth } = storeToRefs(themeStore);
+
+  watch(contentWidth, (value, oldValue) => {
+    if (value != null && oldValue != null) {
+      hook();
+    }
+  });
+}
diff --git a/z_ele/src/utils/use-dict-data.ts b/z_ele/src/utils/use-dict-data.ts
new file mode 100644
index 0000000..6b499c7
--- /dev/null
+++ b/z_ele/src/utils/use-dict-data.ts
@@ -0,0 +1,37 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+import { EleMessage } from 'ele-admin-plus';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/modules/user';
+import { listDictionaryData } from '@/api/system/dictionary-data';
+import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+/**
+ * 获取字典数据hook
+ * @param codes 字典编码
+ */
+export function useDictData(codes: string[]): ComputedRef<DictionaryData[]>[] {
+  const result: ComputedRef<DictionaryData[]>[] = [];
+
+  // 已缓存的字典
+  const userStore = useUserStore();
+  const { dicts } = storeToRefs(userStore);
+
+  codes.forEach((code) => {
+    result.push(computed<DictionaryData[]>(() => dicts.value[code] || []));
+    // 若还未缓存过则获取字典数据
+    if (dicts.value[code] != null) {
+      return;
+    }
+    userStore.setDicts([], code);
+    listDictionaryData({ dictCode: code })
+      .then((list) => {
+        userStore.setDicts(list, code);
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  });
+
+  return result;
+}
diff --git a/z_ele/src/utils/use-echarts.ts b/z_ele/src/utils/use-echarts.ts
new file mode 100644
index 0000000..5de89bc
--- /dev/null
+++ b/z_ele/src/utils/use-echarts.ts
@@ -0,0 +1,79 @@
+import type { Ref } from 'vue';
+import {
+  ref,
+  reactive,
+  unref,
+  provide,
+  watch,
+  onActivated,
+  onDeactivated,
+  nextTick
+} from 'vue';
+import { storeToRefs } from 'pinia';
+import type VChart from 'vue-echarts';
+import { THEME_KEY } from 'vue-echarts';
+import { ChartTheme, ChartThemeDark } from 'ele-admin-plus';
+import { useThemeStore } from '@/store/modules/theme';
+import { useBodyResize } from './use-body-resize';
+
+/**
+ * echarts自动切换主题/重置尺寸hook
+ * @param refs 图表ref
+ */
+export function useEcharts(refs: Ref<InstanceType<typeof VChart> | null>[]) {
+  /** 是否是暗黑主题 */
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+  /** 是否为deactivated状态 */
+  const deactivated = ref<boolean>(false);
+  /** 当前图表是否是暗黑主题 */
+  const isDark = ref<boolean>(unref(darkMode));
+  /** 当前图表主题 */
+  const chartsTheme = reactive({
+    ...(unref(isDark) ? ChartThemeDark : ChartTheme)
+  });
+
+  // 设置图表主题
+  provide(THEME_KEY, chartsTheme);
+
+  /** 重置图表尺寸 */
+  const resizeCharts = () => {
+    refs.forEach((chartRef) => {
+      unref(chartRef)?.resize?.();
+    });
+  };
+
+  /** 屏幕尺寸变化监听 */
+  useBodyResize(() => {
+    if (!unref(deactivated)) {
+      resizeCharts();
+    }
+  });
+
+  /** 更改图表主题 */
+  const changeTheme = (dark: boolean) => {
+    isDark.value = dark;
+    Object.assign(chartsTheme, dark ? ChartThemeDark : ChartTheme);
+  };
+
+  onActivated(() => {
+    deactivated.value = false;
+    nextTick(() => {
+      if (unref(isDark) !== unref(darkMode)) {
+        changeTheme(unref(darkMode));
+      } else {
+        resizeCharts();
+      }
+    });
+  });
+
+  onDeactivated(() => {
+    deactivated.value = true;
+  });
+
+  watch(darkMode, (dark) => {
+    if (!unref(deactivated)) {
+      changeTheme(dark);
+    }
+  });
+}
diff --git a/z_ele/src/utils/use-form-data.ts b/z_ele/src/utils/use-form-data.ts
new file mode 100644
index 0000000..fd128d4
--- /dev/null
+++ b/z_ele/src/utils/use-form-data.ts
@@ -0,0 +1,77 @@
+import { reactive } from 'vue';
+import type { UnwrapNestedRefs } from 'vue';
+import { cloneDeep, set as setValue } from 'lodash-es';
+type Result<T> = [
+  UnwrapNestedRefs<T>,
+  (field?: string, excludes?: string[]) => void,
+  (data: object, excludes?: string[]) => void,
+  (field: string, value: unknown) => void
+] & {
+  form: UnwrapNestedRefs<T>;
+  resetFields: (field?: string, excludes?: string[]) => void;
+  assignFields: (data: object, excludes?: string[]) => void;
+};
+
+/**
+ * 表单数据hook
+ * @param initValue 初始值
+ */
+export function useFormData<T extends object>(init?: T): Result<T> {
+  let initValue = init == null ? ({} as T) : cloneDeep(init);
+  /** 表单数据 */
+  const form = reactive(init == null ? ({} as T) : cloneDeep(init));
+
+  /** 重置为初始值 */
+  const resetFields = (field?: string, excludes?: string[]) => {
+    const keys = Object.keys(form);
+    if (typeof field === 'string' && field) {
+      if (keys.includes(field)) {
+        form[field] = cloneDeep(initValue[field]);
+      }
+      return;
+    }
+    const initValueClone = cloneDeep(initValue);
+    keys.forEach((key) => {
+      if (!excludes || !excludes.includes(key)) {
+        form[key] = initValueClone[key];
+      }
+    });
+  };
+
+  /** 赋值不改变字段 */
+  const assignFields = (data: object, excludes?: string[] | boolean) => {
+    if (excludes === true) {
+      initValue = data == null ? ({} as T) : cloneDeep(data as T);
+      const initValueKeys = Object.keys(initValue);
+      Object.keys(form).forEach((key) => {
+        form[key] = void 0;
+        if (!initValueKeys.includes(key)) {
+          delete form[key];
+        }
+      });
+      if (data != null) {
+        Object.assign(form, cloneDeep(data));
+      }
+      return;
+    }
+    Object.keys(form).forEach((key) => {
+      if (!excludes || !excludes.includes(key)) {
+        form[key] = data?.[key];
+      }
+    });
+  };
+
+  /** 赋值某字段 */
+  const setFieldValue = (field: string, value: unknown) => {
+    setValue(form, field, value);
+  };
+
+  const result = [form, resetFields, assignFields, setFieldValue] as const;
+  // 支持对象解构以兼容旧版
+  Object.assign(result, {
+    form,
+    resetFields,
+    assignFields
+  });
+  return result as Result<T>;
+}
diff --git a/z_ele/src/utils/use-mobile.ts b/z_ele/src/utils/use-mobile.ts
new file mode 100644
index 0000000..81f8335
--- /dev/null
+++ b/z_ele/src/utils/use-mobile.ts
@@ -0,0 +1,30 @@
+import { watch } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+
+/**
+ * 获取是否是移动端小屏幕hook
+ * @param onChange 值改变回调
+ */
+export function useMobile(onChange?: (isMobile: boolean) => void) {
+  const mobile = useMediaQuery('(max-width: 768px)');
+
+  watch(mobile, (isMobile) => {
+    onChange && onChange(isMobile);
+  });
+
+  return { mobile };
+}
+
+/**
+ * 获取是否是移动端触摸设备hook
+ * @param onChange 值改变回调
+ */
+export function useMobileDevice(onChange?: (isMobile: boolean) => void) {
+  const mobileDevice = useMediaQuery('(pointer: coarse)');
+
+  watch(mobileDevice, (isMobile) => {
+    onChange && onChange(isMobile);
+  });
+
+  return { mobileDevice };
+}
diff --git a/z_ele/src/utils/use-page-tab.ts b/z_ele/src/utils/use-page-tab.ts
new file mode 100644
index 0000000..f7cbf07
--- /dev/null
+++ b/z_ele/src/utils/use-page-tab.ts
@@ -0,0 +1,211 @@
+import { useRouter, useRoute } from 'vue-router';
+import { EleMessage } from 'ele-admin-plus';
+import type {
+  TabItem,
+  TabItemEventOption
+} from 'ele-admin-plus/es/ele-pro-layout/types';
+import { useThemeStore } from '@/store/modules/theme';
+import type { TabRemoveResult } from '@/store/modules/theme';
+import { HOME_PATH, LAYOUT_PATH, REDIRECT_PATH } from '@/config/setting';
+
+/**
+ * 页签操作hook
+ */
+export function usePageTab() {
+  const HOME_ROUTE = HOME_PATH || LAYOUT_PATH;
+  const route = useRoute();
+  const { push, replace } = useRouter();
+  const themeStore = useThemeStore();
+
+  /**
+   * 获取当前路由对应的页签key
+   */
+  const getRouteTabKey = () => {
+    const { path, fullPath, meta } = route;
+    return meta.tabUnique === false ? fullPath : path;
+  };
+
+  /**
+   * 当前路由对应的页签key
+   */
+  const routeTabKey = getRouteTabKey();
+
+  /**
+   * 刷新当前路由
+   */
+  const reloadPageTab = (option?: TabReloadOptions) => {
+    if (route.path.includes(REDIRECT_PATH)) {
+      return;
+    }
+    if (!option || !option.fullPath) {
+      // 刷新当前路由
+      setPageTab({ fullPath: route.fullPath, refresh: true });
+      replace({ path: REDIRECT_PATH + route.path, query: route.query });
+    } else {
+      // 刷新指定页签
+      setPageTab({ fullPath: option.fullPath, refresh: true });
+      replace(REDIRECT_PATH + option.fullPath);
+    }
+  };
+
+  /**
+   * 关闭当前页签
+   */
+  const finishPageTab = () => {
+    removePageTab({ key: routeTabKey, active: getRouteTabKey() });
+  };
+
+  /**
+   * 关闭指定页签
+   */
+  const removePageTab = (option: TabItemEventOption) => {
+    themeStore
+      .tabRemove(option)
+      .then((result) => {
+        handleRemoveDone(result);
+      })
+      .catch(() => {
+        EleMessage.error({ message: '当前页签不可关闭', plain: true });
+      });
+  };
+
+  /**
+   * 关闭左侧页签
+   */
+  const removeLeftPageTab = (option: TabItemEventOption) => {
+    themeStore
+      .tabRemoveLeft(option)
+      .then((result) => {
+        handleRemoveDone(result);
+      })
+      .catch(() => {
+        EleMessage.error({ message: '左侧没有可关闭的页签', plain: true });
+      });
+  };
+
+  /**
+   * 关闭右侧页签
+   */
+  const removeRightPageTab = (option: TabItemEventOption) => {
+    themeStore
+      .tabRemoveRight(option)
+      .then((result) => {
+        handleRemoveDone(result);
+      })
+      .catch(() => {
+        EleMessage.error({ message: '右侧没有可关闭的页签', plain: true });
+      });
+  };
+
+  /**
+   * 关闭其它页签
+   */
+  const removeOtherPageTab = (option: TabItemEventOption) => {
+    themeStore
+      .tabRemoveOther(option)
+      .then((result) => {
+        handleRemoveDone(result);
+      })
+      .catch(() => {
+        EleMessage.error({ message: '没有可关闭的页签', plain: true });
+      });
+  };
+
+  /**
+   * 关闭全部页签
+   */
+  const removeAllPageTab = (option: TabItemEventOption) => {
+    themeStore
+      .tabRemoveAll(option)
+      .then((result) => {
+        handleRemoveDone(result);
+      })
+      .catch(() => {
+        EleMessage.error({ message: '没有可关闭的页签', plain: true });
+      });
+  };
+
+  /**
+   * 页签移除方法完成操作
+   */
+  const handleRemoveDone = ({ path, home }: TabRemoveResult) => {
+    if (path) {
+      push(path);
+    } else if (home) {
+      push(HOME_ROUTE);
+    }
+  };
+
+  /**
+   * 更新页签数据
+   * @param data 页签数据
+   */
+  const setPageTabs = (data: TabItem[]) => {
+    themeStore.setValue('tabs', data).catch((e) => console.error(e));
+  };
+
+  /**
+   * 登录成功后清空页签
+   */
+  const cleanPageTabs = () => {
+    setPageTabs([]);
+  };
+
+  /**
+   * 添加页签
+   * @param data 页签数据
+   */
+  const addPageTab = (data: TabItem) => {
+    themeStore.tabAdd(data);
+  };
+
+  /**
+   * 修改页签
+   * @param data 页签数据
+   */
+  const setPageTab = (data: TabItem) => {
+    themeStore.tabSetItem(data);
+  };
+
+  /**
+   * 修改当前页签标题
+   * @param title 标题
+   */
+  const setPageTabTitle = (title: string) => {
+    setPageTab({ key: routeTabKey, title });
+  };
+
+  /**
+   * 登录成功后跳转首页
+   * @param from 登录前的地址
+   */
+  const goHomeRoute = (from?: string) => {
+    replace(from ? decodeURIComponent(from) : HOME_ROUTE);
+  };
+
+  return {
+    reloadPageTab,
+    finishPageTab,
+    removePageTab,
+    removeLeftPageTab,
+    removeRightPageTab,
+    removeOtherPageTab,
+    removeAllPageTab,
+    setPageTabs,
+    cleanPageTabs,
+    addPageTab,
+    setPageTab,
+    setPageTabTitle,
+    getRouteTabKey,
+    goHomeRoute,
+    routeTabKey
+  };
+}
+
+/**
+ * 刷新页签参数类型
+ */
+export interface TabReloadOptions {
+  /** 路由地址 */
+  fullPath?: string;
+}
diff --git a/z_ele/src/utils/use-permission.ts b/z_ele/src/utils/use-permission.ts
new file mode 100644
index 0000000..879cc98
--- /dev/null
+++ b/z_ele/src/utils/use-permission.ts
@@ -0,0 +1,88 @@
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/modules/user';
+
+/**
+ * 权限判断hook
+ */
+export function usePermission() {
+  const userStore = useUserStore();
+  const { authorities, roles } = storeToRefs(userStore);
+
+  /**
+   * 是否有某些权限
+   * @param value 权限字符或字符数组
+   */
+  const hasPermission = (value: string | string[]): boolean => {
+    // 如果需要某个特殊标识代表全部权限可添加如下
+    /* if (authorities.value && authorities.value.includes('*:*:*')) {
+      return true;
+    } */
+    return arrayHas(authorities.value, value);
+  };
+
+  /**
+   * 是否有任意权限
+   * @param value 权限字符或字符数组
+   */
+  const hasAnyPermission = (value: string | string[]): boolean => {
+    // 如果需要某个特殊标识代表全部权限可添加如下
+    /* if (authorities.value && authorities.value.includes('*:*:*')) {
+      return true;
+    } */
+    return arrayHasAny(authorities.value, value);
+  };
+
+  /**
+   * 是否有某些角色
+   * @param value 角色字符或字符数组
+   */
+  const hasRole = (value: string | string[]): boolean => {
+    return arrayHas(roles.value, value);
+  };
+
+  /**
+   * 是否有任意角色
+   * @param value 角色字符或字符数组
+   */
+  const hasAnyRole = (value: string | string[]): boolean => {
+    return arrayHasAny(roles.value, value);
+  };
+
+  return { hasPermission, hasAnyPermission, hasRole, hasAnyRole };
+}
+
+/**
+ * 判断数组是否有某些值
+ * @param array 数组
+ * @param value 单个值或数组
+ */
+function arrayHas(array: (string | undefined)[], value: string | string[]) {
+  if (!value) {
+    return true;
+  }
+  if (!array) {
+    return false;
+  }
+  if (Array.isArray(value)) {
+    return value.every((v) => array.includes(v));
+  }
+  return array.includes(value);
+}
+
+/**
+ * 判断数组是否有任意值
+ * @param array 数组
+ * @param value 单个值或数组
+ */
+function arrayHasAny(array: (string | undefined)[], value: string | string[]) {
+  if (!value) {
+    return true;
+  }
+  if (!array) {
+    return false;
+  }
+  if (Array.isArray(value)) {
+    return array.some((d) => d && value.includes(d));
+  }
+  return array.includes(value);
+}
diff --git a/z_ele/src/views/dashboard/analysis/components/hot-search.vue b/z_ele/src/views/dashboard/analysis/components/hot-search.vue
new file mode 100644
index 0000000..c070d65
--- /dev/null
+++ b/z_ele/src/views/dashboard/analysis/components/hot-search.vue
@@ -0,0 +1,107 @@
+<template>
+  <ele-card header="热门搜索">
+    <v-chart
+      ref="hotSearchChartRef"
+      :option="hotSearchChartOption"
+      style="height: 338px"
+      @click="handleHotSearchChartClick"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { use } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart, BarChart } from 'echarts/charts';
+  import { GridComponent, TooltipComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import 'echarts-wordcloud';
+  import { EleMessage } from 'ele-admin-plus';
+  import { getWordCloudList } from '@/api/dashboard/analysis';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);
+
+  const hotSearchChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([hotSearchChartRef]);
+
+  /** 词云图表配置 */
+  const hotSearchChartOption: EChartsCoreOption = reactive({});
+
+  /** 获取词云数据 */
+  const getWordCloudData = () => {
+    getWordCloudList()
+      .then((data) => {
+        Object.assign(hotSearchChartOption, {
+          tooltip: {
+            show: true,
+            confine: true,
+            borderWidth: 1
+          },
+          series: [
+            {
+              type: 'wordCloud',
+              width: '100%',
+              height: '100%',
+              sizeRange: [8, 16],
+              gridSize: 6,
+              textStyle: {
+                color: () => {
+                  const colors = [
+                    '#025DF4',
+                    '#DB6BCF',
+                    '#2498D1',
+                    '#BBBDE6',
+                    '#4045B2',
+                    '#21A97A',
+                    '#FF745A',
+                    '#007E99',
+                    '#FFA8A8',
+                    '#2391FF',
+                    '#FFC328',
+                    '#A0DC2C',
+                    '#946DFF',
+                    '#626681',
+                    '#EB4185',
+                    '#CD8150',
+                    '#36BCCB',
+                    '#327039',
+                    '#803488',
+                    '#83BC99'
+                  ];
+                  return colors[
+                    Math.floor(
+                      Math.random() * (0 - colors.length) + colors.length
+                    )
+                  ];
+                }
+              },
+              emphasis: {
+                textStyle: {
+                  textShadowBlur: 2,
+                  textShadowColor: 'hsla(0, 0%, 68%, 0.6)'
+                }
+              },
+              data: data
+            }
+          ]
+        });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 图表点击事件 */
+  const handleHotSearchChartClick = (params: any) => {
+    EleMessage.info({
+      message: `点击了: ${params.name} , 搜索量: ${params.value}`,
+      plain: true
+    });
+  };
+
+  getWordCloudData();
+</script>
diff --git a/z_ele/src/views/dashboard/analysis/components/sale-card.vue b/z_ele/src/views/dashboard/analysis/components/sale-card.vue
new file mode 100644
index 0000000..956471b
--- /dev/null
+++ b/z_ele/src/views/dashboard/analysis/components/sale-card.vue
@@ -0,0 +1,271 @@
+<template>
+  <ele-card
+    :header-style="{ paddingTop: 0, paddingBottom: 0 }"
+    :body-style="{ padding: 0 }"
+  >
+    <template #header>
+      <ele-tabs
+        type="plain"
+        size="large"
+        v-model="saleSearch.type"
+        :items="[
+          { name: 'saleroom', label: '销售额' },
+          { name: 'visits', label: '访问量' }
+        ]"
+        @tabChange="handleSaleTypeChange"
+      />
+    </template>
+    <template #extra>
+      <div class="hidden-xs-only" style="display: flex; align-items: center">
+        <el-radio-group
+          v-model="saleSearch.dateType"
+          @change="handleDateTypeChange"
+        >
+          <el-radio-button value="1" label="今天" />
+          <el-radio-button value="2" label="本周" />
+          <el-radio-button value="3" label="本月" />
+          <el-radio-button value="4" label="本年" />
+        </el-radio-group>
+        <div class="hidden-md-and-down" style="width: 320px; margin-left: 12px">
+          <el-date-picker
+            unlink-panels
+            type="datetimerange"
+            v-model="saleSearch.datetime"
+            range-separator="-"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            class="ele-fluid"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="sale-body">
+      <el-row :gutter="16">
+        <el-col :md="17" :sm="15" :xs="24">
+          <div class="sale-body-title">
+            {{ saleSearch.type === 'saleroom' ? '销售量趋势' : '访问量趋势' }}
+          </div>
+          <v-chart
+            ref="saleChartRef"
+            :option="saleChartOption"
+            style="height: 320px"
+            @click="handleSaleChartClick"
+          />
+        </el-col>
+        <el-col :md="7" :sm="9" :xs="24">
+          <div v-if="saleSearch.type === 'saleroom'" style="padding: 0 0 8px 0">
+            <div class="sale-body-title">门店销售额排名</div>
+            <div
+              v-for="(item, index) in saleroomRankData"
+              :key="index"
+              class="sale-rank-item"
+            >
+              <el-tag
+                size="small"
+                :disable-transitions="true"
+                :type="index < 3 ? void 0 : 'info'"
+                :effect="index < 3 ? 'dark' : 'light'"
+                :color="index < 3 ? '#314659' : void 0"
+                style="border: none; border-radius: 50%; width: 20px"
+              >
+                {{ index + 1 }}
+              </el-tag>
+              <ele-ellipsis class="sale-rank-item-text">
+                {{ item.name }}
+              </ele-ellipsis>
+              <ele-text type="placeholder">{{ item.value }}</ele-text>
+            </div>
+          </div>
+          <div v-else style="padding: 0 0 8px 0">
+            <div class="sale-body-title">门店访问量排名</div>
+            <div
+              v-for="(item, index) in visitsRankData"
+              :key="index"
+              class="sale-rank-item"
+            >
+              <el-tag
+                size="small"
+                :disable-transitions="true"
+                :type="index < 3 ? void 0 : 'info'"
+                :effect="index < 3 ? 'dark' : 'light'"
+                :color="index < 3 ? '#314659' : void 0"
+                style="border: none; border-radius: 50%; width: 20px"
+              >
+                {{ index + 1 }}
+              </el-tag>
+              <ele-ellipsis class="sale-rank-item-text">
+                {{ item.name }}
+              </ele-ellipsis>
+              <ele-text type="placeholder">{{ item.value }}</ele-text>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { EleMessage } from 'ele-admin-plus';
+  import { use } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart } from 'echarts/charts';
+  import { GridComponent, TooltipComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getSaleroomList } from '@/api/dashboard/analysis';
+  import type { SaleroomData } from '@/api/dashboard/analysis/model';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
+
+  const saleChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([saleChartRef]);
+
+  /** 销售额柱状图配置 */
+  const saleChartOption: EChartsCoreOption = reactive({});
+
+  /** 门店销售排名数据 */
+  const saleroomRankData = ref([
+    { name: '工专路 1 号店', value: '333,001' },
+    { name: '工专路 2 号店', value: '333,002' },
+    { name: '工专路 3 号店', value: '333,003' },
+    { name: '工专路 4 号店', value: '333,004' },
+    { name: '工专路 5 号店', value: '333,005' },
+    { name: '工专路 6 号店', value: '333,006' },
+    { name: '工专路 7 号店', value: '333,007' }
+  ]);
+
+  /** 门店访问排名数据 */
+  const visitsRankData = ref([
+    { name: '工专路 1 号店', value: '222,001' },
+    { name: '工专路 2 号店', value: '222,002' },
+    { name: '工专路 3 号店', value: '222,002' },
+    { name: '工专路 4 号店', value: '222,004' },
+    { name: '工专路 5 号店', value: '222,005' },
+    { name: '工专路 6 号店', value: '222,006' },
+    { name: '工专路 7 号店', value: '222,007' }
+  ]);
+
+  /** 销售量趋势数据 */
+  const saleroomData1 = ref<SaleroomData[]>([]);
+
+  /** 访问量趋势数据 */
+  const saleroomData2 = ref<SaleroomData[]>([]);
+
+  interface SaleSearchType {
+    type: string;
+    dateType: string;
+    datetime?: [string, string];
+  }
+
+  /** 销售量搜索参数 */
+  const saleSearch = reactive<SaleSearchType>({
+    type: 'saleroom',
+    dateType: '2',
+    datetime: void 0
+  });
+
+  /** 获取销售量数据 */
+  const getSaleroomData = () => {
+    getSaleroomList()
+      .then((data) => {
+        saleroomData1.value = data.list1;
+        saleroomData2.value = data.list2;
+        handleSaleTypeChange();
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 销售量tab选择改变事件 */
+  const handleSaleTypeChange = () => {
+    const chartData =
+      saleSearch.type === 'saleroom'
+        ? saleroomData1.value
+        : saleroomData2.value;
+    Object.assign(saleChartOption, {
+      tooltip: { trigger: 'axis' },
+      xAxis: [
+        {
+          type: 'category',
+          data: chartData.map((d) => d.month)
+        }
+      ],
+      yAxis: [{ type: 'value' }],
+      series: [
+        {
+          type: 'bar',
+          data: chartData.map((d) => d.value),
+          itemStyle: {
+            borderRadius: [6, 6, 0, 0],
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#b0d0ff' },
+                { offset: 0.4, color: '#80a9fa' },
+                { offset: 1, color: '#5b8ff9' }
+              ]
+            }
+          }
+        }
+      ]
+    });
+  };
+
+  /** 图表点击事件 */
+  const handleSaleChartClick = (params: any) => {
+    const type = saleSearch.type === 'saleroom' ? '销售量' : '访问量';
+    EleMessage.info({
+      message: `点击了: ${params.name} , ${type}: ${params.value}`,
+      plain: true
+    });
+  };
+
+  /** 日期单选切换事件 */
+  const handleDateTypeChange = (dateType: string) => {
+    const type: any = ['day', 'week', 'month', 'year'][Number(dateType) - 1];
+    const now = dayjs();
+    const formatter = 'YYYY-MM-DD HH:mm';
+    const start = now.startOf(type).format(formatter);
+    const end = now.endOf(type).format(formatter);
+    saleSearch.datetime = [start, end];
+  };
+
+  handleDateTypeChange('2');
+
+  getSaleroomData();
+</script>
+
+<style lang="scss" scoped>
+  .sale-body {
+    padding: 16px 0 10px 0;
+  }
+
+  .sale-body-title {
+    padding: 6px 20px;
+  }
+
+  .sale-rank-item {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    margin-top: 18px;
+    box-sizing: border-box;
+
+    .sale-rank-item-text {
+      flex: 1;
+      padding-left: 12px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/analysis/components/statistics-card.vue b/z_ele/src/views/dashboard/analysis/components/statistics-card.vue
new file mode 100644
index 0000000..a015671
--- /dev/null
+++ b/z_ele/src/views/dashboard/analysis/components/statistics-card.vue
@@ -0,0 +1,301 @@
+<!-- 统计卡片 -->
+<template>
+  <el-row :gutter="16">
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="statistics-card">
+        <ele-text type="placeholder" class="statistics-header">
+          <div class="statistics-header-text">总销售额</div>
+          <ele-tooltip content="指标说明" placement="top" :offset="6">
+            <el-icon class="statistics-header-tip">
+              <QuestionCircleOutlined />
+            </el-icon>
+          </ele-tooltip>
+        </ele-text>
+        <ele-text size="xxl" class="statistics-value">¥ 126,560</ele-text>
+        <div class="statistics-body">
+          <div class="statistics-trend-text">
+            <div>周同比12%</div>
+            <ele-text type="danger" :icon="CaretUpFilled" />
+          </div>
+          <div class="statistics-trend-text">
+            <div>日同比11%</div>
+            <ele-text type="success" :icon="CaretDownFilled" />
+          </div>
+        </div>
+        <el-divider />
+        <div>日销售额 ￥12,423</div>
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="statistics-card">
+        <ele-text type="placeholder" class="statistics-header">
+          <div class="statistics-header-text">访问量</div>
+          <el-tag type="danger" size="small" :disable-transitions="true">
+            日
+          </el-tag>
+        </ele-text>
+        <ele-text size="xxl" class="statistics-value">8,846</ele-text>
+        <v-chart
+          ref="visitChartRef"
+          :option="visitChartOption"
+          style="height: 36px"
+        />
+        <el-divider />
+        <div>日访问量 1,234</div>
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="statistics-card">
+        <ele-text type="placeholder" class="statistics-header">
+          <div class="statistics-header-text">支付笔数</div>
+          <el-tag size="small" :disable-transitions="true">月</el-tag>
+        </ele-text>
+        <ele-text size="xxl" class="statistics-value">6,560</ele-text>
+        <v-chart
+          ref="payNumChartRef"
+          :option="payNumChartOption"
+          style="height: 36px"
+        />
+        <el-divider />
+        <div>转化率 60%</div>
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="statistics-card">
+        <ele-text type="placeholder" class="statistics-header">
+          <div class="statistics-header-text">活动运营效果</div>
+          <el-tag type="success" size="small" :disable-transitions="true">
+            周
+          </el-tag>
+        </ele-text>
+        <ele-text size="xxl" class="statistics-value">78%</ele-text>
+        <div class="statistics-body">
+          <el-progress
+            color="linear-gradient(to right, #52C41A, #13c2c2  68%)"
+            :percentage="78"
+            :show-text="false"
+            :stroke-width="8"
+            style="width: 100%"
+          />
+        </div>
+        <el-divider />
+        <div class="statistics-footer">
+          <div class="statistics-trend-text">
+            <div>周同比12% </div>
+            <ele-text type="danger" :icon="CaretUpFilled" />
+          </div>
+          <div class="statistics-trend-text">
+            <div>日同比11% </div>
+            <ele-text type="success" :icon="CaretDownFilled" />
+          </div>
+        </div>
+      </ele-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { use } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart, BarChart } from 'echarts/charts';
+  import { GridComponent, TooltipComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import {
+    QuestionCircleOutlined,
+    CaretUpFilled,
+    CaretDownFilled
+  } from '@/components/icons';
+  import { getPayNumList } from '@/api/dashboard/analysis';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);
+
+  /** 访问量图表 */
+  const visitChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  /** 支付笔数图表 */
+  const payNumChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([visitChartRef, payNumChartRef]);
+
+  /** 访问量折线图配置 */
+  const visitChartOption: EChartsCoreOption = reactive({});
+
+  /** 支付笔数柱状图配置 */
+  const payNumChartOption: EChartsCoreOption = reactive({});
+
+  /** 获取支付笔数数据 */
+  const getPayNumData = () => {
+    getPayNumList()
+      .then((data) => {
+        Object.assign(visitChartOption, {
+          color: '#975fe5',
+          tooltip: {
+            trigger: 'axis',
+            formatter: `<i style="background: #975fe5;
+                                  width: 10px;
+                                  height: 10px;
+                                  margin-right: 5px;
+                                  border-radius: 50%;
+                                  display: inline-block;"
+                        ></i>{b0}: {c0}`
+          },
+          grid: { top: 0, bottom: 0, left: 0, right: 0 },
+          xAxis: [
+            {
+              show: false,
+              type: 'category',
+              boundaryGap: false,
+              data: data.map((d) => d.date)
+            }
+          ],
+          yAxis: [
+            {
+              show: false,
+              type: 'value',
+              splitLine: { show: false }
+            }
+          ],
+          series: [
+            {
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              lineStyle: { width: 1.38 },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(151, 95, 229, 0.6)' },
+                    { offset: 1, color: 'rgba(151, 95, 229, 0.2)' }
+                  ]
+                }
+              },
+              data: data.map((d) => d.value)
+            }
+          ]
+        });
+
+        Object.assign(payNumChartOption, {
+          tooltip: {
+            trigger: 'axis',
+            formatter: `<i style="background: #5b8ff9;
+                                  width: 10px;
+                                  height: 10px;
+                                  margin-right: 5px;
+                                  border-radius: 50%;
+                                  display: inline-block;"
+                        ></i>{b0}: {c0}`
+          },
+          grid: { top: 0, bottom: 0, left: 0, right: 0 },
+          xAxis: [
+            {
+              show: false,
+              type: 'category',
+              data: data.map((d) => d.date)
+            }
+          ],
+          yAxis: [
+            {
+              show: false,
+              type: 'value',
+              splitLine: { show: false }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              data: data.map((d) => d.value),
+              itemStyle: {
+                borderRadius: [2, 2, 0, 0],
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: '#b0d0ff' },
+                    { offset: 0.4, color: '#80a9fa' },
+                    { offset: 1, color: '#5b8ff9' }
+                  ]
+                }
+              }
+            }
+          ]
+        });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  getPayNumData();
+</script>
+
+<style lang="scss" scoped>
+  .statistics-card {
+    :deep(.ele-card-body) {
+      padding: 16px 22px 12px 22px;
+    }
+
+    :deep(.el-divider) {
+      margin: 12px 0;
+      opacity: 0.6;
+    }
+
+    .statistics-header {
+      display: flex;
+      align-items: center;
+
+      .statistics-header-text {
+        flex: 1;
+      }
+
+      .statistics-header-tip {
+        font-size: 15px;
+        cursor: help;
+      }
+    }
+
+    .statistics-value {
+      margin-top: 4px;
+    }
+
+    .statistics-body {
+      height: 36px;
+      display: flex;
+      padding-top: 18px;
+      box-sizing: border-box;
+    }
+
+    .statistics-trend-text {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      word-break: break-all;
+      overflow: hidden;
+
+      .el-icon {
+        font-size: 16px;
+        margin-left: 4px;
+      }
+
+      & + .statistics-trend-text {
+        margin-left: 14px;
+      }
+    }
+
+    .statistics-footer {
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/analysis/components/visit-hour.vue b/z_ele/src/views/dashboard/analysis/components/visit-hour.vue
new file mode 100644
index 0000000..6755033
--- /dev/null
+++ b/z_ele/src/views/dashboard/analysis/components/visit-hour.vue
@@ -0,0 +1,113 @@
+<template>
+  <ele-card
+    header="最近1小时访问情况"
+    :body-style="{ padding: '16px 6px 0 0' }"
+  >
+    <v-chart
+      ref="visitHourChartRef"
+      :option="visitHourChartOption"
+      style="height: 362px"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { use } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent
+  } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getVisitHourList } from '@/api/dashboard/analysis';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([
+    CanvasRenderer,
+    LineChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent
+  ]);
+
+  const visitHourChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([visitHourChartRef]);
+
+  /** 最近 1 小时访问情况折线图配置 */
+  const visitHourChartOption: EChartsCoreOption = reactive({});
+
+  /** 获取最近 1 小时访问情况数据 */
+  const getVisitHourData = () => {
+    getVisitHourList()
+      .then((data) => {
+        Object.assign(visitHourChartOption, {
+          tooltip: { trigger: 'axis' },
+          legend: {
+            data: ['浏览量', '访问量'],
+            right: 20
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: false,
+              data: data.map((d) => d.time)
+            }
+          ],
+          yAxis: [{ type: 'value' }],
+          series: [
+            {
+              name: '浏览量',
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(91, 143, 249, 0.6)' },
+                    { offset: 1, color: 'rgba(91, 143, 249, 0.2)' }
+                  ]
+                }
+              },
+              data: data.map((d) => d.views)
+            },
+            {
+              name: '访问量',
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(97, 221, 170, 0.6)' },
+                    { offset: 1, color: 'rgba(97, 221, 170, 0.2)' }
+                  ]
+                }
+              },
+              data: data.map((d) => d.visits)
+            }
+          ]
+        });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  getVisitHourData();
+</script>
diff --git a/z_ele/src/views/dashboard/analysis/index.vue b/z_ele/src/views/dashboard/analysis/index.vue
new file mode 100644
index 0000000..b19f5c5
--- /dev/null
+++ b/z_ele/src/views/dashboard/analysis/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <ele-page>
+    <statistics-card />
+    <sale-card />
+    <el-row :gutter="16">
+      <el-col :md="16" :sm="14" :xs="24">
+        <visit-hour />
+      </el-col>
+      <el-col :md="8" :sm="10" :xs="24">
+        <hot-search />
+      </el-col>
+    </el-row>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import StatisticsCard from './components/statistics-card.vue';
+  import SaleCard from './components/sale-card.vue';
+  import VisitHour from './components/visit-hour.vue';
+  import HotSearch from './components/hot-search.vue';
+
+  defineOptions({ name: 'DashboardAnalysis' });
+</script>
diff --git a/z_ele/src/views/dashboard/monitor/components/browser-card.vue b/z_ele/src/views/dashboard/monitor/components/browser-card.vue
new file mode 100644
index 0000000..adec4e0
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/browser-card.vue
@@ -0,0 +1,76 @@
+<template>
+  <ele-card header="浏览器分布" :body-style="{ padding: 0 }">
+    <v-chart
+      ref="browserChartRef"
+      :option="browserChartOption"
+      style="height: 236px"
+      @click="handleBrowserChartClick"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { use } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { PieChart } from 'echarts/charts';
+  import { TooltipComponent, LegendComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getBrowserCountList } from '@/api/dashboard/monitor';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
+
+  const browserChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([browserChartRef]);
+
+  /** 浏览器分布饼图配置 */
+  const browserChartOption: EChartsCoreOption = reactive({});
+
+  /** 获取用户浏览器分布数据 */
+  const getBrowserCountData = () => {
+    getBrowserCountList()
+      .then((data) => {
+        Object.assign(browserChartOption, {
+          tooltip: {
+            trigger: 'item',
+            confine: true,
+            borderWidth: 1
+          },
+          legend: {
+            bottom: 5,
+            itemWidth: 10,
+            itemHeight: 10,
+            icon: 'circle',
+            data: data.map((d) => d.name)
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: ['45%', '70%'],
+              center: ['50%', '43%'],
+              label: { show: false },
+              data: data,
+              itemStyle: { borderRadius: 6 }
+            }
+          ]
+        });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 图表点击事件 */
+  const handleBrowserChartClick = (params: any) => {
+    EleMessage.info({
+      message: `点击了: ${params.name} , 用户量: ${params.value}`,
+      plain: true
+    });
+  };
+
+  getBrowserCountData();
+</script>
diff --git a/z_ele/src/views/dashboard/monitor/components/map-card.vue b/z_ele/src/views/dashboard/monitor/components/map-card.vue
new file mode 100644
index 0000000..0009dcd
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/map-card.vue
@@ -0,0 +1,149 @@
+<template>
+  <ele-card header="用户分布">
+    <el-row>
+      <el-col :sm="18" :xs="24">
+        <v-chart
+          ref="userMapChartRef"
+          :option="userCountMapOption"
+          style="height: 468px"
+          @click="handleUserCountMapClick"
+        />
+      </el-col>
+      <el-col :sm="6" :xs="24">
+        <div
+          v-for="item in userCountDataRank"
+          :key="item.name"
+          class="user-item"
+        >
+          <div>{{ item.name }}</div>
+          <div class="user-item-body">
+            <el-progress
+              :stroke-width="8"
+              :show-text="false"
+              :percentage="item.percent"
+            />
+          </div>
+          <div>{{ item.value }}</div>
+        </div>
+      </el-col>
+    </el-row>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { use, registerMap } from 'echarts/core';
+  import type { EChartsCoreOption } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { MapChart } from 'echarts/charts';
+  import {
+    VisualMapComponent,
+    GeoComponent,
+    TooltipComponent
+  } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getChinaMapData, getUserCountList } from '@/api/dashboard/monitor';
+  import type { UserCount } from '@/api/dashboard/monitor/model';
+  import { useEcharts } from '@/utils/use-echarts';
+
+  use([
+    CanvasRenderer,
+    MapChart,
+    VisualMapComponent,
+    GeoComponent,
+    TooltipComponent
+  ]);
+
+  const userMapChartRef = ref<InstanceType<typeof VChart> | null>(null);
+
+  useEcharts([userMapChartRef]);
+
+  /** 用户分布前 10 名 */
+  const userCountDataRank = ref<UserCount[]>([]);
+
+  /** 用户分布地图配置 */
+  const userCountMapOption: EChartsCoreOption = reactive({});
+
+  /** 获取中国地图数据并注册地图 */
+  const registerChinaMap = () => {
+    getChinaMapData()
+      .then((data) => {
+        registerMap('china', data);
+        getUserCountData();
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 获取用户分布数据 */
+  const getUserCountData = () => {
+    getUserCountList()
+      .then((data) => {
+        const temp = data.sort((a, b) => b.value - a.value);
+        const min = temp[temp.length - 1].value || 0;
+        const max = temp[0].value || 1;
+        //
+        const list = temp.length > 10 ? temp.slice(0, 15) : temp;
+        userCountDataRank.value = list.map((d) => {
+          return {
+            name: d.name,
+            value: d.value,
+            percent: (d.value / max) * 100
+          };
+        });
+        //
+        Object.assign(userCountMapOption, {
+          tooltip: { trigger: 'item', borderWidth: 1 },
+          visualMap: {
+            min: min,
+            max: max,
+            text: ['高', '低'],
+            calculable: true,
+            bottom: 10
+          },
+          series: [
+            {
+              name: '用户数',
+              label: { show: true },
+              type: 'map',
+              map: 'china',
+              data: data
+            }
+          ]
+        });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 图表点击事件 */
+  const handleUserCountMapClick = (params: any) => {
+    const value = params.value;
+    EleMessage.info({
+      message: `点击了: ${params.name} , 用户数: ${isNaN(value) ? 0 : value}`,
+      plain: true
+    });
+  };
+
+  registerChinaMap();
+</script>
+
+<style lang="scss" scoped>
+  .user-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+
+    .user-item-body {
+      flex: 1;
+      padding: 0 10px 0 12px;
+    }
+
+    :deep(.el-progress-bar__outer) {
+      background-color: transparent;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/monitor/components/online-num.vue b/z_ele/src/views/dashboard/monitor/components/online-num.vue
new file mode 100644
index 0000000..de93ec7
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/online-num.vue
@@ -0,0 +1,57 @@
+<template>
+  <ele-card header="在线人数">
+    <div style="text-align: center">
+      <ele-text type="placeholder">{{ currentTime }}</ele-text>
+      <ele-text size="xxxl">
+        <ele-count-up :end-val="onlineNum" />
+      </ele-text>
+      <ele-text type="placeholder" style="margin-bottom: 11px">
+        在线总人数
+      </ele-text>
+      <ele-dot :text="updateTimeText" size="8px" />
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onBeforeUnmount } from 'vue';
+  import dayjs from 'dayjs';
+
+  /** 在线人数更新定时器 */
+  let onlineNumTimer: number | null = null;
+
+  /** 在线总人数倒计时 */
+  const updateTime = ref(10);
+
+  /** 当前时间 */
+  const currentTime = ref(dayjs().format('HH:mm:ss'));
+
+  /** 在线人数 */
+  const onlineNum = ref(228);
+
+  /** 在线人数倒计时文字 */
+  const updateTimeText = computed(() => updateTime.value + ' 秒后更新');
+
+  /** 在线人数更新倒计时 */
+  const startUpdateOnlineNum = () => {
+    onlineNumTimer = setInterval(() => {
+      currentTime.value = dayjs().format('HH:mm:ss');
+      if (updateTime.value === 1) {
+        updateTime.value = 10;
+        onlineNum.value = 100 + Math.round(Math.random() * 900);
+      } else {
+        updateTime.value--;
+      }
+    }, 1000) as unknown as number;
+  };
+
+  onBeforeUnmount(() => {
+    // 销毁定时器
+    if (onlineNumTimer) {
+      clearInterval(onlineNumTimer);
+      onlineNumTimer = null;
+    }
+  });
+
+  startUpdateOnlineNum();
+</script>
diff --git a/z_ele/src/views/dashboard/monitor/components/statistics-card.vue b/z_ele/src/views/dashboard/monitor/components/statistics-card.vue
new file mode 100644
index 0000000..6de98e6
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/statistics-card.vue
@@ -0,0 +1,185 @@
+<!-- 统计卡片 -->
+<template>
+  <el-row :gutter="16">
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="monitor-count">
+        <el-tag size="large" :disable-transitions="true">
+          <el-icon>
+            <UserFilled />
+          </el-icon>
+        </el-tag>
+        <ele-text size="xxl" class="monitor-count-value">21.2 k</ele-text>
+        <ele-text type="placeholder" class="monitor-count-text">
+          总访问人数
+        </ele-text>
+        <ele-avatar-group :data="visitUsers" size="small" :max-count="4" />
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="monitor-count">
+        <el-tag type="warning" size="large" :disable-transitions="true">
+          <el-icon>
+            <Opportunity />
+          </el-icon>
+        </el-tag>
+        <ele-text size="xxl" class="monitor-count-value">1.6 k</ele-text>
+        <ele-text type="placeholder" class="monitor-count-text">
+          点击量(近30天)
+        </ele-text>
+        <ele-text
+          strong
+          type="success"
+          :icon="ArrowUpBold"
+          class="monitor-count-trend"
+        >
+          &nbsp;110.5%
+        </ele-text>
+        <ele-tooltip content="指标说明" placement="top" :offset="3">
+          <ele-text
+            :icon="QuestionCircleOutlined"
+            type="placeholder"
+            class="monitor-count-tip"
+          />
+        </ele-tooltip>
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="monitor-count">
+        <el-tag type="danger" size="large" :disable-transitions="true">
+          <el-icon>
+            <Flag />
+          </el-icon>
+        </el-tag>
+        <ele-text size="xxl" class="monitor-count-value">826.0</ele-text>
+        <ele-text type="placeholder" class="monitor-count-text">
+          到达量(近30天)
+        </ele-text>
+        <ele-text
+          strong
+          type="danger"
+          :icon="ArrowDownBold"
+          class="monitor-count-trend"
+        >
+          &nbsp;15.5%
+        </ele-text>
+      </ele-card>
+    </el-col>
+    <el-col :md="6" :sm="12" :xs="24">
+      <ele-card class="monitor-count">
+        <el-tag type="success" size="large" :disable-transitions="true">
+          <el-icon>
+            <Share />
+          </el-icon>
+        </el-tag>
+        <ele-text size="xxl" class="monitor-count-value">28.8 %</ele-text>
+        <ele-text type="placeholder" class="monitor-count-text">
+          转化率(近30天)
+        </ele-text>
+        <ele-text
+          strong
+          type="success"
+          :icon="ArrowUpBold"
+          class="monitor-count-trend"
+        >
+          &nbsp;65.8%
+        </ele-text>
+        <ele-tooltip content="指标说明" placement="top" :offset="3">
+          <ele-text
+            :icon="QuestionCircleOutlined"
+            type="placeholder"
+            class="monitor-count-tip"
+          />
+        </ele-tooltip>
+      </ele-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { AvatarItem } from 'ele-admin-plus/es/ele-avatar-group/types';
+  import {
+    UserFilled,
+    Opportunity,
+    Flag,
+    Share,
+    ArrowUpBold,
+    ArrowDownBold
+  } from '@element-plus/icons-vue';
+  import { QuestionCircleOutlined } from '@/components/icons';
+
+  /** 访问人数 */
+  const visitUsers = ref<AvatarItem[]>([
+    {
+      key: 1,
+      label: 'SunSmile',
+      value:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+    },
+    {
+      key: 2,
+      label: '你的名字很好听',
+      value:
+        'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+    },
+    {
+      key: 3,
+      label: '全村人的希望',
+      value:
+        'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+    },
+    {
+      key: 4,
+      label: 'Jasmine',
+      value:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+    },
+    {
+      key: 5,
+      label: '酷酷的大叔',
+      value:
+        'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+    },
+    {
+      key: 6,
+      label: '管理员',
+      value: 'https://cdn.eleadmin.com/20200610/avatar.jpg'
+    }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  .monitor-count {
+    position: relative;
+    text-align: center;
+
+    .el-tag {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      font-size: 16px;
+      line-height: 0;
+      padding: 0;
+    }
+
+    .monitor-count-value {
+      margin-top: 8px;
+    }
+
+    .monitor-count-text {
+      margin: 4px 0 8px 0;
+    }
+
+    .monitor-count-trend {
+      line-height: 26px;
+    }
+
+    .monitor-count-tip {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      font-size: 15px;
+      cursor: help;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/monitor/components/user-liveness.vue b/z_ele/src/views/dashboard/monitor/components/user-liveness.vue
new file mode 100644
index 0000000..7e509fc
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/user-liveness.vue
@@ -0,0 +1,81 @@
+<template>
+  <ele-card header="用户活跃度" :body-style="{ padding: '64px 0' }">
+    <div class="progress-body">
+      <div class="progress-group">
+        <el-progress
+          type="circle"
+          color="#52c41a"
+          :percentage="70"
+          :show-text="false"
+          :stroke-width="8"
+          :width="136"
+        />
+        <el-progress
+          type="circle"
+          color="#1890ff"
+          :percentage="60"
+          :show-text="false"
+          :stroke-width="6"
+          :width="98"
+        />
+        <el-progress
+          type="circle"
+          color="#f5222d"
+          :percentage="35"
+          :show-text="false"
+          :stroke-width="4"
+          :width="66"
+        />
+      </div>
+      <div class="progress-legend">
+        <div class="progress-legend-item">
+          <ele-dot type="success" text="活跃率:70%" :ripple="false" />
+        </div>
+        <div class="progress-legend-item">
+          <ele-dot text="留存率:60%" :ripple="false" />
+        </div>
+        <div class="progress-legend-item">
+          <ele-dot type="danger" text="跳出率:35%" :ripple="false" />
+        </div>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<style lang="scss" scoped>
+  .progress-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .progress-group {
+      display: flex;
+      flex-shrink: 0;
+      position: relative;
+
+      .el-progress:not(:first-child) {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .progress-legend {
+      padding: 0 0 0 8px;
+      flex-shrink: 0;
+
+      .progress-legend-item {
+        font-size: 12px;
+
+        & + .progress-legend-item {
+          margin-top: 8px;
+        }
+
+        :deep(.ele-dot-text) {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/monitor/components/user-rate.vue b/z_ele/src/views/dashboard/monitor/components/user-rate.vue
new file mode 100644
index 0000000..1467ca8
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/user-rate.vue
@@ -0,0 +1,146 @@
+<template>
+  <ele-card header="用户评价">
+    <div class="rate-header">
+      <div class="rate-header-value">4.5</div>
+      <div class="rate-header-level">
+        <el-rate :model-value="userRate" disabled />
+        <div class="rate-header-text">很棒</div>
+      </div>
+    </div>
+    <ele-text type="placeholder" class="rate-body">
+      <div class="rate-body-value">-0%</div>
+      <div class="rate-body-text">当前没有评价波动</div>
+    </ele-text>
+    <div class="rate-item">
+      <div class="rate-item-progress">
+        <el-progress
+          color="#52c41a"
+          :percentage="60"
+          :show-text="false"
+          :stroke-width="8"
+        />
+      </div>
+      <ele-text type="placeholder" :icon="StarFilled" class="rate-item-text">
+        <span>5 : 368 人</span>
+      </ele-text>
+    </div>
+    <div class="rate-item">
+      <div class="rate-item-progress">
+        <el-progress
+          color="#1890ff"
+          :percentage="40"
+          :show-text="false"
+          :stroke-width="8"
+        />
+      </div>
+      <ele-text type="placeholder" :icon="StarFilled" class="rate-item-text">
+        <span>4 : 256 人</span>
+      </ele-text>
+    </div>
+    <div class="rate-item">
+      <div class="rate-item-progress">
+        <el-progress
+          color="#faad14"
+          :percentage="20"
+          :show-text="false"
+          :stroke-width="8"
+        />
+      </div>
+      <ele-text type="placeholder" :icon="StarFilled" class="rate-item-text">
+        <span>3 : 49 人</span>
+      </ele-text>
+    </div>
+    <div class="rate-item">
+      <div class="rate-item-progress">
+        <el-progress
+          color="#f5222d"
+          :percentage="10"
+          :show-text="false"
+          :stroke-width="8"
+        />
+      </div>
+      <ele-text type="placeholder" :icon="StarFilled" class="rate-item-text">
+        <span>2 : 14 人</span>
+      </ele-text>
+    </div>
+    <div class="rate-item">
+      <div class="rate-item-progress">
+        <el-progress :percentage="0" :show-text="false" :stroke-width="8" />
+      </div>
+      <ele-text type="placeholder" :icon="StarFilled" class="rate-item-text">
+        <span>1 : 0 人</span>
+      </ele-text>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { StarFilled } from '@/components/icons';
+
+  /** 用户评分 */
+  const userRate = ref(4.5);
+</script>
+
+<style lang="scss" scoped>
+  .rate-header {
+    display: flex;
+    align-items: flex-end;
+
+    .rate-header-value {
+      line-height: 1;
+      font-size: 50px;
+    }
+
+    .rate-header-level {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+    }
+
+    .rate-header-text {
+      color: #f7ba2a;
+      margin-left: 4px;
+    }
+  }
+
+  .rate-body {
+    display: flex;
+    align-items: flex-end;
+    margin: 18px 0;
+
+    .rate-body-value {
+      font-size: 28px;
+      line-height: 1;
+    }
+
+    .rate-body-text {
+      flex: 1;
+      font-size: 12px;
+      padding-left: 12px;
+    }
+  }
+
+  .rate-item {
+    display: flex;
+    align-items: center;
+
+    .rate-item-progress {
+      flex: 1;
+    }
+
+    .rate-item-text {
+      width: 90px;
+      flex-shrink: 0;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      :deep(.el-icon) {
+        font-size: 12px;
+        margin: 0 6px 0 8px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/monitor/components/user-satisfaction.vue b/z_ele/src/views/dashboard/monitor/components/user-satisfaction.vue
new file mode 100644
index 0000000..070119d
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/components/user-satisfaction.vue
@@ -0,0 +1,93 @@
+<template>
+  <ele-card header="用户满意度">
+    <div class="user-satisfaction">
+      <ele-text size="xxl" class="satisfaction-item">856</ele-text>
+      <div class="satisfaction-item">
+        <div class="face-smile"><i></i></div>
+        <ele-text type="placeholder">正面评论</ele-text>
+      </div>
+      <ele-text size="xxl" type="success" class="satisfaction-item">
+        82%
+      </ele-text>
+    </div>
+    <el-divider style="margin: 24px 0 25px 0; opacity: 0.6" />
+    <div class="user-satisfaction">
+      <ele-text size="xxl" class="satisfaction-item">60</ele-text>
+      <div class="satisfaction-item">
+        <div class="face-cry"><i></i></div>
+        <ele-text type="placeholder">负面评论</ele-text>
+      </div>
+      <ele-text size="xxl" type="danger" class="satisfaction-item">9%</ele-text>
+    </div>
+  </ele-card>
+</template>
+
+<style lang="scss" scoped>
+  .user-satisfaction {
+    display: flex;
+    align-items: center;
+
+    .satisfaction-item {
+      flex: 1;
+      text-align: center;
+
+      .face-smile,
+      .face-cry {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  .face-smile,
+  .face-cry {
+    width: 50px;
+    height: 50px;
+    display: inline-block;
+    background: #fbd971;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .face-smile > i,
+  .face-smile::before,
+  .face-smile::after,
+  .face-cry > i,
+  .face-cry::before,
+  .face-cry::after {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    transform: rotate(225deg);
+    border: 3px solid #f0c419;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 8px;
+    left: 11px;
+  }
+
+  .face-smile::before,
+  .face-smile::after,
+  .face-cry::before,
+  .face-cry::after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    left: 8px;
+    top: 14px;
+    border-color: #f29c1f;
+    transform: rotate(45deg);
+  }
+
+  .face-smile::after,
+  .face-cry::after {
+    left: auto;
+    right: 8px;
+  }
+
+  .face-cry > i {
+    transform: rotate(45deg);
+    bottom: -6px;
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/monitor/index.vue b/z_ele/src/views/dashboard/monitor/index.vue
new file mode 100644
index 0000000..3a584e2
--- /dev/null
+++ b/z_ele/src/views/dashboard/monitor/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <ele-page>
+    <statistics-card />
+    <el-row :gutter="16">
+      <el-col :md="18" :sm="24" :xs="24">
+        <map-card />
+      </el-col>
+      <el-col :md="6" :sm="24" :xs="24">
+        <online-num />
+        <browser-card />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16">
+      <el-col :lg="12" :md="24" :sm="24" :xs="24">
+        <user-rate />
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xs="24">
+        <user-satisfaction />
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xs="24">
+        <user-liveness />
+      </el-col>
+    </el-row>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import StatisticsCard from './components/statistics-card.vue';
+  import MapCard from './components/map-card.vue';
+  import OnlineNum from './components/online-num.vue';
+  import BrowserCard from './components/browser-card.vue';
+  import UserRate from './components/user-rate.vue';
+  import UserSatisfaction from './components/user-satisfaction.vue';
+  import UserLiveness from './components/user-liveness.vue';
+
+  defineOptions({ name: 'DashboardMonitor' });
+</script>
diff --git a/z_ele/src/views/dashboard/workplace/components/activities-card.vue b/z_ele/src/views/dashboard/workplace/components/activities-card.vue
new file mode 100644
index 0000000..3ac97b8
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/activities-card.vue
@@ -0,0 +1,157 @@
+<!-- 最新动态 -->
+<template>
+  <ele-card :header="title" :body-style="{ padding: '6px 0', height: '370px' }">
+    <template #extra>
+      <more-icon @command="handleCommand" />
+    </template>
+    <el-scrollbar :view-style="{ padding: '20px 20px 0 20px' }">
+      <el-timeline :reverse="false" class="demo-timeline">
+        <el-timeline-item
+          v-for="item in activities"
+          :key="item.id"
+          :timestamp="item.time"
+          :type="item.type"
+          :hollow="true"
+        >
+          {{ item.title }}
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MoreIcon from './more-icon.vue';
+  import type { Command } from '../model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  interface Activitie {
+    id: number;
+    title: string;
+    time: string;
+    type?: any;
+  }
+
+  /** 最新动态数据 */
+  const activities = ref<Activitie[]>([]);
+
+  /** 查询最新动态 */
+  const queryActivities = () => {
+    activities.value = [
+      {
+        id: 1,
+        title: 'SunSmile 解决了bug 登录提示操作失败',
+        time: '20:30'
+      },
+      {
+        id: 2,
+        title: 'Jasmine 解决了bug 按钮颜色与设计不符',
+        time: '19:30'
+      },
+      {
+        id: 3,
+        title: '项目经理 指派了任务 解决项目一的bug',
+        time: '18:30',
+        type: 'primary'
+      },
+      {
+        id: 4,
+        title: '项目经理 指派了任务 解决项目二的bug',
+        time: '17:30',
+        type: 'primary'
+      },
+      {
+        id: 5,
+        title: '项目经理 指派了任务 解决项目三的bug',
+        time: '16:30',
+        type: 'primary'
+      },
+      {
+        id: 6,
+        title: '项目经理 指派了任务 解决项目四的bug',
+        time: '15:30'
+      },
+      {
+        id: 7,
+        title: '项目经理 指派了任务 解决项目五的bug',
+        time: '14:30'
+      },
+      {
+        id: 8,
+        title: '项目经理 指派了任务 解决项目六的bug',
+        time: '12:30'
+      },
+      {
+        id: 9,
+        title: '项目经理 指派了任务 解决项目七的bug',
+        time: '11:30',
+        type: 'primary'
+      },
+      {
+        id: 10,
+        title: '项目经理 指派了任务 解决项目八的bug',
+        time: '10:30'
+      },
+      {
+        id: 11,
+        title: '项目经理 指派了任务 解决项目九的bug',
+        time: '09:30',
+        type: 'success'
+      },
+      {
+        id: 12,
+        title: '项目经理 指派了任务 解决项目十的bug',
+        time: '08:30',
+        type: 'danger'
+      }
+    ];
+  };
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+
+  queryActivities();
+</script>
+
+<style lang="scss" scoped>
+  /* 时间轴 */
+  .demo-timeline {
+    padding-left: 0;
+
+    :deep(.el-timeline-item__wrapper) {
+      display: flex;
+
+      .el-timeline-item__timestamp {
+        order: 0;
+        flex-shrink: 0;
+        margin: 0 16px 0 0;
+        height: 22px;
+        line-height: 22px;
+        font-size: 14px;
+      }
+
+      .el-timeline-item__content {
+        order: 1;
+        flex: 1;
+      }
+    }
+
+    :deep(.el-timeline-item__node) {
+      top: 3px;
+      --el-color-white: var(--el-bg-color);
+    }
+
+    :deep(.el-timeline-item__tail) {
+      top: 3px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/goal-card.vue b/z_ele/src/views/dashboard/workplace/components/goal-card.vue
new file mode 100644
index 0000000..3d4f69b
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/goal-card.vue
@@ -0,0 +1,68 @@
+<!-- 本月目标 -->
+<template>
+  <ele-card :header="title" :body-style="{ height: '370px' }">
+    <template #extra>
+      <more-icon @command="handleCommand" />
+    </template>
+    <div class="workplace-goal">
+      <el-progress
+        :width="180"
+        :percentage="80"
+        color="var(--el-color-primary)"
+        type="dashboard"
+        :format="() => ''"
+      />
+      <div class="workplace-goal-body">
+        <el-tag
+          size="large"
+          :disable-transitions="true"
+          style="width: 36px; height: 36px; border-radius: 50%; line-height: 0"
+        >
+          <el-icon style="cursor: default; border-radius: 0">
+            <TrophyBase />
+          </el-icon>
+        </el-tag>
+        <div style="font-size: 40px">285</div>
+      </div>
+      <div>恭喜, 本月目标已达标!</div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { TrophyBase } from '@element-plus/icons-vue';
+  import MoreIcon from './more-icon.vue';
+  import type { Command } from '../model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .workplace-goal {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .workplace-goal-body {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 180px;
+      margin: -48px 0 0 -90px;
+      text-align: center;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/link-card.vue b/z_ele/src/views/dashboard/workplace/components/link-card.vue
new file mode 100644
index 0000000..7394d2b
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/link-card.vue
@@ -0,0 +1,202 @@
+<!-- 快捷方式 -->
+<template>
+  <el-row :gutter="16" ref="wrapRef">
+    <el-col v-for="item in data" :key="item.url" :md="3" :sm="6" :xs="12">
+      <ele-card shadow="hover" :body-style="{ padding: 0 }">
+        <router-link :to="item.url" class="app-link">
+          <el-icon class="app-link-icon" :style="{ color: item.color }">
+            <component :is="item.icon" />
+          </el-icon>
+          <div class="app-link-title">{{ item.title }}</div>
+        </router-link>
+      </ele-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import SortableJs from 'sortablejs';
+  import type { ElRow } from 'element-plus';
+  import {
+    UserOutlined,
+    AnalysisOutlined,
+    ShoppingOutlined,
+    LogOutlined,
+    CopyOutlined,
+    MailOutlined,
+    TagOutlined,
+    ControlOutlined
+  } from '@/components/icons';
+
+  defineOptions({
+    components: {
+      UserOutlined,
+      AnalysisOutlined,
+      ShoppingOutlined,
+      LogOutlined,
+      CopyOutlined,
+      MailOutlined,
+      TagOutlined,
+      ControlOutlined
+    }
+  });
+
+  const CACHE_KEY = 'workplace-links';
+
+  interface LinkItem {
+    id: number;
+    icon: string;
+    title: string;
+    url: string;
+    color?: string;
+  }
+
+  /** 默认顺序 */
+  const DEFAULT: LinkItem[] = [
+    {
+      id: 1,
+      icon: 'UserOutlined',
+      title: '用户',
+      url: '/system/user'
+    },
+    {
+      id: 2,
+      icon: 'AnalysisOutlined',
+      title: '分析',
+      url: '/dashboard/analysis',
+      color: '#95de64'
+    },
+    {
+      id: 3,
+      icon: 'ShoppingOutlined',
+      title: '商品',
+      url: '/list/card/project',
+      color: '#ff9c6e'
+    },
+    {
+      id: 4,
+      icon: 'LogOutlined',
+      title: '订单',
+      url: '/list/basic',
+      color: '#b37feb'
+    },
+    {
+      id: 5,
+      icon: 'CopyOutlined',
+      title: '票据',
+      url: '/list/advanced',
+      color: '#ffd666'
+    },
+    {
+      id: 6,
+      icon: 'MailOutlined',
+      title: '消息',
+      url: '/user/message',
+      color: '#5cdbd3'
+    },
+    {
+      id: 7,
+      icon: 'TagOutlined',
+      title: '标签',
+      url: '/extension/tag',
+      color: '#ff85c0'
+    },
+    {
+      id: 8,
+      icon: 'ControlOutlined',
+      title: '配置',
+      url: '/user/profile',
+      color: '#ffc069'
+    }
+  ];
+
+  /** 数据 */
+  const data = ref<LinkItem[]>(
+    (() => {
+      try {
+        const str = localStorage.getItem(CACHE_KEY);
+        const temp = str ? JSON.parse(str) : null;
+        if (temp) {
+          const result = [...DEFAULT];
+          result.sort((a, b) => temp.indexOf(a.id) - temp.indexOf(b.id));
+          return result;
+        }
+      } catch (_e) {
+        //
+      }
+      return [...DEFAULT];
+    })()
+  );
+
+  /** 根节点 */
+  const wrapRef = ref<InstanceType<typeof ElRow> | null>(null);
+
+  /** 排序实例 */
+  let sortableIns: SortableJs | null = null;
+
+  /** 重置布局 */
+  const reset = () => {
+    data.value = [...DEFAULT];
+    localStorage.removeItem(CACHE_KEY);
+  };
+
+  /** 缓存布局 */
+  const cacheData = () => {
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify(data.value.map((d) => d.id))
+    );
+  };
+
+  onMounted(() => {
+    sortableIns = new SortableJs(wrapRef.value?.$el, {
+      animation: 300,
+      delay: 150,
+      delayOnTouchOnly: true,
+      onUpdate: ({ oldIndex, newIndex }) => {
+        if (typeof oldIndex === 'number' && typeof newIndex === 'number') {
+          const temp = [...data.value];
+          temp.splice(newIndex, 0, temp.splice(oldIndex, 1)[0]);
+          data.value = temp;
+          cacheData();
+        }
+      },
+      setData: () => {}
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortableIns) {
+      sortableIns.destroy();
+      sortableIns = null;
+    }
+  });
+
+  defineExpose({ reset });
+</script>
+
+<style lang="scss" scoped>
+  .app-link {
+    padding: 12px;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    color: inherit;
+
+    :deep(.app-link-icon) {
+      font-size: 30px;
+      color: #69c0ff;
+      margin: 6px 0 10px 0;
+
+      & > svg {
+        stroke-width: 3;
+      }
+    }
+  }
+
+  .el-col.sortable-ghost {
+    opacity: 0;
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/more-icon.vue b/z_ele/src/views/dashboard/workplace/components/more-icon.vue
new file mode 100644
index 0000000..bd59087
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/more-icon.vue
@@ -0,0 +1,77 @@
+<template>
+  <ele-dropdown
+    :items="[
+      {
+        title: '刷新内容',
+        command: 'refresh',
+        icon: ReloadOutlined
+      },
+      {
+        title: '编辑卡片',
+        command: 'edit',
+        icon: EditOutlined
+      },
+      {
+        title: '删除卡片',
+        command: 'remove',
+        icon: DeleteOutlined,
+        danger: true,
+        divided: true
+      }
+    ]"
+    :icon-props="{ size: 15 }"
+    placement="bottom-end"
+    style="cursor: pointer"
+    :popper-options="{
+      strategy: 'fixed',
+      modifiers: [{ name: 'offset', options: { offset: [12, 12] } }]
+    }"
+    @command="handleCommand"
+    class="demo-more-icon"
+  >
+    <el-icon style="outline: none">
+      <MoreOutlined style="transform: scale(1.1)" />
+    </el-icon>
+  </ele-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import {
+    MoreOutlined,
+    ReloadOutlined,
+    EditOutlined,
+    DeleteOutlined
+  } from '@/components/icons';
+  import type { Command } from '../model';
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-more-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-text-color-placeholder);
+    font-size: 14px;
+    border-radius: 6px;
+    margin: 0 -10px 0 0;
+    transition: all 0.2s;
+
+    & > .el-icon {
+      width: 26px;
+      height: 26px;
+    }
+
+    &:hover {
+      color: var(--el-text-color-regular);
+      background: var(--el-fill-color-light);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/profile-card.vue b/z_ele/src/views/dashboard/workplace/components/profile-card.vue
new file mode 100644
index 0000000..f5cdcf9
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/profile-card.vue
@@ -0,0 +1,148 @@
+<!-- 用户信息 -->
+<template>
+  <ele-card :body-style="{ padding: '20px' }">
+    <div class="profile-wrapper">
+      <div class="profile-main">
+        <el-avatar :size="68" :src="loginUser.avatar" class="profile-avatar" />
+        <div class="profile-body">
+          <ele-text size="xl" type="heading" style="font-weight: normal">
+            早安, {{ loginUser.nickname }}, 开始您一天的工作吧!
+          </ele-text>
+          <ele-text type="placeholder" :icon="PartlyCloudy">
+            今日多云转阴, 18℃ ~ 22℃, 出门记得穿外套哦~
+          </ele-text>
+        </div>
+      </div>
+      <div class="profile-count">
+        <div class="profile-count-item">
+          <div class="profile-count-header">
+            <el-tag size="large" :disable-transitions="true">
+              <el-icon>
+                <Briefcase />
+              </el-icon>
+            </el-tag>
+            <span class="profile-count-name">项目数</span>
+          </div>
+          <ele-text size="xl" type="heading" style="font-weight: normal">
+            3
+          </ele-text>
+        </div>
+        <div class="profile-count-item">
+          <div class="profile-count-header">
+            <el-tag size="large" type="warning" :disable-transitions="true">
+              <el-icon>
+                <Checked />
+              </el-icon>
+            </el-tag>
+            <span class="profile-count-name">待办项</span>
+          </div>
+          <ele-text size="xl" type="heading" style="font-weight: normal">
+            6 / 24
+          </ele-text>
+        </div>
+        <div class="profile-count-item">
+          <div class="profile-count-header">
+            <el-tag size="large" type="success" :disable-transitions="true">
+              <el-icon>
+                <BellFilled />
+              </el-icon>
+            </el-tag>
+            <span class="profile-count-name">消息</span>
+          </div>
+          <ele-text size="xl" type="heading" style="font-weight: normal">
+            1,689
+          </ele-text>
+        </div>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import {
+    PartlyCloudy,
+    Briefcase,
+    Checked,
+    BellFilled
+  } from '@element-plus/icons-vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  const userStore = useUserStore();
+
+  /** 当前登录用户信息 */
+  const loginUser = computed(() => userStore.info ?? {});
+</script>
+
+<style lang="scss" scoped>
+  .profile-wrapper {
+    display: flex;
+    align-items: center;
+
+    .profile-main {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      .profile-avatar {
+        flex-shrink: 0;
+      }
+
+      .profile-body {
+        flex: 1;
+        padding-left: 12px;
+        box-sizing: border-box;
+      }
+
+      h4 {
+        margin-bottom: 6px;
+      }
+    }
+  }
+
+  .profile-count {
+    flex-shrink: 0;
+    text-align: right;
+    white-space: nowrap;
+
+    .profile-count-item {
+      display: inline-block;
+      margin: 0 4px 0 24px;
+
+      .el-tag {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        line-height: 0;
+        padding: 0;
+      }
+
+      .profile-count-name {
+        margin-left: 8px;
+      }
+
+      .profile-count-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 992px) {
+    .profile-count .profile-count-item {
+      margin: 0 2px 0 12px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .profile-wrapper {
+      display: block;
+
+      .profile-count {
+        margin-top: 14px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/project-card.vue b/z_ele/src/views/dashboard/workplace/components/project-card.vue
new file mode 100644
index 0000000..6da409c
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/project-card.vue
@@ -0,0 +1,175 @@
+<!-- 项目进度 -->
+<template>
+  <ele-card :header="title" :body-style="{ padding: '10px', height: '370px' }">
+    <template #extra>
+      <more-icon @command="handleCommand" />
+    </template>
+    <ele-pro-table
+      :height="352"
+      row-key="id"
+      :columns="columns"
+      :datasource="projectList"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+      :pagination="false"
+      :toolbar="false"
+      :bottom-line="false"
+      size="large"
+      class="project-table"
+    >
+      <template #projectName="{ row }">
+        <el-link type="primary" underline="never">
+          {{ row.projectName }}
+        </el-link>
+      </template>
+      <template #status="{ row }">
+        <ele-text v-if="row.status === 0" type="success">进行中</ele-text>
+        <ele-text v-else-if="row.status === 1" type="danger">已延期</ele-text>
+        <ele-text v-else-if="row.status === 2" type="warning">
+          未开始
+        </ele-text>
+        <ele-text v-else-if="row.status === 3" type="info">已结束</ele-text>
+      </template>
+      <template #progress="{ row }">
+        <el-progress :percentage="row.progress" />
+      </template>
+    </ele-pro-table>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { Columns } from 'ele-admin-plus/es/ele-pro-table/types';
+  import MoreIcon from './more-icon.vue';
+  import type { Command } from '../model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  interface Project {
+    id: number;
+    projectName: string;
+    status: number;
+    startDate: string;
+    endDate: string;
+    progress: number;
+  }
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'projectName',
+      label: '项目名称',
+      slot: 'projectName',
+      minWidth: 110
+    },
+    {
+      prop: 'startDate',
+      label: '开始时间',
+      align: 'center',
+      minWidth: 110
+    },
+    {
+      prop: 'endDate',
+      label: '结束时间',
+      align: 'center',
+      minWidth: 110
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      slot: 'status',
+      align: 'center',
+      width: 90
+    },
+    {
+      prop: 'progress',
+      label: '进度',
+      width: 180,
+      align: 'center',
+      slot: 'progress',
+      showOverflowTooltip: false
+    }
+  ]);
+
+  /** 项目进度数据 */
+  const projectList = ref<Project[]>([]);
+
+  /** 查询项目进度 */
+  const queryProjectList = () => {
+    projectList.value = [
+      {
+        id: 1,
+        projectName: '项目000000001',
+        status: 0,
+        startDate: '2020-03-01',
+        endDate: '2020-06-01',
+        progress: 30
+      },
+      {
+        id: 2,
+        projectName: '项目000000002',
+        status: 0,
+        startDate: '2020-03-01',
+        endDate: '2020-08-01',
+        progress: 10
+      },
+      {
+        id: 3,
+        projectName: '项目000000003',
+        status: 1,
+        startDate: '2020-01-01',
+        endDate: '2020-05-01',
+        progress: 60
+      },
+      {
+        id: 4,
+        projectName: '项目000000004',
+        status: 1,
+        startDate: '2020-06-01',
+        endDate: '2020-10-01',
+        progress: 0
+      },
+      {
+        id: 5,
+        projectName: '项目000000005',
+        status: 2,
+        startDate: '2020-03-01',
+        endDate: '2020-07-01',
+        progress: 100
+      },
+      {
+        id: 6,
+        projectName: '项目000000006',
+        status: 3,
+        startDate: '2020-02-01',
+        endDate: '2020-06-01',
+        progress: 100
+      }
+    ];
+  };
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+
+  queryProjectList();
+</script>
+
+<style lang="scss" scoped>
+  .project-table :deep(.el-progress__text) {
+    font-size: 12px !important;
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/task-card.vue b/z_ele/src/views/dashboard/workplace/components/task-card.vue
new file mode 100644
index 0000000..348c782
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/task-card.vue
@@ -0,0 +1,241 @@
+<!-- 我的任务 -->
+<template>
+  <ele-card
+    :header="title"
+    :body-style="{ height: '370px', padding: '7px 8px 6px 8px' }"
+  >
+    <template #extra>
+      <more-icon @command="handleCommand" />
+    </template>
+    <el-scrollbar
+      :wrap-style="{ position: 'relative', zIndex: 1 }"
+      @scroll="handleTaskTableScroll"
+    >
+      <ele-table
+        size="large"
+        :class="['task-table', { 'is-ping-left': isPingLeft }]"
+      >
+        <thead :style="{ position: 'sticky', top: 0, zIndex: 2 }">
+          <tr>
+            <th :style="{ width: '38px' }" class="task-table-index"></th>
+            <th :style="{ textAlign: 'center', width: '78px' }">优先级</th>
+            <th>任务名称</th>
+            <th :style="{ textAlign: 'center', width: '80px' }">状态</th>
+          </tr>
+        </thead>
+        <vue-draggable
+          tag="tbody"
+          item-key="id"
+          v-model="taskList"
+          handle=".sort-handle"
+          :animation="300"
+          :set-data="() => void 0"
+          :force-fallback="true"
+        >
+          <template #item="{ element }">
+            <tr>
+              <td
+                :style="{ paddingLeft: 0, paddingRight: 0, width: '38px' }"
+                class="task-table-index"
+              >
+                <ele-text
+                  :icon="DragOutlined"
+                  :icon-style="{ transform: 'scale(1.15)' }"
+                  type="placeholder"
+                  class="sort-handle"
+                />
+              </td>
+              <td style="text-align: center; width: 78px">
+                <el-tag
+                  v-if="element.priority === 1"
+                  type="danger"
+                  :disable-transitions="true"
+                >
+                  {{ element.priority }}
+                </el-tag>
+                <el-tag
+                  v-else-if="element.priority === 2"
+                  type="warning"
+                  :disable-transitions="true"
+                >
+                  {{ element.priority }}
+                </el-tag>
+                <el-tag v-else :disable-transitions="true">
+                  {{ element.priority }}
+                </el-tag>
+              </td>
+              <td>
+                <ele-ellipsis style="line-height: 20px">
+                  <el-link type="primary" underline="never">
+                    {{ element.taskName }}
+                  </el-link>
+                </ele-ellipsis>
+              </td>
+              <td style="text-align: center; width: 80px">
+                <ele-text v-if="element.status === 0" type="warning">
+                  未开始
+                </ele-text>
+                <ele-text v-else-if="element.status === 1" type="success">
+                  进行中
+                </ele-text>
+                <ele-text v-else-if="element.status === 2" type="info" deleted>
+                  已完成
+                </ele-text>
+              </td>
+            </tr>
+          </template>
+        </vue-draggable>
+      </ele-table>
+    </el-scrollbar>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { DragOutlined } from '@/components/icons';
+  import MoreIcon from './more-icon.vue';
+  import type { Command } from '../model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  interface Task {
+    id: number;
+    priority: number;
+    taskName: string;
+    status: number;
+  }
+
+  /** 我的任务数据 */
+  const taskList = ref<Task[]>([]);
+
+  /** 查询我的任务 */
+  const queryTaskList = () => {
+    taskList.value = [
+      {
+        id: 1,
+        priority: 1,
+        taskName: '解决项目一的bug',
+        status: 0
+      },
+      {
+        id: 2,
+        priority: 2,
+        taskName: '解决项目二的bug',
+        status: 0
+      },
+      {
+        id: 3,
+        priority: 2,
+        taskName: '解决项目三的bug',
+        status: 1
+      },
+      {
+        id: 4,
+        priority: 3,
+        taskName: '解决项目四的bug',
+        status: 1
+      },
+      {
+        id: 5,
+        priority: 3,
+        taskName: '解决项目五的bug',
+        status: 2
+      },
+      {
+        id: 6,
+        priority: 3,
+        taskName: '解决项目六的bug',
+        status: 2
+      }
+    ];
+  };
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+
+  queryTaskList();
+
+  /** 我的任务表格左侧列是否固定状态 */
+  const isPingLeft = ref(false);
+
+  /** 我的任务表格滚动事件 */
+  const handleTaskTableScroll = ({ scrollLeft }) => {
+    isPingLeft.value = scrollLeft > 1;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .task-table {
+    table-layout: fixed;
+    min-width: 300px;
+
+    .sort-handle {
+      cursor: move;
+    }
+
+    .el-tag {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      border-radius: 50%;
+    }
+
+    td,
+    th {
+      box-sizing: border-box;
+    }
+
+    tr.sortable-chosen {
+      user-select: none;
+    }
+
+    tr.sortable-ghost {
+      opacity: 0;
+    }
+
+    tr.sortable-fallback {
+      opacity: 1 !important;
+      display: table !important;
+      table-layout: fixed !important;
+
+      td {
+        background: var(--el-color-primary-light-8);
+      }
+    }
+
+    :deep(.task-table-index) {
+      text-align: center;
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+
+    &.is-ping-left :deep(.task-table-index) {
+      backdrop-filter: var(--ele-table-fixed-backdrop-filter);
+
+      &::before {
+        content: '';
+        width: 10px;
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        right: -10px;
+        box-shadow: var(--ele-table-fixed-left-shadow);
+        transition: box-shadow 0.2s;
+        pointer-events: none;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/components/user-list.vue b/z_ele/src/views/dashboard/workplace/components/user-list.vue
new file mode 100644
index 0000000..b9b8642
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/components/user-list.vue
@@ -0,0 +1,135 @@
+<!-- 小组成员 -->
+<template>
+  <ele-card
+    :header="title"
+    :body-style="{ padding: '8px 0px', height: '370px' }"
+  >
+    <template #extra>
+      <more-icon @command="handleCommand" />
+    </template>
+    <div v-for="item in userList" :key="item.id" class="user-list-item">
+      <el-avatar :size="46" :src="item.avatar" style="flex-shrink: 0" />
+      <div class="user-list-item-body">
+        <div>{{ item.name }}</div>
+        <ele-ellipsis type="placeholder" size="sm">
+          {{ item.introduction }}
+        </ele-ellipsis>
+      </div>
+      <div style="flex-shrink: 0">
+        <el-tag
+          v-if="item.status === 0"
+          size="small"
+          type="success"
+          :disable-transitions="true"
+        >
+          在线
+        </el-tag>
+        <el-tag v-else size="small" type="danger" :disable-transitions="true">
+          离线
+        </el-tag>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MoreIcon from './more-icon.vue';
+  import type { Command } from '../model';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'command', command: Command): void;
+  }>();
+
+  interface User {
+    id: number;
+    name: string;
+    introduction: string;
+    status: number;
+    avatar: string;
+  }
+
+  /** 小组成员数据 */
+  const userList = ref<User[]>([]);
+
+  /** 查询小组成员 */
+  const queryUserList = () => {
+    userList.value = [
+      {
+        id: 1,
+        name: 'SunSmile',
+        introduction: 'UI设计师、交互专家',
+        status: 0,
+        avatar:
+          'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+      },
+      {
+        id: 2,
+        name: '你的名字很好听',
+        introduction: '前端工程师',
+        status: 0,
+        avatar:
+          'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+      },
+      {
+        id: 3,
+        name: '全村人的希望',
+        introduction: '前端工程师',
+        status: 0,
+        avatar:
+          'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+      },
+      {
+        id: 4,
+        name: 'Jasmine',
+        introduction: '产品经理、项目经理',
+        status: 1,
+        avatar:
+          'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+      },
+      {
+        id: 5,
+        name: '酷酷的大叔',
+        introduction: '组长、后端工程师',
+        status: 1,
+        avatar:
+          'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+      }
+    ];
+  };
+
+  const handleCommand = (command: Command) => {
+    emit('command', command);
+  };
+
+  queryUserList();
+</script>
+
+<style lang="scss" scoped>
+  .user-list-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 18px;
+    transition: background-color 0.2s;
+    cursor: pointer;
+
+    .user-list-item-body {
+      flex: 1;
+      overflow: hidden;
+      padding-left: 12px;
+      box-sizing: border-box;
+    }
+
+    & + .user-list-item {
+      border-top: 1px solid hsla(0, 0%, 60%, 0.2);
+    }
+
+    &:hover {
+      background: hsla(0, 0%, 60%, 0.08);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/index.vue b/z_ele/src/views/dashboard/workplace/index.vue
new file mode 100644
index 0000000..682b818
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/index.vue
@@ -0,0 +1,305 @@
+<template>
+  <ele-page class="workplace-page">
+    <profile-card />
+    <link-card ref="linkCardRef" />
+    <el-row :gutter="16" ref="wrapRef">
+      <el-col
+        v-for="(item, index) in data"
+        :key="item.name"
+        :md="item.md"
+        :sm="item.sm"
+        :xs="item.xs"
+      >
+        <component
+          :is="item.name"
+          :title="item.title"
+          @command="(command: Command) => handleCommand(command, index)"
+        />
+      </el-col>
+    </el-row>
+    <ele-card :body-style="{ padding: 0 }">
+      <div class="workplace-bottom">
+        <el-link
+          type="primary"
+          :icon="PlusCircleOutlined"
+          underline="never"
+          class="workplace-button"
+          @click="add"
+        >
+          添加卡片
+        </el-link>
+        <el-divider direction="vertical" style="margin: 0" />
+        <el-link
+          type="primary"
+          :icon="UndoOutlined"
+          underline="never"
+          class="workplace-button"
+          @click="reset"
+        >
+          重置布局
+        </el-link>
+      </div>
+    </ele-card>
+    <!-- 添加卡片弹窗 -->
+    <ele-modal :width="680" v-model="visible" title="未添加的卡片">
+      <el-row :gutter="16" style="margin-top: -16px">
+        <el-col
+          v-for="item in notAddedData"
+          :key="item.name"
+          :md="8"
+          :sm="12"
+          :xs="24"
+        >
+          <ele-card
+            bordered
+            :header="item.title"
+            :header-style="{ padding: '8px 14px', fontSize: '14px' }"
+            :body-style="{ padding: '32px 0', textAlign: 'center' }"
+            style="margin-top: 16px"
+          >
+            <el-button
+              plain
+              round
+              size="small"
+              type="primary"
+              @click="addView(item)"
+            >
+              添加
+            </el-button>
+          </ele-card>
+        </el-col>
+      </el-row>
+      <el-empty
+        v-if="!notAddedData.length"
+        description="已添加所有视图"
+        :image-size="80"
+      />
+    </ele-modal>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+  import SortableJs from 'sortablejs';
+  import type { ElRow } from 'element-plus';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { PlusCircleOutlined, UndoOutlined } from '@/components/icons';
+  import ProfileCard from './components/profile-card.vue';
+  import LinkCard from './components/link-card.vue';
+  import type { Command } from './model';
+  import ActivitiesCard from './components/activities-card.vue';
+  import TaskCard from './components/task-card.vue';
+  import GoalCard from './components/goal-card.vue';
+  import ProjectCard from './components/project-card.vue';
+  import UserList from './components/user-list.vue';
+
+  defineOptions({
+    name: 'DashboardWorkplace',
+    components: {
+      ActivitiesCard,
+      TaskCard,
+      GoalCard,
+      ProjectCard,
+      UserList
+    }
+  });
+
+  const CACHE_KEY = 'workplace-layout';
+
+  interface ViewItem {
+    name: string;
+    title: string;
+    md: number;
+    sm: number;
+    xs: number;
+  }
+
+  /** 默认布局 */
+  const DEFAULT: ViewItem[] = [
+    {
+      name: 'activities-card',
+      title: '最新动态',
+      md: 8,
+      sm: 24,
+      xs: 24
+    },
+    {
+      name: 'task-card',
+      title: '我的任务',
+      md: 8,
+      sm: 24,
+      xs: 24
+    },
+    {
+      name: 'goal-card',
+      title: '本月目标',
+      md: 8,
+      sm: 24,
+      xs: 24
+    },
+    {
+      name: 'project-card',
+      title: '项目进度',
+      md: 16,
+      sm: 24,
+      xs: 24
+    },
+    {
+      name: 'user-list',
+      title: '小组成员',
+      md: 8,
+      sm: 24,
+      xs: 24
+    }
+  ];
+
+  /** 获取缓存的数据 */
+  const getCacheData = (): ViewItem[] | null => {
+    const str = localStorage.getItem(CACHE_KEY);
+    try {
+      return str ? JSON.parse(str) : null;
+    } catch (e) {
+      return null;
+    }
+  };
+
+  /** 卡片数据 */
+  const data = ref<ViewItem[]>([...(getCacheData() ?? DEFAULT)]);
+
+  /** 弹窗是否打开 */
+  const visible = ref(false);
+
+  /** 快捷方式卡片 */
+  const linkCardRef = ref<InstanceType<typeof LinkCard> | null>(null);
+
+  /** 容器 */
+  const wrapRef = ref<InstanceType<typeof ElRow> | null>(null);
+
+  /** 拖拽排序实例 */
+  let sortableIns: SortableJs | null = null;
+
+  /** 未添加的数据 */
+  const notAddedData = computed(() => {
+    return DEFAULT.filter((d) => !data.value.some((t) => t.name === d.name));
+  });
+
+  /** 添加 */
+  const add = () => {
+    visible.value = true;
+  };
+
+  /** 重置布局 */
+  const reset = () => {
+    data.value = [...DEFAULT];
+    cacheData();
+    linkCardRef.value?.reset?.();
+    EleMessage.success({ message: '已重置', plain: true });
+  };
+
+  /** 缓存布局 */
+  const cacheData = () => {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(data.value));
+  };
+
+  /** 编辑卡片 */
+  const handleCommand = (command: Command, index: number) => {
+    switch (command) {
+      case 'refresh': // 刷新
+        EleMessage.info({ message: '点击了刷新', plain: true });
+        break;
+      case 'edit': // 编辑
+        EleMessage.info({ message: '点击了编辑', plain: true });
+        break;
+      case 'remove': // 删除
+        ElMessageBox.confirm(
+          `确定要删除“${data.value[index].title}”卡片吗?`,
+          '系统提示',
+          { type: 'warning', draggable: true }
+        )
+          .then(() => {
+            data.value = data.value.filter((_d, i) => i !== index);
+            cacheData();
+          })
+          .catch(() => {});
+        break;
+    }
+  };
+
+  /** 添加视图 */
+  const addView = (item: ViewItem) => {
+    data.value.push(item);
+    cacheData();
+    EleMessage.success({ message: '已添加', plain: true });
+  };
+
+  onMounted(() => {
+    // 卡片支持拖动排序
+    sortableIns = new SortableJs(wrapRef.value?.$el, {
+      handle: '.ele-card-header',
+      filter: '.demo-more-icon',
+      animation: 300,
+      delay: 150,
+      delayOnTouchOnly: true,
+      onUpdate: ({ oldIndex, newIndex }) => {
+        if (typeof oldIndex === 'number' && typeof newIndex === 'number') {
+          const temp = [...data.value];
+          temp.splice(newIndex, 0, temp.splice(oldIndex, 1)[0]);
+          data.value = temp;
+          cacheData();
+        }
+      },
+      setData: () => {},
+      forceFallback: true
+    });
+  });
+
+  onBeforeUnmount(() => {
+    sortableIns && sortableIns.destroy();
+    sortableIns = null;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .workplace-page {
+    :deep(.ele-card-header) {
+      user-select: none;
+      cursor: move;
+    }
+
+    :deep(.el-col) {
+      &.sortable-chosen > .ele-card {
+        box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
+      }
+
+      &.sortable-ghost {
+        opacity: 0;
+      }
+
+      &.sortable-fallback {
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  /* 底部按钮 */
+  .workplace-bottom {
+    display: flex;
+    align-items: center;
+
+    .workplace-button {
+      flex: 1;
+      padding: 10px 0;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background: hsla(0, 0%, 60%, 0.05);
+      }
+
+      :deep(.el-icon) {
+        font-size: 15px;
+        margin: -1px 6px 0 0;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/dashboard/workplace/model/index.ts b/z_ele/src/views/dashboard/workplace/model/index.ts
new file mode 100644
index 0000000..b7f2efb
--- /dev/null
+++ b/z_ele/src/views/dashboard/workplace/model/index.ts
@@ -0,0 +1 @@
+export type Command = 'refresh' | 'edit' | 'remove';
diff --git a/z_ele/src/views/example/components/demo-badge.vue b/z_ele/src/views/example/components/demo-badge.vue
new file mode 100644
index 0000000..0407082
--- /dev/null
+++ b/z_ele/src/views/example/components/demo-badge.vue
@@ -0,0 +1,112 @@
+<template>
+  <ele-card header="修改菜单徽章">
+    <el-form label-width="80px" style="max-width: 360px" @submit.prevent="">
+      <el-form-item label="菜单">
+        <el-tree-select
+          clearable
+          :data="treeData"
+          check-strictly
+          default-expand-all
+          placeholder="请选择菜单"
+          v-model="path"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <template #default="{ data }">
+            <el-icon
+              v-if="data.meta?.icon"
+              style="margin-right: 4px; transform: translateY(-1px)"
+            >
+              <component :is="data.meta?.icon" />
+            </el-icon>
+            <span>{{ data.label }}</span>
+          </template>
+          <template v-if="selectedIcon" #prefix>
+            <el-icon
+              color="var(--el-text-color-regular)"
+              style="margin-right: 6px"
+            >
+              <component :is="selectedIcon" />
+            </el-icon>
+          </template>
+        </el-tree-select>
+      </el-form-item>
+      <el-form-item label="徽章值">
+        <el-input clearable v-model="badge" placeholder="请输入徽章值" />
+      </el-form-item>
+      <el-form-item label="徽章类型">
+        <el-select
+          clearable
+          v-model="type"
+          placeholder="请选择徽章类型"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option label="primary" value="primary" />
+          <el-option label="success" value="success" />
+          <el-option label="warning" value="warning" />
+          <el-option label="danger" value="danger" />
+          <el-option label="info" value="info" />
+        </el-select>
+      </el-form-item>
+      <el-form-item style="margin: 0">
+        <el-button type="primary" @click="setBadge">更新</el-button>
+      </el-form-item>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import type { BadgeProps } from 'element-plus';
+  import { EleMessage, mapTree, findTree } from 'ele-admin-plus';
+  import { useUserStore } from '@/store/modules/user';
+
+  /** 菜单树 */
+  const userStore = useUserStore();
+  const { menus } = storeToRefs(userStore);
+
+  /** 菜单树下拉数据 */
+  const treeData = computed(() => {
+    return mapTree(menus.value, (m) => {
+      return {
+        ...m,
+        value: m.path,
+        label: m.meta?.title
+      };
+    });
+  });
+
+  /** 选中菜单 */
+  const path = ref<string>();
+
+  /** 徽章值 */
+  const badge = ref<string>();
+
+  /** 徽章类型 */
+  const type = ref<BadgeProps['type']>();
+
+  /** 选中菜单的图标 */
+  const selectedIcon = computed(() => {
+    if (!path.value) {
+      return;
+    }
+    return findTree(treeData.value, (d) => d.path == path.value)?.meta?.icon;
+  });
+
+  /** 修改菜单徽章数据 */
+  const setBadge = () => {
+    if (!path.value) {
+      EleMessage.error({ message: '请选择菜单', plain: true });
+      return;
+    }
+    userStore.setMenuBadge(
+      path.value,
+      !badge.value || isNaN(Number(badge.value))
+        ? badge.value
+        : Number(badge.value),
+      type.value
+    );
+  };
+</script>
diff --git a/z_ele/src/views/example/components/demo-component.vue b/z_ele/src/views/example/components/demo-component.vue
new file mode 100644
index 0000000..dec4f5e
--- /dev/null
+++ b/z_ele/src/views/example/components/demo-component.vue
@@ -0,0 +1,494 @@
+<template>
+  <ele-card header="组件美化">
+    <div style="max-width: 480px">
+      <option-item label="日期选择器" label-width="90px">
+        <el-date-picker
+          type="date"
+          v-model="value"
+          placeholder="请选择日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="带快捷选项" label-width="90px">
+        <el-date-picker
+          type="date"
+          v-model="value1"
+          :shortcuts="shortcuts"
+          :disabled-date="disabledDate"
+          placeholder="请选择日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="周选择器" label-width="90px">
+        <el-date-picker
+          type="week"
+          v-model="value2"
+          format="YYYY第ww周"
+          placeholder="请选择周"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="月选择器" label-width="90px">
+        <el-date-picker
+          type="month"
+          v-model="value3"
+          placeholder="请选择月"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="年选择器" label-width="90px">
+        <el-date-picker
+          type="year"
+          v-model="value4"
+          placeholder="请选择年"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="日期多选" label-width="90px">
+        <el-date-picker
+          type="dates"
+          v-model="value5"
+          placeholder="请选择日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="年多选" label-width="90px">
+        <el-date-picker
+          type="years"
+          v-model="value16"
+          placeholder="请选择年"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="月多选" label-width="90px">
+        <el-date-picker
+          type="months"
+          v-model="value17"
+          placeholder="请选择月"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="日期范围选择" label-width="90px">
+        <el-date-picker
+          type="daterange"
+          v-model="value19"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="带快捷选项" label-width="90px">
+        <el-date-picker
+          type="daterange"
+          v-model="value6"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :shortcuts="shortcuts2"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="月份范围选择" label-width="90px">
+        <el-date-picker
+          type="monthrange"
+          v-model="value7"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始月"
+          end-placeholder="结束月"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="年范围选择" label-width="90px">
+        <el-date-picker
+          type="yearrange"
+          v-model="value18"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始年"
+          end-placeholder="结束年"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="日期时间选择" label-width="90px">
+        <el-date-picker
+          type="datetime"
+          v-model="value8"
+          placeholder="请选择日期时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="带快捷选项" label-width="90px">
+        <el-date-picker
+          type="datetime"
+          v-model="value9"
+          :shortcuts="shortcuts3"
+          placeholder="请选择日期时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="日期时间范围" label-width="90px">
+        <el-date-picker
+          type="datetimerange"
+          v-model="value10"
+          unlink-panels
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="带快捷选项" label-width="90px">
+        <el-date-picker
+          type="datetimerange"
+          v-model="value11"
+          unlink-panels
+          :shortcuts="shortcuts4"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="时间选择器" label-width="90px">
+        <el-time-picker
+          v-model="value12"
+          placeholder="请选择时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="箭头控制模式" label-width="90px">
+        <el-time-picker
+          arrow-control
+          v-model="value13"
+          :disabled-hours="disabledHours"
+          :disabled-minutes="disabledMinutes"
+          :disabled-seconds="disabledSeconds"
+          placeholder="请选择时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="时间范围选择" label-width="90px">
+        <el-time-picker
+          v-model="value14"
+          is-range
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item label="箭头控制模式" label-width="90px">
+        <el-time-picker
+          v-model="value15"
+          is-range
+          arrow-control
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </option-item>
+      <option-item
+        label="单选框"
+        label-width="90px"
+        style="align-items: flex-start"
+        :label-style="{ paddingTop: '10px' }"
+      >
+        <div>
+          <el-radio-group v-model="radio" size="large">
+            <el-radio :value="1" label="Apple" />
+            <el-radio :value="2" label="Pear" disabled />
+            <el-radio :value="3" label="Orange" />
+            <el-radio :value="4" label="Banana" />
+          </el-radio-group>
+        </div>
+        <div>
+          <el-radio-group v-model="radio">
+            <el-radio :value="1" label="Apple" />
+            <el-radio :value="2" label="Pear" />
+            <el-radio :value="3" label="Orange" disabled />
+            <el-radio :value="4" label="Banana" />
+          </el-radio-group>
+        </div>
+        <div style="margin-top: 4px">
+          <el-radio-group v-model="radio" size="small">
+            <el-radio :value="1" label="Apple" />
+            <el-radio :value="2" label="Pear" />
+            <el-radio :value="3" label="Orange" />
+            <el-radio :value="4" label="Banana" disabled />
+          </el-radio-group>
+        </div>
+      </option-item>
+      <option-item
+        label="多选框"
+        label-width="90px"
+        style="align-items: flex-start"
+        :label-style="{ paddingTop: '10px' }"
+      >
+        <div>
+          <el-checkbox-group v-model="checkbox" size="large">
+            <el-checkbox :value="1" label="Apple" />
+            <el-checkbox :value="2" label="Pear" disabled />
+            <el-checkbox :value="3" label="Orange" />
+            <el-checkbox :value="4" label="Banana" />
+          </el-checkbox-group>
+        </div>
+        <div>
+          <el-checkbox-group v-model="checkbox">
+            <el-checkbox :value="1" label="Apple" />
+            <el-checkbox :value="2" label="Pear" />
+            <el-checkbox :value="3" label="Orange" disabled />
+            <el-checkbox :value="4" label="Banana" />
+          </el-checkbox-group>
+        </div>
+        <div style="margin-top: 4px">
+          <el-checkbox-group v-model="checkbox" size="small">
+            <el-checkbox :value="1" label="Apple" />
+            <el-checkbox :value="2" label="Pear" />
+            <el-checkbox :value="3" label="Orange" />
+            <el-checkbox :value="4" label="Banana" disabled />
+          </el-checkbox-group>
+        </div>
+      </option-item>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 日期选择 */
+  const value = ref('');
+
+  /** 带快捷选项 */
+  const value1 = ref('');
+
+  /** 日期选择快捷项 */
+  const shortcuts = ref([
+    {
+      text: 'Today',
+      value: new Date()
+    },
+    {
+      text: 'Yesterday',
+      value: () => {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+        return date;
+      }
+    },
+    {
+      text: 'A week ago',
+      value: () => {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+        return date;
+      }
+    }
+  ]);
+
+  /** 日期选择禁用 */
+  const disabledDate = (time: Date) => {
+    return time.getTime() > Date.now();
+  };
+
+  /** 周选择 */
+  const value2 = ref('');
+
+  /** 月选择 */
+  const value3 = ref('');
+
+  /** 年选择 */
+  const value4 = ref('');
+
+  /** 日期选择 */
+  const value5 = ref('');
+
+  /** 日期范围选择带快捷选项 */
+  const value6 = ref('');
+
+  /** 快捷选项 */
+  const shortcuts2 = ref([
+    {
+      text: 'Last week',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      }
+    },
+    {
+      text: 'Last month',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      }
+    },
+    {
+      text: 'Last 3 months',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      }
+    }
+  ]);
+
+  /** 月份范围选择 */
+  const value7 = ref('');
+
+  /** 日期时间选择 */
+  const value8 = ref('');
+
+  /** 日期时间选择 */
+  const value9 = ref('');
+
+  /** 快捷选项 */
+  const shortcuts3 = ref([
+    {
+      text: 'Today',
+      value: new Date()
+    },
+    {
+      text: 'Yesterday',
+      value: () => {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+        return date;
+      }
+    },
+    {
+      text: 'A week ago',
+      value: () => {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+        return date;
+      }
+    }
+  ]);
+
+  /** 日期时间范围 */
+  const value10 = ref(void 0);
+
+  /** 日期时间范围 */
+  const value11 = ref(void 0);
+
+  /** 快捷选项 */
+  const shortcuts4 = ref([
+    {
+      text: 'Last week',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      }
+    },
+    {
+      text: 'Last month',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      }
+    },
+    {
+      text: 'Last 3 months',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      }
+    }
+  ]);
+
+  /** 时间 */
+  const value12 = ref(void 0);
+
+  /** 时间 */
+  const value13 = ref(void 0);
+
+  const makeRange = (start: number, end: number) => {
+    const result: number[] = [];
+    for (let i = start; i <= end; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+
+  const disabledHours = () => {
+    return makeRange(0, 16).concat(makeRange(19, 23));
+  };
+
+  const disabledMinutes = (hour: number) => {
+    if (hour === 17) {
+      return makeRange(0, 29);
+    }
+    if (hour === 18) {
+      return makeRange(31, 59);
+    }
+    return [];
+  };
+
+  const disabledSeconds = (hour: number, minute: number) => {
+    if (hour === 18 && minute === 30) {
+      return makeRange(1, 59);
+    }
+    return [];
+  };
+
+  /** 时间范围 */
+  const value14 = ref(void 0);
+
+  /** 时间范围 */
+  const value15 = ref(void 0);
+
+  /** 单选框 */
+  const radio = ref(1);
+
+  /** 多选框 */
+  const checkbox = ref([]);
+
+  /** 年多选 */
+  const value16 = ref('');
+
+  /** 月多选 */
+  const value17 = ref('');
+
+  /** 年范围选择 */
+  const value18 = ref('');
+
+  /** 日期范围选择 */
+  const value19 = ref('');
+</script>
diff --git a/z_ele/src/views/example/components/demo-group.vue b/z_ele/src/views/example/components/demo-group.vue
new file mode 100644
index 0000000..0f238ef
--- /dev/null
+++ b/z_ele/src/views/example/components/demo-group.vue
@@ -0,0 +1,83 @@
+<template>
+  <ele-card header="使用分组菜单">
+    <div style="display: flex; flex-wrap: wrap">
+      <el-button type="primary" @click="toGroup1" style="margin: 0 12px 12px 0">
+        一级菜单变为分组形式
+      </el-button>
+      <el-button type="primary" @click="toGroup2" style="margin: 0 12px 12px 0">
+        二级菜单变为分组形式
+      </el-button>
+    </div>
+    <ele-text type="placeholder">
+      <span>二级菜单可查看列表页面/卡片列表的效果, </span>
+      <el-link type="primary" underline="never" @click="resetMenu">
+        重置菜单数据
+      </el-link>
+    </ele-text>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { useUserStore } from '@/store/modules/user';
+
+  const userStore = useUserStore();
+  const { menus } = storeToRefs(userStore);
+  const tempMenus = JSON.parse(JSON.stringify(menus.value));
+
+  /** 一级菜单变为分组形式 */
+  const toGroup1 = () => {
+    userStore.setMenus(
+      tempMenus.map((m: any) => {
+        const hasChild = !!m.children?.length;
+        const meta = m.meta || {};
+        return {
+          ...m,
+          meta: {
+            ...meta,
+            //icon: hasChild ? null : meta.icon,
+            props: {
+              ...meta.props,
+              group: hasChild
+            }
+          }
+        };
+      })
+    );
+  };
+
+  /** 二级菜单变为分组形式 */
+  const toGroup2 = () => {
+    userStore.setMenus(
+      tempMenus.map((m: any) => {
+        return {
+          ...m,
+          children: m.children
+            ? m.children.map((c: any) => {
+                const hasChild = c.children
+                  ? !!c.children.filter((t: any) => !t.meta?.hide).length
+                  : false;
+                const meta = c.meta || {};
+                return {
+                  ...c,
+                  meta: {
+                    ...meta,
+                    //icon: hasChild ? null : meta.icon,
+                    props: {
+                      ...meta.props,
+                      group: hasChild
+                    }
+                  }
+                };
+              })
+            : void 0
+        };
+      })
+    );
+  };
+
+  /** 重置 */
+  const resetMenu = () => {
+    userStore.setMenus(JSON.parse(JSON.stringify(tempMenus)));
+  };
+</script>
diff --git a/z_ele/src/views/example/components/demo-tab.vue b/z_ele/src/views/example/components/demo-tab.vue
new file mode 100644
index 0000000..c60c1f6
--- /dev/null
+++ b/z_ele/src/views/example/components/demo-tab.vue
@@ -0,0 +1,242 @@
+<template>
+  <ele-card header="页签操作">
+    <div style="display: flex; align-items: center; padding-bottom: 8px">
+      <div style="flex-shrink: 0; padding-right: 12px">操作指定页签:</div>
+      <div style="flex: 1; max-width: 160px">
+        <el-select
+          clearable
+          v-model="tabPath"
+          placeholder="请选择页签"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option
+            v-for="(item, index) in tabs"
+            :key="item.key"
+            :label="item.title"
+            :value="item.fullPath || index"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div style="display: flex; flex-wrap: wrap; width: 460px; max-width: 100%">
+      <el-button
+        type="primary"
+        style="margin: 16px 12px 0 0"
+        @click="handleUpdate2"
+      >
+        修改页签标题
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 16px 12px 0 0"
+        @click="handleUpdate3"
+      >
+        修改页签为不可关闭
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 16px 12px 0 0"
+        @click="handleClose2"
+      >
+        关闭页签
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 16px 12px 0 0"
+        @click="handleClose3"
+      >
+        关闭当前页签并切换至此页签
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 16px 12px 0 0"
+        @click="handleCloseAndRefresh"
+      >
+        关闭当前页签并刷新至此页签
+      </el-button>
+    </div>
+    <div style="margin: 42px 0 16px 0">操作当前页签:</div>
+    <div style="display: flex; flex-wrap: wrap">
+      <el-button
+        type="primary"
+        style="margin: 0 12px 16px 0"
+        @click="handleRefresh"
+      >
+        刷新当前页签
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 0 12px 16px 0"
+        @click="handleUpdate"
+      >
+        修改当前页签标题
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 0 12px 16px 0"
+        @click="handleClose"
+      >
+        关闭当前页签
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin: 0 12px 16px 0"
+        @click="handleCloseAll"
+      >
+        关闭全部页签
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useRouter } from 'vue-router';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { usePageTab } from '@/utils/use-page-tab';
+
+  const {
+    reloadPageTab,
+    setPageTabTitle,
+    finishPageTab,
+    removeAllPageTab,
+    getRouteTabKey,
+    setPageTab,
+    removePageTab,
+    routeTabKey
+  } = usePageTab();
+
+  const { currentRoute, push } = useRouter();
+
+  /** 当前打开的页签 */
+  const themeStore = useThemeStore();
+  const { tabs } = storeToRefs(themeStore);
+
+  /** 刷新当前页签 */
+  const handleRefresh = () => {
+    reloadPageTab();
+  };
+
+  /** 修改当前页签标题 */
+  const handleUpdate = () => {
+    setPageTabTitle('新的标题');
+  };
+
+  /** 关闭当前页签 */
+  const handleClose = () => {
+    finishPageTab();
+  };
+
+  /** 关闭全部页签 */
+  const handleCloseAll = () => {
+    removeAllPageTab({ active: getRouteTabKey() });
+  };
+
+  /** 下拉框选中 */
+  const tabPath = ref('');
+
+  /** 修改指定页签标题 */
+  const handleUpdate2 = () => {
+    if (
+      !tabPath.value ||
+      !tabs.value.some((t) => t.fullPath === tabPath.value)
+    ) {
+      tabPath.value = '';
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    setPageTab({
+      path: tabPath.value,
+      title: '新的标题'
+    });
+  };
+
+  /** 修改指定页签为不可关闭 */
+  const handleUpdate3 = () => {
+    if (
+      !tabPath.value ||
+      !tabs.value.some((t) => t.fullPath === tabPath.value)
+    ) {
+      tabPath.value = '';
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    setPageTab({
+      path: tabPath.value,
+      closable: false
+    });
+  };
+
+  /** 关闭指定页签 */
+  const handleClose2 = () => {
+    if (!tabPath.value) {
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    const t = tabs.value.find((t) => t.fullPath === tabPath.value);
+    if (!t) {
+      tabPath.value = '';
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    if (t.path === unref(currentRoute).path) {
+      handleClose();
+      return;
+    }
+    removePageTab({
+      key: tabPath.value,
+      active: getRouteTabKey()
+    });
+  };
+
+  /** 关闭当前页签并切换至指定页签 */
+  const handleClose3 = () => {
+    if (!tabPath.value) {
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    const t = tabs.value.find((t) => t.fullPath === tabPath.value);
+    if (!t) {
+      tabPath.value = '';
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    if (!tabs.value.find((t) => t.key === routeTabKey)?.closable) {
+      EleMessage.error({ message: '当前页签不可关闭', plain: true });
+      return;
+    }
+    if (t.path === routeTabKey) {
+      handleRefresh();
+      return;
+    }
+    removePageTab({ key: routeTabKey });
+    push(tabPath.value);
+  };
+
+  /** 关闭当前页签并切换至指定页签并刷新指定页签 */
+  const handleCloseAndRefresh = () => {
+    if (!tabPath.value) {
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    const t = tabs.value.find((t) => t.fullPath === tabPath.value);
+    if (!t) {
+      tabPath.value = '';
+      EleMessage.error({ message: '请选择页签', plain: true });
+      return;
+    }
+    if (!tabs.value.find((t) => t.key === routeTabKey)?.closable) {
+      EleMessage.error({ message: '当前页签不可关闭', plain: true });
+      return;
+    }
+    if (t.path === routeTabKey) {
+      handleRefresh();
+      return;
+    }
+    removePageTab({ key: routeTabKey });
+    reloadPageTab({ fullPath: tabPath.value });
+  };
+</script>
diff --git a/z_ele/src/views/example/index.vue b/z_ele/src/views/example/index.vue
new file mode 100644
index 0000000..16ad2a9
--- /dev/null
+++ b/z_ele/src/views/example/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <ele-page>
+    <demo-badge />
+    <demo-group />
+    <demo-tab />
+    <demo-component />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBadge from './components/demo-badge.vue';
+  import DemoGroup from './components/demo-group.vue';
+  import DemoTab from './components/demo-tab.vue';
+  import DemoComponent from './components/demo-component.vue';
+
+  defineOptions({ name: 'Example' });
+</script>
diff --git a/z_ele/src/views/exception/403/components/icon-svg.vue b/z_ele/src/views/exception/403/components/icon-svg.vue
new file mode 100644
index 0000000..48cbdbd
--- /dev/null
+++ b/z_ele/src/views/exception/403/components/icon-svg.vue
@@ -0,0 +1,276 @@
+<template>
+  <svg width="251" height="294" style="width: auto; height: auto">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023"
+        fill="#E4EBF7"
+      />
+      <path
+        d="M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65"
+        fill="#FFF"
+      />
+      <path
+        d="M38.652 136.36l10.425 5.91M49.989 148.505l-12.58 10.73"
+        stroke="#FFF"
+        strokeWidth="2"
+      />
+      <path
+        d="M41.536 161.28a5.636 5.636 0 1 1-11.216-1.13 5.636 5.636 0 0 1 11.216 1.13M59.154 145.261a5.677 5.677 0 1 1-11.297-1.138 5.677 5.677 0 0 1 11.297 1.138M100.36 29.516l29.66-.013a4.562 4.562 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 0 0 .005 9.126M111.705 47.754l29.659-.013a4.563 4.563 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 1 0 .005 9.126"
+        fill="#FFF"
+      />
+      <path
+        d="M114.066 29.503V29.5l15.698-.007a4.563 4.563 0 1 0 .004 9.126l-15.698.007v-.002a4.562 4.562 0 0 0-.004-9.122M185.405 137.723c-.55 5.455-5.418 9.432-10.873 8.882-5.456-.55-9.432-5.418-8.882-10.873.55-5.455 5.418-9.432 10.873-8.882 5.455.55 9.432 5.418 8.882 10.873"
+        fill="#FFF"
+      />
+      <path
+        d="M180.17 143.772l12.572 7.129M193.841 158.42L178.67 171.36"
+        stroke="#FFF"
+        strokeWidth="2"
+      />
+      <path
+        d="M185.55 171.926a6.798 6.798 0 1 1-13.528-1.363 6.798 6.798 0 0 1 13.527 1.363M204.12 155.285a6.848 6.848 0 1 1-13.627-1.375 6.848 6.848 0 0 1 13.626 1.375"
+        fill="#FFF"
+      />
+      <path
+        d="M152.988 194.074a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0zM225.931 118.217a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zM217.09 153.051a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.42 0zM177.84 109.842a2.21 2.21 0 1 1-4.422 0 2.21 2.21 0 0 1 4.421 0zM196.114 94.454a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zM202.844 182.523a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0z"
+        stroke="#FFF"
+        strokeWidth="2"
+      />
+      <path
+        stroke="#FFF"
+        strokeWidth="2"
+        d="M215.125 155.262l-1.902 20.075-10.87 5.958M174.601 176.636l-6.322 9.761H156.98l-4.484 6.449M175.874 127.28V111.56M221.51 119.404l-12.77 7.859-15.228-7.86V96.668"
+      />
+      <path
+        d="M180.68 29.32C180.68 13.128 193.806 0 210 0c16.193 0 29.32 13.127 29.32 29.32 0 16.194-13.127 29.322-29.32 29.322-16.193 0-29.32-13.128-29.32-29.321"
+        fill="#A26EF4"
+      />
+      <path
+        d="M221.45 41.706l-21.563-.125a1.744 1.744 0 0 1-1.734-1.754l.071-12.23a1.744 1.744 0 0 1 1.754-1.734l21.562.125c.964.006 1.74.791 1.735 1.755l-.071 12.229a1.744 1.744 0 0 1-1.754 1.734"
+        fill="#FFF"
+      />
+      <path
+        d="M215.106 29.192c-.015 2.577-2.049 4.654-4.543 4.64-2.494-.014-4.504-2.115-4.489-4.693l.04-6.925c.016-2.577 2.05-4.654 4.543-4.64 2.494.015 4.504 2.116 4.49 4.693l-.04 6.925zm-4.53-14.074a6.877 6.877 0 0 0-6.916 6.837l-.043 7.368a6.877 6.877 0 0 0 13.754.08l.042-7.368a6.878 6.878 0 0 0-6.837-6.917zM167.566 68.367h-3.93a4.73 4.73 0 0 1-4.717-4.717 4.73 4.73 0 0 1 4.717-4.717h3.93a4.73 4.73 0 0 1 4.717 4.717 4.73 4.73 0 0 1-4.717 4.717"
+        fill="#FFF"
+      />
+      <path
+        d="M168.214 248.838a6.611 6.611 0 0 1-6.61-6.611v-66.108a6.611 6.611 0 0 1 13.221 0v66.108a6.611 6.611 0 0 1-6.61 6.61"
+        fill="#5BA02E"
+      />
+      <path
+        d="M176.147 248.176a6.611 6.611 0 0 1-6.61-6.61v-33.054a6.611 6.611 0 1 1 13.221 0v33.053a6.611 6.611 0 0 1-6.61 6.611"
+        fill="#92C110"
+      />
+      <path
+        d="M185.994 293.89h-27.376a3.17 3.17 0 0 1-3.17-3.17v-45.887a3.17 3.17 0 0 1 3.17-3.17h27.376a3.17 3.17 0 0 1 3.17 3.17v45.886a3.17 3.17 0 0 1-3.17 3.17"
+        fill="#F2D7AD"
+      />
+      <path
+        d="M81.972 147.673s6.377-.927 17.566-1.28c11.729-.371 17.57 1.086 17.57 1.086s3.697-3.855.968-8.424c1.278-12.077 5.982-32.827.335-48.273-1.116-1.339-3.743-1.512-7.536-.62-1.337.315-7.147-.149-7.983-.1l-15.311-.347s-3.487-.17-8.035-.508c-1.512-.113-4.227-1.683-5.458-.338-.406.443-2.425 5.669-1.97 16.077l8.635 35.642s-3.141 3.61 1.219 7.085"
+        fill="#FFF"
+      />
+      <path
+        d="M75.768 73.325l-.9-6.397 11.982-6.52s7.302-.118 8.038 1.205c.737 1.324-5.616.993-5.616.993s-1.836 1.388-2.615 2.5c-1.654 2.363-.986 6.471-8.318 5.986-1.708.284-2.57 2.233-2.57 2.233"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M52.44 77.672s14.217 9.406 24.973 14.444c1.061.497-2.094 16.183-11.892 11.811-7.436-3.318-20.162-8.44-21.482-14.496-.71-3.258 2.543-7.643 8.401-11.76M141.862 80.113s-6.693 2.999-13.844 6.876c-3.894 2.11-10.137 4.704-12.33 7.988-6.224 9.314 3.536 11.22 12.947 7.503 6.71-2.651 28.999-12.127 13.227-22.367"
+        fill="#FFB594"
+      />
+      <path
+        d="M76.166 66.36l3.06 3.881s-2.783 2.67-6.31 5.747c-7.103 6.195-12.803 14.296-15.995 16.44-3.966 2.662-9.754 3.314-12.177-.118-3.553-5.032.464-14.628 31.422-25.95"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M64.674 85.116s-2.34 8.413-8.912 14.447c.652.548 18.586 10.51 22.144 10.056 5.238-.669 6.417-18.968 1.145-20.531-.702-.208-5.901-1.286-8.853-2.167-.87-.26-1.611-1.71-3.545-.936l-1.98-.869zM128.362 85.826s5.318 1.956 7.325 13.734c-.546.274-17.55 12.35-21.829 7.805-6.534-6.94-.766-17.393 4.275-18.61 4.646-1.121 5.03-1.37 10.23-2.929"
+        fill="#FFF"
+      />
+      <path
+        d="M78.18 94.656s.911 7.41-4.914 13.078"
+        stroke="#E4EBF7"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M87.397 94.68s3.124 2.572 10.263 2.572c7.14 0 9.074-3.437 9.074-3.437"
+        stroke="#E4EBF7"
+        strokeWidth=".932"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M117.184 68.639l-6.781-6.177s-5.355-4.314-9.223-.893c-3.867 3.422 4.463 2.083 5.653 4.165 1.19 2.082.848 1.143-2.083.446-5.603-1.331-2.082.893 2.975 5.355 2.091 1.845 6.992.955 6.992.955l2.467-3.851z"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M105.282 91.315l-.297-10.937-15.918-.027-.53 10.45c-.026.403.17.788.515.999 2.049 1.251 9.387 5.093 15.799.424.287-.21.443-.554.431-.91"
+        fill="#FFB594"
+      />
+      <path
+        d="M107.573 74.24c.817-1.147.982-9.118 1.015-11.928a1.046 1.046 0 0 0-.965-1.055l-4.62-.365c-7.71-1.044-17.071.624-18.253 6.346-5.482 5.813-.421 13.244-.421 13.244s1.963 3.566 4.305 6.791c.756 1.041.398-3.731 3.04-5.929 5.524-4.594 15.899-7.103 15.899-7.103"
+        fill="#5C2552"
+      />
+      <path
+        d="M88.426 83.206s2.685 6.202 11.602 6.522c7.82.28 8.973-7.008 7.434-17.505l-.909-5.483c-6.118-2.897-15.478.54-15.478.54s-.576 2.044-.19 5.504c-2.276 2.066-1.824 5.618-1.824 5.618s-.905-1.922-1.98-2.321c-.86-.32-1.897.089-2.322 1.98-1.04 4.632 3.667 5.145 3.667 5.145"
+        fill="#FFC6A0"
+      />
+      <path
+        stroke="#DB836E"
+        strokeWidth="1.145"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M100.843 77.099l1.701-.928-1.015-4.324.674-1.406"
+      />
+      <path
+        d="M105.546 74.092c-.022.713-.452 1.279-.96 1.263-.51-.016-.904-.607-.882-1.32.021-.713.452-1.278.96-1.263.51.016.904.607.882 1.32M97.592 74.349c-.022.713-.452 1.278-.961 1.263-.509-.016-.904-.607-.882-1.32.022-.713.452-1.279.961-1.263.51.016.904.606.882 1.32"
+        fill="#552950"
+      />
+      <path
+        d="M91.132 86.786s5.269 4.957 12.679 2.327"
+        stroke="#DB836E"
+        strokeWidth="1.145"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.776 81.903s-3.592.232-1.44-2.79c1.59-1.496 4.897-.46 4.897-.46s1.156 3.906-3.457 3.25"
+        fill="#DB836E"
+      />
+      <path
+        d="M102.88 70.6s2.483.84 3.402.715M93.883 71.975s2.492-1.144 4.778-1.073"
+        stroke="#5C2552"
+        strokeWidth="1.526"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M86.32 77.374s.961.879 1.458 2.106c-.377.48-1.033 1.152-.236 1.809M99.337 83.719s1.911.151 2.509-.254"
+        stroke="#DB836E"
+        strokeWidth="1.145"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M87.782 115.821l15.73-3.012M100.165 115.821l10.04-2.008"
+        stroke="#E4EBF7"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M66.508 86.763s-1.598 8.83-6.697 14.078"
+        stroke="#E4EBF7"
+        strokeWidth="1.114"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M128.31 87.934s3.013 4.121 4.06 11.785"
+        stroke="#E4EBF7"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M64.09 84.816s-6.03 9.912-13.607 9.903"
+        stroke="#DB836E"
+        strokeWidth=".795"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.366 65.909l-.142 5.32s5.993 4.472 11.945 9.202c4.482 3.562 8.888 7.455 10.985 8.662 4.804 2.766 8.9 3.355 11.076 1.808 4.071-2.894 4.373-9.878-8.136-15.263-4.271-1.838-16.144-6.36-25.728-9.73"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M130.532 85.488s4.588 5.757 11.619 6.214"
+        stroke="#DB836E"
+        strokeWidth=".75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M121.708 105.73s-.393 8.564-1.34 13.612"
+        stroke="#E4EBF7"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M115.784 161.512s-3.57-1.488-2.678-7.14"
+        stroke="#648BD8"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M101.52 290.246s4.326 2.057 7.408 1.03c2.842-.948 4.564.673 7.132 1.186 2.57.514 6.925 1.108 11.772-1.269-.104-5.551-6.939-4.01-12.048-6.763-2.582-1.39-3.812-4.757-3.625-8.863h-9.471s-1.402 10.596-1.169 14.68"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M101.496 290.073s2.447 1.281 6.809.658c3.081-.44 3.74.485 7.479 1.039 3.739.554 10.802-.07 11.91-.9.415 1.108-.347 2.077-.347 2.077s-1.523.608-4.847.831c-2.045.137-5.843.293-7.663-.507-1.8-1.385-5.286-1.917-5.77-.243-3.947.958-7.41-.288-7.41-.288l-.16-2.667z"
+        fill="#2B0849"
+      />
+      <path
+        d="M108.824 276.19h3.116s-.103 6.751 4.57 8.62c-4.673.624-8.62-2.32-7.686-8.62"
+        fill="#A4AABA"
+      />
+      <path
+        d="M57.65 272.52s-2.122 7.47-4.518 12.396c-1.811 3.724-4.255 7.548 5.505 7.548 6.698 0 9.02-.483 7.479-6.648-1.541-6.164.268-13.296.268-13.296H57.65z"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M51.54 290.04s2.111 1.178 6.682 1.178c6.128 0 8.31-1.662 8.31-1.662s.605 1.122-.624 2.18c-1 .862-3.624 1.603-7.444 1.559-4.177-.049-5.876-.57-6.786-1.177-.831-.554-.692-1.593-.138-2.078"
+        fill="#2B0849"
+      />
+      <path
+        d="M58.533 274.438s.034 1.529-.315 2.95c-.352 1.431-1.087 3.127-1.139 4.17-.058 1.16 4.57 1.592 5.194.035.623-1.559 1.303-6.475 1.927-7.306.622-.831-4.94-2.135-5.667.15"
+        fill="#A4AABA"
+      />
+      <path
+        d="M100.885 277.015l13.306.092s1.291-54.228 1.843-64.056c.552-9.828 3.756-43.13.997-62.788l-12.48-.64-22.725.776s-.433 3.944-1.19 9.921c-.062.493-.677.838-.744 1.358-.075.582.42 1.347.318 1.956-2.35 14.003-6.343 32.926-8.697 46.425-.116.663-1.227 1.004-1.45 2.677-.04.3.21 1.516.112 1.785-6.836 18.643-10.89 47.584-14.2 61.551l14.528-.014s2.185-8.524 4.008-16.878c2.796-12.817 22.987-84.553 22.987-84.553l3-.517 1.037 46.1s-.223 1.228.334 2.008c.558.782-.556 1.117-.39 2.233l.39 1.784s-.446 7.14-.892 11.826c-.446 4.685-.092 38.954-.092 38.954"
+        fill="#7BB2F9"
+      />
+      <path
+        d="M77.438 220.434c1.146.094 4.016-2.008 6.916-4.91M107.55 223.931s2.758-1.103 6.069-3.862"
+        stroke="#648BD8"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M108.459 220.905s2.759-1.104 6.07-3.863"
+        stroke="#648BD8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M76.099 223.557s2.608-.587 6.47-3.346M87.33 150.82c-.27 3.088.297 8.478-4.315 9.073M104.829 149.075s.11 13.936-1.286 14.983c-2.207 1.655-2.975 1.934-2.975 1.934M101.014 149.63s.035 12.81-1.19 24.245M94.93 174.965s7.174-1.655 9.38-1.655M75.671 204.754c-.316 1.55-.64 3.067-.973 4.535 0 0-1.45 1.822-1.003 3.756.446 1.934-.943 2.034-4.96 15.273-1.686 5.559-4.464 18.49-6.313 27.447-.078.38-4.018 18.06-4.093 18.423M77.043 196.743a313.269 313.269 0 0 1-.877 4.729M83.908 151.414l-1.19 10.413s-1.091.148-.496 2.23c.111 1.34-2.66 15.692-5.153 30.267M57.58 272.94h13.238"
+        stroke="#648BD8"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M117.377 147.423s-16.955-3.087-35.7.199c.157 2.501-.002 4.128-.002 4.128s14.607-2.802 35.476-.31c.251-2.342.226-4.017.226-4.017"
+        fill="#192064"
+      />
+      <path
+        d="M107.511 150.353l.004-4.885a.807.807 0 0 0-.774-.81c-2.428-.092-5.04-.108-7.795-.014a.814.814 0 0 0-.784.81l-.003 4.88c0 .456.371.82.827.808a140.76 140.76 0 0 1 7.688.017.81.81 0 0 0 .837-.806"
+        fill="#FFF"
+      />
+      <path
+        d="M106.402 149.426l.002-3.06a.64.64 0 0 0-.616-.643 94.135 94.135 0 0 0-5.834-.009.647.647 0 0 0-.626.643l-.001 3.056c0 .36.291.648.651.64 1.78-.04 3.708-.041 5.762.012.36.009.662-.279.662-.64"
+        fill="#192064"
+      />
+      <path
+        d="M101.485 273.933h12.272M102.652 269.075c.006 3.368.04 5.759.11 6.47M102.667 263.125c-.009 1.53-.015 2.98-.016 4.313M102.204 174.024l.893 44.402s.669 1.561-.224 2.677c-.892 1.116 2.455.67.893 2.231-1.562 1.562.893 1.116 0 3.347-.592 1.48-.988 20.987-1.09 34.956"
+        stroke="#648BD8"
+        strokeWidth="1.051"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/z_ele/src/views/exception/403/index.vue b/z_ele/src/views/exception/403/index.vue
new file mode 100644
index 0000000..ecc95a7
--- /dev/null
+++ b/z_ele/src/views/exception/403/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <ele-page>
+    <el-result title="403">
+      <template #icon>
+        <div style="width: 250px; height: 295px; margin: 20px 0 10px 0">
+          <icon-svg />
+        </div>
+      </template>
+      <template #sub-title>
+        <ele-text type="placeholder">抱歉, 你无权访问该页面.</ele-text>
+      </template>
+      <template #extra>
+        <router-link to="/" style="display: inline-flex; text-decoration: none">
+          <el-button type="primary">返回首页</el-button>
+        </router-link>
+      </template>
+    </el-result>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import IconSvg from './components/icon-svg.vue';
+
+  defineOptions({ name: 'Exception403' });
+</script>
diff --git a/z_ele/src/views/exception/404/components/icon-svg.vue b/z_ele/src/views/exception/404/components/icon-svg.vue
new file mode 100644
index 0000000..9dbf6ba
--- /dev/null
+++ b/z_ele/src/views/exception/404/components/icon-svg.vue
@@ -0,0 +1,288 @@
+<template>
+  <svg width="252" height="294" style="width: auto; height: auto">
+    <defs>
+      <path d="M0 .387h251.772v251.772H0z" />
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(0 .012)">
+        <mask fill="#fff" />
+        <path
+          d="M0 127.32v-2.095C0 56.279 55.892.387 124.838.387h2.096c68.946 0 124.838 55.892 124.838 124.838v2.096c0 68.946-55.892 124.838-124.838 124.838h-2.096C55.892 252.16 0 196.267 0 127.321"
+          fill="#E4EBF7"
+          mask="url(#b)"
+        />
+      </g>
+      <path
+        d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66"
+        fill="#FFF"
+      />
+      <path
+        d="M36.975 134.297l10.482 5.943M48.373 146.508l-12.648 10.788"
+        stroke="#FFF"
+        stroke-width="2"
+      />
+      <path
+        d="M39.875 159.352a5.667 5.667 0 1 1-11.277-1.136 5.667 5.667 0 0 1 11.277 1.136M57.588 143.247a5.708 5.708 0 1 1-11.358-1.145 5.708 5.708 0 0 1 11.358 1.145M99.018 26.875l29.82-.014a4.587 4.587 0 1 0-.003-9.175l-29.82.013a4.587 4.587 0 1 0 .003 9.176M110.424 45.211l29.82-.013a4.588 4.588 0 0 0-.004-9.175l-29.82.013a4.587 4.587 0 1 0 .004 9.175"
+        fill="#FFF"
+      />
+      <path
+        d="M112.798 26.861v-.002l15.784-.006a4.588 4.588 0 1 0 .003 9.175l-15.783.007v-.002a4.586 4.586 0 0 0-.004-9.172M184.523 135.668c-.553 5.485-5.447 9.483-10.931 8.93-5.485-.553-9.483-5.448-8.93-10.932.552-5.485 5.447-9.483 10.932-8.93 5.485.553 9.483 5.447 8.93 10.932"
+        fill="#FFF"
+      />
+      <path
+        d="M179.26 141.75l12.64 7.167M193.006 156.477l-15.255 13.011"
+        stroke="#FFF"
+        stroke-width="2"
+      />
+      <path
+        d="M184.668 170.057a6.835 6.835 0 1 1-13.6-1.372 6.835 6.835 0 0 1 13.6 1.372M203.34 153.325a6.885 6.885 0 1 1-13.7-1.382 6.885 6.885 0 0 1 13.7 1.382"
+        fill="#FFF"
+      />
+      <path
+        d="M151.931 192.324a2.222 2.222 0 1 1-4.444 0 2.222 2.222 0 0 1 4.444 0zM225.27 116.056a2.222 2.222 0 1 1-4.445 0 2.222 2.222 0 0 1 4.444 0zM216.38 151.08a2.223 2.223 0 1 1-4.446-.001 2.223 2.223 0 0 1 4.446 0zM176.917 107.636a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM195.291 92.165a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM202.058 180.711a2.223 2.223 0 1 1-4.446 0 2.223 2.223 0 0 1 4.446 0z"
+        stroke="#FFF"
+        stroke-width="2"
+      />
+      <path
+        stroke="#FFF"
+        stroke-width="2"
+        d="M214.404 153.302l-1.912 20.184-10.928 5.99M173.661 174.792l-6.356 9.814h-11.36l-4.508 6.484M174.941 125.168v-15.804M220.824 117.25l-12.84 7.901-15.31-7.902V94.39"
+      />
+      <path
+        d="M166.588 65.936h-3.951a4.756 4.756 0 0 1-4.743-4.742 4.756 4.756 0 0 1 4.743-4.743h3.951a4.756 4.756 0 0 1 4.743 4.743 4.756 4.756 0 0 1-4.743 4.742"
+        fill="#FFF"
+      />
+      <path
+        d="M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48 0 16.28-13.2 29.48-29.48 29.48-16.282 0-29.48-13.2-29.48-29.48"
+        fill="#1890FF"
+      />
+      <path
+        d="M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894"
+        fill="#FFF"
+      />
+      <path
+        d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88"
+        fill="#FFB594"
+      />
+      <path
+        d="M90.483 67.504l-.449 2.893c-.753.49-4.748-2.663-4.748-2.663l-1.645.748-1.346-5.684s6.815-4.589 8.917-5.018c2.452-.501 9.884.94 10.7 2.278 0 0 1.32.486-2.227.69-3.548.203-5.043.447-6.79 3.132-1.747 2.686-2.412 3.624-2.412 3.624"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M128.055 111.367c-2.627-7.724-6.15-13.18-8.917-15.478-3.5-2.906-9.34-2.225-11.366-4.187-1.27-1.231-3.215-1.197-3.215-1.197s-14.98-3.158-16.828-3.479c-2.37-.41-2.124-.714-6.054-1.405-1.57-1.907-2.917-1.122-2.917-1.122l-7.11-1.383c-.853-1.472-2.423-1.023-2.423-1.023l-2.468-.897c-1.645 9.976-7.74 13.796-7.74 13.796 1.795 1.122 15.703 8.3 15.703 8.3l5.107 37.11s-3.321 5.694 1.346 9.109c0 0 19.883-3.743 34.921-.329 0 0 3.047-2.546.972-8.806.523-3.01 1.394-8.263 1.736-11.622.385.772 2.019 1.918 3.14 3.477 0 0 9.407-7.365 11.052-14.012-.832-.723-1.598-1.585-2.267-2.453-.567-.736-.358-2.056-.765-2.717-.669-1.084-1.804-1.378-1.907-1.682"
+        fill="#FFF"
+      />
+      <path
+        d="M101.09 289.998s4.295 2.041 7.354 1.021c2.821-.94 4.53.668 7.08 1.178 2.55.51 6.874 1.1 11.686-1.26-.103-5.51-6.889-3.98-11.96-6.713-2.563-1.38-3.784-4.722-3.598-8.799h-9.402s-1.392 10.52-1.16 14.573"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M101.067 289.826s2.428 1.271 6.759.653c3.058-.437 3.712.481 7.423 1.031 3.712.55 10.724-.069 11.823-.894.413 1.1-.343 2.063-.343 2.063s-1.512.603-4.812.824c-2.03.136-5.8.291-7.607-.503-1.787-1.375-5.247-1.903-5.728-.241-3.918.95-7.355-.286-7.355-.286l-.16-2.647z"
+        fill="#2B0849"
+      />
+      <path
+        d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558"
+        fill="#A4AABA"
+      />
+      <path
+        d="M57.542 272.401s-2.107 7.416-4.485 12.306c-1.798 3.695-4.225 7.492 5.465 7.492 6.648 0 8.953-.48 7.423-6.599-1.53-6.12.266-13.199.266-13.199h-8.669z"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M51.476 289.793s2.097 1.169 6.633 1.169c6.083 0 8.249-1.65 8.249-1.65s.602 1.114-.619 2.165c-.993.855-3.597 1.591-7.39 1.546-4.145-.048-5.832-.566-6.736-1.168-.825-.55-.687-1.58-.137-2.062"
+        fill="#2B0849"
+      />
+      <path
+        d="M58.419 274.304s.033 1.519-.314 2.93c-.349 1.42-1.078 3.104-1.13 4.139-.058 1.151 4.537 1.58 5.155.034.62-1.547 1.294-6.427 1.913-7.252.619-.825-4.903-2.119-5.624.15"
+        fill="#A4AABA"
+      />
+      <path
+        d="M99.66 278.514l13.378.092s1.298-54.52 1.853-64.403c.554-9.882 3.776-43.364 1.002-63.128l-12.547-.644-22.849.78s-.434 3.966-1.195 9.976c-.063.496-.682.843-.749 1.365-.075.585.423 1.354.32 1.966-2.364 14.08-6.377 33.104-8.744 46.677-.116.666-1.234 1.009-1.458 2.691-.04.302.211 1.525.112 1.795-6.873 18.744-10.949 47.842-14.277 61.885l14.607-.014s2.197-8.57 4.03-16.97c2.811-12.886 23.111-85.01 23.111-85.01l3.016-.521 1.043 46.35s-.224 1.234.337 2.02c.56.785-.56 1.123-.392 2.244l.392 1.794s-.449 7.178-.898 11.89c-.448 4.71-.092 39.165-.092 39.165"
+        fill="#7BB2F9"
+      />
+      <path
+        d="M76.085 221.626c1.153.094 4.038-2.019 6.955-4.935M106.36 225.142s2.774-1.11 6.103-3.883"
+        stroke="#648BD8"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M107.275 222.1s2.773-1.11 6.102-3.884"
+        stroke="#648BD8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M74.74 224.767s2.622-.591 6.505-3.365M86.03 151.634c-.27 3.106.3 8.525-4.336 9.123M103.625 149.88s.11 14.012-1.293 15.065c-2.219 1.664-2.99 1.944-2.99 1.944M99.79 150.438s.035 12.88-1.196 24.377M93.673 175.911s7.212-1.664 9.431-1.664M74.31 205.861a212.013 212.013 0 0 1-.979 4.56s-1.458 1.832-1.009 3.776c.449 1.944-.947 2.045-4.985 15.355-1.696 5.59-4.49 18.591-6.348 27.597l-.231 1.12M75.689 197.807a320.934 320.934 0 0 1-.882 4.754M82.591 152.233L81.395 162.7s-1.097.15-.5 2.244c.113 1.346-2.674 15.775-5.18 30.43M56.12 274.418h13.31"
+        stroke="#648BD8"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M116.241 148.22s-17.047-3.104-35.893.2c.158 2.514-.003 4.15-.003 4.15s14.687-2.818 35.67-.312c.252-2.355.226-4.038.226-4.038"
+        fill="#192064"
+      />
+      <path
+        d="M106.322 151.165l.003-4.911a.81.81 0 0 0-.778-.815c-2.44-.091-5.066-.108-7.836-.014a.818.818 0 0 0-.789.815l-.003 4.906a.81.81 0 0 0 .831.813c2.385-.06 4.973-.064 7.73.017a.815.815 0 0 0 .842-.81"
+        fill="#FFF"
+      />
+      <path
+        d="M105.207 150.233l.002-3.076a.642.642 0 0 0-.619-.646 94.321 94.321 0 0 0-5.866-.01.65.65 0 0 0-.63.647v3.072a.64.64 0 0 0 .654.644 121.12 121.12 0 0 1 5.794.011c.362.01.665-.28.665-.642"
+        fill="#192064"
+      />
+      <path
+        d="M100.263 275.415h12.338M101.436 270.53c.006 3.387.042 5.79.111 6.506M101.451 264.548a915.75 915.75 0 0 0-.015 4.337M100.986 174.965l.898 44.642s.673 1.57-.225 2.692c-.897 1.122 2.468.673.898 2.243-1.57 1.57.897 1.122 0 3.365-.596 1.489-.994 21.1-1.096 35.146"
+        stroke="#648BD8"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M46.876 83.427s-.516 6.045 7.223 5.552c11.2-.712 9.218-9.345 31.54-21.655-.786-2.708-2.447-4.744-2.447-4.744s-11.068 3.11-22.584 8.046c-6.766 2.9-13.395 6.352-13.732 12.801M104.46 91.057l.941-5.372-8.884-11.43-5.037 5.372-1.74 7.834a.321.321 0 0 0 .108.32c.965.8 6.5 5.013 14.347 3.544a.332.332 0 0 0 .264-.268"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M93.942 79.387s-4.533-2.853-2.432-6.855c1.623-3.09 4.513 1.133 4.513 1.133s.52-3.642 3.121-3.642c.52-1.04 1.561-4.162 1.561-4.162s11.445 2.601 13.526 3.121c0 5.203-2.304 19.424-7.84 19.861-8.892.703-12.449-9.456-12.449-9.456"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M113.874 73.446c2.601-2.081 3.47-9.722 3.47-9.722s-2.479-.49-6.64-2.05c-4.683-2.081-12.798-4.747-17.48.976-9.668 3.223-2.05 19.823-2.05 19.823l2.713-3.021s-3.935-3.287-2.08-6.243c2.17-3.462 3.92 1.073 3.92 1.073s.637-2.387 3.581-3.342c.355-.71 1.036-2.674 1.432-3.85a1.073 1.073 0 0 1 1.263-.704c2.4.558 8.677 2.019 11.356 2.662.522.125.871.615.82 1.15l-.305 3.248z"
+        fill="#520038"
+      />
+      <path
+        d="M104.977 76.064c-.103.61-.582 1.038-1.07.956-.489-.083-.801-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.644.698 1.254M112.132 77.694c-.103.61-.582 1.038-1.07.956-.488-.083-.8-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.643.698 1.254"
+        fill="#552950"
+      />
+      <path
+        stroke="#DB836E"
+        stroke-width="1.118"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M110.13 74.84l-.896 1.61-.298 4.357h-2.228"
+      />
+      <path
+        d="M110.846 74.481s1.79-.716 2.506.537"
+        stroke="#5C2552"
+        stroke-width="1.118"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M92.386 74.282s.477-1.114 1.113-.716c.637.398 1.274 1.433.558 1.99-.717.556.159 1.67.159 1.67"
+        stroke="#DB836E"
+        stroke-width="1.118"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.287 72.93s1.83 1.113 4.137.954"
+        stroke="#5C2552"
+        stroke-width="1.118"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.685 81.762s2.227 1.193 4.376 1.193M104.64 84.308s.954.398 1.511.318M94.693 81.205s2.308 7.4 10.424 7.639"
+        stroke="#DB836E"
+        stroke-width="1.118"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M81.45 89.384s.45 5.647-4.935 12.787M69 82.654s-.726 9.282-8.204 14.206"
+        stroke="#E4EBF7"
+        stroke-width="1.101"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M129.405 122.865s-5.272 7.403-9.422 10.768"
+        stroke="#E4EBF7"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M119.306 107.329s.452 4.366-2.127 32.062"
+        stroke="#E4EBF7"
+        stroke-width="1.101"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M150.028 151.232h-49.837a1.01 1.01 0 0 1-1.01-1.01v-31.688c0-.557.452-1.01 1.01-1.01h49.837c.558 0 1.01.453 1.01 1.01v31.688a1.01 1.01 0 0 1-1.01 1.01"
+        fill="#F2D7AD"
+      />
+      <path
+        d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92"
+        fill="#F4D19D"
+      />
+      <path
+        d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092l-7.26 10.371z"
+        fill="#F2D7AD"
+      />
+      <path
+        fill="#CC9B6E"
+        d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"
+      />
+      <path
+        d="M158.298 127.896h-18.669a2.073 2.073 0 0 1-1.659-.83l-7.156-9.541h19.965c.49 0 .95.23 1.244.622l6.69 8.92a.519.519 0 0 1-.415.83"
+        fill="#F4D19D"
+      />
+      <path
+        fill="#CC9B6E"
+        d="M157.847 128.479h-19.384l-7.857-10.475.415-.31 7.7 10.266h19.126zM130.554 150.685l-.032-8.177.519-.002.032 8.177z"
+      />
+      <path
+        fill="#CC9B6E"
+        d="M130.511 139.783l-.08-21.414.519-.002.08 21.414zM111.876 140.932l-.498-.143 1.479-5.167.498.143zM108.437 141.06l-2.679-2.935 2.665-3.434.41.318-2.397 3.089 2.384 2.612zM116.607 141.06l-.383-.35 2.383-2.612-2.397-3.089.41-.318 2.665 3.434z"
+      />
+      <path
+        d="M154.316 131.892l-3.114-1.96.038 3.514-1.043.092c-1.682.115-3.634.23-4.789.23-1.902 0-2.693 2.258 2.23 2.648l-2.645-.596s-2.168 1.317.504 2.3c0 0-1.58 1.217.561 2.58-.584 3.504 5.247 4.058 7.122 3.59 1.876-.47 4.233-2.359 4.487-5.16.28-3.085-.89-5.432-3.35-7.238"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M153.686 133.577s-6.522.47-8.36.372c-1.836-.098-1.904 2.19 2.359 2.264 3.739.15 5.451-.044 5.451-.044"
+        stroke="#DB836E"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M145.16 135.877c-1.85 1.346.561 2.355.561 2.355s3.478.898 6.73.617"
+        stroke="#DB836E"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M151.89 141.71s-6.28.111-6.73-2.132c-.223-1.346.45-1.402.45-1.402M146.114 140.868s-1.103 3.16 5.44 3.533M151.202 129.932v3.477M52.838 89.286c3.533-.337 8.423-1.248 13.582-7.754"
+        stroke="#DB836E"
+        stroke-width="1.051"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M168.567 248.318a6.647 6.647 0 0 1-6.647-6.647v-66.466a6.647 6.647 0 1 1 13.294 0v66.466a6.647 6.647 0 0 1-6.647 6.647"
+        fill="#5BA02E"
+      />
+      <path
+        d="M176.543 247.653a6.647 6.647 0 0 1-6.646-6.647v-33.232a6.647 6.647 0 1 1 13.293 0v33.232a6.647 6.647 0 0 1-6.647 6.647"
+        fill="#92C110"
+      />
+      <path
+        d="M186.443 293.613H158.92a3.187 3.187 0 0 1-3.187-3.187v-46.134a3.187 3.187 0 0 1 3.187-3.187h27.524a3.187 3.187 0 0 1 3.187 3.187v46.134a3.187 3.187 0 0 1-3.187 3.187"
+        fill="#F2D7AD"
+      />
+      <path
+        d="M88.979 89.48s7.776 5.384 16.6 2.842"
+        stroke="#E4EBF7"
+        stroke-width="1.101"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/z_ele/src/views/exception/404/index.vue b/z_ele/src/views/exception/404/index.vue
new file mode 100644
index 0000000..d2b86f4
--- /dev/null
+++ b/z_ele/src/views/exception/404/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <ele-page>
+    <el-result title="404">
+      <template #icon>
+        <div style="width: 250px; height: 295px; margin: 20px 0 10px 0">
+          <icon-svg />
+        </div>
+      </template>
+      <template #sub-title>
+        <ele-text type="placeholder">抱歉, 你访问的页面不存在.</ele-text>
+      </template>
+      <template #extra>
+        <router-link to="/" style="display: inline-flex; text-decoration: none">
+          <el-button type="primary">返回首页</el-button>
+        </router-link>
+      </template>
+    </el-result>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import IconSvg from './components/icon-svg.vue';
+
+  defineOptions({ name: 'Exception404' });
+</script>
diff --git a/z_ele/src/views/exception/500/components/icon-svg.vue b/z_ele/src/views/exception/500/components/icon-svg.vue
new file mode 100644
index 0000000..26cf709
--- /dev/null
+++ b/z_ele/src/views/exception/500/components/icon-svg.vue
@@ -0,0 +1,331 @@
+<template>
+  <svg width="254" height="294" style="width: auto; height: auto">
+    <defs>
+      <path d="M0 .335h253.49v253.49H0z" />
+      <path d="M0 293.665h253.49V.401H0z" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(0 .067)">
+        <mask fill="#fff" />
+        <path
+          d="M0 128.134v-2.11C0 56.608 56.273.334 125.69.334h2.11c69.416 0 125.69 56.274 125.69 125.69v2.11c0 69.417-56.274 125.69-125.69 125.69h-2.11C56.273 253.824 0 197.551 0 128.134"
+          fill="#E4EBF7"
+          mask="url(#b)"
+        />
+      </g>
+      <path
+        d="M39.989 132.108a8.332 8.332 0 1 1-16.581-1.671 8.332 8.332 0 0 1 16.58 1.671"
+        fill="#FFF"
+      />
+      <path
+        d="M37.19 135.59l10.553 5.983M48.665 147.884l-12.734 10.861"
+        stroke="#FFF"
+        strokeWidth="2"
+      />
+      <path
+        d="M40.11 160.816a5.706 5.706 0 1 1-11.354-1.145 5.706 5.706 0 0 1 11.354 1.145M57.943 144.6a5.747 5.747 0 1 1-11.436-1.152 5.747 5.747 0 0 1 11.436 1.153M99.656 27.434l30.024-.013a4.619 4.619 0 1 0-.004-9.238l-30.024.013a4.62 4.62 0 0 0 .004 9.238M111.14 45.896l30.023-.013a4.62 4.62 0 1 0-.004-9.238l-30.024.013a4.619 4.619 0 1 0 .004 9.238"
+        fill="#FFF"
+      />
+      <path
+        d="M113.53 27.421v-.002l15.89-.007a4.619 4.619 0 1 0 .005 9.238l-15.892.007v-.002a4.618 4.618 0 0 0-.004-9.234M150.167 70.091h-3.979a4.789 4.789 0 0 1-4.774-4.775 4.788 4.788 0 0 1 4.774-4.774h3.979a4.789 4.789 0 0 1 4.775 4.774 4.789 4.789 0 0 1-4.775 4.775"
+        fill="#FFF"
+      />
+      <path
+        d="M171.687 30.234c0-16.392 13.289-29.68 29.681-29.68 16.392 0 29.68 13.288 29.68 29.68 0 16.393-13.288 29.681-29.68 29.681s-29.68-13.288-29.68-29.68"
+        fill="#FF603B"
+      />
+      <path
+        d="M203.557 19.435l-.676 15.035a1.514 1.514 0 0 1-3.026 0l-.675-15.035a2.19 2.19 0 1 1 4.377 0m-.264 19.378c.513.477.77 1.1.77 1.87s-.257 1.393-.77 1.907c-.55.476-1.21.733-1.943.733a2.545 2.545 0 0 1-1.87-.77c-.55-.514-.806-1.136-.806-1.87 0-.77.256-1.393.806-1.87.513-.513 1.137-.733 1.87-.733.77 0 1.43.22 1.943.733"
+        fill="#FFF"
+      />
+      <path
+        d="M119.3 133.275c4.426-.598 3.612-1.204 4.079-4.778.675-5.18-3.108-16.935-8.262-25.118-1.088-10.72-12.598-11.24-12.598-11.24s4.312 4.895 4.196 16.199c1.398 5.243.804 14.45.804 14.45s5.255 11.369 11.78 10.487"
+        fill="#FFB594"
+      />
+      <path
+        d="M100.944 91.61s1.463-.583 3.211.582c8.08 1.398 10.368 6.706 11.3 11.368 1.864 1.282 1.864 2.33 1.864 3.496.365.777 1.515 3.03 1.515 3.03s-7.225 1.748-10.954 6.758c-1.399-6.41-6.936-25.235-6.936-25.235"
+        fill="#FFF"
+      />
+      <path
+        d="M94.008 90.5l1.019-5.815-9.23-11.874-5.233 5.581-2.593 9.863s8.39 5.128 16.037 2.246"
+        fill="#FFB594"
+      />
+      <path
+        d="M82.931 78.216s-4.557-2.868-2.445-6.892c1.632-3.107 4.537 1.139 4.537 1.139s.524-3.662 3.139-3.662c.523-1.046 1.569-4.184 1.569-4.184s11.507 2.615 13.6 3.138c-.001 5.23-2.317 19.529-7.884 19.969-8.94.706-12.516-9.508-12.516-9.508"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M102.971 72.243c2.616-2.093 3.489-9.775 3.489-9.775s-2.492-.492-6.676-2.062c-4.708-2.092-12.867-4.771-17.575.982-9.54 4.41-2.062 19.93-2.062 19.93l2.729-3.037s-3.956-3.304-2.092-6.277c2.183-3.48 3.943 1.08 3.943 1.08s.64-2.4 3.6-3.36c.356-.714 1.04-2.69 1.44-3.872a1.08 1.08 0 0 1 1.27-.707c2.41.56 8.723 2.03 11.417 2.676.524.126.876.619.825 1.156l-.308 3.266z"
+        fill="#520038"
+      />
+      <path
+        d="M101.22 76.514c-.104.613-.585 1.044-1.076.96-.49-.082-.805-.646-.702-1.26.104-.613.585-1.044 1.076-.961.491.083.805.647.702 1.26M94.26 75.074c-.104.613-.585 1.044-1.076.96-.49-.082-.805-.646-.702-1.26.104-.613.585-1.044 1.076-.96.491.082.805.646.702 1.26"
+        fill="#552950"
+      />
+      <path
+        stroke="#DB836E"
+        strokeWidth="1.063"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M99.206 73.644l-.9 1.62-.3 4.38h-2.24"
+      />
+      <path
+        d="M99.926 73.284s1.8-.72 2.52.54"
+        stroke="#5C2552"
+        strokeWidth="1.117"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M81.367 73.084s.48-1.12 1.12-.72c.64.4 1.28 1.44.56 2s.16 1.68.16 1.68"
+        stroke="#DB836E"
+        strokeWidth="1.117"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M92.326 71.724s1.84 1.12 4.16.96"
+        stroke="#5C2552"
+        strokeWidth="1.117"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M92.726 80.604s2.24 1.2 4.4 1.2M93.686 83.164s.96.4 1.52.32M83.687 80.044s1.786 6.547 9.262 7.954"
+        stroke="#DB836E"
+        strokeWidth="1.063"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M95.548 91.663s-1.068 2.821-8.298 2.105c-7.23-.717-10.29-5.044-10.29-5.044"
+        stroke="#E4EBF7"
+        strokeWidth="1.136"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.126 87.478s6.526 4.972 16.47 2.486c0 0 9.577 1.02 11.536 5.322 5.36 11.77.543 36.835 0 39.962 3.496 4.055-.466 8.483-.466 8.483-15.624-3.548-35.81-.6-35.81-.6-4.849-3.546-1.223-9.044-1.223-9.044L62.38 110.32c-2.485-15.227.833-19.803 3.549-20.743 3.03-1.049 8.04-1.282 8.04-1.282.496-.058 1.08-.076 1.37-.233 2.36-1.282 2.787-.583 2.787-.583"
+        fill="#FFF"
+      />
+      <path
+        d="M65.828 89.81s-6.875.465-7.59 8.156c-.466 8.857 3.03 10.954 3.03 10.954s6.075 22.102 16.796 22.957c8.39-2.176 4.758-6.702 4.661-11.42-.233-11.304-7.108-16.897-7.108-16.897s-4.212-13.75-9.789-13.75"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M71.716 124.225s.855 11.264 9.828 6.486c4.765-2.536 7.581-13.828 9.789-22.568 1.456-5.768 2.58-12.197 2.58-12.197l-4.973-1.709s-2.408 5.516-7.769 12.275c-4.335 5.467-9.144 11.11-9.455 17.713"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M108.463 105.191s1.747 2.724-2.331 30.535c2.376 2.216 1.053 6.012-.233 7.51"
+        stroke="#E4EBF7"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M123.262 131.527s-.427 2.732-11.77 1.981c-15.187-1.006-25.326-3.25-25.326-3.25l.933-5.8s.723.215 9.71-.068c11.887-.373 18.714-6.07 24.964-1.022 4.039 3.263 1.489 8.16 1.489 8.16"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M70.24 90.974s-5.593-4.739-11.054 2.68c-3.318 7.223.517 15.284 2.664 19.578-.31 3.729 2.33 4.311 2.33 4.311s.108.895 1.516 2.68c4.078-7.03 6.72-9.166 13.711-12.546-.328-.656-1.877-3.265-1.825-3.767.175-1.69-1.282-2.623-1.282-2.623s-.286-.156-1.165-2.738c-.788-2.313-2.036-5.177-4.895-7.575"
+        fill="#FFF"
+      />
+      <path
+        d="M90.232 288.027s4.855 2.308 8.313 1.155c3.188-1.063 5.12.755 8.002 1.331 2.881.577 7.769 1.243 13.207-1.424-.117-6.228-7.786-4.499-13.518-7.588-2.895-1.56-4.276-5.336-4.066-9.944H91.544s-1.573 11.89-1.312 16.47"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M90.207 287.833s2.745 1.437 7.639.738c3.456-.494 3.223.66 7.418 1.282 4.195.621 13.092-.194 14.334-1.126.466 1.242-.388 2.33-.388 2.33s-1.709.682-5.438.932c-2.295.154-8.098.276-10.14-.621-2.02-1.554-4.894-1.515-6.06-.234-4.427 1.075-7.184-.31-7.184-.31l-.181-2.991z"
+        fill="#2B0849"
+      />
+      <path
+        d="M98.429 272.257h3.496s-.117 7.574 5.127 9.671c-5.244.7-9.672-2.602-8.623-9.671"
+        fill="#A4AABA"
+      />
+      <path
+        d="M44.425 272.046s-2.208 7.774-4.702 12.899c-1.884 3.874-4.428 7.854 5.729 7.854 6.97 0 9.385-.503 7.782-6.917-1.604-6.415.279-13.836.279-13.836h-9.088z"
+        fill="#CBD1D1"
+      />
+      <path
+        d="M38.066 290.277s2.198 1.225 6.954 1.225c6.376 0 8.646-1.73 8.646-1.73s.63 1.168-.649 2.27c-1.04.897-3.77 1.668-7.745 1.621-4.347-.05-6.115-.593-7.062-1.224-.864-.577-.72-1.657-.144-2.162"
+        fill="#2B0849"
+      />
+      <path
+        d="M45.344 274.041s.035 1.592-.329 3.07c-.365 1.49-1.13 3.255-1.184 4.34-.061 1.206 4.755 1.657 5.403.036.65-1.622 1.357-6.737 2.006-7.602.648-.865-5.14-2.222-5.896.156"
+        fill="#A4AABA"
+      />
+      <path
+        d="M89.476 277.57l13.899.095s1.349-56.643 1.925-66.909c.576-10.267 3.923-45.052 1.042-65.585l-13.037-.669-23.737.81s-.452 4.12-1.243 10.365c-.065.515-.708.874-.777 1.417-.078.608.439 1.407.332 2.044-2.455 14.627-5.797 32.736-8.256 46.837-.121.693-1.282 1.048-1.515 2.796-.042.314.22 1.584.116 1.865-7.14 19.473-12.202 52.601-15.66 67.19l15.176-.015s2.282-10.145 4.185-18.871c2.922-13.389 24.012-88.32 24.012-88.32l3.133-.954-.158 48.568s-.233 1.282.35 2.098c.583.815-.581 1.167-.408 2.331l.408 1.864s-.466 7.458-.932 12.352c-.467 4.895 1.145 40.69 1.145 40.69"
+        fill="#7BB2F9"
+      />
+      <path
+        d="M64.57 218.881c1.197.099 4.195-2.097 7.225-5.127M96.024 222.534s2.881-1.152 6.34-4.034"
+        stroke="#648BD8"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.973 219.373s2.882-1.153 6.34-4.034"
+        stroke="#648BD8"
+        strokeWidth="1.032"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M63.172 222.144s2.724-.614 6.759-3.496M74.903 146.166c-.281 3.226.31 8.856-4.506 9.478M93.182 144.344s.115 14.557-1.344 15.65c-2.305 1.73-3.107 2.02-3.107 2.02M89.197 144.923s.269 13.144-1.01 25.088M83.525 170.71s6.81-1.051 9.116-1.051M46.026 270.045l-.892 4.538M46.937 263.289l-.815 4.157M62.725 202.503c-.33 1.618-.102 1.904-.449 3.438 0 0-2.756 1.903-2.29 3.923.466 2.02-.31 3.424-4.505 17.252-1.762 5.807-4.233 18.922-6.165 28.278-.03.144-.521 2.646-1.14 5.8M64.158 194.136c-.295 1.658-.6 3.31-.917 4.938M71.33 146.787l-1.244 10.877s-1.14.155-.519 2.33c.117 1.399-2.778 16.39-5.382 31.615M44.242 273.727H58.07"
+        stroke="#648BD8"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.18 142.117c-3.028-.489-18.825-2.744-36.219.2a.625.625 0 0 0-.518.644c.063 1.307.044 2.343.015 2.995a.617.617 0 0 0 .716.636c3.303-.534 17.037-2.412 35.664-.266.347.04.66-.214.692-.56.124-1.347.16-2.425.17-3.029a.616.616 0 0 0-.52-.62"
+        fill="#192064"
+      />
+      <path
+        d="M96.398 145.264l.003-5.102a.843.843 0 0 0-.809-.847 114.104 114.104 0 0 0-8.141-.014.85.85 0 0 0-.82.847l-.003 5.097c0 .476.388.857.864.845 2.478-.064 5.166-.067 8.03.017a.848.848 0 0 0 .876-.843"
+        fill="#FFF"
+      />
+      <path
+        d="M95.239 144.296l.002-3.195a.667.667 0 0 0-.643-.672c-1.9-.061-3.941-.073-6.094-.01a.675.675 0 0 0-.654.672l-.002 3.192c0 .376.305.677.68.669 1.859-.042 3.874-.043 6.02.012.376.01.69-.291.691-.668"
+        fill="#192064"
+      />
+      <path
+        d="M90.102 273.522h12.819M91.216 269.761c.006 3.519-.072 5.55 0 6.292M90.923 263.474c-.009 1.599-.016 2.558-.016 4.505M90.44 170.404l.932 46.38s.7 1.631-.233 2.796c-.932 1.166 2.564.7.932 2.33-1.63 1.633.933 1.166 0 3.497-.618 1.546-1.031 21.921-1.138 36.513"
+        stroke="#648BD8"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M73.736 98.665l2.214 4.312s2.098.816 1.865 2.68l.816 2.214M64.297 116.611c.233-.932 2.176-7.147 12.585-10.488M77.598 90.042s7.691 6.137 16.547 2.72"
+        stroke="#E4EBF7"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M91.974 86.954s5.476-.816 7.574-4.545c1.297-.345.72 2.212-.33 3.671-.7.971-1.01 1.554-1.01 1.554s.194.31.155.816c-.053.697-.175.653-.272 1.048-.081.335.108.657 0 1.049-.046.17-.198.5-.382.878-.12.249-.072.687-.2.948-.231.469-1.562 1.87-2.622 2.855-3.826 3.554-5.018 1.644-6.001-.408-.894-1.865-.661-5.127-.874-6.875-.35-2.914-2.622-3.03-1.923-4.429.343-.685 2.87.69 3.263 1.748.757 2.04 2.952 1.807 2.622 1.69"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M99.8 82.429c-.465.077-.35.272-.97 1.243-.622.971-4.817 2.932-6.39 3.224-2.589.48-2.278-1.56-4.254-2.855-1.69-1.107-3.562-.638-1.398 1.398.99.932.932 1.107 1.398 3.205.335 1.506-.64 3.67.7 5.593"
+        stroke="#DB836E"
+        strokeWidth=".774"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M79.543 108.673c-2.1 2.926-4.266 6.175-5.557 8.762"
+        stroke="#E59788"
+        strokeWidth=".774"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M87.72 124.768s-2.098-1.942-5.127-2.719c-3.03-.777-3.574-.155-5.516.078-1.942.233-3.885-.932-3.652.7.233 1.63 5.05 1.01 5.206 2.097.155 1.087-6.37 2.796-8.313 2.175-.777.777.466 1.864 2.02 2.175.233 1.554 2.253 1.554 2.253 1.554s.699 1.01 2.641 1.088c2.486 1.32 8.934-.7 10.954-1.554 2.02-.855-.466-5.594-.466-5.594"
+        fill="#FFC6A0"
+      />
+      <path
+        d="M73.425 122.826s.66 1.127 3.167 1.418c2.315.27 2.563.583 2.563.583s-2.545 2.894-9.07 2.272M72.416 129.274s3.826.097 4.933-.718M74.98 130.75s1.961.136 3.36-.505M77.232 131.916s1.748.019 2.914-.505M73.328 122.321s-.595-1.032 1.262-.427c1.671.544 2.833.055 5.128.155 1.389.061 3.067-.297 3.982.15 1.606.784 3.632 2.181 3.632 2.181s10.526 1.204 19.033-1.127M78.864 108.104s-8.39 2.758-13.168 12.12"
+        stroke="#E59788"
+        strokeWidth=".774"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M109.278 112.533s3.38-3.613 7.575-4.662"
+        stroke="#E4EBF7"
+        strokeWidth="1.085"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M107.375 123.006s9.697-2.745 11.445-.88"
+        stroke="#E59788"
+        strokeWidth=".774"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M194.605 83.656l3.971-3.886M187.166 90.933l3.736-3.655M191.752 84.207l-4.462-4.56M198.453 91.057l-4.133-4.225M129.256 163.074l3.718-3.718M122.291 170.039l3.498-3.498M126.561 163.626l-4.27-4.27M132.975 170.039l-3.955-3.955"
+        stroke="#BFCDDD"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M190.156 211.779h-1.604a4.023 4.023 0 0 1-4.011-4.011V175.68a4.023 4.023 0 0 1 4.01-4.01h1.605a4.023 4.023 0 0 1 4.011 4.01v32.088a4.023 4.023 0 0 1-4.01 4.01"
+        fill="#A3B4C6"
+      />
+      <path
+        d="M237.824 212.977a4.813 4.813 0 0 1-4.813 4.813h-86.636a4.813 4.813 0 0 1 0-9.626h86.636a4.813 4.813 0 0 1 4.813 4.813"
+        fill="#A3B4C6"
+      />
+      <mask fill="#fff" />
+      <path
+        fill="#A3B4C6"
+        mask="url(#d)"
+        d="M154.098 190.096h70.513v-84.617h-70.513z"
+      />
+      <path
+        d="M224.928 190.096H153.78a3.219 3.219 0 0 1-3.208-3.209V167.92a3.219 3.219 0 0 1 3.208-3.21h71.148a3.219 3.219 0 0 1 3.209 3.21v18.967a3.219 3.219 0 0 1-3.21 3.209M224.928 130.832H153.78a3.218 3.218 0 0 1-3.208-3.208v-18.968a3.219 3.219 0 0 1 3.208-3.209h71.148a3.219 3.219 0 0 1 3.209 3.21v18.967a3.218 3.218 0 0 1-3.21 3.208"
+        fill="#BFCDDD"
+        mask="url(#d)"
+      />
+      <path
+        d="M159.563 120.546a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M166.98 120.546a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M174.397 120.546a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M222.539 120.546h-22.461a.802.802 0 0 1-.802-.802v-3.208c0-.443.359-.803.802-.803h22.46c.444 0 .803.36.803.803v3.208c0 .443-.36.802-.802.802"
+        fill="#FFF"
+        mask="url(#d)"
+      />
+      <path
+        d="M224.928 160.464H153.78a3.218 3.218 0 0 1-3.208-3.209v-18.967a3.219 3.219 0 0 1 3.208-3.209h71.148a3.219 3.219 0 0 1 3.209 3.209v18.967a3.218 3.218 0 0 1-3.21 3.209"
+        fill="#BFCDDD"
+        mask="url(#d)"
+      />
+      <path
+        d="M173.455 130.832h49.301M164.984 130.832h6.089M155.952 130.832h6.75M173.837 160.613h49.3M165.365 160.613h6.089M155.57 160.613h6.751"
+        stroke="#7C90A5"
+        strokeWidth="1.124"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        mask="url(#d)"
+      />
+      <path
+        d="M159.563 151.038a2.407 2.407 0 1 1 0-4.814 2.407 2.407 0 0 1 0 4.814M166.98 151.038a2.407 2.407 0 1 1 0-4.814 2.407 2.407 0 0 1 0 4.814M174.397 151.038a2.407 2.407 0 1 1 .001-4.814 2.407 2.407 0 0 1 0 4.814M222.539 151.038h-22.461a.802.802 0 0 1-.802-.802v-3.209c0-.443.359-.802.802-.802h22.46c.444 0 .803.36.803.802v3.209c0 .443-.36.802-.802.802M159.563 179.987a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M166.98 179.987a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M174.397 179.987a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813M222.539 179.987h-22.461a.802.802 0 0 1-.802-.802v-3.209c0-.443.359-.802.802-.802h22.46c.444 0 .803.36.803.802v3.209c0 .443-.36.802-.802.802"
+        fill="#FFF"
+        mask="url(#d)"
+      />
+      <path
+        d="M203.04 221.108h-27.372a2.413 2.413 0 0 1-2.406-2.407v-11.448a2.414 2.414 0 0 1 2.406-2.407h27.372a2.414 2.414 0 0 1 2.407 2.407V218.7a2.413 2.413 0 0 1-2.407 2.407"
+        fill="#BFCDDD"
+        mask="url(#d)"
+      />
+      <path
+        d="M177.259 207.217v11.52M201.05 207.217v11.52"
+        stroke="#A3B4C6"
+        strokeWidth="1.124"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        mask="url(#d)"
+      />
+      <path
+        d="M162.873 267.894a9.422 9.422 0 0 1-9.422-9.422v-14.82a9.423 9.423 0 0 1 18.845 0v14.82a9.423 9.423 0 0 1-9.423 9.422"
+        fill="#5BA02E"
+        mask="url(#d)"
+      />
+      <path
+        d="M171.22 267.83a9.422 9.422 0 0 1-9.422-9.423v-3.438a9.423 9.423 0 0 1 18.845 0v3.438a9.423 9.423 0 0 1-9.422 9.423"
+        fill="#92C110"
+        mask="url(#d)"
+      />
+      <path
+        d="M181.31 293.666h-27.712a3.209 3.209 0 0 1-3.209-3.21V269.79a3.209 3.209 0 0 1 3.209-3.21h27.711a3.209 3.209 0 0 1 3.209 3.21v20.668a3.209 3.209 0 0 1-3.209 3.209"
+        fill="#F2D7AD"
+        mask="url(#d)"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/z_ele/src/views/exception/500/index.vue b/z_ele/src/views/exception/500/index.vue
new file mode 100644
index 0000000..56b06f2
--- /dev/null
+++ b/z_ele/src/views/exception/500/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <ele-page>
+    <el-result title="500">
+      <template #icon>
+        <div style="width: 250px; height: 295px; margin: 20px 0 10px 0">
+          <icon-svg />
+        </div>
+      </template>
+      <template #sub-title>
+        <ele-text type="placeholder">抱歉, 服务器出错了.</ele-text>
+      </template>
+      <template #extra>
+        <router-link to="/" style="display: inline-flex; text-decoration: none">
+          <el-button type="primary">返回首页</el-button>
+        </router-link>
+      </template>
+    </el-result>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import IconSvg from './components/icon-svg.vue';
+
+  defineOptions({ name: 'Exception500' });
+</script>
diff --git a/z_ele/src/views/extension/avatar/components/option-item.vue b/z_ele/src/views/extension/avatar/components/option-item.vue
new file mode 100644
index 0000000..7c21029
--- /dev/null
+++ b/z_ele/src/views/extension/avatar/components/option-item.vue
@@ -0,0 +1,72 @@
+<template>
+  <div :class="['option-item', { 'is-responsive': responsive }]">
+    <div
+      v-if="label"
+      class="option-item-label"
+      :style="[{ width: labelWidth }, labelStyle || {}]"
+    >
+      {{ label }}
+    </div>
+    <div class="option-item-body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+
+  withDefaults(
+    defineProps<{
+      label?: string;
+      labelWidth?: string;
+      labelStyle?: CSSProperties;
+      bodyStyle?: CSSProperties;
+      responsive?: boolean;
+    }>(),
+    { responsive: true }
+  );
+</script>
+
+<style lang="scss" scoped>
+  .option-item {
+    display: flex;
+    align-items: center;
+
+    .option-item-label {
+      text-align: right;
+
+      &::after {
+        content: ':';
+      }
+
+      & + .option-item-body {
+        padding-left: 12px;
+      }
+    }
+
+    .option-item-body {
+      flex: 1;
+      word-break: break-all;
+    }
+
+    & + .option-item {
+      margin-top: 24px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .option-item.is-responsive {
+      display: block;
+
+      .option-item-label {
+        text-align: left;
+        margin-bottom: 8px;
+
+        & + .option-item-body {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/avatar/index.vue b/z_ele/src/views/extension/avatar/index.vue
new file mode 100644
index 0000000..033b2ec
--- /dev/null
+++ b/z_ele/src/views/extension/avatar/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <ele-avatar-group
+        :data="data"
+        :max-count="4"
+        :overflow-popover="false"
+        :item-style="{ borderWidth: '2px' }"
+      />
+    </ele-card>
+    <ele-card header="超出显示">
+      <ele-avatar-group
+        :data="data"
+        :max-count="4"
+        :item-style="{ borderWidth: '2px' }"
+      />
+    </ele-card>
+    <ele-card header="鼠标移入展开">
+      <ele-avatar-group
+        hover-open
+        :data="data"
+        :item-style="{ borderWidth: '2px' }"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  defineOptions({ name: 'ExtensionAvatar' });
+
+  /** 数据 */
+  const data = ref([
+    {
+      label: 'SunSmile',
+      value:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+    },
+    {
+      label: '你的名字很好听',
+      value:
+        'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+    },
+    {
+      label: '全村人的希望',
+      value:
+        'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+    },
+    {
+      label: 'Jasmine',
+      value:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+    },
+    {
+      label: '酷酷的大叔',
+      value:
+        'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+    },
+    {
+      label: '管理员',
+      value: 'https://cdn.eleadmin.com/20200610/avatar.jpg'
+    }
+  ]);
+</script>
diff --git a/z_ele/src/views/extension/bar-code/index.vue b/z_ele/src/views/extension/bar-code/index.vue
new file mode 100644
index 0000000..f200d67
--- /dev/null
+++ b/z_ele/src/views/extension/bar-code/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <ele-page :multi-card="true">
+    <ele-card header="基础用法">
+      <el-form label-width="88px" style="max-width: 340px" @submit.prevent="">
+        <div style="text-align: center; margin-bottom: 8px">
+          <ele-bar-code :value="text" :tag="tag" :options="options" />
+        </div>
+        <el-form-item label="条码类型">
+          <el-radio-group
+            :model-value="options.format"
+            @update:modelValue="updateFormat"
+          >
+            <el-radio value="CODE128" label="CODE128" />
+            <el-radio value="EAN13" label="EAN13" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="渲染方式">
+          <el-radio-group v-model="tag">
+            <el-radio value="img" label="img" />
+            <el-radio value="canvas" label="canvas" />
+            <el-radio value="svg" label="svg" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="条码文本">
+          <el-select
+            v-if="options.format === 'EAN13'"
+            v-model="text"
+            class="ele-fluid"
+            :popper-options="{ strategy: 'fixed' }"
+          >
+            <el-option value="1234567890128" label="1234567890128" />
+            <el-option value="6971872201359" label="6971872201359" />
+            <el-option value="6954531770199" label="6954531770199" />
+            <el-option value="6923644240318" label="6923644240318" />
+          </el-select>
+          <el-input v-else v-model="text" :maxlength="20" />
+        </el-form-item>
+        <el-form-item label="高度">
+          <el-slider v-model="options.height" :min="40" :max="160" :step="10" />
+        </el-form-item>
+        <el-form-item label="宽度">
+          <el-slider v-model="options.width" :min="1" :max="6" />
+        </el-form-item>
+        <el-form-item label="间距">
+          <el-slider v-model="options.margin" :min="0" :max="40" />
+        </el-form-item>
+        <el-form-item label="显示文本">
+          <el-switch v-model="options.displayValue" size="small" />
+        </el-form-item>
+        <el-form-item v-if="options.displayValue" label="文本大小">
+          <el-slider v-model="options.fontSize" :min="12" :max="36" :step="2" />
+        </el-form-item>
+        <el-form-item
+          v-if="options.displayValue && options.format === 'CODE128'"
+          label="文本位置"
+        >
+          <el-radio-group v-model="options.textPosition">
+            <el-radio value="bottom" label="bottom" />
+            <el-radio value="top" label="top" />
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick } from 'vue';
+  import type { Options } from 'jsbarcode';
+  import type { BarCodeTag } from 'ele-admin-plus/es/ele-bar-code/types';
+
+  defineOptions({ name: 'ExtensionBarCode' });
+
+  /** 条码内容 */
+  const text = ref('1234567890');
+
+  /** 渲染方式 */
+  const tag = ref<BarCodeTag>('img');
+
+  /** 参数配置 */
+  const options = reactive<Options>({
+    height: 60,
+    width: 2,
+    margin: 2,
+    displayValue: true,
+    textPosition: 'bottom',
+    fontSize: 14,
+    format: 'CODE128'
+  });
+
+  /** 切换条码类型 */
+  const updateFormat = (value: string) => {
+    if (value === 'EAN13') {
+      text.value = '1234567890128';
+      nextTick(() => {
+        options.format = value;
+      });
+    } else {
+      options.format = value;
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/check-card/index.vue b/z_ele/src/views/extension/check-card/index.vue
new file mode 100644
index 0000000..ed4dc66
--- /dev/null
+++ b/z_ele/src/views/extension/check-card/index.vue
@@ -0,0 +1,302 @@
+<template>
+  <ele-page>
+    <ele-card header="基本用法">
+      <ele-check-card
+        multiple
+        v-model="checked"
+        :items="items"
+        :row="{ gutter: 12 }"
+      >
+        <template #item="{ item }">
+          <div style="display: flex; padding: 18px 12px; height: 87px">
+            <el-avatar :size="46" shape="square" :src="item?.avatar" />
+            <div style="flex: 1; overflow: hidden; padding-left: 12px">
+              <ele-text size="md">{{ item?.title }}</ele-text>
+              <ele-ellipsis size="sm" type="secondary" :max-line="3">
+                {{ item?.content }}
+              </ele-ellipsis>
+            </div>
+          </div>
+        </template>
+      </ele-check-card>
+      <div>已选中：{{ JSON.stringify(checked) }}</div>
+    </ele-card>
+    <ele-card
+      header="单选模式"
+      :collapsable="true"
+      :body-style="{ padding: 0 }"
+    >
+      <div style="padding: 20px">
+        <ele-check-card v-model="checked2" :items="items" :row="{ gutter: 12 }">
+          <template #item="{ item }">
+            <div style="display: flex; padding: 18px 12px; height: 87px">
+              <el-avatar :size="46" shape="square" :src="item?.avatar" />
+              <div style="flex: 1; overflow: hidden; padding-left: 12px">
+                <ele-text size="md">{{ item?.title }}</ele-text>
+                <ele-ellipsis size="sm" type="secondary" :max-line="3">
+                  {{ item?.content }}
+                </ele-ellipsis>
+              </div>
+            </div>
+          </template>
+        </ele-check-card>
+        <div>已选中：{{ checked2 }}</div>
+      </div>
+    </ele-card>
+    <ele-card
+      header="禁用"
+      collapsable="header"
+      :header-style="{ cursor: 'pointer', userSelect: 'none' }"
+      :body-style="{ padding: 0 }"
+    >
+      <div style="padding: 20px">
+        <ele-check-card
+          :items="items2"
+          v-model="checked2"
+          :disabled="disabled"
+          :row="{ gutter: 12 }"
+        >
+          <template #item="{ item }">
+            <div style="display: flex; padding: 18px 12px; height: 87px">
+              <el-avatar :size="46" shape="square" :src="item?.avatar" />
+              <div style="flex: 1; overflow: hidden; padding-left: 12px">
+                <ele-text size="md">{{ item?.title }}</ele-text>
+                <ele-ellipsis size="sm" type="secondary" :max-line="3">
+                  {{ item?.content }}
+                </ele-ellipsis>
+              </div>
+            </div>
+          </template>
+        </ele-check-card>
+        <div style="display: flex; align-items: center">
+          <div>整体禁用：</div>
+          <el-switch v-model="disabled" size="small" />
+        </div>
+      </div>
+    </ele-card>
+    <ele-card
+      header="标签风格"
+      collapsable="header"
+      :header-style="{ cursor: 'pointer', userSelect: 'none' }"
+      :body-style="{ padding: 0 }"
+      :collapse-icon-style="{ order: -1, margin: '1px 6px 0 -10px' }"
+    >
+      <div style="padding: 28px 20px">
+        <div style="display: flex">
+          <div style="flex-shrink: 0">个人爱好:</div>
+          <ele-check-card
+            :arrow="false"
+            :bordered="false"
+            v-model="checked3"
+            :items="items4"
+            class="check-tag"
+          />
+        </div>
+        <div style="display: flex; margin-top: 12px">
+          <div style="flex-shrink: 0">多选模式:</div>
+          <ele-check-card
+            multiple
+            :arrow="false"
+            :bordered="false"
+            v-model="checked4"
+            :items="items4"
+            class="check-tag"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <div>卡片底部</div>
+      </template>
+    </ele-card>
+    <ele-card header="自定义内容">
+      <div style="display: flex">
+        <div style="flex-shrink: 0; margin-top: 20px">支付方式:&emsp;</div>
+        <ele-check-card
+          v-model="checked5"
+          :items="items5"
+          :item-style="{ margin: '8px', padding: '8px 12px', display: 'flex' }"
+          style="display: flex; flex-wrap: wrap"
+        >
+          <template #item="{ item }">
+            <div
+              :style="{
+                width: '98px',
+                height: '28px',
+                background: `center / contain no-repeat url(${item?.img})`
+              }"
+              class="demo-card-pay-img"
+            ></div>
+          </template>
+        </ele-check-card>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { CheckCardItem } from 'ele-admin-plus/es/ele-check-card/types';
+  import { getDemoCardData } from '@/api/example';
+
+  defineOptions({ name: 'ExtensionCheckCard' });
+
+  /** 卡片选中 */
+  const checked = ref([2]);
+
+  /** 卡片数据 */
+  const items = ref<CheckCardItem[]>([]);
+
+  // 获取卡片数据
+  getDemoCardData()
+    .then((data) => {
+      items.value = data.map((d) => {
+        return {
+          ...d,
+          col: { md: 6, sm: 12, xs: 24, style: { marginBottom: '12px' } }
+        };
+      });
+      items2.value = items.value.map((d) => {
+        return { ...d, disabled: d.value === 2 };
+      });
+    })
+    .catch((e) => {
+      console.error(e);
+    });
+
+  /** 单选选中 */
+  const checked2 = ref();
+
+  /** 有禁用的数据 */
+  const items2 = ref<CheckCardItem[]>([]);
+
+  /** 整体禁用 */
+  const disabled = ref(false);
+
+  /** 标签风格单选 */
+  const checked3 = ref('看电影');
+
+  /** 标签风格多选 */
+  const checked4 = ref(['看电影']);
+
+  /** 个人爱好数据 */
+  const items4 = ref([
+    { value: '看电影' },
+    { value: '听音乐' },
+    { value: '打篮球' },
+    { value: '阅读' }
+  ]);
+
+  /** 支付方式 */
+  const checked5 = ref();
+
+  /** 支付方式数据 */
+  const items5 = ref([
+    {
+      value: 1,
+      img: 'https://gw.alipayobjects.com/mdn/member_frontWeb/afts/img/A*oRlnSYAsgYQAAAAAAAAAAABkARQnAQ'
+    },
+    {
+      value: 2,
+      img: 'https://e.gitee.com/assets/images/wechatpay.png'
+    },
+    {
+      value: 3,
+      img: 'https://cn.unionpay.com/upowhtml/cn/resources/images/header/homepage-logo.png'
+    }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  /* 标签风格 */
+  .check-tag {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    box-sizing: border-box;
+    padding-left: 12px;
+
+    :deep(.ele-check-card) {
+      font-size: 13px;
+      height: 23px;
+      line-height: 23px;
+      padding: 0 8px;
+      margin: 0 8px 8px 0;
+      border-radius: 4px;
+      transition: (color 0.2s, background-color 0.2s);
+
+      &:not(.is-disabled):not(.is-checked):hover {
+        background: var(--el-fill-color-light);
+      }
+
+      &.is-checked {
+        color: #fff;
+        background: var(--el-color-primary);
+      }
+
+      &.is-disabled {
+        background: none;
+        opacity: 1;
+
+        &.is-checked {
+          color: var(--el-disabled-text-color);
+          background: var(--el-disabled-bg-color);
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  /* 支付方式图片适应暗黑主题 */
+  html.dark .demo-card-pay-img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-position-y: -28px !important;
+
+    &::before,
+    &::after {
+      content: '';
+      width: 40px;
+      height: 100%;
+      background: inherit;
+      background-size: auto 28px;
+      background-position: 9px 0;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    &::after {
+      flex: 1;
+      width: 100%;
+      background-position: -30px 0;
+      filter: invert(1);
+    }
+  }
+
+  .ele-check-card-group > .ele-check-card:nth-child(2) .demo-card-pay-img {
+    &::before {
+      width: 32px;
+      background-size: auto 26px;
+      background-position: 0px 1px;
+    }
+
+    &::after {
+      background-size: auto 26px;
+      background-position: -32px 0;
+    }
+  }
+
+  .ele-check-card-group > .ele-check-card:last-child .demo-card-pay-img {
+    &::before {
+      width: 38px;
+      background-size: auto 24px;
+      background-position: 0px 2px;
+    }
+
+    &::after {
+      background-size: auto 24px;
+      background-position: -36px 1px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/dragsort/components/demo-grid.vue b/z_ele/src/views/extension/dragsort/components/demo-grid.vue
new file mode 100644
index 0000000..9613719
--- /dev/null
+++ b/z_ele/src/views/extension/dragsort/components/demo-grid.vue
@@ -0,0 +1,114 @@
+<template>
+  <el-row :gutter="16">
+    <el-col :md="8" :sm="24" :xs="24">
+      <ele-card header="宫格拖拽排序">
+        <vue-draggable
+          v-model="grid"
+          item-key="id"
+          :animation="300"
+          :set-data="() => void 0"
+          class="demo-grid"
+        >
+          <template #item="{ element }">
+            <div class="demo-grid-item">{{ element.name }}</div>
+          </template>
+        </vue-draggable>
+      </ele-card>
+    </el-col>
+    <el-col :md="16" :sm="24" :xs="24">
+      <ele-card header="宫格相互拖拽">
+        <div style="display: flex; align-items: flex-start">
+          <vue-draggable
+            v-model="grid1"
+            item-key="id"
+            :animation="300"
+            group="demoDragGrid"
+            :set-data="() => void 0"
+            class="demo-grid"
+          >
+            <template #item="{ element }">
+              <div class="demo-grid-item">{{ element.name }}</div>
+            </template>
+          </vue-draggable>
+          <vue-draggable
+            v-model="grid2"
+            item-key="id"
+            :animation="300"
+            group="demoDragGrid"
+            :set-data="() => void 0"
+            class="demo-grid"
+            style="margin-left: 12px"
+          >
+            <template #item="{ element }">
+              <div class="demo-grid-item">{{ element.name }}</div>
+            </template>
+          </vue-draggable>
+        </div>
+      </ele-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import VueDraggable from 'vuedraggable';
+
+  /** 数据 */
+  const grid = ref([
+    { id: 1, name: '001' },
+    { id: 2, name: '002' },
+    { id: 3, name: '003' },
+    { id: 4, name: '004' },
+    { id: 5, name: '005' },
+    { id: 6, name: '006' }
+  ]);
+
+  /** 数据1 */
+  const grid1 = ref([
+    { id: 1, name: '001' },
+    { id: 2, name: '002' },
+    { id: 3, name: '003' },
+    { id: 4, name: '004' },
+    { id: 5, name: '005' },
+    { id: 6, name: '006' }
+  ]);
+
+  /** 数据2 */
+  const grid2 = ref([
+    { id: 7, name: '007' },
+    { id: 8, name: '008' },
+    { id: 9, name: '009' },
+    { id: 10, name: '010' },
+    { id: 11, name: '011' },
+    { id: 12, name: '012' }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  .demo-grid {
+    width: 600px;
+    margin: 0 auto;
+    max-width: 100%;
+    min-height: 94px;
+    border-radius: 4px;
+    border: 1px solid hsla(0, 0%, 60%, 0.2);
+    box-sizing: border-box;
+    padding: 8px;
+    display: grid;
+    grid-gap: 8px 8px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .demo-grid-item {
+    color: #fff;
+    background: #1677ff;
+    border-radius: 4px;
+    text-align: center;
+    padding: 28px 0;
+    cursor: move;
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/dragsort/components/demo-list.vue b/z_ele/src/views/extension/dragsort/components/demo-list.vue
new file mode 100644
index 0000000..52666b0
--- /dev/null
+++ b/z_ele/src/views/extension/dragsort/components/demo-list.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-row :gutter="16">
+    <el-col :md="8" :sm="24" :xs="24">
+      <ele-card header="列表拖拽排序">
+        <vue-draggable
+          v-model="list"
+          item-key="id"
+          :animation="300"
+          :set-data="() => void 0"
+          class="demo-list"
+        >
+          <template #item="{ element }">
+            <div class="demo-list-item">{{ element.name }}</div>
+          </template>
+        </vue-draggable>
+      </ele-card>
+    </el-col>
+    <el-col :md="16" :sm="24" :xs="24">
+      <ele-card header="列表相互拖拽">
+        <div style="display: flex; align-items: flex-start">
+          <vue-draggable
+            v-model="list1"
+            item-key="id"
+            :animation="300"
+            group="demoDragList"
+            :set-data="() => void 0"
+            class="demo-list"
+          >
+            <template #item="{ element }">
+              <div class="demo-list-item">{{ element.name }}</div>
+            </template>
+          </vue-draggable>
+          <vue-draggable
+            v-model="list2"
+            item-key="id"
+            :animation="300"
+            group="demoDragList"
+            :set-data="() => void 0"
+            class="demo-list"
+            style="margin-left: 12px"
+          >
+            <template #item="{ element }">
+              <div class="demo-list-item">{{ element.name }}</div>
+            </template>
+          </vue-draggable>
+        </div>
+      </ele-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import VueDraggable from 'vuedraggable';
+
+  /** 列表数据 */
+  const list = ref([
+    { id: 1, name: '项目0000001' },
+    { id: 2, name: '项目0000002' },
+    { id: 3, name: '项目0000003' },
+    { id: 4, name: '项目0000004' },
+    { id: 5, name: '项目0000005' }
+  ]);
+
+  /** 列表1数据 */
+  const list1 = ref([
+    { id: 1, name: '项目0000001' },
+    { id: 2, name: '项目0000002' },
+    { id: 3, name: '项目0000003' },
+    { id: 4, name: '项目0000004' },
+    { id: 5, name: '项目0000005' }
+  ]);
+
+  /** 列表2数据 */
+  const list2 = ref([
+    { id: 6, name: '项目0000006' },
+    { id: 7, name: '项目0000007' },
+    { id: 8, name: '项目0000008' },
+    { id: 9, name: '项目0000009' },
+    { id: 10, name: '项目0000010' }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  .demo-list {
+    width: 214px;
+    margin: 0 auto;
+    max-width: 100%;
+    min-height: 94px;
+    border-radius: 4px;
+    border: 1px solid hsla(0, 0%, 60%, 0.2);
+    box-sizing: border-box;
+    padding: 8px 8px 0 8px;
+  }
+
+  .demo-list-item {
+    color: #fff;
+    background: #1677ff;
+    border-radius: 4px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    cursor: move;
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/dragsort/components/demo-table.vue b/z_ele/src/views/extension/dragsort/components/demo-table.vue
new file mode 100644
index 0000000..7147092
--- /dev/null
+++ b/z_ele/src/views/extension/dragsort/components/demo-table.vue
@@ -0,0 +1,126 @@
+<template>
+  <ele-card header="表格拖拽排序">
+    <el-row :gutter="16">
+      <el-col
+        v-for="(item, index) in taskList"
+        :key="index"
+        :md="8"
+        :sm="24"
+        :xs="24"
+      >
+        <ele-table :border="true" class="demo-table">
+          <thead>
+            <tr>
+              <th style="width: 40px"></th>
+              <th>任务名称</th>
+              <th style="text-align: center; width: 80px">状态</th>
+            </tr>
+          </thead>
+          <vue-draggable
+            tag="tbody"
+            item-key="id"
+            :animation="300"
+            :modelValue="item"
+            :force-fallback="true"
+            group="demoDragTable"
+            handle=".demo-table-handle"
+            :set-data="() => void 0"
+            @update:modelValue="(value) => updateModelValue(value, index)"
+          >
+            <template #item="{ element }">
+              <tr>
+                <td style="text-align: center; width: 40px">
+                  <ele-text
+                    :icon="DragOutlined"
+                    type="placeholder"
+                    class="demo-table-handle"
+                    style="cursor: move"
+                  />
+                </td>
+                <td>{{ element.taskName }}</td>
+                <td style="text-align: center; width: 80px">
+                  <ele-text v-if="element.status === 0" type="warning">
+                    未开始
+                  </ele-text>
+                  <ele-text v-else-if="element.status === 1" type="success">
+                    进行中
+                  </ele-text>
+                  <ele-text v-else-if="element.status === 2" type="info">
+                    已完成
+                  </ele-text>
+                </td>
+              </tr>
+            </template>
+            <template #footer v-if="!item.length">
+              <tr>
+                <td colspan="3" style="text-align: center; background: none">
+                  <ele-text type="placeholder">暂无数据</ele-text>
+                </td>
+              </tr>
+            </template>
+          </vue-draggable>
+        </ele-table>
+      </el-col>
+    </el-row>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { DragOutlined } from '@/components/icons';
+
+  interface Task {
+    id: number;
+    taskName: string;
+    status: number;
+  }
+
+  /** 数据 */
+  const taskList = ref<Task[][]>([]);
+
+  /** 更新数据 */
+  const updateModelValue = (value: Task[], index: number) => {
+    taskList.value[index] = value;
+  };
+
+  /** 处理数据, 每6条数据一个表格 */
+  const temp: Task[][] = [];
+  for (let i = 0; i < 18; i++) {
+    const index = Number.parseInt(String(i / 6));
+    if (temp[index] == null) {
+      temp[index] = [];
+    }
+    temp[index].push({
+      id: i,
+      taskName: '测试任务' + (i + 1),
+      status: 0
+    });
+  }
+  taskList.value = temp;
+</script>
+
+<style lang="scss" scoped>
+  .demo-table {
+    margin-bottom: 12px;
+    table-layout: fixed;
+
+    tr.sortable-chosen {
+      user-select: none;
+    }
+
+    tr.sortable-ghost {
+      opacity: 0;
+    }
+
+    tr.sortable-fallback {
+      opacity: 1 !important;
+      display: table !important;
+
+      td {
+        background: var(--el-color-primary-light-8);
+        border-radius: 0 !important;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/dragsort/index.vue b/z_ele/src/views/extension/dragsort/index.vue
new file mode 100644
index 0000000..d402838
--- /dev/null
+++ b/z_ele/src/views/extension/dragsort/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <ele-page>
+    <demo-list />
+    <demo-grid />
+    <demo-table />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoList from './components/demo-list.vue';
+  import DemoGrid from './components/demo-grid.vue';
+  import DemoTable from './components/demo-table.vue';
+
+  defineOptions({ name: 'ExtensionDragsort' });
+</script>
diff --git a/z_ele/src/views/extension/editor/index.vue b/z_ele/src/views/extension/editor/index.vue
new file mode 100644
index 0000000..199fc00
--- /dev/null
+++ b/z_ele/src/views/extension/editor/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <ele-page :multi-card="true">
+    <ele-card>
+      <!-- 按钮 -->
+      <div style="margin-bottom: 16px">
+        <el-button type="primary" class="ele-btn-icon" @click="setContent">
+          修改内容
+        </el-button>
+        <el-button type="primary" class="ele-btn-icon" @click="showHtml">
+          获取内容
+        </el-button>
+        <el-button
+          class="ele-btn-icon"
+          :type="disabled ? 'primary' : 'danger'"
+          @click="toggleDisabled"
+        >
+          {{ disabled ? '启用' : '禁用' }}
+        </el-button>
+      </div>
+      <!-- 编辑器 -->
+      <tinymce-editor
+        ref="editorRef"
+        :init="config"
+        v-model="content"
+        :disabled="disabled"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+
+  defineOptions({ name: 'ExtensionEditor' });
+
+  /** 编辑器 */
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+
+  /** 编辑器配置 */
+  const config = ref({
+    height: 520
+  });
+
+  /** 编辑器内容 */
+  const content = ref('');
+
+  /** 是否禁用 */
+  const disabled = ref(false);
+
+  /** 获取编辑器内容 */
+  const showHtml = () => {
+    ElMessageBox.alert(content.value, '编辑器内容', {
+      confirmButtonText: '知道了',
+      closeOnClickModal: true,
+      callback: () => {},
+      draggable: true
+    });
+  };
+
+  /** 修改编辑器内容 */
+  const setContent = () => {
+    content.value = [
+      '<div style="text-align: center;color: #fff;background-image: linear-gradient( 135deg, #4C83FF 10%, #2AFADF 100%);padding: 32px 0;">',
+      '   <div style="font-size: 28px;margin-bottom: 16px;">EleAdminPlus后台管理模板</div>',
+      '   <div style="font-size:18px">通用型后台管理模板，界面美观、开箱即用，拥有丰富的组件和模板</div>',
+      '</div><br/>'
+    ].join('');
+  };
+
+  /** 禁用启用切换 */
+  const toggleDisabled = () => {
+    disabled.value = !disabled.value;
+  };
+</script>
diff --git a/z_ele/src/views/extension/excel/components/excel-export.vue b/z_ele/src/views/extension/excel/components/excel-export.vue
new file mode 100644
index 0000000..75be1bb
--- /dev/null
+++ b/z_ele/src/views/extension/excel/components/excel-export.vue
@@ -0,0 +1,319 @@
+<template>
+  <ele-card header="导出 Excel" :body-style="{ padding: '18px 20px' }">
+    <ele-pro-table
+      row-key="key"
+      :columns="columns"
+      :datasource="data"
+      :show-overflow-tooltip="true"
+      :pagination="false"
+      v-model:selections="selections"
+      :tools="['export', 'print', 'size', 'columns', 'maximized']"
+      :toolbar="{ theme: 'default' }"
+      :border="true"
+    >
+      <template #toolbar>
+        <el-space :size="12" wrap>
+          <el-button type="primary" class="ele-btn-icon" @click="exportBas">
+            导出
+          </el-button>
+          <el-button type="primary" class="ele-btn-icon" @click="exportAdv">
+            导出带表头合并
+          </el-button>
+          <el-button type="primary" class="ele-btn-icon" @click="exportSel">
+            导出选中
+          </el-button>
+        </el-space>
+      </template>
+    </ele-pro-table>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { Columns } from 'ele-admin-plus/es/ele-pro-table/types';
+  import ExcelJS from 'exceljs';
+  import { download } from '@/utils/common';
+
+  interface User {
+    key: number;
+    username: string;
+    amount: number;
+    province: string;
+    city: string;
+    zone: string;
+    street: string;
+    address: string;
+  }
+
+  /** 表格数据 */
+  const data = ref<User[]>([
+    {
+      key: 1,
+      username: '张小三',
+      amount: 18,
+      province: '浙江',
+      city: '杭州',
+      zone: '西湖区',
+      street: '西溪街道',
+      address: '西溪花园30栋1单元'
+    },
+    {
+      key: 2,
+      username: '李小四',
+      amount: 39,
+      province: '江苏',
+      city: '苏州',
+      zone: '姑苏区',
+      street: '丝绸路',
+      address: '天墅之城9幢2单元'
+    },
+    {
+      key: 3,
+      username: '王小五',
+      amount: 8,
+      province: '江西',
+      city: '南昌',
+      zone: '青山湖区',
+      street: '艾溪湖办事处',
+      address: '中兴和园1幢3单元'
+    },
+    {
+      key: 4,
+      username: '赵小六',
+      amount: 16,
+      province: '福建',
+      city: '泉州',
+      zone: '丰泽区',
+      street: '南洋街道',
+      address: '南洋村6幢1单元'
+    },
+    {
+      key: 5,
+      username: '孙小七',
+      amount: 12,
+      province: '湖北',
+      city: '武汉',
+      zone: '武昌区',
+      street: '武昌大道',
+      address: '两湖花园16幢2单元'
+    },
+    {
+      key: 6,
+      username: '周小八',
+      amount: 11,
+      province: '安徽',
+      city: '黄山',
+      zone: '黄山区',
+      street: '汤口镇',
+      address: '温泉村21号'
+    }
+  ]);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 56,
+      align: 'center'
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 56,
+      align: 'center'
+    },
+    {
+      prop: 'username',
+      label: '用户名',
+      align: 'center',
+      minWidth: 110
+    },
+    {
+      columnKey: 'cityAddress',
+      label: '地址',
+      align: 'center',
+      children: [
+        {
+          prop: 'province',
+          label: '省',
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          prop: 'city',
+          label: '市',
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          prop: 'zone',
+          label: '区',
+          align: 'center',
+          minWidth: 120
+        },
+        {
+          prop: 'street',
+          label: '街道',
+          align: 'center',
+          minWidth: 120
+        },
+        {
+          prop: 'address',
+          label: '详细地址',
+          align: 'center',
+          minWidth: 160
+        }
+      ]
+    },
+    {
+      prop: 'amount',
+      label: '金额',
+      align: 'center',
+      minWidth: 80
+    }
+  ]);
+
+  /** 选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 导出excel */
+  const exportBas = () => {
+    const workbook = new ExcelJS.Workbook();
+    const sheet = workbook.addWorksheet('Sheet1');
+    sheet.addRow(['用户名', '省', '市', '区', '街道', '详细地址', '金额']);
+    data.value.forEach((d) => {
+      sheet.addRow([
+        d.username,
+        d.province,
+        d.city,
+        d.zone,
+        d.street,
+        d.address,
+        d.amount
+      ]);
+    });
+    // 设置列宽
+    [16, 16, 16, 16, 20, 30, 12].forEach((width, index) => {
+      sheet.getColumn(index + 1).width = width;
+    });
+    // 设置样式
+    sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+      row.height = 20;
+      row.eachCell({ includeEmpty: true }, (cell) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+        cell.alignment = {
+          vertical: 'middle',
+          horizontal: 'center'
+        };
+        cell.font = { size: 12, bold: rowIndex === 1 };
+      });
+    });
+    // 下载文件
+    workbook.xlsx.writeBuffer().then((data) => {
+      download(data, '用户数据.xlsx');
+    });
+  };
+
+  /** 导出带单元格合并 */
+  const exportAdv = () => {
+    const workbook = new ExcelJS.Workbook();
+    const sheet = workbook.addWorksheet('Sheet1');
+    sheet.addRow(['用户名', '地址', null, null, null, null, '金额']);
+    sheet.addRow([null, '省', '市', '区', '街道', '详细地址', null]);
+    data.value.forEach((d) => {
+      sheet.addRow([
+        d.username,
+        d.province,
+        d.city,
+        d.zone,
+        d.street,
+        d.address,
+        d.amount
+      ]);
+    });
+    // 设置列宽
+    [16, 16, 16, 16, 20, 30, 12].forEach((width, index) => {
+      sheet.getColumn(index + 1).width = width;
+    });
+    // 设置样式
+    sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+      row.height = 20;
+      row.eachCell({ includeEmpty: true }, (cell) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+        cell.alignment = {
+          vertical: 'middle',
+          horizontal: 'center'
+        };
+        cell.font = { size: 12, bold: rowIndex < 3 };
+      });
+    });
+    // 合并单元格
+    sheet.mergeCells(1, 2, 1, 6);
+    sheet.mergeCells(1, 1, 2, 1);
+    sheet.mergeCells(1, 7, 2, 7);
+    // 下载文件
+    workbook.xlsx.writeBuffer().then((data) => {
+      download(data, '用户数据.xlsx');
+    });
+  };
+
+  /** 导出选中数据 */
+  const exportSel = () => {
+    if (selections.value.length === 0) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    //
+    const workbook = new ExcelJS.Workbook();
+    const sheet = workbook.addWorksheet('Sheet1');
+    sheet.addRow(['用户名', '省', '市', '区', '街道', '详细地址', '金额']);
+    selections.value.forEach((d) => {
+      sheet.addRow([
+        d.username,
+        d.province,
+        d.city,
+        d.zone,
+        d.street,
+        d.address,
+        d.amount
+      ]);
+    });
+    // 设置列宽
+    [16, 16, 16, 16, 20, 30, 12].forEach((width, index) => {
+      sheet.getColumn(index + 1).width = width;
+    });
+    // 设置样式
+    sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+      row.height = 20;
+      row.eachCell({ includeEmpty: true }, (cell) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+        cell.alignment = {
+          vertical: 'middle',
+          horizontal: 'center'
+        };
+        cell.font = { size: 12, bold: rowIndex === 1 };
+      });
+    });
+    // 下载文件
+    workbook.xlsx.writeBuffer().then((data) => {
+      download(data, '用户数据.xlsx');
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/excel/components/excel-import.vue b/z_ele/src/views/extension/excel/components/excel-import.vue
new file mode 100644
index 0000000..d4a551c
--- /dev/null
+++ b/z_ele/src/views/extension/excel/components/excel-import.vue
@@ -0,0 +1,255 @@
+<template>
+  <ele-card header="导入 Excel">
+    <el-space>
+      <el-upload
+        action=""
+        accept=".xls,.xlsx"
+        :show-file-list="false"
+        :before-upload="importFile"
+      >
+        <el-button type="primary" class="ele-btn-icon">导入</el-button>
+      </el-upload>
+      <el-upload
+        action=""
+        accept=".xls,.xlsx"
+        :show-file-list="false"
+        :before-upload="importFile2"
+      >
+        <el-button type="primary" class="ele-btn-icon">
+          导入拆分合并
+        </el-button>
+      </el-upload>
+      <el-upload
+        action=""
+        accept=".xls,.xlsx"
+        :show-file-list="false"
+        :before-upload="importFile3"
+      >
+        <el-button type="primary" class="ele-btn-icon">
+          导入保持合并
+        </el-button>
+      </el-upload>
+    </el-space>
+    <div style="overflow: auto; margin-top: 12px">
+      <ele-table
+        :border="true"
+        style="min-width: max-content; table-layout: fixed"
+      >
+        <colgroup>
+          <col width="52" />
+          <col v-for="item in importTitle" :key="item" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th></th>
+            <th
+              v-for="item in importTitle"
+              :key="item"
+              style="text-align: center"
+            >
+              {{ item }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in importData" :key="index">
+            <td style="text-align: center">{{ index + 1 }}</td>
+            <template v-for="key in importTitle">
+              <td
+                v-if="item[key]?.colspan !== 0 && item[key]?.rowspan !== 0"
+                :key="key"
+                :colspan="item[key]?.colspan"
+                :rowspan="item[key]?.rowspan"
+                style="text-align: center"
+              >
+                {{ item[key]?.value }}
+              </td>
+            </template>
+          </tr>
+          <tr v-if="!importData.length">
+            <td
+              :colspan="importTitle.length + 1"
+              style="text-align: center; background: none"
+            >
+              暂无数据
+            </td>
+          </tr>
+        </tbody>
+      </ele-table>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import ExcelJS from 'exceljs';
+
+  /** 导入数据的列 */
+  const importTitle = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G']);
+
+  /** 导入的数据 */
+  const importData = ref<Record<string, any>[]>([]);
+
+  /** 导入本地excel文件 */
+  const importFile = (file: File) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      EleMessage.error({ message: '只能选择 excel 文件', plain: true });
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      EleMessage.error({ message: '大小不能超过 20MB', plain: true });
+      return false;
+    }
+    const loading = EleMessage.loading({ message: '加载中..', plain: true });
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const workbook = new ExcelJS.Workbook();
+      workbook.xlsx.load(e.target?.result as any).then(() => {
+        const title: string[] = [];
+        const list: Record<string, any>[] = [];
+        workbook.eachSheet((sheet) => {
+          list.splice(0, list.length);
+          sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+            title.splice(0, title.length);
+            const item: Record<string, any> = {};
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              const key = cell.address.slice(0, -String(rowIndex).length);
+              title.push(key);
+              const isMerged =
+                cell.isMerged && cell.address !== cell.master.address;
+              item[key] = {
+                value: isMerged ? '' : cell.value,
+                colspan: 1,
+                rowspan: 1
+              };
+            });
+            list.push(item);
+          });
+        });
+        importTitle.value = title;
+        importData.value = list;
+        loading.close();
+      });
+    };
+    reader.readAsArrayBuffer(file);
+    return false;
+  };
+
+  /** 导入excel拆分合并单元格 */
+  const importFile2 = (file: File) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      EleMessage.error({ message: '只能选择 excel 文件', plain: true });
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      EleMessage.error({ message: '大小不能超过 20MB', plain: true });
+      return false;
+    }
+    const loading = EleMessage.loading({ message: '加载中..', plain: true });
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const workbook = new ExcelJS.Workbook();
+      workbook.xlsx.load(e.target?.result as any).then(() => {
+        const title: string[] = [];
+        const list: Record<string, any>[] = [];
+        workbook.eachSheet((sheet) => {
+          list.splice(0, list.length);
+          sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+            title.splice(0, title.length);
+            const item: Record<string, any> = {};
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              const key = cell.address.slice(0, -String(rowIndex).length);
+              title.push(key);
+              item[key] = {
+                value: cell.value,
+                colspan: 1,
+                rowspan: 1
+              };
+            });
+            list.push(item);
+          });
+        });
+        importTitle.value = title;
+        importData.value = list;
+        loading.close();
+      });
+    };
+    reader.readAsArrayBuffer(file);
+    return false;
+  };
+
+  /** 导入 excel 读取合并信息 */
+  const importFile3 = (file: File) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      EleMessage.error({ message: '只能选择 excel 文件', plain: true });
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      EleMessage.error({ message: '大小不能超过 20MB', plain: true });
+      return false;
+    }
+    const loading = EleMessage.loading({ message: '加载中..', plain: true });
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const workbook = new ExcelJS.Workbook();
+      workbook.xlsx.load(e.target?.result as any).then(() => {
+        const title: string[] = [];
+        const list: Record<string, any>[] = [];
+        workbook.eachSheet((sheet) => {
+          list.splice(0, list.length);
+          sheet.eachRow({ includeEmpty: true }, (row) => {
+            title.splice(0, title.length);
+            const item: Record<string, any> = {};
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              const key = cell.address.slice(0, -String(cell.row).length);
+              title.push(key);
+              const isMerged =
+                cell.isMerged && cell.address !== cell.master.address;
+              item[key] = {
+                value: cell.value,
+                colspan: isMerged ? 0 : 1,
+                rowspan: isMerged ? 0 : 1
+              };
+            });
+            list.push(item);
+          });
+          // 生成表格的跨行跨列
+          sheet.eachRow({ includeEmpty: true }, (row) => {
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              const master = cell.master;
+              if (cell.isMerged && cell.address !== master.address) {
+                const mk = master.address.slice(0, -String(master.row).length);
+                const mItem = list[Number(master.row) - 1][mk];
+                const rs = Math.abs(Number(cell.row) - Number(master.row)) + 1;
+                rs > mItem.rowspan && (mItem.rowspan = rs);
+                const cs = Math.abs(Number(cell.col) - Number(master.col)) + 1;
+                cs > mItem.colspan && (mItem.colspan = cs);
+              }
+            });
+          });
+        });
+        importTitle.value = title;
+        importData.value = list;
+        loading.close();
+      });
+    };
+    reader.readAsArrayBuffer(file);
+    return false;
+  };
+</script>
diff --git a/z_ele/src/views/extension/excel/index.vue b/z_ele/src/views/extension/excel/index.vue
new file mode 100644
index 0000000..e3b22d1
--- /dev/null
+++ b/z_ele/src/views/extension/excel/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <ele-page>
+    <excel-export />
+    <excel-import />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import ExcelExport from './components/excel-export.vue';
+  import ExcelImport from './components/excel-import.vue';
+
+  defineOptions({ name: 'ExtensionExcel' });
+</script>
diff --git a/z_ele/src/views/extension/file/components/file-header.vue b/z_ele/src/views/extension/file/components/file-header.vue
new file mode 100644
index 0000000..6ae89b9
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/file-header.vue
@@ -0,0 +1,132 @@
+<!-- 文件目录面包屑 -->
+<template>
+  <div class="demo-breadcrumb">
+    <div class="demo-breadcrumb-body">
+      <ele-text
+        v-if="directorys.length"
+        type="primary"
+        class="demo-breadcrumb-back"
+        @click="goBack"
+      >
+        返回上一级
+      </ele-text>
+      <div class="demo-breadcrumb-list">
+        <ele-text
+          :type="!!directorys.length ? 'primary' : void 0"
+          class="demo-breadcrumb-item"
+        >
+          <div
+            :class="{ 'demo-breadcrumb-link': !!directorys.length }"
+            @click="goRoot"
+          >
+            全部文件
+          </div>
+          <ele-text
+            v-if="directorys.length"
+            :icon="ArrowRight"
+            type="placeholder"
+            style="display: flex"
+          />
+        </ele-text>
+        <ele-text
+          v-for="(item, i) in directorys"
+          :key="item.id"
+          class="demo-breadcrumb-item"
+          :type="i !== directorys.length - 1 ? 'primary' : 'default'"
+        >
+          <div
+            :class="{ 'demo-breadcrumb-link': i !== directorys.length - 1 }"
+            @click="goDirectory(i)"
+          >
+            {{ item.name }}
+          </div>
+          <ele-text
+            v-if="i !== directorys.length - 1"
+            :icon="ArrowRight"
+            type="placeholder"
+            style="display: flex"
+          />
+        </ele-text>
+      </div>
+    </div>
+    <div class="hidden-xs-only">已全部加载，共 {{ total }} 个</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ArrowRight } from '@/components/icons';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 文件夹数据 */
+    directorys: UserFile[];
+    /** 总文件数 */
+    total: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:directorys', value: UserFile[]): void;
+  }>();
+
+  /** 回到上级 */
+  const goBack = () => {
+    emit(
+      'update:directorys',
+      props.directorys.slice(0, props.directorys.length - 1)
+    );
+  };
+
+  /** 回到根目录 */
+  const goRoot = () => {
+    if (props.directorys.length) {
+      emit('update:directorys', []);
+    }
+  };
+
+  /** 回到指定目录 */
+  const goDirectory = (index: number) => {
+    if (index !== props.directorys.length - 1) {
+      emit('update:directorys', props.directorys.slice(0, index + 1));
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-breadcrumb {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+
+    .demo-breadcrumb-body {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .demo-breadcrumb-back {
+      padding-right: 12px;
+      border-right: 1px solid hsla(0, 0%, 60%, 0.6);
+
+      & + .demo-breadcrumb-list {
+        padding-left: 12px;
+      }
+    }
+  }
+
+  .demo-breadcrumb-list {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .demo-breadcrumb-item {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .demo-breadcrumb-back:hover,
+  .demo-breadcrumb-link:hover {
+    opacity: 0.8;
+    cursor: pointer;
+  }
+</style>
diff --git a/z_ele/src/views/extension/file/components/file-list.vue b/z_ele/src/views/extension/file/components/file-list.vue
new file mode 100644
index 0000000..8b29d1e
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/file-list.vue
@@ -0,0 +1,296 @@
+<!-- 文件展示列表 -->
+<template>
+  <div class="demo-file-list">
+    <ele-file-list
+      :data="data"
+      :grid="grid"
+      :sort="sort"
+      :order="order"
+      :sortable="true"
+      :box-choose="true"
+      selection-type="checkbox"
+      :selections="selections"
+      :context-menus="contextMenus"
+      :context-menu-props="{
+        menuStyle: { minWidth: '120px' },
+        iconProps: { size: 15 },
+        popperOptions: { strategy: 'fixed' }
+      }"
+      :icons="localIcons"
+      :small-icons="localSmallIcons"
+      :style="{ minHeight: '400px', minWidth: grid ? 'auto' : '456px' }"
+      @item-click="handleItemClick"
+      @sort-change="handleSortChange"
+      @update:selections="updateSelections"
+      @item-context-menu="handleCtxMenuClick"
+    />
+    <div v-if="!data.length" class="demo-file-list-empty">
+      <el-empty description="无数据" :image-size="80" />
+    </div>
+  </div>
+  <!-- 图片预览 -->
+  <ele-image-viewer
+    v-model="showImageViewer"
+    :urlList="viewerImages"
+    :initialIndex="viewerIndex"
+    :infinite="false"
+    :hide-on-click-modal="true"
+  />
+  <!-- 文件重命名弹窗 -->
+  <name-edit
+    v-model="nameEditVisible"
+    :data="nameEditData"
+    @done="handleDone"
+  />
+  <!-- 文件移动弹窗 -->
+  <file-move
+    v-model="fileMoveVisible"
+    :data="fileMoveData"
+    @done="handleDone"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, markRaw } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import {
+    localIcons,
+    localSmallIcons
+  } from 'ele-admin-plus/es/ele-file-list/icons';
+  import type {
+    FileItem,
+    SortValue,
+    ItemContextMenuOption
+  } from 'ele-admin-plus/es/ele-file-list/types';
+  import {
+    DownloadOutlined,
+    EditOutlined,
+    DragOutlined,
+    DeleteOutlined
+  } from '@/components/icons';
+  import { removeUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+  import NameEdit from './name-edit.vue';
+  import FileMove from './file-move.vue';
+
+  const props = defineProps<{
+    /** 父级id */
+    parentId?: number;
+    /** 文件列表数据 */
+    data: FileItem[];
+    /** 排序字段 */
+    sort?: string;
+    /** 排序方式 */
+    order?: string;
+    /** 选中数据 */
+    selections: FileItem[];
+    /** 是否网格展示 */
+    grid: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'sort-change', value: SortValue): void;
+    (e: 'update:selections', value: FileItem[]): void;
+    (e: 'go-directory', value: UserFile): void;
+    (e: 'done'): void;
+  }>();
+
+  /** 文件重命名弹窗是否打开 */
+  const nameEditVisible = ref<boolean>(false);
+
+  /** 文件重命名的数据 */
+  const nameEditData = ref<UserFile>();
+
+  /** 文件移动弹窗是否打开 */
+  const fileMoveVisible = ref<boolean>(false);
+
+  /** 文件移动的数据 */
+  const fileMoveData = ref<UserFile>();
+
+  /** 是否打开图片预览 */
+  const showImageViewer = ref(false);
+
+  /** 图片预览数据 */
+  const viewerImages = ref<string[]>([]);
+
+  /** 图片预览初始位置 */
+  const viewerIndex = ref(0);
+
+  /** 文件列表排序方式改变 */
+  const handleSortChange = (option: SortValue) => {
+    emit('sort-change', option);
+  };
+
+  /** 更新选中数据 */
+  const updateSelections = (value: FileItem[]) => {
+    emit('update:selections', value);
+  };
+
+  /** item 点击事件 */
+  const handleItemClick = (item: FileItem) => {
+    console.log('onItemClick:', JSON.parse(JSON.stringify(item)));
+    if (item.isDirectory) {
+      // 进入文件夹
+      emit('go-directory', item as unknown as UserFile);
+    } else if (isImageFile(item)) {
+      // 预览图片文件
+      previewItemImage(item);
+    } else {
+      // 选中或取消选中文件
+      updateSelections(
+        props.selections.includes(item)
+          ? props.selections.filter((d) => d !== item)
+          : [...props.selections, item]
+      );
+    }
+  };
+
+  /** 右键菜单点击事件 */
+  const handleCtxMenuClick = (option: ItemContextMenuOption) => {
+    const { key, item } = option;
+    if (key === 'open') {
+      // 打开文件
+      if (item.isDirectory || isImageFile(item)) {
+        handleItemClick(item);
+      } else {
+        window.open(item.url);
+      }
+    } else if (key === 'download') {
+      // 下载文件
+      if (typeof item.downloadUrl === 'string') {
+        window.open(item.downloadUrl);
+      }
+    } else if (key === 'edit') {
+      // 重命名
+      nameEditData.value = item as unknown as UserFile;
+      nameEditVisible.value = true;
+    } else if (key === 'remove') {
+      // 删除文件
+      removeItem(item);
+    } else if (key === 'move') {
+      // 移动
+      fileMoveData.value = item as unknown as UserFile;
+      fileMoveVisible.value = true;
+    }
+  };
+
+  /** 删除 */
+  const removeItem = (item: FileItem) => {
+    ElMessageBox.confirm(`确定要删除“${item.name}”吗?`, '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeUserFile(item.id as number)
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            handleDone();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 完成刷新列表数据 */
+  const handleDone = () => {
+    emit('done');
+  };
+
+  /** 判断是否是图片文件 */
+  const isImageFile = (item: FileItem) => {
+    return (
+      typeof item.contentType === 'string' &&
+      item.contentType.startsWith('image/') &&
+      item.url
+    );
+  };
+
+  /** 预览图片文件 */
+  const previewItemImage = (item: FileItem) => {
+    const temp = props.data.filter((d) => isImageFile(d));
+    const index = temp.indexOf(item);
+    if (index !== -1) {
+      viewerImages.value = temp.map((d) => d.url as string);
+      viewerIndex.value = index;
+      showImageViewer.value = true;
+    }
+  };
+
+  /** 右键菜单 */
+  const contextMenus = (item?: FileItem) => {
+    if (!item) {
+      return [];
+    }
+    const menus: DropdownItem[] = [
+      {
+        title: '重命名',
+        command: 'edit',
+        icon: markRaw(EditOutlined),
+        divided: true
+      },
+      {
+        title: '移动到',
+        command: 'move',
+        icon: markRaw(DragOutlined)
+      },
+      {
+        title: '删除',
+        command: 'remove',
+        icon: markRaw(DeleteOutlined),
+        divided: true,
+        danger: true
+      }
+    ];
+    if (item.isDirectory) {
+      menus.unshift({ title: '打开', command: 'open' });
+    } else if (
+      isImageFile(item) ||
+      (typeof item.contentType === 'string' &&
+        (item.contentType.startsWith('video/') ||
+          item.contentType.startsWith('text/') ||
+          item.contentType.startsWith('application/pdf') ||
+          item.contentType.startsWith('application/json') ||
+          item.contentType.startsWith('application/javascript')))
+    ) {
+      menus[0].divided = false;
+      menus.unshift({
+        title: '下载',
+        command: 'download',
+        icon: markRaw(DownloadOutlined),
+        divided: true
+      });
+      menus.unshift({ title: '预览', command: 'open' });
+    } else {
+      menus.unshift({
+        title: '下载',
+        command: 'download',
+        icon: markRaw(DownloadOutlined)
+      });
+    }
+    return menus;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-file-list {
+    position: relative;
+    overflow-x: auto;
+
+    .demo-file-list-empty {
+      position: absolute;
+      top: 100px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/file/components/file-move.vue b/z_ele/src/views/extension/file/components/file-move.vue
new file mode 100644
index 0000000..b0b4def
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/file-move.vue
@@ -0,0 +1,190 @@
+<template>
+  <ele-modal :width="460" title="移动到" v-model="visible" @open="handleOpen">
+    <div class="demo-file-move-tree">
+      <el-tree
+        :data="folderData"
+        nodeKey="id"
+        :props="{ label: 'name' }"
+        :expand-on-click-node="false"
+        :default-expand-all="true"
+        @node-click="handleFolderSelect"
+      >
+        <template #default="scope">
+          <img
+            src="/ele-file-list/ic_file_folder.png"
+            style="width: 18px; height: 18px; margin-right: 6px"
+          />
+          <span
+            :class="[
+              'el-tree-node__label',
+              { 'is-active': scope.data.id === selectedId }
+            ]"
+          >
+            {{ scope.data.name }}
+          </span>
+          <el-radio :value="true" :model-value="scope.data.id === selectedId" />
+        </template>
+      </el-tree>
+    </div>
+    <ele-loading
+      v-if="folderLoading"
+      :loading="folderLoading"
+      :style="{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 'var(--el-border-radius-base)',
+        overflow: 'hidden'
+      }"
+    />
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage, toTree, mapTree } from 'ele-admin-plus';
+  import { updateUserFile, listUserFiles } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 文件数据 */
+    data?: UserFile;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 选中的id */
+  const selectedId = ref<number>();
+
+  /** 文件夹数据 */
+  const folderData = ref<UserFile[]>([]);
+
+  /** 文件夹请求状态 */
+  const folderLoading = ref(false);
+
+  /** 文件夹选中事件 */
+  const handleFolderSelect = (item: UserFile) => {
+    selectedId.value = item.id;
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    const parentId = selectedId.value;
+    if (parentId == null) {
+      EleMessage.error({ message: '请选择分组', plain: true });
+      return;
+    }
+    loading.value = true;
+    updateUserFile({ id: props.data?.id, parentId })
+      .then((msg) => {
+        loading.value = false;
+        EleMessage.success({ message: msg, plain: true });
+        handleCancel();
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 查询文件夹数据 */
+  const queryFolder = () => {
+    folderLoading.value = true;
+    listUserFiles({ isDirectory: 1 })
+      .then((list) => {
+        const result = [
+          { id: 0, name: '未分组' },
+          ...mapTree(
+            toTree({
+              data: list,
+              idField: 'id',
+              parentIdField: 'parentId'
+            }),
+            (d) => (d.id === props.data?.id ? void 0 : d)
+          )
+        ];
+        folderData.value = result;
+        folderLoading.value = false;
+      })
+      .catch((e) => {
+        folderData.value = [];
+        EleMessage.error({ message: e.message, plain: true });
+        folderLoading.value = false;
+      });
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    queryFolder();
+    if (props.data) {
+      selectedId.value = props.data.parentId;
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-file-move-tree {
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
+
+    :deep(.el-tree) {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: calc(var(--ele-tree-item-radius) * 2);
+      padding-right: calc(var(--ele-tree-item-radius) * 2);
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      user-select: none;
+      --ele-tree-item-height: 36px;
+
+      .el-tree-node__content {
+        position: relative;
+        z-index: 1;
+
+        & > .el-tree-node__label.is-active {
+          color: var(--el-color-primary);
+          font-weight: bold;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+            background: var(--el-color-primary-light-9);
+            border-radius: var(--ele-tree-item-radius);
+          }
+        }
+
+        & > .el-radio {
+          margin: 0 -12px 0 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/file/components/file-toolbar.vue b/z_ele/src/views/extension/file/components/file-toolbar.vue
new file mode 100644
index 0000000..53dca11
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/file-toolbar.vue
@@ -0,0 +1,216 @@
+<template>
+  <ele-toolbar theme="plain" class="demo-file-toolbar">
+    <el-upload
+      action=""
+      :show-file-list="false"
+      :before-upload="handleUpload"
+      style="display: inline-block; vertical-align: middle"
+    >
+      <el-button type="primary" class="ele-btn-icon" :icon="UploadOutlined">
+        上传
+      </el-button>
+    </el-upload>
+    <el-button
+      class="ele-btn-icon"
+      :icon="FolderAddOutlined"
+      style="margin-left: 12px"
+      @click="openFolderAdd"
+    >
+      <span>新建</span>
+      <span class="hidden-sm-and-down">文件夹</span>
+    </el-button>
+    <el-button
+      plain
+      type="danger"
+      :icon="DeleteOutlined"
+      :disabled="!selections.length"
+      class="ele-btn-icon hidden-xs-only"
+      @click="removeBatch"
+    >
+      删除
+    </el-button>
+    <el-button
+      class="ele-btn-icon"
+      style="margin-left: 12px"
+      @click="openFilePicker"
+    >
+      <span class="hidden-sm-and-down">打开</span>
+      <span>文件选择</span>
+    </el-button>
+    <template #tools>
+      <!-- 搜索框 -->
+      <div style="max-width: 240px" class="hidden-sm-and-down">
+        <el-input
+          v-model="search"
+          placeholder="搜索您的文件"
+          :prefix-icon="SearchOutlined"
+        />
+      </div>
+      <!-- 显示方式切换 -->
+      <el-icon
+        class="demo-file-tool"
+        :title="grid ? '表格模式' : '网格模式'"
+        @click="toggleShowType"
+      >
+        <TableOutlined v-if="grid" />
+        <AppstoreOutlined v-else />
+      </el-icon>
+    </template>
+  </ele-toolbar>
+  <!-- 新建文件夹弹窗 -->
+  <folder-edit
+    v-model="folderAddVisible"
+    :parent-id="parentId"
+    @done="handleDone"
+  />
+  <!-- 文件选择弹窗 -->
+  <file-picker v-model="showFilePicker" @done="handleFilePickerDone" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { FileItem } from 'ele-admin-plus/es/ele-file-list/types';
+  import {
+    UploadOutlined,
+    FolderAddOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    TableOutlined,
+    AppstoreOutlined
+  } from '@/components/icons';
+  import { uploadFile } from '@/api/system/file';
+  import { addUserFile, removeUserFiles } from '@/api/system/user-file';
+  import FolderEdit from './folder-edit.vue';
+  import FilePicker from '@/components/FilePicker/index.vue';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 是否网格展示 */
+    grid: boolean;
+    /** 选中数据 */
+    selections: FileItem[];
+    /** 父级id */
+    parentId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:grid', value: boolean): void;
+    (e: 'done'): void;
+  }>();
+
+  /** 搜索关键字 */
+  const search = ref<string>('');
+
+  /** 新建文件夹弹窗是否打开 */
+  const folderAddVisible = ref<boolean>(false);
+
+  /** 上传 */
+  const handleUpload = (file: File) => {
+    if (file.size / 1024 / 1024 > 100) {
+      EleMessage.error({ message: '大小不能超过 100MB', plain: true });
+      return false;
+    }
+    const loading = EleMessage.loading({
+      message: '上传中..',
+      plain: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        addUserFile({
+          name: data.name,
+          isDirectory: 0,
+          parentId: props.parentId,
+          path: data.path,
+          length: data.length,
+          contentType: data.contentType
+        })
+          .then(() => {
+            loading.close();
+            EleMessage.success({ message: '上传成功', plain: true });
+            handleDone();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch((e) => {
+        loading.close();
+        EleMessage.error({ message: e.message, plain: true });
+      });
+    return false;
+  };
+
+  /** 打开新建文件夹弹窗 */
+  const openFolderAdd = () => {
+    folderAddVisible.value = true;
+  };
+
+  /** 批量删除 */
+  const removeBatch = () => {
+    const rows = props.selections;
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.name).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeUserFiles(rows.map((d) => d.id as number))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            handleDone();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 完成刷新列表数据 */
+  const handleDone = () => {
+    emit('done');
+  };
+
+  /** 显示方式切换 */
+  const toggleShowType = () => {
+    emit('update:grid', !props.grid);
+  };
+
+  /** 是否打开文件选择弹窗 */
+  const showFilePicker = ref(false);
+
+  /** 打开文件选择弹窗 */
+  const openFilePicker = () => {
+    showFilePicker.value = true;
+  };
+
+  /** 文件选择弹窗选择完成事件 */
+  const handleFilePickerDone = (files: UserFile[]) => {
+    showFilePicker.value = false;
+    if (files.length) {
+      console.log(JSON.parse(JSON.stringify(files)));
+      EleMessage.success({
+        message: files.length + '条数据已打印在控制台',
+        plain: true
+      });
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  /* 图标按钮 */
+  .demo-file-tool {
+    font-size: 18px;
+    margin-left: 16px;
+    cursor: pointer;
+  }
+</style>
diff --git a/z_ele/src/views/extension/file/components/folder-edit.vue b/z_ele/src/views/extension/file/components/folder-edit.vue
new file mode 100644
index 0000000..0bdff80
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/folder-edit.vue
@@ -0,0 +1,110 @@
+<template>
+  <ele-modal
+    form
+    :width="460"
+    title="新建文件夹"
+    v-model="visible"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent=""
+    >
+      <el-form-item label="文件夹名称" prop="name">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.name"
+          placeholder="请输入文件夹名称"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { addUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 父级id */
+    parentId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserFile>({ name: '' });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    name: [
+      {
+        required: true,
+        message: '请输入文件夹名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      addUserFile({
+        ...form,
+        parentId: props.parentId,
+        isDirectory: 1
+      })
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+  };
+</script>
diff --git a/z_ele/src/views/extension/file/components/name-edit.vue b/z_ele/src/views/extension/file/components/name-edit.vue
new file mode 100644
index 0000000..9996d9d
--- /dev/null
+++ b/z_ele/src/views/extension/file/components/name-edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <ele-modal
+    form
+    :width="460"
+    title="重命名"
+    v-model="visible"
+    @open="handleOpen"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent=""
+    >
+      <el-form-item label="文件/夹名称" prop="name">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.name"
+          placeholder="请输入文件/夹名称"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { updateUserFile } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  const props = defineProps<{
+    /** 文件数据 */
+    data?: UserFile;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserFile>({ name: '' });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    name: [
+      {
+        required: true,
+        message: '请输入文件/夹名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      updateUserFile({ ...form, id: props.data?.id })
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 弹窗关闭事件 */
+  const handleClosed = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    if (props.data) {
+      form.name = props.data.name;
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/file/index.vue b/z_ele/src/views/extension/file/index.vue
new file mode 100644
index 0000000..9c24d20
--- /dev/null
+++ b/z_ele/src/views/extension/file/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card :body-style="{ padding: 0 }">
+      <div style="padding: 8px 16px">
+        <file-toolbar
+          v-model:grid="grid"
+          :selections="selections"
+          :parentId="parentId"
+          @done="handleDone"
+        />
+        <file-header
+          :total="total"
+          :directorys="directorys"
+          @update:directorys="updateDirectorys"
+        />
+      </div>
+      <ele-loading :loading="loading">
+        <file-list
+          :grid="grid"
+          :data="data"
+          :sort="sort"
+          :order="order"
+          :parentId="parentId"
+          v-model:selections="selections"
+          @sort-change="handleSortChange"
+          @go-directory="handleGoDirectory"
+          @done="handleDone"
+        />
+      </ele-loading>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    FileItem,
+    SortValue
+  } from 'ele-admin-plus/es/ele-file-list/types';
+  import FileToolbar from './components/file-toolbar.vue';
+  import FileHeader from './components/file-header.vue';
+  import FileList from './components/file-list.vue';
+  import { listUserFiles } from '@/api/system/user-file';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  defineOptions({ name: 'ExtensionFile' });
+
+  /** 加载状态 */
+  const loading = ref(true);
+
+  /** 文件列表数据 */
+  const data = ref<FileItem[]>([]);
+
+  /** 排序字段 */
+  const sort = ref<string>('');
+
+  /** 排序方式 */
+  const order = ref<string>('');
+
+  /** 选中数据 */
+  const selections = ref<FileItem[]>([]);
+
+  /** 文件夹数据 */
+  const directorys = ref<UserFile[]>([]);
+
+  /** 总文件数 */
+  const total = ref<number>(0);
+
+  /** 是否网格展示 */
+  const grid = ref(true);
+
+  /** 父级id */
+  const parentId = ref<number>(0);
+
+  /** 查询文件列表 */
+  const query = () => {
+    data.value = [];
+    selections.value = [];
+    loading.value = true;
+    listUserFiles({
+      sort: order.value ? sort.value : '',
+      order: order.value,
+      parentId: parentId.value
+    })
+      .then((list) => {
+        loading.value = false;
+        data.value = list.map((d) => {
+          return Object.assign(d, {
+            key: d.id,
+            isDirectory: d.isDirectory === 1 ? true : false,
+            length: formatLength(d.length)
+          });
+        });
+        total.value = list.length;
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 刷新列表数据 */
+  const handleDone = () => {
+    query();
+  };
+
+  /** 文件列表排序方式改变 */
+  const handleSortChange = (option: SortValue) => {
+    order.value = option.order ?? '';
+    sort.value = option.sort;
+    query();
+  };
+
+  /** 进入文件夹 */
+  const handleGoDirectory = (item: UserFile) => {
+    updateDirectorys([...directorys.value, item]);
+  };
+
+  /** 更新文件夹数据 */
+  const updateDirectorys = (values: UserFile[]) => {
+    directorys.value = values;
+    parentId.value = directorys.value[directorys.value.length - 1]?.id ?? 0;
+    query();
+  };
+
+  /** 格式化文件大小 */
+  const formatLength = (length?: number) => {
+    if (length == null) {
+      return '-';
+    }
+    if (length < 1024) {
+      return length + 'B';
+    } else if (length < 1024 * 1024) {
+      return (length / 1024).toFixed(1) + 'KB';
+    } else if (length < 1024 * 1024 * 1024) {
+      return (length / 1024 / 1024).toFixed(1) + 'M';
+    } else {
+      return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
+    }
+  };
+
+  query();
+</script>
diff --git a/z_ele/src/views/extension/icon/components/basic-icons.ts b/z_ele/src/views/extension/icon/components/basic-icons.ts
new file mode 100644
index 0000000..73b3c2b
--- /dev/null
+++ b/z_ele/src/views/extension/icon/components/basic-icons.ts
@@ -0,0 +1,37 @@
+export {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  QuestionCircleOutlined,
+  UserOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  HomeOutlined,
+  MessageOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusCircleOutlined,
+  MinusCircleOutlined,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  VerticalRightOutlined,
+  VerticalLeftOutlined,
+  DashboardOutlined,
+  CompassOutlined,
+  ProtectOutlined,
+  CheckCircleFilled,
+  CloseCircleFilled,
+  QuestionCircleFilled,
+  ExclamationCircleFilled,
+  FilterFilled,
+  CaretUpFilled,
+  CaretDownFilled,
+  StepBackwardFilled,
+  StepForwardFilled,
+  PlayFilled,
+  PauseFilled,
+  QqFilled,
+  WechatFilled,
+  AlipayFilled
+} from '@/components/icons';
diff --git a/z_ele/src/views/extension/icon/components/demo-advanced.vue b/z_ele/src/views/extension/icon/components/demo-advanced.vue
new file mode 100644
index 0000000..631c354
--- /dev/null
+++ b/z_ele/src/views/extension/icon/components/demo-advanced.vue
@@ -0,0 +1,76 @@
+<template>
+  <ele-card header="进阶用法">
+    <div style="max-width: 260px">
+      <ele-icon-select
+        clearable
+        filterable
+        :data="icons"
+        v-model="selectedIcon"
+        :hide-on-single-tab="true"
+        placeholder="请选择"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <template #icon="{ icon, prefix }">
+          <img
+            :src="`/ele-file-list/ic_file_${icon}.png`"
+            :style="
+              prefix
+                ? { maxWidth: '22px', maxHeight: '22px' }
+                : {
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    width: '24px',
+                    height: '24px'
+                  }
+            "
+          />
+        </template>
+      </ele-icon-select>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { IconItem } from 'ele-admin-plus/es/ele-icon-select/types';
+
+  /** 选中值 */
+  const selectedIcon = ref('');
+
+  /** 图标数据 */
+  const icons = ref<IconItem[]>([
+    {
+      title: '',
+      children: [
+        {
+          title: '文档',
+          icons: [
+            'folder',
+            'word',
+            'excel',
+            'ppt',
+            'pdf',
+            'visio',
+            'text',
+            'code',
+            'htm',
+            'fonts',
+            'zip',
+            'ps',
+            'cad',
+            'bt',
+            'misc'
+          ]
+        },
+        {
+          title: '媒体',
+          icons: ['flash', 'music', 'video', 'picture']
+        },
+        {
+          title: '应用',
+          icons: ['android', 'exe', 'ipa']
+        }
+      ]
+    }
+  ]);
+</script>
diff --git a/z_ele/src/views/extension/icon/components/demo-basic.vue b/z_ele/src/views/extension/icon/components/demo-basic.vue
new file mode 100644
index 0000000..6753bdb
--- /dev/null
+++ b/z_ele/src/views/extension/icon/components/demo-basic.vue
@@ -0,0 +1,101 @@
+<template>
+  <ele-card header="自定义数据">
+    <div style="max-width: 260px">
+      <ele-icon-select
+        clearable
+        filterable
+        :data="icons"
+        v-model="selectedIcon"
+        placeholder="请选择"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <template #icon="{ icon }">
+          <el-icon>
+            <component :is="icon" />
+          </el-icon>
+        </template>
+      </ele-icon-select>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { IconItem } from 'ele-admin-plus/es/ele-icon-select/types';
+  import * as BasicIcons from './basic-icons';
+
+  defineOptions({ components: BasicIcons });
+
+  /** 选中值 */
+  const selectedIcon = ref('');
+
+  /** 图标数据 */
+  const icons = ref<IconItem[]>([
+    {
+      title: '线框风格',
+      children: [
+        {
+          title: 'System',
+          icons: [
+            'CheckCircleOutlined',
+            'CloseCircleOutlined',
+            'QuestionCircleOutlined',
+            'UserOutlined',
+            'SearchOutlined',
+            'SettingOutlined',
+            'HomeOutlined',
+            'MessageOutlined',
+            'EditOutlined',
+            'DeleteOutlined',
+            'PlusCircleOutlined',
+            'MinusCircleOutlined'
+          ]
+        },
+        {
+          title: 'Arrow',
+          icons: ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+        },
+        {
+          title: 'Media',
+          icons: ['VerticalRightOutlined', 'VerticalLeftOutlined']
+        },
+        {
+          title: 'Other',
+          icons: ['DashboardOutlined', 'CompassOutlined', 'ProtectOutlined']
+        }
+      ]
+    },
+    {
+      title: '实底风格',
+      children: [
+        {
+          title: 'System',
+          icons: [
+            'CheckCircleFilled',
+            'CloseCircleFilled',
+            'QuestionCircleFilled',
+            'ExclamationCircleFilled',
+            'FilterFilled'
+          ]
+        },
+        {
+          title: 'Arrow',
+          icons: ['CaretUpFilled', 'CaretDownFilled']
+        },
+        {
+          title: 'Media',
+          icons: [
+            'StepBackwardFilled',
+            'StepForwardFilled',
+            'PlayFilled',
+            'PauseFilled'
+          ]
+        },
+        {
+          title: 'Other',
+          icons: ['QqFilled', 'WechatFilled', 'AlipayFilled']
+        }
+      ]
+    }
+  ]);
+</script>
diff --git a/z_ele/src/views/extension/icon/index.vue b/z_ele/src/views/extension/icon/index.vue
new file mode 100644
index 0000000..05e7ff3
--- /dev/null
+++ b/z_ele/src/views/extension/icon/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <div style="max-width: 260px">
+        <icon-select
+          clearable
+          filterable="popper"
+          :popper-width="460"
+          :popper-height="388"
+          :popper-options="{ strategy: 'fixed' }"
+          placeholder="请选择图标"
+          v-model="icon"
+        />
+      </div>
+    </ele-card>
+    <demo-basic />
+    <demo-advanced />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import IconSelect from '@/components/IconSelect/index.vue';
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoAdvanced from './components/demo-advanced.vue';
+
+  defineOptions({ name: 'ExtensionIcon' });
+
+  const icon = ref('');
+</script>
diff --git a/z_ele/src/views/extension/layout/components/demo-basic.vue b/z_ele/src/views/extension/layout/components/demo-basic.vue
new file mode 100644
index 0000000..8bbcf56
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/demo-basic.vue
@@ -0,0 +1,468 @@
+<template>
+  <ele-card header="基础用法" :body-style="{ padding: '12px' }">
+    <frame-card :style="mobile ? { maxWidth: '420px' } : {}">
+      <div
+        :style="{
+          height: '520px',
+          overflow: 'auto',
+          minWidth: mobile ? void 0 : '800px'
+        }"
+        class="demo-layout-wrapper"
+      >
+        <ele-admin-layout
+          ref="layoutRef"
+          :height="520"
+          :header-menus="headerMenus"
+          :header-active="headerActive"
+          :sidebar-menus="sidebarMenus"
+          :sidebar-active="sidebarActive"
+          :sidebox-menus="sideboxMenus"
+          :sidebox-active="sideboxActive"
+          :tabs="tabs"
+          :tab-active="tabActive"
+          :levels="levels"
+          :layout="layout"
+          :sidebar-layout="sidebarLayout"
+          :tab-bar="tabBar"
+          :breadcrumb="mobile ? false : breadcrumb"
+          :header-style="headerStyle"
+          :sidebar-style="sidebarStyle"
+          :mix-sidebar-style="mixSidebarStyle"
+          :tab-style="tabStyle"
+          :fixed-header="fixedHeader"
+          :fixed-sidebar="fixedSidebar"
+          :fixed-body="fixedBody"
+          :logo-in-header="logoInHeader"
+          :maximized="maximized"
+          v-model:collapse="collapse"
+          :compact="compact"
+          :mobile="mobile"
+          :fixed-home="true"
+          :back-top="false"
+          :menu-scroll-to-active="false"
+          :sidebar-menu-props="{ textEllipsisTooltip: true }"
+          :style="{
+            '--ele-header-height': headerHeight + 'px',
+            '--ele-sidebar-width': sidebarWidth + 'px',
+            '--ele-sidebox-width': sideboxWidth + 'px',
+            '--ele-sidebar-mix-width': sidebarMixWidth + 'px'
+          }"
+        >
+          <template #logo>
+            <img src="@/assets/logo.svg" />
+          </template>
+          <template #logoTitle>
+            <h1>Ele Admin</h1>
+          </template>
+          <template v-if="layout !== 'top'" #left>
+            <layout-tool @click="collapse = !collapse">
+              <el-icon style="transform: scale(1.14)">
+                <MenuUnfoldOutlined v-if="collapse" />
+                <MenuFoldOutlined v-else />
+              </el-icon>
+            </layout-tool>
+            <layout-tool>
+              <el-icon style="transform: scale(1.09)">
+                <ReloadOutlined />
+              </el-icon>
+            </layout-tool>
+          </template>
+          <template #right>
+            <layout-tool>
+              <el-icon style="transform: scale(1.18)">
+                <ExpandOutlined style="stroke-width: 4" />
+              </el-icon>
+            </layout-tool>
+            <layout-tool>
+              <el-icon>
+                <MoreOutlined />
+              </el-icon>
+            </layout-tool>
+          </template>
+          <template #boxBottom>
+            <div :style="{ flexShrink: 0, padding: '4px 8px' }">
+              <layout-tool style="height: 32px" @click="compact = !compact">
+                <el-icon style="transform: scale(1.05)">
+                  <MenuUnfoldOutlined v-if="compact" />
+                  <MenuFoldOutlined v-else />
+                </el-icon>
+              </layout-tool>
+            </div>
+          </template>
+          <div
+            :style="{
+              flex: 'auto',
+              padding:
+                tabStyle === 'button' && tabBar === true
+                  ? '0 12px'
+                  : '12px 12px 0 12px',
+              boxSizing: 'border-box'
+            }"
+          >
+            <ele-card
+              :body-style="{ padding: '16px 8px 16px 14px' }"
+              style="margin: 0"
+            >
+              <option-item label="整体布局">
+                <el-radio-group v-model="layout">
+                  <el-radio value="default" label="侧栏导航" />
+                  <el-radio value="top" label="顶栏导航" />
+                  <el-radio value="mix" label="混合导航" />
+                  <el-radio value="side" label="仅侧栏导航" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="侧栏布局">
+                <el-radio-group v-model="sidebarLayout">
+                  <el-radio value="default" label="单侧栏" />
+                  <el-radio value="mix" label="双侧栏" />
+                  <el-radio value="box" label="仅一级侧栏" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="顶栏风格">
+                <el-radio-group
+                  :disabled="layout === 'side'"
+                  v-model="headerStyle"
+                >
+                  <el-radio value="light" label="亮色风格" />
+                  <el-radio value="dark" label="暗色风格" />
+                  <el-radio value="primary" label="主色风格" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="侧栏风格">
+                <el-radio-group
+                  :disabled="layout === 'top'"
+                  v-model="sidebarStyle"
+                >
+                  <el-radio value="light" label="亮色风格" />
+                  <el-radio value="dark" label="暗色风格" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="双侧栏二级风格">
+                <el-radio-group
+                  :disabled="sidebarLayout !== 'mix'"
+                  v-model="mixSidebarStyle"
+                >
+                  <el-radio value="light" label="亮色风格" />
+                  <el-radio value="dark" label="暗色风格" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="页签栏">
+                <el-radio-group v-model="tabBar">
+                  <el-radio :value="true" label="显示" />
+                  <el-radio value="header" label="显示在顶栏" />
+                  <el-radio :value="false" label="不显示" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="页签风格">
+                <el-radio-group :disabled="!tabBar" v-model="tabStyle">
+                  <el-radio value="simple" label="默认风格" />
+                  <el-radio value="indicator" label="圆点风格" />
+                  <el-radio value="tag" label="标签风格" />
+                  <el-radio value="button" label="卡片风格" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="面包屑">
+                <el-radio-group v-model="breadcrumb">
+                  <el-radio :value="true" label="显示" />
+                  <el-radio :value="false" label="不显示" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="内容区域滚动">
+                <el-radio-group v-model="fixedBody">
+                  <el-radio :value="true" label="是" />
+                  <el-radio :value="false" label="否" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="固定顶栏">
+                <el-radio-group :disabled="fixedBody" v-model="fixedHeader">
+                  <el-radio :value="true" label="是" />
+                  <el-radio :value="false" label="否" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="固定侧栏">
+                <el-radio-group :disabled="fixedBody" v-model="fixedSidebar">
+                  <el-radio :value="true" label="是" />
+                  <el-radio :value="false" label="否" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="Logo 位置">
+                <el-radio-group
+                  :disabled="layout === 'top' || layout === 'side' || mobile"
+                  v-model="logoInHeader"
+                >
+                  <el-radio :value="true" label="顶栏" />
+                  <el-radio :value="false" label="侧栏" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="内容区最大化">
+                <el-radio-group v-model="maximized">
+                  <el-radio :value="false" label="否" />
+                  <el-radio :value="true" label="是" />
+                  <el-radio value="expanded" label="不带页签栏" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="折叠侧栏">
+                <el-radio-group
+                  :disabled="
+                    (layout === 'top' || sidebarLayout === 'box') && !mobile
+                  "
+                  v-model="collapse"
+                >
+                  <el-radio :value="false" label="否" />
+                  <el-radio :value="true" label="是" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="折叠双侧栏一级">
+                <el-radio-group
+                  :disabled="layout === 'top' || sidebarLayout === 'default'"
+                  v-model="compact"
+                >
+                  <el-radio :value="false" label="否" />
+                  <el-radio :value="true" label="是" />
+                </el-radio-group>
+              </option-item>
+              <option-item label="移动端风格">
+                <el-radio-group v-model="mobile">
+                  <el-radio :value="true" label="是" />
+                  <el-radio :value="false" label="否" />
+                </el-radio-group>
+              </option-item>
+              <option-item v-if="layout !== 'side'" label="顶栏高度">
+                <div style="max-width: 160px">
+                  <el-slider v-model="headerHeight" :min="38" :max="68" />
+                </div>
+              </option-item>
+              <option-item v-if="sidebarLayout === 'mix'" label="侧栏宽度">
+                <div style="max-width: 160px">
+                  <el-slider v-model="sidebarMixWidth" :min="100" :max="260" />
+                </div>
+              </option-item>
+              <option-item v-else label="侧栏宽度">
+                <div style="max-width: 160px">
+                  <el-slider v-model="sidebarWidth" :min="120" :max="280" />
+                </div>
+              </option-item>
+              <option-item
+                v-if="sidebarLayout === 'mix'"
+                label="双侧栏一级宽度"
+              >
+                <div style="max-width: 160px">
+                  <el-slider v-model="sideboxWidth" :min="60" :max="120" />
+                </div>
+              </option-item>
+            </ele-card>
+          </div>
+          <div style="padding: 16px 0; text-align: center; opacity: 0.6">
+            我是页脚&emsp;我是页脚&emsp;我是页脚
+          </div>
+        </ele-admin-layout>
+      </div>
+    </frame-card>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, markRaw } from 'vue';
+  import { LayoutTool } from 'ele-admin-plus';
+  import { useTimer } from 'ele-admin-plus/es/utils/hook';
+  import {
+    SettingOutlined,
+    UserOutlined,
+    IdcardOutlined,
+    LogOutlined,
+    CalendarOutlined,
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    ReloadOutlined,
+    ExpandOutlined,
+    MoreOutlined
+  } from '@/components/icons';
+  import type {
+    Layout,
+    SidebarLayout,
+    TabBar,
+    HeaderStyle,
+    SidebarStyle,
+    TabStyle,
+    Maximized
+  } from 'ele-admin-plus/es/ele-admin-layout/types';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import type { TabPaneItem } from 'ele-admin-plus/es/ele-tabs/types';
+  import type { BreadcrumbItem } from 'ele-admin-plus/es/ele-breadcrumb/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+  import FrameCard from './frame-card.vue';
+
+  const layoutRef = ref<any>(null);
+
+  const headerMenus = ref<MenuItem[]>([
+    {
+      index: '/personnel',
+      title: '人事系统',
+      icon: markRaw(UserOutlined)
+    },
+    {
+      index: '/finance',
+      title: '财务系统',
+      icon: markRaw(SettingOutlined)
+    }
+  ]);
+
+  const headerActive = ref('/personnel');
+
+  const sidebarMenus = ref<MenuItem[]>([
+    {
+      index: '/system',
+      title: '系统管理',
+      icon: markRaw(SettingOutlined),
+      children: [
+        {
+          index: '/system/user',
+          title: '用户管理',
+          icon: markRaw(UserOutlined)
+        },
+        {
+          index: '/system/role',
+          title: '角色管理',
+          icon: markRaw(IdcardOutlined)
+        }
+      ]
+    },
+    {
+      index: '/log',
+      title: '日志管理',
+      icon: markRaw(LogOutlined),
+      children: [
+        {
+          index: '/log/login',
+          title: '登录日志',
+          icon: markRaw(CalendarOutlined)
+        }
+      ]
+    },
+    {
+      index: '/profile',
+      title: '个人中心',
+      icon: markRaw(UserOutlined)
+    }
+  ]);
+
+  const sidebarActive = ref('/system/user');
+
+  const sideboxMenus = ref<MenuItem[]>([
+    {
+      index: '/system',
+      title: '系统',
+      group: true,
+      children: [
+        {
+          index: '/system/user',
+          title: '用户管理',
+          icon: markRaw(UserOutlined)
+        },
+        {
+          index: '/system/role',
+          title: '角色管理',
+          icon: markRaw(IdcardOutlined)
+        }
+      ]
+    },
+    {
+      index: '/log',
+      title: '其它',
+      group: true,
+      children: [
+        {
+          index: '/log/login',
+          title: '登录日志',
+          icon: markRaw(CalendarOutlined)
+        },
+        {
+          index: '/profile',
+          title: '个人中心',
+          icon: markRaw(UserOutlined)
+        }
+      ]
+    }
+  ]);
+
+  const sideboxActive = ref('/system/user');
+
+  const tabs = ref<TabPaneItem[]>([
+    { name: '/system/user', label: '用户管理', closable: true },
+    { name: '/system/role', label: '角色管理', closable: true }
+  ]);
+
+  const tabActive = ref('/system/user');
+
+  const levels = ref<BreadcrumbItem[]>([
+    { title: '首页' },
+    { title: '系统管理' },
+    { title: '用户管理' }
+  ]);
+
+  const layout = ref<Layout>('default');
+
+  const sidebarLayout = ref<SidebarLayout>('mix');
+
+  const tabBar = ref<TabBar>(true);
+
+  const breadcrumb = ref(true);
+
+  const headerStyle = ref<HeaderStyle>('light');
+
+  const sidebarStyle = ref<SidebarStyle>('light');
+
+  const mixSidebarStyle = ref<SidebarStyle>('light');
+
+  const tabStyle = ref<TabStyle>('button');
+
+  const fixedHeader = ref(true);
+
+  const fixedSidebar = ref(true);
+
+  const fixedBody = ref(true);
+
+  const logoInHeader = ref(false);
+
+  const maximized = ref<Maximized>(false);
+
+  const collapse = ref(false);
+
+  const compact = ref(false);
+
+  const mobile = ref(false);
+
+  const headerHeight = ref(54);
+
+  const sidebarWidth = ref(220);
+
+  const sideboxWidth = ref(80);
+
+  const sidebarMixWidth = ref(160);
+
+  const [startDisableTransitionTimer] = useTimer(400);
+
+  watch([headerHeight, sidebarWidth, sideboxWidth, sidebarMixWidth], () => {
+    const el = layoutRef.value?.$el;
+    el?.classList?.add?.('is-transition-disabled');
+    startDisableTransitionTimer(() => {
+      el?.classList?.remove?.('is-transition-disabled');
+    });
+  });
+</script>
+
+<style lang="scss" scoped>
+  .demo-layout-wrapper :deep(.option-item) {
+    align-items: flex-start;
+
+    .option-item-label {
+      width: 106px;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    & + .option-item {
+      margin-top: 16px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/layout/components/demo-menu.vue b/z_ele/src/views/extension/layout/components/demo-menu.vue
new file mode 100644
index 0000000..6cbb58e
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/demo-menu.vue
@@ -0,0 +1,339 @@
+<template>
+  <ele-card header="多列菜单" :body-style="{ padding: '12px' }">
+    <frame-card>
+      <ele-admin-layout
+        :height="600"
+        :sidebarMenus="sidebarMenus"
+        :sidebarActive="sidebarActive"
+        :tabs="tabs"
+        :tabActive="tabActive"
+        :tabBar="true"
+        :fixedHome="true"
+        sidebarStyle="dark"
+        v-model:collapse="collapse"
+        :menu-scroll-to-active="false"
+        :sidebar-menu-props="{
+          collapse: false,
+          textEllipsisTooltip: true,
+          mode: collapse && !mobile ? 'compact' : 'vertical',
+          popperOffset: 10
+        }"
+        :mobile="mobile"
+        :style="{ '--ele-sidebar-collapse-width': '74px' }"
+        class="demo-menu-wrapper"
+      >
+        <template #logo>
+          <div style="display: flex; align-items: center; gap: 4px">
+            <img src="@/assets/logo.svg" style="width: 22px; height: 22px" />
+            <h1>Ele Admin</h1>
+          </div>
+          <h1>后台管理模板系统</h1>
+        </template>
+        <template #left>
+          <layout-tool @click="collapse = !collapse">
+            <el-icon style="transform: scale(1.14)">
+              <MenuUnfoldOutlined v-if="collapse" />
+              <MenuFoldOutlined v-else />
+            </el-icon>
+          </layout-tool>
+          <layout-tool>
+            <el-icon style="transform: scale(1.09)">
+              <ReloadOutlined />
+            </el-icon>
+          </layout-tool>
+        </template>
+        <template #right>
+          <layout-tool>
+            <el-icon style="transform: scale(1.17)">
+              <BellOutlined />
+            </el-icon>
+          </layout-tool>
+          <layout-tool style="padding-left: 4px; padding-right: 4px">
+            <div
+              :style="{
+                width: '28px',
+                height: '28px',
+                borderRadius: '50%',
+                background: 'var(--el-color-primary-light-8)',
+                marginRight: '6px'
+              }"
+            ></div>
+            <div>用户名</div>
+            <el-icon :size="13" style="margin: 0 0 0 2px">
+              <ArrowDown />
+            </el-icon>
+          </layout-tool>
+        </template>
+        <template #icon="{ icon }">
+          <img v-if="icon" :src="icon" class="demo-menu-icon" />
+        </template>
+        <div :style="{ flex: 'auto', padding: '12px 12px 0 12px' }">
+          <ele-card
+            :body-style="{ padding: '12px' }"
+            style="margin-bottom: 12px"
+          >
+            <div
+              :style="{
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                background: 'var(--el-color-primary-light-8)'
+              }"
+            ></div>
+          </ele-card>
+          <el-row :gutter="12">
+            <el-col :span="12">
+              <ele-card style="height: 120px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="12">
+              <ele-card style="height: 120px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="16">
+              <ele-card style="height: 332px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <div>
+                <ele-card style="height: 160px; margin-bottom: 12px" />
+                <ele-card style="height: 160px; margin-bottom: 12px" />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+          </el-row>
+        </div>
+        <div style="padding: 4px 0 16px 0; text-align: center; opacity: 0.4">
+          页脚页脚&emsp;页脚页脚&emsp;页脚页脚
+        </div>
+      </ele-admin-layout>
+    </frame-card>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { LayoutTool } from 'ele-admin-plus';
+  import {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    ReloadOutlined,
+    BellOutlined,
+    ArrowDown
+  } from '@/components/icons';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import type { TabPaneItem } from 'ele-admin-plus/es/ele-tabs/types';
+  import { useMobile } from '@/utils/use-mobile';
+  import FrameCard from './frame-card.vue';
+
+  const sidebarMenus = computed<MenuItem[]>(() => {
+    return [
+      {
+        index: '/home',
+        title: '工作台',
+        icon: 'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/wosIntro4.73c5f876.png'
+      },
+      {
+        index: '/system',
+        title: '系统管理',
+        group: mobile.value || !collapse.value,
+        icon: 'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/wosIntro5.3dafe778.png',
+        children: [
+          {
+            index: '/system/user',
+            title: '用户管理'
+          },
+          {
+            index: '/system/role',
+            title: '角色管理'
+          },
+          {
+            index: '/system/menu',
+            title: '菜单管理'
+          },
+          {
+            index: '/system/organization',
+            title: '机构管理'
+          },
+          {
+            index: '/system/tenant',
+            title: '租户管理'
+          },
+          {
+            index: '/system/dictionary',
+            title: '字典管理'
+          }
+        ],
+        popperClass: 'demo-menu-pop'
+      },
+      {
+        index: '/data',
+        title: '数据中心',
+        group: mobile.value || !collapse.value,
+        icon: 'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/wosIntro3.fe812660.png',
+        children: [
+          {
+            index: '/data/operation',
+            title: '运营数据'
+          },
+          {
+            index: '/data/member',
+            title: '会员数据'
+          },
+          {
+            index: '/data/sell',
+            title: '销售数据'
+          },
+          {
+            index: '/data/financial',
+            title: '财务数据'
+          },
+          {
+            index: '/data/channel',
+            title: '渠道数据'
+          }
+        ],
+        popperClass: 'demo-menu-pop'
+      }
+    ];
+  });
+
+  const sidebarActive = ref('/home');
+
+  const tabs = ref<TabPaneItem[]>([
+    { name: '/system/user', label: '用户管理', closable: true },
+    { name: '/system/role', label: '角色管理', closable: true }
+  ]);
+
+  const tabActive = ref('/system/user');
+
+  const collapse = ref(false);
+
+  const { mobile } = useMobile();
+</script>
+
+<style lang="scss" scoped>
+  .demo-menu-wrapper :deep(.ele-admin-sidebar) {
+    background: #121319;
+    --el-color-primary: #328dfc;
+
+    .el-menu {
+      padding: 0 8px;
+      --ele-menu-dark-color: #fff;
+
+      &::before,
+      &::after {
+        display: none !important;
+      }
+
+      & > .el-menu-item,
+      & > .el-sub-menu > .el-sub-menu__title {
+        margin: 0 0 8px 0 !important;
+        height: 38px;
+        line-height: 38px;
+        border-radius: 6px;
+        padding: 0 6px;
+      }
+    }
+
+    .el-menu-item-group {
+      & > .el-menu-item-group__title {
+        margin: 0 0 8px 0 !important;
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 14px;
+        height: 32px !important;
+        line-height: 32px !important;
+        padding: 0 6px !important;
+      }
+
+      & > ul {
+        display: grid;
+        grid-gap: 6px;
+        grid-template-columns: repeat(2, 1fr);
+        padding: 8px;
+        border-radius: 6px;
+        background: #25293a;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+
+        &::before,
+        &::after {
+          display: none !important;
+        }
+
+        & > .el-menu-item {
+          margin: 0 !important;
+          height: 36px !important;
+          line-height: 36px !important;
+          border-radius: 6px !important;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .demo-menu-icon {
+      width: 22px;
+      height: 22px;
+      margin-right: 4px;
+    }
+
+    .ele-admin-logo {
+      height: auto;
+      flex-direction: column;
+      padding: 12px 0;
+    }
+
+    &.is-collapse {
+      .ele-admin-logo {
+        h1 {
+          display: none;
+        }
+
+        img {
+          width: 30px !important;
+          height: 30px !important;
+        }
+      }
+
+      .el-menu {
+        & > .el-menu-item,
+        & > .el-sub-menu > .el-sub-menu__title {
+          height: auto !important;
+          padding: 8px 0 !important;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  .demo-menu-pop {
+    ul.el-menu {
+      display: grid;
+      grid-gap: 6px;
+      grid-template-columns: repeat(2, 1fr);
+      padding: 8px;
+      border-radius: 6px;
+      background: #25293a !important;
+      box-sizing: border-box;
+
+      &::before,
+      &::after {
+        display: none !important;
+      }
+
+      & > .el-menu-item {
+        margin: 0 !important;
+        height: 36px !important;
+        line-height: 36px !important;
+        border-radius: 6px !important;
+        overflow: hidden;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/layout/components/demo-side.vue b/z_ele/src/views/extension/layout/components/demo-side.vue
new file mode 100644
index 0000000..499bdad
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/demo-side.vue
@@ -0,0 +1,246 @@
+<template>
+  <ele-card header="自定义侧栏样式" :body-style="{ padding: '12px' }">
+    <div style="margin-bottom: 8px">
+      通过 sidebarCustomStyle 属性设置圆角和外间距，通过 sidebarMenuProps
+      属性设置在折叠时菜单风格改为双侧栏一级的风格
+    </div>
+    <frame-card>
+      <ele-admin-layout
+        :height="520"
+        :sidebar-menus="sidebarMenus"
+        :sidebar-active="sidebarActive"
+        :fixed-body="true"
+        :logo-in-header="true"
+        :tab-bar="false"
+        :breadcrumb="false"
+        sidebar-style="light"
+        :sidebar-custom-style="{
+          borderRadius: mobile ? 0 : '8px',
+          margin: mobile ? 0 : '12px 0 12px 12px',
+          boxShadow: 'none'
+        }"
+        :header-custom-style="{ paddingRight: '4px' }"
+        :menu-scroll-to-active="false"
+        v-model:collapse="collapse"
+        :sidebar-menu-props="{
+          collapse: false,
+          mode: collapse && !mobile ? 'compact' : 'vertical',
+          style: { '--ele-menu-compact-item-padding': '8px 0' }
+        }"
+        :mobile="mobile"
+        :style="{
+          '--ele-sidebar-width': '180px',
+          '--ele-sidebar-collapse-width': '68px',
+          zIndex: 99
+        }"
+        class="demo-side-wrapper"
+      >
+        <template #logo>
+          <img src="@/assets/logo.svg" />
+        </template>
+        <template #logoTitle>
+          <h1>Ele Admin</h1>
+        </template>
+        <template #right>
+          <layout-tool>
+            <el-icon style="transform: scale(1.17)">
+              <BellOutlined />
+            </el-icon>
+          </layout-tool>
+          <layout-tool style="padding-left: 4px; padding-right: 4px">
+            <div
+              :style="{
+                width: '28px',
+                height: '28px',
+                borderRadius: '50%',
+                background: 'var(--el-color-primary-light-8)',
+                marginRight: '6px'
+              }"
+            ></div>
+            <div>用户名</div>
+            <el-icon :size="13" style="margin: 0 0 0 2px">
+              <ArrowDown />
+            </el-icon>
+          </layout-tool>
+        </template>
+        <template #top>
+          <div
+            :style="{
+              padding: collapse && !mobile ? '6px' : '12px',
+              borderBottom: '1px solid var(--el-border-color-lighter)'
+            }"
+          >
+            <el-button
+              v-if="collapse && !mobile"
+              type="primary"
+              :icon="UploadOutlined"
+              :round="true"
+              :style="{ width: '100%' }"
+            />
+            <el-button
+              v-else
+              type="primary"
+              :icon="UploadOutlined"
+              :round="true"
+              :style="{ width: '100%', fontSize: '13px', overflow: 'hidden' }"
+            >
+              发布作品
+            </el-button>
+          </div>
+        </template>
+        <template v-if="!mobile" #bottom>
+          <div :style="{ flexShrink: 0, padding: '8px' }">
+            <layout-tool style="height: 32px" @click="collapse = !collapse">
+              <el-icon style="transform: scale(1.05)">
+                <MenuUnfoldOutlined v-if="collapse" />
+                <MenuFoldOutlined v-else />
+              </el-icon>
+            </layout-tool>
+          </div>
+        </template>
+        <template v-else #left>
+          <layout-tool @click="collapse = !collapse">
+            <el-icon style="transform: scale(1.14)">
+              <MenuUnfoldOutlined v-if="collapse" />
+              <MenuFoldOutlined v-else />
+            </el-icon>
+          </layout-tool>
+        </template>
+        <div :style="{ flex: 'auto', padding: '12px 12px 0 12px' }">
+          <ele-card
+            :body-style="{ padding: '12px' }"
+            style="margin-bottom: 12px"
+          >
+            <div
+              :style="{
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                background: 'var(--el-color-primary-light-8)'
+              }"
+            ></div>
+          </ele-card>
+          <el-row :gutter="12">
+            <el-col :span="12">
+              <ele-card style="height: 120px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="12">
+              <ele-card style="height: 120px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="16">
+              <ele-card style="height: 332px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <div>
+                <ele-card style="height: 160px; margin-bottom: 12px" />
+                <ele-card style="height: 160px; margin-bottom: 12px" />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+            <el-col :span="8">
+              <ele-card style="height: 160px; margin-bottom: 12px" />
+            </el-col>
+          </el-row>
+        </div>
+        <div style="padding: 4px 0 16px 0; text-align: center; opacity: 0.4">
+          页脚页脚&emsp;页脚页脚&emsp;页脚页脚
+        </div>
+      </ele-admin-layout>
+    </frame-card>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, markRaw } from 'vue';
+  import { LayoutTool } from 'ele-admin-plus';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import {
+    HomeFilled,
+    VideoCameraFilled,
+    WalletFilled,
+    UserFilled,
+    Promotion
+  } from '@element-plus/icons-vue';
+  import {
+    BellOutlined,
+    ArrowDown,
+    UploadOutlined,
+    MenuFoldOutlined,
+    MenuUnfoldOutlined
+  } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import FrameCard from './frame-card.vue';
+
+  const sidebarMenus = computed<MenuItem[]>(() => {
+    const isCollapse = collapse.value;
+    return [
+      {
+        index: '/home',
+        title: '首页',
+        icon: markRaw(HomeFilled),
+        iconProps: { style: { marginTop: '-2px' } }
+      },
+      {
+        index: '/creater',
+        title: isCollapse ? '创作' : '创作中心',
+        group: true,
+        children: [
+          {
+            index: '/product',
+            title: isCollapse ? '作品' : '我的作品',
+            icon: markRaw(VideoCameraFilled),
+            iconProps: { style: { marginTop: '-2px' } }
+          },
+          {
+            index: '/income',
+            title: isCollapse ? '收益' : '作品收益',
+            icon: markRaw(WalletFilled),
+            iconProps: { style: { marginTop: '-2px' } }
+          }
+        ]
+      },
+      {
+        index: '/interaction',
+        title: isCollapse ? '互动' : '互动中心',
+        group: true,
+        children: [
+          {
+            index: '/letter',
+            title: isCollapse ? '私信' : '我的私信',
+            icon: markRaw(Promotion),
+            iconProps: { style: { marginTop: '-2px' } }
+          },
+          {
+            index: '/follow',
+            title: isCollapse ? '粉丝' : '我的粉丝',
+            icon: markRaw(UserFilled),
+            iconProps: { style: { marginTop: '-2px' } }
+          }
+        ]
+      }
+    ];
+  });
+
+  const sidebarActive = ref('/home');
+
+  const collapse = ref(false);
+
+  const { mobile } = useMobile();
+</script>
+
+<style lang="scss" scoped>
+  .demo-side-wrapper :deep(.el-menu-item) {
+    & > .el-icon {
+      color: var(--el-text-color-placeholder);
+    }
+
+    &.is-active > .el-icon {
+      color: var(--el-color-primary);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/layout/components/demo-top-layout.vue b/z_ele/src/views/extension/layout/components/demo-top-layout.vue
new file mode 100644
index 0000000..401e440
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/demo-top-layout.vue
@@ -0,0 +1,220 @@
+<template>
+  <ele-admin-layout
+    layout="top"
+    :header-menus="headerMenus"
+    :fixed-header="fixedHeader"
+    :header-custom-style="{
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(12px)',
+      boxShadow: 'none',
+      borderBottom: '1px solid rgba(0, 0, 0, 0.04)',
+      paddingRight: mobile ? '2px' : '12px',
+      overflow: 'hidden'
+    }"
+    :header-menu-props="{
+      menuTrigger: mobile ? 'click' : 'hover',
+      style: { '--el-color-primary-light-9': 'rgba(22, 119, 255, 0.1)' }
+    }"
+    :logo-style="{
+      marginLeft: mobile ? '12px' : '24px',
+      flex: mobile ? 1 : 'none',
+      justifyContent: 'flex-start'
+    }"
+    :header-menus-style="{
+      margin: mobile ? '0 -6px 0 -20px' : '0 0 0 20px',
+      flex: mobile ? 'none' : 1,
+      order: mobile ? 1 : 0
+    }"
+    :tab-bar="false"
+    :breadcrumb="false"
+    :fixed-body="false"
+    :back-top="false"
+    :menu-scroll-to-active="false"
+    :style="{
+      background: 'none',
+      '--ele-header-tool-padding': mobile ? '8px' : '10px'
+    }"
+  >
+    <template #logo>
+      <img src="@/assets/logo.svg" />
+    </template>
+    <template #logoTitle>
+      <h1>Ele Admin</h1>
+    </template>
+    <template #right>
+      <layout-tool>登录</layout-tool>
+      <layout-tool>注册</layout-tool>
+    </template>
+    <div :style="{ flex: 'auto' }">
+      <el-carousel
+        height="320px"
+        style="margin-top: calc(0px - var(--ele-header-height) - 1px)"
+      >
+        <el-carousel-item v-for="item in banner" :key="item">
+          <img
+            :src="item"
+            :style="{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              display: 'block',
+              pointerEvents: 'none'
+            }"
+            class="demo-banner-img"
+          />
+        </el-carousel-item>
+      </el-carousel>
+      <div
+        :style="{
+          maxWidth: '820px',
+          margin: '0 auto',
+          padding: '0 12px 22px 12px',
+          overflow: 'hidden'
+        }"
+      >
+        <div style="text-align: center; padding: 28px 0 20px 0">
+          <ele-text size="lg" type="heading">标题标题标题</ele-text>
+          <ele-text size="sm" type="secondary">描述描述描述</ele-text>
+        </div>
+        <el-row :gutter="16">
+          <el-col v-for="index in 8" :key="index" :md="6" :sm="8" :xs="12">
+            <ele-card style="border-radius: 0; min-height: 140px" />
+          </el-col>
+        </el-row>
+      </div>
+      <div
+        :style="{
+          textAlign: 'center',
+          padding: '26px 0',
+          backgroundImage:
+            'url(https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/ZhuceBg.d0ce1f1c.png)',
+          backgroundSize: '100% 100%'
+        }"
+      >
+        <div style="color: #fff; font-size: 16px">
+          文本文本文本文本文本文本文本文本
+        </div>
+        <div
+          :style="{
+            width: '88px',
+            margin: '0 auto',
+            padding: '6px 0',
+            borderRadius: '4px',
+            color: 'var(--el-color-primary)',
+            marginTop: '12px',
+            background: '#fff',
+            cursor: 'pointer'
+          }"
+        >
+          按钮按钮
+        </div>
+      </div>
+    </div>
+    <div
+      :style="{
+        color: '#999',
+        fontSize: '13px',
+        background: '#17181B',
+        padding: '22px 0 12px 0'
+      }"
+    >
+      <div
+        :style="{
+          maxWidth: '820px',
+          margin: '0 auto',
+          padding: '0 12px',
+          overflow: 'hidden'
+        }"
+      >
+        <el-row :gutter="16">
+          <el-col v-for="index in 4" :key="index" :sm="6" :xs="12">
+            <div style="width: max-content; margin: 12px auto">
+              <div style="color: #fff; font-size: 14px">标题标题</div>
+              <div style="margin-top: 8px; line-height: 2">
+                <div>文字文字文字</div>
+                <div>文字文字文字</div>
+                <div>文字文字文字</div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <div
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderTop: '1px solid #333',
+            paddingTop: '12px',
+            marginTop: '22px'
+          }"
+        >
+          <template v-for="index in 4" :key="index">
+            <div>文字文字</div>
+            <div
+              v-if="index !== 4"
+              :style="{
+                borderLeft: '1px solid #444',
+                height: '12px',
+                margin: '0 12px'
+              }"
+            ></div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </ele-admin-layout>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, markRaw } from 'vue';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import { LayoutTool } from 'ele-admin-plus';
+  import { MenuOutlined } from '@/components/icons';
+
+  const props = defineProps<{
+    fixedHeader?: boolean;
+    mobile?: boolean;
+  }>();
+
+  /** 菜单 */
+  const headerMenus = computed<MenuItem[]>(() => {
+    const menus = [
+      { index: '/index', title: '首页' },
+      { index: '/service', title: '产品和服务' },
+      { index: '/product', title: '解决方案' },
+      { index: '/cases', title: '客户案例' }
+    ];
+    if (props.mobile) {
+      return [
+        {
+          index: '/menus',
+          title: '',
+          icon: markRaw(MenuOutlined),
+          iconProps: { style: { margin: 0 } },
+          iconStyle: { transform: 'translateY(-1px)' },
+          children: menus,
+          style: {
+            '--ele-menu-arrow-size': props.mobile ? '0px' : '14px',
+            '--ele-menu-horizontal-active-bg': 'transparent',
+            '--ele-menu-horizontal-line-size': 0,
+            '--el-menu-active-color': 'var(--el-text-color-primary)'
+          }
+        }
+      ];
+    }
+    return menus;
+  });
+
+  /** 轮播图 */
+  const banner = ref([
+    'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/L101.0a6f1b83.jpg',
+    'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/L108.d7c6f061.png',
+    'https://cdn2.weimob.com/saas/@assets/saas-fe-website-web-stc/_next/static/media/L100.98e3daa4.jpg'
+  ]);
+</script>
+
+<style lang="scss">
+  html.dark .demo-banner-img {
+    filter: brightness(78%);
+  }
+</style>
diff --git a/z_ele/src/views/extension/layout/components/demo-top.vue b/z_ele/src/views/extension/layout/components/demo-top.vue
new file mode 100644
index 0000000..2ad156b
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/demo-top.vue
@@ -0,0 +1,24 @@
+<template>
+  <ele-card header="用于前台网站" :body-style="{ padding: '12px' }">
+    <frame-card>
+      <div
+        :style="{
+          height: '520px',
+          overflow: 'auto',
+          background: 'var(--ele-layout-bg)'
+        }"
+      >
+        <demo-top-layout :fixed-header="true" :mobile="mobile" />
+      </div>
+    </frame-card>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useMobile } from '@/utils/use-mobile';
+  import FrameCard from './frame-card.vue';
+  import DemoTopLayout from './demo-top-layout.vue';
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+</script>
diff --git a/z_ele/src/views/extension/layout/components/frame-card.vue b/z_ele/src/views/extension/layout/components/frame-card.vue
new file mode 100644
index 0000000..ae3fce9
--- /dev/null
+++ b/z_ele/src/views/extension/layout/components/frame-card.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="frame-wrapper">
+    <div class="frame-header">
+      <div class="frame-tool"></div>
+      <div class="frame-tool is-warning"></div>
+      <div class="frame-tool is-success"></div>
+      <div></div>
+    </div>
+    <div class="frame-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .frame-wrapper {
+    max-width: 920px;
+    margin: 0 auto;
+  }
+
+  .frame-header {
+    display: flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 16px;
+    background: #3c3c3c;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  .frame-tool {
+    width: 10px;
+    height: 10px;
+    margin-right: 10px;
+    border-radius: 50%;
+    background: #ff4a4a;
+
+    &.is-warning {
+      background: #ffb83d;
+    }
+
+    &.is-success {
+      background: #00c543;
+    }
+  }
+
+  .frame-body {
+    border-left: 6px solid #3c3c3c;
+    border-right: 6px solid #3c3c3c;
+    border-bottom: 6px solid #3c3c3c;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    overflow: auto;
+  }
+</style>
diff --git a/z_ele/src/views/extension/layout/index.vue b/z_ele/src/views/extension/layout/index.vue
new file mode 100644
index 0000000..ce83d49
--- /dev/null
+++ b/z_ele/src/views/extension/layout/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <ele-page>
+    <demo-basic />
+    <demo-side />
+    <demo-menu />
+    <demo-top />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoSide from './components/demo-side.vue';
+  import DemoMenu from './components/demo-menu.vue';
+  import DemoTop from './components/demo-top.vue';
+
+  defineOptions({ name: 'ExtensionLayout' });
+</script>
diff --git a/z_ele/src/views/extension/map/components/demo-map.vue b/z_ele/src/views/extension/map/components/demo-map.vue
new file mode 100644
index 0000000..d6dafa8
--- /dev/null
+++ b/z_ele/src/views/extension/map/components/demo-map.vue
@@ -0,0 +1,99 @@
+<template>
+  <ele-card header="官网底部地图">
+    <div ref="locationMapRef" style="height: 360px; max-width: 800px"></div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { MAP_KEY } from '@/config/setting';
+
+  /** 是否是暗黑主题 */
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 地图容器 */
+  const locationMapRef = ref<HTMLElement | null>(null);
+
+  /** 官网底部地图的实例 */
+  let mapInsLocation: any;
+
+  /** 渲染官网底部地图 */
+  const renderLocationMap = () => {
+    AMapLoader.load({
+      key: MAP_KEY,
+      version: '2.0',
+      plugins: ['AMap.InfoWindow', 'AMap.Marker']
+    })
+      .then((AMap) => {
+        // 渲染地图
+        const option = {
+          zoom: 13, // 初缩放级别
+          center: [114.346084, 30.511215 + 0.005], // 初始中心点
+          mapStyle: darkMode.value ? 'amap://styles/dark' : void 0
+        };
+        mapInsLocation = new AMap.Map(locationMapRef.value, option);
+        // 创建信息窗体
+        const infoWindow = new AMap.InfoWindow({
+          content: `
+            <div style="color: #333;">
+              <div style="padding: 5px;font-size: 16px;">武汉易云智科技有限公司</div>
+              <div style="padding: 0 5px;">地址: 湖北省武汉市洪山区雄楚大道222号</div>
+              <div style="padding: 0 5px;">电话: 020-123456789</div>
+            </div>
+            <a
+              style="padding: 8px 0 0 5px;text-decoration: none;display: inline-block;color: #1677ff;"
+              href="//uri.amap.com/marker?position=114.346084,30.511215&name=武汉易云智科技有限公司"
+              target="_blank">到这里去→
+            </a>
+          `
+        });
+        infoWindow.open(mapInsLocation, [114.346084, 30.511215]);
+        const icon = new AMap.Icon({
+          size: new AMap.Size(25, 34),
+          image:
+            '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+          imageSize: new AMap.Size(25, 34)
+        });
+        const marker = new AMap.Marker({
+          icon: icon,
+          position: [114.346084, 30.511215],
+          offset: new AMap.Pixel(-12, -28)
+        });
+        marker.setMap(mapInsLocation);
+        marker.on('click', () => {
+          infoWindow.open(mapInsLocation);
+        });
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  /** 渲染地图 */
+  onMounted(() => {
+    renderLocationMap();
+  });
+
+  /** 销毁地图 */
+  onBeforeUnmount(() => {
+    if (mapInsLocation) {
+      mapInsLocation.destroy();
+      mapInsLocation = null;
+    }
+  });
+
+  /** 同步框架暗黑模式切换 */
+  watch(darkMode, (value) => {
+    if (mapInsLocation) {
+      if (value) {
+        mapInsLocation.setMapStyle('amap://styles/dark');
+      } else {
+        mapInsLocation.setMapStyle('amap://styles/normal');
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/extension/map/components/demo-picker.vue b/z_ele/src/views/extension/map/components/demo-picker.vue
new file mode 100644
index 0000000..f0dcbd3
--- /dev/null
+++ b/z_ele/src/views/extension/map/components/demo-picker.vue
@@ -0,0 +1,95 @@
+<template>
+  <ele-card header="地图位置选择">
+    <div>
+      <ele-dropdown
+        v-model="mode"
+        :items="[
+          { title: '点击地图模式', command: 'lnglat' },
+          { title: '关键字检索模式', command: 'keyword' },
+          { title: 'POI检索模式', command: 'poi' }
+        ]"
+        trigger="click"
+        style="margin-right: 12px"
+      >
+        <template #default="{ selected }">
+          <el-button class="ele-btn-icon" style="width: 134px">
+            <span>{{ selected?.title }}</span>
+            <el-icon :size="12" style="margin: 0 -4px 0 2px">
+              <ArrowDown />
+            </el-icon>
+          </el-button>
+        </template>
+      </ele-dropdown>
+      <el-button type="primary" class="ele-btn-icon" @click="openMapPicker">
+        打开位置选择
+      </el-button>
+    </div>
+    <div style="margin-top: 12px">经 纬 度 : {{ result.lngAndLat }}</div>
+    <div style="margin-top: 12px">选中位置: {{ result.location }}</div>
+    <div style="margin-top: 12px">详细地址: {{ result.address }}</div>
+  </ele-card>
+  <!-- 地图位置选择弹窗 -->
+  <ele-map-picker
+    v-model="visible"
+    :return-regions="true"
+    :selected="selectedData"
+    :dark-mode="darkMode"
+    :mode="mode"
+    height="100%"
+    :modal-props="{
+      bodyStyle: { height: '460px', minHeight: '100%', maxHeight: '100%' },
+      maxable: true,
+      resizable: true,
+      resizeIconStyle: { zIndex: 200 },
+      minWidth: 372,
+      minHeight: 280
+    }"
+    :side-style="{ maxWidth: '448px' }"
+    @done="handleChoose"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { ArrowDown } from '@/components/icons';
+  import type {
+    PoiItem,
+    SelectMode
+  } from 'ele-admin-plus/es/ele-map-picker/types';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 是否显示地图选择弹窗 */
+  const visible = ref(false);
+
+  /** 地点检索类型 */
+  const mode = ref<SelectMode>('lnglat');
+
+  /** 回显选中的位置 */
+  const selectedData = ref<PoiItem>();
+
+  /** 选择结果 */
+  const result = reactive({
+    location: '',
+    address: '',
+    lngAndLat: ''
+  });
+
+  /** 打开位置选择 */
+  const openMapPicker = () => {
+    visible.value = true;
+  };
+
+  /** 地图选择后回调 */
+  const handleChoose = (location: PoiItem) => {
+    console.log(JSON.parse(JSON.stringify(location)));
+    result.location = `${location.city?.province}/${location.city?.city}/${location.city?.district}`;
+    result.address = `${location.name} ${location.address}`;
+    result.lngAndLat = `${location.lng},${location.lat}`;
+    visible.value = false;
+    selectedData.value = location;
+  };
+</script>
diff --git a/z_ele/src/views/extension/map/components/demo-track.vue b/z_ele/src/views/extension/map/components/demo-track.vue
new file mode 100644
index 0000000..7b278ff
--- /dev/null
+++ b/z_ele/src/views/extension/map/components/demo-track.vue
@@ -0,0 +1,165 @@
+<template>
+  <ele-card header="轨迹展示及轨迹回放">
+    <div
+      ref="trackMapRef"
+      style="height: 360px; max-width: 800px; margin-bottom: 16px"
+    >
+    </div>
+    <div>
+      <el-button type="primary" class="ele-btn-icon" @click="startTrackAnim">
+        开始移动
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="pauseTrackAnim">
+        暂停移动
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="resumeTrackAnim">
+        继续移动
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { MAP_KEY } from '@/config/setting';
+
+  /** 是否是暗黑主题 */
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 地图容器 */
+  const trackMapRef = ref<HTMLElement | null>(null);
+
+  /** 小车轨迹地图的实例 */
+  let mapInsTrack: any;
+
+  /** 小车的 marker */
+  let carMarker: any;
+
+  /** 轨迹路线 */
+  const lineData = [
+    [116.478935, 39.997761],
+    [116.478939, 39.997825],
+    [116.478912, 39.998549],
+    [116.478912, 39.998549],
+    [116.478998, 39.998555],
+    [116.478998, 39.998555],
+    [116.479282, 39.99856],
+    [116.479658, 39.998528],
+    [116.480151, 39.998453],
+    [116.480784, 39.998302],
+    [116.480784, 39.998302],
+    [116.481149, 39.998184],
+    [116.481573, 39.997997],
+    [116.481863, 39.997846],
+    [116.482072, 39.997718],
+    [116.482362, 39.997718],
+    [116.483633, 39.998935],
+    [116.48367, 39.998968],
+    [116.484648, 39.999861]
+  ];
+
+  /** 渲染轨迹回放地图 */
+  const renderTrackMap = () => {
+    AMapLoader.load({
+      key: MAP_KEY,
+      version: '2.0',
+      plugins: ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
+    })
+      .then((AMap) => {
+        // 渲染地图
+        const option = {
+          zoom: 17,
+          center: [116.478935, 39.997761],
+          mapStyle: darkMode.value ? 'amap://styles/dark' : void 0
+        };
+        mapInsTrack = new AMap.Map(trackMapRef.value, option);
+        // 创建小车 marker
+        carMarker = new AMap.Marker({
+          map: mapInsTrack,
+          position: [116.478935, 39.997761],
+          icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
+          offset: new AMap.Pixel(-13, -26)
+        });
+        // 绘制轨迹
+        new AMap.Polyline({
+          map: mapInsTrack,
+          path: lineData,
+          showDir: true,
+          strokeColor: '#2288FF', // 线颜色
+          strokeOpacity: 1, // 线透明度
+          strokeWeight: 6 // 线宽
+          //strokeStyle: 'solid'  // 线样式
+        });
+        // 通过的轨迹
+        const passedPolyline = new AMap.Polyline({
+          map: mapInsTrack,
+          showDir: true,
+          strokeColor: '#44BB55', // 线颜色
+          strokeOpacity: 1, // 线透明度
+          strokeWeight: 6 // 线宽
+        });
+        // 小车移动回调
+        carMarker.on('moving', (e) => {
+          passedPolyline.setPath(e.passedPath);
+        });
+        // 地图自适应
+        mapInsTrack.setFitView();
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  /** 开始轨迹回放动画 */
+  const startTrackAnim = () => {
+    if (carMarker) {
+      carMarker.stopMove();
+      carMarker.moveAlong(lineData, {
+        duration: 200,
+        autoRotation: true
+      });
+    }
+  };
+
+  /** 暂停轨迹回放动画 */
+  const pauseTrackAnim = () => {
+    if (carMarker) {
+      carMarker.pauseMove();
+    }
+  };
+
+  /** 继续开始轨迹回放动画 */
+  const resumeTrackAnim = () => {
+    if (carMarker) {
+      carMarker.resumeMove();
+    }
+  };
+
+  /** 渲染地图 */
+  onMounted(() => {
+    renderTrackMap();
+  });
+
+  /** 销毁地图 */
+  onBeforeUnmount(() => {
+    if (mapInsTrack) {
+      mapInsTrack.destroy();
+      mapInsTrack = null;
+    }
+  });
+
+  /** 同步框架暗黑模式切换 */
+  watch(darkMode, () => {
+    if (mapInsTrack) {
+      if (darkMode.value) {
+        mapInsTrack.setMapStyle('amap://styles/dark');
+      } else {
+        mapInsTrack.setMapStyle('amap://styles/normal');
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/extension/map/index.vue b/z_ele/src/views/extension/map/index.vue
new file mode 100644
index 0000000..02c3149
--- /dev/null
+++ b/z_ele/src/views/extension/map/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <ele-page>
+    <demo-picker />
+    <demo-map />
+    <demo-track />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoPicker from './components/demo-picker.vue';
+  import DemoMap from './components/demo-map.vue';
+  import DemoTrack from './components/demo-track.vue';
+
+  defineOptions({ name: 'ExtensionMap' });
+</script>
diff --git a/z_ele/src/views/extension/markdown/index.vue b/z_ele/src/views/extension/markdown/index.vue
new file mode 100644
index 0000000..a9d212b
--- /dev/null
+++ b/z_ele/src/views/extension/markdown/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <ele-page>
+    <ele-card header="编辑器">
+      <byte-md-editor v-model="content" height="520px" :config="config" />
+    </ele-card>
+    <ele-card header="解析器">
+      <byte-md-viewer
+        :value="content"
+        :config="{ plugins: [gfm(), highlight()] }"
+        style="max-width: 880px; margin: 0 auto; padding: 24px"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
+  import ByteMdViewer from '@/components/ByteMdViewer/index.vue';
+  /** 中文语言文件 */
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  /** 链接/删除线/复选框/表格等插件 */
+  import gfm from '@bytemd/plugin-gfm';
+  /** 插件的中文语言文件 */
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  /** 代码高亮插件 */
+  import highlight from '@bytemd/plugin-highlight';
+  /** 代码高亮插件样式 */
+  import 'highlight.js/styles/github-dark.css';
+  //import 'highlight.js/styles/github.css';
+  /** 预览界面的样式, 这里用的github的markdown主题 */
+  //import 'github-markdown-css/github-markdown-dark.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import { getDemoMD } from '@/api/example';
+
+  defineOptions({ name: 'ExtensionMarkdown' });
+
+  /** 编辑器内容 */
+  const content = ref('');
+
+  /** 配置 */
+  const config = reactive({
+    locale: zh_Hans,
+    plugins: [gfm({ locale: zh_HansGfm }), highlight()],
+    editorConfig: { lineNumbers: true },
+    uploadImages: async (files: File[]) => {
+      const result: Record<'url' | 'alt' | 'title', string>[] = [];
+      files.forEach((file) => {
+        result.push({
+          url: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
+          alt: file.name,
+          title: ''
+        });
+      });
+      return result;
+    }
+  });
+
+  //
+  getDemoMD()
+    .then((res) => {
+      content.value = res;
+    })
+    .catch((e) => {
+      console.error(e);
+    });
+</script>
+
+<style lang="scss">
+  .markdown-body .highlight pre,
+  .markdown-body pre {
+    color: #e6edf3;
+    background-color: #161b22;
+  }
+</style>
diff --git a/z_ele/src/views/extension/menu/index.vue b/z_ele/src/views/extension/menu/index.vue
new file mode 100644
index 0000000..16dc5ad
--- /dev/null
+++ b/z_ele/src/views/extension/menu/index.vue
@@ -0,0 +1,431 @@
+<template>
+  <ele-page>
+    <ele-card header="垂直菜单">
+      <div style="display: flex; flex-wrap: wrap">
+        <option-item
+          label="暗色主题"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="dark" size="small" />
+        </option-item>
+        <option-item
+          label="彩色图标"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="colorful" size="small" />
+        </option-item>
+        <option-item
+          label="折叠菜单"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="collapse" size="small" />
+        </option-item>
+      </div>
+      <div style="display: flex; flex-wrap: wrap">
+        <div style="margin: 0 12px 12px 0">
+          <el-button type="primary" class="ele-btn-icon" @click="changeData()">
+            一级菜单分组形式
+          </el-button>
+        </div>
+        <div style="margin: 0 12px 12px 0">
+          <el-button type="primary" class="ele-btn-icon" @click="changeColor()">
+            更改菜单图标颜色
+          </el-button>
+        </div>
+      </div>
+      <div style="max-width: 240px">
+        <ele-menus
+          mode="vertical"
+          :items="menuItems"
+          :collapse="collapse"
+          :collapse-transition="true"
+          :default-active="menuActive"
+          :theme="dark ? 'dark' : 'light'"
+          :colorful="colorful"
+          :text-ellipsis-tooltip="true"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="水平菜单">
+      <div style="display: flex; flex-wrap: wrap">
+        <option-item
+          label="暗色主题"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="navDark" size="small" />
+        </option-item>
+        <option-item
+          label="彩色图标"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="navColorful" size="small" />
+        </option-item>
+      </div>
+      <div style="display: flex; flex-wrap: wrap">
+        <div style="margin: 0 12px 12px 0">
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="changeColor('nav')"
+          >
+            更改菜单图标颜色
+          </el-button>
+        </div>
+      </div>
+      <div style="max-width: 800px">
+        <ele-menus
+          mode="horizontal"
+          :items="navItems"
+          :default-active="navActive"
+          :theme="navDark ? 'dark' : 'light'"
+          :colorful="navColorful"
+          :text-ellipsis-tooltip="true"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="紧凑菜单">
+      <div style="display: flex; flex-wrap: wrap">
+        <option-item
+          label="暗色主题"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="boxDark" size="small" />
+        </option-item>
+        <option-item
+          label="彩色图标"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="boxColorful" size="small" />
+        </option-item>
+        <option-item
+          label="隐藏标题"
+          :responsive="false"
+          style="margin: 0 12px 12px 0"
+        >
+          <el-switch v-model="boxCollapse" size="small" />
+        </option-item>
+      </div>
+      <div style="display: flex; flex-wrap: wrap">
+        <div style="margin: 0 12px 12px 0">
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="changeData('box')"
+          >
+            一级菜单分组形式
+          </el-button>
+        </div>
+        <div style="margin: 0 12px 12px 0">
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="changeColor('box')"
+          >
+            更改菜单图标颜色
+          </el-button>
+        </div>
+      </div>
+      <div
+        :style="{
+          width: boxCollapse ? '66px' : '88px',
+          transition: 'width 0.2s'
+        }"
+      >
+        <ele-menus
+          mode="compact"
+          :items="boxItems"
+          :collapse="boxCollapse"
+          :default-active="boxActive"
+          :theme="boxDark ? 'dark' : 'light'"
+          :colorful="boxColorful"
+          :text-ellipsis-tooltip="true"
+        />
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, markRaw } from 'vue';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import {
+    SettingOutlined,
+    CalendarOutlined,
+    LogOutlined,
+    LinkOutlined,
+    UserOutlined
+  } from '@/components/icons';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  defineOptions({ name: 'ExtensionMenu' });
+
+  /** 垂直菜单是否暗色主题 */
+  const dark = ref(false);
+
+  /** 垂直菜单是否彩色图标 */
+  const colorful = ref(false);
+
+  /** 垂直菜单是否折叠 */
+  const collapse = ref(false);
+
+  /** 水平菜单是否暗色主题 */
+  const navDark = ref(false);
+
+  /** 水平菜单是否彩色图标 */
+  const navColorful = ref(false);
+
+  /** 紧凑菜单是否暗色主题 */
+  const boxDark = ref(false);
+
+  /** 紧凑菜单是否彩色图标 */
+  const boxColorful = ref(false);
+
+  /** 紧凑菜单是否折叠 */
+  const boxCollapse = ref(false);
+
+  /** 垂直菜单选中 */
+  const menuActive = ref('1-1');
+
+  /** 水平菜单选中 */
+  const navActive = ref('1-1');
+
+  /** 紧凑菜单选中 */
+  const boxActive = ref('1-1');
+
+  /** 获取菜单数据 */
+  const getMenuData = (): MenuItem[] => {
+    return [
+      {
+        index: '1',
+        title: '系统管理',
+        icon: markRaw(SettingOutlined),
+        children: [
+          {
+            index: '1-1',
+            title: '用户管理'
+          },
+          {
+            index: '1-2',
+            title: '角色管理',
+            badge: { value: 1 }
+          },
+          {
+            index: '1-3',
+            title: '权限管理'
+          }
+        ]
+      },
+      {
+        index: '2',
+        title: '日志管理',
+        icon: markRaw(CalendarOutlined),
+        badge: { value: 'New', type: 'warning' },
+        children: [
+          {
+            index: '2-1',
+            title: '登录日志',
+            icon: markRaw(LinkOutlined)
+          },
+          {
+            index: '2-2',
+            title: '操作日志如果标题很长很长很长',
+            icon: markRaw(LinkOutlined),
+            badge: { isDot: true, type: 'success' }
+          }
+        ]
+      },
+      {
+        index: '3',
+        title: '订单管理',
+        icon: markRaw(LogOutlined),
+        popperClass: 'demo-menu-popper',
+        children: [
+          {
+            index: '3-1',
+            title: '订单查询',
+            icon: markRaw(LinkOutlined)
+          },
+          {
+            index: '3-2',
+            title: '退款记录',
+            icon: markRaw(LinkOutlined)
+          },
+          {
+            index: '3-3',
+            title: '订单报表',
+            icon: markRaw(LinkOutlined),
+            children: [
+              {
+                index: '3-3-1',
+                title: '日报表',
+                icon: markRaw(LinkOutlined)
+              },
+              {
+                index: '3-3-2',
+                title: '周报表',
+                icon: markRaw(LinkOutlined),
+                disabled: true
+              },
+              {
+                index: '3-3-3',
+                title: '月报表',
+                icon: markRaw(LinkOutlined)
+              },
+              {
+                index: '3-3-4',
+                title: '季度报表',
+                group: true,
+                children: [
+                  {
+                    index: '3-3-4-1',
+                    title: '一季度',
+                    icon: markRaw(LinkOutlined)
+                  },
+                  {
+                    index: '3-3-4-2',
+                    title: '二季度',
+                    icon: markRaw(LinkOutlined)
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            index: '3-4',
+            title: '账单统计',
+            group: true,
+            children: [
+              {
+                index: '3-4-1',
+                title: '销售统计',
+                icon: markRaw(LinkOutlined)
+              },
+              {
+                index: '3-4-2',
+                title: '退款统计',
+                icon: markRaw(LinkOutlined)
+              }
+            ]
+          }
+        ]
+      },
+      {
+        index: '4',
+        title: '个人中心',
+        icon: markRaw(UserOutlined),
+        badge: { value: 100 }
+      }
+    ];
+  };
+
+  /** 垂直菜单数据 */
+  const menuItems = ref<MenuItem[]>(getMenuData());
+
+  /** 水平菜单数据 */
+  const navItems = ref<MenuItem[]>(getMenuData());
+
+  /** 紧凑菜单数据 */
+  const boxItems = ref<MenuItem[]>(getMenuData());
+
+  /** 一级菜单改为分组形式 */
+  const changeData = (type?: 'box') => {
+    const result: MenuItem[] = getMenuData().map((d: MenuItem) => {
+      const t: MenuItem = { ...d };
+      if (t.children) {
+        t.group = true;
+        t.icon = void 0;
+        if (t.title) {
+          t.title = t.title.replace('管理', '');
+        }
+        t.children = t.children.map((c) => {
+          return { ...c, icon: c.icon ?? markRaw(LinkOutlined) };
+        });
+      }
+      return t;
+    });
+    if (type === 'box') {
+      // @ts-ignore
+      boxItems.value = result;
+      return;
+    }
+    menuItems.value = result;
+  };
+
+  /** 自定义图标背景颜色 */
+  const changeColor = (type?: 'box' | 'nav') => {
+    const colors: Record<string, string> = {
+      '1': 'linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%)',
+      '2': 'linear-gradient( 135deg, #FFF3B0 10%, #CA26FF 100%)',
+      '3': 'linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%)',
+      '4': '#faad14',
+      '1-1': '#f5222d',
+      '1-2': '#fa541c',
+      '1-3': '#fa8c16',
+      '2-1': '#2f54eb',
+      '2-2': '#722ed1',
+      '3-1': '#eb2f96',
+      '3-2':
+        'linear-gradient(135deg, rgb(67, 203, 255) 10%, rgb(151, 8, 204) 100%)',
+      '3-3':
+        'linear-gradient(135deg, rgb(160, 254, 101) 10%, rgb(250, 1, 109) 100%)',
+      '3-4': 'linear-gradient(to right, #f83600 0%, #f9d423 100%)'
+    };
+    const data =
+      type === 'box'
+        ? boxItems.value
+        : type === 'nav'
+          ? navItems.value
+          : menuItems.value;
+    const result: MenuItem[] = data.map((d: MenuItem) => {
+      const t: MenuItem = { ...d };
+      if (!t.group) {
+        if (t.index && colors[t.index]) {
+          if (colors[t.index].startsWith('linear-gradient(')) {
+            t.iconProps = { style: { backgroundImage: colors[t.index] } };
+          } else {
+            t.iconProps = { style: { backgroundColor: colors[t.index] } };
+          }
+        }
+      } else if (t.children) {
+        t.children = t.children.map((c) => {
+          const m = { ...c };
+          if (m.index && colors[m.index]) {
+            if (colors[m.index].startsWith('linear-gradient(')) {
+              m.iconProps = { style: { backgroundImage: colors[m.index] } };
+            } else {
+              m.iconProps = { style: { backgroundColor: colors[m.index] } };
+            }
+          }
+          return m;
+        });
+      }
+      return t;
+    });
+    if (type === 'box') {
+      boxItems.value = result;
+      return;
+    }
+    if (type === 'nav') {
+      navItems.value = result;
+      return;
+    }
+    menuItems.value = result;
+  };
+</script>
+
+<style lang="scss">
+  .demo-menu-popper.ele-menu > .el-menu--popup-container > .el-menu--popup {
+    overflow: visible;
+
+    .el-sub-menu > .el-popper {
+      position: absolute !important;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/message/components/demo-alert.vue b/z_ele/src/views/extension/message/components/demo-alert.vue
new file mode 100644
index 0000000..9160696
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-alert.vue
@@ -0,0 +1,205 @@
+<template>
+  <ele-card header="警告提示">
+    <div style="margin-bottom: 8px">基本用法:</div>
+    <el-row :gutter="16">
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          title="Info Text"
+          show-icon
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="success"
+          title="Success Text"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="warning"
+          title="Warning Text"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="error"
+          title="Error Text"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+    </el-row>
+    <div style="margin: 8px 0">文字描述:</div>
+    <el-row :gutter="16">
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          title="Info Text"
+          description="Info Description Info Description Info Description Info Description"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="success"
+          title="Success Text"
+          description="Success Description Success Description Success Description"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="warning"
+          title="Warning Text"
+          description="Warning Description Warning Description Warning Description"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24">
+        <ele-alert
+          show-icon
+          type="error"
+          title="Error Text"
+          description="Error Description Error Description Error Description Error Description"
+          style="margin-bottom: 12px"
+          :effect="effect"
+        />
+      </el-col>
+    </el-row>
+    <div style="margin: 8px 0">嵌套使用、操作按钮:</div>
+    <el-row :gutter="16">
+      <el-col :md="6" :sm="24" :xs="24">
+        <ele-alert
+          show-icon
+          title="嵌套使用"
+          :closable="false"
+          :effect="effect"
+          :icon-props="{ style: { fontSize: '18px', marginTop: '3px' } }"
+          style="margin-bottom: 12px"
+        >
+          <ele-alert
+            show-icon
+            type="error"
+            title="Error Description Error Description"
+            :effect="effect"
+            :title-style="{ fontSize: '13px', lineHeight: '18px' }"
+          />
+        </ele-alert>
+      </el-col>
+      <el-col :md="6" :sm="24" :xs="24">
+        <ele-alert
+          show-icon
+          title="Info Text"
+          description="Info Description Info Description"
+          :effect="effect"
+          style="margin-bottom: 12px"
+        >
+          <template #action>
+            <div
+              :style="{
+                display: 'flex',
+                'flex-direction': 'column',
+                '--el-fill-color-light': 'rgba(0, 0, 0, 0.06)',
+                '--el-fill-color': 'rgba(0, 0, 0, 0.15)'
+              }"
+            >
+              <el-button type="primary" size="small" style="width: 72px">
+                Accept
+              </el-button>
+              <el-button
+                :text="effect !== 'dark'"
+                :type="effect === 'dark' ? 'primary' : void 0"
+                size="small"
+                style="margin: 4px 0 0 0; width: 72px"
+              >
+                Decline
+              </el-button>
+            </div>
+          </template>
+        </ele-alert>
+      </el-col>
+      <el-col :md="6" :sm="24" :xs="24">
+        <ele-alert
+          show-icon
+          type="success"
+          title="Success Text"
+          :effect="effect"
+          style="margin-bottom: 12px"
+        >
+          <template #action>
+            <div
+              :style="{
+                '--el-fill-color-light': 'rgba(0, 0, 0, 0.06)',
+                '--el-fill-color': 'rgba(0, 0, 0, 0.15)'
+              }"
+            >
+              <el-button
+                :text="effect !== 'dark'"
+                :type="effect === 'dark' ? 'success' : void 0"
+                size="small"
+              >
+                UNDO
+              </el-button>
+            </div>
+          </template>
+        </ele-alert>
+      </el-col>
+      <el-col :md="6" :sm="24" :xs="24">
+        <ele-alert
+          show-icon
+          type="error"
+          title="Error Text"
+          :closable="false"
+          :effect="effect"
+          style="margin-bottom: 12px"
+        >
+          <template #action>
+            <div
+              :style="{
+                '--el-fill-color-light': 'rgba(0, 0, 0, 0.06)',
+                '--el-fill-color': 'rgba(0, 0, 0, 0.15)'
+              }"
+            >
+              <el-button
+                :text="effect !== 'dark'"
+                :type="effect === 'dark' ? 'danger' : void 0"
+                size="small"
+                style="padding: 0 6px"
+              >
+                UNDO
+              </el-button>
+            </div>
+          </template>
+        </ele-alert>
+      </el-col>
+    </el-row>
+    <option-item label="主题风格">
+      <el-radio-group v-model="effect">
+        <el-radio value="light" label="light" />
+        <el-radio value="dark" label="dark" />
+      </el-radio-group>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 警告提示主题 */
+  const effect = ref<'light' | 'dark'>('light');
+</script>
diff --git a/z_ele/src/views/extension/message/components/demo-loading.vue b/z_ele/src/views/extension/message/components/demo-loading.vue
new file mode 100644
index 0000000..fc549f7
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-loading.vue
@@ -0,0 +1,81 @@
+<template>
+  <ele-card header="加载提示">
+    <option-item label="状态" :responsive="false">
+      <el-switch v-model="loading" size="small" />
+    </option-item>
+    <option-item label="尺寸" :responsive="false" style="margin: 6px 0 0 0">
+      <el-radio-group
+        v-model="loadingSize"
+        :disabled="loadingType === 'circle'"
+      >
+        <el-radio value="small" label="小型" />
+        <el-radio value="default" label="默认" />
+        <el-radio value="large" label="大型" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="文本" :responsive="false" style="margin: 2px 0 0 0">
+      <el-radio-group v-model="loadingText" @change="handleLoadingTextChange">
+        <el-radio value="" label="不显示" />
+        <el-radio value="Loading..." label="显示" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="类型" :responsive="false" style="margin: 2px 0 0 0">
+      <el-radio-group v-model="loadingType">
+        <el-radio value="dot" label="圆点" />
+        <el-radio value="circle" label="圆圈" />
+      </el-radio-group>
+    </option-item>
+    <ele-loading
+      :key="loadingKey"
+      :loading="loading"
+      :size="loadingSize"
+      :type="loadingType"
+      :text="loadingText"
+      :blur="true"
+      style="padding: 20px 16px; max-width: 520px; position: relative"
+    >
+      <div style="font-size: 17px; max-height: 100%">Alert message title</div>
+      <div style="word-break: break-all; margin-top: 4px; max-height: 100%">
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+        <span>Further details about the context of this alert.</span>
+      </div>
+    </ele-loading>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type {
+    LoadingSize,
+    LoadingType
+  } from 'ele-admin-plus/es/ele-loading/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 加载框显示状态 */
+  const loading = ref(false);
+
+  /** 加载框尺寸 */
+  const loadingSize = ref<LoadingSize>('default');
+
+  /** 加载框类型 */
+  const loadingType = ref<LoadingType>('dot');
+
+  /** 加载框显示文本 */
+  const loadingText = ref('');
+
+  /** 用于重新渲染加载框 */
+  const loadingKey = ref(0);
+
+  /** 加载框类型选择改变事件 */
+  const handleLoadingTextChange = () => {
+    if (loadingType.value === 'circle' && loading.value) {
+      loadingKey.value++;
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/message/components/demo-message-modal.vue b/z_ele/src/views/extension/message/components/demo-message-modal.vue
new file mode 100644
index 0000000..35c8e71
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-message-modal.vue
@@ -0,0 +1,67 @@
+<template>
+  <ele-drawer
+    :size="430"
+    :inner="inner"
+    :append-to-body="true"
+    v-model="visible"
+    title="限制在抽屉中的消息提示"
+    style="max-width: 100%"
+  >
+    <div>内容内容内容内容内容内容</div>
+    <div>内容内容内容内容内容内容</div>
+    <div>内容内容内容内容内容内容</div>
+    <div>内容内容内容内容内容内容</div>
+    <div>内容内容内容内容内容内容</div>
+    <div>内容内容内容内容内容内容</div>
+    <div style="margin: 16px 0 26px 0">
+      <el-button type="primary" class="ele-btn-icon" @click="showMessage">
+        显示提示
+      </el-button>
+    </div>
+    <div ref="modalMessageWrapRef" class="ele-message-wrapper"></div>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="save">保存</el-button>
+    </template>
+  </ele-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage } from 'ele-admin-plus';
+
+  const props = defineProps<{
+    theme?: number;
+    inner?: boolean;
+  }>();
+
+  const visible = defineModel({ type: Boolean });
+
+  const message = useMessage();
+
+  const modalMessageWrapRef = ref<HTMLDivElement>();
+
+  const showMessage = () => {
+    message.success({
+      message: '这是一条成功的提示',
+      plain: props.theme === 1,
+      original: props.theme === 3 ? 'plain' : props.theme === 2,
+      inner: true,
+      showClose: true,
+      appendTo: modalMessageWrapRef.value
+    });
+  };
+
+  const save = () => {
+    message.info({
+      message: '点击了保存',
+      plain: true,
+      inner: true,
+      appendTo: modalMessageWrapRef.value
+    });
+  };
+
+  const handleCancel = () => {
+    visible.value = false;
+  };
+</script>
diff --git a/z_ele/src/views/extension/message/components/demo-message.vue b/z_ele/src/views/extension/message/components/demo-message.vue
new file mode 100644
index 0000000..823b012
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-message.vue
@@ -0,0 +1,163 @@
+<template>
+  <ele-card header="消息提示">
+    <option-item label="风格">
+      <el-radio-group v-model="theme">
+        <el-radio :value="0" label="默认" />
+        <el-radio :value="1" label="简约" />
+        <el-radio :value="2" label="多彩" />
+        <el-radio :value="3" label="多彩简约" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="限制在主体区域" style="margin-top: 16px">
+      <el-switch v-model="inner" size="small" />
+    </option-item>
+    <option-item label="类型">
+      <el-button @click="showMessage('success')">成功</el-button>
+      <el-button @click="showMessage('warning')">警告</el-button>
+      <el-button @click="showMessage('error')">错误</el-button>
+      <el-button @click="showMessage('info')">信息</el-button>
+    </option-item>
+    <option-item label="加载">
+      <el-button @click="showLoading()">打开</el-button>
+      <el-button @click="showLoading(true)">带遮罩层</el-button>
+      <el-button @click="showLoading(true, true)">居中显示</el-button>
+    </option-item>
+    <option-item label="响应式">
+      <el-button @click="showReactiveLoading">打开加载框</el-button>
+    </option-item>
+    <option-item label="限制在指定区域">
+      <el-button @click="showInDemoWrap" class="ele-btn-icon">提示</el-button>
+      <el-button @click="openModal" class="ele-btn-icon">
+        限制在指定弹窗
+      </el-button>
+    </option-item>
+    <div
+      :style="{
+        maxWidth: '600px',
+        height: '280px',
+        border: '1px solid var(--el-border-color)',
+        position: 'relative',
+        marginTop: '16px'
+      }"
+    >
+      <div style="text-align: center; padding: 20px">
+        <div>内容内容内容内容内容内容</div>
+        <div>内容内容内容内容内容内容</div>
+        <div>内容内容内容内容内容内容</div>
+        <div>内容内容内容内容内容内容</div>
+        <div>内容内容内容内容内容内容</div>
+        <div>内容内容内容内容内容内容</div>
+      </div>
+      <div ref="demoMessageWrapRef" class="ele-message-wrapper"></div>
+    </div>
+    <demo-message-modal v-model="modalVisible" :theme="theme" :inner="inner" />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage, useMessageBox, random } from 'ele-admin-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+  import DemoMessageModal from './demo-message-modal.vue';
+
+  const message = useMessage();
+  const messageBox = useMessageBox();
+
+  /** 主题风格 */
+  const theme = ref(1);
+
+  /** 限制在主体区域 */
+  const inner = ref(false);
+
+  /** 打开消息 */
+  const showMessage = (type: 'success' | 'warning' | 'error' | 'info') => {
+    const messages = {
+      success: '这是一条成功的提示',
+      warning: '这是一条警告的提示',
+      error: '这是一条错误的提示',
+      info: '这是一条普通的提示'
+    };
+    message({
+      type,
+      message: messages[type],
+      plain: theme.value === 1,
+      original: theme.value === 3 ? 'plain' : theme.value === 2,
+      inner: inner.value,
+      showClose: true
+    });
+  };
+
+  /** 打开加载提示 */
+  const showLoading = (mask?: boolean, centered?: boolean) => {
+    const loading = message.loading({
+      message: '正在加载中..',
+      plain: theme.value === 1,
+      original: theme.value === 3 ? 'plain' : theme.value === 2,
+      inner: inner.value,
+      showClose: true,
+      mask,
+      centered
+    });
+    setTimeout(() => {
+      loading.close();
+    }, 3000);
+  };
+
+  /** 导入进度 */
+  const progress = ref(0);
+
+  /** 打开响应式加载框 */
+  const showReactiveLoading = () => {
+    progress.value = 0;
+    const loading = message.loading({
+      message: () =>
+        `正在导入用户......${String(progress.value).padStart(2, '0')}%` as any,
+      plain: true,
+      inner: inner.value,
+      mask: true,
+      centered: true
+    });
+    const timer = setInterval(() => {
+      const num = progress.value + random(0, 5);
+      progress.value = num > 100 ? 100 : num;
+      if (progress.value == 100) {
+        loading.close();
+        clearInterval(timer);
+        messageBox
+          .alert(
+            '导入完成，共新增 80 条数据，更新 20 条数据，失败 0 条数据。',
+            '导入成功',
+            {
+              type: 'success',
+              confirmButtonText: '完成',
+              inner: inner.value,
+              draggable: true
+            }
+          )
+          .then(() => {
+            console.log('点击了完成');
+          })
+          .catch(() => {});
+      }
+    }, 100);
+  };
+
+  const demoMessageWrapRef = ref<HTMLDivElement>();
+
+  const showInDemoWrap = () => {
+    message.success({
+      message: '这是一条成功的提示',
+      plain: theme.value === 1,
+      original: theme.value === 3 ? 'plain' : theme.value === 2,
+      inner: true,
+      showClose: true,
+      appendTo: demoMessageWrapRef.value
+    });
+  };
+
+  const modalVisible = ref(false);
+
+  const openModal = () => {
+    modalVisible.value = true;
+  };
+</script>
diff --git a/z_ele/src/views/extension/message/components/demo-notice.vue b/z_ele/src/views/extension/message/components/demo-notice.vue
new file mode 100644
index 0000000..bb71fe3
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-notice.vue
@@ -0,0 +1,63 @@
+<template>
+  <ele-card header="消息通知">
+    <option-item label="使用">
+      <el-button @click="showNotification()" class="ele-btn-icon">
+        打开通知
+      </el-button>
+      <el-button @click="showNotification('success')" class="ele-btn-icon">
+        带图标
+      </el-button>
+      <el-button @click="showNotification('info', 0)" class="ele-btn-icon">
+        不自动关闭
+      </el-button>
+    </option-item>
+    <option-item label="类型">
+      <el-button @click="showNotification('success')">成功</el-button>
+      <el-button @click="showNotification('warning')">警告</el-button>
+      <el-button @click="showNotification('error')">错误</el-button>
+      <el-button @click="showNotification('info')">信息</el-button>
+    </option-item>
+    <option-item label="位置">
+      <el-button
+        @click="showNotification('info', null, 'top-left')"
+        class="ele-btn-icon"
+      >
+        TopLeft
+      </el-button>
+      <el-button
+        @click="showNotification('info', null, 'bottom-left')"
+        class="ele-btn-icon"
+      >
+        BottomLeft
+      </el-button>
+      <el-button
+        @click="showNotification('info', null, 'bottom-right')"
+        class="ele-btn-icon"
+      >
+        BottomRight
+      </el-button>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ElNotification } from 'element-plus';
+  import type { NotificationProps } from 'element-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 打开消息通知 */
+  const showNotification = (
+    type?: NotificationProps['type'] | null,
+    duration?: number | null,
+    position?: NotificationProps['position'] | null
+  ) => {
+    ElNotification({
+      title: 'Notification Title',
+      message:
+        'This is the content of the notification. This is the content of the notification. ',
+      type: type || '',
+      duration: duration ?? 4500,
+      position: position || 'top-right'
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/message/components/demo-tooltip.vue b/z_ele/src/views/extension/message/components/demo-tooltip.vue
new file mode 100644
index 0000000..739c1c1
--- /dev/null
+++ b/z_ele/src/views/extension/message/components/demo-tooltip.vue
@@ -0,0 +1,131 @@
+<template>
+  <ele-card header="文本提示">
+    <option-item label="使用">
+      <ele-tooltip content="EleAdminPlus" placement="top" :offset="8">
+        <el-button>Dark</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        effect="light"
+        :offset="8"
+      >
+        <el-button>Light</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        :offset="8"
+        transition="el-zoom-in-bottom"
+        :gpu-acceleration="false"
+      >
+        <el-button>进入动画</el-button>
+      </ele-tooltip>
+    </option-item>
+    <option-item label="边框">
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        :offset="8"
+        effect="light"
+        :popper-style="{
+          '--ele-tooltip-light-color': 'var(--el-color-primary)',
+          /* '--ele-tooltip-light-bg': 'var(--el-color-primary-light-9)',
+          '--ele-tooltip-light-arrow-bg': 'var(--el-color-primary-light-9)', */
+          '--ele-tooltip-light-border': '1.5px solid var(--el-color-primary)',
+          '--ele-popper-arrow-size': '11px',
+          '--ele-popper-arrow-offset': '-5.33px'
+        }"
+      >
+        <el-button class="ele-btn-icon">信息</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        :offset="8"
+        effect="light"
+        :popper-style="{
+          '--ele-tooltip-light-color': 'var(--el-color-danger)',
+          /* '--ele-tooltip-light-bg': 'var(--el-color-danger-light-9)',
+          '--ele-tooltip-light-arrow-bg': 'var(--el-color-danger-light-9)', */
+          '--ele-tooltip-light-border': '1.5px solid var(--el-color-danger)',
+          '--ele-popper-arrow-size': '11px',
+          '--ele-popper-arrow-offset': '-5.33px'
+        }"
+      >
+        <el-button class="ele-btn-icon">错误</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        :offset="8"
+        effect="light"
+        :popper-style="{
+          '--ele-tooltip-light-color': 'var(--el-color-warning)',
+          /* '--ele-tooltip-light-bg': 'var(--el-color-warning-light-9)',
+          '--ele-tooltip-light-arrow-bg': 'var(--el-color-warning-light-9)', */
+          '--ele-tooltip-light-border': '1.5px solid var(--el-color-warning)',
+          '--ele-popper-arrow-size': '11px',
+          '--ele-popper-arrow-offset': '-5.33px'
+        }"
+      >
+        <el-button class="ele-btn-icon">警告</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        :offset="8"
+        effect="light"
+        :popper-style="{
+          '--ele-tooltip-light-color': 'var(--el-color-success)',
+          /* '--ele-tooltip-light-bg': 'var(--el-color-success-light-9)',
+          '--ele-tooltip-light-arrow-bg': 'var(--el-color-success-light-9)', */
+          '--ele-tooltip-light-border': '1.5px solid var(--el-color-success)',
+          '--ele-popper-arrow-size': '11px',
+          '--ele-popper-arrow-offset': '-5.33px'
+        }"
+      >
+        <el-button class="ele-btn-icon">成功</el-button>
+      </ele-tooltip>
+    </option-item>
+    <option-item label="主题">
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        effect="danger"
+        :offset="8"
+      >
+        <el-button class="ele-btn-icon">错误</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        effect="warning"
+        :offset="8"
+      >
+        <el-button class="ele-btn-icon">警告</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        effect="success"
+        :offset="8"
+      >
+        <el-button class="ele-btn-icon">成功</el-button>
+      </ele-tooltip>
+      <ele-tooltip
+        content="EleAdminPlus"
+        placement="top"
+        bg="linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%)"
+        arrow-bg="#7556E0"
+        :offset="8"
+      >
+        <el-button class="ele-btn-icon">Custom</el-button>
+      </ele-tooltip>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+</script>
diff --git a/z_ele/src/views/extension/message/index.vue b/z_ele/src/views/extension/message/index.vue
new file mode 100644
index 0000000..30a1eb8
--- /dev/null
+++ b/z_ele/src/views/extension/message/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <ele-page>
+    <demo-message />
+    <demo-notice />
+    <demo-tooltip />
+    <demo-alert />
+    <demo-loading />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoMessage from './components/demo-message.vue';
+  import DemoNotice from './components/demo-notice.vue';
+  import DemoTooltip from './components/demo-tooltip.vue';
+  import DemoAlert from './components/demo-alert.vue';
+  import DemoLoading from './components/demo-loading.vue';
+
+  defineOptions({ name: 'ExtensionMessage' });
+</script>
diff --git a/z_ele/src/views/extension/modal/components/demo-drawer.vue b/z_ele/src/views/extension/modal/components/demo-drawer.vue
new file mode 100644
index 0000000..86fe663
--- /dev/null
+++ b/z_ele/src/views/extension/modal/components/demo-drawer.vue
@@ -0,0 +1,176 @@
+<template>
+  <ele-card header="抽屉组件">
+    <option-item label="方向" :responsive="false">
+      <el-radio-group v-model="direction">
+        <el-radio value="rtl" label="右" />
+        <el-radio value="ltr" label="左" />
+        <el-radio value="btt" label="下" />
+        <el-radio value="ttb" label="上" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="显示头部" :responsive="false" style="margin-top: 16px">
+      <el-switch v-model="withHeader" size="small" />
+    </option-item>
+    <option-item label="显示底部" :responsive="false">
+      <el-switch v-model="withFooter" size="small" />
+    </option-item>
+    <option-item label="限制在主体区域" :responsive="false">
+      <el-switch v-model="inner" size="small" />
+    </option-item>
+    <div style="margin-top: 20px">
+      <el-button class="ele-btn-icon" @click="openDrawer">打开抽屉</el-button>
+    </div>
+  </ele-card>
+  <ele-drawer
+    :direction="direction"
+    :withHeader="withHeader"
+    :inner="inner"
+    :size="430"
+    title="表单项配置"
+    :append-to-body="true"
+    style="max-width: 100%"
+    v-model="visible"
+    :body-style="{ paddingBottom: '8px' }"
+    @closed="cancelDrawer"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="70px"
+      @submit.prevent=""
+    >
+      <el-form-item label="用户名" prop="nickname">
+        <el-input
+          clearable
+          v-model="form.nickname"
+          placeholder="请输入用户名"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          clearable
+          v-model="form.sex"
+          placeholder="请选择性别"
+          class="ele-fluid"
+        >
+          <el-option value="男">男</el-option>
+          <el-option value="女">女</el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input clearable v-model="form.phone" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input clearable v-model="form.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="个人简介">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.introduction"
+          placeholder="请输入个人简介"
+        />
+      </el-form-item>
+    </el-form>
+    <template v-if="withFooter" #footer>
+      <el-button @click="cancelDrawer">取消</el-button>
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </template>
+  </ele-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { useMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  const messageIns = useMessage({ plain: true });
+
+  /** 抽屉是否打开 */
+  const visible = ref(false);
+
+  /** 方向 */
+  const direction = ref<'rtl' | 'ltr' | 'btt' | 'ttb'>('rtl');
+
+  /** 显示头部 */
+  const withHeader = ref(true);
+
+  /** 显示底部 */
+  const withFooter = ref(true);
+
+  /** 限制在主体区域 */
+  const inner = ref(false);
+
+  /** 打开抽屉 */
+  const openDrawer = () => {
+    visible.value = true;
+  };
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData({
+    nickname: '',
+    sex: void 0,
+    phone: '',
+    email: '',
+    introduction: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    nickname: [
+      {
+        required: true,
+        message: '请输入用户名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        required: true,
+        message: '请输入邮箱',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭抽屉 */
+  const cancelDrawer = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      messageIns.success({ message: '保存成功', inner: inner.value });
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/modal/components/demo-message-box.vue b/z_ele/src/views/extension/modal/components/demo-message-box.vue
new file mode 100644
index 0000000..f43da48
--- /dev/null
+++ b/z_ele/src/views/extension/modal/components/demo-message-box.vue
@@ -0,0 +1,147 @@
+<template>
+  <ele-card header="消息弹窗">
+    <option-item
+      label="限制在主体区域"
+      :responsive="false"
+      style="margin-bottom: 20px"
+    >
+      <el-switch v-model="inner" size="small" />
+    </option-item>
+    <div>
+      <el-button class="ele-btn-icon" @click="openConfirm">Confirm</el-button>
+      <el-button class="ele-btn-icon" @click="openPrompt">Prompt</el-button>
+      <el-button class="ele-btn-icon" @click="openAlert">Alert</el-button>
+    </div>
+    <div style="margin-top: 20px">
+      <el-button class="ele-btn-icon" @click="openSuccess">Succes </el-button>
+      <el-button class="ele-btn-icon" @click="openWarning">Warning</el-button>
+      <el-button class="ele-btn-icon" @click="openError">Error</el-button>
+      <el-button class="ele-btn-icon" @click="openInfo">Info</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessageBox } from 'ele-admin-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  const messageBox = useMessageBox();
+
+  const inner = ref(false);
+
+  const openConfirm = () => {
+    messageBox
+      .confirm('确认要删除吗? 删除后会在回收站保留30天', '删除确认', {
+        type: 'error',
+        inner: inner.value,
+        draggable: true
+      })
+      .then(() => {
+        console.log('点击了确定');
+      })
+      .catch(() => {});
+  };
+
+  const openPrompt = () => {
+    messageBox
+      .prompt('请输入新密码：', '重置密码', {
+        inputPattern: /^[\S]{5,18}$/,
+        inputErrorMessage: '密码必须为5-18位非空白字符',
+        inner: inner.value,
+        draggable: true
+      })
+      .then(({ value }) => {
+        console.log(value);
+      })
+      .catch(() => {});
+  };
+
+  const openAlert = () => {
+    messageBox
+      .alert('内容内容内容内容内容内容内容', '标题', {
+        inner: inner.value,
+        draggable: true
+      })
+      .then(() => {
+        console.log('点击了确定');
+      })
+      .catch(() => {});
+  };
+
+  const openSuccess = () => {
+    messageBox
+      .alert(
+        '导入完成，共新增 80 条数据，更新 20 条数据，失败 0 条数据。',
+        '导入成功',
+        {
+          type: 'success',
+          confirmButtonText: '太好了',
+          inner: inner.value,
+          draggable: true
+        }
+      )
+      .then(() => {
+        console.log('点击了太好了');
+      })
+      .catch(() => {});
+  };
+
+  const openWarning = () => {
+    messageBox
+      .confirm(
+        '您的专业版会员还有 6 天到期，请及时续费，以免影响正常使用！',
+        '到期提醒',
+        {
+          type: 'warning',
+          cancelButtonText: '下次再说',
+          confirmButtonText: '前往续费',
+          closeOnClickModal: false,
+          inner: inner.value,
+          draggable: true
+        }
+      )
+      .then(() => {
+        console.log('点击了前往续费');
+      })
+      .catch(() => {});
+  };
+
+  const openError = () => {
+    messageBox
+      .alert(
+        '您的账号存在违规操作，已被系统强制下线并冻结，请联系管理员处理。',
+        '异常提醒',
+        {
+          type: 'error',
+          confirmButtonText: '查看详情',
+          showClose: false,
+          inner: inner.value,
+          draggable: true
+        }
+      )
+      .then(() => {
+        console.log('点击了查看详情');
+      })
+      .catch(() => {});
+  };
+
+  const openInfo = () => {
+    messageBox
+      .alert(
+        '本周五 03:00 ~ 05:00 将进行网站升级，期间无法访问系统，请提前做好准备！',
+        '系统通知',
+        {
+          type: 'info',
+          confirmButtonText: '知道了',
+          closeOnClickModal: true,
+          inner: inner.value,
+          draggable: true
+        }
+      )
+      .then(() => {
+        console.log('点击了知道了');
+      })
+      .catch(() => {});
+  };
+</script>
diff --git a/z_ele/src/views/extension/modal/components/demo-modal.vue b/z_ele/src/views/extension/modal/components/demo-modal.vue
new file mode 100644
index 0000000..754ee0b
--- /dev/null
+++ b/z_ele/src/views/extension/modal/components/demo-modal.vue
@@ -0,0 +1,251 @@
+<template>
+  <ele-card header="拖拽、拉伸、全屏">
+    <el-form label-width="120px" style="max-width: 380px" @submit.prevent="">
+      <el-form-item label="是否可拖出边界">
+        <el-select
+          multiple
+          clearable
+          v-model="moveOut"
+          placeholder="不可拖出边界"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option value="top" label="top" />
+          <el-option value="bottom" label="bottom" />
+          <el-option value="left" label="left" />
+          <el-option value="right" label="right" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否可拉伸大小">
+        <el-select
+          v-model="resizable"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option value="true" label="自由拉伸大小" />
+          <el-option value="horizontal" label="只可横向拉伸" />
+          <el-option value="vertical" label="只可纵向拉伸" />
+          <el-option value="false" label="不可拉伸大小" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="最大化切换按钮">
+        <el-switch v-model="maxable" size="small" />
+      </el-form-item>
+      <el-form-item label="关闭后重置位置">
+        <el-switch v-model="resetOnClose" size="small" />
+      </el-form-item>
+      <el-form-item label="限制在主体区域">
+        <el-switch v-model="inner" size="small" @change="handleConfigChange" />
+      </el-form-item>
+      <el-form-item label="默认打开位置">
+        <el-select
+          clearable
+          v-model="position"
+          placeholder="请选择"
+          class="ele-fluid"
+          @change="handleConfigChange"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option value="top" label="顶部" />
+          <el-option value="bottom" label="底部" />
+          <el-option value="left" label="左边" />
+          <el-option value="right" label="右边" />
+          <el-option value="leftTop" label="左上角" />
+          <el-option value="leftBottom" label="左下角" />
+          <el-option value="rightTop" label="右上角" />
+          <el-option value="rightBottom" label="右下角" />
+          <el-option value="center" label="正中间" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="ele-btn-icon" @click="openDialog">
+          打开弹窗
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ele-card>
+  <ele-modal
+    :key="modalKey"
+    form
+    :width="400"
+    title="高级弹窗"
+    v-model="visible"
+    :move-out="moveOut"
+    :resizable="modalResizable"
+    :maxable="maxable"
+    :inner="inner"
+    :reset-on-close="resetOnClose"
+    :position="position"
+    :append-to-body="true"
+    :z-index="2001"
+    @closed="cancelDialog"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="70px"
+      @submit.prevent=""
+    >
+      <el-form-item label="用户名" prop="nickname">
+        <el-input
+          clearable
+          v-model="form.nickname"
+          placeholder="请输入用户名"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          clearable
+          v-model="form.sex"
+          placeholder="请选择性别"
+          class="ele-fluid"
+        >
+          <el-option value="男">男</el-option>
+          <el-option value="女">女</el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input clearable v-model="form.phone" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input clearable v-model="form.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="个人简介">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.introduction"
+          placeholder="请输入个人简介"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="cancelDialog">取消</el-button>
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import type {
+    MoveOutValue,
+    PositionValue
+  } from 'ele-admin-plus/es/ele-modal/types';
+  import { useMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+
+  const messageIns = useMessage({ plain: true });
+
+  /** 用于更新弹窗 */
+  const modalKey = ref(0);
+
+  /** 弹窗是否打开 */
+  const visible = ref(false);
+
+  /** 是否允许拖出边界 */
+  const moveOut = ref<MoveOutValue[]>([]);
+
+  /** 是否可拉伸 */
+  const resizable = ref<'false' | 'true' | 'horizontal' | 'vertical'>('true');
+
+  /** 是否显示最大化切换按钮 */
+  const maxable = ref(true);
+
+  /** 关闭后重置位置 */
+  const resetOnClose = ref(true);
+
+  /** 限制在主体区域 */
+  const inner = ref(false);
+
+  /** 默认位置 */
+  const position = ref<PositionValue>();
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 弹窗拉伸属性 */
+  const modalResizable = computed(() => {
+    return resizable.value === 'true'
+      ? true
+      : resizable.value === 'false'
+        ? false
+        : resizable.value;
+  });
+
+  /** 弹窗属性改变 */
+  const handleConfigChange = () => {
+    modalKey.value = modalKey.value + 1;
+  };
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData({
+    nickname: '',
+    sex: void 0,
+    phone: '',
+    email: '',
+    introduction: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    nickname: [
+      {
+        required: true,
+        message: '请输入用户名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        required: true,
+        message: '请输入邮箱',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 打开弹窗 */
+  const openDialog = () => {
+    if (!visible.value) {
+      visible.value = true;
+    }
+  };
+
+  /** 关闭弹窗 */
+  const cancelDialog = () => {
+    resetFields();
+    formRef.value?.clearValidate?.();
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      messageIns.success({ message: '保存成功', inner: inner.value });
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/modal/components/demo-multiple.vue b/z_ele/src/views/extension/modal/components/demo-multiple.vue
new file mode 100644
index 0000000..bce9365
--- /dev/null
+++ b/z_ele/src/views/extension/modal/components/demo-multiple.vue
@@ -0,0 +1,116 @@
+<template>
+  <ele-card header="同时打开多个">
+    <option-item
+      label="限制在主体区域"
+      :responsive="false"
+      style="margin-bottom: 20px"
+    >
+      <el-switch v-model="inner" size="small" />
+    </option-item>
+    <div>
+      <el-button class="ele-btn-icon" @click="openDialog1">
+        打开弹窗1
+      </el-button>
+      <el-button class="ele-btn-icon" @click="openDialog2">
+        打开弹窗2
+      </el-button>
+      <el-button class="ele-btn-icon" @click="openDialog3">
+        打开弹窗3
+      </el-button>
+    </div>
+    <ele-text block type="secondary" style="margin-top: 20px">
+      同时打开多个弹窗时点击会自动置顶
+    </ele-text>
+  </ele-card>
+  <ele-modal
+    :inner="inner"
+    :width="460"
+    title="弹窗1"
+    v-model="visible1"
+    :resizable="true"
+    :maxable="true"
+    :multiple="true"
+    :destroy-on-close="false"
+    :move-out="['right', 'bottom']"
+    position="center"
+  >
+    <div style="padding: 40px 0">弹窗1</div>
+    <template #footer>
+      <el-button @click="visible1 = false">取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </template>
+  </ele-modal>
+  <ele-modal
+    :inner="inner"
+    :width="460"
+    title="弹窗2"
+    v-model="visible2"
+    :resizable="true"
+    :maxable="true"
+    :multiple="true"
+    :destroy-on-close="false"
+    position="leftBottom"
+  >
+    <div style="padding: 40px 0">弹窗2</div>
+    <template #footer>
+      <el-button @click="visible2 = false">取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </template>
+  </ele-modal>
+  <ele-modal
+    :inner="inner"
+    :width="360"
+    title="弹窗3"
+    v-model="visible3"
+    :resizable="true"
+    :maxable="true"
+    :multiple="true"
+    :destroy-on-close="false"
+    position="rightTop"
+    :style="{
+      borderRadius: '8px',
+      backdropFilter: 'blur(4px)',
+      background: 'hsla(0, 0%, 26%, 0.4)',
+      '--ele-modal-icon-color': 'rgba(255, 255, 255, 0.8)',
+      '--ele-modal-icon-hover-color': 'rgba(255, 255, 255, 1)',
+      '--ele-modal-icon-hover-bg': 'rgba(255, 255, 255, .15)',
+      '--ele-modal-header-border': '1px solid rgba(255, 255, 255, 0.1)',
+      '--ele-modal-header-padding': '14px 20px',
+      '--ele-modal-fullscreen-border': 'none',
+      '--ele-scrollbar-color': 'rgba(255, 255, 255, .36)',
+      '--ele-scrollbar-hover-color': 'rgba(255, 255, 255, .58)'
+    }"
+    :title-style="{ color: '#fff' }"
+    :body-style="{ color: '#fff' }"
+  >
+    <div style="padding: 40px 0">弹窗3</div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 弹窗是否打开 */
+  const visible1 = ref(false);
+
+  const visible2 = ref(false);
+
+  const visible3 = ref(false);
+
+  /** 打开弹窗 */
+  const openDialog1 = () => {
+    visible1.value = true;
+  };
+
+  const openDialog2 = () => {
+    visible2.value = true;
+  };
+
+  const openDialog3 = () => {
+    visible3.value = true;
+  };
+
+  /** 限制在主体区域 */
+  const inner = ref(false);
+</script>
diff --git a/z_ele/src/views/extension/modal/components/demo-popper.vue b/z_ele/src/views/extension/modal/components/demo-popper.vue
new file mode 100644
index 0000000..6bd11eb
--- /dev/null
+++ b/z_ele/src/views/extension/modal/components/demo-popper.vue
@@ -0,0 +1,228 @@
+<template>
+  <ele-card header="Popover、PopConfirm、Dropdown">
+    <div>
+      <el-space wrap style="margin-bottom: 20px">
+        <ele-popover
+          :width="180"
+          trigger="click"
+          title="这是标题"
+          :offset="8"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <template #reference>
+            <el-button class="ele-btn-icon">Popover</el-button>
+          </template>
+          <div>This is content.</div>
+          <div>This is content.</div>
+        </ele-popover>
+        <ele-popconfirm
+          :width="190"
+          :offset="8"
+          title="确定要删除此用户吗?"
+          :popper-options="{ strategy: 'fixed' }"
+          @confirm="handleConfirm"
+        >
+          <template #reference>
+            <el-button class="ele-btn-icon">PopConfirm</el-button>
+          </template>
+        </ele-popconfirm>
+        <ele-popconfirm
+          :width="258"
+          :offset="8"
+          title="用户满意度调研"
+          content="您在使用中是否对本产品还满意?"
+          cancel-button-text="关闭"
+          confirm-button-text="满意"
+          :cancel-button-props="{ style: { order: -1, margin: '0 auto 0 0' } }"
+          :popper-options="{ strategy: 'fixed' }"
+          @confirm="handleAgree"
+        >
+          <template #reference>
+            <el-button class="ele-btn-icon">PopConfirm 自定义按钮</el-button>
+          </template>
+          <template #action="{ cancel }">
+            <el-button
+              plain
+              size="small"
+              type="danger"
+              @click="handleComplain(cancel)"
+            >
+              投诉
+            </el-button>
+          </template>
+        </ele-popconfirm>
+      </el-space>
+    </div>
+    <div>
+      <el-space wrap>
+        <ele-dropdown
+          :items="[
+            { title: '重置密码', command: 'password', icon: LockOutlined },
+            { title: '修改用户', command: 'edit', icon: EditOutlined },
+            {
+              title: '删除用户',
+              command: 'delete',
+              icon: DeleteOutlined,
+              divided: true,
+              danger: true
+            }
+          ]"
+          component-type="pro"
+          :icon-props="{ size: 14 }"
+          :popper-options="{ strategy: 'fixed' }"
+          trigger="click"
+          @command="handleCommand"
+        >
+          <el-button class="ele-btn-icon">
+            <span>Dropdown</span>
+            <el-icon style="margin: 0 -4px 0 4px">
+              <ArrowDown />
+            </el-icon>
+          </el-button>
+        </ele-dropdown>
+        <ele-dropdown
+          :items="items"
+          component-type="pro"
+          :icon-props="{ size: 14 }"
+          :popper-options="{ strategy: 'fixed' }"
+          trigger="click"
+          @command="handleCommand"
+        >
+          <el-button class="ele-btn-icon">
+            <span>Dropdown 多级菜单</span>
+            <el-icon style="margin: 0 -4px 0 4px">
+              <ArrowDown />
+            </el-icon>
+          </el-button>
+        </ele-dropdown>
+        <ele-dropdown
+          :items="items"
+          component-type="pro"
+          :icon-props="{ size: 14 }"
+          :popper-options="{ strategy: 'fixed' }"
+          trigger="click"
+          :split-button="true"
+          :split-button-props="{ class: 'ele-btn-icon' }"
+          @command="handleCommand"
+          @click="handleClick"
+        >
+          <span>按钮组</span>
+        </ele-dropdown>
+      </el-space>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, markRaw } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import {
+    ArrowDown,
+    LockOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    DesktopOutlined,
+    SettingOutlined,
+    UserOutlined,
+    IdcardOutlined,
+    ControlOutlined,
+    TableOutlined,
+    ApplicationOutlined,
+    AppstoreOutlined,
+    LinkOutlined,
+    MessageOutlined
+  } from '@/components/icons';
+
+  const items = ref([
+    { title: '工作台', command: 'workplace', icon: markRaw(DesktopOutlined) },
+    { title: '个人中心', command: 'profile', icon: markRaw(UserOutlined) },
+    {
+      title: '系统管理',
+      command: 'system',
+      icon: markRaw(SettingOutlined),
+      children: [
+        {
+          title: '用户管理',
+          command: 'system/user',
+          icon: markRaw(UserOutlined)
+        },
+        {
+          title: '角色管理',
+          command: 'system/role',
+          icon: markRaw(IdcardOutlined)
+        },
+        {
+          title: '权限管理',
+          command: 'system/menu',
+          icon: markRaw(ControlOutlined)
+        }
+      ]
+    },
+    {
+      title: '列表页面',
+      command: 'list',
+      icon: markRaw(TableOutlined),
+      children: [
+        {
+          title: '基础列表',
+          command: 'list/basic',
+          icon: markRaw(TableOutlined)
+        },
+        {
+          title: '复杂列表',
+          command: 'list/basic',
+          icon: markRaw(ApplicationOutlined)
+        },
+        {
+          title: '卡片列表',
+          command: 'list/card',
+          icon: markRaw(AppstoreOutlined),
+          children: [
+            {
+              title: '项目列表',
+              command: 'list/card/project',
+              icon: markRaw(LinkOutlined)
+            },
+            {
+              title: '应用列表',
+              command: 'list/card/application',
+              icon: markRaw(LinkOutlined)
+            },
+            {
+              title: '文章列表',
+              command: 'list/card/article',
+              icon: markRaw(LinkOutlined)
+            }
+          ]
+        }
+      ],
+      divided: true
+    },
+    {
+      title: '消息中心',
+      command: 'message',
+      icon: markRaw(MessageOutlined)
+    }
+  ]);
+
+  const handleCommand = (command: string) => {
+    EleMessage.info({ message: `点击了: ${command}`, plain: true });
+  };
+
+  const handleClick = () => {
+    EleMessage.info({ message: '点击了按钮组', plain: true });
+  };
+
+  const handleConfirm = () => {
+    EleMessage.info({ message: '点击了确定', plain: true });
+  };
+
+  const handleAgree = () => {
+    EleMessage.info({ message: '点击了满意', plain: true });
+  };
+
+  const handleComplain = (cancel: any) => {
+    cancel && cancel();
+    EleMessage.info({ message: '点击了投诉', plain: true });
+  };
+</script>
diff --git a/z_ele/src/views/extension/modal/index.vue b/z_ele/src/views/extension/modal/index.vue
new file mode 100644
index 0000000..0d3df92
--- /dev/null
+++ b/z_ele/src/views/extension/modal/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <ele-page>
+    <demo-modal />
+    <demo-multiple />
+    <demo-drawer />
+    <demo-message-box />
+    <demo-popper />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoModal from './components/demo-modal.vue';
+  import DemoMultiple from './components/demo-multiple.vue';
+  import DemoDrawer from './components/demo-drawer.vue';
+  import DemoMessageBox from './components/demo-message-box.vue';
+  import DemoPopper from './components/demo-popper.vue';
+
+  defineOptions({ name: 'ExtensionDialog' });
+</script>
diff --git a/z_ele/src/views/extension/monaco/components/demo-basic.vue b/z_ele/src/views/extension/monaco/components/demo-basic.vue
new file mode 100644
index 0000000..2246e17
--- /dev/null
+++ b/z_ele/src/views/extension/monaco/components/demo-basic.vue
@@ -0,0 +1,67 @@
+<template>
+  <ele-card header="代码编辑器" :body-style="{ padding: '12px' }">
+    <div style="display: flex; align-items: center; margin-bottom: 12px">
+      <div>主题：</div>
+      <div style="flex: 1">
+        <el-select
+          v-model="theme"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+        >
+          <el-option value="vs" label="Visual Studio" />
+          <el-option value="vs-dark" label="Visual Studio Dark" />
+          <el-option value="hc-light" label="High Contrast" />
+          <el-option value="hc-black" label="High Contrast Dark" />
+        </el-select>
+      </div>
+      <div>&emsp;语言：</div>
+      <div style="flex: 1">
+        <el-select
+          v-model="language"
+          class="ele-fluid"
+          :popper-options="{ strategy: 'fixed' }"
+          @change="handleLanguageChange"
+        >
+          <el-option
+            v-for="item in languageNames"
+            :key="item"
+            :value="item"
+            :label="item"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div style="border: 1px solid var(--el-border-color)">
+      <monaco-editor
+        v-model="code"
+        :language="language"
+        :theme="theme"
+        style="height: 460px"
+      />
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+  import { codes } from './demo-codes';
+
+  const languageNames = Object.keys(codes);
+
+  /** 代码内容 */
+  const code = ref('');
+
+  /** 语言 */
+  const language = ref('typescript');
+
+  /** 主题 */
+  const theme = ref('vs-dark');
+
+  /** 切换代码内容 */
+  const handleLanguageChange = () => {
+    code.value = codes[language.value];
+  };
+
+  handleLanguageChange();
+</script>
diff --git a/z_ele/src/views/extension/monaco/components/demo-codes.ts b/z_ele/src/views/extension/monaco/components/demo-codes.ts
new file mode 100644
index 0000000..25d96eb
--- /dev/null
+++ b/z_ele/src/views/extension/monaco/components/demo-codes.ts
@@ -0,0 +1,933 @@
+/** 不同语言的示例代码 */
+export const codes = {
+  html: `<!DOCTYPE HTML>
+<html>
+<head>
+<title>HTML Sample</title>
+<meta charset="utf-8">
+<style>
+  h1 {
+    font-family: Tahoma;
+    font-size: 40px;
+    font-weight: normal;
+    margin: 50px;
+    color: #a0a0a0;
+  }
+
+  button.Gray {
+    font-family: Tahoma;
+    font-size: 17px;
+    font-weight: normal;
+    margin-top: 100px;
+    padding: 10px 50px;
+    background-color: #727272;
+    color: #fff;
+    outline: 0;
+    border: none;
+    cursor: pointer;
+  }
+
+  button.Gray:hover {
+    background-color: #898888;
+  }
+</style>
+</head>
+<body>
+<!--This is the body section-->
+<div class="Center">
+  <h1>NAME OF SITE</h1>
+</div>
+<div>
+  <button class="Gray" onclick="ButtonClick()">Click Me!</button>
+</div>
+<script>
+  function ButtonClick(){
+    // Example of comments in JavaScript
+    window.alert("I'm an alert sample!");
+  }
+<\/script>
+</body>
+</html>
+`,
+  css: `html {
+background-color: #e2e2e2;
+margin: 0;
+padding: 0;
+}
+
+body {
+background-color: #fff;
+border-top: solid 10px #000;
+color: #333;
+font-size: .85em;
+font-family: "Segoe UI","HelveticaNeue-Light", sans-serif;
+margin: 0;
+padding: 0;
+}
+
+a:link, a:visited,
+a:active, a:hover {
+color: #333;
+outline: none;
+padding-left: 0;
+padding-right: 3px;
+text-decoration: none;
+}
+
+a:hover {
+background-color: #c7d1d6;
+}
+
+h1, h2, h3,
+h4, h5, h6 {
+color: #000;
+margin-bottom: 0;
+padding-bottom: 0;
+}
+`,
+  javascript: `/**
+* 下载文件
+* @param data 二进制数据
+* @param name 文件名
+* @param type 文件类型
+*/
+export function download(data, name, type) {
+const blob = new Blob([data], { type: type || 'application/octet-stream' });
+const url = window.URL.createObjectURL(blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = name;
+a.style.display = 'none';
+document.body.appendChild(a);
+a.click();
+document.body.removeChild(a);
+URL.revokeObjectURL(url);
+}
+
+/**
+* 深度克隆
+* @param value 对象
+*/
+export function cloneDeep(value) {
+const cache = new WeakMap();
+const clone = (value) => {
+  if (typeof value !== 'object' || value === null) {
+    return value;
+  }
+  if (cache.has(value)) {
+    return cache.get(value);
+  }
+  const result = Array.isArray(value) ? [] : {};
+  cache.set(value, result);
+  for (const key of Reflect.ownKeys(value)) {
+    result[key] = clone(value[key]);
+  }
+  return result;
+};
+return clone(value);
+}
+`,
+  typescript: `/**
+* 下载文件
+* @param data 二进制数据
+* @param name 文件名
+* @param type 文件类型
+*/
+export function download(
+data: Blob | ArrayBuffer | string,
+name: string,
+type?: string
+) {
+const blob = new Blob([data], { type: type || 'application/octet-stream' });
+const url = window.URL.createObjectURL(blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = name;
+a.style.display = 'none';
+document.body.appendChild(a);
+a.click();
+document.body.removeChild(a);
+URL.revokeObjectURL(url);
+}
+
+/**
+* 深度克隆
+* @param value 对象
+*/
+export function cloneDeep(value?: any) {
+const cache = new WeakMap();
+const clone = (value?: any) => {
+  if (typeof value !== 'object' || value == null) {
+    return value;
+  }
+  if (cache.has(value)) {
+    return cache.get(value);
+  }
+  const result = Array.isArray(value) ? [] : {};
+  cache.set(value, result);
+  for (const key of Reflect.ownKeys(value)) {
+    result[key] = clone(value[key]);
+  }
+  return result;
+};
+return clone(value);
+}
+`,
+  json: `{
+"type": "team",
+"test": {
+  "testPage": "tools/testing/run-tests.htm",
+  "enabled": true
+},
+"search": {
+  "excludeFolders": [
+    ".git",
+    "node_modules",
+    "tools/bin",
+    "tools/counts",
+    "tools/policheck",
+    "tools/tfs_build_extensions",
+    "tools/testing/jscoverage",
+    "tools/testing/qunit",
+    "tools/testing/chutzpah",
+    "server.net"
+  ]
+}
+}
+`,
+  scss: `$baseFontSizeInPixels: 14;
+
+@function px2em ($font_size, $base_font_size: $baseFontSizeInPixels) {
+@return ($font_size / $base_font_size) + em;
+}
+
+h1 {
+font-size: px2em(36, $baseFontSizeInPixels);
+}
+
+h2  {
+font-size: px2em(28, $baseFontSizeInPixels);
+}
+
+.class {
+font-size: px2em(14, $baseFontSizeInPixels);
+}
+
+nav {
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li { display: inline-block; }
+
+a {
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+
+@each $animal in puma, sea-slug, egret, salamander {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+}
+`,
+  less: `@base: #f938ab;
+
+.box-shadow(@style, @c) when (iscolor(@c)) {
+border-radius: @style @c;
+}
+
+.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
+.box-shadow(@style, rgba(0, 0, 0, @alpha));
+}
+
+.box {
+color: saturate(@base, 5%);
+border-color: lighten(@base, 30%);
+
+div {
+  .box-shadow((0 0 5px), 30%);
+}
+}
+
+#header {
+h1 {
+  font-size: 26px;
+  font-weight: bold;
+}
+}
+
+@the-border: 1px;
+@base-color: #111;
+@red: #842210;
+
+#header {
+color: (@base-color * 3);
+border-left: @the-border;
+border-right: (@the-border * 2);
+}
+
+#footer {
+color: (@base-color + #003300);
+border-color: desaturate(@red, 10%);
+}
+`,
+  handlebars: `<div class="entry">
+<h1>{{title}}</h1>
+{{#if author}}
+<h2>{{author.firstName}} {{author.lastName}}</h2>
+{{else}}
+<h2>Unknown Author</h2>
+{{/if}}
+{{contentBody}}
+</div>
+
+{{#unless license}}
+<h3 class="warning">WARNING: This entry does not have a license!</h3>
+{{/unless}}
+
+<div class="footnotes">
+<ul>
+  {{#each footnotes}}
+  <li>{{this}}</li>
+  {{/each}}
+</ul>
+</div>
+
+<h1>Comments</h1>
+
+<div id="comments">
+{{#each comments}}
+<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
+<div>{{body}}</div>
+{{/each}}
+</div>
+`,
+  razor: `@{
+var total = 0;
+var totalMessage = "";
+@* a multiline
+  razor comment embedded in csharp *@
+if (IsPost) {
+  // Retrieve the numbers that the user entered.
+  var num1 = Request["text1"];
+  var num2 = Request["text2"];
+
+  // Convert the entered strings into integers numbers and add.
+  total = num1.AsInt() + num2.AsInt();
+  <italic><bold>totalMessage = "Total = " + total;</bold></italic>
+}
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Add Numbers</title>
+  <meta charset="utf-8" />
+</head>
+<body>
+<p>Enter two whole numbers and then click <strong>Add</strong>.</p>
+<form action="" method="post">
+  <p><label for="text1">First Number:</label>
+    <input type="text" name="text1" />
+  </p>
+  <p><label for="text2">Second Number:</label>
+    <input type="text" name="text2" />
+  </p>
+  <p><input type="submit" value="Add" /></p>
+</form>
+
+@* now we call the totalMessage method
+   (a multi line razor comment outside code) *@
+
+<p>@totalMessage</p>
+
+<p>@(totalMessage+"!")</p>
+
+An email address (with escaped at character): name@@domain.com
+
+</body>
+</html>
+`,
+  java: `import java.util.Random;
+
+public class Example {
+public static void main (String[] args){
+  // Generate a random number between 1-100. (See generateRandomNumber method.)
+  int random = generateRandomNumber(100);
+  System.out.println("Generated number: " + random + "\\n");
+
+  // Loop between 1 and the number we just generated.
+  for (int i=1; i<=random; i++){
+    if (i % 3 == 0 && i % 5 == 0){
+      System.out.println("FizzBuzz");
+    } else if (i % 3 == 0){
+      System.out.println("Fizz");
+    } else if (i % 5 == 0){
+      System.out.println("Buzz");
+    } else {
+      System.out.println(i);
+    }
+  }
+}
+
+/**
+ * Generates a new random number between 0 and 100.
+ * @param bound The highest number that should be generated.
+ * @return An integer representing a randomly generated number between 0 and 100.
+ */
+private static int generateRandomNumber(int bound){
+  Random randGen = new Random();
+  int randomNum = randGen.nextInt(bound);
+  if (randomNum < 1){
+    randomNum = generateRandomNumber(bound);
+  }
+  return randomNum;
+}
+}
+`,
+  c: `#pragma warning(disable : 4532)
+#pragma warning(disable : 4702)
+
+#if defined(_WIN32)
+
+#if defined(_M_SH)
+#define WIN_CE
+#endif
+
+#if defined(_M_AMD64)
+#define NEST_IN_FINALLY /* allow when __try nested in __finally OK */
+#endif
+
+#define NTSTATUS LONG
+#define EXCEPTION_NESTED_CALL 0x10
+#define RtlRaiseStatus(x) RaiseException((x), 0, 0, NULL)
+#define RtlRaiseException(x)                                                   \\
+RaiseException((x)->ExceptionCode, (x)->ExceptionFlags,                      \\
+               (x)->NumberParameters, (x)->ExceptionInformation)
+#define IN
+#define OUT
+#if !(defined(_M_IA64) || defined(_M_ALPHA) || defined(_M_PPC) ||              \\
+    defined(_M_AMD64) || defined(_M_ARM) || defined(_M_ARM64))
+#define i386 1
+#endif
+#define try __try
+#define except __except
+#define finally __finally
+#define leave __leave
+
+#endif
+
+#define WIN32_LEAN_AND_MEAN
+
+#include "stdio.h"
+#if defined(_M_IA64) || defined(_M_ALPHA) || defined(_M_PPC) ||                \\
+  defined(_M_AMD64) || defined(_M_ARM) || defined(_M_ARM64)
+#include "setjmpex.h"
+#else
+#include "setjmp.h"
+#endif
+#include "float.h"
+#include "windows.h"
+#include "math.h"
+
+#if !defined(STATUS_SUCCESS)
+#define STATUS_SUCCESS 0
+#endif
+#if !defined(STATUS_UNSUCCESSFUL)
+#define STATUS_UNSUCCESSFUL ((NTSTATUS)0xC0000001L)
+#endif
+`,
+  cpp: `#include "pch.h"
+#include "Direct3DBase.h"
+
+using namespace Microsoft::WRL;
+using namespace Windows::UI::Core;
+using namespace Windows::Foundation;
+
+// Constructor.
+Direct3DBase::Direct3DBase()
+{
+}
+
+// Initialize the Direct3D resources required to run.
+void Direct3DBase::Initialize(CoreWindow^ window)
+{
+  m_window = window;
+
+  CreateDeviceResources();
+  CreateWindowSizeDependentResources();
+}
+
+// These are the resources that depend on the device.
+void Direct3DBase::CreateDeviceResources()
+{
+  // This flag adds support for surfaces with a different color channel ordering than the API default.
+  // It is recommended usage, and is required for compatibility with Direct2D.
+  UINT creationFlags = D3D11_CREATE_DEVICE_BGRA_SUPPORT;
+
+#if defined(_DEBUG)
+  // If the project is in a debug build, enable debugging via SDK Layers with this flag.
+  creationFlags |= D3D11_CREATE_DEVICE_DEBUG;
+#endif
+
+  // This array defines the set of DirectX hardware feature levels this app will support.
+  // Note the ordering should be preserved.
+  // Don't forget to declare your application's minimum required feature level in its
+  // description.  All applications are assumed to support 9.1 unless otherwise stated.
+  D3D_FEATURE_LEVEL featureLevels[] =
+  {
+      D3D_FEATURE_LEVEL_11_1,
+      D3D_FEATURE_LEVEL_11_0,
+      D3D_FEATURE_LEVEL_10_1,
+      D3D_FEATURE_LEVEL_10_0,
+      D3D_FEATURE_LEVEL_9_3,
+      D3D_FEATURE_LEVEL_9_2,
+      D3D_FEATURE_LEVEL_9_1
+  };
+
+  // Create the DX11 API device object, and get a corresponding context.
+  ComPtr<ID3D11Device> device;
+  ComPtr<ID3D11DeviceContext> context;
+  DX::ThrowIfFailed(
+      D3D11CreateDevice(
+          nullptr,                    // specify null to use the default adapter
+          D3D_DRIVER_TYPE_HARDWARE,
+          nullptr,                    // leave as nullptr unless software device
+          creationFlags,              // optionally set debug and Direct2D compatibility flags
+          featureLevels,              // list of feature levels this app can support
+          ARRAYSIZE(featureLevels),   // number of entries in above list
+          D3D11_SDK_VERSION,          // always set this to D3D11_SDK_VERSION
+          &device,                    // returns the Direct3D device created
+          &m_featureLevel,            // returns feature level of device created
+          &context                    // returns the device immediate context
+          )
+      );
+
+  // Get the DirectX11.1 device by QI off the DirectX11 one.
+  DX::ThrowIfFailed(
+      device.As(&m_d3dDevice)
+      );
+
+  // And get the corresponding device context in the same way.
+  DX::ThrowIfFailed(
+      context.As(&m_d3dContext)
+      );
+}
+`,
+  php: `<?php
+// The next line contains a syntax error:
+if () {
+return "The parser recovers from this type of syntax error";
+}
+?>
+<html>
+<head>
+<title>Example page</title>
+</head>
+<body>
+<script type="text/javascript">
+// Some PHP embedded inside JS
+// Generated <?=date('l, F jS, Y')?>
+var server_token = <?=rand(5, 10000)?>
+if (typeof server_token === 'number') {
+  alert('token: ' + server_token);
+}
+<\/script>
+<div>
+Hello
+<? if (isset($user)) { ?>
+<b><?=$user?></b>
+<? } else { ?>
+<i>guest</i>
+<? } ?>
+!
+</div>
+</body>
+</html>
+`,
+  python: `import banana
+
+class Monkey:
+  # Bananas the monkey can eat.
+  capacity = 10
+  def eat(self, n):
+      """Make the monkey eat n bananas!"""
+      self.capacity -= n * banana.size
+
+  def feeding_frenzy(self):
+      self.eat(9.25)
+      return "Yum yum"
+`,
+  go: `package main
+
+import "strings"
+import "fmt"
+
+// Returns the first index of the target string \`t\`, or
+// -1 if no match is found.
+func Index(vs []string, t string) int {
+  for i, v := range vs {
+      if v == t {
+          return i
+      }
+  }
+  return -1
+}
+
+// Returns \`true\` if the target string t is in the
+// slice.
+func Include(vs []string, t string) bool {
+  return Index(vs, t) >= 0
+}
+
+func main() {
+  // Here we try out our various collection functions.
+  var strs = []string{"peach", "apple", "pear", "plum"}
+  fmt.Println(Index(strs, "pear"))
+  fmt.Println(Include(strs, "grape"))
+}
+`,
+  kotlin: `const val POINTS_X_PASS: Int = 15
+val EZPassAccounts: MutableMap<Int, Int> = mutableMapOf(1 to 100, 2 to 100, 3 to 100)
+val EZPassReport: Map<Int, Int> = EZPassAccounts
+
+// update points credit
+fun updatePointsCredit(accountId: Int) {
+  if (EZPassAccounts.containsKey(accountId)) {
+      println("Updating $accountId...")
+      EZPassAccounts[accountId] = EZPassAccounts.getValue(accountId) + POINTS_X_PASS
+  } else {
+      println("Error: Trying to update a non-existing account (id: $accountId)")
+  }
+}
+
+fun accountsReport() {
+  println("EZ-Pass report:")
+  EZPassReport.forEach{
+      k, v -> println("ID $k: credit $v")
+  }
+}
+
+fun main() {
+  accountsReport()
+  updatePointsCredit(1)
+  updatePointsCredit(1)
+  updatePointsCredit(5)
+  accountsReport()
+}
+`,
+  ruby: `module Azure
+module Blob
+  class Blob
+
+    def initialize
+      @properties = {}
+      @metadata = {}
+      yield self if block_given?
+    end
+
+    attr_accessor :name
+    attr_accessor :snapshot
+    attr_accessor :properties
+    attr_accessor :metadata
+  end
+end
+end
+`,
+  rust: `fn main() {
+  let greetings = ["Hello", "Hola", "Bonjour",
+                   "Ciao", "こんにちは", "안녕하세요",
+                   "Cześć", "Olá", "Здравствуйте",
+                   "Chào bạn", "您好", "Hallo",
+                   "Hej", "Ahoj", "سلام"];
+
+  for (num, greeting) in greetings.iter().enumerate() {
+      print!("{} : ", greeting);
+      match num {
+          0 =>  println!("This code is editable and runnable!"),
+          1 =>  println!("¡Este código es editable y ejecutable!"),
+          2 =>  println!("Ce code est modifiable et exécutable !"),
+          3 =>  println!("Questo codice è modificabile ed eseguibile!"),
+          4 =>  println!("このコードは編集して実行出来ます！"),
+          5 =>  println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),
+          6 =>  println!("Ten kod można edytować oraz uruchomić!"),
+          7 =>  println!("Este código é editável e executável!"),
+          8 =>  println!("Этот код можно отредактировать и запустить!"),
+          9 =>  println!("Bạn có thể edit và run code trực tiếp!"),
+          10 => println!("这段代码是可以编辑并且能够运行的！"),
+          11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),
+          12 => println!("Den här koden kan redigeras och köras!"),
+          13 => println!("Tento kód můžete upravit a spustit"),
+          14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),
+          _ =>  {},
+      }
+  }
+}
+`,
+  lua: `    -- defines a factorial function
+  function fact (n)
+    if n == 0 then
+      return 1
+    else
+      return n * fact(n-1)
+    end
+  end
+
+  print("enter a number:")
+  a = io.read("*number")        -- read a number
+  print(fact(a))
+`,
+  bat: `rem *******Begin Comment**************
+rem This program starts the superapp batch program on the network,
+rem directs the output to a file, and displays the file
+rem in Notepad.
+rem *******End Comment**************
+@echo off
+if exist C:\output.txt goto EMPTYEXISTS
+setlocal
+path=g:\programs\superapp;%path%
+call superapp>C:\output.txt
+endlocal
+:EMPTYEXISTS
+start notepad c:\output.txt
+`,
+  ini: `# Example of a .gitconfig file
+
+[core]
+repositoryformatversion = 0
+filemode = false
+bare = false
+logallrefupdates = true
+symlinks = false
+ignorecase = true
+hideDotFiles = dotGitOnly
+
+# Defines the master branch
+[branch "master"]
+remote = origin
+merge = refs/heads/master
+`,
+  shell: `#!/bin/bash
+
+# Link filedescriptor 10 with stdin
+exec 10<&0
+# stdin replaced with a file supplied as a first argument
+exec < $1
+# remember the name of the input file
+in=$1
+
+# init
+file="current_line.txt"
+let count=0
+
+# this while loop iterates over all lines of the file
+while read LINE
+do
+  # increase line counter
+  ((count++))
+  # write current line to a tmp file with name $file (not needed for counting)
+  echo $LINE > $file
+  # this checks the return code of echo (not needed for writing; just for demo)
+  if [ $? -ne 0 ]
+   then echo "Error in writing to file \${file}; check its permissions!"
+  fi
+done
+
+echo "Number of lines: $count"
+echo "The last line of the file is: \`cat \${file}\`"
+
+# Note: You can achieve the same by just using the tool wc like this
+echo "Expected number of lines: \`wc -l $in\`"
+
+# restore stdin from filedescriptor 10
+# and close filedescriptor 10
+exec 0<&10 10<&-
+`,
+  vb: `Imports System
+Imports System.Collections.Generic
+
+Module Module1
+
+  Sub Main()
+      Dim a As New M8Ball
+
+      Do While True
+
+          Dim q As String = ""
+          Console.Write("ask me about the future... ")
+          q = Console.ReadLine()
+
+          If q.Trim <> "" Then
+              Console.WriteLine("the answer is... {0}", a.getAnswer(q))
+          Else
+              Exit Do
+          End If
+      Loop
+
+  End Sub
+
+End Module
+
+Class M8Ball
+
+  Public Answers As System.Collections.Generic.Dictionary(Of Integer, String)
+
+  Public Sub New()
+      Answers = New System.Collections.Generic.Dictionary(Of Integer, String)
+      Answers.Add(0, "It is certain")
+      Answers.Add(1, "It is decidedly so")
+      Answers.Add(2, "Without a doubt")
+      Answers.Add(3, "Yes, definitely")
+      Answers.Add(4, "You may rely on ")
+      Answers.Add(5, "As I see it, yes")
+      Answers.Add(6, "Most likely")
+      Answers.Add(7, "Outlook good")
+      Answers.Add(8, "Signs point to yes")
+      Answers.Add(9, "Yes")
+      Answers.Add(10, "Reply hazy, try again")
+      Answers.Add(11, "Ask again later")
+      Answers.Add(12, "Better not tell you now")
+      Answers.Add(13, "Cannot predict now")
+      Answers.Add(14, "Concentrate and ask again")
+      Answers.Add(15, "Don't count on it")
+      Answers.Add(16, "My reply is no")
+      Answers.Add(17, "My sources say no")
+      Answers.Add(18, "Outlook not so")
+      Answers.Add(19, "Very doubtful")
+  End Sub
+
+  Public Function getAnswer(theQuestion As String) As String
+      Dim r As New Random
+      Return Answers(r.Next(0, 19))
+  End Function
+
+End Class
+`,
+  yaml: `%TAG ! tag:clarkevans.com,2002:
+--- !shape
+# Use the ! handle for presenting
+# tag:clarkevans.com,2002:circle
+- !circle
+center: &ORIGIN {x: 73, y: 129}
+radius: 7
+- !line
+start: *ORIGIN
+finish: { x: 89, y: 102 }
+- !label
+start: *ORIGIN
+color: 0xFFEEBB
+text: Pretty vector drawing.
+`,
+  xml: `<?xml version="1.0"?>
+<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
+<connectionStrings>
+  <add name="MyDB"
+    connectionString="value for the deployed Web.config file"
+    xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
+</connectionStrings>
+<system.web>
+  <customErrors defaultRedirect="GenericError.htm"
+    mode="RemoteOnly" xdt:Transform="Replace">
+    <error statusCode="500" redirect="InternalError.htm"/>
+  </customErrors>
+</system.web>
+</configuration>
+`,
+  mysql: `CREATE TABLE shop (
+  article INT(4) UNSIGNED ZEROFILL DEFAULT '0000' NOT NULL,
+  dealer  CHAR(20)                 DEFAULT ''     NOT NULL,
+  price   DOUBLE(16,2)             DEFAULT '0.00' NOT NULL,
+  PRIMARY KEY(article, dealer));
+INSERT INTO shop VALUES
+  (1,'A',3.45),(1,'B',3.99),(2,'A',10.99),(3,'B',1.45),
+  (3,'C',1.69),(3,'D',1.25),(4,'D',19.95);
+`,
+  dockerfile: `FROM mono:3.12
+
+ENV KRE_FEED https://www.myget.org/F/aspnetvnext/api/v2
+ENV KRE_USER_HOME /opt/kre
+
+RUN apt-get -qq update && apt-get -qqy install unzip
+
+ONBUILD RUN curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/kvminstall.sh | sh
+ONBUILD RUN bash -c "source $KRE_USER_HOME/kvm/kvm.sh \\
+  && kvm install latest -a default \\
+  && kvm alias default | xargs -i ln -s $KRE_USER_HOME/packages/{} $KRE_USER_HOME/packages/default"
+
+# Install libuv for Kestrel from source code (binary is not in wheezy and one in jessie is still too old)
+RUN apt-get -qqy install \\
+  autoconf \\
+  automake \\
+  build-essential \\
+  libtool
+RUN LIBUV_VERSION=1.0.0-rc2 \\
+  && curl -sSL https://github.com/joyent/libuv/archive/v\${LIBUV_VERSION}.tar.gz | tar zxfv - -C /usr/local/src \\
+  && cd /usr/local/src/libuv-$LIBUV_VERSION \\
+  && sh autogen.sh && ./configure && make && make install \\
+  && rm -rf /usr/local/src/libuv-$LIBUV_VERSION \\
+  && ldconfig
+
+ENV PATH $PATH:$KRE_USER_HOME/packages/default/bin
+
+# Extra things to test
+RUN echo "string at end"
+RUN echo must work 'some str' and some more
+RUN echo hi this is # not a comment
+RUN echo 'String with \${VAR} and another $one here'
+`
+};
+
+/** 生成在线运行代码 */
+export function generateRunCode(
+  cssCode: string,
+  htmlCode: string,
+  jsCode: string
+) {
+  /** iframe内用于收集日志的代码 */
+  const consoleOverrideCode = `const originalConsoleMethods = {
+  log: console.log,
+  error: console.error,
+  warn: console.warn
+};
+['log', 'error', 'warn'].forEach(function(methodName) {
+  console[methodName] = function () {
+    originalConsoleMethods[methodName].apply(console, arguments);
+    parent.postMessage({ id: 'iframeConsole', code: [...arguments].flat().join(' '), type: methodName }, '*');
+  };
+});
+window.onerror = function(message, source, lineno, colno, error) {
+  const errorStack = \`\${message}
+at (\${source}:\${lineno}:\${colno})\`;
+  parent.postMessage({ id: 'iframeConsole', code: error.stack || errorStack, type: 'error' }, '*');
+};
+`;
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>代码运行 - Ele Admin Plus</title>
+    <style>
+      ${cssCode}
+    </style>
+    <script>
+      !(function () {
+        ${consoleOverrideCode}
+      })();
+    <\/script>
+  </head>
+  <body>
+    ${htmlCode}
+    <script>
+      !(function () {
+        ${jsCode}
+      })();
+    <\/script>
+  </body>
+</html>
+`;
+}
diff --git a/z_ele/src/views/extension/monaco/components/demo-diff.vue b/z_ele/src/views/extension/monaco/components/demo-diff.vue
new file mode 100644
index 0000000..023d574
--- /dev/null
+++ b/z_ele/src/views/extension/monaco/components/demo-diff.vue
@@ -0,0 +1,124 @@
+<template>
+  <ele-card header="代码差异对比" :body-style="{ padding: '12px' }">
+    <div style="border: 1px solid var(--el-border-color)">
+      <monaco-editor
+        v-model="code"
+        :language="language"
+        v-model:original="original"
+        :original-language="originalLanguage"
+        :diff="true"
+        style="height: 460px"
+      />
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+
+  /** 代码内容 */
+  const code = ref(`/**
+ * 下载文件
+ * @param data 二进制数据
+ * @param name 文件名
+ * @param type 文件类型
+ */
+export function download(data, name, type) {
+  const blob = new Blob([data], { type: type || 'application/octet-stream' });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * 深度克隆
+ * @param value 对象
+ */
+export function cloneDeep(value) {
+  const cache = new WeakMap();
+  const clone = (value) => {
+    if (typeof value !== 'object' || value == null) {
+      return value;
+    }
+    // 处理 Date 对象
+    if (value instanceof Date) {
+      return new Date(value);
+    }
+    // 处理 RegExp 对象
+    if (value instanceof RegExp) {
+      return new RegExp(value.source, value.flags);
+    }
+    // 处理函数
+    if (typeof value === 'function') {
+      return value;
+    }
+    // 处理循环引用
+    if (cache.has(value)) {
+      return cache.get(value);
+    }
+    const result = Array.isArray(value) ? [] : {};
+    cache.set(value, result);
+    for (const key of Reflect.ownKeys(value)) {
+      result[key] = clone(value[key]);
+    }
+    return result;
+  };
+  return clone(value);
+}
+`);
+
+  /** 代码语言 */
+  const language = ref('javascript');
+
+  /** 原始代码内容 */
+  const original = ref(`/**
+ * 下载文件
+ * @param data 二进制数据
+ * @param name 文件名
+ */
+export function download(data, name) {
+  const blob = new Blob([data], { type: 'application/octet-stream' });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+/**
+ * 深度克隆
+ * @param value 对象
+ */
+export function cloneDeep(value) {
+  const cache = new WeakMap();
+  const clone = (value) => {
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+    if (cache.has(value)) {
+      return cache.get(value);
+    }
+    const result = Array.isArray(value) ? [] : {};
+    cache.set(value, result);
+    for (const key of Reflect.ownKeys(value)) {
+      result[key] = clone(value[key]);
+    }
+    return result;
+  };
+  return clone(value);
+}
+`);
+
+  /** 原始代码语言 */
+  const originalLanguage = ref('javascript');
+</script>
diff --git a/z_ele/src/views/extension/monaco/components/demo-run.vue b/z_ele/src/views/extension/monaco/components/demo-run.vue
new file mode 100644
index 0000000..ae8cd4e
--- /dev/null
+++ b/z_ele/src/views/extension/monaco/components/demo-run.vue
@@ -0,0 +1,550 @@
+<template>
+  <ele-card header="代码运行" :body-style="{ padding: '12px' }">
+    <div class="run-wrapper">
+      <div class="editor-wrapper">
+        <div class="editor-item">
+          <div class="editor-item-header">
+            <el-icon class="editor-item-icon">
+              <CodeOutlined />
+            </el-icon>
+            <div>HTML</div>
+          </div>
+          <div class="editor-item-body">
+            <monaco-editor
+              v-model="htmlCode"
+              language="html"
+              style="height: 128px"
+            />
+          </div>
+        </div>
+        <div class="editor-item">
+          <div class="editor-item-header">
+            <div class="editor-item-icon is-css">*</div>
+            <div>CSS</div>
+          </div>
+          <div class="editor-item-body">
+            <monaco-editor
+              v-model="cssCode"
+              language="css"
+              style="height: 220px"
+            />
+          </div>
+        </div>
+        <div class="editor-item">
+          <div class="editor-item-header">
+            <div class="editor-item-icon is-js">{}</div>
+            <div>JS</div>
+          </div>
+          <div class="editor-item-body">
+            <monaco-editor
+              v-model="jsCode"
+              language="javascript"
+              style="height: 320px"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="result-wrapper">
+        <div class="frame-header">
+          <div class="frame-tool"></div>
+          <div class="frame-tool is-warning"></div>
+          <div class="frame-tool is-success"></div>
+          <div style="margin: 1.68px 2px 0 auto; font-size: 12px">重新运行</div>
+          <div class="frame-btn" @click="runCode()">
+            <el-icon style="transform: scale(1.09) translate(0.38px, 0.48px)">
+              <ReloadOutlined />
+            </el-icon>
+          </div>
+        </div>
+        <div class="result-body">
+          <iframe :key="iframeKey" ref="iframeRef"></iframe>
+        </div>
+        <div class="console-wrapper">
+          <div class="console-header">
+            <span style="font-family: Consolas; vertical-align: -1px">
+              <span style="font-size: 18px">></span>
+              <span style="margin: 0 4px 0 -4px; vertical-align: 2px">_</span>
+            </span>
+            <span>Console</span>
+          </div>
+          <div ref="consoleBodyRef" class="console-body">
+            <pre
+              v-for="(item, index) in consoleCodes"
+              :key="index"
+              :class="[
+                'console-item',
+                { 'is-error': item.type === 'error' },
+                { 'is-warn': item.type === 'warn' }
+              ]"
+              >{{ item.code }}</pre
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import {
+    ref,
+    onMounted,
+    onBeforeUnmount,
+    nextTick,
+    onActivated,
+    onDeactivated
+  } from 'vue';
+  import { CodeOutlined, ReloadOutlined } from '@/components/icons';
+  import MonacoEditor from '@/components/MonacoEditor/index.vue';
+  import { generateRunCode } from './demo-codes';
+
+  /** html代码 */
+  const htmlCode =
+    ref(`<div style="text-align: center;padding-top: calc(50vh - 24px);">
+  <div class="demo-btn" onclick="console.warn('点击了登录按钮');">登录</div>
+  <div class="demo-btn" onclick="abcdefghijk">注册</div>
+</div>
+<canvas class="bg-canvas" id="bgCanvas"></canvas>
+`);
+
+  /** css代码 */
+  const cssCode = ref(`html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: #001121;
+}
+
+.bg-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.6;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.demo-btn {
+  color: #01c1ec;
+  background: rgba(1, 193, 236, 0.38);
+  backdrop-filter: blur(4px);
+  padding: 14px 42px;
+  display: inline-block;
+  clip-path: polygon(0 0, 90% 0, 100% 28%, 100% 100%, 10% 100%, 0 72%);
+  transition: all 0.2s;
+  letter-spacing: 8px;
+  font-weight: bold;
+  user-select: none;
+  cursor: pointer;
+}
+
+.demo-btn:hover {
+  color: #fff;
+  background: rgba(1, 193, 236, 0.68);
+}
+
+.demo-btn + .demo-btn {
+  margin-left: 12px;
+}
+`);
+
+  /** js代码 */
+  const jsCode = ref(`console.log('Hello World!');
+
+const bgCanvas = document.getElementById('bgCanvas');
+const ctx = bgCanvas.getContext('2d');
+let width = window.innerWidth;
+let height = window.innerHeight;
+bgCanvas.width = width;
+bgCanvas.height = height;
+
+const points = Array.from({ length: 250 }).map(function () {
+  return {
+    x: Math.random() * width,
+    y: Math.random() * height,
+    xa: 2 * Math.random() - 1,
+    ya: 2 * Math.random() - 1,
+    max: 9000
+  };
+});
+
+const cursor = { x: null, y: null, max: 20000 };
+
+window.onmousemove = function (e) {
+  cursor.x = e.clientX;
+  cursor.y = e.clientY;
+};
+
+window.onmouseout = function () {
+  cursor.x = null;
+  cursor.y = null;
+};
+
+window.onresize = function () {
+  width = window.innerWidth;
+  height = window.innerHeight;
+  bgCanvas.width = width;
+  bgCanvas.height = height;
+};
+
+function move() {
+  ctx.clearRect(0, 0, width, height);
+  const data = [cursor].concat(points);
+  points.forEach(function (item) {
+    item.x += item.xa;
+    item.y += item.ya;
+    item.xa *= item.x > width || item.x < 0 ? -1 : 1;
+    item.ya *= item.y > height || item.y < 0 ? -1 : 1;
+    ctx.fillRect(item.x - 0.5, item.y - 0.5, 1, 1);
+    data.forEach((p) => {
+      if (item !== p && null !== p.x && null !== p.y) {
+        const dX = item.x - p.x;
+        const dY = item.y - p.y;
+        const distance = dX * dX + dY * dY;
+        if (distance < p.max) {
+          if (p === cursor && distance >= p.max / 2) {
+            item.x -= 0.03 * dX;
+            item.y -= 0.03 * dY;
+          }
+          const level = (p.max - distance) / p.max;
+          ctx.beginPath();
+          ctx.lineWidth = level / 2;
+          ctx.strokeStyle = 'rgba(1, 211, 255, ' + (level + 0.2) + ')';
+          ctx.moveTo(item.x, item.y);
+          ctx.lineTo(p.x, p.y);
+          ctx.stroke();
+        }
+      }
+    });
+    data.splice(data.indexOf(item), 1);
+  });
+  window.requestAnimationFrame(move);
+}
+
+move();
+
+console.log('Start Move.');
+`);
+
+  /** iframe */
+  const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+  /** 用于重新渲染iframe */
+  const iframeKey = ref(0);
+
+  /** 控制台 */
+  const consoleBodyRef = ref<HTMLElement | null>(null);
+
+  /** 控制台信息类型 */
+  interface ConsoleItem {
+    /** 类型 */
+    type?: 'log' | 'error' | 'warn';
+    /** 内容 */
+    code?: string;
+  }
+
+  /** 控制台信息 */
+  const consoleCodes = ref<ConsoleItem[]>([]);
+
+  /** 运行代码到iframe */
+  const runCode = (first?: boolean) => {
+    if (!first) {
+      iframeKey.value++;
+      nextTick(() => {
+        runCode(true);
+      });
+      return;
+    }
+    consoleCodes.value = [];
+    const doc = iframeRef.value?.contentWindow?.document;
+    if (!doc) {
+      return;
+    }
+    doc.open();
+    doc.write(generateRunCode(cssCode.value, htmlCode.value, jsCode.value));
+    doc.close();
+  };
+
+  /** 收集iframe内日志的消息监听 */
+  const handleMessage = (e: MessageEvent<any>) => {
+    if (e.data && e.data.id === 'iframeConsole') {
+      consoleCodes.value.push(e.data);
+      nextTick(() => {
+        consoleBodyRef.value?.scrollTo?.(0, consoleBodyRef.value.scrollHeight);
+      });
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('message', handleMessage);
+    runCode(true);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('message', handleMessage);
+  });
+
+  const isDeactivated = ref(false);
+
+  onActivated(() => {
+    if (isDeactivated.value) {
+      runCode(true);
+      isDeactivated.value = false;
+    }
+  });
+
+  onDeactivated(() => {
+    isDeactivated.value = true;
+  });
+</script>
+
+<style lang="scss" scoped>
+  .run-wrapper {
+    display: flex;
+  }
+
+  /* 编辑器 */
+  .editor-wrapper {
+    flex: 1;
+    background: #1e1e1e;
+    box-shadow: -1px 0 0 1px #1e1e1e inset;
+    overflow: hidden;
+  }
+
+  .editor-item {
+    border-top: 1px solid #2f3742;
+  }
+
+  .editor-item-header {
+    font-size: 12px;
+    color: #babdc0;
+    background: #18212d;
+    border-bottom: 1px solid #2f3742;
+    display: flex;
+    align-items: center;
+    height: 30px;
+    padding: 0 16px;
+  }
+
+  .editor-item-body {
+    border-left: 1px solid #1e1e1e;
+    border-right: 1px solid #1e1e1e;
+  }
+
+  .editor-wrapper > .editor-item:last-child .editor-item-body {
+    border-bottom: 1px solid #1e1e1e;
+  }
+
+  /* 编辑器顶栏图标 */
+  .editor-item-icon {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border-radius: 4px;
+    color: #18212d;
+    background: #e86435;
+    font-size: 12px;
+    margin-right: 6px;
+    text-align: center;
+    box-sizing: border-box;
+    user-select: none;
+
+    &.is-css {
+      font-size: 26px;
+      line-height: 30px;
+      background: #2397d6;
+    }
+
+    &.is-js {
+      font-size: 12px;
+      line-height: 15px;
+      background: #eecc3b;
+      font-weight: bold;
+      letter-spacing: 3px;
+      padding-left: 2px;
+    }
+
+    & + div {
+      transform: translateY(1px);
+      font-weight: bold;
+    }
+  }
+
+  /* 右侧容器 */
+  .result-wrapper {
+    flex: 1;
+    border: 1px solid #2f3742;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* 代码运行容器 */
+  .result-body {
+    flex: 1;
+    overflow: hidden;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      display: block;
+      border: none;
+    }
+  }
+
+  /* 右侧顶栏 */
+  .frame-header {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px 0 20px;
+    color: #babdc0;
+    background: #18212d;
+    border-bottom: 1px solid #2f3742;
+  }
+
+  .frame-tool {
+    width: 10px;
+    height: 10px;
+    margin-right: 10px;
+    border-radius: 50%;
+    background: #ff4a4a;
+
+    &.is-warning {
+      background: #ffb83d;
+    }
+
+    &.is-success {
+      background: #00c543;
+    }
+  }
+
+  /* 右侧顶栏的右侧按钮 */
+  .frame-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    user-select: none;
+    cursor: pointer;
+
+    &:hover {
+      background: #445265;
+    }
+  }
+
+  /* 控制台容器 */
+  .console-wrapper {
+    color: #e3e3e3;
+    background: #1e1e1e;
+  }
+
+  .console-header {
+    color: #babdc0;
+    background: #18212d;
+    border-bottom: 1px solid #2f3742;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 6px;
+    user-select: none;
+  }
+
+  .console-body {
+    height: 180px;
+    overflow: auto;
+    padding: 0 4px;
+    font-size: 12px;
+    line-height: 16px;
+    --ele-scrollbar-color: #5e5e5e;
+    --ele-scrollbar-hover-color: #707070;
+  }
+
+  /* 控制台信息 */
+  .console-item {
+    padding: 2px 6px;
+    margin: 5px 0 5px 0;
+    transition: all 0.2s;
+    border-radius: 4px;
+    position: relative;
+    word-break: break-all;
+    white-space: pre-wrap;
+
+    &:hover {
+      background: rgba(0, 110, 255, 0.2);
+    }
+
+    & + .console-item {
+      margin-top: 0;
+
+      &::after {
+        content: '';
+        border-top: 1px solid #2f3742;
+        position: absolute;
+        top: -3px;
+        left: 6px;
+        right: 6px;
+      }
+    }
+
+    /* 错误信息 */
+    &.is-error {
+      color: #f9dedc;
+      background: #4e3534;
+
+      &::before {
+        content: '⨯';
+        font-size: 13px;
+        color: #1e1e1e;
+        background: #e46962;
+        width: 11px;
+        height: 11px;
+        line-height: 10px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 3px;
+        font-weight: bold;
+        text-align: center;
+        transform: translateX(-1px);
+      }
+    }
+
+    /* 警告信息 */
+    &.is-warn {
+      color: #fdf3aa;
+      background: #413c26;
+
+      &::before {
+        content: '!';
+        font-size: 12px;
+        color: #1e1e1e;
+        background: #fe8d59;
+        width: 14px;
+        height: 11px;
+        line-height: 12px;
+        display: inline-block;
+        margin-right: 1px;
+        font-weight: bold;
+        text-align: center;
+        transform: translateX(-1px);
+        clip-path: polygon(50% 0, 100% 100%, 0 100%);
+      }
+    }
+  }
+
+  @media screen and (max-width: 1200px) {
+    .run-wrapper {
+      display: block;
+    }
+
+    .result-wrapper {
+      height: 762px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/monaco/index.vue b/z_ele/src/views/extension/monaco/index.vue
new file mode 100644
index 0000000..49fb176
--- /dev/null
+++ b/z_ele/src/views/extension/monaco/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <ele-page>
+    <demo-basic />
+    <demo-diff />
+    <demo-run />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoDiff from './components/demo-diff.vue';
+  import DemoRun from './components/demo-run.vue';
+
+  defineOptions({ name: 'ExtensionMonaco' });
+</script>
diff --git a/z_ele/src/views/extension/player/components/demo-basic.vue b/z_ele/src/views/extension/player/components/demo-basic.vue
new file mode 100644
index 0000000..b03d0f2
--- /dev/null
+++ b/z_ele/src/views/extension/player/components/demo-basic.vue
@@ -0,0 +1,91 @@
+<template>
+  <ele-card header="基础演示">
+    <!-- 操作按钮 -->
+    <div style="margin-bottom: 16px">
+      <el-button type="primary" class="ele-btn-icon" @click="play">
+        播放
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="pause">
+        暂停
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="replay">
+        重新播放
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="changeSrc">
+        切换视频源
+      </el-button>
+    </div>
+    <!-- 播放器 -->
+    <ele-xg-player :config="config" @player="handlePlayer" />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type Player from 'xgplayer';
+  const url1 =
+    'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
+  const poster1 =
+    'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png';
+  const url2 =
+    'https://tianyu.v.netease.com/2024/0617/745cbbaa15464f6c191a10a4c7fb9a30.mp4';
+  const poster2 =
+    'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/6.png';
+
+  /** 视频播放器配置 */
+  const config = ref({
+    lang: 'zh-cn',
+    fluid: true,
+    // 视频地址
+    url: url1,
+    // 封面
+    poster: poster1,
+    // 开启倍速播放
+    playbackRate: [0.5, 1, 1.5, 2],
+    // 开启画中画
+    pip: true,
+    // 默认音量
+    volume: 1,
+    // 自动播放
+    autoplay: false
+  });
+
+  /** 视频播放器实例 */
+  let player: Player;
+
+  /** 播放器渲染完成 */
+  const handlePlayer = (e: Player) => {
+    player = e;
+  };
+
+  /** 播放 */
+  const play = () => {
+    if (player && player.paused) {
+      player.play();
+    }
+  };
+
+  /** 暂停 */
+  const pause = () => {
+    if (player) {
+      player.pause();
+    }
+  };
+
+  /** 重新播放 */
+  const replay = () => {
+    if (player) {
+      player.replay();
+    }
+  };
+
+  /** 切换视频源 */
+  const changeSrc = () => {
+    config.value = {
+      ...config.value,
+      url: config.value.url == url1 ? url2 : url1,
+      poster: config.value.url == url1 ? poster2 : poster1,
+      autoplay: true
+    };
+  };
+</script>
diff --git a/z_ele/src/views/extension/player/components/demo-danmu.vue b/z_ele/src/views/extension/player/components/demo-danmu.vue
new file mode 100644
index 0000000..c6fe966
--- /dev/null
+++ b/z_ele/src/views/extension/player/components/demo-danmu.vue
@@ -0,0 +1,253 @@
+<template>
+  <ele-card header="显示弹幕">
+    <!-- 操作按钮 -->
+    <el-space style="margin-bottom: 16px">
+      <el-input
+        style="width: 160px"
+        v-model="text"
+        placeholder="请输入弹幕内容"
+        :disabled="!ready"
+      />
+      <el-button
+        type="primary"
+        :disabled="!ready"
+        class="ele-btn-icon"
+        @click="shoot"
+      >
+        发射
+      </el-button>
+    </el-space>
+    <!-- 播放器 -->
+    <ele-xg-player :config="config" @player="handlePlayer" />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type Player from 'xgplayer';
+  import Danmu from 'xgplayer/es/plugins/danmu';
+  import 'xgplayer/es/plugins/danmu/index.css';
+
+  /** 视频播放器配置 */
+  const config = reactive({
+    lang: 'zh-cn',
+    fluid: true,
+    volume: 1,
+    url: 'https://tianyu.v.netease.com/2024/0617/745cbbaa15464f6c191a10a4c7fb9a30.mp4',
+    poster:
+      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/6.png',
+    plugins: [Danmu],
+    danmu: {
+      comments: [
+        {
+          id: '1',
+          start: 2500,
+          txt: '空降',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '2',
+          start: 3500,
+          txt: '空降',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '3',
+          start: 4500,
+          txt: '简直碉堡了',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '4',
+          start: 5000,
+          txt: '弹幕护体',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '5',
+          start: 6500,
+          txt: '前方高能',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '6',
+          start: 9000,
+          txt: '弹幕护体',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '7',
+          start: 11000,
+          txt: '666666666',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '8',
+          start: 12500,
+          txt: '简直碉堡了',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '9',
+          start: 15500,
+          txt: '弹幕护体',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '10',
+          start: 16500,
+          txt: '666666666',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '11',
+          start: 18000,
+          txt: '画面太美不敢看',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '12',
+          start: 20500,
+          txt: '666666666',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '13',
+          start: 22000,
+          txt: '画面太美不敢看',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '14',
+          start: 25500,
+          txt: '666666666',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        },
+        {
+          id: '15',
+          start: 26000,
+          txt: '前方高能666',
+          duration: 15000,
+          color: true,
+          style: {
+            color: '#ffcd08',
+            fontSize: '20px'
+          }
+        }
+      ]
+    }
+  });
+
+  /** 视频播放器是否实例化完成 */
+  const ready = ref(false);
+
+  /** 弹幕输入内容 */
+  const text = ref('');
+
+  /** 视频播放器实例 */
+  let player: Player;
+
+  /** 播放器二渲染完成 */
+  const handlePlayer = (e: Player) => {
+    player = e;
+    player.on('play', () => {
+      ready.value = true;
+    });
+  };
+
+  /** 发射弹幕 */
+  const shoot = () => {
+    if (!player) {
+      return;
+    }
+    if (!text.value) {
+      EleMessage.error({ message: '请输入弹幕内容', plain: true });
+      return;
+    }
+    const danmuIns = player.getPlugin('danmu');
+    danmuIns.sendComment({
+      id: Date.now(),
+      duration: 15000,
+      color: true,
+      start: player.currentTime * 1000,
+      txt: text.value,
+      style: {
+        color: '#fa1f41',
+        fontSize: '20px',
+        border: 'solid 1px #fa1f41'
+      }
+    });
+    text.value = '';
+  };
+</script>
diff --git a/z_ele/src/views/extension/player/components/demo-live.vue b/z_ele/src/views/extension/player/components/demo-live.vue
new file mode 100644
index 0000000..1727449
--- /dev/null
+++ b/z_ele/src/views/extension/player/components/demo-live.vue
@@ -0,0 +1,92 @@
+<template>
+  <ele-card header="直播功能功能演示">
+    <!-- 操作按钮 -->
+    <div style="margin-bottom: 16px">
+      <el-button type="primary" class="ele-btn-icon" @click="play">
+        播放
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="pause">
+        暂停
+      </el-button>
+      <el-button type="primary" class="ele-btn-icon" @click="changeSrc">
+        切换视频源
+      </el-button>
+    </div>
+    <!-- 播放器 -->
+    <ele-xg-player :config="config" @player="handlePlayer" />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type Player from 'xgplayer';
+  import HlsPlugin from 'xgplayer-hls';
+  const url1 =
+    'https://ali-m-l.cztv.com/channels/lantian/channel001/1080p.m3u8';
+  const poster1 =
+    'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/6.png';
+  const url2 =
+    'https://ali-m-l.cztv.com/channels/lantian/channel008/1080p.m3u8';
+  const poster2 =
+    'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png';
+
+  /** 视频播放器配置 */
+  const config = ref({
+    lang: 'zh-cn',
+    fluid: true,
+    // 视频地址
+    url: url1,
+    // 封面
+    poster: poster1,
+    // 开启画中画
+    pip: true,
+    // 默认音量
+    volume: 1,
+    // 自动播放
+    autoplay: false,
+    // 是否是直播
+    isLive: true,
+    // 移除进度条/时间/倍数播放插件
+    ignores: ['progress', 'time', 'playbackrate'],
+    // 插件
+    plugins: [HlsPlugin],
+    // 插件配置
+    hls: {
+      retryCount: 3, // 重试 3 次，默认值
+      retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+      loadTimeout: 10000 // 请求超时时间为 10 秒，默认值
+    }
+  });
+
+  /** 视频播放器实例 */
+  let player: Player;
+
+  /** 播放器渲染完成 */
+  const handlePlayer = (e: Player) => {
+    player = e;
+  };
+
+  /** 播放 */
+  const play = () => {
+    if (player && player.paused) {
+      player.play();
+    }
+  };
+
+  /** 暂停 */
+  const pause = () => {
+    if (player) {
+      player.pause();
+    }
+  };
+
+  /** 切换视频源 */
+  const changeSrc = () => {
+    config.value = {
+      ...config.value,
+      url: config.value.url == url1 ? url2 : url1,
+      poster: config.value.url == url1 ? poster2 : poster1,
+      autoplay: true
+    };
+  };
+</script>
diff --git a/z_ele/src/views/extension/player/components/demo-music.vue b/z_ele/src/views/extension/player/components/demo-music.vue
new file mode 100644
index 0000000..d4bb190
--- /dev/null
+++ b/z_ele/src/views/extension/player/components/demo-music.vue
@@ -0,0 +1,288 @@
+<template>
+  <ele-card header="音乐播放功能演示">
+    <div class="demo-music-wrap">
+      <div class="music-wrapper">
+        <div
+          :key="current.vid"
+          class="music-body"
+          :style="{ backgroundImage: `url('${current.poster}')` }"
+        >
+          <div ref="lrcRef" class="lrc-wrap" style="height: 100%"></div>
+          <canvas ref="analyzeRef" class="analyze-wrap"></canvas>
+        </div>
+        <div class="music-footer">
+          <div class="music-controls">
+            <el-icon>
+              <StepBackwardFilled @click="playPrev" />
+            </el-icon>
+            <el-icon @click="playOrPause">
+              <PauseFilled v-if="playing" style="transform: scale(1.4)" />
+              <PlayFilled v-else style="transform: scale(1.4)" />
+            </el-icon>
+            <el-icon>
+              <StepForwardFilled @click="playNext" />
+            </el-icon>
+          </div>
+          <ele-xg-player
+            :key="current.vid"
+            :config="config"
+            @player="handlePlayer"
+            style="flex: 1; overflow: visible"
+          />
+        </div>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type Player from 'xgplayer';
+  import MusicPreset, { Analyze, Lyric } from 'xgplayer-music';
+  import {
+    PlayFilled,
+    PauseFilled,
+    StepForwardFilled,
+    StepBackwardFilled
+  } from '@/components/icons';
+  /** 歌词 */
+  const lyrics = [
+    {
+      vid: '000001',
+      lrc: `[00:00.00] 脆弱一分钟\n[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：Universal Ms Publ Ltd Taiwan\n`
+    },
+    {
+      vid: '000002',
+      lrc: `[00:00.000]Westlife-My Love\n[00:08.800]An empty street\n[00:10.510]An empty house\n[00:12.200]A hole inside my heart\n[00:15.470]I am all alone\n[00:17.270]The rooms are getting smaller\n[00:22.440]I wonder how\n[00:23.850]I wonder why\n[00:25.460]I wonder where they are\n[00:28.870]The days we had\n[00:30.500]The songs we sang together\n[00:33.320]Oh yeah\n[00:35.480]And oh my love\n[00:38.710]I am holding on forever\n[00:42.200]Reaching for a love that seems so far\n[00:48.070]So i say a little prayer\n[00:51.100]And hope my dreams will take me there\n[00:54.520]Where the skies are blue to see you once again, my love\n[01:01.230]Over seas and coast to coast\n[01:04.430]To find a place i love the most\n[01:07.830]Where the fields are green to see you once again, my love\n[01:18.730]I try to read\n[01:20.210]I go to work\n[01:21.900]I am laughing with my friends\n[01:25.180]But i cannot stop to keep myself from thinking\n[01:29.710]Oh no I wonder how\n[01:33.420]I wonder why\n[01:34.960]I wonder where they are\n[01:38.470]The days we had\n[01:40.150]The songs we sang together\n[01:42.900]Oh yeah And oh my love\n[01:48.300]I am holding on forever\n[01:51.760]Reaching for a love that seems so far Mark:\n[01:58.070]So i say a little prayer\n[02:01.400]And hope my dreams will take me there\n[02:04.800]Where the skies are blue to see you once again, my love\n[02:11.400]Over seas and coast to coast\n[02:14.720]To find a place i love the most\n[02:18.080]Where the fields are green to see you once again, my love\n[02:24.040]To hold you in my arms\n[02:27.290]To promise you my love\n[02:30.610]To tell you from the heart\n[02:33.870]You are all i am thinking of\n[02:45.460]I am reaching for a love that seems so far\n[02:51.940]So i say a little prayer\n[02:54.820]And hope my dreams will take me there\n[02:58.080]Where the skies are blue to see you once again, my love\n[03:04.700]Over seas and coast to coast\n[03:07.980]To find a place i love the most\n[03:11.520]Where the fields are green to see you once again,my love\n[03:19.000]Where the fields are green to see you once again,my love\n[03:31.580]Over seas and coast to coast\n[03:34.670]To find a place i love the most\n[03:38.110]Where the fields are green to see you once again,my love\n[03:19.020]say a little prayer\n[03:22.300]dreams will take me there\n[03:24.770]Where the skies are blue to see you once again\n`
+    }
+  ];
+  /** 歌曲 */
+  const songs = [
+    {
+      vid: '000001',
+      src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3',
+      poster:
+        'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png'
+    },
+    {
+      vid: '000002',
+      src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio-en.mp3',
+      poster:
+        'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/6.png'
+    }
+  ];
+
+  /** 播放器配置 */
+  const config = ref({
+    url: songs[0].src,
+    volume: 1,
+    height: 54,
+    width: '100%',
+    autoplay: false,
+    mediaType: 'audio',
+    marginControls: true,
+    controls: { initShow: true, mode: 'flex' },
+    ignores: [
+      'play',
+      'mobile',
+      'playbackrate',
+      'musicbackward',
+      'musicforward',
+      'musiccover',
+      'musicmeta',
+      'musicnext',
+      'musicprev'
+    ],
+    presets: ['default', MusicPreset],
+    videoConfig: { crossOrigin: 'anonymous' }
+  });
+
+  /** 频谱容器 */
+  const analyzeRef = ref<HTMLCanvasElement | null>(null);
+
+  /** 歌词容器 */
+  const lrcRef = ref<HTMLDivElement | null>(null);
+
+  /** 当前歌曲 */
+  const current = ref(songs[0]);
+
+  /** 是否播放状态 */
+  const playing = ref(false);
+
+  interface Sate {
+    player: Player | null;
+    analyze: Analyze | null;
+  }
+
+  const state: Sate = {
+    /** 视频播放器实例 */
+    player: null,
+    /** 频谱实例 */
+    analyze: null
+  };
+
+  /** 播放器渲染完成 */
+  const handlePlayer = (ins: Player) => {
+    state.player = ins;
+    state.player.crossOrigin = 'anonymous';
+    state.player.on('pause', () => {
+      playing.value = false;
+    });
+    state.player.on('ended', () => {
+      playing.value = false;
+      playNext();
+    });
+    state.player.on('play', () => {
+      playing.value = true;
+      // 初始化频谱
+      if (!state.analyze && analyzeRef.value) {
+        state.analyze = new Analyze(state.player, analyzeRef.value, {
+          stroke: 1,
+          mode: 'vertLines',
+          bgColor: 'rgba(0, 0, 0, 0)'
+        });
+      }
+    });
+    // 初始化歌词
+    const lyric = new Lyric(
+      [lyrics.find((d) => d.vid == current.value.vid)?.lrc],
+      lrcRef.value
+    );
+    lyric.bind(state.player);
+    lyric.show();
+  };
+
+  /** 播放/暂停 */
+  const playOrPause = () => {
+    if (state.player) {
+      if (state.player.paused) {
+        state.player.play();
+      } else {
+        state.player.pause();
+      }
+    }
+  };
+
+  /** 播放下一曲 */
+  const playNext = () => {
+    const index = songs.findIndex((d) => d.vid === current.value.vid);
+    if (index === songs.length - 1) {
+      current.value = songs[0];
+    } else {
+      current.value = songs[index + 1];
+    }
+    if (state.analyze) {
+      state.analyze.stop();
+      state.analyze = null;
+    }
+    config.value = { ...config.value, url: current.value.src, autoplay: true };
+  };
+
+  /** 播放上一曲 */
+  const playPrev = () => {
+    const index = songs.findIndex((d) => d.vid === current.value.vid);
+    if (index === 0) {
+      current.value = songs[songs.length - 1];
+    } else {
+      current.value = songs[index - 1];
+    }
+    if (state.analyze) {
+      state.analyze.stop();
+      state.analyze = null;
+    }
+    config.value = { ...config.value, url: current.value.src, autoplay: true };
+  };
+</script>
+
+<style lang="scss" scoped>
+  .music-body {
+    height: 325px;
+    position: relative;
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    &::before,
+    &::after {
+      content: '';
+      height: 80px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background-image: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.6),
+        rgba(0, 0, 0, 0)
+      );
+      z-index: 2;
+    }
+
+    &::after {
+      top: auto;
+      bottom: 0;
+      background-image: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0.6)
+      );
+    }
+  }
+
+  .lrc-wrap :deep(.xgplayer-lrcWrap) {
+    height: 100%;
+    padding: 80px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 16px;
+    line-height: 2;
+    overflow: auto;
+    scrollbar-width: none;
+
+    .xgplayer-lyric-item-active {
+      color: #e31106;
+      font-weight: bold;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .analyze-wrap {
+    width: 100%;
+    height: 60px;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+  }
+
+  .music-footer {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    background: #000;
+    color: #fff;
+
+    :deep(.xg-center-grid) {
+      padding-left: 0;
+    }
+  }
+
+  .music-controls {
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+      cursor: pointer;
+      margin-left: 16px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/player/index.vue b/z_ele/src/views/extension/player/index.vue
new file mode 100644
index 0000000..dc65c0f
--- /dev/null
+++ b/z_ele/src/views/extension/player/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <ele-page>
+    <el-row :gutter="16">
+      <el-col :md="12" :sm="24" :xs="24">
+        <demo-basic />
+      </el-col>
+      <el-col :md="12" :sm="24" :xs="24">
+        <demo-danmu />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" class="demo-player-music-wrap">
+      <el-col :md="12" :sm="24" :xs="24">
+        <demo-live />
+      </el-col>
+      <el-col :md="12" :sm="24" :xs="24">
+        <demo-music />
+      </el-col>
+    </el-row>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoDanmu from './components/demo-danmu.vue';
+  import DemoLive from './components/demo-live.vue';
+  import DemoMusic from './components/demo-music.vue';
+
+  defineOptions({ name: 'ExtensionPlayer' });
+</script>
+
+<style lang="scss" scoped>
+  @media screen and (min-width: 992px) {
+    .demo-player-music-wrap :deep(.demo-music-wrap) {
+      height: 0px;
+      padding-top: calc(56.25% + 32px + 16px);
+      position: relative;
+
+      .music-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .music-body {
+        flex: 1;
+        height: auto;
+        overflow: hidden;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/printer/components/print-checkbox.vue b/z_ele/src/views/extension/printer/components/print-checkbox.vue
new file mode 100644
index 0000000..9f7eb26
--- /dev/null
+++ b/z_ele/src/views/extension/printer/components/print-checkbox.vue
@@ -0,0 +1,82 @@
+<!-- 复选框组 -->
+<template>
+  <div class="print-checkbox-group">
+    <div
+      v-for="item in items"
+      :key="item.value"
+      :class="[
+        'print-checkbox',
+        { 'is-checked': model && model.includes(item.value) }
+      ]"
+      @click="handleItemClick(item)"
+    >
+      <div class="print-checkbox-icon"></div>
+      <div>{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  interface Item {
+    label: string;
+    value: string | number;
+  }
+
+  defineProps<{
+    /** 选项 */
+    items: Item[];
+  }>();
+
+  const model = defineModel<(string | number)[]>({ type: Array });
+
+  /** item点击事件 */
+  const handleItemClick = (item: Item) => {
+    // 取消选中
+    if (model.value && model.value.includes(item.value)) {
+      model.value.splice(model.value.indexOf(item.value), 1);
+      return;
+    }
+    // 选中
+    if (model.value) {
+      model.value.push(item.value);
+      return;
+    }
+    model.value = [item.value];
+  };
+</script>
+
+<style lang="scss" scoped>
+  .print-checkbox-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .print-checkbox {
+    display: flex;
+    align-items: center;
+    color: #000;
+    font-size: 15px;
+    margin-right: 24px;
+    cursor: pointer;
+
+    .print-checkbox-icon {
+      width: 15px;
+      height: 15px;
+      flex-shrink: 0;
+      border: 1px solid #000;
+      margin-right: 8px;
+    }
+
+    &.is-checked .print-checkbox-icon::before {
+      content: '';
+      width: 11px;
+      height: 5px;
+      display: inline-block;
+      border: 2px solid transparent;
+      border-left-color: #000;
+      border-bottom-color: #000;
+      transform: rotate(-45deg) translate(6px, -5px);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/printer/components/print-contract.vue b/z_ele/src/views/extension/printer/components/print-contract.vue
new file mode 100644
index 0000000..b6a2159
--- /dev/null
+++ b/z_ele/src/views/extension/printer/components/print-contract.vue
@@ -0,0 +1,348 @@
+<!-- 房屋租赁合同 -->
+<template>
+  <ele-printer
+    v-model="printing"
+    margin="0mm 12mm 10mm 12mm"
+    :header-style="{
+      padding: '26px 0 2px 0',
+      fontSize: '13px',
+      borderBottom: '1px solid #666',
+      marginBottom: '26px'
+    }"
+    :body-style="{ padding: '0 14px', fontSize: '17px', lineHeight: 2.5 }"
+    :target="target"
+    :static="isStatic"
+    @done="handlePrintDone"
+  >
+    <template #header>
+      <div style="color: #444">
+        <img
+          src="/favicon.ico"
+          style="height: 15px; width: 15px; vertical-align: -2px"
+        />
+        <span> XXX公寓房屋租赁合同</span>
+      </div>
+      <div style="color: #888">电话：027-987654321</div>
+    </template>
+    <div v-if="!!data" style="page-break-after: always">
+      <div style="font-size: 35px; text-align: center">房屋租赁合同</div>
+      <div style="margin-top: 12px">
+        <span>甲方：</span>
+        <span class="demo-input" style="min-width: 280px">
+          {{ data.partyA }}
+        </span>
+      </div>
+      <div>
+        <span>乙方：</span>
+        <span class="demo-input" style="min-width: 280px">
+          {{ data.partyB }}
+        </span>
+      </div>
+      <div>
+        <span>房屋地址：</span>
+        <span class="demo-input" style="min-width: 280px">
+          {{ data.address }}
+        </span>
+      </div>
+      <div>甲、乙双方就房屋租赁事宜，达成如下协议：</div>
+      <div style="margin: 8px 0 4px 0">一、租赁期限</div>
+      <div>
+        1、租赁期限自______年______月______日起至______年______月______日止。
+      </div>
+      <div>
+        2、租赁期满后，如果乙方需要继续租赁，则甲方有权优先考虑与乙方续签租赁合同。
+      </div>
+      <div style="margin: 8px 0 4px 0">二、房屋使用费用</div>
+      <div>1、乙方承担租赁期间的水费、电费、燃气费、物业管理费等使用费用。</div>
+      <div>
+        2、乙方在入住前应一次性向甲方支付押金______元，用于租赁期内的房屋维修和卫生保洁。
+      </div>
+      <div>
+        3、乙方在租赁期间应妥善保管房屋及其设备设施，不得人为损坏。
+        如因乙方过错导致房屋设备设施损坏，乙方应承担维修或更换费用。
+      </div>
+      <div style="margin: 8px 0 4px 0">三、房屋使用要求</div>
+      <div>1、乙方应遵守国家相关法律法规，不得将房屋用于违法活动。</div>
+      <div>2、乙方应爱护房屋及其设备设施，不得随意改造和拆除。</div>
+      <div>
+        3、乙方不得将房屋转租他人，不得将房屋用于存放危险品和易燃易爆品。
+      </div>
+      <div style="margin: 8px 0 4px 0">四、支付方式</div>
+      <div>1、乙方应按月支付租金，租金为______元/月。</div>
+      <div>
+        2、乙方应在每月______日前将租金支付给甲方，付款方式为（现金、银行转账等）。
+      </div>
+      <div style="margin: 8px 0 4px 0">五、合同解除和终止</div>
+      <div>1、在租赁期内，如果乙方符合下列条件之一，则甲方有权解除合同：</div>
+      <div>（1）乙方将房屋转租他人；</div>
+      <div>（2）乙方将房屋用于违法活动；</div>
+      <div>（3）乙方未按时支付租金达30天以上。</div>
+      <div>2、在租赁期内，如果甲方符合下列条件之一，则乙方有权解除合同：</div>
+      <div>（1）甲方将房屋擅自出租他人；</div>
+      <div>（2）甲方将房屋用于违法活动；</div>
+      <div>（3）甲方未按时提供房屋及其设备设施的正常使用。</div>
+      <div>
+        3、合同期满后，如果乙方不再续租，则甲方有权在3日内收回房屋。如果乙方需要继续租赁，
+        则应在本合同期满前3个月内向甲方提出书面申请，并双方重新签订租赁合同。
+      </div>
+      <div style="margin: 8px 0 4px 0">六、其他事项</div>
+      <div>1、本合同自双方签字盖章之日起生效。</div>
+      <div>2、本合同一式两份，甲、乙双方各执一份，具有同等法律效力。</div>
+      <div style="margin-top: 28px">
+        <span>甲方：</span>
+        <span class="demo-input" style="min-width: 220px">
+          {{ data.partyA }}
+        </span>
+        <span>&emsp;&emsp;乙方：</span>
+        <span class="demo-input" style="min-width: 220px">
+          {{ data.partyB }}
+        </span>
+      </div>
+      <div>
+        <span>电话：</span>
+        <span class="demo-input" style="min-width: 220px"></span>
+        <span>&emsp;&emsp;电话：</span>
+        <span class="demo-input" style="min-width: 220px"></span>
+      </div>
+      <div>
+        <span>日期：</span>
+        <span class="demo-input" style="min-width: 220px">{{ data.date }}</span>
+        <span>&emsp;&emsp;日期：</span>
+        <span class="demo-input" style="min-width: 220px">{{ data.date }}</span>
+      </div>
+    </div>
+    <div class="demo-title">二维码打印示例：</div>
+    <div style="text-align: center; page-break-after: always; padding: 40px 0">
+      <ele-qr-code-svg v-if="data" :value="data.partyA" :size="180" />
+      <div v-if="data" style="font-size: 14px; line-height: 1.2">
+        {{ data.partyA }}
+      </div>
+    </div>
+    <div class="demo-title">表格打印示例：</div>
+    <ele-table
+      v-if="data && data.projects"
+      size="large"
+      :border="true"
+      style="page-break-after: always"
+    >
+      <colgroup>
+        <col width="60px" />
+        <col width="200px" />
+        <col width="120px" />
+        <col width="160px" />
+        <col width="160px" />
+        <col width="100px" />
+      </colgroup>
+      <thead>
+        <tr>
+          <th :rowspan="2"></th>
+          <th :rowspan="2">项目名称</th>
+          <th :rowspan="2">金额</th>
+          <th :colspan="2" style="text-align: center">项目周期</th>
+          <th :rowspan="2">状态</th>
+        </tr>
+        <tr>
+          <th>开始时间</th>
+          <th>结束时间</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in data.projects" :key="row.id">
+          <td style="text-align: center">{{ index + 1 }}</td>
+          <td>{{ row.projectName }}</td>
+          <td>{{ row.money }}(万元)</td>
+          <td>{{ row.startDate }}</td>
+          <td>{{ row.endDate }}</td>
+          <td>
+            <ele-text v-if="row.status === 0" type="success">进行中</ele-text>
+            <ele-text v-else-if="row.status === 1" type="danger">
+              已延期
+            </ele-text>
+            <ele-text v-else-if="row.status === 2" type="warning">
+              未开始
+            </ele-text>
+            <ele-text v-else-if="row.status === 3" type="info">
+              已结束
+            </ele-text>
+          </td>
+        </tr>
+      </tbody>
+    </ele-table>
+    <div class="demo-title">图片打印示例：</div>
+    <img
+      src="https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg"
+      style="width: 100%; display: block; page-break-after: always"
+    />
+    <div class="demo-title">表格颜色修改：</div>
+    <ele-table
+      v-if="data && data.projects"
+      size="large"
+      :border="true"
+      :style="{
+        pageBreakAfter: 'always',
+        '--ele-table-bg': '#fff',
+        '--ele-table-color': '#000',
+        '--ele-table-border-color': '#000',
+        '--ele-table-th-color': '#000',
+        '--ele-table-th-font-weight': 'bold',
+        '--ele-table-th-bg': 'transparent',
+        '--ele-table-tr-bg': 'transparent',
+        '--ele-table-tr-hover-bg': 'transparent',
+        '--ele-table-radius': 0,
+        '--ele-table-sm-radius': 0,
+        '--ele-table-lg-radius': 0,
+        borderCollapse: 'collapse'
+      }"
+    >
+      <colgroup>
+        <col width="60px" />
+        <col width="200px" />
+        <col width="120px" />
+        <col width="160px" />
+        <col width="160px" />
+        <col width="100px" />
+      </colgroup>
+      <thead>
+        <tr>
+          <th :rowspan="2"></th>
+          <th :rowspan="2">项目名称</th>
+          <th :rowspan="2">金额</th>
+          <th :colspan="2" style="text-align: center">项目周期</th>
+          <th :rowspan="2">状态</th>
+        </tr>
+        <tr>
+          <th>开始时间</th>
+          <th>结束时间</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in data.projects" :key="row.id">
+          <td style="text-align: center">{{ index + 1 }}</td>
+          <td>{{ row.projectName }}</td>
+          <td>{{ row.money }}(万元)</td>
+          <td>{{ row.startDate }}</td>
+          <td>{{ row.endDate }}</td>
+          <td>
+            <span v-if="row.status === 0">进行中</span>
+            <span v-else-if="row.status === 1">已延期</span>
+            <span v-else-if="row.status === 2">未开始</span>
+            <span v-else-if="row.status === 3">已结束</span>
+          </td>
+        </tr>
+      </tbody>
+    </ele-table>
+    <div class="demo-title">水印组件：</div>
+    <ele-watermark content="Ele Admin Plus" :gap="[60, 40]">
+      <ele-table v-if="data && data.projects">
+        <colgroup>
+          <col width="38px" />
+          <col width="200px" />
+          <col width="140px" />
+          <col width="138px" />
+          <col width="138px" />
+          <col width="118px" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th></th>
+            <th>项目名称</th>
+            <th>金额(万元)</th>
+            <th>开始时间</th>
+            <th>结束时间</th>
+            <th>状态</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in data.projects" :key="row.id">
+            <td style="text-align: center">{{ index + 1 }}</td>
+            <td>{{ row.projectName }}</td>
+            <td>{{ row.money }}(万元)</td>
+            <td>{{ row.startDate }}</td>
+            <td>{{ row.endDate }}</td>
+            <td>
+              <ele-text v-if="row.status === 0" type="success">
+                进行中
+              </ele-text>
+              <ele-text v-else-if="row.status === 1" type="danger">
+                已延期
+              </ele-text>
+              <ele-text v-else-if="row.status === 2" type="warning">
+                未开始
+              </ele-text>
+              <ele-text v-else-if="row.status === 3" type="info">
+                已结束
+              </ele-text>
+            </td>
+          </tr>
+        </tbody>
+      </ele-table>
+    </ele-watermark>
+  </ele-printer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import type { MessageHandler as ElMessageHandler } from 'element-plus/es/components/message';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { PrintTarget } from 'ele-admin-plus/es/ele-printer/types';
+  import type { Contract } from '@/api/example/model';
+  let loading: ElMessageHandler;
+
+  const props = defineProps<{
+    /** 合同数据 */
+    data?: Contract | null;
+    /** 始终显示 */
+    isStatic: boolean;
+    /** 打印位置 */
+    target: PrintTarget;
+  }>();
+
+  /** 是否打印 */
+  const printing = ref(false);
+
+  /** 打印 */
+  const print = () => {
+    console.log('开始打印...');
+    if (props.target !== '_iframe') {
+      printing.value = true;
+      return;
+    }
+    loading = EleMessage.loading({
+      message: '正在打印中..',
+      plain: true,
+      centered: true,
+      mask: true
+    });
+    nextTick(() => {
+      printing.value = true;
+    });
+  };
+
+  /** 打印结束事件 */
+  const handlePrintDone = () => {
+    console.log('打印结束.');
+    loading && loading.close();
+  };
+
+  defineExpose({ print });
+</script>
+
+<style lang="scss" scoped>
+  .demo-input {
+    height: 24px;
+    line-height: 24px;
+    max-width: 80%;
+    padding: 0 14px;
+    display: inline-block;
+    border-bottom: 1px solid #000;
+    vertical-align: middle;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .demo-title {
+    font-size: 22px;
+    margin-bottom: 24px;
+    line-height: 1.2;
+  }
+</style>
diff --git a/z_ele/src/views/extension/printer/components/print-pdf.vue b/z_ele/src/views/extension/printer/components/print-pdf.vue
new file mode 100644
index 0000000..a1a24d4
--- /dev/null
+++ b/z_ele/src/views/extension/printer/components/print-pdf.vue
@@ -0,0 +1,48 @@
+<template>
+  <ele-card header="更多功能" :body-style="{ padding: 0 }">
+    <div style="padding: 20px">
+      <el-button :disabled="printing" type="primary" @click="handlePrintPdf">
+        {{ printing ? '打印中...' : '打印pdf' }}
+      </el-button>
+      <el-button type="primary" @click="handleViewPdf">预览pdf</el-button>
+    </div>
+    <div v-if="pdfUrl">
+      <iframe
+        :src="pdfUrl"
+        style="width: 100%; height: 880px; border: none; display: block"
+      ></iframe>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { printPdf } from 'ele-admin-plus/es/ele-printer/util';
+  const fileUrl = 'https://cdn.eleadmin.com/20200610/20200708224450.pdf';
+
+  /** 是否打印中 */
+  const printing = ref(false);
+
+  /** 打印 */
+  const handlePrintPdf = () => {
+    printing.value = true;
+    printPdf({
+      url: fileUrl,
+      done: () => {
+        printing.value = false;
+      }
+    });
+  };
+
+  /** 预览地址 */
+  const pdfUrl = ref('');
+
+  /** 预览 */
+  const handleViewPdf = () => {
+    if (pdfUrl.value) {
+      return;
+    }
+    //pdfUrl.value = `/pdfjs/web/viewer.html?file=${fileUrl}`;
+    pdfUrl.value = `https://plus.eleadmin.com/pdfjs-legacy/web/viewer.html?file=${fileUrl}`;
+  };
+</script>
diff --git a/z_ele/src/views/extension/printer/index.vue b/z_ele/src/views/extension/printer/index.vue
new file mode 100644
index 0000000..afd27ca
--- /dev/null
+++ b/z_ele/src/views/extension/printer/index.vue
@@ -0,0 +1,363 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <el-form label-width="80px" style="max-width: 320px" @submit.prevent="">
+        <el-form-item label="纸张方向">
+          <el-select
+            clearable
+            class="ele-fluid"
+            placeholder="不设置"
+            v-model="option.direction"
+          >
+            <el-option value="landscape" label="横向" />
+            <el-option value="portrait" label="纵向" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="纸张旋转">
+          <el-select
+            clearable
+            class="ele-fluid"
+            placeholder="不旋转"
+            v-model="option.orientation"
+          >
+            <el-option value="rotate-left" label="向左旋转" />
+            <el-option value="rotate-right" label="向右旋转" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="页面间距">
+          <el-input clearable v-model="option.margin" placeholder="不设置" />
+        </el-form-item>
+        <el-form-item label="页面标题">
+          <el-input clearable v-model="option.title" placeholder="默认" />
+        </el-form-item>
+        <el-form-item label="打印位置">
+          <el-select class="ele-fluid" v-model="option.target">
+            <el-option value="_iframe" label="子窗口" />
+            <el-option value="_self" label="当前窗口" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="始终显示">
+          <el-radio-group v-model="option.static">
+            <el-radio :value="false" label="否" />
+            <el-radio :value="true" label="是" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button :disabled="printing" type="primary" @click="handlePrint">
+            {{ printing ? '打印中...' : '打印' }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <ele-printer
+        v-model="printing"
+        :direction="option.direction"
+        :orientation="option.orientation"
+        :margin="option.margin"
+        :title="option.title"
+        :target="option.target"
+        :static="option.static"
+        :body-style="{ overflow: 'hidden' }"
+      >
+        <div style="overflow: auto">
+          <ele-table has-footer style="min-width: 600px" size="large">
+            <colgroup>
+              <col width="38px" />
+              <col width="200px" />
+              <col width="140px" />
+              <col width="138px" />
+              <col width="138px" />
+              <col width="118px" />
+              <col width="180px" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th></th>
+                <th>项目名称</th>
+                <th>金额(万元)</th>
+                <th>开始时间</th>
+                <th>结束时间</th>
+                <th>状态</th>
+                <th>进度</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in projectList" :key="row.id">
+                <td style="text-align: center">{{ index + 1 }}</td>
+                <td>{{ row.projectName }}</td>
+                <td>
+                  <el-input-number
+                    :min="0"
+                    :max="999"
+                    v-model="row.money"
+                    placeholder="请输入"
+                    controls-position="right"
+                    class="ele-fluid"
+                  />
+                </td>
+                <td>{{ row.startDate }}</td>
+                <td>{{ row.endDate }}</td>
+                <td>
+                  <ele-text v-if="row.status === 0" type="success">
+                    进行中
+                  </ele-text>
+                  <ele-text v-else-if="row.status === 1" type="danger">
+                    已延期
+                  </ele-text>
+                  <ele-text v-else-if="row.status === 2" type="warning">
+                    未开始
+                  </ele-text>
+                  <ele-text v-else-if="row.status === 3" type="info">
+                    已结束
+                  </ele-text>
+                </td>
+                <td>
+                  <el-progress :percentage="row.progress" />
+                </td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td></td>
+                <td>合计</td>
+                <td>{{ sumMoney }} 万</td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+              </tr>
+            </tfoot>
+          </ele-table>
+        </div>
+        <div style="margin: 12px 0">更多表单组件演示：</div>
+        <div>
+          <el-radio-group v-model="status">
+            <el-radio value="未完成" label="未完成" />
+            <el-radio value="已完成" label="已完成" />
+          </el-radio-group>
+        </div>
+        <div>
+          <el-checkbox-group v-model="citys">
+            <el-checkbox value="武汉" label="武汉" />
+            <el-checkbox value="北京" label="北京" />
+            <el-checkbox value="上海" label="上海" />
+            <el-checkbox value="广州" label="广州" />
+            <el-checkbox value="深圳" label="深圳" />
+          </el-checkbox-group>
+        </div>
+        <div style="margin: 12px 0">自定义更加适合打印风格的复选框组件：</div>
+        <div>
+          <print-checkbox
+            v-model="citys"
+            :items="[
+              { label: '武汉', value: '武汉' },
+              { label: '北京', value: '北京' },
+              { label: '上海', value: '上海' },
+              { label: '广州', value: '广州' },
+              { label: '深圳', value: '深圳' }
+            ]"
+          />
+        </div>
+      </ele-printer>
+    </ele-card>
+    <ele-card header="使用案例">
+      <el-form label-width="80px" style="max-width: 320px">
+        <el-form-item label="甲方">
+          <el-input clearable v-model="form.partyA" />
+        </el-form-item>
+        <el-form-item label="乙方">
+          <el-input clearable v-model="form.partyB" />
+        </el-form-item>
+        <el-form-item label="房屋地址">
+          <el-input clearable v-model="form.address" />
+        </el-form-item>
+        <el-form-item label="打印位置">
+          <el-select class="ele-fluid" v-model="option2.target">
+            <el-option value="_iframe" label="子窗口" />
+            <el-option value="_self" label="当前窗口" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="始终显示">
+          <el-radio-group v-model="option2.static">
+            <el-radio :value="false" label="否" />
+            <el-radio :value="true" label="是" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlePrint2">打印</el-button>
+        </el-form-item>
+      </el-form>
+      <print-contract
+        ref="contractRef"
+        :data="contractData"
+        :is-static="option2.static"
+        :target="option2.target"
+      />
+    </ele-card>
+    <print-pdf />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, nextTick } from 'vue';
+  import type {
+    PrintDirection,
+    PrintOrientation,
+    PrintTarget
+  } from 'ele-admin-plus/es/ele-printer/types';
+  import type { Project, Contract } from '@/api/example/model';
+  import PrintCheckbox from './components/print-checkbox.vue';
+  import PrintContract from './components/print-contract.vue';
+  import PrintPdf from './components/print-pdf.vue';
+  import dayjs from 'dayjs';
+
+  defineOptions({ name: 'ExtensionPrinter' });
+
+  interface Option {
+    direction?: PrintDirection;
+    orientation?: PrintOrientation;
+    margin: string;
+    title: string;
+    target: PrintTarget;
+    static: boolean;
+  }
+
+  /** 是否打印 */
+  const printing = ref(false);
+
+  /** 打印参数 */
+  const option = reactive<Option>({
+    direction: void 0,
+    orientation: void 0,
+    margin: '',
+    title: '',
+    target: '_iframe',
+    static: false
+  });
+
+  /** 打印 */
+  const handlePrint = () => {
+    printing.value = true;
+  };
+
+  /** 是否完成 */
+  const status = ref('未完成');
+
+  /** 城市 */
+  const citys = ref(['武汉', '北京']);
+
+  /** 项目进度数据 */
+  const projectList = ref<Project[]>([]);
+
+  /** 金额合计 */
+  const sumMoney = computed(() => {
+    return projectList.value.reduce((sum, d) => {
+      const money = d.money ? Number(d.money) : 0;
+      return sum + (isNaN(money) ? 0 : money);
+    }, 0);
+  });
+
+  /** 查询项目进度 */
+  const queryProjectList = () => {
+    projectList.value = [
+      {
+        id: '1',
+        projectName: '项目000000001',
+        status: 0,
+        startDate: '2020-03-01',
+        endDate: '2020-06-01',
+        progress: 30,
+        money: 3
+      },
+      {
+        id: '2',
+        projectName: '项目000000002',
+        status: 0,
+        startDate: '2020-03-01',
+        endDate: '2020-08-01',
+        progress: 10,
+        money: 5
+      },
+      {
+        id: '3',
+        projectName: '项目000000003',
+        status: 1,
+        startDate: '2020-01-01',
+        endDate: '2020-05-01',
+        progress: 60,
+        money: 2
+      },
+      {
+        id: '4',
+        projectName: '项目000000004',
+        status: 1,
+        startDate: '2020-06-01',
+        endDate: '2020-10-01',
+        progress: 0,
+        money: 4
+      },
+      {
+        id: '5',
+        projectName: '项目000000005',
+        status: 2,
+        startDate: '2020-03-01',
+        endDate: '2020-07-01',
+        progress: 100,
+        money: 1
+      },
+      {
+        id: '6',
+        projectName: '项目000000006',
+        status: 3,
+        startDate: '2020-02-01',
+        endDate: '2020-06-01',
+        progress: 100,
+        money: 6
+      }
+    ];
+  };
+
+  queryProjectList();
+
+  /** 表单数据 */
+  const form = reactive({
+    partyA: 'XX房屋租赁有限公司',
+    partyB: '张三',
+    address: 'XX省XX市XX区XX街道XX小区18栋一单元1104室'
+  });
+
+  /** 打印参数 */
+  const option2 = reactive<Pick<Option, 'target' | 'static'>>({
+    target: '_iframe',
+    static: false
+  });
+
+  /** 获取合同数据 */
+  const getContractData = () => {
+    return {
+      ...form,
+      date: dayjs().format('YYYY-MM-DD'),
+      projects: [
+        ...projectList.value,
+        ...projectList.value,
+        ...projectList.value,
+        ...projectList.value
+      ].map((d, i) => {
+        return { ...d, id: d.id + '_' + i, projectName: d.projectName + i };
+      })
+    };
+  };
+
+  /** 合同组件 */
+  const contractRef = ref<InstanceType<typeof PrintContract> | null>(null);
+
+  /** 合同数据 */
+  const contractData = ref<Contract | null>(getContractData());
+
+  /** 打印合同 */
+  const handlePrint2 = () => {
+    contractData.value = getContractData();
+    nextTick(() => {
+      contractRef.value && contractRef.value.print();
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/qr-code/index.vue b/z_ele/src/views/extension/qr-code/index.vue
new file mode 100644
index 0000000..fd9f0b0
--- /dev/null
+++ b/z_ele/src/views/extension/qr-code/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <ele-page :multi-card="true">
+    <ele-card header="基础用法">
+      <el-form label-width="88px" style="max-width: 420px" @submit.prevent="">
+        <div style="text-align: center; margin-bottom: 8px">
+          <ele-qr-code
+            :value="text"
+            :size="size"
+            :level="level"
+            :margin="margin"
+            :image-settings="image"
+            :tag="tag"
+          />
+        </div>
+        <el-form-item label="渲染方式">
+          <el-radio-group v-model="tag">
+            <el-radio value="img" label="img" />
+            <el-radio value="canvas" label="canvas" />
+            <el-radio value="svg" label="svg" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="二维码内容">
+          <el-input v-model="text" :maxlength="150" />
+        </el-form-item>
+        <el-form-item label="容错等级">
+          <el-select
+            v-model="level"
+            class="ele-fluid"
+            :popper-options="{ strategy: 'fixed' }"
+          >
+            <el-option value="L" label="L" />
+            <el-option value="M" label="M" />
+            <el-option value="Q" label="Q" />
+            <el-option value="H" label="H" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="尺寸">
+          <el-slider v-model="size" :min="80" :max="280" :step="40" />
+        </el-form-item>
+        <el-form-item label="间距">
+          <el-slider v-model="margin" :min="0" :max="20" />
+        </el-form-item>
+        <el-form-item label="自定义图片">
+          <el-switch
+            v-model="showImage"
+            size="small"
+            @change="handleShowImageChange"
+          />
+        </el-form-item>
+        <template v-if="showImage">
+          <el-form-item label="图片地址">
+            <el-input v-model="image.src" :maxlength="400" />
+          </el-form-item>
+          <el-form-item label="图片宽高">
+            <div style="display: flex; flex-wrap: wrap">
+              <div style="width: 120px; margin-right: 16px">
+                <el-input-number
+                  v-model="image.width"
+                  size="small"
+                  :min="0"
+                  :max="size"
+                />
+              </div>
+              <div style="width: 120px">
+                <el-input-number
+                  v-model="image.height"
+                  size="small"
+                  :min="0"
+                  :max="size"
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="位置居中">
+            <div>
+              <el-switch
+                v-model="center"
+                size="small"
+                @change="handleCenterChange"
+              />
+              <div v-if="!center" style="display: flex; flex-wrap: wrap">
+                <div style="display: flex; align-items: center">
+                  <div style="padding: 0 12px">x</div>
+                  <div style="width: 120px">
+                    <el-input-number
+                      v-model="image.x"
+                      size="small"
+                      :min="0"
+                      :max="size"
+                    />
+                  </div>
+                </div>
+                <div style="display: flex; align-items: center">
+                  <div style="padding: 0 12px">y</div>
+                  <div style="width: 120px">
+                    <el-input-number
+                      v-model="image.y"
+                      size="small"
+                      :min="0"
+                      :max="size"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="背景擦除">
+            <el-switch v-model="image.excavate" size="small" />
+          </el-form-item>
+        </template>
+      </el-form>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type {
+    Level,
+    ImageSettings,
+    QrCodeTag
+  } from 'ele-admin-plus/es/ele-qr-code/types';
+
+  defineOptions({ name: 'ExtensionQrCode' });
+
+  const IMAGE_SRC = 'https://cdn.eleadmin.com/20200610/logo-radius.png';
+
+  /** 二维码内容 */
+  const text = ref('https://eleadmin.com');
+
+  /** 渲染方式 */
+  const tag = ref<QrCodeTag>('img');
+
+  /** 容错级别 */
+  const level = ref<Level>('L');
+
+  /** 尺寸 */
+  const size = ref(120);
+
+  /** 内间距 */
+  const margin = ref(0);
+
+  /** 是否增加自定义图标 */
+  const showImage = ref(true);
+
+  /** 自定义图标 */
+  const image = reactive<ImageSettings>({
+    src: IMAGE_SRC,
+    width: 28,
+    height: 28,
+    x: void 0,
+    y: void 0,
+    excavate: false
+  });
+
+  /** 自定义图标是否居中 */
+  const center = ref(true);
+
+  const handleShowImageChange = (checked: boolean) => {
+    if (checked) {
+      image.src = IMAGE_SRC;
+    } else {
+      image.src = void 0;
+    }
+  };
+
+  /** 自定义图标居中改变事件 */
+  const handleCenterChange = (checked: boolean) => {
+    if (checked) {
+      image.x = void 0;
+      image.y = void 0;
+    } else {
+      image.x = 0;
+      image.y = 0;
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/regions/index.vue b/z_ele/src/views/extension/regions/index.vue
new file mode 100644
index 0000000..81d7f7b
--- /dev/null
+++ b/z_ele/src/views/extension/regions/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <ele-page style="position: relative; z-index: 1">
+    <ele-card header="省市区级联选择">
+      <div style="max-width: 280px">
+        <regions-select
+          v-model="city"
+          placeholder="请选择省市区"
+          :teleported="false"
+          :filterable="!mobileDevice"
+        />
+      </div>
+      <div style="margin-top: 12px">
+        <el-button type="primary" @click="setCity">回显数据</el-button>
+      </div>
+    </ele-card>
+    <ele-card header="省市级联选择">
+      <div style="max-width: 280px">
+        <regions-select
+          v-model="provinceCity"
+          placeholder="请选择省市"
+          type="provinceCity"
+          :teleported="false"
+          :filterable="!mobileDevice"
+        />
+      </div>
+      <div style="margin-top: 12px">
+        <el-button type="primary" @click="setProvinceCity">回显数据</el-button>
+      </div>
+    </ele-card>
+    <ele-card header="省选择">
+      <div style="max-width: 280px">
+        <regions-select
+          v-model="province"
+          :filterable="false"
+          placeholder="请选择省"
+          type="province"
+          :teleported="false"
+        />
+      </div>
+      <div style="margin-top: 12px">
+        <el-button type="primary" @click="setProvince">回显数据</el-button>
+      </div>
+    </ele-card>
+    <ele-card header="可多选">
+      <div style="max-width: 280px">
+        <regions-select
+          v-model="citys"
+          :filterable="false"
+          placeholder="请选择省市区"
+          :cascader-props="cascaderProps"
+          :teleported="false"
+        />
+      </div>
+      <div style="margin-top: 12px">
+        <el-button type="primary" @click="setCitys">回显数据</el-button>
+      </div>
+      <div style="margin-top: 28px">省市多选：</div>
+      <div style="max-width: 280px; margin-top: 12px">
+        <regions-select
+          v-model="provinceCitys"
+          :filterable="false"
+          placeholder="请选择省市"
+          type="provinceCity"
+          :cascader-props="cascaderProps"
+          :teleported="false"
+        />
+      </div>
+      <div style="margin-top: 28px">省多选：</div>
+      <div style="max-width: 280px; margin-top: 12px">
+        <regions-select
+          v-model="provinces"
+          :filterable="false"
+          placeholder="请选择省"
+          type="province"
+          :cascader-props="cascaderProps"
+          :teleported="false"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="翻译">
+      <div style="margin: 0 0 16px 0; opacity: 0.6">单选值翻译</div>
+      <regions-select
+        component="text"
+        :model-value="['420000', '420100', '420103']"
+      />
+      <div style="margin: 32px 0 16px 0; opacity: 0.6">多选值翻译</div>
+      <regions-select
+        component="text"
+        :model-value="[
+          ['420000', '420100', '420103'],
+          ['420000', '420100', '420106'],
+          ['420000', '420100', '420111']
+        ]"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { useMobileDevice } from '@/utils/use-mobile';
+  import RegionsSelect from '@/components/RegionsSelect/index.vue';
+
+  defineOptions({ name: 'ExtensionRegions' });
+
+  const { mobileDevice } = useMobileDevice();
+
+  /** 选中的省市区 */
+  const city = ref<string[]>([]);
+
+  /** 回显 */
+  const setCity = () => {
+    city.value = ['420000', '420100', '420103'];
+  };
+
+  /** 选中的省市 */
+  const provinceCity = ref<string[]>([]);
+
+  /** 回显 */
+  const setProvinceCity = () => {
+    provinceCity.value = ['420000', '420100'];
+  };
+
+  /** 选中的省 */
+  const province = ref<string[]>([]);
+
+  /** 回显 */
+  const setProvince = () => {
+    province.value = ['420000'];
+  };
+
+  /** 选中的省市区 */
+  const citys = ref<string[][]>([]);
+
+  /** 回显 */
+  const setCitys = () => {
+    citys.value = [
+      ['420000', '420100', '420103'],
+      ['420000', '420100', '420106'],
+      ['420000', '420100', '420111']
+    ];
+  };
+
+  /** 级联属性 */
+  const cascaderProps = reactive({ multiple: true });
+
+  /** 选中的省市 */
+  const provinceCitys = ref<string[][]>([]);
+
+  /** 选中的省 */
+  const provinces = ref<string[][]>([]);
+</script>
diff --git a/z_ele/src/views/extension/segmented/index.vue b/z_ele/src/views/extension/segmented/index.vue
new file mode 100644
index 0000000..216e90f
--- /dev/null
+++ b/z_ele/src/views/extension/segmented/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <div style="overflow-x: auto">
+        <ele-segmented
+          v-model="active1"
+          :items="[
+            { label: 'Daily', value: 1 },
+            { label: 'Weekly', value: 2 },
+            { label: 'Monthly', value: 3 },
+            { label: 'Quarterly', value: 4 },
+            { label: 'Yearly', value: 5 }
+          ]"
+        />
+      </div>
+      <div style="margin: 22px 0 8px 0">宽度铺满:</div>
+      <div style="max-width: 600px">
+        <ele-segmented
+          block
+          v-model="active2"
+          :items="[
+            { label: 'Map', value: 'Map' },
+            { label: 'Transit', value: 'Transit' },
+            { label: 'Satellite', value: 'Satellite' }
+          ]"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="禁用">
+      <ele-segmented
+        disabled
+        v-model="active2"
+        :items="[
+          { label: 'Map', value: 'Map' },
+          { label: 'Transit', value: 'Transit' },
+          { label: 'Satellite', value: 'Satellite' }
+        ]"
+      />
+      <div style="overflow-x: auto">
+        <ele-segmented
+          v-model="active1"
+          :items="[
+            { label: 'Daily', value: 1 },
+            { label: 'Weekly', value: 2, disabled: true },
+            { label: 'Monthly', value: 3 },
+            { label: 'Quarterly', value: 4, disabled: true },
+            { label: 'Yearly', value: 5 }
+          ]"
+          style="margin-top: 16px"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="图标">
+      <ele-segmented
+        v-model="active3"
+        :items="[
+          {
+            label: 'User',
+            value: 1,
+            icon: UserOutlined,
+            iconStyle: { transform: 'translateY(-1px)' }
+          },
+          {
+            label: 'Setting',
+            value: 2,
+            icon: SettingOutlined,
+            iconStyle: { transform: 'translateY(-1px)' }
+          }
+        ]"
+      />
+      <ele-segmented
+        v-model="active3"
+        :items="[
+          { value: 1, icon: UserOutlined },
+          { value: 2, icon: SettingOutlined }
+        ]"
+        style="margin-top: 16px"
+      />
+    </ele-card>
+    <ele-card header="尺寸">
+      <div style="overflow-x: auto">
+        <ele-segmented
+          size="large"
+          v-model="active1"
+          :items="[
+            { label: 'Daily', value: 1 },
+            { label: 'Weekly', value: 2 },
+            { label: 'Monthly', value: 3 },
+            { label: 'Quarterly', value: 4 },
+            { label: 'Yearly', value: 5 }
+          ]"
+        />
+      </div>
+      <div style="overflow-x: auto">
+        <ele-segmented
+          v-model="active1"
+          :items="[
+            { label: 'Daily', value: 1 },
+            { label: 'Weekly', value: 2 },
+            { label: 'Monthly', value: 3 },
+            { label: 'Quarterly', value: 4 },
+            { label: 'Yearly', value: 5 }
+          ]"
+          style="margin-top: 16px"
+        />
+      </div>
+      <div style="overflow-x: auto">
+        <ele-segmented
+          size="small"
+          v-model="active1"
+          :items="[
+            { label: 'Daily', value: 1 },
+            { label: 'Weekly', value: 2 },
+            { label: 'Monthly', value: 3 },
+            { label: 'Quarterly', value: 4 },
+            { label: 'Yearly', value: 5 }
+          ]"
+          style="margin-top: 16px"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="自定义渲染">
+      <ele-segmented
+        size="large"
+        v-model="active2"
+        :items="items"
+        style="--ele-segmented-large-height: 68px"
+      >
+        <template #label="{ item }">
+          <div
+            :style="{
+              lineHeight: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }"
+          >
+            <el-avatar :src="item.avatar" :size="32" />
+            <div style="margin-top: 6px; font-size: 14px">
+              {{ item.label }}
+            </div>
+          </div>
+        </template>
+      </ele-segmented>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { UserOutlined, SettingOutlined } from '@/components/icons';
+
+  defineOptions({ name: 'ExtensionSegmented' });
+
+  const active1 = ref(1);
+
+  const active2 = ref('Map');
+
+  const active3 = ref(1);
+
+  const items = ref([
+    {
+      label: 'Map',
+      value: 'Map',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+    },
+    {
+      label: 'Transit',
+      value: 'Transit',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+    },
+    {
+      label: 'Satellite',
+      value: 'Satellite',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+    }
+  ]);
+</script>
diff --git a/z_ele/src/views/extension/split/components/demo-basic.vue b/z_ele/src/views/extension/split/components/demo-basic.vue
new file mode 100644
index 0000000..c6019bb
--- /dev/null
+++ b/z_ele/src/views/extension/split/components/demo-basic.vue
@@ -0,0 +1,241 @@
+<template>
+  <ele-card
+    header="基础用法"
+    :body-style="{ overflow: 'hidden', padding: '8px 13px 13px 13px' }"
+  >
+    <option-item label="显示折叠按钮" :responsive="false" style="margin: 0">
+      <el-radio-group v-model="allowCollapse">
+        <el-radio :value="true" label="是" />
+        <el-radio :value="false" label="否" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="支持自由拉伸" :responsive="false" style="margin: 0">
+      <el-radio-group v-model="resizable">
+        <el-radio :value="true" label="是" />
+        <el-radio :value="false" label="否" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="上下布局模式" :responsive="false" style="margin: 0">
+      <el-radio-group v-model="vertical">
+        <el-radio :value="true" label="是" />
+        <el-radio :value="false" label="否" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="反转布局方向" :responsive="false" style="margin: 0">
+      <el-radio-group v-model="reverse">
+        <el-radio :value="true" label="是" />
+        <el-radio :value="false" label="否" />
+      </el-radio-group>
+    </option-item>
+    <ele-split-panel
+      space="0px"
+      size="160px"
+      :allow-collapse="allowCollapse"
+      :resizable="resizable"
+      :vertical="vertical"
+      :reverse="reverse"
+      :custom-style="{
+        background: 'rgba(185, 182, 229, .4)',
+        overflow: 'hidden',
+        border: 'none'
+      }"
+      :body-style="{
+        background: 'rgba(125, 226, 252, .4)',
+        overflow: 'hidden'
+      }"
+      style="height: 360px; margin-top: 12px"
+    >
+      <div>边栏</div>
+      <template #body>
+        <div>内容</div>
+      </template>
+    </ele-split-panel>
+  </ele-card>
+  <ele-card header="组合使用" :body-style="{ padding: '13px' }">
+    <div style="margin: 0 0 8px 0">先左右再上下</div>
+    <ele-split-panel
+      space="0px"
+      :min-size="40"
+      :max-size="-40"
+      :resizable="true"
+      :custom-style="{
+        background: 'rgba(185, 182, 229, .4)',
+        overflow: 'hidden',
+        border: 'none'
+      }"
+      :body-style="{ overflow: 'hidden' }"
+      :responsive="false"
+      style="height: 400px"
+    >
+      <div>边栏</div>
+      <template #body>
+        <ele-split-panel
+          space="0px"
+          :min-size="40"
+          :max-size="-40"
+          :vertical="true"
+          :resizable="true"
+          :custom-style="{
+            background: 'rgba(171, 199, 255, .5)',
+            overflow: 'hidden',
+            border: 'none'
+          }"
+          :body-style="{
+            background: 'rgba(125, 226, 252, .4)',
+            overflow: 'hidden'
+          }"
+          :responsive="false"
+          style="height: 400px"
+        >
+          <div>内容一</div>
+          <template #body>
+            <div>内容二</div>
+          </template>
+        </ele-split-panel>
+      </template>
+    </ele-split-panel>
+    <div style="margin: 16px 0 8px 0">先上下再左右</div>
+    <ele-split-panel
+      space="0px"
+      size="120px"
+      :min-size="40"
+      :max-size="-40"
+      :vertical="true"
+      :resizable="true"
+      :custom-style="{
+        background: 'rgba(185, 182, 229, .4)',
+        overflow: 'hidden',
+        border: 'none'
+      }"
+      :body-style="{ overflow: 'hidden' }"
+      :responsive="false"
+      style="height: 400px"
+    >
+      <div>顶栏</div>
+      <template #body>
+        <ele-split-panel
+          space="0px"
+          :min-size="40"
+          :max-size="-40"
+          :resizable="true"
+          :custom-style="{
+            background: 'rgba(171, 199, 255, .5)',
+            overflow: 'hidden',
+            border: 'none'
+          }"
+          :body-style="{
+            background: 'rgba(125, 226, 252, .4)',
+            overflow: 'hidden'
+          }"
+          :responsive="false"
+          style="height: 100%"
+        >
+          <div>边栏</div>
+          <template #body>
+            <div>内容</div>
+          </template>
+        </ele-split-panel>
+      </template>
+    </ele-split-panel>
+  </ele-card>
+  <ele-card
+    header="可随意自由组合"
+    :body-style="{ overflow: 'hidden', padding: '13px' }"
+  >
+    <ele-split-panel
+      space="0px"
+      size="80px"
+      :min-size="40"
+      :max-size="0.5"
+      :vertical="true"
+      :resizable="true"
+      :allow-collapse="true"
+      :custom-style="{
+        background: 'rgba(185, 182, 229, .4)',
+        overflow: 'hidden',
+        border: 'none'
+      }"
+      :body-style="{ overflow: 'visible' }"
+      :responsive="false"
+      style="height: 400px"
+    >
+      <div>顶栏</div>
+      <template #body>
+        <ele-split-panel
+          space="0px"
+          size="120px"
+          :min-size="40"
+          :max-size="280"
+          :resizable="true"
+          :allow-collapse="true"
+          :custom-style="{
+            background: 'rgba(171, 199, 255, .5)',
+            overflow: 'hidden',
+            border: 'none'
+          }"
+          :body-style="{ overflow: 'visible' }"
+          :responsive="false"
+          style="height: 100%"
+        >
+          <div>左边栏</div>
+          <template #body>
+            <ele-split-panel
+              space="0px"
+              size="120px"
+              :min-size="40"
+              :max-size="280"
+              :resizable="true"
+              :allow-collapse="true"
+              :reverse="true"
+              :custom-style="{
+                background: 'rgba(171, 199, 255, .5)',
+                overflow: 'hidden',
+                border: 'none'
+              }"
+              :body-style="{
+                background: 'rgba(125, 226, 252, .4)',
+                overflow: 'hidden'
+              }"
+              :responsive="false"
+              style="height: 100%"
+            >
+              <div>右边栏</div>
+              <template #body>
+                <div>内容</div>
+              </template>
+            </ele-split-panel>
+          </template>
+        </ele-split-panel>
+      </template>
+    </ele-split-panel>
+  </ele-card>
+  <ele-card header="实际案例">
+    <el-button type="primary" @click="openTable">结合表格案例</el-button>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  const emit = defineEmits<{
+    (e: 'change', type?: string): void;
+  }>();
+
+  /** 是否显示折叠按钮 */
+  const allowCollapse = ref(true);
+
+  /** 是否支持自由拉伸 */
+  const resizable = ref(false);
+
+  /** 是否上下布局模式 */
+  const vertical = ref(false);
+
+  /** 是否反转布局方向 */
+  const reverse = ref(false);
+
+  /** 切换到结合表格案例 */
+  const openTable = () => {
+    emit('change', 'table');
+  };
+</script>
diff --git a/z_ele/src/views/extension/split/components/demo-table.vue b/z_ele/src/views/extension/split/components/demo-table.vue
new file mode 100644
index 0000000..0679d28
--- /dev/null
+++ b/z_ele/src/views/extension/split/components/demo-table.vue
@@ -0,0 +1,278 @@
+<template>
+  <ele-card
+    :flex-table="true"
+    :body-style="{ padding: 0 }"
+    style="border-radius: 0"
+  >
+    <ele-split-panel
+      :flex-table="true"
+      space="0px"
+      size="360px"
+      :min-size="180"
+      :max-size="-180"
+      :vertical="true"
+      :resizable="true"
+      :allow-collapse="true"
+      :custom-style="{ overflow: 'hidden', border: 'none' }"
+      :responsive="false"
+      class="demo-split-panel"
+    >
+      <ele-pro-table
+        ref="tableRef"
+        row-key="organizationId"
+        :columns="columns"
+        :datasource="datasource"
+        v-model:selections="selections"
+        v-model:current="current"
+        :highlight-current-row="true"
+        :border="true"
+        :toolbar="{ theme: 'default', style: { borderRadius: 0 } }"
+        :footer-style="{
+          borderWidth: '0 1px 0 1px',
+          borderStyle: 'solid',
+          borderColor: 'var(--el-border-color-light)',
+          marginTop: '-0.45px'
+        }"
+        :pagination="{ style: { padding: '0 0 8px 0' } }"
+        :show-overflow-tooltip="true"
+        :table-style="{
+          '--ele-table-radius': 0,
+          '--ele-table-sm-radius': 0,
+          '--ele-table-lg-radius': 0
+        }"
+        :export-config="{ fileName: '机构数据' }"
+        style="padding-bottom: 0"
+        @done="handleDone"
+      >
+        <template #toolbar>
+          <el-button size="small" type="primary" @click="back">返回</el-button>
+        </template>
+        <template #action>
+          <el-link type="primary" underline="never">修改</el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never">删除</el-link>
+        </template>
+      </ele-pro-table>
+      <template #body>
+        <ele-pro-table
+          ref="table2Ref"
+          row-key="userId"
+          :columns="columns2"
+          :datasource="datasource2"
+          v-model:selections="selections2"
+          :border="true"
+          :toolbar="{ theme: 'default', style: { borderRadius: 0 } }"
+          :footer-style="{
+            borderWidth: '0 1px 1px 1px',
+            borderStyle: 'solid',
+            borderColor: 'var(--el-border-color-light)',
+            marginTop: '-0.45px'
+          }"
+          :pagination="{ style: { padding: '0 0 8px 0' } }"
+          :show-overflow-tooltip="true"
+          :load-on-created="false"
+          :table-style="{
+            '--ele-table-radius': 0,
+            '--ele-table-sm-radius': 0,
+            '--ele-table-lg-radius': 0
+          }"
+          :export-config="{ fileName: '用户数据' }"
+          style="padding-bottom: 0"
+        >
+          <template #toolbar>
+            <span class="hidden-sm-and-down">上下两个表格会自适应高度</span>
+          </template>
+          <template #action>
+            <el-link type="primary" underline="never">修改</el-link>
+            <el-divider direction="vertical" />
+            <el-link type="danger" underline="never">删除</el-link>
+          </template>
+        </ele-pro-table>
+      </template>
+    </ele-split-panel>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, watch } from 'vue';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns,
+    DoneFunction
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import type { Organization } from '@/api/system/organization/model';
+  import type { User } from '@/api/system/user/model';
+  import { pageOrganizations } from '@/api/system/organization';
+  import { pageUsers } from '@/api/system/user';
+
+  const emit = defineEmits<{
+    (e: 'change', type?: string): void;
+  }>();
+
+  /** 返回 */
+  const back = () => {
+    emit('change');
+  };
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'organizationName',
+      label: '机构名称',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 140
+    },
+    {
+      prop: 'organizationTypeName',
+      label: '机构类型',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 140
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序号',
+      sortable: 'custom',
+      align: 'center',
+      width: 100
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 200
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 128,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      resizable: false,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<Organization[]>([]);
+
+  /** 表格单选选中数据 */
+  const current = ref<Organization | null>(null);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageOrganizations({ ...where, ...orders, ...pages });
+  };
+
+  /** 表格数据请求完成事件 */
+  const handleDone: DoneFunction<Organization> = ({ data }) => {
+    if (data?.length) {
+      nextTick(() => {
+        tableRef.value?.setCurrentRow?.(data[0]);
+      });
+    }
+  };
+
+  /** 刷新表格2数据 */
+  watch(current, (row: Organization) => {
+    table2Ref.value?.reload?.({
+      where: { organizationId: row.organizationId }
+    });
+  });
+
+  /** 表格2实例 */
+  const table2Ref = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格2列配置 */
+  const columns2 = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 140
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 140
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      align: 'center',
+      width: 100
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      align: 'center',
+      minWidth: 200
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 128,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      resizable: false,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格2选中数据 */
+  const selections2 = ref<User[]>([]);
+
+  /** 表格2数据源 */
+  const datasource2: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageUsers({ ...where, ...orders, ...pages });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-split-panel.is-collapse :deep(.ele-split-collapse-button) {
+    margin-top: 0;
+  }
+</style>
diff --git a/z_ele/src/views/extension/split/index.vue b/z_ele/src/views/extension/split/index.vue
new file mode 100644
index 0000000..f14e1cf
--- /dev/null
+++ b/z_ele/src/views/extension/split/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <ele-page
+    hide-footer
+    :flex-table="type === 'table'"
+    :multi-card="type !== 'table'"
+    :style="type !== 'table' ? void 0 : { minHeight: '420px' }"
+  >
+    <demo-basic v-if="type !== 'table'" @change="handleChange" />
+    <demo-table v-else @change="handleChange" />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoTable from './components/demo-table.vue';
+
+  defineOptions({ name: 'ExtensionSplit' });
+
+  const { currentRoute, push } = useRouter();
+
+  const type = ref<string>();
+
+  const handleChange = (value?: string) => {
+    type.value = value;
+    if (value) {
+      push(`/extension/split?type=${value}`);
+      return;
+    }
+    push('/extension/split');
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path, query } = unref(route);
+      if (path === '/extension/split') {
+        if (query.type) {
+          if (typeof query.type === 'string') {
+            type.value = query.type;
+            return;
+          } else if (query.type.length && query.type[0]) {
+            type.value = query.type[0];
+            return;
+          }
+        }
+        type.value = '';
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/views/extension/steps/index.vue b/z_ele/src/views/extension/steps/index.vue
new file mode 100644
index 0000000..42a7bb4
--- /dev/null
+++ b/z_ele/src/views/extension/steps/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <ele-steps
+        :active="active"
+        finish-status="success"
+        :items="[
+          { title: '第一步', description: '填写转账信息' },
+          { title: '第二步', description: '确认转账信息' },
+          { title: '第三步', description: '转账成功' }
+        ]"
+        :align-center="!!alignCenter"
+      />
+      <div style="margin-top: 28px; display: flex; align-items: center">
+        <el-button @click="handlePrev">上一步</el-button>
+        <el-button type="primary" @click="handleNext">下一步</el-button>
+        <div style="margin-left: 12px">
+          <el-checkbox
+            v-model="alignCenter"
+            :true-value="1"
+            :false-value="0"
+            label="居中"
+          />
+        </div>
+      </div>
+    </ele-card>
+    <ele-card header="紧凑版">
+      <ele-steps
+        :active="active"
+        finish-status="success"
+        type="inline"
+        :items="[
+          { title: '第一步', description: '填写转账信息' },
+          { title: '第二步', description: '确认转账信息' },
+          { title: '第三步', description: '转账成功' }
+        ]"
+      />
+    </ele-card>
+    <ele-card header="竖直方向">
+      <div style="height: 320px">
+        <ele-steps
+          :active="active"
+          finish-status="success"
+          direction="vertical"
+          :items="[
+            { title: '第一步', description: '填写转账信息' },
+            { title: '第二步', description: '确认转账信息' },
+            { title: '第三步', description: '转账成功' }
+          ]"
+        />
+      </div>
+    </ele-card>
+    <ele-card header="自定义图标">
+      <div style="margin-bottom: 40px">
+        <el-button @click="handlePrev">上一步</el-button>
+        <el-button type="primary" @click="handleNext">下一步</el-button>
+      </div>
+      <ele-steps
+        :active="active"
+        type="inline"
+        :items="[
+          { title: '账号注册', icon: markRaw(UserFilled) },
+          { title: '邮箱验证', icon: markRaw(Checked) },
+          { title: '注册完成', icon: markRaw(SuccessFilled) }
+        ]"
+        :style="{
+          '--ele-step-icon-size': '24px',
+          '--ele-step-line-height': '24px'
+        }"
+      />
+      <ele-steps
+        :active="active"
+        :align-center="true"
+        :items="[
+          { title: '账号注册', icon: markRaw(UserFilled) },
+          { title: '邮箱验证', icon: markRaw(Checked) },
+          { title: '注册完成', icon: markRaw(SuccessFilled) }
+        ]"
+        :style="{
+          '--ele-step-icon-size': '24px',
+          '--ele-step-line-height': '24px',
+          margin: '68px 0 18px 0'
+        }"
+      />
+    </ele-card>
+    <ele-card>
+      <template #header>
+        <span>时间线(自动S形换行)</span>
+        <el-badge
+          value="New"
+          style="display: inline-flex; font-weight: normal; margin-left: 4px"
+        />
+      </template>
+      <ele-timeline :data="timelineData" style="margin-top: 28px" />
+    </ele-card>
+    <ele-card>
+      <template #header>
+        <span>自定义内容</span>
+        <el-badge
+          value="New"
+          style="display: inline-flex; font-weight: normal; margin-left: 4px"
+        />
+      </template>
+      <ele-timeline :data="timelineData2" style="margin-top: 28px">
+        <template #itemDescription="{ item }">
+          <div v-if="item.time">{{ item.time }}</div>
+          <div>科室：{{ item.department }}</div>
+          <div>执行人：{{ item.executor }}</div>
+        </template>
+      </ele-timeline>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, markRaw } from 'vue';
+  import { UserFilled, Checked, SuccessFilled } from '@element-plus/icons-vue';
+  import type { TimelineItem } from 'ele-admin-plus/es/ele-timeline/types';
+
+  defineOptions({ name: 'ExtensionSteps' });
+
+  /** 选中步骤 */
+  const active = ref(0);
+
+  /** 居中 */
+  const alignCenter = ref(0);
+
+  /** 上一步 */
+  const handlePrev = () => {
+    if (active.value < 1) {
+      active.value = 3;
+      return;
+    }
+    active.value = active.value - 1;
+  };
+
+  /** 下一步 */
+  const handleNext = () => {
+    if (active.value > 2) {
+      active.value = 0;
+      return;
+    }
+    active.value = active.value + 1;
+  };
+
+  /** 数据 */
+  const timelineData = ref<TimelineItem[]>([
+    {
+      key: 1,
+      type: 'primary',
+      title: '1 签署输血同意书'
+    },
+    {
+      key: 2,
+      type: 'primary',
+      title: '2 申请单打印'
+    },
+    {
+      key: 3,
+      type: 'primary',
+      title: '3 医嘱复核'
+    },
+    {
+      key: 4,
+      type: 'primary',
+      title: '4 申请单送达'
+    },
+    {
+      key: 5,
+      type: 'primary',
+      title: '5 输血科核收'
+    },
+    {
+      key: 6,
+      type: 'primary',
+      title: '6 交叉配血'
+    },
+    {
+      key: 7,
+      title: '7 取血通知'
+    },
+    {
+      key: 8,
+      title: '8 输血医嘱开立'
+    },
+    {
+      key: 9,
+      title: '9 打印取血单'
+    },
+    {
+      key: 10,
+      title: '10 血袋出库'
+    },
+    {
+      key: 11,
+      title: '11 血袋接收'
+    },
+    {
+      key: 12,
+      title: '12 输血单核对'
+    },
+    {
+      key: 13,
+      title: '13 输血开始'
+    }
+  ]);
+
+  /** 数据 */
+  const timelineData2 = ref<TimelineItem[]>([
+    {
+      key: 1,
+      type: 'primary',
+      title: '1 签署输血同意书',
+      time: '2024-06-18 14:57:00',
+      department: '输血科',
+      executor: '徐蕊'
+    },
+    {
+      key: 2,
+      type: 'primary',
+      title: '2 申请单打印',
+      time: '2024-06-18 14:58:00',
+      department: '输血科',
+      executor: '郭春梅'
+    },
+    {
+      key: 3,
+      type: 'primary',
+      title: '3 医嘱复核',
+      time: '2024-06-18 14:59:00',
+      department: '肿瘤科',
+      executor: '陆慧玲'
+    },
+    {
+      key: 4,
+      type: 'primary',
+      title: '4 申请单送达',
+      time: '2024-06-18 15:00:00',
+      department: '肿瘤科',
+      executor: '陆慧玲'
+    },
+    {
+      key: 5,
+      type: 'primary',
+      title: '5 输血科核收',
+      time: '2024-06-18 15:01:00',
+      department: '南西9病区',
+      executor: '陆慧玲'
+    },
+    {
+      key: 6,
+      type: 'danger',
+      title: '6 交叉配血',
+      time: '2024-06-18 15:02:00',
+      department: '输血科',
+      executor: '田永立'
+    },
+    {
+      key: 7,
+      title: '7 取血通知',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 8,
+      title: '8 输血医嘱开立',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 9,
+      title: '9 打印取血单',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 10,
+      title: '10 血袋出库',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 11,
+      title: '11 血袋接收',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 12,
+      title: '12 输血单核对',
+      time: '',
+      department: '',
+      executor: ''
+    },
+    {
+      key: 13,
+      title: '13 输血开始',
+      time: '',
+      department: '',
+      executor: ''
+    }
+  ]);
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-advanced-search.vue b/z_ele/src/views/extension/table-select/components/demo-advanced-search.vue
new file mode 100644
index 0000000..59b37c7
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-advanced-search.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-form
+    label-width="60px"
+    size="small"
+    class="demo-search"
+    @submit.prevent=""
+  >
+    <el-row>
+      <el-col :lg="8" :md="8" :sm="24" :xs="24">
+        <el-form-item label="用户名">
+          <el-input
+            clearable
+            v-model.trim="form.nickname"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="8" :sm="24" :xs="24">
+        <el-form-item label="性别">
+          <dict-data
+            code="sex"
+            v-model="form.sex"
+            placeholder="请选择"
+            :teleported="false"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="8" :sm="24" :xs="24">
+        <el-form-item label-width="12px">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sexName: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-search :deep(.el-form-item) {
+    margin-bottom: 8px;
+  }
+</style>
diff --git a/z_ele/src/views/extension/table-select/components/demo-advanced.vue b/z_ele/src/views/extension/table-select/components/demo-advanced.vue
new file mode 100644
index 0000000..df80bf5
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-advanced.vue
@@ -0,0 +1,243 @@
+<template>
+  <ele-card header="可搜索">
+    <div style="max-width: 260px">
+      <ele-table-select
+        ref="selectRef"
+        multiple
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :cache-data="cacheData"
+        @select="handleSelect"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <template #topExtra>
+          <demo-advanced-search @search="handleSearch" />
+        </template>
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+      </ele-table-select>
+    </div>
+    <div style="margin-top: 14px">
+      <el-button type="primary" @click="setValue">回显数据</el-button>
+    </div>
+    <div style="margin: 22px 0 8px 0">使用默认的搜索框:</div>
+    <div style="max-width: 260px">
+      <ele-table-select
+        filterable
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue2"
+        :table-props="tableProps2"
+        :popper-width="580"
+        @filterChange="handleFilterChange"
+        @visibleChange="handleVisibleChange"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+      </ele-table-select>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import DemoAdvancedSearch from './demo-advanced-search.vue';
+  import { pageUsers, listUsers } from '@/api/system/user';
+  import type { EleTableSelect } from 'ele-admin-plus';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  import type { User, UserParam } from '@/api/system/user/model';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 选择框实例 */
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    datasource: ({ pages, where, orders }) => {
+      return pageUsers({ ...where, ...orders, ...pages });
+    },
+    columns: [
+      {
+        type: 'selection',
+        columnKey: 'selection',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */,
+        reserveSelection: true
+      },
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        columnKey: 'roles',
+        label: '角色',
+        slot: 'roles'
+      }
+    ],
+    showOverflowTooltip: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowClickChecked: true
+  });
+
+  /** 缓存数据 */
+  const cacheData = ref<User[]>();
+
+  /** 回显数据 */
+  const setValue = () => {
+    cacheData.value = [
+      {
+        userId: 40,
+        nickname: '管理员'
+      },
+      {
+        userId: 44,
+        nickname: '用户四'
+      },
+      {
+        userId: 45,
+        nickname: '用户五'
+      }
+    ];
+    selectedValue.value = [40, 44, 45];
+  };
+
+  /** 搜索 */
+  const handleSearch = (where: UserParam) => {
+    selectRef.value?.tableRef?.reload?.({ where, page: 1 });
+  };
+
+  /** 选中事件 */
+  const handleSelect = (selection: User[]) => {
+    console.log(JSON.parse(JSON.stringify(selection)));
+  };
+
+  /** 表格下拉选中值 */
+  const selectedValue2 = ref<number>();
+
+  /** 表格配置 */
+  const tableProps2 = reactive<SelectTableProps>({
+    datasource: [],
+    columns: [
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        columnKey: 'roles',
+        label: '角色',
+        slot: 'roles'
+      }
+    ],
+    showOverflowTooltip: true,
+    highlightCurrentRow: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowStyle: { cursor: 'pointer' }
+  });
+
+  let allData: User[] = [];
+
+  /** 查询表格数据 */
+  listUsers().then((data) => {
+    tableProps2.datasource = data;
+    allData = data;
+  });
+
+  /** 筛选输入框值改变事件 */
+  const handleFilterChange = (keyword: string) => {
+    tableProps2.datasource = allData.filter((d) => {
+      return (
+        d.username?.includes?.(keyword) ||
+        d.nickname?.includes?.(keyword) ||
+        d.sexName?.includes?.(keyword) ||
+        d.roles?.some?.((r) => r.roleName?.includes?.(keyword))
+      );
+    });
+  };
+
+  /** 下拉框展开状态改变事件 */
+  const handleVisibleChange = (visible: boolean) => {
+    if (visible) {
+      tableProps2.datasource = allData;
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-basic-page.vue b/z_ele/src/views/extension/table-select/components/demo-basic-page.vue
new file mode 100644
index 0000000..894ccad
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-basic-page.vue
@@ -0,0 +1,116 @@
+<template>
+  <ele-card header="表格后端分页">
+    <div style="max-width: 260px">
+      <ele-table-select
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :disabled="disabled"
+        :cache-data="cacheData"
+        @select="handleSelect"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+      </ele-table-select>
+    </div>
+    <div style="margin-top: 12px; display: flex; align-items: center">
+      <div style="padding-right: 12px">禁用:</div>
+      <el-radio-group v-model="disabled">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </div>
+    <div style="margin-top: 8px">
+      <el-button type="primary" @click="setValue">回显数据</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { pageUsers } from '@/api/system/user';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  import type { User } from '@/api/system/user/model';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number>();
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    datasource: ({ pages, where, orders }) => {
+      return pageUsers({ ...where, ...orders, ...pages });
+    },
+    columns: [
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        columnKey: 'roles',
+        label: '角色',
+        slot: 'roles'
+      }
+    ],
+    showOverflowTooltip: true,
+    highlightCurrentRow: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowStyle: { cursor: 'pointer' }
+  });
+
+  /** 禁用 */
+  const disabled = ref(false);
+
+  /** 缓存数据 */
+  const cacheData = ref<Partial<User>[]>();
+
+  /** 回显数据 */
+  const setValue = () => {
+    cacheData.value = [{ userId: 40, nickname: '管理员' }];
+    selectedValue.value = 40;
+  };
+
+  /** 选中事件 */
+  const handleSelect = (item: User) => {
+    console.log(JSON.parse(JSON.stringify(item)));
+  };
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-basic.vue b/z_ele/src/views/extension/table-select/components/demo-basic.vue
new file mode 100644
index 0000000..4df6e1c
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-basic.vue
@@ -0,0 +1,96 @@
+<template>
+  <ele-card header="基础用法">
+    <div style="max-width: 260px">
+      <ele-table-select
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+      </ele-table-select>
+    </div>
+    <div style="margin-top: 14px">
+      <el-button type="primary" @click="setValue">回显数据</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { listUsers } from '@/api/system/user';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number>();
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    datasource: [],
+    columns: [
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        columnKey: 'roles',
+        label: '角色',
+        slot: 'roles'
+      }
+    ],
+    showOverflowTooltip: true,
+    highlightCurrentRow: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowStyle: { cursor: 'pointer' }
+  });
+
+  /** 查询表格数据 */
+  listUsers().then((data) => {
+    tableProps.datasource = data;
+  });
+
+  /** 回显数据 */
+  const setValue = () => {
+    selectedValue.value = 40;
+  };
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-limit.vue b/z_ele/src/views/extension/table-select/components/demo-limit.vue
new file mode 100644
index 0000000..47c08f5
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-limit.vue
@@ -0,0 +1,91 @@
+<template>
+  <ele-card header="限制选择数量">
+    <div style="max-width: 260px">
+      <ele-table-select
+        multiple
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        :model-value="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :popper-options="{ strategy: 'fixed' }"
+        @update:modelValue="updateModelValue"
+      />
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { listUsers } from '@/api/system/user';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    datasource: [],
+    columns: [
+      {
+        type: 'selection',
+        columnKey: 'selection',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */,
+        reserveSelection: true
+      },
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      }
+    ],
+    showOverflowTooltip: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowClickChecked: true
+  });
+
+  /** 更新选中数据 */
+  const updateModelValue = (selected: number[]) => {
+    if (selected && selected.length > 5) {
+      EleMessage.error({ message: '最多只能选择 5 个', plain: true });
+      selectedValue.value = selected.slice(0, 5);
+      return;
+    }
+    selectedValue.value = selected;
+  };
+
+  /** 查询表格数据 */
+  listUsers().then((data) => {
+    tableProps.datasource = data;
+  });
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-multiple.vue b/z_ele/src/views/extension/table-select/components/demo-multiple.vue
new file mode 100644
index 0000000..c0d4427
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-multiple.vue
@@ -0,0 +1,116 @@
+<template>
+  <ele-card header="多选">
+    <div style="max-width: 260px">
+      <ele-table-select
+        multiple
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :disabled="disabled"
+        :max-tag-count="5"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+      </ele-table-select>
+    </div>
+    <div style="margin-top: 12px; display: flex; align-items: center">
+      <div style="padding-right: 12px">禁用:</div>
+      <el-radio-group v-model="disabled">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </div>
+    <div style="margin-top: 8px">
+      <el-button type="primary" @click="setValue">回显数据</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { listUsers } from '@/api/system/user';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    datasource: [],
+    columns: [
+      {
+        type: 'selection',
+        columnKey: 'selection',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */,
+        reserveSelection: true
+      },
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sexName',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        columnKey: 'roles',
+        label: '角色',
+        slot: 'roles'
+      }
+    ],
+    showOverflowTooltip: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 6,
+      layout: 'total, prev, pager, next, jumper',
+      style: { padding: '0px' }
+    },
+    rowClickChecked: true
+  });
+
+  /** 禁用 */
+  const disabled = ref(false);
+
+  /** 查询表格数据 */
+  listUsers().then((data) => {
+    tableProps.datasource = data;
+  });
+
+  /** 回显数据 */
+  const setValue = () => {
+    selectedValue.value = [40, 44, 45];
+  };
+</script>
diff --git a/z_ele/src/views/extension/table-select/components/demo-virtual.vue b/z_ele/src/views/extension/table-select/components/demo-virtual.vue
new file mode 100644
index 0000000..a2d07df
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/components/demo-virtual.vue
@@ -0,0 +1,111 @@
+<template>
+  <ele-card header="虚拟滚动表格">
+    <div style="max-width: 260px">
+      <ele-table-select
+        multiple
+        clearable
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model="selectedValue"
+        :table-props="tableProps"
+        :popper-width="580"
+        :max-tag-count="5"
+        :popper-options="{ strategy: 'fixed' }"
+      >
+        <template #status="{ row }">
+          <ele-dot v-if="row.status == 0" text="正常" size="8px" />
+          <ele-dot
+            v-else-if="row.status == 1"
+            text="冻结"
+            type="danger"
+            :ripple="false"
+            size="8px"
+          />
+        </template>
+      </ele-table-select>
+    </div>
+    <div style="margin-top: 12px">
+      <el-button type="primary" @click="setValue">回显数据</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { TableSelectProps } from 'ele-admin-plus/es/ele-table-select/props';
+  type SelectTableProps = Exclude<TableSelectProps['tableProps'], undefined>;
+
+  /** 表格下拉选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 表格配置 */
+  const tableProps = reactive<SelectTableProps>({
+    virtual: true,
+    height: 288,
+    datasource: [],
+    columns: [
+      {
+        type: 'selection',
+        columnKey: 'selection',
+        width: 50,
+        align: 'center',
+        fixed: 'left',
+        reserveSelection: true
+      },
+      {
+        prop: 'username',
+        label: '用户账号',
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: '用户名',
+        sortable: 'custom',
+        slot: 'nickname'
+      },
+      {
+        prop: 'sex',
+        label: '性别',
+        sortable: 'custom',
+        width: 80
+      },
+      {
+        prop: 'status',
+        label: '状态',
+        width: 120,
+        sortable: 'custom',
+        slot: 'status'
+      }
+    ],
+    showOverflowTooltip: true,
+    toolbar: false,
+    pagination: {
+      pageSize: 1000,
+      pageSizes: [1000, 2000],
+      layout: 'total, prev, pager, next, sizes',
+      teleported: false,
+      style: { padding: '0px' }
+    },
+    rowClickChecked: true
+  });
+
+  /** 回显数据 */
+  const setValue = () => {
+    selectedValue.value = [40, 44, 45];
+  };
+
+  /** 查询表格数据 */
+  tableProps.datasource = Array.from({ length: 2000 }).map((_, i) => {
+    const userId = i + 1;
+    const username = 'user-' + String(userId).padStart(6, '0');
+    const random = Math.random();
+    return {
+      userId,
+      username,
+      nickname: '用户' + userId,
+      sex: random < 0.8 ? '男' : '女',
+      status: random < 0.2 ? '1' : '0'
+    };
+  });
+</script>
diff --git a/z_ele/src/views/extension/table-select/index.vue b/z_ele/src/views/extension/table-select/index.vue
new file mode 100644
index 0000000..7043302
--- /dev/null
+++ b/z_ele/src/views/extension/table-select/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <ele-page>
+    <demo-basic />
+    <demo-basic-page />
+    <demo-multiple />
+    <demo-advanced />
+    <demo-virtual />
+    <demo-limit />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoBasicPage from './components/demo-basic-page.vue';
+  import DemoMultiple from './components/demo-multiple.vue';
+  import DemoAdvanced from './components/demo-advanced.vue';
+  import DemoVirtual from './components/demo-virtual.vue';
+  import DemoLimit from './components/demo-limit.vue';
+
+  defineOptions({ name: 'ExtensionTableSelect' });
+</script>
diff --git a/z_ele/src/views/extension/table/components/child-print-table.vue b/z_ele/src/views/extension/table/components/child-print-table.vue
new file mode 100644
index 0000000..6c73af7
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/child-print-table.vue
@@ -0,0 +1,39 @@
+<template>
+  <div style="padding: 8px 16px">
+    <ele-table :border="true" :print-skin="true">
+      <colgroup>
+        <col width="50px" />
+        <col />
+        <col />
+        <col width="110px" />
+        <col />
+      </colgroup>
+      <thead>
+        <tr>
+          <th></th>
+          <th>字典数据名称</th>
+          <th>字典数据代码</th>
+          <th style="text-align: center">排序号</th>
+          <th style="text-align: center">创建时间</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in data" :key="row.dictDataId">
+          <td style="text-align: center">{{ index + 1 }}</td>
+          <td>{{ row.dictDataName }}</td>
+          <td>{{ row.dictDataCode }}</td>
+          <td style="text-align: center">{{ row.sortNumber }}</td>
+          <td style="text-align: center">{{ row.createTime }}</td>
+        </tr>
+      </tbody>
+    </ele-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  defineProps<{
+    data?: DictionaryData[];
+  }>();
+</script>
diff --git a/z_ele/src/views/extension/table/components/child-table.vue b/z_ele/src/views/extension/table/components/child-table.vue
new file mode 100644
index 0000000..f11fceb
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/child-table.vue
@@ -0,0 +1,123 @@
+<template>
+  <div style="padding: 0 16px">
+    <ele-pro-table
+      row-key="dictDataId"
+      :columns="dictDataColumns"
+      :datasource="dictDataDatasource"
+      :show-overflow-tooltip="true"
+      :toolbar="false"
+      :pagination="false"
+      :empty-props="false"
+      :selections="selections || []"
+      @update:selections="updateSelections"
+      @done="handleTableDone"
+    >
+      <template #action="{ row: d }">
+        <el-link type="primary" underline="never" @click="editDictData(d)">
+          修改
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="removeDictData(d)">
+          删除
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns,
+    DoneFunction
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
+  import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  const props = defineProps<{
+    dictId: number;
+    selections?: DictionaryData[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:selections', value: DictionaryData[]): void;
+    (e: 'setDictionaryData', dictId: number, value: DictionaryData[]): void;
+  }>();
+
+  /** 字典数据列配置 */
+  const dictDataColumns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'dictDataName',
+      label: '字典数据名称',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'dictDataCode',
+      label: '字典数据代码',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序号',
+      sortable: 'custom',
+      width: 110,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 140,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center',
+      slot: 'action'
+    }
+  ]);
+
+  /** 字典数据数据源 */
+  const dictDataDatasource: DatasourceFunction = ({ where, orders }) => {
+    return listDictionaryData({ ...where, ...orders, dictId: props.dictId });
+  };
+
+  /** 删除字典数据 */
+  const removeDictData = (row: DictionaryData) => {
+    EleMessage.error({ message: '删除: ' + row.dictDataName, plain: true });
+  };
+
+  /** 修改字典数据 */
+  const editDictData = (row: DictionaryData) => {
+    EleMessage.info({ message: '修改: ' + row.dictDataName, plain: true });
+  };
+
+  /** 更新多选选中数据 */
+  const updateSelections = (value: DictionaryData[]) => {
+    emit('update:selections', value);
+  };
+
+  /** 表格数据请求完成事件 */
+  const handleTableDone: DoneFunction<DictionaryData> = (result) => {
+    emit('setDictionaryData', props.dictId, result.data);
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/default-sorter.vue b/z_ele/src/views/extension/table/components/default-sorter.vue
new file mode 100644
index 0000000..ee2498b
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/default-sorter.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :default-sort="{ prop: 'createTime', order: 'descending' }"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    >
+      <template #toolbar>
+        <el-button type="primary" class="ele-btn-icon" @click="setSorter">
+          改为账号排序
+        </el-button>
+        <el-button type="primary" class="ele-btn-icon" @click="resetAll">
+          重置排序筛选
+        </el-button>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageUsers, listUsers } from '@/api/system/user';
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      width: 110,
+      align: 'center',
+      filterMultiple: false,
+      filters: [
+        {
+          text: '男',
+          value: '男'
+        },
+        {
+          text: '女',
+          value: '女'
+        }
+      ],
+      filteredValue: ['男']
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 180,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, orders, filters }) => {
+    return pageUsers({ ...orders, ...filters, ...pages });
+  };
+
+  /** 设置排序 */
+  const setSorter = () => {
+    tableRef.value?.sort?.('username', 'ascending');
+  };
+
+  /** 重置排序和筛选 */
+  const resetAll = () => {
+    tableRef.value?.clearSort?.();
+    tableRef.value?.clearFilter?.();
+    tableRef.value?.reload?.({ sorter: {}, filter: {} });
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ orders, filters }) => {
+    return listUsers({ ...orders, ...filters });
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/demo-base.vue b/z_ele/src/views/extension/table/components/demo-base.vue
new file mode 100644
index 0000000..d17a5c7
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/demo-base.vue
@@ -0,0 +1,513 @@
+<template>
+  <div>
+    <div class="option-wrapper">
+      <option-item label="表头背景" :responsive="false">
+        <el-switch v-model="toolbarBg" size="small" />
+      </option-item>
+      <option-item label="边框" :responsive="false">
+        <el-switch v-model="border" size="small" @change="handleConfigChange" />
+      </option-item>
+      <option-item label="斑马纹" :responsive="false">
+        <el-switch v-model="stripe" size="small" @change="handleConfigChange" />
+      </option-item>
+      <option-item label="表头" :responsive="false">
+        <el-switch v-model="showHeader" size="small" />
+      </option-item>
+      <option-item label="表尾合计行" :responsive="false">
+        <el-switch v-model="showSummary" size="small" />
+      </option-item>
+      <option-item label="行点击高亮" :responsive="false">
+        <el-switch v-model="highlightCurrentRow" size="small" />
+      </option-item>
+      <option-item label="行点击勾选" :responsive="false">
+        <el-switch v-model="rowClickChecked" size="small" />
+      </option-item>
+      <option-item label="不返回总数" :responsive="false">
+        <el-switch v-model="noCount" size="small" @change="reload()" />
+      </option-item>
+    </div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="pieceId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :highlight-current-row="highlightCurrentRow"
+      :row-click-checked="rowClickChecked"
+      v-model:selections="selections"
+      v-model:current="current"
+      :pagination="{
+        pageSize: 10,
+        pageSizes: [10, 20, 40]
+      }"
+      :toolbar="{ theme: toolbarBg ? 'default' : 'plain' }"
+      :border="border"
+      :stripe="stripe"
+      :show-header="showHeader"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
+      :export-config="{ fileName: '档案数据', datasource: exportSource }"
+      :print-config="printConfig"
+    >
+      <template #toolbar>
+        <el-space :size="12" wrap>
+          <el-button type="primary" class="ele-btn-icon" @click="openExport">
+            打开导出弹窗
+          </el-button>
+          <el-button type="primary" class="ele-btn-icon" @click="openPrint">
+            打开打印弹窗
+          </el-button>
+          <el-button type="primary" class="ele-btn-icon" @click="exportData">
+            直接导出
+          </el-button>
+          <el-button type="primary" class="ele-btn-icon" @click="printData">
+            直接打印
+          </el-button>
+        </el-space>
+      </template>
+      <template #action="{ row }">
+        <template v-if="row">
+          <el-link type="primary" underline="never" @click="openEdit(row)">
+            修改
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            删除
+          </el-link>
+        </template>
+      </template>
+      <!-- 直接打印时自定义多选列复选框 -->
+      <template #selectionPrint="{ row }">
+        <div
+          v-if="row"
+          :style="{
+            width: '14px',
+            height: '14px',
+            border: '1px solid #000',
+            borderRadius: '2px'
+          }"
+        >
+          <div
+            v-if="selections.some((d) => d.pieceId === row.pieceId)"
+            :style="{
+              width: '8px',
+              height: '4px',
+              border: '2px solid transparent',
+              borderLeftColor: '#000',
+              borderBottomColor: '#000',
+              transform: 'rotate(-45deg) translate(0px, 2px)'
+            }"
+          ></div>
+        </div>
+      </template>
+      <!-- 直接打印时自定义多选列表头复选框 -->
+      <template #selectionHeaderPrint>
+        <div
+          :style="{
+            width: '14px',
+            height: '14px',
+            border: '1px solid #000',
+            borderRadius: '2px'
+          }"
+        >
+          <div
+            v-if="isPrintCheckAll === 'indeterminate'"
+            :style="{
+              width: '8px',
+              height: '0px',
+              borderTop: '2px solid #000',
+              margin: '6px auto 0 auto'
+            }"
+          ></div>
+          <div
+            v-else-if="isPrintCheckAll"
+            :style="{
+              width: '8px',
+              height: '4px',
+              border: '2px solid transparent',
+              borderLeftColor: '#000',
+              borderBottomColor: '#000',
+              transform: 'rotate(-45deg) translate(0px, 2px)'
+            }"
+          ></div>
+        </div>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick } from 'vue';
+  import { EleMessage, random } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Column,
+    BeforeExportParams
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 案卷 */
+  interface Piece {
+    /** 案卷id */
+    pieceId?: number;
+    /** 案卷题名 */
+    title?: string;
+    /** 案卷档号 */
+    pieceNo?: string;
+    /** 密级 */
+    secret?: string;
+    /** 存放位置 */
+    location?: string;
+    /** 案卷类型 */
+    type?: string;
+    /** 保管期限 */
+    retention?: string;
+    /** 载体类型 */
+    carrier?: string;
+    /** 归档年度 */
+    year?: string;
+    /** 件数 */
+    amount?: number;
+  }
+
+  const data = Array.from({ length: 39 }).map((_, i) => {
+    const pieceId = i + 1;
+    const no = String(pieceId).padStart(3, '0');
+    const secrets = ['机密', '秘密', '公开', '绝密', '内部'];
+    const retentions = ['永久', '定期10年', '定期20年'];
+    const retentionNos = ['Y', 'D10', 'D20'];
+    const retentionRandom = random(0, retentions.length);
+    const carriers = ['纸张', '光盘'];
+    const year = '2020';
+    const item: Piece = {
+      pieceId,
+      title: `教学档案${no}`,
+      pieceNo: `ELE101-${retentionNos[retentionRandom]}-ZM•JX-${year}-${no}`,
+      secret: secrets[random(0, secrets.length)],
+      location: `001-001-${Math.random() < 0.5 ? 'A' : 'B'}0${random(1, 7)}`,
+      type: '教学组织',
+      retention: retentions[retentionRandom],
+      carrier: carriers[random(0, carriers.length)],
+      year,
+      amount: random(2, 10)
+    };
+    return item;
+  });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Column[]>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center',
+      fixed: 'left',
+      printSlot: 'selectionPrint',
+      printHeaderSlot: 'selectionHeaderPrint'
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center',
+      fixed: 'left'
+    },
+    {
+      prop: 'pieceNo',
+      label: '案卷档号',
+      minWidth: 260
+    },
+    {
+      prop: 'title',
+      label: '案卷题名',
+      minWidth: 160
+    },
+    {
+      prop: 'retention',
+      label: '保管期限',
+      minWidth: 110,
+      align: 'center',
+      filters: [
+        { text: '永久', value: '永久' },
+        { text: '定期10年', value: '定期10年' },
+        { text: '定期20年', value: '定期20年' }
+      ],
+      filterMultiple: false
+    },
+    {
+      prop: 'amount',
+      label: '件数',
+      minWidth: 110,
+      align: 'center'
+    },
+    {
+      prop: 'secret',
+      label: '密级',
+      minWidth: 110,
+      align: 'center',
+      filters: [
+        { text: '机密', value: '机密' },
+        { text: '秘密', value: '秘密' },
+        { text: '公开', value: '公开' },
+        { text: '绝密', value: '绝密' },
+        { text: '内部', value: '内部' }
+      ],
+      filterMultiple: true
+    },
+    {
+      prop: 'year',
+      label: '归档年度',
+      minWidth: 110,
+      align: 'center'
+    },
+    {
+      prop: 'type',
+      label: '案卷类型',
+      minWidth: 140,
+      align: 'center'
+    },
+    {
+      prop: 'location',
+      label: '存放位置',
+      minWidth: 140,
+      align: 'center'
+    },
+    {
+      prop: 'carrier',
+      label: '载体类型',
+      minWidth: 110,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 160,
+      align: 'center',
+      slot: 'action',
+      fixed: 'right',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, filter }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const secretFilter = filter.secret?.length ? filter.secret : null;
+    const retentFilter = filter.retention?.length ? filter.retention : null;
+    const list = data.filter((d) => {
+      if (secretFilter != null) {
+        if (!d.secret || !secretFilter.includes(d.secret)) {
+          return false;
+        }
+      }
+      if (retentFilter != null) {
+        if (!d.retention || !retentFilter.includes(d.retention)) {
+          return false;
+        }
+      }
+      return true;
+    });
+    const start = ((pages.page || 1) - 1) * (pages.limit || 10);
+    const end = start + (pages.limit || 10);
+    return {
+      count: noCount.value ? '*' : list.length,
+      list: list.slice(start, end > list.length ? list.length : end)
+    };
+  };
+
+  /** 表格多选选中数据 */
+  const selections = ref<Piece[]>([]);
+
+  /** 表格单选选中数据 */
+  const current = ref<Piece | null>(null);
+
+  /** 更多配置 */
+  const toolbarBg = ref(false);
+  const border = ref(false);
+  const stripe = ref(false);
+  const showHeader = ref(true);
+  const showSummary = ref(true);
+  const highlightCurrentRow = ref(false);
+  const rowClickChecked = ref(false);
+  const noCount = ref(false);
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row: Piece) => {
+    EleMessage.success({ message: '编辑:' + row.pieceNo, plain: true });
+  };
+
+  /** 删除单个 */
+  const remove = (row: Piece) => {
+    EleMessage.error({ message: '删除:' + row.pieceNo, plain: true });
+  };
+
+  /** 表格合计行 */
+  const getSummaries = ({ columns, data }) => {
+    const sums: string[] = [];
+    let labelFlag = false;
+    columns.forEach((column: Column, index: number) => {
+      if (column.property === 'amount') {
+        sums[index] = data
+          .map((item: Piece) => Number(item[column.property as string]))
+          .reduce((prev: number, curr: number) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+        labelFlag = true;
+      } else if (
+        !labelFlag &&
+        column?.type !== 'selection' &&
+        column?.type !== 'index'
+      ) {
+        sums[index] = '合计';
+        labelFlag = true;
+      }
+    });
+    return sums;
+  };
+
+  /** 获取多选行数据 */
+  /* const getSelections = () => {
+    console.log(JSON.parse(JSON.stringify(selections.value)));
+  }; */
+
+  /** 获取选中行数据 */
+  /* const getCurrent = () => {
+    if (!current.value) {
+      EleMessage.success({ message: '未选中任何数据', plain: true });
+    } else {
+      console.log(JSON.parse(JSON.stringify(current.value)));
+    }
+  }; */
+
+  /** 搜索 */
+  const reload = () => {
+    selections.value = [];
+    tableRef.value?.reload?.({ page: 1 });
+  };
+
+  /** 表格属性改变 */
+  const handleConfigChange = () => {
+    nextTick(() => {
+      tableRef.value && tableRef.value.doLayout();
+    });
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ filter }) => {
+    const res: any = await datasource({
+      filter,
+      pages: { page: 1, limit: data.length }
+    } as any);
+    return res.list;
+  };
+
+  /** 打印配置 */
+  const printConfig = reactive({
+    datasource: exportSource,
+    printerProps: {
+      direction: 'landscape'
+    },
+    beforePrint: (params: BeforeExportParams) => {
+      params.footerData.forEach((fRow) => {
+        params.bodyData.push(fRow);
+      });
+      params.footerData.splice(0, params.footerData.length);
+    }
+  });
+
+  /** 打开导出 */
+  const openExport = () => {
+    tableRef.value?.openExportModal?.();
+  };
+
+  /** 打开打印 */
+  const openPrint = () => {
+    tableRef.value?.openPrintModal?.();
+  };
+
+  /** 直接打印时表格是否全选状态 */
+  const isPrintCheckAll = ref<boolean | 'indeterminate'>(false);
+
+  /** 直接打印 */
+  const printData = () => {
+    const printData = tableRef.value?.getData?.() || [];
+    isPrintCheckAll.value = selections.value.length
+      ? printData.length === selections.value.length
+        ? true
+        : 'indeterminate'
+      : false;
+    tableRef.value?.printData?.({
+      data: printData,
+      columns: columns.value,
+      showHeader: showHeader.value,
+      showFooter: showSummary.value,
+      dataType: 'pageData'
+    });
+  };
+
+  /** 直接导出 */
+  const exportData = () => {
+    const printData = tableRef.value?.getData?.() || [];
+    isPrintCheckAll.value = selections.value.length
+      ? printData.length === selections.value.length
+        ? true
+        : 'indeterminate'
+      : false;
+    tableRef.value?.exportData?.({
+      data: printData,
+      columns: [
+        {
+          type: 'selection',
+          columnKey: 'selection',
+          width: 50,
+          align: 'center' /* ,
+          fixed: 'left' */,
+          formatter: (row) =>
+            selections.value.some((d) => d.pieceId === row.pieceId)
+              ? '☑'
+              : '☐',
+          label:
+            isPrintCheckAll.value === 'indeterminate'
+              ? '☐'
+              : isPrintCheckAll.value
+                ? '☑'
+                : '☐'
+        },
+        ...columns.value.filter(
+          (c) => c.columnKey !== 'action' && c.columnKey !== 'selection'
+        )
+      ],
+      showHeader: showHeader.value,
+      showFooter: showSummary.value,
+      fileName: '档案数据',
+      dataType: 'pageData'
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .option-wrapper {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-top: 12px;
+
+    :deep(.option-item) {
+      margin: 0 20px 8px 0;
+
+      .option-item-label + .option-item-body {
+        padding-left: 4px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/table/components/demo-contextmenu.vue b/z_ele/src/views/extension/table/components/demo-contextmenu.vue
new file mode 100644
index 0000000..672f8ff
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/demo-contextmenu.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :highlight-current-row="true"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+      @row-contextmenu="handleRowContextmenu"
+    />
+    <ele-dropdown
+      ref="ctxMenuDropdownRef"
+      trigger="click"
+      :trigger-keys="[]"
+      :icon-props="{ size: 15 }"
+      :popper-options="{
+        strategy: 'fixed',
+        modifiers: [{ name: 'offset', options: { offset: [0, -12] } }]
+      }"
+      :persistent="false"
+      component-type="pro"
+      :prevent-contextmenu="true"
+      :virtual-triggering="true"
+      :virtual-ref="ctxMenuDropdownVirtualRef"
+      :disabled="!ctxMenuDropdownItems.length"
+      :items="ctxMenuDropdownItems"
+      :popper-style="ctxMenuDropdownStyle"
+      @command="handleItemCommand"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick, markRaw } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleDropdownInstance } from 'ele-admin-plus/es/ele-app/plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Column
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import {
+    LockOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    DownloadOutlined,
+    LinkOutlined
+  } from '@/components/icons';
+  import { pageUsers, listUsers } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Column[]>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      width: 110,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 180,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, orders, filters }) => {
+    return pageUsers({ ...orders, ...filters, ...pages });
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ orders, filters }) => {
+    return listUsers({ ...orders, ...filters });
+  };
+
+  /** 右键菜单组件 */
+  const ctxMenuDropdownRef = ref<EleDropdownInstance>(null);
+
+  /** 右键菜单数据 */
+  const ctxMenuDropdownItems = ref<DropdownItem[]>([]);
+
+  /** 右键菜单虚拟触发节点 */
+  const ctxMenuDropdownVirtualRef = ref<any>();
+
+  /** 当前打开的右键菜单对应的数据 */
+  let ctxMenuCurrentData: User | null = null;
+
+  /** 右键菜单调整位置 */
+  const ctxMenuDropdownStyle = reactive({ marginLeft: '0px' });
+
+  /** 获取右键菜单数据 */
+  const getContextMenus = (_item: User) => {
+    return [
+      { title: '重置密码', command: 'psw', icon: markRaw(LockOutlined) },
+      { title: '修改用户', command: 'edit', icon: markRaw(EditOutlined) },
+      {
+        title: '导出用户',
+        command: 'export',
+        icon: markRaw(DownloadOutlined),
+        children: [
+          {
+            title: '导出XLS',
+            command: 'exportXlsx',
+            icon: markRaw(LinkOutlined)
+          },
+          {
+            title: '导出CSV',
+            command: 'exportCsv',
+            icon: markRaw(LinkOutlined)
+          },
+          {
+            title: '导出HTML',
+            command: 'exportHtml',
+            icon: markRaw(LinkOutlined)
+          }
+        ]
+      },
+      {
+        title: '删除用户',
+        command: 'del',
+        icon: markRaw(DeleteOutlined),
+        danger: true,
+        divided: true
+      }
+    ];
+  };
+
+  /** 打开右键菜单 */
+  const openCtxMenuDropdown = (triggerEl: any, row: User) => {
+    ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleClose();
+    nextTick(() => {
+      ctxMenuCurrentData = row;
+      ctxMenuDropdownItems.value = getContextMenus(row) || [];
+      ctxMenuDropdownVirtualRef.value = triggerEl;
+      if (ctxMenuDropdownItems.value.length) {
+        nextTick(() => {
+          ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+        });
+      }
+    });
+  };
+
+  /** 右键菜单项点击事件 */
+  const handleItemCommand = (command: string) => {
+    const row = ctxMenuCurrentData;
+    if (row == null) {
+      return;
+    }
+    if (command === 'psw') {
+      EleMessage.info({
+        message: `点击了重置密码: ${row.nickname}`,
+        plain: true
+      });
+    } else if (command === 'edit') {
+      EleMessage.info({ message: `点击了修改: ${row.nickname}`, plain: true });
+    } else if (command === 'del') {
+      EleMessage.info({ message: `点击了删除: ${row.nickname}`, plain: true });
+    } else if (command === 'exportXlsx') {
+      EleMessage.info({
+        message: `点击了导出XLS: ${row.nickname}`,
+        plain: true
+      });
+    } else if (command === 'exportCsv') {
+      EleMessage.info({
+        message: `点击了导出CSV: ${row.nickname}`,
+        plain: true
+      });
+    } else if (command === 'exportHtml') {
+      EleMessage.info({
+        message: `点击了导出HTML: ${row.nickname}`,
+        plain: true
+      });
+    }
+  };
+
+  /** 表格行右键事件 */
+  const handleRowContextmenu = (row: User, _column: Column, e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rowEl = e.currentTarget as HTMLElement;
+    const rect = rowEl.getBoundingClientRect();
+    ctxMenuDropdownStyle.marginLeft = `${e.clientX - rect.left - rect.width / 2}px`;
+    tableRef.value?.setCurrentRow?.(row);
+    openCtxMenuDropdown(rowEl, row);
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/demo-selections.vue b/z_ele/src/views/extension/table/components/demo-selections.vue
new file mode 100644
index 0000000..c755712
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/demo-selections.vue
@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <div class="option-wrapper">
+      <option-item label="翻页保留多选" :responsive="false">
+        <el-switch
+          v-model="reserveSelection"
+          size="small"
+          @change="handleReserveSelectionChange"
+        />
+      </option-item>
+      <option-item label="翻页保留单选" :responsive="false">
+        <el-switch v-model="reserveCurrent" size="small" />
+      </option-item>
+    </div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="pieceId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      v-model:selections="selections"
+      v-model:current="current"
+      highlight-current-row
+      :reserveCurrent="reserveCurrent"
+      :pagination="{
+        pageSize: 10,
+        pageSizes: [10, 20, 40]
+      }"
+      :export-config="{ fileName: '档案数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    >
+      <template #toolbar>
+        <el-space :size="12" wrap>
+          <el-button type="primary" class="ele-btn-icon" @click="getSelections">
+            获取多选
+          </el-button>
+          <el-button type="warning" class="ele-btn-icon" @click="setSelections">
+            修改多选
+          </el-button>
+          <el-button
+            type="danger"
+            class="ele-btn-icon"
+            @click="clearSelections"
+          >
+            清空多选
+          </el-button>
+          <el-button
+            plain
+            type="primary"
+            class="ele-btn-icon"
+            @click="getCurrent"
+          >
+            获取单选
+          </el-button>
+          <el-button
+            plain
+            type="warning"
+            class="ele-btn-icon"
+            @click="setCurrent"
+          >
+            修改单选
+          </el-button>
+          <el-button
+            plain
+            type="danger"
+            class="ele-btn-icon"
+            @click="removeCurrent"
+          >
+            清空单选
+          </el-button>
+        </el-space>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage, random } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Column
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+  const data = Array.from({ length: 39 }).map((_, i) => {
+    const pieceId = i + 1;
+    const no = String(pieceId).padStart(3, '0');
+    const secrets = ['机密', '秘密', '公开', '绝密', '内部'];
+    const retentions = ['永久', '定期10年', '定期20年'];
+    const retentionNos = ['Y', 'D10', 'D20'];
+    const retentionRandom = random(0, retentions.length);
+    const year = '2020';
+    const item: Piece = {
+      pieceId,
+      title: `教学档案${no}`,
+      pieceNo: `ELE101-${retentionNos[retentionRandom]}-ZM•JX-${year}-${no}`,
+      secret: secrets[random(0, secrets.length)],
+      retention: retentions[retentionRandom],
+      year,
+      amount: random(2, 10)
+    };
+    return item;
+  });
+
+  /** 案卷 */
+  interface Piece {
+    /** 案卷id */
+    pieceId?: number;
+    /** 案卷题名 */
+    title?: string;
+    /** 案卷档号 */
+    pieceNo?: string;
+    /** 密级 */
+    secret?: string;
+    /** 保管期限 */
+    retention?: string;
+    /** 归档年度 */
+    year?: string;
+    /** 件数 */
+    amount?: number;
+  }
+
+  /** 翻页保留多选 */
+  const reserveSelection = ref(false);
+
+  /** 翻页保留单选 */
+  const reserveCurrent = ref(false);
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Column[]>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */,
+      reserveSelection: reserveSelection.value,
+      selectable: (row) => {
+        return ![1, 5, 8].includes(row.pieceId);
+      }
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'pieceNo',
+      label: '案卷档号',
+      minWidth: 260
+    },
+    {
+      prop: 'title',
+      label: '案卷题名',
+      minWidth: 160
+    },
+    {
+      prop: 'retention',
+      label: '保管期限',
+      minWidth: 110,
+      align: 'center',
+      filters: [
+        { text: '永久', value: '永久' },
+        { text: '定期10年', value: '定期10年' },
+        { text: '定期20年', value: '定期20年' }
+      ],
+      filterMultiple: false
+    },
+    {
+      prop: 'amount',
+      label: '件数',
+      minWidth: 110,
+      align: 'center'
+    },
+    {
+      prop: 'secret',
+      label: '密级',
+      minWidth: 110,
+      align: 'center',
+      filters: [
+        { text: '机密', value: '机密' },
+        { text: '秘密', value: '秘密' },
+        { text: '公开', value: '公开' },
+        { text: '绝密', value: '绝密' },
+        { text: '内部', value: '内部' }
+      ],
+      filterMultiple: true
+    },
+    {
+      prop: 'year',
+      label: '归档年度',
+      minWidth: 110,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, filter }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const secretFilter = filter.secret?.length ? filter.secret : null;
+    const retentFilter = filter.retention?.length ? filter.retention : null;
+    const list = data.filter((d) => {
+      if (secretFilter != null) {
+        if (!d.secret || !secretFilter.includes(d.secret)) {
+          return false;
+        }
+      }
+      if (retentFilter != null) {
+        if (!d.retention || !retentFilter.includes(d.retention)) {
+          return false;
+        }
+      }
+      return true;
+    });
+    const start = ((pages.page || 1) - 1) * (pages.limit || 10);
+    const end = start + (pages.limit || 10);
+    return {
+      count: list.length,
+      list: list.slice(start, end > list.length ? list.length : end)
+    };
+  };
+
+  /** 表格多选选中数据 */
+  const selections = ref<Piece[]>([]);
+
+  /** 表格单选选中数据 */
+  const current = ref<Piece | null>(null);
+
+  /** 获取多选 */
+  const getSelections = () => {
+    console.log(JSON.parse(JSON.stringify(selections.value)));
+    EleMessage.success({
+      message: '共 ' + selections.value.length + ' 条数据已打印在控制台',
+      plain: true
+    });
+  };
+
+  /** 修改多选 */
+  const setSelections = () => {
+    tableRef.value?.setSelectedRows?.([data[1], data[2], data[5]]);
+  };
+
+  /** 清空多选 */
+  const clearSelections = () => {
+    selections.value = [];
+  };
+
+  /** 获取单选 */
+  const getCurrent = () => {
+    if (!current.value) {
+      EleMessage.success({ message: '未选中任何数据', plain: true });
+    } else {
+      console.log(JSON.parse(JSON.stringify(current.value)));
+      EleMessage.success({
+        message: current.value.pieceNo + '的数据已打印在控制台',
+        plain: true
+      });
+    }
+  };
+
+  /** 修改单选 */
+  const setCurrent = () => {
+    tableRef.value?.setCurrentRow?.(data[3]);
+  };
+
+  /** 清空单选 */
+  const removeCurrent = () => {
+    current.value = null;
+  };
+
+  /** 翻页保留多选改变 */
+  const handleReserveSelectionChange = () => {
+    columns.value[0].reserveSelection = reserveSelection.value;
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ filter }) => {
+    const res: any = await datasource({
+      filter,
+      pages: { page: 1, limit: 1000 }
+    } as any);
+    return res.list;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .option-wrapper {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-top: 12px;
+
+    :deep(.option-item) {
+      margin: 0 20px 8px 0;
+
+      .option-item-label + .option-item-body {
+        padding-left: 4px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/table/components/editable-table.vue b/z_ele/src/views/extension/table/components/editable-table.vue
new file mode 100644
index 0000000..3225deb
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/editable-table.vue
@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <el-form ref="formRef" :model="form" label-width="0px" @submit.prevent="">
+      <div style="padding: 6px 0 12px 0">
+        <el-button
+          :icon="PlusOutlined"
+          type="primary"
+          class="ele-btn-icon"
+          @click="add"
+        >
+          新增一行
+        </el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </div>
+      <ele-data-table
+        row-key="key"
+        :columns="columns"
+        :data="form.users"
+        cell-class-name="editable-table-cell"
+        class="editable-table"
+      >
+        <template #name="{ row, $index }">
+          <el-form-item
+            :prop="'users.' + $index + '.name'"
+            :rules="{
+              required: true,
+              message: '请输入用户名',
+              type: 'string',
+              trigger: 'blur'
+            }"
+            class="form-error-popper"
+            style="margin-bottom: 0"
+          >
+            <el-input
+              v-if="row.isEdit"
+              clearable
+              v-model="row.name"
+              placeholder="请输入用户名"
+            />
+            <div v-else class="editable-cell-text">{{ row.name }}</div>
+          </el-form-item>
+        </template>
+        <template #number="{ row, $index }">
+          <el-form-item
+            :prop="'users.' + $index + '.number'"
+            :rules="{
+              required: true,
+              message: '请输入工号',
+              type: 'string',
+              trigger: 'blur'
+            }"
+            class="form-error-popper"
+            style="margin-bottom: 0"
+          >
+            <el-input
+              v-if="row.isEdit"
+              clearable
+              v-model="row.number"
+              placeholder="请输入工号"
+            />
+            <div v-else class="editable-cell-text">{{ row.number }}</div>
+          </el-form-item>
+        </template>
+        <template #department="{ row, $index }">
+          <el-form-item
+            :prop="'users.' + $index + '.department'"
+            :rules="{
+              required: true,
+              message: '请选择部门',
+              type: 'string',
+              trigger: 'change'
+            }"
+            class="form-error-popper"
+            style="margin-bottom: 0"
+          >
+            <el-select
+              v-if="row.isEdit"
+              clearable
+              v-model="row.department"
+              placeholder="请选择部门"
+              class="ele-fluid"
+            >
+              <el-option value="研发部" label="研发部" />
+              <el-option value="测试部" label="测试部" />
+              <el-option value="产品部" label="产品部" />
+            </el-select>
+            <div v-else class="editable-cell-text">{{ row.department }}</div>
+          </el-form-item>
+        </template>
+        <template #action="{ row, $index }">
+          <div style="display: inline; align-items: center">
+            <el-link
+              v-if="row.isEdit"
+              type="success"
+              underline="never"
+              @click="done(row)"
+            >
+              完成
+            </el-link>
+            <el-link v-else type="primary" underline="never" @click="edit(row)">
+              编辑
+            </el-link>
+            <el-divider direction="vertical" style="margin: 0 8px" />
+            <el-link
+              type="danger"
+              underline="never"
+              @click="remove(row, $index)"
+            >
+              删除
+            </el-link>
+          </div>
+        </template>
+      </ele-data-table>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { Columns } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { PlusOutlined } from '@/components/icons';
+  import type { UserItem } from '@/api/example/model';
+  import { listAddedUsers } from '@/api/example';
+  interface FormData {
+    users: UserItem[];
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const form = reactive<FormData>({
+    users: []
+  });
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      columnKey: 'name',
+      label: '用户名',
+      minWidth: 120,
+      slot: 'name'
+    },
+    {
+      columnKey: 'number',
+      label: '工号',
+      minWidth: 120,
+      slot: 'number'
+    },
+    {
+      columnKey: 'department',
+      label: '所属部门',
+      minWidth: 120,
+      slot: 'department'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action'
+    }
+  ]);
+
+  /** 表单提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid, obj) => {
+      if (!valid) {
+        const errors = obj ? Object.keys(obj).length : 0;
+        EleMessage.error({ message: `有 ${errors} 项校验不通过`, plain: true });
+        return;
+      }
+      EleMessage.success({ message: '提交成功', plain: true });
+    });
+  };
+
+  /** 添加 */
+  const add = () => {
+    form.users.push({
+      key: Date.now() + '-' + form.users.length,
+      number: '',
+      name: '',
+      department: void 0,
+      isEdit: true
+    });
+  };
+
+  /** 删除 */
+  const remove = (_row: UserItem, index: number) => {
+    form.users.splice(index, 1);
+  };
+
+  /** 编辑 */
+  const edit = (row: UserItem) => {
+    row.isEdit = true;
+  };
+
+  /** 完成 */
+  const done = (row: UserItem) => {
+    row.isEdit = false;
+  };
+
+  // 查询已添加
+  listAddedUsers()
+    .then((data) => {
+      form.users = data;
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
+
+<style lang="scss" scoped>
+  .editable-table :deep(.editable-table-cell) {
+    position: static;
+
+    & > .cell {
+      overflow: visible;
+    }
+  }
+
+  .editable-cell-text {
+    width: 100%;
+    min-height: 32px;
+    box-sizing: border-box;
+  }
+
+  .form-error-popper.is-error .editable-cell-text {
+    border: 1px dashed var(--el-color-danger);
+    border-radius: var(--el-border-radius-base);
+  }
+
+  /* 表单验证气泡形式 */
+  .form-error-popper.el-form-item > :deep(.el-form-item__content) {
+    & > .el-form-item__error {
+      position: absolute;
+      left: 0;
+      top: auto;
+      bottom: calc(100% + 6px);
+      width: max-content;
+      color: #fff;
+      font-size: 12px;
+      background: var(--el-color-danger);
+      transition: all 0.2s;
+      padding: 10px;
+      border-radius: 4px;
+      z-index: 999;
+      transform: none;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+
+      &:after {
+        content: '';
+        border: 6px solid transparent;
+        border-top-color: var(--el-color-danger);
+        position: absolute;
+        left: 12px;
+        bottom: -11px;
+      }
+    }
+
+    &:hover > .el-form-item__error {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: all;
+    }
+  }
+
+  /* 第一行气泡显示在下 */
+  .editable-table :deep(tbody > tr:first-child) {
+    .el-form-item > .el-form-item__content > .el-form-item__error {
+      bottom: auto;
+      top: calc(100% + 6px);
+
+      &:after {
+        top: -11px;
+        bottom: auto;
+        border-bottom-color: var(--el-color-danger);
+        border-top-color: transparent;
+      }
+    }
+
+    /* 只有一行时气泡显示在右 */
+    &:last-child {
+      .el-form-item > .el-form-item__content > .el-form-item__error {
+        top: 50%;
+        right: auto;
+        left: calc(100% + 6px);
+        transform: translateY(-50%);
+
+        &:after {
+          top: auto;
+          left: -11px;
+          border-bottom-color: transparent;
+          border-right-color: var(--el-color-danger);
+        }
+      }
+
+      /* 最后一个单元格气泡显示在左 */
+      & > td:last-child {
+        .el-form-item > .el-form-item__content > .el-form-item__error {
+          left: auto;
+          right: calc(100% + 6px);
+
+          &:after {
+            left: auto;
+            right: -11px;
+            border-right-color: transparent;
+            border-left-color: var(--el-color-danger);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/table/components/expandable-table.vue b/z_ele/src/views/extension/table/components/expandable-table.vue
new file mode 100644
index 0000000..f3bbdae
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/expandable-table.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <ele-pro-table
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    >
+      <template #expand="{ row }">
+        <div style="padding: 12px 16px 12px 32px">
+          <div>
+            <span>手机号码：</span>
+            <span>{{ row.phone }}</span>
+          </div>
+          <div style="margin-top: 12px">
+            <span>所属机构：</span>
+            <span>{{ row.organizationName }}</span>
+          </div>
+          <div style="margin-top: 12px">
+            <span>角&emsp;&emsp;色：</span>
+            <span>
+              <el-tag
+                v-for="item in row.roles"
+                :key="item.roleId"
+                size="small"
+                :disable-transitions="true"
+              >
+                {{ item.roleName }}
+              </el-tag>
+            </span>
+          </div>
+          <div style="margin-top: 12px">
+            <span>状&emsp;&emsp;态：</span>
+            <span>
+              <ele-dot v-if="row.status === 0" text="正常" size="8px" />
+              <ele-dot
+                v-else-if="row.status === 1"
+                text="冻结"
+                type="danger"
+                :ripple="false"
+                size="8px"
+              />
+            </span>
+          </div>
+        </div>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageUsers, listUsers } from '@/api/system/user';
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'expand',
+      columnKey: 'expand',
+      width: 50,
+      align: 'center',
+      slot: 'expand',
+      formatter: (row) => {
+        return [
+          `手机号码：${row.phone}`,
+          `所属机构：${row.organizationName}`,
+          `角色：${row.roles.map((r) => r.roleName).join()}`,
+          `状态：${row.status == 0 ? '正常' : '冻结'}`
+        ].join('\n');
+      }
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 180,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, orders }) => {
+    return pageUsers({ ...orders, ...pages });
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ orders }) => {
+    return listUsers({ ...orders });
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/merge-cell.vue b/z_ele/src/views/extension/table/components/merge-cell.vue
new file mode 100644
index 0000000..5d1a324
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/merge-cell.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <ele-pro-table
+      :border="true"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :span-method="spanMethod"
+      :toolbar="{ theme: 'default' }"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '成绩数据' }"
+      :pagination="{
+        pageSize: 20,
+        pageSizes: [20, 40, 80]
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageUserScores } from '@/api/example';
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      columnKey: 'userName',
+      prop: 'userName',
+      label: '姓名',
+      align: 'center'
+    },
+    {
+      columnKey: 'courseName',
+      prop: 'courseName',
+      label: '课程',
+      align: 'center'
+    },
+    {
+      columnKey: 'score',
+      prop: 'score',
+      label: '得分',
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = () => {
+    return pageUserScores();
+  };
+
+  /** 合并表格单元格 */
+  const spanMethod = ({ row, column }) => {
+    return [
+      row[`${column.columnKey}RowSpan`] ?? 1,
+      row[`${column.columnKey}ColSpan`] ?? 1
+    ];
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/nested-table.vue b/z_ele/src/views/extension/table/components/nested-table.vue
new file mode 100644
index 0000000..4c73011
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/nested-table.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <ele-pro-table
+      row-key="dictId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '字典数据' }"
+    >
+      <template #toolbar>
+        <el-button
+          type="primary"
+          @click="getChildSelections"
+          class="ele-btn-icon"
+        >
+          获取所有选中
+        </el-button>
+      </template>
+      <template #action="{ row }">
+        <el-link type="primary" underline="never" @click="editDict(row)">
+          修改
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="removeDict(row)">
+          删除
+        </el-link>
+      </template>
+      <template #expand="{ row }">
+        <child-table
+          :dictId="row.dictId"
+          v-model:selections="childSelections[row.dictId]"
+          @setDictionaryData="handleSetDictionaryData"
+        />
+      </template>
+      <template #expandPrint="{ row }">
+        <child-print-table :data="dictionaryDatas[row.dictId]" />
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageDictionaries } from '@/api/system/dictionary';
+  import type { Dictionary } from '@/api/system/dictionary/model';
+  import ChildTable from './child-table.vue';
+  import ChildPrintTable from './child-print-table.vue';
+  import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'expand',
+      columnKey: 'expand',
+      width: 50,
+      align: 'center',
+      slot: 'expand' /* ,
+      fixed: 'left' */,
+      // 用于打印
+      printSlot: 'expandPrint',
+      // 用于导出
+      formatter: (row) => {
+        const rows: (string | number)[][] = [
+          ['#', '字典数据名称', '字典数据代码', '排序号', '创建时间']
+        ];
+        dictionaryDatas[row.dictId]?.forEach?.((d, i) => {
+          rows.push([
+            i + 1,
+            d.dictDataName ?? '',
+            d.dictDataCode ?? '',
+            d.sortNumber ?? '',
+            d.createTime ?? ''
+          ]);
+        });
+        return rows.map((cells) => cells.join(',')).join('\n');
+      }
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'dictName',
+      label: '字典名称',
+      sortable: 'custom',
+      minWidth: 130
+    },
+    {
+      prop: 'dictCode',
+      label: '字典代码',
+      sortable: 'custom',
+      minWidth: 160
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序号',
+      sortable: 'custom',
+      width: 120,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 180,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center',
+      slot: 'action' /* ,
+      fixed: 'right' */,
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, orders }) => {
+    return pageDictionaries({ ...orders, ...pages });
+  };
+
+  /** 删除字典 */
+  const removeDict = (row: Dictionary) => {
+    EleMessage.error({ message: '删除: ' + row.dictName, plain: true });
+  };
+
+  /** 修改字典 */
+  const editDict = (row: Dictionary) => {
+    EleMessage.info({ message: '删除: ' + row.dictName, plain: true });
+  };
+
+  /** 子表格多选选中数据 */
+  const childSelections = reactive({});
+
+  /** 获取子表格多选选中数据 */
+  const getChildSelections = () => {
+    console.log(JSON.parse(JSON.stringify(childSelections)));
+    const length = Object.keys(childSelections)
+      .map((key) => childSelections[key].length)
+      .reduce((a, b) => a + b, 0);
+    EleMessage.success({
+      message: `共选中 ${length} 条数据, 已打印在控制台`,
+      plain: true
+    });
+  };
+
+  /** 存储已加载的子表格数据 */
+  const dictionaryDatas = reactive<Record<number, DictionaryData[]>>({});
+
+  const handleSetDictionaryData = (dictId: number, data: DictionaryData[]) => {
+    dictionaryDatas[dictId] = data;
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/sortable-table.vue b/z_ele/src/views/extension/table/components/sortable-table.vue
new file mode 100644
index 0000000..05d7313
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/sortable-table.vue
@@ -0,0 +1,225 @@
+<template>
+  <div style="padding-top: 8px">
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :pagination="false"
+      v-model:selections="selections"
+      class="sortable-table"
+      :export-config="{ fileName: '用户数据' }"
+    >
+      <template #handle>
+        <ele-text
+          :icon="HolderOutlined"
+          type="placeholder"
+          class="sort-handle"
+        />
+      </template>
+      <template #status="{ row }">
+        <ele-dot v-if="row.status === 0" text="正常" size="8px" />
+        <ele-dot
+          v-else-if="row.status === 1"
+          text="冻结"
+          type="danger"
+          :ripple="false"
+          size="8px"
+        />
+      </template>
+      <template #toolbar>
+        <el-button type="primary" @click="getSelections" class="ele-btn-icon">
+          获取选中
+        </el-button>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import SortableJs from 'sortablejs';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { HolderOutlined } from '@/components/icons';
+  import type { User } from '@/api/system/user/model';
+  import { listUsers } from '@/api/system/user';
+
+  /** 排序实例 */
+  let sortableIns: SortableJs | null = null;
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      columnKey: 'handle',
+      width: 58,
+      align: 'center',
+      slot: 'handle' /* ,
+      fixed: 'left' */ /* ,
+      hideInSetting: true */,
+      hideInPrint: true,
+      hideInExport: true
+    },
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */,
+      reserveSelection: true
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      minWidth: 110
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      minWidth: 110
+    },
+    {
+      columnKey: 'sex',
+      prop: 'sexName',
+      label: '性别',
+      width: 110,
+      align: 'center',
+      filters: [
+        { text: '男', value: '1' },
+        { text: '女', value: '2' }
+      ],
+      filterMultiple: false
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 130,
+      align: 'center',
+      slot: 'status' /* ,
+      fixed: 'right' */,
+      formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+    }
+  ]);
+
+  /** 表格数据 */
+  const datasource: DatasourceFunction = ({ where, orders, filters }) => {
+    return listUsers({ ...where, ...orders, ...filters });
+  };
+
+  onMounted(() => {
+    // 支持拖拽排序
+    const tableEl = tableRef.value?.$el;
+    if (!tableEl) {
+      return;
+    }
+    const tbodyEl = tableEl.querySelector(
+      '.el-table__inner-wrapper > .el-table__body-wrapper .el-table__body > tbody'
+    ) as HTMLElement;
+    sortableIns = new SortableJs(tbodyEl, {
+      animation: 300,
+      draggable: '.el-table__row',
+      handle: '.sort-handle',
+      forceFallback: true,
+      onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
+        if (
+          typeof oldDraggableIndex === 'number' &&
+          typeof newDraggableIndex === 'number'
+        ) {
+          const temp = [...(tableRef.value?.getData?.() ?? [])];
+          temp.splice(
+            newDraggableIndex,
+            0,
+            temp.splice(oldDraggableIndex, 1)[0]
+          );
+          tableRef.value?.setData?.(temp);
+          Array.from(
+            tbodyEl.querySelectorAll('.el-table__row.hover-row')
+          ).forEach((el) => {
+            el.classList.remove('hover-row');
+          });
+        }
+      },
+      onChange: () => {
+        Array.from(
+          tbodyEl.querySelectorAll('.el-table__row.hover-row')
+        ).forEach((el) => {
+          el.classList.remove('hover-row');
+        });
+      },
+      setData: () => {}
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortableIns) {
+      sortableIns.destroy();
+      sortableIns = null;
+    }
+  });
+
+  /** 获取选中数据 */
+  const getSelections = () => {
+    const data = tableRef.value?.getData?.() ?? [];
+    const result = [...selections.value].sort((a, b) => {
+      const ai = data.findIndex((d) => d.userId === a.userId);
+      const bi = data.findIndex((d) => d.userId === b.userId);
+      return ai - bi;
+    });
+    console.log(JSON.parse(JSON.stringify(result)));
+    EleMessage.success({
+      message: `共选中 ${selections.value.length} 条数据, 已打印在控制台`,
+      plain: true
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sort-handle {
+    cursor: move;
+  }
+
+  .sortable-table :deep(.el-table) {
+    .el-table__row {
+      &.sortable-chosen {
+        user-select: none;
+      }
+
+      &.sortable-ghost {
+        opacity: 0;
+      }
+
+      &.sortable-fallback {
+        opacity: 1 !important;
+
+        td.el-table__cell {
+          background: var(--el-color-primary-light-8);
+        }
+      }
+    }
+
+    &:has(.el-table__row.sortable-chosen) .el-table__row td.el-table__cell {
+      cursor: move;
+
+      & > .cell {
+        pointer-events: none;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/table/components/tree-table.vue b/z_ele/src/views/extension/table/components/tree-table.vue
new file mode 100644
index 0000000..5408026
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/tree-table.vue
@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="menuKey"
+      :columns="columns"
+      :datasource="datasource"
+      :lazy="true"
+      :show-overflow-tooltip="true"
+      :load="tableLoad"
+      :pagination="{ pageSize: 5, pageSizes: [5, 10, 20] }"
+      :export-config="{ fileName: '菜单数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+      @done="handleDone"
+    >
+      <template #action="{ row }">
+        <el-link
+          type="primary"
+          underline="never"
+          @click="reloadChild(row, $event)"
+        >
+          刷新我的子级
+        </el-link>
+        <el-divider v-if="row.parentId" direction="vertical" />
+        <el-link
+          v-if="row.parentId"
+          type="primary"
+          underline="never"
+          @click="reloadParent(row)"
+        >
+          刷新我父级的子级
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import dayjs from 'dayjs';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns,
+    DataItem,
+    DoneFunction
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageMenus, listMenus } from '@/api/system/menu';
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'title',
+      label: '菜单名称',
+      minWidth: 160
+    },
+    {
+      prop: 'path',
+      label: '路由地址',
+      minWidth: 180
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'updateTime',
+      label: '更新时间',
+      width: 220,
+      align: 'center'
+    },
+    {
+      width: 280,
+      columnKey: 'action',
+      label: '操作',
+      align: 'center',
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, where, parent }) => {
+    const now = Date.now();
+    if (parent == null) {
+      const res = await pageMenus({ ...where, ...pages, parentId: 0 });
+      return {
+        count: res?.count,
+        list: res?.list?.map?.((d) => {
+          return {
+            ...d,
+            updateTime: dayjs(now).format('YYYY-MM-DD HH:mm:ss.SSS'),
+            menuKey: d.menuId + '-' + now
+          };
+        })
+      };
+    }
+    const data = await listMenus({ ...where, parentId: parent.menuId });
+    parent._oldChildrenLength = parent.children?.length || 0;
+    return data.map((d) => {
+      return {
+        ...d,
+        updateTime: dayjs(now).format('YYYY-MM-DD HH:mm:ss.SSS'),
+        menuKey: d.menuId + '-' + now,
+        _parentTableResolve: parent._tableResolve,
+        parent
+      };
+    });
+  };
+
+  /** 表格数据加载完成事件 */
+  const handleDone: DoneFunction<DataItem> = ({ response }, parent) => {
+    // 解决懒加载下子级无法清空
+    if (parent && !response.length && parent._oldChildrenLength) {
+      nextTick(() => {
+        //console.log(parent);
+        parent.hasChildren = false;
+        parent.menuKey = parent.menuId + '-' + Date.now();
+      });
+    }
+  };
+
+  /** 重写树表格懒加载方法 */
+  const tableLoad = (row: any, _treeNode: any, resolve: any) => {
+    row._tableResolve = resolve;
+    tableRef.value?.reload?.(void 0, row, resolve);
+  };
+
+  /** 刷新节点的子级数据 */
+  const reloadChild = (row: any, e: MouseEvent) => {
+    EleMessage.success({
+      message: '已刷新, 可查看控制台发出的请求',
+      plain: true
+    });
+    if (row._tableResolve) {
+      tableRef.value?.reload?.(void 0, row, row._tableResolve);
+      return;
+    }
+    const target = e.currentTarget as HTMLElement;
+    const $tr = target?.parentElement?.parentElement?.parentElement;
+    const $icon = $tr?.querySelector?.('.el-table__expand-icon') as any;
+    $icon && $icon.click();
+  };
+
+  /** 刷新父级节点的子级数据 */
+  const reloadParent = (row: any) => {
+    EleMessage.success({
+      message: '已刷新, 可查看控制台发出的请求',
+      plain: true
+    });
+    if (row._parentTableResolve) {
+      tableRef.value?.reload?.(void 0, row.parent, row._parentTableResolve);
+    }
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ where }) => {
+    const data = await listMenus({ ...where });
+    return toTree({
+      data,
+      idField: 'menuId',
+      parentIdField: 'parentId'
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/virtual-base.vue b/z_ele/src/views/extension/table/components/virtual-base.vue
new file mode 100644
index 0000000..f49ce64
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/virtual-base.vue
@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <div class="option-wrapper">
+      <option-item label="表头背景" :responsive="false">
+        <el-switch v-model="toolbarBg" size="small" />
+      </option-item>
+      <option-item label="显示边框" :responsive="false">
+        <el-switch v-model="border" size="small" />
+      </option-item>
+      <option-item label="显示斑马纹" :responsive="false">
+        <el-switch v-model="stripe" size="small" />
+      </option-item>
+      <option-item label="显示表头" :responsive="false">
+        <el-switch v-model="showHeader" size="small" />
+      </option-item>
+      <option-item label="显示表尾合计行" :responsive="false">
+        <el-switch v-model="showSummary" size="small" />
+      </option-item>
+      <option-item label="行点击高亮" :responsive="false">
+        <el-switch v-model="highlightCurrentRow" size="small" />
+      </option-item>
+      <option-item label="行点击勾选" :responsive="false">
+        <el-switch v-model="rowClickChecked" size="small" />
+      </option-item>
+    </div>
+    <ele-pro-table
+      :height="418"
+      :virtual="true"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :highlight-current-row="highlightCurrentRow"
+      :row-click-checked="rowClickChecked"
+      v-model:selections="selections"
+      v-model:current="current"
+      :pagination="{
+        pageSize: 2000,
+        pageSizes: [1000, 2000, 5000, 10000]
+      }"
+      :toolbar="{ theme: toolbarBg ? 'default' : 'plain' }"
+      :border="border"
+      :stripe="stripe"
+      :show-header="showHeader"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    >
+      <template #toolbar>
+        <el-button type="primary" class="ele-btn-icon" @click="getSelections">
+          获取多选行数据
+        </el-button>
+        <el-button
+          v-if="highlightCurrentRow"
+          type="primary"
+          class="ele-btn-icon"
+          @click="getCurrent"
+        >
+          获取单选行数据
+        </el-button>
+      </template>
+      <template #roles="{ row }">
+        <el-tag
+          v-for="item in row.roles"
+          :key="item"
+          size="small"
+          :disable-transitions="true"
+          style="margin-right: 6px"
+        >
+          {{ item }}
+        </el-tag>
+      </template>
+      <template #status="{ row }">
+        <ele-dot v-if="row.status == 0" text="正常" size="8px" />
+        <ele-dot
+          v-else-if="row.status == 1"
+          text="冻结"
+          type="danger"
+          :ripple="false"
+          size="8px"
+        />
+      </template>
+      <template #action="{ row }">
+        <el-link type="primary" underline="never" @click="openEdit(row)">
+          修改
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="remove(row)">
+          删除
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import dayjs from 'dayjs';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  interface User {
+    userId?: number;
+    username?: string;
+    nickname?: string;
+    sex?: string;
+    roles?: string[];
+    phone?: string;
+    email?: string;
+    birthday?: string;
+    createTime?: string;
+    status?: string;
+  }
+
+  const data: User[] = [];
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 52,
+      align: 'center',
+      fixed: 'left'
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 68,
+      fixed: 'left'
+    },
+    {
+      label: '用户账号',
+      prop: 'username',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '用户名',
+      prop: 'nickname',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '性别',
+      prop: 'sex',
+      width: 120,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      label: '角色',
+      prop: 'roles',
+      slot: 'roles',
+      minWidth: 160,
+      filters: [
+        { text: '管理员', value: '管理员' },
+        { text: '普通用户', value: '普通用户' },
+        { text: '游客', value: '游客' }
+      ],
+      filterMultiple: true,
+      align: 'center'
+    },
+    {
+      label: '手机号码',
+      prop: 'phone',
+      minWidth: 160,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      label: '邮箱',
+      prop: 'email',
+      minWidth: 180,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 120,
+      sortable: 'custom',
+      slot: 'status',
+      align: 'center',
+      filters: [
+        { text: '正常', value: '0' },
+        { text: '冻结', value: '1' }
+      ],
+      filterMultiple: false,
+      formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+    },
+    {
+      label: '出生日期',
+      prop: 'birthday',
+      width: 160,
+      align: 'center',
+      sortable: 'custom'
+    },
+    {
+      label: '创建时间',
+      prop: 'createTime',
+      width: 180,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 160,
+      align: 'center',
+      slot: 'action',
+      fixed: 'right',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, filter, orders }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (!data.length) {
+      Array.from({ length: 10000 }).forEach((_, i) => {
+        const userId = i + 1;
+        const username = 'user-' + String(userId).padStart(6, '0');
+        const random = Math.random();
+        const item: User = {
+          userId,
+          username,
+          nickname: '用户' + userId,
+          sex: random < 0.8 ? '男' : '女',
+          roles: [random < 0.3 ? '管理员' : '普通用户'],
+          phone: String(12345678900 + userId),
+          email: username + '@eleadmin.com',
+          status: random < 0.2 ? '1' : '0',
+          birthday: dayjs()
+            .subtract(3 * userId, 'h')
+            .format('YYYY-MM-DD'),
+          createTime: dayjs()
+            .subtract(45 * userId, 's')
+            .format('YYYY-MM-DD HH:mm:ss')
+        };
+        data.push(item);
+      });
+    }
+    const rolesFilter = filter.roles?.length ? filter.roles : null;
+    const statusFilter = filter.status?.length ? filter.status : null;
+    const list = data.filter((d) => {
+      if (rolesFilter != null) {
+        if (!d.roles || !d.roles.some((r) => rolesFilter.includes(r))) {
+          return false;
+        }
+      }
+      if (statusFilter != null) {
+        if (d.status == null || !statusFilter.includes(d.status)) {
+          return false;
+        }
+      }
+      return true;
+    });
+    if (orders != null && orders.sort) {
+      list.sort((a: any, b: any) => {
+        const aValue = a[orders.sort as any];
+        const bValue = b[orders.sort as any];
+        if (aValue == bValue) {
+          return 0;
+        }
+        const r = aValue < bValue ? -1 : 1;
+        return orders.order === 'desc' ? -r : r;
+      });
+    }
+    const start = ((pages.page || 1) - 1) * (pages.limit || 10);
+    const end = start + (pages.limit || 10);
+    return {
+      count: list.length,
+      list: list.slice(start, end > list.length ? list.length : end)
+    };
+  };
+
+  /** 表格多选选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 表格单选选中数据 */
+  const current = ref<User | null>(null);
+
+  /** 更多配置 */
+  const toolbarBg = ref(false);
+  const border = ref(false);
+  const stripe = ref(false);
+  const showHeader = ref(true);
+  const showSummary = ref(true);
+  const highlightCurrentRow = ref(false);
+  const rowClickChecked = ref(false);
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row: User) => {
+    EleMessage.success({ message: '编辑:' + row.nickname, plain: true });
+  };
+
+  /** 删除单个 */
+  const remove = (row: User) => {
+    EleMessage.error({ message: '删除:' + row.nickname, plain: true });
+  };
+
+  /** 表尾合计行 */
+  const getSummaries = ({ columns, data }) => {
+    const sums: string[] = [];
+    let labelFlag = false;
+    columns.forEach((column: any, i: number) => {
+      if (column.property === 'sex') {
+        const num = data.filter((d: User) => d.sex == '女').length;
+        sums[i] = ((num / data.length) * 100).toFixed(2) + '% (女)';
+        labelFlag = true;
+      } else if (column.property === 'status') {
+        sums[i] = data.filter((d: User) => d.status == '1').length + ' (冻结)';
+        labelFlag = true;
+      } else if (
+        !labelFlag &&
+        column?.type !== 'selection' &&
+        column?.type !== 'index'
+      ) {
+        sums[i] = '合计';
+        labelFlag = true;
+      }
+    });
+    return sums;
+  };
+
+  /** 获取多选行数据 */
+  const getSelections = () => {
+    console.log(JSON.parse(JSON.stringify(selections.value)));
+    EleMessage.success({
+      message: '共 ' + selections.value.length + ' 条数据已打印在控制台',
+      plain: true
+    });
+  };
+
+  /** 获取选中行数据 */
+  const getCurrent = () => {
+    if (!current.value) {
+      EleMessage.success({ message: '未选中任何数据', plain: true });
+    } else {
+      console.log(JSON.parse(JSON.stringify(current.value)));
+      EleMessage.success({
+        message: current.value.nickname + '的数据已打印在控制台',
+        plain: true
+      });
+    }
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ filter, orders }) => {
+    const res: any = await datasource({
+      filter,
+      orders,
+      pages: { page: 1, limit: data.length }
+    } as any);
+    return res.list;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .option-wrapper {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-top: 12px;
+
+    :deep(.option-item) {
+      margin: 0 20px 8px 0;
+
+      .option-item-label + .option-item-body {
+        padding-left: 4px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/table/components/virtual-expandable.vue b/z_ele/src/views/extension/table/components/virtual-expandable.vue
new file mode 100644
index 0000000..00a0129
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/virtual-expandable.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <ele-pro-table
+      :height="378"
+      :virtual="true"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :pagination="{
+        pageSize: 1000,
+        pageSizes: [1000, 2000]
+      }"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    >
+      <template #status="{ row }">
+        <ele-dot v-if="row.status == 0" text="正常" size="8px" />
+        <ele-dot
+          v-else-if="row.status == 1"
+          text="冻结"
+          type="danger"
+          :ripple="false"
+          size="8px"
+        />
+      </template>
+      <template #expand="{ row }">
+        <div style="padding: 12px 16px 12px 32px">
+          <div>
+            <span>角&emsp;&emsp;色：</span>
+            <span>
+              <el-tag
+                v-for="item in row.roles"
+                :key="item"
+                size="small"
+                :disable-transitions="true"
+                style="margin-right: 6px"
+              >
+                {{ item }}
+              </el-tag>
+            </span>
+          </div>
+          <div style="margin-top: 12px">
+            <span>出生日期：</span>
+            <span>{{ row.birthday }}</span>
+          </div>
+          <div style="margin-top: 12px">
+            <span>邮箱账户：</span>
+            <span>{{ row.email }}</span>
+          </div>
+        </div>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import dayjs from 'dayjs';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+
+  interface User {
+    userId?: number;
+    username?: string;
+    nickname?: string;
+    sex?: string;
+    roles?: string[];
+    phone?: string;
+    email?: string;
+    birthday?: string;
+    createTime?: string;
+    status?: string;
+  }
+
+  const data: User[] = [];
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'expand',
+      columnKey: 'expand',
+      width: 52,
+      align: 'center',
+      slot: 'expand',
+      fixed: 'left',
+      formatter: (row) => {
+        return [
+          `角色：${row.roles.join()}`,
+          `出生日期：${row.birthday}`,
+          `邮箱账户：${row.email}`
+        ].join('\n');
+      }
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 68,
+      fixed: 'left'
+    },
+    {
+      label: '用户账号',
+      prop: 'username',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '用户名',
+      prop: 'nickname',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '性别',
+      prop: 'sex',
+      width: 120,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      label: '手机号码',
+      prop: 'phone',
+      minWidth: 160,
+      sortable: 'custom',
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 120,
+      sortable: 'custom',
+      slot: 'status',
+      align: 'center',
+      filters: [
+        { text: '正常', value: '0' },
+        { text: '冻结', value: '1' }
+      ],
+      filterMultiple: false,
+      formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+    },
+    {
+      label: '创建时间',
+      prop: 'createTime',
+      width: 180,
+      sortable: 'custom',
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, filter, orders }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (!data.length) {
+      Array.from({ length: 2000 }).forEach((_, i) => {
+        const userId = i + 1;
+        const username = 'user-' + String(userId).padStart(6, '0');
+        const random = Math.random();
+        const item: User = {
+          userId,
+          username,
+          nickname: '用户' + userId,
+          sex: random < 0.8 ? '男' : '女',
+          roles: [random < 0.3 ? '管理员' : '普通用户'],
+          phone: String(12345678900 + userId),
+          email: username + '@eleadmin.com',
+          status: random < 0.2 ? '1' : '0',
+          birthday: dayjs()
+            .subtract(3 * userId, 'h')
+            .format('YYYY-MM-DD'),
+          createTime: dayjs()
+            .subtract(45 * userId, 's')
+            .format('YYYY-MM-DD HH:mm:ss')
+        };
+        data.push(item);
+      });
+    }
+    const statusFilter = filter.status?.length ? filter.status : null;
+    const list = data.filter((d) => {
+      if (statusFilter != null) {
+        if (d.status == null || !statusFilter.includes(d.status)) {
+          return false;
+        }
+      }
+      return true;
+    });
+    if (orders != null && orders.sort) {
+      list.sort((a: any, b: any) => {
+        const aValue = a[orders.sort as any];
+        const bValue = b[orders.sort as any];
+        if (aValue == bValue) {
+          return 0;
+        }
+        const r = aValue < bValue ? -1 : 1;
+        return orders.order === 'desc' ? -r : r;
+      });
+    }
+    const start = ((pages.page || 1) - 1) * (pages.limit || 10);
+    const end = start + (pages.limit || 10);
+    return {
+      count: list.length,
+      list: list.slice(start, end > list.length ? list.length : end)
+    };
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ filter, orders }) => {
+    const res: any = await datasource({
+      filter,
+      orders,
+      pages: { page: 1, limit: data.length }
+    } as any);
+    return res.list;
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/virtual-header.vue b/z_ele/src/views/extension/table/components/virtual-header.vue
new file mode 100644
index 0000000..51258ba
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/virtual-header.vue
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <ele-pro-table
+      :height="418"
+      :virtual="true"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      :pagination="{
+        pageSize: 1000,
+        pageSizes: [1000, 2000]
+      }"
+      :border="true"
+      :toolbar="{ theme: 'default' }"
+      :table-style="{ overflow: 'hidden' }"
+      :export-config="{ fileName: '用户数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import dayjs from 'dayjs';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  const addresses = [
+    ['浙江', '杭州', '西湖区'],
+    ['江苏', '苏州', '姑苏区'],
+    ['江西', '南昌', '青山湖区'],
+    ['福建', '泉州', '丰泽区'],
+    ['湖北', '武汉', '武昌区'],
+    ['安徽', '黄山', '黄山区']
+  ];
+
+  interface User {
+    userId?: number;
+    username?: string;
+    nickname?: string;
+    createTime?: string;
+    province?: string;
+    city?: string;
+    zone?: string;
+  }
+
+  const data: User[] = [];
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 68,
+      align: 'center',
+      fixed: 'left'
+    },
+    {
+      label: '用户账号',
+      prop: 'username',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '用户名',
+      prop: 'nickname',
+      minWidth: 160,
+      sortable: 'custom'
+    },
+    {
+      label: '家庭住址',
+      prop: 'address',
+      align: 'center',
+      children: [
+        {
+          label: '省份',
+          prop: 'province',
+          width: 120,
+          sortable: 'custom'
+        },
+        {
+          label: '城市',
+          prop: 'city',
+          width: 120,
+          sortable: 'custom'
+        },
+        {
+          label: '区域',
+          prop: 'zone',
+          width: 180,
+          sortable: 'custom'
+        }
+      ]
+    },
+    {
+      label: '创建时间',
+      prop: 'createTime',
+      width: 180,
+      sortable: 'custom',
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ pages, orders }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    if (!data.length) {
+      Array.from({ length: 2000 }).forEach((_, i) => {
+        const userId = i + 1;
+        const username = 'user-' + String(userId).padStart(6, '0');
+        const index = Math.floor(
+          Math.random() * (0 - addresses.length) + addresses.length
+        );
+        const [province, city, zone] = addresses[index];
+        const item: User = {
+          userId,
+          username,
+          nickname: '用户' + userId,
+          createTime: dayjs()
+            .subtract(45 * userId, 's')
+            .format('YYYY-MM-DD HH:mm:ss'),
+          province,
+          city,
+          zone
+        };
+        data.push(item);
+      });
+    }
+    const list = [...data];
+    if (orders != null && orders.sort) {
+      list.sort((a: any, b: any) => {
+        const aValue = a[orders.sort as any];
+        const bValue = b[orders.sort as any];
+        if (aValue == bValue) {
+          return 0;
+        }
+        const r = aValue < bValue ? -1 : 1;
+        return orders.order === 'desc' ? -r : r;
+      });
+    }
+    const start = ((pages.page || 1) - 1) * (pages.limit || 10);
+    const end = start + (pages.limit || 10);
+    return {
+      count: list.length,
+      list: list.slice(start, end > list.length ? list.length : end)
+    };
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ orders }) => {
+    const res: any = await datasource({
+      orders,
+      pages: { page: 1, limit: data.length }
+    } as any);
+    return res.list;
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/virtual-merge.vue b/z_ele/src/views/extension/table/components/virtual-merge.vue
new file mode 100644
index 0000000..6a189db
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/virtual-merge.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <ele-pro-table
+      :height="640"
+      :border="true"
+      :virtual="true"
+      row-key="userId"
+      :columns="columns"
+      :datasource="datasource"
+      :span-method="spanMethod"
+      :toolbar="{ theme: 'default' }"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '成绩数据' }"
+      :pagination="{
+        pageSize: 20,
+        pageSizes: [20, 40, 80]
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageUserScores } from '@/api/example';
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'userName',
+      label: '姓名',
+      align: 'center'
+    },
+    {
+      prop: 'courseName',
+      label: '课程',
+      align: 'center'
+    },
+    {
+      prop: 'score',
+      label: '得分',
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = () => {
+    return pageUserScores();
+  };
+
+  /** 合并表格单元格 */
+  const spanMethod = ({ row, column }) => {
+    return [
+      row[`${column.prop}RowSpan`] ?? 1,
+      row[`${column.prop}ColSpan`] ?? 1
+    ];
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/components/virtual-tree.vue b/z_ele/src/views/extension/table/components/virtual-tree.vue
new file mode 100644
index 0000000..29fc272
--- /dev/null
+++ b/z_ele/src/views/extension/table/components/virtual-tree.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <ele-pro-table
+      :height="378"
+      :virtual="true"
+      row-key="menuId"
+      :columns="columns"
+      :datasource="datasource"
+      :lazy="true"
+      :pagination="false"
+      :show-overflow-tooltip="true"
+      :export-config="{ fileName: '菜单数据', datasource: exportSource }"
+      :print-config="{ datasource: exportSource }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { toTree } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { listMenus } from '@/api/system/menu';
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'title',
+      label: '菜单名称',
+      minWidth: 160
+    },
+    {
+      prop: 'path',
+      label: '路由地址',
+      minWidth: 180
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      width: 220,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ where, parent }) => {
+    return listMenus({ ...where, parentId: parent?.menuId || 0 });
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = async ({ where }) => {
+    const data = await listMenus({ ...where });
+    return toTree({
+      data,
+      idField: 'menuId',
+      parentIdField: 'parentId'
+    });
+  };
+</script>
diff --git a/z_ele/src/views/extension/table/index.vue b/z_ele/src/views/extension/table/index.vue
new file mode 100644
index 0000000..c30a9c5
--- /dev/null
+++ b/z_ele/src/views/extension/table/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card :body-style="{ padding: 0, overflow: 'hidden' }">
+      <ele-split-panel
+        space="0px"
+        size="180px"
+        :allow-collapse="mobile"
+        v-model:collapse="collapse"
+        :custom-style="{
+          borderWidth: '0 1px 0 0',
+          padding: '10px 0',
+          background: 'none'
+        }"
+        :body-style="{ padding: '10px 20px 14px 16px', overflow: 'hidden' }"
+        :collapse-style="{ marginLeft: '4px' }"
+        style="min-height: 708px; border-radius: var(--ele-card-radius)"
+      >
+        <ele-menus :items="items" :default-active="active" class="demo-menu" />
+        <template #body>
+          <transition name="slide-right" mode="out-in">
+            <demo-base v-if="active == 'base'" />
+            <tree-table v-else-if="active == 'tree'" />
+            <default-sorter v-else-if="active == 'sorter'" />
+            <nested-table v-else-if="active == 'nested'" />
+            <expandable-table v-else-if="active == 'expandable'" />
+            <merge-cell v-else-if="active == 'merge'" />
+            <editable-table v-else-if="active == 'editable'" />
+            <sortable-table v-else-if="active == 'sortable'" />
+            <demo-selections v-else-if="active == 'selections'" />
+            <demo-contextmenu v-else-if="active == 'contextmenu'" />
+            <virtual-base v-else-if="active == 'virtual-base'" />
+            <virtual-header v-else-if="active == 'virtual-header'" />
+            <virtual-merge v-else-if="active == 'virtual-merge'" />
+            <virtual-tree v-else-if="active == 'virtual-tree'" />
+            <virtual-expandable v-else-if="active == 'virtual-expandable'" />
+          </transition>
+        </template>
+      </ele-split-panel>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import { useMobile } from '@/utils/use-mobile';
+  import DemoBase from './components/demo-base.vue';
+  import TreeTable from './components/tree-table.vue';
+  import DefaultSorter from './components/default-sorter.vue';
+  import NestedTable from './components/nested-table.vue';
+  import ExpandableTable from './components/expandable-table.vue';
+  import MergeCell from './components/merge-cell.vue';
+  import EditableTable from './components/editable-table.vue';
+  import SortableTable from './components/sortable-table.vue';
+  import DemoSelections from './components/demo-selections.vue';
+  import DemoContextmenu from './components/demo-contextmenu.vue';
+  import VirtualBase from './components/virtual-base.vue';
+  import VirtualHeader from './components/virtual-header.vue';
+  import VirtualMerge from './components/virtual-merge.vue';
+  import VirtualTree from './components/virtual-tree.vue';
+  import VirtualExpandable from './components/virtual-expandable.vue';
+
+  defineOptions({ name: 'ExtensionTable' });
+
+  const { currentRoute } = useRouter();
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+
+  /** 分割面板是否折叠 */
+  const collapse = ref(mobile.value);
+
+  /** 选中 */
+  const active = ref<string>('base');
+
+  /** 菜单 */
+  const items = ref<MenuItem[]>([
+    {
+      index: 'base',
+      path: '/extension/table?type=base',
+      title: '基础示例'
+    },
+    {
+      index: 'tree',
+      path: '/extension/table?type=tree',
+      title: '树表格懒加载'
+    },
+    {
+      index: 'sorter',
+      path: '/extension/table?type=sorter',
+      title: '默认排序筛选'
+    },
+    {
+      index: 'nested',
+      path: '/extension/table?type=nested',
+      title: '嵌套表格'
+    },
+    {
+      index: 'expandable',
+      path: '/extension/table?type=expandable',
+      title: '可展开行'
+    },
+    {
+      index: 'merge',
+      path: '/extension/table?type=merge',
+      title: '合并单元格'
+    },
+    {
+      index: 'editable',
+      path: '/extension/table?type=editable',
+      title: '编辑表格'
+    },
+    {
+      index: 'sortable',
+      path: '/extension/table?type=sortable',
+      title: '拖拽排序'
+    },
+    {
+      index: 'selections',
+      path: '/extension/table?type=selections',
+      title: '单选多选'
+    },
+    {
+      index: 'contextmenu',
+      path: '/extension/table?type=contextmenu',
+      title: '鼠标右键'
+    },
+    {
+      index: 'virtual',
+      path: '/extension/table?type=virtual',
+      title: '以下为虚拟滚动表格',
+      group: true,
+      children: [
+        {
+          index: 'virtual-base',
+          path: '/extension/table?type=virtual-base',
+          title: '基础示例'
+        },
+        {
+          index: 'virtual-header',
+          path: '/extension/table?type=virtual-header',
+          title: '多级表头'
+        },
+        {
+          index: 'virtual-merge',
+          path: '/extension/table?type=virtual-merge',
+          title: '合并单元格'
+        },
+        {
+          index: 'virtual-tree',
+          path: '/extension/table?type=virtual-tree',
+          title: '树形表格'
+        },
+        {
+          index: 'virtual-expandable',
+          path: '/extension/table?type=virtual-expandable',
+          title: '可展开行'
+        }
+      ]
+    }
+  ]);
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path, query } = unref(route);
+      if (path === '/extension/table') {
+        const defaultType = 'base';
+        if (!query.type) {
+          active.value = defaultType;
+        } else if (typeof query.type === 'string') {
+          active.value = query.type;
+        } else if (query.type.length && query.type[0]) {
+          active.value = query.type[0];
+        } else {
+          active.value = defaultType;
+        }
+        // 移动端自动收起左侧
+        if (mobile.value) {
+          collapse.value = true;
+        }
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="scss" scoped>
+  .demo-menu {
+    width: 100%;
+    background: none;
+    border: none;
+
+    :deep(> .el-menu-item-group > .el-menu-item-group__title) {
+      border-top: 1px solid var(--el-border-color-light);
+      padding-bottom: 8px;
+      padding-top: 12px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/tabs/components/demo-list.vue b/z_ele/src/views/extension/tabs/components/demo-list.vue
new file mode 100644
index 0000000..3180c32
--- /dev/null
+++ b/z_ele/src/views/extension/tabs/components/demo-list.vue
@@ -0,0 +1,42 @@
+<template>
+  <div style="padding: 10px 0">
+    <template v-for="(d, i) in data" :key="i">
+      <el-divider v-if="i > 0" border-style="dashed" style="margin: 0" />
+      <div style="padding: 8px 0; display: flex">
+        <ele-ellipsis class="demo-tab-item-title">{{ d.title }}</ele-ellipsis>
+        <ele-text type="placeholder">{{ d.date }}</ele-text>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const props = defineProps<{
+    type: number;
+  }>();
+
+  const data = ref(
+    (() => {
+      return Array.from({ length: 4 - props.type }).map((_, i) => {
+        return {
+          title: `EleAdmin新版本发布, 欢迎体验 ${props.type + 1}-${i + 1}`,
+          date: '2023-05-20'
+        };
+      });
+    })()
+  );
+</script>
+
+<style lang="scss" scoped>
+  .demo-tab-item-title {
+    flex: 1;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/tabs/index.vue b/z_ele/src/views/extension/tabs/index.vue
new file mode 100644
index 0000000..44401c6
--- /dev/null
+++ b/z_ele/src/views/extension/tabs/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <option-item label="尺寸">
+        <el-radio-group v-model="size" size="large" @change="handleChange">
+          <el-radio value="small" label="小型" />
+          <el-radio value="default" label="默认" />
+          <el-radio value="large" label="大型" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="风格" style="margin: 0">
+        <div style="max-width: 220px">
+          <el-select v-model="type" class="ele-fluid">
+            <el-option label="默认风格" value="default" />
+            <el-option label="卡片风格" value="card" />
+            <el-option label="边框卡片风格" value="border-card" />
+            <el-option label="简约风格" value="simple" />
+            <el-option label="指示器风格" value="indicator" />
+            <el-option label="按钮风格" value="button" />
+            <el-option label="标签风格" value="tag" />
+          </el-select>
+        </div>
+      </option-item>
+      <ele-tabs
+        ref="tabRef"
+        :items="items"
+        v-model="active"
+        :size="size"
+        :type="type"
+        :mousewheel="true"
+        style="margin-top: 24px"
+        :class="{ 'demo-card-button': type === 'button' }"
+      >
+        <template #user>
+          <div style="padding: 20px 0">User</div>
+        </template>
+        <template #role>
+          <div style="padding: 20px 0">Role</div>
+        </template>
+        <template #organization>
+          <div style="padding: 20px 0">Organization</div>
+        </template>
+        <template #menu>
+          <div style="padding: 20px 0">Menu</div>
+        </template>
+      </ele-tabs>
+    </ele-card>
+    <ele-card header="右键菜单和拖动排序">
+      <ele-tabs
+        :items="items"
+        v-model="active"
+        type="border-card"
+        :context-menu="true"
+        :context-menus="[
+          { title: '关闭当前', command: 'close' },
+          { title: '关闭左侧', command: 'left' },
+          { title: '关闭右侧', command: 'right' },
+          { title: '关闭其他', command: 'other' }
+        ]"
+        :sortable="true"
+      >
+        <template #user>
+          <div style="padding: 20px 0">User</div>
+        </template>
+        <template #role>
+          <div style="padding: 20px 0">Role</div>
+        </template>
+        <template #organization>
+          <div style="padding: 20px 0">Organization</div>
+        </template>
+        <template #menu>
+          <div style="padding: 20px 0">Menu</div>
+        </template>
+      </ele-tabs>
+    </ele-card>
+    <ele-card header="组合使用">
+      <ele-card
+        bordered
+        :header-style="{ padding: '0 16px' }"
+        style="max-width: 600px"
+      >
+        <template #header>
+          <ele-tabs
+            :items="[
+              { name: 'new', label: '最新' },
+              { name: 'hot', label: '热门' }
+            ]"
+            v-model="active2"
+            type="plain"
+            size="large"
+          />
+        </template>
+        <template #extra>
+          <el-link type="primary" underline="never">查看全部</el-link>
+        </template>
+        <div v-if="active2 === 'new'">New</div>
+        <div v-if="active2 === 'hot'">Hot</div>
+      </ele-card>
+    </ele-card>
+    <ele-card header="自定义风格" :body-style="{ paddingTop: '6px' }">
+      <div style="max-width: 480px; min-height: 224px">
+        <ele-tabs
+          :items="[
+            { name: 'new', label: '最新动态' },
+            { name: 'hot', label: '热门时讯' },
+            { name: 'subject', label: '专题推荐' }
+          ]"
+          v-model="active3"
+          type="simple"
+          class="demo-tabs"
+        >
+          <template #new>
+            <demo-list :type="0" />
+          </template>
+          <template #hot>
+            <demo-list :type="1" />
+          </template>
+          <template #subject>
+            <demo-list :type="2" />
+          </template>
+        </ele-tabs>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleTabs } from 'ele-admin-plus';
+  import type { TabSize, TabType } from 'ele-admin-plus/es/ele-tabs/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+  import DemoList from './components/demo-list.vue';
+
+  defineOptions({ name: 'ExtensionTabs' });
+
+  /** 组件实例 */
+  const tabRef = ref<InstanceType<typeof EleTabs> | null>(null);
+
+  /** 选中 */
+  const active = ref('user');
+
+  /** 标签页数据 */
+  const items = ref([
+    {
+      name: 'user',
+      label: '用户管理'
+    },
+    {
+      name: 'role',
+      label: '角色管理'
+    },
+    {
+      name: 'organization',
+      label: '机构管理',
+      closable: true
+    },
+    {
+      name: 'menu',
+      label: '菜单管理',
+      closable: true
+    }
+  ]);
+
+  /** 尺寸 */
+  const size = ref<TabSize>('default');
+
+  /** 风格 */
+  const type = ref<TabType>('default');
+
+  /** 选中 */
+  const active2 = ref('new');
+
+  /** 选中 */
+  const active3 = ref('new');
+
+  const handleChange = () => {
+    tabRef.value?.updateActiveBar?.();
+  };
+</script>
+
+<style lang="scss" scoped>
+  /* 按钮风格增加灰色背景 */
+  .demo-card-button :deep(.el-tabs__header) {
+    background: hsla(216deg, 8%, 50%, 0.08);
+    box-shadow: -8px 0 0 0 hsla(216deg, 8%, 50%, 0.08);
+  }
+
+  /* 自定义样式 */
+  div.demo-tabs.ele-tabs :deep(.el-tabs__header) {
+    --ele-tab-padding: 0;
+    --ele-tab-height: 46px;
+    --ele-tab-font-size: 16px;
+    --ele-tab-simple-hover-color: var(--el-color-primary);
+    --ele-tab-simple-hover-bg: none;
+    --ele-tab-simple-active-bg: none;
+    --ele-tab-simple-active-weight: normal;
+
+    .el-tabs__item {
+      & + .el-tabs__item {
+        margin-left: 40px;
+      }
+
+      &.is-active::after {
+        height: 3px;
+        width: 20px !important;
+        left: 50%;
+        transform: translateX(-50%);
+        display: block;
+      }
+
+      .ele-tab-corner-left,
+      .ele-tab-corner-right {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/tag/index.vue b/z_ele/src/views/extension/tag/index.vue
new file mode 100644
index 0000000..3473818
--- /dev/null
+++ b/z_ele/src/views/extension/tag/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <ele-page>
+    <ele-card header="基础用法">
+      <ele-edit-tag
+        v-model="tags"
+        :size="size"
+        :type="type"
+        :effect="effect"
+        :validator="validator"
+        :tooltip-props="{ effect: 'danger' }"
+        style="margin-top: 0"
+        :readonly="readonly"
+        :disabled="disabled"
+        :round="round"
+        :hit="hit"
+      />
+      <ele-text type="secondary" style="padding: 8px 0">{{
+        JSON.stringify(tags)
+      }}</ele-text>
+      <option-item label="尺寸选择">
+        <el-radio-group v-model="size">
+          <el-radio value="large" label="large" />
+          <el-radio value="default" label="default" />
+          <el-radio value="small" label="small" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="主题颜色" style="margin-top: 8px">
+        <el-radio-group v-model="type">
+          <el-radio value="primary" label="primary" />
+          <el-radio value="success" label="success" />
+          <el-radio value="info" label="info" />
+          <el-radio value="warning" label="warning" />
+          <el-radio value="danger" label="danger" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="主题风格" style="margin-top: 8px">
+        <el-radio-group v-model="effect">
+          <el-radio value="light" label="light" />
+          <el-radio value="dark" label="dark" />
+          <el-radio value="plain" label="plain" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="椭圆风格" style="margin-top: 8px">
+        <el-radio-group v-model="round">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="加深边框" style="margin-top: 8px">
+        <el-radio-group v-model="hit">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="是否禁用" style="margin-top: 8px">
+        <el-radio-group v-model="disabled">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="是否只读" style="margin-top: 8px">
+        <el-radio-group v-model="readonly">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </option-item>
+    </ele-card>
+    <ele-card header="进阶用法">
+      <div style="margin-bottom: 12px">自定义异步验证:</div>
+      <ele-edit-tag
+        v-model="tags2"
+        :size="size"
+        :type="type"
+        :effect="effect"
+        :validator="validator2"
+        :tooltip-props="{
+          effect: 'danger',
+          popperOptions: { strategy: 'fixed' }
+        }"
+        :round="round"
+        :hit="hit"
+      />
+      <div style="margin: 22px 0 12px 0">输入 `,` 自动分割为多个:</div>
+      <ele-edit-tag
+        :model-value="tags3"
+        @update:modelValue="updateModelValue3"
+        :size="size"
+        :type="type"
+        :effect="effect"
+        :round="round"
+        :hit="hit"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { TagProps } from 'element-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  defineOptions({ name: 'ExtensionTag' });
+
+  /** 选中尺寸 */
+  const size = ref<TagProps['size']>('default');
+
+  /** 选中类型 */
+  const type = ref<TagProps['type']>('info');
+
+  /** 选中主题 */
+  const effect = ref<TagProps['effect']>('light');
+
+  /** 标签输入 */
+  const tags = ref(['标签一', '标签二', '标签三']);
+
+  /** 是否圆形 */
+  const round = ref(false);
+
+  /** 是否边框 */
+  const hit = ref(false);
+
+  /** 是否只读 */
+  const readonly = ref(false);
+
+  /** 是否禁用 */
+  const disabled = ref(false);
+
+  /** 限制不能重复添加 */
+  const validator = (value: string) => {
+    return new Promise<void>((resolve, reject) => {
+      if (tags.value.includes(value)) {
+        reject(new Error(value + '已经存在'));
+        return;
+      }
+      resolve();
+    });
+  };
+
+  /** 标签输入 */
+  const tags2 = ref(['标签一', '标签二', '标签三']);
+
+  /** 自定义异步验证 */
+  const validator2 = (value: string) => {
+    return new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        if (value !== 'eleadmin') {
+          reject(new Error('只能输入eleadmin'));
+          return;
+        }
+        resolve();
+      }, 1000);
+    });
+  };
+
+  /** 标签输入 */
+  const tags3 = ref(['标签一', '标签二', '标签三']);
+
+  const updateModelValue3 = (modelValue: string[]) => {
+    tags3.value = modelValue.map((d) => d.split(',')).flat();
+  };
+</script>
diff --git a/z_ele/src/views/extension/text/index.vue b/z_ele/src/views/extension/text/index.vue
new file mode 100644
index 0000000..ecb29ac
--- /dev/null
+++ b/z_ele/src/views/extension/text/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <ele-page>
+    <ele-card header="单行文本省略">
+      <option-item label="提示风格">
+        <el-radio-group v-model="tooltip">
+          <el-radio :value="2" label="Tooltip" />
+          <el-radio :value="1" label="原生" />
+          <el-radio :value="3" label="关闭" />
+        </el-radio-group>
+      </option-item>
+      <div style="width: 520px; max-width: 100%; margin-top: 8px">
+        <ele-ellipsis :tooltip="tooltipProps">
+          文本省略组件 `ele-ellipsis` 支持单行和多行省略,
+          当鼠标移入时会提示全部内容, 且支持使用 Tooltip 组件进行提示.
+        </ele-ellipsis>
+      </div>
+    </ele-card>
+    <ele-card header="多行文本省略">
+      <option-item label="最大行数">
+        <el-radio-group v-model="maxLine">
+          <el-radio :value="2" label="2" />
+          <el-radio :value="3" label="3" />
+          <el-radio :value="4" label="4" />
+        </el-radio-group>
+      </option-item>
+      <div style="width: 520px; max-width: 100%; margin-top: 8px">
+        <ele-ellipsis :tooltip="tooltipProps" :max-line="maxLine">
+          文本省略组件 `ele-ellipsis` 支持单行和多行省略,
+          当鼠标移入时会提示全部内容, 且支持使用 Tooltip 组件进行提示,
+          并且支持设置 Tooltip 组件的其它属性, 如提示位置和主题等,
+          还可以单独设置提示的内容与展示的内容完全不一样,
+          默认会获取展示的文本内容为提示内容.
+        </ele-ellipsis>
+      </div>
+    </ele-card>
+    <ele-card header="文本组件">
+      <div style="line-height: 1.8" class="demo-text-group">
+        <ele-text :icon="UserOutlined">&nbsp;常规文本</ele-text>
+        <ele-text :icon="UserOutlined" type="secondary"
+          >&nbsp;二级文本</ele-text
+        >
+        <ele-text :icon="UserOutlined" type="placeholder"
+          >&nbsp;提示文本</ele-text
+        >
+        <ele-text :icon="UserOutlined" type="heading">&nbsp;标题文本</ele-text>
+        <ele-text :icon="UserOutlined" type="primary">&nbsp;主色文本</ele-text>
+        <ele-text :icon="UserOutlined" type="success">&nbsp;成功文本</ele-text>
+        <ele-text :icon="UserOutlined" type="warning">&nbsp;警告文本</ele-text>
+        <ele-text :icon="UserOutlined" type="danger">&nbsp;危险文本</ele-text>
+        <ele-text :icon="UserOutlined" type="info">&nbsp;信息文本 </ele-text>
+        <ele-text deleted>删除线</ele-text>
+        <ele-text underline>下划线</ele-text>
+        <ele-text deleted underline>删除线&下划线</ele-text>
+        <ele-text strong>加粗文本</ele-text>
+        <ele-text italic>斜体文本</ele-text>
+        <ele-text size="xs">超小型文本</ele-text>
+        <ele-text size="sm">小型文本</ele-text>
+        <ele-text>常规文本</ele-text>
+        <ele-text size="md">中型文本</ele-text>
+        <ele-text size="lg">大型文本</ele-text>
+        <ele-text size="xl">特大型文本</ele-text>
+        <ele-text size="xxl">超大型文本</ele-text>
+      </div>
+    </ele-card>
+    <ele-card header="文本复制">
+      <div>
+        <ele-copyable>This is a copyable text.</ele-copyable>
+      </div>
+      <div style="margin: 16px 0">
+        <ele-copyable style="width: 100%; max-width: 520px">
+          <ele-ellipsis :tooltip="tooltipProps">
+            文本省略组件 `ele-ellipsis` 支持单行和多行省略,
+            当鼠标移入时会提示全部内容, 且支持使用 Tooltip 组件进行提示.
+          </ele-ellipsis>
+        </ele-copyable>
+      </div>
+      <div style="display: flex; align-items: center; max-width: 280px">
+        <el-input
+          v-model="text"
+          placeholder="请输入"
+          style="flex: 1; margin-right: 8px"
+        />
+        <ele-copyable :text="text" :custom-style="{ margin: 0 }" />
+      </div>
+    </ele-card>
+    <ele-card header="滚动数字">
+      <ele-text size="xxl" style="padding: 0 0 16px 10px">
+        <ele-count-up ref="countUpRef" :end-val="demoNum" :options="option" />
+      </ele-text>
+      <div>
+        <el-button class="ele-btn-icon" @click="restart">重新开始</el-button>
+        <el-button class="ele-btn-icon" @click="update">更新数字</el-button>
+      </div>
+    </ele-card>
+    <ele-card header="状态文本">
+      <option-item label="默认效果">
+        <el-space size="large">
+          <ele-dot :ripple="ripple" text="运行中" :size="dotSize" />
+          <ele-dot
+            type="success"
+            :ripple="ripple"
+            text="已上线"
+            :size="dotSize"
+          />
+          <ele-dot type="danger" :ripple="ripple" text="异常" :size="dotSize" />
+          <ele-dot type="info" :ripple="ripple" text="关闭" :size="dotSize" />
+        </el-space>
+      </option-item>
+      <option-item label="显示动画">
+        <el-radio-group v-model="ripple">
+          <el-radio :value="true" label="是" />
+          <el-radio :value="false" label="否" />
+        </el-radio-group>
+      </option-item>
+      <option-item label="尺寸选择">
+        <el-radio-group v-model="dotSize">
+          <el-radio value="8px" label="8px" />
+          <el-radio value="12px" label="12px" />
+          <el-radio value="16px" label="16px" />
+        </el-radio-group>
+      </option-item>
+    </ele-card>
+    <ele-card header="状态仪表盘">
+      <div>
+        <ele-dashboard type="success" style="margin-right: 18px">
+          <div style="line-height: 1">
+            <span style="font-size: 48px">100</span>
+            <span style="font-size: 12px; margin-left: 4px">分</span>
+          </div>
+          <div style="margin-top: 4px">安全</div>
+        </ele-dashboard>
+        <ele-dashboard type="warning" style="margin-right: 18px">
+          <div style="line-height: 1">
+            <span style="font-size: 48px">70</span>
+            <span style="font-size: 12px; margin-left: 4px">分</span>
+          </div>
+          <div style="margin-top: 4px">待优化</div>
+        </ele-dashboard>
+        <ele-dashboard type="danger">
+          <div style="line-height: 1">
+            <span style="font-size: 48px">40</span>
+            <span style="font-size: 12px; margin-left: 4px">分</span>
+          </div>
+          <div style="margin-top: 4px">高风险</div>
+        </ele-dashboard>
+      </div>
+      <div style="margin: 32px 0 14px 0; max-height: 100%">
+        自定义颜色和尺寸:
+      </div>
+      <div>
+        <ele-dashboard color="#722ED1" style="margin-right: 18px">
+          <div style="font-size: 48px">100</div>
+        </ele-dashboard>
+        <ele-dashboard size="108px" space="14px">
+          <div style="font-size: 38px">100</div>
+        </ele-dashboard>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, reactive } from 'vue';
+  import type { EleCountUp } from 'ele-admin-plus';
+  import { UserOutlined } from '@/components/icons';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  defineOptions({ name: 'ExtensionText' });
+
+  /** 提示风格 */
+  const tooltip = ref(2);
+
+  /** 最大行数 */
+  const maxLine = ref(2);
+
+  /** tooltip属性 */
+  const tooltipProps = computed(() => {
+    if (tooltip.value === 3) {
+      return false;
+    }
+    return {
+      original: tooltip.value === 1,
+      popperStyle: {
+        width: '420px',
+        maxWidth: 'calc(100vw - 32px)'
+      }
+    };
+  });
+
+  /** 输入框 */
+  const text = ref('EleAdminPlus');
+
+  /** 滚动数字组件实例 */
+  const countUpRef = ref<InstanceType<typeof EleCountUp> | null>(null);
+
+  /** 滚动数字值 */
+  const demoNum = ref(6317);
+
+  /** 滚动数字配置 */
+  const option = reactive({
+    useEasing: true,
+    useGrouping: true,
+    separator: ',',
+    decimal: '.',
+    prefix: '',
+    suffix: ''
+  });
+
+  /** 更新滚动数字 */
+  const update = () => {
+    demoNum.value += 100 + Math.round(Math.random() * 300);
+  };
+
+  /** 重新开始滚动数字 */
+  const restart = () => {
+    if (countUpRef.value) {
+      countUpRef.value.reset();
+      countUpRef.value.start();
+    }
+  };
+
+  /** 状态圆点是否显示动画 */
+  const ripple = ref(true);
+
+  /** 状态圆点尺寸 */
+  const dotSize = ref('12px');
+</script>
+
+<style lang="scss" scoped>
+  .demo-text-group > div {
+    max-height: 100%;
+  }
+</style>
diff --git a/z_ele/src/views/extension/tour/index.vue b/z_ele/src/views/extension/tour/index.vue
new file mode 100644
index 0000000..d85ddc4
--- /dev/null
+++ b/z_ele/src/views/extension/tour/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <ele-page>
+    <ele-card header="基本用法">
+      <div>
+        <el-button type="primary" @click="handleStart1">开始引导</el-button>
+      </div>
+      <div style="margin-top: 20px">
+        <el-button ref="uploadRef1">Upload</el-button>
+        <el-button ref="saveRef1" type="primary">Save</el-button>
+        <el-button ref="moreRef1">More</el-button>
+      </div>
+      <ele-tour v-model="current1" :steps="steps1" />
+    </ele-card>
+    <ele-card header="不带遮罩层">
+      <div>
+        <el-button type="primary" @click="handleStart2">开始引导</el-button>
+      </div>
+      <div style="margin-top: 20px">
+        <el-button ref="uploadRef2">Upload</el-button>
+        <el-button ref="saveRef2" type="primary">Save</el-button>
+        <el-button ref="moreRef2">More</el-button>
+      </div>
+      <ele-tour v-model="current2" :steps="steps2" :mask="false" />
+    </ele-card>
+    <ele-card header="混合弹窗等多种形式">
+      <div>
+        <el-button type="primary" @click="handleStart3">开始引导</el-button>
+      </div>
+      <div style="margin-top: 20px">
+        <el-button ref="uploadRef3">Upload</el-button>
+        <el-button ref="saveRef3" type="primary">Save</el-button>
+        <el-button ref="moreRef3">More</el-button>
+      </div>
+      <ele-tour v-model="current3" :steps="steps3">
+        <template #text="{ step, current }">
+          <template v-if="current === 0">
+            <div style="margin-bottom: 10px">
+              <img
+                src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ"
+                style="height: 184px; width: 100%; object-fit: cover"
+              />
+            </div>
+            <div>{{ step.description }}</div>
+          </template>
+        </template>
+      </ele-tour>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ElButton } from 'element-plus';
+  import type { TourStep } from 'ele-admin-plus/es/ele-tour/types';
+
+  defineOptions({ name: 'ExtensionTour' });
+
+  /** 当前步骤 */
+  const current1 = ref<number>();
+
+  /** 按钮 */
+  const uploadRef1 = ref<InstanceType<typeof ElButton> | null>(null);
+  const saveRef1 = ref<InstanceType<typeof ElButton> | null>(null);
+  const moreRef1 = ref<InstanceType<typeof ElButton> | null>(null);
+
+  /** 步骤 */
+  const steps1 = ref<TourStep[]>([
+    {
+      target: () => uploadRef1.value?.$el,
+      title: '如何进行文件上传',
+      description: '点击这个按钮在弹出框中选择想要上传的文件即可.'
+    },
+    {
+      target: () => saveRef1.value?.$el,
+      title: '如何提交数据',
+      description: '数据录入完成后点击这个按钮即可提交数据到后台.'
+    },
+    {
+      target: () => moreRef1.value?.$el,
+      title: '如何进行更多的操作',
+      description: '鼠标移入到此按钮上即可展示出更多的操作功能.'
+    }
+  ]);
+
+  /** 开始引导 */
+  const handleStart1 = () => {
+    current1.value = 0;
+  };
+
+  /** 当前步骤 */
+  const current2 = ref<number>();
+
+  /** 按钮 */
+  const uploadRef2 = ref<InstanceType<typeof ElButton> | null>(null);
+  const saveRef2 = ref<InstanceType<typeof ElButton> | null>(null);
+  const moreRef2 = ref<InstanceType<typeof ElButton> | null>(null);
+
+  /** 步骤 */
+  const steps2 = ref<TourStep[]>([
+    {
+      target: () => uploadRef2.value?.$el,
+      title: '如何进行文件上传',
+      description: '点击这个按钮在弹出框中选择想要上传的文件即可.',
+      popoverProps: { placement: 'top-start' }
+    },
+    {
+      target: () => saveRef2.value?.$el,
+      title: '如何提交数据',
+      description: '数据录入完成后点击这个按钮即可提交数据到后台.',
+      popoverProps: { placement: 'bottom' }
+    },
+    {
+      target: () => moreRef2.value?.$el,
+      title: '如何进行更多的操作',
+      description: '鼠标移入到此按钮上即可展示出更多的操作功能.',
+      popoverProps: { placement: 'top-end' }
+    }
+  ]);
+
+  /** 开始引导 */
+  const handleStart2 = () => {
+    current2.value = 0;
+  };
+
+  /** 当前步骤 */
+  const current3 = ref<number>();
+
+  /** 按钮 */
+  const uploadRef3 = ref<InstanceType<typeof ElButton> | null>(null);
+  const saveRef3 = ref<InstanceType<typeof ElButton> | null>(null);
+  const moreRef3 = ref<InstanceType<typeof ElButton> | null>(null);
+
+  /** 步骤 */
+  const steps3 = ref<TourStep[]>([
+    {
+      title: '欢迎使用 EleAdminPlus 系统',
+      description:
+        '下面将为您介绍一些常用功能的操作说明, 如果之前已经为您介绍过, 您可以直接点击跳过结束指引.'
+    },
+    {
+      target: () => uploadRef3.value?.$el,
+      title: '如何进行文件上传',
+      description: '点击这个按钮在弹出框中选择想要上传的文件即可.'
+    },
+    {
+      target: () => saveRef3.value?.$el,
+      title: '如何提交数据',
+      description: '数据录入完成后点击这个按钮即可提交数据到后台.',
+      mask: false
+    },
+    {
+      target: () => moreRef3.value?.$el,
+      title: '如何进行更多的操作',
+      description: '鼠标移入到此按钮上即可展示出更多的操作功能.'
+    }
+  ]);
+
+  /** 开始引导 */
+  const handleStart3 = () => {
+    current3.value = 0;
+  };
+</script>
diff --git a/z_ele/src/views/extension/tree-select/components/demo-basic.vue b/z_ele/src/views/extension/tree-select/components/demo-basic.vue
new file mode 100644
index 0000000..d486825
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/components/demo-basic.vue
@@ -0,0 +1,101 @@
+<template>
+  <ele-card header="基础用法">
+    <div>基于 ElTreeV2 虚拟滚动树组件封装, 大量数据也毫无压力</div>
+    <div style="max-width: 240px; margin-top: 12px">
+      <ele-tree-select
+        ref="treeSelectRef"
+        clearable
+        placeholder="请选择"
+        v-model="selectedValue"
+        :popper-width="240"
+        :tree-props="treeProps"
+        :disabled="disabled"
+        :popper-options="{ strategy: 'fixed' }"
+      />
+    </div>
+    <option-item label="整体禁用" :responsive="false" style="margin-top: 16px">
+      <el-radio-group v-model="disabled">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="父级点击" :responsive="false" style="margin-top: 0">
+      <el-radio-group v-model="treeProps.expandOnClickNode">
+        <el-radio :value="true" label="展开" />
+        <el-radio :value="false" label="选中" />
+      </el-radio-group>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import type { EleTreeSelect } from 'ele-admin-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  interface DataItem {
+    id: number;
+    label: string;
+    disabled?: boolean;
+    children?: DataItem[];
+  }
+
+  /** 树选择组件 */
+  const treeSelectRef = ref<InstanceType<typeof EleTreeSelect> | null>(null);
+
+  /** 选中值 */
+  const selectedValue = ref<number>();
+
+  /** 树属性 */
+  const treeProps = reactive({
+    height: 266,
+    data: [] as DataItem[],
+    expandOnClickNode: false
+  });
+
+  /** 禁用 */
+  const disabled = ref(false);
+
+  onMounted(() => {
+    setTimeout(() => {
+      const keys: number[] = [];
+      let count = 0;
+      const data = Array.from({ length: 20 }).map((_, i) => {
+        count++;
+        keys.push(count);
+        return {
+          id: count,
+          label: `${String(count).padStart(5, '0')}-node-${i + 1}`,
+          disabled: false,
+          children: Array.from({ length: 20 }).map((_, j) => {
+            count++;
+            keys.push(count);
+            return {
+              id: count,
+              label: `${String(count).padStart(5, '0')}-node-${i + 1}-${j + 1}`,
+              disabled: false,
+              children: Array.from({ length: 30 }).map((_, k) => {
+                count++;
+                const idStr = String(count).padStart(5, '0');
+                return {
+                  id: count,
+                  label: `${idStr}-node-${i + 1}-${j + 1}-${k + 1}`,
+                  disabled: false
+                };
+              })
+            };
+          })
+        };
+      });
+      data[0].children[0].children[2].disabled = true;
+      data[0].children[2].disabled = true;
+      data[0].children[2].children.forEach((d) => {
+        d.disabled = true;
+      });
+      treeProps.data = data;
+      if (treeSelectRef.value && treeSelectRef.value.treeRef) {
+        treeSelectRef.value.treeRef.setExpandedKeys(keys);
+      }
+    }, 100);
+  });
+</script>
diff --git a/z_ele/src/views/extension/tree-select/components/demo-lazy.vue b/z_ele/src/views/extension/tree-select/components/demo-lazy.vue
new file mode 100644
index 0000000..aaf717a
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/components/demo-lazy.vue
@@ -0,0 +1,82 @@
+<template>
+  <ele-card header="更多示例">
+    <div style="margin-bottom: 8px">懒加载:</div>
+    <div style="max-width: 240px">
+      <el-tree-select
+        lazy
+        :load="loadTreeData"
+        multiple
+        clearable
+        show-checkbox
+        check-strictly
+        check-on-click-node
+        node-key="menuId"
+        :props="{ label: 'title' }"
+        v-model="selectedValue"
+        placeholder="请选择"
+        class="ele-fluid"
+        :popper-options="{ strategy: 'fixed' }"
+      />
+    </div>
+    <div style="margin: 18px 0 8px 0">多选无复选框:</div>
+    <div style="max-width: 240px">
+      <el-tree-select
+        multiple
+        clearable
+        :data="treeData"
+        node-key="menuId"
+        :props="{ label: 'title' }"
+        v-model="selectedValue2"
+        placeholder="请选择"
+        class="ele-fluid"
+        :popper-options="{ strategy: 'fixed' }"
+      />
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type Node from 'element-plus/es/components/tree/src/model/node';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import { listMenus } from '@/api/system/menu';
+  import type { Menu } from '@/api/system/menu/model';
+
+  /** 选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 懒加载 */
+  const loadTreeData = (node: Node, resolve: (data: Menu[]) => void) => {
+    listMenus({ parentId: node.level === 0 ? 0 : node.data.menuId })
+      .then((data) => {
+        data.forEach((d) => {
+          if ([339, 341, 342].includes(d.menuId as number)) {
+            (d as any).disabled = true;
+          }
+        });
+        resolve(data);
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+        resolve([]);
+      });
+  };
+
+  /** 选中值 */
+  const selectedValue2 = ref<number[]>([]);
+
+  /** 数据 */
+  const treeData = ref<Menu[]>([]);
+
+  listMenus()
+    .then((list) => {
+      treeData.value = toTree({
+        data: list,
+        idField: 'menuId',
+        parentIdField: 'parentId'
+      });
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
diff --git a/z_ele/src/views/extension/tree-select/components/demo-multiple.vue b/z_ele/src/views/extension/tree-select/components/demo-multiple.vue
new file mode 100644
index 0000000..de8a06b
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/components/demo-multiple.vue
@@ -0,0 +1,117 @@
+<template>
+  <ele-card header="多选">
+    <div style="max-width: 240px">
+      <ele-tree-select
+        ref="treeSelectRef"
+        clearable
+        multiple
+        placeholder="请选择"
+        v-model="selectedValue"
+        :popper-width="240"
+        :tree-props="treeProps"
+        :max-tag-count="1"
+        :disabled="disabled"
+        :popper-options="{ strategy: 'fixed' }"
+      />
+    </div>
+    <option-item label="整体禁用" :responsive="false" style="margin-top: 16px">
+      <el-radio-group v-model="disabled">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="父级点击" :responsive="false" style="margin-top: 0">
+      <el-radio-group v-model="treeProps.expandOnClickNode">
+        <el-radio :value="true" label="展开" />
+        <el-radio :value="false" label="勾选" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="父子联动" :responsive="false" style="margin-top: 0">
+      <el-radio-group
+        :model-value="treeProps.checkStrictly"
+        @update:modelValue="updateCheckStrictly"
+      >
+        <el-radio :value="true" label="否" />
+        <el-radio :value="false" label="是" />
+      </el-radio-group>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import type { EleTreeSelect } from 'ele-admin-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  interface DataItem {
+    id: number;
+    label: string;
+    disabled?: boolean;
+    children?: DataItem[];
+  }
+
+  /** 树选择组件 */
+  const treeSelectRef = ref<InstanceType<typeof EleTreeSelect> | null>(null);
+
+  /** 选中值 */
+  const selectedValue = ref<number[]>([]);
+
+  /** 树属性 */
+  const treeProps = reactive({
+    height: 266,
+    data: [] as DataItem[],
+    checkStrictly: false,
+    expandOnClickNode: true
+  });
+
+  /** 禁用 */
+  const disabled = ref(false);
+
+  const updateCheckStrictly = (modelValue: boolean) => {
+    selectedValue.value = [];
+    treeProps.checkStrictly = modelValue;
+  };
+
+  onMounted(() => {
+    setTimeout(() => {
+      const keys: number[] = [];
+      let count = 0;
+      const data = Array.from({ length: 20 }).map((_, i) => {
+        count++;
+        keys.push(count);
+        return {
+          id: count,
+          label: `${String(count).padStart(5, '0')}-node-${i + 1}`,
+          disabled: false,
+          children: Array.from({ length: 20 }).map((_, j) => {
+            count++;
+            keys.push(count);
+            return {
+              id: count,
+              label: `${String(count).padStart(5, '0')}-node-${i + 1}-${j + 1}`,
+              disabled: false,
+              children: Array.from({ length: 30 }).map((_, k) => {
+                count++;
+                const idStr = String(count).padStart(5, '0');
+                return {
+                  id: count,
+                  label: `${idStr}-node-${i + 1}-${j + 1}-${k + 1}`,
+                  disabled: false
+                };
+              })
+            };
+          })
+        };
+      });
+      data[0].children[0].children[2].disabled = true;
+      data[0].children[2].disabled = true;
+      data[0].children[2].children.forEach((d) => {
+        d.disabled = true;
+      });
+      treeProps.data = data;
+      if (treeSelectRef.value && treeSelectRef.value.treeRef) {
+        treeSelectRef.value.treeRef.setExpandedKeys(keys);
+      }
+    }, 100);
+  });
+</script>
diff --git a/z_ele/src/views/extension/tree-select/components/demo-search.vue b/z_ele/src/views/extension/tree-select/components/demo-search.vue
new file mode 100644
index 0000000..9f23a6c
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/components/demo-search.vue
@@ -0,0 +1,78 @@
+<template>
+  <ele-card header="可搜索">
+    <option-item label="单选">
+      <div style="max-width: 240px">
+        <ele-tree-select
+          clearable
+          filterable
+          placeholder="请选择"
+          v-model="selectedValue"
+          :popper-width="240"
+          :tree-props="treeProps"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </div>
+    </option-item>
+    <option-item label="多选" style="margin-top: 18px">
+      <div style="max-width: 240px">
+        <ele-tree-select
+          clearable
+          multiple
+          filterable
+          placeholder="请选择"
+          v-model="selectedValue2"
+          :popper-width="240"
+          :tree-props="treeProps2"
+          :popper-options="{ strategy: 'fixed' }"
+        />
+      </div>
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+  import { listMenus } from '@/api/system/menu';
+  import type { Menu } from '@/api/system/menu/model';
+
+  /** 选中值 */
+  const selectedValue = ref<number>();
+
+  /** 树属性 */
+  const treeProps = reactive({
+    height: 266,
+    data: [] as Menu[],
+    props: { value: 'menuId', label: 'title' },
+    expandOnClickNode: false
+  });
+
+  /** 选中值 */
+  const selectedValue2 = ref<number[]>([]);
+
+  /** 树属性 */
+  const treeProps2 = reactive({
+    height: 266,
+    data: [] as Menu[],
+    props: { value: 'menuId', label: 'title' },
+    expandOnClickNode: true
+  });
+
+  listMenus()
+    .then((list) => {
+      treeProps.data = toTree({
+        data: list,
+        idField: 'menuId',
+        parentIdField: 'parentId'
+      });
+      treeProps2.data = toTree({
+        data: list,
+        idField: 'menuId',
+        parentIdField: 'parentId'
+      });
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
diff --git a/z_ele/src/views/extension/tree-select/components/demo-strategy.vue b/z_ele/src/views/extension/tree-select/components/demo-strategy.vue
new file mode 100644
index 0000000..e696a3d
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/components/demo-strategy.vue
@@ -0,0 +1,123 @@
+<template>
+  <ele-card header="标签显示策略">
+    <div style="max-width: 240px">
+      <ele-tree-select
+        ref="treeSelectRef"
+        clearable
+        multiple
+        placeholder="请选择"
+        v-model="selectedValue"
+        :popper-width="240"
+        :tree-props="treeProps"
+        :showCheckedStrategy="showCheckedStrategy"
+        :checkedValueStrategy="checkedValueStrategy"
+        :popper-options="{ strategy: 'fixed' }"
+      />
+    </div>
+    <option-item
+      label="显示策略"
+      :label-style="{ paddingTop: '6px' }"
+      style="margin-top: 10px; align-items: flex-start"
+    >
+      <el-radio-group
+        v-model="showCheckedStrategy"
+        style="flex-direction: column; align-items: flex-start"
+      >
+        <el-radio
+          value="parent"
+          label="parent(当子节点全部选中时只显示父级)"
+          style="margin: 0; display: flex; width: 100%"
+        />
+        <el-radio
+          value="child"
+          label="child(只显示选中的子节点)"
+          style="margin: 0; display: flex; width: 100%"
+        />
+        <el-radio
+          value="all"
+          label="all(显示所有选中的节点)"
+          style="margin: 0; display: flex; width: 100%"
+        />
+      </el-radio-group>
+    </option-item>
+    <option-item label="值策略" :responsive="false" style="margin-top: 10px">
+      <el-radio-group v-model="checkedValueStrategy">
+        <el-radio :value="false" label="全部选中值" />
+        <el-radio :value="true" label="同标签策略" />
+      </el-radio-group>
+    </option-item>
+    <option-item label="选中值" style="margin-top: 10px">
+      {{ JSON.stringify(selectedValue) }}
+    </option-item>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import type { EleTreeSelect } from 'ele-admin-plus';
+  import type { ShowCheckedStrategy } from 'ele-admin-plus/es/ele-tree-select/types';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  interface DataItem {
+    id: number;
+    label: string;
+    disabled?: boolean;
+    children?: DataItem[];
+  }
+
+  /** 树选择组件 */
+  const treeSelectRef = ref<InstanceType<typeof EleTreeSelect> | null>(null);
+
+  /** 选中值 */
+  const selectedValue = ref<number[]>([2, 3, 4]);
+
+  /** 树属性 */
+  const treeProps = reactive({
+    height: 266,
+    data: [] as DataItem[]
+  });
+
+  /** 标签显示策略 */
+  const showCheckedStrategy = ref<ShowCheckedStrategy>('parent');
+
+  /** 值策略 */
+  const checkedValueStrategy = ref(false);
+
+  onMounted(() => {
+    setTimeout(() => {
+      const keys: number[] = [];
+      let count = 0;
+      const data = Array.from({ length: 4 }).map((_, i) => {
+        count++;
+        keys.push(count);
+        return {
+          id: count,
+          label: `${String(count).padStart(5, '0')}-node-${i + 1}`,
+          disabled: false,
+          children: Array.from({ length: 3 }).map((_, j) => {
+            count++;
+            keys.push(count);
+            return {
+              id: count,
+              label: `${String(count).padStart(5, '0')}-node-${i + 1}-${j + 1}`,
+              disabled: false,
+              children: Array.from({ length: 2 }).map((_, k) => {
+                count++;
+                const idStr = String(count).padStart(5, '0');
+                return {
+                  id: count,
+                  label: `${idStr}-node-${i + 1}-${j + 1}-${k + 1}`,
+                  disabled: false
+                };
+              })
+            };
+          })
+        };
+      });
+      treeProps.data = data;
+      if (treeSelectRef.value && treeSelectRef.value.treeRef) {
+        treeSelectRef.value.treeRef.setExpandedKeys(keys);
+      }
+    }, 100);
+  });
+</script>
diff --git a/z_ele/src/views/extension/tree-select/index.vue b/z_ele/src/views/extension/tree-select/index.vue
new file mode 100644
index 0000000..b8153ea
--- /dev/null
+++ b/z_ele/src/views/extension/tree-select/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <ele-page :multi-card="true">
+    <demo-basic />
+    <demo-multiple />
+    <demo-strategy />
+    <demo-search />
+    <demo-lazy />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoMultiple from './components/demo-multiple.vue';
+  import DemoStrategy from './components/demo-strategy.vue';
+  import DemoSearch from './components/demo-search.vue';
+  import DemoLazy from './components/demo-lazy.vue';
+
+  defineOptions({ name: 'ExtensionTreeSelect' });
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-advanced.vue b/z_ele/src/views/extension/upload/components/demo-advanced.vue
new file mode 100644
index 0000000..b0cc9af
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-advanced.vue
@@ -0,0 +1,180 @@
+<template>
+  <ele-card header="手动上传">
+    <ele-upload-list
+      :drag="true"
+      :tools="true"
+      v-model="images"
+      :readonly="loading"
+      :disabled="disabled"
+      :sortable="{ forceFallback: true }"
+      @upload="handleUpload"
+      @retry="uploadItem"
+      @remove="handleRemove"
+      @editUpload="handleEditUpload"
+    />
+    <div style="display: flex; align-items: center; margin-top: 12px">
+      <el-button type="primary" :loading="loading" @click="handleSubmit">
+        提交
+      </el-button>
+      <div style="line-height: 22px; margin-left: 22px">禁用:</div>
+      <div style="flex: 1; padding-left: 12px">
+        <el-radio-group v-model="disabled">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </div>
+    </div>
+    <div style="margin-top: 20px">
+      默认选择文件后就会调用请求后端上传的方法，也可以改为在点击提交按钮后才上传
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    UploadItem,
+    EditUploadResult
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+
+  /** 数据 */
+  const images = ref<UploadItem[]>([
+    // 回显已上传的文件数据
+    {
+      key: 1,
+      url: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
+      status: 'done'
+    },
+    {
+      key: 2,
+      url: 'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg',
+      status: 'done'
+    },
+    {
+      key: 3,
+      url: 'https://cdn.eleadmin.com/20200609/0bfaa58e801b47fb9f56dcb128206d94.jpg',
+      status: 'done'
+    }
+  ]);
+
+  /** 是否禁用 */
+  const disabled = ref(false);
+
+  /** 上传状态 */
+  const loading = ref(false);
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith('image')) {
+      EleMessage.error({ message: '只能选择图片', plain: true });
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      EleMessage.error({ message: '大小不能超过 2MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件, 只添加, 不请求后台 */
+  const handleUpload = (item: UploadItem) => {
+    if (!checkFile(item.file)) {
+      return;
+    }
+    images.value.push({ ...item });
+  };
+
+  /** 修改事件, 只修改, 不请求后台 */
+  const handleEditUpload = ({ item, newItem }: EditUploadResult) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = images.value.find((t) => t.key === item.key);
+    if (oldItem) {
+      oldItem.url = void 0; // 已上传回显的文件清空地址
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.status = void 0; // 已上传回显的文件重置上传状态
+      oldItem.progress = 0;
+    }
+  };
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    ElMessageBox.confirm('确定要删除吗?', '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        images.value.splice(images.value.indexOf(item), 1);
+      })
+      .catch(() => {});
+  };
+
+  /** 手动上传 */
+  const handleSubmit = () => {
+    if (checkDone()) {
+      submitForm();
+      return;
+    }
+    loading.value = true;
+    images.value.forEach((item) => {
+      if (item.status == null || item.status === 'exception') {
+        uploadItem(item);
+      }
+    });
+  };
+
+  /** 请求后台上传 */
+  const uploadItem = (item: UploadItem) => {
+    // 模拟上传
+    item.status = 'uploading';
+    if (item.progress == null) {
+      item.progress = 20;
+    }
+    const timer = setInterval(
+      () => {
+        if (Math.round(Math.random() * 10) < 3) {
+          item.status = 'exception';
+          EleMessage.error({
+            message: '上传失败, 服务器繁忙，请重试',
+            plain: true
+          });
+          clearInterval(timer);
+          return;
+        }
+        if (item.progress == null) {
+          item.progress = 20;
+        } else {
+          item.progress += 20;
+        }
+        if (item.progress === 100) {
+          item.status = 'done';
+          clearInterval(timer);
+          // 每个图片上传完成后都检查是否全部上传完成
+          if (checkDone()) {
+            submitForm();
+          }
+        }
+      },
+      Math.round(Math.random() * 2500) + 500
+    );
+  };
+
+  /** 检查是否全部上传完毕 */
+  const checkDone = () => {
+    return !images.value.some((d) => d.status !== 'done');
+  };
+
+  /** 全部上传完毕后与其它表单数据一起提交 */
+  const submitForm = () => {
+    EleMessage.success({ message: '已全部上传完毕', plain: true });
+    console.log(JSON.parse(JSON.stringify(images.value)));
+    loading.value = false;
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-basic.vue b/z_ele/src/views/extension/upload/components/demo-basic.vue
new file mode 100644
index 0000000..15869f7
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-basic.vue
@@ -0,0 +1,140 @@
+<template>
+  <ele-card header="基础示例">
+    <ele-upload-list
+      :limit="8"
+      :drag="true"
+      :tools="true"
+      v-model="images"
+      :readonly="readonly"
+      :sortable="{ forceFallback: true }"
+      @upload="handleUpload"
+      @retry="(item) => handleUpload(item, true)"
+      @remove="handleRemove"
+      @editUpload="handleEditUpload"
+    />
+    <div style="display: flex; align-items: center; margin-top: 12px">
+      <el-button type="primary" @click="getData">获取数据</el-button>
+      <div style="line-height: 22px; margin-left: 22px">只读:</div>
+      <div style="flex: 1; padding-left: 12px">
+        <el-radio-group v-model="readonly">
+          <el-radio :value="false" label="否" />
+          <el-radio :value="true" label="是" />
+        </el-radio-group>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    UploadItem,
+    EditUploadResult
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+
+  /** 数据 */
+  const images = ref<UploadItem[]>([
+    // 回显已上传的文件数据
+    {
+      key: 1,
+      name: 'c184eef391ae48dba87e3057e70238fb.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
+      status: 'done'
+    },
+    {
+      key: 2,
+      name: 'WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
+      status: 'done'
+    },
+    {
+      key: 3,
+      name: 'f6bc05af944a4f738b54128717952107.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
+      status: 'done'
+    }
+  ]);
+
+  /** 只读 */
+  const readonly = ref(false);
+
+  /** 获取当前数据 */
+  const getData = () => {
+    console.log(JSON.parse(JSON.stringify(images.value)));
+    EleMessage.success({ message: '数据已打印在控制台', plain: true });
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith('image')) {
+      EleMessage.error({ message: '只能选择图片', plain: true });
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      EleMessage.error({ message: '大小不能超过 2MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleUpload = (data: UploadItem, retry?: boolean) => {
+    if (!checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      images.value.push({ ...data }); // 上传时添加数据, 失败重试时不添加
+    }
+    const item = images.value.find((t) => t.key === data.key);
+    console.log(JSON.parse(JSON.stringify(item)));
+    if (!item) {
+      return;
+    }
+    // 模拟上传
+    item.status = 'uploading';
+    if (item.progress == null) {
+      item.progress = 20;
+    }
+    const timer = setInterval(() => {
+      if (Math.round(Math.random() * 10) < 3) {
+        item.status = 'exception';
+        EleMessage.error({ message: '上传失败, 服务器繁忙', plain: true });
+        clearInterval(timer);
+        return;
+      }
+      if (item.progress == null) {
+        item.progress = 20;
+      } else {
+        item.progress += 20;
+      }
+      if (item.progress === 100) {
+        item.status = 'done';
+        clearInterval(timer);
+      }
+    }, 1000);
+  };
+
+  /** 修改事件 */
+  const handleEditUpload = ({ item, newItem }: EditUploadResult) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = images.value.find((t) => t.key === item.key);
+    if (oldItem) {
+      oldItem.url = void 0;
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.progress = 0;
+      handleUpload(oldItem, true);
+    }
+  };
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    images.value.splice(images.value.indexOf(item), 1);
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-cropper.vue b/z_ele/src/views/extension/upload/components/demo-cropper.vue
new file mode 100644
index 0000000..fea16d7
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-cropper.vue
@@ -0,0 +1,139 @@
+<template>
+  <ele-card>
+    <template #header>
+      <span>选择图片后先裁剪</span>
+      <el-badge
+        value="New"
+        style="display: inline-flex; font-weight: normal; margin-left: 4px"
+      />
+    </template>
+    <div style="margin-bottom: 12px">
+      与文件选择和图片裁剪一起三者结合使用。
+    </div>
+    <ele-upload-list
+      :limit="8"
+      :tools="true"
+      v-model="images"
+      :beforeUploadClick="beforeUploadClick"
+      :beforeItemEdit="beforeItemEdit"
+      @remove="handleRemove"
+    />
+    <file-picker
+      title="图片选择"
+      :limit="1"
+      :fileLimit="2"
+      accept="image/*"
+      :params="{ contentType: 'image/' }"
+      v-model="showFilePicker"
+      @done="handleFilePickerDone"
+      @close="handleFilePickerClose"
+    />
+    <ele-cropper-modal
+      v-model="showCropperModal"
+      :src="cropperSrc"
+      :options="{
+        aspectRatio: 1,
+        autoCropArea: 1,
+        viewMode: 1,
+        dragMode: 'move'
+      }"
+      :modal-props="{ destroyOnClose: true }"
+      :beforeUploadClick="cropperBeforeUploadClick"
+      @done="handleCropperDone"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { UploadItem } from 'ele-admin-plus/es/ele-upload-list/types';
+  import type { BeforeUploadOnResult } from 'ele-admin-plus/es/ele-cropper/types';
+  import FilePicker from '@/components/FilePicker/index.vue';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  /** 已上传数据 */
+  const images = ref<UploadItem[]>([]);
+
+  /** 是否打开文件选择弹窗 */
+  const showFilePicker = ref(false);
+
+  /** 是否打开裁剪弹窗 */
+  const showCropperModal = ref(false);
+
+  /** 裁剪图片地址 */
+  const cropperSrc = ref('');
+
+  /** 裁剪弹窗上传按钮回调 */
+  let currentCropperCallback: BeforeUploadOnResult | null = null;
+
+  /** 当前修改的文件项 */
+  let currentEditItem: UploadItem | null = null;
+
+  /** 删除事件 */
+  const handleRemove = () => {
+    images.value = [];
+  };
+
+  /** 上传按钮点击打开文件选择弹窗 */
+  const beforeUploadClick = () => {
+    showFilePicker.value = true;
+    currentEditItem = null;
+    return false;
+  };
+
+  /** 修改按钮点击打开文件选择弹窗 */
+  const beforeItemEdit = (item: UploadItem) => {
+    showFilePicker.value = true;
+    currentEditItem = item;
+    return false;
+  };
+
+  /** 文件选择弹窗选择完成事件 */
+  const handleFilePickerDone = (files: UserFile[]) => {
+    showFilePicker.value = false;
+    if (files.length && files[0].url) {
+      if (currentCropperCallback != null) {
+        currentCropperCallback(files[0].url, files[0].contentType);
+        currentCropperCallback = null;
+        return;
+      }
+      cropperSrc.value = files[0].url;
+      showCropperModal.value = true;
+    }
+  };
+
+  /** 裁剪完成事件 */
+  const handleCropperDone = (data: string) => {
+    showCropperModal.value = false;
+    // 添加
+    if (currentEditItem == null) {
+      images.value.push({
+        key: String(Date.now()),
+        url: data,
+        status: 'done'
+      });
+      return;
+    }
+    // 修改
+    const oldItem = images.value.find((t) => t.key === currentEditItem?.key);
+    if (oldItem) {
+      oldItem.url = data;
+      oldItem.status = 'done';
+    }
+  };
+
+  /** 裁剪弹窗上传按钮点击打开文件选择弹窗 */
+  const cropperBeforeUploadClick = (
+    _e: MouseEvent,
+    onResult: BeforeUploadOnResult
+  ) => {
+    currentCropperCallback = onResult;
+    showFilePicker.value = true;
+    return false;
+  };
+
+  /** 文件选择弹窗关闭事件 */
+  const handleFilePickerClose = () => {
+    currentCropperCallback = null;
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-customer.vue b/z_ele/src/views/extension/upload/components/demo-customer.vue
new file mode 100644
index 0000000..c467cad
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-customer.vue
@@ -0,0 +1,185 @@
+<template>
+  <ele-card header="二次封装简化使用">
+    <div style="margin-bottom: 24px">
+      二次封装后无需再处理上传事件及转换数据格式，使用起来就像一个普通输入框一样简单
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      style="max-width: 460px"
+      @submit.prevent=""
+    >
+      <el-form-item label="投诉内容" prop="content">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.content"
+          placeholder="请输入投诉内容"
+        />
+      </el-form-item>
+      <el-form-item label="现场照片" prop="images">
+        <image-upload ref="imagesUploadRef" :limit="3" v-model="form.images" />
+      </el-form-item>
+      <el-form-item label="真实姓名" prop="realName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.realName"
+          placeholder="请输入真实姓名"
+        />
+      </el-form-item>
+      <el-form-item label="身份证正面" prop="idCardImg1">
+        <image-upload
+          :limit="1"
+          v-model="form.idCardImg1"
+          :item-style="{
+            width: '260px',
+            height: '163px',
+            background: 'var(--el-fill-color-lighter)',
+            '--ele-upload-list-padding': 0
+          }"
+          :button-style="{ width: '260px', height: '163px' }"
+        />
+      </el-form-item>
+      <el-form-item label="身份证反面" prop="idCardImg2">
+        <image-upload
+          :limit="1"
+          v-model="form.idCardImg2"
+          :item-style="{
+            width: '260px',
+            height: '163px',
+            background: 'var(--el-fill-color-lighter)',
+            '--ele-upload-list-padding': 0
+          }"
+          :button-style="{ width: '260px', height: '163px' }"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">提交</el-button>
+        <el-button type="primary" @click="setData">回显数据</el-button>
+      </el-form-item>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import ImageUpload from '@/components/ImageUpload/index.vue';
+
+  interface User {
+    id?: number;
+    realName?: string;
+    idCardImg1?: string;
+    idCardImg2?: string;
+    content?: string;
+    images?: string;
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, _resetFields, assignFields] = useFormData<User>({
+    id: void 0,
+    realName: '',
+    /** 身份证正面 */
+    idCardImg1: '',
+    /** 身份证反面 */
+    idCardImg2: '',
+    content: '',
+    /** 现场照片 */
+    images: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    realName: [
+      {
+        required: true,
+        message: '请输入真实姓名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    idCardImg1: [
+      {
+        required: true,
+        message: '请上传身份证正面',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    idCardImg2: [
+      {
+        required: true,
+        message: '请上传身份证反面',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    content: [
+      {
+        required: true,
+        message: '请输入投诉内容',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    images: [
+      {
+        required: true,
+        message: '请上传现场照片',
+        type: 'string',
+        trigger: 'change'
+      },
+      {
+        type: 'string',
+        trigger: 'change',
+        validator: (_rule: any, _value: string, callback: any) => {
+          if (!imagesUploadRef.value?.isDone?.()) {
+            return callback(new Error('现场照片还未上传完毕'));
+          }
+          callback();
+        }
+      }
+    ]
+  });
+
+  /** 现场照片上传组件 */
+  const imagesUploadRef = ref<InstanceType<typeof ImageUpload> | null>(null);
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      console.log(JSON.parse(JSON.stringify(form)));
+      EleMessage.success({ message: '数据已打印在控制台', plain: true });
+    });
+  };
+
+  /** 回显数据 */
+  const setData = async () => {
+    imagesUploadRef.value?.clearData?.();
+    await nextTick();
+    const data: User = {
+      id: 1,
+      realName: '张三',
+      idCardImg1:
+        'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
+      idCardImg2:
+        'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
+      content: '2栋楼下的路灯已经坏了几天了都没人来维修一下',
+      images:
+        '["https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg","https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg"]'
+    };
+    assignFields(data);
+    formRef.value?.clearValidate?.();
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-file.vue b/z_ele/src/views/extension/upload/components/demo-file.vue
new file mode 100644
index 0000000..4686976
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-file.vue
@@ -0,0 +1,114 @@
+<template>
+  <ele-card header="附件上传">
+    <div style="margin-bottom: 24px">
+      不仅仅能用于图片上传的场景, 还可用于文件上传的场景
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      style="max-width: 460px"
+      @submit.prevent=""
+    >
+      <el-form-item label="投诉内容" prop="content">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.content"
+          placeholder="请输入投诉内容"
+        />
+      </el-form-item>
+      <el-form-item label="附件" prop="files">
+        <file-upload ref="filesUploadRef" :limit="8" v-model="form.files" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">提交</el-button>
+        <el-button type="primary" @click="setData">回显数据</el-button>
+      </el-form-item>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import FileUpload from '@/components/FileUpload/index.vue';
+
+  interface User {
+    id?: number;
+    content?: string;
+    files?: string;
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, _resetFields, assignFields] = useFormData<User>({
+    id: void 0,
+    content: '',
+    /** 附件 */
+    files: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    content: [
+      {
+        required: true,
+        message: '请输入投诉内容',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    files: [
+      {
+        required: true,
+        message: '请上传现场附件',
+        type: 'string',
+        trigger: 'change'
+      },
+      {
+        type: 'string',
+        trigger: 'change',
+        validator: (_rule: any, _value: string, callback: any) => {
+          if (!filesUploadRef.value?.isDone?.()) {
+            return callback(new Error('现场附件还未上传完毕'));
+          }
+          callback();
+        }
+      }
+    ]
+  });
+
+  /** 现场附件上传组件 */
+  const filesUploadRef = ref<InstanceType<typeof FileUpload> | null>(null);
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      console.log(JSON.parse(JSON.stringify(form)));
+      EleMessage.success({ message: '数据已打印在控制台', plain: true });
+    });
+  };
+
+  /** 回显数据 */
+  const setData = async () => {
+    filesUploadRef.value?.clearData?.();
+    await nextTick();
+    const data: User = {
+      id: 1,
+      content: '2栋楼下的路灯已经坏了几天了都没人来维修一下',
+      files:
+        '[{"url":"https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg","name":"c184eef391ae48dba87e3057e70238fb.jpg"},{"url":"https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg","name":"WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg"},{"url":"https://cdn.eleadmin.com/20200610/20200708224450.pdf","name":"20200708224450.pdf"}]'
+    };
+    assignFields(data);
+    formRef.value?.clearValidate?.();
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-form1.vue b/z_ele/src/views/extension/upload/components/demo-form1.vue
new file mode 100644
index 0000000..c29a656
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-form1.vue
@@ -0,0 +1,208 @@
+<template>
+  <ele-card header="使用案例一">
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      style="max-width: 460px"
+      @submit.prevent=""
+    >
+      <el-form-item label="投诉内容" prop="content">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.content"
+          placeholder="请输入投诉内容"
+        />
+      </el-form-item>
+      <el-form-item label="现场照片" prop="images">
+        <ele-upload-list
+          :limit="3"
+          :drag="true"
+          :tools="true"
+          v-model="form.images"
+          :sortable="{ forceFallback: true }"
+          @upload="handleUpload"
+          @retry="(item) => handleUpload(item, true)"
+          @remove="handleRemove"
+          @editUpload="handleEditUpload"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">提交</el-button>
+        <el-button type="primary" @click="setData">回显数据</el-button>
+      </el-form-item>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { AxiosProgressEvent } from 'axios';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    UploadItem,
+    EditUploadResult
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+  import { useFormData } from '@/utils/use-form-data';
+  import { uploadFile } from '@/api/system/file';
+
+  interface Complaint {
+    id?: number;
+    content?: string;
+    images?: string[];
+  }
+
+  interface ComplaintForm extends Omit<Complaint, 'images'> {
+    images: UploadItem[];
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, _resetFields, assignFields] = useFormData<ComplaintForm>({
+    id: void 0,
+    content: '',
+    /** 现场照片 */
+    images: []
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    content: [
+      {
+        required: true,
+        message: '请输入投诉内容',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    images: [
+      {
+        required: true,
+        message: '请上传现场照片',
+        type: 'array',
+        trigger: 'change'
+      },
+      {
+        type: 'array',
+        trigger: 'change',
+        validator: (_rule, value, callback) => {
+          if (value && value.some((d: UploadItem) => d.status !== 'done')) {
+            return callback(new Error('现场照片还未上传完毕'));
+          }
+          callback();
+        }
+      }
+    ]
+  });
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      const data: Complaint = {
+        ...form,
+        // 上传组件的数据格式转为字符串
+        images: form.images.map((d) => d.url as string)
+      };
+      console.log(JSON.parse(JSON.stringify(data))); // 实际项目用data提交到后台而不是form
+      EleMessage.success({ message: '数据已打印在控制台', plain: true });
+    });
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith('image')) {
+      EleMessage.error({ message: '只能选择图片', plain: true });
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      EleMessage.error({ message: '大小不能超过 2MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleUpload = (data: UploadItem, retry?: boolean) => {
+    if (!data.file || !checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      form.images.push({ ...data });
+    }
+    const item = form.images.find((t) => t.key === data.key);
+    if (!item) {
+      return;
+    }
+    item.status = 'uploading';
+    uploadFile(data.file, {
+      onUploadProgress: (e: AxiosProgressEvent) => {
+        if (e.total != null) {
+          item.progress = (e.loaded / e.total) * 100;
+        }
+      }
+    })
+      .then((res) => {
+        item.status = 'done';
+        item.url = res.url;
+        // 上传后清空验证
+        formRef.value?.clearValidate?.(['images']);
+      })
+      .catch((e) => {
+        item.status = 'exception';
+        EleMessage.error({ message: e.message, plain: true });
+        formRef.value?.validateField?.(['images']).catch(() => {});
+      });
+  };
+
+  /** 修改事件 */
+  const handleEditUpload = ({ item, newItem }: EditUploadResult) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = form.images.find((t) => t.key === item.key);
+    if (oldItem) {
+      oldItem.url = void 0;
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.progress = 0;
+      handleUpload(oldItem, true);
+    }
+  };
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    form.images.splice(form.images.indexOf(item), 1);
+    formRef.value?.validateField?.(['images']).catch(() => {});
+  };
+
+  /** 回显数据 */
+  const setData = () => {
+    const data: Complaint = {
+      id: 1,
+      content: '2栋楼下的路灯已经坏了几天了都没人来维修一下',
+      images: [
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
+        'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg'
+      ]
+    };
+    // 图片url转为上传组件需要的格式
+    const images = data.images
+      ? data.images.map((d, i) => {
+          return { key: i, url: d, status: 'done' };
+        })
+      : [];
+    assignFields({ ...data, images });
+    formRef.value?.clearValidate?.();
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-form2.vue b/z_ele/src/views/extension/upload/components/demo-form2.vue
new file mode 100644
index 0000000..6305736
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-form2.vue
@@ -0,0 +1,299 @@
+<template>
+  <ele-card header="使用案例二">
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      style="max-width: 380px"
+      @submit.prevent=""
+    >
+      <el-form-item label="真实姓名" prop="realName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.realName"
+          placeholder="请输入真实姓名"
+        />
+      </el-form-item>
+      <el-form-item label="身份证号" prop="idCard">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.idCard"
+          placeholder="请输入身份证号"
+        />
+      </el-form-item>
+      <el-form-item label="身份证正面" prop="idCardImg1">
+        <ele-upload-list
+          :limit="1"
+          :drag="true"
+          :tools="true"
+          :sortable="false"
+          v-model="form.idCardImg1"
+          :item-style="{
+            width: '260px',
+            height: '163px',
+            background: 'var(--el-fill-color-lighter)',
+            '--ele-upload-list-padding': 0
+          }"
+          :button-style="{ width: '260px', height: '163px' }"
+          @upload="(item) => handleUpload(0, item)"
+          @retry="(item) => handleUpload(0, item, true)"
+          @remove="(item) => handleRemove(0, item)"
+          @editUpload="(data) => handleEditUpload(0, data)"
+        />
+      </el-form-item>
+      <el-form-item label="身份证反面" prop="idCardImg2">
+        <ele-upload-list
+          :limit="1"
+          :drag="true"
+          :tools="true"
+          :sortable="false"
+          v-model="form.idCardImg2"
+          :item-style="{
+            width: '260px',
+            height: '163px',
+            background: 'var(--el-fill-color-lighter)',
+            '--ele-upload-list-padding': 0
+          }"
+          :button-style="{ width: '260px', height: '163px' }"
+          @upload="(item) => handleUpload(1, item)"
+          @retry="(item) => handleUpload(1, item, true)"
+          @remove="(item) => handleRemove(1, item)"
+          @editUpload="(data) => handleEditUpload(1, data)"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">提交</el-button>
+        <el-button type="primary" @click="setData">回显数据</el-button>
+      </el-form-item>
+    </el-form>
+    <div style="padding-top: 8px">
+      可以很方便的修改宽高等样式，单选的时候使用也非常的方便
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { AxiosProgressEvent } from 'axios';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    UploadItem,
+    EditUploadResult
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+  import { useFormData } from '@/utils/use-form-data';
+  import { uploadFile } from '@/api/system/file';
+
+  interface User {
+    id?: number;
+    realName?: string;
+    idCard?: string;
+    idCardImg1?: string;
+    idCardImg2?: string;
+  }
+
+  interface UserForm extends Omit<User, 'idCardImg1' | 'idCardImg2'> {
+    idCardImg1: UploadItem[];
+    idCardImg2: UploadItem[];
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, _resetFields, assignFields] = useFormData<UserForm>({
+    id: void 0,
+    realName: '',
+    idCard: '',
+    /** 身份证正面 */
+    idCardImg1: [],
+    /** 身份证反面 */
+    idCardImg2: []
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    realName: [
+      {
+        required: true,
+        message: '请输入真实姓名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    idCard: [
+      {
+        required: true,
+        message: '请输入身份证号',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    idCardImg1: [
+      {
+        required: true,
+        message: '请上传身份证正面',
+        type: 'array',
+        trigger: 'change'
+      },
+      {
+        type: 'array',
+        trigger: 'change',
+        validator: (_rule, value, callback) => {
+          if (value && value.some((d: UploadItem) => d.status !== 'done')) {
+            return callback(new Error('身份证正面还未上传完毕'));
+          }
+          callback();
+        }
+      }
+    ],
+    idCardImg2: [
+      {
+        required: true,
+        message: '请上传身份证反面',
+        type: 'array',
+        trigger: 'change'
+      },
+      {
+        type: 'array',
+        trigger: 'change',
+        validator: (_rule, value, callback) => {
+          if (value && value.some((d: UploadItem) => d.status !== 'done')) {
+            return callback(new Error('身份证反面还未上传完毕'));
+          }
+          callback();
+        }
+      }
+    ]
+  });
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      const data: User = {
+        ...form,
+        // 上传组件的数据格式转为字符串
+        idCardImg1: form.idCardImg1.map((d) => d.url).join(),
+        idCardImg2: form.idCardImg2.map((d) => d.url).join()
+      };
+      console.log(JSON.parse(JSON.stringify(data))); // 实际项目用data提交到后台而不是form
+      EleMessage.success({ message: '数据已打印在控制台', plain: true });
+    });
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith('image')) {
+      EleMessage.error({ message: '只能选择图片', plain: true });
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      EleMessage.error({ message: '大小不能超过 2MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleUpload = (type: number, data: UploadItem, retry?: boolean) => {
+    if (!data.file || !checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      (type === 1 ? form.idCardImg2 : form.idCardImg1).push({ ...data }); // 上传时添加数据, 失败重试时不添加
+    }
+    const item = (type === 1 ? form.idCardImg2 : form.idCardImg1).find(
+      (t) => t.key === data.key
+    );
+    if (!item) {
+      return;
+    }
+    item.status = 'uploading';
+    uploadFile(data.file, {
+      onUploadProgress: (e: AxiosProgressEvent) => {
+        if (e.total != null) {
+          item.progress = (e.loaded / e.total) * 100;
+        }
+      }
+    })
+      .then((res) => {
+        item.status = 'done';
+        item.url = res.url;
+        // 上传后清空验证
+        formRef.value?.clearValidate?.([
+          type === 1 ? 'idCardImg2' : 'idCardImg1'
+        ]);
+      })
+      .catch((e) => {
+        item.status = 'exception';
+        EleMessage.error({ message: e.message, plain: true });
+        formRef.value
+          ?.validateField?.([type === 1 ? 'idCardImg2' : 'idCardImg1'])
+          .catch(() => {});
+      });
+  };
+
+  /** 修改事件 */
+  const handleEditUpload = (
+    type: number,
+    { item, newItem }: EditUploadResult
+  ) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = (type === 1 ? form.idCardImg2 : form.idCardImg1).find(
+      (t) => t.key === item.key
+    );
+    if (oldItem) {
+      oldItem.url = void 0;
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.progress = 0;
+      handleUpload(type, oldItem, true);
+    }
+  };
+
+  /** 删除事件 */
+  const handleRemove = (type: number, item: UploadItem) => {
+    const temp = type === 1 ? form.idCardImg2 : form.idCardImg1;
+    temp.splice(temp.indexOf(item), 1);
+    formRef.value
+      ?.validateField?.([type === 1 ? 'idCardImg2' : 'idCardImg1'])
+      .catch(() => {});
+  };
+
+  /** 回显数据 */
+  const setData = () => {
+    const data: User = {
+      id: 1,
+      realName: '张三',
+      idCard: '420111200001013807',
+      idCardImg1:
+        'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
+      idCardImg2:
+        'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg'
+    };
+    // 图片url转为上传组件需要的格式
+    const idCardImg1 = data.idCardImg1
+      ? [{ key: 1, url: data.idCardImg1, status: 'done' }]
+      : [];
+    const idCardImg2 = data.idCardImg2
+      ? [{ key: 1, url: data.idCardImg2, status: 'done' }]
+      : [];
+    assignFields({
+      ...data,
+      idCardImg1,
+      idCardImg2
+    });
+    formRef.value?.clearValidate?.();
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-multiple.vue b/z_ele/src/views/extension/upload/components/demo-multiple.vue
new file mode 100644
index 0000000..d26327f
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-multiple.vue
@@ -0,0 +1,146 @@
+<template>
+  <ele-card header="支持多选">
+    <div style="margin-bottom: 12px">
+      点击上传按钮后可以一次选多个文件添加。
+    </div>
+    <ele-upload-list
+      :limit="8"
+      :drag="true"
+      :tools="true"
+      :multiple="true"
+      v-model="images"
+      :listType="listType"
+      :sortable="{ forceFallback: true }"
+      :style="{ maxWidth: listType === 'file' ? '460px' : void 0 }"
+      @upload="handleUpload"
+      @retry="(item) => handleUpload(item, true)"
+      @remove="handleRemove"
+      @editUpload="handleEditUpload"
+    />
+    <div style="display: flex; align-items: center; margin-top: 12px">
+      <el-button type="primary" @click="getData" class="ele-btn-icon">
+        获取数据
+      </el-button>
+      <div style="line-height: 22px; margin-left: 18px">显示模式:</div>
+      <div style="flex: 1; padding-left: 8px">
+        <el-radio-group v-model="listType">
+          <el-radio value="image" label="相册" />
+          <el-radio value="file" label="列表" />
+        </el-radio-group>
+      </div>
+    </div>
+    <div style="margin-top: 12px">
+      用于文件上传的场景可以将显示模式改为列表模式更友好。
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type {
+    UploadItem,
+    EditUploadResult
+  } from 'ele-admin-plus/es/ele-upload-list/types';
+
+  /** 已上传数据 */
+  const images = ref<UploadItem[]>([
+    // 回显已上传的文件数据
+    {
+      key: 1,
+      name: 'c184eef391ae48dba87e3057e70238fb.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/e36594e7423147748b2592ccb720ae9e.jpg',
+      status: 'done'
+    },
+    {
+      key: 2,
+      name: 'WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/be7dc0c24fc342fda44e12a2c2a2b7bb.jpg',
+      status: 'done'
+    },
+    {
+      key: 3,
+      name: 'f6bc05af944a4f738b54128717952107.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/66e6f6c60cfa44b288d6343027b544d0.jpg',
+      status: 'done'
+    }
+  ]);
+
+  /** 显示模式 */
+  const listType = ref<'image' | 'file'>('image');
+
+  /** 获取当前数据 */
+  const getData = () => {
+    console.log(JSON.parse(JSON.stringify(images.value)));
+    EleMessage.success({ message: '数据已打印在控制台', plain: true });
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      EleMessage.error({ message: '大小不能超过 20MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleUpload = (data: UploadItem, retry?: boolean) => {
+    if (!checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      images.value.push({ ...data }); // 上传时添加数据, 失败重试时不添加
+    }
+    const item = images.value.find((t) => t.key === data.key);
+    console.log(JSON.parse(JSON.stringify(item)));
+    if (!item) {
+      return;
+    }
+    // 模拟上传
+    item.status = 'uploading';
+    if (item.progress == null) {
+      item.progress = 20;
+    }
+    const timer = setInterval(() => {
+      if (Math.round(Math.random() * 10) < 3) {
+        item.status = 'exception';
+        EleMessage.error({ message: '上传失败, 服务器繁忙', plain: true });
+        clearInterval(timer);
+        return;
+      }
+      if (item.progress == null) {
+        item.progress = 20;
+      } else {
+        item.progress += 20;
+      }
+      if (item.progress === 100) {
+        item.status = 'done';
+        clearInterval(timer);
+      }
+    }, 1000);
+  };
+
+  /** 修改事件 */
+  const handleEditUpload = ({ item, newItem }: EditUploadResult) => {
+    if (!checkFile(newItem.file)) {
+      return;
+    }
+    const oldItem = images.value.find((t) => t.key === item.key);
+    if (oldItem) {
+      oldItem.url = void 0;
+      oldItem.name = newItem.name;
+      oldItem.file = newItem.file;
+      oldItem.progress = 0;
+      handleUpload(oldItem, true);
+    }
+  };
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    images.value.splice(images.value.indexOf(item), 1);
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-picker.vue b/z_ele/src/views/extension/upload/components/demo-picker.vue
new file mode 100644
index 0000000..56264bc
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-picker.vue
@@ -0,0 +1,189 @@
+<template>
+  <ele-card>
+    <template #header>
+      <span>调用文件选择器</span>
+      <el-badge
+        value="New"
+        style="display: inline-flex; font-weight: normal; margin-left: 4px"
+      />
+    </template>
+    <div style="margin-bottom: 12px">
+      可自定义上传按钮和修改按钮的逻辑，例如弹出文件选择弹窗进行选择。
+    </div>
+    <ele-upload-list
+      :drag="true"
+      :tools="true"
+      :limit="limit"
+      :multiple="true"
+      v-model="images"
+      :sortable="{ forceFallback: true }"
+      :beforeUploadClick="beforeUploadClick"
+      :beforeItemEdit="beforeItemEdit"
+      @upload="handleUpload"
+      @retry="(item) => handleUpload(item, true)"
+      @remove="handleRemove"
+    />
+    <div style="display: flex; align-items: center; margin-top: 12px">
+      <el-button type="primary" @click="getData" class="ele-btn-icon">
+        获取数据
+      </el-button>
+    </div>
+    <file-picker
+      title="图片选择"
+      :fileLimit="2"
+      accept="image/*"
+      :params="{ contentType: 'image/' }"
+      v-model="showFilePicker"
+      :limit="filePickerLimit"
+      @done="handleFilePickerDone"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { UploadItem } from 'ele-admin-plus/es/ele-upload-list/types';
+  import FilePicker from '@/components/FilePicker/index.vue';
+  import type { UserFile } from '@/api/system/user-file/model';
+
+  /** 已上传数据 */
+  const images = ref<UploadItem[]>([
+    // 回显已上传的文件数据
+    {
+      key: '001',
+      name: 'c184eef391ae48dba87e3057e70238fb.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/8931360b593040238d894a542c9037bc.jpg',
+      status: 'done'
+    },
+    {
+      key: '002',
+      name: 'WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/4e60a84551fa48439bf42ecdb9673331.jpg',
+      status: 'done'
+    },
+    {
+      key: '003',
+      name: 'f6bc05af944a4f738b54128717952107.jpg',
+      url: 'https://cdn.eleadmin.com/20200609/d6442cfa99b64b51aabfc470055b05dc.jpg',
+      status: 'done'
+    }
+  ]);
+
+  /** 最大文件数量 */
+  const limit = ref(8);
+
+  /** 是否打开文件选择弹窗 */
+  const showFilePicker = ref(false);
+
+  /** 文件选择弹窗的最大选择数量 */
+  const filePickerLimit = ref(1);
+
+  /** 当前修改的文件项 */
+  let currentEditItem: UploadItem | null = null;
+
+  /** 获取当前数据 */
+  const getData = () => {
+    console.log(JSON.parse(JSON.stringify(images.value)));
+    EleMessage.success({ message: '数据已打印在控制台', plain: true });
+  };
+
+  /** 校验选择的文件 */
+  const checkFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith('image')) {
+      EleMessage.error({ message: '只能选择图片', plain: true });
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      EleMessage.error({ message: '大小不能超过 2MB', plain: true });
+      return;
+    }
+    return true;
+  };
+
+  /** 上传事件 */
+  const handleUpload = (data: UploadItem, retry?: boolean) => {
+    if (!checkFile(data.file)) {
+      return;
+    }
+    if (!retry) {
+      images.value.push({ ...data }); // 上传时添加数据, 失败重试时不添加
+    }
+    const item = images.value.find((t) => t.key === data.key);
+    console.log(JSON.parse(JSON.stringify(item)));
+    if (!item) {
+      return;
+    }
+    // 模拟上传
+    item.status = 'uploading';
+    if (item.progress == null) {
+      item.progress = 20;
+    }
+    const timer = setInterval(() => {
+      if (Math.round(Math.random() * 10) < 3) {
+        item.status = 'exception';
+        EleMessage.error({ message: '上传失败, 服务器繁忙', plain: true });
+        clearInterval(timer);
+        return;
+      }
+      if (item.progress == null) {
+        item.progress = 20;
+      } else {
+        item.progress += 20;
+      }
+      if (item.progress === 100) {
+        item.status = 'done';
+        clearInterval(timer);
+      }
+    }, 1000);
+  };
+
+  /** 删除事件 */
+  const handleRemove = (item: UploadItem) => {
+    images.value.splice(images.value.indexOf(item), 1);
+  };
+
+  /** 上传按钮点击打开文件选择弹窗 */
+  const beforeUploadClick = () => {
+    filePickerLimit.value = limit.value - images.value.length;
+    showFilePicker.value = true;
+    currentEditItem = null;
+    return false;
+  };
+
+  /** 修改按钮点击打开文件选择弹窗 */
+  const beforeItemEdit = (item: UploadItem) => {
+    filePickerLimit.value = 1;
+    showFilePicker.value = true;
+    currentEditItem = item;
+    return false;
+  };
+
+  /** 文件选择弹窗选择完成事件 */
+  const handleFilePickerDone = (files: UserFile[]) => {
+    showFilePicker.value = false;
+    // 添加
+    if (currentEditItem == null) {
+      files.forEach((fileItem) => {
+        images.value.push({
+          key: String(Date.now()) + fileItem.id,
+          name: fileItem.name,
+          url: fileItem.url,
+          status: 'done'
+        });
+      });
+      return;
+    }
+    // 修改
+    const oldItem = images.value.find((t) => t.key === currentEditItem?.key);
+    if (oldItem && files.length) {
+      const fileItem = files[0];
+      oldItem.name = fileItem.name;
+      oldItem.url = fileItem.url;
+      oldItem.status = 'done';
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/upload/components/demo-viewer.vue b/z_ele/src/views/extension/upload/components/demo-viewer.vue
new file mode 100644
index 0000000..71acd88
--- /dev/null
+++ b/z_ele/src/views/extension/upload/components/demo-viewer.vue
@@ -0,0 +1,112 @@
+<template>
+  <ele-card header="图片预览">
+    <option-item label="可左右循环预览" :responsive="false">
+      <el-radio-group v-model="infinite">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </option-item>
+    <option-item
+      label="可点击遮罩关闭"
+      :responsive="false"
+      style="margin-top: 0"
+    >
+      <el-radio-group v-model="hideOnClickModal">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </option-item>
+    <option-item
+      label="可按返回键关闭"
+      :responsive="false"
+      style="margin-top: 0"
+    >
+      <el-radio-group v-model="closeOnPressEscape">
+        <el-radio :value="false" label="否" />
+        <el-radio :value="true" label="是" />
+      </el-radio-group>
+    </option-item>
+    <option-item
+      label="初始打开的图片"
+      :responsive="false"
+      :label-style="{ textAlign: 'left', marginBottom: '8px' }"
+      :body-style="{ padding: 0 }"
+      style="margin-top: 4px; display: block"
+    >
+      <ele-check-card
+        v-model="initialIndex"
+        :items="checkCardItems"
+        :row="{ gutter: 8 }"
+        :item-style="{ display: 'flex', padding: '6px', marginBottom: '8px' }"
+        style="max-width: 652px"
+      >
+        <template #item="{ item }">
+          <img
+            :src="item?.url"
+            :style="{
+              objectFit: 'contain',
+              width: '100%',
+              height: '38px',
+              pointerEvents: 'none'
+            }"
+          />
+        </template>
+      </ele-check-card>
+    </option-item>
+    <div style="margin-top: 6px">
+      <el-button type="primary" @click="openImageViewer">
+        打开图片预览
+      </el-button>
+    </div>
+    <EleImageViewer
+      v-model="showImageViewer"
+      :urlList="urlList"
+      :infinite="infinite"
+      :hideOnClickModal="hideOnClickModal"
+      :closeOnPressEscape="closeOnPressEscape"
+      :initialIndex="initialIndex"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import OptionItem from '@/views/extension/avatar/components/option-item.vue';
+
+  /** 是否打开图片预览组件 */
+  const showImageViewer = ref(false);
+
+  /** 图片列表 */
+  const urlList = ref([
+    'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
+    'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+    'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
+    'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
+    'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
+    'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
+    'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
+    'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg'
+  ]);
+
+  /** 打开图片预览组件 */
+  const openImageViewer = () => {
+    showImageViewer.value = true;
+  };
+
+  /** 循环预览 */
+  const infinite = ref(false);
+
+  /** 点击遮罩关闭 */
+  const hideOnClickModal = ref(false);
+
+  /** 返回键关闭 */
+  const closeOnPressEscape = ref(true);
+
+  /** 初始图片索引 */
+  const initialIndex = ref(0);
+
+  /** 可选卡片数据 */
+  const checkCardItems = ref(
+    urlList.value.map((url, value) => ({ value, url, col: { sm: 3, xs: 6 } }))
+  );
+</script>
diff --git a/z_ele/src/views/extension/upload/index.vue b/z_ele/src/views/extension/upload/index.vue
new file mode 100644
index 0000000..d8b9511
--- /dev/null
+++ b/z_ele/src/views/extension/upload/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <ele-page>
+    <demo-basic />
+    <demo-advanced />
+    <demo-multiple />
+    <demo-picker />
+    <demo-cropper />
+    <demo-form1 />
+    <demo-form2 />
+    <demo-customer />
+    <demo-file />
+    <demo-viewer />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoAdvanced from './components/demo-advanced.vue';
+  import DemoMultiple from './components/demo-multiple.vue';
+  import DemoPicker from './components/demo-picker.vue';
+  import DemoForm1 from './components/demo-form1.vue';
+  import DemoForm2 from './components/demo-form2.vue';
+  import DemoCustomer from './components/demo-customer.vue';
+  import DemoFile from './components/demo-file.vue';
+  import DemoViewer from './components/demo-viewer.vue';
+  import DemoCropper from './components/demo-cropper.vue';
+
+  defineOptions({ name: 'ExtensionUpload' });
+</script>
diff --git a/z_ele/src/views/extension/viewer/components/demo-advanced.vue b/z_ele/src/views/extension/viewer/components/demo-advanced.vue
new file mode 100644
index 0000000..5c8e660
--- /dev/null
+++ b/z_ele/src/views/extension/viewer/components/demo-advanced.vue
@@ -0,0 +1,48 @@
+<template>
+  <ele-card header="可自定义任意内容">
+    <ele-viewer ref="viewerRef" style="height: 560px; max-width: 900px">
+      <demo-top-layout
+        :style="{
+          width: '800px',
+          background: 'var(--ele-layout-bg)',
+          pointerEvents: 'auto'
+        }"
+      />
+    </ele-viewer>
+    <div style="margin-top: 12px">
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomIn')">
+        放大
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomOut')">
+        缩小
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateLeft')">
+        向左旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateRight')">
+        向右旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('autoIntoView')">
+        自适应缩放
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('reset')">
+        重置
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import DemoTopLayout from '../../layout/components/demo-top-layout.vue';
+
+  /** 查看器组件 */
+  const viewerRef = ref<any>(null);
+
+  /** 调用查看器组件方法 */
+  const handleCallViewer = (methodName: string) => {
+    if (viewerRef.value) {
+      viewerRef.value[methodName]();
+    }
+  };
+</script>
diff --git a/z_ele/src/views/extension/viewer/components/demo-basic.vue b/z_ele/src/views/extension/viewer/components/demo-basic.vue
new file mode 100644
index 0000000..c0ee3fe
--- /dev/null
+++ b/z_ele/src/views/extension/viewer/components/demo-basic.vue
@@ -0,0 +1,138 @@
+<template>
+  <ele-card header="基础用法">
+    <ele-viewer
+      ref="viewerRef"
+      src="https://cdn.eleadmin.com/20200610/pECHMJU.webp"
+      :markers="markers"
+      :rotate-step="45"
+      :zoom-min="10"
+      :image-style="{ filter: 'grayscale(60%) contrast(120%) saturate(200%)' }"
+      style="height: 560px; max-width: 900px"
+    >
+      <template #markerItem="{ item }">
+        <div v-if="item.key === 3" class="marker-watermark">
+          <div>{{ item.text }}</div>
+        </div>
+        <div v-else class="marker-item">
+          <div>{{ item.text }}</div>
+        </div>
+      </template>
+    </ele-viewer>
+    <div style="margin-top: 12px">
+      可缩放、拖动、旋转等，可添加跟随缩放旋转和不跟随缩放旋转的标记点
+    </div>
+    <div style="margin-top: 12px">
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomIn')">
+        放大
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomOut')">
+        缩小
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateLeft')">
+        向左旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateRight')">
+        向右旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('autoIntoView')">
+        自适应缩放
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('reset')">
+        重置
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  /** 标记点 */
+  const markers = ref([
+    { key: 1, x: 455, y: 328, fixed: true, text: '找同款吊灯' },
+    { key: 2, x: 142, y: 808, fixed: true, text: '找同款挂画' },
+    { key: 3, x: 908, y: 1360, text: '我会跟随缩放' }
+  ]);
+
+  /** 查看器组件 */
+  const viewerRef = ref<any>(null);
+
+  /** 调用查看器组件方法 */
+  const handleCallViewer = (methodName: string) => {
+    if (viewerRef.value) {
+      viewerRef.value[methodName]();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .marker-item {
+    width: 0;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    &::before {
+      content: '';
+      flex-shrink: 0;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #ffffff;
+      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
+    }
+
+    & > div {
+      height: 24px;
+      line-height: 24px;
+      border-radius: 12px;
+      padding: 0 8px;
+      color: #ffffff;
+      font-size: 12px;
+      transition: background-color 0.2s;
+      background: rgba(0, 0, 0, 0.5);
+      position: absolute;
+      left: 12px;
+      top: -12px;
+      white-space: nowrap;
+      pointer-events: auto;
+      cursor: pointer;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+
+  .marker-watermark {
+    width: 0;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    & > div {
+      flex-shrink: 0;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 10px;
+      padding: 0 20px;
+      color: #ffffff;
+      font-size: 32px;
+      background: #ff2442;
+      white-space: nowrap;
+      transition: background-color 0.2s;
+      pointer-events: auto;
+      cursor: pointer;
+
+      &:hover {
+        background: #980015;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/viewer/components/demo-map.vue b/z_ele/src/views/extension/viewer/components/demo-map.vue
new file mode 100644
index 0000000..c96cac5
--- /dev/null
+++ b/z_ele/src/views/extension/viewer/components/demo-map.vue
@@ -0,0 +1,94 @@
+<template>
+  <ele-card header="用于景区地图">
+    <ele-viewer
+      ref="viewerRef"
+      src="https://cdn.chimelong.com/upload/039efd65c3282816/408cbfefc64b04c4.jpg"
+      :markers="[{ key: 1, x: 604, y: 840, fixed: true, text: '您的位置' }]"
+      :rotate-step="45"
+      :image-style="{ filter: 'grayscale(60%) contrast(120%) saturate(200%)' }"
+      style="height: 560px; max-width: 900px"
+    >
+      <template #markerItem="{ item }">
+        <div class="zoo-map-location">
+          <div>{{ item.text }}</div>
+        </div>
+      </template>
+    </ele-viewer>
+    <div style="margin-top: 12px">
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomIn')">
+        放大
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomOut')">
+        缩小
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateLeft')">
+        向左旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateRight')">
+        向右旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('autoIntoView')">
+        自适应缩放
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('reset')">
+        重置
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  /** 查看器组件 */
+  const viewerRef = ref<any>(null);
+
+  /** 调用查看器组件方法 */
+  const handleCallViewer = (methodName: string) => {
+    if (viewerRef.value) {
+      viewerRef.value[methodName]();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .zoo-map-location {
+    width: 0;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    &::before {
+      content: '';
+      flex-shrink: 0;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ff2024;
+      box-shadow: 0 0 0 4px rgba(255, 122, 125, 0.6);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -14px;
+      left: -6px;
+      border: 6px solid transparent;
+      border-top-color: #ff2024;
+    }
+
+    & > div {
+      color: #fff;
+      font-size: 16px;
+      padding: 4px 12px;
+      background: #ff2024;
+      border-radius: 6px;
+      white-space: nowrap;
+      position: absolute;
+      bottom: 14px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/viewer/components/demo-paper.vue b/z_ele/src/views/extension/viewer/components/demo-paper.vue
new file mode 100644
index 0000000..2043e61
--- /dev/null
+++ b/z_ele/src/views/extension/viewer/components/demo-paper.vue
@@ -0,0 +1,357 @@
+<template>
+  <ele-card header="用于试卷批阅">
+    <div style="margin-bottom: 12px">点击鼠标右键评分</div>
+    <ele-viewer
+      ref="viewerRef"
+      src="https://cdn.eleadmin.com/20200610/pECunlF.jpg"
+      :markers="paperMarkers"
+      :image-style="{ filter: 'contrast(120%)' }"
+      style="height: 560px; max-width: 900px"
+      @contentContextmenu="handleContentContextmenu"
+    >
+      <template #markerItem="{ item }">
+        <div v-if="item.isPanel" class="paper-score">
+          <div class="paper-score-content">
+            <template v-if="item.selected != null || item.selectedDecimal">
+              <span>{{
+                (item.selected ?? 0) + (item.selectedDecimal ? 0.5 : 0)
+              }}</span>
+              <span>分</span>
+            </template>
+          </div>
+          <div
+            :class="[
+              'paper-score-panel',
+              { 'is-top-left': item.placement === 'topLeft' },
+              { 'is-top-right': item.placement === 'topRight' },
+              { 'is-bottom-left': item.placement === 'bottomLeft' }
+            ]"
+            @contextmenu.stop.prevent=""
+          >
+            <div class="paper-score-panel-list">
+              <div
+                v-for="num in 11"
+                :key="num"
+                :class="[{ 'is-active': item.selected === num - 1 }]"
+                @click="handleScoreClick(num - 1)"
+              >
+                {{ num - 1 }}
+              </div>
+            </div>
+            <div class="paper-score-panel-list">
+              <div
+                :class="[{ 'is-active': item.selectedDecimal }]"
+                @click="handleDecimalClick"
+              >
+                0.5
+              </div>
+            </div>
+            <div class="paper-score-panel-footer">
+              <el-button
+                size="small"
+                class="ele-btn-icon"
+                @click="handleCancel"
+              >
+                取消
+              </el-button>
+              <el-button
+                type="primary"
+                size="small"
+                class="ele-btn-icon"
+                @click="handleSave"
+              >
+                确定
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div v-else class="paper-score">
+          <div class="paper-score-content">
+            <span>{{ item.score }}</span>
+            <span>分</span>
+          </div>
+          <el-icon
+            @click="handleScoreDelete(item)"
+            @contextmenu.stop.prevent=""
+          >
+            <CloseCircleFilled />
+          </el-icon>
+        </div>
+      </template>
+    </ele-viewer>
+    <div style="margin-top: 12px">
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomIn')">
+        放大
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('zoomOut')">
+        缩小
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateLeft')">
+        向左旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('rotateRight')">
+        向右旋转
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('autoIntoView')">
+        自适应缩放
+      </el-button>
+      <el-button class="ele-btn-icon" @click="handleCallViewer('reset')">
+        重置
+      </el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { CloseCircleFilled } from '@/components/icons';
+
+  interface ScoreItem {
+    key?: number;
+    x?: number;
+    y?: number;
+    fixed?: boolean;
+    score?: number;
+    isPanel?: boolean;
+    selected?: number;
+    selectedDecimal?: boolean;
+    placement?: string;
+  }
+
+  /** 试卷批阅标记数据 */
+  const paperMarkers = ref<ScoreItem[]>([
+    { key: 1, x: 1080, y: 208, fixed: true, score: 6 },
+    { key: 1, x: 1100, y: 980, fixed: true, score: 9 }
+  ]);
+
+  /** 删除分数 */
+  const handleScoreDelete = (item: ScoreItem) => {
+    const index = paperMarkers.value.indexOf(item);
+    if (index !== -1) {
+      paperMarkers.value.splice(index, 1);
+    }
+  };
+
+  /** 打开评分面板 */
+  const handleContentContextmenu = (e: MouseEvent) => {
+    e.preventDefault();
+    // 自动调整面板位置
+    let placement: string | undefined = void 0;
+    const rect = viewerRef.value?.$el?.getBoundingClientRect?.();
+    if (rect) {
+      let isLeft = false;
+      let isTop = false;
+      if (rect.right - e.clientX < 220) {
+        isLeft = true;
+      }
+      if (rect.bottom - e.clientY < 168) {
+        isTop = true;
+      }
+      if (isLeft || isTop) {
+        if (isLeft && isTop) {
+          placement = 'topLeft';
+        } else if (isTop) {
+          placement = 'topRight';
+        } else {
+          placement = 'bottomLeft';
+        }
+      }
+    }
+    // 在右键位置打开
+    const x = e.offsetX;
+    const y = e.offsetY;
+    const item = paperMarkers.value.find((d) => d.isPanel);
+    if (item) {
+      item.x = x;
+      item.y = y;
+      item.selected = void 0;
+      item.selectedDecimal = false;
+      item.placement = placement;
+      item.key = Date.now();
+      return;
+    }
+    paperMarkers.value.push({
+      key: Date.now(),
+      x,
+      y,
+      fixed: true,
+      isPanel: true,
+      placement
+    });
+  };
+
+  /** 分数选项点击事件 */
+  const handleScoreClick = (num: number) => {
+    const item = paperMarkers.value.find((d) => d.isPanel);
+    if (item) {
+      item.selected = item.selected === num ? void 0 : num;
+      if (item.selected === 10 && item.selectedDecimal) {
+        item.selectedDecimal = false;
+      }
+    }
+  };
+
+  /** 分数小数选项点击事件 */
+  const handleDecimalClick = () => {
+    const item = paperMarkers.value.find((d) => d.isPanel);
+    if (item) {
+      if (item.selected === 10) {
+        item.selected = void 0;
+      }
+      item.selectedDecimal = !item.selectedDecimal;
+    }
+  };
+
+  /** 关闭评分面板 */
+  const handleCancel = () => {
+    const index = paperMarkers.value.findIndex((d) => d.isPanel);
+    if (index !== -1) {
+      paperMarkers.value.splice(index, 1);
+    }
+  };
+
+  /** 保存添加分数 */
+  const handleSave = () => {
+    const item = paperMarkers.value.find((d) => d.isPanel);
+    if (item == null || (item.selected == null && !item.selectedDecimal)) {
+      handleCancel();
+      return;
+    }
+    const score = (item.selected ?? 0) + (item.selectedDecimal ? 0.5 : 0);
+    paperMarkers.value.push({
+      key: Date.now(),
+      x: item.x,
+      y: item.y,
+      fixed: true,
+      score
+    });
+    handleCancel();
+  };
+
+  /** 查看器组件 */
+  const viewerRef = ref<any>(null);
+
+  /** 调用查看器组件方法 */
+  const handleCallViewer = (methodName: string) => {
+    if (viewerRef.value) {
+      viewerRef.value[methodName]();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .paper-score {
+    width: 0;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    & > .paper-score-content {
+      flex-shrink: 0;
+      width: 34px;
+      height: 34px;
+      line-height: 34px;
+      border-radius: 50%;
+      color: #fff;
+      font-size: 14px;
+      background: rgba(22, 119, 255, 0.68);
+      white-space: nowrap;
+      text-align: center;
+
+      & > span + span {
+        font-size: 12px;
+        vertical-align: 1px;
+      }
+    }
+
+    & > .el-icon {
+      color: #ff4d4f;
+      font-size: 16px;
+      position: absolute;
+      background: #fff;
+      border-radius: 50%;
+      top: -20px;
+      right: -24px;
+      pointer-events: auto;
+      cursor: pointer;
+
+      &:hover {
+        color: #cc3e3f;
+      }
+    }
+  }
+
+  /* 评分板 */
+  .paper-score-panel {
+    width: 220px;
+    padding: 10px;
+    border-radius: 6px;
+    background: var(--el-bg-color-overlay);
+    box-shadow: var(--el-box-shadow-light);
+    box-sizing: border-box;
+    position: absolute;
+    top: 20px;
+    left: -18px;
+    pointer-events: auto;
+    cursor: default;
+
+    &.is-bottom-left {
+      left: auto;
+      right: -18px;
+    }
+
+    &.is-top-right {
+      top: auto;
+      bottom: 20px;
+    }
+
+    &.is-top-left {
+      top: auto;
+      left: auto;
+      right: -18px;
+      bottom: 20px;
+    }
+  }
+
+  .paper-score-panel-list {
+    display: grid;
+    gap: 6px;
+    grid-template-columns: repeat(6, 1fr);
+    margin-bottom: 10px;
+
+    & > div {
+      height: 22px;
+      line-height: 22px;
+      color: var(--el-text-color-primary);
+      font-size: 12px;
+      border-radius: 4px;
+      border: 1px solid var(--el-border-color);
+      transition: all 0.2s;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--el-color-primary);
+      }
+
+      &.is-active {
+        color: #fff;
+        background: var(--el-color-primary);
+        border-color: var(--el-color-primary);
+      }
+    }
+  }
+
+  .paper-score-panel-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & > .el-button + .el-button {
+      margin-left: 8px;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/extension/viewer/index.vue b/z_ele/src/views/extension/viewer/index.vue
new file mode 100644
index 0000000..7ed62f5
--- /dev/null
+++ b/z_ele/src/views/extension/viewer/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <ele-page>
+    <demo-basic />
+    <demo-advanced />
+    <demo-paper />
+    <demo-map />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import DemoBasic from './components/demo-basic.vue';
+  import DemoAdvanced from './components/demo-advanced.vue';
+  import DemoPaper from './components/demo-paper.vue';
+  import DemoMap from './components/demo-map.vue';
+
+  defineOptions({ name: 'ExtensionViewer' });
+</script>
diff --git a/z_ele/src/views/extension/watermark/index.vue b/z_ele/src/views/extension/watermark/index.vue
new file mode 100644
index 0000000..b494869
--- /dev/null
+++ b/z_ele/src/views/extension/watermark/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <ele-page>
+    <ele-card header="基本用法" style="z-index: 1; position: relative">
+      <ele-watermark content="Ele Admin Plus" :gap="[60, 40]">
+        <div style="height: 200px">
+          <div>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+        </div>
+      </ele-watermark>
+    </ele-card>
+    <ele-card header="多行水印" style="z-index: 1; position: relative">
+      <ele-watermark
+        :content="['Ele Admin Plus', 'Happy Working']"
+        :gap="[60, 40]"
+      >
+        <div style="height: 200px">
+          <div>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+        </div>
+      </ele-watermark>
+    </ele-card>
+    <ele-card header="图片水印" style="z-index: 1; position: relative">
+      <ele-watermark
+        :height="30"
+        :width="130"
+        image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
+        :gap="[60, 40]"
+        :custom-style="darkMode ? { filter: 'invert(1) !important' } : void 0"
+      >
+        <div style="height: 200px">
+          <div>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+          <div style="margin-top: 22px">
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+            <el-button>我是内容</el-button>
+          </div>
+        </div>
+      </ele-watermark>
+    </ele-card>
+    <ele-card header="结合其它组件" style="z-index: 1; position: relative">
+      <ele-alert
+        show-icon
+        :closable="false"
+        title="水印组件还实现了防止删除和篡改样式的功能, 当检测到节点被删除或默认的样式被修改都会再重新生成水印"
+        style="margin-bottom: 12px"
+      />
+      <ele-watermark content="Ele Admin Plus" :gap="[60, 40]">
+        <ele-pro-table
+          row-key="id"
+          :columns="columns"
+          :datasource="datasource"
+          :pagination="false"
+          :toolbar="false"
+          :cell-style="tableCellStyle"
+        >
+          <template #money="{ row }">
+            <el-input v-model="row.money" style="margin: 4px 0" />
+          </template>
+          <template #status="{ row }">
+            <ele-text v-if="row.status === 0" type="success">进行中</ele-text>
+            <ele-text v-else-if="row.status === 1" type="danger">
+              已延期
+            </ele-text>
+            <ele-text v-else-if="row.status === 2" type="warning">
+              未开始
+            </ele-text>
+            <ele-text v-else-if="row.status === 3" type="info">
+              已结束
+            </ele-text>
+          </template>
+          <template #progress="{ row }">
+            <el-progress :percentage="row.progress" />
+          </template>
+        </ele-pro-table>
+      </ele-watermark>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { getProjectList } from '@/api/example';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+
+  defineOptions({ name: 'ExtensionWatermark' });
+
+  /** 是否是暗黑主题 */
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 表格列配置 */
+  const columns = ref([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      label: '项目名称',
+      prop: 'projectName',
+      align: 'center',
+      minWidth: 140
+    },
+    {
+      label: '金额(万元)',
+      prop: 'money',
+      slot: 'money',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      label: '开始时间',
+      prop: 'startDate',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      label: '结束时间',
+      prop: 'endDate',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      slot: 'status',
+      align: 'center',
+      width: 100
+    },
+    {
+      label: '进度',
+      prop: 'progress',
+      slot: 'progress',
+      align: 'center',
+      minWidth: 140
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource = () => {
+    return getProjectList();
+  };
+
+  /** 表格单元格样式 */
+  const tableCellStyle = ({ column }) => {
+    if (column.columnKey === 'money') {
+      return { padding: '0' };
+    }
+  };
+</script>
diff --git a/z_ele/src/views/forget/index.vue b/z_ele/src/views/forget/index.vue
new file mode 100644
index 0000000..b399904
--- /dev/null
+++ b/z_ele/src/views/forget/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
diff --git a/z_ele/src/views/form/advanced/index.vue b/z_ele/src/views/form/advanced/index.vue
new file mode 100644
index 0000000..f6181f5
--- /dev/null
+++ b/z_ele/src/views/form/advanced/index.vue
@@ -0,0 +1,593 @@
+<template>
+  <ele-page plain :multi-card="false">
+    <ele-card style="border-radius: 0">
+      <ele-text type="heading" size="lg">复杂表单</ele-text>
+      <ele-text type="placeholder" style="margin-top: 6px">
+        复杂表单常见于一次性输入和提交大批量数据的场景。
+      </ele-text>
+    </ele-card>
+    <ele-page>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+        @submit.prevent=""
+      >
+        <ele-card
+          header="仓库信息"
+          :body-style="{ padding: '24px 20px 8px 2px' }"
+        >
+          <el-row :gutter="12">
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="仓库名" prop="name">
+                <el-input
+                  maxlength="40"
+                  clearable
+                  v-model="form.name"
+                  placeholder="请输入仓库名"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="仓库域名" prop="url">
+                <el-input clearable v-model="form.url" placeholder="请输入">
+                  <template #prepend>https://</template>
+                  <template #append>.com</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="仓库管理员" prop="administrator">
+                <el-select
+                  clearable
+                  v-model="form.administrator"
+                  placeholder="请选择仓库管理员"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="1" label="SunSmile" />
+                  <el-option value="2" label="Jasmine" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="审批人" prop="approver">
+                <el-select
+                  clearable
+                  v-model="form.approver"
+                  placeholder="请选择审批人"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="1" label="SunSmile" />
+                  <el-option value="2" label="Jasmine" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="生效时间" prop="datetime">
+                <el-date-picker
+                  type="datetime"
+                  v-model="form.datetime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="请选择生效时间"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="仓库类型" prop="type">
+                <el-select
+                  clearable
+                  v-model="form.type"
+                  placeholder="请选择仓库类型"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="private" label="私密" />
+                  <el-option value="public" label="公开" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </ele-card>
+        <ele-card
+          header="任务信息"
+          :body-style="{ padding: '24px 20px 8px 2px' }"
+        >
+          <el-row :gutter="12">
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="任务名" prop="task">
+                <el-input
+                  clearable
+                  v-model="form.task"
+                  placeholder="请输入任务名"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="任务表述" prop="description">
+                <el-input
+                  clearable
+                  v-model="form.description"
+                  placeholder="请输入任务表述"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="执行人" prop="executor">
+                <el-select
+                  clearable
+                  v-model="form.executor"
+                  placeholder="请选择执行人"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="1" label="SunSmile" />
+                  <el-option value="2" label="Jasmine" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="责任人" prop="officer">
+                <el-select
+                  clearable
+                  v-model="form.officer"
+                  placeholder="请选择责任人"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="1" label="SunSmile" />
+                  <el-option value="2" label="Jasmine" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="提醒时间" prop="reminder">
+                <el-time-picker
+                  is-range
+                  range-separator="-"
+                  v-model="form.reminder"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  value-format="HH:mm:ss"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="8" :md="12" :sm="12" :xs="24">
+              <el-form-item label="任务类型" prop="taskType">
+                <el-select
+                  clearable
+                  v-model="form.taskType"
+                  placeholder="请选择任务类型"
+                  class="ele-fluid"
+                  :popper-options="{ strategy: 'fixed' }"
+                >
+                  <el-option value="1" label="私密" />
+                  <el-option value="2" label="公开" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </ele-card>
+        <ele-card header="选择成员">
+          <div
+            ref="userTableWrapRef"
+            style="overflow: auto"
+            :class="[
+              'user-table-wrap',
+              { 'is-ping-left': isPingLeft },
+              { 'is-ping-right': isPingRight }
+            ]"
+            @scroll="handleUserTableScroll"
+          >
+            <ele-table style="min-width: 580px; table-layout: fixed">
+              <colgroup>
+                <col width="60px" />
+                <col />
+                <col />
+                <col />
+                <col width="100px" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th class="user-table-index"></th>
+                  <th>用户名</th>
+                  <th>工号</th>
+                  <th>所属部门</th>
+                  <th class="user-table-action">操作</th>
+                </tr>
+              </thead>
+              <tbody style="--ele-table-padding: 6px 8px">
+                <tr v-for="(row, index) in form.users" :key="row.key">
+                  <td class="user-table-index">{{ index + 1 }}</td>
+                  <td>
+                    <el-form-item
+                      label-width="0px"
+                      :prop="'users.' + index + '.name'"
+                      :rules="{
+                        required: true,
+                        message: '请输入用户名',
+                        type: 'string',
+                        trigger: 'blur'
+                      }"
+                      class="pro-form-error-popper"
+                      style="margin-bottom: 0"
+                    >
+                      <el-input
+                        clearable
+                        v-model="row.name"
+                        placeholder="请输入用户名"
+                      />
+                    </el-form-item>
+                  </td>
+                  <td>
+                    <el-form-item
+                      label-width="0px"
+                      :prop="'users.' + index + '.number'"
+                      :rules="{
+                        required: true,
+                        message: '请输入工号',
+                        type: 'string',
+                        trigger: 'blur'
+                      }"
+                      class="pro-form-error-popper"
+                      style="margin-bottom: 0"
+                    >
+                      <el-input
+                        clearable
+                        v-model="row.number"
+                        placeholder="请输入工号"
+                      />
+                    </el-form-item>
+                  </td>
+                  <td>
+                    <el-form-item
+                      label-width="0px"
+                      :prop="'users.' + index + '.department'"
+                      :rules="{
+                        required: true,
+                        message: '请选择部门',
+                        type: 'string',
+                        trigger: 'change'
+                      }"
+                      class="pro-form-error-popper"
+                      style="margin-bottom: 0"
+                    >
+                      <el-select
+                        clearable
+                        v-model="row.department"
+                        placeholder="请选择部门"
+                        class="ele-fluid"
+                        :popper-options="{ strategy: 'fixed' }"
+                      >
+                        <el-option value="研发部" label="研发部" />
+                        <el-option value="测试部" label="测试部" />
+                        <el-option value="产品部" label="产品部" />
+                      </el-select>
+                    </el-form-item>
+                  </td>
+                  <td class="user-table-action">
+                    <el-link
+                      type="danger"
+                      underline="never"
+                      @click="removeUser(row, index)"
+                    >
+                      删除
+                    </el-link>
+                  </td>
+                </tr>
+                <tr v-if="!form.users || !form.users.length">
+                  <td colspan="5" style="text-align: center">
+                    <ele-text style="padding: 4px 0" type="secondary">
+                      暂无数据
+                    </ele-text>
+                  </td>
+                </tr>
+              </tbody>
+            </ele-table>
+          </div>
+          <el-button
+            :icon="PlusOutlined"
+            style="margin-top: 16px; width: 100%"
+            @click="addUser"
+          >
+            <span style="padding-top: 1px">新增成员</span>
+          </el-button>
+        </ele-card>
+      </el-form>
+    </ele-page>
+    <!-- 底部工具栏 -->
+    <ele-bottom-bar teleported>
+      <ele-text v-if="validMsg" type="danger" :icon="CloseCircleOutlined">
+        <span>{{ validMsg }}</span>
+      </ele-text>
+      <template #extra>
+        <el-button type="primary" :loading="loading" @click="submit">
+          提交
+        </el-button>
+      </template>
+    </ele-bottom-bar>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { CloseCircleOutlined, PlusOutlined } from '@/components/icons';
+  import { useFormData } from '@/utils/use-form-data';
+  import type { UserItem } from '@/api/example/model';
+  import { listAddedUsers } from '@/api/example';
+
+  defineOptions({ name: 'FormAdvanced' });
+
+  /** 加载状态 */
+  const loading = ref(false);
+
+  /** 表单数据类型 */
+  interface FormData {
+    name?: string;
+    url?: string;
+    administrator?: string;
+    approver?: string;
+    datetime?: string;
+    type?: string;
+    task?: string;
+    description?: string;
+    executor?: string;
+    officer?: string;
+    reminder?: [string, string];
+    taskType?: string;
+    users: UserItem[];
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<FormData>({
+    name: '',
+    url: '',
+    administrator: void 0,
+    approver: void 0,
+    datetime: '',
+    type: void 0,
+    task: '',
+    description: '',
+    executor: void 0,
+    officer: void 0,
+    reminder: void 0,
+    taskType: void 0,
+    users: []
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    name: [
+      {
+        required: true,
+        message: '请输入仓库名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    url: [
+      {
+        required: true,
+        message: '请输入仓库域名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    administrator: [
+      {
+        required: true,
+        message: '请选择仓库管理员',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    approver: [
+      {
+        required: true,
+        message: '请选择审批人',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    datetime: [
+      {
+        required: true,
+        message: '请选择生效时间',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    type: [
+      {
+        required: true,
+        message: '请选择仓库类型',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    task: [
+      {
+        required: true,
+        message: '请输入任务名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    description: [
+      {
+        required: true,
+        message: '请输入任务表述',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    executor: [
+      {
+        required: true,
+        message: '请选择执行人',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    officer: [
+      {
+        required: true,
+        message: '请选择责任人',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    reminder: [
+      {
+        required: true,
+        message: '请选择提醒时间',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    taskType: [
+      {
+        required: true,
+        message: '请选择任务类型',
+        type: 'string',
+        trigger: 'change'
+      }
+    ]
+  });
+
+  /** 表单验证失败提示信息 */
+  const validMsg = ref('');
+
+  /** 表单提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid, obj) => {
+      if (!valid) {
+        const errors = obj ? Object.keys(obj).length : 0;
+        validMsg.value = ` 共有 ${errors} 项校验不通过`;
+        return;
+      }
+      validMsg.value = '';
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+        EleMessage.success({ message: '提交成功', plain: true });
+        resetFields();
+      }, 1000);
+    });
+  };
+
+  /** 添加 */
+  const addUser = () => {
+    form.users.push({
+      key: Date.now() + '-' + form.users.length,
+      number: '',
+      name: '',
+      department: void 0
+    });
+  };
+
+  /** 删除 */
+  const removeUser = (_row: UserItem, index: number) => {
+    form.users.splice(index, 1);
+  };
+
+  /** 查询已添加 */
+  listAddedUsers()
+    .then((data) => {
+      form.users = data;
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+
+  /** 选择成员表格容器 */
+  const userTableWrapRef = ref<HTMLDivElement | null>(null);
+
+  /** 选择成员表格左侧列是否固定状态 */
+  const isPingLeft = ref(false);
+
+  /** 选择成员表格右侧列是否固定状态 */
+  const isPingRight = ref(false);
+
+  /** 选择成员表格滚动事件 */
+  const handleUserTableScroll = (e: MouseEvent) => {
+    checkUserTablePing(e.currentTarget as any);
+  };
+
+  /** 计算选择成员表格列固定状态 */
+  const checkUserTablePing = (wrapEl: HTMLDivElement) => {
+    const scrollLeft = wrapEl.scrollLeft;
+    isPingLeft.value = scrollLeft > 1;
+    const sw = wrapEl.scrollWidth - wrapEl.clientWidth - 1;
+    isPingRight.value = sw > 1 && scrollLeft < sw;
+  };
+
+  onMounted(() => {
+    userTableWrapRef.value && checkUserTablePing(userTableWrapRef.value);
+  });
+</script>
+
+<style lang="scss" scoped>
+  .user-table-wrap {
+    :deep(.user-table-index) {
+      text-align: center;
+      position: sticky;
+      left: 0;
+      z-index: 98;
+    }
+
+    &.is-ping-left :deep(.user-table-index) {
+      backdrop-filter: var(--ele-table-fixed-backdrop-filter);
+
+      &::before {
+        content: '';
+        width: 10px;
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        right: -10px;
+        box-shadow: var(--ele-table-fixed-left-shadow);
+        transition: box-shadow 0.2s;
+        pointer-events: none;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+
+    :deep(.user-table-action) {
+      text-align: center;
+      position: sticky;
+      right: 0;
+      z-index: 98;
+    }
+
+    &.is-ping-right :deep(.user-table-action) {
+      backdrop-filter: var(--ele-table-fixed-backdrop-filter);
+
+      &::before {
+        content: '';
+        width: 10px;
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        left: -10px;
+        box-shadow: var(--ele-table-fixed-right-shadow);
+        transition: box-shadow 0.2s;
+        pointer-events: none;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/form/basic/index.vue b/z_ele/src/views/form/basic/index.vue
new file mode 100644
index 0000000..71bd12d
--- /dev/null
+++ b/z_ele/src/views/form/basic/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <ele-card style="border-radius: 0">
+      <ele-text type="heading" size="lg">基础表单</ele-text>
+      <ele-text type="placeholder" style="margin-top: 6px">
+        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
+      </ele-text>
+    </ele-card>
+    <ele-page :multi-card="false">
+      <ele-card>
+        <el-form
+          status-icon
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          label-width="80px"
+          style="max-width: 700px; margin: 10px auto"
+          @submit.prevent=""
+        >
+          <el-form-item label="标题" prop="title">
+            <el-input clearable v-model="form.title" placeholder="请输入标题" />
+          </el-form-item>
+          <el-form-item label="起止日期" prop="datetime">
+            <el-date-picker
+              unlink-panels
+              type="daterange"
+              v-model="form.datetime"
+              range-separator="-"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="ele-fluid"
+            />
+          </el-form-item>
+          <el-form-item label="目标描述" prop="goal">
+            <el-input
+              show-word-limit
+              maxlength="800"
+              :rows="4"
+              type="textarea"
+              v-model="form.goal"
+              placeholder="请输入目标描述"
+            />
+          </el-form-item>
+          <el-form-item label="衡量标准" prop="standard">
+            <el-input
+              :rows="4"
+              type="textarea"
+              v-model="form.standard"
+              placeholder="请输入衡量标准"
+            />
+          </el-form-item>
+          <el-form-item label="地点" prop="address">
+            <el-select
+              clearable
+              v-model="form.address"
+              placeholder="请选择地点"
+              class="ele-fluid"
+              :popper-options="{ strategy: 'fixed' }"
+            >
+              <el-option value="1" label="地点一" />
+              <el-option value="2" label="地点二" />
+              <el-option value="3" label="地点三" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="邀评人" prop="invites">
+            <el-select
+              multiple
+              clearable
+              v-model="form.invites"
+              placeholder="请选择邀评人"
+              class="ele-fluid"
+              :popper-options="{ strategy: 'fixed' }"
+            >
+              <el-option-group label="分组一">
+                <el-option :value="1" label="SunSmile" />
+                <el-option :value="2" label="你的名字很好听" />
+                <el-option :value="3" label="全村人的希望" />
+              </el-option-group>
+              <el-option-group label="分组二">
+                <el-option :value="4" label="Jasmine" />
+                <el-option :value="5" label="酷酷的大叔" />
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权重" prop="weight">
+            <el-input-number
+              :min="0"
+              :max="100"
+              v-model="form.weight"
+              controls-position="right"
+              class="ele-fluid"
+              style="max-width: 160px"
+            />
+            <div style="padding-left: 8px">%</div>
+          </el-form-item>
+          <el-form-item label="目标公开" style="margin-bottom: 0">
+            <el-radio-group v-model="form.publicType">
+              <el-radio :value="1" label="公开" />
+              <el-radio :value="2" label="部分公开" />
+              <el-radio :value="3" label="不公开" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="form.publicType === 2"
+            style="margin-bottom: 16px"
+          >
+            <el-input
+              clearable
+              v-model="form.publicValue"
+              placeholder="公开给"
+              class="ele-fluid"
+            />
+          </el-form-item>
+          <el-form-item>
+            <ele-text type="placeholder" style="line-height: 1.6">
+              客户、邀评人默认被分享
+            </ele-text>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="finishPageTab()">关闭</el-button>
+            <el-button type="primary" :loading="loading" @click="submit">
+              提交
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ele-card>
+    </ele-page>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { usePageTab } from '@/utils/use-page-tab';
+
+  defineOptions({ name: 'FormBasic' });
+
+  const { finishPageTab } = usePageTab();
+
+  /** 加载状态 */
+  const loading = ref(false);
+
+  /** 表单数据类型 */
+  interface FormData {
+    title?: string;
+    datetime?: [string, string];
+    goal?: string;
+    standard?: string;
+    address?: string;
+    invites?: string[];
+    weight?: number;
+    publicType?: number;
+    publicValue?: string;
+  }
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<FormData>({
+    title: '',
+    datetime: void 0,
+    goal: '',
+    standard: '',
+    address: void 0,
+    invites: [],
+    weight: 0,
+    publicType: 1,
+    publicValue: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    title: [
+      {
+        required: true,
+        message: '请输入标题',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    datetime: [
+      {
+        required: true,
+        message: '请选择起止日期',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    goal: [
+      {
+        required: true,
+        message: '请输入目标描述',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    standard: [
+      {
+        required: true,
+        message: '请输入衡量标准',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    address: [
+      {
+        required: true,
+        message: '请选择地点',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    invites: [
+      {
+        required: true,
+        message: '请选择邀评人',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    weight: [
+      {
+        required: true,
+        message: '请输入权重',
+        type: 'number',
+        trigger: 'change'
+      }
+    ]
+  });
+
+  /** 提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+        resetFields();
+        EleMessage.success({ message: '提交成功', plain: true });
+      }, 1500);
+    });
+  };
+</script>
diff --git a/z_ele/src/views/form/build/index.vue b/z_ele/src/views/form/build/index.vue
new file mode 100644
index 0000000..416f7fe
--- /dev/null
+++ b/z_ele/src/views/form/build/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <ele-page flex-table hide-footer :multi-card="false">
+    <ele-card flex-table :body-style="{ padding: 0, overflow: 'hidden' }">
+      <pro-form-builder v-model="config" />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProFormProps } from 'ele-admin-plus/es/ele-app/plus';
+  import ProFormBuilder from '@/components/ProFormBuilder/index.vue';
+
+  defineOptions({ name: 'FormBuild' });
+
+  /** 表单配置数据 */
+  const config = ref<EleProFormProps>({});
+</script>
diff --git a/z_ele/src/views/form/step/components/step-confirm.vue b/z_ele/src/views/form/step/components/step-confirm.vue
new file mode 100644
index 0000000..f26b7c2
--- /dev/null
+++ b/z_ele/src/views/form/step/components/step-confirm.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <ele-alert
+      show-icon
+      title="确认转账后，资金将直接打入对方账户，无法退回。"
+      style="margin-bottom: 18px"
+    />
+    <el-descriptions
+      :border="true"
+      :column="1"
+      size="large"
+      class="detail-table"
+    >
+      <el-descriptions-item label="付款账户">
+        <div>{{ data.account }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="收款账户">
+        <div>{{ data.receiver }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="收款人姓名">
+        <div>{{ data.name }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="转账金额">
+        <div style="display: flex; align-items: flex-end">
+          <ele-text size="xl" style="line-height: 1">
+            {{ data.amount }}&nbsp;
+          </ele-text>
+          <div style="line-height: 1.15">&nbsp;元</div>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="支付密码">
+        <div style="max-width: 220px">
+          <el-input
+            type="password"
+            v-model="form.password"
+            placeholder="请输入支付密码"
+            show-password
+          />
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+    <div style="margin-top: 22px; padding-left: 140px">
+      <el-button type="primary" :loading="loading" @click="submit">
+        下一步
+      </el-button>
+      <el-button @click="back">上一步</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { StepForm } from '../model';
+
+  defineProps<{
+    data: StepForm;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'back'): void;
+  }>();
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const form = reactive({
+    password: '123456'
+  });
+
+  /** 下一步 */
+  const submit = () => {
+    if (!form.password) {
+      EleMessage.error({ message: '请输入支付密码', plain: true });
+      return;
+    }
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+      emit('done');
+    }, 300);
+  };
+
+  /** 上一步 */
+  const back = () => {
+    emit('back');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
+    width: 120px;
+    text-align: right;
+    font-weight: normal;
+  }
+</style>
diff --git a/z_ele/src/views/form/step/components/step-edit.vue b/z_ele/src/views/form/step/components/step-edit.vue
new file mode 100644
index 0000000..cad8c47
--- /dev/null
+++ b/z_ele/src/views/form/step/components/step-edit.vue
@@ -0,0 +1,133 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="108px"
+    style="padding-right: 60px"
+    @submit.prevent=""
+  >
+    <el-form-item label="付款账户" prop="account">
+      <el-select
+        clearable
+        v-model="form.account"
+        placeholder="请选择付款账户"
+        class="ele-fluid"
+      >
+        <el-option value="plus@eleadmin.com" label="plus@eleadmin.com" />
+        <el-option value="pro@eleadmin.com" label="pro@eleadmin.com" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="收款账户" prop="receiver">
+      <el-input clearable v-model="form.receiver" placeholder="请输入收款账户">
+        <template #prepend>
+          <el-select v-model="form.pay" style="width: 100px">
+            <el-option value="alipay" label="支付宝" />
+            <el-option value="wxpay" label="微信" />
+          </el-select>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item label="收款人姓名" prop="name">
+      <el-input clearable v-model="form.name" placeholder="请输入收款人姓名" />
+    </el-form-item>
+    <el-form-item label="转账金额" prop="amount">
+      <el-input
+        clearable
+        v-model="form.amount"
+        placeholder="请输入转账金额"
+        :prefix-icon="prefixIcon"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" :loading="loading" @click="submit">
+        下一步
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, h } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { numberReg } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import type { StepForm } from '../model';
+
+  const emit = defineEmits<{
+    (e: 'done', data: StepForm): void;
+  }>();
+
+  const prefixIcon = h('span', { style: { fontStyle: 'normal' } }, '￥');
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form] = useFormData<StepForm>({
+    account: 'plus@eleadmin.com',
+    receiver: 'test@example.com',
+    pay: 'alipay',
+    name: 'Alex',
+    amount: '500'
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    account: [
+      {
+        required: true,
+        message: '请选择付款账户',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    receiver: [
+      {
+        required: true,
+        message: '请输入收款账户',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入收款人姓名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    amount: [
+      {
+        required: true,
+        message: '请输入转账金额',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        pattern: numberReg,
+        message: '请输入合法金额数字',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 步骤一提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+        emit('done', form);
+      }, 300);
+    });
+  };
+</script>
diff --git a/z_ele/src/views/form/step/components/step-success.vue b/z_ele/src/views/form/step/components/step-success.vue
new file mode 100644
index 0000000..48a0a7a
--- /dev/null
+++ b/z_ele/src/views/form/step/components/step-success.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-result icon="success" title="操作成功">
+    <template #sub-title>
+      <ele-text type="placeholder">预计两小时内到账</ele-text>
+    </template>
+    <template #extra>
+      <div style="margin-bottom: 24px">
+        <el-button type="primary" @click="back">再转一笔</el-button>
+        <el-button>查看账单</el-button>
+      </div>
+      <el-descriptions
+        :border="true"
+        :column="1"
+        size="large"
+        class="detail-table"
+        style="width: 680px; max-width: 100%"
+      >
+        <el-descriptions-item label="付款账户">
+          <div>{{ data.account }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="收款账户">
+          <div>{{ data.receiver }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="收款人姓名">
+          <div>{{ data.name }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="转账金额">
+          <div style="display: flex; align-items: flex-end">
+            <ele-text size="xl" style="line-height: 1">
+              {{ data.amount }}&nbsp;
+            </ele-text>
+            <div style="line-height: 1.15">&nbsp;元</div>
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </template>
+  </el-result>
+</template>
+
+<script lang="ts" setup>
+  import type { StepForm } from '../model';
+
+  defineProps<{
+    data: StepForm;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'back'): void;
+  }>();
+
+  const back = () => {
+    emit('back');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
+    width: 120px;
+    text-align: right;
+    font-weight: normal;
+  }
+</style>
diff --git a/z_ele/src/views/form/step/index.vue b/z_ele/src/views/form/step/index.vue
new file mode 100644
index 0000000..e4c282f
--- /dev/null
+++ b/z_ele/src/views/form/step/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <ele-card style="border-radius: 0">
+      <ele-text type="heading" size="lg">分步表单</ele-text>
+      <ele-text type="placeholder" style="margin-top: 6px">
+        将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+      </ele-text>
+    </ele-card>
+    <ele-page>
+      <ele-card class="step-card">
+        <div style="max-width: 800px; margin: 0 auto; padding: 10px 0 16px 0">
+          <ele-steps
+            :active="active"
+            finish-status="success"
+            type="inline"
+            :items="[
+              { title: '第一步', description: '填写转账信息' },
+              { title: '第二步', description: '确认转账信息' },
+              { title: '第三步', description: '转账成功' }
+            ]"
+            style="margin: 0 0 30px 0"
+          />
+          <step-edit v-if="active === 0" @done="handleDone" />
+          <step-confirm
+            v-if="active === 1"
+            :data="form"
+            @done="handleNext"
+            @back="handleBack"
+          />
+          <step-success v-if="active === 2" :data="form" @back="handleBack" />
+        </div>
+        <template v-if="active === 0">
+          <el-divider style="margin: 0 0 26px 0; opacity: 0.6" />
+          <ele-alert :closable="false">
+            <ele-text size="lg" style="margin-bottom: 12px">说明</ele-text>
+            <ele-text size="md" style="margin-bottom: 8px">
+              转账到支付宝
+            </ele-text>
+            <ele-text style="margin-bottom: 12px">
+              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
+              这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+            </ele-text>
+            <ele-text size="md" style="margin-bottom: 8px">转账到微信</ele-text>
+            <ele-text style="margin-bottom: 8px">
+              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
+              这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+            </ele-text>
+          </ele-alert>
+        </template>
+      </ele-card>
+    </ele-page>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import StepEdit from './components/step-edit.vue';
+  import StepConfirm from './components/step-confirm.vue';
+  import StepSuccess from './components/step-success.vue';
+  import type { StepForm } from './model';
+
+  defineOptions({ name: 'FormStep' });
+
+  /** 选中步骤 */
+  const active = ref(0);
+
+  /** 表单数据 */
+  const form = reactive<StepForm>({});
+
+  /** 表单编辑完成事件 */
+  const handleDone = (data: StepForm) => {
+    Object.assign(form, data);
+    active.value = 1;
+  };
+
+  /** 下一步 */
+  const handleNext = () => {
+    active.value = 2;
+  };
+
+  /** 上一步 */
+  const handleBack = () => {
+    active.value = 0;
+  };
+</script>
+
+<style lang="scss" scoped>
+  @media screen and (max-width: 768px) {
+    .step-card :deep(.ele-card-body) {
+      padding: 4px 8px 16px 8px;
+
+      .el-form {
+        padding-right: 8px !important;
+      }
+
+      .el-result {
+        padding: 0;
+
+        .el-result__extra {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/form/step/model/index.ts b/z_ele/src/views/form/step/model/index.ts
new file mode 100644
index 0000000..b79a186
--- /dev/null
+++ b/z_ele/src/views/form/step/model/index.ts
@@ -0,0 +1,7 @@
+export interface StepForm {
+  account?: string;
+  receiver?: string;
+  pay?: string;
+  name?: string;
+  amount?: string;
+}
diff --git a/z_ele/src/views/list/advanced/index.vue b/z_ele/src/views/list/advanced/index.vue
new file mode 100644
index 0000000..25eeb41
--- /dev/null
+++ b/z_ele/src/views/list/advanced/index.vue
@@ -0,0 +1,503 @@
+<template>
+  <ele-page>
+    <ele-card>
+      <el-row>
+        <el-col :sm="8" :xs="24">
+          <div style="text-align: center">
+            <ele-text type="placeholder">进行中的任务</ele-text>
+            <ele-text size="xl" style="margin-top: 6px">10 个任务</ele-text>
+          </div>
+        </el-col>
+        <el-col :sm="8" :xs="24">
+          <div style="text-align: center">
+            <ele-text type="placeholder">剩余任务</ele-text>
+            <ele-text size="xl" style="margin-top: 6px">3 个任务</ele-text>
+          </div>
+        </el-col>
+        <el-col :sm="8" :xs="24">
+          <div style="text-align: center">
+            <ele-text type="placeholder">任务总耗时</ele-text>
+            <ele-text size="xl" style="margin-top: 6px">120 个小时</ele-text>
+          </div>
+        </el-col>
+      </el-row>
+    </ele-card>
+    <ele-card>
+      <!-- 头部工具栏 -->
+      <ele-toolbar title="复杂列表" :title-props="{ size: 'md' }">
+        <template #tools>
+          <div style="display: flex; align-items: center">
+            <el-radio-group v-model="where.status" @change="query">
+              <el-radio-button value="0" label="全部" />
+              <el-radio-button value="1" label="进行中" />
+              <el-radio-button value="2" label="已完成" />
+            </el-radio-group>
+            <div style="width: 200px; margin-left: 12px" class="hidden-xs-only">
+              <el-input v-model="where.keyword" placeholder="请输入">
+                <template #append>
+                  <el-button
+                    :icon="SearchOutlined"
+                    class="ele-btn-icon"
+                    @click="query"
+                  />
+                </template>
+              </el-input>
+            </div>
+          </div>
+        </template>
+      </ele-toolbar>
+      <div style="margin-top: 8px">
+        <el-button :icon="PlusOutlined" class="ele-fluid" @click="openEdit()">
+          <span style="transform: translateY(1px)">添加</span>
+        </el-button>
+      </div>
+      <!-- 数据列表 -->
+      <ele-loading
+        :loading="loading"
+        :spinner-style="{ background: 'none' }"
+        style="min-height: 100px"
+      >
+        <div v-for="item in data" :key="item.id">
+          <div class="list-item">
+            <div class="list-item-avatar">
+              <el-avatar :size="60" shape="square" :src="item.cover" />
+              <div class="list-item-avatar-extra">
+                <div style="margin-bottom: 2px">{{ item.title }}</div>
+                <ele-text size="sm" type="placeholder">
+                  {{ item.content }}
+                </ele-text>
+              </div>
+            </div>
+            <div class="list-item-owner">
+              <div class="list-item-title">发布人</div>
+              <ele-text size="sm" type="placeholder">{{ item.user }}</ele-text>
+            </div>
+            <div class="list-item-time">
+              <div class="list-item-title">开始时间</div>
+              <ele-text size="sm" type="placeholder">{{ item.time }}</ele-text>
+            </div>
+            <div class="list-item-progress" style="display: block">
+              <el-progress :status="item.status" :percentage="item.progress" />
+            </div>
+            <div class="list-item-tools">
+              <el-link type="primary" underline="never" @click="openEdit(item)">
+                编辑
+              </el-link>
+              <el-divider direction="vertical" />
+              <ele-dropdown
+                :items="[
+                  { title: '分享', command: 'share' },
+                  { title: '删除', command: 'remove', danger: true }
+                ]"
+                @command="(key: string) => dropClick(key, item)"
+              >
+                <el-link type="primary" underline="never">
+                  <span>更多</span>
+                  <el-icon :size="12">
+                    <ArrowDown />
+                  </el-icon>
+                </el-link>
+              </ele-dropdown>
+            </div>
+          </div>
+          <el-divider style="margin: 0; opacity: 0.6" />
+        </div>
+      </ele-loading>
+      <ele-pagination
+        :total="count"
+        v-model:page-size="limit"
+        v-model:current-page="page"
+        layout="prev, pager, next, sizes, jumper"
+        :pageSizes="[5, 10, 20]"
+        style="margin-top: 10px; justify-content: center"
+      />
+    </ele-card>
+    <!-- 编辑弹窗 -->
+    <ele-modal
+      form
+      destroy-on-close
+      :width="460"
+      v-model="visible"
+      :title="form.id ? '任务编辑' : '任务添加'"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="88px"
+        @submit.prevent=""
+      >
+        <el-form-item label="任务名称" prop="title">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="form.title"
+            placeholder="请输入任务名称"
+          />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="time">
+          <el-date-picker
+            type="datetime"
+            v-model="form.time"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择开始时间"
+            class="ele-fluid"
+          />
+        </el-form-item>
+        <el-form-item label="负责人" prop="user">
+          <el-select
+            clearable
+            v-model="form.user"
+            placeholder="请选择负责人"
+            class="ele-fluid"
+          >
+            <el-option value="SunSmile" label="SunSmile" />
+            <el-option value="Pojin" label="Pojin" />
+            <el-option value="SuperWill" label="SuperWill" />
+            <el-option value="Jasmine" label="Jasmine" />
+            <el-option value="Vast" label="Vast" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务描述">
+          <el-input
+            :rows="4"
+            type="textarea"
+            v-model="form.content"
+            placeholder="请输入任务描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="closeEdit">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="submitLoading"
+          @click="handleSubmit"
+        >
+          保存
+        </el-button>
+      </template>
+    </ele-modal>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { SearchOutlined, PlusOutlined, ArrowDown } from '@/components/icons';
+  import { useFormData } from '@/utils/use-form-data';
+
+  defineOptions({ name: 'ListAdvanced' });
+
+  interface ListItem {
+    id?: number;
+    title?: string;
+    time?: string;
+    user?: string;
+    progress?: number;
+    content?: string;
+    cover?: string;
+    status?: 'success' | 'exception';
+  }
+
+  /** 列表加载状态 */
+  const loading = ref(false);
+
+  /** 列表数据 */
+  const data = ref<ListItem[]>([]);
+
+  /** 搜索表单 */
+  const where = reactive({
+    status: '0',
+    keyword: ''
+  });
+
+  /** 第几页 */
+  const page = ref(1);
+
+  /** 每页多少条 */
+  const limit = ref(5);
+
+  /** 总数量 */
+  const count = ref(0);
+
+  /** 编辑弹窗是否显示 */
+  const visible = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 编辑弹窗表单数据 */
+  const [form, resetFields, assignFields] = useFormData<ListItem>({
+    id: void 0,
+    title: '',
+    time: void 0,
+    user: '',
+    content: ''
+  });
+
+  /** 编辑弹窗表单验证规则 */
+  const rules = reactive<FormRules>({
+    title: [
+      {
+        required: true,
+        message: '请输入任务名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    time: [
+      {
+        required: true,
+        message: '请选择开始时间',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    user: [
+      {
+        required: true,
+        message: '请选择负责人',
+        type: 'string',
+        trigger: 'change'
+      }
+    ]
+  });
+
+  /** 编辑表单提交状态 */
+  const submitLoading = ref(false);
+
+  /** 查询数据 */
+  const query = () => {
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+      count.value = 20;
+      data.value = [
+        {
+          id: 1,
+          title: 'ElementUI',
+          time: '2020-06-13 08:33:12',
+          user: 'SunSmile',
+          progress: 87,
+          content:
+            'Element, 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库, 提供了配套设计资源, 帮助你的网站快速成型。',
+          cover:
+            'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+        },
+        {
+          id: 2,
+          title: 'Vue.js',
+          time: '2020-06-13 06:40:13',
+          user: 'Pojin',
+          progress: 100,
+          status: 'success',
+          content:
+            'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。',
+          cover:
+            'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+        },
+        {
+          id: 3,
+          title: 'Vuex',
+          time: '2020-06-13 04:40:20',
+          user: 'SuperWill',
+          progress: 75,
+          content:
+            'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。',
+          cover:
+            'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+        },
+        {
+          id: 4,
+          title: 'Vue Router',
+          time: '2020-06-13 02:40:05',
+          user: 'Jasmine',
+          progress: 65,
+          content:
+            'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成, 让构建单页面应用变得易如反掌。',
+          cover:
+            'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+        },
+        {
+          id: 5,
+          title: 'Sass',
+          time: '2020-06-13 00:40:58',
+          user: 'Vast',
+          progress: 45,
+          status: 'exception',
+          content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
+          cover:
+            'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+        }
+      ];
+    }, 300);
+  };
+
+  /** 显示编辑弹窗 */
+  const openEdit = (row?: ListItem) => {
+    resetFields();
+    if (row) {
+      assignFields(row);
+    }
+    visible.value = true;
+  };
+
+  /** 关闭编辑弹窗 */
+  const closeEdit = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const handleSubmit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      submitLoading.value = true;
+      setTimeout(() => {
+        closeEdit();
+        submitLoading.value = false;
+        EleMessage.success({ message: '保存成功', plain: true });
+        if (form.id) {
+          // 保存修改
+          const index = data.value.findIndex((d) => d.id === form.id);
+          if (index !== -1) {
+            Object.assign(data.value[index], form);
+          }
+        } else {
+          // 保存添加
+          data.value.push({
+            ...form,
+            id: Date.now(),
+            cover:
+              'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg'
+          });
+        }
+      }, 300);
+    });
+  };
+
+  /** 下拉菜单点击事件 */
+  const dropClick = (key: string, item: ListItem) => {
+    if (key === 'remove') {
+      // 删除
+      ElMessageBox.confirm(`确定删除“${item.title}”吗?`, '系统提示', {
+        type: 'warning',
+        draggable: true
+      })
+        .then(() => {
+          EleMessage.success({ message: '点击了删除', plain: true });
+        })
+        .catch(() => {});
+    } else if (key === 'share') {
+      EleMessage.success({ message: '点击了分享', plain: true });
+    }
+  };
+
+  query();
+
+  watch([page, limit], () => {
+    query();
+  });
+</script>
+
+<style lang="scss" scoped>
+  /* 列表样式 */
+  .list-item {
+    display: flex;
+    align-items: center;
+    padding: 16px 8px;
+
+    .list-item-avatar {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      :deep(.el-avatar) {
+        flex-shrink: 0;
+      }
+
+      .list-item-avatar-extra {
+        flex: 1;
+        padding-left: 12px;
+        box-sizing: border-box;
+      }
+    }
+
+    & > div + div {
+      margin-left: 20px;
+      flex-shrink: 0;
+    }
+
+    .list-item-owner {
+      width: 80px;
+    }
+
+    .list-item-time {
+      width: 160px;
+    }
+
+    .list-item-progress {
+      width: 180px;
+    }
+
+    .list-item-title {
+      margin-bottom: 4px;
+    }
+
+    .list-item-tools {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  /* 响应式 */
+  @media screen and (max-width: 1340px) {
+    .list-item {
+      & > div + div {
+        margin-left: 10px;
+      }
+
+      .list-item-owner {
+        width: 70px;
+      }
+
+      .list-item-time {
+        width: 140px;
+      }
+
+      .list-item-progress {
+        width: 100px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1100px) {
+    .list-item {
+      display: block;
+
+      .list-item-owner,
+      .list-item-time,
+      .list-item-progress {
+        width: 100%;
+        margin: 8px 0 0 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .list-item-title {
+        margin: 0;
+        width: 80px;
+      }
+
+      .list-item-tools {
+        margin-top: 8px;
+        justify-content: flex-end;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/basic/add/index.vue b/z_ele/src/views/list/basic/add/index.vue
new file mode 100644
index 0000000..a9d2a82
--- /dev/null
+++ b/z_ele/src/views/list/basic/add/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <ele-card style="border-radius: 0">
+      <ele-text type="heading" size="lg">添加用户</ele-text>
+      <ele-text type="placeholder" style="margin-top: 6px">
+        填写用户基本信息后点击保存按钮
+      </ele-text>
+    </ele-card>
+    <ele-page>
+      <ele-card>
+        <edit-form />
+      </ele-card>
+    </ele-page>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import EditForm from '../components/edit-form.vue';
+
+  defineOptions({ name: 'ListBasicAdd' });
+</script>
diff --git a/z_ele/src/views/list/basic/components/edit-form.vue b/z_ele/src/views/list/basic/components/edit-form.vue
new file mode 100644
index 0000000..e46b21d
--- /dev/null
+++ b/z_ele/src/views/list/basic/components/edit-form.vue
@@ -0,0 +1,251 @@
+<!-- 添加和修改的表单 -->
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="80px"
+    style="max-width: 600px; margin: 10px auto"
+    @submit.prevent=""
+  >
+    <el-form-item label="用户账号" prop="username">
+      <el-input
+        clearable
+        :maxlength="20"
+        v-model="form.username"
+        placeholder="请输入用户账号"
+      />
+    </el-form-item>
+    <el-form-item label="用户名" prop="nickname">
+      <el-input
+        clearable
+        :maxlength="20"
+        v-model="form.nickname"
+        placeholder="请输入用户名"
+      />
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <dict-data code="sex" v-model="form.sex" placeholder="请选择性别" />
+    </el-form-item>
+    <el-form-item label="角色" prop="roles">
+      <role-select v-model="form.roles" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        clearable
+        :maxlength="100"
+        v-model="form.email"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="手机号" prop="phone">
+      <el-input
+        clearable
+        :maxlength="11"
+        v-model="form.phone"
+        placeholder="请输入手机号"
+      />
+    </el-form-item>
+    <el-form-item label="出生日期">
+      <el-date-picker
+        v-model="form.birthday"
+        value-format="YYYY-MM-DD"
+        placeholder="请选择出生日期"
+        class="ele-fluid"
+      />
+    </el-form-item>
+    <el-form-item v-if="!isUpdate" label="登录密码" prop="password">
+      <el-input
+        show-password
+        type="password"
+        :maxlength="20"
+        v-model="form.password"
+        placeholder="请输入登录密码"
+      />
+    </el-form-item>
+    <el-form-item label="个人简介">
+      <el-input
+        type="textarea"
+        :rows="4"
+        v-model="form.introduction"
+        :maxlength="200"
+        placeholder="请输入个人简介"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="handleClose">关闭</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage, emailReg, phoneReg } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import RoleSelect from '@/views/system/user/components/role-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: User | null;
+  }>();
+
+  const { push } = useRouter();
+  const { routeTabKey, removePageTab, reloadPageTab } = usePageTab();
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<User>({
+    userId: void 0,
+    username: '',
+    nickname: '',
+    sex: void 0,
+    roles: [],
+    email: '',
+    phone: '',
+    password: '',
+    introduction: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    username: [
+      {
+        required: true,
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (!value) {
+            return callback(new Error('请输入用户账号'));
+          }
+          checkExistence('username', value, props.data?.userId)
+            .then(() => {
+              callback(new Error('账号已经存在'));
+            })
+            .catch(() => {
+              callback();
+            });
+        }
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入用户名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return callback();
+          }
+          callback(new Error('密码必须为5-18位非空白字符'));
+        }
+      }
+    ],
+    phone: [
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleDone();
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 关闭当前页面并跳转到列表页面 */
+  const handleClose = () => {
+    removePageTab({ key: routeTabKey });
+    push('/list/basic');
+  };
+
+  /** 关闭当前页面并刷新列表页面 */
+  const handleDone = () => {
+    removePageTab({ key: routeTabKey });
+    reloadPageTab({ fullPath: '/list/basic' });
+  };
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data) {
+        assignFields({
+          ...props.data,
+          password: ''
+        });
+        isUpdate.value = true;
+      } else {
+        isUpdate.value = false;
+        resetFields();
+        formRef.value?.clearValidate?.();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/z_ele/src/views/list/basic/components/nickname-filter.vue b/z_ele/src/views/list/basic/components/nickname-filter.vue
new file mode 100644
index 0000000..e4d9833
--- /dev/null
+++ b/z_ele/src/views/list/basic/components/nickname-filter.vue
@@ -0,0 +1,96 @@
+<!-- 表头筛选框 -->
+<template>
+  <div @click.stop="">
+    <ele-popover
+      :width="180"
+      trigger="click"
+      placement="bottom-end"
+      :content-style="{ padding: '12px' }"
+      :popper-options="{
+        modifiers: [{ name: 'offset', options: { offset: [24, 4] } }]
+      }"
+    >
+      <template #reference>
+        <ele-text
+          :type="isFiltered ? 'primary' : 'placeholder'"
+          :icon="SearchOutlined"
+          class="demo-filter-icon"
+        />
+      </template>
+      <div style="margin-bottom: 12px">
+        <el-input
+          size="small"
+          v-model="nickname"
+          placeholder="请输入关键字"
+          @change="handleSearch"
+        />
+      </div>
+      <div style="text-align: right">
+        <el-button size="small" @click="handleReset">重置</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          :icon="SearchOutlined"
+          class="ele-btn-icon"
+          @click="handleSearch"
+        >
+          搜索
+        </el-button>
+      </div>
+    </ele-popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { SearchOutlined } from '@/components/icons';
+
+  const emit = defineEmits<{
+    (e: 'search', nickname: string): void;
+  }>();
+
+  /** 值 */
+  const nickname = ref('');
+
+  /** 是否已筛选 */
+  const isFiltered = ref(false);
+
+  /** 搜索 */
+  const handleSearch = () => {
+    isFiltered.value = !!nickname.value;
+    emit('search', nickname.value);
+  };
+
+  /**  重置 */
+  const handleReset = () => {
+    nickname.value = '';
+    isFiltered.value = false;
+    handleSearch();
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-filter-icon {
+    line-height: 1;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 4px 2px;
+    border-radius: var(--ele-table-icon-radius);
+    transition: (color 0.2s, background-color 0.2s);
+
+    :deep(.el-icon > svg) {
+      stroke-width: 5;
+    }
+
+    &:hover {
+      color: var(--ele-table-icon-hover-color);
+      background: var(--ele-table-icon-hover-bg);
+    }
+  }
+
+  @media print {
+    .demo-filter-icon {
+      display: none;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/basic/components/search-form.vue b/z_ele/src/views/list/basic/components/search-form.vue
new file mode 100644
index 0000000..7255476
--- /dev/null
+++ b/z_ele/src/views/list/basic/components/search-form.vue
@@ -0,0 +1,131 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label="用户账号">
+            <el-input
+              clearable
+              v-model.trim="form.username"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label="组织机构">
+            <el-input
+              clearable
+              v-model.trim="form.organizationName"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="searchExpand" :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label="手机号">
+            <el-input
+              clearable
+              v-model.trim="form.phone"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="searchExpand" :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label="邮箱">
+            <el-input
+              clearable
+              v-model.trim="form.email"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="searchExpand" :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label="创建时间">
+            <el-date-picker
+              unlink-panels
+              type="daterange"
+              v-model="dateRange"
+              range-separator="-"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="ele-fluid"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="8" :md="12" :sm="12" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+            <el-link
+              type="primary"
+              underline="never"
+              @click="toggleExpand"
+              style="margin-left: 12px"
+            >
+              <template v-if="searchExpand">
+                <span>收起</span>
+                <el-icon style="vertical-align: -1px">
+                  <ArrowUp />
+                </el-icon>
+              </template>
+              <template v-else>
+                <span>展开</span>
+                <el-icon style="vertical-align: -2px">
+                  <ArrowDown />
+                </el-icon>
+              </template>
+            </el-link>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ArrowDown, ArrowUp } from '@/components/icons';
+  import { useFormData } from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserParam>({
+    username: '',
+    organizationName: '',
+    phone: '',
+    email: ''
+  });
+
+  /** 日期范围 */
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /** 搜索表单是否展开 */
+  const searchExpand = ref(false);
+
+  /** 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    emit('search', {
+      ...form,
+      createTimeStart: d1 ? `${d1} 00:00:00` : '',
+      createTimeEnd: d2 ? `${d2} 23:59:59` : ''
+    });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    dateRange.value = ['', ''];
+    search();
+  };
+
+  /** 搜索展开/收起 */
+  const toggleExpand = () => {
+    searchExpand.value = !searchExpand.value;
+  };
+</script>
diff --git a/z_ele/src/views/list/basic/edit/index.vue b/z_ele/src/views/list/basic/edit/index.vue
new file mode 100644
index 0000000..2150c89
--- /dev/null
+++ b/z_ele/src/views/list/basic/edit/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ele-card style="border-radius: 0">
+      <ele-text type="heading" size="lg">修改用户</ele-text>
+      <ele-text type="placeholder" style="margin-top: 6px">
+        修改用户基本信息后点击保存按钮
+      </ele-text>
+    </ele-card>
+    <ele-page>
+      <ele-card>
+        <ele-loading :loading="loading">
+          <edit-form v-if="user" :data="user" />
+        </ele-loading>
+      </ele-card>
+    </ele-page>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { EleMessage } from 'ele-admin-plus';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import EditForm from '../components/edit-form.vue';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineOptions({ name: 'ListBasicEdit' });
+
+  const { setPageTabTitle } = usePageTab();
+  const route = useRoute();
+  const userId = Number(route.params.id);
+
+  /** 查询状态 */
+  const loading = ref(true);
+
+  /** 用户信息 */
+  const user = ref<User>();
+
+  /** 查询用户信息 */
+  const query = () => {
+    if (!userId || isNaN(userId)) {
+      return;
+    }
+    getUser(userId)
+      .then((data) => {
+        loading.value = false;
+        user.value = data;
+        // 修改页签标题
+        setPageTabTitle(`修改用户[${user.value.nickname}]`);
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  query();
+</script>
diff --git a/z_ele/src/views/list/basic/index.vue b/z_ele/src/views/list/basic/index.vue
new file mode 100644
index 0000000..4ca5b98
--- /dev/null
+++ b/z_ele/src/views/list/basic/index.vue
@@ -0,0 +1,526 @@
+<template>
+  <ele-page :flex-table="fixedHeight">
+    <!-- 搜索表单 -->
+    <search-form @search="handleSearch" />
+    <ele-card
+      :flex-table="fixedHeight"
+      :body-style="{ paddingBottom: '4px' }"
+      :style="{
+        minHeight: fixedHeight ? '380px' : void 0,
+        marginBottom: fixedHeight ? '0px' : void 0
+      }"
+    >
+      <!-- 提示信息 -->
+      <ele-alert
+        show-icon
+        :closable="false"
+        :style="{ marginBottom: toolDefault ? '12px' : '4px' }"
+      >
+        <template #title>
+          <span>已选择&nbsp;</span>
+          <ele-text strong type="primary" tag="span">
+            {{ selections.length }}
+          </ele-text>
+          <span>&nbsp;项数据&emsp;</span>
+          <span>其中冻结状态的用户有 </span>
+          <b>{{ selections.filter((d) => d.status === 1).length }} 个 &emsp;</b>
+          <el-link
+            type="primary"
+            underline="never"
+            style="vertical-align: 0px"
+            @click="clearChoose"
+          >
+            清空
+          </el-link>
+        </template>
+      </ele-alert>
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="userId"
+        :columns="columns"
+        :datasource="datasource"
+        v-model:current="current"
+        v-model:selections="selections"
+        :show-overflow-tooltip="true"
+        :export-config="exportConfig"
+        :print-config="{ datasource: exportSource }"
+        :border="bordered"
+        :sticky="!fixedHeight"
+        :toolbar="{ theme: toolDefault ? 'default' : 'plain' }"
+        :default-sort="{ prop: 'createTime', order: 'ascending' }"
+        :footer-style="{ paddingBottom: '12px' }"
+        style="padding-bottom: 0"
+        class="demo-table"
+        cache-key="listBasicTable"
+        @done="handleDone"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            :icon="PlusOutlined"
+            class="ele-btn-icon"
+            @click="openEdit()"
+          >
+            添加
+          </el-button>
+          <ele-dropdown
+            :disabled="!selections.length"
+            :items="[
+              {
+                title: '批量修改',
+                command: 'edit',
+                icon: EditOutlined
+              },
+              {
+                title: '批量禁用',
+                command: 'disabled',
+                icon: MinusCircleOutlined
+              },
+              {
+                title: '批量删除',
+                command: 'del',
+                icon: DeleteOutlined,
+                danger: true,
+                divided: true
+              }
+            ]"
+            :icon-props="{ size: 15 }"
+            placement="bottom-start"
+            style="margin-left: 12px"
+            @command="handleDropClick"
+          >
+            <el-button :disabled="!selections.length" class="ele-btn-icon">
+              <span>批量操作</span>
+              <el-icon :size="12" style="margin: 0 -4px 0 2px">
+                <ArrowDown />
+              </el-icon>
+            </el-button>
+          </ele-dropdown>
+        </template>
+        <!-- 表头工具按钮 -->
+        <template #tools>
+          <div style="display: flex; align-items: center; flex-wrap: wrap">
+            <div>边框&nbsp;</div>
+            <el-switch v-model="bordered" size="small" />
+            <el-divider direction="vertical" />
+            <div>表头背景&nbsp;</div>
+            <el-switch v-model="toolDefault" size="small" />
+            <el-divider direction="vertical" />
+            <div>高度铺满&nbsp;</div>
+            <el-switch v-model="fixedHeight" size="small" />
+            <el-divider direction="vertical" />
+          </div>
+        </template>
+        <!-- 头像列 -->
+        <template #avatar="{ row }">
+          <el-avatar
+            v-if="row.avatar"
+            :src="row.avatar"
+            :size="32"
+            @click.stop=""
+            style="vertical-align: -16px"
+          />
+          <el-avatar
+            v-else
+            :size="32"
+            style="background: var(--el-color-primary); vertical-align: -2px"
+            @click.stop=""
+          >
+            {{
+              row.nickname && row.nickname.length > 2
+                ? row.nickname.substring(row.nickname.length - 2)
+                : row.nickname
+            }}
+          </el-avatar>
+        </template>
+        <!-- 状态列 -->
+        <template #status="{ row }">
+          <ele-dot v-if="row.status === 0" text="正常" size="8px" />
+          <ele-dot
+            v-else-if="row.status === 1"
+            text="冻结"
+            type="danger"
+            :ripple="false"
+            size="8px"
+          />
+        </template>
+        <!-- 角色列 -->
+        <template #roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+            style="margin-right: 6px"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+        <!-- 操作列 -->
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click.stop="openEdit(row)">
+            修改
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click.stop="remove(row)">
+            删除
+          </el-link>
+        </template>
+        <!-- 用户名表头 -->
+        <template #nicknameHeader="{ column }">
+          <div style="display: flex; align-items: center">
+            <div style="flex: 1; overflow: hidden; text-overflow: ellipsis">
+              {{ column.label }}
+            </div>
+            <nickname-filter @search="handleNicknameFilter" />
+          </div>
+        </template>
+        <!-- 打印增加额外内容 -->
+        <template #printTop>
+          <h2 style="text-align: center">还可以自定义打印的顶部区域</h2>
+        </template>
+        <template #printBottom="{ data }">
+          <h2 style="text-align: center">还可以自定义打印的底部区域</h2>
+          <div style="text-align: center">
+            共打印了 <b style="color: red">{{ data.length }}</b> 条数据
+          </div>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, nextTick } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns,
+    DoneFunction,
+    ExportConfig
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { useI18n } from 'vue-i18n';
+  import {
+    PlusOutlined,
+    ArrowDown,
+    EditOutlined,
+    MinusCircleOutlined,
+    DeleteOutlined
+  } from '@/components/icons';
+  import { getExportWorkbook } from '@/config/use-global-config';
+  import { download } from '@/utils/common';
+  import request from '@/utils/request';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import { useDictData } from '@/utils/use-dict-data';
+  import SearchForm from './components/search-form.vue';
+  import NicknameFilter from './components/nickname-filter.vue';
+  import type { User, UserParam } from '@/api/system/user/model';
+  import { pageUsers, listUsers } from '@/api/system/user';
+
+  defineOptions({ name: 'ListBasic' });
+
+  const { t } = useI18n();
+  const { push } = useRouter();
+  const { addPageTab } = usePageTab();
+
+  /** 性别字典数据 */
+  const [sexDicts] = useDictData(['sex']);
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 用户名筛选值 */
+  const nicknameFilterValue = ref('');
+
+  /** 表格搜索参数 */
+  const lastWhere = reactive<UserParam>({});
+
+  /** 表格列配置 */
+  const columns = computed<Columns>(() => {
+    return [
+      {
+        type: 'selection',
+        columnKey: 'selection',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        type: 'index',
+        columnKey: 'index',
+        width: 50,
+        align: 'center' /* ,
+        fixed: 'left' */
+      },
+      {
+        columnKey: 'avatar',
+        prop: 'avatar',
+        label: t('list.basic.table.avatar'),
+        width: 100,
+        align: 'center',
+        slot: 'avatar',
+        className: 'demo-table-cell-avatar'
+      },
+      {
+        prop: 'username',
+        label: t('list.basic.table.username'),
+        minWidth: 110,
+        sortable: 'custom'
+      },
+      {
+        prop: 'nickname',
+        label: t('list.basic.table.nickname'),
+        minWidth: 110,
+        sortable: 'custom',
+        headerSlot: 'nicknameHeader'
+      },
+      {
+        columnKey: 'roles',
+        label: t('list.basic.table.roles'),
+        minWidth: 110,
+        slot: 'roles',
+        hideInTable: true,
+        formatter: (row) => row.roles.map((d: any) => d.roleName).join(',')
+      },
+      {
+        prop: 'organizationName',
+        label: t('list.basic.table.organizationName'),
+        minWidth: 110,
+        sortable: 'custom'
+      },
+      {
+        prop: 'phone',
+        label: t('list.basic.table.phone'),
+        minWidth: 120,
+        align: 'center',
+        sortable: 'custom',
+        hideInTable: true
+      },
+      {
+        prop: 'email',
+        label: t('list.basic.table.email'),
+        minWidth: 120,
+        sortable: 'custom',
+        hideInTable: true
+      },
+      {
+        columnKey: 'sex',
+        prop: 'sexName',
+        label: t('list.basic.table.sexName'),
+        width: 110,
+        align: 'center',
+        sortable: 'custom',
+        filters: sexDicts.value.map((d) => {
+          return { text: d.dictDataName, value: d.dictDataCode };
+        }),
+        filterMultiple: false
+      },
+      {
+        prop: 'createTime',
+        label: t('list.basic.table.createTime'),
+        minWidth: 200,
+        align: 'center',
+        sortable: 'custom'
+      },
+      {
+        prop: 'status',
+        label: t('list.basic.table.status'),
+        width: 110,
+        sortable: 'custom',
+        align: 'center',
+        slot: 'status',
+        filters: [
+          { text: '正常', value: '0' },
+          { text: '冻结', value: '1' }
+        ],
+        filterMultiple: false,
+        formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+      },
+      {
+        columnKey: 'action',
+        label: t('list.basic.table.action'),
+        width: 130,
+        align: 'center',
+        showOverflowTooltip: false,
+        resizable: false,
+        slot: 'action' /* ,
+        fixed: 'right' */,
+        hideInPrint: true,
+        hideInExport: true
+      }
+    ];
+  });
+
+  /** 表格选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 表格单选选中数据 */
+  const current = ref<User | null>(null);
+
+  /** 表格是否显示边框 */
+  const bordered = ref(true);
+
+  /** 表头工具栏风格 */
+  const toolDefault = ref(true);
+
+  /** 表格固定高度 */
+  const fixedHeight = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({
+    pages,
+    where,
+    orders,
+    filters
+  }) => {
+    return pageUsers({ ...where, ...orders, ...filters, ...pages });
+  };
+
+  /** 表格数据请求完成事件 */
+  const handleDone: DoneFunction<User> = () => {
+    // 回显 id 为 45、47、48 的数据的复选框
+    nextTick(() => {
+      const ids = [45, 47, 48];
+      tableRef.value?.setSelectedRowKeys?.(ids);
+    });
+  };
+
+  /** 搜索事件 */
+  const handleSearch = (where: UserParam) => {
+    Object.assign(lastWhere, where);
+    doReload();
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: UserParam) => {
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 清空选择 */
+  const clearChoose = () => {
+    tableRef.value?.clearSelection?.();
+  };
+
+  /** 编辑 */
+  const openEdit = (row?: User) => {
+    const path = row ? `/list/basic/edit/${row.userId}` : '/list/basic/add';
+    if (row) {
+      addPageTab({
+        title: `修改用户[${row.nickname}]`,
+        key: path,
+        closable: true,
+        meta: { icon: 'LinkOutlined' }
+      });
+    }
+    push(path);
+  };
+
+  /** 删除 */
+  const remove = (row: User) => {
+    ElMessageBox.confirm(`确定要删除“${row.username}”吗?`, '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        EleMessage.success({ message: '点击了删除', plain: true });
+      })
+      .catch(() => {});
+  };
+
+  /** 下拉按钮点击 */
+  const handleDropClick = (command: string) => {
+    if (command === 'del') {
+      EleMessage.error({ message: '点击了批量删除', plain: true });
+    } else if (command === 'edit') {
+      EleMessage.info({ message: '点击了批量修改', plain: true });
+    } else if (command === 'disabled') {
+      EleMessage.info({ message: '点击了批量禁用', plain: true });
+    }
+  };
+
+  /** 表格搜索 */
+  const doReload = () => {
+    if (nicknameFilterValue.value) {
+      reload({
+        ...lastWhere,
+        nickname: nicknameFilterValue.value
+      });
+    } else {
+      reload(lastWhere);
+    }
+  };
+
+  /** 用户名筛选事件 */
+  const handleNicknameFilter = (nickname: string) => {
+    nicknameFilterValue.value = nickname;
+    doReload();
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders, filters }) => {
+    return listUsers({ ...where, ...orders, ...filters });
+  };
+
+  /** 导出配置 */
+  const exportConfig = reactive<ExportConfig>({
+    fileName: '基础列表数据',
+    datasource: exportSource,
+    beforeExport: (params) => {
+      const { fileName, closeModal, bodyCols, bodyData, headerData } = params;
+      const workbook = getExportWorkbook(params);
+      const sheet = workbook.getWorksheet('Sheet1');
+
+      const getBuffer = async () => {
+        // 添加头像列图片
+        const avatarColIndex = bodyCols.findIndex(
+          (c) => c.dataKey === 'avatar'
+        );
+        if (sheet != null && avatarColIndex !== -1) {
+          const avatarBuffers = await Promise.all(
+            bodyData.map(async (row) => {
+              const url = row[avatarColIndex].text as string | undefined;
+              if (!url) {
+                return;
+              }
+              const res = await request({ url, responseType: 'arraybuffer' });
+              return res.data;
+            })
+          );
+          avatarBuffers.forEach((buffer, index) => {
+            const rowIndex = index + headerData.length;
+            if (buffer != null) {
+              const imgId = workbook.addImage({ buffer, extension: 'png' });
+              sheet.addImage(imgId, {
+                tl: { col: avatarColIndex + 0.4, row: rowIndex + 0.2 },
+                ext: { width: 48, height: 48 }
+              });
+              sheet.getCell(rowIndex + 1, avatarColIndex + 1).value = '';
+            }
+            sheet.getRow(rowIndex + 1).height = 42;
+            sheet.getColumn(avatarColIndex + 1).width = 8;
+          });
+        }
+        // 输出workbook
+        const data = await workbook.xlsx.writeBuffer();
+        return data;
+      };
+
+      getBuffer().then((data) => {
+        download(data, `${fileName}.xlsx`);
+        closeModal();
+      });
+      return false;
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .demo-table :deep(td.demo-table-cell-avatar) {
+    padding: 0;
+    font-size: 0;
+  }
+</style>
diff --git a/z_ele/src/views/list/build/index.vue b/z_ele/src/views/list/build/index.vue
new file mode 100644
index 0000000..a539369
--- /dev/null
+++ b/z_ele/src/views/list/build/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <ele-page flex-table hide-footer :multi-card="false">
+    <ele-card flex-table :body-style="{ padding: 0, overflow: 'hidden' }">
+      <pro-crud-builder v-model="config" />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleCrudProps } from 'ele-admin-plus/es/ele-app/plus';
+  import ProCrudBuilder from '@/components/ProCrudBuilder/index.vue';
+
+  defineOptions({ name: 'ListBuild' });
+
+  const config = ref<EleCrudProps>({});
+</script>
diff --git a/z_ele/src/views/list/card/application/index.vue b/z_ele/src/views/list/card/application/index.vue
new file mode 100644
index 0000000..95a1210
--- /dev/null
+++ b/z_ele/src/views/list/card/application/index.vue
@@ -0,0 +1,244 @@
+<template>
+  <ele-page :multi-card="false">
+    <top-search shadow="always" />
+    <el-row :gutter="16">
+      <el-col
+        v-for="item in data"
+        :key="item.id"
+        :lg="6"
+        :md="8"
+        :sm="12"
+        :xs="24"
+      >
+        <ele-card
+          :body-style="{ padding: 0 }"
+          style="margin-top: 16px"
+          shadow="always"
+        >
+          <div style="padding: 24px">
+            <div style="display: flex; align-items: center">
+              <el-avatar :size="40" :src="item.cover" style="flex-shrink: 0" />
+              <ele-text size="md" style="flex: 1; padding-left: 12px">
+                {{ item.title }}
+              </ele-text>
+            </div>
+            <ele-ellipsis style="margin-top: 16px">
+              网址: {{ item.url }}
+            </ele-ellipsis>
+            <ele-ellipsis style="margin-top: 6px">
+              最后更新时间: {{ item.time }}
+            </ele-ellipsis>
+          </div>
+          <el-divider style="margin: 0; opacity: 0.48" />
+          <div class="list-item-footer">
+            <ele-tooltip placement="top" content="分享" :offset="-8">
+              <ele-text
+                :icon="Share"
+                type="secondary"
+                class="list-item-tool"
+                :icon-props="{
+                  style: { transform: 'scale(1.08)', opacity: 0.88 }
+                }"
+              />
+            </ele-tooltip>
+            <el-divider direction="vertical" style="margin: 0; opacity: 0.8" />
+            <ele-tooltip placement="top" content="设置" :offset="-8">
+              <ele-text
+                :icon="Tools"
+                type="secondary"
+                class="list-item-tool"
+                :icon-props="{ style: { opacity: 0.88 } }"
+              />
+            </ele-tooltip>
+            <el-divider direction="vertical" style="margin: 0; opacity: 0.8" />
+            <ele-tooltip placement="top" content="删除" :offset="-8">
+              <ele-text
+                :icon="DeleteFilled"
+                type="secondary"
+                class="list-item-tool"
+                :icon-props="{
+                  style: { transform: 'scale(0.96)', opacity: 0.88 }
+                }"
+              />
+            </ele-tooltip>
+            <el-divider direction="vertical" style="margin: 0; opacity: 0.8" />
+            <ele-dropdown
+              :items="[
+                { title: '1st menu item', command: '1st' },
+                { title: '2nd menu item', command: '2nd' },
+                { title: '3rd menu item', command: '3rd' }
+              ]"
+              class="list-item-tool"
+              style="padding: 0"
+              :popper-options="{
+                modifiers: [{ name: 'offset', options: { offset: [0, -4] } }]
+              }"
+            >
+              <ele-text
+                :icon="MoreFilled"
+                type="secondary"
+                class="list-item-tool-trigger"
+                :icon-props="{
+                  style: { transform: 'scale(1.18)', opacity: 0.88 }
+                }"
+              />
+            </ele-dropdown>
+          </div>
+        </ele-card>
+      </el-col>
+    </el-row>
+    <ele-pagination
+      :total="count"
+      v-model:page-size="limit"
+      v-model:current-page="page"
+      layout="prev, pager, next"
+      :style="{
+        marginTop: '18px',
+        justifyContent: 'center',
+        '--ele-pagination-hover-bg': 'transparent',
+        '--ele-pagination-hover-color': 'var(--el-color-primary)'
+      }"
+    />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    Tools,
+    DeleteFilled,
+    Share,
+    MoreFilled
+  } from '@element-plus/icons-vue';
+  import TopSearch from '../project/components/top-search.vue';
+
+  defineOptions({ name: 'ListCardApplication' });
+
+  interface Item {
+    id: number;
+    title: string;
+    url: string;
+    time: string;
+    cover: string;
+  }
+
+  /** 数据 */
+  const data = ref<Item[]>([]);
+
+  /** 第几页 */
+  const page = ref(1);
+
+  /** 每页多少条 */
+  const limit = ref(8);
+
+  /** 总数量 */
+  const count = ref(0);
+
+  /** 查询数据 */
+  const query = () => {
+    count.value = 40;
+    data.value = [
+      {
+        id: 1,
+        title: 'ElementUI',
+        url: 'https://element.eleme.cn',
+        time: '2 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+      },
+      {
+        id: 2,
+        title: 'Vue.js',
+        url: 'https://cn.vuejs.org',
+        time: '4 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
+      },
+      {
+        id: 3,
+        title: 'Vuex',
+        url: 'https://vuex.vuejs.org',
+        time: '12 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+      },
+      {
+        id: 4,
+        title: 'Vue Router',
+        url: 'https://vuex.vuejs.org',
+        time: '14 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
+      },
+      {
+        id: 5,
+        title: 'Sass',
+        url: 'https://www.sass.hk',
+        time: '10 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+      },
+      {
+        id: 6,
+        title: 'Axios',
+        url: 'http://www.axios-js.com',
+        time: '16 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/faa0202700ee455b90fe77d8bef98bc0.jpg'
+      },
+      {
+        id: 7,
+        title: 'Webpack',
+        url: 'https://www.webpackjs.com',
+        time: '6 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/d3519518b00d42d3936b2ab5ce3a4cc3.jpg'
+      },
+      {
+        id: 8,
+        title: 'Node.js',
+        url: 'https://nodejs.org/',
+        time: '8 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg'
+      }
+    ];
+  };
+
+  query();
+</script>
+
+<style lang="scss" scoped>
+  .list-item-footer {
+    display: flex;
+    align-items: center;
+
+    .list-item-tool {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      transition: color 0.2s;
+      box-sizing: border-box;
+      font-size: 16px;
+      padding: 16px 0;
+      cursor: pointer;
+
+      .list-item-tool-trigger {
+        width: 100%;
+        padding: 16px 0;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        outline: none;
+      }
+
+      &:hover {
+        color: var(--el-color-primary);
+
+        .list-item-tool-trigger {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/card/article/components/img-grid.vue b/z_ele/src/views/list/card/article/components/img-grid.vue
new file mode 100644
index 0000000..43738c9
--- /dev/null
+++ b/z_ele/src/views/list/card/article/components/img-grid.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="demo-img-grid">
+    <el-image
+      v-for="(item, index) in images"
+      :key="item"
+      fit="cover"
+      :src="item"
+      :style="{
+        width: '100%',
+        height: '100%',
+        cursor: 'zoom-in'
+      }"
+      @click="openPreview(index)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps<{
+    images: string[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'preview', images: string[], index: number): void;
+  }>();
+
+  const openPreview = (index: number) => {
+    emit('preview', props.images, index);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .demo-img-grid {
+    display: grid;
+    grid-gap: 3px 3px;
+    grid-template-columns: repeat(3, 1fr);
+    height: 100%;
+    padding: 4px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid var(--el-border-color-light);
+
+    :deep(.el-image) {
+      transition: all 0.2s;
+
+      &:hover {
+        filter: brightness(0.8);
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/card/article/index.vue b/z_ele/src/views/list/card/article/index.vue
new file mode 100644
index 0000000..53e2112
--- /dev/null
+++ b/z_ele/src/views/list/card/article/index.vue
@@ -0,0 +1,351 @@
+<template>
+  <ele-page>
+    <top-search />
+    <ele-card :body-style="{ padding: '16px 8px' }">
+      <div class="article-list">
+        <div v-for="item in data" :key="item.id" class="list-item">
+          <div class="list-item-body">
+            <div style="flex: 1">
+              <ele-text size="md">{{ item.title }}</ele-text>
+              <div style="margin-top: 8px; display: flex; align-items: center">
+                <el-tag
+                  v-for="tag in item.tags"
+                  :key="tag"
+                  type="info"
+                  size="small"
+                  :disable-transitions="true"
+                  style="margin-right: 8px"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              <div style="margin-top: 16px">{{ item.content }}</div>
+              <div style="margin-top: 16px; display: flex; align-items: center">
+                <el-avatar :src="item.avatar" :size="24" />
+                <ele-text type="secondary" style="flex: 1; padding-left: 6px">
+                  {{ item.user }} 发表于 {{ item.time }}
+                </ele-text>
+              </div>
+              <div style="margin-top: 16px; display: flex; align-items: center">
+                <ele-text
+                  :icon="Star"
+                  type="placeholder"
+                  style="cursor: pointer"
+                >
+                  &nbsp;{{ item.likes }}
+                </ele-text>
+                <el-divider direction="vertical" style="margin: 0 14px" />
+                <ele-text
+                  :icon="CollectionTag"
+                  type="placeholder"
+                  style="cursor: pointer"
+                >
+                  &nbsp;{{ item.favorites }}
+                </ele-text>
+                <el-divider direction="vertical" style="margin: 0 14px" />
+                <ele-text
+                  :icon="ChatLineSquare"
+                  type="placeholder"
+                  style="cursor: pointer"
+                >
+                  &nbsp;{{ item.comments }}
+                </ele-text>
+              </div>
+            </div>
+            <div class="list-item-extra">
+              <img-grid :images="item.covers" @preview="openPreview" />
+            </div>
+          </div>
+          <el-divider style="margin: 0; opacity: 0.6" />
+        </div>
+      </div>
+      <div style="margin-top: 16px; text-align: center">
+        <el-button v-if="page !== 1" :loading="loading" @click="query">
+          {{ loading ? '加载中..' : '加载更多' }}
+        </el-button>
+      </div>
+      <ele-image-viewer
+        v-model="showImageViewer"
+        :urlList="viewerImages"
+        :initialIndex="viewerIndex"
+        :infinite="false"
+      />
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Star, CollectionTag, ChatLineSquare } from '@element-plus/icons-vue';
+  import { random } from 'ele-admin-plus';
+  import TopSearch from '../project/components/top-search.vue';
+  import ImgGrid from './components/img-grid.vue';
+
+  defineOptions({ name: 'ListCardArticle' });
+
+  interface Item {
+    id: number;
+    title: string;
+    content: string;
+    time: string;
+    covers: string[];
+    tags: string[];
+    user: string;
+    avatar: string;
+    favorites: number;
+    likes: number;
+    comments: number;
+  }
+
+  /** 请求状态 */
+  const loading = ref(false);
+
+  /** 列表数据 */
+  const data = ref<Item[]>([]);
+
+  /** 当前页码 */
+  const page = ref(2);
+
+  /** 是否打开图片预览 */
+  const showImageViewer = ref(false);
+
+  /** 图片预览数据 */
+  const viewerImages = ref<string[]>([]);
+
+  /** 图片预览初始位置 */
+  const viewerIndex = ref(0);
+
+  /** 加载下一页 */
+  const query = () => {
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+      page.value++;
+      data.value = data.value.concat(
+        data.value.slice(0, 3).map((d, i) => {
+          return {
+            ...d,
+            id: data.value.length + i + 1,
+            covers: randomCovers()
+          };
+        })
+      );
+    }, 1000);
+  };
+
+  /** 打开图片预览 */
+  const openPreview = (images: string[], index: number) => {
+    viewerImages.value = images;
+    viewerIndex.value = index;
+    showImageViewer.value = true;
+  };
+
+  const randomCovers = () => {
+    const urls = [
+      'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
+      'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+      'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
+      'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
+      'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
+      'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
+      'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
+      'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
+      'https://cdn.eleadmin.com/20200609/0568caaf0a7e41dda2d901d4ac2f3243.jpg',
+      'https://cdn.eleadmin.com/20200609/0bfaa58e801b47fb9f56dcb128206d94.jpg',
+      'https://cdn.eleadmin.com/20200609/12b3d575a2a24e0789a014bd6ce7585b.jpg',
+      'https://cdn.eleadmin.com/20200609/21222950dc174485b2ec5088435a46a3.jpg',
+      'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
+      'https://cdn.eleadmin.com/20200609/3cc0f65fefbe448191aa728d80f6b97e.jpg',
+      'https://cdn.eleadmin.com/20200609/41d81834e87546f49d3ff48c3806ea92.jpg',
+      'https://cdn.eleadmin.com/20200609/4e60a84551fa48439bf42ecdb9673331.jpg',
+      'https://cdn.eleadmin.com/20200609/66e6f6c60cfa44b288d6343027b544d0.jpg',
+      'https://cdn.eleadmin.com/20200609/8931360b593040238d894a542c9037bc.jpg',
+      'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
+      'https://cdn.eleadmin.com/20200609/adb3ad5e05614fd2a59cf886ffc37f74.jpg',
+      'https://cdn.eleadmin.com/20200609/b3ce64e10db7497b8b9f5a31df1b4eb2.jpg',
+      'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
+      'https://cdn.eleadmin.com/20200609/be7dc0c24fc342fda44e12a2c2a2b7bb.jpg',
+      'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
+      'https://cdn.eleadmin.com/20200609/d3519518b00d42d3936b2ab5ce3a4cc3.jpg',
+      'https://cdn.eleadmin.com/20200609/d6442cfa99b64b51aabfc470055b05dc.jpg',
+      'https://cdn.eleadmin.com/20200609/e36594e7423147748b2592ccb720ae9e.jpg',
+      'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
+      'https://cdn.eleadmin.com/20200609/faa0202700ee455b90fe77d8bef98bc0.jpg',
+      'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg'
+    ];
+    const covers: string[] = [];
+    for (let i = 0; i < 6; i++) {
+      const index = random(0, urls.length);
+      const url = urls[index];
+      urls.splice(index, 1);
+      covers.push(url);
+    }
+    return covers;
+  };
+
+  data.value = [
+    {
+      id: 1,
+      title: 'ElementUI',
+      content:
+        'Element, 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库, 提供了配套设计资源, 帮助你的网站快速成型。',
+      time: '2 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: 'SunSmile',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 2,
+      title: 'Vue.js',
+      content:
+        'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。',
+      time: '4 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: '你的名字很好听',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 3,
+      title: 'Vuex',
+      content:
+        'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。',
+      time: '12 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: '全村人的希望',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 4,
+      title: 'Vue Router',
+      content:
+        'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成, 让构建单页面应用变得易如反掌。',
+      time: '14 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: 'Jasmine',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 5,
+      title: 'Sass',
+      content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
+      time: '10 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: '酷酷的大叔',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 6,
+      title: 'Axios',
+      content:
+        'Axios 是一个基于 promise 的 HTTP 库, 可以用在浏览器和 node.js 中。',
+      time: '16 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: 'SunSmile',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 7,
+      title: 'Webpack',
+      content:
+        'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起, 打包后的文件用于在浏览器中使用。',
+      time: '6 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: '全村人的希望',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    },
+    {
+      id: 8,
+      title: 'Node.js',
+      content:
+        'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型, 使其轻量又高效。',
+      time: '8 小时前',
+      covers: randomCovers(),
+      tags: ['EleAdminPro', 'UI框架', '设计语言'],
+      user: 'Jasmine',
+      avatar:
+        'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
+      favorites: 104,
+      likes: 189,
+      comments: 15
+    }
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .list-item-body {
+    display: flex;
+    padding: 16px 24px;
+  }
+
+  .list-item-extra {
+    width: 280px;
+    height: 175px;
+    margin-left: 12px;
+
+    :deep(.el-image) {
+      height: calc((175px - 2px - 4px - 3px) / 2) !important;
+    }
+  }
+
+  @media screen and (max-width: 880px) {
+    .list-item-extra {
+      width: 200px;
+      height: 125px;
+
+      :deep(.el-image) {
+        height: calc((125px - 2px - 4px - 3px) / 2) !important;
+      }
+    }
+  }
+
+  @media screen and (max-width: 576px) {
+    .list-item-body {
+      display: block;
+    }
+
+    .list-item-extra {
+      width: 100%;
+      height: 200px;
+      margin: 16px 0 0 0;
+
+      :deep(.el-image) {
+        height: calc((200px - 2px - 4px - 3px) / 2) !important;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/card/project/components/top-search.vue b/z_ele/src/views/list/card/project/components/top-search.vue
new file mode 100644
index 0000000..dcad838
--- /dev/null
+++ b/z_ele/src/views/list/card/project/components/top-search.vue
@@ -0,0 +1,47 @@
+<template>
+  <ele-card :shadow="shadow">
+    <div class="top-search">
+      <el-input v-model="keyword" placeholder="请输入内容" />
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+    </div>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { CardProps } from 'element-plus';
+
+  defineProps<{
+    shadow?: CardProps['shadow'];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', value: string): void;
+  }>();
+
+  const keyword = ref('');
+
+  const handleSearch = () => {
+    emit('search', keyword.value);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .top-search {
+    max-width: 480px;
+    margin: 24px auto;
+    display: flex;
+
+    :deep(.el-input__wrapper) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .el-button {
+      margin-left: -1px;
+      position: relative;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/list/card/project/index.vue b/z_ele/src/views/list/card/project/index.vue
new file mode 100644
index 0000000..a002a8f
--- /dev/null
+++ b/z_ele/src/views/list/card/project/index.vue
@@ -0,0 +1,304 @@
+<template>
+  <ele-page :multi-card="false">
+    <top-search />
+    <el-row :gutter="16">
+      <el-col
+        v-for="item in data"
+        :key="item.id"
+        :lg="6"
+        :md="8"
+        :sm="12"
+        :xs="24"
+      >
+        <ele-card
+          shadow="hover"
+          :body-style="{ padding: 0 }"
+          style="margin-top: 16px; overflow: hidden; cursor: pointer"
+        >
+          <img :src="item.cover" style="width: 100%" />
+          <div style="padding: 14px 24px 24px 24px">
+            <ele-text size="md" style="max-height: 100%">
+              {{ item.title }}
+            </ele-text>
+            <ele-ellipsis
+              :max-line="2"
+              type="placeholder"
+              style="margin: 8px 0 16px 0; max-height: 100%"
+            >
+              {{ item.content }}
+            </ele-ellipsis>
+            <div style="display: flex; align-items: center">
+              <ele-text type="placeholder" style="flex: 1">
+                {{ item.time }}
+              </ele-text>
+              <ele-avatar-group
+                size="small"
+                :data="item.users"
+                style="flex-shrink: 0"
+              />
+            </div>
+          </div>
+        </ele-card>
+      </el-col>
+    </el-row>
+    <ele-pagination
+      :total="count"
+      v-model:page-size="limit"
+      v-model:current-page="page"
+      layout="prev, pager, next"
+      prev-text="上一页"
+      next-text="下一页"
+      :style="{
+        marginTop: '18px',
+        justifyContent: 'center',
+        '--ele-pagination-hover-bg': 'transparent',
+        '--ele-pagination-hover-color': 'var(--el-color-primary)'
+      }"
+    />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { AvatarItem } from 'ele-admin-plus/es/ele-avatar-group/types';
+  import TopSearch from './components/top-search.vue';
+
+  defineOptions({ name: 'ListCardProject' });
+
+  interface Item {
+    id: number;
+    title: string;
+    content: string;
+    time: string;
+    cover: string;
+    users: AvatarItem[];
+  }
+
+  /** 数据 */
+  const data = ref<Item[]>([]);
+
+  /** 第几页 */
+  const page = ref(1);
+
+  /** 每页多少条 */
+  const limit = ref(8);
+
+  /** 总数量 */
+  const count = ref(0);
+
+  /** 查询数据 */
+  const query = () => {
+    count.value = 40;
+    data.value = [
+      {
+        id: 1,
+        title: 'ElementUI',
+        content:
+          'Element, 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库, 提供了配套设计资源, 帮助你的网站快速成型。',
+        time: '2 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 2,
+        title: 'Vue.js',
+        content:
+          'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。',
+        time: '4 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 3,
+        title: 'Vuex',
+        content:
+          'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。',
+        time: '12 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 4,
+        title: 'Vue Router',
+        content:
+          'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成, 让构建单页面应用变得易如反掌。',
+        time: '14 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 5,
+        title: 'Sass',
+        content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
+        time: '10 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 6,
+        title: 'Axios',
+        content:
+          'Axios 是一个基于 promise 的 HTTP 库, 可以用在浏览器和 node.js 中。',
+        time: '16 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 7,
+        title: 'Webpack',
+        content:
+          'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起, 打包后的文件用于在浏览器中使用。',
+        time: '6 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      },
+      {
+        id: 8,
+        title: 'Node.js',
+        content:
+          'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型, 使其轻量又高效。',
+        time: '8 小时前',
+        cover:
+          'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
+        users: [
+          {
+            label: 'SunSmile',
+            value:
+              'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
+          },
+          {
+            label: '酷酷的大叔',
+            value:
+              'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
+          },
+          {
+            label: 'Jasmine',
+            value:
+              'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
+          }
+        ]
+      }
+    ];
+  };
+
+  query();
+</script>
diff --git a/z_ele/src/views/list/user/components/user-edit.vue b/z_ele/src/views/list/user/components/user-edit.vue
new file mode 100644
index 0000000..4b49c3e
--- /dev/null
+++ b/z_ele/src/views/list/user/components/user-edit.vue
@@ -0,0 +1,268 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="640"
+    v-model="visible"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-row :gutter="16">
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="所属机构">
+            <organization-select v-model="form.organizationId" />
+          </el-form-item>
+          <el-form-item label="用户账号" prop="username">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.username"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+          <el-form-item label="用户名" prop="nickname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.nickname"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <dict-data code="sex" v-model="form.sex" placeholder="请选择性别" />
+          </el-form-item>
+          <el-form-item label="角色" prop="roles">
+            <role-select v-model="form.roles" />
+          </el-form-item>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="手机号" prop="phone">
+            <el-input
+              clearable
+              :maxlength="11"
+              v-model="form.phone"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.email"
+              placeholder="请输入邮箱"
+            />
+          </el-form-item>
+          <el-form-item v-if="!isUpdate" label="登录密码" prop="password">
+            <el-input
+              show-password
+              type="password"
+              :maxlength="20"
+              v-model="form.password"
+              placeholder="请输入登录密码"
+            />
+          </el-form-item>
+          <el-form-item label="个人简介">
+            <el-input
+              type="textarea"
+              :rows="3"
+              :maxlength="200"
+              v-model="form.introduction"
+              placeholder="请输入个人简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage, emailReg, phoneReg } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import RoleSelect from '@/views/system/user/components/role-select.vue';
+  import OrganizationSelect from '@/views/system/organization/components/organization-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: User | null;
+    /** 添加时机构id */
+    organizationId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<User>({
+    userId: void 0,
+    organizationId: void 0,
+    username: '',
+    nickname: '',
+    sex: void 0,
+    roles: [],
+    email: '',
+    phone: '',
+    password: '',
+    introduction: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    username: [
+      {
+        required: true,
+        message: '请输入用户账号',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        min: 4,
+        message: '账号长度最少为4位',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          checkExistence('username', value, props.data?.userId)
+            .then(() => {
+              callback(new Error('账号已经存在'));
+            })
+            .catch(() => {
+              callback();
+            });
+        }
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入用户名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        message: '请输入登录密码',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return callback();
+          }
+          callback(new Error('密码必须为5-18位非空白字符'));
+        }
+      }
+    ],
+    phone: [
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields({ ...props.data, password: '' });
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        form.organizationId = props.organizationId;
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/list/user/components/user-list.vue b/z_ele/src/views/list/user/components/user-list.vue
new file mode 100644
index 0000000..9bb16cd
--- /dev/null
+++ b/z_ele/src/views/list/user/components/user-list.vue
@@ -0,0 +1,359 @@
+<template>
+  <user-search ref="searchRef" style="margin-bottom: -14px" @search="reload" />
+  <ele-pro-table
+    ref="tableRef"
+    row-key="userId"
+    :columns="columns"
+    :datasource="datasource"
+    :show-overflow-tooltip="true"
+    v-model:selections="selections"
+    :highlight-current-row="true"
+    :export-config="{ fileName: '用户数据', datasource: exportSource }"
+    :print-config="{ datasource: exportSource }"
+    :style="{ paddingBottom: '16px' }"
+    cache-key="listUserTable"
+  >
+    <template #toolbar>
+      <el-button
+        type="primary"
+        class="ele-btn-icon"
+        :icon="PlusOutlined"
+        @click="openEdit()"
+      >
+        添加
+      </el-button>
+      <el-button
+        type="danger"
+        class="ele-btn-icon"
+        :icon="DeleteOutlined"
+        @click="remove()"
+      >
+        删除
+      </el-button>
+    </template>
+    <template #roles="{ row }">
+      <el-tag
+        v-for="item in row.roles"
+        :key="item.roleId"
+        size="small"
+        :disable-transitions="true"
+      >
+        {{ item.roleName }}
+      </el-tag>
+    </template>
+    <template #status="{ row }">
+      <el-switch
+        size="small"
+        :model-value="row.status === 0"
+        @change="(checked: boolean) => editStatus(checked, row)"
+      />
+    </template>
+    <template #action="{ row }">
+      <el-link type="primary" underline="never" @click="openEdit(row)">
+        修改
+      </el-link>
+      <el-divider direction="vertical" />
+      <el-link
+        type="primary"
+        underline="never"
+        @mouseenter="(e: MouseEvent) => openMoreDropdown(e.currentTarget, row)"
+      >
+        <span>更多</span>
+        <el-icon :size="12" style="vertical-align: -1px; margin-left: 2px">
+          <ArrowDown />
+        </el-icon>
+      </el-link>
+    </template>
+  </ele-pro-table>
+  <user-edit
+    :data="current"
+    v-model="showEdit"
+    :organization-id="organizationId"
+    @done="reload"
+  />
+  <ele-dropdown
+    ref="moreDropdownRef"
+    trigger="hover"
+    :triggerKeys="[]"
+    :persistent="false"
+    componentType="pro"
+    :virtualTriggering="true"
+    :virtualRef="moreDropdownVirtualRef"
+    :disabled="!moreDropdownItems.length"
+    :items="moreDropdownItems"
+    @command="handleItemCommand"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, nextTick } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import type { EleDropdownInstance } from 'ele-admin-plus/es/ele-app/plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import { PlusOutlined, DeleteOutlined, ArrowDown } from '@/components/icons';
+  import UserSearch from './user-search.vue';
+  import UserEdit from './user-edit.vue';
+  import {
+    pageUsers,
+    removeUsers,
+    updateUserStatus,
+    updateUserPassword,
+    listUsers
+  } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    /** 机构 id */
+    organizationId?: number;
+  }>();
+
+  /** 搜索栏实例 */
+  const searchRef = ref<InstanceType<typeof UserSearch> | null>(null);
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      width: 90,
+      align: 'center'
+    },
+    {
+      columnKey: 'roles',
+      label: '角色',
+      minWidth: 120,
+      slot: 'roles',
+      align: 'center',
+      formatter: (row) => row.roles.map((d: any) => d.roleName).join(',')
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 90,
+      align: 'center',
+      sortable: 'custom',
+      slot: 'status',
+      formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 128,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 当前编辑数据 */
+  const current = ref<User | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageUsers({
+      ...where,
+      ...orders,
+      ...pages,
+      organizationId: props.organizationId
+    });
+  };
+
+  /** 搜索 */
+  const reload = (where?: UserParam) => {
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 删除 */
+  const remove = (row?: User) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.nickname).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeUsers(rows.map((d) => d.userId))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        EleMessage.success({ message: msg, plain: true });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  // 监听机构 id 变化
+  watch(
+    () => props.organizationId,
+    () => {
+      searchRef.value?.resetFields?.();
+      reload({});
+    }
+  );
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders }) => {
+    return listUsers({
+      ...where,
+      ...orders,
+      organizationId: props.organizationId
+    });
+  };
+
+  /** 下拉菜单组件 */
+  const moreDropdownRef = ref<EleDropdownInstance>(null);
+
+  /** 下拉菜单数据 */
+  const moreDropdownItems = ref<DropdownItem[]>([]);
+
+  /** 下拉菜单虚拟触发节点 */
+  const moreDropdownVirtualRef = ref<any>();
+
+  /** 当前打开的下拉菜单对应的数据 */
+  let moreDropdownCurrentData: User | null = null;
+
+  /** 获取下拉菜单数据 */
+  const getDropdownMenus = (_item: User) => {
+    return [
+      { title: '重置密码', command: 'password' },
+      { title: '删除用户', command: 'delete', divided: true, danger: true }
+    ];
+  };
+
+  /** 打开下拉菜单 */
+  const openMoreDropdown = (triggerEl: any, item: User) => {
+    if (
+      triggerEl == null ||
+      moreDropdownVirtualRef.value === triggerEl ||
+      (moreDropdownCurrentData != null && moreDropdownCurrentData === item)
+    ) {
+      return;
+    }
+    moreDropdownRef.value && moreDropdownRef.value.handleClose();
+    nextTick(() => {
+      moreDropdownCurrentData = item;
+      moreDropdownItems.value = getDropdownMenus(item) || [];
+      moreDropdownVirtualRef.value = triggerEl;
+      if (moreDropdownItems.value.length) {
+        nextTick(() => {
+          moreDropdownRef.value && moreDropdownRef.value.handleOpen();
+        });
+      }
+    });
+  };
+
+  /** 下拉菜单项点击事件 */
+  const handleItemCommand = (command: string) => {
+    if (moreDropdownCurrentData == null) {
+      return;
+    }
+    const row = moreDropdownCurrentData;
+    if (command === 'delete') {
+      remove(row);
+    } else if (command === 'password') {
+      ElMessageBox.prompt(`请输入用户"${row.nickname}"的新密码：`, '重置密码', {
+        inputPattern: /^[\S]{5,18}$/,
+        inputErrorMessage: '密码必须为5-18位非空白字符',
+        draggable: true
+      })
+        .then(({ value }) => {
+          const loading = EleMessage.loading({
+            message: '请求中..',
+            plain: true
+          });
+          updateUserPassword(row.userId, value)
+            .then((msg) => {
+              loading.close();
+              EleMessage.success({ message: msg, plain: true });
+            })
+            .catch((e) => {
+              loading.close();
+              EleMessage.error({ message: e.message, plain: true });
+            });
+        })
+        .catch(() => {});
+    }
+  };
+</script>
diff --git a/z_ele/src/views/list/user/components/user-search.vue b/z_ele/src/views/list/user/components/user-search.vue
new file mode 100644
index 0000000..a28f46c
--- /dev/null
+++ b/z_ele/src/views/list/user/components/user-search.vue
@@ -0,0 +1,65 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+    <el-row :gutter="8">
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="用户账号">
+          <el-input
+            clearable
+            v-model.trim="form.username"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="用户名">
+          <el-input
+            clearable
+            v-model.trim="form.nickname"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="性别">
+          <dict-data code="sex" v-model="form.sex" placeholder="请选择" />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label-width="16px">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sex: void 0
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  defineExpose({ resetFields });
+</script>
diff --git a/z_ele/src/views/list/user/index.vue b/z_ele/src/views/list/user/index.vue
new file mode 100644
index 0000000..db8b3d4
--- /dev/null
+++ b/z_ele/src/views/list/user/index.vue
@@ -0,0 +1,344 @@
+<template>
+  <ele-page
+    flex-table
+    :multi-card="false"
+    hide-footer
+    style="min-height: 420px"
+  >
+    <ele-card
+      flex-table
+      :body-style="{ padding: '0 0 0 16px', overflow: 'hidden' }"
+    >
+      <ele-split-panel
+        flex-table
+        size="256px"
+        allow-collapse
+        v-model:collapse="collapse"
+        :custom-style="{
+          borderWidth: '0 1px 0 0',
+          padding: '16px 0',
+          background: 'none'
+        }"
+        :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
+        :style="{ height: '100%', overflow: 'visible' }"
+      >
+        <div style="padding: 0 16px 12px 0">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="keywords"
+            placeholder="左侧树还支持鼠标右键"
+            :prefix-icon="SearchOutlined"
+          />
+        </div>
+        <div style="margin-bottom: 12px">
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="PlusOutlined"
+            @click="openEdit(void 0, current?.organizationId)"
+          >
+            添加
+          </el-button>
+          <el-button
+            type="warning"
+            :disabled="!current"
+            class="ele-btn-icon"
+            :icon="EditOutlined"
+            @click="openEdit(current)"
+          >
+            修改
+          </el-button>
+          <el-button
+            type="danger"
+            :disabled="!current"
+            class="ele-btn-icon"
+            :icon="DeleteOutlined"
+            @click="remove(current)"
+          >
+            删除
+          </el-button>
+        </div>
+        <ele-loading
+          :loading="loading"
+          :spinner-style="{ background: 'none' }"
+          :style="{ flex: 1, paddingRight: '16px', overflow: 'auto' }"
+        >
+          <el-tree
+            ref="treeRef"
+            :data="data"
+            highlight-current
+            node-key="organizationId"
+            :props="{ label: 'organizationName' }"
+            :expand-on-click-node="false"
+            :default-expand-all="true"
+            :filter-node-method="filterNode"
+            :style="{ '--ele-tree-item-height': '34px' }"
+            @node-click="handleNodeClick"
+            @node-contextmenu="handleTreeContextmenu"
+          >
+            <template #default="scope">
+              <el-icon
+                style="margin-right: 6px; color: #ffd659; font-size: 16px"
+              >
+                <FolderOutlined
+                  v-if="scope.data.children?.length"
+                  style="fill: currentColor"
+                />
+                <FileOutlined
+                  v-else
+                  style="transform: scale(0.9) translateY(1px); color: #faad14"
+                />
+              </el-icon>
+              <span class="el-tree-node__label" style="margin-top: 2px">
+                {{ scope.data.organizationName }}
+              </span>
+            </template>
+          </el-tree>
+        </ele-loading>
+        <template #body>
+          <user-list v-if="current" :organization-id="current.organizationId" />
+        </template>
+      </ele-split-panel>
+    </ele-card>
+    <organization-edit
+      v-model="showEdit"
+      :data="editData"
+      :organization-id="organizationId"
+      :organization-data="data"
+      @done="query"
+    />
+    <ele-dropdown
+      ref="ctxMenuDropdownRef"
+      trigger="contextmenu"
+      :trigger-keys="[]"
+      :icon-props="{ size: 15 }"
+      :popper-options="{
+        strategy: 'fixed',
+        modifiers: [{ name: 'offset', options: { offset: [0, -4] } }]
+      }"
+      :persistent="false"
+      component-type="pro"
+      :prevent-contextmenu="true"
+      :virtual-triggering="true"
+      :virtual-ref="ctxMenuDropdownVirtualRef"
+      :disabled="!ctxMenuDropdownItems.length"
+      :items="ctxMenuDropdownItems"
+      :popper-style="ctxMenuDropdownStyle"
+      @command="handleItemCommand"
+    />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, watch, reactive, markRaw } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import type { ElTree } from 'element-plus';
+  import { EleMessage, toTree, queryChild } from 'ele-admin-plus';
+  import type { EleDropdownInstance } from 'ele-admin-plus/es/ele-app/plus';
+  import type { DropdownItem } from 'ele-admin-plus/es/ele-dropdown/types';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    FolderOutlined,
+    FileOutlined
+  } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import UserList from './components/user-list.vue';
+  import OrganizationEdit from '@/views/system/organization/components/organization-edit.vue';
+  import {
+    listOrganizations,
+    removeOrganization
+  } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  defineOptions({ name: 'ListUser' });
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+
+  /** 分割面板是否折叠 */
+  const collapse = ref(mobile.value);
+
+  /** 树组件 */
+  const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
+
+  /** 加载状态 */
+  const loading = ref(true);
+
+  /** 树形数据 */
+  const data = ref<Organization[]>([]);
+
+  /** 选中数据 */
+  const current = ref<Organization | null>(null);
+
+  /** 机构搜索关键字 */
+  const keywords = ref('');
+
+  /** 是否显示表单弹窗 */
+  const showEdit = ref(false);
+
+  /** 编辑回显数据 */
+  const editData = ref<Organization | null>(null);
+
+  /** 添加时上级 */
+  const organizationId = ref<number>();
+
+  /** 查询 */
+  const query = () => {
+    loading.value = true;
+    listOrganizations()
+      .then((list) => {
+        loading.value = false;
+        data.value = toTree({
+          data: list,
+          idField: 'organizationId',
+          parentIdField: 'parentId'
+        });
+        nextTick(() => {
+          handleNodeClick(data.value[0]);
+        });
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 选择数据 */
+  const handleNodeClick = (row?: Organization) => {
+    // 移动端自动收起左侧
+    if (current.value != null && mobile.value) {
+      collapse.value = true;
+    }
+    if (row && row.organizationId) {
+      current.value = row;
+      treeRef.value?.setCurrentKey?.(row.organizationId);
+    } else {
+      current.value = null;
+    }
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (item?: Organization | null, id?: number) => {
+    editData.value = item ?? null;
+    organizationId.value = id;
+    showEdit.value = true;
+  };
+
+  /** 删除 */
+  const remove = (item?: Organization | null) => {
+    const row = item;
+    if (!row) {
+      return;
+    }
+    ElMessageBox.confirm(`确定要删除“${row.organizationName}”吗?`, '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeOrganization(row.organizationId)
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            query();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 树过滤方法 */
+  const filterNode = (value: string, data: Organization) => {
+    if (value) {
+      return !!(data.organizationName && data.organizationName.includes(value));
+    }
+    return true;
+  };
+
+  /** 树过滤 */
+  watch(keywords, (value) => {
+    treeRef.value?.filter?.(value);
+  });
+
+  query();
+
+  /** 右键菜单组件 */
+  const ctxMenuDropdownRef = ref<EleDropdownInstance>(null);
+
+  /** 右键菜单数据 */
+  const ctxMenuDropdownItems = ref<DropdownItem[]>([]);
+
+  /** 右键菜单虚拟触发节点 */
+  const ctxMenuDropdownVirtualRef = ref<any>();
+
+  /** 当前打开的右键菜单对应的数据 */
+  let ctxMenuCurrentData: Organization | null = null;
+
+  /** 右键菜单调整位置 */
+  const ctxMenuDropdownStyle = reactive({ marginLeft: '0px' });
+
+  /** 获取右键菜单数据 */
+  const getContextMenus = (_item: Organization) => {
+    return [
+      { title: '添加下级', command: 'add', icon: markRaw(PlusOutlined) },
+      { title: '修改机构', command: 'edit', icon: markRaw(EditOutlined) },
+      {
+        title: '删除机构',
+        command: 'del',
+        icon: markRaw(DeleteOutlined),
+        divided: true,
+        danger: true
+      }
+    ];
+  };
+
+  /** 打开右键菜单 */
+  const openCtxMenuDropdown = (triggerEl: any, item: Organization) => {
+    ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleClose();
+    nextTick(() => {
+      ctxMenuCurrentData = item;
+      ctxMenuDropdownItems.value = getContextMenus(item) || [];
+      ctxMenuDropdownVirtualRef.value = triggerEl;
+      if (ctxMenuDropdownItems.value.length) {
+        nextTick(() => {
+          ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+        });
+      }
+    });
+  };
+
+  /** 右键菜单项点击事件 */
+  const handleItemCommand = (command: string) => {
+    if (ctxMenuCurrentData == null) {
+      return;
+    }
+    if (command === 'add') {
+      openEdit(void 0, ctxMenuCurrentData.organizationId);
+    } else if (command === 'edit') {
+      openEdit(ctxMenuCurrentData);
+    } else if (command === 'del') {
+      remove(ctxMenuCurrentData);
+    }
+  };
+
+  /** 树组件右键事件 */
+  const handleTreeContextmenu = (e: MouseEvent, item: Organization) => {
+    const triggerEl = queryChild(
+      e.currentTarget as HTMLElement,
+      'el-tree-node__content'
+    ) as HTMLElement;
+    const rect = triggerEl.getBoundingClientRect();
+    ctxMenuDropdownStyle.marginLeft = `${e.clientX - rect.left - rect.width / 2}px`;
+    openCtxMenuDropdown(triggerEl, item);
+  };
+</script>
diff --git a/z_ele/src/views/list/users/details/index.vue b/z_ele/src/views/list/users/details/index.vue
new file mode 100644
index 0000000..72274f6
--- /dev/null
+++ b/z_ele/src/views/list/users/details/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <ele-page>
+    <ele-card>
+      <div>
+        从“男用户”页面和“女用户”页面点击进入的详情页面是共用的同一个页面,
+        会选中各自对应的“男用户”或“女用户”菜单, 并且会各自KeepAlive.
+      </div>
+      <div style="display: flex; align-items: center; margin-top: 16px">
+        <div style="padding-right: 16px">路由参数</div>
+        <div style="padding-right: 16px">sex: {{ form.sex }}</div>
+        <div>userId: {{ form.userId }}</div>
+      </div>
+      <div style="display: flex; align-items: center; margin-top: 8px">
+        <div style="padding-right: 16px">测试KeepAlive</div>
+        <div style="flex: 1; max-width: 220px">
+          <el-input v-model="text" placeholder="请输入" />
+        </div>
+      </div>
+    </ele-card>
+    <ele-card>
+      <el-descriptions :border="true" :column="1" class="detail-table">
+        <el-descriptions-item label="用户名">
+          <div>{{ form.nickname }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="用户账号">
+          <div>{{ form.username }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="性别">
+          <div>{{ form.sexName }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="手机号">
+          <div>{{ form.phone }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          <div>{{ form.createTime }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineOptions({ name: 'ListUsersDetails' });
+
+  const { setPageTabTitle } = usePageTab();
+
+  const route = useRoute();
+  const paths = route.path.split('/');
+
+  /** 用户信息 */
+  const form = reactive<User>({
+    userId: Number(route.params.id),
+    sex: paths[paths.length - 2],
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    createTime: ''
+  });
+
+  /** 查询详情 */
+  const query = () => {
+    if (!form.userId || isNaN(form.userId)) {
+      return;
+    }
+    getUser(form.userId)
+      .then((data) => {
+        Object.assign(form, data);
+        const sex = form.sex == '1' ? '男' : '女';
+        setPageTabTitle(`${sex}用户详情[${form.nickname}]`);
+      })
+      .catch((e) => {
+        console.error(e.message);
+      });
+  };
+
+  query();
+
+  /** 输入框 */
+  const text = ref('');
+</script>
+
+<style lang="scss" scoped>
+  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
+    width: 108px;
+    text-align: right;
+    font-weight: normal;
+  }
+</style>
diff --git a/z_ele/src/views/list/users/index.vue b/z_ele/src/views/list/users/index.vue
new file mode 100644
index 0000000..9a8732f
--- /dev/null
+++ b/z_ele/src/views/list/users/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <ele-page>
+    <ele-card>
+      <div>
+        “男用户”页面和“女用户”页面是共用的同一个页面,
+        通过获取路由参数展示不同的数据, 并且会各自KeepAlive.
+      </div>
+      <div style="display: flex; align-items: center; margin-top: 16px">
+        <div style="padding-right: 16px">路由参数</div>
+        <div>sex: {{ userType }}</div>
+      </div>
+      <div style="display: flex; align-items: center; margin-top: 8px">
+        <div style="padding-right: 16px">测试KeepAlive</div>
+        <div style="flex: 1; max-width: 220px">
+          <el-input v-model="text" placeholder="请输入" />
+        </div>
+      </div>
+    </ele-card>
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="userId"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        :highlight-current-row="true"
+        :pagination="{ pageSize: 5, pageSizes: [5, 10, 20] }"
+        :export-config="{
+          fileName: (userType == '1' ? '男' : '女') + '用户数据',
+          datasource: exportSource
+        }"
+        :print-config="{ datasource: exportSource }"
+        :cache-key="'listUsersTable-' + userType"
+      >
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click="openDetail(row)">
+            查看用户详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import { pageUsers, listUsers } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineOptions({ name: 'ListUsers' });
+
+  const { push } = useRouter();
+  const { path } = useRoute();
+  const { addPageTab } = usePageTab();
+  /** 获取用户性别类型 */
+  const userType = path.substring(path.lastIndexOf('/') + 1);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 120,
+      align: 'center'
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 120,
+      align: 'center'
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      width: 90,
+      align: 'center'
+    },
+    {
+      prop: 'phone',
+      label: '手机号',
+      sortable: 'custom',
+      minWidth: 140,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      minWidth: 200,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 160,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, orders }) => {
+    return pageUsers({ ...orders, ...pages, sex: userType });
+  };
+
+  /** 输入框 */
+  const text = ref('');
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ orders }) => {
+    return listUsers({ ...orders, sex: userType });
+  };
+
+  /** 查看详情 */
+  const openDetail = (row: User) => {
+    const path = `/list/users/details/${userType}/${row.userId}`;
+    const sex = userType == '1' ? '男' : '女';
+    addPageTab({
+      title: `${sex}用户详情[${row.nickname}]`,
+      key: path,
+      closable: true,
+      meta: { icon: 'LinkOutlined' }
+    });
+    push(path);
+  };
+</script>
diff --git a/z_ele/src/views/login/index.vue b/z_ele/src/views/login/index.vue
new file mode 100644
index 0000000..efcb79c
--- /dev/null
+++ b/z_ele/src/views/login/index.vue
@@ -0,0 +1,428 @@
+<template>
+  <div class="login-wrapper">
+    <div class="login-main">
+      <ele-card shadow="always" class="login-card">
+        <div class="login-cover">
+          <h1 class="login-title">EleAdmin Plus</h1>
+          <h4 class="login-subtitle">界面美观组件丰富的中后台前端解决方案</h4>
+        </div>
+        <div class="login-body">
+          <ele-text type="heading" style="font-size: 24px; margin-bottom: 18px">
+            {{ t('login.title') }}
+          </ele-text>
+          <ele-segmented
+            v-model="tabActive"
+            :items="[
+              { label: t('login.passwordType'), value: 1 },
+              { label: t('login.qrcodeType'), value: 2 }
+            ]"
+            style="margin-bottom: 18px"
+            @change="handleTabChange"
+          />
+          <el-form
+            v-if="tabActive == 1"
+            ref="formRef"
+            size="large"
+            :model="form"
+            :rules="rules"
+            @keyup.enter="submit"
+            @submit.prevent=""
+          >
+            <el-form-item prop="username">
+              <el-input
+                clearable
+                v-model="form.username"
+                :placeholder="t('login.username')"
+                :prefix-icon="UserOutlined"
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                show-password
+                v-model="form.password"
+                :placeholder="t('login.password')"
+                :prefix-icon="LockOutlined"
+              />
+            </el-form-item>
+            <el-form-item prop="code">
+              <div class="login-captcha-group">
+                <el-input
+                  clearable
+                  v-model="form.code"
+                  :placeholder="t('login.code')"
+                  :prefix-icon="ProtectOutlined"
+                />
+                <div class="login-captcha" @click="changeCaptcha">
+                  <img v-if="captcha" :src="captcha" />
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.remember">
+                {{ t('login.remember') }}
+              </el-checkbox>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                size="large"
+                type="primary"
+                :loading="loading"
+                style="width: 100%"
+                @click="submit"
+              >
+                {{ t('login.login') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div v-else class="login-qrcode-group">
+            <ele-qr-code-svg
+              :size="180"
+              :margin="2"
+              :value="qrcode"
+              class="login-qrcode"
+            />
+            <el-link
+              type="primary"
+              underline="never"
+              style="margin-top: 16px; user-select: none"
+              @click="refreshQrCode"
+            >
+              <el-icon
+                :size="15"
+                style="transform: translateY(-1px); margin-right: 6px"
+              >
+                <ReloadOutlined />
+              </el-icon>
+              <span>{{ t('login.refreshQrcode') }}</span>
+            </el-link>
+          </div>
+        </div>
+      </ele-card>
+    </div>
+    <PageFooter style="padding-top: 0" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, unref, computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import {
+    UserOutlined,
+    LockOutlined,
+    ProtectOutlined,
+    ReloadOutlined
+  } from '@/components/icons';
+  import { getToken } from '@/utils/token-util';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import { login, getCaptcha } from '@/api/login';
+  import PageFooter from '@/layout/components/page-footer.vue';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+  const { currentRoute } = useRouter();
+  const { goHomeRoute, cleanPageTabs } = usePageTab();
+
+  /** 页签选中 */
+  const tabActive = ref(1);
+
+  /** 表单 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 加载状态 */
+  const loading = ref(false);
+
+  /** 表单数据 */
+  const form = reactive({
+    tenantId: 4, // 租户id, 不需要可去掉
+    username: 'admin',
+    password: 'admin',
+    code: '',
+    remember: true
+  });
+
+  /** 表单验证规则 */
+  const rules = computed<FormRules>(() => {
+    return {
+      username: [
+        {
+          required: true,
+          message: t('login.username'),
+          type: 'string',
+          trigger: 'blur'
+        }
+      ],
+      password: [
+        {
+          required: true,
+          message: t('login.password'),
+          type: 'string',
+          trigger: 'blur'
+        }
+      ],
+      code: [
+        {
+          required: true,
+          message: t('login.code'),
+          type: 'string',
+          trigger: 'blur'
+        }
+      ]
+    };
+  });
+
+  /** 图形验证码 */
+  const captcha = ref('');
+
+  /** 验证码内容, 实际项目去掉 */
+  const text = ref('');
+
+  /** 二维码 */
+  const qrcode = ref('');
+
+  /** 提交 */
+  const submit = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      if (form.code.toLowerCase() !== text.value) {
+        EleMessage.error({ message: '验证码错误', plain: true });
+        return;
+      }
+      loading.value = true;
+      login(form)
+        .then((msg) => {
+          EleMessage.success({ message: msg, plain: true });
+          cleanPageTabs();
+          goHome();
+        })
+        .catch((e: Error) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+          changeCaptcha();
+        });
+    });
+  };
+
+  /** 获取图形验证码 */
+  const changeCaptcha = () => {
+    getCaptcha()
+      .then((data) => {
+        captcha.value = data.base64;
+        // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
+        text.value = data.text;
+        // 自动回填验证码, 实际项目去掉
+        form.code = data.text;
+        formRef.value?.clearValidate?.();
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 刷新二维码 */
+  const refreshQrCode = () => {
+    qrcode.value = `https://api.eleadmin.com/v2/auth/login?code=${Date.now()}`;
+  };
+
+  /** 选项卡切换事件 */
+  const handleTabChange = (active: number) => {
+    if (active === 2) {
+      refreshQrCode();
+    }
+  };
+
+  /** 跳转到首页 */
+  const goHome = () => {
+    const { query } = unref(currentRoute);
+    goHomeRoute(query.from as string);
+  };
+
+  // 如果已登录直接进入首页
+  if (getToken()) {
+    goHome();
+  } else {
+    changeCaptcha();
+  }
+</script>
+
+<style lang="scss" scoped>
+  .login-wrapper {
+    min-height: 100vh;
+    min-height: 100dvh;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-image: url('@/assets/login-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .login-main {
+      flex: auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
+    .login-card {
+      width: 920px;
+      max-width: 100%;
+      overflow: hidden;
+
+      :deep(.ele-card-body) {
+        display: flex;
+        padding: 0;
+        height: 462px;
+      }
+    }
+  }
+
+  .login-cover {
+    flex: 1;
+    padding: 32px 8px;
+    box-sizing: border-box;
+    background-color: #1681fd;
+    background-image: url('@/assets/login-img.png');
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-size: contain;
+    text-align: center;
+  }
+
+  .login-body {
+    width: 400px;
+    flex-shrink: 0;
+    padding: 32px 48px 0 48px;
+    box-sizing: border-box;
+
+    :deep(.el-checkbox) {
+      height: auto;
+
+      .el-checkbox__label {
+        color: inherit;
+      }
+    }
+
+    :deep(.el-input__prefix-inner > .el-icon) {
+      margin-right: 12px;
+      transform: scale(1.16);
+    }
+  }
+
+  /* 验证码 */
+  .login-captcha-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    :deep(.el-input) {
+      flex: 1;
+    }
+
+    .login-captcha {
+      flex-shrink: 0;
+      width: 108px;
+      height: 40px;
+      margin-left: 8px;
+      border-radius: var(--el-border-radius-base);
+      border: 1px solid var(--el-border-color);
+      transition: border 0.2s;
+      box-sizing: border-box;
+      background: #fff;
+      overflow: hidden;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        display: block;
+      }
+
+      &:hover {
+        border-color: var(--el-color-primary);
+      }
+    }
+  }
+
+  /* 标题 */
+  .login-title {
+    color: rgba(255, 255, 255, 0.98);
+    font-size: 28px;
+    margin: 0 0 6px 0;
+    font-weight: normal;
+    letter-spacing: 1.2px;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+
+  .login-subtitle {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 16px;
+    margin: 0;
+    font-weight: normal;
+    letter-spacing: 4px;
+  }
+
+  /* 二维码 */
+  .login-qrcode-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0;
+  }
+
+  .login-qrcode {
+    font-size: 0;
+    display: inline-block;
+    border: 1px solid #ddd;
+    border-radius: var(--el-border-radius-base);
+    overflow: hidden;
+  }
+
+  /* 小屏幕适应 */
+  @media screen and (max-width: 680px) {
+    .login-wrapper {
+      background: #fff;
+
+      .login-main {
+        padding: 0;
+        display: block;
+      }
+
+      .login-card {
+        width: 100%;
+        background: none;
+        box-shadow: none;
+        border-radius: 0;
+
+        :deep(.ele-card-body) {
+          display: block;
+          height: auto;
+        }
+      }
+    }
+
+    .login-cover {
+      padding: 20px 12px 100px 12px;
+      background-size: auto 100px;
+    }
+
+    .login-body {
+      width: 100%;
+    }
+  }
+</style>
+
+<style lang="scss">
+  html.dark .login-wrapper {
+    background: #000;
+  }
+</style>
diff --git a/z_ele/src/views/result/fail/index.vue b/z_ele/src/views/result/fail/index.vue
new file mode 100644
index 0000000..0c9a435
--- /dev/null
+++ b/z_ele/src/views/result/fail/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card :body-style="{ paddingLeft: '12px', paddingRight: '12px' }">
+      <el-result icon="error" title="提交失败">
+        <template #sub-title>
+          <ele-text type="placeholder">
+            请核对并修改以下信息后，再重新提交。
+          </ele-text>
+        </template>
+      </el-result>
+      <div style="text-align: center">
+        <el-button type="primary">返回修改</el-button>
+        <el-button>重新提交</el-button>
+      </div>
+      <div
+        style="
+          max-width: 760px;
+          padding: 18px 24px;
+          background: hsla(0, 0%, 60%, 0.1);
+          border-radius: var(--el-border-radius-base);
+          margin: 26px auto;
+        "
+      >
+        <div>您提交的内容有如下错误:</div>
+        <div style="margin-top: 12px">
+          <ele-text type="danger" :icon="CloseCircleOutlined" tag="span" />
+          <span>&nbsp;您的账户已被冻结&nbsp;</span>
+          <el-link
+            type="primary"
+            underline="never"
+            style="display: inline; vertical-align: 0"
+          >
+            <span>立即解冻</span>
+            <el-icon :size="14">
+              <ArrowRight />
+            </el-icon>
+          </el-link>
+        </div>
+        <div style="margin-top: 12px">
+          <ele-text type="danger" :icon="CloseCircleOutlined" tag="span" />
+          <span>&nbsp;您的账户还不具备申请资格&nbsp;</span>
+          <el-link
+            type="primary"
+            underline="never"
+            style="display: inline; vertical-align: 0"
+          >
+            <span>立即升级</span>
+            <el-icon :size="14">
+              <ArrowRight />
+            </el-icon>
+          </el-link>
+        </div>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { CloseCircleOutlined, ArrowRight } from '@/components/icons';
+
+  defineOptions({ name: 'ResultFail' });
+</script>
diff --git a/z_ele/src/views/result/success/index.vue b/z_ele/src/views/result/success/index.vue
new file mode 100644
index 0000000..a219e4f
--- /dev/null
+++ b/z_ele/src/views/result/success/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card>
+      <el-result icon="success" title="提交成功">
+        <template #sub-title>
+          <ele-text type="placeholder">
+            提交结果页用于反馈一系列操作任务的处理结果，灰色区域可以显示一些补充的信息。
+          </ele-text>
+        </template>
+      </el-result>
+      <div style="text-align: center">
+        <el-button type="primary">返回列表</el-button>
+        <el-button>查看项目</el-button>
+        <el-button>打印</el-button>
+      </div>
+      <div
+        style="
+          max-width: 740px;
+          padding: 20px 32px;
+          background: hsla(0, 0%, 60%, 0.1);
+          border-radius: var(--el-border-radius-base);
+          margin: 26px auto;
+        "
+      >
+        已提交申请，等待部门审核。
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'ResultSuccess' });
+</script>
diff --git a/z_ele/src/views/system/dictionary/components/dict-data-edit.vue b/z_ele/src/views/system/dictionary/components/dict-data-edit.vue
new file mode 100644
index 0000000..c8652d4
--- /dev/null
+++ b/z_ele/src/views/system/dictionary/components/dict-data-edit.vue
@@ -0,0 +1,177 @@
+<!-- 字典数据编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="460"
+    v-model="visible"
+    :title="isUpdate ? '修改字典数据' : '添加字典数据'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="94px"
+      @submit.prevent=""
+    >
+      <el-form-item label="字典数据名" prop="dictDataName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.dictDataName"
+          placeholder="请输入字典数据名"
+        />
+      </el-form-item>
+      <el-form-item label="字典数据值" prop="dictDataCode">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.dictDataCode"
+          placeholder="请输入字典数据值"
+        />
+      </el-form-item>
+      <el-form-item label="排序号" prop="sortNumber">
+        <el-input-number
+          :min="0"
+          :max="9999"
+          v-model="form.sortNumber"
+          placeholder="请输入排序号"
+          controls-position="right"
+          class="ele-fluid"
+        />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :rows="4"
+          type="textarea"
+          :maxlength="200"
+          v-model="form.comments"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import {
+    addDictionaryData,
+    updateDictionaryData
+  } from '@/api/system/dictionary-data';
+  import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: DictionaryData | null;
+    /** 字典id */
+    dictId: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<DictionaryData>({
+    dictDataId: void 0,
+    dictDataName: '',
+    dictDataCode: '',
+    sortNumber: void 0,
+    comments: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    dictDataName: [
+      {
+        required: true,
+        message: '请输入字典数据名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入字典数据值',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value
+        ? updateDictionaryData
+        : addDictionaryData;
+      saveOrUpdate({
+        ...form,
+        dictId: props.dictId
+      })
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields(props.data);
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/dictionary/components/dict-data-list.vue b/z_ele/src/views/system/dictionary/components/dict-data-list.vue
new file mode 100644
index 0000000..196e51c
--- /dev/null
+++ b/z_ele/src/views/system/dictionary/components/dict-data-list.vue
@@ -0,0 +1,214 @@
+<template>
+  <dict-data-search
+    ref="searchRef"
+    style="margin-bottom: -14px"
+    @search="reload"
+  />
+  <ele-pro-table
+    ref="tableRef"
+    row-key="dictDataId"
+    :columns="columns"
+    :datasource="datasource"
+    :show-overflow-tooltip="true"
+    v-model:selections="selections"
+    :highlight-current-row="true"
+    :export-config="{ fileName: '字典数据', datasource: exportSource }"
+    :print-config="{ datasource: exportSource }"
+    :style="{ paddingBottom: '16px' }"
+    cache-key="systemDictDataTable"
+  >
+    <template #toolbar>
+      <el-button
+        type="primary"
+        class="ele-btn-icon"
+        :icon="PlusOutlined"
+        @click="openEdit()"
+      >
+        添加
+      </el-button>
+      <el-button
+        type="danger"
+        class="ele-btn-icon"
+        :icon="DeleteOutlined"
+        @click="remove()"
+      >
+        删除
+      </el-button>
+    </template>
+    <template #action="{ row }">
+      <el-link type="primary" underline="never" @click="openEdit(row)">
+        修改
+      </el-link>
+      <el-divider direction="vertical" />
+      <el-link type="danger" underline="never" @click="remove(row)">
+        删除
+      </el-link>
+    </template>
+  </ele-pro-table>
+  <dict-data-edit
+    v-model="showEdit"
+    :data="current"
+    :dict-id="dictId"
+    @done="reload"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { PlusOutlined, DeleteOutlined } from '@/components/icons';
+  import DictDataSearch from './dict-data-search.vue';
+  import DictDataEdit from './dict-data-edit.vue';
+  import {
+    pageDictionaryData,
+    removeDictionaryDataBatch,
+    listDictionaryData
+  } from '@/api/system/dictionary-data';
+  import type {
+    DictionaryData,
+    DictionaryDataParam
+  } from '@/api/system/dictionary-data/model';
+
+  const props = defineProps<{
+    /** 字典id */
+    dictId: number;
+  }>();
+
+  /** 搜索栏实例 */
+  const searchRef = ref<InstanceType<typeof DictDataSearch> | null>(null);
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'dictDataName',
+      label: '字典数据名',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'dictDataCode',
+      label: '字典数据值',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序号',
+      sortable: 'custom',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 130,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<DictionaryData[]>([]);
+
+  /** 当前编辑数据 */
+  const current = ref<DictionaryData | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageDictionaryData({
+      ...where,
+      ...orders,
+      ...pages,
+      dictId: props.dictId
+    });
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: DictionaryDataParam) => {
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: DictionaryData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 删除 */
+  const remove = (row?: DictionaryData) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.dictDataName).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeDictionaryDataBatch(rows.map((d) => d.dictDataId))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  // 监听字典id变化
+  watch(
+    () => props.dictId,
+    () => {
+      searchRef.value?.resetFields?.();
+      reload({});
+    }
+  );
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders }) => {
+    return listDictionaryData({
+      ...where,
+      ...orders,
+      dictId: props.dictId
+    });
+  };
+</script>
diff --git a/z_ele/src/views/system/dictionary/components/dict-data-search.vue b/z_ele/src/views/system/dictionary/components/dict-data-search.vue
new file mode 100644
index 0000000..5c7ff3b
--- /dev/null
+++ b/z_ele/src/views/system/dictionary/components/dict-data-search.vue
@@ -0,0 +1,59 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form label-width="84px" @keyup.enter="search" @submit.prevent="">
+    <el-row :gutter="8">
+      <el-col :lg="8" :md="8" :sm="12" :xs="24">
+        <el-form-item label="字典数据名">
+          <el-input
+            clearable
+            v-model.trim="form.dictDataName"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="8" :sm="12" :xs="24">
+        <el-form-item label="字典数据值">
+          <el-input
+            clearable
+            v-model.trim="form.dictDataCode"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="8" :md="8" :sm="12" :xs="24">
+        <el-form-item label-width="16px">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { DictionaryDataParam } from '@/api/system/dictionary-data/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: DictionaryDataParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<DictionaryDataParam>({
+    dictDataName: '',
+    dictDataCode: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  defineExpose({ resetFields });
+</script>
diff --git a/z_ele/src/views/system/dictionary/components/dict-edit.vue b/z_ele/src/views/system/dictionary/components/dict-edit.vue
new file mode 100644
index 0000000..a626a9e
--- /dev/null
+++ b/z_ele/src/views/system/dictionary/components/dict-edit.vue
@@ -0,0 +1,167 @@
+<!-- 字典编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="460"
+    v-model="visible"
+    :title="isUpdate ? '修改字典' : '添加字典'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-form-item label="字典名称" prop="dictName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.dictName"
+          placeholder="请输入字典名称"
+        />
+      </el-form-item>
+      <el-form-item label="字典值" prop="dictCode">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.dictCode"
+          placeholder="请输入字典值"
+        />
+      </el-form-item>
+      <el-form-item label="排序号" prop="sortNumber">
+        <el-input-number
+          :min="0"
+          :max="9999"
+          v-model="form.sortNumber"
+          placeholder="请输入排序号"
+          controls-position="right"
+          class="ele-fluid"
+        />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :rows="4"
+          type="textarea"
+          :maxlength="200"
+          v-model="form.comments"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { addDictionary, updateDictionary } from '@/api/system/dictionary';
+  import type { Dictionary } from '@/api/system/dictionary/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: Dictionary | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<Dictionary>({
+    dictId: void 0,
+    dictName: '',
+    dictCode: '',
+    sortNumber: void 0,
+    comments: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    dictName: [
+      {
+        required: true,
+        message: '请输入字典名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入字典值',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateDictionary : addDictionary;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields(props.data);
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/dictionary/index.vue b/z_ele/src/views/system/dictionary/index.vue
new file mode 100644
index 0000000..b969647
--- /dev/null
+++ b/z_ele/src/views/system/dictionary/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <ele-page
+    flex-table
+    :multi-card="false"
+    hide-footer
+    style="min-height: 420px"
+  >
+    <ele-card
+      flex-table
+      :body-style="{ padding: '0 0 0 16px', overflow: 'hidden' }"
+    >
+      <ele-split-panel
+        flex-table
+        size="256px"
+        allow-collapse
+        v-model:collapse="collapse"
+        :custom-style="{
+          borderWidth: '0 1px 0 0',
+          padding: '16px 0',
+          background: 'none'
+        }"
+        :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
+        :style="{ height: '100%', overflow: 'visible' }"
+      >
+        <div style="padding: 0 16px 12px 0">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="keywords"
+            placeholder="输入字典名称搜索"
+            :prefix-icon="SearchOutlined"
+          />
+        </div>
+        <div style="margin-bottom: 12px">
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="PlusOutlined"
+            @click="openEdit()"
+          >
+            添加
+          </el-button>
+          <el-button
+            type="warning"
+            :disabled="!current"
+            class="ele-btn-icon"
+            :icon="EditOutlined"
+            @click="openEdit(current)"
+          >
+            修改
+          </el-button>
+          <el-button
+            type="danger"
+            :disabled="!current"
+            class="ele-btn-icon"
+            :icon="DeleteOutlined"
+            @click="remove"
+          >
+            删除
+          </el-button>
+        </div>
+        <ele-loading
+          :loading="loading"
+          :spinner-style="{ background: 'none' }"
+          :style="{ flex: 1, paddingRight: '16px', overflow: 'auto' }"
+        >
+          <el-tree
+            ref="treeRef"
+            :data="data"
+            highlight-current
+            node-key="dictId"
+            :props="{ label: 'dictName' }"
+            :expand-on-click-node="false"
+            :default-expand-all="true"
+            :filter-node-method="filterNode"
+            :style="{
+              '--ele-tree-item-height': '34px',
+              '--ele-tree-expand-padding': 0,
+              '--ele-tree-expand-margin': 0
+            }"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ data: d }">
+              <div
+                class="el-tree-node__label"
+                style="display: flex; align-items: center"
+              >
+                <div style="margin-right: 4px">{{ d.dictName }}</div>
+                <div style="font-size: 12px; opacity: 0.8; font-weight: normal">
+                  ({{ d.dictCode }})
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </ele-loading>
+        <template #body>
+          <dict-data-list
+            v-if="current && current.dictId"
+            :dict-id="current.dictId"
+          />
+        </template>
+      </ele-split-panel>
+    </ele-card>
+    <dict-edit v-model="showEdit" :data="editData" @done="query" />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, watch } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import type { ElTree } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined
+  } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import DictDataList from './components/dict-data-list.vue';
+  import DictEdit from './components/dict-edit.vue';
+  import { listDictionaries, removeDictionary } from '@/api/system/dictionary';
+  import type { Dictionary } from '@/api/system/dictionary/model';
+
+  defineOptions({ name: 'SystemDictionary' });
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+
+  /** 分割面板是否折叠 */
+  const collapse = ref(mobile.value);
+
+  /** 树组件 */
+  const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
+
+  /** 加载状态 */
+  const loading = ref(true);
+
+  /** 树形数据 */
+  const data = ref<Dictionary[]>([]);
+
+  /** 选中数据 */
+  const current = ref<Dictionary | null>(null);
+
+  /** 机构搜索关键字 */
+  const keywords = ref('');
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 编辑回显数据 */
+  const editData = ref<Dictionary | null>(null);
+
+  /** 查询 */
+  const query = () => {
+    loading.value = true;
+    listDictionaries()
+      .then((list) => {
+        loading.value = false;
+        data.value = list ?? [];
+        nextTick(() => {
+          handleNodeClick(data.value[0]);
+        });
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 选择数据 */
+  const handleNodeClick = (row?: Dictionary) => {
+    // 移动端自动收起左侧
+    if (current.value != null && mobile.value) {
+      collapse.value = true;
+    }
+    if (row && row.dictId) {
+      current.value = row;
+      treeRef.value?.setCurrentKey?.(row.dictId);
+    } else {
+      current.value = null;
+    }
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: Dictionary | null) => {
+    editData.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 删除 */
+  const remove = () => {
+    const row = current.value;
+    if (!row) {
+      return;
+    }
+    ElMessageBox.confirm(`确定要删除“${row.dictName}”吗?`, '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeDictionary(row.dictId)
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            query();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 树过滤方法 */
+  const filterNode = (value: string, data: Dictionary) => {
+    if (value) {
+      return !!(data.dictName && data.dictName.includes(value));
+    }
+    return true;
+  };
+
+  /** 树过滤 */
+  watch(keywords, (value) => {
+    treeRef.value?.filter?.(value);
+  });
+
+  query();
+</script>
diff --git a/z_ele/src/views/system/file/components/file-search.vue b/z_ele/src/views/system/file/components/file-search.vue
new file mode 100644
index 0000000..298796f
--- /dev/null
+++ b/z_ele/src/views/system/file/components/file-search.vue
@@ -0,0 +1,61 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="文件名称">
+            <el-input clearable v-model.trim="form.name" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="文件路径">
+            <el-input clearable v-model.trim="form.path" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="上传人">
+            <el-input
+              clearable
+              v-model.trim="form.createNickname"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { FileRecordParam } from '@/api/system/file/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: FileRecordParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<FileRecordParam>({
+    name: '',
+    path: '',
+    createNickname: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/file/index.vue b/z_ele/src/views/system/file/index.vue
new file mode 100644
index 0000000..d440e20
--- /dev/null
+++ b/z_ele/src/views/system/file/index.vue
@@ -0,0 +1,241 @@
+<template>
+  <ele-page>
+    <file-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        v-model:selections="selections"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '文件数据', datasource: exportSource }"
+        :print-config="{ datasource: exportSource }"
+        cache-key="systemFileTable"
+      >
+        <template #toolbar>
+          <el-upload
+            action=""
+            :show-file-list="false"
+            :before-upload="handleUpload"
+            style="display: inline-block; vertical-align: middle"
+          >
+            <el-button
+              type="primary"
+              class="ele-btn-icon"
+              :icon="UploadOutlined"
+            >
+              上传
+            </el-button>
+          </el-upload>
+          <el-button
+            type="danger"
+            class="ele-btn-icon"
+            :icon="DeleteOutlined"
+            style="margin-left: 12px"
+            @click="remove()"
+          >
+            删除
+          </el-button>
+        </template>
+        <template #path="{ row }">
+          <el-link
+            type="primary"
+            :href="row.url"
+            target="_blank"
+            underline="never"
+          >
+            {{ row.path }}
+          </el-link>
+        </template>
+        <template #action="{ row }">
+          <el-link
+            type="primary"
+            underline="never"
+            :href="row.downloadUrl"
+            target="_blank"
+          >
+            下载
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            删除
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { DeleteOutlined, UploadOutlined } from '@/components/icons';
+  import FileSearch from './components/file-search.vue';
+  import {
+    pageFiles,
+    removeFiles,
+    uploadFile,
+    listFiles
+  } from '@/api/system/file';
+  import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
+
+  defineOptions({ name: 'SystemFile' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'name',
+      label: '文件名称',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'path',
+      label: '文件路径',
+      sortable: 'custom',
+      minWidth: 140,
+      slot: 'path'
+    },
+    {
+      prop: 'length',
+      label: '文件大小',
+      width: 120,
+      align: 'center',
+      sortable: 'custom',
+      formatter: (row) => {
+        if (row.length < 1024) {
+          return row.length + 'B';
+        } else if (row.length < 1024 * 1024) {
+          return (row.length / 1024).toFixed(1) + 'KB';
+        } else if (row.length < 1024 * 1024 * 1024) {
+          return (row.length / 1024 / 1024).toFixed(1) + 'M';
+        } else {
+          return (row.length / 1024 / 1024 / 1024).toFixed(1) + 'G';
+        }
+      }
+    },
+    {
+      prop: 'createNickname',
+      label: '上传人',
+      width: 120,
+      align: 'center',
+      sortable: 'custom'
+    },
+    {
+      prop: 'createTime',
+      label: '上传时间',
+      width: 180,
+      align: 'center',
+      sortable: 'custom'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<FileRecord[]>([]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageFiles({ ...where, ...orders, ...pages });
+  };
+
+  /** 搜索 */
+  const reload = (where?: FileRecordParam) => {
+    selections.value = [];
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 删除 */
+  const remove = (row?: FileRecord) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.name).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeFiles(rows.map((d) => d.id))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 上传 */
+  const handleUpload = (file: File) => {
+    if (file.size / 1024 / 1024 > 100) {
+      EleMessage.error({ message: '大小不能超过 100MB', plain: true });
+      return false;
+    }
+    const loading = EleMessage.loading({
+      message: '上传中..',
+      plain: true,
+      mask: true
+    });
+    uploadFile(file)
+      .then(() => {
+        loading.close();
+        EleMessage.success({ message: '上传成功', plain: true });
+        reload();
+      })
+      .catch((e) => {
+        loading.close();
+        EleMessage.error({ message: e.message, plain: true });
+      });
+    return false;
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders }) => {
+    return listFiles({ ...where, ...orders });
+  };
+</script>
diff --git a/z_ele/src/views/system/login-record/components/login-record-search.vue b/z_ele/src/views/system/login-record/components/login-record-search.vue
new file mode 100644
index 0000000..44069d0
--- /dev/null
+++ b/z_ele/src/views/system/login-record/components/login-record-search.vue
@@ -0,0 +1,91 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="用户账号">
+            <el-input
+              clearable
+              v-model.trim="form.username"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="用户名">
+            <el-input
+              clearable
+              v-model.trim="form.nickname"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="8" :md="18" :sm="17" :xs="24">
+          <el-form-item label="登录时间">
+            <el-date-picker
+              unlink-panels
+              type="daterange"
+              v-model="dateRange"
+              range-separator="-"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="ele-fluid"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="4" :md="6" :sm="7" :xs="24">
+          <el-form-item label-width="6px">
+            <div style="white-space: nowrap">
+              <el-button type="primary" @click="search">查询</el-button>
+              <el-button @click="reset">重置</el-button>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useFormData } from '@/utils/use-form-data';
+  import type { LoginRecordParam } from '@/api/system/login-record/model';
+
+  const props = defineProps<{
+    /** 默认搜索条件 */
+    where?: LoginRecordParam;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where?: LoginRecordParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<LoginRecordParam>({
+    username: '',
+    nickname: '',
+    ...(props.where || {})
+  });
+
+  /** 日期范围 */
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /** 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value || [];
+    emit('search', {
+      ...form,
+      createTimeStart: d1 ? `${d1} 00:00:00` : '',
+      createTimeEnd: d2 ? `${d2} 23:59:59` : ''
+    });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    dateRange.value = ['', ''];
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/login-record/index.vue b/z_ele/src/views/system/login-record/index.vue
new file mode 100644
index 0000000..7283645
--- /dev/null
+++ b/z_ele/src/views/system/login-record/index.vue
@@ -0,0 +1,268 @@
+<template>
+  <ele-page>
+    <login-record-search :where="defaultWhere" @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '登录日志数据' }"
+        :where="defaultWhere"
+        cache-key="systemLoginRecordTable"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="DownloadOutlined"
+            @click="exportData"
+          >
+            导出
+          </el-button>
+        </template>
+        <template #loginType="{ row }">
+          <el-tag
+            v-if="row.loginType === 0"
+            size="small"
+            type="success"
+            :disable-transitions="true"
+          >
+            登录成功
+          </el-tag>
+          <el-tag
+            v-else-if="row.loginType === 1"
+            size="small"
+            type="danger"
+            :disable-transitions="true"
+          >
+            登录失败
+          </el-tag>
+          <el-tag
+            v-else-if="row.loginType === 2"
+            size="small"
+            type="info"
+            :disable-transitions="true"
+          >
+            退出登录
+          </el-tag>
+          <el-tag
+            v-else-if="row.loginType === 3"
+            size="small"
+            type="warning"
+            :disable-transitions="true"
+          >
+            刷新TOKEN
+          </el-tag>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import ExcelJS from 'exceljs';
+  import { download } from '@/utils/common';
+  import { DownloadOutlined } from '@/components/icons';
+  import LoginRecordSearch from './components/login-record-search.vue';
+  import {
+    pageLoginRecords,
+    listLoginRecords
+  } from '@/api/system/login-record';
+  import type { LoginRecordParam } from '@/api/system/login-record/model';
+
+  defineOptions({ name: 'SystemLoginRecord' });
+
+  /** 默认搜索条件 */
+  const defaultWhere = reactive({
+    username: '',
+    nickname: ''
+  });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '账号',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'ip',
+      label: 'IP地址',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'device',
+      label: '设备型号',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'os',
+      label: '操作系统',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'browser',
+      label: '浏览器',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'loginType',
+      label: '操作类型',
+      sortable: 'custom',
+      width: 130,
+      slot: 'loginType',
+      filters: [
+        {
+          text: '登录成功',
+          value: '0'
+        },
+        {
+          text: '登录失败',
+          value: '1'
+        },
+        {
+          text: '退出登录',
+          value: '2'
+        },
+        {
+          text: '刷新TOKEN',
+          value: '3'
+        }
+      ],
+      filterMultiple: false,
+      align: 'center',
+      formatter: (row) =>
+        ['登录成功', '登录失败', '退出登录', '刷新TOKEN'][row.loginType]
+    },
+    {
+      prop: 'comments',
+      label: '备注',
+      sortable: 'custom',
+      minWidth: 110,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '登录时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({
+    pages,
+    where,
+    orders,
+    filters
+  }) => {
+    return pageLoginRecords({ ...where, ...orders, ...filters, ...pages });
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: LoginRecordParam) => {
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 导出数据 */
+  const exportData = () => {
+    // 请求查询全部接口
+    const loading = EleMessage.loading({
+      message: '请求中..',
+      plain: true
+    });
+    tableRef.value?.fetch?.(({ where, orders, filters }) => {
+      listLoginRecords({ ...where, ...orders, ...filters })
+        .then((data) => {
+          const workbook = new ExcelJS.Workbook();
+          const sheet = workbook.addWorksheet('Sheet1');
+          sheet.addRow([
+            '账号',
+            '用户名',
+            'IP地址',
+            '设备型号',
+            '操作系统',
+            '浏览器',
+            '操作类型',
+            '备注',
+            '登录时间'
+          ]);
+          data.forEach((d) => {
+            sheet.addRow([
+              d.username,
+              d.nickname,
+              d.ip,
+              d.device,
+              d.os,
+              d.browser,
+              ['登录成功', '登录失败', '退出登录', '刷新TOKEN'][d.loginType],
+              d.comments,
+              d.createTime
+            ]);
+          });
+          // 设置列宽
+          [16, 16, 22, 22, 18, 20, 14, 16, 24].forEach((width, index) => {
+            sheet.getColumn(index + 1).width = width;
+          });
+          // 设置样式
+          sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+            row.height = 20;
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              cell.border = {
+                top: { style: 'thin' },
+                left: { style: 'thin' },
+                bottom: { style: 'thin' },
+                right: { style: 'thin' }
+              };
+              cell.alignment = {
+                vertical: 'middle',
+                horizontal: 'center'
+              };
+              cell.font = { size: 12, bold: rowIndex === 1 };
+            });
+          });
+          // 下载文件
+          workbook.xlsx.writeBuffer().then((data) => {
+            download(data, '登录日志.xlsx');
+            loading.close();
+          });
+        })
+        .catch((e) => {
+          loading.close();
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+</script>
diff --git a/z_ele/src/views/system/menu/components/menu-edit.vue b/z_ele/src/views/system/menu/components/menu-edit.vue
new file mode 100644
index 0000000..620e1e2
--- /dev/null
+++ b/z_ele/src/views/system/menu/components/menu-edit.vue
@@ -0,0 +1,447 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="740"
+    v-model="visible"
+    :title="isUpdate ? '修改菜单' : '添加菜单'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      :validate-on-rule-change="false"
+      @submit.prevent=""
+    >
+      <el-row :gutter="16">
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="上级菜单" prop="parentId">
+            <menu-select v-model="form.parentId" />
+          </el-form-item>
+          <el-form-item label="菜单名称" prop="title">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.title"
+              placeholder="请输入菜单名称"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="菜单类型" prop="menuType">
+            <el-radio-group
+              v-model="form.menuType"
+              @change="handleMenuTypeChange"
+            >
+              <el-radio :value="0" label="目录" />
+              <el-radio :value="1" label="菜单" />
+              <el-radio :value="2" label="按钮" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="打开方式">
+            <el-radio-group
+              v-model="form.openType"
+              :disabled="form.menuType === 0 || form.menuType === 2"
+              @change="handleOpenTypeChange"
+            >
+              <el-radio :value="0" label="组件" />
+              <el-radio :value="1" label="内嵌" />
+              <el-radio :value="2" label="外链" />
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider style="margin: 8px 0 22px 0; opacity: 0.6" />
+      <el-row :gutter="16">
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="菜单图标" prop="icon">
+            <icon-select
+              clearable
+              filterable="popper"
+              :popper-width="460"
+              :popper-height="388"
+              :popper-options="{ strategy: 'fixed' }"
+              placeholder="请选择图标"
+              v-model="form.icon"
+              :disabled="form.menuType === 2"
+            />
+          </el-form-item>
+          <el-form-item prop="path">
+            <template #label>
+              <ele-tooltip
+                v-if="form.openType === 2"
+                content="需要以`http://`、`https://`、`//`开头"
+                placement="top-start"
+                :popper-options="{
+                  modifiers: [
+                    { name: 'offset', options: { offset: [-12, 10] } }
+                  ]
+                }"
+              >
+                <el-icon
+                  :size="15"
+                  style="align-self: center; margin-right: 4px; cursor: help"
+                >
+                  <QuestionCircleOutlined style="opacity: 0.6" />
+                </el-icon>
+              </ele-tooltip>
+              <span>{{ form.openType === 2 ? '外链地址' : '路由地址' }}</span>
+            </template>
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.path"
+              :disabled="form.menuType === 2"
+              :placeholder="
+                form.openType === 2 ? '请输入外链地址' : '请输入路由地址'
+              "
+            />
+          </el-form-item>
+          <el-form-item prop="component">
+            <template #label>
+              <ele-tooltip
+                v-if="form.openType === 1"
+                content="需要以`http://`、`https://`、`//`开头"
+                placement="top-start"
+                :popper-options="{
+                  modifiers: [
+                    { name: 'offset', options: { offset: [-12, 10] } }
+                  ]
+                }"
+              >
+                <el-icon
+                  :size="15"
+                  style="align-self: center; margin-right: 4px; cursor: help"
+                >
+                  <QuestionCircleOutlined style="opacity: 0.6" />
+                </el-icon>
+              </ele-tooltip>
+              <span>{{ form.openType === 1 ? '内嵌地址' : '组件路径' }}</span>
+            </template>
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.component"
+              :disabled="
+                form.menuType === 0 ||
+                form.menuType === 2 ||
+                form.openType === 2
+              "
+              :placeholder="
+                form.openType === 1 ? '请输入内嵌地址' : '请输入组件路径'
+              "
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="权限标识" prop="authority">
+            <el-input
+              clearable
+              v-model="form.authority"
+              placeholder="请输入权限标识"
+              :disabled="
+                form.menuType === 0 ||
+                (form.menuType === 1 && form.openType === 2)
+              "
+            />
+          </el-form-item>
+          <el-form-item label="排序号" prop="sortNumber">
+            <el-input-number
+              :min="0"
+              :max="99999"
+              v-model="form.sortNumber"
+              placeholder="请输入排序号"
+              controls-position="right"
+              class="ele-fluid"
+            />
+          </el-form-item>
+          <el-form-item label="是否展示">
+            <el-switch
+              inline-prompt
+              active-text="是"
+              inactive-text="否"
+              :model-value="form.hide === 0"
+              :disabled="form.menuType === 2"
+              @change="updateHideValue"
+            />
+            <ele-tooltip
+              content="选择不展示只注册路由不展示在侧边栏, 比如添加页面应该选择不展示"
+              :popper-style="{ maxWidth: '240px' }"
+            >
+              <el-icon :size="15" style="margin-left: 16px; cursor: help">
+                <QuestionCircleOutlined style="opacity: 0.6" />
+              </el-icon>
+            </ele-tooltip>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="路由元数据" prop="meta">
+        <el-input
+          :rows="4"
+          type="textarea"
+          :maxlength="200"
+          v-model="form.meta"
+          placeholder="请输入JSON格式的路由元数据"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage, isExternalLink } from 'ele-admin-plus';
+  import { QuestionCircleOutlined } from '@/components/icons';
+  import { useFormData } from '@/utils/use-form-data';
+  import IconSelect from '@/components/IconSelect/index.vue';
+  import MenuSelect from './menu-select.vue';
+  import { addMenu, updateMenu } from '@/api/system/menu';
+  import type { Menu } from '@/api/system/menu/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: Menu | null;
+    /** 添加时上级菜单id */
+    parentId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<Menu>({
+    menuId: void 0,
+    parentId: void 0,
+    title: '',
+    menuType: 0,
+    openType: 0,
+    icon: '',
+    path: '',
+    component: '',
+    authority: '',
+    sortNumber: void 0,
+    hide: 0,
+    meta: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = computed<FormRules>(() => {
+    const obj: FormRules = {
+      title: [
+        {
+          required: true,
+          type: 'string',
+          message: '请输入菜单名称',
+          trigger: 'blur'
+        }
+      ],
+      sortNumber: [
+        {
+          required: true,
+          type: 'number',
+          message: '请输入排序号',
+          trigger: 'blur'
+        }
+      ],
+      meta: [
+        {
+          type: 'string',
+          validator: (_rule: any, value: string, callback: any) => {
+            if (value) {
+              const msg = '请输入正确的JSON格式';
+              try {
+                const obj = JSON.parse(value);
+                if (obj == null || typeof obj !== 'object') {
+                  callback(msg);
+                  return;
+                }
+              } catch (_e) {
+                callback(msg);
+                return;
+              }
+            }
+            callback();
+          },
+          trigger: 'blur'
+        }
+      ]
+    };
+    if (form.menuType !== 2) {
+      obj.path = [
+        {
+          required: true,
+          type: 'string',
+          message: form.openType === 2 ? '请输入外链地址' : '请输入路由地址',
+          trigger: 'blur'
+        },
+        {
+          type: 'string',
+          validator: (_rule: any, value: string, callback: any) => {
+            if (value) {
+              if (form.openType === 2) {
+                if (!isExternalLink(value)) {
+                  callback('请输入正确的链接地址');
+                  return;
+                }
+              } else {
+                if (value === '/') {
+                  callback('路由地址不能为 /');
+                  return;
+                }
+                if (!value.startsWith('/')) {
+                  callback('路由地址需要以 / 开头');
+                  return;
+                }
+              }
+            }
+            callback();
+          },
+          trigger: 'blur'
+        }
+      ];
+      if (form.menuType === 1 && form.openType !== 2) {
+        obj.component = [
+          {
+            required: true,
+            type: 'string',
+            message: form.openType === 1 ? '请输入内嵌地址' : '请输入组件路径',
+            trigger: 'blur'
+          },
+          {
+            type: 'string',
+            validator: (_rule: any, value: string, callback: any) => {
+              if (value) {
+                if (form.openType === 1) {
+                  if (!isExternalLink(value)) {
+                    callback('请输入正确的链接地址');
+                    return;
+                  }
+                }
+              }
+              callback();
+            },
+            trigger: 'blur'
+          }
+        ];
+      }
+    }
+    return obj;
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateMenu : addMenu;
+      saveOrUpdate({
+        ...form,
+        // menuType 对应的值与后端不一致在前端处理
+        menuType: form.menuType === 2 ? 1 : 0,
+        parentId: form.parentId || 0
+      })
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** menuType选择改变 */
+  const handleMenuTypeChange = () => {
+    if (form.menuType === 0) {
+      form.authority = '';
+      form.openType = 0;
+      form.component = '';
+    } else if (form.menuType === 1) {
+      if (form.openType === 2) {
+        form.authority = '';
+      }
+    } else {
+      form.openType = 0;
+      form.icon = '';
+      form.path = '';
+      form.component = '';
+      form.hide = 0;
+    }
+    formRef.value?.clearValidate?.();
+  };
+
+  /** openType选择改变 */
+  const handleOpenTypeChange = () => {
+    if (form.openType === 2) {
+      form.component = '';
+      form.authority = '';
+    }
+    formRef.value?.clearValidate?.();
+  };
+
+  /** hide选择改变 */
+  const updateHideValue = (value: boolean) => {
+    form.hide = value ? 0 : 1;
+  };
+
+  /** 判断是否是目录 */
+  const isDirectory = (d: Menu) => {
+    return !!d.children?.length && !d.component;
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        const isExternal = isExternalLink(props.data.path);
+        const isInner = isExternalLink(props.data.component);
+        // menuType对应的值与后端不一致在前端处理
+        const menuType =
+          props.data.menuType === 1 ? 2 : isDirectory(props.data) ? 0 : 1;
+        assignFields({
+          ...props.data,
+          menuType,
+          openType: isExternal ? 2 : isInner ? 1 : 0,
+          parentId: props.data.parentId === 0 ? void 0 : props.data.parentId
+        });
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        form.parentId = props.parentId;
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/menu/components/menu-search.vue b/z_ele/src/views/system/menu/components/menu-search.vue
new file mode 100644
index 0000000..3c9ccb4
--- /dev/null
+++ b/z_ele/src/views/system/menu/components/menu-search.vue
@@ -0,0 +1,65 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="菜单名称">
+            <el-input
+              clearable
+              v-model.trim="form.title"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="菜单地址">
+            <el-input clearable v-model.trim="form.path" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="权限标识">
+            <el-input
+              clearable
+              v-model.trim="form.authority"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { MenuParam } from '@/api/system/menu/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: MenuParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<MenuParam>({
+    title: '',
+    path: '',
+    authority: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/menu/components/menu-select.vue b/z_ele/src/views/system/menu/components/menu-select.vue
new file mode 100644
index 0000000..ec4cd48
--- /dev/null
+++ b/z_ele/src/views/system/menu/components/menu-select.vue
@@ -0,0 +1,84 @@
+<!-- 上级菜单选择下拉框 -->
+<template>
+  <el-tree-select
+    clearable
+    filterable
+    :data="menuData"
+    check-strictly
+    default-expand-all
+    node-key="menuId"
+    :props="{ label: 'title' }"
+    :placeholder="placeholder"
+    :model-value="modelValue || void 0"
+    class="ele-fluid"
+    :popper-options="{ strategy: 'fixed' }"
+    @update:modelValue="updateValue"
+  >
+    <template #default="{ data }">
+      <el-icon
+        v-if="data.icon"
+        style="margin-right: 4px; transform: translateY(-1px)"
+      >
+        <component :is="data.icon" />
+      </el-icon>
+      <span>{{ data.title }}</span>
+    </template>
+    <template v-if="selectedIcon" #prefix>
+      <el-icon color="var(--el-text-color-regular)" style="margin-right: 6px">
+        <component :is="selectedIcon" />
+      </el-icon>
+    </template>
+  </el-tree-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { EleMessage, toTree, findTree } from 'ele-admin-plus';
+  import { listMenus } from '@/api/system/menu';
+  import type { Menu } from '@/api/system/menu/model';
+
+  const props = withDefaults(
+    defineProps<{
+      /** 选中的菜单 */
+      modelValue?: number | string;
+      /** 提示信息 */
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择上级菜单'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: number | string): void;
+  }>();
+
+  /** 菜单数据 */
+  const menuData = ref<Menu[]>([]);
+
+  /** 更新选中数据 */
+  const updateValue = (value: number | string) => {
+    emit('update:modelValue', value || 0);
+  };
+
+  /** 选中菜单的图标 */
+  const selectedIcon = computed(() => {
+    if (!props.modelValue) {
+      return;
+    }
+    return findTree(menuData.value, (d) => d.menuId == props.modelValue)?.icon;
+  });
+
+  /** 获取菜单数据 */
+  listMenus()
+    .then((list) => {
+      menuData.value = toTree({
+        data: list,
+        idField: 'menuId',
+        parentIdField: 'parentId'
+      });
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
diff --git a/z_ele/src/views/system/menu/index.vue b/z_ele/src/views/system/menu/index.vue
new file mode 100644
index 0000000..fd2fe81
--- /dev/null
+++ b/z_ele/src/views/system/menu/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <ele-page>
+    <menu-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        sticky
+        ref="tableRef"
+        row-key="menuId"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '菜单数据' }"
+        :default-expand-all="false"
+        :pagination="false"
+        cache-key="systemMenuTable"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="PlusOutlined"
+            @click="openEdit()"
+          >
+            添加
+          </el-button>
+          <el-button
+            class="ele-btn-icon"
+            :icon="ColumnHeightOutlined"
+            @click="expandAll"
+          >
+            展开全部
+          </el-button>
+          <el-button
+            class="ele-btn-icon"
+            :icon="VerticalAlignMiddleOutlined"
+            @click="foldAll"
+          >
+            折叠全部
+          </el-button>
+        </template>
+        <template #title="{ row }">
+          <el-icon
+            v-if="row.icon"
+            :size="15"
+            style="margin-right: 8px; vertical-align: -2px"
+          >
+            <component :is="row.icon" />
+          </el-icon>
+          <span>{{ row.title }}</span>
+        </template>
+        <template #menuType="{ row }">
+          <el-tag
+            v-if="isExternalLink(row.path)"
+            size="small"
+            type="danger"
+            :disable-transitions="true"
+          >
+            外链
+          </el-tag>
+          <el-tag
+            v-else-if="isExternalLink(row.component)"
+            size="small"
+            type="warning"
+            :disable-transitions="true"
+          >
+            内嵌
+          </el-tag>
+          <el-tag
+            v-else-if="isDirectory(row)"
+            size="small"
+            :disable-transitions="true"
+          >
+            目录
+          </el-tag>
+          <el-tag
+            v-else-if="row.menuType === 0"
+            size="small"
+            type="success"
+            :disable-transitions="true"
+          >
+            菜单
+          </el-tag>
+          <el-tag
+            v-else-if="row.menuType === 1"
+            size="small"
+            type="info"
+            :disable-transitions="true"
+          >
+            按钮
+          </el-tag>
+        </template>
+        <template #action="{ row }">
+          <el-link
+            type="primary"
+            underline="never"
+            @click="openEdit(null, row.menuId)"
+          >
+            添加
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="primary" underline="never" @click="openEdit(row)">
+            修改
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            删除
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+    <menu-edit
+      ref="menuEditRef"
+      v-model="showEdit"
+      :data="current"
+      :parent-id="parentId"
+      @done="handleMenuEditDone"
+    />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage, isExternalLink, toTree } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import {
+    PlusOutlined,
+    ColumnHeightOutlined,
+    VerticalAlignMiddleOutlined
+  } from '@/components/icons';
+  import MenuSearch from './components/menu-search.vue';
+  import MenuEdit from './components/menu-edit.vue';
+  import { listMenus, removeMenu } from '@/api/system/menu';
+  import type { Menu, MenuParam } from '@/api/system/menu/model';
+
+  defineOptions({ name: 'SystemMenu' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'title',
+      label: '菜单名称',
+      slot: 'title',
+      minWidth: 160
+    },
+    {
+      prop: 'path',
+      label: '路由地址',
+      minWidth: 160
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'hide',
+      label: '可见',
+      width: 100,
+      align: 'center',
+      formatter: (row) => ['是', '否'][row.hide]
+    },
+    {
+      prop: 'menuType',
+      label: '类型',
+      width: 100,
+      align: 'center',
+      slot: 'menuType',
+      formatter: (row) =>
+        ['菜单', '按钮', '外链', '内嵌', '目录'][
+          isExternalLink(row.path)
+            ? 2
+            : isExternalLink(row.component)
+              ? 3
+              : isDirectory(row)
+                ? 4
+                : row.menuType
+        ]
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 180,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 当前编辑数据 */
+  const current = ref<Menu | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 上级菜单id */
+  const parentId = ref<number>();
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ where }) => {
+    const data = await listMenus({ ...where });
+    return toTree({
+      data,
+      idField: 'menuId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: MenuParam) => {
+    tableRef.value?.reload?.({ where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: Menu | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /** 删除单个 */
+  const remove = (row: Menu) => {
+    if (row.children?.length) {
+      EleMessage.error({ message: '请先删除子节点', plain: true });
+      return;
+    }
+    ElMessageBox.confirm('确定要删除“' + row.title + '”吗?', '系统提示', {
+      type: 'warning',
+      draggable: true
+    })
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeMenu(row.menuId)
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 展开全部 */
+  const expandAll = () => {
+    tableRef.value?.toggleRowExpansionAll?.(true);
+  };
+
+  /** 折叠全部 */
+  const foldAll = () => {
+    tableRef.value?.toggleRowExpansionAll?.(false);
+  };
+
+  /** 判断是否是目录 */
+  const isDirectory = (d: Menu) => {
+    return !!d.children?.length && !d.component;
+  };
+
+  /** 菜单编辑完成事件 */
+  const handleMenuEditDone = () => {
+    reload();
+  };
+</script>
diff --git a/z_ele/src/views/system/operation-record/components/operation-record-detail.vue b/z_ele/src/views/system/operation-record/components/operation-record-detail.vue
new file mode 100644
index 0000000..405a2b3
--- /dev/null
+++ b/z_ele/src/views/system/operation-record/components/operation-record-detail.vue
@@ -0,0 +1,121 @@
+<!-- 详情弹窗 -->
+<template>
+  <ele-modal title="详情" :width="720" v-model="visible">
+    <el-descriptions
+      v-if="data"
+      :border="true"
+      :column="mobile ? 1 : 2"
+      class="detail-table"
+    >
+      <el-descriptions-item label="操作人">
+        <div>{{ data.nickname }}({{ data.username }})</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="IP地址">
+        <div>{{ data.ip }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作模块">
+        <div>{{ data.module }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作功能">
+        <div>{{ data.description }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作时间">
+        <div>{{ data.createTime }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求耗时">
+        <div v-if="!isNaN(data.spendTime)">{{ data.spendTime / 1000 }}s</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求方式">
+        <div>{{ data.requestMethod }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求状态">
+        <el-tag
+          v-if="data.status === 0"
+          size="small"
+          type="success"
+          :disable-transitions="true"
+        >
+          正常
+        </el-tag>
+        <el-tag
+          v-else-if="data.status === 1"
+          size="small"
+          type="danger"
+          :disable-transitions="true"
+        >
+          异常
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求地址" :span="2">
+        <div style="word-break: break-all">{{ data.url }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="调用方法" :span="2">
+        <div style="word-break: break-all">{{ data.method }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求参数" :span="2">
+        <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
+          {{ data.params }}
+        </ele-ellipsis>
+      </el-descriptions-item>
+      <el-descriptions-item v-if="data.status === 0" label="返回结果" :span="2">
+        <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
+          {{ data.result }}
+        </ele-ellipsis>
+      </el-descriptions-item>
+      <el-descriptions-item v-else label="异常信息" :span="2">
+        <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
+          {{ data.error }}
+        </ele-ellipsis>
+      </el-descriptions-item>
+    </el-descriptions>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import type { EleTooltipProps } from 'ele-admin-plus/es/ele-app/plus';
+  import type { OperationRecord } from '@/api/system/operation-record/model';
+  import { useMobile } from '@/utils/use-mobile';
+
+  defineProps<{
+    /** 修改回显的数据 */
+    data: OperationRecord;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 文字省略组件的提示组件的属性 */
+  const ellipsisTooltipProps = reactive<EleTooltipProps>({
+    popperStyle: {
+      width: '580px',
+      maxWidth: '90%',
+      wordBreak: 'break-all'
+    },
+    bodyStyle: {
+      maxWidth: 'calc(100vw - 32px)',
+      maxHeight: '252px',
+      overflowY: 'auto',
+      '--ele-scrollbar-color': '#5e5e5e',
+      '--ele-scrollbar-hover-color': '#707070',
+      '--ele-scrollbar-size': '8px'
+    },
+    offset: 4,
+    placement: 'top'
+  });
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+</script>
+
+<style lang="scss" scoped>
+  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
+    width: 88px;
+    text-align: right;
+    font-weight: normal;
+  }
+
+  .detail-table :deep(.el-descriptions__content > div) {
+    max-height: 100%;
+  }
+</style>
diff --git a/z_ele/src/views/system/operation-record/components/operation-record-search.vue b/z_ele/src/views/system/operation-record/components/operation-record-search.vue
new file mode 100644
index 0000000..c00047b
--- /dev/null
+++ b/z_ele/src/views/system/operation-record/components/operation-record-search.vue
@@ -0,0 +1,81 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="用户账号">
+            <el-input
+              clearable
+              v-model.trim="form.username"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="12" :xs="24">
+          <el-form-item label="操作模块">
+            <el-input
+              clearable
+              v-model.trim="form.module"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="8" :md="18" :sm="17" :xs="24">
+          <el-form-item label="操作时间">
+            <el-date-picker
+              unlink-panels
+              type="datetimerange"
+              v-model="dateRange"
+              range-separator="-"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              class="ele-fluid"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="4" :md="6" :sm="7" :xs="24">
+          <el-form-item label-width="6px">
+            <div style="white-space: nowrap">
+              <el-button type="primary" @click="search">查询</el-button>
+              <el-button @click="reset">重置</el-button>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useFormData } from '@/utils/use-form-data';
+  import type { OperationRecordParam } from '@/api/system/operation-record/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: OperationRecordParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<OperationRecordParam>({
+    username: '',
+    module: ''
+  });
+
+  /** 日期范围 */
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /** 搜索 */
+  const search = () => {
+    const [createTimeStart, createTimeEnd] = dateRange.value || [];
+    emit('search', { ...form, createTimeStart, createTimeEnd });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    dateRange.value = ['', ''];
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/operation-record/index.vue b/z_ele/src/views/system/operation-record/index.vue
new file mode 100644
index 0000000..295129d
--- /dev/null
+++ b/z_ele/src/views/system/operation-record/index.vue
@@ -0,0 +1,294 @@
+<template>
+  <ele-page>
+    <operation-record-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '操作日志数据' }"
+        cache-key="systemOperationRecordTable"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="DownloadOutlined"
+            @click="exportData"
+          >
+            导出
+          </el-button>
+        </template>
+        <template #status="{ row }">
+          <el-tag
+            v-if="row.status === 0"
+            size="small"
+            type="success"
+            :disable-transitions="true"
+          >
+            正常
+          </el-tag>
+          <el-tag
+            v-else-if="row.status === 1"
+            size="small"
+            type="danger"
+            :disable-transitions="true"
+          >
+            异常
+          </el-tag>
+        </template>
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click="openDetail(row)">
+            详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+    <!-- 详情弹窗 -->
+    <operation-record-detail v-model="showInfo" :data="current" />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import ExcelJS from 'exceljs';
+  import { download } from '@/utils/common';
+  import { DownloadOutlined } from '@/components/icons';
+  import OperationRecordSearch from './components/operation-record-search.vue';
+  import OperationRecordDetail from './components/operation-record-detail.vue';
+  import {
+    pageOperationRecords,
+    listOperationRecords
+  } from '@/api/system/operation-record';
+  import type {
+    OperationRecord,
+    OperationRecordParam
+  } from '@/api/system/operation-record/model';
+
+  defineOptions({ name: 'SystemOperationRecord' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '账号',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'module',
+      label: '操作模块',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'description',
+      label: '操作功能',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'url',
+      label: '请求地址',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'requestMethod',
+      label: '请求方式',
+      sortable: 'custom',
+      width: 110,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      sortable: 'custom',
+      width: 100,
+      align: 'center',
+      slot: 'status',
+      filters: [
+        {
+          text: '正常',
+          value: '0'
+        },
+        {
+          text: '异常',
+          value: '1'
+        }
+      ],
+      filterMultiple: false,
+      formatter: (row) => (row.status == 0 ? '正常' : '异常')
+    },
+    {
+      prop: 'spendTime',
+      label: '耗时',
+      sortable: 'custom',
+      width: 100,
+      formatter: (row) => `${row.spendTime / 1000}s`,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '操作时间',
+      sortable: 'custom',
+      align: 'center',
+      width: 180
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 90,
+      align: 'center',
+      slot: 'action' /* ,
+      fixed: 'right' */,
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 当前选中数据 */
+  const current = ref<OperationRecord>({
+    module: '',
+    description: '',
+    url: '',
+    requestMethod: '',
+    method: '',
+    params: '',
+    result: '',
+    error: '',
+    spendTime: 0,
+    os: '',
+    device: '',
+    browser: '',
+    ip: '',
+    status: 0,
+    createTime: '',
+    nickname: '',
+    username: ''
+  });
+
+  /** 是否显示查看弹窗 */
+  const showInfo = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({
+    pages,
+    where,
+    orders,
+    filters
+  }) => {
+    return pageOperationRecords({
+      ...where,
+      ...orders,
+      ...filters,
+      ...pages
+    });
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: OperationRecordParam) => {
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 详情 */
+  const openDetail = (row: OperationRecord) => {
+    current.value = row;
+    showInfo.value = true;
+  };
+
+  /** 导出数据 */
+  const exportData = () => {
+    // 请求查询全部(不分页)的接口
+    const loading = EleMessage.loading({
+      message: '请求中..',
+      plain: true
+    });
+    tableRef.value?.fetch?.(({ where, orders, filters }) => {
+      listOperationRecords({ ...where, ...orders, ...filters })
+        .then((data) => {
+          const workbook = new ExcelJS.Workbook();
+          const sheet = workbook.addWorksheet('Sheet1');
+          sheet.addRow([
+            '账号',
+            '用户名',
+            '操作模块',
+            '操作功能',
+            '请求地址',
+            '请求方式',
+            '状态',
+            '耗时',
+            '操作时间'
+          ]);
+          data.forEach((d) => {
+            sheet.addRow([
+              d.username,
+              d.nickname,
+              d.module,
+              d.description,
+              d.url,
+              d.requestMethod,
+              ['正常', '异常'][d.status],
+              d.spendTime / 1000 + 's',
+              d.createTime
+            ]);
+          });
+          // 设置列宽
+          [16, 16, 18, 20, 28, 14, 14, 14, 24].forEach((width, index) => {
+            sheet.getColumn(index + 1).width = width;
+          });
+          // 设置样式
+          sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
+            row.height = 20;
+            row.eachCell({ includeEmpty: true }, (cell) => {
+              cell.border = {
+                top: { style: 'thin' },
+                left: { style: 'thin' },
+                bottom: { style: 'thin' },
+                right: { style: 'thin' }
+              };
+              cell.alignment = {
+                vertical: 'middle',
+                horizontal: 'center'
+              };
+              cell.font = { size: 12, bold: rowIndex === 1 };
+            });
+          });
+          // 下载文件
+          workbook.xlsx.writeBuffer().then((data) => {
+            download(data, '操作日志.xlsx');
+            loading.close();
+          });
+        })
+        .catch((e) => {
+          loading.close();
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+</script>
diff --git a/z_ele/src/views/system/organization/components/organization-edit.vue b/z_ele/src/views/system/organization/components/organization-edit.vue
new file mode 100644
index 0000000..41a14f7
--- /dev/null
+++ b/z_ele/src/views/system/organization/components/organization-edit.vue
@@ -0,0 +1,217 @@
+<!-- 机构编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="620"
+    v-model="visible"
+    :title="isUpdate ? '修改机构' : '添加机构'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-row :gutter="16">
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="上级机构" prop="parentId">
+            <organization-select
+              v-model="form.parentId"
+              placeholder="请选择上级机构"
+            />
+          </el-form-item>
+          <el-form-item label="机构名称" prop="organizationName">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.organizationName"
+              placeholder="请输入机构名称"
+            />
+          </el-form-item>
+          <el-form-item label="机构全称" prop="organizationFullName">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.organizationFullName"
+              placeholder="请输入机构全称"
+            />
+          </el-form-item>
+          <el-form-item label="机构代码">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.organizationCode"
+              placeholder="请输入机构代码"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="机构类型" prop="organizationType">
+            <dict-data
+              code="organization_type"
+              v-model="form.organizationType"
+              placeholder="请选择机构类型"
+            />
+          </el-form-item>
+          <el-form-item label="排序号" prop="sortNumber">
+            <el-input-number
+              :min="0"
+              :max="99999"
+              v-model="form.sortNumber"
+              placeholder="请输入排序号"
+              controls-position="right"
+              class="ele-fluid"
+            />
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input
+              :rows="3"
+              type="textarea"
+              :maxlength="200"
+              v-model="form.comments"
+              placeholder="请输入备注"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import OrganizationSelect from './organization-select.vue';
+  import {
+    addOrganization,
+    updateOrganization
+  } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: Organization | null;
+    /** 添加时机构id */
+    organizationId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<Organization>({
+    organizationId: void 0,
+    parentId: void 0,
+    organizationName: '',
+    organizationFullName: '',
+    organizationCode: '',
+    organizationType: void 0,
+    sortNumber: void 0,
+    comments: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    organizationName: [
+      {
+        required: true,
+        message: '请输入机构名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    organizationFullName: [
+      {
+        required: true,
+        message: '请输入机构全称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    organizationType: [
+      {
+        required: true,
+        message: '请选择机构类型',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value
+        ? updateOrganization
+        : addOrganization;
+      saveOrUpdate({ ...form, parentId: form.parentId || 0 })
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields({
+          ...props.data,
+          parentId: props.data.parentId || void 0
+        });
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        form.parentId = props.organizationId;
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/organization/components/organization-search.vue b/z_ele/src/views/system/organization/components/organization-search.vue
new file mode 100644
index 0000000..6fccf01
--- /dev/null
+++ b/z_ele/src/views/system/organization/components/organization-search.vue
@@ -0,0 +1,60 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="机构名称">
+            <el-input
+              clearable
+              v-model.trim="form.organizationName"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="机构类型">
+            <dict-data
+              code="organization_type"
+              v-model="form.organizationType"
+              placeholder="请选择"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :md="8" :sm="24" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { OrganizationParam } from '@/api/system/organization/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: OrganizationParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<OrganizationParam>({
+    organizationName: '',
+    organizationFullName: '',
+    organizationType: void 0
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/organization/components/organization-select.vue b/z_ele/src/views/system/organization/components/organization-select.vue
new file mode 100644
index 0000000..db5e369
--- /dev/null
+++ b/z_ele/src/views/system/organization/components/organization-select.vue
@@ -0,0 +1,52 @@
+<!-- 机构选择下拉框 -->
+<template>
+  <el-tree-select
+    clearable
+    filterable
+    :data="data"
+    check-strictly
+    default-expand-all
+    node-key="organizationId"
+    :props="{ label: 'organizationName' }"
+    :placeholder="placeholder"
+    v-model="model"
+    class="ele-fluid"
+    :popper-options="{ strategy: 'fixed' }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import { listOrganizations } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  withDefaults(
+    defineProps<{
+      /** 提示信息 */
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择所属机构'
+    }
+  );
+
+  /** 选中的机构 */
+  const model = defineModel<number | string>({ type: [Number, String] });
+
+  /** 机构数据 */
+  const data = ref<Organization[]>([]);
+
+  /** 获取机构数据 */
+  listOrganizations()
+    .then((list) => {
+      data.value = toTree({
+        data: list,
+        idField: 'organizationId',
+        parentIdField: 'parentId'
+      });
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
diff --git a/z_ele/src/views/system/organization/index.vue b/z_ele/src/views/system/organization/index.vue
new file mode 100644
index 0000000..0a8f908
--- /dev/null
+++ b/z_ele/src/views/system/organization/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <ele-page>
+    <organization-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <ele-pro-table
+        sticky
+        ref="tableRef"
+        row-key="organizationId"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '机构数据' }"
+        :default-expand-all="true"
+        :pagination="false"
+        cache-key="systemOrganizationTable"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="PlusOutlined"
+            @click="openEdit()"
+          >
+            添加
+          </el-button>
+          <el-button
+            class="ele-btn-icon"
+            :icon="ColumnHeightOutlined"
+            @click="expandAll"
+          >
+            展开全部
+          </el-button>
+          <el-button
+            class="ele-btn-icon"
+            :icon="VerticalAlignMiddleOutlined"
+            @click="foldAll"
+          >
+            折叠全部
+          </el-button>
+        </template>
+        <template #action="{ row }">
+          <el-link
+            type="primary"
+            underline="never"
+            @click="openEdit(null, row.organizationId)"
+          >
+            添加
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="primary" underline="never" @click="openEdit(row)">
+            修改
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            删除
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+    <organization-edit
+      v-model="showEdit"
+      :data="current"
+      :organization-id="parentId"
+      @done="reload"
+    />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import {
+    PlusOutlined,
+    ColumnHeightOutlined,
+    VerticalAlignMiddleOutlined
+  } from '@/components/icons';
+  import OrganizationSearch from './components/organization-search.vue';
+  import OrganizationEdit from './components/organization-edit.vue';
+  import {
+    listOrganizations,
+    removeOrganization
+  } from '@/api/system/organization';
+  import type {
+    Organization,
+    OrganizationParam
+  } from '@/api/system/organization/model';
+
+  defineOptions({ name: 'SystemOrganization' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'organizationName',
+      label: '机构名称',
+      sortable: 'custom',
+      minWidth: 160
+    },
+    {
+      prop: 'organizationTypeName',
+      label: '机构类型',
+      minWidth: 100,
+      align: 'center'
+    },
+    {
+      prop: 'sortNumber',
+      label: '排序号',
+      minWidth: 100,
+      align: 'center'
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 180,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 当前编辑数据 */
+  const current = ref<Organization | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 上级机构id */
+  const parentId = ref<number>();
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = async ({ where, orders }) => {
+    const data = await listOrganizations({ ...where, ...orders });
+    return toTree({
+      data,
+      idField: 'organizationId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /** 刷新表格 */
+  const reload = (where?: OrganizationParam) => {
+    tableRef.value?.reload?.({ where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: Organization | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /** 删除单个 */
+  const remove = (row: Organization) => {
+    if (row.children?.length) {
+      EleMessage.error({ message: '请先删除子节点', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + row.organizationName + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeOrganization(row.organizationId)
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 展开全部 */
+  const expandAll = () => {
+    tableRef.value?.toggleRowExpansionAll?.(true);
+  };
+
+  /** 折叠全部 */
+  const foldAll = () => {
+    tableRef.value?.toggleRowExpansionAll?.(false);
+  };
+</script>
diff --git a/z_ele/src/views/system/role/components/role-auth.vue b/z_ele/src/views/system/role/components/role-auth.vue
new file mode 100644
index 0000000..e40b96c
--- /dev/null
+++ b/z_ele/src/views/system/role/components/role-auth.vue
@@ -0,0 +1,148 @@
+<!-- 角色权限分配弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    title="分配权限"
+    position="center"
+    v-model="visible"
+    :body-style="{ padding: '12px 0 12px 22px' }"
+    @open="handleOpen"
+  >
+    <ele-loading
+      :loading="authLoading"
+      :spinner-style="{ background: 'transparent' }"
+      :style="{
+        paddingRight: '20px',
+        height: 'calc(100vh - 192px)',
+        maxHeight: 'calc(100dvh - 192px)',
+        minHeight: '100px',
+        overflow: 'auto'
+      }"
+    >
+      <el-tree
+        ref="treeRef"
+        show-checkbox
+        :data="authData"
+        node-key="menuId"
+        :default-expand-all="true"
+        :props="{ label: 'title' }"
+        :default-checked-keys="checkedKeys"
+        :style="{ '--ele-tree-item-height': '28px' }"
+      >
+        <template #default="scope">
+          <div>
+            <el-icon
+              v-if="scope.data.icon"
+              :size="16"
+              style="margin-right: 6px; vertical-align: -5px"
+            >
+              <component :is="scope.data.icon" />
+            </el-icon>
+            <span style="vertical-align: -2px">{{ scope.data.title }}</span>
+          </div>
+        </template>
+      </el-tree>
+    </ele-loading>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import type { ElTree } from 'element-plus';
+  import { EleMessage, toTree, eachTree } from 'ele-admin-plus';
+  import { listRoleMenus, updateRoleMenus } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+  import type { Menu } from '@/api/system/menu/model';
+
+  const props = defineProps<{
+    /** 当前角色数据 */
+    data?: Role | null;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 树组件实例 */
+  const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
+
+  /** 权限数据 */
+  const authData = ref<Menu[]>([]);
+
+  /** 权限数据请求状态 */
+  const authLoading = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 角色权限选中的keys */
+  const checkedKeys = ref<number[]>([]);
+
+  /** 查询权限数据 */
+  const query = () => {
+    authData.value = [];
+    checkedKeys.value = [];
+    if (!props.data) {
+      return;
+    }
+    authLoading.value = true;
+    listRoleMenus(props.data.roleId)
+      .then((data) => {
+        authLoading.value = false;
+        // 转成树形结构的数据
+        authData.value = toTree({
+          data: data,
+          idField: 'menuId',
+          parentIdField: 'parentId'
+        });
+        // 回显选中的数据
+        nextTick(() => {
+          const cks: number[] = [];
+          eachTree(authData.value, (d) => {
+            if (d.menuId && d.checked && !d.children?.length) {
+              cks.push(d.menuId);
+            }
+          });
+          checkedKeys.value = cks;
+        });
+      })
+      .catch((e) => {
+        authLoading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存权限分配 */
+  const save = () => {
+    loading.value = true;
+    const ids =
+      (treeRef.value?.getCheckedKeys?.() ?? []).concat(
+        treeRef.value?.getHalfCheckedKeys?.() ?? []
+      ) ?? [];
+    updateRoleMenus(props.data?.roleId, ids as unknown as number[])
+      .then((msg) => {
+        loading.value = false;
+        EleMessage.success({ message: msg, plain: true });
+        handleCancel();
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = () => {
+    query();
+  };
+</script>
diff --git a/z_ele/src/views/system/role/components/role-edit.vue b/z_ele/src/views/system/role/components/role-edit.vue
new file mode 100644
index 0000000..1c9f325
--- /dev/null
+++ b/z_ele/src/views/system/role/components/role-edit.vue
@@ -0,0 +1,147 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="460"
+    v-model="visible"
+    :title="isUpdate ? '修改角色' : '添加角色'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.roleName"
+          placeholder="请输入角色名称"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识" prop="roleCode">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.roleCode"
+          placeholder="请输入角色标识"
+        />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.comments"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { addRole, updateRole } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: Role | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<Role>({
+    roleId: void 0,
+    roleName: '',
+    roleCode: '',
+    comments: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    roleName: [
+      {
+        required: true,
+        message: '请输入角色名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    roleCode: [
+      {
+        required: true,
+        message: '请输入角色标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateRole : addRole;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields(props.data);
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/role/components/role-search.vue b/z_ele/src/views/system/role/components/role-search.vue
new file mode 100644
index 0000000..5ff3e88
--- /dev/null
+++ b/z_ele/src/views/system/role/components/role-search.vue
@@ -0,0 +1,64 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form
+      label-width="72px"
+      @keyup.enter.prevent="search"
+      @submit.prevent=""
+    >
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="角色名称">
+            <el-input
+              clearable
+              v-model.trim="form.roleName"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="角色标识">
+            <el-input
+              clearable
+              v-model.trim="form.roleCode"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :md="8" :sm="24" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { RoleParam } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: RoleParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<RoleParam>({
+    roleName: '',
+    roleCode: '',
+    comments: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>
diff --git a/z_ele/src/views/system/role/index.vue b/z_ele/src/views/system/role/index.vue
new file mode 100644
index 0000000..82676e7
--- /dev/null
+++ b/z_ele/src/views/system/role/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <ele-page>
+    <!-- 搜索表单 -->
+    <role-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="roleId"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        v-model:selections="selections"
+        :highlight-current-row="true"
+        :export-config="{ fileName: '角色数据', datasource: exportSource }"
+        :print-config="{ datasource: exportSource }"
+        cache-key="systemRoleTable"
+      >
+        <template #toolbar>
+          <el-button
+            type="primary"
+            class="ele-btn-icon"
+            :icon="PlusOutlined"
+            @click="openEdit()"
+          >
+            添加
+          </el-button>
+          <el-button
+            type="danger"
+            class="ele-btn-icon"
+            :icon="DeleteOutlined"
+            @click="remove()"
+          >
+            删除
+          </el-button>
+        </template>
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click="openEdit(row)">
+            修改
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="primary" underline="never" @click="openAuth(row)">
+            分配权限
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            删除
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+    <!-- 编辑弹窗 -->
+    <role-edit v-model="showEdit" :data="current" @done="reload" />
+    <!-- 权限分配弹窗 -->
+    <role-auth v-model="showAuth" :data="current" />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { PlusOutlined, DeleteOutlined } from '@/components/icons';
+  import RoleSearch from './components/role-search.vue';
+  import RoleEdit from './components/role-edit.vue';
+  import RoleAuth from './components/role-auth.vue';
+  import { pageRoles, removeRoles, listRoles } from '@/api/system/role';
+  import type { Role, RoleParam } from '@/api/system/role/model';
+
+  defineOptions({ name: 'SystemRole' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'roleName',
+      label: '角色名称',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'roleCode',
+      label: '角色标识',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'comments',
+      label: '备注',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 200,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<Role[]>([]);
+
+  /** 当前编辑数据 */
+  const current = ref<Role | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 是否显示权限分配弹窗 */
+  const showAuth = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageRoles({ ...where, ...orders, ...pages });
+  };
+
+  /** 搜索 */
+  const reload = (where?: RoleParam) => {
+    selections.value = [];
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: Role) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 打开权限分配弹窗 */
+  const openAuth = (row?: Role) => {
+    current.value = row ?? null;
+    showAuth.value = true;
+  };
+
+  /** 删除单个 */
+  const remove = (row?: Role) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.roleName).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeRoles(rows.map((d) => d.roleId))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders }) => {
+    return listRoles({ ...where, ...orders });
+  };
+</script>
diff --git a/z_ele/src/views/system/user/components/role-select.vue b/z_ele/src/views/system/user/components/role-select.vue
new file mode 100644
index 0000000..9b97be6
--- /dev/null
+++ b/z_ele/src/views/system/user/components/role-select.vue
@@ -0,0 +1,66 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <el-select
+    multiple
+    clearable
+    :model-value="roleIds"
+    :placeholder="placeholder"
+    class="ele-fluid"
+    @update:modelValue="updateValue"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="(item as any).roleId"
+      :label="item.roleName"
+    />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { listRoles } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const props = withDefaults(
+    defineProps<{
+      /** 选中的角色 */
+      modelValue?: Role[];
+      /** 提示文本 */
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: Role[]): void;
+  }>();
+
+  /** 选中的角色id */
+  const roleIds = computed(() =>
+    props.modelValue?.map?.((d) => d.roleId as number)
+  );
+
+  /** 角色数据 */
+  const data = ref<Role[]>([]);
+
+  /** 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:modelValue',
+      value.map((v) => ({ roleId: v }))
+    );
+  };
+
+  /** 获取角色数据 */
+  listRoles()
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      EleMessage.error({ message: e.message, plain: true });
+    });
+</script>
diff --git a/z_ele/src/views/system/user/components/user-edit.vue b/z_ele/src/views/system/user/components/user-edit.vue
new file mode 100644
index 0000000..fd103a8
--- /dev/null
+++ b/z_ele/src/views/system/user/components/user-edit.vue
@@ -0,0 +1,295 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="680"
+    v-model="visible"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-row :gutter="16">
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="所属机构">
+            <organization-select v-model="form.organizationId" />
+          </el-form-item>
+          <el-form-item label="用户账号" prop="username">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.username"
+              placeholder="请输入用户账号"
+              :disabled="isUpdate"
+            />
+          </el-form-item>
+          <el-form-item label="用户名" prop="nickname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.nickname"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <dict-data code="sex" v-model="form.sex" placeholder="请选择性别" />
+          </el-form-item>
+          <el-form-item label="角色" prop="roles">
+            <role-select v-model="form.roles" />
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.email"
+              placeholder="请输入邮箱"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <el-form-item label="手机号" prop="phone">
+            <el-input
+              clearable
+              :maxlength="11"
+              v-model="form.phone"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+          <el-form-item label="出生日期">
+            <el-date-picker
+              v-model="form.birthday"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择出生日期"
+              class="ele-fluid"
+            />
+          </el-form-item>
+          <el-form-item v-if="!isUpdate" label="登录密码" prop="password">
+            <el-input
+              show-password
+              type="password"
+              :maxlength="20"
+              v-model="form.password"
+              placeholder="请输入登录密码"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-radio-group v-model="form.status">
+              <el-radio :value="0" label="正常" />
+              <el-radio :value="1" label="冻结" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="个人简介">
+            <el-input
+              type="textarea"
+              :rows="3"
+              :maxlength="200"
+              v-model="form.introduction"
+              placeholder="请输入个人简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage, emailReg, phoneReg } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import RoleSelect from './role-select.vue';
+  import OrganizationSelect from '@/views/system/organization/components/organization-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: User | null;
+    /** 添加时机构id */
+    organizationId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<User>({
+    userId: void 0,
+    username: '',
+    nickname: '',
+    sex: void 0,
+    roles: [],
+    email: '',
+    phone: '',
+    password: '',
+    introduction: '',
+    birthday: '',
+    organizationId: void 0,
+    status: 0
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    username: [
+      {
+        required: true,
+        message: '请输入用户账号',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        min: 4,
+        message: '账号长度最少为4位',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (isUpdate.value) {
+            callback();
+            return;
+          }
+          checkExistence('username', value)
+            .then(() => {
+              callback(new Error('账号已经存在'));
+            })
+            .catch(() => {
+              callback();
+            });
+        }
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入用户名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'change'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        message: '请输入登录密码',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        type: 'string',
+        trigger: 'blur',
+        validator: (_rule: any, value: string, callback: any) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return callback();
+          }
+          callback(new Error('密码必须为5-18位非空白字符'));
+        }
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        type: 'string',
+        trigger: 'blur'
+      },
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields({ ...props.data, password: '' });
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        form.organizationId = props.organizationId;
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>
diff --git a/z_ele/src/views/system/user/components/user-import.vue b/z_ele/src/views/system/user/components/user-import.vue
new file mode 100644
index 0000000..8bdd7b5
--- /dev/null
+++ b/z_ele/src/views/system/user/components/user-import.vue
@@ -0,0 +1,105 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal :width="460" title="导入用户" v-model="visible">
+    <div v-loading="loading" class="user-import-upload">
+      <el-upload
+        drag
+        action=""
+        accept=".xls,.xlsx"
+        :show-file-list="false"
+        :before-upload="doUpload"
+      >
+        <ele-text
+          type="primary"
+          :icon="CloudUploadOutlined"
+          :icon-props="{ size: 52 }"
+          style="margin-bottom: 10px"
+        />
+        <ele-text type="placeholder">将文件拖到此处, 或点击上传</ele-text>
+      </el-upload>
+    </div>
+    <div style="display: flex; align-items: center; justify-content: center">
+      <span style="padding-right: 8px">只能上传 xls、xlsx 文件,</span>
+      <el-link
+        type="primary"
+        underline="never"
+        href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
+        download="用户导入模板.xlsx"
+      >
+        下载模板
+      </el-link>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EleMessage } from 'ele-admin-plus';
+  import { CloudUploadOutlined } from '@/components/icons';
+  import { importUsers } from '@/api/system/user';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 是否打开弹窗 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 导入请求状态 */
+  const loading = ref(false);
+
+  /** 上传 */
+  const doUpload = (file: File) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      EleMessage.error({ message: '只能选择 excel 文件', plain: true });
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      EleMessage.error({ message: '大小不能超过 10MB', plain: true });
+      return false;
+    }
+    loading.value = true;
+    importUsers(file)
+      .then((msg) => {
+        loading.value = false;
+        EleMessage.success({ message: msg, plain: true });
+        visible.value = false;
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+    return false;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .user-import-upload {
+    margin-bottom: 12px;
+
+    :deep(.el-upload > .el-upload-dragger) {
+      padding: 0;
+      height: 168px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transition: (border-color 0.2s, background-color 0.2s);
+
+      &:not(.is-dragover) {
+        background: var(--el-fill-color-light);
+      }
+    }
+
+    :deep(.el-icon > svg) {
+      stroke-width: 3;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/system/user/components/user-list.vue b/z_ele/src/views/system/user/components/user-list.vue
new file mode 100644
index 0000000..f6db33c
--- /dev/null
+++ b/z_ele/src/views/system/user/components/user-list.vue
@@ -0,0 +1,350 @@
+<template>
+  <user-search ref="searchRef" style="margin-bottom: -14px" @search="reload" />
+  <ele-pro-table
+    ref="tableRef"
+    row-key="userId"
+    :columns="columns"
+    :datasource="datasource"
+    :show-overflow-tooltip="true"
+    v-model:selections="selections"
+    :highlight-current-row="true"
+    :export-config="{ fileName: '用户数据', datasource: exportSource }"
+    :print-config="{ datasource: exportSource }"
+    :style="{ paddingBottom: '16px' }"
+    cache-key="systemUserTable"
+  >
+    <template #toolbar>
+      <el-button
+        type="primary"
+        class="ele-btn-icon"
+        :icon="PlusOutlined"
+        @click="openEdit()"
+      >
+        添加
+      </el-button>
+      <el-button
+        type="danger"
+        class="ele-btn-icon"
+        :icon="DeleteOutlined"
+        @click="remove()"
+      >
+        删除
+      </el-button>
+      <el-button
+        class="ele-btn-icon"
+        :icon="UploadOutlined"
+        @click="openImport"
+      >
+        导入
+      </el-button>
+    </template>
+    <template #nickname="{ row }">
+      <el-link type="primary" underline="never" @click="openDetail(row)">
+        {{ row.nickname }}
+      </el-link>
+    </template>
+    <template #roles="{ row }">
+      <el-tag
+        v-for="item in row.roles"
+        :key="item.roleId"
+        size="small"
+        :disable-transitions="true"
+      >
+        {{ item.roleName }}
+      </el-tag>
+    </template>
+    <template #status="{ row }">
+      <el-switch
+        size="small"
+        :model-value="row.status === 0"
+        @change="(checked: boolean) => editStatus(checked, row)"
+      />
+    </template>
+    <template #action="{ row }">
+      <el-link type="primary" underline="never" @click="openEdit(row)">
+        修改
+      </el-link>
+      <el-divider direction="vertical" />
+      <ele-dropdown
+        :items="[
+          { title: '重置密码', command: 'password' },
+          { title: '删除用户', command: 'delete', danger: true, divided: true }
+        ]"
+        style="display: inline"
+        @command="(key) => dropClick(key, row)"
+      >
+        <el-link type="primary" underline="never">
+          <span>更多</span>
+          <el-icon :size="12" style="vertical-align: -1px; margin-left: 2px">
+            <ArrowDown />
+          </el-icon>
+        </el-link>
+      </ele-dropdown>
+    </template>
+  </ele-pro-table>
+  <user-edit
+    :data="current"
+    v-model="showEdit"
+    :organization-id="organizationId"
+    @done="reload"
+  />
+  <user-import v-model="showImport" @done="reload" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    ArrowDown,
+    UploadOutlined
+  } from '@/components/icons';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import UserSearch from './user-search.vue';
+  import UserEdit from './user-edit.vue';
+  import UserImport from './user-import.vue';
+  import {
+    pageUsers,
+    removeUsers,
+    updateUserStatus,
+    updateUserPassword,
+    listUsers
+  } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    /** 机构 id */
+    organizationId: number;
+  }>();
+
+  const { push } = useRouter();
+  const { addPageTab } = usePageTab();
+
+  /** 搜索栏实例 */
+  const searchRef = ref<InstanceType<typeof UserSearch> | null>(null);
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'username',
+      label: '用户账号',
+      sortable: 'custom',
+      minWidth: 110
+    },
+    {
+      prop: 'nickname',
+      label: '用户名',
+      sortable: 'custom',
+      minWidth: 110,
+      slot: 'nickname'
+    },
+    {
+      prop: 'sexName',
+      label: '性别',
+      sortable: 'custom',
+      width: 90,
+      align: 'center'
+    },
+    {
+      columnKey: 'roles',
+      label: '角色',
+      minWidth: 110,
+      slot: 'roles',
+      align: 'center',
+      formatter: (row) => row.roles.map((d: any) => d.roleName).join(',')
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 90,
+      align: 'center',
+      sortable: 'custom',
+      slot: 'status',
+      formatter: (row) => (row.status == 0 ? '正常' : '冻结')
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 128,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<User[]>([]);
+
+  /** 当前编辑数据 */
+  const current = ref<User | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 是否显示用户导入弹窗 */
+  const showImport = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageUsers({
+      ...where,
+      ...orders,
+      ...pages,
+      organizationId: props.organizationId
+    });
+  };
+
+  /** 搜索 */
+  const reload = (where?: UserParam) => {
+    selections.value = [];
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 打开编辑弹窗 */
+  const openImport = () => {
+    showImport.value = true;
+  };
+
+  /** 删除 */
+  const remove = (row?: User) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.nickname).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeUsers(rows.map((d) => d.userId))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+
+  /** 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        EleMessage.success({ message: msg, plain: true });
+      })
+      .catch((e) => {
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 下拉菜单点击事件 */
+  const dropClick = (key: any, row: User) => {
+    if (key === 'password') {
+      ElMessageBox.prompt(`请输入用户"${row.nickname}"的新密码：`, '重置密码', {
+        inputPattern: /^[\S]{5,18}$/,
+        inputErrorMessage: '密码必须为5-18位非空白字符',
+        draggable: true
+      })
+        .then(({ value }) => {
+          const loading = EleMessage.loading({
+            message: '请求中..',
+            plain: true
+          });
+          updateUserPassword(row.userId, value)
+            .then((msg) => {
+              loading.close();
+              EleMessage.success({ message: msg, plain: true });
+            })
+            .catch((e) => {
+              loading.close();
+              EleMessage.error({ message: e.message, plain: true });
+            });
+        })
+        .catch(() => {});
+    } else if (key === 'delete') {
+      remove(row);
+    }
+  };
+
+  // 监听机构 id 变化
+  watch(
+    () => props.organizationId,
+    () => {
+      searchRef.value?.resetFields?.();
+      reload({});
+    }
+  );
+
+  /** 导出和打印全部数据的数据源 */
+  const exportSource: DatasourceFunction = ({ where, orders }) => {
+    return listUsers({
+      ...where,
+      ...orders,
+      organizationId: props.organizationId
+    });
+  };
+
+  /** 查看详情 */
+  const openDetail = (row: User) => {
+    const path = `/system/user/details/${row.userId}`;
+    addPageTab({
+      title: `用户详情[${row.nickname}]`,
+      key: path,
+      closable: true,
+      meta: { icon: 'UserOutlined' }
+    });
+    push(path);
+  };
+</script>
diff --git a/z_ele/src/views/system/user/components/user-search.vue b/z_ele/src/views/system/user/components/user-search.vue
new file mode 100644
index 0000000..a28f46c
--- /dev/null
+++ b/z_ele/src/views/system/user/components/user-search.vue
@@ -0,0 +1,65 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
+    <el-row :gutter="8">
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="用户账号">
+          <el-input
+            clearable
+            v-model.trim="form.username"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="用户名">
+          <el-input
+            clearable
+            v-model.trim="form.nickname"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label="性别">
+          <dict-data code="sex" v-model="form.sex" placeholder="请选择" />
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="12" :xs="24">
+        <el-form-item label-width="16px">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sex: void 0
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  defineExpose({ resetFields });
+</script>
diff --git a/z_ele/src/views/system/user/details/index.vue b/z_ele/src/views/system/user/details/index.vue
new file mode 100644
index 0000000..0421756
--- /dev/null
+++ b/z_ele/src/views/system/user/details/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card>
+      <div style="margin-bottom: 16px">
+        <el-button
+          :icon="ArrowLeftOutlined"
+          type="primary"
+          class="ele-btn-icon"
+          @click="handleBack"
+        >
+          返回列表
+        </el-button>
+      </div>
+      <el-descriptions
+        :border="true"
+        :column="mobile ? 1 : 2"
+        class="detail-table"
+      >
+        <el-descriptions-item label="用户名">
+          <div>{{ form.nickname }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="头像">
+          <div style="display: flex">
+            <el-avatar v-if="form.avatar" :src="form.avatar" :size="32" />
+            <el-avatar v-else style="background: #1677ff" :size="32">
+              {{
+                form.nickname && form.nickname.length > 2
+                  ? form.nickname.substring(form.nickname.length - 2)
+                  : form.nickname
+              }}
+            </el-avatar>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="用户账号">
+          <div>{{ form.username }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="性别">
+          <div>{{ form.sexName }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="手机号">
+          <div>{{ form.phone }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item label="角色">
+          <el-tag
+            v-for="item in form.roles"
+            :key="item.roleId"
+            size="small"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <ele-dot v-if="form.status === 0" text="正常" size="9px" />
+          <ele-dot
+            v-else-if="form.status === 1"
+            text="冻结"
+            type="danger"
+            :ripple="false"
+            size="9px"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          <div>{{ form.createTime }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { EleMessage } from 'ele-admin-plus';
+  import { ArrowLeftOutlined } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import { usePageTab } from '@/utils/use-page-tab';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+
+  defineOptions({ name: 'SystemUserDetails' });
+
+  const route = useRoute();
+  const { push } = useRouter();
+  const { routeTabKey, removePageTab, setPageTabTitle } = usePageTab();
+  const { mobile } = useMobile();
+
+  /** 用户信息 */
+  const form = reactive<User>({
+    userId: Number(route.params.id),
+    avatar: void 0,
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    roles: [],
+    createTime: void 0,
+    status: void 0
+  });
+
+  /** 请求状态 */
+  const loading = ref(true);
+
+  /** 返回 */
+  const handleBack = () => {
+    removePageTab({ key: routeTabKey });
+    push('/system/user');
+  };
+
+  /** 查询详情 */
+  const query = () => {
+    if (!form.userId || isNaN(form.userId)) {
+      return;
+    }
+    loading.value = true;
+    getUser(form.userId)
+      .then((data) => {
+        loading.value = false;
+        Object.assign(form, data);
+        // 修改页签标题
+        setPageTabTitle(`用户详情[${form.nickname}]`);
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  query();
+</script>
+
+<style lang="scss" scoped>
+  .detail-table :deep(td.el-descriptions__label.el-descriptions__cell) {
+    width: 108px;
+    text-align: right;
+    font-weight: normal;
+  }
+</style>
diff --git a/z_ele/src/views/system/user/index.vue b/z_ele/src/views/system/user/index.vue
new file mode 100644
index 0000000..edcd394
--- /dev/null
+++ b/z_ele/src/views/system/user/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <ele-page
+    flex-table
+    :multi-card="false"
+    hide-footer
+    style="min-height: 420px"
+  >
+    <ele-card
+      flex-table
+      :body-style="{ padding: '0 0 0 16px', overflow: 'hidden' }"
+    >
+      <ele-split-panel
+        flex-table
+        size="256px"
+        allow-collapse
+        v-model:collapse="collapse"
+        :custom-style="{
+          borderWidth: '0 1px 0 0',
+          padding: '16px 0',
+          background: 'none'
+        }"
+        :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
+        :style="{ height: '100%', overflow: 'visible' }"
+      >
+        <div style="padding: 0 16px 12px 0">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="keywords"
+            placeholder="输入机构名称搜索"
+            :prefix-icon="SearchOutlined"
+          />
+        </div>
+        <ele-loading
+          :loading="loading"
+          :spinner-style="{ background: 'none' }"
+          :style="{ flex: 1, paddingRight: '16px', overflow: 'auto' }"
+        >
+          <el-tree
+            ref="treeRef"
+            :data="data"
+            highlight-current
+            node-key="organizationId"
+            :props="{ label: 'organizationName' }"
+            :expand-on-click-node="false"
+            :default-expand-all="true"
+            :filter-node-method="filterNode"
+            :style="{ '--ele-tree-item-height': '34px' }"
+            @node-click="handleNodeClick"
+          />
+        </ele-loading>
+        <template #body>
+          <user-list
+            v-if="current && current.organizationId"
+            :organization-id="current.organizationId"
+          />
+        </template>
+      </ele-split-panel>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, watch } from 'vue';
+  import type { ElTree } from 'element-plus';
+  import { EleMessage, toTree } from 'ele-admin-plus';
+  import { SearchOutlined } from '@/components/icons';
+  import { useMobile } from '@/utils/use-mobile';
+  import UserList from './components/user-list.vue';
+  import { listOrganizations } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  defineOptions({ name: 'SystemUser' });
+
+  /** 是否是移动端 */
+  const { mobile } = useMobile();
+
+  /** 分割面板是否折叠 */
+  const collapse = ref(mobile.value);
+
+  /** 树组件 */
+  const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
+
+  /** 加载状态 */
+  const loading = ref(true);
+
+  /** 树形数据 */
+  const data = ref<Organization[]>([]);
+
+  /** 选中数据 */
+  const current = ref<Organization | null>(null);
+
+  /** 机构搜索关键字 */
+  const keywords = ref('');
+
+  /** 查询 */
+  const query = () => {
+    loading.value = true;
+    listOrganizations()
+      .then((list) => {
+        loading.value = false;
+        data.value = toTree({
+          data: list,
+          idField: 'organizationId',
+          parentIdField: 'parentId'
+        });
+        nextTick(() => {
+          handleNodeClick(data.value[0]);
+        });
+      })
+      .catch((e) => {
+        loading.value = false;
+        EleMessage.error({ message: e.message, plain: true });
+      });
+  };
+
+  /** 选择数据 */
+  const handleNodeClick = (row?: Organization) => {
+    // 移动端自动收起左侧
+    if (current.value != null && mobile.value) {
+      collapse.value = true;
+    }
+    if (row && row.organizationId) {
+      current.value = row;
+      treeRef.value?.setCurrentKey?.(row.organizationId);
+    } else {
+      current.value = null;
+    }
+  };
+
+  /** 树过滤方法 */
+  const filterNode = (value: string, data: Organization) => {
+    if (value) {
+      return !!(data.organizationName && data.organizationName.includes(value));
+    }
+    return true;
+  };
+
+  /** 树过滤 */
+  watch(keywords, (value) => {
+    treeRef.value?.filter?.(value);
+  });
+
+  query();
+</script>
diff --git a/z_ele/src/views/user/message/components/message-letter.vue b/z_ele/src/views/user/message/components/message-letter.vue
new file mode 100644
index 0000000..43d73fe
--- /dev/null
+++ b/z_ele/src/views/user/message/components/message-letter.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      v-model:selections="selections"
+      :highlight-current-row="true"
+      :export-config="{ fileName: '用户私信数据' }"
+    >
+      <template #toolbar>
+        <el-button type="primary" class="ele-btn-icon" @click="readBatch">
+          标记已读
+        </el-button>
+        <el-button type="danger" class="ele-btn-icon" @click="remove()">
+          删除消息
+        </el-button>
+      </template>
+      <template #status="{ row }">
+        <ele-text v-if="row.status === 0" type="warning">未读</ele-text>
+        <ele-text v-else-if="row.status === 1" type="info">已读</ele-text>
+      </template>
+      <template #action="{ row }">
+        <el-link type="primary" underline="never" @click="reply(row)">
+          回复
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="remove(row)">
+          删除
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageLetters } from '@/api/example';
+  import type { Message } from '@/api/example/model';
+
+  const emit = defineEmits<{
+    (e: 'reload'): void;
+  }>();
+
+  const messageIns = useMessage({ inner: true, plain: true });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'title',
+      label: '私信内容',
+      minWidth: 220
+    },
+    {
+      prop: 'time',
+      label: '发送时间',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      align: 'center',
+      slot: 'status',
+      formatter: (row) => (row.status == 0 ? '未读' : '已读')
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 列表选中数据 */
+  const selections = ref<Message[]>([]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageLetters({ ...where, ...orders, ...pages });
+  };
+
+  /** 回复 */
+  const reply = (row: Message) => {
+    console.log(JSON.parse(JSON.stringify(row)));
+    messageIns.success('点击了回复');
+  };
+
+  /** 删除 */
+  const remove = (row?: Message) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.error('点击了删除');
+  };
+
+  /** 标记已读 */
+  const readBatch = () => {
+    if (!selections.value.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.success('点击了标记已读');
+    updateUnReadNum();
+  };
+
+  /** 触发更新未读数量事件 */
+  const updateUnReadNum = () => {
+    emit('reload');
+  };
+</script>
diff --git a/z_ele/src/views/user/message/components/message-notice.vue b/z_ele/src/views/user/message/components/message-notice.vue
new file mode 100644
index 0000000..cf95348
--- /dev/null
+++ b/z_ele/src/views/user/message/components/message-notice.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      v-model:selections="selections"
+      :highlight-current-row="true"
+      :export-config="{ fileName: '系统通知数据' }"
+    >
+      <template #toolbar>
+        <el-button type="primary" class="ele-btn-icon" @click="confirm()">
+          批量确认
+        </el-button>
+        <el-button type="danger" class="ele-btn-icon" @click="remove()">
+          删除通知
+        </el-button>
+      </template>
+      <template #status="{ row }">
+        <ele-text v-if="row.status === 0" type="warning">未确认</ele-text>
+        <ele-text v-else-if="row.status === 1" type="info">已确认</ele-text>
+      </template>
+      <template #action="{ row }">
+        <el-link type="primary" underline="never" @click="confirm(row)">
+          确认
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="remove(row)">
+          删除
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageNotices } from '@/api/example';
+  import type { Message } from '@/api/example/model';
+
+  const emit = defineEmits<{
+    (e: 'reload'): void;
+  }>();
+
+  const messageIns = useMessage({ inner: true, plain: true });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'title',
+      label: '通知标题',
+      minWidth: 220
+    },
+    {
+      prop: 'time',
+      label: '通知时间',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 90,
+      align: 'center',
+      slot: 'status',
+      formatter: (row) => (row.status == 0 ? '未确认' : '已确认')
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 列表选中数据 */
+  const selections = ref<Message[]>([]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageNotices({ ...where, ...orders, ...pages });
+  };
+
+  /** 确认 */
+  const confirm = (row?: Message) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.success('点击了确认');
+    updateUnReadNum();
+  };
+
+  /** 删除 */
+  const remove = (row?: Message) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.error('点击了删除');
+  };
+
+  /** 触发更新未读数量事件 */
+  const updateUnReadNum = () => {
+    emit('reload');
+  };
+</script>
diff --git a/z_ele/src/views/user/message/components/message-todo.vue b/z_ele/src/views/user/message/components/message-todo.vue
new file mode 100644
index 0000000..ed96c29
--- /dev/null
+++ b/z_ele/src/views/user/message/components/message-todo.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <ele-pro-table
+      ref="tableRef"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      :show-overflow-tooltip="true"
+      v-model:selections="selections"
+      :highlight-current-row="true"
+      :export-config="{ fileName: '待办事项数据' }"
+    >
+      <template #toolbar>
+        <el-button type="primary" class="ele-btn-icon" @click="ok()">
+          批量完成
+        </el-button>
+        <el-button type="danger" class="ele-btn-icon" @click="remove()">
+          删除待办
+        </el-button>
+      </template>
+      <template #status="{ row }">
+        <ele-text v-if="row.status === 0" type="warning">未完成</ele-text>
+        <ele-text v-else-if="row.status === 1" type="info">已完成</ele-text>
+      </template>
+      <template #action="{ row }">
+        <el-link type="primary" underline="never" @click="ok(row)">
+          完成
+        </el-link>
+        <el-divider direction="vertical" />
+        <el-link type="danger" underline="never" @click="remove(row)">
+          删除
+        </el-link>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import { pageTodos } from '@/api/example';
+  import type { Message } from '@/api/example/model';
+
+  const emit = defineEmits<{
+    (e: 'reload'): void;
+  }>();
+
+  const messageIns = useMessage({ inner: true, plain: true });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      prop: 'title',
+      label: '待办内容',
+      minWidth: 220
+    },
+    {
+      prop: 'time',
+      label: '结束时间',
+      width: 180,
+      align: 'center'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 90,
+      align: 'center',
+      slot: 'status',
+      formatter: (row) => (row.status == 0 ? '未完成' : '已完成')
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 120,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 列表选中数据 */
+  const selections = ref<Message[]>([]);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageTodos({ ...where, ...orders, ...pages });
+  };
+
+  /** 完成 */
+  const ok = (row?: Message) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.success('点击了完成');
+    updateUnReadNum();
+  };
+
+  /** 删除单个 */
+  const remove = (row?: Message) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      messageIns.error('请至少选择一条数据');
+      return;
+    }
+    messageIns.error('点击了删除');
+  };
+
+  /** 触发更新未读数量事件 */
+  const updateUnReadNum = () => {
+    emit('reload');
+  };
+</script>
diff --git a/z_ele/src/views/user/message/index.vue b/z_ele/src/views/user/message/index.vue
new file mode 100644
index 0000000..777cd4e
--- /dev/null
+++ b/z_ele/src/views/user/message/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <ele-page :multi-card="false">
+    <ele-card :body-style="{ padding: 0 }">
+      <div :class="['message-wrapper', { 'is-mobile': mobile }]">
+        <div class="message-side">
+          <ele-menus
+            :items="menus"
+            :default-active="active"
+            :mode="mobile ? 'horizontal' : 'vertical'"
+          />
+        </div>
+        <div class="message-body">
+          <transition name="slide-right" mode="out-in">
+            <keep-alive>
+              <message-notice v-if="active == 'notice'" @reload="queryBadge" />
+              <message-todo v-else-if="active == 'todo'" @reload="queryBadge" />
+              <message-letter v-else @reload="queryBadge" />
+            </keep-alive>
+          </transition>
+        </div>
+      </div>
+    </ele-card>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, watch, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'ele-admin-plus';
+  import type { MenuItem } from 'ele-admin-plus/es/ele-menus/types';
+  import { useMobile } from '@/utils/use-mobile';
+  import MessageNotice from './components/message-notice.vue';
+  import MessageLetter from './components/message-letter.vue';
+  import MessageTodo from './components/message-todo.vue';
+  import { getUnReadNum } from '@/api/example';
+
+  defineOptions({ name: 'UserMessage' });
+
+  const messageIns = useMessage({ inner: true, plain: true });
+  const { currentRoute } = useRouter();
+  const { mobile } = useMobile();
+
+  /** 导航选中 */
+  const active = ref<string>('notice');
+
+  /** 未读数量 */
+  const unReadNum = reactive({
+    notice: 0,
+    letter: 0,
+    todo: 0
+  });
+
+  /** 菜单数据 */
+  const menus = computed<MenuItem[]>(() => {
+    return [
+      {
+        index: 'notice',
+        path: '/user/message?type=notice',
+        title: '系统通知',
+        badge: { value: unReadNum.notice }
+      },
+      {
+        index: 'letter',
+        path: '/user/message?type=letter',
+        title: '用户私信',
+        badge: { value: unReadNum.letter }
+      },
+      {
+        index: 'todo',
+        path: '/user/message?type=todo',
+        title: '待办事项',
+        badge: { value: unReadNum.todo }
+      }
+    ];
+  });
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path, query } = unref(route);
+      if (path === '/user/message') {
+        const defaultType = 'notice';
+        if (!query.type) {
+          active.value = defaultType;
+        } else if (typeof query.type === 'string') {
+          active.value = query.type;
+        } else if (query.type.length && query.type[0]) {
+          active.value = query.type[0];
+        } else {
+          active.value = defaultType;
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  /** 查询未读数量 */
+  const queryBadge = () => {
+    getUnReadNum()
+      .then((result) => {
+        Object.assign(unReadNum, result);
+      })
+      .catch((e) => {
+        messageIns.error(e.message);
+      });
+  };
+
+  queryBadge();
+</script>
+
+<style lang="scss" scoped>
+  .message-wrapper {
+    display: flex;
+    min-height: 582px;
+
+    .message-side {
+      width: 150px;
+      flex-shrink: 0;
+      display: flex;
+
+      :deep(.el-menu) {
+        width: 100%;
+        padding-top: 12px;
+        background: none;
+      }
+    }
+
+    .message-body {
+      flex: 1;
+      padding: 8px 20px 16px 16px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    &.is-mobile {
+      display: block;
+      min-height: 637px;
+
+      .message-side {
+        width: auto;
+        display: block;
+
+        :deep(.el-menu) {
+          justify-content: center;
+          padding-top: 8px;
+          padding-left: 0;
+          padding-right: 0;
+          --ele-menu-horizontal-height: 38px;
+          --ele-menu-horizontal-item-padding: 8px;
+        }
+      }
+
+      .message-body {
+        padding: 16px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/user/profile/components/user-account.vue b/z_ele/src/views/user/profile/components/user-account.vue
new file mode 100644
index 0000000..c974209
--- /dev/null
+++ b/z_ele/src/views/user/profile/components/user-account.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="list-wrapper">
+    <div class="list-item">
+      <div class="list-item-body">
+        <ele-text size="md">密保手机</ele-text>
+        <ele-text type="placeholder">已绑定手机: {{ data.phone }}</ele-text>
+      </div>
+      <el-link type="primary" underline="never">去修改</el-link>
+    </div>
+    <el-divider style="margin: 0; opacity: 0.6" />
+    <div class="list-item">
+      <div class="list-item-body">
+        <ele-text size="md">密保邮箱</ele-text>
+        <ele-text type="placeholder">
+          已绑定邮箱: eleadmin@eclouds.com
+        </ele-text>
+      </div>
+      <el-link type="primary" underline="never">去修改</el-link>
+    </div>
+    <el-divider style="margin: 0; opacity: 0.6" />
+    <div class="list-item">
+      <div class="list-item-body">
+        <ele-text size="md">密保问题</ele-text>
+        <ele-text type="placeholder">未设置密保问题</ele-text>
+      </div>
+      <el-link type="primary" underline="never">去设置</el-link>
+    </div>
+    <el-divider style="margin: 0; opacity: 0.6" />
+    <div class="list-item">
+      <el-icon class="list-item-icon">
+        <QqFilled />
+      </el-icon>
+      <div class="list-item-body">
+        <ele-text size="md">绑定QQ</ele-text>
+        <ele-text type="placeholder">当前未绑定QQ账号</ele-text>
+      </div>
+      <el-link type="primary" underline="never">去绑定</el-link>
+    </div>
+    <el-divider style="margin: 0; opacity: 0.6" />
+    <div class="list-item">
+      <el-icon class="list-item-icon" style="background: #4daf29">
+        <WechatFilled />
+      </el-icon>
+      <div class="list-item-body">
+        <ele-text size="md">绑定微信</ele-text>
+        <ele-text type="placeholder">当前未绑定绑定微信账号</ele-text>
+      </div>
+      <el-link type="primary" underline="never">去绑定</el-link>
+    </div>
+    <el-divider style="margin: 0; opacity: 0.6" />
+    <div class="list-item">
+      <el-icon class="list-item-icon" style="background: #1476fe">
+        <AlipayFilled />
+      </el-icon>
+      <div class="list-item-body">
+        <ele-text size="md">绑定支付宝</ele-text>
+        <ele-text type="placeholder">当前未绑定绑定支付宝账号</ele-text>
+      </div>
+      <el-link type="primary" underline="never">去绑定</el-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { QqFilled, WechatFilled, AlipayFilled } from '@/components/icons';
+  import type { User } from '@/api/system/user/model';
+
+  defineProps<{
+    data: User;
+  }>();
+</script>
+
+<style lang="scss" scoped>
+  .list-wrapper {
+    padding: 6px 14px;
+    box-sizing: border-box;
+
+    .list-item {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 12px 10px;
+
+      .list-item-body {
+        flex: 1;
+
+        .ele-text + .ele-text {
+          margin-top: 2px;
+        }
+      }
+
+      .list-item-icon {
+        color: #fff;
+        padding: 10px;
+        font-size: 24px;
+        border-radius: 50%;
+        background: #3492ed;
+        margin-right: 12px;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/views/user/profile/components/user-card.vue b/z_ele/src/views/user/profile/components/user-card.vue
new file mode 100644
index 0000000..6e19198
--- /dev/null
+++ b/z_ele/src/views/user/profile/components/user-card.vue
@@ -0,0 +1,203 @@
+<template>
+  <ele-card>
+    <div class="info-user">
+      <div class="info-user-avatar" @click="openCropper">
+        <el-avatar :size="100" :src="data.avatar" />
+        <el-icon class="info-user-avatar-icon">
+          <CloudUploadOutlined style="stroke-width: 3" />
+        </el-icon>
+      </div>
+      <ele-text size="xxl" style="margin-top: 5px">
+        {{ data.nickname }}
+      </ele-text>
+      <ele-text type="placeholder">
+        {{ data.introduction || '这家伙很懒，什么都不说~' }}
+      </ele-text>
+    </div>
+    <div class="info-list">
+      <div class="info-item">
+        <el-icon>
+          <UserOutlined />
+        </el-icon>
+        <div class="info-item-text">资深前端工程师</div>
+      </div>
+      <div class="info-item">
+        <el-icon>
+          <CityOutlined style="transform: translateY(-1px)" />
+        </el-icon>
+        <div class="info-item-text">某某公司 - 研发部 - 某某组</div>
+      </div>
+      <div class="info-item">
+        <el-icon>
+          <EnvironmentOutlined />
+        </el-icon>
+        <div class="info-item-text">中国 • 浙江省 • 杭州市</div>
+      </div>
+      <div class="info-item">
+        <el-icon>
+          <TagOutlined style="transform: translateY(-1px)" />
+        </el-icon>
+        <div class="info-item-text">JavaScript、HTML、CSS</div>
+      </div>
+    </div>
+    <el-divider border-style="dashed" style="margin: 0" />
+    <ele-text size="md" style="margin-top: 16px">标签</ele-text>
+    <div class="info-tags" style="margin-top: 12px">
+      <el-tag type="info" size="small" :disable-transitions="true">
+        很有想法的
+      </el-tag>
+      <el-tag type="info" size="small" :disable-transitions="true">
+        专注设计
+      </el-tag>
+      <el-tag type="info" size="small" :disable-transitions="true">辣~</el-tag>
+      <el-tag type="info" size="small" :disable-transitions="true">
+        大长腿
+      </el-tag>
+      <el-tag type="info" size="small" :disable-transitions="true">
+        川妹子
+      </el-tag>
+      <el-tag type="info" size="small" :disable-transitions="true">
+        海纳百川
+      </el-tag>
+    </div>
+    <!-- 头像裁剪弹窗 -->
+    <ele-cropper-modal
+      v-model="visible"
+      :src="data.avatar"
+      :options="{
+        aspectRatio: 1,
+        autoCropArea: 1,
+        viewMode: 1,
+        dragMode: 'move'
+      }"
+      :modal-props="{ destroyOnClose: true }"
+      @done="handleCrop"
+    />
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    CloudUploadOutlined,
+    UserOutlined,
+    CityOutlined,
+    EnvironmentOutlined,
+    TagOutlined
+  } from '@/components/icons';
+  //import { EleMessage } from 'ele-admin-plus';
+  //import { updateUserInfo } from '@/api/layout';
+  import type { User } from '@/api/system/user/model';
+
+  defineProps<{
+    data: User;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', value: User): void;
+  }>();
+
+  /** 是否显示裁剪弹窗 */
+  const visible = ref(false);
+
+  /** 打开图片裁剪 */
+  const openCropper = () => {
+    visible.value = true;
+  };
+
+  /** 头像裁剪完成回调 */
+  const handleCrop = (result: string) => {
+    visible.value = false;
+    emit('done', { avatar: result });
+    /* const loading = EleMessage.loading({
+      message: '请求中..',
+      plain: true
+    });
+    updateUserInfo({ avatar: result })
+      .then((data) => {
+        loading.close();
+        visible.value = false;
+        EleMessage.success({ message: '修改成功', plain: true });
+        emit('done', data);
+      })
+      .catch((e) => {
+        loading.close();
+        EleMessage.error({ message: e.message, plain: true });
+      }); */
+  };
+</script>
+
+<style lang="scss" scoped>
+  .info-user {
+    padding-top: 8px;
+    box-sizing: border-box;
+    text-align: center;
+
+    .info-user-avatar {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      line-height: 0;
+
+      .info-user-avatar-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-size: 30px;
+        display: none;
+        z-index: 2;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: transparent;
+        transition: background-color 0.3s;
+      }
+
+      &:hover {
+        .info-user-avatar-icon {
+          display: block;
+        }
+
+        &::after {
+          background-color: rgba(0, 0, 0, 0.4);
+        }
+      }
+    }
+  }
+
+  .info-list {
+    margin: 35px 0 24px 0;
+
+    .info-item {
+      display: flex;
+      align-items: center;
+
+      & > .el-icon {
+        font-size: 16px;
+      }
+
+      .info-item-text {
+        flex: 1;
+        padding-left: 8px;
+        box-sizing: border-box;
+      }
+
+      & + .info-item {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .info-tags .el-tag {
+    margin: 0 12px 8px 0;
+  }
+</style>
diff --git a/z_ele/src/views/user/profile/components/user-form.vue b/z_ele/src/views/user/profile/components/user-form.vue
new file mode 100644
index 0000000..a9a552b
--- /dev/null
+++ b/z_ele/src/views/user/profile/components/user-form.vue
@@ -0,0 +1,182 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="100px"
+    style="max-width: 580px; padding: 34px 16px 12px 0; box-sizing: border-box"
+    @submit.prevent=""
+  >
+    <el-form-item label="昵称" prop="nickname">
+      <el-input
+        clearable
+        :maxlength="20"
+        v-model="form.nickname"
+        placeholder="请输入昵称"
+      />
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <el-select
+        clearable
+        v-model="form.sex"
+        placeholder="请选择性别"
+        class="ele-fluid"
+      >
+        <el-option value="1" label="男" />
+        <el-option value="2" label="女" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        clearable
+        :maxlength="100"
+        v-model="form.email"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="个人简介">
+      <el-input
+        type="textarea"
+        :rows="4"
+        :maxlength="200"
+        v-model="form.introduction"
+        placeholder="请输入个人简介"
+      />
+    </el-form-item>
+    <el-form-item label="街道地址">
+      <el-input
+        clearable
+        :maxlength="200"
+        v-model="form.address"
+        placeholder="请输入街道地址"
+      />
+    </el-form-item>
+    <el-form-item label="联系电话:">
+      <div class="form-tell">
+        <div class="form-tell-prefix">
+          <el-input v-model="form.tellPre" :maxlength="4" />
+        </div>
+        <div class="form-tell-body">
+          <el-input
+            clearable
+            :maxlength="10"
+            v-model="form.tell"
+            placeholder="请输入联系电话"
+          />
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" :loading="loading" @click="save">
+        {{ loading ? '保存中..' : '保存更改' }}
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { updateUserInfo } from '@/api/layout';
+  import type { User } from '@/api/system/user/model';
+
+  const props = defineProps<{
+    data: User;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', value: User): void;
+  }>();
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, _resetFields, assignFields] = useFormData<User>({
+    nickname: '',
+    sex: void 0,
+    email: '',
+    introduction: '',
+    address: '',
+    tellPre: '0752',
+    tell: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    nickname: [
+      {
+        required: true,
+        message: '请输入昵称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sex: [
+      {
+        required: true,
+        message: '请选择性别',
+        type: 'string',
+        trigger: 'change'
+      }
+    ],
+    email: [
+      {
+        required: true,
+        message: '请输入邮箱',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 保存更改 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      updateUserInfo(form)
+        .then((data) => {
+          loading.value = false;
+          EleMessage.success({ message: '保存成功', plain: true });
+          emit('done', data);
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  // 回显当前登录用户信息
+  assignFields({
+    ...props.data,
+    email: props.data.email || 'eleadmin@eclouds.com',
+    tellPre: props.data.tellPre || '0752'
+  });
+</script>
+
+<style lang="scss" scoped>
+  .form-tell {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .form-tell-prefix {
+      width: 65px;
+    }
+
+    .form-tell-body {
+      flex: 1;
+      padding-left: 12px;
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/z_ele/src/views/user/profile/index.vue b/z_ele/src/views/user/profile/index.vue
new file mode 100644
index 0000000..e4b581e
--- /dev/null
+++ b/z_ele/src/views/user/profile/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <ele-page :multi-card="false">
+    <div class="user-wrapper">
+      <user-card :data="loginUser" @done="updateLoginUser" class="user-side" />
+      <ele-card
+        :header-style="{ padding: '0 24px' }"
+        :body-style="{ padding: 0, minHeight: '462px' }"
+        class="user-body"
+      >
+        <template #header>
+          <ele-tabs
+            type="plain"
+            size="large"
+            v-model="active"
+            :items="[
+              { name: 'info', label: '基本信息' },
+              { name: 'account', label: '账号绑定' }
+            ]"
+          />
+        </template>
+        <user-form
+          v-if="active === 'info'"
+          :data="loginUser"
+          @done="updateLoginUser"
+        />
+        <user-account v-if="active === 'account'" :data="loginUser" />
+      </ele-card>
+    </div>
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useUserStore } from '@/store/modules/user';
+  import type { User } from '@/api/system/user/model';
+  import UserCard from './components/user-card.vue';
+  import UserForm from './components/user-form.vue';
+  import UserAccount from './components/user-account.vue';
+
+  defineOptions({ name: 'UserProfile' });
+
+  const userStore = useUserStore();
+
+  /** 标签页选中 */
+  const active = ref('info');
+
+  /** 登录用户信息 */
+  const loginUser = computed(() => userStore.info ?? {});
+
+  /** 修改登录用户 */
+  const updateLoginUser = (data: User) => {
+    userStore.setInfo({ ...loginUser.value, ...data });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .user-wrapper {
+    display: flex;
+
+    .user-side {
+      width: 320px;
+      margin: 0 16px 0 0;
+      flex-shrink: 0;
+    }
+
+    .user-body {
+      flex: 1;
+    }
+  }
+
+  @media screen and (max-width: 928px) {
+    .user-wrapper .user-side {
+      width: 240px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .user-wrapper {
+      display: block;
+
+      .user-side {
+        width: auto;
+        margin: 0 0 16px 0;
+      }
+    }
+  }
+</style>
diff --git a/z_ele/src/vite-env.d.ts b/z_ele/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/z_ele/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/z_ele/tsconfig.json b/z_ele/tsconfig.json
new file mode 100644
index 0000000..eca5464
--- /dev/null
+++ b/z_ele/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "strictFunctionTypes": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "allowJs": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"],
+    "typeRoots": ["./node_modules/@types/"],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "components.d.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}
diff --git a/z_ele/vite.config.ts b/z_ele/vite.config.ts
new file mode 100644
index 0000000..dbce5e3
--- /dev/null
+++ b/z_ele/vite.config.ts
@@ -0,0 +1,75 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import Compression from 'vite-plugin-compression';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { EleAdminResolver } from 'ele-admin-plus/es/utils/resolvers';
+
+export default defineConfig(({ command }) => {
+  const isBuild = command === 'build';
+  const alias = {
+    '@/': resolve('src') + '/',
+    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
+  };
+  const plugins = [vue()];
+  if (isBuild) {
+    // 组件按需引入
+    plugins.push(
+      Components({
+        dts: false,
+        resolvers: [
+          ElementPlusResolver({
+            importStyle: 'sass'
+          }),
+          EleAdminResolver({
+            importStyle: 'sass'
+          })
+        ]
+      })
+    );
+    // gzip压缩
+    plugins.push(
+      Compression({
+        disable: !isBuild,
+        threshold: 10240,
+        algorithm: 'gzip',
+        ext: '.gz'
+      })
+    );
+  } else {
+    // 开发环境全局安装
+    alias['./as-needed'] = './global-import';
+  }
+  return {
+    base: '',
+    resolve: { alias },
+    plugins,
+    server: {
+      allowedHosts: ['a.tcp.run']  
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles/variables.scss" as *;`
+        }
+      }
+    },
+    optimizeDeps: {
+      include: [
+        'echarts/core',
+        'echarts/charts',
+        'echarts/renderers',
+        'echarts/components',
+        'vue-echarts',
+        'echarts-wordcloud',
+        'sortablejs',
+        'vuedraggable'
+      ]
+    },
+    build: {
+      target: 'chrome63',
+      chunkSizeWarningLimit: 4000
+    }
+  };
+});