commit 681bc31b8d0dd065f1748f16574c72cac356f876
Author: 赵鹏 <zp4185024@163.com>
Date:   Mon Feb 10 11:51:26 2025 +0800

    init

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..d6c3088
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,21 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+	// 添加组件命名忽略规则
+    "vue/multi-word-component-names": ["error",{
+       "ignores": ["index","main"]//需要忽略的组件名
+    }]
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..38adffa
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..66e2335
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..12c6c8c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,52 @@
+# web
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000..be1f838
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module 'markdown-it-task-lists'
+declare module 'markdown-it-abbr'
+declare module 'markdown-it-anchor'
+declare module 'markdown-it-footnote'
+declare module 'markdown-it-sub'
+declare module 'markdown-it-sup'
+declare module 'markdown-it-toc-done-right'
+declare module 'katex'
+interface Window {
+  sendMessage: ?((message: string, other_params_data: any) => void)
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+declare type Recordable<T = any> = Record<string, T>
diff --git a/env/.env b/env/.env
new file mode 100644
index 0000000..4741651
--- /dev/null
+++ b/env/.env
@@ -0,0 +1,4 @@
+VITE_APP_NAME=ui
+VITE_BASE_PATH=/
+VITE_APP_PORT=50000
+VITE_APP_TITLE = '智慧生态'
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9723c25
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,
+    viewport-fit=cover"
+    />
+    <base target="_blank" />
+    <title>%VITE_APP_TITLE%</title>
+    <script type="text/javascript" src="/js/jweixin-1.4.0.js"></script>
+    <script type="text/javascript" src="/js/uni.webview.1.5.2.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script type="text/javascript">
+      document.addEventListener('uniAppJsBridgeReady', function () {
+        document.querySelector('.btn-list').addEventlistener('click', function (evt) {
+          var target = evt.target
+          if (target.tagName === 'BUTTON') {
+            var action = target.getAttribute('data-action')
+            switch (action) {
+              case 'navigateBack':
+                uni.navigateBack({
+                  delta: 1
+                })
+                break
+              default:
+                uni[action]({
+                  url: '/pages/index'
+                })
+                break
+            }
+          }
+        })
+      })
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5dcf582
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,14749 @@
+{
+  "name": "web",
+  "version": "v1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "web",
+      "version": "v1.0.0",
+      "dependencies": {
+        "@antv/layout": "^0.3.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
+        "@ctrl/tinycolor": "^4.1.0",
+        "@logicflow/core": "^1.2.27",
+        "@logicflow/extension": "^1.2.27",
+        "@vueuse/core": "^10.9.0",
+        "@wecom/jssdk": "^2.1.0",
+        "axios": "^0.28.0",
+        "codemirror": "^6.0.1",
+        "cropperjs": "^1.6.2",
+        "echarts": "^5.5.0",
+        "element-plus": "^2.9.1",
+        "file-saver": "^2.0.5",
+        "highlight.js": "^11.9.0",
+        "install": "^0.13.0",
+        "katex": "^0.16.10",
+        "lodash": "^4.17.21",
+        "marked": "^12.0.2",
+        "md-editor-v3": "^4.16.7",
+        "medium-zoom": "^1.1.0",
+        "mermaid": "^10.9.0",
+        "mitt": "^3.0.0",
+        "moment": "^2.30.1",
+        "npm": "^10.2.4",
+        "nprogress": "^0.2.0",
+        "pinia": "^2.1.6",
+        "pinyin-pro": "^3.18.2",
+        "recorder-core": "^1.3.24040900",
+        "screenfull": "^6.0.2",
+        "use-element-plus-theme": "^0.0.5",
+        "vue": "^3.3.4",
+        "vue-clipboard3": "^2.0.0",
+        "vue-codemirror": "^6.1.1",
+        "vue-i18n": "^9.13.1",
+        "vue-router": "^4.2.4"
+      },
+      "devDependencies": {
+        "@rushstack/eslint-patch": "^1.3.2",
+        "@tsconfig/node18": "^18.2.0",
+        "@types/file-saver": "^2.0.7",
+        "@types/jsdom": "^21.1.1",
+        "@types/node": "^18.17.5",
+        "@types/nprogress": "^0.2.0",
+        "@vitejs/plugin-vue": "^4.3.1",
+        "@vue/eslint-config-prettier": "^8.0.0",
+        "@vue/eslint-config-typescript": "^11.0.3",
+        "@vue/test-utils": "^2.4.1",
+        "@vue/tsconfig": "^0.4.0",
+        "eslint": "^8.46.0",
+        "eslint-plugin-vue": "^9.16.1",
+        "jsdom": "^22.1.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0",
+        "sass": "1.66.1",
+        "typescript": "~5.1.6",
+        "unplugin-vue-define-options": "^1.3.18",
+        "vite": "^4.4.9",
+        "vitest": "^0.34.2",
+        "vue-tsc": "^1.8.8"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@antv/g-webgpu": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@antv/g-webgpu/-/g-webgpu-0.7.2.tgz",
+      "integrity": "sha512-kw+oYGsdvj5qeUfy5DPb/jztZBV+2fmqBd3Vv8NlKatfBmv8AirYX/CCW74AUSdWm99rEiLyxFB1VdRZ6b/wnQ==",
+      "dependencies": {
+        "@antv/g-webgpu-core": "^0.7.2",
+        "@antv/g-webgpu-engine": "^0.7.2",
+        "gl-matrix": "^3.1.0",
+        "gl-vec2": "^1.3.0",
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/@antv/g-webgpu-core": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@antv/g-webgpu-core/-/g-webgpu-core-0.7.2.tgz",
+      "integrity": "sha512-xUMmop7f3Rs34zFYKXLqHhDR1CQTeDl/7vI7Sn3X/73BqJc3X3HIIRvm83Fg2CjVACaOzw4WeLRXNaOCp9fz9w==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "gl-matrix": "^3.1.0",
+        "lodash": "^4.17.15",
+        "probe.gl": "^3.1.1"
+      }
+    },
+    "node_modules/@antv/g-webgpu-engine": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@antv/g-webgpu-engine/-/g-webgpu-engine-0.7.2.tgz",
+      "integrity": "sha512-lx8Y93IW2cnJvdoDRKyMmTdYqSC1pOmF0nyG3PGGyA0NI9vBYVgO0KTF6hkyWjdTWVq7XDZyf/h8CJridLh3lg==",
+      "dependencies": {
+        "@antv/g-webgpu-core": "^0.7.2",
+        "gl-matrix": "^3.1.0",
+        "lodash": "^4.17.15",
+        "regl": "^1.3.11"
+      }
+    },
+    "node_modules/@antv/graphlib": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@antv/graphlib/-/graphlib-1.2.0.tgz",
+      "integrity": "sha512-hhJOMThec51nU4Fe5p/viLlNIL71uDEgYFzKPajWjr2715SFG1HAgiP6AVylIeqBcAZ04u3Lw7usjl/TuI5RuQ=="
+    },
+    "node_modules/@antv/layout": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@antv/layout/-/layout-0.3.25.tgz",
+      "integrity": "sha512-d29Aw1PXoAavMRZy7iTB9L5rMBeChFEX0BJ9ELP4TI35ySdCu07YbmPo9ju9OH/6sG2/NB3o85Ayxrre3iwX/g==",
+      "dependencies": {
+        "@antv/g-webgpu": "0.7.2",
+        "@antv/graphlib": "^1.0.0",
+        "@antv/util": "^3.3.2",
+        "d3-force": "^2.1.1",
+        "d3-quadtree": "^2.0.0",
+        "dagre-compound": "^0.0.11",
+        "ml-matrix": "6.5.0"
+      }
+    },
+    "node_modules/@antv/util": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-3.3.10.tgz",
+      "integrity": "sha512-basGML3DFA3O87INnzvDStjzS+n0JLEhRnRsDzP9keiXz8gT1z/fTdmJAZFOzMMWxy+HKbi7NbSt0+8vz/OsBQ==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+      "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
+      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.26.0",
+        "@babel/generator": "^7.26.0",
+        "@babel/helper-compilation-targets": "^7.25.9",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.0",
+        "@babel/parser": "^7.26.0",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
+      "dependencies": {
+        "@babel/parser": "^7.26.3",
+        "@babel/types": "^7.26.3",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
+      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
+      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
+      "dependencies": {
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
+      "dependencies": {
+        "@babel/types": "^7.26.3"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz",
+      "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
+      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.3",
+        "@babel/parser": "^7.26.3",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.3",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
+    },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
+      "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz",
+      "integrity": "sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.0.tgz",
+      "integrity": "sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-angular": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-angular/-/lang-angular-0.1.3.tgz",
+      "integrity": "sha512-xgeWGJQQl1LyStvndWtruUvb4SnBZDAu/gvFH/ZU+c0W25tQR8e5hq7WTwiIY2dNxnf+49mRiGI/9yxIwB6f5w==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.3"
+      }
+    },
+    "node_modules/@codemirror/lang-cpp": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz",
+      "integrity": "sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/cpp": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-go": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-go/-/lang-go-6.0.1.tgz",
+      "integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/go": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-java": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.1.tgz",
+      "integrity": "sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/java": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
+      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-less": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-less/-/lang-less-6.0.2.tgz",
+      "integrity": "sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-liquid": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-liquid/-/lang-liquid-6.2.2.tgz",
+      "integrity": "sha512-7Dm841fk37+JQW6j2rI1/uGkJyESrjzyhiIkaLjbbR0U6aFFQvMrJn35WxQreRMADMhzkyVkZM4467OR7GR8nQ==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.1.tgz",
+      "integrity": "sha512-y3sSPuQjBKZQbQwe3ZJKrSW6Silyl9PnrU/Mf0m2OQgIlPoSYTtOvEL7xs94SVMkb8f4x+SQFnzXPdX4Wk2lsg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-php": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.1.tgz",
+      "integrity": "sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/php": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.1.6.tgz",
+      "integrity": "sha512-ai+01WfZhWqM92UqjnvorkxosZ2aq2u28kHvr+N3gu012XqY2CThD67JPMHnGceRfXPDBmn1HnyqowdpF57bNg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/lang-rust": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.1.tgz",
+      "integrity": "sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/rust": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sass": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sass/-/lang-sass-6.0.2.tgz",
+      "integrity": "sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.2.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/sass": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sql": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.8.0.tgz",
+      "integrity": "sha512-aGLmY4OwGqN3TdSx3h6QeA1NrvaYtF7kkoWR/+W7/JzB0gQtJ+VJxewlnE3+VImhA4WVlhmkJr109PefOOhjLg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-vue": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-vue/-/lang-vue-0.1.3.tgz",
+      "integrity": "sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.1"
+      }
+    },
+    "node_modules/@codemirror/lang-wast": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.2.tgz",
+      "integrity": "sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+      "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz",
+      "integrity": "sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.0.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.8.tgz",
+      "integrity": "sha512-wcP8XPPhDH2vTqf181U8MbZnW+tDyPYy0UzVOa+oHORjyT+mhhom9vBd7dApJwoDz9Nb/a8kHjJIsuA/t8vNFw==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/language-data": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.5.1.tgz",
+      "integrity": "sha512-0sWxeUSNlBr6OmkqybUTImADFUP0M3P0IiSde4nc24bz/6jIYzqYSgkOSLS+CBIoW1vU8Q9KUWXscBXeoMVC9w==",
+      "dependencies": {
+        "@codemirror/lang-angular": "^0.1.0",
+        "@codemirror/lang-cpp": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-go": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-java": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/lang-less": "^6.0.0",
+        "@codemirror/lang-liquid": "^6.0.0",
+        "@codemirror/lang-markdown": "^6.0.0",
+        "@codemirror/lang-php": "^6.0.0",
+        "@codemirror/lang-python": "^6.0.0",
+        "@codemirror/lang-rust": "^6.0.0",
+        "@codemirror/lang-sass": "^6.0.0",
+        "@codemirror/lang-sql": "^6.0.0",
+        "@codemirror/lang-vue": "^0.1.1",
+        "@codemirror/lang-wast": "^6.0.0",
+        "@codemirror/lang-xml": "^6.0.0",
+        "@codemirror/lang-yaml": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/legacy-modes": "^6.4.0"
+      }
+    },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.4.2.tgz",
+      "integrity": "sha512-HsvWu08gOIIk303eZQCal4H4t65O/qp1V4ul4zVa3MHK5FJ0gz3qz3O55FIkm+aQUcshUOjBx38t2hPiJwW5/g==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
+      "integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.8.tgz",
+      "integrity": "sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.0.tgz",
+      "integrity": "sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.36.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.1.tgz",
+      "integrity": "sha512-miD1nyT4m4uopZaDdO2uXU/LLHliKNYL9kB1C1wJHrunHLm/rpkb5QVSokqgw9hFqEZakrdlb/VGWX8aYZTslQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz",
+      "integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "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/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.2.tgz",
+      "integrity": "sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.14.2",
+        "@intlify/shared": "9.14.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.2.tgz",
+      "integrity": "sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==",
+      "dependencies": {
+        "@intlify/shared": "9.14.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.2.tgz",
+      "integrity": "sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "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/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "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/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
+      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
+      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/reporters": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^27.5.1",
+        "jest-config": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-resolve-dependencies": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "jest-watcher": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
+      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
+      "dependencies": {
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
+      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@sinonjs/fake-timers": "^8.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
+      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "expect": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
+      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-haste-map": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^8.1.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
+      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
+      "dependencies": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9",
+        "source-map": "^0.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
+      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
+      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-runtime": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
+      "dependencies": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA=="
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.2.tgz",
+      "integrity": "sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.9.tgz",
+      "integrity": "sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/go": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.0.tgz",
+      "integrity": "sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/java": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
+      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.21",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
+      "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.4.0.tgz",
+      "integrity": "sha512-mk4MYeq6ZQdxgsgRAe0G7kqPRV6Desajfa14TcHoGGXIqqj1/2ARN31VFpmrXDgvXiGBWpA7RXtv0he+UdTkGw==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/php": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.2.tgz",
+      "integrity": "sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.1.0"
+      }
+    },
+    "node_modules/@lezer/python": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.15.tgz",
+      "integrity": "sha512-aVQ43m2zk4FZYedCqL0KHPEUsqZOrmAvRhkhHlVPnDD1HODDyyQv5BRIuod4DadkgBEZd53vQOtXTonNbEgjrQ==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/sass": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@lezer/sass/-/sass-1.0.7.tgz",
+      "integrity": "sha512-8HLlOkuX/SMHOggI2DAsXUw38TuURe+3eQ5hiuk9QmYOUyC55B1dYEIMkav5A4IELVaW4e1T4P9WRiI5ka4mdw==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/xml": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
+      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.3.tgz",
+      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
+    "node_modules/@logicflow/core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@logicflow/core/-/core-1.2.28.tgz",
+      "integrity": "sha512-xj9zxYsudK9YLI2UrUa9mXWd4tp8z56Rx4il9Fc/baUWEDwogjqCgblSKepGxEgTX2XX2fQIfUrzqEUoWu2VYQ==",
+      "dependencies": {
+        "@types/mousetrap": "^1.6.4",
+        "mousetrap": "^1.6.5",
+        "preact": "^10.4.8"
+      }
+    },
+    "node_modules/@logicflow/extension": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-1.2.28.tgz",
+      "integrity": "sha512-OHaO57SxjNwDDYVAqrJp/fq9g0NDc4elHmZnWGIqLbkbOMJhiU9IUT2WWK6DctUoYzxhGzTR4Ai5S/TFZ9JjGA==",
+      "dependencies": {
+        "@logicflow/core": "^1.2.28",
+        "jest": "27.5.1",
+        "lodash-es": "^4.17.21",
+        "preact": "^10.4.8"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+    },
+    "node_modules/@microsoft/api-extractor": {
+      "version": "7.43.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
+      "integrity": "sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==",
+      "dependencies": {
+        "@microsoft/api-extractor-model": "7.28.13",
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2",
+        "@rushstack/rig-package": "0.5.2",
+        "@rushstack/terminal": "0.10.0",
+        "@rushstack/ts-command-line": "4.19.1",
+        "lodash": "~4.17.15",
+        "minimatch": "~3.0.3",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "source-map": "~0.6.1",
+        "typescript": "5.4.2"
+      },
+      "bin": {
+        "api-extractor": "bin/api-extractor"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model": {
+      "version": "7.28.13",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.28.13.tgz",
+      "integrity": "sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==",
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/typescript": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug=="
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
+      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "ajv": "~6.12.6",
+        "jju": "~1.4.0",
+        "resolve": "~1.19.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "dependencies": {
+        "is-core-module": "^2.1.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@probe.gl/env": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/env/-/env-3.6.0.tgz",
+      "integrity": "sha512-4tTZYUg/8BICC3Yyb9rOeoKeijKbZHRXBEKObrfPmX4sQmYB15ZOUpoVBhAyJkOYVAM8EkPci6Uw5dLCwx2BEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
+    "node_modules/@probe.gl/log": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/log/-/log-3.6.0.tgz",
+      "integrity": "sha512-hjpyenpEvOdowgZ1qMeCJxfRD4JkKdlXz0RC14m42Un62NtOT+GpWyKA4LssT0+xyLULCByRAtG2fzZorpIAcA==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "@probe.gl/env": "3.6.0"
+      }
+    },
+    "node_modules/@probe.gl/stats": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-3.6.0.tgz",
+      "integrity": "sha512-JdALQXB44OP4kUBN/UrQgzbJe4qokbVF4Y8lkIA8iVCFnjVowWIgkD/z/0QO65yELT54tTrtepw1jScjKB+rhQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.5.tgz",
+      "integrity": "sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==",
+      "dev": true
+    },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz",
+      "integrity": "sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==",
+      "dependencies": {
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "z-schema": "~5.0.2"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/@rushstack/rig-package": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.2.tgz",
+      "integrity": "sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==",
+      "dependencies": {
+        "resolve": "~1.22.1",
+        "strip-json-comments": "~3.1.1"
+      }
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.10.0.tgz",
+      "integrity": "sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==",
+      "dependencies": {
+        "@rushstack/node-core-library": "4.0.2",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.19.1.tgz",
+      "integrity": "sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==",
+      "dependencies": {
+        "@rushstack/terminal": "0.10.0",
+        "@types/argparse": "1.0.38",
+        "argparse": "~1.0.9",
+        "string-argv": "~0.3.1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
+      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
+      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
+      "dependencies": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tsconfig/node18": {
+      "version": "18.2.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.4.tgz",
+      "integrity": "sha512-5xxU8vVs9/FNcvm3gE07fPbn9tl6tqGGWA9tSlwsUEkBxtRnTsNmwrV8gasZ9F/EobaSv9+nu8AxUKccw77JpQ==",
+      "dev": true
+    },
+    "node_modules/@types/argparse": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
+      "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA=="
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "4.3.20",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.20.tgz",
+      "integrity": "sha512-/pC9HAB5I/xMlc5FP77qjCnI16ChlJfW0tGa0IUcFn38VJrTV6DeZ60NU5KZBtaOZqjdpwTWohz5HU1RrhiYxQ==",
+      "dev": true
+    },
+    "node_modules/@types/chai-subset": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.5.tgz",
+      "integrity": "sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "*"
+      }
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
+    },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
+    "node_modules/@types/graceful-fs": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
+      "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.14",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
+      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
+      "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
+    },
+    "node_modules/@types/mousetrap": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.15.tgz",
+      "integrity": "sha512-qL0hyIMNPow317QWW/63RvL1x5MVMV+Ru3NaY9f/CuEpCqrmb7WeuK2071ZY5hczOnm38qExWM2i2WtkXLSqFw=="
+    },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
+    "node_modules/@types/node": {
+      "version": "18.19.70",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.70.tgz",
+      "integrity": "sha512-RE+K0+KZoEpDUbGGctnGdkrLFwi1eYKTlIHNl2Um98mUkGsm1u2Ff6Ltd0e8DktTtC98uy7rSj+hO8t/QuLoVQ==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==",
+      "dev": true
+    },
+    "node_modules/@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA=="
+    },
+    "node_modules/@types/semver": {
+      "version": "7.5.8",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
+      "dev": true
+    },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
+    "node_modules/@types/yargs": {
+      "version": "16.0.9",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
+      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
+      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/type-utils": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
+      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
+      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/visitor-keys": "5.62.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
+      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
+      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
+      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/visitor-keys": "5.62.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
+      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
+      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.62.0",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
+      "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==",
+      "dev": true
+    },
+    "node_modules/@vavt/util": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@vavt/util/-/util-2.1.0.tgz",
+      "integrity": "sha512-YIfAvArSFVXmWvoF+DEGD0FhkhVNcCtVWWkfYtj76eSrwHh/wuEEFhiEubg1XLNM3tChO8FH8xJCT/hnizjgFQ=="
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
+      "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
+      "dev": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.0.0 || ^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.6.tgz",
+      "integrity": "sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "0.34.6",
+        "@vitest/utils": "0.34.6",
+        "chai": "^4.3.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.6.tgz",
+      "integrity": "sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "0.34.6",
+        "p-limit": "^4.0.0",
+        "pathe": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/yocto-queue": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+      "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.6.tgz",
+      "integrity": "sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@vitest/snapshot/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@vitest/snapshot/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true
+    },
+    "node_modules/@vitest/spy": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.6.tgz",
+      "integrity": "sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==",
+      "dev": true,
+      "dependencies": {
+        "tinyspy": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.6.tgz",
+      "integrity": "sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==",
+      "dev": true,
+      "dependencies": {
+        "diff-sequences": "^29.4.3",
+        "loupe": "^2.3.6",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true
+    },
+    "node_modules/@volar/language-core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+      "dependencies": {
+        "@volar/source-map": "1.11.1"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+      "dependencies": {
+        "muggle-string": "^0.3.1"
+      }
+    },
+    "node_modules/@volar/typescript": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+      "dependencies": {
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.15.1.tgz",
+      "integrity": "sha512-O0ZXaladWXwHplQnSjxLbB/G1KpdWCUNJPNYVHIxHonGex1BGpoB4fBZZLgddHgAiy18VZG/Iu5L0kwG+SV7JQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.26.3",
+        "@rollup/pluginutils": "^5.1.3",
+        "@vue/compiler-sfc": "^3.5.13",
+        "ast-kit": "^1.3.2",
+        "local-pkg": "^0.5.1",
+        "magic-string-ast": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
+    "node_modules/@vue/eslint-config-prettier": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-8.0.0.tgz",
+      "integrity": "sha512-55dPqtC4PM/yBjhAr+yEw6+7KzzdkBuLmnhBrDfp4I48+wy+Giqqj9yUr5T2uD/BkBROjjmqnLZmXRdOx/VtQg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 8.0.0",
+        "prettier": ">= 3.0.0"
+      }
+    },
+    "node_modules/@vue/eslint-config-typescript": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.3.tgz",
+      "integrity": "sha512-dkt6W0PX6H/4Xuxg/BlFj5xHvksjpSlVjtkQCpaYJBIEuKj2hOVU7r+TIe+ysCwRYFz/lGqvklntRkCAibsbPw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.59.1",
+        "@typescript-eslint/parser": "^5.59.1",
+        "vue-eslint-parser": "^9.1.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
+        "eslint-plugin-vue": "^9.0.0",
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+      "dependencies": {
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
+        "@vue/compiler-dom": "^3.3.0",
+        "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
+        "vue-template-compiler": "^2.7.14"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dependencies": {
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "vue": "3.5.13"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.4.0.tgz",
+      "integrity": "sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==",
+      "dev": true
+    },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@wecom/jssdk": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@wecom/jssdk/-/jssdk-2.2.5.tgz",
+      "integrity": "sha512-qOBAsfqaiYM8jZHWYs/atHSpJhsLdZVNaxHQdmEQ7ZWul/GZMt4P5VY8Nf7GII7GhG8z/k+r37Dto6qtAaRqow=="
+    },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+      "deprecated": "Use your platform's native atob() and btoa() methods instead"
+    },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "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/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-1.3.2.tgz",
+      "integrity": "sha512-gdvX700WVC6sHCJQ7bJGfDvtuKAh6Sa6weIZROxfzUZKP7BjvB8y0SMlM/o4omSQ3L60PQSJROBJsb0vEViVnA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.26.2",
+        "pathe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.6.2.tgz",
+      "integrity": "sha512-1UWOyC50xI3QZkRuDj6PqDtpm1oHWtYs+NQGwqL/2R11eN3Q81PHAHPM0SWW3BNQm53UDwS//Jv8L4CCVLM1bQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "ast-kit": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz",
+      "integrity": "sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/babel-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
+      "dependencies": {
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
+      "integrity": "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==",
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^27.5.1",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dependencies": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
+      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001690",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
+      "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chai": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.5.0.tgz",
+      "integrity": "sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chai/node_modules/type-detect": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz",
+      "integrity": "sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "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/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "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/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA=="
+    },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q=="
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
+    "node_modules/cropperjs": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
+      "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
+    "node_modules/cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
+    },
+    "node_modules/cssstyle": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
+      "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+      "dev": true,
+      "dependencies": {
+        "rrweb-cssom": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/cytoscape": {
+      "version": "3.30.4",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.4.tgz",
+      "integrity": "sha512-OxtlZwQl1WbwMmLiyPSEBuzeTIQnwZhJYYWFzZ2PhEHVFwpeaqNIkUzSiso00D98qk60l8Gwon2RP304d3BJ1A==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
+      "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-quadtree": "1 - 2",
+        "d3-timer": "1 - 2"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
+      "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "peer": true,
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/dagre-compound": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/dagre-compound/-/dagre-compound-0.0.11.tgz",
+      "integrity": "sha512-UrSgRP9LtOZCYb9e5doolZXpc7xayyszgyOs7uakTK4n4KsLegLVTRRtq01GpQd/iZjYw5fWMapx9ed+c80MAQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "dagre": "^0.8.5"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
+      "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
+      "dependencies": {
+        "d3": "^7.8.2",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
+      "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^12.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
+    },
+    "node_modules/deep-eql": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
+      "integrity": "sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/diff": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/diff-sequences": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
+      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/domexception": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "dev": true,
+      "dependencies": {
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.79",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.79.tgz",
+      "integrity": "sha512-nYOxJNxQ9Om4EC88BE4pPoNI8xwSFf8pU/BAeOl4Hh/b/i6V4biTAzwV7pXi3ARKeoYO5JZKMIXTryXSVer5RA=="
+    },
+    "node_modules/element-plus": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.2.tgz",
+      "integrity": "sha512-HS+Cc5mmy70DixJuoN3cMxPPoNWXkjHzUw2PcGmysk6NHQzzUtwi2Vc+dlmbmRxj3eNqgC1xpPQV5Nf9uDtQRg==",
+      "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/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "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/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/elkjs": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.3.tgz",
+      "integrity": "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ=="
+    },
+    "node_modules/emittery": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
+      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.9",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
+      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.0",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-regex": "^1.2.1",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.0",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.3",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.18"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "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/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "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": "8.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
+      "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.32.0.tgz",
+      "integrity": "sha512-b/Y05HYmnB/32wqVcjxjHZzNpwxj1onBOvqW89W+V+XNG1dRuaFbNd3vT9CLbr2LXjEoq+3vn8DanWf7XU22Ug==",
+      "dev": true,
+      "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": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "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/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "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/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/expect": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
+      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
+      "dev": true
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/fs-extra/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
+      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.0",
+        "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-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
+    "node_modules/gl-vec2": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/gl-vec2/-/gl-vec2-1.3.0.tgz",
+      "integrity": "sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A=="
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "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",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "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/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "peer": true,
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "dev": true,
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "node_modules/install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-any-array": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-2.0.1.tgz",
+      "integrity": "sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ=="
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.0.tgz",
+      "integrity": "sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz",
+      "integrity": "sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.0.tgz",
+      "integrity": "sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "import-local": "^3.0.2",
+        "jest-cli": "^27.5.1"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-changed-files": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
+      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "execa": "^5.0.0",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
+      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^0.7.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-cli": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
+      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "import-local": "^3.0.2",
+        "jest-config": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "prompts": "^2.0.1",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
+      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
+      "dependencies": {
+        "@babel/core": "^7.8.0",
+        "@jest/test-sequencer": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "babel-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-jasmine2": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-diff": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
+      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
+      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
+      "dependencies": {
+        "detect-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-each": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
+      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+    },
+    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "dependencies": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "dependencies": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/domexception/node_modules/webidl-conversions": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/form-data": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.2.tgz",
+      "integrity": "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "dependencies": {
+        "whatwg-encoding": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/jest-environment-jsdom/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "dependencies": {
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "engines": {
+        "node": ">=10.4"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "dependencies": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+    },
+    "node_modules/jest-environment-node": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
+      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
+      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-haste-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.7"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      }
+    },
+    "node_modules/jest-jasmine2": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
+      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-leak-detector": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
+      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
+      "dependencies": {
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
+      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-message-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
+      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^27.5.1",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
+      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^1.1.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve-dependencies": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
+      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-snapshot": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runner": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
+      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-leak-detector": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "source-map-support": "^0.5.6",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
+      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/globals": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "execa": "^5.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-serializer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
+      "dependencies": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.9"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
+      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
+      "dependencies": {
+        "@babel/core": "^7.7.2",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.0.0",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.1.5",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^27.5.1",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-validate": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
+      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "leven": "^3.1.0",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watcher": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
+      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^27.5.1",
+        "string-length": "^4.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
+    },
+    "node_modules/js-beautify": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz",
+      "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==",
+      "dev": true,
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.3.3",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
+      "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.6",
+        "cssstyle": "^3.0.0",
+        "data-urls": "^4.0.0",
+        "decimal.js": "^10.4.3",
+        "domexception": "^4.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.4",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.6.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^12.0.1",
+        "ws": "^8.13.0",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/katex": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.19.tgz",
+      "integrity": "sha512-3IA6DYVhxhBabjSLTNO9S4+OliA3Qvb8pBQXMfC4WxXJgLwZgnfDl0BmB4z6nBMdznBsZ+CGM8DrGZ5hcguDZg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/load-json-file/node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dev": true,
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/load-json-file/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
+      "dev": true,
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/loupe": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-0.6.3.tgz",
+      "integrity": "sha512-C9sgUzVZtUtzCBoMdYtwrIRQ4IucGRFGgdhkjL7PXsVfPYmTuWtewqzk7dlipaCMWH/gOYehW9rgMoa4Oebtpw==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.13"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it-image-figures": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
+      "integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it-sub": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-2.0.0.tgz",
+      "integrity": "sha512-iCBKgwCkfQBRg2vApy9vx1C1Tu6D8XYo8NvevI3OlwzBRmiMtsJ2sXupBgEA7PPxiDwNni3qIUkhZ6j5wofDUA=="
+    },
+    "node_modules/markdown-it-sup": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-2.0.0.tgz",
+      "integrity": "sha512-5VgmdKlkBd8sgXuoDoxMpiU+BiEt3I49GItBzzw7Mxq9CxvnhE/k09HFli09zgfFDRixDQDfDxi0mgBCXtaTvA=="
+    },
+    "node_modules/marked": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/md-editor-v3": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/md-editor-v3/-/md-editor-v3-4.21.3.tgz",
+      "integrity": "sha512-9+RCioqFIWSExTsG0jf9T/RTrFhtH8SpRcKVjHeEQSlExAr/zsgYt/M9XUy/nuGx87hgNKDzK0PXp/uOlDumAw==",
+      "dependencies": {
+        "@codemirror/lang-markdown": "^6.2.5",
+        "@codemirror/language-data": "^6.5.1",
+        "@types/markdown-it": "^14.0.1",
+        "@vavt/util": "^2.1.0",
+        "codemirror": "^6.0.1",
+        "copy-to-clipboard": "^3.3.3",
+        "lru-cache": "^10.2.0",
+        "markdown-it": "^14.0.0",
+        "markdown-it-image-figures": "^2.1.1",
+        "markdown-it-sub": "^2.0.0",
+        "markdown-it-sup": "^2.0.0",
+        "medium-zoom": "^1.1.0",
+        "xss": "^1.0.15"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.47"
+      }
+    },
+    "node_modules/md-editor-v3/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz",
+      "integrity": "sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==",
+      "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-to-string": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
+      "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
+    "node_modules/memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/mermaid": {
+      "version": "10.9.3",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.9.3.tgz",
+      "integrity": "sha512-V80X1isSEvAewIL3xhmz/rVmc27CVljcsbWxkxlWJWY/1kQa4XOABqpDl2qQLGKzpKm6WbTfUEKImBlUfFYArw==",
+      "dependencies": {
+        "@braintree/sanitize-url": "^6.0.1",
+        "@types/d3-scale": "^4.0.3",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "cytoscape": "^3.28.1",
+        "cytoscape-cose-bilkent": "^4.1.0",
+        "d3": "^7.4.0",
+        "d3-sankey": "^0.12.3",
+        "dagre-d3-es": "7.0.10",
+        "dayjs": "^1.11.7",
+        "dompurify": "^3.0.5 <3.1.7",
+        "elkjs": "^0.9.0",
+        "katex": "^0.16.9",
+        "khroma": "^2.0.0",
+        "lodash-es": "^4.17.21",
+        "mdast-util-from-markdown": "^1.3.0",
+        "non-layered-tidy-tree-layout": "^2.0.2",
+        "stylis": "^4.1.3",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^9.0.0",
+        "web-worker": "^1.2.0"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz",
+      "integrity": "sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz",
+      "integrity": "sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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-factory-destination": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
+      "integrity": "sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz",
+      "integrity": "sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+      "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz",
+      "integrity": "sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz",
+      "integrity": "sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+      "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz",
+      "integrity": "sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz",
+      "integrity": "sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz",
+      "integrity": "sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz",
+      "integrity": "sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz",
+      "integrity": "sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz",
+      "integrity": "sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz",
+      "integrity": "sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz",
+      "integrity": "sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz",
+      "integrity": "sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+      "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz",
+      "integrity": "sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "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",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+      "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+      "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
+    "node_modules/ml-array-max": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/ml-array-max/-/ml-array-max-1.2.4.tgz",
+      "integrity": "sha512-BlEeg80jI0tW6WaPyGxf5Sa4sqvcyY6lbSn5Vcv44lp1I2GR6AWojfUvLnGTNsIXrZ8uqWmo8VcG1WpkI2ONMQ==",
+      "dependencies": {
+        "is-any-array": "^2.0.0"
+      }
+    },
+    "node_modules/ml-array-min": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/ml-array-min/-/ml-array-min-1.2.3.tgz",
+      "integrity": "sha512-VcZ5f3VZ1iihtrGvgfh/q0XlMobG6GQ8FsNyQXD3T+IlstDv85g8kfV0xUG1QPRO/t21aukaJowDzMTc7j5V6Q==",
+      "dependencies": {
+        "is-any-array": "^2.0.0"
+      }
+    },
+    "node_modules/ml-array-rescale": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ml-array-rescale/-/ml-array-rescale-1.3.7.tgz",
+      "integrity": "sha512-48NGChTouvEo9KBctDfHC3udWnQKNKEWN0ziELvY3KG25GR5cA8K8wNVzracsqSW1QEkAXjTNx+ycgAv06/1mQ==",
+      "dependencies": {
+        "is-any-array": "^2.0.0",
+        "ml-array-max": "^1.2.4",
+        "ml-array-min": "^1.2.3"
+      }
+    },
+    "node_modules/ml-matrix": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/ml-matrix/-/ml-matrix-6.5.0.tgz",
+      "integrity": "sha512-sms732Dge+rs5dU4mnjE0oqLWm1WujvR2fr38LgUHRG2cjXjWlO3WJupLYaSz3++2iYr0UrGDK72OAivr3J8dg==",
+      "dependencies": {
+        "ml-array-rescale": "^1.3.1"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.3.tgz",
+      "integrity": "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/muggle-string": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
+      "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+    },
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
+      "dev": true
+    },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
+    },
+    "node_modules/non-layered-tidy-tree-layout": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz",
+      "integrity": "sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw=="
+    },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
+    "node_modules/npm": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-10.9.2.tgz",
+      "integrity": "sha512-iriPEPIkoMYUy3F6f3wwSZAU93E0Eg6cHwIR6jzzOXWSy+SD/rOODEs74cVONHKSx2obXtuUoyidVEhISrisgQ==",
+      "bundleDependencies": [
+        "@isaacs/string-locale-compare",
+        "@npmcli/arborist",
+        "@npmcli/config",
+        "@npmcli/fs",
+        "@npmcli/map-workspaces",
+        "@npmcli/package-json",
+        "@npmcli/promise-spawn",
+        "@npmcli/redact",
+        "@npmcli/run-script",
+        "@sigstore/tuf",
+        "abbrev",
+        "archy",
+        "cacache",
+        "chalk",
+        "ci-info",
+        "cli-columns",
+        "fastest-levenshtein",
+        "fs-minipass",
+        "glob",
+        "graceful-fs",
+        "hosted-git-info",
+        "ini",
+        "init-package-json",
+        "is-cidr",
+        "json-parse-even-better-errors",
+        "libnpmaccess",
+        "libnpmdiff",
+        "libnpmexec",
+        "libnpmfund",
+        "libnpmhook",
+        "libnpmorg",
+        "libnpmpack",
+        "libnpmpublish",
+        "libnpmsearch",
+        "libnpmteam",
+        "libnpmversion",
+        "make-fetch-happen",
+        "minimatch",
+        "minipass",
+        "minipass-pipeline",
+        "ms",
+        "node-gyp",
+        "nopt",
+        "normalize-package-data",
+        "npm-audit-report",
+        "npm-install-checks",
+        "npm-package-arg",
+        "npm-pick-manifest",
+        "npm-profile",
+        "npm-registry-fetch",
+        "npm-user-validate",
+        "p-map",
+        "pacote",
+        "parse-conflict-json",
+        "proc-log",
+        "qrcode-terminal",
+        "read",
+        "semver",
+        "spdx-expression-parse",
+        "ssri",
+        "supports-color",
+        "tar",
+        "text-table",
+        "tiny-relative-date",
+        "treeverse",
+        "validate-npm-package-name",
+        "which",
+        "write-file-atomic"
+      ],
+      "workspaces": [
+        "docs",
+        "smoke-tests",
+        "mock-globals",
+        "mock-registry",
+        "workspaces/*"
+      ],
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/arborist": "^8.0.0",
+        "@npmcli/config": "^9.0.0",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/map-workspaces": "^4.0.2",
+        "@npmcli/package-json": "^6.1.0",
+        "@npmcli/promise-spawn": "^8.0.2",
+        "@npmcli/redact": "^3.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "@sigstore/tuf": "^3.0.0",
+        "abbrev": "^3.0.0",
+        "archy": "~1.0.0",
+        "cacache": "^19.0.1",
+        "chalk": "^5.3.0",
+        "ci-info": "^4.1.0",
+        "cli-columns": "^4.0.0",
+        "fastest-levenshtein": "^1.0.16",
+        "fs-minipass": "^3.0.3",
+        "glob": "^10.4.5",
+        "graceful-fs": "^4.2.11",
+        "hosted-git-info": "^8.0.2",
+        "ini": "^5.0.0",
+        "init-package-json": "^7.0.2",
+        "is-cidr": "^5.1.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "libnpmaccess": "^9.0.0",
+        "libnpmdiff": "^7.0.0",
+        "libnpmexec": "^9.0.0",
+        "libnpmfund": "^6.0.0",
+        "libnpmhook": "^11.0.0",
+        "libnpmorg": "^7.0.0",
+        "libnpmpack": "^8.0.0",
+        "libnpmpublish": "^10.0.1",
+        "libnpmsearch": "^8.0.0",
+        "libnpmteam": "^7.0.0",
+        "libnpmversion": "^7.0.0",
+        "make-fetch-happen": "^14.0.3",
+        "minimatch": "^9.0.5",
+        "minipass": "^7.1.1",
+        "minipass-pipeline": "^1.2.4",
+        "ms": "^2.1.2",
+        "node-gyp": "^11.0.0",
+        "nopt": "^8.0.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-audit-report": "^6.0.0",
+        "npm-install-checks": "^7.1.1",
+        "npm-package-arg": "^12.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-profile": "^11.0.1",
+        "npm-registry-fetch": "^18.0.2",
+        "npm-user-validate": "^3.0.0",
+        "p-map": "^4.0.0",
+        "pacote": "^19.0.1",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "qrcode-terminal": "^0.12.0",
+        "read": "^4.0.0",
+        "semver": "^7.6.3",
+        "spdx-expression-parse": "^4.0.0",
+        "ssri": "^12.0.0",
+        "supports-color": "^9.4.0",
+        "tar": "^6.2.1",
+        "text-table": "~0.2.0",
+        "tiny-relative-date": "^1.3.0",
+        "treeverse": "^3.0.0",
+        "validate-npm-package-name": "^6.0.0",
+        "which": "^5.0.0",
+        "write-file-atomic": "^6.0.0"
+      },
+      "bin": {
+        "npm": "bin/npm-cli.js",
+        "npx": "bin/npx-cli.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "bin": {
+        "npm-run-all": "bin/npm-run-all/index.js",
+        "run-p": "bin/run-p/index.js",
+        "run-s": "bin/run-s/index.js"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/npm-run-all/node_modules/cross-spawn": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+      "dev": true,
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "inBundle": 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/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": 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/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/arborist": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/metavuln-calculator": "^8.0.0",
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.1",
+        "@npmcli/query": "^4.0.0",
+        "@npmcli/redact": "^3.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "bin-links": "^5.0.0",
+        "cacache": "^19.0.1",
+        "common-ancestor-path": "^1.0.1",
+        "hosted-git-info": "^8.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "json-stringify-nice": "^1.1.4",
+        "lru-cache": "^10.2.2",
+        "minimatch": "^9.0.4",
+        "nopt": "^8.0.0",
+        "npm-install-checks": "^7.1.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "pacote": "^19.0.0",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "proggy": "^3.0.0",
+        "promise-all-reject-late": "^1.0.0",
+        "promise-call-limit": "^3.0.1",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "ssri": "^12.0.0",
+        "treeverse": "^3.0.0",
+        "walk-up-path": "^3.0.1"
+      },
+      "bin": {
+        "arborist": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/config": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/package-json": "^6.0.1",
+        "ci-info": "^4.0.0",
+        "ini": "^5.0.0",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "walk-up-path": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/git": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/promise-spawn": "^8.0.0",
+        "ini": "^5.0.0",
+        "lru-cache": "^10.0.1",
+        "npm-pick-manifest": "^10.0.0",
+        "proc-log": "^5.0.0",
+        "promise-inflight": "^1.0.1",
+        "promise-retry": "^2.0.1",
+        "semver": "^7.3.5",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-bundled": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/map-workspaces": {
+      "version": "4.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "glob": "^10.2.2",
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
+      "version": "8.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cacache": "^19.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "pacote": "^20.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator/node_modules/pacote": {
+      "version": "20.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "@npmcli/run-script": "^9.0.0",
+        "cacache": "^19.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^12.0.0",
+        "npm-packlist": "^9.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/name-from-folder": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/node-gyp": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/package-json": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "glob": "^10.2.2",
+        "hosted-git-info": "^8.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "normalize-package-data": "^7.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/promise-spawn": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/query": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/redact": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/run-script": {
+      "version": "9.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "node-gyp": "^11.0.0",
+        "proc-log": "^5.0.0",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
+      "version": "0.3.2",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/tuf": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "tuf-js": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/abbrev": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/agent-base": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/aproba": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/archy": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/bin-links": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cmd-shim": "^7.0.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "read-cmd-shim": "^5.0.0",
+        "write-file-atomic": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache": {
+      "version": "19.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/p-map": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/chalk": {
+      "version": "5.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/chownr": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ci-info": {
+      "version": "4.1.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/cidr-regex": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "ip-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/clean-stack": {
+      "version": "2.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/npm/node_modules/cli-columns": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/npm/node_modules/cmd-shim": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-convert": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-name": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/common-ancestor-path": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cssesc": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/debug": {
+      "version": "4.3.7",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/npm/node_modules/diff": {
+      "version": "5.2.0",
+      "inBundle": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/npm/node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/encoding": {
+      "version": "0.1.13",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/npm/node_modules/env-paths": {
+      "version": "2.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/npm/node_modules/err-code": {
+      "version": "2.0.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/exponential-backoff": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/npm/node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/npm/node_modules/foreground-child": {
+      "version": "3.3.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/glob": {
+      "version": "10.4.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/hosted-git-info": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/npm/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm/node_modules/ignore-walk": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/npm/node_modules/indent-string": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/ini": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/init-package-json": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/package-json": "^6.0.0",
+        "npm-package-arg": "^12.0.0",
+        "promzard": "^2.0.0",
+        "read": "^4.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/ip-address": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/npm/node_modules/ip-regex": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/is-cidr": {
+      "version": "5.1.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "cidr-regex": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/isexe": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/npm/node_modules/jsbn": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/json-parse-even-better-errors": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/json-stringify-nice": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/jsonparse": {
+      "version": "1.3.1",
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff": {
+      "version": "6.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff-apply": {
+      "version": "5.5.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/libnpmaccess": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmdiff": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "binary-extensions": "^2.3.0",
+        "diff": "^5.1.0",
+        "minimatch": "^9.0.4",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0",
+        "tar": "^6.2.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmexec": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "ci-info": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0",
+        "proc-log": "^5.0.0",
+        "read": "^4.0.0",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "walk-up-path": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmfund": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmhook": {
+      "version": "11.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmorg": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpack": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^8.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^19.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpublish": {
+      "version": "10.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ci-info": "^4.0.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmsearch": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmteam": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmversion": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.1",
+        "@npmcli/run-script": "^9.0.1",
+        "json-parse-even-better-errors": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/make-fetch-happen/node_modules/negotiator": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/npm/node_modules/minimatch": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/minipass": {
+      "version": "7.1.2",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-fetch": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-fetch/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minizlib": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ms": {
+      "version": "2.1.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/mute-stream": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp": {
+      "version": "11.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/nopt": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/nopt/node_modules/abbrev": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/normalize-package-data": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-audit-report": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-bundled": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-install-checks": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "semver": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-normalize-package-bin": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-package-arg": {
+      "version": "12.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-packlist": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^7.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-pick-manifest": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-install-checks": "^7.1.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-profile": {
+      "version": "11.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-registry-fetch": {
+      "version": "18.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/redact": "^3.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^14.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^12.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-registry-fetch/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/npm-user-validate": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/p-map": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/npm/node_modules/pacote": {
+      "version": "19.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "@npmcli/run-script": "^9.0.0",
+        "cacache": "^19.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^12.0.0",
+        "npm-packlist": "^9.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/parse-conflict-json": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "just-diff": "^6.0.0",
+        "just-diff-apply": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/path-key": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/proc-log": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/proggy": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/promise-all-reject-late": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-call-limit": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/promise-retry": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/promzard": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "read": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/qrcode-terminal": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "bin": {
+        "qrcode-terminal": "bin/qrcode-terminal.js"
+      }
+    },
+    "node_modules/npm/node_modules/read": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "mute-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-cmd-shim": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-package-json-fast": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/retry": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm/node_modules/rimraf": {
+      "version": "5.0.10",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/npm/node_modules/semver": {
+      "version": "7.6.3",
+      "inBundle": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "@sigstore/sign": "^3.0.0",
+        "@sigstore/tuf": "^3.0.0",
+        "@sigstore/verify": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/bundle": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.3.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/core": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/sign": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "make-fetch-happen": "^14.0.1",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/verify": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks": {
+      "version": "2.8.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks-proxy-agent": {
+      "version": "8.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.1",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "inBundle": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/npm/node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-license-ids": {
+      "version": "3.0.20",
+      "inBundle": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/npm/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "inBundle": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/npm/node_modules/ssri": {
+      "version": "12.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/string-width": {
+      "version": "4.2.3",
+      "inBundle": 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/npm/node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "inBundle": 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/npm/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/supports-color": {
+      "version": "9.4.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/tar": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/text-table": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/tiny-relative-date": {
+      "version": "1.3.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/treeverse": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/tuf-js": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/models": "3.0.1",
+        "debug": "^4.3.6",
+        "make-fetch-happen": "^14.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/tuf-js/node_modules/@tufjs/models": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^9.0.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-filename": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-slug": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-name": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/walk-up-path": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/which": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/which/node_modules/isexe": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "inBundle": 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/npm/node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "inBundle": 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/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": 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/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/write-file-atomic": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/yallist": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz",
+      "integrity": "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ=="
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "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/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "dev": true,
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true
+    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "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/pinyin-pro": {
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/pinyin-pro/-/pinyin-pro-3.26.0.tgz",
+      "integrity": "sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg=="
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.0.tgz",
+      "integrity": "sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==",
+      "dev": true,
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.3",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "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"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.25.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz",
+      "integrity": "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/probe.gl": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/probe.gl/-/probe.gl-3.6.0.tgz",
+      "integrity": "sha512-19JydJWI7+DtR4feV+pu4Mn1I5TAc0xojuxVgZdXIyfmTLfUaFnk4OloWK1bKbPtkgGKLr2lnbnCXmpZEcEp9g==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "@probe.gl/env": "3.6.0",
+        "@probe.gl/log": "3.6.0",
+        "@probe.gl/stats": "3.6.0"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "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"
+        }
+      ]
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+      "dev": true,
+      "dependencies": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/read-pkg/node_modules/path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recorder-core": {
+      "version": "1.3.24102001",
+      "resolved": "https://registry.npmjs.org/recorder-core/-/recorder-core-1.3.24102001.tgz",
+      "integrity": "sha512-ZH1LX6aPmmg0LV49Z74Lb4itGBvWmVKpEN4+PjXYls8nSECHdXO23Hq3lR01Pca7cdNMDkTAkLGpsvAMnwA/LA=="
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-1.7.0.tgz",
+      "integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
+      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
+    "node_modules/rollup": {
+      "version": "3.29.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
+      "devOptional": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=14.18.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+      "dev": true
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "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"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
+      "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.20",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz",
+      "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==",
+      "dev": true
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true
+    },
+    "node_modules/std-env": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+      "integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
+      "dev": true
+    },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "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": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.padend": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.6.tgz",
+      "integrity": "sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
+      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+    },
+    "node_modules/stylis": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
+      "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now=="
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+    },
+    "node_modules/synckit": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+      "dev": true,
+      "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/terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/throat": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
+      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
+    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true
+    },
+    "node_modules/tinypool": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
+      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
+      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
+    "node_modules/ufo": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
+      "dev": true
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
+      "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-define-options": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-define-options/-/unplugin-vue-define-options-1.5.3.tgz",
+      "integrity": "sha512-vh9hOHd/VRxZ5QHdLdl0WO8aZWuVx8GN8eExCP665o8anh0LC8Xj4PF5zx0BxRcDi6AZOnTQZPgfQlA0Iw/74Q==",
+      "dev": true,
+      "dependencies": {
+        "@vue-macros/common": "1.15.1",
+        "ast-walker-scope": "^0.6.2",
+        "unplugin": "^1.16.0"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/use-element-plus-theme": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/use-element-plus-theme/-/use-element-plus-theme-0.0.5.tgz",
+      "integrity": "sha512-YktH5VbVqsT/lYTxx60KeqS5AZgDMEdDChsI2NxxcVkCOOgmkrM/yQVxxItWYhTJti3YxodM5SM89Vv1timIsA==",
+      "dependencies": {
+        "element-plus": "^2.3.10",
+        "vite-plugin-dts": "^3.5.2",
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/uvu": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
+      "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+      "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/uvu/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
+      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/v8-to-istanbul/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vite": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
+      "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
+      "devOptional": true,
+      "dependencies": {
+        "esbuild": "^0.18.10",
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 14",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.6.tgz",
+      "integrity": "sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==",
+      "dev": true,
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.4",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
+        "picocolors": "^1.0.0",
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": ">=v14.18.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite-plugin-dts": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.9.1.tgz",
+      "integrity": "sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==",
+      "dependencies": {
+        "@microsoft/api-extractor": "7.43.0",
+        "@rollup/pluginutils": "^5.1.0",
+        "@vue/language-core": "^1.8.27",
+        "debug": "^4.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.8",
+        "vue-tsc": "^1.8.27"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "0.34.6",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.6.tgz",
+      "integrity": "sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/chai": "^4.3.5",
+        "@types/chai-subset": "^1.3.3",
+        "@types/node": "*",
+        "@vitest/expect": "0.34.6",
+        "@vitest/runner": "0.34.6",
+        "@vitest/snapshot": "0.34.6",
+        "@vitest/spy": "0.34.6",
+        "@vitest/utils": "0.34.6",
+        "acorn": "^8.9.0",
+        "acorn-walk": "^8.2.0",
+        "cac": "^6.7.14",
+        "chai": "^4.3.10",
+        "debug": "^4.3.4",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "picocolors": "^1.0.0",
+        "std-env": "^3.3.3",
+        "strip-literal": "^1.0.1",
+        "tinybench": "^2.5.0",
+        "tinypool": "^0.7.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
+        "vite-node": "0.34.6",
+        "why-is-node-running": "^2.2.2"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": ">=v14.18.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@vitest/browser": "*",
+        "@vitest/ui": "*",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "playwright": "*",
+        "safaridriver": "*",
+        "webdriverio": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "playwright": {
+          "optional": true
+        },
+        "safaridriver": {
+          "optional": true
+        },
+        "webdriverio": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-clipboard3": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
+      "integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
+      "dependencies": {
+        "clipboard": "^2.0.6"
+      }
+    },
+    "node_modules/vue-codemirror": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
+      "integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
+      "dependencies": {
+        "@codemirror/commands": "6.x",
+        "@codemirror/language": "6.x",
+        "@codemirror/state": "6.x",
+        "@codemirror/view": "6.x"
+      },
+      "peerDependencies": {
+        "codemirror": "6.x",
+        "vue": "3.x"
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.0.tgz",
+      "integrity": "sha512-cYrAnv2me7bPDcg9kIcGwjJiSB6Qyi08+jLDo9yuvoFQjzHiPTzML7RnkJB1+3P6KMsX/KbCD4QE3Tv/knEllw==",
+      "dev": true
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
+      "dev": true,
+      "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-eslint-parser/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "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/vue-eslint-parser/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.2.tgz",
+      "integrity": "sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.14.2",
+        "@intlify/shared": "9.14.2",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+      "dependencies": {
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    },
+    "node_modules/w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
+      "dependencies": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "dev": true,
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/web-worker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
+      "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+      "dev": true,
+      "dependencies": {
+        "tr46": "^4.1.1",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz",
+      "integrity": "sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "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": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "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/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+    },
+    "node_modules/xss": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
+      "integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "optional": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bbf58bc
--- /dev/null
+++ b/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "web",
+  "version": "v1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "set NODE_OPTIONS=--max_old_space_size=4096 && run-p type-check build-only",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@antv/layout": "^0.3.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@ctrl/tinycolor": "^4.1.0",
+    "@logicflow/core": "^1.2.27",
+    "@logicflow/extension": "^1.2.27",
+    "@vueuse/core": "^10.9.0",
+    "@wecom/jssdk": "^2.1.0",
+    "axios": "^0.28.0",
+    "codemirror": "^6.0.1",
+    "cropperjs": "^1.6.2",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.9.1",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.9.0",
+    "install": "^0.13.0",
+    "katex": "^0.16.10",
+    "lodash": "^4.17.21",
+    "marked": "^12.0.2",
+    "md-editor-v3": "^4.16.7",
+    "medium-zoom": "^1.1.0",
+    "mermaid": "^10.9.0",
+    "mitt": "^3.0.0",
+    "moment": "^2.30.1",
+    "npm": "^10.2.4",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.1.6",
+    "pinyin-pro": "^3.18.2",
+    "recorder-core": "^1.3.24040900",
+    "screenfull": "^6.0.2",
+    "use-element-plus-theme": "^0.0.5",
+    "vue": "^3.3.4",
+    "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node18": "^18.2.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^18.17.5",
+    "@types/nprogress": "^0.2.0",
+    "@vitejs/plugin-vue": "^4.3.1",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.46.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "jsdom": "^22.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.0",
+    "sass": "1.66.1",
+    "typescript": "~5.1.6",
+    "unplugin-vue-define-options": "^1.3.18",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.2",
+    "vue-tsc": "^1.8.8"
+  }
+}
diff --git a/public/MaxKB.gif b/public/MaxKB.gif
new file mode 100644
index 0000000..055d49a
Binary files /dev/null and b/public/MaxKB.gif differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..3bd1d38
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon1.ico b/public/favicon1.ico
new file mode 100644
index 0000000..7d9781e
Binary files /dev/null and b/public/favicon1.ico differ
diff --git a/public/js/jweixin-1.4.0.js b/public/js/jweixin-1.4.0.js
new file mode 100644
index 0000000..fc060ce
--- /dev/null
+++ b/public/js/jweixin-1.4.0.js
@@ -0,0 +1 @@
+((e,n)=>{"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)})(this,function(r,e){var a,c,n,i,t,s,d,o,l,u,p,f,m,g,h,S,I,y,v,_,k,w;if(!r.jWeixin)return a={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},c=(()=>{var e,n={};for(e in a)n[a[e]]=e;return n})(),i=(n=r.document).title,t=navigator.userAgent.toLowerCase(),f=navigator.platform.toLowerCase(),s=!(!f.match("mac")&&!f.match("win")),d=-1!=t.indexOf("wxdebugger"),o=-1!=t.indexOf("micromessenger"),l=-1!=t.indexOf("android"),u=-1!=t.indexOf("iphone")||-1!=t.indexOf("ipad"),p=(f=t.match(/micromessenger\/(\d+\.\d+\.\d+)/)||t.match(/micromessenger\/(\d+\.\d+)/))?f[1]:"",m={initStartTime:L(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},g={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:u?1:l?2:-1,clientVersion:p,url:encodeURIComponent(location.href)},h={},S={_completes:[]},I={state:0,data:{}},B(function(){m.initEndTime=L()}),y=!1,v=[],_={config:function(e){C("config",h=e);var o=!1!==h.check;B(function(){if(o)T(a.config,{verifyJsApiList:V(h.jsApiList)},(S._complete=function(e){m.preVerifyEndTime=L(),I.state=1,I.data=e},S.success=function(e){g.isPreVerifyOk=0},S.fail=function(e){S._fail?S._fail(e):I.state=-1},(t=S._completes).push(function(){var n;s||d||h.debug||p<"6.0.2"||g.systemType<0||(n=new Image,g.appId=h.appId,g.initTime=m.initEndTime-m.initStartTime,g.preVerifyTime=m.preVerifyEndTime-m.preVerifyStartTime,_.getNetworkType({isInnerInvoke:!0,success:function(e){g.networkType=e.networkType,n.src="https://open.weixin.qq.com/sdk/report?v="+g.version+"&o="+g.isPreVerifyOk+"&s="+g.systemType+"&c="+g.clientVersion+"&a="+g.appId+"&n="+g.networkType+"&i="+g.initTime+"&p="+g.preVerifyTime+"&u="+g.url}}))}),S.complete=function(e){for(var n=0,i=t.length;n<i;++n)t[n]();S._completes=[]},S)),m.preVerifyStartTime=L();else{I.state=1;for(var e=S._completes,n=0,i=e.length;n<i;++n)e[n]();S._completes=[]}var t}),_.invoke||(_.invoke=function(e,n,i){r.WeixinJSBridge&&WeixinJSBridge.invoke(e,P(n),i)},_.on=function(e,n){r.WeixinJSBridge&&WeixinJSBridge.on(e,n)})},ready:function(e){(0!=I.state||(S._completes.push(e),!o&&h.debug))&&e()},error:function(e){p<"6.0.2"||(-1==I.state?e(I.data):S._fail=e)},checkJsApi:function(e){T("checkJsApi",{jsApiList:V(e.jsApiList)},(e._complete=function(e){l&&(i=e.checkResult)&&(e.checkResult=JSON.parse(i));var n,i=e,t=i.checkResult;for(n in t){var o=c[n];o&&(t[o]=t[n],delete t[n])}},e))},onMenuShareTimeline:function(e){M(a.onMenuShareTimeline,{complete:function(){T("shareTimeline",{title:e.title||i,desc:e.title||i,img_url:e.imgUrl||"",link:e.link||location.href,type:e.type||"link",data_url:e.dataUrl||""},e)}},e)},onMenuShareAppMessage:function(n){M(a.onMenuShareAppMessage,{complete:function(e){"favorite"===e.scene?T("sendAppMessage",{title:n.title||i,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""}):T("sendAppMessage",{title:n.title||i,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""},n)}},n)},onMenuShareQQ:function(e){M(a.onMenuShareQQ,{complete:function(){T("shareQQ",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareWeibo:function(e){M(a.onMenuShareWeibo,{complete:function(){T("shareWeiboApp",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareQZone:function(e){M(a.onMenuShareQZone,{complete:function(){T("shareQZone",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},updateTimelineShareData:function(e){T("updateTimelineShareData",{title:e.title,link:e.link,imgUrl:e.imgUrl},e)},updateAppMessageShareData:function(e){T("updateAppMessageShareData",{title:e.title,desc:e.desc,link:e.link,imgUrl:e.imgUrl},e)},startRecord:function(e){T("startRecord",{},e)},stopRecord:function(e){T("stopRecord",{},e)},onVoiceRecordEnd:function(e){M("onVoiceRecordEnd",e)},playVoice:function(e){T("playVoice",{localId:e.localId},e)},pauseVoice:function(e){T("pauseVoice",{localId:e.localId},e)},stopVoice:function(e){T("stopVoice",{localId:e.localId},e)},onVoicePlayEnd:function(e){M("onVoicePlayEnd",e)},uploadVoice:function(e){T("uploadVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadVoice:function(e){T("downloadVoice",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},translateVoice:function(e){T("translateVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},chooseImage:function(e){T("chooseImage",{scene:"1|2",count:e.count||9,sizeType:e.sizeType||["original","compressed"],sourceType:e.sourceType||["album","camera"]},(e._complete=function(e){if(l){var n=e.localIds;try{n&&(e.localIds=JSON.parse(n))}catch(e){}}},e))},getLocation:function(e){},getLocation:function(e){e=e||{},T(a.getLocation,{type:e.type||"wgs84"},(e._complete=function(e){delete e.type},e))},previewImage:function(e){T(a.previewImage,{current:e.current,urls:e.urls},e)},uploadImage:function(e){T("uploadImage",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadImage:function(e){T("downloadImage",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},getLocalImgData:function(e){!1===y?(y=!0,T("getLocalImgData",{localId:e.localId},(e._complete=function(e){var n;y=!1,0<v.length&&(n=v.shift(),wx.getLocalImgData(n))},e))):v.push(e)},getNetworkType:function(e){T("getNetworkType",{},(e._complete=function(e){var n=e,e=n.errMsg,i=(n.errMsg="getNetworkType:ok",n.subtype);if(delete n.subtype,i)n.networkType=i;else{var i=e.indexOf(":"),t=e.substring(i+1);switch(t){case"wifi":case"edge":case"wwan":n.networkType=t;break;default:n.errMsg="getNetworkType:fail"}}},e))},openLocation:function(e){T("openLocation",{latitude:e.latitude,longitude:e.longitude,name:e.name||"",address:e.address||"",scale:e.scale||28,infoUrl:e.infoUrl||""},e)},hideOptionMenu:function(e){T("hideOptionMenu",{},e)},showOptionMenu:function(e){T("showOptionMenu",{},e)},closeWindow:function(e){T("closeWindow",{},e=e||{})},hideMenuItems:function(e){T("hideMenuItems",{menuList:e.menuList},e)},showMenuItems:function(e){T("showMenuItems",{menuList:e.menuList},e)},hideAllNonBaseMenuItem:function(e){T("hideAllNonBaseMenuItem",{},e)},showAllNonBaseMenuItem:function(e){T("showAllNonBaseMenuItem",{},e)},scanQRCode:function(e){T("scanQRCode",{needResult:(e=e||{}).needResult||0,scanType:e.scanType||["qrCode","barCode"]},(e._complete=function(e){var n;u&&(n=e.resultStr)&&(n=JSON.parse(n),e.resultStr=n&&n.scan_code&&n.scan_code.scan_result)},e))},openAddress:function(e){T(a.openAddress,{},(e._complete=function(e){(e=e).postalCode=e.addressPostalCode,delete e.addressPostalCode,e.provinceName=e.proviceFirstStageName,delete e.proviceFirstStageName,e.cityName=e.addressCitySecondStageName,delete e.addressCitySecondStageName,e.countryName=e.addressCountiesThirdStageName,delete e.addressCountiesThirdStageName,e.detailInfo=e.addressDetailInfo,delete e.addressDetailInfo},e))},openProductSpecificView:function(e){T(a.openProductSpecificView,{pid:e.productId,view_type:e.viewType||0,ext_info:e.extInfo},e)},addCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],r={card_id:r.cardId,card_ext:r.cardExt};i.push(r)}T(a.addCard,{card_list:i},(e._complete=function(e){if(n=e.card_list){for(var n,i=0,t=(n=JSON.parse(n)).length;i<t;++i){var o=n[i];o.cardId=o.card_id,o.cardExt=o.card_ext,o.isSuccess=!!o.is_succ,delete o.card_id,delete o.card_ext,delete o.is_succ}e.cardList=n,delete e.card_list}},e))},chooseCard:function(e){T("chooseCard",{app_id:h.appId,location_id:e.shopId||"",sign_type:e.signType||"SHA1",card_id:e.cardId||"",card_type:e.cardType||"",card_sign:e.cardSign,time_stamp:e.timestamp+"",nonce_str:e.nonceStr},(e._complete=function(e){e.cardList=e.choose_card_info,delete e.choose_card_info},e))},openCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],r={card_id:r.cardId,code:r.code};i.push(r)}T(a.openCard,{card_list:i},e)},consumeAndShareCard:function(e){T(a.consumeAndShareCard,{consumedCardId:e.cardId,consumedCode:e.code},e)},chooseWXPay:function(e){T(a.chooseWXPay,x(e),e)},openEnterpriseRedPacket:function(e){T(a.openEnterpriseRedPacket,x(e),e)},startSearchBeacons:function(e){T(a.startSearchBeacons,{ticket:e.ticket},e)},stopSearchBeacons:function(e){T(a.stopSearchBeacons,{},e)},onSearchBeacons:function(e){M(a.onSearchBeacons,e)},openEnterpriseChat:function(e){T("openEnterpriseChat",{useridlist:e.userIds,chatname:e.groupName},e)},launchMiniProgram:function(e){T("launchMiniProgram",{targetAppId:e.targetAppId,path:(e=>{var n;if("string"==typeof e&&0<e.length)return n=e.split("?")[0],n+=".html",void 0!==(e=e.split("?")[1])?n+"?"+e:n})(e.path),envVersion:e.envVersion},e)},miniProgram:{navigateBack:function(e){e=e||{},B(function(){T("invokeMiniProgramAPI",{name:"navigateBack",arg:{delta:e.delta||1}},e)})},navigateTo:function(e){B(function(){T("invokeMiniProgramAPI",{name:"navigateTo",arg:{url:e.url}},e)})},redirectTo:function(e){B(function(){T("invokeMiniProgramAPI",{name:"redirectTo",arg:{url:e.url}},e)})},switchTab:function(e){B(function(){T("invokeMiniProgramAPI",{name:"switchTab",arg:{url:e.url}},e)})},reLaunch:function(e){B(function(){T("invokeMiniProgramAPI",{name:"reLaunch",arg:{url:e.url}},e)})},postMessage:function(e){B(function(){T("invokeMiniProgramAPI",{name:"postMessage",arg:e.data||{}},e)})},getEnv:function(e){B(function(){e({miniprogram:"miniprogram"===r.__wxjs_environment})})}}},k=1,w={},n.addEventListener("error",function(e){var n,i,t;l||(t=(n=e.target).tagName,i=n.src,"IMG"!=t&&"VIDEO"!=t&&"AUDIO"!=t&&"SOURCE"!=t)||-1!=i.indexOf("wxlocalresource://")&&(e.preventDefault(),e.stopPropagation(),(t=n["wx-id"])||(t=k++,n["wx-id"]=t),w[t]||(w[t]=!0,wx.ready(function(){wx.getLocalImgData({localId:i,success:function(e){n.src=e.localData}})})))},!0),n.addEventListener("load",function(e){var n;l||(n=(e=e.target).tagName,"IMG"!=n&&"VIDEO"!=n&&"AUDIO"!=n&&"SOURCE"!=n)||(n=e["wx-id"])&&(w[n]=!1)},!0),e&&(r.wx=r.jWeixin=_),_;function T(n,e,i){r.WeixinJSBridge?WeixinJSBridge.invoke(n,P(e),function(e){A(n,e,i)}):C(n,i)}function M(n,i,t){r.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t.trigger&&t.trigger(e),A(n,e,i)}):C(n,t||i)}function P(e){return(e=e||{}).appId=h.appId,e.verifyAppId=h.appId,e.verifySignType="sha1",e.verifyTimestamp=h.timestamp+"",e.verifyNonceStr=h.nonceStr,e.verifySignature=h.signature,e}function x(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,package:e.package,paySign:e.paySign,signType:e.signType||"SHA1"}}function A(e,n,i){"openEnterpriseChat"==e&&(n.errCode=n.err_code),delete n.err_code,delete n.err_desc,delete n.err_detail;var t=n.errMsg,e=(t||(t=n.err_msg,delete n.err_msg,t=((e,n)=>{var i,t=c[e];return t&&(e=t),t="ok",n&&(i=n.indexOf(":"),"access denied"!=(t=(t=(t=-1!=(t=-1!=(t="failed"==(t="confirm"==(t=n.substring(i+1))?"ok":t)?"fail":t).indexOf("failed_")?t.substring(7):t).indexOf("fail_")?t.substring(5):t).replace(/_/g," ")).toLowerCase())&&"no permission to execute"!=t||(t="permission denied"),""==(t="config"==e&&"function not exist"==t?"ok":t))&&(t="fail"),n=e+":"+t})(e,t),n.errMsg=t),(i=i||{})._complete&&(i._complete(n),delete i._complete),t=n.errMsg||"",h.debug&&!i.isInnerInvoke&&alert(JSON.stringify(n)),t.indexOf(":"));switch(t.substring(e+1)){case"ok":i.success&&i.success(n);break;case"cancel":i.cancel&&i.cancel(n);break;default:i.fail&&i.fail(n)}i.complete&&i.complete(n)}function V(e){if(e){for(var n=0,i=e.length;n<i;++n){var t=e[n],t=a[t];t&&(e[n]=t)}return e}}function C(e,n){var i;!h.debug||n&&n.isInnerInvoke||((i=c[e])&&(e=i),n&&n._complete&&delete n._complete,console.log('"'+e+'",',n||""))}function L(){return(new Date).getTime()}function B(e){o&&(r.WeixinJSBridge?e():n.addEventListener&&n.addEventListener("WeixinJSBridgeReady",e,!1))}});
\ No newline at end of file
diff --git a/public/js/uni.webview.1.5.2.js b/public/js/uni.webview.1.5.2.js
new file mode 100644
index 0000000..b0c8445
--- /dev/null
+++ b/public/js/uni.webview.1.5.2.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..8664306
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>
diff --git a/src/api/application-overview.ts b/src/api/application-overview.ts
new file mode 100644
index 0000000..0513a0d
--- /dev/null
+++ b/src/api/application-overview.ts
@@ -0,0 +1,90 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+
+import { type Ref } from 'vue'
+
+const prefix = '/application'
+
+/**
+ * API_KEY列表
+ * @param 参数 application_id
+ */
+const getAPIKey: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  application_id,
+  loading
+) => {
+  return get(`${prefix}/${application_id}/api_key`, undefined, loading)
+}
+
+/**
+ * 新增API_KEY
+ * @param 参数 application_id
+ */
+const postAPIKey: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  application_id,
+  loading
+) => {
+  return post(`${prefix}/${application_id}/api_key`, {}, undefined, loading)
+}
+
+/**
+ * 删除API_KEY
+ * @param 参数 application_id api_key_id
+ */
+const delAPIKey: (
+  application_id: String,
+  api_key_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (application_id, api_key_id, loading) => {
+  return del(`${prefix}/${application_id}/api_key/${api_key_id}`, undefined, undefined, loading)
+}
+
+/**
+ * 修改API_KEY
+ * @param 参数 application_id,api_key_id
+ * data {
+ *   is_active: boolean
+ * }
+ */
+const putAPIKey: (
+  application_id: string,
+  api_key_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, api_key_id, data, loading) => {
+  return put(`${prefix}/${application_id}/api_key/${api_key_id}`, data, undefined, loading)
+}
+
+/**
+ * 统计
+ * @param 参数 application_id, data
+ */
+const getStatistics: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return get(`${prefix}/${application_id}/statistics/chat_record_aggregate_trend`, data, loading)
+}
+
+/**
+ * 修改应用icon
+ * @param 参数 application_id
+ * data: file
+ */
+const putAppIcon: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix}/${application_id}/edit_icon`, data, undefined, loading)
+}
+
+export default {
+  getAPIKey,
+  postAPIKey,
+  delAPIKey,
+  putAPIKey,
+  getStatistics,
+  putAppIcon
+}
diff --git a/src/api/application-xpack.ts b/src/api/application-xpack.ts
new file mode 100644
index 0000000..25e973f
--- /dev/null
+++ b/src/api/application-xpack.ts
@@ -0,0 +1,41 @@
+import { Result } from '@/request/Result'
+import { get, put } from '@/request/index'
+import { type Ref } from 'vue'
+
+const prefix = '/application'
+
+/**
+ * 替换社区版-获取AccessToken
+ * @param 参数 application_id
+ */
+const getAccessToken: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  application_id,
+  loading
+) => {
+  return get(`${prefix}/${application_id}/setting`, undefined, loading)
+}
+
+/**
+ * 替换社区版-修改AccessToken
+ * @param 参数 application_id
+ * data {
+ *  "show_source": boolean,
+ *  "show_history": boolean,
+ *  "draggable": boolean,
+ *  "show_guide": boolean,
+ *  "avatar": file,
+ *  "float_icon": file,
+ * }
+ */
+const putAccessToken: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix}/${application_id}/setting`, data, undefined, loading)
+}
+
+export default {
+  getAccessToken,
+  putAccessToken
+}
diff --git a/src/api/application.ts b/src/api/application.ts
new file mode 100644
index 0000000..a85b031
--- /dev/null
+++ b/src/api/application.ts
@@ -0,0 +1,580 @@
+import { Result } from '@/request/Result'
+import { get, post, postStream, del, put, request, download, exportFile } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import type { ApplicationFormType } from '@/api/type/application'
+import { type Ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+
+const prefix = '/application'
+
+/**
+ * 获取全部应用
+ * @param 参数
+ */
+const getAllAppilcation: () => Promise<Result<any[]>> = () => {
+  return get(`${prefix}`)
+}
+
+/**
+ * 获取分页应用
+ * page {
+ "current_page": "string",
+ "page_size": "string",
+ }
+ * param {
+ "name": "string",
+ }
+ */
+const getApplication: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
+}
+
+/**
+ * 创建应用
+ * @param 参数
+ */
+const postApplication: (
+  data: ApplicationFormType,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (data, loading) => {
+  return post(`${prefix}`, data, undefined, loading)
+}
+
+/**
+ * 修改应用
+ * @param 参数
+ */
+const putApplication: (
+  application_id: String,
+  data: ApplicationFormType,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix}/${application_id}`, data, undefined, loading)
+}
+
+/**
+ * 删除应用
+ * @param 参数 application_id
+ */
+const delApplication: (
+  application_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (application_id, loading) => {
+  return del(`${prefix}/${application_id}`, undefined, {}, loading)
+}
+
+/**
+ * 应用详情
+ * @param 参数 application_id
+ */
+const getApplicationDetail: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}`, undefined, loading)
+}
+
+/**
+ * 获得当前应用可使用的知识库
+ * @param 参数 application_id
+ */
+const getApplicationDataset: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/list_dataset`, undefined, loading)
+}
+
+/**
+ * 获取AccessToken
+ * @param 参数 application_id
+ */
+const getAccessToken: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  application_id,
+  loading
+) => {
+  return get(`${prefix}/${application_id}/access_token`, undefined, loading)
+}
+
+/**
+ * 修改AccessToken
+ * @param 参数 application_id
+ * data {
+ *  "is_active": true
+ * }
+ */
+const putAccessToken: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix}/${application_id}/access_token`, data, undefined, loading)
+}
+
+/**
+ * 应用认证
+ * @param 参数
+ {
+ "access_token": "string"
+ }
+ */
+const postAppAuthentication: (
+  access_token: string,
+  loading?: Ref<boolean>,
+  authentication_value?: any
+) => Promise<any> = (access_token, loading, authentication_value) => {
+  return post(
+    `${prefix}/authentication`,
+    { access_token: access_token, authentication_value },
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 对话获取应用相关信息
+ * @param 参数
+ {
+ "access_token": "string"
+ }
+ */
+const getAppProfile: (loading?: Ref<boolean>) => Promise<any> = (loading) => {
+  return get(`${prefix}/profile`, undefined, loading)
+}
+
+/**
+ * 获得临时回话Id
+ * @param 参数
+
+ }
+ */
+const postChatOpen: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/chat/open`, data)
+}
+
+/**
+ * 获得工作流临时回话Id
+ * @param 参数
+
+ }
+ */
+const postWorkflowChatOpen: (data: ApplicationFormType) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/chat_workflow/open`, data)
+}
+
+/**
+ * 正式回话Id
+ * @param 参数
+ * {
+ "model_id": "string",
+ "multiple_rounds_dialogue": true,
+ "dataset_id_list": [
+ "string"
+ ]
+ }
+ */
+const getChatOpen: (application_id: String) => Promise<Result<any>> = (application_id) => {
+  return get(`${prefix}/${application_id}/chat/open`)
+}
+/**
+ * 对话
+ * @param 参数
+ * chat_id: string
+ * data
+ */
+const postChatMessage: (chat_id: string, data: any) => Promise<any> = (chat_id, data) => {
+  return postStream(`/api${prefix}/chat_message/${chat_id}`, data)
+}
+
+/**
+ * 点赞、点踩
+ * @param 参数
+ * application_id : string; chat_id : string; chat_record_id : string
+ * {
+ "vote_status": "string", // -1 0 1
+ }
+ */
+const putChatVote: (
+  application_id: string,
+  chat_id: string,
+  chat_record_id: string,
+  vote_status: string,
+  loading?: Ref<boolean>
+) => Promise<any> = (application_id, chat_id, chat_record_id, vote_status, loading) => {
+  return put(
+    `${prefix}/${application_id}/chat/${chat_id}/chat_record/${chat_record_id}/vote`,
+    {
+      vote_status
+    },
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 命中测试列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationHitTest: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, data, loading) => {
+  return get(`${prefix}/${application_id}/hit_test`, data, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationRerankerModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, { model_type: 'RERANKER' }, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationSTTModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, { model_type: 'STT' }, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getApplicationTTSModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, { model_type: 'TTS' }, loading)
+}
+
+const getApplicationImageModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, { model_type: 'IMAGE' }, loading)
+}
+
+const getApplicationTTIModel: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/model`, { model_type: 'TTI' }, loading)
+}
+
+/**
+ * 发布应用
+ * @param 参数
+ */
+const putPublishApplication: (
+  application_id: String,
+  data: ApplicationFormType,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix}/${application_id}/publish`, data, undefined, loading)
+}
+/**
+ * 获取应用所属的函数库列表
+ * @param application_id 应用id
+ * @param loading
+ * @returns
+ */
+const listFunctionLib: (application_id: String, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  application_id,
+  loading
+) => {
+  return get(`${prefix}/${application_id}/function_lib`, undefined, loading)
+}
+/**
+ * 获取当前人的所有应用列表
+ * @param application_id 应用id
+ * @param loading
+ * @returns
+ */
+export const getApplicationList: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, loading) => {
+  return get(`${prefix}/${application_id}/application`, undefined, loading)
+}
+/**
+ * 获取应用所属的函数库
+ * @param application_id
+ * @param function_lib_id
+ * @param loading
+ * @returns
+ */
+const getFunctionLib: (
+  application_id: String,
+  function_lib_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, function_lib_id, loading) => {
+  return get(`${prefix}/${application_id}/function_lib/${function_lib_id}`, undefined, loading)
+}
+
+const getApplicationById: (
+  application_id: String,
+  app_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, app_id, loading) => {
+  return get(`${prefix}/${application_id}/application/${app_id}`, undefined, loading)
+}
+/**
+ * 获取模型参数表单
+ * @param application_id 应用id
+ * @param model_id      模型id
+ * @param loading
+ * @returns
+ */
+const getModelParamsForm: (
+  application_id: String,
+  model_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<FormField>>> = (application_id, model_id, loading) => {
+  return get(`${prefix}/${application_id}/model_params_form/${model_id}`, undefined, loading)
+}
+
+/**
+ * 上传文档图片附件
+ */
+const uploadFile: (
+  application_id: String,
+  chat_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, chat_id, data, loading) => {
+  return post(`${prefix}/${application_id}/chat/${chat_id}/upload_file`, data, undefined, loading)
+}
+
+/**
+ * 语音转文本
+ */
+const postSpeechToText: (
+  application_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return post(`${prefix}/${application_id}/speech_to_text`, data, undefined, loading)
+}
+
+/**
+ * 文本转语音
+ */
+const postTextToSpeech: (
+  application_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return download(`${prefix}/${application_id}/text_to_speech`, 'post', data, undefined, loading)
+}
+
+/**
+ * 播放测试文本
+ */
+const playDemoText: (
+  application_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return download(`${prefix}/${application_id}/play_demo_text`, 'post', data, undefined, loading)
+}
+/**
+ * 获取平台状态
+ */
+const getPlatformStatus: (application_id: string) => Promise<Result<any>> = (application_id) => {
+  return get(`/platform/${application_id}/status`)
+}
+/**
+ * 获取平台配置
+ */
+const getPlatformConfig: (application_id: string, type: string) => Promise<Result<any>> = (
+  application_id,
+  type
+) => {
+  return get(`/platform/${application_id}/${type}`)
+}
+/**
+ * 更新平台配置
+ */
+const updatePlatformConfig: (
+  application_id: string,
+  type: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, type, data, loading) => {
+  return post(`/platform/${application_id}/${type}`, data, undefined, loading)
+}
+/**
+ * 更新平台状态
+ */
+const updatePlatformStatus: (application_id: string, data: any) => Promise<Result<any>> = (
+  application_id,
+  data
+) => {
+  return post(`/platform/${application_id}/status`, data)
+}
+/**
+ * 验证密码
+ */
+const validatePassword: (
+  application_id: string,
+  password: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, password, loading) => {
+  return get(`/application/${application_id}/auth/${password}`, undefined, loading)
+}
+
+/**
+ * workflow历史版本
+ */
+const getWorkFlowVersion: (
+  application_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, loading) => {
+  return get(`/application/${application_id}/work_flow_version`, undefined, loading)
+}
+
+/**
+ * workflow历史版本详情
+ */
+const getWorkFlowVersionDetail: (
+  application_id: string,
+  application_version_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, application_version_id, loading) => {
+  return get(
+    `/application/${application_id}/work_flow_version/${application_version_id}`,
+    undefined,
+    loading
+  )
+}
+/**
+ * 修改workflow历史版本
+ */
+const putWorkFlowVersion: (
+  application_id: string,
+  application_version_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, application_version_id, data, loading) => {
+  return put(
+    `/application/${application_id}/work_flow_version/${application_version_id}`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+const getUserList: (type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  type,
+  loading
+) => {
+  return get(`/user/list/${type}`, undefined, loading)
+}
+
+const exportApplication = (
+  application_id: string,
+  application_name: string,
+  loading?: Ref<boolean>
+) => {
+  return exportFile(
+    application_name + '.mk',
+    `/application/${application_id}/export`,
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 导入应用
+ */
+const importApplication: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}/import`, data, undefined, loading)
+}
+export default {
+  getAllAppilcation,
+  getApplication,
+  postApplication,
+  putApplication,
+  postChatOpen,
+  getChatOpen,
+  postChatMessage,
+  delApplication,
+  getApplicationDetail,
+  getApplicationDataset,
+  getAccessToken,
+  putAccessToken,
+  postAppAuthentication,
+  getAppProfile,
+  putChatVote,
+  getApplicationHitTest,
+  getApplicationModel,
+  putPublishApplication,
+  postWorkflowChatOpen,
+  listFunctionLib,
+  getFunctionLib,
+  getModelParamsForm,
+  getApplicationRerankerModel,
+  getApplicationSTTModel,
+  getApplicationTTSModel,
+  getApplicationImageModel,
+  getApplicationTTIModel,
+  postSpeechToText,
+  postTextToSpeech,
+  getPlatformStatus,
+  getPlatformConfig,
+  updatePlatformConfig,
+  updatePlatformStatus,
+  validatePassword,
+  getWorkFlowVersion,
+  getWorkFlowVersionDetail,
+  putWorkFlowVersion,
+  playDemoText,
+  getUserList,
+  getApplicationList,
+  uploadFile,
+  exportApplication,
+  importApplication,
+  getApplicationById
+}
diff --git a/src/api/auth-setting.ts b/src/api/auth-setting.ts
new file mode 100644
index 0000000..e1d239b
--- /dev/null
+++ b/src/api/auth-setting.ts
@@ -0,0 +1,39 @@
+import {Result} from '@/request/Result'
+import {get, post, del, put} from '@/request/index'
+import type {pageRequest} from '@/api/type/common'
+import {type Ref} from 'vue'
+
+const prefix = '/auth'
+/**
+ * 获取认证设置
+ */
+const getAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
+    return get(`${prefix}/${auth_type}/detail`, undefined, loading)
+}
+
+/**
+ * 邮箱测试
+ */
+const postAuthSetting: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+    data,
+    loading
+) => {
+    return post(`${prefix}/connection`, data, undefined, loading)
+}
+
+/**
+ * 修改邮箱设置
+ */
+const putAuthSetting: (auth_type: string, data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+    auth_type,
+    data,
+    loading
+) => {
+    return put(`${prefix}/${auth_type}/info`, data, undefined, loading)
+}
+
+export default {
+    getAuthSetting,
+    postAuthSetting,
+    putAuthSetting
+}
diff --git a/src/api/dataset.ts b/src/api/dataset.ts
new file mode 100644
index 0000000..d259904
--- /dev/null
+++ b/src/api/dataset.ts
@@ -0,0 +1,249 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportExcel, exportFile } from '@/request/index'
+import type { datasetData } from '@/api/type/dataset'
+import type { pageRequest } from '@/api/type/common'
+import type { ApplicationFormType } from '@/api/type/application'
+import { type Ref } from 'vue'
+const prefix = '/dataset'
+
+/**
+ * 获取分页知识库
+ * @param 参数  
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ * param {
+          "name": "string",
+        }
+ */
+const getDataset: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
+}
+
+/**
+ * 获取全部知识库
+ * @param 参数
+ */
+const getAllDataset: (loading?: Ref<boolean>) => Promise<Result<any[]>> = (loading) => {
+  return get(`${prefix}`, undefined, loading)
+}
+
+/**
+ * 删除知识库
+ * @param 参数 dataset_id
+ */
+const delDataset: (dataset_id: String, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  dataset_id,
+  loading
+) => {
+  return del(`${prefix}/${dataset_id}`, undefined, {}, loading)
+}
+
+/**
+ * 创建知识库
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "documents": [
+    {
+      "name": "string",
+      "paragraphs": [
+        {
+          "content": "string",
+          "title": "string",
+          "problem_list": [
+            {
+              "id": "string",
+              "content": "string"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+ */
+const postDataset: (data: datasetData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading, 1000 * 60 * 5)
+}
+
+/**
+ * 创建Web知识库
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "source_url": "string",
+  "selector": "string",
+}
+ */
+const postWebDataset: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}/web`, data, undefined, loading)
+}
+
+/**
+ * 创建QA知识库
+  * @param 参数 formData
+ * {
+  "file": "file",
+  "name": "string",
+  "desc": "string",
+  }
+ */
+const postQADataset: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}/qa`, data, undefined, loading)
+}
+
+/**
+ * 知识库详情
+ * @param 参数 dataset_id
+ */
+const getDatasetDetail: (dataset_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  dataset_id,
+  loading
+) => {
+  return get(`${prefix}/${dataset_id}`, undefined, loading)
+}
+
+/**
+ * 修改知识库信息
+ * @param 参数 
+ * dataset_id
+ * {
+      "name": "string",
+      "desc": true
+    }
+ */
+const putDataset: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}`, data, undefined, loading)
+}
+/**
+ * 获取知识库 可关联的应用列表
+ * @param dataset_id
+ * @param loading
+ * @returns
+ */
+const listUsableApplication: (
+  dataset_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<ApplicationFormType>>> = (dataset_id, loading) => {
+  return get(`${prefix}/${dataset_id}/application`, {}, loading)
+}
+
+/**
+ * 命中测试列表
+ * @param dataset_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getDatasetHitTest: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (dataset_id, data, loading) => {
+  return get(`${prefix}/${dataset_id}/hit_test`, data, loading)
+}
+
+/**
+ * 同步知识库
+ * @param 参数 dataset_id
+ * @query 参数 sync_type // 同步类型->replace:替换同步,complete:完整同步
+ */
+const putSyncWebDataset: (
+  dataset_id: string,
+  sync_type: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, sync_type, loading) => {
+  return put(`${prefix}/${dataset_id}/sync_web`, undefined, { sync_type }, loading)
+}
+
+/**
+ * 向量化知识库
+ * @param 参数 dataset_id
+ */
+const putReEmbeddingDataset: (
+  dataset_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, loading) => {
+  return put(`${prefix}/${dataset_id}/re_embedding`, undefined, undefined, loading)
+}
+
+/**
+ * 导出知识库
+ * @param dataset_name 知识库名称
+ * @param dataset_id   知识库id
+ * @returns
+ */
+const exportDataset: (
+  dataset_name: string,
+  dataset_id: string,
+  loading?: Ref<boolean>
+) => Promise<any> = (dataset_name, dataset_id, loading) => {
+  return exportExcel(dataset_name + '.xlsx', `dataset/${dataset_id}/export`, undefined, loading)
+}
+/**
+ *导出Zip知识库
+ * @param dataset_name 知识库名称
+ * @param dataset_id   知识库id
+ * @param loading      加载器
+ * @returns
+ */
+const exportZipDataset: (
+  dataset_name: string,
+  dataset_id: string,
+  loading?: Ref<boolean>
+) => Promise<any> = (dataset_name, dataset_id, loading) => {
+  return exportFile(dataset_name + '.zip', `dataset/${dataset_id}/export_zip`, undefined, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getDatasetModel: (
+  dataset_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (dataset_id, loading) => {
+  return get(`${prefix}/${dataset_id}/model`, loading)
+}
+
+export default {
+  getDataset,
+  getAllDataset,
+  delDataset,
+  postDataset,
+  getDatasetDetail,
+  putDataset,
+  listUsableApplication,
+  getDatasetHitTest,
+  postWebDataset,
+  putSyncWebDataset,
+  putReEmbeddingDataset,
+  postQADataset,
+  exportDataset,
+  getDatasetModel,
+  exportZipDataset
+}
diff --git a/src/api/document.ts b/src/api/document.ts
new file mode 100644
index 0000000..307eb34
--- /dev/null
+++ b/src/api/document.ts
@@ -0,0 +1,398 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportExcel, exportFile } from '@/request/index'
+import type { Ref } from 'vue'
+import type { KeyValue } from '@/api/type/common'
+import type { pageRequest } from '@/api/type/common'
+
+const prefix = '/dataset'
+
+/**
+ * 分段预览（上传文档）
+ * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
+ */
+const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}/document/split`, data, undefined, undefined, 1000 * 60 * 60)
+}
+
+/**
+ * 分段标识列表
+ * @param loading 加载器
+ * @returns 分段标识列表
+ */
+const listSplitPattern: (
+  loading?: Ref<boolean>
+) => Promise<Result<Array<KeyValue<string, string>>>> = (loading) => {
+  return get(`${prefix}/document/split_pattern`, {}, loading)
+}
+
+/**
+ * 文档分页列表
+ * @param 参数  dataset_id,
+ * page {
+ "current_page": "string",
+ "page_size": "string",
+ }
+ * param {
+ "name": "string",
+ }
+ */
+
+const getDocument: (
+  dataset_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, page, param, loading) => {
+  return get(
+    `${prefix}/${dataset_id}/document/${page.current_page}/${page.page_size}`,
+    param,
+    loading
+  )
+}
+
+const getAllDocument: (dataset_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  dataset_id,
+  loading
+) => {
+  return get(`${prefix}/${dataset_id}/document`, undefined, loading)
+}
+
+/**
+ * 创建批量文档
+ * @param 参数
+ * {
+ "name": "string",
+ "paragraphs": [
+ {
+ "content": "string",
+ "title": "string",
+ "problem_list": [
+ {
+ "id": "string",
+ "content": "string"
+ }
+ ]
+ }
+ ]
+ }
+ */
+const postDocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/document/_bach`, data, {}, loading, 1000 * 60 * 5)
+}
+
+/**
+ * 修改文档
+ * @param 参数
+ * dataset_id, document_id,
+ * {
+ "name": "string",
+ "is_active": true,
+ "meta": {}
+ }
+ */
+const putDocument: (
+  dataset_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, data: any, loading) => {
+  return put(`${prefix}/${dataset_id}/document/${document_id}`, data, undefined, loading)
+}
+
+/**
+ * 删除文档
+ * @param 参数 dataset_id, document_id,
+ */
+const delDocument: (
+  dataset_id: string,
+  document_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, loading) => {
+  return del(`${prefix}/${dataset_id}/document/${document_id}`, loading)
+}
+/**
+ * 批量删除文档
+ * @param 参数 dataset_id,
+ */
+const delMulDocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return del(`${prefix}/${dataset_id}/document/_bach`, undefined, { id_list: data }, loading)
+}
+
+const batchRefresh: (
+  dataset_id: string,
+  data: any,
+  stateList: Array<string>,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, stateList, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/batch_refresh`,
+    { id_list: data, state_list: stateList },
+    undefined,
+    loading
+  )
+}
+/**
+ * 文档详情
+ * @param 参数 dataset_id
+ */
+const getDocumentDetail: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}`)
+}
+
+/**
+ * 刷新文档向量库
+ * @param 参数
+ * dataset_id, document_id,
+ */
+const putDocumentRefresh: (
+  dataset_id: string,
+  document_id: string,
+  state_list: Array<string>,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, state_list, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/refresh`,
+    { state_list },
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 同步web站点类型
+ * @param 参数
+ * dataset_id, document_id,
+ */
+const putDocumentSync: (
+  dataset_id: string,
+  document_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, loading) => {
+  return put(`${prefix}/${dataset_id}/document/${document_id}/sync`, undefined, undefined, loading)
+}
+
+/**
+ * 批量同步文档
+ * @param 参数 dataset_id,
+ */
+const delMulSyncDocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}/document/_bach`, { id_list: data }, undefined, loading)
+}
+
+/**
+ * 创建Web站点文档
+ * @param 参数
+ * {
+ "source_url_list": [
+ "string"
+ ],
+ "selector": "string"
+ }
+ }
+ */
+const postWebDocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/document/web`, data, undefined, loading)
+}
+
+/**
+ * 导入QA文档
+ * @param 参数
+ * file
+ }
+ */
+const postQADocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/document/qa`, data, undefined, loading)
+}
+
+/**
+ * 导入表格
+ * @param 参数
+ * file
+ */
+const postTableDocument: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/document/table`, data, undefined, loading)
+}
+
+/**
+ * 批量迁移文档
+ * @param 参数 dataset_id,target_dataset_id,
+ */
+const putMigrateMulDocument: (
+  dataset_id: string,
+  target_dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, target_dataset_id, data, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/migrate/${target_dataset_id}`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 批量修改命中方式
+ * @param dataset_id 知识库id
+ * @param data       {id_list:[],hit_handling_method:'directly_return|optimization'}
+ * @param loading
+ * @returns
+ */
+const batchEditHitHandling: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}/document/batch_hit_handling`, data, undefined, loading)
+}
+
+/**
+ * 获得QA模版
+ * @param 参数 fileName,type,
+ */
+const exportQATemplate: (fileName: string, type: string, loading?: Ref<boolean>) => void = (
+  fileName,
+  type,
+  loading
+) => {
+  return exportExcel(fileName, `${prefix}/document/template/export`, { type }, loading)
+}
+
+/**
+ * 获得table模版
+ * @param 参数 fileName,type,
+ */
+const exportTableTemplate: (fileName: string, type: string, loading?: Ref<boolean>) => void = (
+  fileName,
+  type,
+  loading
+) => {
+  return exportExcel(fileName, `${prefix}/document/table_template/export`, { type }, loading)
+}
+
+/**
+ * 导出文档
+ * @param document_name 文档名称
+ * @param dataset_id    数据集id
+ * @param document_id   文档id
+ * @param loading       加载器
+ * @returns
+ */
+const exportDocument: (
+  document_name: string,
+  dataset_id: string,
+  document_id: string,
+  loading?: Ref<boolean>
+) => Promise<any> = (document_name, dataset_id, document_id, loading) => {
+  return exportExcel(
+    document_name + '.xlsx',
+    `${prefix}/${dataset_id}/document/${document_id}/export`,
+    {},
+    loading
+  )
+}
+/**
+ * 导出文档
+ * @param document_name 文档名称
+ * @param dataset_id    数据集id
+ * @param document_id   文档id
+ * @param loading       加载器
+ * @returns
+ */
+const exportDocumentZip: (
+  document_name: string,
+  dataset_id: string,
+  document_id: string,
+  loading?: Ref<boolean>
+) => Promise<any> = (document_name, dataset_id, document_id, loading) => {
+  return exportFile(
+    document_name + '.zip',
+    `${prefix}/${dataset_id}/document/${document_id}/export_zip`,
+    {},
+    loading
+  )
+}
+const batchGenerateRelated: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}/document/batch_generate_related`, data, undefined, loading)
+}
+
+const cancelTask: (
+  dataset_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/cancel_task`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+const batchCancelTask: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return put(`${prefix}/${dataset_id}/document/cancel_task/_batch`, data, undefined, loading)
+}
+
+export default {
+  postSplitDocument,
+  getDocument,
+  getAllDocument,
+  postDocument,
+  putDocument,
+  delDocument,
+  delMulDocument,
+  getDocumentDetail,
+  listSplitPattern,
+  putDocumentRefresh,
+  putDocumentSync,
+  delMulSyncDocument,
+  postWebDocument,
+  putMigrateMulDocument,
+  batchEditHitHandling,
+  exportQATemplate,
+  exportTableTemplate,
+  postQADocument,
+  postTableDocument,
+  exportDocument,
+  batchRefresh,
+  batchGenerateRelated,
+  cancelTask,
+  exportDocumentZip,
+  batchCancelTask
+}
diff --git a/src/api/email-setting.ts b/src/api/email-setting.ts
new file mode 100644
index 0000000..9fc8bf5
--- /dev/null
+++ b/src/api/email-setting.ts
@@ -0,0 +1,38 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import { type Ref } from 'vue'
+
+const prefix = '/email_setting'
+/**
+ * 获取邮箱设置
+ */
+const getEmailSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}`, undefined, loading)
+}
+
+/**
+ * 邮箱测试
+ */
+const postTestEmail: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading)
+}
+
+/**
+ * 修改邮箱设置
+ */
+const putEmailSetting: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return put(`${prefix}`, data, undefined, loading)
+}
+
+export default {
+  getEmailSetting,
+  postTestEmail,
+  putEmailSetting
+}
diff --git a/src/api/function-lib.ts b/src/api/function-lib.ts
new file mode 100644
index 0000000..c6a8200
--- /dev/null
+++ b/src/api/function-lib.ts
@@ -0,0 +1,111 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import type { functionLibData } from '@/api/type/function-lib'
+import { type Ref } from 'vue'
+
+const prefix = '/function_lib'
+
+/**
+ * 获取函数列表
+ * param {
+          "name": "string",
+        }
+ */
+const getAllFunctionLib: (param?: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  param,
+  loading
+) => {
+  return get(`${prefix}`, param || {}, loading)
+}
+
+/**
+ * 获取分页函数列表
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ * param {
+          "name": "string",
+        }
+ */
+const getFunctionLib: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/${page.current_page}/${page.page_size}`, param, loading)
+}
+
+/**
+ * 创建函数
+ * @param 参数
+ */
+const postFunctionLib: (data: functionLibData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading)
+}
+
+/**
+ * 修改函数
+ * @param 参数 
+
+ */
+const putFunctionLib: (
+  function_lib_id: string,
+  data: functionLibData,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (function_lib_id, data, loading) => {
+  return put(`${prefix}/${function_lib_id}`, data, undefined, loading)
+}
+
+/**
+ * 调试函数
+ * @param 参数 
+
+ */
+const postFunctionLibDebug: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data: any,
+  loading
+) => {
+  return post(`${prefix}/debug`, data, undefined, loading)
+}
+
+/**
+ * 删除函数
+ * @param 参数 function_lib_id
+ */
+const delFunctionLib: (
+  function_lib_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (function_lib_id, loading) => {
+  return del(`${prefix}/${function_lib_id}`, undefined, {}, loading)
+}
+/**
+ * 获取函数详情
+ * @param function_lib_id 函数id
+ * @param loading 加载器
+ * @returns 函数详情
+ */
+const getFunctionLibById: (
+  function_lib_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (function_lib_id, loading) => {
+  return get(`${prefix}/${function_lib_id}`, undefined, loading)
+}
+const pylint: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (code, loading) => {
+  return post(`${prefix}/pylint`, { code }, {}, loading)
+}
+
+export default {
+  getFunctionLib,
+  postFunctionLib,
+  putFunctionLib,
+  postFunctionLibDebug,
+  getAllFunctionLib,
+  delFunctionLib,
+  getFunctionLibById,
+  pylint
+}
diff --git a/src/api/image.ts b/src/api/image.ts
new file mode 100644
index 0000000..425e8c6
--- /dev/null
+++ b/src/api/image.ts
@@ -0,0 +1,15 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+
+const prefix = '/image'
+/**
+ * 上传图片
+ * @param 参数  file:file
+ */
+const postImage: (data: any) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}`, data)
+}
+
+export default {
+  postImage
+}
diff --git a/src/api/license.ts b/src/api/license.ts
new file mode 100644
index 0000000..16e5acd
--- /dev/null
+++ b/src/api/license.ts
@@ -0,0 +1,24 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import { type Ref } from 'vue'
+
+const prefix = '/license'
+
+/**
+ * 获得license信息
+ */
+const getLicense: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/profile`, undefined, loading)
+}
+/**
+ * 更新license信息
+ * @param 参数  license_file:file
+ */
+const putLicense: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (data, loading) => {
+  return put(`${prefix}/profile`, data, undefined, loading)
+}
+
+export default {
+  getLicense,
+  putLicense
+}
diff --git a/src/api/log.ts b/src/api/log.ts
new file mode 100644
index 0000000..20973a3
--- /dev/null
+++ b/src/api/log.ts
@@ -0,0 +1,235 @@
+import { Result } from '@/request/Result'
+import { get, del, put, exportExcel, exportExcelPost, post } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import { type Ref } from 'vue'
+
+const prefix = '/application'
+/**
+ * 对话日志
+ * @param 参数
+ * application_id, history_day
+ * page  {
+              "current_page": "string",
+              "page_size": "string",
+            }
+* param  {
+              "history_day": "string",
+              "search": "string",
+            }
+ */
+const getChatLog: (
+  application_id: String,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, page, param, loading) => {
+  return get(
+    `${prefix}/${application_id}/chat/${page.current_page}/${page.page_size}`,
+    param,
+    loading
+  )
+}
+
+const exportChatLog: (
+  application_id: string,
+  application_name: string,
+  param: any,
+  data: any,
+  loading?: Ref<boolean>
+) => void = (application_id, application_name, param, data, loading) => {
+  exportExcelPost(
+    application_name + '.xlsx',
+    `${prefix}/${application_id}/chat/export`,
+    param,
+    data,
+    loading
+  )
+}
+
+/**
+ * 删除日志
+ * @param 参数 application_id, chat_id,
+ */
+const delChatLog: (
+  application_id: string,
+  chat_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (application_id, chat_id, loading) => {
+  return del(`${prefix}/${application_id}/chat/${chat_id}`, undefined, {}, loading)
+}
+
+/**
+ * 日志记录
+ * @param 参数
+ * application_id, chart_id
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ */
+const getChatRecordLog: (
+  application_id: String,
+  chart_id: String,
+  page: pageRequest,
+  loading?: Ref<boolean>,
+  order_asc?: boolean
+) => Promise<Result<any>> = (application_id, chart_id, page, loading, order_asc) => {
+  return get(
+    `${prefix}/${application_id}/chat/${chart_id}/chat_record/${page.current_page}/${page.page_size}`,
+    { order_asc: order_asc !== undefined ? order_asc : true },
+    loading
+  )
+}
+
+/**
+ * 修改日志内容
+ * @param 参数
+ * application_id, chart_id,  chart_record_id, dataset_id, document_id
+ * data {
+          "title": "string",
+          "content": "string",
+        }
+ */
+const putChatRecordLog: (
+  application_id: String,
+  chart_id: String,
+  chart_record_id: String,
+  dataset_id: String,
+  document_id: String,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (
+  application_id,
+  chart_id,
+  chart_record_id,
+  dataset_id,
+  document_id,
+  data,
+  loading
+) => {
+  return put(
+    `${prefix}/${application_id}/chat/${chart_id}/chat_record/${chart_record_id}/dataset/${dataset_id}/document_id/${document_id}/improve`,
+    data,
+    undefined,
+    loading
+  )
+}
+/**
+ * 对话记录提交至知识库
+ * @param data
+ * @param loading
+ * @param application_id
+ * @param dataset_id
+ */
+
+const postChatRecordLog: (
+  application_id: string,
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, dataset_id, data, loading) => {
+  return post(`${prefix}/${application_id}/dataset/${dataset_id}/improve`, data, undefined, loading)
+}
+/**
+ * 获取标注段落列表信息
+ * @param 参数
+ * application_id, chart_id,  chart_record_id
+ */
+const getMarkRecord: (
+  application_id: String,
+  chart_id: String,
+  chart_record_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, chart_id, chart_record_id, loading) => {
+  return get(
+    `${prefix}/${application_id}/chat/${chart_id}/chat_record/${chart_record_id}/improve`,
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 删除标注
+ * @param 参数
+ * application_id, chart_id,  chart_record_id, dataset_id, document_id,paragraph_id
+ */
+const delMarkRecord: (
+  application_id: String,
+  chart_id: String,
+  chart_record_id: String,
+  dataset_id: String,
+  document_id: String,
+  paragraph_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (
+  application_id,
+  chart_id,
+  chart_record_id,
+  dataset_id,
+  document_id,
+  paragraph_id,
+  loading
+) => {
+  return del(
+    `${prefix}/${application_id}/chat/${chart_id}/chat_record/${chart_record_id}/dataset/${dataset_id}/document_id/${document_id}/improve/${paragraph_id}`,
+    undefined,
+    {},
+    loading
+  )
+}
+
+/**
+ * 获取对话记录详情
+ * @param 参数
+ * application_id, chart_id,  chart_record_id
+ */
+const getRecordDetail: (
+  application_id: String,
+  chart_id: String,
+  chart_record_id: String,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, chart_id, chart_record_id, loading) => {
+  return get(
+    `${prefix}/${application_id}/chat/${chart_id}/chat_record/${chart_record_id}`,
+    undefined,
+    loading
+  )
+}
+
+const getChatLogClient: (
+  application_id: String,
+  page: pageRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (application_id, page, loading) => {
+  return get(
+    `${prefix}/${application_id}/chat/client/${page.current_page}/${page.page_size}`,
+    null,
+    loading
+  )
+}
+
+/**
+ * 客户端删除日志
+ * @param 参数 application_id, chat_id,
+ */
+const delChatClientLog: (
+  application_id: string,
+  chat_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (application_id, chat_id, loading) => {
+  return del(`${prefix}/${application_id}/chat/client/${chat_id}`, undefined, {}, loading)
+}
+
+export default {
+  getChatLog,
+  delChatLog,
+  getChatRecordLog,
+  putChatRecordLog,
+  getMarkRecord,
+  getRecordDetail,
+  delMarkRecord,
+  exportChatLog,
+  getChatLogClient,
+  delChatClientLog,
+  postChatRecordLog
+}
diff --git a/src/api/model.ts b/src/api/model.ts
new file mode 100644
index 0000000..5129dd0
--- /dev/null
+++ b/src/api/model.ts
@@ -0,0 +1,209 @@
+import { request } from './../request/index'
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import { type Ref } from 'vue'
+import type {
+  modelRequest,
+  Provider,
+  ListModelRequest,
+  Model,
+  BaseModel,
+  CreateModelRequest,
+  EditModelRequest
+} from '@/api/type/model'
+import type { FormField } from '@/components/dynamics-form/type'
+import type { KeyValue } from './type/common'
+const prefix = '/model'
+const prefix_provider = '/provider'
+
+/**
+ * 获得模型列表
+ * @params 参数 name, model_type, model_name
+ */
+const getModel: (
+  request?: ListModelRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<Model>>> = (data, loading) => {
+  return get(`${prefix}`, data, loading)
+}
+
+/**
+ * 获得供应商列表
+ */
+const getProvider: (loading?: Ref<boolean>) => Promise<Result<Array<Provider>>> = (loading) => {
+  return get(`${prefix_provider}`, {}, loading)
+}
+
+/**
+ * 获得供应商列表
+ */
+const getProviderByModelType: (model_type: string, loading?: Ref<boolean>) => Promise<Result<Array<Provider>>> = (model_type, loading) => {
+  return get(`${prefix_provider}`, {model_type}, loading)
+}
+
+/**
+ * 获取模型创建表单
+ * @param provider
+ * @param model_type
+ * @param model_name
+ * @param loading
+ * @returns
+ */
+const getModelCreateForm: (
+  provider: string,
+  model_type: string,
+  model_name: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<FormField>>> = (provider, model_type, model_name, loading) => {
+  return get(`${prefix_provider}/model_form`, { provider, model_type, model_name }, loading)
+}
+
+/**
+ * 获取模型参数表单
+ * @param model_id 模型id
+ * @param loading
+ * @returns
+ */
+const getModelParamsForm: (
+  model_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<FormField>>> = (model_id, loading) => {
+  return get(`model/${model_id}/model_params_form`, {}, loading)
+}
+/**
+ * 获取模型类型列表
+ * @param provider 供应商
+ * @param loading  加载器
+ * @returns 模型类型列表
+ */
+const listModelType: (
+  provider: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<KeyValue<string, string>>>> = (provider, loading?: Ref<boolean>) => {
+  return get(`${prefix_provider}/model_type_list`, { provider }, loading)
+}
+
+/**
+ * 获取基础模型列表
+ * @param provider
+ * @param model_type
+ * @param loading
+ * @returns
+ */
+const listBaseModel: (
+  provider: string,
+  model_type: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<BaseModel>>> = (provider, model_type, loading) => {
+  return get(`${prefix_provider}/model_list`, { provider, model_type }, loading)
+}
+
+const listBaseModelParamsForm: (
+  provider: string,
+  model_type: string,
+  model_name: string,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<BaseModel>>> = (provider, model_type, model_name, loading) => {
+  return get(`${prefix_provider}/model_params_form`, { provider, model_type, model_name}, loading)
+}
+
+/**
+ * 创建模型
+ * @param request 请求对象
+ * @param loading 加载器
+ * @returns
+ */
+const createModel: (
+  request: CreateModelRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<Model>> = (request, loading) => {
+  return post(`${prefix}`, request, {}, loading)
+}
+
+/**
+ * 修改模型
+ * @param request 請求對象
+ * @param loading 加載器
+ * @returns
+ */
+const updateModel: (
+  model_id: string,
+  request: EditModelRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<Model>> = (model_id, request, loading) => {
+  return put(`${prefix}/${model_id}`, request, {}, loading)
+}
+
+/**
+ * 修改模型参数配置
+ * @param request 請求對象
+ * @param loading 加載器
+ * @returns
+ */
+const updateModelParamsForm: (
+  model_id: string,
+  request: any[],
+  loading?: Ref<boolean>
+) => Promise<Result<Model>> = (model_id, request, loading) => {
+  return put(`${prefix}/${model_id}/model_params_form`, request, {}, loading)
+}
+
+/**
+ * 获取模型详情根据模型id 包括认证信息
+ * @param model_id 模型id
+ * @param loading  加载器
+ * @returns
+ */
+const getModelById: (model_id: string, loading?: Ref<boolean>) => Promise<Result<Model>> = (
+  model_id,
+  loading
+) => {
+  return get(`${prefix}/${model_id}`, {}, loading)
+}
+/**
+ * 获取模型信息不包括认证信息根据模型id
+ * @param model_id 模型id
+ * @param loading  加载器
+ * @returns
+ */
+const getModelMetaById: (model_id: string, loading?: Ref<boolean>) => Promise<Result<Model>> = (
+  model_id,
+  loading
+) => {
+  return get(`${prefix}/${model_id}/meta`, {}, loading)
+}
+/**
+ * 暂停下载
+ * @param model_id 模型id
+ * @param loading 加载器
+ * @returns
+ */
+const pauseDownload: (model_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  model_id,
+  loading
+) => {
+  return put(`${prefix}/${model_id}/pause_download`, undefined, {}, loading)
+}
+const deleteModel: (model_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  model_id,
+  loading
+) => {
+  return del(`${prefix}/${model_id}`, undefined, {}, loading)
+}
+export default {
+  getModel,
+  getProvider,
+  getModelCreateForm,
+  listModelType,
+  listBaseModel,
+  listBaseModelParamsForm,
+  createModel,
+  updateModel,
+  deleteModel,
+  getModelById,
+  getModelMetaById,
+  pauseDownload,
+  getModelParamsForm,
+  updateModelParamsForm,
+  getProviderByModelType
+}
diff --git a/src/api/paragraph.ts b/src/api/paragraph.ts
new file mode 100644
index 0000000..4a7d29b
--- /dev/null
+++ b/src/api/paragraph.ts
@@ -0,0 +1,256 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import type { Ref } from 'vue'
+const prefix = '/dataset'
+
+/**
+ * 段落列表
+ * @param 参数 dataset_id document_id
+ * page {
+              "current_page": "string",
+              "page_size": "string",
+            }
+ * param {
+          "title": "string",
+          "content": "string",
+        }
+ */
+const getParagraph: (
+  dataset_id: string,
+  document_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, page, param, loading) => {
+  return get(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${page.current_page}/${page.page_size}`,
+    param,
+    loading
+  )
+}
+
+/**
+ * 删除段落
+ * @param 参数 dataset_id, document_id, paragraph_id
+ */
+const delParagraph: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id, loading) => {
+  return del(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`,
+    undefined,
+    {},
+    loading
+  )
+}
+
+/**
+ * 批量删除段落
+ * @param 参数 dataset_id, document_id
+ */
+const delMulParagraph: (
+  dataset_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, data, loading) => {
+  return del(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/_batch`,
+    undefined,
+    { id_list: data },
+    loading
+  )
+}
+
+/**
+ * 创建段落
+ * @param 参数 
+ * dataset_id, document_id
+ * {
+  "content": "string",
+  "title": "string",
+  "is_active": true,
+  "problem_list": [
+    {
+      "id": "string",
+      "content": "string"
+    }
+  ]
+    }
+ */
+const postParagraph: (
+  dataset_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/document/${document_id}/paragraph`, data, undefined, loading)
+}
+
+/**
+ * 修改段落
+ * @param 参数 
+ * dataset_id, document_id, paragraph_id
+ * {
+  "content": "string",
+  "title": "string",
+  "is_active": true,
+  "problem_list": [
+    {
+      "id": "string",
+      "content": "string"
+    }
+  ]
+    }
+ */
+const putParagraph: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 批量迁移段落
+ * @param 参数 dataset_id,target_dataset_id,
+ */
+const putMigrateMulParagraph: (
+  dataset_id: string,
+  document_id: string,
+  target_dataset_id: string,
+  target_document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (
+  dataset_id,
+  document_id,
+  target_dataset_id,
+  target_document_id,
+  data,
+  loading
+) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/migrate/dataset/${target_dataset_id}/document/${target_document_id}`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+/**
+ * 问题列表
+ * @param 参数 dataset_id，document_id，paragraph_id
+ */
+const getProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id: string) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`)
+}
+
+/**
+ * 创建问题
+ * @param 参数 
+ * dataset_id, document_id, paragraph_id
+ * {
+      "id": "string",
+      content": "string"
+    }
+ */
+const postProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any, loading) => {
+  return post(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`,
+    data,
+    {},
+    loading
+  )
+}
+/**
+ *
+ * @param dataset_id 数据集id
+ * @param document_id 文档id
+ * @param paragraph_id 段落id
+ * @param problem_id 问题id
+ * @param loading 加载器
+ * @returns
+ */
+const associationProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, problem_id, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem/${problem_id}/association`,
+    {},
+    {},
+    loading
+  )
+}
+/**
+ * 解除关联问题
+ * @param 参数 dataset_id, document_id, paragraph_id,problem_id
+ */
+const disassociationProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id, problem_id, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem/${problem_id}/un_association`,
+    {},
+    {},
+    loading
+  )
+}
+
+const batchGenerateRelated: (
+  dataset_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/batch_generate_related`,
+    data,
+    undefined,
+    loading
+  )
+}
+
+
+export default {
+  getParagraph,
+  delParagraph,
+  putParagraph,
+  postParagraph,
+  getProblem,
+  postProblem,
+  disassociationProblem,
+  associationProblem,
+  delMulParagraph,
+  putMigrateMulParagraph,
+  batchGenerateRelated
+}
diff --git a/src/api/platform-source.ts b/src/api/platform-source.ts
new file mode 100644
index 0000000..defcc84
--- /dev/null
+++ b/src/api/platform-source.ts
@@ -0,0 +1,28 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import { type Ref } from 'vue'
+
+const prefix = '/platform'
+const getPlatformInfo: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/source`, undefined, loading)
+}
+
+const updateConfig: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}/source`, data, undefined, loading)
+}
+
+const validateConnection: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return put(`${prefix}/source`, data, undefined, loading)
+}
+export default {
+  getPlatformInfo,
+  updateConfig,
+  validateConnection
+}
diff --git a/src/api/problem.ts b/src/api/problem.ts
new file mode 100644
index 0000000..4625d6d
--- /dev/null
+++ b/src/api/problem.ts
@@ -0,0 +1,124 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { Ref } from 'vue'
+import type { KeyValue } from '@/api/type/common'
+import type { pageRequest } from '@/api/type/common'
+const prefix = '/dataset'
+
+/**
+ * 文档分页列表
+ * @param 参数  dataset_id,   
+ * page {
+              "current_page": "string",
+              "page_size": "string",
+            }
+* query {
+          "content": "string",
+        }
+ */
+
+const getProblems: (
+  dataset_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, page, param, loading) => {
+  return get(
+    `${prefix}/${dataset_id}/problem/${page.current_page}/${page.page_size}`,
+    param,
+    loading
+  )
+}
+
+/**
+ * 创建问题
+ * @param 参数 dataset_id
+ * data: array[string]
+ */
+const postProblems: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/problem`, data, undefined, loading)
+}
+
+/**
+ * 删除问题
+ * @param 参数 dataset_id, problem_id,
+ */
+const delProblems: (
+  dataset_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, problem_id, loading) => {
+  return del(`${prefix}/${dataset_id}/problem/${problem_id}`, loading)
+}
+
+/**
+ * 批量删除问题
+ * @param 参数 dataset_id,
+ */
+const delMulProblem: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return del(`${prefix}/${dataset_id}/problem/_batch`, undefined, data, loading)
+}
+
+/**
+ * 修改问题
+ * @param 参数 
+ * dataset_id, problem_id, 
+ * {
+      "content": "string",
+    }
+ */
+const putProblems: (
+  dataset_id: string,
+  problem_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, problem_id, data: any, loading) => {
+  return put(`${prefix}/${dataset_id}/problem/${problem_id}`, data, undefined, loading)
+}
+
+/**
+ * 问题详情
+ * @param 参数
+ * dataset_id, problem_id,
+ */
+const getDetailProblems: (
+  dataset_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (dataset_id, problem_id, loading) => {
+  return get(`${prefix}/${dataset_id}/problem/${problem_id}/paragraph`, undefined, loading)
+}
+
+/**
+ * 批量关联段落
+ * @param 参数 dataset_id,
+ * {
+      "problem_id_list": "Array",
+      "paragraph_list": "Array",
+    }
+ */
+const postMulAssociationProblem: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, data, loading) => {
+  return post(`${prefix}/${dataset_id}/problem/_batch`, data, undefined, loading)
+}
+
+export default {
+  getProblems,
+  postProblems,
+  delProblems,
+  putProblems,
+  getDetailProblems,
+  delMulProblem,
+  postMulAssociationProblem
+}
diff --git a/src/api/provider.ts b/src/api/provider.ts
new file mode 100644
index 0000000..2099658
--- /dev/null
+++ b/src/api/provider.ts
@@ -0,0 +1,12 @@
+import { Result } from '@/request/Result'
+import { get, post } from '@/request/index'
+import type { Ref } from 'vue'
+const trigger: (
+  provider: string,
+  method: string,
+  request_body: any,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any> | string>> = (provider, method, request_body, loading) => {
+  return post(`provider/${provider}/${method}`, {}, request_body, loading)
+}
+export default { trigger, get }
diff --git a/src/api/system-api-key.ts b/src/api/system-api-key.ts
new file mode 100644
index 0000000..9d66bc7
--- /dev/null
+++ b/src/api/system-api-key.ts
@@ -0,0 +1,58 @@
+import {Result} from '@/request/Result'
+import {get, post, del, put} from '@/request/index'
+
+import {type Ref} from 'vue'
+
+const prefix = '/system/api_key'
+
+/**
+ * API_KEY列表
+ */
+const getAPIKey: (loading?: Ref<boolean>) => Promise<Result<any>> = () => {
+    return get(`${prefix}/`)
+}
+
+/**
+ * 新增API_KEY
+ */
+const postAPIKey: (loading?: Ref<boolean>) => Promise<Result<any>> = (
+    loading
+) => {
+    return post(`${prefix}/`, {}, undefined, loading)
+}
+
+/**
+ * 删除API_KEY
+ * @param 参数 application_id api_key_id
+ */
+const delAPIKey: (
+    api_key_id: String,
+    loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (api_key_id, loading) => {
+    return del(`${prefix}/${api_key_id}/`, undefined, undefined, loading)
+}
+
+/**
+ * 修改API_KEY
+ * data {
+ *   is_active: boolean
+ * }
+ * @param api_key_id
+ * @param data
+ * @param loading
+ */
+const putAPIKey: (
+    api_key_id: String,
+    data: any,
+    loading?: Ref<boolean>
+) => Promise<Result<any>> = (api_key_id, data, loading) => {
+    return put(`${prefix}/${api_key_id}/`, data, undefined, loading)
+}
+
+
+export default {
+    getAPIKey,
+    postAPIKey,
+    delAPIKey,
+    putAPIKey
+}
diff --git a/src/api/team.ts b/src/api/team.ts
new file mode 100644
index 0000000..82e8f98
--- /dev/null
+++ b/src/api/team.ts
@@ -0,0 +1,67 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { TeamMember } from '@/api/type/team'
+
+const prefix = '/team/member'
+
+/**
+ * 获取团队成员列表
+ */
+const getTeamMember: () => Promise<Result<TeamMember[]>> = () => {
+  return get(`${prefix}`)
+}
+
+/**
+ * 添加成员
+ * @param 参数 []
+ */
+const postCreatTeamMember: (data: Array<String>) => Promise<Result<boolean>> = (data) => {
+  return post(`${prefix}/_batch`, data)
+}
+
+/**
+ * 删除成员
+ * @param 参数 member_id
+ */
+const delTeamMember: (member_id: String) => Promise<Result<boolean>> = (member_id) => {
+  return del(`${prefix}/${member_id}`)
+}
+
+/**
+ * 获取成员权限
+ * @param 参数 member_id
+ */
+const getMemberPermissions: (member_id: String) => Promise<Result<any>> = (member_id) => {
+  return get(`${prefix}/${member_id}`)
+}
+
+/**
+ * 获取成员权限
+ * @param 参数 member_id
+ * @param 参数 {
+          "team_member_permission_list": [
+            {
+              "target_id": "string",
+              "type": "string",
+              "operate": {
+                "USE": true,
+                "MANAGE": true
+              }
+            }
+          ]
+        }
+ */
+const putMemberPermissions: (member_id: String, body: any) => Promise<Result<any>> = (
+  member_id,
+  body
+) => {
+  return put(`${prefix}/${member_id}`, body)
+}
+
+export default {
+  getTeamMember,
+  postCreatTeamMember,
+  delTeamMember,
+  getMemberPermissions,
+  putMemberPermissions
+}
diff --git a/src/api/theme.ts b/src/api/theme.ts
new file mode 100644
index 0000000..6e696e5
--- /dev/null
+++ b/src/api/theme.ts
@@ -0,0 +1,35 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { Ref } from 'vue'
+const prefix = '/display'
+
+/**
+ * 查看外观设置
+ */
+const getThemeInfo: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/info`, undefined, loading)
+}
+
+/**
+ * 更新外观设置
+ * @param 参数
+ * * formData {
+ *   theme
+ *   icon
+ *   loginLogo
+ *   loginImage
+ *   title
+ *   slogan
+ * }
+ */
+const postThemeInfo: (data: any, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}/update`, data, undefined, loading)
+}
+
+export default {
+  getThemeInfo,
+  postThemeInfo
+}
diff --git a/src/api/type/application.ts b/src/api/type/application.ts
new file mode 100644
index 0000000..f075ab7
--- /dev/null
+++ b/src/api/type/application.ts
@@ -0,0 +1,420 @@
+import { type Dict } from '@/api/type/common'
+import { type Ref } from 'vue'
+interface ApplicationFormType {
+  name?: string
+  desc?: string
+  model_id?: string
+  dialogue_number?: number
+  prologue?: string
+  dataset_id_list?: string[]
+  dataset_setting?: any
+  model_setting?: any
+  problem_optimization?: boolean
+  problem_optimization_prompt?: string
+  icon?: string | undefined
+  type?: string
+  work_flow?: any
+  model_params_setting?: any
+  tts_model_params_setting?: any
+  stt_model_id?: string
+  tts_model_id?: string
+  stt_model_enable?: boolean
+  tts_model_enable?: boolean
+  tts_type?: string
+}
+interface Chunk {
+  real_node_id: string
+  chat_id: string
+  chat_record_id: string
+  content: string
+  node_id: string
+  up_node_id: string
+  is_end: boolean
+  node_is_end: boolean
+  node_type: string
+  view_type: string
+  runtime_node_id: string
+  child_node: any
+}
+interface chatType {
+  id: string
+  problem_text: string
+  answer_text: string
+  buffer: Array<String>
+  answer_text_list: Array<{
+    content: string
+    chat_record_id?: string
+    runtime_node_id?: string
+    child_node?: any
+  }>
+  /**
+   * 是否写入结束
+   */
+  write_ed?: boolean
+  /**
+   * 是否暂停
+   */
+  is_stop?: boolean
+  record_id: string
+  chat_id: string
+  vote_status: string
+  status?: number
+  execution_details: any[]
+  upload_meta?: {
+    document_list: Array<any>
+    image_list: Array<any>
+    audio_list: Array<any>
+  }
+}
+
+interface Node {
+  buffer: Array<string>
+  node_id: string
+  up_node_id: string
+  node_type: string
+  view_type: string
+  index: number
+  is_end: boolean
+}
+interface WriteNodeInfo {
+  current_node: any
+  answer_text_list_index: number
+  current_up_node?: any
+  divider_content?: Array<string>
+}
+export class ChatRecordManage {
+  id?: any
+  ms: number
+  chat: chatType
+  is_close?: boolean
+  write_ed?: boolean
+  is_stop?: boolean
+  loading?: Ref<boolean>
+  node_list: Array<any>
+  write_node_info?: WriteNodeInfo
+  constructor(chat: chatType, ms?: number, loading?: Ref<boolean>) {
+    this.ms = ms ? ms : 10
+    this.chat = chat
+    this.loading = loading
+    this.is_stop = false
+    this.is_close = false
+    this.write_ed = false
+    this.node_list = []
+  }
+  append_answer(
+    chunk_answer: string,
+    index?: number,
+    chat_record_id?: string,
+    runtime_node_id?: string,
+    child_node?: any
+  ) {
+    const set_index = index != undefined ? index : this.chat.answer_text_list.length - 1
+    const content = this.chat.answer_text_list[set_index]
+      ? this.chat.answer_text_list[set_index].content + chunk_answer
+      : chunk_answer
+    this.chat.answer_text_list[set_index] = {
+      content: content,
+      chat_record_id,
+      runtime_node_id,
+      child_node
+    }
+
+    this.chat.answer_text = this.chat.answer_text + chunk_answer
+  }
+  get_current_up_node(run_node: any) {
+    const index = this.node_list.findIndex((item) => item == run_node)
+    if (index > 0) {
+      const n = this.node_list[index - 1]
+      return n
+    }
+    return undefined
+  }
+  get_run_node() {
+    if (
+      this.write_node_info &&
+      (this.write_node_info.current_node.buffer.length > 0 ||
+        !this.write_node_info.current_node.is_end)
+    ) {
+      return this.write_node_info
+    }
+    const run_node = this.node_list.filter((item) => item.buffer.length > 0 || !item.is_end)[0]
+
+    if (run_node) {
+      const index = this.node_list.indexOf(run_node)
+      let current_up_node = undefined
+      if (index > 0) {
+        current_up_node = this.get_current_up_node(run_node)
+      }
+      let answer_text_list_index = 0
+      if (
+        current_up_node == undefined ||
+        run_node.view_type == 'single_view' ||
+        current_up_node.view_type == 'single_view'
+      ) {
+        const none_index = this.findIndex(
+          this.chat.answer_text_list,
+          (item) => item.content == '',
+          'index'
+        )
+        if (none_index > -1) {
+          answer_text_list_index = none_index
+        } else {
+          answer_text_list_index = this.chat.answer_text_list.length
+        }
+      } else {
+        const none_index = this.findIndex(
+          this.chat.answer_text_list,
+          (item) => item.content === '',
+          'index'
+        )
+        if (none_index > -1) {
+          answer_text_list_index = none_index
+        } else {
+          answer_text_list_index = this.chat.answer_text_list.length - 1
+        }
+      }
+
+      this.write_node_info = {
+        current_node: run_node,
+        divider_content: ['\n\n'],
+        current_up_node: current_up_node,
+        answer_text_list_index: answer_text_list_index
+      }
+      return this.write_node_info
+    }
+    return undefined
+  }
+  findIndex<T>(array: Array<T>, find: (item: T) => boolean, type: 'last' | 'index') {
+    let set_index = -1
+    for (let index = 0; index < array.length; index++) {
+      const element = array[index]
+      if (find(element)) {
+        set_index = index
+        if (type == 'index') {
+          break
+        }
+      }
+    }
+    return set_index
+  }
+  closeInterval() {
+    this.chat.write_ed = true
+    this.write_ed = true
+    if (this.loading) {
+      this.loading.value = false
+    }
+    if (this.id) {
+      clearInterval(this.id)
+    }
+    const last_index = this.findIndex(
+      this.chat.answer_text_list,
+      (item) => item.content == '',
+      'last'
+    )
+    if (last_index > 0) {
+      this.chat.answer_text_list.splice(last_index, 1)
+    }
+  }
+  write() {
+    this.chat.is_stop = false
+    this.is_stop = false
+    this.is_close = false
+    this.write_ed = false
+    this.chat.write_ed = false
+    if (this.loading) {
+      this.loading.value = true
+    }
+    this.id = setInterval(() => {
+      const node_info = this.get_run_node()
+      if (node_info == undefined) {
+        if (this.is_close) {
+          this.closeInterval()
+        }
+        return
+      }
+      const { current_node, answer_text_list_index, divider_content } = node_info
+      if (current_node.buffer.length > 20) {
+        const context = current_node.is_end
+          ? current_node.buffer.splice(0)
+          : current_node.buffer.splice(
+              0,
+              current_node.is_end ? undefined : current_node.buffer.length - 20
+            )
+        this.append_answer(
+          (divider_content ? divider_content.splice(0).join('') : '') + context.join(''),
+          answer_text_list_index,
+          current_node.chat_record_id,
+          current_node.runtime_node_id,
+          current_node.child_node
+        )
+      } else if (this.is_close) {
+        while (true) {
+          const node_info = this.get_run_node()
+
+          if (node_info == undefined) {
+            break
+          }
+          this.append_answer(
+            (node_info.divider_content ? node_info.divider_content.splice(0).join('') : '') +
+              node_info.current_node.buffer.splice(0).join(''),
+            node_info.answer_text_list_index,
+            node_info.current_node.chat_record_id,
+            node_info.current_node.runtime_node_id,
+            node_info.current_node.child_node
+          )
+          if (node_info.current_node.buffer.length == 0) {
+            node_info.current_node.is_end = true
+          }
+        }
+        this.closeInterval()
+      } else {
+        const s = current_node.buffer.shift()
+        if (s !== undefined) {
+          this.append_answer(
+            (divider_content ? divider_content.splice(0).join('') : '') + s,
+            answer_text_list_index,
+            current_node.chat_record_id,
+            current_node.runtime_node_id,
+            current_node.child_node
+          )
+        }
+      }
+    }, this.ms)
+  }
+  stop() {
+    clearInterval(this.id)
+    this.is_stop = true
+    this.chat.is_stop = true
+    if (this.loading) {
+      this.loading.value = false
+    }
+  }
+  close() {
+    this.is_close = true
+  }
+  open() {
+    this.is_close = false
+    this.is_stop = false
+  }
+  appendChunk(chunk: Chunk) {
+    let n = this.node_list.find((item) => item.real_node_id == chunk.real_node_id)
+    if (n) {
+      n.buffer.push(...chunk.content)
+      n.content += chunk.content
+    } else {
+      n = {
+        buffer: [...chunk.content],
+        content: chunk.content,
+        real_node_id: chunk.real_node_id,
+        node_id: chunk.node_id,
+        chat_record_id: chunk.chat_record_id,
+        up_node_id: chunk.up_node_id,
+        runtime_node_id: chunk.runtime_node_id,
+        child_node: chunk.child_node,
+        node_type: chunk.node_type,
+        index: this.node_list.length,
+        view_type: chunk.view_type,
+        is_end: false
+      }
+      this.node_list.push(n)
+    }
+    if (chunk.node_is_end) {
+      n['is_end'] = true
+    }
+  }
+  append(answer_text_block: string) {
+    let set_index = this.findIndex(
+      this.chat.answer_text_list,
+      (item) => item.content == '',
+      'index'
+    )
+    this.chat.answer_text_list[set_index] = { content: answer_text_block }
+  }
+}
+
+export class ChatManagement {
+  static chatMessageContainer: Dict<ChatRecordManage> = {}
+
+  static addChatRecord(chat: chatType, ms: number, loading?: Ref<boolean>) {
+    this.chatMessageContainer[chat.id] = new ChatRecordManage(chat, ms, loading)
+  }
+  static appendChunk(chatRecordId: string, chunk: Chunk) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.appendChunk(chunk)
+    }
+  }
+  static append(chatRecordId: string, content: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.append(content)
+    }
+  }
+  static updateStatus(chatRecordId: string, code: number) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.chat.status = code
+    }
+  }
+  /**
+   * 持续从缓存区 写出数据
+   * @param chatRecordId 对话记录id
+   */
+  static write(chatRecordId: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.write()
+    }
+  }
+  /**
+   * 等待所有数据输出完毕后 才会关闭流
+   * @param chatRecordId 对话记录id
+   * @returns boolean
+   */
+  static close(chatRecordId: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.close()
+    }
+  }
+  /**
+   * 停止输出 立即关闭定时任务输出
+   * @param chatRecordId 对话记录id
+   * @returns boolean
+   */
+  static stop(chatRecordId: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    if (chatRecord) {
+      chatRecord.stop()
+    }
+  }
+  /**
+   * 判断是否输出完成
+   * @param chatRecordId 对话记录id
+   * @returns boolean
+   */
+  static isClose(chatRecordId: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    return chatRecord ? chatRecord.is_close && chatRecord.write_ed : false
+  }
+  /**
+   * 判断是否停止输出
+   * @param chatRecordId 对话记录id
+   * @returns
+   */
+  static isStop(chatRecordId: string) {
+    const chatRecord = this.chatMessageContainer[chatRecordId]
+    return chatRecord ? chatRecord.is_stop : false
+  }
+  /**
+   * 清除无用数据 也就是被close掉的和stop的数据
+   */
+  static clean() {
+    for (const key in Object.keys(this.chatMessageContainer)) {
+      if (this.chatMessageContainer[key].is_close) {
+        delete this.chatMessageContainer[key]
+      }
+    }
+  }
+}
+export type { ApplicationFormType, chatType }
diff --git a/src/api/type/common.ts b/src/api/type/common.ts
new file mode 100644
index 0000000..1912b77
--- /dev/null
+++ b/src/api/type/common.ts
@@ -0,0 +1,14 @@
+interface KeyValue<K, V> {
+  key: K
+  value: V
+}
+interface Dict<V> {
+  [propName: string]: V
+}
+
+interface pageRequest {
+  current_page: number
+  page_size: number
+}
+
+export type { KeyValue, Dict, pageRequest }
diff --git a/src/api/type/dataset.ts b/src/api/type/dataset.ts
new file mode 100644
index 0000000..a30c5c9
--- /dev/null
+++ b/src/api/type/dataset.ts
@@ -0,0 +1,9 @@
+interface datasetData {
+  name: String
+  desc: String
+  documents?: Array<any>
+  type?: String
+  embedding_mode_id?: String
+}
+
+export type { datasetData }
diff --git a/src/api/type/function-lib.ts b/src/api/type/function-lib.ts
new file mode 100644
index 0000000..2c5efe2
--- /dev/null
+++ b/src/api/type/function-lib.ts
@@ -0,0 +1,11 @@
+interface functionLibData {
+  id?: String
+  name?: String
+  desc?: String
+  code?: String
+  permission_type?: 'PRIVATE' | 'PUBLIC'
+  input_field_list?: Array<any>
+  is_active?: Boolean
+}
+
+export type { functionLibData }
diff --git a/src/api/type/model.ts b/src/api/type/model.ts
new file mode 100644
index 0000000..6672920
--- /dev/null
+++ b/src/api/type/model.ts
@@ -0,0 +1,148 @@
+import { store } from '@/stores'
+import type { Dict } from './common'
+interface modelRequest {
+  name: string
+  model_type: string
+  model_name: string
+}
+
+interface Provider {
+  /**
+   * 供应商代号
+   */
+  provider: string
+  /**
+   * 供应商名称
+   */
+  name: string
+  /**
+   * 供应商icon
+   */
+  icon: string
+}
+
+interface ListModelRequest {
+  /**
+   * 模型名称
+   */
+  name?: string
+  /**
+   * 模型类型
+   */
+  model_type?: string
+  /**
+   * 基础模型名称
+   */
+  model_name?: string
+  /**
+   * 供应商
+   */
+  provider?: string
+}
+
+interface Model {
+  /**
+   * 主键id
+   */
+  id: string
+  /**
+   * 模型名
+   */
+  name: string
+  /**
+   * 模型类型
+   */
+  model_type: string
+  user_id: string
+  username: string
+  permission_type: 'PUBLIC' | 'PRIVATE'
+  /**
+   * 基础模型
+   */
+  model_name: string
+  /**
+   * 认证信息
+   */
+  credential: any
+  /**
+   * 供应商
+   */
+  provider: string
+  /**
+   * 状态
+   */
+  status: 'SUCCESS' | 'DOWNLOAD' | 'ERROR' | 'PAUSE_DOWNLOAD'
+  /**
+   * 元数据
+   */
+  meta: Dict<any>
+  /**
+   * 模型参数配置
+   */
+  model_params_form: Dict<any>[]
+}
+interface CreateModelRequest {
+  /**
+   * 模型名
+   */
+  name: string
+  /**
+   * 模型类型
+   */
+  model_type: string
+  /**
+   * 基础模型
+   */
+  model_name: string
+  /**
+   * 认证信息
+   */
+  credential: any
+  /**
+   * 供应商
+   */
+  provider: string
+}
+
+interface EditModelRequest {
+  /**
+   * 模型名
+   */
+  name: string
+  /**
+   * 模型类型
+   */
+  model_type: string
+  /**
+   * 基础模型
+   */
+  model_name: string
+  /**
+   * 认证信息
+   */
+  credential: any
+}
+
+interface BaseModel {
+  /**
+   * 基础模型名称
+   */
+  name: string
+  /**
+   * 基础模型描述
+   */
+  desc: string
+  /**
+   * 基础模型类型
+   */
+  model_type: string
+}
+export type {
+  modelRequest,
+  Provider,
+  ListModelRequest,
+  Model,
+  BaseModel,
+  CreateModelRequest,
+  EditModelRequest
+}
diff --git a/src/api/type/team.ts b/src/api/type/team.ts
new file mode 100644
index 0000000..9e17a84
--- /dev/null
+++ b/src/api/type/team.ts
@@ -0,0 +1,13 @@
+interface TeamMember {
+  id: string
+  username: string
+  email: string
+  team_id: string
+  /**
+   * 类型：type：manage 所有者；
+   */
+  type: string
+  user_id: string
+}
+
+export type { TeamMember }
diff --git a/src/api/type/user.ts b/src/api/type/user.ts
new file mode 100644
index 0000000..a91a40e
--- /dev/null
+++ b/src/api/type/user.ts
@@ -0,0 +1,120 @@
+interface User {
+  /**
+   * 用户id
+   */
+  id: string
+  /**
+   * 用户名
+   */
+  username: string
+  /**
+   * 邮箱
+   */
+  email: string
+  /**
+   * 用户角色
+   */
+  role: string
+  /**
+   * 用户权限
+   */
+  permissions: Array<string>
+  /**
+   * 是否需要修改密码
+   */
+  is_edit_password?: boolean
+  IS_XPACK?: boolean
+  XPACK_LICENSE_IS_VALID?: boolean
+}
+
+interface LoginRequest {
+  /**
+   * 用户名
+   */
+  username: string
+  /**
+   * 密码
+   */
+  password: string
+}
+
+interface RegisterRequest {
+  /**
+   * 用户名
+   */
+  username: string
+  /**
+   * 密码
+   */
+  password: string
+  /**
+   * 确定密码
+   */
+  re_password: string
+  /**
+   * 邮箱
+   */
+  email: string
+  /**
+   * 验证码
+   */
+  code: string
+}
+
+interface CheckCodeRequest {
+  /**
+   * 邮箱
+   */
+  email: string
+  /**
+   *验证码
+   */
+  code: string
+  /**
+   * 类型
+   */
+  type: 'register' | 'reset_password'
+}
+
+interface ResetCurrentUserPasswordRequest {
+  /**
+   * 验证码
+   */
+  code: string
+  /**
+   *密码
+   */
+  password: string
+  /**
+   * 确认密码
+   */
+  re_password: string
+}
+
+interface ResetPasswordRequest {
+  /**
+   * 邮箱
+   */
+  email?: string
+  /**
+   * 验证码
+   */
+  code?: string
+  /**
+   * 密码
+   */
+  password: string
+  /**
+   * 确认密码
+   */
+  re_password: string
+}
+
+export type {
+  LoginRequest,
+  RegisterRequest,
+  CheckCodeRequest,
+  ResetPasswordRequest,
+  User,
+  ResetCurrentUserPasswordRequest
+}
diff --git a/src/api/user-manage.ts b/src/api/user-manage.ts
new file mode 100644
index 0000000..ceed082
--- /dev/null
+++ b/src/api/user-manage.ts
@@ -0,0 +1,77 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import { type Ref } from 'vue'
+
+const prefix = '/user_manage'
+/**
+ * 用户分页列表
+ * @param 参数 
+ * page  {
+              "current_page": "string",
+              "page_size": "string",
+            }
+ * @query 参数 
+   email_or_username: string
+ */
+const getUserManage: (
+  page: pageRequest,
+  email_or_username: string,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (page, email_or_username, loading) => {
+  return get(
+    `${prefix}/${page.current_page}/${page.page_size}`,
+    email_or_username ? { email_or_username } : undefined,
+    loading
+  )
+}
+
+/**
+ * 删除用户
+ * @param 参数 user_id,
+ */
+const delUserManage: (user_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  user_id,
+  loading
+) => {
+  return del(`${prefix}/${user_id}`, undefined, {}, loading)
+}
+
+/**
+ * 创建用户
+ */
+const postUserManage: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading)
+}
+
+/**
+ * 编辑用户
+ */
+const putUserManage: (
+  user_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (user_id, data, loading) => {
+  return put(`${prefix}/${user_id}`, data, undefined, loading)
+}
+/**
+ * 修改用户密码
+ */
+const putUserManagePassword: (
+  user_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (user_id, data, loading) => {
+  return put(`${prefix}/${user_id}/re_password`, data, undefined, loading)
+}
+
+export default {
+  getUserManage,
+  delUserManage,
+  postUserManage,
+  putUserManage,
+  putUserManagePassword
+}
diff --git a/src/api/user.ts b/src/api/user.ts
new file mode 100644
index 0000000..b0aca1e
--- /dev/null
+++ b/src/api/user.ts
@@ -0,0 +1,196 @@
+import { Result } from '@/request/Result'
+import { get, post } from '@/request/index'
+import type {
+  LoginRequest,
+  RegisterRequest,
+  CheckCodeRequest,
+  ResetPasswordRequest,
+  User,
+  ResetCurrentUserPasswordRequest
+} from '@/api/type/user'
+import type { Ref } from 'vue'
+
+/**
+ * 登录
+ * @param auth_type
+ * @param request 登录接口请求表单
+ * @param loading 接口加载器
+ * @returns 认证数据
+ */
+const login: (
+  auth_type: string,
+  request: LoginRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<string>> = (auth_type, request, loading) => {
+  if (auth_type !== '') {
+    return post(`/${auth_type}/login`, request, undefined, loading)
+  }
+  return post('/user/login', request, undefined, loading)
+}
+/**
+ * 登出
+ * @param loading 接口加载器
+ * @returns
+ */
+const logout: (loading?: Ref<boolean>) => Promise<Result<boolean>> = (loading) => {
+  return post('/user/logout', undefined, undefined, loading)
+}
+
+/**
+ * 注册用户
+ * @param request 注册请求对象
+ * @param loading 接口加载器
+ * @returns
+ */
+const register: (request: RegisterRequest, loading?: Ref<boolean>) => Promise<Result<string>> = (
+  request,
+  loading
+) => {
+  return post('/user/register', request, undefined, loading)
+}
+
+/**
+ * 校验验证码
+ * @param request 请求对象
+ * @param loading 接口加载器
+ * @returns
+ */
+const checkCode: (request: CheckCodeRequest, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  request,
+  loading
+) => {
+  return post('/user/check_code', request, undefined, loading)
+}
+
+/**
+ * 发送邮件
+ * @param email  邮件地址
+ * @param loading 接口加载器
+ * @returns
+ */
+const sendEmit: (
+  email: string,
+  type: 'register' | 'reset_password',
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (email, type, loading) => {
+  return post('/user/send_email', { email, type }, undefined, loading)
+}
+/**
+ * 发送邮件到当前用户
+ * @param loading  发送验证码到当前用户
+ * @returns
+ */
+const sendEmailToCurrent: (loading?: Ref<boolean>) => Promise<Result<boolean>> = (loading) => {
+  return post('/user/current/send_email', undefined, undefined, loading)
+}
+/**
+ * 修改当前用户密码
+ * @param request 请求对象
+ * @param loading 加载器
+ * @returns
+ */
+const resetCurrentUserPassword: (
+  request: ResetCurrentUserPasswordRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (request, loading) => {
+  return post('/user/current/reset_password', request, undefined, loading)
+}
+/**
+ * 获取用户基本信息
+ * @param loading 接口加载器
+ * @returns 用户基本信息
+ */
+const profile: (loading?: Ref<boolean>) => Promise<Result<User>> = (loading) => {
+  return get('/user', undefined, loading)
+}
+
+/**
+ * 重置密码
+ * @param request 重置密码请求参数
+ * @param loading 接口加载器
+ * @returns
+ */
+const resetPassword: (
+  request: ResetPasswordRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (request, loading) => {
+  return post('/user/re_password', request, undefined, loading)
+}
+
+/**
+ * 添加团队需要查询用户列表
+ * @param loading 接口加载器
+ * email_or_username
+ */
+const getUserList: (email_or_username: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  email_or_username,
+  loading
+) => {
+  return get('/user/list', { email_or_username }, loading)
+}
+
+/**
+ * 获取profile
+ */
+const getProfile: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get('/profile', undefined, loading)
+}
+
+/**
+ * 获取校验
+ * @param valid_type 校验类型: application|dataset|user
+ * @param valid_count 校验数量: 5 | 50 | 2
+ */
+const getValid: (
+  valid_type: string,
+  valid_count: number,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (valid_type, valid_count, loading) => {
+  return get(`/valid/${valid_type}/${valid_count}`, undefined, loading)
+}
+/**
+ * 获取登录方式
+ */
+const getAuthType: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get('auth/types', undefined, loading)
+}
+
+/**
+ * 获取二维码类型
+ */
+const getQrType: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get('qr_type', undefined, loading)
+}
+
+const getDingCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  code,
+  loading
+) => {
+  return get('dingtalk', { code }, loading)
+}
+
+const getWecomCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  code,
+  loading
+) => {
+  return get('wecom', { code }, loading)
+}
+
+export default {
+  login,
+  register,
+  sendEmit,
+  checkCode,
+  profile,
+  resetPassword,
+  sendEmailToCurrent,
+  resetCurrentUserPassword,
+  logout,
+  getUserList,
+  getProfile,
+  getValid,
+  getAuthType,
+  getDingCallback,
+  getQrType,
+  getWecomCallback
+}
diff --git a/src/assets/404.png b/src/assets/404.png
new file mode 100644
index 0000000..e6ed7d3
Binary files /dev/null and b/src/assets/404.png differ
diff --git a/src/assets/assets.zip b/src/assets/assets.zip
new file mode 100644
index 0000000..da78451
Binary files /dev/null and b/src/assets/assets.zip differ
diff --git a/src/assets/csv-icon.svg b/src/assets/csv-icon.svg
new file mode 100644
index 0000000..85147cc
--- /dev/null
+++ b/src/assets/csv-icon.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#34C724"/>
+<path d="M9.27052 14.1558H10.1825C10.1545 13.9078 10.0865 13.6878 9.97852 13.4958C9.87052 13.3038 9.73252 13.1438 9.56452 13.0158C9.40052 12.8838 9.21252 12.7838 9.00052 12.7158C8.79252 12.6478 8.57052 12.6138 8.33452 12.6138C8.00652 12.6138 7.71052 12.6718 7.44652 12.7878C7.18652 12.9038 6.96652 13.0638 6.78652 13.2678C6.60652 13.4718 6.46852 13.7118 6.37252 13.9878C6.27652 14.2598 6.22852 14.5558 6.22852 14.8758C6.22852 15.1878 6.27652 15.4798 6.37252 15.7518C6.46852 16.0198 6.60652 16.2538 6.78652 16.4538C6.96652 16.6538 7.18652 16.8118 7.44652 16.9278C7.71052 17.0398 8.00652 17.0958 8.33452 17.0958C8.59852 17.0958 8.84052 17.0558 9.06052 16.9758C9.28052 16.8958 9.47252 16.7798 9.63652 16.6278C9.80052 16.4758 9.93252 16.2918 10.0325 16.0758C10.1325 15.8598 10.1945 15.6178 10.2185 15.3498H9.30652C9.27052 15.6378 9.17052 15.8698 9.00652 16.0458C8.84652 16.2218 8.62252 16.3098 8.33452 16.3098C8.12252 16.3098 7.94252 16.2698 7.79452 16.1898C7.64652 16.1058 7.52652 15.9958 7.43452 15.8598C7.34252 15.7238 7.27452 15.5718 7.23052 15.4038C7.19052 15.2318 7.17052 15.0558 7.17052 14.8758C7.17052 14.6878 7.19052 14.5058 7.23052 14.3298C7.27452 14.1538 7.34252 13.9978 7.43452 13.8618C7.52652 13.7218 7.64652 13.6118 7.79452 13.5318C7.94252 13.4478 8.12252 13.4058 8.33452 13.4058C8.45052 13.4058 8.56052 13.4258 8.66452 13.4658C8.77252 13.5018 8.86852 13.5538 8.95252 13.6218C9.03652 13.6898 9.10652 13.7698 9.16252 13.8618C9.21852 13.9498 9.25452 14.0478 9.27052 14.1558Z" fill="white"/>
+<path d="M11.5038 15.5778H10.5918C10.5878 15.8418 10.6358 16.0698 10.7358 16.2618C10.8358 16.4538 10.9698 16.6118 11.1378 16.7358C11.3098 16.8598 11.5058 16.9498 11.7258 17.0058C11.9498 17.0658 12.1798 17.0958 12.4158 17.0958C12.7078 17.0958 12.9638 17.0618 13.1838 16.9938C13.4078 16.9258 13.5938 16.8318 13.7418 16.7118C13.8938 16.5878 14.0078 16.4418 14.0838 16.2738C14.1598 16.1058 14.1978 15.9238 14.1978 15.7278C14.1978 15.4878 14.1458 15.2918 14.0418 15.1398C13.9418 14.9838 13.8218 14.8598 13.6818 14.7678C13.5418 14.6758 13.3998 14.6098 13.2558 14.5698C13.1158 14.5258 13.0058 14.4958 12.9258 14.4798C12.6578 14.4118 12.4398 14.3558 12.2718 14.3118C12.1078 14.2678 11.9778 14.2238 11.8818 14.1798C11.7898 14.1358 11.7278 14.0878 11.6958 14.0358C11.6638 13.9838 11.6478 13.9158 11.6478 13.8318C11.6478 13.7398 11.6678 13.6638 11.7078 13.6038C11.7478 13.5438 11.7978 13.4938 11.8578 13.4538C11.9218 13.4138 11.9918 13.3858 12.0678 13.3698C12.1438 13.3538 12.2198 13.3458 12.2958 13.3458C12.4118 13.3458 12.5178 13.3558 12.6138 13.3758C12.7138 13.3958 12.8018 13.4298 12.8778 13.4778C12.9538 13.5258 13.0138 13.5918 13.0578 13.6758C13.1058 13.7598 13.1338 13.8658 13.1418 13.9938H14.0538C14.0538 13.7458 14.0058 13.5358 13.9098 13.3638C13.8178 13.1878 13.6918 13.0438 13.5318 12.9318C13.3718 12.8198 13.1878 12.7398 12.9798 12.6918C12.7758 12.6398 12.5618 12.6138 12.3378 12.6138C12.1458 12.6138 11.9538 12.6398 11.7618 12.6918C11.5698 12.7438 11.3978 12.8238 11.2458 12.9318C11.0938 13.0398 10.9698 13.1758 10.8738 13.3398C10.7818 13.4998 10.7358 13.6898 10.7358 13.9098C10.7358 14.1058 10.7718 14.2738 10.8438 14.4138C10.9198 14.5498 11.0178 14.6638 11.1378 14.7558C11.2578 14.8478 11.3938 14.9238 11.5458 14.9838C11.6978 15.0398 11.8538 15.0878 12.0138 15.1278C12.1698 15.1718 12.3238 15.2118 12.4758 15.2478C12.6278 15.2838 12.7638 15.3258 12.8838 15.3738C13.0038 15.4218 13.0998 15.4818 13.1718 15.5538C13.2478 15.6258 13.2858 15.7198 13.2858 15.8358C13.2858 15.9438 13.2578 16.0338 13.2018 16.1058C13.1458 16.1738 13.0758 16.2278 12.9918 16.2678C12.9078 16.3078 12.8178 16.3358 12.7218 16.3518C12.6258 16.3638 12.5358 16.3698 12.4518 16.3698C12.3278 16.3698 12.2078 16.3558 12.0918 16.3278C11.9758 16.2958 11.8738 16.2498 11.7858 16.1898C11.7018 16.1258 11.6338 16.0438 11.5818 15.9438C11.5298 15.8438 11.5038 15.7218 11.5038 15.5778Z" fill="white"/>
+<path d="M16.7503 16.9998L18.1723 12.7158H17.2003L16.2343 15.7278H16.2223L15.2683 12.7158H14.3023L15.6883 16.9998H16.7503Z" fill="white"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2CA91F"/>
+</svg>
diff --git a/src/assets/display-bg1.png b/src/assets/display-bg1.png
new file mode 100644
index 0000000..dbf63be
Binary files /dev/null and b/src/assets/display-bg1.png differ
diff --git a/src/assets/display-bg2.png b/src/assets/display-bg2.png
new file mode 100644
index 0000000..606a5d9
Binary files /dev/null and b/src/assets/display-bg2.png differ
diff --git a/src/assets/display-bg3.png b/src/assets/display-bg3.png
new file mode 100644
index 0000000..52d0f92
Binary files /dev/null and b/src/assets/display-bg3.png differ
diff --git a/src/assets/doc-icon.svg b/src/assets/doc-icon.svg
new file mode 100644
index 0000000..899a008
--- /dev/null
+++ b/src/assets/doc-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#3370FF"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2B5FD9"/>
+<path d="M15.1218 17.9996L17.4138 9.43164H16.2738L14.5338 16.5596H14.5098L12.6138 9.43164H11.3778L9.45784 16.5596H9.43384L7.75384 9.43164H6.58984L8.78584 17.9996H9.97384L11.9538 10.7996H11.9778L13.9338 17.9996H15.1218Z" fill="white"/>
+</svg>
diff --git a/src/assets/docx-icon.svg b/src/assets/docx-icon.svg
new file mode 100644
index 0000000..899a008
--- /dev/null
+++ b/src/assets/docx-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#3370FF"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2B5FD9"/>
+<path d="M15.1218 17.9996L17.4138 9.43164H16.2738L14.5338 16.5596H14.5098L12.6138 9.43164H11.3778L9.45784 16.5596H9.43384L7.75384 9.43164H6.58984L8.78584 17.9996H9.97384L11.9538 10.7996H11.9778L13.9338 17.9996H15.1218Z" fill="white"/>
+</svg>
diff --git a/src/assets/hit-test-empty.png b/src/assets/hit-test-empty.png
new file mode 100644
index 0000000..83a2c9a
Binary files /dev/null and b/src/assets/hit-test-empty.png differ
diff --git a/src/assets/html-icon.svg b/src/assets/html-icon.svg
new file mode 100644
index 0000000..b59a488
--- /dev/null
+++ b/src/assets/html-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00024 2.5C4.00024 1.94772 4.44796 1.5 5.00024 1.5H14.7931C14.9257 1.5 15.0529 1.55268 15.1467 1.64645L19.8538 6.35355C19.9476 6.44732 20.0002 6.5745 20.0002 6.70711V21.5C20.0002 22.0523 19.5525 22.5 19.0002 22.5H5.00024C4.44796 22.5 4.00024 22.0523 4.00024 21.5V2.5Z" fill="#D136D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00024 2.5C4.00024 1.94772 4.44796 1.5 5.00024 1.5H14.7931C14.9257 1.5 15.0529 1.55268 15.1467 1.64645L19.8538 6.35355C19.9476 6.44732 20.0002 6.5745 20.0002 6.70711V21.5C20.0002 22.0523 19.5525 22.5 19.0002 22.5H5.00024C4.44796 22.5 4.00024 22.0523 4.00024 21.5V2.5Z" fill="#3370FF"/>
+<path d="M10.2966 11.4764L7.76958 14.1363L10.2966 16.7961C10.3873 16.8916 10.3857 17.0447 10.293 17.1381L10.292 17.1391L9.95252 17.4774C9.8597 17.5698 9.7118 17.5677 9.62149 17.4727L6.61239 14.3054C6.52308 14.2114 6.52308 14.0611 6.61239 13.9671L9.62149 10.7999C9.7118 10.7048 9.8597 10.7027 9.95252 10.7952L10.292 11.1335C10.3852 11.2263 10.3877 11.3794 10.2976 11.4754L10.2966 11.4764ZM16.3178 14.1363L13.9712 11.4764C13.887 11.381 13.8885 11.2278 13.9746 11.1344L13.9755 11.1335L14.2908 10.7952C14.3769 10.7027 14.5143 10.7048 14.5981 10.7999L17.3923 13.9671C17.4752 14.0611 17.4752 14.2114 17.3923 14.3054L14.5981 17.4727C14.5143 17.5677 14.3769 17.5698 14.2908 17.4774L13.9755 17.1391C13.8889 17.0462 13.8866 16.8931 13.9704 16.7971L13.9712 16.7961L16.3178 14.1363ZM12.6285 9.09234L13.1203 9.14509C13.2546 9.15949 13.3509 9.27213 13.3353 9.39669L12.1614 18.7083C12.1457 18.8327 12.0244 18.9219 11.8902 18.9075L11.3984 18.8547C11.2642 18.8403 11.1679 18.7277 11.1834 18.6031L12.3574 9.2915C12.373 9.16708 12.4944 9.07796 12.6285 9.09234Z" fill="white"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2B5FD9"/>
+</svg>
diff --git a/src/assets/icon_and.svg b/src/assets/icon_and.svg
new file mode 100644
index 0000000..9c4842b
--- /dev/null
+++ b/src/assets/icon_and.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6667 3.33329H3.33335V16.6666H16.6667V3.33329ZM3.33335 1.66663C2.41288 1.66663 1.66669 2.41282 1.66669 3.33329V16.6666C1.66669 17.5871 2.41288 18.3333 3.33335 18.3333H16.6667C17.5872 18.3333 18.3334 17.5871 18.3334 16.6666V3.33329C18.3334 2.41282 17.5872 1.66663 16.6667 1.66663H3.33335Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.33 5.83667H15.2233V13.95H13.33V5.83667Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.83 5.83667H12.7233V13.95H10.83V5.83667Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51665 13.7165V13.95H10.33V10.2333C10.33 9.53587 10.1523 8.93943 9.747 8.50803L9.7458 8.50675C9.27726 8.01218 8.58554 7.80664 7.76332 7.80664C7.08671 7.80664 6.47894 7.92104 6.00606 8.21772C5.45355 8.54628 5.11381 9.07452 4.98446 9.733L4.89493 10.1888L6.10828 10.2928C5.95695 10.3597 5.8157 10.4386 5.68578 10.5309C5.1067 10.9233 4.81665 11.5057 4.81665 12.2133C4.81665 12.7602 5.02656 13.2281 5.45194 13.5796C5.84831 13.9324 6.37585 14.09 6.98332 14.09C7.49851 14.09 7.95994 13.9889 8.36073 13.8003L8.36966 13.796C8.41982 13.7709 8.46882 13.7444 8.51665 13.7165ZM6.83361 10.0734C7.10234 10.0223 7.38998 9.99474 7.69236 9.98678L8.43243 9.96764C8.40662 9.80751 8.3491 9.71569 8.2882 9.65948C8.19958 9.57767 8.027 9.49997 7.69332 9.49997C7.40772 9.49997 7.22064 9.55283 7.10769 9.6206L7.10328 9.62324C6.96993 9.70103 6.88847 9.80826 6.85134 9.98773L6.83361 10.0734ZM8.43782 11.5718L7.78478 11.5898L7.78191 11.5899C7.33203 11.5992 7.0658 11.6834 6.9222 11.7831C6.8054 11.8642 6.73998 11.9741 6.73998 12.1733C6.73998 12.2369 6.75413 12.277 6.82642 12.3323L6.8313 12.3361L6.83606 12.3399C6.90443 12.3955 7.02395 12.4466 7.22332 12.4466C7.57815 12.4466 7.86218 12.3394 8.10462 12.1349C8.30129 11.9689 8.40794 11.7831 8.43782 11.5718Z" fill="#646A73"/>
+</svg>
diff --git a/src/assets/icon_condition.svg b/src/assets/icon_condition.svg
new file mode 100644
index 0000000..2bc80a2
--- /dev/null
+++ b/src/assets/icon_condition.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2404 11.9757C14.2022 11.8917 14.1406 11.8206 14.0629 11.7709C13.9853 11.7213 13.8949 11.6951 13.8027 11.6957H12.6518V9.16918C12.6518 7.44347 11.069 6.00118 8.96725 5.65376V1.63242C8.96725 1.37615 8.86544 1.13037 8.68423 0.949156C8.50302 0.767942 8.25724 0.666138 8.00096 0.666138C7.74469 0.666138 7.49891 0.767942 7.3177 0.949156C7.13648 1.13037 7.03468 1.37615 7.03468 1.63242V5.65604C4.93411 6.00233 3.34896 7.44576 3.34896 9.17033V11.6945H2.19811C2.07221 11.6959 1.95172 11.746 1.86184 11.8341C1.77197 11.9223 1.71965 12.0418 1.71582 12.1677V12.1837C1.71582 12.2797 1.74782 12.3779 1.80953 12.4614L3.76496 15.1345C3.80786 15.1932 3.86352 15.2413 3.92775 15.2754C3.99197 15.3094 4.06308 15.3284 4.13572 15.3309C4.20836 15.3334 4.28062 15.3195 4.34705 15.29C4.41349 15.2605 4.47237 15.2163 4.51925 15.1608L6.80153 12.4899C6.86177 12.42 6.9005 12.3341 6.91307 12.2427C6.92564 12.1512 6.91151 12.0581 6.87239 11.9745C6.83423 11.8906 6.7726 11.8195 6.69493 11.7698C6.61726 11.7201 6.52688 11.694 6.43468 11.6945H5.28382V9.16918C5.28382 8.3829 6.39925 7.50747 8.00039 7.50747C9.60153 7.50747 10.7192 8.3829 10.7192 9.16918V11.6922H9.56611C9.47671 11.6918 9.38902 11.7166 9.31303 11.7637C9.23705 11.8108 9.17583 11.8783 9.13639 11.9585C9.10152 12.026 9.08349 12.1009 9.08382 12.1768C9.08444 12.2795 9.11721 12.3794 9.17754 12.4625L11.133 15.1368C11.1759 15.1955 11.2315 15.2436 11.2957 15.2777C11.36 15.3117 11.4311 15.3307 11.5037 15.3332C11.5764 15.3357 11.6486 15.3217 11.7151 15.2923C11.7815 15.2628 11.8404 15.2186 11.8872 15.1631L14.1684 12.4888C14.242 12.404 14.2833 12.2959 14.285 12.1837V12.1688C14.2839 12.1015 14.2683 12.0352 14.2392 11.9745L14.2404 11.9757Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_docs.svg b/src/assets/icon_docs.svg
new file mode 100644
index 0000000..9bec0be
--- /dev/null
+++ b/src/assets/icon_docs.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.77756 1.66699C4.28664 1.66699 3.88867 2.06496 3.88867 2.55588V19.4448C3.88867 19.9357 4.28664 20.3337 4.77756 20.3337H17.222C17.7129 20.3337 18.1109 19.9357 18.1109 19.4448V6.3069C18.1109 6.19036 18.0651 6.07847 17.9834 5.99536L13.8597 1.79989C13.7761 1.71488 13.6619 1.66699 13.5427 1.66699H4.77756ZM7.04915 9.02062C7.04915 8.77516 7.24814 8.57617 7.4936 8.57617H14.5059C14.7514 8.57617 14.9504 8.77516 14.9504 9.02062V9.74789C14.9504 9.99335 14.7514 10.1923 14.5059 10.1923H7.4936C7.24814 10.1923 7.04915 9.99335 7.04915 9.74789V9.02062ZM7.04915 13.061C7.04915 12.8156 7.24814 12.6166 7.4936 12.6166H10.5553C10.8008 12.6166 10.9998 12.8156 10.9998 13.061V13.7883C10.9998 14.0338 10.8008 14.2327 10.5553 14.2327H7.4936C7.24814 14.2327 7.04915 14.0338 7.04915 13.7883V13.061Z" fill="white"/>
+<path opacity="0.5" d="M13.6665 1.68457C13.7391 1.70561 13.8058 1.74502 13.8597 1.7999L17.9835 5.99537C18.0172 6.02971 18.0449 6.06897 18.0657 6.11145H14.6755C14.1183 6.11145 13.6665 5.6597 13.6665 5.10244V1.68457Z" fill="#3370FF"/>
+</svg>
diff --git a/src/assets/icon_document.svg b/src/assets/icon_document.svg
new file mode 100644
index 0000000..34fe1b3
--- /dev/null
+++ b/src/assets/icon_document.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_332_3845)">
+<path opacity="0.5" d="M11.5903 10.7326C11.5903 8.64041 13.2864 6.9444 15.3785 6.9444C17.4706 6.9444 19.1667 8.64042 19.1667 10.7326V15.3784C19.1667 17.4705 17.4706 19.1666 15.3785 19.1666C13.2864 19.1666 11.5903 17.4705 11.5903 15.3784V10.7326Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6212 0.833374H14.6211V2.36113H13.1059V0.833374H2.83347C1.72892 0.833374 0.833495 1.72878 0.833474 2.83333L0.833313 11.1665C0.833228 15.5848 4.41497 19.1666 8.83331 19.1666H15.1666C15.5076 19.1666 15.8387 19.1239 16.1547 19.0436C15.2624 18.7368 14.6212 17.8902 14.6212 16.8937V0.833374ZM4.51881 6.35876C4.51881 5.89468 4.89501 5.51848 5.35909 5.51848H10.3457C10.8098 5.51848 11.186 5.89468 11.186 6.35876C11.186 6.82283 10.8098 7.19904 10.3457 7.19904H5.35909C4.89501 7.19904 4.51881 6.82283 4.51881 6.35876ZM5.35909 9.4398C4.89501 9.4398 4.51881 9.816 4.51881 10.2801C4.51881 10.7441 4.89501 11.1204 5.35909 11.1204H10.3457C10.8098 11.1204 11.186 10.7441 11.186 10.2801C11.186 9.816 10.8098 9.4398 10.3457 9.4398H5.35909Z" fill="white"/>
+<ellipse cx="13.1058" cy="2.36108" rx="1.51527" ry="1.52776" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_332_3845">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icon_file-audio.svg b/src/assets/icon_file-audio.svg
new file mode 100644
index 0000000..13f1f72
--- /dev/null
+++ b/src/assets/icon_file-audio.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.3335 3.33333C5.3335 2.59695 5.93045 2 6.66683 2H19.724C19.9008 2 20.0704 2.07024 20.1954 2.19526L26.4716 8.47141C26.5966 8.59643 26.6668 8.766 26.6668 8.94281V28.6667C26.6668 29.403 26.0699 30 25.3335 30H6.66683C5.93045 30 5.3335 29.403 5.3335 28.6667V3.33333Z" fill="#3370FF"/>
+<path d="M20 2.05994C20.072 2.0927 20.1383 2.13831 20.1953 2.19532L26.4714 8.47146C26.5284 8.52847 26.574 8.59473 26.6068 8.66672H21.3333C20.597 8.66672 20 8.06977 20 7.33339V2.05994Z" fill="#2B5FD9"/>
+<path d="M19.976 12.8794C20.254 12.9447 20.4595 13.1796 20.4872 13.4638L20.6106 14.7297C20.6546 15.1805 20.2459 15.5429 19.8037 15.4455L16.7344 14.7691C16.5577 14.7302 16.3944 14.8747 16.4116 15.0548L17.1297 22.5884C17.1297 22.7046 17.1151 22.7812 17.0891 22.8249C17.0254 24.3752 15.7484 25.6124 14.1825 25.6124C12.5759 25.6124 11.2734 24.31 11.2734 22.7033C11.2734 21.0967 12.5759 19.7942 14.1825 19.7942C14.8467 19.7942 15.4589 20.0168 15.9485 20.3914L15.274 12.6749C15.2345 12.2228 15.6485 11.8642 16.0904 11.9678L19.976 12.8794Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_file-doc.svg b/src/assets/icon_file-doc.svg
new file mode 100644
index 0000000..86ac2d3
--- /dev/null
+++ b/src/assets/icon_file-doc.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.3335 3.33333C5.3335 2.59695 5.93045 2 6.66683 2H19.8146C19.9934 2 20.1647 2.07183 20.29 2.19934L26.4756 8.49255C26.5982 8.61722 26.6668 8.78505 26.6668 8.95987V28.6667C26.6668 29.403 26.0699 30 25.3335 30H6.66683C5.93045 30 5.3335 29.403 5.3335 28.6667V3.33333Z" fill="#3370FF"/>
+<path d="M20 2.02637C20.1089 2.05793 20.2089 2.11704 20.2899 2.19936L26.4755 8.49256C26.5261 8.54408 26.5675 8.60297 26.5987 8.66668H21.5135C20.6776 8.66668 20 7.98906 20 7.15317V2.02637Z" fill="#2B5FD9"/>
+<path d="M10.7636 13.5757H20.8727C20.9932 13.5757 21.0909 13.6734 21.0909 13.7939V14.8121C21.0909 14.9326 20.9932 15.0303 20.8727 15.0303H10.7636C10.6431 15.0303 10.5454 14.9326 10.5454 14.8121V13.7939C10.5454 13.6734 10.6431 13.5757 10.7636 13.5757ZM10.7636 17.9394H20.8727C20.9932 17.9394 21.0909 18.0371 21.0909 18.1576V19.1757C21.0909 19.2962 20.9932 19.3939 20.8727 19.3939H10.7636C10.6431 19.3939 10.5454 19.2962 10.5454 19.1757V18.1576C10.5454 18.0371 10.6431 17.9394 10.7636 17.9394ZM10.7636 22.303H16.1454C16.2659 22.303 16.3636 22.4007 16.3636 22.5212V23.5394C16.3636 23.6599 16.2659 23.7576 16.1454 23.7576H10.7636C10.6431 23.7576 10.5454 23.6599 10.5454 23.5394V22.5212C10.5454 22.4007 10.6431 22.303 10.7636 22.303Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_file-folder_colorful.svg b/src/assets/icon_file-folder_colorful.svg
new file mode 100644
index 0000000..7aa4703
--- /dev/null
+++ b/src/assets/icon_file-folder_colorful.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833374 3.33333C0.833374 2.8731 1.20647 2.5 1.66671 2.5H8.65168C8.96732 2.5 9.25587 2.67834 9.39703 2.96066L10 4.16667H18.3334C18.7936 4.16667 19.1667 4.53976 19.1667 5V16.6667C19.1667 17.1269 18.7936 17.5 18.3334 17.5H1.66671C1.20647 17.5 0.833374 17.1269 0.833374 16.6667V3.33333Z" fill="#FFA53D"/>
+<path d="M0.833374 5.00002C0.833374 4.53978 1.20647 4.16669 1.66671 4.16669H18.3334C18.7936 4.16669 19.1667 4.53978 19.1667 5.00002V16.6667C19.1667 17.1269 18.7936 17.5 18.3334 17.5H1.66671C1.20647 17.5 0.833374 17.1269 0.833374 16.6667V5.00002Z" fill="#FFC60A"/>
+</svg>
diff --git a/src/assets/icon_file-image.svg b/src/assets/icon_file-image.svg
new file mode 100644
index 0000000..4511c36
--- /dev/null
+++ b/src/assets/icon_file-image.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.3335 3.33333C5.3335 2.59695 5.93045 2 6.66683 2H19.724C19.9008 2 20.0704 2.07024 20.1954 2.19526L26.4716 8.47141C26.5966 8.59643 26.6668 8.766 26.6668 8.94281V28.6667C26.6668 29.403 26.0699 30 25.3335 30H6.66683C5.93045 30 5.3335 29.403 5.3335 28.6667V3.33333Z" fill="#14C0FF"/>
+<path d="M20 2.05988C20.072 2.09264 20.1383 2.13825 20.1953 2.19526L26.4714 8.4714C26.5284 8.52841 26.574 8.59467 26.6068 8.66666H21.3333C20.597 8.66666 20 8.06971 20 7.33333V2.05988Z" fill="#11A3D9"/>
+<path d="M11.3335 16C12.4381 16 13.3335 15.1046 13.3335 14C13.3335 12.8954 12.4381 12 11.3335 12C10.2289 12 9.3335 12.8954 9.3335 14C9.3335 15.1046 10.2289 16 11.3335 16Z" fill="white"/>
+<path d="M22.2785 14.9317C22.4218 14.7884 22.6668 14.8899 22.6668 15.0925V24.0645C22.6668 24.1901 22.565 24.2919 22.4394 24.2919H13.4674L13.4587 24.2918H9.56142C9.35877 24.2918 9.25728 24.0468 9.40058 23.9035L14.366 18.938C14.4549 18.8492 14.5989 18.8492 14.6877 18.938L16.48 20.7302L22.2785 14.9317Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_form.svg b/src/assets/icon_form.svg
new file mode 100644
index 0000000..22a1021
--- /dev/null
+++ b/src/assets/icon_form.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.05704 15.3334H2.00004C1.82323 15.3334 1.65366 15.2632 1.52864 15.1382C1.40361 15.0131 1.33337 14.8436 1.33337 14.6667V1.33341C1.33337 1.1566 1.40361 0.987035 1.52864 0.862011C1.65366 0.736987 1.82323 0.666748 2.00004 0.666748H12.6667C12.8435 0.666748 13.0131 0.736987 13.1381 0.862011C13.2631 0.987035 13.3334 1.1566 13.3334 1.33341V6.05641C13.3334 6.23316 13.2633 6.4027 13.1384 6.52775L4.52871 15.1381C4.46678 15.2 4.39324 15.2492 4.31231 15.2827C4.23138 15.3162 4.14464 15.3334 4.05704 15.3334ZM4.431 7.90245C4.49352 7.96496 4.5783 8.00008 4.66671 8.00008H8.00004C8.08844 8.00008 8.17323 7.96496 8.23574 7.90245C8.29825 7.83994 8.33337 7.75515 8.33337 7.66675V7.00008C8.33337 6.91167 8.29825 6.82689 8.23574 6.76438C8.17323 6.70187 8.08844 6.66675 8.00004 6.66675H4.66671C4.5783 6.66675 4.49352 6.70187 4.431 6.76438C4.36849 6.82689 4.33337 6.91167 4.33337 7.00008V7.66675C4.33337 7.75515 4.36849 7.83994 4.431 7.90245ZM4.431 4.56912C4.49352 4.63163 4.5783 4.66675 4.66671 4.66675H10.3334C10.3771 4.66675 10.4205 4.65813 10.4609 4.64138C10.5014 4.62462 10.5381 4.60007 10.5691 4.56912C10.6 4.53816 10.6246 4.50142 10.6413 4.46098C10.6581 4.42053 10.6667 4.37719 10.6667 4.33341V3.66675C10.6667 3.62297 10.6581 3.57963 10.6413 3.53919C10.6246 3.49874 10.6 3.462 10.5691 3.43105C10.5381 3.40009 10.5014 3.37554 10.4609 3.35879C10.4205 3.34204 10.3771 3.33341 10.3334 3.33341H4.66671C4.5783 3.33341 4.49352 3.36853 4.431 3.43105C4.36849 3.49356 4.33337 3.57834 4.33337 3.66675V4.33341C4.33337 4.42182 4.36849 4.5066 4.431 4.56912Z" fill="white"/>
+<g opacity="0.5">
+<path d="M13.565 11.518L11.6847 9.6381L7.55305 13.7961L7.33337 15.5777C7.33337 15.6661 7.36849 15.7509 7.431 15.8134C7.49352 15.8759 7.5783 15.911 7.66671 15.911L9.45064 15.627L13.565 11.518Z" fill="white"/>
+<path d="M14.0486 8.20917C13.7886 7.94884 13.387 7.92884 13.151 8.16417L12.1543 9.16417L14.0369 11.0468L15.0346 10.0508L15.0662 10.0168C15.2689 9.7781 15.2396 9.4001 14.9912 9.15144L14.0486 8.20917Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icon_function_outlined.svg b/src/assets/icon_function_outlined.svg
new file mode 100644
index 0000000..dbdef4c
--- /dev/null
+++ b/src/assets/icon_function_outlined.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6260_56998)">
+<path d="M8.45989 5.8569L8.57477 5.86299C8.79559 5.87481 8.96834 6.05752 8.96834 6.27866V6.82427C8.96834 7.07408 8.75005 7.26525 8.50052 7.25364C8.42661 7.2502 8.35257 7.24833 8.27834 7.24833C8.06408 7.24833 7.92822 7.30022 7.84948 7.38496C7.77816 7.4623 7.73167 7.61024 7.73167 7.85333V8.13167H8.55167C8.78179 8.13167 8.96834 8.31821 8.96834 8.54833V9.38881C8.96834 9.61893 8.78179 9.80547 8.55167 9.80547H7.73167V13.9133C7.73167 14.1435 7.54512 14.33 7.31501 14.33H6.32501C6.09489 14.33 5.90834 14.1435 5.90834 13.9133V9.80547H5.13859C4.90847 9.80547 4.72192 9.61893 4.72192 9.38881V8.54833C4.72192 8.31821 4.90847 8.13167 5.13859 8.13167H5.90834V7.74833C5.90834 7.19278 6.08218 6.73149 6.43374 6.37176C6.78941 6.00781 7.32033 5.83333 8.01 5.83333C8.15999 5.83333 8.30995 5.84119 8.45989 5.8569Z" fill="white"/>
+<path d="M12.4626 9.47701L11.5695 8.15211C11.492 8.03721 11.3625 7.96833 11.224 7.96833H10.1483C9.81198 7.96833 9.61424 8.34622 9.80596 8.62253L11.3934 10.9103L9.61243 13.5148C9.42332 13.7913 9.62135 14.1667 9.95637 14.1667H11.0006C11.1403 14.1667 11.2708 14.0966 11.3479 13.9801L12.4396 12.3325L13.5313 13.9801C13.6085 14.0966 13.7389 14.1667 13.8786 14.1667H14.9522C15.2886 14.1667 15.4864 13.7886 15.2945 13.5123L13.4629 10.8753L15.044 8.62451C15.238 8.34841 15.0405 7.96833 14.7031 7.96833H13.6913C13.552 7.96833 13.4219 8.03796 13.3446 8.15387L12.4626 9.47701Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9226 2.74408C18.7663 2.5878 18.5543 2.5 18.3333 2.5H1.66665C1.44563 2.5 1.23367 2.5878 1.07739 2.74408C0.92111 2.90036 0.833313 3.11232 0.833313 3.33333V16.6667C0.833313 16.8877 0.92111 17.0996 1.07739 17.2559C1.23367 17.4122 1.44563 17.5 1.66665 17.5H18.3333C18.5543 17.5 18.7663 17.4122 18.9226 17.2559C19.0788 17.0996 19.1666 16.8877 19.1666 16.6667V3.33333C19.1666 3.11232 19.0788 2.90036 18.9226 2.74408ZM2.49998 4.16667H17.5V15.8333H2.49998V4.16667Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_6260_56998">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icon_globe_color.svg b/src/assets/icon_globe_color.svg
new file mode 100644
index 0000000..7ede591
--- /dev/null
+++ b/src/assets/icon_globe_color.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718950836622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14660" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M366.08 301.269333l-215.552 235.178667L354.133333 771.669333a21.333333 21.333333 0 0 1-0.810666 28.8l-27.904 28.842667a21.333333 21.333333 0 0 1-31.36-0.810667L50.944 550.826667a21.333333 21.333333 0 0 1 0.298667-28.458667L306.773333 243.669333a21.333333 21.333333 0 0 1 31.018667-0.426666l27.904 28.8a21.333333 21.333333 0 0 1 0.426667 29.226666z m513.578667 235.178667l-206.08-235.178667a21.333333 21.333333 0 0 1 0.682666-28.928l27.904-28.8a21.333333 21.333333 0 0 1 31.317334 0.682667l245.674666 277.845333a21.333333 21.333333 0 0 1-0.298666 28.544l-255.402667 278.613334a21.333333 21.333333 0 0 1-31.061333 0.426666l-27.904-28.757333a21.333333 21.333333 0 0 1-0.384-29.269333l215.594666-235.178667z m-324.864-474.88l42.410666 4.906667a21.333333 21.333333 0 0 1 18.730667 23.637333L514.133333 965.12a21.333333 21.333333 0 0 1-23.637333 18.730667l-42.368-4.949334a21.333333 21.333333 0 0 1-18.773333-23.637333L531.2 80.213333a21.333333 21.333333 0 0 1 23.68-18.730666z" p-id="14661" fill="#FF8800"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icon_hi.svg b/src/assets/icon_hi.svg
new file mode 100644
index 0000000..84bb36a
--- /dev/null
+++ b/src/assets/icon_hi.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.78395 12.7399C8.87529 12.6625 8.93678 12.5557 8.9578 12.4378L10.4173 3.95194C10.4294 3.87835 10.4253 3.803 10.4054 3.73113C10.3855 3.65926 10.3502 3.59258 10.3019 3.53572C10.2536 3.47887 10.1936 3.43318 10.1259 3.40185C10.0582 3.37051 9.98452 3.35427 9.90994 3.35425H8.04041C7.92032 3.35426 7.80413 3.39687 7.7125 3.4745C7.62088 3.55212 7.55976 3.65974 7.54002 3.77819L7.01877 6.78751H4.5168L5.01025 3.95194C5.02234 3.87835 5.01828 3.803 4.99836 3.73113C4.97843 3.65926 4.94311 3.59258 4.89485 3.53572C4.84658 3.47887 4.78653 3.43318 4.71885 3.40185C4.65117 3.37051 4.57748 3.35427 4.5029 3.35425H2.63337C2.51366 3.35562 2.39818 3.39872 2.30683 3.47611C2.21549 3.5535 2.154 3.66033 2.13298 3.77819L0.673494 12.264C0.6614 12.3376 0.665456 12.413 0.685383 12.4849C0.70531 12.5567 0.740631 12.6234 0.788895 12.6803C0.837159 12.7371 0.897213 12.7828 0.964892 12.8141C1.03257 12.8455 1.10626 12.8617 1.18084 12.8617H3.02257C3.14266 12.8617 3.25885 12.8191 3.35048 12.7415C3.4421 12.6639 3.50322 12.5563 3.52296 12.4378L4.07201 9.42848H6.57398L6.08053 12.264C6.06844 12.3376 6.0725 12.413 6.09243 12.4849C6.11235 12.5567 6.14767 12.6234 6.19594 12.6803C6.2442 12.7371 6.30425 12.7828 6.37193 12.8141C6.43961 12.8455 6.5133 12.8617 6.58788 12.8617H8.45741C8.57712 12.8604 8.6926 12.8173 8.78395 12.7399Z" fill="white"/>
+<path d="M13.686 12.7378C13.7786 12.6617 13.8418 12.5555 13.8644 12.4378L14.6428 7.9134C14.6603 7.83959 14.6613 7.76282 14.6456 7.68859C14.6299 7.61437 14.598 7.54454 14.5522 7.48409C14.5064 7.42364 14.4477 7.37409 14.3805 7.33897C14.3133 7.30385 14.2391 7.28404 14.1633 7.28096H12.2938C12.1741 7.28233 12.0586 7.32543 11.9672 7.40282C11.8759 7.48021 11.8144 7.58704 11.7934 7.7049L10.9872 12.2571C10.9739 12.3303 10.9769 12.4055 10.996 12.4774C11.015 12.5493 11.0497 12.6161 11.0974 12.6731C11.1451 12.7302 11.2048 12.776 11.2723 12.8074C11.3397 12.8388 11.4132 12.855 11.4876 12.8548H13.3571C13.477 12.8553 13.5934 12.814 13.686 12.7378Z" fill="white"/>
+<path opacity="0.5" d="M14.891 5.59802C14.9822 5.52202 15.0443 5.41679 15.0667 5.30021L15.3239 3.93802C15.3383 3.86434 15.3362 3.78837 15.3176 3.71561C15.2991 3.64284 15.2647 3.5751 15.2168 3.51725C15.1689 3.45941 15.1088 3.41291 15.0408 3.38112C14.9728 3.34932 14.8986 3.33301 14.8235 3.33338H12.9609C12.8428 3.33281 12.7282 3.37345 12.6369 3.4483C12.5455 3.52315 12.4832 3.62752 12.4605 3.74343L12.1964 5.11256C12.1833 5.18609 12.1863 5.2616 12.2054 5.33384C12.2244 5.40607 12.2589 5.4733 12.3065 5.53084C12.3541 5.58839 12.4137 5.63486 12.4811 5.66705C12.5485 5.69923 12.6221 5.71635 12.6968 5.71721H14.5663C14.6851 5.71614 14.7998 5.67403 14.891 5.59802Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_image.svg b/src/assets/icon_image.svg
new file mode 100644
index 0000000..f6ee5f5
--- /dev/null
+++ b/src/assets/icon_image.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99967 2C1.63149 2 1.33301 2.29848 1.33301 2.66667V13.3333C1.33301 13.7015 1.63149 14 1.99967 14H13.9997C14.3679 14 14.6663 13.7015 14.6663 13.3333V2.66667C14.6663 2.29848 14.3679 2 13.9997 2H1.99967ZM13.333 3.33328V10.0001L11.9021 8.56907C11.7719 8.43893 11.5608 8.43893 11.4306 8.56907L9.56874 10.431C9.43854 10.5612 9.22747 10.5612 9.09727 10.431L5.56871 6.9024C5.43853 6.77227 5.22748 6.77227 5.09731 6.9024L2.66634 9.3334V3.33328H13.333Z" fill="white"/>
+<path opacity="0.5" d="M10.333 5.33333C10.333 5.14924 10.4823 5 10.6663 5H11.6663C11.8504 5 11.9997 5.14924 11.9997 5.33333V6.33333C11.9997 6.51743 11.8504 6.66667 11.6663 6.66667H10.6663C10.4823 6.66667 10.333 6.51743 10.333 6.33333V5.33333Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_or.svg b/src/assets/icon_or.svg
new file mode 100644
index 0000000..d38f014
--- /dev/null
+++ b/src/assets/icon_or.svg
@@ -0,0 +1,6 @@
+<svg width="27" height="20" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6667 3.33329H3.66667V16.6666H23.6667V3.33329ZM3.66667 1.66663C2.74619 1.66663 2 2.41282 2 3.33329V16.6666C2 17.5871 2.74619 18.3333 3.66667 18.3333H23.6667C24.5871 18.3333 25.3333 17.5871 25.3333 16.6666V3.33329C25.3333 2.41282 24.5871 1.66663 23.6667 1.66663H3.66667Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2196 6.91331H18.2767L19.4 9.89549L20.4758 6.91331L22.5375 6.83044L19.4 14.8138L17.3565 14.8966L18.437 12.3756L16.2196 6.91331Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1034 7.06327C13.1302 7.04839 13.1574 7.03404 13.1848 7.02023C13.5166 6.84295 13.8759 6.77344 14.2468 6.77344C14.9611 6.77344 15.5729 6.97047 15.9992 7.43635C16.419 7.89521 16.5934 8.54454 16.5934 9.3101V12.9168H14.7001V9.4001C14.7001 9.01738 14.6103 8.80651 14.5052 8.69229C14.4059 8.58445 14.2319 8.49677 13.9067 8.49677C13.7078 8.49677 13.5468 8.55932 13.4114 8.69473C13.2534 8.85274 13.1382 9.08146 13.1034 9.41091V12.9168H11.2101V6.91344H13.1034V7.06327Z" fill="#646A73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.01665 12.6833V12.9168H10.83V9.2001C10.83 8.50266 10.6523 7.90623 10.247 7.47482L10.2458 7.47354C9.77726 6.97898 9.08554 6.77344 8.26332 6.77344C7.58671 6.77344 6.97894 6.88784 6.50606 7.18452C5.95355 7.51308 5.61381 8.04132 5.48446 8.69979L5.39493 9.15558L6.60828 9.25958C6.45695 9.32645 6.3157 9.40545 6.18578 9.49774C5.6067 9.89006 5.31665 10.4724 5.31665 11.1801C5.31665 11.727 5.52656 12.1949 5.95194 12.5464C6.34831 12.8992 6.87585 13.0568 7.48332 13.0568C7.99851 13.0568 8.45994 12.9557 8.86073 12.7671L8.86966 12.7628C8.91982 12.7377 8.96882 12.7112 9.01665 12.6833ZM7.33362 9.04021C7.60234 8.98907 7.88998 8.96154 8.19236 8.95358L8.93243 8.93444C8.90662 8.77431 8.84911 8.68249 8.7882 8.62627C8.69958 8.54447 8.527 8.46677 8.19332 8.46677C7.90772 8.46677 7.72064 8.51963 7.60769 8.58739L7.60328 8.59004C7.46993 8.66783 7.38847 8.77506 7.35134 8.95452L7.33362 9.04021ZM8.93782 10.5386L8.28478 10.5566L8.28191 10.5567C7.83203 10.566 7.5658 10.6502 7.4222 10.7499C7.3054 10.831 7.23998 10.9409 7.23998 11.1401C7.23998 11.2037 7.25413 11.2438 7.32642 11.2991L7.3313 11.3029L7.33606 11.3067C7.40443 11.3623 7.52395 11.4134 7.72332 11.4134C8.07815 11.4134 8.36218 11.3062 8.60462 11.1017C8.80129 10.9357 8.90794 10.7499 8.93782 10.5386Z" fill="#646A73"/>
+</svg>
diff --git a/src/assets/icon_qr_outlined.svg b/src/assets/icon_qr_outlined.svg
new file mode 100644
index 0000000..1d3cf43
--- /dev/null
+++ b/src/assets/icon_qr_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.875 8.625H9.125V3.375H3.875V8.625ZM3.125 1.875H9.875C10.2892 1.875 10.625 2.21079 10.625 2.625V9.375C10.625 9.78921 10.2892 10.125 9.875 10.125H3.125C2.71079 10.125 2.375 9.78921 2.375 9.375V2.625C2.375 2.21079 2.71079 1.875 3.125 1.875ZM5.375 4.875H7.625V7.125H5.375V4.875ZM3.875 12.75V14.625H5.75V12.75H3.875ZM3.125 11.25H6.5C6.91421 11.25 7.25 11.5858 7.25 12V15.375C7.25 15.7892 6.91421 16.125 6.5 16.125H3.125C2.71079 16.125 2.375 15.7892 2.375 15.375V12C2.375 11.5858 2.71079 11.25 3.125 11.25ZM13.25 3.375V5.25H15.125V3.375H13.25ZM12.5 1.875H15.875C16.2892 1.875 16.625 2.21079 16.625 2.625V6C16.625 6.41421 16.2892 6.75 15.875 6.75H12.5C12.0858 6.75 11.75 6.41421 11.75 6V2.625C11.75 2.21079 12.0858 1.875 12.5 1.875ZM13.25 12.75V14.625H15.125V12.75H13.25ZM12.5 11.25H15.875C16.2892 11.25 16.625 11.5858 16.625 12V15.375C16.625 15.7892 16.2892 16.125 15.875 16.125H12.5C12.0858 16.125 11.75 15.7892 11.75 15.375V12C11.75 11.5858 12.0858 11.25 12.5 11.25ZM8.75 11.25H10.25V12.75H8.75V11.25ZM8.75 13.875H10.25V16.125H8.75V13.875ZM11.75 8.25H13.25V9.75H11.75V8.25ZM14.375 8.25H16.625V9.75H14.375V8.25Z" fill="#1F2329"/>
+</svg>
diff --git a/src/assets/icon_reply.svg b/src/assets/icon_reply.svg
new file mode 100644
index 0000000..430fc7f
--- /dev/null
+++ b/src/assets/icon_reply.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5892 18.5008L14.1666 15.4259H17.9166C18.3768 15.4259 18.7499 15.0449 18.7499 14.575V2.10096C18.7499 1.63099 18.3768 1.25 17.9166 1.25H1.66658C1.20635 1.25 0.833252 1.63099 0.833252 2.10096V14.575C0.833252 15.0449 1.20635 15.4259 1.66658 15.4259H5.83325L9.41066 18.5008C9.7361 18.8331 10.2637 18.8331 10.5892 18.5008ZM5.41658 7.08333H6.24992C6.71015 7.08333 7.08325 7.45643 7.08325 7.91667V8.75C7.08325 9.21024 6.71015 9.58333 6.24992 9.58333H5.41658C4.95635 9.58333 4.58325 9.21024 4.58325 8.75V7.91667C4.58325 7.45643 4.95635 7.08333 5.41658 7.08333ZM8.74992 7.91667C8.74992 7.45643 9.12301 7.08333 9.58325 7.08333H10.4166C10.8768 7.08333 11.2499 7.45643 11.2499 7.91667V8.75C11.2499 9.21024 10.8768 9.58333 10.4166 9.58333H9.58325C9.12301 9.58333 8.74992 9.21024 8.74992 8.75V7.91667ZM13.7499 7.08333H14.5832C15.0435 7.08333 15.4166 7.45643 15.4166 7.91667V8.75C15.4166 9.21024 15.0435 9.58333 14.5832 9.58333H13.7499C13.2897 9.58333 12.9166 9.21024 12.9166 8.75V7.91667C12.9166 7.45643 13.2897 7.08333 13.7499 7.08333Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_reranker.svg b/src/assets/icon_reranker.svg
new file mode 100644
index 0000000..e561122
--- /dev/null
+++ b/src/assets/icon_reranker.svg
@@ -0,0 +1,21 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M5.66676 5.22216C5.66676 4.24034 4.87081 3.44438 3.88898 3.44438C2.90714 3.44438 2.11121 4.24034 2.11121 5.22216C2.11121 6.20398 2.90714 6.99994 3.88898 6.99994C4.87081 6.99994 5.66676 6.20398 5.66676 5.22216Z"
+        fill="white" />
+    <path
+        d="M5.66676 16.7777C5.66676 15.7959 4.87081 14.9999 3.88898 14.9999C2.90714 14.9999 2.11121 15.7959 2.11121 16.7777C2.11121 17.7595 2.90714 18.5555 3.88898 18.5555C4.87081 18.5555 5.66676 17.7595 5.66676 16.7777Z"
+        fill="white" />
+    <path
+        d="M20.7778 10.9999C20.7778 9.52716 19.5839 8.33323 18.1111 8.33323C16.6384 8.33323 15.4445 9.52716 15.4445 10.9999C15.4445 12.4726 16.6384 13.6666 18.1111 13.6666C19.5839 13.6666 20.7778 12.4726 20.7778 10.9999Z"
+        fill="white" />
+    <path
+        d="M6.55562 4.77767C6.55562 3.30494 5.36169 2.111 3.88896 2.111C2.41622 2.111 1.22229 3.30494 1.22229 4.77767C1.22229 6.2504 2.41622 7.44434 3.88896 7.44434C5.36169 7.44434 6.55562 6.2504 6.55562 4.77767Z"
+        fill="white" />
+    <path
+        d="M6.55562 17.2221C6.55562 15.7494 5.36169 14.5555 3.88896 14.5555C2.41622 14.5555 1.22229 15.7494 1.22229 17.2221C1.22229 18.6949 2.41622 19.8888 3.88896 19.8888C5.36169 19.8888 6.55562 18.6949 6.55562 17.2221Z"
+        fill="white" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M4.77783 16.7777C4.77783 16.2868 5.1758 15.8888 5.66672 15.8888H7.00005C7.47797 15.8888 7.9427 15.6735 8.466 15.2097C9.00158 14.735 9.50472 14.0859 10.0733 13.3468C10.0826 13.3347 10.0919 13.3226 10.1012 13.3105C10.6367 12.6143 11.2356 11.8357 11.9104 11.2375C12.0023 11.156 12.0971 11.0765 12.195 10.9999C12.0971 10.9232 12.0023 10.8438 11.9104 10.7623C11.2356 10.1641 10.6367 9.38547 10.1012 8.68927L10.0733 8.65297C9.50472 7.91385 9.00158 7.26481 8.466 6.7901C7.9427 6.32626 7.47797 6.11101 7.00005 6.11101H5.66672C5.1758 6.11101 4.77783 5.71304 4.77783 5.22212C4.77783 4.7312 5.1758 4.33323 5.66672 4.33323H7.00005C8.07769 4.33323 8.94629 4.8402 9.64522 5.4597C10.3201 6.0579 10.919 6.83655 11.4545 7.53275L11.4824 7.56904C12.0509 8.30817 12.5541 8.95721 13.0897 9.43192C13.613 9.89576 14.0777 10.111 14.5556 10.111H16.3334C16.8243 10.111 17.2223 10.509 17.2223 10.9999C17.2223 11.4908 16.8243 11.8888 16.3334 11.8888H14.5556C14.0777 11.8888 13.613 12.104 13.0897 12.5679C12.5541 13.0426 12.0509 13.6916 11.4824 14.4308L11.4545 14.467C10.919 15.1632 10.3201 15.9419 9.64522 16.5401C8.94629 17.1596 8.07769 17.6666 7.00005 17.6666H5.66672C5.1758 17.6666 4.77783 17.2686 4.77783 16.7777Z"
+        fill="white" />
+</svg>
+    
\ No newline at end of file
diff --git a/src/assets/icon_robot.svg b/src/assets/icon_robot.svg
new file mode 100644
index 0000000..cca9ee6
--- /dev/null
+++ b/src/assets/icon_robot.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.4409 232.4409"><defs><style>.cls-1{fill:#fff;}</style></defs><title>MaxKB</title><path class="cls-1" d="M128.4532,177H98.7785L87.78,187.9985a4.6069,4.6069,0,0,0,3.2576,7.8644h45.1569a4.6069,4.6069,0,0,0,3.2575-7.8644Z"/><path class="cls-1" d="M210.0008,90.7042h-5.85v41.1511h5.85a4.4537,4.4537,0,0,0,4.4537-4.4537V95.1579A4.4537,4.4537,0,0,0,210.0008,90.7042Z"/><path class="cls-1" d="M28.29,90.7042H22.44a4.4538,4.4538,0,0,0-4.4538,4.4537v32.2437a4.4538,4.4538,0,0,0,4.4538,4.4537h5.85Z"/><path class="cls-1" d="M138.8087,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,138.8087,96.1512Z"/><path class="cls-1" d="M95.3622,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,95.3622,96.1512Z"/><path class="cls-1" d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icon_send.svg b/src/assets/icon_send.svg
new file mode 100644
index 0000000..79ff642
--- /dev/null
+++ b/src/assets/icon_send.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1716 0.688342C19.6753 0.532733 20.0458 1.16193 19.6652 1.52691L11.2658 9.58356C10.0058 10.7921 8.32754 11.4668 6.5817 11.4668C4.68044 11.4668 2.8669 10.667 1.58487 9.26303L0.45879 8.02985C0.332247 7.90313 0.241372 7.74527 0.195339 7.5722C0.149305 7.39913 0.149742 7.21698 0.196605 7.04413C0.243468 6.87129 0.335099 6.71386 0.462248 6.58775C0.589398 6.46164 0.747567 6.3713 0.92079 6.32585L19.1716 0.688342Z" fill="#BBBFC4"/>
+<path d="M11 15.1851C11 13.2766 11.7377 11.4419 13.0588 10.0646L20.4664 2.34177C20.8268 1.96601 21.4499 2.32266 21.3084 2.82374L16.143 21.1182C16.0971 21.291 16.0064 21.4487 15.8801 21.5754C15.7538 21.7021 15.5964 21.7932 15.4237 21.8397C15.251 21.8862 15.0691 21.8864 14.8964 21.8402C14.7236 21.794 14.566 21.7031 14.4395 21.5767L13.4439 20.6791C11.8881 19.2764 11 17.2799 11 15.1851Z" fill="#BBBFC4"/>
+</svg>
diff --git a/src/assets/icon_send_colorful.svg b/src/assets/icon_send_colorful.svg
new file mode 100644
index 0000000..b6a1dac
--- /dev/null
+++ b/src/assets/icon_send_colorful.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z" fill="url(#paint0_linear_987_5140)"/>
+<path d="M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z" fill="url(#paint1_linear_987_5140)"/>
+<defs>
+<linearGradient id="paint0_linear_987_5140" x1="22.3289" y1="13.1532" x2="1.16113" y2="13.1532" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9258F7"/>
+<stop offset="1" stop-color="#3370FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_987_5140" x1="22.3289" y1="13.1532" x2="1.16113" y2="13.1532" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9258F7"/>
+<stop offset="1" stop-color="#3370FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icon_setting.svg b/src/assets/icon_setting.svg
new file mode 100644
index 0000000..afa9736
--- /dev/null
+++ b/src/assets/icon_setting.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50959 19.3955C6.84272 20.0622 5.93829 20.4368 4.99527 20.4367C4.05226 20.4366 3.1479 20.0619 2.48114 19.395C1.81439 18.7282 1.43986 17.8238 1.43994 16.8807C1.44002 15.9377 1.81472 15.0334 2.48159 14.3666L4.6407 12.207C3.70381 9.41949 4.34648 6.21772 6.56692 3.99594C8.78914 1.77372 11.9927 1.13238 14.7816 2.07105C14.9607 2.13105 15.1758 2.21994 15.426 2.33683C15.5488 2.39405 15.656 2.48004 15.7385 2.5875C15.821 2.69496 15.8764 2.82073 15.8999 2.95414C15.9235 3.08754 15.9145 3.22467 15.8738 3.35388C15.8331 3.48309 15.7618 3.60057 15.666 3.69638L11.9096 7.45283L14.4238 9.96705L18.1318 6.25905C18.2333 6.15762 18.3578 6.08226 18.4947 6.0394C18.6316 5.99653 18.7768 5.98744 18.918 6.0129C19.0592 6.03836 19.1921 6.09761 19.3054 6.1856C19.4187 6.27358 19.5091 6.38769 19.5687 6.51816C19.6825 6.76616 19.7683 6.97949 19.8265 7.15861C20.7345 9.93283 20.0856 13.1048 17.8807 15.3097C15.6594 17.5306 12.4571 18.1728 9.66914 17.2359L7.50959 19.395V19.3955Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_speech_to_text.svg b/src/assets/icon_speech_to_text.svg
new file mode 100644
index 0000000..a81d0aa
--- /dev/null
+++ b/src/assets/icon_speech_to_text.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z" fill="#FF8800"/>
+<g clip-path="url(#clip0_10330_2372)">
+<path d="M22.5715 7.55565C22.7761 7.55565 22.9542 7.69533 23.0031 7.89401L26.3667 21.5792C26.4356 21.8593 26.2235 22.1297 25.9351 22.1297H24.9468C24.7483 22.1297 24.5739 21.9981 24.5194 21.8072L23.4149 17.9355H19.6078L19.0541 19.8045C18.1413 22.4957 15.4533 24.4445 12.2798 24.4445C9.32693 24.4445 6.79442 22.7572 5.71945 20.3549C5.69242 20.2945 5.66068 20.2159 5.62896 20.134C5.53599 19.8941 5.67535 19.6296 5.92345 19.5612C5.96516 19.5497 6.0032 19.5393 6.03397 19.5308C6.35482 19.4424 6.61238 19.3715 6.80666 19.318C7.02895 19.2568 7.25552 19.3785 7.34889 19.5893C8.14894 21.3957 10.0553 22.6668 12.2798 22.6668C14.5329 22.6668 16.4597 21.3628 17.2411 19.5193L17.317 19.3285L20.0773 7.89578C20.1255 7.69624 20.3041 7.55565 20.5094 7.55565H22.5715ZM12.2798 7.11121C14.9799 7.11121 17.1687 9.41058 17.1687 12.247V16.1976C17.1687 19.0341 14.9799 21.3334 12.2798 21.3334C9.57975 21.3334 7.39092 19.0341 7.39092 16.1976V12.247C7.39092 9.41058 9.57975 7.11121 12.2798 7.11121ZM21.5396 9.10632L19.9645 16.0903H23.1147L21.5396 9.10632Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_10330_2372">
+<rect width="21.3333" height="21.3333" fill="white" transform="translate(5.33331 5.33337)"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icon_start.svg b/src/assets/icon_start.svg
new file mode 100644
index 0000000..0b8d730
--- /dev/null
+++ b/src/assets/icon_start.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.185 14.7097C8.41034 15.273 9.21034 15.2667 9.42667 14.6997L10.8753 10.9044L14.701 9.42671C15.266 9.20838 15.2707 8.41072 14.7083 8.18572L5.28034 4.41438C4.736 4.19672 4.196 4.73705 4.41367 5.28105L8.185 14.7097Z" fill="white"/>
+<path opacity="0.5" d="M8.33167 4.559C8.275 2.58367 6.65567 1 4.66667 1C2.64167 1 1 2.64167 1 4.66667C1 6.65467 2.58167 8.273 4.55567 8.33167L3.98233 6.898C3.59753 6.77974 3.24987 6.56394 2.97314 6.27157C2.69642 5.9792 2.50004 5.6202 2.4031 5.22948C2.30617 4.83876 2.31196 4.42961 2.41993 4.0418C2.52791 3.65398 2.73438 3.3007 3.01928 3.01629C3.30418 2.73187 3.65781 2.52601 4.04581 2.4187C4.43381 2.3114 4.84298 2.3063 5.23353 2.40391C5.62408 2.50152 5.98274 2.69851 6.27463 2.97574C6.56653 3.25296 6.78174 3.60099 6.89933 3.986L8.33167 4.559Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_text-image.svg b/src/assets/icon_text-image.svg
new file mode 100644
index 0000000..e59aa52
--- /dev/null
+++ b/src/assets/icon_text-image.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99998 1.33334H6.99998C7.18407 1.33334 7.33331 1.48258 7.33331 1.66668V2.33334C7.33331 2.51744 7.18407 2.66668 6.99998 2.66668H2.66665V6.33334C2.66665 6.51744 2.51741 6.66668 2.33331 6.66668H1.66665C1.48255 6.66668 1.33331 6.51744 1.33331 6.33334V2.00001C1.33331 1.63182 1.63179 1.33334 1.99998 1.33334ZM14 14.6667H9.66665C9.48255 14.6667 9.33331 14.5174 9.33331 14.3333V13.6667C9.33331 13.4826 9.48255 13.3333 9.66665 13.3333H13.3333V9.66668C13.3333 9.48258 13.4826 9.33334 13.6666 9.33334H14.3333C14.5174 9.33334 14.6666 9.48258 14.6666 9.66668V14C14.6666 14.3682 14.3682 14.6667 14 14.6667Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7033 1.48695C10.7776 1.29397 10.9631 1.16666 11.1699 1.16666H11.87C12.0768 1.16666 12.2623 1.29397 12.3366 1.48695L14.6475 7.48695C14.7737 7.81448 14.5319 8.16666 14.1809 8.16666H13.8107C13.5981 8.16666 13.4088 8.0323 13.3387 7.83167L12.7962 6.28018C12.7729 6.21331 12.7098 6.16852 12.6389 6.16852H10.468C10.3995 6.16852 10.3379 6.21049 10.3129 6.27429L9.69462 7.84935C9.61948 8.04076 9.43482 8.16666 9.22919 8.16666H8.85893C8.50794 8.16666 8.26619 7.81448 8.39234 7.48695L10.7033 1.48695ZM11.5194 2.85876L10.7668 4.90148H12.2656L11.5194 2.85876Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33331 14.3333C1.33331 14.5174 1.48255 14.6667 1.66665 14.6667H7.66665C7.85074 14.6667 7.99998 14.5174 7.99998 14.3333V8.33333C7.99998 8.14924 7.85074 8 7.66665 8H1.66665C1.48255 8 1.33331 8.14924 1.33331 8.33333V14.3333ZM2.83332 9.33333H3.49998C3.59203 9.33333 3.66665 9.40795 3.66665 9.5V10.1667C3.66665 10.2587 3.59203 10.3333 3.49998 10.3333H2.83332C2.74127 10.3333 2.66665 10.2587 2.66665 10.1667V9.5C2.66665 9.40795 2.74127 9.33333 2.83332 9.33333ZM4.04698 13.3294L2.62187 13.326C2.56665 13.3259 2.52198 13.281 2.52211 13.2258C2.52218 13.1993 2.53271 13.174 2.5514 13.1553L3.92901 11.7777C3.98108 11.7256 4.0655 11.7256 4.11757 11.7777L4.75326 12.4134L6.43904 10.7276C6.49111 10.6755 6.57553 10.6755 6.6276 10.7276C6.6526 10.7526 6.66665 10.7865 6.66665 10.8219V13.2333C6.66665 13.2886 6.62188 13.3333 6.56665 13.3333H4.07474C4.06511 13.3333 4.05579 13.332 4.04698 13.3294Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon_text_to_speech.svg b/src/assets/icon_text_to_speech.svg
new file mode 100644
index 0000000..6c02357
--- /dev/null
+++ b/src/assets/icon_text_to_speech.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z" fill="#14C0FF"/>
+<g clip-path="url(#clip0_10330_2180)">
+<path d="M9.42854 7.55565C9.22395 7.55565 9.04578 7.69533 8.99695 7.89401L5.63329 21.5792C5.56444 21.8593 5.77647 22.1297 6.06488 22.1297H7.05321C7.25171 22.1297 7.42615 21.9981 7.4806 21.8072L8.5851 17.9355H12.3922L12.9459 19.8045C13.8587 22.4957 16.5467 24.4445 19.7202 24.4445C22.6731 24.4445 25.2056 22.7572 26.2805 20.3549C26.3076 20.2945 26.3393 20.2159 26.371 20.134C26.464 19.8941 26.3246 19.6296 26.0765 19.5612C26.0348 19.5497 25.9968 19.5393 25.966 19.5308C25.6452 19.4424 25.3876 19.3715 25.1933 19.318C24.9711 19.2568 24.7445 19.3785 24.6511 19.5893C23.8511 21.3957 21.9447 22.6668 19.7202 22.6668C17.4671 22.6668 15.5403 21.3628 14.7589 19.5193L14.683 19.3285L11.9227 7.89578C11.8745 7.69624 11.6959 7.55565 11.4906 7.55565H9.42854ZM19.7202 7.11121C17.0201 7.11121 14.8313 9.41058 14.8313 12.247V16.1976C14.8313 19.0341 17.0201 21.3334 19.7202 21.3334C22.4203 21.3334 24.6091 19.0341 24.6091 16.1976V12.247C24.6091 9.41058 22.4203 7.11121 19.7202 7.11121ZM10.4604 9.10632L12.0355 16.0903H8.88529L10.4604 9.10632Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_10330_2180">
+<rect width="21.3333" height="21.3333" fill="white" transform="matrix(-1 0 0 1 26.6667 5.33337)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icon_web.svg b/src/assets/icon_web.svg
new file mode 100644
index 0000000..f958baf
--- /dev/null
+++ b/src/assets/icon_web.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 2H21.5C22.0523 2 22.5 2.44772 22.5 3V17C22.5 17.5523 22.0523 18 21.5 18H2.5C1.94772 18 1.5 17.5523 1.5 17V3C1.5 2.44772 1.94772 2 2.5 2ZM3.5 14V16H20.5V14H3.5Z" fill="white"/>
+<path d="M6.5 20H17.5C17.7761 20 18 20.2239 18 20.5V21.5C18 21.7761 17.7761 22 17.5 22H6.5C6.22386 22 6 21.7761 6 21.5V20.5C6 20.2239 6.22386 20 6.5 20Z" fill="#D8D8D8"/>
+</svg>
diff --git a/src/assets/js/jweixin-1.4.0.js b/src/assets/js/jweixin-1.4.0.js
new file mode 100644
index 0000000..fc060ce
--- /dev/null
+++ b/src/assets/js/jweixin-1.4.0.js
@@ -0,0 +1 @@
+((e,n)=>{"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)})(this,function(r,e){var a,c,n,i,t,s,d,o,l,u,p,f,m,g,h,S,I,y,v,_,k,w;if(!r.jWeixin)return a={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},c=(()=>{var e,n={};for(e in a)n[a[e]]=e;return n})(),i=(n=r.document).title,t=navigator.userAgent.toLowerCase(),f=navigator.platform.toLowerCase(),s=!(!f.match("mac")&&!f.match("win")),d=-1!=t.indexOf("wxdebugger"),o=-1!=t.indexOf("micromessenger"),l=-1!=t.indexOf("android"),u=-1!=t.indexOf("iphone")||-1!=t.indexOf("ipad"),p=(f=t.match(/micromessenger\/(\d+\.\d+\.\d+)/)||t.match(/micromessenger\/(\d+\.\d+)/))?f[1]:"",m={initStartTime:L(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},g={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:u?1:l?2:-1,clientVersion:p,url:encodeURIComponent(location.href)},h={},S={_completes:[]},I={state:0,data:{}},B(function(){m.initEndTime=L()}),y=!1,v=[],_={config:function(e){C("config",h=e);var o=!1!==h.check;B(function(){if(o)T(a.config,{verifyJsApiList:V(h.jsApiList)},(S._complete=function(e){m.preVerifyEndTime=L(),I.state=1,I.data=e},S.success=function(e){g.isPreVerifyOk=0},S.fail=function(e){S._fail?S._fail(e):I.state=-1},(t=S._completes).push(function(){var n;s||d||h.debug||p<"6.0.2"||g.systemType<0||(n=new Image,g.appId=h.appId,g.initTime=m.initEndTime-m.initStartTime,g.preVerifyTime=m.preVerifyEndTime-m.preVerifyStartTime,_.getNetworkType({isInnerInvoke:!0,success:function(e){g.networkType=e.networkType,n.src="https://open.weixin.qq.com/sdk/report?v="+g.version+"&o="+g.isPreVerifyOk+"&s="+g.systemType+"&c="+g.clientVersion+"&a="+g.appId+"&n="+g.networkType+"&i="+g.initTime+"&p="+g.preVerifyTime+"&u="+g.url}}))}),S.complete=function(e){for(var n=0,i=t.length;n<i;++n)t[n]();S._completes=[]},S)),m.preVerifyStartTime=L();else{I.state=1;for(var e=S._completes,n=0,i=e.length;n<i;++n)e[n]();S._completes=[]}var t}),_.invoke||(_.invoke=function(e,n,i){r.WeixinJSBridge&&WeixinJSBridge.invoke(e,P(n),i)},_.on=function(e,n){r.WeixinJSBridge&&WeixinJSBridge.on(e,n)})},ready:function(e){(0!=I.state||(S._completes.push(e),!o&&h.debug))&&e()},error:function(e){p<"6.0.2"||(-1==I.state?e(I.data):S._fail=e)},checkJsApi:function(e){T("checkJsApi",{jsApiList:V(e.jsApiList)},(e._complete=function(e){l&&(i=e.checkResult)&&(e.checkResult=JSON.parse(i));var n,i=e,t=i.checkResult;for(n in t){var o=c[n];o&&(t[o]=t[n],delete t[n])}},e))},onMenuShareTimeline:function(e){M(a.onMenuShareTimeline,{complete:function(){T("shareTimeline",{title:e.title||i,desc:e.title||i,img_url:e.imgUrl||"",link:e.link||location.href,type:e.type||"link",data_url:e.dataUrl||""},e)}},e)},onMenuShareAppMessage:function(n){M(a.onMenuShareAppMessage,{complete:function(e){"favorite"===e.scene?T("sendAppMessage",{title:n.title||i,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""}):T("sendAppMessage",{title:n.title||i,desc:n.desc||"",link:n.link||location.href,img_url:n.imgUrl||"",type:n.type||"link",data_url:n.dataUrl||""},n)}},n)},onMenuShareQQ:function(e){M(a.onMenuShareQQ,{complete:function(){T("shareQQ",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareWeibo:function(e){M(a.onMenuShareWeibo,{complete:function(){T("shareWeiboApp",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},onMenuShareQZone:function(e){M(a.onMenuShareQZone,{complete:function(){T("shareQZone",{title:e.title||i,desc:e.desc||"",img_url:e.imgUrl||"",link:e.link||location.href},e)}},e)},updateTimelineShareData:function(e){T("updateTimelineShareData",{title:e.title,link:e.link,imgUrl:e.imgUrl},e)},updateAppMessageShareData:function(e){T("updateAppMessageShareData",{title:e.title,desc:e.desc,link:e.link,imgUrl:e.imgUrl},e)},startRecord:function(e){T("startRecord",{},e)},stopRecord:function(e){T("stopRecord",{},e)},onVoiceRecordEnd:function(e){M("onVoiceRecordEnd",e)},playVoice:function(e){T("playVoice",{localId:e.localId},e)},pauseVoice:function(e){T("pauseVoice",{localId:e.localId},e)},stopVoice:function(e){T("stopVoice",{localId:e.localId},e)},onVoicePlayEnd:function(e){M("onVoicePlayEnd",e)},uploadVoice:function(e){T("uploadVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadVoice:function(e){T("downloadVoice",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},translateVoice:function(e){T("translateVoice",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},chooseImage:function(e){T("chooseImage",{scene:"1|2",count:e.count||9,sizeType:e.sizeType||["original","compressed"],sourceType:e.sourceType||["album","camera"]},(e._complete=function(e){if(l){var n=e.localIds;try{n&&(e.localIds=JSON.parse(n))}catch(e){}}},e))},getLocation:function(e){},getLocation:function(e){e=e||{},T(a.getLocation,{type:e.type||"wgs84"},(e._complete=function(e){delete e.type},e))},previewImage:function(e){T(a.previewImage,{current:e.current,urls:e.urls},e)},uploadImage:function(e){T("uploadImage",{localId:e.localId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},downloadImage:function(e){T("downloadImage",{serverId:e.serverId,isShowProgressTips:0==e.isShowProgressTips?0:1},e)},getLocalImgData:function(e){!1===y?(y=!0,T("getLocalImgData",{localId:e.localId},(e._complete=function(e){var n;y=!1,0<v.length&&(n=v.shift(),wx.getLocalImgData(n))},e))):v.push(e)},getNetworkType:function(e){T("getNetworkType",{},(e._complete=function(e){var n=e,e=n.errMsg,i=(n.errMsg="getNetworkType:ok",n.subtype);if(delete n.subtype,i)n.networkType=i;else{var i=e.indexOf(":"),t=e.substring(i+1);switch(t){case"wifi":case"edge":case"wwan":n.networkType=t;break;default:n.errMsg="getNetworkType:fail"}}},e))},openLocation:function(e){T("openLocation",{latitude:e.latitude,longitude:e.longitude,name:e.name||"",address:e.address||"",scale:e.scale||28,infoUrl:e.infoUrl||""},e)},hideOptionMenu:function(e){T("hideOptionMenu",{},e)},showOptionMenu:function(e){T("showOptionMenu",{},e)},closeWindow:function(e){T("closeWindow",{},e=e||{})},hideMenuItems:function(e){T("hideMenuItems",{menuList:e.menuList},e)},showMenuItems:function(e){T("showMenuItems",{menuList:e.menuList},e)},hideAllNonBaseMenuItem:function(e){T("hideAllNonBaseMenuItem",{},e)},showAllNonBaseMenuItem:function(e){T("showAllNonBaseMenuItem",{},e)},scanQRCode:function(e){T("scanQRCode",{needResult:(e=e||{}).needResult||0,scanType:e.scanType||["qrCode","barCode"]},(e._complete=function(e){var n;u&&(n=e.resultStr)&&(n=JSON.parse(n),e.resultStr=n&&n.scan_code&&n.scan_code.scan_result)},e))},openAddress:function(e){T(a.openAddress,{},(e._complete=function(e){(e=e).postalCode=e.addressPostalCode,delete e.addressPostalCode,e.provinceName=e.proviceFirstStageName,delete e.proviceFirstStageName,e.cityName=e.addressCitySecondStageName,delete e.addressCitySecondStageName,e.countryName=e.addressCountiesThirdStageName,delete e.addressCountiesThirdStageName,e.detailInfo=e.addressDetailInfo,delete e.addressDetailInfo},e))},openProductSpecificView:function(e){T(a.openProductSpecificView,{pid:e.productId,view_type:e.viewType||0,ext_info:e.extInfo},e)},addCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],r={card_id:r.cardId,card_ext:r.cardExt};i.push(r)}T(a.addCard,{card_list:i},(e._complete=function(e){if(n=e.card_list){for(var n,i=0,t=(n=JSON.parse(n)).length;i<t;++i){var o=n[i];o.cardId=o.card_id,o.cardExt=o.card_ext,o.isSuccess=!!o.is_succ,delete o.card_id,delete o.card_ext,delete o.is_succ}e.cardList=n,delete e.card_list}},e))},chooseCard:function(e){T("chooseCard",{app_id:h.appId,location_id:e.shopId||"",sign_type:e.signType||"SHA1",card_id:e.cardId||"",card_type:e.cardType||"",card_sign:e.cardSign,time_stamp:e.timestamp+"",nonce_str:e.nonceStr},(e._complete=function(e){e.cardList=e.choose_card_info,delete e.choose_card_info},e))},openCard:function(e){for(var n=e.cardList,i=[],t=0,o=n.length;t<o;++t){var r=n[t],r={card_id:r.cardId,code:r.code};i.push(r)}T(a.openCard,{card_list:i},e)},consumeAndShareCard:function(e){T(a.consumeAndShareCard,{consumedCardId:e.cardId,consumedCode:e.code},e)},chooseWXPay:function(e){T(a.chooseWXPay,x(e),e)},openEnterpriseRedPacket:function(e){T(a.openEnterpriseRedPacket,x(e),e)},startSearchBeacons:function(e){T(a.startSearchBeacons,{ticket:e.ticket},e)},stopSearchBeacons:function(e){T(a.stopSearchBeacons,{},e)},onSearchBeacons:function(e){M(a.onSearchBeacons,e)},openEnterpriseChat:function(e){T("openEnterpriseChat",{useridlist:e.userIds,chatname:e.groupName},e)},launchMiniProgram:function(e){T("launchMiniProgram",{targetAppId:e.targetAppId,path:(e=>{var n;if("string"==typeof e&&0<e.length)return n=e.split("?")[0],n+=".html",void 0!==(e=e.split("?")[1])?n+"?"+e:n})(e.path),envVersion:e.envVersion},e)},miniProgram:{navigateBack:function(e){e=e||{},B(function(){T("invokeMiniProgramAPI",{name:"navigateBack",arg:{delta:e.delta||1}},e)})},navigateTo:function(e){B(function(){T("invokeMiniProgramAPI",{name:"navigateTo",arg:{url:e.url}},e)})},redirectTo:function(e){B(function(){T("invokeMiniProgramAPI",{name:"redirectTo",arg:{url:e.url}},e)})},switchTab:function(e){B(function(){T("invokeMiniProgramAPI",{name:"switchTab",arg:{url:e.url}},e)})},reLaunch:function(e){B(function(){T("invokeMiniProgramAPI",{name:"reLaunch",arg:{url:e.url}},e)})},postMessage:function(e){B(function(){T("invokeMiniProgramAPI",{name:"postMessage",arg:e.data||{}},e)})},getEnv:function(e){B(function(){e({miniprogram:"miniprogram"===r.__wxjs_environment})})}}},k=1,w={},n.addEventListener("error",function(e){var n,i,t;l||(t=(n=e.target).tagName,i=n.src,"IMG"!=t&&"VIDEO"!=t&&"AUDIO"!=t&&"SOURCE"!=t)||-1!=i.indexOf("wxlocalresource://")&&(e.preventDefault(),e.stopPropagation(),(t=n["wx-id"])||(t=k++,n["wx-id"]=t),w[t]||(w[t]=!0,wx.ready(function(){wx.getLocalImgData({localId:i,success:function(e){n.src=e.localData}})})))},!0),n.addEventListener("load",function(e){var n;l||(n=(e=e.target).tagName,"IMG"!=n&&"VIDEO"!=n&&"AUDIO"!=n&&"SOURCE"!=n)||(n=e["wx-id"])&&(w[n]=!1)},!0),e&&(r.wx=r.jWeixin=_),_;function T(n,e,i){r.WeixinJSBridge?WeixinJSBridge.invoke(n,P(e),function(e){A(n,e,i)}):C(n,i)}function M(n,i,t){r.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t.trigger&&t.trigger(e),A(n,e,i)}):C(n,t||i)}function P(e){return(e=e||{}).appId=h.appId,e.verifyAppId=h.appId,e.verifySignType="sha1",e.verifyTimestamp=h.timestamp+"",e.verifyNonceStr=h.nonceStr,e.verifySignature=h.signature,e}function x(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,package:e.package,paySign:e.paySign,signType:e.signType||"SHA1"}}function A(e,n,i){"openEnterpriseChat"==e&&(n.errCode=n.err_code),delete n.err_code,delete n.err_desc,delete n.err_detail;var t=n.errMsg,e=(t||(t=n.err_msg,delete n.err_msg,t=((e,n)=>{var i,t=c[e];return t&&(e=t),t="ok",n&&(i=n.indexOf(":"),"access denied"!=(t=(t=(t=-1!=(t=-1!=(t="failed"==(t="confirm"==(t=n.substring(i+1))?"ok":t)?"fail":t).indexOf("failed_")?t.substring(7):t).indexOf("fail_")?t.substring(5):t).replace(/_/g," ")).toLowerCase())&&"no permission to execute"!=t||(t="permission denied"),""==(t="config"==e&&"function not exist"==t?"ok":t))&&(t="fail"),n=e+":"+t})(e,t),n.errMsg=t),(i=i||{})._complete&&(i._complete(n),delete i._complete),t=n.errMsg||"",h.debug&&!i.isInnerInvoke&&alert(JSON.stringify(n)),t.indexOf(":"));switch(t.substring(e+1)){case"ok":i.success&&i.success(n);break;case"cancel":i.cancel&&i.cancel(n);break;default:i.fail&&i.fail(n)}i.complete&&i.complete(n)}function V(e){if(e){for(var n=0,i=e.length;n<i;++n){var t=e[n],t=a[t];t&&(e[n]=t)}return e}}function C(e,n){var i;!h.debug||n&&n.isInnerInvoke||((i=c[e])&&(e=i),n&&n._complete&&delete n._complete,console.log('"'+e+'",',n||""))}function L(){return(new Date).getTime()}function B(e){o&&(r.WeixinJSBridge?e():n.addEventListener&&n.addEventListener("WeixinJSBridgeReady",e,!1))}});
\ No newline at end of file
diff --git a/src/assets/js/uni.webview.1.5.2.js b/src/assets/js/uni.webview.1.5.2.js
new file mode 100644
index 0000000..b0c8445
--- /dev/null
+++ b/src/assets/js/uni.webview.1.5.2.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
\ No newline at end of file
diff --git a/src/assets/load_error.png b/src/assets/load_error.png
new file mode 100644
index 0000000..695abfd
Binary files /dev/null and b/src/assets/load_error.png differ
diff --git a/src/assets/logo/MaxKB-logo-currentColor.svg b/src/assets/logo/MaxKB-logo-currentColor.svg
new file mode 100644
index 0000000..9428164
--- /dev/null
+++ b/src/assets/logo/MaxKB-logo-currentColor.svg
@@ -0,0 +1,20 @@
+<svg width="122" height="36" viewBox="0 0 122 36" xmlns="http://www.w3.org/2000/svg" fill="#FF8800">
+<g clip-path="url(#clip0_5682_1471)" fill-rule="evenodd">
+<path d="M75.3094 19.0805V27.05H71.8274L71.8109 26.2436C70.5933 26.8762 69.4033 27.1925 68.2412 27.1923H67.8972C66.7033 27.1923 65.7546 26.7337 65.051 25.8166C64.5855 25.1007 64.342 24.2631 64.3513 23.4092V23.3143C64.3513 21.7489 64.9008 20.7092 65.9997 20.1953C66.4505 19.8949 67.5929 19.7447 69.4271 19.7447H71.3008V19.3058C71.3008 18.4045 71.1703 17.8867 70.9094 17.7523C70.6249 17.5388 70.1228 17.4321 69.4033 17.4321H65.6678L65.7312 14.2396L70.032 14.1233C72.5857 14.1233 74.1669 14.7558 74.7758 16.0208C75.1315 16.756 75.3094 17.7759 75.3094 19.0805ZM68.6032 22.3901C68.4844 22.5315 68.3597 22.9902 68.3597 23.3143C68.3597 24.0259 68.7234 24.3817 69.4508 24.3817C69.8855 24.3817 70.5022 24.2038 71.3008 23.848V22.1112C71.3008 22.1112 69.0361 21.875 68.6032 22.3901Z" fill="currentColor"/>
+<path d="M56.6308 27.3317L55.4162 15.1815L52.0028 27.3317H48.028L44.6928 15.1815L43.4348 27.3317L37.9399 27.2849L40.6207 9.35034H47.6212L50.0211 17.8845L52.4444 9.35034H59.281L62.0087 27.3317H56.6308Z" fill="currentColor"/>
+<path d="M85.3943 26.9654L83.5118 23.1105L81.6291 26.9654H77.2017L80.831 20.5778L77.3644 14.6084H81.6525L83.5118 18.2543L85.313 14.6084H89.6009L86.1576 20.5778L89.7637 26.9654H85.3943Z" fill="currentColor"/>
+<path d="M101.114 26.9656C101.029 26.8419 96.8966 20.1336 96.8966 20.1336L95.5396 22.2226V26.9656H90.9727V9.11621H95.5396V16.3526L99.7128 9.17639H104.477L99.514 17.1079L105.855 26.9656H101.114Z" fill="currentColor"/>
+<path d="M121.036 22.145C121.036 24.745 119.74 27.1282 115.097 27.1282H107.032V9.02689L113.203 8.90869C113.203 8.90869 116.858 8.74751 118.706 10.153C120.068 11.1885 120.515 13.0021 120.384 14.5197C120.254 16.0373 119.553 17.0129 118.405 17.727C119.979 18.354 121.036 19.5451 121.036 22.145ZM114.228 16.3325C115.766 16.3325 116.62 15.5559 116.62 14.45C116.62 13.2735 115.833 12.5837 114.228 12.5837L111.576 12.5906V16.3325H114.228ZM114.365 23.5374C116.497 23.5374 117.022 22.393 117.022 21.6316C117.022 20.4308 116.17 19.563 114.752 19.563H111.576V23.5374H114.365Z" fill="currentColor"/>
+<path d="M17.4213 26.7354H12.8296L11.1277 28.4372C11.028 28.5369 10.9601 28.6639 10.9326 28.8022C10.9051 28.9405 10.9193 29.0838 10.9732 29.2141C11.0272 29.3443 11.1185 29.4557 11.2358 29.534C11.353 29.6123 11.4908 29.6541 11.6318 29.6541H18.6192C18.7602 29.6541 18.898 29.6123 19.0153 29.534C19.1325 29.4557 19.2239 29.3443 19.2778 29.2141C19.3318 29.0838 19.3459 28.9405 19.3184 28.8022C19.2909 28.6639 19.223 28.5369 19.1233 28.4372L17.4213 26.7354Z" fill="currentColor"/>
+<path d="M30.04 13.3823H29.1348V19.7499H30.04C30.1305 19.7499 30.2201 19.732 30.3037 19.6974C30.3873 19.6628 30.4633 19.612 30.5273 19.548C30.5913 19.484 30.642 19.4081 30.6767 19.3244C30.7113 19.2408 30.7291 19.1512 30.7291 19.0607V14.0715C30.7291 13.8887 30.6565 13.7134 30.5273 13.5842C30.398 13.4549 30.2227 13.3823 30.04 13.3823Z" fill="currentColor"/>
+<path d="M1.92296 13.3823H1.01776C0.834985 13.3823 0.659698 13.4549 0.530458 13.5842C0.401219 13.7134 0.328613 13.8887 0.328613 14.0715V19.0607C0.328611 19.1512 0.346435 19.2408 0.381067 19.3244C0.415699 19.4081 0.466461 19.484 0.530455 19.548C0.594448 19.612 0.670419 19.6628 0.754031 19.6974C0.837643 19.732 0.927258 19.7499 1.01776 19.7499H1.92296V13.3823Z" fill="currentColor"/>
+<path d="M19.0238 14.2251C18.682 14.2251 18.3541 14.3609 18.1124 14.6026C17.8707 14.8443 17.7349 15.1722 17.7349 15.514V16.4382C17.7349 16.7801 17.8707 17.108 18.1124 17.3497C18.3541 17.5914 18.682 17.7272 19.0239 17.7272C19.3657 17.7272 19.6936 17.5914 19.9353 17.3497C20.1771 17.108 20.3129 16.7801 20.3129 16.4382V15.5141C20.3129 15.3448 20.2796 15.1772 20.2148 15.0208C20.15 14.8644 20.055 14.7223 19.9353 14.6026C19.8156 14.4829 19.6735 14.388 19.5171 14.3232C19.3607 14.2584 19.1931 14.2251 19.0238 14.2251Z" fill="currentColor"/>
+<path d="M12.3012 14.2251C11.9593 14.2251 11.6315 14.3609 11.3897 14.6026C11.148 14.8443 11.0122 15.1722 11.0122 15.514V16.4382C11.0122 16.7801 11.148 17.108 11.3897 17.3497C11.6315 17.5914 11.9593 17.7272 12.3012 17.7272C12.6431 17.7272 12.9709 17.5914 13.2127 17.3497C13.4544 17.108 13.5902 16.7801 13.5902 16.4382V15.5141C13.5902 15.3448 13.5569 15.1772 13.4921 15.0208C13.4273 14.8644 13.3324 14.7223 13.2127 14.6026C13.093 14.4829 12.9509 14.388 12.7945 14.3232C12.6381 14.2584 12.4704 14.2251 12.3012 14.2251Z" fill="currentColor"/>
+<path d="M23.3607 6.91333H7.69709C6.3139 6.91489 4.98782 7.46505 4.00976 8.44311C3.0317 9.42117 2.48154 10.7473 2.47998 12.1304V20.9612C2.48154 22.3444 3.03169 23.6705 4.00975 24.6486C4.98781 25.6266 6.3139 26.1768 7.69709 26.1784H23.3607C24.7439 26.1768 26.07 25.6267 27.0481 24.6486C28.0262 23.6705 28.5764 22.3444 28.5779 20.9612V12.1304C28.5763 10.7472 28.0262 9.42115 27.0481 8.44309C26.07 7.46503 24.7439 6.91487 23.3607 6.91333ZM23.7988 20.9085C23.7988 21.1577 23.6998 21.3968 23.5235 21.573C23.3473 21.7492 23.1083 21.8482 22.859 21.8482H15.2189C14.0629 21.8482 12.9263 22.1453 11.9181 22.711L9.355 24.1492V21.8483H8.19882C7.94958 21.8483 7.71055 21.7493 7.53432 21.573C7.35808 21.3968 7.25907 21.1578 7.25906 20.9085V11.547C7.25907 11.2978 7.35808 11.0588 7.53432 10.8825C7.71056 10.7063 7.94958 10.6073 8.19882 10.6073H22.859C23.1082 10.6073 23.3472 10.7063 23.5235 10.8825C23.6997 11.0588 23.7987 11.2978 23.7987 11.5471L23.7988 20.9085Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_5682_1471">
+<rect width="121" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/logo/MaxKB-logo.svg b/src/assets/logo/MaxKB-logo.svg
new file mode 100644
index 0000000..beb86aa
--- /dev/null
+++ b/src/assets/logo/MaxKB-logo.svg
@@ -0,0 +1,64 @@
+<svg width="122" height="36" viewBox="0 0 122 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5734_851)">
+<path d="M75.3094 19.0802V27.0498H71.8274L71.8109 26.2433C70.5933 26.876 69.4033 27.1922 68.2412 27.1921H67.8972C66.7033 27.1921 65.7546 26.7335 65.051 25.8164C64.5855 25.1005 64.342 24.2629 64.3513 23.409V23.314C64.3513 21.7486 64.9008 20.7089 65.9997 20.195C66.4505 19.8947 67.5929 19.7445 69.4271 19.7444H71.3008V19.3056C71.3008 18.4043 71.1703 17.8865 70.9094 17.752C70.6249 17.5385 70.1228 17.4318 69.4033 17.4318H65.6678L65.7312 14.2393L70.032 14.123C72.5857 14.123 74.1669 14.7555 74.7758 16.0206C75.1315 16.7558 75.3094 17.7757 75.3094 19.0802ZM68.6032 22.3899C68.4844 22.5313 68.3597 22.99 68.3597 23.314C68.3597 24.0256 68.7234 24.3814 69.4508 24.3814C69.8855 24.3814 70.5022 24.2035 71.3008 23.8478V22.111C71.3008 22.111 69.0361 21.8747 68.6032 22.3899Z" fill="url(#paint0_linear_5734_851)"/>
+<path d="M56.6308 27.3319L55.4162 15.1817L52.0028 27.3319H48.028L44.6928 15.1817L43.4348 27.3319L37.9399 27.2851L40.6207 9.35059H47.6212L50.0211 17.8847L52.4444 9.35059H59.281L62.0087 27.3319H56.6308Z" fill="url(#paint1_linear_5734_851)"/>
+<path d="M85.3943 26.9654L83.5118 23.1105L81.6291 26.9654H77.2017L80.831 20.5778L77.3644 14.6084H81.6525L83.5118 18.2543L85.313 14.6084H89.6009L86.1576 20.5778L89.7637 26.9654H85.3943Z" fill="url(#paint2_linear_5734_851)"/>
+<path d="M101.114 26.9656C101.029 26.8419 96.8966 20.1336 96.8966 20.1336L95.5396 22.2226V26.9656H90.9727V9.11621H95.5396V16.3526L99.7128 9.17639H104.477L99.514 17.1079L105.855 26.9656H101.114Z" fill="url(#paint3_linear_5734_851)"/>
+<path d="M121.036 22.1453C121.036 24.7452 119.74 27.1284 115.097 27.1284H107.032V9.02713L113.203 8.90893C113.203 8.90893 116.858 8.74776 118.706 10.1533C120.068 11.1888 120.515 13.0023 120.384 14.5199C120.254 16.0375 119.553 17.0132 118.405 17.7272C119.979 18.3542 121.036 19.5453 121.036 22.1453ZM114.228 16.3327C115.766 16.3327 116.62 15.5561 116.62 14.4502C116.62 13.2738 115.833 12.5839 114.228 12.5839L111.576 12.5909V16.3327H114.228ZM114.365 23.5376C116.497 23.5376 117.022 22.3933 117.022 21.6318C117.022 20.4311 116.17 19.5633 114.752 19.5633H111.576V23.5376H114.365Z" fill="url(#paint4_linear_5734_851)"/>
+<path d="M17.4213 26.7354H12.8296L11.1277 28.4372C11.028 28.5369 10.9601 28.6639 10.9326 28.8022C10.9051 28.9405 10.9193 29.0838 10.9732 29.2141C11.0272 29.3443 11.1185 29.4557 11.2358 29.534C11.353 29.6123 11.4908 29.6541 11.6318 29.6541H18.6192C18.7602 29.6541 18.898 29.6123 19.0153 29.534C19.1325 29.4557 19.2239 29.3443 19.2778 29.2141C19.3318 29.0838 19.3459 28.9405 19.3184 28.8022C19.2909 28.6639 19.223 28.5369 19.1233 28.4372L17.4213 26.7354Z" fill="url(#paint5_linear_5734_851)"/>
+<path d="M30.04 13.3823H29.1348V19.7499H30.04C30.1305 19.7499 30.2201 19.732 30.3037 19.6974C30.3873 19.6628 30.4633 19.612 30.5273 19.548C30.5913 19.484 30.642 19.4081 30.6767 19.3244C30.7113 19.2408 30.7291 19.1512 30.7291 19.0607V14.0715C30.7291 13.8887 30.6565 13.7134 30.5273 13.5842C30.398 13.4549 30.2227 13.3823 30.04 13.3823Z" fill="url(#paint6_linear_5734_851)"/>
+<path d="M1.92296 13.3823H1.01776C0.834985 13.3823 0.659698 13.4549 0.530458 13.5842C0.401219 13.7134 0.328613 13.8887 0.328613 14.0715V19.0607C0.328611 19.1512 0.346435 19.2408 0.381067 19.3244C0.415699 19.4081 0.466461 19.484 0.530455 19.548C0.594448 19.612 0.670419 19.6628 0.754031 19.6974C0.837643 19.732 0.927258 19.7499 1.01776 19.7499H1.92296V13.3823Z" fill="url(#paint7_linear_5734_851)"/>
+<path d="M19.0238 14.2251C18.682 14.2251 18.3541 14.3609 18.1124 14.6026C17.8707 14.8443 17.7349 15.1722 17.7349 15.514V16.4382C17.7349 16.7801 17.8707 17.108 18.1124 17.3497C18.3541 17.5914 18.682 17.7272 19.0239 17.7272C19.3657 17.7272 19.6936 17.5914 19.9353 17.3497C20.1771 17.108 20.3129 16.7801 20.3129 16.4382V15.5141C20.3129 15.3448 20.2796 15.1772 20.2148 15.0208C20.15 14.8644 20.055 14.7223 19.9353 14.6026C19.8156 14.4829 19.6735 14.388 19.5171 14.3232C19.3607 14.2584 19.1931 14.2251 19.0238 14.2251Z" fill="url(#paint8_linear_5734_851)"/>
+<path d="M12.3012 14.2251C11.9593 14.2251 11.6315 14.3609 11.3897 14.6026C11.148 14.8443 11.0122 15.1722 11.0122 15.514V16.4382C11.0122 16.7801 11.148 17.108 11.3897 17.3497C11.6315 17.5914 11.9593 17.7272 12.3012 17.7272C12.6431 17.7272 12.9709 17.5914 13.2127 17.3497C13.4544 17.108 13.5902 16.7801 13.5902 16.4382V15.5141C13.5902 15.3448 13.5569 15.1772 13.4921 15.0208C13.4273 14.8644 13.3324 14.7223 13.2127 14.6026C13.093 14.4829 12.9509 14.388 12.7945 14.3232C12.6381 14.2584 12.4704 14.2251 12.3012 14.2251Z" fill="url(#paint9_linear_5734_851)"/>
+<path d="M23.3607 6.91309H7.69709C6.3139 6.91465 4.98782 7.46481 4.00976 8.44287C3.0317 9.42092 2.48154 10.747 2.47998 12.1302V20.9609C2.48154 22.3441 3.03169 23.6702 4.00975 24.6483C4.98781 25.6264 6.3139 26.1766 7.69709 26.1781H23.3607C24.7439 26.1766 26.07 25.6264 27.0481 24.6483C28.0262 23.6703 28.5764 22.3442 28.5779 20.9609V12.1302C28.5763 10.747 28.0262 9.4209 27.0481 8.44284C26.07 7.46478 24.7439 6.91463 23.3607 6.91309ZM23.7988 20.9082C23.7988 21.1575 23.6998 21.3965 23.5235 21.5727C23.3473 21.749 23.1083 21.848 22.859 21.848H15.2189C14.0629 21.848 12.9263 22.1451 11.9181 22.7108L9.355 24.149V21.848H8.19882C7.94958 21.848 7.71055 21.749 7.53432 21.5728C7.35808 21.3966 7.25907 21.1575 7.25906 20.9083V11.5468C7.25907 11.2976 7.35808 11.0585 7.53432 10.8823C7.71056 10.7061 7.94958 10.6071 8.19882 10.6071H22.859C23.1082 10.6071 23.3472 10.7061 23.5235 10.8823C23.6997 11.0585 23.7987 11.2976 23.7987 11.5468L23.7988 20.9082Z" fill="url(#paint10_linear_5734_851)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5734_851" x1="69.8304" y1="10.0003" x2="69.8304" y2="27.3566" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5734_851" x1="49.9743" y1="10.5855" x2="49.9743" y2="27.4838" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5734_851" x1="83.4827" y1="9.95634" x2="83.4827" y2="26.918" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5734_851" x1="98.4139" y1="9.57325" x2="98.4139" y2="26.5967" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint4_linear_5734_851" x1="114.034" y1="9.05828" x2="114.034" y2="26.3934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint5_linear_5734_851" x1="15.1255" y1="26.7354" x2="15.1255" y2="29.6542" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint6_linear_5734_851" x1="29.9319" y1="13.3823" x2="29.9319" y2="19.7499" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint7_linear_5734_851" x1="1.12576" y1="13.3823" x2="1.12576" y2="19.7499" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint8_linear_5734_851" x1="19.0238" y1="14.2251" x2="19.0238" y2="17.7273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint9_linear_5734_851" x1="12.3012" y1="14.2251" x2="12.3012" y2="17.7273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<linearGradient id="paint10_linear_5734_851" x1="15.5289" y1="6.91309" x2="15.5289" y2="26.1782" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3370FF"/>
+<stop offset="1" stop-color="#7F3BF5"/>
+</linearGradient>
+<clipPath id="clip0_5734_851">
+<rect width="121" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/logo/logo-currentColor.svg b/src/assets/logo/logo-currentColor.svg
new file mode 100644
index 0000000..5f50e4c
--- /dev/null
+++ b/src/assets/logo/logo-currentColor.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.4409 232.4409"><title>MaxKB</title><path class="cls-1" d="M128.4532,177H98.7785L87.78,187.9985a4.6069,4.6069,0,0,0,3.2576,7.8644h45.1569a4.6069,4.6069,0,0,0,3.2575-7.8644Z"/><path class="cls-1" d="M210.0008,90.7042h-5.85v41.1511h5.85a4.4537,4.4537,0,0,0,4.4537-4.4537V95.1579A4.4537,4.4537,0,0,0,210.0008,90.7042Z"/><path class="cls-1" d="M28.29,90.7042H22.44a4.4538,4.4538,0,0,0-4.4538,4.4537v32.2437a4.4538,4.4538,0,0,0,4.4538,4.4537h5.85Z"/><path class="cls-1" d="M138.8087,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,138.8087,96.1512Z"/><path class="cls-1" d="M95.3622,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,95.3622,96.1512Z"/><path class="cls-1" d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/logo/logo.svg b/src/assets/logo/logo.svg
new file mode 100644
index 0000000..2e601bb
--- /dev/null
+++ b/src/assets/logo/logo.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 232.4409 232.4409"><defs><style>.cls-1{fill:url(#未命名的渐变_7);}.cls-2{fill:url(#未命名的渐变_7-2);}.cls-3{fill:url(#未命名的渐变_7-3);}.cls-4{fill:url(#未命名的渐变_7-4);}.cls-5{fill:url(#未命名的渐变_7-5);}.cls-6{fill:url(#未命名的渐变_7-6);}</style><linearGradient id="未命名的渐变_7" x1="113.6159" y1="176.9998" x2="113.6159" y2="195.8629" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3370FF"/><stop offset="1" stop-color="#7f3bf5"/></linearGradient><linearGradient id="未命名的渐变_7-2" x1="209.3027" y1="90.7042" x2="209.3027" y2="131.8553" xlink:href="#未命名的渐变_7"/><linearGradient id="未命名的渐变_7-3" x1="23.1384" y1="90.7042" x2="23.1384" y2="131.8553" xlink:href="#未命名的渐变_7"/><linearGradient id="未命名的渐变_7-4" x1="138.8087" y1="96.1512" x2="138.8087" y2="118.7847" xlink:href="#未命名的渐变_7"/><linearGradient id="未命名的渐变_7-5" x1="95.3622" y1="96.1512" x2="95.3622" y2="118.7847" xlink:href="#未命名的渐变_7"/><linearGradient id="未命名的渐变_7-6" x1="116.2206" y1="48.8968" x2="116.2206" y2="173.4002" xlink:href="#未命名的渐变_7"/></defs><title>MaxKB</title><path class="cls-1" d="M128.4532,177H98.7785L87.78,187.9985a4.6069,4.6069,0,0,0,3.2576,7.8644h45.1569a4.6069,4.6069,0,0,0,3.2575-7.8644Z"/><path class="cls-2" d="M210.0008,90.7042h-5.85v41.1511h5.85a4.4537,4.4537,0,0,0,4.4537-4.4537V95.1579A4.4537,4.4537,0,0,0,210.0008,90.7042Z"/><path class="cls-3" d="M28.29,90.7042H22.44a4.4538,4.4538,0,0,0-4.4538,4.4537v32.2437a4.4538,4.4538,0,0,0,4.4538,4.4537h5.85Z"/><path class="cls-4" d="M138.8087,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,138.8087,96.1512Z"/><path class="cls-5" d="M95.3622,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,95.3622,96.1512Z"/><path class="cls-6" d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/logo_dingtalk.svg b/src/assets/logo_dingtalk.svg
new file mode 100644
index 0000000..64d957d
--- /dev/null
+++ b/src/assets/logo_dingtalk.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.7371 16.6285C32.6394 16.9833 32.5125 17.3284 32.3563 17.6604H32.3595L32.34 17.7027C31.23 20.1961 28.3297 25.0917 28.3297 25.0917L28.3167 25.0591L27.4704 26.6085H31.5523L23.7531 37.5L25.5239 30.0915H22.3079L23.4244 25.1926C22.5195 25.4205 21.455 25.7362 20.1888 26.1626C20.1888 26.1626 18.4799 27.214 15.2607 24.138C15.2607 24.138 13.0895 22.1328 14.3492 21.6283C14.8831 21.4167 16.9468 21.1466 18.5711 20.9122C20.7617 20.5997 22.1126 20.4337 22.1126 20.4337C22.1126 20.4337 15.3518 20.5411 13.7471 20.2742C12.1423 20.0105 10.1112 17.1982 9.67497 14.7276C9.67497 14.7276 9.00443 13.3702 11.1137 14.0115C13.2262 14.6527 21.9661 16.5113 21.9661 16.5113C21.9661 16.5113 10.6027 12.8559 9.84749 11.964C9.09232 11.0721 7.62103 7.08794 7.81308 4.64339C7.81308 4.64339 7.89771 4.03144 8.49339 4.19419C8.49339 4.19419 16.898 8.23047 22.6431 10.4341C28.3883 12.6443 33.3816 13.7706 32.7371 16.6285Z" fill="#3296FA"/>
+</svg>
diff --git a/src/assets/logo_lark.svg b/src/assets/logo_lark.svg
new file mode 100644
index 0000000..938c505
--- /dev/null
+++ b/src/assets/logo_lark.svg
@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_7009_1160" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="6" width="34" height="28">
+<path d="M37.5349 6.66666H4.00006V33.3333H37.5349V6.66666Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_7009_1160)">
+<path d="M21.4253 20.6715C21.4526 20.644 21.4819 20.6185 21.5093 20.5911C21.5659 20.5381 21.6207 20.4833 21.6755 20.4284L21.7889 20.3171L22.1305 19.9789L22.5946 19.5204L22.9929 19.1257L23.3674 18.7548L23.7585 18.3693L24.1166 18.0148L24.6154 17.5215C24.7103 17.4284 24.8073 17.3369 24.9059 17.2475C25.0867 17.0812 25.2731 16.9223 25.465 16.7688C25.6403 16.6281 25.8213 16.4928 26.0039 16.3613C26.2615 16.1787 26.5283 16.0068 26.8006 15.8461C27.0674 15.6889 27.3414 15.5409 27.6227 15.4057C27.8859 15.2779 28.1563 15.1609 28.4303 15.0531C28.5838 14.9928 28.7373 14.9361 28.8945 14.8832C28.973 14.8557 29.0515 14.8301 29.1302 14.8064C28.4267 12.0365 27.1405 9.50052 25.4065 7.33532C25.0703 6.91146 24.555 6.66666 24.0106 6.66666H9.62754C9.36634 6.66666 9.25848 6.99919 9.46861 7.15266C14.3617 10.7393 18.4434 15.3637 21.3923 20.7025C21.4033 20.6933 21.4142 20.6824 21.4253 20.6715Z" fill="#00D6B9"/>
+<path d="M15.721 33.3333C23.1482 33.3333 29.6179 29.2351 32.9945 23.1764C33.1133 22.9645 33.2283 22.7489 33.3379 22.5315C33.1662 22.8603 32.9781 23.1709 32.7715 23.4633C32.6985 23.5675 32.6235 23.6697 32.545 23.7703C32.4482 23.8963 32.3477 24.0169 32.2454 24.1356C32.1631 24.2288 32.0809 24.3201 31.995 24.4097C31.8215 24.5907 31.6406 24.7605 31.4523 24.9213C31.3482 25.0108 31.2423 25.0967 31.1326 25.1808C31.0047 25.2776 30.875 25.3708 30.7435 25.4603C30.6594 25.5169 30.5754 25.5717 30.4895 25.6229C30.3999 25.6777 30.3105 25.7306 30.2173 25.7818C30.0309 25.886 29.8409 25.9811 29.6473 26.0688C29.4791 26.1455 29.3074 26.2149 29.1338 26.2788C28.9455 26.3483 28.7538 26.4085 28.5601 26.4633C28.2714 26.5437 27.979 26.6059 27.6794 26.6535C27.4638 26.6863 27.2463 26.7119 27.0253 26.7265C26.7951 26.7429 26.5613 26.7484 26.3255 26.7448C26.0679 26.741 25.8085 26.7247 25.5454 26.6955C25.3535 26.6753 25.1598 26.6461 24.9679 26.6132C24.7999 26.584 24.6318 26.5475 24.4619 26.5072C24.3723 26.4853 24.2846 26.4633 24.1951 26.4396C23.9466 26.372 23.6999 26.3044 23.4551 26.2332C23.3327 26.1984 23.2103 26.1619 23.0879 26.1253C22.9051 26.0705 22.7225 26.0157 22.5415 25.9591C22.3935 25.9135 22.2438 25.8659 22.0958 25.8165C21.9551 25.7709 21.8143 25.7252 21.6737 25.6777C21.5787 25.6448 21.4818 25.6137 21.3869 25.5809C21.2699 25.5407 21.1549 25.5005 21.0397 25.4603C20.9575 25.4311 20.8734 25.4018 20.7913 25.3727C20.6267 25.3141 20.4642 25.2539 20.3015 25.1936C20.2065 25.1588 20.1134 25.1223 20.0183 25.0857C19.8923 25.0383 19.7662 24.9889 19.6401 24.9396C19.5067 24.8865 19.3751 24.8355 19.2418 24.7807C19.1559 24.7459 19.0701 24.7112 18.9842 24.6747C18.8782 24.6308 18.7705 24.5869 18.6645 24.5413C18.5822 24.5065 18.5001 24.4719 18.4178 24.4371C18.3319 24.4005 18.2461 24.364 18.1619 24.3257C18.0889 24.2928 18.0139 24.2617 17.9409 24.2288C17.8733 24.1996 17.8057 24.1685 17.7381 24.1393C17.6705 24.1083 17.6011 24.0772 17.5335 24.0461C17.4622 24.0132 17.3927 23.9821 17.3215 23.9493C17.2319 23.9072 17.1443 23.8671 17.0547 23.8251C16.9615 23.7812 16.8685 23.7373 16.777 23.6935C16.6783 23.646 16.5797 23.5985 16.481 23.5492C16.397 23.5071 16.313 23.4669 16.2289 23.4249C11.7817 21.2013 7.83513 18.2377 4.46597 14.6475C4.29787 14.4684 4.00006 14.5872 4.00006 14.832L4.00737 27.5249V28.5554C4.00737 29.1529 4.30337 29.7156 4.80034 30.0464C7.92833 32.122 11.683 33.3333 15.721 33.3333Z" fill="#3370FF"/>
+<path d="M32.9945 23.1764C32.9909 23.1819 32.9871 23.1873 32.9854 23.1929L32.9945 23.1764L33.0621 23.0521C33.0383 23.0943 33.0163 23.1344 32.9945 23.1764Z" fill="#133C92"/>
+<path d="M33.3033 22.5954L33.3216 22.5625L33.3306 22.5461C33.3215 22.5625 33.3123 22.5789 33.3033 22.5954Z" fill="#133C92"/>
+<path d="M37.5348 15.4422C36.0292 14.7005 34.3355 14.2838 32.5431 14.2838C31.4779 14.2838 30.4475 14.43 29.4718 14.706C29.3586 14.737 29.2471 14.7717 29.1356 14.8064C29.0571 14.832 28.9784 14.8576 28.8999 14.8832C28.7428 14.9361 28.5892 14.9928 28.4358 15.053C28.1618 15.1609 27.8914 15.2778 27.6283 15.4057C27.3468 15.5409 27.0728 15.6889 26.806 15.8461C26.532 16.0068 26.2671 16.1786 26.0094 16.3613C25.8248 16.491 25.6458 16.6281 25.4704 16.7688C25.2786 16.9222 25.0922 17.083 24.9114 17.2474C24.8127 17.3369 24.7158 17.4284 24.6208 17.5214L24.122 18.0148L23.7639 18.3693L23.3728 18.7548L22.9983 19.1257L22.6 19.5204L22.1359 19.9789L21.7943 20.317L21.681 20.4284C21.6262 20.4833 21.5695 20.5362 21.5147 20.591C21.4874 20.6185 21.458 20.644 21.4307 20.6714C21.3887 20.7116 21.3466 20.7518 21.3046 20.792C21.2571 20.8358 21.2114 20.8797 21.1639 20.9236C19.9324 22.0545 18.5566 23.0321 17.0675 23.8232C17.1552 23.8652 17.2448 23.9073 17.3343 23.9474C17.4038 23.9804 17.475 24.0132 17.5463 24.0442C17.6139 24.0753 17.6832 24.1064 17.7508 24.1374C17.8184 24.1685 17.886 24.1977 17.9536 24.227C18.0268 24.2598 18.1016 24.2928 18.1748 24.3238C18.2607 24.3604 18.3447 24.3988 18.4306 24.4353C18.5128 24.47 18.595 24.5048 18.6772 24.5394C18.7832 24.585 18.891 24.6289 18.997 24.6728C19.0828 24.7076 19.1687 24.7422 19.2546 24.7788C19.3862 24.8317 19.5195 24.8848 19.6528 24.9377C19.779 24.987 19.9051 25.0364 20.0311 25.084C20.1262 25.1205 20.2194 25.1552 20.3143 25.1917C20.477 25.252 20.6395 25.3122 20.804 25.3708C20.8862 25.4 20.9684 25.4292 21.0524 25.4585C21.1676 25.4986 21.2846 25.5389 21.3996 25.579C21.4946 25.612 21.5915 25.6448 21.6864 25.6758C21.8271 25.7234 21.9679 25.769 22.1086 25.8148C22.2566 25.8622 22.4046 25.9097 22.5543 25.9573C22.7352 26.0138 22.9179 26.0688 23.1007 26.1236C23.2231 26.1601 23.3455 26.1966 23.4679 26.2313C23.7127 26.3026 23.9594 26.372 24.2079 26.4378C24.2974 26.4616 24.3851 26.4853 24.4747 26.5054C24.6446 26.5456 24.8127 26.5804 24.9807 26.6113C25.1744 26.6461 25.3663 26.6734 25.5582 26.6936C25.8194 26.7228 26.0807 26.7393 26.3383 26.7429C26.574 26.7466 26.806 26.741 27.038 26.7246C27.2591 26.7082 27.4766 26.6845 27.6922 26.6516C27.9918 26.6058 28.2842 26.542 28.5728 26.4616C28.7666 26.4085 28.9584 26.3465 29.1466 26.277C29.3202 26.213 29.4919 26.1436 29.66 26.0669C29.8536 25.9792 30.0436 25.8842 30.23 25.78C30.3214 25.7289 30.4127 25.6758 30.5023 25.621C30.5882 25.5681 30.6722 25.5133 30.7563 25.4585C30.8878 25.3689 31.0175 25.2757 31.1454 25.1789C31.2532 25.0949 31.361 25.009 31.4651 24.9194C31.6534 24.7586 31.8343 24.5869 32.0078 24.4078C32.0936 24.3184 32.1759 24.2288 32.2582 24.1338C32.3604 24.015 32.461 23.8945 32.5578 23.7684C32.6346 23.6678 32.7112 23.5656 32.7843 23.4614C32.989 23.1709 33.1754 22.8621 33.3452 22.5369L33.5371 22.1532L35.2766 18.6872L35.2728 18.6945C35.8192 17.474 36.592 16.3741 37.5348 15.4422Z" fill="#133C9A"/>
+</g>
+</svg>
diff --git a/src/assets/logo_wechat-work.svg b/src/assets/logo_wechat-work.svg
new file mode 100644
index 0000000..ea86012
--- /dev/null
+++ b/src/assets/logo_wechat-work.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9508 30.4241C26.7624 30.6118 26.7508 30.9095 26.9144 31.1116C26.9254 31.1254 26.9374 31.1388 26.9508 31.1522C26.9732 31.1746 26.9976 31.1938 27.0227 31.2117C27.0729 31.2584 27.1227 31.3066 27.1715 31.3554C28.1351 32.3193 28.7408 33.5049 28.9893 34.7479C28.9934 34.8177 29.001 34.8875 29.0127 34.9569C29.0247 35.0332 29.0409 35.1092 29.0612 35.1841C29.1564 35.5334 29.341 35.8637 29.6153 36.1381C30.4561 36.9789 31.8195 36.9789 32.6599 36.1381C33.5008 35.2972 33.5008 33.9342 32.6599 33.0934C32.3636 32.7967 32.002 32.6056 31.6218 32.518C31.5795 32.5083 31.5365 32.4997 31.4936 32.4929C31.4506 32.4856 31.4073 32.4795 31.3633 32.4746C30.0893 32.2375 28.8714 31.6263 27.8862 30.6407C27.815 30.5699 27.7459 30.4974 27.6792 30.4238L27.6789 30.4241C27.5782 30.3238 27.4465 30.2732 27.3149 30.2732C27.1829 30.2732 27.0512 30.3238 26.9508 30.4241Z" fill="#FB6500"/>
+<path d="M35.7037 27.0198C35.4074 27.3168 35.2163 27.6781 35.1286 28.0583C35.119 28.1006 35.1104 28.1436 35.1028 28.1865C35.096 28.2298 35.0898 28.2732 35.0853 28.3168C34.8481 29.5904 34.2369 30.8087 33.2514 31.7943C33.1802 31.8651 33.1077 31.9342 33.0345 32.0009L33.0348 32.0012C32.8337 32.2023 32.8337 32.5282 33.0348 32.7293C33.2225 32.9173 33.5198 32.9293 33.7223 32.7657C33.7357 32.7547 33.7495 32.7427 33.7625 32.7293C33.7849 32.7069 33.8045 32.6829 33.8223 32.6578C33.8691 32.6072 33.9165 32.5577 33.966 32.5086C34.9296 31.545 36.1152 30.9393 37.3582 30.6911C37.4284 30.687 37.4981 30.6795 37.5676 30.6678C37.6439 30.6557 37.7195 30.6396 37.7945 30.6186C38.1444 30.5234 38.4744 30.3395 38.7487 30.0652C39.5895 29.2243 39.5895 27.8613 38.7487 27.0198C38.3283 26.5994 37.7773 26.3894 37.2262 26.3894C36.6752 26.3894 36.1241 26.5994 35.7037 27.0198Z" fill="#3880E7"/>
+<path d="M29.6306 20.9315C28.7905 21.7723 28.7905 23.1357 29.6306 23.9765C29.9269 24.2728 30.2882 24.4643 30.6684 24.5516C30.7114 24.5612 30.7544 24.5698 30.7973 24.577C30.8406 24.5842 30.884 24.5904 30.9273 24.5949C32.2016 24.8324 33.4192 25.4433 34.4047 26.4288C34.4759 26.4997 34.545 26.5729 34.612 26.6458C34.8134 26.8469 35.139 26.8469 35.3404 26.6458C35.5285 26.4577 35.5401 26.1604 35.3765 25.9582C35.3648 25.9441 35.3531 25.9304 35.3404 25.9177C35.3181 25.895 35.2933 25.8757 35.2686 25.8585C35.218 25.8111 35.1685 25.763 35.1194 25.7142C34.1555 24.7506 33.5501 23.565 33.3013 22.3216C33.2978 22.2519 33.2899 22.1821 33.2789 22.113C33.2669 22.0367 33.25 21.9607 33.2301 21.8854C33.1342 21.5362 32.9499 21.2061 32.676 20.9315C32.2556 20.5111 31.7042 20.3007 31.1531 20.3007C30.6021 20.3007 30.051 20.5111 29.6306 20.9315Z" fill="#2DBC00"/>
+<path d="M28.5685 24.3038C28.5547 24.3155 28.541 24.3272 28.5283 24.3406C28.5056 24.3629 28.4863 24.3866 28.4684 24.4121C28.4217 24.4623 28.3739 24.5118 28.3248 24.5609C27.3612 25.5248 26.1756 26.1305 24.9322 26.3784C24.8624 26.3825 24.7927 26.3904 24.7232 26.4017C24.6469 26.4134 24.5709 26.4303 24.496 26.4509C24.1464 26.5461 23.8164 26.7304 23.5417 27.0043C22.7009 27.8455 22.7009 29.2089 23.5417 30.0497C24.3829 30.8905 25.7459 30.8905 26.5871 30.0497C26.883 29.7537 27.0749 29.3921 27.1625 29.0119C27.1718 28.9689 27.1807 28.9259 27.1873 28.883C27.1948 28.8397 27.2003 28.7964 27.2055 28.753C27.443 27.4791 28.0539 26.2611 29.0394 25.2753C29.1106 25.2044 29.1831 25.1357 29.2567 25.0687L29.2563 25.0683C29.4571 24.8672 29.4571 24.5413 29.2563 24.3406C29.1556 24.2399 29.024 24.1897 28.892 24.1897C28.7771 24.1897 28.6627 24.2278 28.5685 24.3038Z" fill="#FFCC00"/>
+<path d="M15.5511 5.69592C11.6835 6.11633 8.16861 7.77118 5.65369 10.3549C4.66092 11.3748 3.85206 12.5143 3.24911 13.7419C2.43097 15.407 2.01605 17.175 2.01605 18.9962C2.01605 21.341 2.72969 23.6527 4.07997 25.6823C4.7637 26.7105 5.8816 28.0054 6.91046 28.9177V28.9198L6.4457 32.5736C6.42714 32.6234 6.4072 32.6726 6.39586 32.7252C6.3852 32.7726 6.38211 32.8221 6.37695 32.8713C6.3742 32.9084 6.36595 32.9448 6.36595 32.9833C6.36595 33.0239 6.3742 33.0624 6.37798 33.1026C6.43917 33.7038 6.94037 34.1751 7.55776 34.1751C7.77295 34.1751 7.97198 34.1136 8.14592 34.0136C8.15142 34.0105 8.15761 34.0077 8.16277 34.0046C8.18855 33.9895 8.21433 33.9764 8.23874 33.9593L9.34907 33.402L12.6584 31.741C13.6096 32.0143 14.5536 32.1886 15.5487 32.2979C16.1957 32.369 16.8519 32.4055 17.5006 32.4055C18.1613 32.4055 18.8467 32.3656 19.5366 32.2872C20.8941 32.1329 22.1997 31.8197 23.439 31.3752C23.3049 31.3302 23.1733 31.2725 23.0457 31.1996C22.2874 30.7661 21.8952 29.9411 21.9729 29.1247C21.0873 29.4059 20.1623 29.6076 19.2066 29.7163C18.6264 29.7823 18.0523 29.8156 17.5006 29.8156C16.9578 29.8156 16.4088 29.7854 15.867 29.7259C15.7543 29.7139 15.6415 29.696 15.5288 29.6809C14.7849 29.5819 14.0499 29.4299 13.3394 29.2223C13.195 29.1762 13.0414 29.1525 12.8846 29.1525C12.6392 29.1525 12.4016 29.2175 12.161 29.3423C12.1297 29.3584 12.0984 29.3718 12.0672 29.39L9.34907 30.9919L9.23151 31.0617L9.22841 31.0631C9.16929 31.0975 9.13629 31.1105 9.10604 31.1105C9.006 31.1105 8.92522 31.0263 8.92522 30.9225L9.03007 30.4993C9.05963 30.3873 9.10122 30.2302 9.15072 30.0387C9.20985 29.8142 9.27895 29.5502 9.34907 29.2842C9.42642 28.9899 9.50376 28.6932 9.56976 28.4416C9.59727 28.3436 9.62511 28.2261 9.62511 28.0941C9.62511 27.7287 9.45082 27.3839 9.15966 27.1721C9.0115 27.0628 8.86369 26.948 8.70831 26.8215C8.47043 26.6273 8.24252 26.4255 8.02355 26.2179C7.40788 25.6338 6.86749 24.9965 6.41305 24.3134C5.34431 22.7064 4.77883 20.8827 4.77883 19.0395C4.77883 17.6088 5.10608 16.218 5.75097 14.9045C6.23326 13.9237 6.88193 13.0104 7.68048 12.1902C9.74783 10.0658 12.6553 8.70379 15.867 8.35487C16.4253 8.29437 16.9753 8.26309 17.5006 8.26309C18.052 8.26309 18.6257 8.29644 19.2066 8.36278C22.4032 8.72579 25.2935 10.095 27.3454 12.217C28.1402 13.0392 28.7858 13.9547 29.2643 14.9378C29.8989 16.2424 30.2206 17.6226 30.2206 19.0395C30.2206 19.1863 30.2113 19.3334 30.2045 19.4802C31.0333 18.9728 32.1288 19.0722 32.8473 19.7899C32.8834 19.8267 32.9139 19.8663 32.9466 19.9044C32.97 19.6026 32.9837 19.2997 32.9837 18.9962C32.9837 17.1918 32.5753 15.438 31.7703 13.7838C31.1721 12.5528 30.3671 11.4109 29.3787 10.3882C26.882 7.80658 23.3864 6.14314 19.5366 5.7052C18.8454 5.62682 18.1602 5.58694 17.5006 5.58694C16.8712 5.58694 16.2156 5.62338 15.5511 5.69592Z" fill="#0082EF"/>
+</svg>
diff --git a/src/assets/logo_wechat.svg b/src/assets/logo_wechat.svg
new file mode 100644
index 0000000..6c0e78d
--- /dev/null
+++ b/src/assets/logo_wechat.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.4855 13.974C26.9025 13.974 27.3196 14.0125 27.7345 14.0489C26.6184 8.86961 21.0198 5 14.6421 5C7.51045 5.02502 1.66672 9.84509 1.66672 15.9656C1.66672 19.4941 3.61468 22.4043 6.85045 24.6575L5.54437 28.5227L10.0863 26.2719C11.7134 26.5901 13.0196 26.9084 14.6261 26.9084C15.0432 26.9084 15.4397 26.8902 15.8361 26.8538C15.5785 25.9748 15.4451 25.0642 15.4397 24.1483C15.4581 18.537 20.3208 13.9762 26.4878 13.9762L26.4855 13.974H26.4855ZM19.5051 10.4862C20.4905 10.4862 21.1321 11.1228 21.1321 12.1004C21.1321 13.0553 20.4905 13.7147 19.5051 13.7147C18.5402 13.7147 17.5571 13.0759 17.5571 12.1003C17.5571 11.1228 18.5402 10.4862 19.5051 10.4862ZM10.4231 13.7147C9.46072 13.7147 8.47535 13.0759 8.47535 12.1003C8.47535 11.1228 9.46072 10.4862 10.4231 10.4862C11.388 10.4862 12.0503 11.1228 12.0503 12.1004C12.0503 13.0553 11.4086 13.7147 10.4231 13.7147ZM38.3334 24.0141C38.3334 18.8712 33.1497 14.6674 27.3012 14.6674C21.1343 14.6674 16.2714 18.8712 16.2714 24.0141C16.2714 29.1752 21.1343 33.3631 27.3012 33.3631C28.5892 33.3631 29.8953 33.0448 31.1994 32.7243L34.756 34.6568L33.7729 31.4464C36.3854 29.4776 38.3334 26.9038 38.3334 24.0141ZM23.7262 22.3997C23.0846 22.3997 22.42 21.7632 22.42 21.1039C22.42 20.4673 23.0846 19.808 23.7262 19.808C24.7116 19.808 25.3534 20.4469 25.3534 21.1039C25.3534 21.7632 24.7116 22.3997 23.7262 22.3997ZM30.8602 22.3997C30.2163 22.3997 29.5722 21.7632 29.5722 21.1039C29.5722 20.4673 30.214 19.808 30.8602 19.808C31.8433 19.808 32.4872 20.4469 32.4872 21.1039C32.4872 21.7632 31.8433 22.3997 30.8602 22.3997Z" fill="#09BB07"/>
+</svg>
diff --git a/src/assets/md-icon.svg b/src/assets/md-icon.svg
new file mode 100644
index 0000000..7b35a92
--- /dev/null
+++ b/src/assets/md-icon.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="42" viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66663 5.16667C6.66663 4.24619 7.41282 3.5 8.33329 3.5H24.6548C24.8758 3.5 25.0878 3.5878 25.244 3.74408L33.0892 11.5893C33.2455 11.7455 33.3333 11.9575 33.3333 12.1785V36.8333C33.3333 37.7538 32.5871 38.5 31.6666 38.5H8.33329C7.41282 38.5 6.66663 37.7538 6.66663 36.8333V5.16667Z" fill="#14C0FF"/>
+<path d="M10 29.2051V21H12.0513L15.1282 24.0769L18.2051 21H20.2564V29.2051H18.2051V23.9026L15.1282 26.9795L12.0513 23.9026V29.2051H10ZM24.359 21H27.4359V25.1026H30L25.8974 29.7179L21.7949 25.1026H24.359V21Z" fill="white"/>
+<path d="M25 3.57495C25.09 3.6159 25.1728 3.67292 25.2441 3.74418L33.0893 11.5894C33.1605 11.6606 33.2175 11.7434 33.2585 11.8334H26.6667C25.7462 11.8334 25 11.0872 25 10.1668V3.57495Z" fill="#11A3D9"/>
+</svg>
diff --git a/src/assets/pdf-icon.svg b/src/assets/pdf-icon.svg
new file mode 100644
index 0000000..17a4be0
--- /dev/null
+++ b/src/assets/pdf-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#F54A45"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#D03F3B"/>
+<path d="M17.6091 15.2316C17.3608 14.9368 16.8517 14.7934 16.0526 14.7934C15.5881 14.7934 15.027 14.8425 14.3839 14.9392C12.6276 13.6551 12.1372 12.2384 12.1372 12.2384C12.1372 12.2384 12.4371 11.4747 12.4562 10.2274C12.4682 9.43896 12.3461 8.9071 12.0307 8.59811C11.908 8.478 11.7023 8.40039 11.5066 8.40039C11.3539 8.40039 11.2109 8.44525 11.0937 8.53102C10.1806 9.19913 11.1775 12.3487 11.2041 12.4326C10.7733 13.4931 10.2305 14.6165 9.6718 15.6037C9.49028 15.9244 9.50797 15.8994 9.35494 16.1602C9.35494 16.1602 7.80983 16.8859 7.06037 17.7773C6.63691 18.281 6.58338 18.621 6.60586 18.8801L6.60643 18.8858C6.6421 19.1909 7.03273 19.4688 7.42598 19.4688C7.44229 19.4688 7.45871 19.4683 7.47478 19.4673C7.87445 19.4426 8.31243 19.1586 8.81374 18.5991C9.14462 18.2297 9.57462 17.5798 10.0924 16.6668C11.5778 16.2442 12.8851 15.9432 13.9807 15.7716C14.7842 16.204 15.9795 16.6936 16.7932 16.6936C17.0661 16.6936 17.2857 16.638 17.4458 16.5282C17.6373 16.397 17.7187 16.2334 17.7692 15.9306C17.8198 15.6278 17.7494 15.3982 17.6091 15.2316ZM15.8737 15.6003C16.5879 15.6003 16.9745 15.7041 17.1732 15.7912C17.2345 15.8181 17.279 15.844 17.3106 15.8657C17.2547 15.9014 17.1446 15.9466 16.9456 15.9466C16.6156 15.9466 16.1826 15.8314 15.6544 15.6034C15.7295 15.6013 15.8027 15.6003 15.8737 15.6003ZM11.6412 9.03253C11.6417 9.03159 11.6422 9.03062 11.6429 9.02961C11.7961 9.11028 11.8676 9.67679 11.8532 10.0053C11.8339 10.4461 11.8293 10.6164 11.752 10.8872C11.5422 10.3226 11.5273 9.30775 11.6412 9.03253ZM11.6972 13.5014C12.0575 14.0864 12.5917 14.7201 13.1065 15.1725C12.1018 15.3848 11.1372 15.651 10.537 15.8581C11.1803 14.7595 11.655 13.6103 11.6972 13.5014ZM7.56217 18.5462C7.64933 18.401 7.88748 18.1197 8.49143 17.5757C8.07746 18.1983 7.77338 18.5373 7.46488 18.7488C7.49042 18.6821 7.52255 18.6122 7.56217 18.5462Z" fill="white"/>
+</svg>
diff --git a/src/assets/theme/default.jpg b/src/assets/theme/default.jpg
new file mode 100644
index 0000000..162ebe9
Binary files /dev/null and b/src/assets/theme/default.jpg differ
diff --git a/src/assets/theme/green.jpg b/src/assets/theme/green.jpg
new file mode 100644
index 0000000..937e8a0
Binary files /dev/null and b/src/assets/theme/green.jpg differ
diff --git a/src/assets/theme/orange.jpg b/src/assets/theme/orange.jpg
new file mode 100644
index 0000000..64b4c6a
Binary files /dev/null and b/src/assets/theme/orange.jpg differ
diff --git a/src/assets/theme/purple.jpg b/src/assets/theme/purple.jpg
new file mode 100644
index 0000000..843a425
Binary files /dev/null and b/src/assets/theme/purple.jpg differ
diff --git a/src/assets/theme/red.jpg b/src/assets/theme/red.jpg
new file mode 100644
index 0000000..cabf84f
Binary files /dev/null and b/src/assets/theme/red.jpg differ
diff --git a/src/assets/tipIMG.jpg b/src/assets/tipIMG.jpg
new file mode 100644
index 0000000..9f6955d
Binary files /dev/null and b/src/assets/tipIMG.jpg differ
diff --git a/src/assets/txt-icon.svg b/src/assets/txt-icon.svg
new file mode 100644
index 0000000..051ea2b
--- /dev/null
+++ b/src/assets/txt-icon.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="42" viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66699 5.16667C6.66699 4.24619 7.41318 3.5 8.33366 3.5H24.6551C24.8762 3.5 25.0881 3.5878 25.2444 3.74408L33.0896 11.5893C33.2459 11.7455 33.3337 11.9575 33.3337 12.1785V36.8333C33.3337 37.7538 32.5875 38.5 31.667 38.5H8.33366C7.41318 38.5 6.66699 37.7538 6.66699 36.8333V5.16667Z" fill="#3370FF"/>
+<path d="M25.0532 21.8466H22.9132V20.5266H28.7632V21.8466H26.6232V27.6666H25.0532V21.8466Z" fill="white"/>
+<path d="M18.5533 23.9266L16.2533 20.5266H18.0733L19.4733 22.8066L20.9233 20.5266H22.6433L20.3533 23.9366L22.8433 27.6666H20.9733L19.4133 25.1966L17.8233 27.6666H16.0633L18.5533 23.9266Z" fill="white"/>
+<path d="M12.27 21.8466H10.13V20.5266H15.98V21.8466H13.84V27.6666H12.27V21.8466Z" fill="white"/>
+<path d="M25 3.57495C25.09 3.6159 25.1728 3.67292 25.2441 3.74418L33.0893 11.5894C33.1605 11.6606 33.2175 11.7434 33.2585 11.8334H26.6667C25.7462 11.8334 25 11.0872 25 10.1668V3.57495Z" fill="#2B5FD9"/>
+</svg>
diff --git a/src/assets/unknow-icon.svg b/src/assets/unknow-icon.svg
new file mode 100644
index 0000000..20270ac
--- /dev/null
+++ b/src/assets/unknow-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#8F959E"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#646A73"/>
+<path d="M14.288 9.86441C13.7422 9.34739 13.026 9.09082 12.1353 9.09082C11.1347 9.09082 10.3505 9.41162 9.78235 10.065C9.30108 10.6265 9.04179 11.1646 9.00471 12.013C9.00384 12.033 9.00309 12.0697 9.00247 12.1122C9.00043 12.2508 9.11287 12.3635 9.25147 12.3635H9.84253C9.98 12.3635 10.0914 12.2525 10.0936 12.1151C10.0943 12.0737 10.0951 12.038 10.0961 12.0189C10.1251 11.4328 10.278 11.1262 10.5508 10.7851C10.8953 10.3259 11.4006 10.0999 12.0943 10.0999C12.7134 10.0999 13.1776 10.2578 13.4979 10.5782C13.8033 10.8963 13.9625 11.3294 13.9625 11.8726C13.9625 12.2435 13.8281 12.5967 13.5549 12.948C13.4678 13.0568 13.3425 13.1862 12.9388 13.5899C12.3012 14.1474 11.9073 14.601 11.6993 15.0468C11.5282 15.3888 11.441 15.7775 11.441 16.1954V16.4772C11.441 16.6153 11.5529 16.7272 11.691 16.7272H12.2956C12.4336 16.7272 12.5456 16.6153 12.5456 16.4772V16.1954C12.5456 15.8413 12.6327 15.5237 12.8133 15.2141C12.9486 14.9841 13.1223 14.8038 13.4251 14.5389C14.0321 13.9897 14.3689 13.6625 14.5198 13.4705C14.8821 12.9923 15.0671 12.4446 15.0671 11.8454C15.0671 11.0185 14.8075 10.355 14.288 9.86441ZM11.7046 17.8181C11.5666 17.8181 11.4546 17.93 11.4546 18.0681V18.659C11.4546 18.7971 11.5666 18.909 11.7046 18.909H12.2956C12.4336 18.909 12.5456 18.7971 12.5456 18.659V18.0681C12.5456 17.93 12.4336 17.8181 12.2956 17.8181H11.7046Z" fill="white"/>
+</svg>
diff --git a/src/assets/upload-icon.svg b/src/assets/upload-icon.svg
new file mode 100644
index 0000000..3a2466c
--- /dev/null
+++ b/src/assets/upload-icon.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0404 11.3738C33.2279 11.5614 33.3333 11.8157 33.3333 12.0809V34.8149C33.3333 35.8376 32.5374 36.6667 31.5555 36.6667H8.4444C7.46256 36.6667 6.66663 35.8376 6.66663 34.8149V5.18523C6.66663 4.16248 7.46256 3.33337 8.4444 3.33337H24.5857C24.851 3.33337 25.1053 3.43873 25.2929 3.62627L33.0404 11.3738Z" fill="#3370FF"/>
+<path d="M20.6509 15.8135C20.3173 15.3965 19.683 15.3965 19.3494 15.8135L14.4166 21.9795C13.9801 22.5251 14.3686 23.3334 15.0673 23.3334H18.3335V26.6667H21.6668V23.3334H24.9329C25.6317 23.3334 26.0202 22.5251 25.5837 21.9795L20.6509 15.8135Z" fill="white"/>
+<path d="M18.3335 30.0001V28.3334H21.6668V30.0001H18.3335Z" fill="white"/>
+<path d="M25 3.33337L33.3333 11.6667H26.6667C25.7462 11.6667 25 10.9205 25 10V3.33337Z" fill="#2B5FD9"/>
+</svg>
diff --git a/src/assets/user-icon.svg b/src/assets/user-icon.svg
new file mode 100644
index 0000000..5dd0f63
--- /dev/null
+++ b/src/assets/user-icon.svg
@@ -0,0 +1,14 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7.33333H4C2.15905 7.33333 0 8.62098 0 10.9333V12.7333C0 13.0647 0.298477 13.3333 0.666667 13.3333H11.3333C11.7015 13.3333 12 13.0647 12 12.7333V10.9333C12 8.61904 9.84095 7.33333 8 7.33333Z" fill="url(#paint0_linear_264_32130)"/>
+<path d="M2.66667 3.33333C2.66667 5.17428 4.15905 6.66667 6 6.66667C7.84095 6.66667 9.33333 5.17428 9.33333 3.33333C9.33333 1.49238 7.84095 0 6 0C4.15905 0 2.66667 1.49238 2.66667 3.33333Z" fill="url(#paint1_linear_264_32130)"/>
+<defs>
+<linearGradient id="paint0_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/window1.png b/src/assets/window1.png
new file mode 100644
index 0000000..a96b907
Binary files /dev/null and b/src/assets/window1.png differ
diff --git a/src/assets/window2.png b/src/assets/window2.png
new file mode 100644
index 0000000..02d1ec9
Binary files /dev/null and b/src/assets/window2.png differ
diff --git a/src/assets/xls-icon.svg b/src/assets/xls-icon.svg
new file mode 100644
index 0000000..22cb869
--- /dev/null
+++ b/src/assets/xls-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#34C724"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2CA91F"/>
+<path d="M11.308 13.5956L8.33203 17.9996H9.60403L11.98 14.4596L14.284 17.9996H15.676L12.664 13.5956L15.496 9.43164H14.224L11.992 12.7796L9.85603 9.43164H8.48803L11.308 13.5956Z" fill="white"/>
+</svg>
diff --git a/src/assets/xlsx-icon.svg b/src/assets/xlsx-icon.svg
new file mode 100644
index 0000000..22cb869
--- /dev/null
+++ b/src/assets/xlsx-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.7929C14.9255 1.5 15.0527 1.55268 15.1464 1.64645L19.8536 6.35355C19.9473 6.44732 20 6.5745 20 6.70711V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#34C724"/>
+<path d="M15 1.54492C15.054 1.56949 15.1037 1.6037 15.1464 1.64646L19.8536 6.35357C19.8963 6.39632 19.9305 6.44602 19.9551 6.50001H16C15.4477 6.50001 15 6.0523 15 5.50001V1.54492Z" fill="#2CA91F"/>
+<path d="M11.308 13.5956L8.33203 17.9996H9.60403L11.98 14.4596L14.284 17.9996H15.676L12.664 13.5956L15.496 9.43164H14.224L11.992 12.7796L9.85603 9.43164H8.48803L11.308 13.5956Z" fill="white"/>
+</svg>
diff --git a/src/bus/index.ts b/src/bus/index.ts
new file mode 100644
index 0000000..c1ab013
--- /dev/null
+++ b/src/bus/index.ts
@@ -0,0 +1,8 @@
+import mitt from "mitt";
+const bus: any = {};
+const emitter = mitt();
+bus.on = emitter.on;
+bus.off = emitter.off;
+bus.emit = emitter.emit;
+
+export default bus;
diff --git a/src/components/ai-chat/ExecutionDetailDialog.vue b/src/components/ai-chat/ExecutionDetailDialog.vue
new file mode 100644
index 0000000..11e3f1b
--- /dev/null
+++ b/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -0,0 +1,629 @@
+<template>
+  <el-dialog
+    class="execution-details-dialog"
+    title="执行详情"
+    v-model="dialogVisible"
+    destroy-on-close
+    append-to-body
+    align-center
+    @click.stop
+  >
+    <el-scrollbar>
+      <div class="execution-details">
+        <template v-for="(item, index) in arraySort(detail, 'index')" :key="index">
+          <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
+            <div class="flex-between cursor" @click="current = current === index ? '' : index">
+              <div class="flex align-center">
+                <el-icon class="mr-8 arrow-icon" :class="current === index ? 'rotate-90' : ''">
+                  <CaretRight />
+                </el-icon>
+                <component
+                  :is="iconComponent(`${item.type}-icon`)"
+                  class="mr-8"
+                  :size="24"
+                  :item="item.info"
+                />
+                <h4>{{ item.name }}</h4>
+              </div>
+              <div class="flex align-center">
+                <span
+                  class="mr-16 color-secondary"
+                  v-if="
+                    item.type === WorkflowType.Question ||
+                    item.type === WorkflowType.AiChat ||
+                    item.type === WorkflowType.ImageUnderstandNode ||
+                    item.type === WorkflowType.ImageGenerateNode ||
+                    item.type === WorkflowType.Application
+                  "
+                  >{{ item?.message_tokens + item?.answer_tokens }} tokens</span
+                >
+                <span class="mr-16 color-secondary">{{ item?.run_time?.toFixed(2) || 0.0 }} s</span>
+                <el-icon class="success" :size="16" v-if="item.status === 200">
+                  <CircleCheck />
+                </el-icon>
+                <el-icon class="danger" :size="16" v-else>
+                  <CircleClose />
+                </el-icon>
+              </div>
+            </div>
+            <el-collapse-transition>
+              <div class="mt-12" v-if="current === index">
+                <template v-if="item.status === 200">
+                  <!-- 开始 -->
+                  <template
+                    v-if="
+                      item.type === WorkflowType.Start || item.type === WorkflowType.Application
+                    "
+                  >
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">参数输入</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <div class="mb-8">
+                          <span class="color-secondary">用户问题:</span>
+                          {{ item.question || '-' }}
+                        </div>
+                        <div v-for="(f, i) in item.global_fields" :key="i" class="mb-8">
+                          <span class="color-secondary">{{ f.label }}:</span> {{ f.value }}
+                        </div>
+                        <div v-if="item.document_list?.length > 0">
+                          <p class="mb-8 color-secondary">文档:</p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.document_list" :key="i">
+                              <el-card
+                                shadow="never"
+                                style="--el-card-padding: 8px"
+                                class="file cursor"
+                              >
+                                <div class="flex align-center">
+                                  <img :src="getImgUrl(f && f?.name)" alt="" width="24" />
+                                  <div class="ml-4 ellipsis" :title="f && f?.name">
+                                    {{ f && f?.name }}
+                                  </div>
+                                </div>
+                              </el-card>
+                            </template>
+                          </el-space>
+                        </div>
+                        <div v-if="item.image_list?.length > 0">
+                          <p class="mb-8 color-secondary">图片:</p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.image_list" :key="i">
+                              <el-image
+                                :src="f.url"
+                                alt=""
+                                fit="cover"
+                                style="width: 40px; height: 40px; display: block"
+                                class="border-r-4"
+                              />
+                            </template>
+                          </el-space>
+                        </div>
+                        <div v-if="item.audio_list?.length > 0">
+                          <p class="mb-8 color-secondary">语音文件:</p>
+
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.audio_list" :key="i">
+                              <audio
+                                :src="f.url"
+                                controls
+                                style="width: 300px; height: 43px"
+                                class="border-r-4"
+                              />
+                            </template>
+                          </el-space>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 知识库检索 -->
+                  <template v-if="item.type == WorkflowType.SearchDataset">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">检索内容</h5>
+                      <div class="p-8-12 border-t-dashed lighter">{{ item.question || '-' }}</div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">检索结果</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.paragraph_list?.length > 0">
+                          <template
+                            v-for="(paragraph, paragraphIndex) in arraySort(
+                              item.paragraph_list,
+                              'similarity',
+                              true
+                            )"
+                            :key="paragraphIndex"
+                          >
+                            <ParagraphCard :data="paragraph" :index="paragraphIndex" />
+                          </template>
+                        </template>
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 判断器 -->
+                  <template v-if="item.type == WorkflowType.Condition">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">判断结果</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        {{ item.branch_name || '-' }}
+                      </div>
+                    </div>
+                  </template>
+                  <!-- AI 对话 / 问题优化-->
+                  <template
+                    v-if="
+                      item.type == WorkflowType.AiChat ||
+                      item.type == WorkflowType.Question ||
+                      item.type == WorkflowType.Application
+                    "
+                  >
+                    <div
+                      class="card-never border-r-4"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">角色设定 (System)</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        {{ item.system || '-' }}
+                      </div>
+                    </div>
+                    <div
+                      class="card-never border-r-4 mt-8"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">历史记录</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.history_message?.length > 0">
+                          <p
+                            class="mt-4 mb-4"
+                            v-for="(history, historyIndex) in item.history_message"
+                            :key="historyIndex"
+                          >
+                            <span class="color-secondary mr-4">{{ history.role }}:</span
+                            ><span>{{ history.content }}</span>
+                          </p>
+                        </template>
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                    <div
+                      class="card-never border-r-4 mt-8"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">本次对话</h5>
+                      <div class="p-8-12 border-t-dashed lighter pre-wrap">
+                        {{ item.question || '-' }}
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">
+                        {{ item.type == WorkflowType.Application ? '参数输出' : 'AI 回答' }}
+                      </h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <MdPreview
+                          v-if="item.answer"
+                          ref="editorRef"
+                          editorId="preview-only"
+                          :modelValue="item.answer"
+                          style="background: none"
+                        />
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- 指定回复 -->
+                  <template v-if="item.type === WorkflowType.Reply">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">回复内容</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <el-scrollbar height="150">
+                          <MdPreview
+                            v-if="item.answer"
+                            ref="editorRef"
+                            editorId="preview-only"
+                            :modelValue="item.answer"
+                            style="background: none"
+                          />
+                          <template v-else> -</template>
+                        </el-scrollbar>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- 文档内容提取 -->
+                  <template v-if="item.type === WorkflowType.DocumentExtractNode">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12 flex align-center">
+                        <span class="mr-4">参数输出</span>
+
+                        <el-tooltip
+                          effect="dark"
+                          content="每个文档仅支持预览500字"
+                          placement="right"
+                        >
+                          <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                        </el-tooltip>
+                      </h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <el-scrollbar height="150">
+                          <el-card
+                            shadow="never"
+                            style="--el-card-padding: 8px"
+                            v-for="(file_content, index) in item.content"
+                            :key="index"
+                            class="mb-8"
+                          >
+                            <MdPreview
+                              v-if="file_content"
+                              ref="editorRef"
+                              editorId="preview-only"
+                              :modelValue="file_content"
+                              style="background: none"
+                            />
+                            <template v-else> -</template>
+                          </el-card>
+                        </el-scrollbar>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-if="item.type === WorkflowType.SpeechToTextNode">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">参数输入</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <div class="mb-8">
+                          <div v-if="item.audio_list?.length > 0">
+                            <p class="mb-8 color-secondary">语音文件:</p>
+
+                            <el-space wrap>
+                              <template v-for="(f, i) in item.audio_list" :key="i">
+                                <audio
+                                  :src="f.url"
+                                  controls
+                                  style="width: 300px; height: 43px"
+                                  class="border-r-4"
+                                />
+                              </template>
+                            </el-space>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">参数输出</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <el-card
+                          shadow="never"
+                          style="--el-card-padding: 8px"
+                          v-for="(file_content, index) in item.content"
+                          :key="index"
+                          class="mb-8"
+                        >
+                          <MdPreview
+                            v-if="file_content"
+                            ref="editorRef"
+                            editorId="preview-only"
+                            :modelValue="file_content"
+                            style="background: none"
+                          />
+                          <template v-else> -</template>
+                        </el-card>
+                      </div>
+                    </div>
+                  </template>
+
+                  <template v-if="item.type === WorkflowType.TextToSpeechNode">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">参数输入</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <div class="p-8-12 border-t-dashed lighter">
+                          <p class="mb-8 color-secondary">文本内容:</p>
+                          <div v-if="item.content">
+                            <MdPreview
+                              ref="editorRef"
+                              editorId="preview-only"
+                              :modelValue="item.content"
+                              style="background: none"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">参数输出</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <p class="mb-8 color-secondary">语音文件:</p>
+                        <div v-if="item.answer" v-html="item.answer"></div>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- 函数库 -->
+                  <template
+                    v-if="
+                      item.type === WorkflowType.FunctionLib ||
+                      item.type === WorkflowType.FunctionLibCustom
+                    "
+                  >
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">输入</h5>
+                      <div class="p-8-12 border-t-dashed lighter pre-wrap">
+                        {{ item.params || '-' }}
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">输出</h5>
+                      <div class="p-8-12 border-t-dashed lighter pre-wrap">
+                        {{ item.result || '-' }}
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 多路召回 -->
+                  <template v-if="item.type == WorkflowType.RrerankerNode">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">检索内容</h5>
+                      <div class="p-8-12 border-t-dashed lighter">{{ item.question || '-' }}</div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">重排内容</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.document_list?.length > 0">
+                          <template
+                            v-for="(paragraph, paragraphIndex) in item.document_list"
+                            :key="paragraphIndex"
+                          >
+                            <CardBox shadow="never" title="" class="cursor mb-8" :showIcon="false">
+                              <template #description>
+                                <el-scrollbar max-height="150">
+                                  <MdPreview
+                                    ref="editorRef"
+                                    editorId="preview-only"
+                                    :modelValue="paragraph"
+                                  />
+                                </el-scrollbar>
+                              </template>
+                            </CardBox>
+                          </template>
+                        </template>
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">重排结果</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.result_list?.length > 0">
+                          <template
+                            v-for="(paragraph, paragraphIndex) in item.result_list"
+                            :key="paragraphIndex"
+                          >
+                            <CardBox
+                              shadow="never"
+                              :title="`分段${paragraphIndex + 1}`"
+                              class="paragraph-source-card cursor mb-8 paragraph-source-card-height"
+                              :showIcon="false"
+                            >
+                              <div class="active-button primary">
+                                {{ paragraph.metadata.relevance_score?.toFixed(3) }}
+                              </div>
+                              <template #description>
+                                <div class="mt-8">
+                                  <el-scrollbar height="150">
+                                    <MdPreview
+                                      ref="editorRef"
+                                      editorId="preview-only"
+                                      :modelValue="paragraph.page_content"
+                                    />
+                                  </el-scrollbar>
+                                </div>
+                              </template>
+                            </CardBox>
+                          </template>
+                        </template>
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- 表单收集 -->
+                  <template v-if="item.type === WorkflowType.FormNode">
+                    <div class="card-never border-r-4">
+                      <h5 class="p-8-12">
+                        参数输出<span style="color: #f54a45">{{
+                          item.is_submit ? '' : '(用户未提交)'
+                        }}</span>
+                      </h5>
+
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <DynamicsForm
+                          :disabled="true"
+                          label-position="top"
+                          require-asterisk-position="right"
+                          ref="dynamicsFormRef"
+                          :render_data="item.form_field_list"
+                          label-suffix=":"
+                          v-model="item.form_data"
+                          :model="item.form_data"
+                        ></DynamicsForm>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 图片理解 -->
+                  <template v-if="item.type == WorkflowType.ImageUnderstandNode">
+                    <div
+                      class="card-never border-r-4"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">角色设定 (System)</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        {{ item.system || '-' }}
+                      </div>
+                    </div>
+                    <div
+                      class="card-never border-r-4 mt-8"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">历史记录</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.history_message?.length > 0">
+                          <p
+                            class="mt-4 mb-4"
+                            v-for="(history, historyIndex) in item.history_message"
+                            :key="historyIndex"
+                          >
+                            <span class="color-secondary mr-4">{{ history.role }}:</span>
+
+                            <span v-if="Array.isArray(history.content)">
+                              <template v-for="(h, i) in history.content" :key="i">
+                                <el-image
+                                  v-if="h.type === 'image_url'"
+                                  :src="h.image_url.url"
+                                  alt=""
+                                  fit="cover"
+                                  style="width: 40px; height: 40px; display: inline-block"
+                                  class="border-r-4 mr-8"
+                                />
+
+                                <span v-else>{{ h.text }}<br /></span>
+                              </template>
+                            </span>
+
+                            <span v-else>{{ history.content }}</span>
+                          </p>
+                        </template>
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">本次对话</h5>
+                      <div class="p-8-12 border-t-dashed lighter pre-wrap">
+                        <div v-if="item.image_list?.length > 0">
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.image_list" :key="i">
+                              <el-image
+                                :src="f.url"
+                                alt=""
+                                fit="cover"
+                                style="width: 40px; height: 40px; display: block"
+                                class="border-r-4"
+                              />
+                            </template>
+                          </el-space>
+                        </div>
+                        <div>
+                          {{ item.question || '-' }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">
+                        {{ item.type == WorkflowType.Application ? '参数输出' : 'AI 回答' }}
+                      </h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <MdPreview
+                          v-if="item.answer"
+                          ref="editorRef"
+                          editorId="preview-only"
+                          :modelValue="item.answer"
+                          style="background: none"
+                        />
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 图片生成 -->
+                  <template v-if="item.type == WorkflowType.ImageGenerateNode">
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">本次对话</h5>
+                      <div class="p-8-12 border-t-dashed lighter pre-wrap">
+                        {{ item.question || '-' }}
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">
+                        {{ item.type == WorkflowType.Application ? '参数输出' : 'AI 回答' }}
+                      </h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <MdPreview
+                          v-if="item.answer"
+                          ref="editorRef"
+                          editorId="preview-only"
+                          :modelValue="item.answer"
+                          style="background: none"
+                        />
+                        <template v-else> -</template>
+                      </div>
+                    </div>
+                  </template>
+                </template>
+                <template v-else>
+                  <div class="card-never border-r-4">
+                    <h5 class="p-8-12">错误日志</h5>
+                    <div class="p-8-12 border-t-dashed lighter">{{ item.err_message || '-' }}</div>
+                  </div>
+                </template>
+              </div>
+            </el-collapse-transition>
+          </el-card>
+        </template>
+      </div>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue'
+import { cloneDeep } from 'lodash'
+import ParagraphCard from './component/ParagraphCard.vue'
+import { arraySort } from '@/utils/utils'
+import { iconComponent } from '@/workflow/icons/utils'
+import { WorkflowType } from '@/enums/workflow'
+import { getImgUrl } from '@/utils/utils'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+
+const dialogVisible = ref(false)
+const detail = ref<any[]>([])
+
+const current = ref<number | string>('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = []
+  }
+})
+
+const open = (data: any) => {
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+onBeforeUnmount(() => {
+  dialogVisible.value = false
+})
+defineExpose({ open })
+</script>
+<style lang="scss">
+.execution-details-dialog {
+  padding: 0;
+
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+
+  .execution-details {
+    max-height: calc(100vh - 260px);
+
+    .arrow-icon {
+      transition: 0.2s;
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .execution-details-dialog {
+    width: 90% !important;
+  }
+}
+</style>
diff --git a/src/components/ai-chat/KnowledgeSource.vue b/src/components/ai-chat/KnowledgeSource.vue
new file mode 100644
index 0000000..59bd1ca
--- /dev/null
+++ b/src/components/ai-chat/KnowledgeSource.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="flex align-center mt-16" v-if="!isWorkFlow(props.type)">
+    <span class="mr-4 color-secondary">知识来源</span>
+    <el-divider direction="vertical" />
+    <el-button type="primary" class="mr-8" link @click="openParagraph(data)">
+      <AppIcon iconName="app-reference-outlined" class="mr-4"></AppIcon>
+      引用分段 {{ data.paragraph_list?.length || 0 }}</el-button
+    >
+  </div>
+  <div class="mt-8" v-if="!isWorkFlow(props.type)">
+    <el-row :gutter="8" v-if="uniqueParagraphList?.length">
+      <template v-for="(item, index) in uniqueParagraphList" :key="index">
+        <el-col :span="12" class="mb-8">
+          <el-card shadow="never" class="file-List-card" data-width="40">
+            <div class="flex-between">
+              <div class="flex">
+                <img :src="getImgUrl(item && item?.document_name)" alt="" width="20" />
+                <div class="ml-4 ellipsis-1" :title="item?.document_name" v-if="!item.source_url">
+                  <p>{{ item && item?.document_name }}</p>
+                </div>
+                <div class="ml-8" v-else>
+                  <a
+                    :href="
+                      item.source_url && !item.source_url.endsWith('/')
+                        ? item.source_url + '/'
+                        : item.source_url
+                    "
+                    target="_blank"
+                    class="ellipsis"
+                    :title="item?.document_name?.trim()"
+                  >
+                    <span :title="item?.document_name?.trim()">{{ item?.document_name }}</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+
+  <div class="border-t color-secondary flex-between mt-12" style="padding-top: 12px">
+    <div>
+      <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
+      <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
+    </div>
+    <el-button
+      v-if="isWorkFlow(props.type)"
+      type="primary"
+      link
+      @click="openExecutionDetail(data.execution_details)"
+    >
+      <el-icon class="mr-4"><Document /></el-icon>
+      执行详情</el-button
+    >
+  </div>
+  <!-- 知识库引用 dialog -->
+  <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
+  <!-- 执行详情 dialog -->
+  <ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ParagraphSourceDialog from './ParagraphSourceDialog.vue'
+import ExecutionDetailDialog from './ExecutionDetailDialog.vue'
+import { isWorkFlow } from '@/utils/application'
+import { getImgUrl } from '@/utils/utils'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  type: {
+    type: String,
+    default: ''
+  }
+})
+
+const ParagraphSourceDialogRef = ref()
+const ExecutionDetailDialogRef = ref()
+function openParagraph(row: any, id?: string) {
+  ParagraphSourceDialogRef.value.open(row, id)
+}
+function openExecutionDetail(row: any) {
+  ExecutionDetailDialogRef.value.open(row)
+}
+const uniqueParagraphList = computed(() => {
+  const seen = new Set()
+  return (
+    props.data.paragraph_list?.filter((paragraph: any) => {
+      const key = paragraph.document_name.trim()
+      if (seen.has(key)) {
+        return false
+      }
+      seen.add(key)
+      // 判断如果 meta 属性不是 {} 需要json解析 转对象
+      if (paragraph.meta && typeof paragraph.meta === 'string') {
+        paragraph.meta = JSON.parse(paragraph.meta)
+        paragraph.source_url = paragraph.meta.source_url
+      }
+      return true
+    }) || []
+  )
+})
+</script>
+<style lang="scss" scoped>
+.source_dataset-button {
+  background: var(--app-text-color-light-1);
+  border: 1px solid #ffffff;
+  &:hover {
+    border: 1px solid var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    color: var(--el-text-color-primary);
+  }
+}
+</style>
diff --git a/src/components/ai-chat/ParagraphSourceDialog.vue b/src/components/ai-chat/ParagraphSourceDialog.vue
new file mode 100644
index 0000000..dffb10d
--- /dev/null
+++ b/src/components/ai-chat/ParagraphSourceDialog.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-dialog
+    class="paragraph-source"
+    title="知识库引用"
+    v-model="dialogVisible"
+    destroy-on-close
+    append-to-body
+    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="mb-8">
+      <el-scrollbar>
+        <div class="paragraph-source-height p-16 pb-0">
+          <el-form label-position="top">
+            <el-form-item label="用户问题">
+              <el-input v-model="detail.problem_text" disabled />
+            </el-form-item>
+            <el-form-item label="优化后问题">
+              <el-input v-model="detail.padding_problem_text" disabled />
+            </el-form-item>
+            <el-form-item label="引用分段">
+              <div v-if="detail.paragraph_list.length > 0" class="w-full">
+                <template v-for="(item, index) in detail.paragraph_list" :key="index">
+                  <ParagraphCard :data="item" :index="index" />
+                </template>
+              </div>
+              <span v-else> - </span>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue'
+import { cloneDeep } from 'lodash'
+import { arraySort } from '@/utils/utils'
+import ParagraphCard from './component/ParagraphCard.vue'
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref(false)
+const detail = ref<any>({})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any, id?: string) => {
+  detail.value = cloneDeep(data)
+  detail.value.paragraph_list = id
+    ? detail.value.paragraph_list.filter((v: any) => v.dataset_id === id)
+    : detail.value.paragraph_list
+  detail.value.paragraph_list = arraySort(detail.value.paragraph_list, 'similarity', true)
+  dialogVisible.value = true
+}
+onBeforeUnmount(() => {
+  dialogVisible.value = false
+})
+defineExpose({ open })
+</script>
+<style lang="scss">
+.paragraph-source {
+  padding: 0;
+
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .paragraph-source-height {
+    max-height: calc(100vh - 260px);
+  }
+}
+@media only screen and (max-width: 768px) {
+  .paragraph-source {
+    width: 90% !important;
+ 
+  }
+}
+</style>
diff --git a/src/components/ai-chat/component/ParagraphCard.vue b/src/components/ai-chat/component/ParagraphCard.vue
new file mode 100644
index 0000000..d99ac6f
--- /dev/null
+++ b/src/components/ai-chat/component/ParagraphCard.vue
@@ -0,0 +1,106 @@
+<template>
+  <CardBox
+    shadow="never"
+    :title="data.title || '-'"
+    class="paragraph-source-card cursor mb-8 paragraph-source-card-height"
+    :class="data.is_active ? '' : 'disabled'"
+    :showIcon="false"
+  >
+    <template #icon>
+      <AppAvatar class="mr-12 avatar-light" :size="22"> {{ index + 1 + '' }}</AppAvatar>
+    </template>
+    <div class="active-button primary">{{ data.similarity?.toFixed(3) }}</div>
+    <template #description>
+      <el-scrollbar height="150">
+        <MdPreview ref="editorRef" editorId="preview-only" :modelValue="data.content" />
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div class="footer-content flex-between">
+        <el-text class="flex align-center item">
+          <img :src="getImgUrl(data?.document_name?.trim())" alt="" width="20" class="mr-4" />
+
+          <template v-if="meta?.source_url">
+            <a
+              :href="
+                meta?.source_url && !meta?.source_url.endsWith('/')
+                  ? meta?.source_url + '/'
+                  : meta?.source_url
+              "
+              target="_blank"
+              class="ellipsis-1 break-all"
+              :title="data?.document_name?.trim()"
+            >
+              {{ data?.document_name?.trim() }}
+            </a>
+          </template>
+          <template v-else>
+            <span class="ellipsis-1 break-all" :title="data?.document_name?.trim()">
+              {{ data?.document_name?.trim() }}
+            </span>
+          </template>
+        </el-text>
+        <div class="flex align-center item" style="line-height: 32px">
+          <AppAvatar class="mr-8 avatar-blue" shape="square" :size="18">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+
+          <span class="ellipsis-1 break-all" :title="data?.dataset_name">
+            {{ data?.dataset_name }}</span
+          >
+        </div>
+      </div>
+    </template>
+  </CardBox>
+</template>
+<script setup lang="ts">
+import { getImgUrl } from '@/utils/utils'
+import { computed } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  }
+})
+const isMetaObject = computed(() => typeof props.data.meta === 'object')
+const parsedMeta = computed(() => {
+  try {
+    return JSON.parse(props.data.meta)
+  } catch (e) {
+    return {}
+  }
+})
+
+const meta = computed(() => (isMetaObject.value ? props.data.meta : parsedMeta.value))
+</script>
+<style lang="scss" scoped>
+.paragraph-source-card {
+  .footer-content {
+    .item {
+      max-width: 50%;
+    }
+  }
+}
+.paragraph-source-card-height {
+  height: 260px;
+}
+
+@media only screen and (max-width: 768px) {
+  .paragraph-source-card-height {
+    height: 285px;
+  }
+  .paragraph-source-card {
+    .footer-content {
+      display: block;
+      .item {
+        max-width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/ai-chat/component/answer-content/index.vue b/src/components/ai-chat/component/answer-content/index.vue
new file mode 100644
index 0000000..96bcd0c
--- /dev/null
+++ b/src/components/ai-chat/component/answer-content/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="item-content mb-16 lighter">
+    <template v-for="(answer_text, index) in answer_text_list" :key="index">
+      <div class="avatar">
+        <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
+        <LogoIcon v-else height="32px" width="32px" />
+      </div>
+      <div class="content">
+        <el-card shadow="always" class="dialog-card mb-8">
+          <MdRenderer
+            v-if="
+              (chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
+              !answer_text.content
+            "
+            source=" 抱歉，没有查找到相关内容，请重新描述您的问题或提供更多信息。"
+          ></MdRenderer>
+          <MdRenderer
+            :chat_record_id="answer_text.chat_record_id"
+            :child_node="answer_text.child_node"
+            :runtime_node_id="answer_text.runtime_node_id"
+            :disabled="loading || type == 'log'"
+            v-else-if="answer_text.content"
+            :source="answer_text.content"
+            :send-message="chatMessage"
+          ></MdRenderer>
+          <span v-else-if="chatRecord.is_stop" shadow="always" class="dialog-card">
+            已停止回答
+          </span>
+          <span v-else shadow="always" class="dialog-card">
+            回答中 <span class="dotting"></span>
+          </span>
+          <!-- 知识来源 -->
+          <div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
+            <KnowledgeSource :data="chatRecord" :type="application.type" />
+          </div>
+        </el-card>
+      </div>
+    </template>
+    <div class="content">
+      <OperationButton
+        :type="type"
+        :application="application"
+        :chatRecord="chatRecord"
+        @update:chatRecord="(event: any) => emit('update:chatRecord', event)"
+        :loading="loading"
+        :start-chat="startChat"
+        :stop-chat="stopChat"
+        :regenerationChart="regenerationChart"
+      ></OperationButton>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import KnowledgeSource from '@/components/ai-chat/KnowledgeSource.vue'
+import MdRenderer from '@/components/markdown/MdRenderer.vue'
+import OperationButton from '@/components/ai-chat/component/operation-button/index.vue'
+import { type chatType } from '@/api/type/application'
+import { computed } from 'vue'
+const props = defineProps<{
+  chatRecord: chatType
+  application: any
+  loading: boolean
+  sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
+  chatManagement: any
+  type: 'log' | 'ai-chat' | 'debug-ai-chat'
+}>()
+
+const emit = defineEmits(['update:chatRecord'])
+
+const chatMessage = (question: string, type: 'old' | 'new', other_params_data?: any) => {
+  if (type === 'old') {
+    add_answer_text_list(props.chatRecord.answer_text_list)
+    props.sendMessage(question, other_params_data, props.chatRecord)
+    props.chatManagement.write(props.chatRecord.id)
+  } else {
+    props.sendMessage(question, other_params_data)
+  }
+}
+const add_answer_text_list = (answer_text_list: Array<any>) => {
+  answer_text_list.push({ content: '' })
+}
+const answer_text_list = computed(() => {
+  return props.chatRecord.answer_text_list.map((item) => {
+    if (typeof item == 'string') {
+      return { content: item }
+    }
+    return item
+  })
+})
+
+function showSource(row: any) {
+  if (props.type === 'log') {
+    return true
+  } else if (row.write_ed && 500 !== row.status) {
+    if (props.type === 'debug-ai-chat' || props.application?.show_source) {
+      return true
+    }
+  }
+  return false
+}
+const regenerationChart = (chat: chatType) => {
+  props.sendMessage(chat.problem_text, { rechat: true })
+}
+const stopChat = (chat: chatType) => {
+  props.chatManagement.stop(chat.id)
+}
+const startChat = (chat: chatType) => {
+  props.chatManagement.write(chat.id)
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/component/chat-input-operate/index.vue b/src/components/ai-chat/component/chat-input-operate/index.vue
new file mode 100644
index 0000000..1f9335b
--- /dev/null
+++ b/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -0,0 +1,583 @@
+<template>
+  <div class="ai-chat__operate p-16-24">
+    <slot name="operateBefore" />
+
+    <div class="operate-textarea">
+      <el-scrollbar max-height="136">
+        <div
+          class="p-8-12"
+          v-loading="localLoading"
+          v-if="
+            uploadDocumentList.length ||
+            uploadImageList.length ||
+            uploadAudioList.length ||
+            uploadVideoList.length
+          "
+        >
+          <el-space wrap>
+            <template v-for="(item, index) in uploadDocumentList" :key="index">
+              <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
+                <div
+                  class="flex align-center"
+                  @mouseenter.stop="mouseenter(item)"
+                  @mouseleave.stop="mouseleave()"
+                >
+                  <div
+                    @click="deleteFile(index, 'document')"
+                    class="delete-icon color-secondary"
+                    v-if="showDelete === item.url"
+                  >
+                    <el-icon>
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </template>
+            <template v-for="(item, index) in uploadImageList" :key="index">
+              <div
+                class="file cursor border border-r-4"
+                v-if="item.url"
+                @mouseenter.stop="mouseenter(item)"
+                @mouseleave.stop="mouseleave()"
+              >
+                <div
+                  @click="deleteFile(index, 'image')"
+                  class="delete-icon color-secondary"
+                  v-if="showDelete === item.url"
+                >
+                  <el-icon>
+                    <CircleCloseFilled />
+                  </el-icon>
+                </div>
+                <el-image
+                  :src="item.url"
+                  alt=""
+                  fit="cover"
+                  style="width: 40px; height: 40px; display: block"
+                  class="border-r-4"
+                />
+              </div>
+            </template>
+            <template v-for="(item, index) in uploadAudioList" :key="index">
+              <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
+                <div
+                  class="flex align-center"
+                  @mouseenter.stop="mouseenter(item)"
+                  @mouseleave.stop="mouseleave()"
+                >
+                  <div
+                    @click="deleteFile(index, 'audio')"
+                    class="delete-icon color-secondary"
+                    v-if="showDelete === item.url"
+                  >
+                    <el-icon>
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </template>
+          </el-space>
+        </div>
+      </el-scrollbar>
+      <div class="flex">
+        <el-input
+          ref="quickInputRef"
+          v-model="inputValue"
+          :placeholder="
+            startRecorderTime
+              ? '说话中...'
+              : recorderLoading
+                ? '转文字中...'
+                : '请输入问题，Ctrl+Enter 换行，Enter发送'
+          "
+          :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 10 }"
+          type="textarea"
+          :maxlength="100000"
+          @keydown.enter="sendChatHandle($event)"
+        />
+
+        <div class="operate flex align-center">
+          <span v-if="props.applicationDetails.file_upload_enable" class="flex align-center">
+            <el-upload
+              action="#"
+              multiple
+              :auto-upload="false"
+              :show-file-list="false"
+              :accept="getAcceptList()"
+              :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
+            >
+              <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
+                <template #content>
+                  <div class="break-all pre-wrap">
+                    上传文件：最多{{
+                      props.applicationDetails.file_upload_setting.maxFiles
+                    }}个，每个文件限制
+                    {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />文件类型：{{
+                      getAcceptList().replace(/\./g, '').replace(/,/g, '、').toUpperCase()
+                    }}
+                  </div>
+                </template>
+                <el-button text :disabled="checkMaxFilesLimit()" class="mt-4">
+                  <el-icon><Paperclip /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </el-upload>
+            <el-divider direction="vertical" />
+          </span>
+          <span v-if="props.applicationDetails.stt_model_enable" class="flex align-center">
+            <el-button text @click="startRecording" v-if="mediaRecorderStatus">
+              <el-icon>
+                <Microphone />
+              </el-icon>
+            </el-button>
+
+            <div v-else class="operate flex align-center">
+              <el-text type="info"
+                >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
+              >
+              <el-button text type="primary" @click="stopRecording" :loading="recorderLoading">
+                <AppIcon iconName="app-video-stop"></AppIcon>
+              </el-button>
+            </div>
+            <el-divider v-if="!startRecorderTime && !recorderLoading" direction="vertical" />
+          </span>
+
+          <el-button
+            v-if="!startRecorderTime && !recorderLoading"
+            text
+            class="sent-button"
+            :disabled="isDisabledChart || loading"
+            @click="sendChatHandle"
+          >
+            <img v-show="isDisabledChart || loading" src="@/assets/icon_send.svg" alt="" />
+            <SendIcon v-show="!isDisabledChart && !loading" />
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="text-center" v-if="applicationDetails.disclaimer" style="margin-top: 8px">
+      <el-text type="info" v-if="applicationDetails.disclaimer" style="font-size: 12px">
+        <auto-tooltip :content="applicationDetails.disclaimer_value">
+          {{ applicationDetails.disclaimer_value }}
+        </auto-tooltip>
+      </el-text>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import Recorder from 'recorder-core'
+import applicationApi from '@/api/application'
+import { MsgAlert } from '@/utils/message'
+import { type chatType } from '@/api/type/application'
+import { useRoute, useRouter } from 'vue-router'
+import { getImgUrl } from '@/utils/utils'
+import 'recorder-core/src/engine/mp3'
+
+import 'recorder-core/src/engine/mp3-engine'
+import { MsgWarning } from '@/utils/message'
+import useStore from '@/stores'
+const router = useRouter()
+const route = useRoute()
+const { application } = useStore()
+const {
+  query: { mode, question },
+  params: { accessToken }
+} = route as any
+const quickInputRef = ref()
+const props = withDefaults(
+  defineProps<{
+    applicationDetails: any
+    type: 'log' | 'ai-chat' | 'debug-ai-chat'
+    loading: boolean
+    isMobile: boolean
+    appId?: string
+    chatId: string
+    sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
+    openChatId: () => Promise<string>
+  }>(),
+  {
+    applicationDetails: () => ({}),
+    available: true
+  }
+)
+const emit = defineEmits(['update:chatId', 'update:loading'])
+const chartOpenId = ref<string>()
+const chatId_context = computed({
+  get: () => {
+    if (chartOpenId.value) {
+      return chartOpenId.value
+    }
+    return props.chatId
+  },
+  set: (v) => {
+    chartOpenId.value = v
+    emit('update:chatId', v)
+  }
+})
+const localLoading = computed({
+  get: () => {
+    return props.loading
+  },
+  set: (v) => {
+    emit('update:loading', v)
+  }
+})
+
+const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+const documentExtensions = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
+const videoExtensions = ['mp4', 'avi', 'mov', 'mkv', 'flv']
+const audioExtensions = ['mp3', 'wav', 'ogg', 'aac']
+
+const getAcceptList = () => {
+  const { image, document, audio, video } = props.applicationDetails.file_upload_setting
+  let accepts: any = []
+  if (image) {
+    accepts = [...imageExtensions]
+  }
+  if (document) {
+    accepts = [...accepts, ...documentExtensions]
+  }
+  if (audio) {
+    accepts = [...accepts, ...audioExtensions]
+  }
+  if (video) {
+    accepts = [...accepts, ...videoExtensions]
+  }
+  // console.log(accepts)
+  if (accepts.length === 0) {
+    return '.请在文件上传配置中选择文件类型'
+  }
+  return accepts.map((ext: any) => '.' + ext).join(',')
+}
+
+const checkMaxFilesLimit = () => {
+  return (
+    props.applicationDetails.file_upload_setting.maxFiles <=
+    uploadImageList.value.length +
+      uploadDocumentList.value.length +
+      uploadAudioList.value.length +
+      uploadVideoList.value.length
+  )
+}
+
+const uploadFile = async (file: any, fileList: any) => {
+  const { maxFiles, fileLimit } = props.applicationDetails.file_upload_setting
+  // 单次上传文件数量限制
+  const file_limit_once =
+    uploadImageList.value.length +
+    uploadDocumentList.value.length +
+    uploadAudioList.value.length +
+    uploadVideoList.value.length
+  if (file_limit_once >= maxFiles) {
+    MsgWarning('最多上传' + maxFiles + '个文件')
+    fileList.splice(0, fileList.length)
+    return
+  }
+  if (fileList.filter((f: any) => f.size > fileLimit * 1024 * 1024).length > 0) {
+    // MB
+    MsgWarning('单个文件大小不能超过' + fileLimit + 'MB')
+    fileList.splice(0, fileList.length)
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  //
+  const extension = file.name.split('.').pop().toLowerCase() // 获取文件后缀名并转为小写
+
+  if (imageExtensions.includes(extension)) {
+    uploadImageList.value.push(file)
+  } else if (documentExtensions.includes(extension)) {
+    uploadDocumentList.value.push(file)
+  } else if (videoExtensions.includes(extension)) {
+    uploadVideoList.value.push(file)
+  } else if (audioExtensions.includes(extension)) {
+    uploadAudioList.value.push(file)
+  }
+
+  if (!chatId_context.value) {
+    const res = await props.openChatId()
+    chatId_context.value = res
+  }
+
+  if (props.type === 'debug-ai-chat') {
+    formData.append('debug', 'true')
+  } else {
+    formData.append('debug', 'false')
+  }
+
+  applicationApi
+    .uploadFile(
+      props.applicationDetails.id as string,
+      chatId_context.value as string,
+      formData,
+      localLoading
+    )
+    .then((response) => {
+      fileList.splice(0, fileList.length)
+      uploadImageList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadDocumentList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadAudioList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadVideoList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      if (!inputValue.value && uploadImageList.value.length > 0) {
+        inputValue.value = '请解析图片内容'
+      }
+    })
+}
+const recorderTime = ref(0)
+const startRecorderTime = ref(false)
+const recorderLoading = ref(false)
+const inputValue = ref<string>('')
+const uploadImageList = ref<Array<any>>([])
+const uploadDocumentList = ref<Array<any>>([])
+const uploadVideoList = ref<Array<any>>([])
+const uploadAudioList = ref<Array<any>>([])
+const mediaRecorderStatus = ref(true)
+const showDelete = ref('')
+
+// 定义响应式引用
+const mediaRecorder = ref<any>(null)
+const isDisabledChart = computed(
+  () => !(inputValue.value.trim() && (props.appId || props.applicationDetails?.name))
+)
+
+// 开始录音
+const startRecording = async () => {
+  try {
+    // 取消录音控制台日志
+    Recorder.CLog = function () {}
+    mediaRecorderStatus.value = false
+    handleTimeChange()
+    mediaRecorder.value = new Recorder({
+      type: 'mp3',
+      bitRate: 128,
+      sampleRate: 16000
+    })
+
+    mediaRecorder.value.open(
+      () => {
+        mediaRecorder.value.start()
+      },
+      (err: any) => {
+        MsgAlert(
+          `提示`,
+          `<p>该功能需要使用麦克风，浏览器禁止不安全页面录音，解决方案如下：<br/>
+1、可开启 https 解决；<br/>
+2、若无 https 配置则需要修改浏览器安全配置，Chrome 设置如下：<br/>
+(1) 地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure；<br/>
+(2) 将 http 站点配置在文本框中，例如: http://127.0.0.1:8080。</p>
+    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
+          {
+            confirmButtonText: '我知道了',
+            dangerouslyUseHTMLString: true,
+            customClass: 'record-tip-confirm'
+          }
+        )
+      }
+    )
+  } catch (error) {
+    MsgAlert(
+      `提示`,
+      `<p>该功能需要使用麦克风，浏览器禁止不安全页面录音，解决方案如下：<br/>
+1、可开启 https 解决；<br/>
+2、若无 https 配置则需要修改浏览器安全配置，Chrome 设置如下：<br/>
+(1) 地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure；<br/>
+(2) 将 http 站点配置在文本框中，例如: http://127.0.0.1:8080。</p>
+    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
+      {
+        confirmButtonText: '我知道了',
+        dangerouslyUseHTMLString: true,
+        customClass: 'record-tip-confirm'
+      }
+    )
+  }
+}
+
+// 停止录音
+const stopRecording = () => {
+  startRecorderTime.value = false
+  recorderTime.value = 0
+  if (mediaRecorder.value) {
+    mediaRecorderStatus.value = true
+    mediaRecorder.value.stop(
+      (blob: Blob, duration: number) => {
+        // 测试blob是否能正常播放
+        //  const link = document.createElement('a')
+        //  link.href = window.URL.createObjectURL(blob)
+        //  link.download = 'abc.mp3'
+        //  link.click()
+        uploadRecording(blob) // 上传录音文件
+      },
+      (err: any) => {
+        console.error('录音失败:', err)
+      }
+    )
+  }
+}
+
+// 上传录音文件
+const uploadRecording = async (audioBlob: Blob) => {
+  try {
+    recorderLoading.value = true
+    const formData = new FormData()
+    formData.append('file', audioBlob, 'recording.mp3')
+    applicationApi
+      .postSpeechToText(props.applicationDetails.id as string, formData, localLoading)
+      .then((response) => {
+        recorderLoading.value = false
+        mediaRecorder.value.close()
+        inputValue.value = typeof response.data === 'string' ? response.data : ''
+        // chatMessage(null, res.data)
+      })
+  } catch (error) {
+    recorderLoading.value = false
+    console.error('上传失败:', error)
+  }
+}
+const handleTimeChange = () => {
+  startRecorderTime.value = true
+
+  setTimeout(() => {
+    if (recorderTime.value === 60) {
+      recorderTime.value = 0
+      stopRecording()
+      startRecorderTime.value = false
+    }
+    if (!startRecorderTime.value) {
+      return
+    }
+    recorderTime.value++
+    handleTimeChange()
+  }, 1000)
+}
+
+function sendChatHandle(event?: any) {
+  if (!event?.ctrlKey) {
+    // 如果没有按下组合键ctrl，则会阻止默认事件
+    event?.preventDefault()
+    if (!isDisabledChart.value && !props.loading && !event?.isComposing) {
+      if (inputValue.value.trim()) {
+        props.sendMessage(inputValue.value, {
+          image_list: uploadImageList.value,
+          document_list: uploadDocumentList.value,
+          audio_list: uploadAudioList.value,
+          video_list: uploadVideoList.value
+        })
+        inputValue.value = ''
+        uploadImageList.value = []
+        uploadDocumentList.value = []
+        uploadAudioList.value = []
+        uploadVideoList.value = []
+        quickInputRef.value.textareaStyle.height = '45px'
+      }
+    }
+  } else {
+    // 如果同时按下ctrl+回车键，则会换行
+    inputValue.value += '\n'
+  }
+}
+
+function deleteFile(index: number, val: string) {
+  if (val === 'image') {
+    uploadImageList.value.splice(index, 1)
+  } else if (val === 'document') {
+    uploadDocumentList.value.splice(index, 1)
+  } else if (val === 'video') {
+    uploadVideoList.value.splice(index, 1)
+  } else if (val === 'audio') {
+    uploadAudioList.value.splice(index, 1)
+  }
+}
+
+function mouseenter(row: any) {
+  showDelete.value = row.url
+}
+
+function mouseleave() {
+  showDelete.value = ''
+}
+
+onMounted(() => {
+  if (question) {
+    inputValue.value = decodeURIComponent(question.trim())
+    sendChatHandle()
+    setTimeout(() => {
+      // 获取当前路由信息
+      const route = router.currentRoute.value
+      // 复制query对象
+      const query = { ...route.query }
+      // 删除特定的参数
+      delete query.question
+      const newRoute =
+        Object.entries(query)?.length > 0
+          ? route.path +
+            '?' +
+            Object.entries(query)
+              .map(([key, value]) => `${key}=${value}`)
+              .join('&')
+          : route.path
+
+      history.pushState(null, '', '/ui' + newRoute)
+    }, 100)
+  }
+  setTimeout(() => {
+    if (quickInputRef.value && mode === 'embed') {
+      quickInputRef.value.textarea.style.height = '0'
+    }
+  }, 1800)
+})
+</script>
+<style lang="scss" scope>
+@import '../../index.scss';
+
+.file {
+  position: relative;
+  overflow: inherit;
+
+  .delete-icon {
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    z-index: 1;
+  }
+}
+
+.upload-tooltip-width {
+  width: 300px;
+}
+</style>
diff --git a/src/components/ai-chat/component/operation-button/ChatOperationButton.vue b/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
new file mode 100644
index 0000000..2fda03d
--- /dev/null
+++ b/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <el-text type="info">
+      <span class="ml-4">{{ datetimeFormat(data.create_time) }}</span>
+    </el-text>
+  </div>
+  <div>
+    <!-- 语音播放 -->
+    <span v-if="tts">
+      <el-tooltip effect="dark" content="点击播放" placement="top" v-if="!audioPlayerStatus">
+        <el-button text :disabled="!data?.write_ed" @click="playAnswerText(data?.answer_text)">
+          <AppIcon iconName="app-video-play"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip v-else effect="dark" content="停止" placement="top">
+        <el-button type="primary" text :disabled="!data?.write_ed" @click="pausePlayAnswerText()">
+          <AppIcon iconName="app-video-pause"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-divider direction="vertical" />
+    </span>
+    <span v-if="type == 'ai-chat' || type == 'log'">
+      <el-tooltip effect="dark" content="换个答案" placement="top">
+        <el-button :disabled="chat_loading" text @click="regeneration">
+          <el-icon><RefreshRight /></el-icon>
+        </el-button>
+      </el-tooltip>
+      <el-divider direction="vertical" />
+      <el-tooltip effect="dark" content="复制" placement="top">
+        <el-button text @click="copyClick(data?.answer_text)">
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-divider direction="vertical" />
+      <el-tooltip
+        effect="dark"
+        content="赞同"
+        placement="top"
+        v-if="buttonData?.vote_status === '-1'"
+      >
+        <el-button text @click="voteHandle('0')" :disabled="loading">
+          <AppIcon iconName="app-like"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        effect="dark"
+        content="取消赞同"
+        placement="top"
+        v-if="buttonData?.vote_status === '0'"
+      >
+        <el-button text @click="voteHandle('-1')" :disabled="loading">
+          <AppIcon iconName="app-like-color"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-divider direction="vertical" v-if="buttonData?.vote_status === '-1'" />
+      <el-tooltip
+        effect="dark"
+        content="反对"
+        placement="top"
+        v-if="buttonData?.vote_status === '-1'"
+      >
+        <el-button text @click="voteHandle('1')" :disabled="loading">
+          <AppIcon iconName="app-oppose"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        effect="dark"
+        content="取消反对"
+        placement="top"
+        v-if="buttonData?.vote_status === '1'"
+      >
+        <el-button text @click="voteHandle('-1')" :disabled="loading">
+          <AppIcon iconName="app-oppose-color"></AppIcon>
+        </el-button>
+      </el-tooltip>
+    </span>
+  </div>
+  <!-- 先渲染，不然不能播放   -->
+  <audio ref="audioPlayer" controls hidden="hidden"></audio>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import applicationApi from '@/api/application'
+import { datetimeFormat } from '@/utils/time'
+import { MsgError } from '@/utils/message'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const props = withDefaults(
+  defineProps<{
+    data: any
+    type: 'log' | 'ai-chat' | 'debug-ai-chat'
+    chatId: string
+    chat_loading: boolean
+    applicationId: string
+    tts: boolean
+    tts_type: string
+  }>(),
+  {
+    data: () => ({}),
+    type: 'ai-chat'
+  }
+)
+
+const emit = defineEmits(['update:data', 'regeneration'])
+
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+const audioPlayerStatus = ref(false)
+const buttonData = ref(props.data)
+const loading = ref(false)
+const utterance = ref<SpeechSynthesisUtterance | null>(null)
+
+function regeneration() {
+  emit('regeneration')
+}
+
+function voteHandle(val: string) {
+  applicationApi
+    .putChatVote(props.applicationId, props.chatId, props.data.record_id, val, loading)
+    .then(() => {
+      buttonData.value['vote_status'] = val
+      emit('update:data', buttonData.value)
+    })
+}
+
+function markdownToPlainText(md: string) {
+  return (
+    md
+      // 移除图片 ![alt](url)
+      .replace(/!\[.*?\]\(.*?\)/g, '')
+      // 移除链接 [text](url)
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      // 移除 Markdown 标题符号 (#, ##, ###)
+      .replace(/^#{1,6}\s+/gm, '')
+      // 移除加粗 **text** 或 __text__
+      .replace(/\*\*(.*?)\*\*/g, '$1')
+      .replace(/__(.*?)__/g, '$1')
+      // 移除斜体 *text* 或 _text_
+      .replace(/\*(.*?)\*/g, '$1')
+      .replace(/_(.*?)_/g, '$1')
+      // 移除行内代码 `code`
+      .replace(/`(.*?)`/g, '$1')
+      // 移除代码块 ```code```
+      .replace(/```[\s\S]*?```/g, '')
+      // 移除多余的换行符
+      .replace(/\n{2,}/g, '\n')
+      .trim()
+  )
+}
+
+function removeFormRander(text: string) {
+  return text
+    .replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '')
+    .trim()
+}
+
+const playAnswerText = (text: string) => {
+  if (!text) {
+    text = '抱歉，没有查找到相关内容，请重新描述您的问题或提供更多信息。'
+  }
+  // 移除表单渲染器
+  text = removeFormRander(text)
+  // text 处理成纯文本
+  text = markdownToPlainText(text)
+  // console.log(text)
+  audioPlayerStatus.value = true
+  if (props.tts_type === 'BROWSER') {
+    if (text !== utterance.value?.text) {
+      window.speechSynthesis.cancel()
+    }
+    if (window.speechSynthesis.paused) {
+      window.speechSynthesis.resume()
+      return
+    }
+    // 创建一个新的 SpeechSynthesisUtterance 实例
+    utterance.value = new SpeechSynthesisUtterance(text)
+    utterance.value.onend = () => {
+      audioPlayerStatus.value = false
+      utterance.value = null
+    }
+    utterance.value.onerror = () => {
+      audioPlayerStatus.value = false
+      utterance.value = null
+    }
+    // 调用浏览器的朗读功能
+    window.speechSynthesis.speak(utterance.value)
+  }
+  if (props.tts_type === 'TTS') {
+    // 恢复上次暂停的播放
+    if (audioPlayer.value?.src) {
+      audioPlayer.value?.play()
+      return
+    }
+    applicationApi
+      .postTextToSpeech((props.applicationId as string) || (id as string), { text: text }, loading)
+      .then(async (res: any) => {
+        if (res.type === 'application/json') {
+          const text = await res.text()
+          MsgError(text)
+          return
+        }
+        // 假设我们有一个 MP3 文件的字节数组
+        // 创建 Blob 对象
+        const blob = new Blob([res], { type: 'audio/mp3' })
+
+        // 创建对象 URL
+        const url = URL.createObjectURL(blob)
+
+        // 测试blob是否能正常播放
+        // const link = document.createElement('a')
+        // link.href = window.URL.createObjectURL(blob)
+        // link.download = "abc.mp3"
+        // link.click()
+
+        // 检查 audioPlayer 是否已经引用了 DOM 元素
+        if (audioPlayer.value instanceof HTMLAudioElement) {
+          audioPlayer.value.src = url
+          audioPlayer.value.play() // 自动播放音频
+          audioPlayer.value.onended = () => {
+            audioPlayerStatus.value = false
+          }
+        } else {
+          console.error('audioPlayer.value is not an instance of HTMLAudioElement')
+        }
+      })
+      .catch((err) => {
+        console.log('err: ', err)
+      })
+  }
+}
+
+const pausePlayAnswerText = () => {
+  audioPlayerStatus.value = false
+  if (props.tts_type === 'TTS') {
+    audioPlayer.value?.pause()
+  }
+  if (props.tts_type === 'BROWSER') {
+    window.speechSynthesis.pause()
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/component/operation-button/LogOperationButton.vue b/src/components/ai-chat/component/operation-button/LogOperationButton.vue
new file mode 100644
index 0000000..3845629
--- /dev/null
+++ b/src/components/ai-chat/component/operation-button/LogOperationButton.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="flex-between mt-8">
+    <div>
+      <el-text type="info">
+        <span class="ml-4">{{ datetimeFormat(data.create_time) }}</span>
+      </el-text>
+    </div>
+    <div>
+      <!-- 语音播放 -->
+      <span v-if="tts">
+        <el-tooltip effect="dark" content="点击播放" placement="top" v-if="!audioPlayerStatus">
+          <el-button text @click="playAnswerText(data?.answer_text)">
+            <AppIcon iconName="app-video-play"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip v-else effect="dark" content="停止" placement="top">
+          <el-button type="primary" text @click="pausePlayAnswerText()">
+            <AppIcon iconName="app-video-pause"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" />
+      </span>
+      <el-tooltip effect="dark" content="复制" placement="top">
+        <el-button text @click="copyClick(data?.answer_text)">
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </el-tooltip>
+      <el-divider direction="vertical" />
+      <el-tooltip
+        v-if="buttonData.improve_paragraph_id_list.length === 0"
+        effect="dark"
+        content="修改内容"
+        placement="top"
+      >
+        <el-button text @click="editContent(data)">
+          <el-icon><EditPen /></el-icon>
+        </el-button>
+      </el-tooltip>
+
+      <el-tooltip v-else effect="dark" content="修改标注" placement="top">
+        <el-button text @click="editMark(data)">
+          <AppIcon iconName="app-document-active" class="primary"></AppIcon>
+        </el-button>
+      </el-tooltip>
+
+      <el-divider direction="vertical" v-if="buttonData?.vote_status !== '-1'" />
+      <el-button text disabled v-if="buttonData?.vote_status === '0'">
+        <AppIcon iconName="app-like-color"></AppIcon>
+      </el-button>
+
+      <el-button text disabled v-if="buttonData?.vote_status === '1'">
+        <AppIcon iconName="app-oppose-color"></AppIcon>
+      </el-button>
+      <EditContentDialog ref="EditContentDialogRef" @refresh="refreshContent" />
+      <EditMarkDialog ref="EditMarkDialogRef" @refresh="refreshMark" />
+      <!-- 先渲染，不然不能播放   -->
+      <audio ref="audioPlayer" controls hidden="hidden"></audio>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { copyClick } from '@/utils/clipboard'
+import EditContentDialog from '@/views/log/component/EditContentDialog.vue'
+import EditMarkDialog from '@/views/log/component/EditMarkDialog.vue'
+import { datetimeFormat } from '@/utils/time'
+import applicationApi from '@/api/application'
+import { useRoute } from 'vue-router'
+import { MsgError } from '@/utils/message'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  applicationId: {
+    type: String,
+    default: ''
+  },
+  tts: Boolean,
+  tts_type: String
+})
+
+const emit = defineEmits(['update:data'])
+
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+
+const EditContentDialogRef = ref()
+const EditMarkDialogRef = ref()
+
+const buttonData = ref(props.data)
+const loading = ref(false)
+const utterance = ref<SpeechSynthesisUtterance | null>(null)
+
+function editContent(data: any) {
+  EditContentDialogRef.value.open(data)
+}
+
+function editMark(data: any) {
+  EditMarkDialogRef.value.open(data)
+}
+
+const audioPlayerStatus = ref(false)
+
+function markdownToPlainText(md: string) {
+  return (
+    md
+      // 移除图片 ![alt](url)
+      .replace(/!\[.*?\]\(.*?\)/g, '')
+      // 移除链接 [text](url)
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      // 移除 Markdown 标题符号 (#, ##, ###)
+      .replace(/^#{1,6}\s+/gm, '')
+      // 移除加粗 **text** 或 __text__
+      .replace(/\*\*(.*?)\*\*/g, '$1')
+      .replace(/__(.*?)__/g, '$1')
+      // 移除斜体 *text* 或 _text_
+      .replace(/\*(.*?)\*/g, '$1')
+      .replace(/_(.*?)_/g, '$1')
+      // 移除行内代码 `code`
+      .replace(/`(.*?)`/g, '$1')
+      // 移除代码块 ```code```
+      .replace(/```[\s\S]*?```/g, '')
+      // 移除多余的换行符
+      .replace(/\n{2,}/g, '\n')
+      .trim()
+  )
+}
+
+function removeFormRander(text: string) {
+  return text
+    .replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '')
+    .trim()
+}
+
+
+const playAnswerText = (text: string) => {
+  if (!text) {
+    text = '抱歉，没有查找到相关内容，请重新描述您的问题或提供更多信息。'
+  }
+  // 移除表单渲染器
+  text = removeFormRander(text)
+  // text 处理成纯文本
+  text = markdownToPlainText(text)
+  // console.log(text)
+  audioPlayerStatus.value = true
+  if (props.tts_type === 'BROWSER') {
+    if (text !== utterance.value?.text) {
+      window.speechSynthesis.cancel()
+    }
+    if (window.speechSynthesis.paused) {
+      window.speechSynthesis.resume()
+      return
+    }
+    // 创建一个新的 SpeechSynthesisUtterance 实例
+    utterance.value = new SpeechSynthesisUtterance(text)
+    utterance.value.onend = () => {
+      audioPlayerStatus.value = false
+      utterance.value = null
+    }
+    utterance.value.onerror = () => {
+      audioPlayerStatus.value = false
+      utterance.value = null
+    }
+    // 调用浏览器的朗读功能
+    window.speechSynthesis.speak(utterance.value)
+  }
+  if (props.tts_type === 'TTS') {
+    // 恢复上次暂停的播放
+    if (audioPlayer.value?.src) {
+      audioPlayer.value?.play()
+      return
+    }
+    applicationApi
+      .postTextToSpeech(id || (props.applicationId as string), { text: text }, loading)
+      .then(async (res: any) => {
+        if (res.type === 'application/json') {
+          const text = await res.text()
+          MsgError(text)
+          return
+        }
+        // 假设我们有一个 MP3 文件的字节数组
+        // 创建 Blob 对象
+        const blob = new Blob([res], { type: 'audio/mp3' })
+
+        // 创建对象 URL
+        const url = URL.createObjectURL(blob)
+
+        // 测试blob是否能正常播放
+        // const link = document.createElement('a')
+        // link.href = window.URL.createObjectURL(blob)
+        // link.download = "abc.mp3"
+        // link.click()
+
+        // 检查 audioPlayer 是否已经引用了 DOM 元素
+        if (audioPlayer.value instanceof HTMLAudioElement) {
+          audioPlayer.value.src = url
+          audioPlayer.value.play() // 自动播放音频
+          audioPlayer.value.onended = () => {
+            audioPlayerStatus.value = false
+          }
+        } else {
+          console.error('audioPlayer.value is not an instance of HTMLAudioElement')
+        }
+      })
+      .catch((err) => {
+        console.log('err: ', err)
+      })
+  }
+}
+
+const pausePlayAnswerText = () => {
+  audioPlayerStatus.value = false
+  if (props.tts_type === 'TTS') {
+    audioPlayer.value?.pause()
+  }
+  if (props.tts_type === 'BROWSER') {
+    window.speechSynthesis.pause()
+  }
+}
+
+function refreshMark() {
+  buttonData.value.improve_paragraph_id_list = []
+  emit('update:data', buttonData.value)
+}
+function refreshContent(data: any) {
+  buttonData.value = data
+  emit('update:data', buttonData.value)
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/component/operation-button/index.vue b/src/components/ai-chat/component/operation-button/index.vue
new file mode 100644
index 0000000..1026fb6
--- /dev/null
+++ b/src/components/ai-chat/component/operation-button/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <LogOperationButton
+      v-if="type === 'log'"
+      v-bind:data="chatRecord"
+      @update:data="(event: any) => emit('update:chatRecord', event)"
+      :applicationId="application.id"
+      :tts="application.tts_model_enable"
+      :tts_type="application.tts_type"
+      :type="type"
+    />
+
+    <div class="flex-between mt-8" v-else>
+      <div>
+        <el-button
+          type="primary"
+          v-if="chatRecord.is_stop && !chatRecord.write_ed"
+          @click="startChat(chatRecord)"
+          link
+          >继续
+        </el-button>
+        <el-button
+          type="primary"
+          v-else-if="!chatRecord.write_ed"
+          @click="stopChat(chatRecord)"
+          link
+          >停止回答
+        </el-button>
+      </div>
+    </div>
+    <div v-if="chatRecord.write_ed && 500 != chatRecord.status" class="flex-between">
+      <ChatOperationButton
+        :tts="application.tts_model_enable"
+        :tts_type="application.tts_type"
+        :data="chatRecord"
+        :type="type"
+        :applicationId="application.id"
+        :chatId="chatRecord.chat_id"
+        :chat_loading="loading"
+        @regeneration="regenerationChart(chatRecord)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import ChatOperationButton from '@/components/ai-chat/component/operation-button/ChatOperationButton.vue'
+import LogOperationButton from '@/components/ai-chat/component/operation-button/LogOperationButton.vue'
+import { type chatType } from '@/api/type/application'
+defineProps<{
+  type: 'log' | 'ai-chat' | 'debug-ai-chat'
+  chatRecord: chatType
+  application: any
+  loading: boolean
+  startChat: (chat_record: any) => void
+  stopChat: (chat_record: any) => void
+  regenerationChart: (chat_record: any) => void
+}>()
+const emit = defineEmits(['update:chatRecord'])
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/component/prologue-content/index.vue b/src/components/ai-chat/component/prologue-content/index.vue
new file mode 100644
index 0000000..f2e7269
--- /dev/null
+++ b/src/components/ai-chat/component/prologue-content/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <!-- 开场白组件 -->
+  <div class="item-content mb-16">
+    <div class="avatar" v-if="prologue">
+      <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
+      <LogoIcon v-else height="32px" width="32px" />
+    </div>
+    <div class="content" v-if="prologue">
+      <el-card shadow="always" class="dialog-card" style="--el-card-padding: 10px 16px 12px">
+        <MdRenderer :source="prologue" :send-message="sendMessage"></MdRenderer>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { type chatType } from '@/api/type/application'
+import { computed } from 'vue'
+import MdRenderer from '@/components/markdown/MdRenderer.vue'
+const props = defineProps<{
+  application: any
+  available: boolean
+  type: 'log' | 'ai-chat' | 'debug-ai-chat'
+  sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
+}>()
+const toQuickQuestion = (match: string, offset: number, input: string) => {
+  return `<quick_question>${match.replace('- ', '')}</quick_question>`
+}
+const prologue = computed(() => {
+  const temp = props.available
+    ? props.application?.prologue
+    : '抱歉，当前正在维护，无法提供服务，请稍后再试！'
+  return temp?.replace(/-\s.+/g, toQuickQuestion)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/component/question-content/index.vue b/src/components/ai-chat/component/question-content/index.vue
new file mode 100644
index 0000000..8e77a30
--- /dev/null
+++ b/src/components/ai-chat/component/question-content/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <!-- 问题内容 -->
+  <div class="item-content mb-16 lighter">
+    <div class="avatar">
+      <el-image
+        v-if="application.user_avatar"
+        :src="application.user_avatar"
+        alt=""
+        fit="cover"
+        style="width: 32px; height: 32px; display: block"
+      />
+      <AppAvatar v-else>
+        <img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
+      </AppAvatar>
+    </div>
+    <div class="content">
+      <div class="text break-all pre-wrap">
+        <div class="mb-8" v-if="document_list.length">
+          <el-space wrap>
+            <template v-for="(item, index) in document_list" :key="index">
+              <el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
+                <div class="download-button flex align-center" @click="downloadFile(item)">
+                  <el-icon class="mr-4">
+                    <Download />
+                  </el-icon>
+                  点击下载文件
+                </div>
+                <div class="show flex align-center">
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis" style="max-width: 150px" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </template>
+          </el-space>
+        </div>
+        <div class="mb-8" v-if="image_list.length">
+          <el-space wrap>
+            <template v-for="(item, index) in image_list" :key="index">
+              <div class="file cursor border-r-4" v-if="item.url">
+                <el-image
+                  :src="item.url"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="getAttrsArray(image_list, 'url')"
+                  :initial-index="index"
+                  alt=""
+                  fit="cover"
+                  style="width: 170px; height: 170px; display: block"
+                  class="border-r-4"
+                />
+              </div>
+            </template>
+          </el-space>
+        </div>
+        <div class="mb-8" v-if="audio_list.length">
+          <el-space wrap>
+            <template v-for="(item, index) in audio_list" :key="index">
+              <div class="file cursor border-r-4" v-if="item.url">
+                <audio
+                  :src="item.url"
+                  controls
+                  style="width: 350px; height: 43px"
+                  class="border-r-4"
+                />
+              </div>
+            </template>
+          </el-space>
+        </div>
+        {{ chatRecord.problem_text }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { type chatType } from '@/api/type/application'
+import { getImgUrl, getAttrsArray, downloadByURL } from '@/utils/utils'
+import { onMounted, computed } from 'vue'
+
+const props = defineProps<{
+  application: any
+  chatRecord: chatType
+}>()
+const document_list = computed(() => {
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.document_list || []
+  }
+  const startNode = props.chatRecord.execution_details?.find(
+    (detail) => detail.type === 'start-node'
+  )
+  return startNode?.document_list || []
+})
+const image_list = computed(() => {
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.image_list || []
+  }
+  const startNode = props.chatRecord.execution_details?.find(
+    (detail) => detail.type === 'start-node'
+  )
+  return startNode?.image_list || []
+})
+const audio_list = computed(() => {
+  if (props.chatRecord?.upload_meta) {
+    return props.chatRecord.upload_meta?.audio_list || []
+  }
+  const startNode = props.chatRecord.execution_details?.find(
+    (detail) => detail.type === 'start-node'
+  )
+  return startNode?.audio_list || []
+})
+
+function downloadFile(item: any) {
+  downloadByURL(item.url, item.name)
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.download-file {
+  width: 200px;
+  height: 43px;
+
+  &:hover {
+    color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary);
+
+    .download-button {
+      display: block;
+      text-align: center;
+      line-height: 26px;
+    }
+
+    .show {
+      display: none;
+    }
+  }
+
+  .show {
+    display: block;
+  }
+
+  .download-button {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/ai-chat/component/user-form/index.vue b/src/components/ai-chat/component/user-form/index.vue
new file mode 100644
index 0000000..b5aa843
--- /dev/null
+++ b/src/components/ai-chat/component/user-form/index.vue
@@ -0,0 +1,295 @@
+<template>
+  <div
+    v-if="
+      (inputFieldList.length > 0 || (type === 'debug-ai-chat' && apiInputFieldList.length > 0)) &&
+      type !== 'log'
+    "
+    class="mb-16"
+    style="padding: 0 24px"
+  >
+    <el-card shadow="always" class="dialog-card" style="--el-card-padding: 16px 8px">
+      <div class="flex align-center cursor w-full" style="padding: 0 8px;" @click="showUserInput = !showUserInput">
+        <el-icon class="mr-8 arrow-icon" :class="showUserInput ? 'rotate-90' : ''"
+          ><CaretRight
+        /></el-icon>
+        用户输入
+      </div>
+      <el-scrollbar max-height="160">
+        <el-collapse-transition>
+          <div v-show="showUserInput" class="mt-16" style="padding: 0 8px;">
+            <DynamicsForm
+              :key="dynamicsFormRefresh"
+              v-model="form_data_context"
+              :model="form_data_context"
+              label-position="top"
+              require-asterisk-position="right"
+              :render_data="inputFieldList"
+              ref="dynamicsFormRef"
+            />
+            <DynamicsForm
+              v-if="type === 'debug-ai-chat'"
+              v-model="api_form_data_context"
+              :model="api_form_data_context"
+              label-position="top"
+              require-asterisk-position="right"
+              :render_data="apiInputFieldList"
+              ref="dynamicsFormRef2"
+            />
+          </div>
+        </el-collapse-transition>
+      </el-scrollbar>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import { useRoute } from 'vue-router'
+import { MsgWarning } from '@/utils/message'
+const route = useRoute()
+const props = defineProps<{
+  application: any
+  type: 'log' | 'ai-chat' | 'debug-ai-chat'
+  api_form_data: any
+  form_data: any
+}>()
+// 用于刷新动态表单
+const dynamicsFormRefresh = ref(0)
+const inputFieldList = ref<FormField[]>([])
+const apiInputFieldList = ref<FormField[]>([])
+const showUserInput = ref(true)
+const emit = defineEmits(['update:api_form_data', 'update:form_data'])
+
+const api_form_data_context = computed({
+  get: () => {
+    return props.api_form_data
+  },
+  set: (data) => {
+    emit('update:api_form_data', data)
+  }
+})
+
+const form_data_context = computed({
+  get: () => {
+    return props.form_data
+  },
+  set: (data) => {
+    emit('update:form_data', data)
+  }
+})
+
+watch(
+  () => props.application,
+  () => {
+    handleInputFieldList()
+  }
+)
+
+function handleInputFieldList() {
+  dynamicsFormRefresh.value++
+  let default_value: any = {}
+  props.application.work_flow?.nodes
+    ?.filter((v: any) => v.id === 'base-node')
+    .map((v: any) => {
+      inputFieldList.value = v.properties.user_input_field_list
+        ? v.properties.user_input_field_list.map((v: any) => {
+            switch (v.type) {
+              case 'input':
+                return {
+                  field: v.variable,
+                  input_type: 'TextInput',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required
+                }
+              case 'select':
+                return {
+                  field: v.variable,
+                  input_type: 'SingleSelect',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  option_list: v.optionList.map((o: any) => {
+                    return { key: o, value: o }
+                  })
+                }
+              case 'date':
+                return {
+                  field: v.variable,
+                  input_type: 'DatePicker',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  attrs: {
+                    format: 'YYYY-MM-DD HH:mm:ss',
+                    'value-format': 'YYYY-MM-DD HH:mm:ss',
+                    type: 'datetime'
+                  }
+                }
+              default:
+                return v
+            }
+          })
+        : v.properties.input_field_list
+          ? v.properties.input_field_list
+              .filter((v: any) => v.assignment_method === 'user_input')
+              .map((v: any) => {
+                switch (v.type) {
+                  case 'input':
+                    return {
+                      field: v.variable,
+                      input_type: 'TextInput',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required
+                    }
+                  case 'select':
+                    return {
+                      field: v.variable,
+                      input_type: 'SingleSelect',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required,
+                      option_list: v.optionList.map((o: any) => {
+                        return { key: o, value: o }
+                      })
+                    }
+                  case 'date':
+                    return {
+                      field: v.variable,
+                      input_type: 'DatePicker',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required,
+                      attrs: {
+                        format: 'YYYY-MM-DD HH:mm:ss',
+                        'value-format': 'YYYY-MM-DD HH:mm:ss',
+                        type: 'datetime'
+                      }
+                    }
+                  default:
+                    break
+                }
+              })
+          : []
+
+      apiInputFieldList.value = v.properties.api_input_field_list
+        ? v.properties.api_input_field_list.map((v: any) => {
+            switch (v.type) {
+              case 'input':
+                return {
+                  field: v.variable,
+                  input_type: 'TextInput',
+                  label: v.variable,
+                  default_value: v.default_value || default_value[v.variable],
+                  required: v.is_required
+                }
+              case 'select':
+                return {
+                  field: v.variable,
+                  input_type: 'SingleSelect',
+                  label: v.variable,
+                  default_value: v.default_value || default_value[v.variable],
+                  required: v.is_required,
+                  option_list: v.optionList.map((o: any) => {
+                    return { key: o, value: o }
+                  })
+                }
+              case 'date':
+                return {
+                  field: v.variable,
+                  input_type: 'DatePicker',
+                  label: v.variable,
+                  default_value: v.default_value || default_value[v.variable],
+                  required: v.is_required,
+                  attrs: {
+                    format: 'YYYY-MM-DD HH:mm:ss',
+                    'value-format': 'YYYY-MM-DD HH:mm:ss',
+                    type: 'datetime'
+                  }
+                }
+              default:
+                break
+            }
+          })
+        : v.properties.input_field_list
+          ? v.properties.input_field_list
+              .filter((v: any) => v.assignment_method === 'api_input')
+              .map((v: any) => {
+                switch (v.type) {
+                  case 'input':
+                    return {
+                      field: v.variable,
+                      input_type: 'TextInput',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required
+                    }
+                  case 'select':
+                    return {
+                      field: v.variable,
+                      input_type: 'SingleSelect',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required,
+                      option_list: v.optionList.map((o: any) => {
+                        return { key: o, value: o }
+                      })
+                    }
+                  case 'date':
+                    return {
+                      field: v.variable,
+                      input_type: 'DatePicker',
+                      label: v.name,
+                      default_value: default_value[v.variable],
+                      required: v.is_required,
+                      attrs: {
+                        format: 'YYYY-MM-DD HH:mm:ss',
+                        'value-format': 'YYYY-MM-DD HH:mm:ss',
+                        type: 'datetime'
+                      }
+                    }
+                  default:
+                    break
+                }
+              })
+          : []
+    })
+}
+/**
+ * 校验参数
+ */
+const checkInputParam = () => {
+  // 检查inputFieldList是否有未填写的字段
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (
+      inputFieldList.value[i].required &&
+      !form_data_context.value[inputFieldList.value[i].field]
+    ) {
+      MsgWarning('请填写所有必填字段')
+      return false
+    }
+  }
+  // 浏览器query参数找到接口传参
+  let msg = []
+  for (let f of apiInputFieldList.value) {
+    if (!api_form_data_context.value[f.field]) {
+      api_form_data_context.value[f.field] = route.query[f.field]
+    }
+    if (f.required && !api_form_data_context.value[f.field]) {
+      msg.push(f.field)
+    }
+  }
+  if (msg.length > 0) {
+    MsgWarning(`请在URL中填写参数 ${msg.join('、')}的值`)
+    return false
+  }
+  return true
+}
+defineExpose({ checkInputParam })
+onMounted(() => {
+  handleInputFieldList()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/ai-chat/index.scss b/src/components/ai-chat/index.scss
new file mode 100644
index 0000000..82cfcba
--- /dev/null
+++ b/src/components/ai-chat/index.scss
@@ -0,0 +1,101 @@
+.ai-chat {
+  --padding-left: 40px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--app-text-color);
+  box-sizing: border-box;
+  &__content {
+    padding-top: 0;
+    box-sizing: border-box;
+
+    .avatar {
+      float: left;
+    }
+
+    .content {
+      padding-left: var(--padding-left);
+
+      :deep(ol) {
+        margin-left: 16px !important;
+      }
+    }
+
+    .text {
+      padding: 6px 0;
+    }
+  }
+  &__operate {
+    background: #f3f7f9;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
+    }
+
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      .el-textarea__inner {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+        box-sizing: border-box;
+      }
+
+      .operate {
+        padding: 6px 10px;
+        .el-icon {
+          font-size: 20px;
+        }
+
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+
+        .el-loading-spinner {
+          margin-top: -15px;
+
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chat-width {
+  max-width: 80%;
+  margin: 0 auto;
+}
+@media only screen and (max-width: 1000px) {
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
diff --git a/src/components/ai-chat/index.vue b/src/components/ai-chat/index.vue
new file mode 100644
index 0000000..9c976e1
--- /dev/null
+++ b/src/components/ai-chat/index.vue
@@ -0,0 +1,461 @@
+<template>
+  <div ref="aiChatRef" class="ai-chat" :class="type == 'log' ? 'chart-log' : ''">
+    <UserForm
+      v-model:api_form_data="api_form_data"
+      v-model:form_data="form_data"
+      :application="applicationDetails"
+      :type="type"
+      ref="userFormRef"
+    ></UserForm>
+    <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
+      <div ref="dialogScrollbar" class="ai-chat__content p-24">
+        <PrologueContent
+          :type="type"
+          :application="applicationDetails"
+          :available="available"
+          :send-message="sendMessage"
+        ></PrologueContent>
+
+        <template v-for="(item, index) in chatList" :key="index">
+          <!-- 问题 -->
+          <QuestionContent :application="applicationDetails" :chat-record="item"></QuestionContent>
+          <!-- 回答 -->
+          <AnswerContent
+            :application="applicationDetails"
+            :loading="loading"
+            v-model:chat-record="chatList[index]"
+            :type="type"
+            :send-message="sendMessage"
+            :chat-management="ChatManagement"
+          ></AnswerContent>
+        </template>
+      </div>
+    </el-scrollbar>
+
+    <ChatInputOperate
+      :app-id="appId"
+      :application-details="applicationDetails"
+      :is-mobile="isMobile"
+      :type="type"
+      :send-message="sendMessage"
+      :open-chat-id="openChatId"
+      :chat-management="ChatManagement"
+      v-model:chat-id="chartOpenId"
+      v-model:loading="loading"
+      v-if="type !== 'log'"
+    >
+      <template #operateBefore> <slot name="operateBefore" /> </template>
+    </ChatInputOperate>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import applicationApi from '@/api/application'
+import logApi from '@/api/log'
+import { ChatManagement, type chatType } from '@/api/type/application'
+import { randomId } from '@/utils/utils'
+import useStore from '@/stores'
+import { isWorkFlow } from '@/utils/application'
+import { debounce } from 'lodash'
+import AnswerContent from '@/components/ai-chat/component/answer-content/index.vue'
+import QuestionContent from '@/components/ai-chat/component/question-content/index.vue'
+import ChatInputOperate from '@/components/ai-chat/component/chat-input-operate/index.vue'
+import PrologueContent from '@/components/ai-chat/component/prologue-content/index.vue'
+import UserForm from '@/components/ai-chat/component/user-form/index.vue'
+defineOptions({ name: 'AiChat' })
+const route = useRoute()
+const {
+  params: { accessToken, id },
+  query: { mode }
+} = route as any
+const props = withDefaults(
+  defineProps<{
+    applicationDetails: any
+    type?: 'log' | 'ai-chat' | 'debug-ai-chat'
+    appId?: string
+    record?: Array<chatType>
+    available?: boolean
+    chatId?: string
+  }>(),
+  {
+    applicationDetails: () => ({}),
+    available: true,
+    type: 'ai-chat'
+  }
+)
+const emit = defineEmits(['refresh', 'scroll'])
+const { application, common } = useStore()
+const isMobile = computed(() => {
+  return common.isMobile() || mode === 'embed'
+})
+const aiChatRef = ref()
+const scrollDiv = ref()
+const dialogScrollbar = ref()
+const loading = ref(false)
+const inputValue = ref<string>('')
+const chartOpenId = ref<string>('')
+const chatList = ref<any[]>([])
+const form_data = ref<any>({})
+const api_form_data = ref<any>({})
+const userFormRef = ref<InstanceType<typeof UserForm>>()
+watch(
+  () => props.chatId,
+  (val) => {
+    if (val && val !== 'new') {
+      chartOpenId.value = val
+    } else {
+      chartOpenId.value = ''
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.applicationDetails,
+  () => {
+    chartOpenId.value = ''
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.record,
+  (value) => {
+    chatList.value = value ? value : []
+  },
+  {
+    immediate: true
+  }
+)
+
+function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
+  if (!userFormRef.value?.checkInputParam()) {
+    return
+  }
+  if (!loading.value && props.applicationDetails?.name) {
+    handleDebounceClick(val, other_params_data, chat)
+  }
+}
+
+const handleDebounceClick = debounce((val, other_params_data?: any, chat?: chatType) => {
+  chatMessage(chat, val, false, other_params_data)
+}, 200)
+
+/**
+ * 打开对话id
+ */
+const openChatId: () => Promise<string> = () => {
+  const obj = props.applicationDetails
+  if (props.appId) {
+    return applicationApi
+      .getChatOpen(props.appId)
+      .then((res) => {
+        chartOpenId.value = res.data
+        return res.data
+      })
+      .catch((res) => {
+        if (res.response.status === 403) {
+          return application.asyncAppAuthentication(accessToken).then(() => {
+            return openChatId()
+          })
+        }
+        return Promise.reject(res)
+      })
+  } else {
+    if (isWorkFlow(obj.type)) {
+      const submitObj = {
+        work_flow: obj.work_flow
+      }
+      return applicationApi.postWorkflowChatOpen(submitObj).then((res) => {
+        chartOpenId.value = res.data
+        return res.data
+      })
+    } else {
+      return applicationApi.postChatOpen(obj).then((res) => {
+        chartOpenId.value = res.data
+        return res.data
+      })
+    }
+  }
+}
+/**
+ * 对话
+ */
+function getChartOpenId(chat?: any) {
+  return openChatId().then(() => {
+    chatMessage(chat)
+  })
+}
+
+/**
+ * 获取一个递归函数,处理流式数据
+ * @param chat    每一条对话记录
+ * @param reader  流数据
+ * @param stream  是否是流式数据
+ */
+const getWrite = (chat: any, reader: any, stream: boolean) => {
+  let tempResult = ''
+  /**
+   *
+   * @param done  是否结束
+   * @param value 值
+   */
+  const write_stream = ({ done, value }: { done: boolean; value: any }) => {
+    try {
+      if (done) {
+        ChatManagement.close(chat.id)
+        return
+      }
+      const decoder = new TextDecoder('utf-8')
+      let str = decoder.decode(value, { stream: true })
+      // 这里解释一下 start 因为数据流返回流并不是按照后端chunk返回 我们希望得到的chunk是data:{xxx}\n\n 但是它获取到的可能是 data:{ -> xxx}\n\n 总而言之就是 fetch不能保证每个chunk都说以data:开始 \n\n结束
+      tempResult += str
+      const split = tempResult.match(/data:.*}\n\n/g)
+      if (split) {
+        str = split.join('')
+        tempResult = tempResult.replace(str, '')
+      } else {
+        return reader.read().then(write_stream)
+      }
+      // 这里解释一下 end
+      if (str && str.startsWith('data:')) {
+        if (split) {
+          for (const index in split) {
+            const chunk = JSON?.parse(split[index].replace('data:', ''))
+            chat.chat_id = chunk.chat_id
+            chat.record_id = chunk.chat_record_id
+            if (!chunk.is_end) {
+              ChatManagement.appendChunk(chat.id, chunk)
+            }
+            if (chunk.is_end) {
+              // 流处理成功 返回成功回调
+              return Promise.resolve()
+            }
+          }
+        }
+      }
+    } catch (e) {
+      return Promise.reject(e)
+    }
+    return reader.read().then(write_stream)
+  }
+  /**
+   * 处理 json 响应
+   * @param param0
+   */
+  const write_json = ({ done, value }: { done: boolean; value: any }) => {
+    if (done) {
+      const result_block = JSON.parse(tempResult)
+      if (result_block.code === 500) {
+        return Promise.reject(result_block.message)
+      } else {
+        if (result_block.content) {
+          ChatManagement.append(chat.id, result_block.content)
+        }
+      }
+      ChatManagement.close(chat.id)
+      return
+    }
+    if (value) {
+      const decoder = new TextDecoder('utf-8')
+      tempResult += decoder.decode(value)
+    }
+    return reader.read().then(write_json)
+  }
+  return stream ? write_stream : write_json
+}
+const errorWrite = (chat: any, message?: string) => {
+  ChatManagement.addChatRecord(chat, 50, loading)
+  ChatManagement.write(chat.id)
+  ChatManagement.append(chat.id, message || '抱歉，当前正在维护，无法提供服务，请稍后再试！')
+  ChatManagement.updateStatus(chat.id, 500)
+  ChatManagement.close(chat.id)
+}
+// 保存上传文件列表
+
+function chatMessage(chat?: any, problem?: string, re_chat?: boolean, other_params_data?: any) {
+  loading.value = true
+  if (!chat) {
+    chat = reactive({
+      id: randomId(),
+      problem_text: problem ? problem : inputValue.value.trim(),
+      answer_text: '',
+      answer_text_list: [{ content: '' }],
+      buffer: [],
+      write_ed: false,
+      is_stop: false,
+      record_id: '',
+      chat_id: '',
+      vote_status: '-1',
+      status: undefined,
+      upload_meta: {
+        image_list:
+          other_params_data && other_params_data.image_list ? other_params_data.image_list : [],
+        document_list:
+          other_params_data && other_params_data.document_list
+            ? other_params_data.document_list
+            : [],
+        audio_list:
+          other_params_data && other_params_data.audio_list ? other_params_data.audio_list : []
+      }
+    })
+    chatList.value.push(chat)
+    ChatManagement.addChatRecord(chat, 50, loading)
+    ChatManagement.write(chat.id)
+    inputValue.value = ''
+    nextTick(() => {
+      // 将滚动条滚动到最下面
+      scrollDiv.value.setScrollTop(getMaxHeight())
+    })
+  }
+  if (chat.run_time) {
+    ChatManagement.addChatRecord(chat, 50, loading)
+    ChatManagement.write(chat.id)
+  }
+  if (!chartOpenId.value) {
+    getChartOpenId(chat).catch(() => {
+      errorWrite(chat)
+    })
+  } else {
+    const obj = {
+      message: chat.problem_text,
+      re_chat: re_chat || false,
+      ...other_params_data,
+      form_data: {
+        ...form_data.value,
+        ...api_form_data.value
+      }
+    }
+    // 对话
+    applicationApi
+      .postChatMessage(chartOpenId.value, obj)
+      .then((response) => {
+        if (response.status === 401) {
+          application
+            .asyncAppAuthentication(accessToken)
+            .then(() => {
+              chatMessage(chat, problem)
+            })
+            .catch(() => {
+              errorWrite(chat)
+            })
+        } else if (response.status === 460) {
+          return Promise.reject('无法识别用户身份')
+        } else if (response.status === 461) {
+          return Promise.reject('抱歉，您的提问已达到最大限制，请明天再来吧！')
+        } else {
+          nextTick(() => {
+            // 将滚动条滚动到最下面
+            scrollDiv.value.setScrollTop(getMaxHeight())
+          })
+          const reader = response.body.getReader()
+          // 处理流数据
+          const write = getWrite(
+            chat,
+            reader,
+            response.headers.get('Content-Type') !== 'application/json'
+          )
+          return reader.read().then(write)
+        }
+      })
+      .then(() => {
+        if (props.chatId === 'new') {
+          emit('refresh', chartOpenId.value)
+        }
+        return (id || props.applicationDetails?.show_source) && getSourceDetail(chat)
+      })
+      .finally(() => {
+        ChatManagement.close(chat.id)
+      })
+      .catch((e: any) => {
+        errorWrite(chat, e + '')
+      })
+  }
+}
+
+/**
+ * 获取对话详情
+ * @param row
+ */
+function getSourceDetail(row: any) {
+  logApi.getRecordDetail(id || props.appId, row.chat_id, row.record_id, loading).then((res) => {
+    const exclude_keys = ['answer_text', 'id', 'answer_text_list']
+    Object.keys(res.data).forEach((key) => {
+      if (!exclude_keys.includes(key)) {
+        row[key] = res.data[key]
+      }
+    })
+  })
+  return true
+}
+
+/**
+ * 滚动条距离最上面的高度
+ */
+const scrollTop = ref(0)
+
+const scorll = ref(true)
+
+const getMaxHeight = () => {
+  return dialogScrollbar.value!.scrollHeight
+}
+/**
+ * 滚动滚动条到最上面
+ * @param $event
+ */
+const handleScrollTop = ($event: any) => {
+  scrollTop.value = $event.scrollTop
+  if (
+    dialogScrollbar.value.scrollHeight - (scrollTop.value + scrollDiv.value.wrapRef.offsetHeight) <=
+    30
+  ) {
+    scorll.value = true
+  } else {
+    scorll.value = false
+  }
+  emit('scroll', { ...$event, dialogScrollbar: dialogScrollbar.value, scrollDiv: scrollDiv.value })
+}
+/**
+ * 处理跟随滚动条
+ */
+const handleScroll = () => {
+  if (props.type !== 'log' && scrollDiv.value) {
+    // 内部高度小于外部高度 就需要出滚动条
+    if (scrollDiv.value.wrapRef.offsetHeight < dialogScrollbar.value.scrollHeight) {
+      // 如果当前滚动条距离最下面的距离在 规定距离 滚动条就跟随
+      if (scorll.value) {
+        scrollDiv.value.setScrollTop(getMaxHeight())
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.sendMessage = sendMessage
+})
+
+onBeforeUnmount(() => {
+  window.sendMessage = null
+})
+
+function setScrollBottom() {
+  // 将滚动条滚动到最下面
+  scrollDiv.value.setScrollTop(getMaxHeight())
+}
+
+watch(
+  chatList,
+  () => {
+    handleScroll()
+  },
+  { deep: true, immediate: true }
+)
+
+defineExpose({
+  setScrollBottom
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/components/app-avatar/index.vue b/src/components/app-avatar/index.vue
new file mode 100644
index 0000000..a35217c
--- /dev/null
+++ b/src/components/app-avatar/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-avatar
+    :size="30"
+    :style="{ background: props.pinyinColor && getAvatarColour(firstUserName) }"
+    style="flex-shrink: 0"
+    v-bind="$attrs"
+  >
+    <slot> {{ firstUserName }} </slot>
+  </el-avatar>
+</template>
+<script setup lang="ts">
+import { pinyin } from 'pinyin-pro'
+import { computed } from 'vue'
+defineOptions({ name: 'AppAvatar' })
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  },
+  //是否用拼音字母颜色
+  pinyinColor: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const firstUserName = computed(() => {
+  return props.name?.substring(0, 1)
+})
+
+const getAvatarColour = (name: string) => {
+  const colours = [
+    '#3370FF',
+    '#4954E6',
+    '#F54A45',
+    '#00B69D',
+    '#2CA91F',
+    '#98B600',
+    '#F80F80',
+    '#D136D1',
+    '#F01D94',
+    '#7F3BF5',
+    '#8F959E'
+  ]
+  let charIndex = name
+    ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 >= 0
+      ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65
+      : 0
+    : 0
+
+  function getColor() {
+    return colours[Math.abs(charIndex % colours.length)]
+  }
+
+  return getColor()
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/app-charts/components/LineCharts.vue b/src/components/app-charts/components/LineCharts.vue
new file mode 100644
index 0000000..b4215c9
--- /dev/null
+++ b/src/components/app-charts/components/LineCharts.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :id="id" ref="PieChartRef" :style="{ height: height, width: width }" />
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts'
+import { numberFormat } from '@/utils/utils'
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'lineChartId'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  },
+  option: {
+    type: Object,
+    required: true
+  } // option: { title , data }
+})
+
+const color = ['rgba(82, 133, 255, 1)', 'rgba(255, 207, 47, 1)']
+
+const areaColor = ['rgba(82, 133, 255, 0.2)', 'rgba(255, 207, 47, 0.2)']
+
+function initChart() {
+  let myChart = echarts?.getInstanceByDom(document.getElementById(props.id)!)
+  if (myChart === null || myChart === undefined) {
+    myChart = echarts.init(document.getElementById(props.id))
+  }
+  const series: any = []
+  if (props.option?.yData?.length) {
+    props.option?.yData.forEach((item: any, index: number) => {
+      series.push({
+        itemStyle: {
+          color: color[index]
+        },
+        areaStyle: item.area
+          ? {
+              color: areaColor[index]
+            }
+          : null,
+        ...item
+      })
+    })
+  }
+  const option = {
+    title: {
+      text: props.option?.title,
+      textStyle: {
+        fontSize: '16px'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: any) => numberFormat(value)
+      // axisPointer: {
+      //   type: 'cross',
+      //   label: {
+      //     backgroundColor: '#6a7985'
+      //   }
+      // }
+    },
+    legend: {
+      right: 0,
+      itemWidth: 8,
+      textStyle: {
+        color: '#646A73'
+      },
+      icon: 'circle'
+    },
+    grid: {
+      left: '1%',
+      right: '1%',
+      bottom: '0',
+      top: '18%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: props.option.xData
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#EFF0F1'
+        }
+      },
+      axisLabel: {
+        formatter: (value: any) => {
+          return numberFormat(value)
+        }
+      }
+    },
+    series: series
+  }
+
+  // 渲染数据
+  myChart.setOption(option, true)
+}
+
+function changeChartSize() {
+  echarts.getInstanceByDom(document.getElementById(props.id)!)?.resize()
+}
+
+watch(
+  () => props.option,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        initChart()
+      })
+    }
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+    window.addEventListener('resize', changeChartSize)
+  })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(document.getElementById(props.id)!)?.dispose()
+  window.removeEventListener('resize', changeChartSize)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/app-charts/index.vue b/src/components/app-charts/index.vue
new file mode 100644
index 0000000..e3b042b
--- /dev/null
+++ b/src/components/app-charts/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="typeComponentMap[type]"
+    :height="height"
+    :option="option"
+    :dataZoom="dataZoom"
+    class="v-charts"
+  />
+</template>
+<script lang="ts" setup>
+import line from './components/LineCharts.vue'
+defineOptions({ name: 'AppCharts' })
+defineProps({
+  type: {
+    type: String,
+    default: 'line'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  },
+  dataZoom: Boolean,
+  option: {
+    type: Object,
+    required: true
+  } // { title , xData, yData, formatStr  }
+})
+
+const typeComponentMap = { line } as any
+</script>
diff --git a/src/components/app-table/index.vue b/src/components/app-table/index.vue
new file mode 100644
index 0000000..1b77308
--- /dev/null
+++ b/src/components/app-table/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="app-table" :class="quickCreate ? 'table-quick-append' : ''">
+    <el-table :max-height="tableHeight" v-bind="$attrs" ref="appTableRef">
+      <template #append v-if="quickCreate">
+        <div v-if="showInput">
+          <el-input
+            ref="quickInputRef"
+            v-model="inputValue"
+            :placeholder="`请输入${quickCreateName}`"
+            class="w-500 mr-12"
+            autofocus
+            :maxlength="quickCreateMaxlength || '-'"
+            :show-word-limit="quickCreateMaxlength ? true : false"
+            @keydown.enter="submitHandle"
+            clearable
+          />
+
+          <el-button type="primary" @click="submitHandle" :disabled="loading">创建</el-button>
+          <el-button @click="showInput = false" :disabled="loading">取消</el-button>
+        </div>
+        <div v-else @click="quickCreateHandle" class="w-full">
+          <el-button type="primary" link class="quich-button">
+            <el-icon><Plus /></el-icon>
+            <span class="ml-4">{{ quickCreatePlaceholder }}</span>
+          </el-button>
+        </div>
+      </template>
+      <slot></slot>
+    </el-table>
+    <div class="app-table__pagination mt-16" v-if="$slots.pagination || paginationConfig">
+      <slot name="pagination">
+        <el-pagination
+          v-model:current-page="paginationConfig.current_page"
+          v-model:page-size="paginationConfig.page_size"
+          :page-sizes="pageSizes"
+          :total="paginationConfig.total"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, watch, computed, onMounted } from 'vue'
+import { MsgError } from '@/utils/message'
+defineOptions({ name: 'AppTable' })
+
+import useStore from '@/stores'
+const { common } = useStore()
+
+const props = defineProps({
+  paginationConfig: {
+    type: Object,
+    default: () => {}
+  },
+  quickCreate: {
+    type: Boolean,
+    default: false
+  },
+  quickCreateName: {
+    type: String,
+    default: '文档名称'
+  },
+  quickCreatePlaceholder: {
+    type: String,
+    default: '快速创建空白文档'
+  },
+  quickCreateMaxlength: {
+    type: Number,
+    default: () => 0
+  },
+  storeKey: String
+})
+const emit = defineEmits(['changePage', 'sizeChange', 'creatQuick'])
+
+const paginationConfig = computed(() => props.paginationConfig)
+
+const pageSizes = [10, 20, 50, 100]
+
+const quickInputRef = ref()
+const appTableRef = ref()
+
+const loading = ref(false)
+const showInput = ref(false)
+const inputValue = ref('')
+const tableHeight = ref(0)
+
+watch(showInput, (bool) => {
+  if (!bool) {
+    inputValue.value = ''
+  }
+})
+
+function submitHandle() {
+  if (inputValue.value) {
+    loading.value = true
+    emit('creatQuick', inputValue.value)
+    setTimeout(() => {
+      showInput.value = false
+      loading.value = false
+    }, 200)
+  } else {
+    MsgError(`${props.quickCreateName}不能为空！`)
+  }
+}
+
+function quickCreateHandle() {
+  showInput.value = true
+  nextTick(() => {
+    quickInputRef.value?.focus()
+  })
+}
+
+function handleSizeChange() {
+  emit('sizeChange')
+  if (props.storeKey) {
+    common.savePage(props.storeKey, props.paginationConfig)
+  }
+}
+function handleCurrentChange() {
+  emit('changePage')
+  if (props.storeKey) {
+    common.savePage(props.storeKey, props.paginationConfig)
+  }
+}
+
+function clearSelection() {
+  appTableRef.value?.clearSelection()
+}
+defineExpose({
+  clearSelection
+})
+
+onMounted(() => {
+  tableHeight.value = window.innerHeight - 300
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - 300
+    })()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.app-table {
+  &__pagination {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .quich-button {
+    &:hover {
+      color: var(--el-button-text-color);
+    }
+  }
+}
+</style>
diff --git a/src/components/auto-tooltip/index.vue b/src/components/auto-tooltip/index.vue
new file mode 100644
index 0000000..cc29d99
--- /dev/null
+++ b/src/components/auto-tooltip/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-tooltip
+    v-bind="$attrs"
+    :disabled="!(containerWeight > contentWeight)"
+    effect="dark"
+    placement="bottom"
+    popper-class="auto-tooltip-popper"
+  >
+    <div ref="tagLabel" :class="['auto-tooltip', className]" :style="style">
+      <slot></slot>
+    </div>
+  </el-tooltip>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+defineOptions({ name: 'AutoTooltip' })
+const props = defineProps({ className: String, style: Object })
+const tagLabel = ref()
+const containerWeight = ref(0)
+const contentWeight = ref(0)
+
+onMounted(() => {
+  nextTick(() => {
+    containerWeight.value = tagLabel.value?.scrollWidth
+    contentWeight.value = tagLabel.value?.clientWidth
+  })
+  window.addEventListener('resize', function () {
+    containerWeight.value = tagLabel.value?.scrollWidth
+    contentWeight.value = tagLabel.value?.clientWidth
+  })
+})
+</script>
+<style lang="scss" scoped>
+.auto-tooltip {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/back-button/index.vue b/src/components/back-button/index.vue
new file mode 100644
index 0000000..0a0ea69
--- /dev/null
+++ b/src/components/back-button/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-button class="back-button cursor mr-4" text @click="jump">
+    <el-icon :size="20">
+      <Back />
+    </el-icon>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { useRouter, type RouteLocationRaw } from 'vue-router'
+defineOptions({ name: 'BackButton' })
+const router = useRouter()
+const props = defineProps({
+  to: String
+})
+
+const emit = defineEmits(['click'])
+/* 上一层路由 */
+const back: any = router.options.history.state.back
+function jump() {
+  if (props.to === '-1') {
+    back ? router.push(back) : router.go(-1)
+  } else if (props.to) {
+    router.push(props.to as RouteLocationRaw)
+  } else {
+    emit('click')
+  }
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/src/components/card-add/index.vue b/src/components/card-add/index.vue
new file mode 100644
index 0000000..7572865
--- /dev/null
+++ b/src/components/card-add/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-card shadow="never" class="card-add">
+    <div class="flex-center">
+      <AppIcon iconName="Plus" class="add-icon p-8 border-r-4 layout-bg" />
+      <span>{{ title }}</span>
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'CardAdd' })
+defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  }
+})
+</script>
+<style lang="scss" scoped>
+.card-add {
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  cursor: pointer;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-disabled-bg-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+
+  .add-icon {
+    font-size: 14px;
+    border: 1px solid var(--app-border-color-dark);
+    margin-right: 12px;
+  }
+  &:hover {
+    color: var(--el-color-primary);
+    background: #ffffff;
+    border: 1px dashed var(--el-color-primary);
+    .add-icon {
+      background: #ffffff;
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+</style>
diff --git a/src/components/card-box/index.vue b/src/components/card-box/index.vue
new file mode 100644
index 0000000..4ebfa0a
--- /dev/null
+++ b/src/components/card-box/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+    <div class="card-header">
+      <slot name="header">
+        <div class="title flex" :class="$slots.subTitle ? '' : 'align-center'">
+          <slot name="icon">
+            <AppAvatar v-if="showIcon" class="mr-12 avatar-blue" shape="square" :size="32">
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+            </AppAvatar>
+          </slot>
+          <div style="width: 90%;margin-top: -5px;">
+            <auto-tooltip :content="title" style="width: 65%; height: 22px">
+              {{ title }}
+            </auto-tooltip>
+            <slot name="subTitle"> </slot>
+          </div>
+        </div>
+      </slot>
+    </div>
+    <div
+      class="description break-all"
+      :class="$slots.subTitle ? 'mt-24' : 'mt-12'"
+      v-if="$slots.description || description"
+    >
+      <slot name="description">
+        <div class="content">
+          {{ description }}
+        </div>
+      </slot>
+    </div>
+    <slot />
+    <div @mouseenter="subHoveredEnter">
+      <slot name="mouseEnter" v-if="$slots.mouseEnter && show" />
+    </div>
+    <div class="card-footer" v-if="$slots.footer">
+      <slot name="footer" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, useSlots } from 'vue'
+
+defineOptions({ name: 'CardBox' })
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 标题
+     */
+    title?: string
+    /**
+     * 描述
+     */
+    description?: string
+    /**
+     * 是否展示icon
+     */
+    showIcon?: boolean
+  }>(),
+  { title: '标题', description: '', showIcon: true, border: true }
+)
+
+const show = ref(false)
+// card上面存在dropdown菜单
+const subHovered = ref(false)
+function cardEnter() {
+  show.value = true
+  subHovered.value = false
+}
+
+function cardLeave() {
+  show.value = subHovered.value
+}
+
+function subHoveredEnter() {
+  subHovered.value = true
+}
+</script>
+<style lang="scss" scoped>
+.card-box {
+  font-size: 14px;
+  position: relative;
+  min-height: var(--card-min-height);
+  min-width: var(--card-min-width);
+  border-radius: 8px;
+  .title {
+    height: 20px;
+
+  }
+  .description {
+    color: var(--app-text-color-secondary);
+    line-height: 22px;
+    font-weight: 400;
+    .content {
+      display: -webkit-box;
+      height: var(--app-card-box-description-height, 40px);
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+  }
+
+  .card-footer {
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    min-height: 30px;
+    color: var(--app-text-color-secondary);
+    font-weight: 400;
+    padding: 0 16px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/components/card-checkbox/index.vue b/src/components/card-checkbox/index.vue
new file mode 100644
index 0000000..d8f2176
--- /dev/null
+++ b/src/components/card-checkbox/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-card
+    shadow="hover"
+    class="card-checkbox cursor"
+    :class="modelValue.includes(toModelValue) ? 'active' : ''"
+    @click="checked"
+  >
+    <div class="flex-between">
+      <div class="flex align-center">
+        <slot name="icon">
+          <AppAvatar v-if="data.type === '1'" class="mr-8 avatar-purple" shape="square" :size="32">
+            <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+
+          <AppAvatar v-else class="mr-12 avatar-blue" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+        </slot>
+        <slot></slot>
+      </div>
+      <el-checkbox v-bind:modelValue="modelValue.includes(toModelValue)" @change="checkboxChange">
+      </el-checkbox>
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+defineOptions({ name: 'CardCheckbox' })
+const props = defineProps<{
+  data: any
+
+  modelValue: Array<any>
+
+  valueField?: string
+}>()
+
+const toModelValue = computed(() => (props.valueField ? props.data[props.valueField] : props.data))
+
+// const isChecked = computed({
+//   get: () => props.modelValue.includes(toModelValue.value)),
+//   set: (val) => val
+// })
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const checked = () => {
+  const value = props.modelValue ? props.modelValue : []
+  if (props.modelValue.includes(toModelValue.value)) {
+    emit(
+      'update:modelValue',
+      value.filter((item) => item !== toModelValue.value)
+    )
+  } else {
+    emit('update:modelValue', [...value, toModelValue.value])
+  }
+  checkboxChange()
+}
+
+function checkboxChange() {
+  emit('change')
+}
+</script>
+<style lang="scss">
+.card-checkbox {
+  &.active {
+    border: 1px solid var(--el-color-primary);
+  }
+  input.checkbox[type='checkbox'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    height: 14px;
+    width: 14px;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      background-color: white;
+      color: #000;
+      height: 13px;
+      width: 13px;
+      visibility: visible;
+      text-align: center;
+      box-sizing: border-box;
+      border: var(--el-border);
+      border-radius: var(--el-border-radius-small);
+      box-sizing: content-box;
+      content: '';
+    }
+
+    &:checked::after {
+      content: '✓';
+      color: #ffffff;
+      border-color: var(--el-color-primary);
+      background: var(--el-color-primary);
+    }
+  }
+}
+</style>
diff --git a/src/components/codemirror-editor/index.vue b/src/components/codemirror-editor/index.vue
new file mode 100644
index 0000000..c4086b8
--- /dev/null
+++ b/src/components/codemirror-editor/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <Codemirror
+    v-bind="$attrs"
+    ref="cmRef"
+    :extensions="extensions"
+    :style="codemirrorStyle"
+    :tab-size="4"
+    :autofocus="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { python } from '@codemirror/lang-python'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { linter, type Diagnostic } from '@codemirror/lint'
+import FunctionApi from '@/api/function-lib'
+
+defineOptions({ name: 'CodemirrorEditor' })
+
+function getRangeFromLineAndColumn(state: any, line: number, column: number, end_column?: number) {
+  const l = state.doc.line(line)
+  const form = l.from + column
+  const to_end_column = l.from + end_column
+  return {
+    form: form > l.to ? l.to : form,
+    to: end_column && to_end_column < l.to ? to_end_column : l.to
+  }
+}
+
+const regexpLinter = linter(async (view) => {
+  let diagnostics: Diagnostic[] = []
+  await FunctionApi.pylint(view.state.doc.toString()).then((ok) => {
+    ok.data.forEach((element: any) => {
+      const range = getRangeFromLineAndColumn(
+        view.state,
+        element.line,
+        element.column,
+        element.endColumn
+      )
+
+      diagnostics.push({
+        from: range.form,
+        to: range.to,
+        severity: element.type,
+        message: element.message
+      })
+    })
+  })
+  return diagnostics
+})
+const extensions = [python(), regexpLinter, oneDark]
+const codemirrorStyle = {
+  height: '210px!important'
+}
+const cmRef = ref<InstanceType<typeof Codemirror>>()
+</script>
+
+<style lang="scss"></style>
diff --git a/src/components/common-list/index.vue b/src/components/common-list/index.vue
new file mode 100644
index 0000000..58fb39f
--- /dev/null
+++ b/src/components/common-list/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="common-list">
+    <ul v-if="data.length > 0">
+      <template v-for="(item, index) in data" :key="index">
+        <li
+          @click.stop="clickHandle(item, index)"
+          :class="current === item[props.valueKey] ? 'active' : ''"
+          class="cursor"
+          @mouseenter.stop="mouseenter(item)"
+          @mouseleave.stop="mouseleave()"
+        >
+          <slot :row="item" :index="index"> </slot>
+        </li>
+      </template>
+    </ul>
+    <slot name="empty" v-else>
+      <el-empty description="暂无数据" />
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+defineOptions({ name: 'CommonList' })
+
+const props = withDefaults(
+  defineProps<{
+    data: Array<any>
+    defaultActive?: string
+    valueKey?: string // 唯一标识的键名
+  }>(),
+  {
+    data: () => [],
+    defaultActive: '',
+    valueKey: 'id'
+  }
+)
+
+const current = ref<Number | String>(0)
+
+watch(
+  () => props.defaultActive,
+  (val) => {
+    current.value = val
+  },
+  { immediate: true }
+)
+
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave'])
+
+function mouseenter(row: any) {
+  emit('mouseenter', row)
+}
+function mouseleave() {
+  emit('mouseleave')
+}
+
+function clickHandle(row: any, index: number) {
+  current.value = row[props.valueKey]
+  emit('click', row)
+}
+
+function clearCurrent() {
+  current.value = 0
+}
+defineExpose({
+  clearCurrent
+})
+</script>
+<style lang="scss" scoped>
+/* 通用 ui li样式 */
+.common-list {
+  li {
+    padding: 10px 16px;
+    font-weight: 400;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    &.active {
+      background: var(--el-color-primary-light-9);
+      border-radius: 4px;
+      color: var(--el-color-primary);
+      font-weight: 500;
+      &:hover {
+        background: var(--el-color-primary-light-9);
+      }
+    }
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/Demo.vue b/src/components/dynamics-form/Demo.vue
new file mode 100644
index 0000000..dce7f8f
--- /dev/null
+++ b/src/components/dynamics-form/Demo.vue
@@ -0,0 +1,299 @@
+<template>
+  <div style="width: 1024px">
+    <DynamicsForm
+      v-model="form_data"
+      :model="form_data"
+      :render_data="damo_data"
+      ref="dynamicsFormRef"
+    >
+      <template #default="scope">
+        <el-form-item label="其他字段">
+          <el-input v-model="scope.form_value['zha']" /> </el-form-item
+      ></template>
+    </DynamicsForm>
+    <el-button @click="click">点我校验</el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import { ref } from 'vue'
+import type { Dict } from '@/api/type/common'
+
+const damo_data: Array<FormField> = [
+  { field: 'name', input_type: 'PasswordInput', label: '用戶名', required: false },
+  { field: 'json_text', input_type: 'JsonInput', label: 'aa', required: false },
+  {
+    field: 'array_object_card_field',
+    input_type: 'ArrayObjectCard',
+    label: '測試',
+    trigger_type: 'CHILD_FORMS',
+    attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'top' },
+    required: false,
+    children: [
+      { field: 'name1', input_type: 'TextInput', label: '用戶名1' },
+      { field: 'name2', input_type: 'TextInput', label: '用戶名2' },
+      { field: 'name3', input_type: 'TextInput', label: '用戶名3' }
+    ]
+  },
+  {
+    field: 'maxkb_tokens',
+    input_type: 'Slider',
+    default_value: 1,
+    attrs: {
+      min: 0,
+      max: 10,
+      step: 1,
+      precision: 1,
+      'show-input-controls': false,
+      'show-input': true
+    },
+    label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' }
+  },
+  {
+    field: 'object_card_field',
+    input_type: 'ObjectCard',
+    label: '測試',
+    trigger_type: 'CHILD_FORMS',
+    attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
+    required: false,
+    children: [
+      { field: 'name1', input_type: 'TextInput', label: '用戶名1' },
+      { field: 'name2', input_type: 'TextInput', label: '用戶名2' },
+      { field: 'name3', input_type: 'TextInput', label: '用戶名3' }
+    ]
+  },
+  {
+    field: 'tab_card_field',
+    input_type: 'TabCard',
+    label: '測試',
+    trigger_type: 'CHILD_FORMS',
+    attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
+    required: false,
+    relation_trigger_field_dict: {
+      'array_object_card_field.0.name1': ['111']
+    },
+    props_info: { tabs_label: '用户' },
+    children: [
+      { field: 'name1', input_type: 'TextInput', label: '用戶名1' },
+      { field: 'name2', input_type: 'TextInput', label: '用戶名2' },
+      { field: 'name3', input_type: 'TextInput', label: '用戶名3' }
+    ]
+  },
+  {
+    field: 'single_select_field',
+    input_type: 'SingleSelect',
+    label: '测试单选',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test'
+      },
+      {
+        key: '测试1',
+        value: 'test1'
+      }
+    ]
+  },
+  {
+    field: 'multi_select_field',
+    input_type: 'MultiSelect',
+    default_value: ['test1'],
+    relation_show_field_dict: {
+      'object_card_field.name1': []
+    },
+    label: '测试多选下拉',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test'
+      },
+      {
+        key: '测试1',
+        value: 'test1'
+      }
+    ]
+  },
+  {
+    field: 'radio_field',
+    input_type: 'Radio',
+    label: '测试单选',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test'
+      },
+      {
+        key: '测试1',
+        value: 'test1'
+      }
+    ]
+  },
+  {
+    field: 'radio_button_field',
+    input_type: 'RadioButton',
+    label: '测试单选',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test'
+      },
+      {
+        key: '测试1',
+        value: 'test1'
+      }
+    ]
+  },
+  {
+    field: 'radio_card_field',
+    input_type: 'RadioCard',
+    label: '测试单选1',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test'
+      },
+      {
+        key: '测试111111',
+        value: 'test1'
+      }
+    ]
+  },
+  {
+    field: 'table_radio_field',
+    input_type: 'TableRadio',
+    label: '表格单选',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    props_info: {
+      active_msg: '当前选中',
+      table_columns: [
+        {
+          property: '`${row.key}${row.number}`',
+          label: '名称',
+          type: 'eval'
+        },
+        {
+          property: 'ProgressTableItem',
+          label: '数值',
+          type: 'component',
+          value_field: 'number',
+          attrs: {
+            color: [
+              { color: '#f56c6c', percentage: 20 },
+              { color: '#e6a23c', percentage: 40 },
+              { color: '#5cb87a', percentage: 60 },
+              { color: '#1989fa', percentage: 80 },
+              { color: '#6f7ad3', percentage: 100 }
+            ]
+          },
+          props_info: {
+            view_card: [
+              {
+                type: 'eval',
+                title: '测试',
+                value_field:
+                  '`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
+              },
+              {
+                type: 'eval',
+                title: '名称',
+                value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
+              }
+            ]
+          }
+        }
+      ],
+      style: { width: '500px' }
+    },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test',
+        number: 10
+      },
+      {
+        key: '测试111111',
+        value: 'test1',
+        number: 100
+      }
+    ]
+  },
+  {
+    field: 'table_checkbox_field',
+    input_type: 'TableCheckbox',
+    label: '表格多选',
+    required: true,
+    attrs: { placeholder: '请选择' },
+    props_info: {
+      active_msg: '当前选中',
+      table_columns: [
+        {
+          property: '`${row.key}${row.number}`',
+          label: '名称',
+          type: 'eval'
+        },
+        {
+          property: 'ProgressTableItem',
+          label: '数值',
+          type: 'component',
+          value_field: 'number',
+          attrs: {
+            color: [
+              { color: '#f56c6c', percentage: 20 },
+              { color: '#e6a23c', percentage: 40 },
+              { color: '#5cb87a', percentage: 60 },
+              { color: '#1989fa', percentage: 80 },
+              { color: '#6f7ad3', percentage: 100 }
+            ]
+          },
+          props_info: {
+            view_card: [
+              {
+                type: 'eval',
+                title: '测试',
+                value_field:
+                  '`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
+              },
+              {
+                type: 'eval',
+                title: '名称',
+                value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
+              }
+            ]
+          }
+        }
+      ],
+      style: { width: '500px' }
+    },
+    option_list: [
+      {
+        key: '测试',
+        value: 'test',
+        number: 10
+      },
+      {
+        key: '测试111111',
+        value: 'test1',
+        number: 100
+      }
+    ]
+  }
+]
+const form_data = ref<Dict<any>>({})
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const click = () => {
+  dynamicsFormRef.value?.validate()
+}
+</script>
+<style lang="scss" scope></style>
diff --git a/src/components/dynamics-form/DemoConstructor.vue b/src/components/dynamics-form/DemoConstructor.vue
new file mode 100644
index 0000000..b8e0b60
--- /dev/null
+++ b/src/components/dynamics-form/DemoConstructor.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-row :gutter="12">
+    <el-col :span="12">
+      <el-card shadow="never">
+        <DynamicsFormConstructor
+          v-model="item"
+          label-position="top"
+          require-asterisk-position="right"
+          ref="DynamicsFormConstructorRef"
+        ></DynamicsFormConstructor>
+        <el-button @click="add_field">添加</el-button>
+      </el-card></el-col
+    >
+    <el-col :span="12">
+      <el-card shadow="never">
+        <DynamicsForm
+          label-position="top"
+          require-asterisk-position="right"
+          v-model="form_data"
+          :model="form_data"
+          :render_data="form_item_list"
+          ref="dynamicsFormRef"
+        >
+        </DynamicsForm>
+        <el-button @click="validate">校验</el-button>
+      </el-card></el-col
+    >
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const DynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+
+const form_item_list = ref<Array<any>>([])
+const add_field = () => {
+  if (DynamicsFormConstructorRef.value) {
+    DynamicsFormConstructorRef.value.validate().then(() => {
+      form_item_list.value.push(DynamicsFormConstructorRef.value?.getData())
+    })
+  }
+}
+
+const form_data = ref({})
+const item = ref({})
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const validate = () => {
+  dynamicsFormRef.value
+    ?.validate()
+    .then((ok) => {})
+    .catch((e) => {})
+}
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/FormItem.vue b/src/components/dynamics-form/FormItem.vue
new file mode 100644
index 0000000..3062c36
--- /dev/null
+++ b/src/components/dynamics-form/FormItem.vue
@@ -0,0 +1,183 @@
+<template>
+  <el-form-item
+    v-loading="loading"
+    :style="formItemStyle"
+    :prop="formfield.field"
+    :key="formfield.field"
+    :rules="rules"
+  >
+    <template #label v-if="formfield.label">
+      <FormItemLabel v-if="isString(formfield.label)" :form-field="formfield"></FormItemLabel>
+      <component
+        v-else
+        :is="formfield.label.input_type"
+        :label="formfield.label.label"
+        v-bind="label_attrs"
+      ></component>
+    </template>
+    <component
+      ref="componentFormRef"
+      :view="view"
+      v-model="itemValue"
+      :is="formfield.input_type"
+      :form-field="formfield"
+      :other-params="otherParams"
+      :style="componentStyle"
+      :field="formfield.field"
+      v-bind="attrs"
+      :formfield-list="formfieldList"
+    ></component>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, type Ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import FormItemLabel from './FormItemLabel.vue'
+import type { Dict } from '@/api/type/common'
+import bus from '@/bus'
+const props = defineProps<{
+  // 双向绑定的值
+  modelValue: any
+
+  // 表单Item
+  formfield: FormField
+  // 是否只读
+  view: boolean
+  // 调用接口所需要的其他参数
+  otherParams: any
+  // 获取Options
+  trigger: (formItem: FormField, loading: Ref<boolean>) => Promise<any>
+  // 初始化默认数据
+  initDefaultData: (formItem: FormField) => void
+  // 默认每个宽度
+  defaultItemWidth: string
+  // 表单收集数据
+  formValue: Dict<any>
+
+  formfieldList: Array<FormField>
+
+  parent_field?: string
+}>()
+
+const emit = defineEmits(['change'])
+
+const loading = ref<boolean>(false)
+
+const isString = (value: any) => {
+  return typeof value === 'string'
+}
+const itemValue = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (value: any) => {
+    emit('change', value)
+    if (props.parent_field) {
+      bus.emit(props.parent_field + '.' + props.formfield.field, value)
+    } else {
+      bus.emit(props.formfield.field, value)
+    }
+  }
+})
+const componentFormRef = ref<any>()
+const label_attrs = computed(() => {
+  return props.formfield.label &&
+    typeof props.formfield.label !== 'string' &&
+    props.formfield.label.attrs
+    ? props.formfield.label.attrs
+    : {}
+})
+const props_info = computed(() => {
+  return props.formfield.props_info ? props.formfield.props_info : {}
+})
+/**
+ * 表单 item style
+ */
+const formItemStyle = computed(() => {
+  return props_info.value.item_style ? props_info.value.item_style : {}
+})
+
+/**
+ * 表单错误Msg
+ */
+const errMsg = computed(() => {
+  return props_info.value.err_msg
+    ? props_info.value.err_msg
+    : isString(props.formfield.label)
+      ? props.formfield.label + '不能为空'
+      : props.formfield.label.label + '不能为空'
+})
+/**
+ * 反序列化
+ * @param rule
+ */
+const to_rule = (rule: any) => {
+  if (rule.validator) {
+    let validator = (rule: any, value: string, callback: any) => {}
+    eval(rule.validator)
+    return { ...rule, validator }
+  }
+  return rule
+}
+
+/**
+ * 校验
+ */
+const rules = computed(() => {
+  return props_info.value.rules
+    ? props_info.value.rules.map(to_rule)
+    : {
+        message: errMsg.value,
+        trigger: props.formfield.input_type === 'Slider' ? 'blur' : ['blur', 'change'],
+        required: props.formfield.required === false ? false : true
+      }
+})
+
+/**
+ * 组件样式
+ */
+const componentStyle = computed(() => {
+  return props_info.value.style ? props_info.value.style : {}
+})
+
+/**
+ * 组件attrs
+ */
+const attrs = computed(() => {
+  return props.formfield.attrs ? props.formfield.attrs : {}
+})
+
+onMounted(() => {
+  props.initDefaultData(props.formfield)
+  if (props.formfield.provider && props.formfield.method) {
+    props.trigger(props.formfield, loading)
+  }
+  // 监听字段变化
+  const trigger_field_dict = props.formfield.relation_trigger_field_dict
+  if (trigger_field_dict) {
+    const keys = Object.keys(trigger_field_dict)
+    keys.forEach((key) => {
+      const value = trigger_field_dict[key]
+      // 添加关系
+      bus.on(key, (v: any) => {
+        if (value && value.length > 0) {
+          if (value.includes(v)) {
+            props.trigger(props.formfield, loading)
+          }
+        } else {
+          props.trigger(props.formfield, loading)
+        }
+      })
+    })
+  }
+})
+
+const validate = () => {
+  if (props.formfield.trigger_type === 'CHILD_FORMS' && componentFormRef.value) {
+    return componentFormRef.value.validate()
+  }
+  return Promise.resolve()
+}
+defineExpose({ validate })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/dynamics-form/FormItemLabel.vue b/src/components/dynamics-form/FormItemLabel.vue
new file mode 100644
index 0000000..b84dc1e
--- /dev/null
+++ b/src/components/dynamics-form/FormItemLabel.vue
@@ -0,0 +1,11 @@
+<template>
+  {{ formField.label }}
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+const props = defineProps<{
+  // 表单Item
+  formField: FormField
+}>()
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/dynamics-form/constructor/data.ts b/src/components/dynamics-form/constructor/data.ts
new file mode 100644
index 0000000..4478558
--- /dev/null
+++ b/src/components/dynamics-form/constructor/data.ts
@@ -0,0 +1,39 @@
+const input_type_list = [
+  {
+    label: '文本框',
+    value: 'TextInput'
+  },
+  {
+    label: '滑块',
+    value: 'Slider'
+  },
+  {
+    label: '开关',
+    value: 'SwitchInput'
+  },
+  {
+    label: '单选框',
+    value: 'SingleSelect'
+  },
+  {
+    label: '多选框',
+    value: 'MultiSelect'
+  },
+  {
+    label: '日期',
+    value: 'DatePicker'
+  },
+  {
+    label: 'JSON文本框',
+    value: 'JsonInput'
+  },
+  {
+    label: '选项卡',
+    value: 'RadioCard'
+  },
+  {
+    label: '单行选项卡',
+    value: 'RadioRow'
+  }
+]
+export { input_type_list }
diff --git a/src/components/dynamics-form/constructor/index.vue b/src/components/dynamics-form/constructor/index.vue
new file mode 100644
index 0000000..9951ce3
--- /dev/null
+++ b/src/components/dynamics-form/constructor/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <el-form
+    @submit.prevent
+    ref="ruleFormRef"
+    class="mb-24"
+    label-width="auto"
+    :model="form_data"
+    v-bind="$attrs"
+  >
+    <el-form-item label="参数" :required="true" prop="field" :rules="rules.field">
+      <el-input
+        v-model="form_data.field"
+        :maxlength="64"
+        placeholder="请输入参数"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="显示名称" :required="true" prop="label" :rules="rules.label">
+      <el-input
+        v-model="form_data.label"
+        :maxlength="64"
+        show-word-limit
+        placeholder="请输入显示名称"
+      />
+    </el-form-item>
+    <el-form-item label="参数提示说明">
+      <el-input
+        v-model="form_data.tooltip"
+        :maxlength="128"
+        show-word-limit
+        placeholder="请输入参数提示说明"
+      />
+    </el-form-item>
+    <el-form-item label="是否必填" :required="true" prop="required" :rules="rules.required">
+      <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item label="组件类型" :required="true" prop="input_type" :rules="rules.input_type">
+      <el-select v-model="form_data.input_type" placeholder="请选择组件类型">
+        <el-option
+          v-for="input_type in input_type_list"
+          :key="input_type.value"
+          :label="input_type.label"
+          :value="input_type.value"
+        />
+      </el-select>
+    </el-form-item>
+    <component
+      v-if="form_data.input_type"
+      ref="componentFormRef"
+      v-model="form_data"
+      :is="form_data.input_type"
+    ></component>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from 'vue'
+import type { FormInstance } from 'element-plus'
+import _ from 'lodash'
+import { input_type_list as input_type_list_data } from '@/components/dynamics-form/constructor/data'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    input_type_list?: Array<{ label: string; value: string }>
+  }>(),
+  {
+    input_type_list: () =>
+      input_type_list_data.map((item) => ({ label: item.label, value: item.value + 'Constructor' }))
+  }
+)
+const emit = defineEmits(['update:modelValue'])
+
+const ruleFormRef = ref<FormInstance>()
+
+const componentFormRef = ref<any>()
+const form_data = ref<any>({
+  label: '',
+  field: '',
+  tooltip: '',
+  required: false,
+  input_type: ''
+})
+const rules = {
+  label: [{ required: true, message: '显示名称 为必填属性' }],
+  field: [{ required: true, message: '参数 为必填属性' }],
+  required: [{ required: true, message: '是否必填 为必填属性' }],
+  input_type: [{ required: true, message: '组建类型 为必填属性' }]
+}
+const getData = () => {
+  let label: string | any = form_data.value.label
+  if (form_data.value.tooltip) {
+    label = {
+      input_type: 'TooltipLabel',
+      label: form_data.value.label,
+      attrs: { tooltip: form_data.value.tooltip },
+      props_info: {}
+    }
+  }
+  return {
+    label: label,
+    required: form_data.value.required,
+    field: form_data.value.field,
+    default_value: form_data.value.default_value,
+    show_default_value: form_data.value.show_default_value,
+    ...componentFormRef.value.getData()
+  }
+}
+
+const validate = () => {
+  if (ruleFormRef.value) {
+    return ruleFormRef.value?.validate()
+  }
+  return Promise.resolve()
+}
+
+onMounted(() => {
+  if (props.modelValue) {
+    rander(props.modelValue)
+  }
+})
+const rander = (data: any) => {
+  form_data.value.required = data.required ? data.required : false
+  form_data.value.field = data.field
+  if (data.show_default_value !== undefined) {
+    form_data.value.show_default_value = data.show_default_value
+  }
+  if (data.input_type) {
+    form_data.value.input_type = data.input_type + 'Constructor'
+  }
+
+  if (data.label && data.label.input_type === 'TooltipLabel') {
+    form_data.value.tooltip = data.label.attrs.tooltip
+    form_data.value.label = data.label.label
+  } else {
+    form_data.value.label = data.label
+  }
+  nextTick(() => {
+    componentFormRef.value?.rander(data)
+  })
+}
+
+defineExpose({ getData, validate, rander })
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue b/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
new file mode 100644
index 0000000..92d2a76
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-form-item label="时间类型" required>
+    <el-select @change="type_change" v-model="formValue.type" placeholder="请选择时间类型">
+      <el-option
+        v-for="input_type in type_list"
+        :key="input_type.value"
+        :label="input_type.label"
+        :value="input_type.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item label="格式" required>
+    <el-select
+      v-model="formValue.format"
+      filterable
+      default-first-option
+      allow-create
+      placeholder="请选择格式"
+    >
+      <el-option
+        v-for="input_type in type_dict[formValue.type]"
+        :key="input_type.value"
+        :label="input_type.value"
+        :value="input_type.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item
+    class="defaultValueItem"
+    :required="formValue.required"
+    prop="default_value"
+    label="默认值"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+    <el-date-picker
+      v-model="formValue.default_value"
+      :type="formValue.type"
+      placeholder="选择日期"
+      :format="formValue.format"
+      :value-format="formValue.format"
+    />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onBeforeMount } from 'vue'
+const type_list = [
+  {
+    label: '年',
+    value: 'year'
+  },
+  {
+    label: '月',
+    value: 'month'
+  },
+  {
+    label: '日期',
+    value: 'date'
+  },
+  {
+    label: '日期时间',
+    value: 'datetime'
+  }
+]
+const type_dict: any = {
+  year: [{ value: 'YYYY' }],
+  month: [{ value: 'YYYY-MM' }],
+  date: [{ value: 'YYYY-MM-DD' }],
+  datetime: [{ value: 'YYYY-MM-DD HH:mm:ss' }]
+}
+const type_change = () => {
+  formValue.value.format = type_dict[formValue.value.type][0].value
+  formValue.value.default_value = ''
+}
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const getData = () => {
+  return {
+    input_type: 'DatePicker',
+    attrs: {
+      type: formValue.value.type,
+      format: formValue.value.format,
+      'value-format': formValue.value.format
+    },
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.type = form_data.attrs.type
+  formValue.value.format = form_data.attrs?.format
+  formValue.value.default_value = form_data.default_value || ''
+}
+defineExpose({ getData, rander })
+onBeforeMount(() => {
+  formValue.value.type = 'datetime'
+  formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
+  formValue.value.default_value = ''
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue b/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
new file mode 100644
index 0000000..9a028de
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-form-item
+    class="defaultValueItem"
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="[default_value_rule]"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+    <JsonInput ref="jsonInputRef" v-model="formValue.default_value"> </JsonInput>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import JsonInput from '@/components/dynamics-form/items/JsonInput.vue'
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+const jsonInputRef = ref<InstanceType<typeof JsonInput>>()
+const getData = () => {
+  return {
+    input_type: 'JsonInput',
+    attrs: {},
+    props_info: {
+      rules: [
+        {
+          required: formValue.value.required,
+          validator: `validator = (rule, value, callback) => {
+            return componentFormRef.value?.validate_rules(rule, value, callback);
+             
+}`,
+          trigger: 'blur'
+        }
+      ]
+    },
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value
+  }
+}
+
+const default_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    jsonInputRef.value?.validate_rules(rule, value, callback)
+    return true
+  },
+  trigger: 'blur'
+}
+
+const rander = (form_data: any) => {
+  formValue.value.default_value = form_data.default_value
+}
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.default_value = {}
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
new file mode 100644
index 0000000..c0b0885
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -0,0 +1,147 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+      class="mb-8"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    class="defaultValueItem"
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+    <el-select
+      class="m-2"
+      multiple
+      collapse-tags
+      filterable
+      clearable
+      v-model="formValue.default_value"
+      :teleported="false"
+      popper-class="default-select"
+    >
+      <el-option
+        v-for="(option, index) in formValue.option_list"
+        :key="index"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+
+const getData = () => {
+  return {
+    input_type: 'MultiSelect',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
+    text_field: 'label',
+    value_field: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+  addOption()
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
new file mode 100644
index 0000000..ade68f3
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -0,0 +1,140 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+      class="mb-8"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    class="defaultValueItem"
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+    <RadioCard
+      :form-field="formField"
+      v-model="formValue.default_value"
+      :other-params="{}"
+      field="default_value"
+    >
+    </RadioCard>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import RadioCard from '@/components/dynamics-form/items/radio/RadioCard.vue'
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+const formField = computed(() => {
+  return { field: '', ...getData() }
+})
+const getData = () => {
+  return {
+    input_type: 'RadioCard',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
+    text_field: 'label',
+    value_field: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+  addOption()
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue b/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
new file mode 100644
index 0000000..8935b46
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -0,0 +1,140 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+      class="mb-8"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    class="defaultValueItem"
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+    <RadioRow
+      :form-field="formField"
+      v-model="formValue.default_value"
+      :other-params="{}"
+      field="default_value"
+    >
+    </RadioRow>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import RadioRow from '@/components/dynamics-form/items/radio/RadioRow.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+const formField = computed<FormField>(() => {
+  return { field: '', ...getData() }
+})
+const getData = () => {
+  return {
+    input_type: 'RadioRow',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    text_field: 'label',
+    value_field: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+  addOption()
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
new file mode 100644
index 0000000..c25bb47
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-form-item>
+    <template #label>
+      <div class="flex-between">
+        选项值
+        <el-button link type="primary" @click.stop="addOption()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          添加
+        </el-button>
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        标签</el-col
+      >
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        选项值</el-col
+      >
+    </el-row>
+    <el-row
+      style="width: 100%"
+      v-for="(option, $index) in formValue.option_list"
+      :key="$index"
+      :gutter="10"
+      class="mb-8"
+    >
+      <el-col :span="10"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
+      /></el-col>
+      <el-col :span="12"
+        ><div class="grid-content ep-bg-purple" />
+        <el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
+      /></el-col>
+      <el-col :span="1"
+        ><div class="grid-content ep-bg-purple" />
+        <el-button link class="ml-8" @click.stop="delOption($index)">
+          <el-icon>
+            <Delete />
+          </el-icon> </el-button
+      ></el-col>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    class="defaultValueItem"
+    :required="formValue.required"
+    prop="default_value"
+    label="默认值"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+
+    <el-select v-model="formValue.default_value" :teleported="false" popper-class="default-select">
+      <el-option
+        v-for="(option, index) in formValue.option_list"
+        :key="index"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const addOption = () => {
+  formValue.value.option_list.push({ value: '', label: '' })
+}
+
+const delOption = (index: number) => {
+  const option = formValue.value.option_list[index]
+  if (option.value && formValue.value.default_value == option.value) {
+    formValue.value.default_value = ''
+  }
+  formValue.value.option_list.splice(index, 1)
+}
+
+const getData = () => {
+  return {
+    input_type: 'SingleSelect',
+    attrs: {},
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
+    text_field: 'label',
+    value_field: 'value',
+    option_list: formValue.value.option_list
+  }
+}
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list || []
+  formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
+}
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.option_list = []
+  formValue.value.default_value = ''
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+  addOption()
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+:deep(.el-form-item__label) {
+  display: block;
+}
+
+:deep(.el-select-dropdown) {
+  max-width: 400px;
+}
+</style>
diff --git a/src/components/dynamics-form/constructor/items/SliderConstructor.vue b/src/components/dynamics-form/constructor/items/SliderConstructor.vue
new file mode 100644
index 0000000..b68d01e
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/SliderConstructor.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-form-item label="是否带输入框" required prop="showInput">
+    <el-switch v-model="formValue.showInput" />
+  </el-form-item>
+  <el-form-item label="取值范围" required>
+    <el-col :span="11" style="padding-left: 0">
+      <el-form-item
+        :rules="[
+          {
+            required: true,
+            message: '最小值必填',
+            trigger: 'change'
+          }
+        ]"
+        prop="min"
+      >
+        <el-input-number style="width: 100%" v-model="formValue.min" controls-position="right"
+      /></el-form-item>
+    </el-col>
+    <el-col :span="2" class="text-center">
+      <span class="text-gray-500">-</span>
+    </el-col>
+    <el-col :span="11">
+      <el-form-item
+        :rules="[
+          {
+            required: true,
+            message: '最大值必填',
+            trigger: 'change'
+          }
+        ]"
+        prop="max"
+        ><el-input-number
+          prop="max"
+          style="width: 100%"
+          v-model="formValue.max"
+          :min="formValue.min > formValue.max ? formValue.min : undefined"
+          controls-position="right"
+      /></el-form-item>
+    </el-col>
+  </el-form-item>
+  <el-col :span="11" style="padding-left: 0">
+    <el-form-item label="步长值" required prop="step" :rules="step_rules">
+      <el-input-number
+        style="width: 100%"
+        v-model="formValue.step"
+        :min="0"
+        controls-position="right"
+      />
+    </el-form-item>
+  </el-col>
+
+  <el-form-item
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <el-slider
+      v-model="formValue.default_value"
+      :show-input="formValue.showInput"
+      :show-input-controls="false"
+      :max="formValue.max"
+      :min="formValue.min"
+      :step="formValue.step == 0 ? 0.1 : formValue.step"
+      :precision="formValue.precision"
+    />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onBeforeMount, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const getData = () => {
+  return {
+    input_type: 'Slider',
+    attrs: {
+      min: formValue.value.min,
+      max: formValue.value.max,
+      step: formValue.value.step,
+      precision: formValue.value.precision,
+      'show-input-controls': false,
+      'show-input': formValue.value.showInput
+    },
+    props_info: {
+      rules: [
+        {
+          message: formValue.value.label + '不能为空',
+          trigger: 'blur',
+          required: formValue.value.required
+        }
+      ]
+    },
+    show_default_value: true,
+    default_value: formValue.value.default_value
+  }
+}
+watch(
+  () => formValue.value.min,
+  () => {
+    if (formValue.value.min > formValue.value.max) {
+      formValue.value.max = formValue.value.min
+    }
+  }
+)
+const rander = (form_data: any) => {
+  const attrs = form_data.attrs
+  formValue.value.option_list = form_data.option_list
+  formValue.value.min = attrs.min
+  formValue.value.max = attrs.max
+  formValue.value.step = attrs.step
+  formValue.value.showInput = attrs['show-input']
+  formValue.value.default_value = form_data.default_value
+}
+const step_rules = [
+  {
+    required: true,
+    validator: (rule: any, value: any, callback: any) => {
+      if (!value) {
+        callback(new Error('步长值必填'))
+        return false
+      }
+      if (value === 0) {
+        callback(new Error('步长不能为0'))
+        return false
+      }
+      return true
+    },
+    trigger: 'blur'
+  }
+]
+defineExpose({ getData, rander })
+onBeforeMount(() => {
+  formValue.value.min = 0
+  formValue.value.max = 20
+  formValue.value.step = 0.1
+  formValue.value.default_value = 1
+  formValue.value.showInput = true
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue b/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
new file mode 100644
index 0000000..afb3030
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-form-item
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <el-switch v-model="formValue.default_value" />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const getData = () => {
+  return {
+    input_type: 'SwitchInput',
+    show_default_value: true,
+    attrs: {},
+    default_value: formValue.value.default_value
+  }
+}
+
+const rander = (form_data: any) => {
+  formValue.value.default_value = form_data.default_value || false
+}
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.default_value = false
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/constructor/items/TextInputConstructor.vue b/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
new file mode 100644
index 0000000..28233a8
--- /dev/null
+++ b/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
@@ -0,0 +1,180 @@
+<template>
+  <el-form-item label="文本长度" required>
+    <el-row class="w-full">
+      <el-col :span="11">
+        <el-form-item
+          :rules="[
+            {
+              required: true,
+              message: '最小长度必填',
+              trigger: 'change'
+            }
+          ]"
+          prop="minlength"
+        >
+          <el-input-number
+            style="width: 100%"
+            :min="1"
+            :step="1"
+            step-strictly
+            v-model="formValue.minlength"
+            controls-position="right"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span>-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item
+          :rules="[
+            {
+              required: true,
+              message: '最大长度必填',
+              trigger: 'change'
+            }
+          ]"
+          prop="maxlength"
+        >
+          <el-input-number
+            style="width: 100%"
+            :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
+            step-strictly
+            :step="1"
+            v-model="formValue.maxlength"
+            controls-position="right"
+        /></el-form-item>
+      </el-col>
+    </el-row>
+  </el-form-item>
+
+  <el-form-item
+    class="defaultValueItem"
+    :required="formValue.required"
+    prop="default_value"
+    label="默认值"
+    :rules="
+      formValue.required ? [{ required: true, message: '默认值 为必填属性' }, ...rules] : rules
+    "
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+
+    <el-input
+      v-model="formValue.default_value"
+      :maxlength="formValue.maxlength"
+      :minlength="formValue.minlength"
+      placeholder="请输入默认值"
+      show-word-limit
+      type="text"
+    />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+watch(
+  () => formValue.value.minlength,
+  () => {
+    if (formValue.value.minlength > formValue.value.maxlength) {
+      formValue.value.maxlength = formValue.value.minlength
+    }
+  }
+)
+const getData = () => {
+  return {
+    input_type: 'TextInput',
+    attrs: {
+      maxlength: formValue.value.maxlength,
+      minlength: formValue.value.minlength,
+      'show-word-limit': true
+    },
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
+    props_info: {
+      rules: formValue.value.required
+        ? [
+            { required: true, message: `${formValue.value.label} 为必填属性` },
+            {
+              min: formValue.value.minlength,
+              max: formValue.value.maxlength,
+              message: `${formValue.value.label}长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
+              trigger: 'blur'
+            }
+          ]
+        : [
+            {
+              min: formValue.value.minlength,
+              max: formValue.value.maxlength,
+              message: `${formValue.value.label}长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
+              trigger: 'blur'
+            }
+          ]
+    }
+  }
+}
+const rander = (form_data: any) => {
+  const attrs = form_data.attrs || {}
+  formValue.value.minlength = attrs.minlength
+  formValue.value.maxlength = attrs.maxlength
+  formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
+}
+const rangeRules = [
+  {
+    required: true,
+    validator: (rule: any, value: any, callback: any) => {
+      if (!formValue.value.minlength) {
+        callback(new Error('文本长度为必填参数'))
+      }
+      if (!formValue.value.maxlength) {
+        callback(new Error('文本长度为必填参数'))
+      }
+      return true
+    },
+    message: `${formValue.value.label} 为必填属性`
+  }
+]
+const rules = computed(() => [
+  {
+    min: formValue.value.minlength,
+    max: formValue.value.maxlength,
+    message: `长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
+    trigger: 'blur'
+  }
+])
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.minlength = 0
+  formValue.value.maxlength = 20
+  formValue.value.default_value = ''
+  console.log(formValue.value.show_default_value)
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/index.ts b/src/components/dynamics-form/index.ts
new file mode 100644
index 0000000..f4d69a0
--- /dev/null
+++ b/src/components/dynamics-form/index.ts
@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+import type { Dict } from '@/api/type/common'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+let components: Dict<any> = import.meta.glob('@/components/dynamics-form/**/**.vue', {
+  eager: true
+})
+components = {
+  ...components,
+  ...import.meta.glob('@/components/dynamics-form/**/**/**.vue', {
+    eager: true
+  })
+}
+
+const install = (app: App) => {
+  Object.keys(components).forEach((key: string) => {
+    const commentName: string = key
+      .substring(key.lastIndexOf('/') + 1, key.length)
+      .replace('.vue', '')
+    if (key !== '/src/components/dynamics-form/constructor/index.vue') {
+      app.component(commentName, components[key].default)
+    }
+  })
+  app.component('DynamicsForm', DynamicsForm)
+}
+export default { install }
diff --git a/src/components/dynamics-form/index.vue b/src/components/dynamics-form/index.vue
new file mode 100644
index 0000000..ab17bb2
--- /dev/null
+++ b/src/components/dynamics-form/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <el-form
+    @submit.prevent
+    ref="ruleFormRef"
+    label-width="130px"
+    label-suffix=":"
+    v-loading="loading"
+    v-bind="$attrs"
+  >
+    <slot :form_value="formValue"></slot>
+    <template v-for="item in formFieldList" :key="item.field">
+      <FormItem
+        ref="formFieldRef"
+        :key="item.field"
+        v-if="show(item)"
+        @change="change(item, $event)"
+        v-bind:modelValue="formValue[item.field]"
+        :formfield="item"
+        :trigger="trigger"
+        :view="view"
+        :initDefaultData="initDefaultData"
+        :defaultItemWidth="defaultItemWidth"
+        :other-params="otherParams"
+        :form-value="formValue"
+        :formfield-list="formFieldList"
+        :parent_field="parent_field"
+      >
+      </FormItem>
+    </template>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { Dict } from '@/api/type/common'
+import FormItem from '@/components/dynamics-form/FormItem.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import { ref, onBeforeMount, watch, type Ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import triggerApi from '@/api/provider'
+import type Result from '@/request/Result'
+import _ from 'lodash'
+
+defineOptions({ name: 'dynamicsForm' })
+
+const props = withDefaults(
+  defineProps<{
+    // 页面渲染数据
+    render_data: Promise<Result<Array<FormField>>> | string | Array<FormField>
+    // 调用接口所需要的其他参数
+    otherParams?: any
+    // 是否只读
+    view?: boolean
+    // 默认每个宽度
+    defaultItemWidth?: string
+
+    parent_field?: string
+
+    modelValue?: Dict<any>
+  }>(),
+  { view: false, defaultItemWidth: '75%', otherParams: () => {} }
+)
+
+const formValue = ref<Dict<any>>({})
+
+const loading = ref<boolean>(false)
+
+const formFieldList = ref<Array<FormField>>([])
+
+const ruleFormRef = ref<FormInstance>()
+
+const formFieldRef = ref<Array<InstanceType<typeof FormItem>>>([])
+/**
+ * 当前 field是否展示
+ * @param field
+ */
+const show = (field: FormField) => {
+  if (field.relation_show_field_dict) {
+    let keys = Object.keys(field.relation_show_field_dict)
+    for (const index in keys) {
+      const key = keys[index]
+      let v = _.get(formValue.value, key)
+      if (v && v !== undefined && v !== null) {
+        let values = field.relation_show_field_dict[key]
+        if (values && values.length > 0) {
+          return values.includes(v)
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    }
+  }
+  return true
+}
+
+const emit = defineEmits(['update:modelValue'])
+/**
+ * 表单字段修改
+ * @param field
+ * @param value
+ */
+const change = (field: FormField, value: any) => {
+  formValue.value[field.field] = value
+}
+
+watch(
+  formValue,
+  () => {
+    emit('update:modelValue', formValue.value)
+  },
+  { deep: true }
+)
+
+/**
+ * 触发器,用户获取子表单 或者 下拉选项
+ * @param field
+ * @param loading
+ */
+const trigger = (field: FormField, loading: Ref<boolean>) => {
+  if (field.provider && field.method) {
+    return triggerApi
+      .trigger(
+        field.provider,
+        field.method,
+        {
+          ...props.otherParams,
+          ...formValue.value
+        },
+        loading
+      )
+      .then((ok) => {
+        if (field.trigger_type === 'CHILD_FORMS') {
+          field.children = ok.data as Array<FormField>
+        } else {
+          field.option_list = ok.data as Array<any>
+        }
+      })
+  }
+  return Promise.resolve([])
+}
+/**
+ * 初始化默认数据
+ */
+const initDefaultData = (formField: FormField) => {
+  if (
+    formField.default_value &&
+    (formValue.value[formField.field] === undefined ||
+      formValue.value[formField.field] === null ||
+      !formValue.value[formField.field]) &&
+    formValue.value[formField.field] != false
+  ) {
+    if (formField.show_default_value === true) {
+      formValue.value[formField.field] = formField.default_value
+    }
+  }
+}
+
+onBeforeMount(() => {
+  render(props.render_data, props.modelValue)
+})
+
+const render = (
+  render_data: string | Array<FormField> | Promise<Result<Array<FormField>>>,
+  data?: Dict<any>
+) => {
+  if (typeof render_data == 'string') {
+    triggerApi.get(render_data, {}, loading).then((ok) => {
+      formFieldList.value = ok.data
+    })
+  } else if (render_data instanceof Array) {
+    formFieldList.value = render_data
+  } else {
+    render_data.then((ok) => {
+      formFieldList.value = ok.data
+    })
+  }
+  const form_data = data ? data : {}
+  if (form_data) {
+    const value = formFieldList.value
+      .map((item) => {
+        if (form_data[item.field] !== undefined) {
+          return { [item.field]: form_data[item.field] }
+        }
+        if (item.show_default_value === true || item.show_default_value === undefined) {
+          return { [item.field]: item.default_value }
+        }
+        return {}
+      })
+      .reduce((x, y) => ({ ...x, ...y }), {})
+
+    formValue.value = _.cloneDeep(value)
+  }
+}
+/**
+ * 校验函数
+ */
+const validate = () => {
+  return Promise.all([
+    ...formFieldRef.value.map((item) => item.validate()),
+    ruleFormRef.value ? ruleFormRef.value.validate() : Promise.resolve()
+  ])
+}
+
+// 暴露获取当前表单数据函数
+defineExpose({
+  initDefaultData,
+  validate,
+  render,
+  ruleFormRef
+})
+</script>
+<style lang="scss" scope></style>
diff --git a/src/components/dynamics-form/items/DatePicker.vue b/src/components/dynamics-form/items/DatePicker.vue
new file mode 100644
index 0000000..291978c
--- /dev/null
+++ b/src/components/dynamics-form/items/DatePicker.vue
@@ -0,0 +1,5 @@
+<template>
+  <el-date-picker v-bind="$attrs" />
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/JsonInput.vue b/src/components/dynamics-form/items/JsonInput.vue
new file mode 100644
index 0000000..e7bfb3f
--- /dev/null
+++ b/src/components/dynamics-form/items/JsonInput.vue
@@ -0,0 +1,133 @@
+<template>
+  <div style="width: 100%" class="function-CodemirrorEditor">
+    <Codemirror
+      v-bind="$attrs"
+      ref="cmRef"
+      v-model="model_value"
+      :extensions="extensions"
+      :style="codemirrorStyle"
+      :tab-size="4"
+      :autofocus="true"
+    />
+    <div class="function-CodemirrorEditor__format">
+      <el-button text type="info" @click="format" class="magnify">
+        <el-icon><DocumentChecked /></el-icon>
+      </el-button>
+    </div>
+    <div class="function-CodemirrorEditor__footer">
+      <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
+        <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+      </el-button>
+    </div>
+    <!-- Codemirror 弹出层 -->
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body fullscreen>
+      <Codemirror
+        v-model="cloneContent"
+        :extensions="extensions"
+        :style="codemirrorStyle"
+        :tab-size="4"
+        :autofocus="true"
+        style="height: calc(100vh - 160px) !important; border: 1px solid #bbbfc4; border-radius: 4px"
+      />
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { json, jsonParseLinter } from '@codemirror/lang-json'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { Codemirror } from 'vue-codemirror'
+import { linter } from '@codemirror/lint'
+import { computed, ref } from 'vue'
+const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: () => {} })
+const emit = defineEmits(['update:modelValue'])
+
+const cache_model_value_str = ref<string>()
+
+const model_value = computed({
+  get: () => {
+    if (cache_model_value_str.value) {
+      return cache_model_value_str.value
+    }
+    return JSON.stringify(props.modelValue, null, 4)
+  },
+  set: (v: string) => {
+    if (!v) {
+      emit('update:modelValue', JSON.parse('{}'))
+    } else {
+      try {
+        cache_model_value_str.value = v
+        const result = JSON.parse(v)
+        emit('update:modelValue', result)
+      } catch (e) {}
+    }
+  }
+})
+
+const extensions = [json(), linter(jsonParseLinter()), oneDark]
+
+const codemirrorStyle = {
+  height: '210px!important',
+  width: '100%'
+}
+
+// 弹出框相关代码
+const dialogVisible = ref<boolean>(false)
+
+const cloneContent = ref<string>('')
+
+const openCodemirrorDialog = () => {
+  cloneContent.value = model_value.value
+  dialogVisible.value = true
+}
+
+const format = () => {
+  try {
+    const json_str = JSON.parse(model_value.value)
+    model_value.value = JSON.stringify(json_str, null, 4)
+  } catch (e) {}
+}
+
+function submitDialog() {
+  model_value.value = cloneContent.value
+  dialogVisible.value = false
+}
+/**
+ * 校验格式
+ * @param rule
+ * @param value
+ * @param callback
+ */
+const validate_rules = (rule: any, value: any, callback: any) => {
+  if (model_value.value) {
+    try {
+      JSON.parse(model_value.value)
+    } catch (e) {
+      callback(new Error('JSON格式不正确'))
+      return false
+    }
+  }
+  return true
+}
+
+defineExpose({ validate_rules: validate_rules })
+</script>
+<style lang="scss">
+.function-CodemirrorEditor__footer {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+.function-CodemirrorEditor {
+  position: relative;
+}
+.function-CodemirrorEditor__format {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+</style>
diff --git a/src/components/dynamics-form/items/PasswordInput.vue b/src/components/dynamics-form/items/PasswordInput.vue
new file mode 100644
index 0000000..2111d24
--- /dev/null
+++ b/src/components/dynamics-form/items/PasswordInput.vue
@@ -0,0 +1,5 @@
+<template>
+  <el-input v-bind="$attrs" :show-password="true"></el-input>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/TextInput.vue b/src/components/dynamics-form/items/TextInput.vue
new file mode 100644
index 0000000..46ca9b4
--- /dev/null
+++ b/src/components/dynamics-form/items/TextInput.vue
@@ -0,0 +1,5 @@
+<template>
+  <el-input v-bind="$attrs" />
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/complex/ArrayObjectCard.vue b/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
new file mode 100644
index 0000000..98d88b9
--- /dev/null
+++ b/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
@@ -0,0 +1,156 @@
+<template v-loading="_loading">
+  <div class="arrt-object-card flex w-full">
+    <el-card class="box-card" :style="style" v-for="(item, index) in _data" :key="index">
+      <DynamicsForm
+        :style="formStyle"
+        :view="view"
+        label-position="top"
+        require-asterisk-position="right"
+        ref="ceFormRef"
+        v-model="_data[index]"
+        :model="_data[index]"
+        :other-params="other"
+        :render_data="render_data()"
+        v-bind="attr"
+        :parent_field="formField.field + '.' + index"
+      ></DynamicsForm>
+      <el-tooltip effect="dark" content="删除" placement="top">
+        <el-button text @click.stop="deleteDataset(item)" class="delete-button">
+          <el-icon><Delete /></el-icon>
+        </el-button>
+      </el-tooltip>
+    </el-card>
+    <el-card shadow="never" class="card-add box-card" @click="add_card">
+      <div class="flex-center">
+        <AppIcon iconName="Plus" class="add-icon layout-bg p-8 border-r-4" />
+        <span>{{ add_msg }}</span>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import _ from 'lodash'
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import Result from '@/request/Result'
+const props = defineProps<{
+  modelValue?: Array<any>
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const render_data = () => {
+  return Promise.resolve(Result.success(props.formField.children as Array<FormField>))
+}
+const deleteDataset = (item: any) => {
+  _data.value = _data.value.filter((row) => row !== item)
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 校验实例对象
+const dynamicsFormRef = ref<Array<InstanceType<typeof DynamicsForm>>>([])
+
+const _data = computed<Array<any>>({
+  get() {
+    if (props.modelValue) {
+      return props.modelValue
+    } else {
+      emit('update:modelValue', [{}])
+      return []
+    }
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const props_info = computed(() => {
+  return props.formField.props_info ? props.formField.props_info : {}
+})
+const add_msg = computed(() => {
+  return props_info.value.add_msg ? props_info.value.add_msg : '添加'
+})
+/**
+ * 添加一个card
+ */
+const add_card = () => {
+  _data.value = [..._data.value, {}]
+}
+
+/**
+ * 组件样式
+ */
+const formStyle = computed(() => {
+  return props_info.value.form_style ? props_info.value.form_style : {}
+})
+const style = computed(() => {
+  return props_info.value.style ? props_info.value.style : {}
+})
+const attr = computed(() => {
+  if (props.formField.attrs) {
+    return props.formField.attrs
+  }
+  return {}
+})
+
+/**
+ * 校验方法
+ */
+function validate() {
+  return Promise.all(dynamicsFormRef.value.map((item) => item.validate()))
+}
+const other = computed(() => {
+  return { ...(props.formValue ? props.formValue : {}), ...props.otherParams }
+})
+
+defineExpose({
+  validate,
+  field: props.field
+})
+</script>
+<style lang="scss" scoped>
+.arrt-object-card {
+  .box-card {
+    width: 30%;
+    position: relative;
+    margin: 10px;
+    padding-top: 20px;
+  }
+  .card-add {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    cursor: pointer;
+    min-height: var(--card-min-height);
+    border: 1px dashed var(--el-color-primary);
+    background: var(--el-disabled-bg-color);;
+    padding-bottom: 20px;
+
+    .add-icon {
+      font-size: 14px;
+      border: 1px solid var(--app-border-color-dark);
+      margin-right: 12px;
+    }
+    &:hover {
+      color: var(--el-color-primary);
+      background: #ffffff;
+      .add-icon {
+        background: #ffffff;
+        border-color: var(--el-color-primary);
+      }
+    }
+  }
+  .delete-button {
+    position: absolute;
+    right: 12px;
+    top: 10px;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/complex/ObjectCard.vue b/src/components/dynamics-form/items/complex/ObjectCard.vue
new file mode 100644
index 0000000..a007b00
--- /dev/null
+++ b/src/components/dynamics-form/items/complex/ObjectCard.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-card :style="style">
+    <DynamicsForm
+      :read-only="view"
+      :style="formStyle"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormRef"
+      v-model="data"
+      :other-params="other"
+      :render_data="formField.children ? formField.children : []"
+      v-bind="$attrs"
+      :parent_field="formField.field"
+    ></DynamicsForm>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const props = defineProps<{
+  modelValue?: any
+  formValue?: any
+  formfieldList?: Array<FormField>
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const data = computed({
+  get: () => {
+    if (props.modelValue) {
+      return props.modelValue
+    }
+    return {}
+  },
+  set: ($event) => {
+    emit('update:modelValue', $event)
+  }
+})
+
+const other = computed(() => {
+  return { ...(props.formfieldList ? props.formfieldList : {}), ...props.otherParams }
+})
+// 校验实例对象
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+/**
+ * 组件样式
+ */
+const formStyle = computed(() => {
+  return props_info.value.form_style ? props_info.value.form_style : {}
+})
+const props_info = computed(() => {
+  return props.formField.props_info ? props.formField.props_info : {}
+})
+
+const style = computed(() => {
+  return props_info.value.style ? props_info.value.style : {}
+})
+/**
+ * 校验方法
+ */
+function validate() {
+  if (dynamicsFormRef.value) {
+    return dynamicsFormRef.value.validate()
+  }
+  return Promise.resolve()
+}
+defineExpose({
+  validate
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/dynamics-form/items/complex/TabCard.vue b/src/components/dynamics-form/items/complex/TabCard.vue
new file mode 100644
index 0000000..ff5ba79
--- /dev/null
+++ b/src/components/dynamics-form/items/complex/TabCard.vue
@@ -0,0 +1,123 @@
+<template v-loading="_loading">
+  <div style="width: 100%">
+    <el-tabs v-model="activeTab" editable @edit="handleTabsEdit" type="card">
+      <el-tab-pane
+        v-for="(item, index) in _data"
+        :key="index"
+        :label="tabs_label + (index + 1)"
+        :name="index"
+      >
+        <template v-if="formField.children">
+          <el-card :style="style">
+            <DynamicsForm
+              :style="formStyle"
+              :view="view"
+              label-position="top"
+              require-asterisk-position="right"
+              ref="ceFormRef"
+              v-model="_data[index]"
+              :model="_data[index]"
+              :other-params="other"
+              :render_data="render_data()"
+              v-bind="attr"
+              :parent_field="formField.field + '.' + index"
+            ></DynamicsForm>
+          </el-card>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import _ from 'lodash'
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import Result from '@/request/Result'
+import type { TabPaneName } from 'element-plus'
+
+const props = defineProps<{
+  modelValue?: Array<any>
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const render_data = () => {
+  return Promise.resolve(Result.success(props.formField.children as Array<FormField>))
+}
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 校验实例对象
+const dynamicsFormRef = ref<Array<InstanceType<typeof DynamicsForm>>>([])
+
+const _data = computed<Array<any>>({
+  get() {
+    if (props.modelValue) {
+      return props.modelValue
+    } else {
+      emit('update:modelValue', [{}])
+      return []
+    }
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const props_info = computed(() => {
+  return props.formField.props_info ? props.formField.props_info : {}
+})
+
+const tabs_label = computed(() => {
+  return props_info.value.tabs_label ? props_info.value.tabs_label : 'label'
+})
+/**
+ * 组件样式
+ */
+const formStyle = computed(() => {
+  return props_info.value.form_style ? props_info.value.form_style : {}
+})
+
+const attr = computed(() => {
+  if (props.formField.attrs) {
+    return props.formField.attrs
+  }
+  return {}
+})
+const activeTab = ref(0)
+
+/**
+ * 校验方法
+ */
+function validate() {
+  return Promise.all(dynamicsFormRef.value.map((item) => item.validate()))
+}
+const other = computed(() => {
+  return { ...(props.formValue ? props.formValue : {}), ...props.otherParams }
+})
+const style = computed(() => {
+  return props_info.value.style ? props_info.value.style : {}
+})
+
+const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
+  if (action === 'add') {
+    _data.value = [..._data.value, {}]
+    activeTab.value = _data.value.length
+  } else if (action === 'remove') {
+    const update_value = _data.value.filter((item, index) => index != targetName)
+    _data.value = update_value
+    activeTab.value = update_value.length - 1
+  }
+}
+
+defineExpose({
+  validate,
+  field: props.field
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/dynamics-form/items/label/TooltipLabel.vue b/src/components/dynamics-form/items/label/TooltipLabel.vue
new file mode 100644
index 0000000..318f3c1
--- /dev/null
+++ b/src/components/dynamics-form/items/label/TooltipLabel.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex align-center" style="display: inline-flex">
+    <div class="flex-between mr-4">
+      <span>{{ label }}</span>
+    </div>
+    <el-tooltip effect="dark" placement="right">
+      <template #content
+        ><div style="width: 200px">{{ tooltip }}</div></template
+      >
+      <AppIcon iconName="app-warning" class="app-warning-icon" style="flex-shrink: 0"></AppIcon>
+    </el-tooltip>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{
+  label: string
+  tooltip: string
+}>()
+</script>
+<style lang="scss" scope>
+.aiMode-param-dialog {
+  padding: 8px 8px 24px 8px;
+
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+
+  .el-dialog__body {
+    padding: 16px !important;
+  }
+
+  .dialog-max-height {
+    height: 550px;
+  }
+
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/radio/Radio.vue b/src/components/dynamics-form/items/radio/Radio.vue
new file mode 100644
index 0000000..9c94a3f
--- /dev/null
+++ b/src/components/dynamics-form/items/radio/Radio.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-radio-group v-bind="$attrs">
+    <el-radio v-for="(item, index) in option_list" :key="index" :label="item[valueField]">
+      <div v-html="label(item)"></div>
+    </el-radio>
+  </el-radio-group>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const label = (option: any) => {
+  return option[textField.value]
+}
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/radio/RadioButton.vue b/src/components/dynamics-form/items/radio/RadioButton.vue
new file mode 100644
index 0000000..874d61d
--- /dev/null
+++ b/src/components/dynamics-form/items/radio/RadioButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-radio-group v-bind="$attrs">
+    <el-radio-button v-for="(item, index) in option_list" :key="index" :label="item[valueField]">
+      <div v-html="label(item)"></div>
+    </el-radio-button>
+  </el-radio-group>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const label = (option: any) => {
+  return option[textField.value]
+}
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/radio/RadioCard.vue b/src/components/dynamics-form/items/radio/RadioCard.vue
new file mode 100644
index 0000000..4e55775
--- /dev/null
+++ b/src/components/dynamics-form/items/radio/RadioCard.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="radio_content" :style="radioContentStyle">
+    <el-row :gutter="12" class="w-full">
+      <template v-for="(item, index) in option_list" :key="index">
+        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+          <el-card
+            :key="item.value"
+            class="item"
+            shadow="never"
+            :class="[
+              inputDisabled ? 'is-disabled' : '',
+              modelValue == item[valueField] ? 'active' : ''
+            ]"
+            @click="inputDisabled ? () => {} : selected(item[valueField])"
+          >
+            {{ item[textField] }}
+          </el-card>
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref, inject } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import { useFormDisabled, formItemContextKey } from 'element-plus'
+
+const inputDisabled = useFormDisabled()
+
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+  // 选中的值
+  modelValue?: any
+  disabled?: boolean
+}>()
+const elFormItem = inject(formItemContextKey, void 0)
+const selected = (activeValue: string | number) => {
+  emit('update:modelValue', activeValue)
+  if (elFormItem?.validate) {
+    elFormItem.validate('change')
+  }
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const width = ref<number>()
+const radioContentStyle = computed(() => {
+  if (width.value) {
+    if (width.value < 350) {
+      return { '--maxkb-radio-card-width': '316px' }
+    } else if (width.value > 770) {
+      return { '--maxkb-radio-card-width': '378px' }
+    } else {
+      return { '--maxkb-radio-card-width': '100%' }
+    }
+  }
+  return {}
+})
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+</script>
+<style lang="scss" scoped>
+.radio_content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100%;
+
+  .is-disabled {
+    border: 1px solid var(--el-card-border-color);
+    background-color: var(--el-fill-color-light);
+    color: var(--el-text-color-placeholder);
+    cursor: not-allowed;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+  .active {
+    border: 1px solid var(--el-color-primary);
+    color: var(--el-color-primary);
+  }
+  .item {
+    cursor: pointer;
+    height: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--maxkb-radio-card-width, 100%);
+    margin: 4px;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/radio/RadioRow.vue b/src/components/dynamics-form/items/radio/RadioRow.vue
new file mode 100644
index 0000000..007fab1
--- /dev/null
+++ b/src/components/dynamics-form/items/radio/RadioRow.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="radio_content">
+    <div
+      v-for="item in option_list"
+      :key="item.value"
+      class="item"
+      :class="[inputDisabled ? 'is-disabled' : '', modelValue == item[valueField] ? 'active' : '']"
+      @click="selected(item[valueField])"
+    >
+      {{ item[textField] }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import { useFormDisabled, formItemContextKey } from 'element-plus'
+const inputDisabled = useFormDisabled()
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+  // 选中的值
+  modelValue?: any
+}>()
+const elFormItem = inject(formItemContextKey, void 0)
+const selected = (activeValue: string | number) => {
+  emit('update:modelValue', activeValue)
+  if (elFormItem?.validate) {
+    elFormItem.validate('change')
+  }
+}
+const emit = defineEmits(['update:modelValue'])
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+</script>
+<style lang="scss" scoped>
+.radio_content {
+  height: 32px;
+  display: inline-flex;
+  border: 1px solid #bbbfc4;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #1f2329;
+  padding: 3px 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  .is-disabled {
+    border: 1px solid var(--el-card-border-color);
+    background-color: var(--el-fill-color-light);
+    color: var(--el-text-color-placeholder);
+    cursor: not-allowed;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+  .active {
+    border-radius: 4px;
+    background: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+  }
+  .item {
+    cursor: pointer;
+    margin: 0px 2px;
+    padding: 2px 8px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:last-child {
+      margin: 0 4px 0 2px;
+    }
+    &:first-child {
+      margin: 0 2px 0 4px;
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/select/MultiSelect.vue b/src/components/dynamics-form/items/select/MultiSelect.vue
new file mode 100644
index 0000000..f78f898
--- /dev/null
+++ b/src/components/dynamics-form/items/select/MultiSelect.vue
@@ -0,0 +1,65 @@
+<template>
+  <el-select
+    class="m-2"
+    multiple
+    collapse-tags
+    filterable
+    clearable
+    v-bind="$attrs"
+    v-model="_modelValue"
+  >
+    <el-option
+      v-for="(item, index) in option_list"
+      :key="index"
+      :label="label(item)"
+      :value="item[valueField]"
+    >
+    </el-option>
+  </el-select>
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+import { computed, ref } from 'vue'
+import _ from 'lodash'
+const rowTemp = ref<any>()
+
+const props = defineProps<{
+  modelValue?: Array<any>
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const _modelValue = computed({
+  get() {
+    if (props.modelValue) {
+      return props.modelValue
+    }
+    return []
+  },
+  set($event) {
+    emit('update:modelValue', $event)
+  }
+})
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const label = (option: any) => {
+  return option[textField.value]
+}
+</script>
+<style lang="scss"></style>
diff --git a/src/components/dynamics-form/items/select/SingleSelect.vue b/src/components/dynamics-form/items/select/SingleSelect.vue
new file mode 100644
index 0000000..a4d7656
--- /dev/null
+++ b/src/components/dynamics-form/items/select/SingleSelect.vue
@@ -0,0 +1,77 @@
+<template>
+  <el-select
+    filterable
+    :teleported="true"
+    popper-class="dynamics-single-select"
+    clearable
+    v-bind="$attrs"
+    v-model="_modelValue"
+  >
+    <el-option
+      v-for="(item, index) in option_list"
+      :key="index"
+      teleported
+      :label="label(item)"
+      :value="item[valueField]"
+    >
+    </el-option>
+  </el-select>
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+import { computed, ref } from 'vue'
+import _ from 'lodash'
+const rowTemp = ref<any>()
+
+const props = defineProps<{
+  modelValue?: string
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const _modelValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+    emit('change', props.formField)
+  }
+})
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const label = (option: any) => {
+  //置空
+  if (props.modelValue && option_list.value) {
+    const oldItem = option_list.value.find((item) => item[valueField.value] === props.modelValue)
+    if (!oldItem) {
+      emit('update:modelValue', undefined)
+    }
+  }
+
+  return option[textField.value]
+}
+</script>
+<style lang="scss">
+.dynamics-single-select {
+  .el-select-dropdown {
+    max-width: 1px;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/slider/Slider.vue b/src/components/dynamics-form/items/slider/Slider.vue
new file mode 100644
index 0000000..3892f15
--- /dev/null
+++ b/src/components/dynamics-form/items/slider/Slider.vue
@@ -0,0 +1,11 @@
+<template>
+  <el-slider v-bind="$attrs" show-input :show-input-controls="false" class="custom-slider" />
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.custom-slider {
+  .el-input-number.is-without-controls .el-input__wrapper {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/switch/SwitchInput.vue b/src/components/dynamics-form/items/switch/SwitchInput.vue
new file mode 100644
index 0000000..c787945
--- /dev/null
+++ b/src/components/dynamics-form/items/switch/SwitchInput.vue
@@ -0,0 +1,7 @@
+<template>
+    <el-switch v-bind="$attrs" />
+  </template>
+  <script setup lang="ts"></script>
+  <style lang="scss" scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/dynamics-form/items/table/ProgressTableItem.vue b/src/components/dynamics-form/items/table/ProgressTableItem.vue
new file mode 100644
index 0000000..baf9e3e
--- /dev/null
+++ b/src/components/dynamics-form/items/table/ProgressTableItem.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="progress-table-item">
+    <el-popover placement="top-start" :title="row[text_field]" :width="200" trigger="hover">
+      <template #reference>
+        <el-progress v-bind="$attrs" :percentage="row[value_field]"></el-progress
+      ></template>
+      <div>
+        <el-row v-for="(item, index) in view_card" :key="index">
+          <el-col :span="6">{{ item.title }}</el-col>
+          <el-col :span="18"> <span class="value" :innerHTML="value_html(item)"> </span></el-col>
+        </el-row>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+const props = defineProps<{
+  /**
+   *表单渲染Item column
+   */
+  column: any
+  /**
+   * 这一行数据
+   */
+  row: any
+}>()
+const rowRef = ref<any>()
+
+function evalF(text: string, row: any) {
+  rowRef.value = row
+  return eval(text)
+}
+const props_info = computed(() => {
+  return props.column.props_info ? props.column.props_info : {}
+})
+const text_field = computed(() => {
+  return props.column.text_field ? props.column.text_field : 'key'
+})
+const value_field = computed(() => {
+  return props.column.value_field ? props.column.value_field : 'value'
+})
+
+const value_html = (view_card_item: any) => {
+  if (view_card_item.type === 'eval') {
+    return evalF(view_card_item.value_field, props.row)
+  } else {
+    return props.row[view_card_item.value_field]
+  }
+}
+
+const view_card = computed(() => {
+  return props_info.value.view_card ? props_info.value.view_card : []
+})
+</script>
+<style lang="scss" scoped>
+@mixin valueScss() {
+  color: rgba(31, 35, 41, 1);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 22px;
+  height: 22px;
+}
+.progress-table-item {
+  .value {
+    float: right;
+    @include valueScss;
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/table/TableCheckbox.vue b/src/components/dynamics-form/items/table/TableCheckbox.vue
new file mode 100644
index 0000000..29641ac
--- /dev/null
+++ b/src/components/dynamics-form/items/table/TableCheckbox.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="table-checkbox">
+    <div class="header">
+      <div class="title">{{ title }}</div>
+
+      <el-input
+        v-model="filterText"
+        :validate-event="false"
+        placeholder="请输入关键字搜索"
+        class="input-with-select"
+        style="--el-color-danger: #c0c4cc"
+        clearable
+      >
+        <template #prepend>
+          <el-button :icon="Search" />
+        </template>
+      </el-input>
+    </div>
+
+    <el-table
+      ref="multipleTableRef"
+      :data="tableData"
+      highlight-current-row
+      style="width: 100%; height: 100%; --el-bg-color: #f5f6f7"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column
+        v-for="(column, index) in tableColumns"
+        :key="index"
+        v-bind="column"
+        :label="column.label"
+      >
+        <template #default="scope">
+          <template v-if="column.type === 'component'">
+            <TableColumn :column="column" :row="scope.row"></TableColumn>
+          </template>
+          <template v-else-if="column.type === 'eval'">
+            <span v-html="evalF(column.property, scope.row)"></span
+          ></template>
+          <template v-else>
+            <span>{{ scope.row[column.property] }}</span></template
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="msg" v-show="props.modelValue">
+      {{ activeMsg }}
+      <span class="active">
+        {{ activeText }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+import { computed, ref, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import type { ElTable } from 'element-plus'
+
+import _ from 'lodash'
+import TableColumn from '@/components/dynamics-form/items/table/TableColumn.vue'
+const filterText = ref<string>('')
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+  // 选中的值
+  modelValue?: Array<any>
+}>()
+const rowTemp = ref<any>()
+const evalF: (text: string, row: any) => string = (text: string, row: any) => {
+  rowTemp.value = row
+  return eval(text)
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+
+const _data = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+    emit('change', props.formField)
+  }
+})
+const handleSelectionChange = (val: any[]) => {
+  _data.value = val.map((row) => row[valueField.value])
+}
+
+const propsInfo = computed(() => {
+  return props.formField.props_info ? props.formField.props_info : {}
+})
+
+const activeMsg = computed(() => {
+  return propsInfo.value.active_msg ? propsInfo.value.active_msg : ''
+})
+const title = computed(() => {
+  return propsInfo.value.title ? propsInfo.value.title : ''
+})
+const tableColumns = computed(() => {
+  return propsInfo.value.table_columns ? propsInfo.value.table_columns : []
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const tableData = computed(() => {
+  if (option_list.value) {
+    if (filterText.value) {
+      return option_list.value.filter((item: any) =>
+        tableColumns.value.some((c: any) => {
+          let v = ''
+          if (c.type === 'eval') {
+            v = evalF(c.property, item)
+          } else if (c.type === 'component') {
+            return false
+          } else {
+            v = item[c.property]
+          }
+          return typeof v == 'string' ? v.indexOf(filterText.value) >= 0 : false
+        })
+      )
+    } else {
+      return option_list.value.filter((item: any) => item[valueField.value])
+    }
+  }
+  return []
+})
+
+/**
+ * 监听表格数据，设置默认值
+ */
+watch(
+  () => tableData.value,
+  () => {
+    if (tableData.value && tableData.value.length > 0) {
+      const defaultItem = _.head(tableData.value)
+      let defaultItemValue = _.get(defaultItem, valueField.value)
+      if (props.modelValue) {
+        const row = option_list.value.find((f: any) => f[valueField.value] === props.modelValue)
+        if (row) {
+          defaultItemValue = row[valueField.value]
+        }
+      }
+      emit('update:modelValue', defaultItemValue)
+    } else {
+      emit('update:modelValue', undefined)
+    }
+    emit('change', props.formField)
+  }
+)
+
+const activeText = computed(() => {
+  if (props.modelValue) {
+    const rows = option_list.value.filter((f: any) =>
+      props.modelValue?.includes(f[valueField.value])
+    )
+    if (rows) {
+      if (rows.length > 3) {
+        return (
+          rows
+            .map((row) => row[textField.value])
+            .splice(0, 3)
+            .join(',') + '...'
+        )
+      } else {
+        return rows.map((row) => row[textField.value]).join(',')
+      }
+    }
+  }
+  return props.modelValue
+})
+</script>
+<style lang="scss" scoped>
+.table-checkbox {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .title {
+      color: #1f2329;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .input-with-select {
+      width: 45%;
+    }
+  }
+  .msg {
+    margin-top: 12px;
+    color: rgba(100, 106, 115, 1);
+    .active {
+      margin-left: 3px;
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/items/table/TableColumn.vue b/src/components/dynamics-form/items/table/TableColumn.vue
new file mode 100644
index 0000000..9b6989e
--- /dev/null
+++ b/src/components/dynamics-form/items/table/TableColumn.vue
@@ -0,0 +1,22 @@
+<template>
+  <component :is="column.property" v-bind="attrs" :column="column" :row="row"></component>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import _ from 'lodash'
+const props = defineProps<{
+  /**
+   *表单渲染Item column
+   */
+  column: any
+  /**
+   * 这一行数据
+   */
+  row: any
+}>()
+
+const attrs = computed(() => {
+  return props.column.attrs ? props.column.attrs : {}
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/dynamics-form/items/table/TableRadio.vue b/src/components/dynamics-form/items/table/TableRadio.vue
new file mode 100644
index 0000000..61c0078
--- /dev/null
+++ b/src/components/dynamics-form/items/table/TableRadio.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="table-radio">
+    <div class="header">
+      <div class="title">{{ title }}</div>
+
+      <el-input
+        v-model="filterText"
+        :validate-event="false"
+        placeholder="请输入关键字搜索"
+        class="input-with-select"
+        style="--el-color-danger: #c0c4cc"
+        clearable
+      >
+        <template #prepend>
+          <el-button :icon="Search" />
+        </template>
+      </el-input>
+    </div>
+
+    <el-table
+      ref="singleTableRef"
+      :data="tableData"
+      highlight-current-row
+      style="width: 100%; height: 100%; --el-bg-color: #f5f6f7"
+      @current-change="_data = $event[valueField]"
+    >
+      <el-table-column width="50px">
+        <template #default="scope">
+          <input type="radio" :checked="_data === scope.row[valueField]" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(column, index) in tableColumns"
+        v-bind="column"
+        :label="column.label"
+        :key="index"
+      >
+        <template #default="scope">
+          <template v-if="column.type === 'component'">
+            <TableColumn :column="column" :row="scope.row"></TableColumn>
+          </template>
+          <template v-else-if="column.type === 'eval'">
+            <span v-html="evalF(column.property, scope.row)"></span
+          ></template>
+          <template v-else>
+            <span>{{ scope.row[column.property] }}</span></template
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="msg" v-show="props.modelValue">
+      {{ activeMsg }}
+      <span class="active">
+        {{ activeText }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { FormField } from '@/components/dynamics-form/type'
+import { computed, ref, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import type { ElTable } from 'element-plus'
+
+import _ from 'lodash'
+import TableColumn from '@/components/dynamics-form/items/table/TableColumn.vue'
+const filterText = ref<string>('')
+const props = defineProps<{
+  formValue?: any
+  formfieldList?: Array<FormField>
+  field: string
+  otherParams: any
+  formField: FormField
+  view?: boolean
+  // 选中的值
+  modelValue?: any
+}>()
+const rowTemp = ref<any>()
+const evalF = (text: string, row: any) => {
+  rowTemp.value = row
+  return eval(text)
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const singleTableRef = ref<InstanceType<typeof ElTable>>()
+
+const _data = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+    emit('change', props.formField)
+  }
+})
+
+const propsInfo = computed(() => {
+  return props.formField.props_info ? props.formField.props_info : {}
+})
+
+const activeMsg = computed(() => {
+  return propsInfo.value.active_msg ? propsInfo.value.active_msg : ''
+})
+const title = computed(() => {
+  return propsInfo.value.title ? propsInfo.value.title : ''
+})
+const tableColumns = computed(() => {
+  return propsInfo.value.table_columns ? propsInfo.value.table_columns : []
+})
+
+const option_list = computed(() => {
+  return props.formField.option_list ? props.formField.option_list : []
+})
+
+const textField = computed(() => {
+  return props.formField.text_field ? props.formField.text_field : 'key'
+})
+
+const valueField = computed(() => {
+  return props.formField.value_field ? props.formField.value_field : 'value'
+})
+
+const tableData = computed(() => {
+  if (option_list.value) {
+    if (filterText.value) {
+      return option_list.value.filter((item: any) =>
+        tableColumns.value.some((c: any) => {
+          let v = ''
+          if (c.type === 'eval') {
+            v = evalF(c.property, item)
+          } else if (c.type === 'component') {
+            return false
+          } else {
+            v = item[c.property]
+          }
+          return typeof v == 'string' ? v.indexOf(filterText.value) >= 0 : false
+        })
+      )
+    } else {
+      return option_list.value.filter((item: any) => item[valueField.value])
+    }
+  }
+  return []
+})
+
+/**
+ * 监听表格数据，设置默认值
+ */
+watch(
+  () => tableData.value,
+  () => {
+    if (tableData.value && tableData.value.length > 0) {
+      const defaultItem = _.head(tableData.value)
+      let defaultItemValue = _.get(defaultItem, valueField.value)
+      if (props.modelValue) {
+        const row = option_list.value.find((f: any) => f[valueField.value] === props.modelValue)
+        if (row) {
+          defaultItemValue = row[valueField.value]
+        }
+      }
+      emit('update:modelValue', defaultItemValue)
+    } else {
+      emit('update:modelValue', undefined)
+    }
+    emit('change', props.formField)
+  }
+)
+
+const activeText = computed(() => {
+  if (props.modelValue) {
+    const row = option_list.value.find((f: any) => f[valueField.value] === props.modelValue)
+    return row[textField.value]
+  }
+  return props.modelValue
+})
+</script>
+<style lang="scss" scoped>
+.table-radio {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .title {
+      color: #1f2329;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .input-with-select {
+      width: 45%;
+    }
+  }
+  .msg {
+    margin-top: 12px;
+    color: rgba(100, 106, 115, 1);
+    .active {
+      margin-left: 3px;
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamics-form/type.ts b/src/components/dynamics-form/type.ts
new file mode 100644
index 0000000..e0da49b
--- /dev/null
+++ b/src/components/dynamics-form/type.ts
@@ -0,0 +1,176 @@
+import type { Dict } from '@/api/type/common'
+
+interface ViewCardItem {
+  /**
+   * 类型
+   */
+  type: 'eval' | 'default'
+  /**
+   * 标题
+   */
+  title: string
+  /**
+   * 值 根据类型不一样 取值也不一样 default= row[value_field] eval `${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`
+   */
+  value_field: string
+}
+
+interface TableColumn {
+  /**
+   * 字段|组件名称|可计算的模板字符串
+   */
+  property: string
+  /**
+   *表头
+   */
+  label: string
+  /**
+   * 表数据字段
+   */
+  value_field?: string
+
+  attrs?: Attrs
+  /**
+   * 类型
+   */
+  type: 'eval' | 'component' | 'default'
+
+  props_info?: PropsInfo
+}
+interface ColorItem {
+  /**
+   * 颜色#f56c6c
+   */
+  color: string
+  /**
+   * 进度
+   */
+  percentage: number
+}
+interface Attrs {
+  /**
+   * 提示语
+   */
+  placeholder?: string
+  /**
+   * 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。
+   */
+  labelWidth?: string
+  /**
+   * 表单域标签的后缀
+   */
+  labelSuffix?: string
+  /**
+   * 星号的位置。
+   */
+  requireAsteriskPosition?: 'left' | 'right'
+
+  color?: Array<ColorItem>
+
+  [propName: string]: any
+}
+interface PropsInfo {
+  /**
+   * 表格选择的card
+   */
+  view_card?: Array<ViewCardItem>
+  /**
+   * 表格选择
+   */
+  table_columns?: Array<TableColumn>
+  /**
+   * 选中 message
+   */
+  active_msg?: string
+
+  /**
+   * 组件样式
+   */
+  style?: Dict<any>
+
+  /**
+   * el-form-item 样式
+   */
+  item_style?: Dict<any>
+  /**
+   * 表单校验 这个和element校验一样
+   */
+  rules?: Dict<any>
+  /**
+   * 默认 不为空校验提示
+   */
+  err_msg?: string
+  /**
+   *tabs的时候使用
+   */
+  tabs_label?: string
+
+  [propName: string]: any
+}
+
+interface FormField {
+  field: string
+  /**
+   * 输入框类型
+   */
+  input_type: string
+  /**
+   * 提示
+   */
+  label?: string | any
+  /**
+   * 是否 必填
+   */
+  required?: boolean
+  /**
+   * 默认值
+   */
+  default_value?: any
+  /**
+   * 是否显示默认值
+   */
+  show_default_value?: boolean
+  /**
+   *  {field:field_value_list} 表示在 field有值 ,并且值在field_value_list中才显示
+   */
+  relation_show_field_dict?: Dict<Array<any>>
+  /**
+   * {field:field_value_list} 表示在 field有值 ,并且值在field_value_list中才 执行函数获取 数据
+   */
+  relation_trigger_field_dict?: Dict<Array<any>>
+  /**
+   * 执行器类型  OPTION_LIST请求Option_list数据 CHILD_FORMS请求子表单
+   */
+  trigger_type?: 'OPTION_LIST' | 'CHILD_FORMS'
+  /**
+   * 前端attr数据
+   */
+  attrs?: Attrs
+  /**
+   * 其他额外信息
+   */
+  props_info?: PropsInfo
+  /**
+   * 下拉选字段field
+   */
+  text_field?: string
+  /**
+   * 下拉选 value
+   */
+  value_field?: string
+  /**
+   * 下拉选数据
+   */
+  option_list?: Array<any>
+  /**
+   * 供应商
+   */
+  provider?: string
+  /**
+   * 执行函数
+   */
+  method?: string
+
+  children?: Array<FormField>
+}
+export type { FormField }
diff --git a/src/components/generate-related-dialog/index.vue b/src/components/generate-related-dialog/index.vue
new file mode 100644
index 0000000..310d0d8
--- /dev/null
+++ b/src/components/generate-related-dialog/index.vue
@@ -0,0 +1,213 @@
+<template>
+  <el-dialog
+    title="生成问题"
+    v-model="dialogVisible"
+    width="650"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="content-height">
+      <el-form
+        ref="FormRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+      >
+        <div class="update-info flex border-r-4 mb-16 p-8-12">
+          <div class="mt-4">
+            <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+          </div>
+          <div class="ml-12 lighter">
+            <p>提示词中的 {data} 为分段内容的占位符，执行时替换为分段内容发送给 AI 模型；</p>
+            <p>
+              AI
+              模型根据分段内容生成相关问题，请将生成的问题放至&lt;question&gt;&lt;/question&gt;标签中，系统会自动关联标签中的问题；
+            </p>
+            <p>生成效果依赖于所选模型和提示词，用户可自行调整至最佳效果。</p>
+          </div>
+        </div>
+        <el-form-item label="AI 模型" prop="model_id">
+          <el-select
+            v-model="form.model_id"
+            :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">{{
+                    $t('views.application.applicationForm.form.aiModel.unavailable')
+                  }}</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="提示词" prop="prompt">
+          <el-input v-model="form.prompt" placeholder="请输入提示词" :rows="7" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle(FormRef)" :disabled="!model || loading">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/document'
+import paragraphApi from '@/api/paragraph'
+import datasetApi from '@/api/dataset'
+import useStore from '@/stores'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import { groupBy } from 'lodash'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import type { FormInstance } from 'element-plus'
+
+const route = useRoute()
+const {
+  params: { id, documentId } // id为datasetID
+} = route as any
+
+const { model, prompt, user } = useStore()
+
+const emit = defineEmits(['refresh'])
+
+const loading = ref<boolean>(false)
+
+const dialogVisible = ref<boolean>(false)
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const idList = ref<string[]>([])
+const apiType = ref('') // 文档document或段落paragraph
+
+const FormRef = ref()
+const userId = user.userInfo?.id as string
+const form = ref(prompt.get(userId))
+
+const rules = reactive({
+  model_id: [{ required: true, message: '请选择AI 模型', trigger: 'blur' }],
+  prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }]
+})
+
+const open = (ids: string[], type: string) => {
+  getProvider()
+  getModel()
+  idList.value = ids
+  apiType.value = type
+  dialogVisible.value = true
+}
+
+const submitHandle = async (formEl: FormInstance) => {
+  if (!formEl) {
+    return
+  }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 保存提示词
+      prompt.save(user.userInfo?.id as string, form.value)
+      if (apiType.value === 'paragraph') {
+        const data = { ...form.value, paragraph_id_list: idList.value }
+        paragraphApi.batchGenerateRelated(id, documentId, data, loading).then(() => {
+          MsgSuccess('生成问题成功')
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else if (apiType.value === 'document') {
+        const data = { ...form.value, document_id_list: idList.value }
+        documentApi.batchGenerateRelated(id, data, loading).then(() => {
+          MsgSuccess('生成问题成功')
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      }
+    }
+  })
+}
+
+function getModel() {
+  loading.value = true
+  datasetApi
+    .getDatasetModel(id)
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res: any) => {
+      providerOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.update-info {
+  background: #d6e2ff;
+  line-height: 25px;
+}
+</style>
diff --git a/src/components/icons/AppIcon.vue b/src/components/icons/AppIcon.vue
new file mode 100644
index 0000000..346405b
--- /dev/null
+++ b/src/components/icons/AppIcon.vue
@@ -0,0 +1,33 @@
+<template>
+  <component
+    v-if="isIconfont"
+    :is="
+      Object.keys(iconMap).includes(iconName)
+        ? iconMap[iconName].iconReader()
+        : iconMap['404'].iconReader()
+    "
+    class="el-icon app-icon"
+  >
+  </component>
+  <el-icon v-else-if="iconName">
+    <component :is="iconName" />
+  </el-icon>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { iconMap } from '@/components/icons/index'
+defineOptions({ name: 'AppIcon' })
+
+const props = withDefaults(
+  defineProps<{
+    iconName?: string
+  }>(),
+  {
+    iconName: '404'
+  }
+)
+
+const isIconfont = computed(() => props.iconName?.includes('app-'))
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
new file mode 100644
index 0000000..d9908c1
--- /dev/null
+++ b/src/components/icons/index.ts
@@ -0,0 +1,1377 @@
+import { h } from 'vue'
+export const iconMap: any = {
+  'app-404': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            style: 'height:14px;width:14px',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M260.266667 789.333333c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333H38.4c-12.8 0-29.866667-8.533333-34.133333-21.333333-4.266667-17.066667-4.266667-29.866667 4.266666-42.666667l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4H298.666667v59.733333c0 21.333333-17.066667 38.4-38.4 38.4z m-145.066667-179.2h106.666667V469.333333l-106.666667 140.8zM913.066667 742.4c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333h-183.466667c-12.8 0-29.866667-8.533333-34.133333-21.333334-8.533333-12.8-4.266667-29.866667 4.266666-38.4l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4h-34.133333v59.733334c0 17.066667-17.066667 34.133333-38.4 34.133333zM768 567.466667h106.666667V426.666667L768 567.466667zM533.333333 597.333333c-46.933333 0-85.333333-25.6-119.466666-68.266666-29.866667-38.4-42.666667-93.866667-42.666667-145.066667 0-55.466667 17.066667-106.666667 42.666667-145.066667 29.866667-42.666667 72.533333-68.266667 119.466666-68.266666 46.933333 0 85.333333 25.6 119.466667 68.266666 29.866667 38.4 42.666667 93.866667 42.666667 145.066667 0 55.466667-17.066667 106.666667-42.666667 145.066667-34.133333 46.933333-76.8 68.266667-119.466667 68.266666z m0-362.666666c-55.466667 0-98.133333 68.266667-98.133333 149.333333s46.933333 149.333333 98.133333 149.333333c55.466667 0 98.133333-68.266667 98.133334-149.333333s-46.933333-149.333333-98.133334-149.333333z',
+              fill: '#978CFF'
+            }),
+            h('path', {
+              d: 'M354.133333 691.2a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z',
+              fill: '#E3E5FC'
+            }),
+            h('path', {
+              d: 'M8.533333 832a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z',
+              fill: '#E3E5FC'
+            }),
+            h('path', {
+              d: 'M661.333333 797.866667a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z',
+              fill: '#E3E5FC'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-add-users': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M6.24984 5.41667C6.24984 6.7975 7.37067 7.91667 8.74984 7.91667C10.129 7.91667 11.2498 6.7975 11.2498 5.41667C11.2498 4.03583 10.129 2.91667 8.74984 2.91667C7.37067 2.91667 6.24984 4.03583 6.24984 5.41667ZM8.74984 1.25C11.0498 1.25 12.9165 3.11542 12.9165 5.41667C12.9165 7.71792 11.0498 9.58333 8.74984 9.58333C6.44984 9.58333 4.58317 7.71792 4.58317 5.41667C4.58317 3.11542 6.44984 1.25 8.74984 1.25ZM3.43734 15C3.37067 15.2663 3.33317 15.5454 3.33317 15.8333V16.6667H10.854C11.0841 16.6667 11.2706 16.8532 11.2706 17.0833V17.9167C11.2706 18.1468 11.0841 18.3333 10.854 18.3333H2.49984C2.0415 18.3333 1.6665 17.9604 1.6665 17.5V15.8333C1.6665 13.0721 3.904 10.8333 6.6665 10.8333H10.854C11.0841 10.8333 11.2706 11.0199 11.2706 11.25V12.0833C11.2706 12.3135 11.0841 12.5 10.854 12.5H6.6665C5.11234 12.5 3.80817 13.5625 3.43734 15ZM15.4165 11.6667C15.6466 11.6667 15.8332 11.8532 15.8332 12.0833V14.1667H17.9165C18.1466 14.1667 18.3332 14.3532 18.3332 14.5833V15.4167C18.3332 15.6468 18.1466 15.8333 17.9165 15.8333H15.8332V17.9167C15.8332 18.1468 15.6466 18.3333 15.4165 18.3333H14.5832C14.3531 18.3333 14.1665 18.1468 14.1665 17.9167V15.8333H12.0832C11.8531 15.8333 11.6665 15.6468 11.6665 15.4167V14.5833C11.6665 14.3532 11.8531 14.1667 12.0832 14.1667H14.1665V12.0833C14.1665 11.8532 14.3531 11.6667 14.5832 11.6667H15.4165Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-exit': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M874.666667 855.744a19.093333 19.093333 0 0 1-19.136 18.922667H168.469333A19.2 19.2 0 0 1 149.333333 855.530667V168.469333A19.2 19.2 0 0 1 168.469333 149.333333h687.061334c10.581333 0 19.136 8.533333 19.136 18.922667V320h42.666666V168.256A61.717333 61.717333 0 0 0 855.530667 106.666667H168.469333A61.866667 61.866667 0 0 0 106.666667 168.469333v687.061334A61.866667 61.866667 0 0 0 168.469333 917.333333h687.061334A61.76 61.76 0 0 0 917.333333 855.744V704h-42.666666v151.744zM851.84 533.333333l-131.797333 131.754667a21.141333 21.141333 0 0 0 0.213333 29.973333 21.141333 21.141333 0 0 0 29.973333 0.192l165.589334-165.589333a20.821333 20.821333 0 0 0 6.122666-14.976 21.44 21.44 0 0 0-6.314666-14.997333l-168.533334-168.533334a21.141333 21.141333 0 0 0-29.952-0.213333 21.141333 21.141333 0 0 0 0.213334 29.973333L847.296 490.666667H469.333333v42.666666h382.506667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-team': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M7.08317 4.16667C5.93317 4.16667 4.99984 5.09958 4.99984 6.25C4.99984 7.40042 5.93317 8.33333 7.08317 8.33333C8.23317 8.33333 9.1665 7.40042 9.1665 6.25C9.1665 5.09958 8.23317 4.16667 7.08317 4.16667ZM3.33317 6.25C3.33317 4.17875 5.01234 2.5 7.08317 2.5C9.154 2.5 10.8332 4.17875 10.8332 6.25C10.8332 8.32125 9.154 10 7.08317 10C5.01234 10 3.33317 8.32125 3.33317 6.25ZM4.86234 12.5C3.34567 12.5 2.08317 13.7488 2.08317 15.3333V16.6667H12.0832V15.3333C12.0832 13.7488 10.8207 12.5 9.304 12.5H4.86234ZM0.416504 15.3333C0.416504 12.8479 2.40817 10.8333 4.86234 10.8333H9.304C11.7582 10.8333 13.7498 12.8479 13.7498 15.3333V17.5833C13.7498 17.9975 13.4165 18.3333 13.0082 18.3333H1.15817C0.749837 18.3333 0.416504 17.9975 0.416504 17.5833V15.3333ZM19.029 17.5H15.304V17.1592V15.8333H17.9165V15.3333C17.9165 14.4983 17.2123 13.75 16.2498 13.75H15.1582C14.9998 13.1342 14.7165 12.5692 14.3373 12.0833H16.2498C18.0915 12.0833 19.5832 13.5383 19.5832 15.3333V16.9583C19.5832 17.2575 19.3332 17.5 19.029 17.5ZM13.7498 8.33333C13.7498 7.87292 14.1248 7.5 14.5832 7.5C15.0415 7.5 15.4165 7.87292 15.4165 8.33333C15.4165 8.79375 15.0415 9.16667 14.5832 9.16667C14.1248 9.16667 13.7498 8.79375 13.7498 8.33333ZM14.5832 5.83333C13.204 5.83333 12.0832 6.9525 12.0832 8.33333C12.0832 9.71417 13.204 10.8333 14.5832 10.8333C15.9623 10.8333 17.0832 9.71417 17.0832 8.33333C17.0832 6.9525 15.9623 5.83333 14.5832 5.83333Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-team-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M7.08317 10C9.15424 10 10.8332 8.32107 10.8332 6.25C10.8332 4.17893 9.15424 2.5 7.08317 2.5C5.0121 2.5 3.33317 4.17893 3.33317 6.25C3.33317 8.32107 5.0121 10 7.08317 10Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M1.24984 18.3333C0.7896 18.3333 0.416504 17.9602 0.416504 17.5V15.8889C0.416504 13.0968 2.76035 10.8333 5.47333 10.8333H8.70065C11.4136 10.8333 13.7498 13.0968 13.7498 15.8889V17.5C13.7498 17.9602 13.3767 18.3333 12.9165 18.3333H1.24984Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M15.4165 17.5V17.2535C15.4165 15.3267 15.4165 13.3333 13.7498 12.0833C13.8196 12.0773 13.9366 12.0794 14.0491 12.0814C14.1036 12.0824 14.157 12.0833 14.2034 12.0833H15.8332C17.8679 12.0833 19.5832 13.3643 19.5832 15.4583V16.875C19.5832 17.2202 19.3033 17.5 18.9582 17.5H15.4165Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M14.5832 10.8333C15.9639 10.8333 17.0832 9.71405 17.0832 8.33333C17.0832 6.95262 15.9639 5.83333 14.5832 5.83333C13.2025 5.83333 12.0832 6.95262 12.0832 8.33333C12.0832 9.71405 13.2025 10.8333 14.5832 10.8333Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-template': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M0.833496 6.36987C0.833496 6.04308 1.0245 5.74646 1.32199 5.61123L9.65533 1.82335C9.87443 1.72376 10.1259 1.72376 10.345 1.82335L18.6783 5.61123C18.9758 5.74646 19.1668 6.04308 19.1668 6.36987V14.4849C19.1668 14.8006 18.9885 15.0891 18.7062 15.2303L10.3728 19.3969C10.1382 19.5142 9.86209 19.5142 9.62748 19.3969L1.29415 15.2303C1.01183 15.0891 0.833496 14.8006 0.833496 14.4849V6.36987ZM16.015 6.2314L10.0002 3.49737L3.95283 6.24616L9.9668 8.83681L16.015 6.2314ZM10.8335 10.2782V17.3032L17.5002 13.9699V7.40638L10.8335 10.2782ZM2.50016 7.43512V13.9699L9.16683 17.3032V10.3069L2.50016 7.43512Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-template-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M0.833496 7.40037C0.833496 7.04018 1.20284 6.79815 1.53309 6.94194L8.77383 10.0945C8.95625 10.1739 9.07423 10.3539 9.07423 10.5529V18.339C9.07423 18.7151 8.67454 18.9566 8.34159 18.7816L1.1439 14.9982C1.05114 14.9474 0.973682 14.8737 0.919239 14.7847C0.864795 14.6956 0.835262 14.5943 0.833578 14.4907L0.833496 14.4814V7.40037ZM18.4646 6.9322C18.7952 6.78604 19.1668 7.02807 19.1668 7.38949V14.4814C19.1668 14.5866 19.1381 14.6899 19.0835 14.7807C19.029 14.8715 18.9506 14.9466 18.8564 14.9982L11.6587 18.7816C11.3258 18.9566 10.9261 18.7151 10.9261 18.339L10.9261 10.5912C10.9261 10.3932 11.0429 10.2139 11.2239 10.1339L18.4646 6.9322ZM9.70006 1.74337C9.79165 1.69312 9.89502 1.66672 10.0002 1.66672C10.1053 1.66672 10.2087 1.69312 10.3003 1.74337L17.1982 4.80724C17.5964 4.9841 17.5936 5.55021 17.1937 5.72313L10.1986 8.74754C10.072 8.80229 9.92836 8.80229 9.80173 8.74754L2.80663 5.72313C2.4067 5.55021 2.40389 4.9841 2.80209 4.80724L9.70006 1.74337Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-setting': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.60734 16.4448L3.34807 16.1624C2.44036 15.1737 1.75935 13.9944 1.36011 12.7066L1.24756 12.3435L2.95427 10.0001L1.24756 7.65668L1.36011 7.29361C1.75935 6.00574 2.44036 4.82649 3.34807 3.83779L3.60734 3.55539L6.47552 3.86889L7.64049 1.21319L8.01405 1.12909C8.66134 0.983366 9.32633 0.90918 10.0004 0.90918C10.6744 0.90918 11.3394 0.983366 11.9867 1.12909L12.3603 1.21319L13.5252 3.86889L16.3934 3.55539L16.6527 3.83779C17.5604 4.82649 18.2414 6.00574 18.6406 7.29361L18.7532 7.65668L17.0465 10.0001L18.7532 12.3435L18.6406 12.7066C18.2414 13.9944 17.5604 15.1737 16.6527 16.1624L16.3934 16.4448L13.5252 16.1313L12.3603 18.787L11.9867 18.8711C11.3394 19.0168 10.6744 19.091 10.0004 19.091C9.32633 19.091 8.66134 19.0168 8.01405 18.8711L7.64049 18.787L6.47552 16.1313L3.60734 16.4448ZM6.51159 14.6031C7.05002 14.5443 7.56436 14.8417 7.78194 15.3377L8.71565 17.4662C9.13677 17.5389 9.56603 17.5758 10.0004 17.5758C10.4347 17.5758 10.864 17.5389 11.2851 17.4662L12.2188 15.3377C12.4364 14.8417 12.9507 14.5443 13.4892 14.6031L15.7844 14.854C16.3387 14.1868 16.7757 13.4286 17.0741 12.6116L15.7038 10.7301C15.3869 10.295 15.3869 9.70511 15.7038 9.26999L17.0741 7.38847C16.7757 6.57146 16.3387 5.81331 15.7844 5.14609L13.4892 5.39696C12.9507 5.45581 12.4364 5.1584 12.2188 4.66238L11.2851 2.53389C10.864 2.46117 10.4347 2.42429 10.0004 2.42429C9.56603 2.42429 9.13677 2.46117 8.71565 2.53389L7.78194 4.66238C7.56436 5.1584 7.05002 5.45581 6.51159 5.39696L4.21641 5.14609C3.66208 5.81331 3.22502 6.57146 2.92666 7.38847L4.29697 9.26999C4.61387 9.70511 4.61387 10.295 4.29697 10.7301L2.92666 12.6116C3.22502 13.4286 3.66208 14.1868 4.21641 14.854L6.51159 14.6031ZM10.0004 13.788C7.91555 13.788 6.22693 12.0913 6.22693 10.0001C6.22693 7.9089 7.91555 6.2122 10.0004 6.2122C12.0852 6.2122 13.7738 7.9089 13.7738 10.0001C13.7738 12.0913 12.0852 13.788 10.0004 13.788ZM10.0004 12.2729C11.2468 12.2729 12.2587 11.2561 12.2587 10.0001C12.2587 8.74413 11.2468 7.72741 10.0004 7.72741C8.75397 7.72741 7.74208 8.74413 7.74208 10.0001C7.74208 11.2561 8.75397 12.2729 10.0004 12.2729Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-setting-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.26425 16.2151C2.35478 15.2292 1.65887 14.0432 1.25 12.7305L2.70785 10.7384C3.02952 10.2988 3.02952 9.70154 2.70785 9.26197L1.25 7.26979C1.65887 5.95714 2.35478 4.77112 3.26425 3.78522L5.71416 4.05172C6.25589 4.11065 6.77338 3.81185 6.99316 3.31321L7.98848 1.05505C8.63579 0.910018 9.30896 0.833496 10 0.833496C10.691 0.833496 11.3642 0.910018 12.0115 1.05505L13.0068 3.31321C13.2266 3.81185 13.7441 4.11065 14.2858 4.05172L16.7357 3.78522C17.6452 4.77112 18.3411 5.95714 18.75 7.26979L17.2921 9.26197C16.9705 9.70154 16.9705 10.2988 17.2921 10.7384L18.75 12.7305C18.3411 14.0432 17.6452 15.2292 16.7357 16.2151L14.2858 15.9486C13.7441 15.8897 13.2266 16.1885 13.0068 16.6871L12.0115 18.9453C11.3642 19.0903 10.691 19.1668 10 19.1668C9.30896 19.1668 8.63579 19.0903 7.98848 18.9453L6.99316 16.6871C6.77338 16.1885 6.25589 15.8897 5.71416 15.9486L3.26425 16.2151ZM10 13.3335C11.8409 13.3335 13.3333 11.8411 13.3333 10.0002C13.3333 8.15921 11.8409 6.66683 10 6.66683C8.15905 6.66683 6.66667 8.15921 6.66667 10.0002C6.66667 11.8411 8.15905 13.3335 10 13.3335Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-document': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M13.3333 2.50016H4.16667V17.5002H15.8333V5.01641H13.75C13.6395 5.01641 13.5335 4.97251 13.4554 4.89437C13.3772 4.81623 13.3333 4.71025 13.3333 4.59975V2.50016ZM3.33333 0.833496H14.2379C14.3474 0.833465 14.4558 0.855013 14.557 0.896908C14.6582 0.938804 14.7501 1.00023 14.8275 1.07766L17.2563 3.50725C17.4124 3.66356 17.5001 3.87548 17.5 4.09641V18.3335C17.5 18.5545 17.4122 18.7665 17.2559 18.9228C17.0996 19.079 16.8877 19.1668 16.6667 19.1668H3.33333C3.11232 19.1668 2.90036 19.079 2.74408 18.9228C2.5878 18.7665 2.5 18.5545 2.5 18.3335V1.66683C2.5 1.44582 2.5878 1.23385 2.74408 1.07757C2.90036 0.921293 3.11232 0.833496 3.33333 0.833496ZM6.66667 8.3335H13.3333C13.4438 8.3335 13.5498 8.3774 13.628 8.45554C13.7061 8.53368 13.75 8.63966 13.75 8.75016V9.5835C13.75 9.694 13.7061 9.79998 13.628 9.87812C13.5498 9.95626 13.4438 10.0002 13.3333 10.0002H6.66667C6.55616 10.0002 6.45018 9.95626 6.37204 9.87812C6.2939 9.79998 6.25 9.694 6.25 9.5835V8.75016C6.25 8.63966 6.2939 8.53368 6.37204 8.45554C6.45018 8.3774 6.55616 8.3335 6.66667 8.3335ZM6.66667 12.5002H10.4167C10.4714 12.5002 10.5256 12.5109 10.5761 12.5319C10.6267 12.5528 10.6726 12.5835 10.7113 12.6222C10.75 12.6609 10.7807 12.7068 10.8016 12.7574C10.8226 12.8079 10.8333 12.8621 10.8333 12.9168V13.7502C10.8333 13.8049 10.8226 13.8591 10.8016 13.9096C10.7807 13.9602 10.75 14.0061 10.7113 14.0448C10.6726 14.0835 10.6267 14.1142 10.5761 14.1351C10.5256 14.1561 10.4714 14.1668 10.4167 14.1668H6.66667C6.55616 14.1668 6.45018 14.1229 6.37204 14.0448C6.2939 13.9667 6.25 13.8607 6.25 13.7502V12.9168C6.25 12.8063 6.2939 12.7003 6.37204 12.6222C6.45018 12.5441 6.55616 12.5002 6.66667 12.5002Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-document-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.3335 2.08333C3.3335 1.6231 3.70659 1.25 4.16683 1.25H12.3842C12.4959 1.25 12.603 1.29489 12.6813 1.37459L16.5473 5.30784C16.6239 5.38576 16.6668 5.49065 16.6668 5.59992V17.9167C16.6668 18.3769 16.2937 18.75 15.8335 18.75H4.16683C3.70659 18.75 3.3335 18.3769 3.3335 17.9167V2.08333Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M12.5 1.2666C12.568 1.28633 12.6306 1.32327 12.6812 1.37472L16.5472 5.30797C16.5788 5.34017 16.6047 5.37698 16.6242 5.4168H13.4459C12.9235 5.4168 12.5 4.99328 12.5 4.47085V1.2666Z',
+              fill: '#2B5FD9'
+            }),
+            h('path', {
+              d: 'M6.71305 7.72705C6.48293 7.72705 6.29639 7.9136 6.29639 8.14372V8.82554C6.29639 9.05565 6.48294 9.2422 6.71305 9.2422H13.2871C13.5172 9.2422 13.7038 9.05565 13.7038 8.82554V8.14372C13.7038 7.9136 13.5172 7.72705 13.2871 7.72705H6.71305Z',
+              fill: 'white'
+            }),
+            h('path', {
+              d: 'M6.71305 11.5149C6.48293 11.5149 6.29639 11.7015 6.29639 11.9316V12.6134C6.29639 12.8435 6.48294 13.0301 6.71305 13.0301H9.58342C9.81354 13.0301 10.0001 12.8435 10.0001 12.6134V11.9316C10.0001 11.7015 9.81354 11.5149 9.58342 11.5149H6.71305Z',
+              fill: 'white'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-view': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 12',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M6.9649 8.5176L10.8075 6.59629C10.9365 6.53178 11.0412 6.42717 11.1057 6.29815C11.2703 5.96883 11.1368 5.56838 10.8075 5.40372L6.9649 3.48241C6.87233 3.43612 6.77025 3.41203 6.66675 3.41203C6.29856 3.41203 6.00009 3.71051 6.00009 4.07869V7.92132C6.00009 8.02481 6.02418 8.12689 6.07047 8.21946C6.23513 8.54878 6.63558 8.68226 6.9649 8.5176Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M15.3334 0.75C15.3334 0.335786 15.0349 0 14.6667 0H1.33341C0.965225 0 0.666748 0.335786 0.666748 0.75V11.25C0.666748 11.6642 0.965225 12 1.33341 12H14.6667C15.0349 12 15.3334 11.6642 15.3334 11.25V0.75ZM2.00008 1.5H14.0001V10.5H2.00008V1.5Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-all-menu': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M2.91683 2.0835H8.3335C8.79373 2.0835 9.16683 2.45659 9.16683 2.91683V8.3335C9.16683 8.79373 8.79373 9.16683 8.3335 9.16683H2.91683C2.45659 9.16683 2.0835 8.79373 2.0835 8.3335V2.91683C2.0835 2.45659 2.45659 2.0835 2.91683 2.0835ZM3.75016 3.75016V7.50016H7.50016V3.75016H3.75016Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M2.91683 10.8335H8.3335C8.79373 10.8335 9.16683 11.2066 9.16683 11.6668V17.0835C9.16683 17.5437 8.79373 17.9168 8.3335 17.9168H2.91683C2.45659 17.9168 2.0835 17.5437 2.0835 17.0835V11.6668C2.0835 11.2066 2.45659 10.8335 2.91683 10.8335ZM3.75016 16.2502H7.50016V12.5002H3.75016V16.2502Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M11.6668 2.0835H17.0835C17.5437 2.0835 17.9168 2.45659 17.9168 2.91683V8.3335C17.9168 8.79373 17.5437 9.16683 17.0835 9.16683H11.6668C11.2066 9.16683 10.8335 8.79373 10.8335 8.3335V2.91683C10.8335 2.45659 11.2066 2.0835 11.6668 2.0835ZM12.5002 7.50016H16.2502V3.75016H12.5002V7.50016Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M11.6668 10.8335H17.0835C17.5437 10.8335 17.9168 11.2066 17.9168 11.6668V17.0835C17.9168 17.5437 17.5437 17.9168 17.0835 17.9168H11.6668C11.2066 17.9168 10.8335 17.5437 10.8335 17.0835V11.6668C10.8335 11.2066 11.2066 10.8335 11.6668 10.8335ZM12.5002 12.5002V16.2502H16.2502V12.5002H12.5002Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-all-menu-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M8.33317 1.6665H2.49984C2.0396 1.6665 1.6665 2.0396 1.6665 2.49984V8.33317C1.6665 8.79341 2.0396 9.1665 2.49984 9.1665H8.33317C8.79341 9.1665 9.1665 8.79341 9.1665 8.33317V2.49984C9.1665 2.0396 8.79341 1.6665 8.33317 1.6665Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M8.33317 10.8332H2.49984C2.0396 10.8332 1.6665 11.2063 1.6665 11.6665V17.4998C1.6665 17.9601 2.0396 18.3332 2.49984 18.3332H8.33317C8.79341 18.3332 9.1665 17.9601 9.1665 17.4998V11.6665C9.1665 11.2063 8.79341 10.8332 8.33317 10.8332Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M17.4998 1.6665H11.6665C11.2063 1.6665 10.8332 2.0396 10.8332 2.49984V8.33317C10.8332 8.79341 11.2063 9.1665 11.6665 9.1665H17.4998C17.9601 9.1665 18.3332 8.79341 18.3332 8.33317V2.49984C18.3332 2.0396 17.9601 1.6665 17.4998 1.6665Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M17.4508 10.8332H11.7155C11.2282 10.8332 10.8332 11.2282 10.8332 11.7155V17.4508C10.8332 17.9381 11.2282 18.3332 11.7155 18.3332H17.4508C17.9381 18.3332 18.3332 17.9381 18.3332 17.4508V11.7155C18.3332 11.2282 17.9381 10.8332 17.4508 10.8332Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-restore': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.33333 5.3335V13.3335H10V5.3335H3.33333ZM11.3333 4.66683V14.0742C11.3333 14.4015 11.0548 14.6668 10.7111 14.6668H2.62222C2.27858 14.6668 2 14.4015 2 14.0742V4.59276C2 4.26548 2.27858 4.00016 2.62222 4.00016H10.6667C11.0349 4.00016 11.3333 4.29864 11.3333 4.66683ZM13.8047 1.52876C13.9254 1.6494 14 1.81607 14 2.00016V10.3335C14 10.5176 13.8508 10.6668 13.6667 10.6668H13C12.8159 10.6668 12.6667 10.5176 12.6667 10.3335V2.66683H6.33333C6.14924 2.66683 6 2.51759 6 2.3335V1.66683C6 1.48273 6.14924 1.3335 6.33333 1.3335H13.3333C13.5174 1.3335 13.6841 1.40812 13.8047 1.52876Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-copy': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M213.333333 341.333333v512h426.666667V341.333333H213.333333z m512-42.666666v602.069333c0 20.949333-17.834667 37.930667-39.808 37.930667H167.808C145.834667 938.666667 128 921.685333 128 900.736V293.973333C128 272.981333 145.834667 256 167.808 256H682.666667a42.666667 42.666667 0 0 1 42.666666 42.666667z m158.165334-200.832A42.538667 42.538667 0 0 1 896 128v533.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V170.666667H405.333333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H853.333333c11.776 0 22.442667 4.778667 30.165334 12.501334z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-like': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M2.00518 14.6608H0.666612C0.666097 14.6874 0.666707 5.33317 0.666612 5.29087H2.00518C2.00004 5.33317 1.98014 14.6874 2.00518 14.6608ZM9.70096 5.28984H12.5717C14.5687 5.28984 15.0274 7.05264 14.5687 8.37353L12.5717 13.6308C12.4029 14.2423 11.8409 14.6665 11.1995 14.6665H3.33882C3.154 14.6665 3.00418 14.5167 3.00418 14.3319V5.62448C3.00418 5.43966 3.154 5.28984 3.33882 5.28984H4.02656C4.24449 5.28984 4.44877 5.18374 4.5741 5.00545L7.35254 1.05296C7.5406 0.753754 8.04824 0.52438 8.5893 0.770777C9.40089 1.14037 10.3724 1.94718 10.3724 3.28394C10.3724 3.78809 10.1486 4.45673 9.70096 5.28984ZM12.5717 6.62841H7.46215L8.52183 4.65626C8.87422 4.00045 9.03388 3.52351 9.03388 3.28394C9.03388 2.89556 8.9524 2.45627 8.25544 2.09612L5.26934 6.34402C5.14401 6.5223 4.93973 6.62841 4.72181 6.62841H4.34275V13.3279H11.1995C11.2411 13.3279 11.2734 13.3035 11.2813 13.2747L11.298 13.2142L13.3098 7.91815C13.5743 7.13902 13.3105 6.62841 12.5717 6.62841Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-like-color': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M2.00497 14.6608H2.00518C2.00511 14.6609 2.00504 14.6609 2.00497 14.6608H0.666612C0.666097 14.6874 0.666707 5.33317 0.666612 5.29087H2.00518C2.00006 5.33305 1.98026 14.6344 2.00497 14.6608Z',
+              fill: '#FFC60A'
+            }),
+            h('path', {
+              d: 'M12.5717 5.28984H9.70096C10.1486 4.45673 10.3724 3.78809 10.3724 3.28394C10.3724 1.94718 9.40089 1.14037 8.5893 0.770777C8.04824 0.52438 7.5406 0.753754 7.35254 1.05296L4.5741 5.00545C4.44877 5.18374 4.24449 5.28984 4.02656 5.28984H3.33882C3.154 5.28984 3.00418 5.43966 3.00418 5.62448V14.3319C3.00418 14.5167 3.154 14.6665 3.33882 14.6665H11.1995C11.8409 14.6665 12.4029 14.2423 12.5717 13.6308L14.5687 8.37353C15.0274 7.05264 14.5687 5.28984 12.5717 5.28984Z',
+              fill: '#FFC60A'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-oppose': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M2.00518 1.28008H0.666616C0.666616 1.33341 0.666504 10.6667 0.666616 10.65H2.00518C1.99984 10.6667 1.99984 1.33341 2.00518 1.28008ZM9.70097 10.6511H12.5717C14.5687 10.6511 15.0274 8.88828 14.5687 7.56739L12.5717 2.3101C12.4029 1.69862 11.8409 1.27441 11.1996 1.27441H3.33883C3.15401 1.27441 3.00418 1.42424 3.00418 1.60906V10.3164C3.00418 10.5013 3.15401 10.6511 3.33883 10.6511H4.02656C4.24449 10.6511 4.44877 10.7572 4.5741 10.9355L7.35254 14.888C7.5406 15.1872 8.04825 15.4165 8.58931 15.1701C9.40089 14.8005 10.3724 13.9937 10.3724 12.657C10.3724 12.1528 10.1486 11.4842 9.70097 10.6511ZM12.5717 9.31251H7.46216L8.52184 11.2847C8.87422 11.9405 9.03388 12.4174 9.03388 12.657C9.03388 13.0454 8.95241 13.4846 8.25545 13.8448L5.26935 9.5969C5.14402 9.41861 4.93974 9.31251 4.72181 9.31251H4.34275V2.61298H11.1996C11.2411 2.61298 11.2734 2.63737 11.2813 2.6662L11.298 2.72673L13.3098 8.02277C13.5743 8.8019 13.3105 9.31251 12.5717 9.31251Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-oppose-color': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M9.70106 10.7102H12.5718C14.5688 10.7102 15.0275 8.94736 14.5688 7.62647L12.5718 2.36918C12.403 1.7577 11.841 1.3335 11.1996 1.3335H3.33891C3.1541 1.3335 3.00427 1.48332 3.00427 1.66814V10.3755C3.00427 10.5603 3.1541 10.7102 3.33891 10.7102H4.02665C4.24458 10.7102 4.44886 10.8163 4.57419 10.9945L7.35263 14.947C7.54069 15.2462 8.04834 15.4756 8.58939 15.2292C9.40098 14.8596 10.3725 14.0528 10.3725 12.7161C10.3725 12.2119 10.1487 11.5433 9.70106 10.7102Z',
+              fill: '#F54A45'
+            }),
+            h('path', {
+              d: 'M2.00004 1.3335H0.661473C0.661473 1.3335 0.660982 10.7764 0.661473 10.7035H2.00001C1.99469 10.6868 1.9947 1.38674 2.00004 1.3335Z',
+              fill: '#F54A45'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-hit-test': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+
+          [
+            h('path', {
+              d: 'M1.6665 9.99986C1.6665 5.3975 5.39748 1.66653 9.99984 1.66653H10.8332V3.3332H9.99984C6.31795 3.3332 3.33317 6.31797 3.33317 9.99986C3.33317 13.6818 6.31795 16.6665 9.99984 16.6665C13.6817 16.6665 16.6665 13.6818 16.6665 9.99986V9.16653H18.3332V9.99986C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39748 18.3332 1.6665 14.6022 1.6665 9.99986Z',
+              fill: 'currentColor',
+              fillRule: 'evenodd',
+              clipRule: 'evenodd'
+            }),
+            h('path', {
+              d: 'M5.4165 9.99986C5.4165 7.46854 7.46852 5.41653 9.99984 5.41653H10.8332V7.0832H9.99984C8.38899 7.0832 7.08317 8.38902 7.08317 9.99986C7.08317 11.6107 8.38899 12.9165 9.99984 12.9165C11.6107 12.9165 12.9165 11.6107 12.9165 9.99986V9.16653H14.5832V9.99986C14.5832 12.5312 12.5312 14.5832 9.99984 14.5832C7.46852 14.5832 5.4165 12.5312 5.4165 9.99986Z',
+              fill: 'currentColor',
+              fillRule: 'evenodd',
+              clipRule: 'evenodd'
+            }),
+            h('path', {
+              d: 'M13.2138 6.78296C13.5394 7.10825 13.5397 7.63588 13.2144 7.96147L10.5894 10.5889C10.2641 10.9145 9.73644 10.9147 9.41085 10.5894C9.08527 10.2641 9.08502 9.73651 9.41031 9.41092L12.0353 6.7835C12.3606 6.45792 12.8882 6.45767 13.2138 6.78296Z',
+              fill: 'currentColor',
+              fillRule: 'evenodd',
+              clipRule: 'evenodd'
+            }),
+            h('path', {
+              d: 'M15.1942 1.72962C15.506 1.8584 15.7095 2.16249 15.7095 2.49986V4.29161H17.4998C17.8365 4.29161 18.1401 4.49423 18.2693 4.80516C18.3985 5.11608 18.3279 5.47421 18.0904 5.71284L15.8508 7.96276C15.6944 8.11987 15.4819 8.2082 15.2602 8.2082H12.6248C12.1645 8.2082 11.7914 7.8351 11.7914 7.37486V4.76086C11.7914 4.54046 11.8787 4.32904 12.0342 4.17287L14.2856 1.91186C14.5237 1.6728 14.8824 1.60085 15.1942 1.72962ZM13.4581 5.105V6.54153H14.9139L15.4945 5.95828H14.8761C14.4159 5.95828 14.0428 5.58518 14.0428 5.12495V4.51779L13.4581 5.105Z',
+              fill: 'currentColor',
+              fillRule: 'evenodd',
+              clipRule: 'evenodd'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-warning': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 234.666667A53.333333 53.333333 0 1 1 512 341.333333a53.333333 53.333333 0 0 1 0-106.666666zM522.666667 384h-64a21.333333 21.333333 0 0 0-21.333334 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333334 21.333333h21.333333v213.333334H426.666667a21.333333 21.333333 0 0 0-21.333334 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333334 21.333333h192a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333h-53.333334v-256a42.666667 42.666667 0 0 0-42.666666-42.666667z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m0-85.333333a384 384 0 1 0 0-768 384 384 0 0 0 0 768z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-warning-colorful': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M42.666667 512c0 259.2 210.133333 469.333333 469.333333 469.333333s469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667 42.666667 252.8 42.666667 512z m469.333333-277.333333A53.333333 53.333333 0 1 1 512 341.333333a53.333333 53.333333 0 0 1 0-106.666666zM458.666667 384h64a42.666667 42.666667 0 0 1 42.666666 42.666667v256h53.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333H426.666667a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h53.333333v-213.333334h-21.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333z',
+              fill: '#3370FF'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-operation': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M11.0002 11.3333H14.2395C14.3881 11.3333 14.442 11.3487 14.4963 11.3778C14.5506 11.4068 14.5933 11.4495 14.6223 11.5038C14.6514 11.5581 14.6668 11.612 14.6668 11.7606V12.2393C14.6668 12.3879 14.6514 12.4417 14.6223 12.4961C14.5933 12.5504 14.5506 12.593 14.4963 12.6221C14.442 12.6511 14.3881 12.6666 14.2395 12.6666H11.0002V14.2393C11.0002 14.3879 10.9847 14.4417 10.9556 14.4961C10.9266 14.5504 10.884 14.593 10.8296 14.6221C10.7753 14.6511 10.7214 14.6666 10.5728 14.6666H10.0941C9.94556 14.6666 9.89168 14.6511 9.83736 14.6221C9.78304 14.593 9.7404 14.5504 9.71135 14.4961C9.6823 14.4417 9.66683 14.3879 9.66683 14.2393V12.6666H1.76081C1.61222 12.6666 1.55834 12.6511 1.50402 12.6221C1.4497 12.593 1.40707 12.5504 1.37802 12.4961C1.34897 12.4417 1.3335 12.3879 1.3335 12.2393V11.7606C1.3335 11.612 1.34897 11.5581 1.37802 11.5038C1.40707 11.4495 1.4497 11.4068 1.50402 11.3778C1.55834 11.3487 1.61222 11.3333 1.76081 11.3333H9.66683V9.76057C9.66683 9.61198 9.6823 9.5581 9.71135 9.50378C9.7404 9.44946 9.78304 9.40683 9.83736 9.37778C9.89168 9.34872 9.94556 9.33325 10.0941 9.33325H10.5728C10.7214 9.33325 10.7753 9.34872 10.8296 9.37778C10.884 9.40683 10.9266 9.44946 10.9556 9.50378C10.9847 9.5581 11.0002 9.61198 11.0002 9.76057V11.3333ZM5.00016 3.33325V1.76057C5.00016 1.61198 5.01563 1.5581 5.04469 1.50378C5.07374 1.44946 5.11637 1.40683 5.17069 1.37777C5.22501 1.34872 5.27889 1.33325 5.42748 1.33325H5.90618C6.05477 1.33325 6.10865 1.34872 6.16297 1.37777C6.21729 1.40683 6.25992 1.44946 6.28897 1.50378C6.31803 1.5581 6.3335 1.61198 6.3335 1.76057V3.33325H14.2395C14.3881 3.33325 14.442 3.34872 14.4963 3.37777C14.5506 3.40683 14.5933 3.44946 14.6223 3.50378C14.6514 3.5581 14.6668 3.61198 14.6668 3.76057V4.23927C14.6668 4.38786 14.6514 4.44174 14.6223 4.49606C14.5933 4.55038 14.5506 4.59301 14.4963 4.62206C14.442 4.65111 14.3881 4.66659 14.2395 4.66659H6.3335V6.23927C6.3335 6.38786 6.31803 6.44174 6.28897 6.49606C6.25992 6.55038 6.21729 6.59301 6.16297 6.62206C6.10865 6.65111 6.05477 6.66659 5.90618 6.66659H5.42748C5.27889 6.66659 5.22501 6.65111 5.17069 6.62206C5.11637 6.59301 5.07374 6.55038 5.04469 6.49606C5.01563 6.44174 5.00016 6.38786 5.00016 6.23927V4.66659H1.76081C1.61222 4.66659 1.55834 4.65111 1.50402 4.62206C1.4497 4.59301 1.40707 4.55038 1.37802 4.49606C1.34897 4.44174 1.3335 4.38786 1.3335 4.23927V3.76057C1.3335 3.61198 1.34897 3.5581 1.37802 3.50378C1.40707 3.44946 1.4497 3.40683 1.50402 3.37777C1.55834 3.34872 1.61222 3.33325 1.76081 3.33325H5.00016Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-reading': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M768 128H256a85.333333 85.333333 0 0 0-85.333333 85.333333v426.666667h512V64h85.333333v640a21.333333 21.333333 0 0 1-21.333333 21.333333H256a85.333333 85.333333 0 0 0-0.128 170.666667H832a21.333333 21.333333 0 0 0 21.333333-21.333333V341.333333h85.333334v597.333334a42.666667 42.666667 0 0 1-42.666667 42.666666H256c-94.293333 0-170.666667-76.16-170.666667-170.410666V213.248C85.333333 119.04 161.706667 42.666667 256 42.666667h469.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v42.666667z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M277.333333 768a21.333333 21.333333 0 0 0-21.333333 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h469.333334a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333h-469.333334z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-github': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-help': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m0 85.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m-21.333333-298.666666h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333zM343.466667 396.032c0.554667-4.778667 1.109333-8.746667 1.664-11.946667 8.32-46.293333 29.397333-80.341333 63.189333-102.144 26.453333-17.28 59.008-25.941333 97.621333-25.941333 50.730667 0 92.842667 12.288 126.378667 36.864 33.578667 24.533333 50.346667 60.928 50.346667 109.141333 0 29.568-7.253333 54.485333-21.888 74.752-8.533333 12.245333-24.917333 27.946667-49.152 47.061334l-23.893334 18.773333c-13.013333 10.24-21.632 22.186667-25.898666 35.84-1.152 3.712-2.176 10.624-3.072 20.736a21.333333 21.333333 0 0 1-21.248 19.498667h-47.786667a21.333333 21.333333 0 0 1-21.248-23.296c2.773333-29.696 5.717333-48.469333 8.832-56.362667 5.845333-14.677333 20.906667-31.573333 45.141333-50.688l24.533334-19.413333c8.106667-6.144 49.749333-35.456 49.749333-61.44 0-25.941333-4.522667-35.498667-17.578667-49.749334-13.013333-14.208-42.368-18.773333-68.864-18.773333-26.026667 0-48.256 6.869333-59.136 24.405333-5.034667 8.106667-9.173333 16.768-12.117333 25.6a89.472 89.472 0 0 0-3.114667 13.098667 21.333333 21.333333 0 0 1-21.034666 17.706667H364.672a21.333333 21.333333 0 0 1-21.205333-23.722667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-pricing': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M723.584 128c24.618667 0 48.213333 10.112 64.768 28.074667l170.965333 185.472c28.288 30.72 29.226667 76.373333 4.48 106.837333l-403.797333 457.685333a64 64 0 0 1-96 0l-397.824-450.986666a82.090667 82.090667 0 0 1-1.493333-113.493334l170.965333-185.514666C252.16 138.154667 275.754667 128 300.373333 128h423.168z m0 85.333333H300.373333c-1.024 0-1.834667 0.341333-2.048 0.597334L129.152 397.482667 512 831.488l382.848-433.92-169.216-183.637333a2.304 2.304 0 0 0-1.109333-0.512L723.584 213.333333z m-12.586667 202.794667a42.666667 42.666667 0 0 1 3.541334 60.202667l-170.666667 192a42.666667 42.666667 0 0 1-63.744 0l-170.666667-192a42.666667 42.666667 0 1 1 63.744-56.661334L512 575.744l138.794667-156.074667a42.666667 42.666667 0 0 1 60.202666-3.541333z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-translate': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            xmlns: 'http://www.w3.org/2000/svg',
+            viewBox: '0 0 20 20',
+            fill: 'currentColor'
+          },
+          [
+            h('path', {
+              d: 'M7.75 2.75a.75.75 0 0 0-1.5 0v1.258a32.987 32.987 0 0 0-3.599.278.75.75 0 1 0 .198 1.487A31.545 31.545 0 0 1 8.7 5.545 19.381 19.381 0 0 1 7 9.56a19.418 19.418 0 0 1-1.002-2.05.75.75 0 0 0-1.384.577 20.935 20.935 0 0 0 1.492 2.91 19.613 19.613 0 0 1-3.828 4.154.75.75 0 1 0 .945 1.164A21.116 21.116 0 0 0 7 12.331c.095.132.192.262.29.391a.75.75 0 0 0 1.194-.91c-.204-.266-.4-.538-.59-.815a20.888 20.888 0 0 0 2.333-5.332c.31.031.618.068.924.108a.75.75 0 0 0 .198-1.487 32.832 32.832 0 0 0-3.599-.278V2.75Z'
+            }),
+            h('path', {
+              'fill-rule': 'evenodd',
+              d: 'M13 8a.75.75 0 0 1 .671.415l4.25 8.5a.75.75 0 1 1-1.342.67L15.787 16h-5.573l-.793 1.585a.75.75 0 1 1-1.342-.67l4.25-8.5A.75.75 0 0 1 13 8Zm2.037 6.5L13 10.427 10.964 14.5h4.073Z',
+              'clip-rule': 'evenodd'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-user': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M15 13H9C6.23858 13 3 14.9314 3 18.4V21.1C3 21.597 3.44772 22 4 22H20C20.5523 22 21 21.597 21 21.1V18.4C21 14.9285 17.7614 13 15 13Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M7 6.99997C7 9.76139 9.23858 12 12 12C14.7614 12 17 9.76139 17 6.99997C17 4.23855 14.7614 1.99997 12 1.99997C9.23858 1.99997 7 4.23855 7 6.99997Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-question': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M12.7071 22.2009L17 18.5111H21.5C22.0523 18.5111 22.5 18.0539 22.5 17.4899V2.52112C22.5 1.95715 22.0523 1.49997 21.5 1.49997H2C1.44772 1.49997 1 1.95715 1 2.52112V17.4899C1 18.0539 1.44772 18.5111 2 18.5111H7L11.2929 22.2009C11.6834 22.5997 12.3166 22.5997 12.7071 22.2009ZM6.5 8.49997H7.5C8.05228 8.49997 8.5 8.94768 8.5 9.49997V10.5C8.5 11.0523 8.05228 11.5 7.5 11.5H6.5C5.94772 11.5 5.5 11.0523 5.5 10.5V9.49997C5.5 8.94768 5.94772 8.49997 6.5 8.49997ZM10.5 9.49997C10.5 8.94768 10.9477 8.49997 11.5 8.49997H12.5C13.0523 8.49997 13.5 8.94768 13.5 9.49997V10.5C13.5 11.0523 13.0523 11.5 12.5 11.5H11.5C10.9477 11.5 10.5 11.0523 10.5 10.5V9.49997ZM16.5 8.49997H17.5C18.0523 8.49997 18.5 8.94768 18.5 9.49997V10.5C18.5 11.0523 18.0523 11.5 17.5 11.5H16.5C15.9477 11.5 15.5 11.0523 15.5 10.5V9.49997C15.5 8.94768 15.9477 8.49997 16.5 8.49997Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-tokens': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M15.6 2.39996C12.288 2.39996 9.60002 5.08796 9.60002 8.39996C9.60002 9.11996 9.74402 9.79196 9.97202 10.428L2.47325 17.9267C2.42636 17.9736 2.40002 18.0372 2.40002 18.1035V21.1C2.40002 21.3761 2.62388 21.6 2.90002 21.6H4.30002C4.57617 21.6 4.80002 21.3761 4.80002 21.1V20.4H6.70003C6.97617 20.4 7.20002 20.1761 7.20002 19.9V18H8.40002L10.8 15.6H12L13.572 14.028C14.208 14.256 14.88 14.4 15.6 14.4C18.912 14.4 21.6 11.712 21.6 8.39996C21.6 5.08796 18.912 2.39996 15.6 2.39996ZM17.4 8.39996C16.404 8.39996 15.6 7.59596 15.6 6.59996C15.6 5.60396 16.404 4.79996 17.4 4.79996C18.396 4.79996 19.2 5.60396 19.2 6.59996C19.2 7.59596 18.396 8.39996 17.4 8.39996Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-user-stars': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M12 23C18.0751 23 23 18.0751 23 12C23 5.92484 18.0751 0.999969 12 0.999969C5.92487 0.999969 1 5.92484 1 12C1 18.0751 5.92487 23 12 23ZM8.5 10.5C7.67157 10.5 7 9.8284 7 8.99997C7 8.17154 7.67157 7.49997 8.5 7.49997C9.32843 7.49997 10 8.17154 10 8.99997C10 9.8284 9.32843 10.5 8.5 10.5ZM17 8.99997C17 9.8284 16.3284 10.5 15.5 10.5C14.6716 10.5 14 9.8284 14 8.99997C14 8.17154 14.6716 7.49997 15.5 7.49997C16.3284 7.49997 17 8.17154 17 8.99997ZM16.9779 13.4994C16.7521 16.0264 14.8169 18 12 18C9.18312 18 7.24789 16.0264 7.02213 13.4994C6.99756 13.2244 7.22386 13 7.5 13H16.5C16.7761 13 17.0024 13.2244 16.9779 13.4994Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-problems': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m0 85.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m-21.333333-298.666666h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333zM343.466667 396.032c0.554667-4.778667 1.109333-8.746667 1.664-11.946667 8.32-46.293333 29.397333-80.341333 63.189333-102.144 26.453333-17.28 59.008-25.941333 97.621333-25.941333 50.730667 0 92.842667 12.288 126.378667 36.864 33.578667 24.533333 50.346667 60.928 50.346667 109.141333 0 29.568-7.253333 54.485333-21.888 74.752-8.533333 12.245333-24.917333 27.946667-49.152 47.061334l-23.893334 18.773333c-13.013333 10.24-21.632 22.186667-25.898666 35.84-1.152 3.712-2.176 10.624-3.072 20.736a21.333333 21.333333 0 0 1-21.248 19.498667h-47.786667a21.333333 21.333333 0 0 1-21.248-23.296c2.773333-29.696 5.717333-48.469333 8.832-56.362667 5.845333-14.677333 20.906667-31.573333 45.141333-50.688l24.533334-19.413333c8.106667-6.144 49.749333-35.456 49.749333-61.44 0-25.941333-4.522667-35.498667-17.578667-49.749334-13.013333-14.208-42.368-18.773333-68.864-18.773333-26.026667 0-48.256 6.869333-59.136 24.405333-5.034667 8.106667-9.173333 16.768-12.117333 25.6a89.472 89.472 0 0 0-3.114667 13.098667 21.333333 21.333333 0 0 1-21.034666 17.706667H364.672a21.333333 21.333333 0 0 1-21.205333-23.722667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-quxiaoguanlian': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M544 298.688a32 32 0 0 1 32-32h320c41.216 0 74.688 33.408 74.688 74.624V640c0 41.216-33.472 74.688-74.688 74.688h-85.312a32 32 0 1 1 0-64H896a10.688 10.688 0 0 0 10.688-10.688V341.312A10.688 10.688 0 0 0 896 330.688H576a32 32 0 0 1-32-32zM53.312 341.312c0-41.216 33.472-74.624 74.688-74.624h106.688a32 32 0 1 1 0 64H128a10.688 10.688 0 0 0-10.688 10.624V640c0 5.888 4.8 10.688 10.688 10.688h320a32 32 0 1 1 0 64H128A74.688 74.688 0 0 1 53.312 640V341.312zM282.432 100.416a32 32 0 0 1 43.84 11.392l426.624 725.312a32 32 0 0 1-55.168 32.448L271.104 144.256a32 32 0 0 1 11.328-43.84zM650.688 490.688a32 32 0 0 1 32-32H768a32 32 0 1 1 0 64h-85.312a32 32 0 0 1-32-32zM224 490.688a32 32 0 0 1 32-32h85.312a32 32 0 1 1 0 64H256a32 32 0 0 1-32-32z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-migrate': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M896.128 113.792a42.666667 42.666667 0 0 1 42.24 36.864l0.426667 5.802667v711.509333a42.666667 42.666667 0 0 1-36.906667 42.24l-5.76 0.426667h-263.082667a21.333333 21.333333 0 0 1-20.906666-17.066667l-0.426667-4.266667v-42.666666a21.333333 21.333333 0 0 1 17.066667-20.906667l4.266666-0.426667h220.416V199.125333H281.941333l0.042667 192.170667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333V135.125333a21.333333 21.333333 0 0 1 17.066666-20.906666l4.266667-0.426667h678.144zM424.96 485.973333c6.272 0 12.373333 2.218667 17.152 6.272l178.858667 151.338667a26.538667 26.538667 0 0 1 0 40.533333l-178.858667 151.381334a26.538667 26.538667 0 0 1-43.690667-20.266667v-103.765333H135.168a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H398.506667l-0.042667-113.621333c0-14.677333 11.904-26.538667 26.538667-26.538667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-chat-record': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M11.3333 7.33334C11.3333 6.96515 11.6318 6.66667 12 6.66667H14.6667C15.0349 6.66667 15.3333 6.96515 15.3333 7.33334V12.6667C15.3333 13.0349 15.0349 13.3333 14.6667 13.3333H13.2761L12.4714 14.1381C12.2111 14.3984 11.7889 14.3984 11.5286 14.1381L10.7239 13.3333H7.33334C6.96515 13.3333 6.66667 13.0349 6.66667 12.6667V10C6.66667 9.63182 6.96515 9.33334 7.33334 9.33334H11.3333V7.33334ZM12.6667 8.00001V10C12.6667 10.3682 12.3682 10.6667 12 10.6667H8.00001V12H11C11.1768 12 11.3464 12.0702 11.4714 12.1953L12 12.7239L12.5286 12.1953C12.6536 12.0702 12.8232 12 13 12H14V8.00001H12.6667Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M1.33334 1.33333C0.965149 1.33333 0.666672 1.63181 0.666672 1.99999V10C0.666672 10.3682 0.965149 10.6667 1.33334 10.6667H2.72386L3.86193 11.8047C4.12228 12.0651 4.54439 12.0651 4.80474 11.8047L5.94281 10.6667H12C12.3682 10.6667 12.6667 10.3682 12.6667 10V1.99999C12.6667 1.63181 12.3682 1.33333 12 1.33333H1.33334ZM4.66667 5.99999C4.66667 6.36818 4.36819 6.66666 4.00001 6.66666C3.63182 6.66666 3.33334 6.36818 3.33334 5.99999C3.33334 5.6318 3.63182 5.33333 4.00001 5.33333C4.36819 5.33333 4.66667 5.6318 4.66667 5.99999ZM7.33334 5.99999C7.33334 6.36818 7.03486 6.66666 6.66667 6.66666C6.29848 6.66666 6 6.36818 6 5.99999C6 5.6318 6.29848 5.33333 6.66667 5.33333C7.03486 5.33333 7.33334 5.6318 7.33334 5.99999ZM10 5.99999C10 6.36818 9.70153 6.66666 9.33334 6.66666C8.96515 6.66666 8.66667 6.36818 8.66667 5.99999C8.66667 5.6318 8.96515 5.33333 9.33334 5.33333C9.70153 5.33333 10 5.6318 10 5.99999Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-history-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M18.6667 10.0001C18.6667 14.6025 14.9358 18.3334 10.3334 18.3334C7.68359 18.3334 5.32266 17.0967 3.79633 15.1689L5.12054 14.1563C6.3421 15.6864 8.22325 16.6667 10.3334 16.6667C14.0153 16.6667 17 13.682 17 10.0001C17 6.31818 14.0153 3.33341 10.3334 3.33341C7.03005 3.33341 4.28786 5.73596 3.75889 8.88897H4.3469C4.70187 8.88897 4.9136 9.28459 4.7167 9.57995L3.32493 11.6676C3.14901 11.9315 2.76125 11.9315 2.58533 11.6676L1.19356 9.57995C0.996651 9.28459 1.20838 8.88897 1.56336 8.88897H2.07347C2.61669 4.8119 6.10774 1.66675 10.3334 1.66675C14.9358 1.66675 18.6667 5.39771 18.6667 10.0001Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M10.8334 9.7223V7.11119C10.8334 6.86573 10.6344 6.66675 10.3889 6.66675H9.61115C9.36569 6.66675 9.16671 6.86573 9.16671 7.11119V10.9445C9.16671 11.19 9.36569 11.389 9.61115 11.389H13.1667C13.4122 11.389 13.6112 11.19 13.6112 10.9445V10.1667C13.6112 9.92129 13.4122 9.7223 13.1667 9.7223H10.8334Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-document-refresh': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334h256a85.333333 85.333333 0 0 1 85.333334 85.333334v256a85.333333 85.333333 0 0 1-85.333334 85.333333h-256a85.333333 85.333333 0 0 1-85.333333-85.333333V170.666667z m85.333333 0v256h256V170.666667h-256zM85.333333 597.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h256a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-256z m85.333334 0v256h256v-256H170.666667zM128 298.666667a213.333333 213.333333 0 0 1 213.333333-213.333334h85.333334v85.333334H341.333333a128 128 0 0 0-128 128h57.514667a12.8 12.8 0 0 1 9.728 21.12l-100.181333 116.906666a12.8 12.8 0 0 1-19.456 0l-100.181334-116.906666A12.8 12.8 0 0 1 70.485333 298.666667H128zM896 725.333333a213.333333 213.333333 0 0 1-213.333333 213.333334h-85.333334v-85.333334h85.333334a128 128 0 0 0 128-128v-21.333333h-57.514667a12.8 12.8 0 0 1-9.728-21.12l100.181333-116.906667a12.8 12.8 0 0 1 19.456 0l100.181334 116.906667a12.8 12.8 0 0 1-9.728 21.12H896v21.333333z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-export': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M791.04 554.24l-386.432-1.728a21.248 21.248 0 0 1-21.12-21.248L383.36 490.88c-0.064-11.776 9.408-21.376 21.12-21.44h0.192l394.112 1.728-97.664-98.112a21.44 21.44 0 0 1 0-30.208l30.08-30.144a21.12 21.12 0 0 1 29.952 0l165.12 165.952a42.88 42.88 0 0 1 0 60.288l-165.12 165.952a21.12 21.12 0 0 1-30.016 0l-30.016-30.144a21.44 21.44 0 0 1 0-30.208L791.04 554.24z m-132.672-383.552H170.24v682.624h488.128c11.712 0 21.184 9.6 21.184 21.376v42.624a21.248 21.248 0 0 1-21.248 21.376h-530.56A42.56 42.56 0 0 1 85.376 896V128c0-23.552 19.008-42.688 42.496-42.688h530.56c11.712 0 21.184 9.6 21.184 21.376v42.624a21.248 21.248 0 0 1-21.248 21.376z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-import': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M8.11532 8.65984L9.55945 10.0713C9.69264 10.2015 9.69264 10.4125 9.55945 10.5427L9.07714 11.0141C8.94395 11.1443 8.72801 11.1443 8.59482 11.0141L6.42439 8.89279L5.94207 8.42139C5.6757 8.16104 5.6757 7.73893 5.94207 7.47858L8.59482 4.88585C8.72801 4.75568 8.94395 4.75568 9.07714 4.88585L9.55945 5.35726C9.69264 5.48743 9.69264 5.69849 9.55945 5.82866L7.99017 7.36244L14.3241 7.33506C14.3251 7.33505 14.3261 7.33505 14.327 7.33506C14.5154 7.33582 14.6675 7.48567 14.6667 7.66977L14.664 8.30105C14.6632 8.48403 14.5117 8.63219 14.3245 8.633L8.11532 8.65984ZM10.5417 2.66665H2.69754V13.3333H10.5417C10.73 13.3333 10.8827 13.4826 10.8827 13.6666V14.3333C10.8827 14.5174 10.73 14.6666 10.5417 14.6666H2.01544C1.63873 14.6666 1.33334 14.3682 1.33334 14V1.99998C1.33334 1.63179 1.63873 1.33331 2.01544 1.33331H10.5417C10.73 1.33331 10.8827 1.48255 10.8827 1.66665V2.33331C10.8827 2.51741 10.73 2.66665 10.5417 2.66665Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-fitview': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M128 85.333333h192a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H170.666667v149.333333a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V128a42.666667 42.666667 0 0 1 42.666667-42.666667z m768 853.333334h-192a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H853.333333v-149.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V896a42.666667 42.666667 0 0 1-42.666667 42.666667zM85.333333 896v-192a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V853.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H128a42.666667 42.666667 0 0 1-42.666667-42.666667zM938.666667 128v192a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V170.666667h-149.333333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H896a42.666667 42.666667 0 0 1 42.666667 42.666667z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M512 512m-170.666667 0a170.666667 170.666667 0 1 0 341.333334 0 170.666667 170.666667 0 1 0-341.333334 0Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-magnify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M366.165333 593.749333a21.333333 21.333333 0 0 1 30.208 0l30.165334 30.165334a21.333333 21.333333 0 0 1 0 30.208l-170.752 170.666666H377.173333a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334H156.458667a42.538667 42.538667 0 0 1-42.666667-42.666667v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v113.493333l167.04-167.04z m500.992-480a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.165334a21.333333 21.333333 0 0 1 0-30.165333l170.709333-170.666667h-121.344a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h220.672z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-minify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M384.341333 597.205333a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.208a21.333333 21.333333 0 0 1 0-30.165334l170.709333-170.666666H163.669333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h220.672zM849.92 110.506667a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-170.709334 170.666667h121.344a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-220.672a42.538667 42.538667 0 0 1-42.666666-42.666666v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v113.493333l167.04-166.997333z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-play-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 14 14',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M2.63333 1.82346C2.81847 1.72056 3.04484 1.72611 3.22472 1.83795L10.8081 6.55299C10.9793 6.65945 11.0834 6.84677 11.0834 7.04838C11.0834 7.24999 10.9793 7.43731 10.8081 7.54376L3.22472 12.2588C3.04484 12.3707 2.81847 12.3762 2.63333 12.2733C2.44819 12.1704 2.33337 11.9752 2.33337 11.7634V2.33333C2.33337 2.12152 2.44819 1.92635 2.63333 1.82346ZM3.50004 3.38293V10.7138L9.39529 7.04838L3.50004 3.38293Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-save-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 14 14',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M1.16666 2.53734C1.16666 1.78025 1.7804 1.1665 2.53749 1.1665H11.4625C12.2196 1.1665 12.8333 1.78025 12.8333 2.53734V11.4623C12.8333 12.2194 12.2196 12.8332 11.4625 12.8332H2.53749C1.7804 12.8332 1.16666 12.2194 1.16666 11.4623V2.53734ZM2.53749 2.33317C2.42473 2.33317 2.33332 2.42458 2.33332 2.53734V11.4623C2.33332 11.5751 2.42473 11.6665 2.53749 11.6665H11.4625C11.5753 11.6665 11.6667 11.5751 11.6667 11.4623V2.53734C11.6667 2.42457 11.5753 2.33317 11.4625 2.33317H2.53749Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M3.79166 1.74984C3.79166 1.42767 4.05282 1.1665 4.37499 1.1665H9.33332C9.65549 1.1665 9.91666 1.42767 9.91666 1.74984V6.99984C9.91666 7.322 9.65549 7.58317 9.33332 7.58317H4.37499C4.05282 7.58317 3.79166 7.322 3.79166 6.99984V1.74984ZM4.95832 2.33317V6.4165H8.74999V2.33317H4.95832Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M7.58333 3.2085C7.9055 3.2085 8.16667 3.46966 8.16667 3.79183V4.9585C8.16667 5.28066 7.9055 5.54183 7.58333 5.54183C7.26117 5.54183 7 5.28066 7 4.9585V3.79183C7 3.46966 7.26117 3.2085 7.58333 3.2085Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M2.62415 1.74984C2.62415 1.42767 2.88531 1.1665 3.20748 1.1665H10.4996C10.8217 1.1665 11.0829 1.42767 11.0829 1.74984C11.0829 2.072 10.8217 2.33317 10.4996 2.33317H3.20748C2.88531 2.33317 2.62415 2.072 2.62415 1.74984Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-reference-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M121.216 714.368c-7.082667-17.493333-7.466667-83.413333-7.424-104.32 0.341333-142.72 34.048-256.426667 88.32-330.112C262.4 198.229333 351.701333 161.024 460.8 172.8c7.893333 0.853333 11.946667 7.338667 10.581333 16.981333l-7.381333 51.285334c-1.749333 12.202667-9.813333 12.885333-17.621333 12.202666-138.709333-11.946667-232.576 84.053333-245.76 296.704a165.632 165.632 0 0 1 83.754666-22.528c91.050667 0 164.906667 72.96 164.906667 162.944C449.28 780.373333 375.466667 853.333333 284.373333 853.333333c-82.858667 0-151.424-60.330667-163.157333-138.965333z m438.570667 0c-7.082667-17.493333-7.509333-83.413333-7.466667-104.32 0.426667-142.72 34.090667-256.426667 88.405333-330.112 60.202667-81.706667 149.504-118.912 258.645334-107.136 7.893333 0.853333 11.946667 7.338667 10.581333 16.981333l-7.381333 51.285334c-1.749333 12.202667-9.813333 12.885333-17.621334 12.202666-138.752-11.946667-232.576 84.053333-245.76 296.704a165.632 165.632 0 0 1 83.712-22.528c91.093333 0 164.906667 72.96 164.906667 162.944 0 90.026667-73.813333 162.944-164.906667 162.944-82.773333 0-151.381333-60.330667-163.114666-138.965333z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-access': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M490.368 48.554667a42.666667 42.666667 0 0 1 43.264 0l362.666667 213.333333A42.666667 42.666667 0 0 1 917.333333 298.666667v426.666666a42.666667 42.666667 0 0 1-21.034666 36.778667l-362.666667 213.333333a42.666667 42.666667 0 0 1-43.264 0l-362.666667-213.333333A42.666667 42.666667 0 0 1 106.666667 725.333333V298.666667a42.666667 42.666667 0 0 1 21.034666-36.778667l362.666667-213.333333zM192 323.072v377.856L512 889.173333l320-188.245333V323.072L512 134.826667 192 323.072z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M705.194667 441.472a42.666667 42.666667 0 1 0-45.226667-72.362667l-148.096 92.586667L363.946667 369.066667a42.666667 42.666667 0 1 0-45.312 72.362666L469.333333 535.722667V704a42.666667 42.666667 0 1 0 85.333334 0v-168.448l150.528-94.08z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-access-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M533.632 48.554667a42.666667 42.666667 0 0 0-43.264 0l-362.666667 213.333333A42.666667 42.666667 0 0 0 106.666667 298.666667v426.666666a42.666667 42.666667 0 0 0 21.034666 36.778667l362.666667 213.333333a42.666667 42.666667 0 0 0 43.264 0l362.666667-213.333333A42.666667 42.666667 0 0 0 917.333333 725.333333V298.666667a42.666667 42.666667 0 0 0-21.034666-36.778667l-362.666667-213.333333z m185.130667 334.08a42.666667 42.666667 0 0 1-13.568 58.837333L554.666667 535.552V704a42.666667 42.666667 0 1 1-85.333334 0v-168.277333l-150.613333-94.293334a42.666667 42.666667 0 0 1 45.226667-72.32l147.925333 92.586667 148.053333-92.586667a42.666667 42.666667 0 0 1 58.837334 13.568z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-video-play': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m469.333333-384c0 259.2-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M686.890667 539.776l-253.141334 159.274667a32.298667 32.298667 0 0 1-44.8-10.453334 32.896 32.896 0 0 1-4.949333-17.322666V352.768a32.64 32.64 0 0 1 32.512-32.768c6.101333 0 12.074667 1.706667 17.28 4.992l253.098667 159.232a32.853333 32.853333 0 0 1 0 55.552z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-video-stop': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M981.333333 512c0 259.2-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333z m-85.333333 0a384 384 0 1 0-768 0 384 384 0 0 0 768 0zM384 341.333333h256c23.466667 0 42.666667 19.072 42.666667 42.666667v256c0 23.552-19.2 42.666667-42.666667 42.666667H384c-23.466667 0-42.666667-19.114667-42.666667-42.666667V384c0-23.594667 19.2-42.666667 42.666667-42.666667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-video-pause': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M405.333333 341.333333a21.333333 21.333333 0 0 0-21.333333 21.333334v298.666666a21.333333 21.333333 0 0 0 21.333333 21.333334h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333334v-298.666666a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667zM576 341.333333a21.333333 21.333333 0 0 0-21.333333 21.333334v298.666666a21.333333 21.333333 0 0 0 21.333333 21.333334h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333334v-298.666666a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M512 42.666667C252.8 42.666667 42.666667 252.8 42.666667 512s210.133333 469.333333 469.333333 469.333333 469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667zM128 512a384 384 0 1 1 768 0 384 384 0 0 1-768 0z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-invisible': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M512 640c-28.032 0-55.466667-2.218667-82.090667-6.4l-21.248 79.274667a21.333333 21.333333 0 0 1-26.154666 15.061333L341.333333 716.885333a21.333333 21.333333 0 0 1-15.061333-26.112l20.821333-77.653333a473.770667 473.770667 0 0 1-97.152-45.653333l-67.84 67.84a21.333333 21.333333 0 0 1-30.122666 0l-30.165334-30.208a21.333333 21.333333 0 0 1 0-30.165334l59.733334-59.733333A386.389333 386.389333 0 0 1 104.789333 416.426667a37.76 37.76 0 0 1 7.594667-45.397334c10.496-9.514667 17.877333-16 24.32-22.442666a170.24 170.24 0 0 0 1.834667-1.92c9.301333-9.6 25.173333-6.016 30.634666 6.186666C222.336 471.936 349.568 554.666667 512 554.666667c155.648 0 285.866667-80.512 338.090667-190.976 1.365333-2.858667 2.901333-6.485333 4.437333-10.325334a18.346667 18.346667 0 0 1 29.866667-6.613333l27.392 27.434667a36.565333 36.565333 0 0 1 6.997333 42.666666c-1.792 3.456-3.541333 6.698667-5.034667 9.301334a390.4 390.4 0 0 1-76.928 94.293333l54.442667 54.485333a21.333333 21.333333 0 0 1 0 30.165334l-30.165333 30.165333a21.333333 21.333333 0 0 1-30.165334 0l-63.658666-63.658667a475.306667 475.306667 0 0 1-90.282667 41.514667l20.778667 77.653333a21.333333 21.333333 0 0 1-15.061334 26.112l-41.216 11.093334a21.333333 21.333333 0 0 1-26.154666-15.104l-21.248-79.317334c-26.581333 4.266667-54.058667 6.442667-82.090667 6.442667z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-beautify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M739.6864 689.92l4.2496 3.584 136.4992 135.936a34.1504 34.1504 0 0 1-43.9296 51.968l-4.1984-3.584-136.5504-135.936a34.1504 34.1504 0 0 1 43.9296-51.968zM663.4496 151.552a34.1504 34.1504 0 0 1 51.2512 30.464l-5.9392 216.6272 156.4672 146.1248a34.1504 34.1504 0 0 1-8.6528 55.808l-4.8128 1.792-202.8032 61.0816-87.4496 197.12a34.1504 34.1504 0 0 1-56.32 9.216l-3.2768-4.096-119.5008-178.432-209.9712-24.064a34.1504 34.1504 0 0 1-26.1632-50.176l2.7648-4.3008 129.28-171.7248-42.5472-212.3776a34.1504 34.1504 0 0 1 40.448-40.1408l4.6592 1.3312 198.912 72.3456z m-18.6368 89.7536l-144.5376 83.968a34.1504 34.1504 0 0 1-28.8256 2.56L314.5728 270.592l33.792 167.8848c1.4848 7.68 0.3584 15.5136-3.1744 22.3232l-3.072 4.9152-102.656 136.2944 166.4 19.1488c8.2944 0.9216 15.872 4.864 21.4016 10.9568l3.072 3.9424 93.8496 140.032 68.7104-154.7776a34.1504 34.1504 0 0 1 16.7936-17.0496l4.608-1.792 160.9216-48.4864-124.2624-116.0192a34.1504 34.1504 0 0 1-10.4448-20.0704l-0.3584-5.7856 4.6592-170.9056z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-retract': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M5.44661 0.747985C5.55509 0.639506 5.73097 0.639506 5.83945 0.747985L8.00004 2.90858L10.1606 0.748004C10.2691 0.639525 10.445 0.639525 10.5534 0.748004L11.1034 1.29798C11.2119 1.40645 11.2119 1.58233 11.1034 1.69081L8.7488 4.04544L8.74644 4.04782L8.19647 4.59779C8.16892 4.62534 8.13703 4.64589 8.10299 4.65945C8.003 4.6993 7.88453 4.67875 7.80359 4.59781L7.25362 4.04784L7.25003 4.04419L4.89664 1.69079C4.78816 1.58232 4.78816 1.40644 4.89664 1.29796L5.44661 0.747985Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M1.99999 5.82774C1.63181 5.82774 1.33333 6.12622 1.33333 6.49441V9.16107C1.33333 9.52926 1.63181 9.82774 2 9.82774H14C14.3682 9.82774 14.6667 9.52926 14.6667 9.16107V6.49441C14.6667 6.12622 14.3682 5.82774 14 5.82774H1.99999ZM13.3333 7.16108V8.49441H2.66666V7.16108H13.3333Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M10.1605 14.9075C10.269 15.016 10.4449 15.016 10.5534 14.9075L11.1033 14.3575C11.2118 14.249 11.2118 14.0732 11.1033 13.9647L8.75 11.6113L8.74637 11.6076L8.1964 11.0577C8.11546 10.9767 7.99699 10.9562 7.897 10.996C7.86296 11.0096 7.83107 11.0301 7.80352 11.0577L7.25354 11.6077L7.25117 11.6101L4.89657 13.9647C4.78809 14.0731 4.78809 14.249 4.89657 14.3575L5.44654 14.9075C5.55502 15.016 5.7309 15.016 5.83938 14.9075L7.99995 12.7469L10.1605 14.9075Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-extend': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M10.5534 5.07974C10.4449 5.18822 10.269 5.18822 10.1605 5.07974L7.99992 2.91915L5.83935 5.07972C5.73087 5.1882 5.555 5.1882 5.44652 5.07972L4.89654 4.52975C4.78807 4.42127 4.78807 4.24539 4.89654 4.13691L7.25117 1.78229L7.25352 1.77991L7.80349 1.22994C7.83019 1.20324 7.86098 1.18311 7.89384 1.16955C7.99448 1.12801 8.11459 1.14813 8.19638 1.22992L8.74635 1.77989L8.74998 1.78359L11.1033 4.13693C11.2118 4.24541 11.2118 4.42129 11.1033 4.52977L10.5534 5.07974Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M5.83943 10.9202C5.73095 10.8118 5.55507 10.8118 5.44659 10.9202L4.89662 11.4702C4.78814 11.5787 4.78814 11.7546 4.89662 11.863L7.24997 14.2164L7.25359 14.2201L7.80357 14.7701C7.8862 14.8527 8.00795 14.8724 8.10922 14.8291C8.14091 14.8156 8.17059 14.7959 8.19645 14.77L8.74642 14.2201L8.74873 14.2177L11.1034 11.8631C11.2119 11.7546 11.2119 11.5787 11.1034 11.4702L10.5534 10.9202C10.4449 10.8118 10.2691 10.8118 10.1606 10.9202L8.00002 13.0808L5.83943 10.9202Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M2.00004 6C1.63185 6 1.33337 6.29848 1.33337 6.66667V9.33333C1.33337 9.70152 1.63185 10 2.00004 10H14C14.3682 10 14.6667 9.70152 14.6667 9.33333V6.66667C14.6667 6.29848 14.3682 6 14 6H2.00004ZM13.3334 7.33333V8.66667H2.66671V7.33333H13.3334Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-close': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M7.96141 6.98572L12.4398 2.50738C12.5699 2.3772 12.781 2.3772 12.9112 2.50738L13.3826 2.97878C13.5127 3.10895 13.5127 3.32001 13.3826 3.45018L8.90422 7.92853L13.3826 12.4069C13.5127 12.537 13.5127 12.7481 13.3826 12.8783L12.9112 13.3497C12.781 13.4799 12.5699 13.4799 12.4398 13.3497L7.96141 8.87134L3.48307 13.3497C3.35289 13.4799 3.14184 13.4799 3.01166 13.3497L2.54026 12.8783C2.41008 12.7481 2.41008 12.537 2.54026 12.4069L7.0186 7.92853L2.54026 3.45018C2.41008 3.32001 2.41008 3.10895 2.54026 2.97878L3.01166 2.50738C3.14184 2.3772 3.35289 2.3772 3.48307 2.50738L7.96141 6.98572Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-add-application': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M3.33333 2.00002H10.6667V3.67969C10.6667 3.76809 10.7018 3.85288 10.7643 3.91539C10.8268 3.9779 10.9116 4.01302 11 4.01302H12.6667V8.66669H14V3.27702C14.0001 3.10027 13.9299 2.93074 13.805 2.80569L11.862 0.86202C11.8001 0.800071 11.7265 0.750933 11.6456 0.717417C11.5647 0.6839 11.4779 0.666662 11.3903 0.666687H2.66667C2.48986 0.666687 2.32029 0.736925 2.19526 0.861949C2.07024 0.986973 2 1.15654 2 1.33335V14.6667C2 14.8435 2.07024 15.0131 2.19526 15.1381C2.32029 15.2631 2.48986 15.3334 2.66667 15.3334H8V14H3.33333V2.00002Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M11.6667 10C11.4826 10 11.3333 10.1492 11.3333 10.3333V12H9.66668C9.48258 12 9.33334 12.1492 9.33334 12.3333V13C9.33334 13.1841 9.48258 13.3333 9.66668 13.3333H11.3333V15C11.3333 15.1841 11.4826 15.3333 11.6667 15.3333H12.3333C12.5174 15.3333 12.6667 15.1841 12.6667 15V13.3333H14.3333C14.5174 13.3333 14.6667 13.1841 14.6667 13V12.3333C14.6667 12.1492 14.5174 12 14.3333 12H12.6667V10.3333C12.6667 10.1492 12.5174 10 12.3333 10H11.6667Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..fb23317
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,56 @@
+import { type App } from 'vue'
+import AppIcon from './icons/AppIcon.vue'
+import AppAvatar from './app-avatar/index.vue'
+import LoginLayout from './login-layout/index.vue'
+import LoginContainer from './login-container/index.vue'
+import LayoutContainer from './layout-container/index.vue'
+import TagsInput from './tags-input/index.vue'
+import CardBox from './card-box/index.vue'
+import CardAdd from './card-add/index.vue'
+import BackButton from './back-button/index.vue'
+import AppTable from './app-table/index.vue'
+import ReadWrite from './read-write/index.vue'
+import TagEllipsis from './tag-ellipsis/index.vue'
+import CommonList from './common-list/index.vue'
+import dynamicsForm from './dynamics-form'
+import CardCheckbox from './card-checkbox/index.vue'
+import AiChat from './ai-chat/index.vue'
+import InfiniteScroll from './infinite-scroll/index.vue'
+import AutoTooltip from './auto-tooltip/index.vue'
+import MdEditor from './markdown/MdEditor.vue'
+import MdPreview from './markdown/MdPreview.vue'
+import MdEditorMagnify from './markdown/MdEditorMagnify.vue'
+import LogoFull from './logo/LogoFull.vue'
+import LogoIcon from './logo/LogoIcon.vue'
+import SendIcon from './logo/SendIcon.vue'
+import CodemirrorEditor from './codemirror-editor/index.vue'
+
+export default {
+  install(app: App) {
+    app.component(AppIcon.name, AppIcon)
+    app.component(AppAvatar.name, AppAvatar)
+    app.component(LoginLayout.name, LoginLayout)
+    app.component(LoginContainer.name, LoginContainer)
+    app.component(LayoutContainer.name, LayoutContainer)
+    app.component(TagsInput.name, TagsInput)
+    app.component(CardBox.name, CardBox)
+    app.component(CardAdd.name, CardAdd)
+    app.component(BackButton.name, BackButton)
+    app.component(AppTable.name, AppTable)
+    app.component(ReadWrite.name, ReadWrite)
+    app.component(TagEllipsis.name, TagEllipsis)
+    app.component(CommonList.name, CommonList)
+    app.use(dynamicsForm)
+    app.component(CardCheckbox.name, CardCheckbox)
+    app.component(AiChat.name, AiChat)
+    app.component(InfiniteScroll.name, InfiniteScroll)
+    app.component(AutoTooltip.name, AutoTooltip)
+    app.component(MdPreview.name, MdPreview)
+    app.component(MdEditor.name, MdEditor)
+    app.component(LogoFull.name, LogoFull)
+    app.component(LogoIcon.name, LogoIcon)
+    app.component(SendIcon.name, SendIcon)
+    app.component(CodemirrorEditor.name, CodemirrorEditor)
+    app.component(MdEditorMagnify.name, MdEditorMagnify)
+  }
+}
diff --git a/src/components/infinite-scroll/index.vue b/src/components/infinite-scroll/index.vue
new file mode 100644
index 0000000..c1a472e
--- /dev/null
+++ b/src/components/infinite-scroll/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
+    <slot />
+  </div>
+  <div style="padding: 16px 10px">
+    <el-divider v-if="size > 0 && loading">
+      <el-text type="info"> 加载中...</el-text>
+    </el-divider>
+    <el-divider v-if="noMore">
+      <el-text type="info"> 到底啦！</el-text>
+    </el-divider>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+defineOptions({ name: 'InfiniteScroll' })
+const props = defineProps({
+  /**
+   * 对象数量
+   */
+  size: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 总数
+   */
+  total: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 总数
+   */
+  page_size: {
+    type: Number,
+    default: 0
+  },
+  current_page: {
+    type: Number,
+    default: 0
+  },
+  loading: Boolean
+})
+
+const emit = defineEmits(['update:current_page', 'load'])
+const current = ref(props.current_page)
+
+watch(
+  () => props.current_page,
+  (val) => {
+    if (val === 1) {
+      current.value = 1
+    }
+  }
+)
+
+const noMore = computed(
+  () =>
+    props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading
+)
+const disabledScroll = computed(() => props.size > 0 && (props.loading || noMore.value))
+
+function loadDataset() {
+  if (props.total > props.page_size) {
+    current.value += 1
+    emit('update:current_page', current.value)
+    emit('load')
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/layout-container/index.vue b/src/components/layout-container/index.vue
new file mode 100644
index 0000000..ec5d8c3
--- /dev/null
+++ b/src/components/layout-container/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="content-container border-r-4">
+    <div class="content-container__header flex align-center w-full" v-if="slots.header || header">
+      <slot name="backButton">
+        <back-button :to="backTo" v-if="showBack"></back-button>
+      </slot>
+      <slot name="header">
+        <h4>{{ header }}</h4>
+      </slot>
+    </div>
+    <el-scrollbar>
+      <div class="content-container__main">
+        <slot></slot>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+defineOptions({ name: 'LayoutContainer' })
+const slots = useSlots()
+const props = defineProps({
+  header: String || null,
+  backTo: String
+})
+const showBack = computed(() => {
+  const { backTo } = props
+  return backTo
+})
+</script>
+
+<style lang="scss" scope>
+.content-container {
+  transition: 0.3s;
+  padding: 0 var(--app-view-padding) var(--app-view-padding);
+  .content-container__header {
+    box-sizing: border-box;
+    padding: 16px 0;
+    flex-wrap: wrap;
+  }
+  .content-container__main {
+    background-color: var(--app-view-bg-color);
+    box-sizing: border-box;
+    min-width: 847px;
+  }
+}
+</style>
diff --git a/src/components/loading/DownloadLoading.vue b/src/components/loading/DownloadLoading.vue
new file mode 100644
index 0000000..83332c8
--- /dev/null
+++ b/src/components/loading/DownloadLoading.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="loading-container loader">
+    <div class="download-loading">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.loading-container {
+  display: -webkit-flex; /*safari弹性布局*/
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+@-webkit-keyframes loader {
+  0% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.download-loading {
+  position: relative;
+}
+.download-loading div {
+  width: 5px;
+  height: 12px;
+  background: var(--el-color-info);
+  position: absolute;
+  border-radius: 2px;
+  margin: 0 auto;
+}
+.download-loading div:nth-child(1) {
+  top: -20px;
+  left: 0;
+  -webkit-animation: loader 1s -0.8s infinite ease-in-out;
+}
+.download-loading div:nth-child(2) {
+  top: -13px;
+  left: 13px;
+  -webkit-transform: rotate(45deg);
+  -webkit-animation: loader 1s -0.6s infinite ease-in-out;
+}
+.download-loading div:nth-child(3) {
+  top: 0px;
+  left: 20px;
+  -webkit-transform: rotate(90deg);
+  -webkit-animation: loader 1s -0.5s infinite ease-in-out;
+}
+.download-loading div:nth-child(4) {
+  top: 13px;
+  left: 13px;
+  -webkit-transform: rotate(-45deg);
+  -webkit-animation: loader 1s -0.4s infinite ease-in-out;
+}
+.download-loading div:nth-child(5) {
+  top: 20px;
+  left: 0px;
+  -webkit-transform: rotate(0deg);
+  -webkit-animation: loader 1s -0.3s infinite ease-in-out;
+}
+.download-loading div:nth-child(6) {
+  top: 13px;
+  left: -13px;
+  -webkit-transform: rotate(45deg);
+  -webkit-animation: loader 1s -0.2s infinite ease-in-out;
+}
+.download-loading div:nth-child(7) {
+  top: 0px;
+  left: -20px;
+  -webkit-transform: rotate(90deg);
+  -webkit-animation: loader 1s -0.1s infinite ease-in-out;
+}
+.download-loading div:nth-child(8) {
+  top: -13px;
+  left: -13px;
+  -webkit-transform: rotate(-45deg);
+  -webkit-animation: loader 1s 0s infinite ease-in-out;
+}
+</style>
diff --git a/src/components/login-container/index.vue b/src/components/login-container/index.vue
new file mode 100644
index 0000000..0714533
--- /dev/null
+++ b/src/components/login-container/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="login-form-container">
+    <div class="login-title">
+      <div class="logo text-center">
+        <LogoFull height="45px" />
+      </div>
+      <div class="sub-title text-center" v-if="subTitle">
+        <el-text type="info">{{ subTitle }}</el-text>
+      </div>
+    </div>
+    <el-card class="login-card">
+      <slot></slot>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'LoginContainer' })
+defineProps({
+  title: String,
+  subTitle: String
+})
+</script>
+<style lang="scss" scope>
+.login-form-container {
+  width: 480px;
+
+  .login-title {
+    margin-bottom: 32px;
+    .sub-title {
+      font-size: 16px;
+    }
+  }
+  .login-card {
+    border-radius: 8px;
+    padding: 18px;
+  }
+}
+</style>
diff --git a/src/components/login-layout/index.vue b/src/components/login-layout/index.vue
new file mode 100644
index 0000000..9d9b87d
--- /dev/null
+++ b/src/components/login-layout/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="login-warp flex-center">
+    <div class="login-container w-full h-full">
+      <el-row class="container w-full h-full">
+        <el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
+          <div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
+          <slot></slot>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getThemeImg } from '@/utils/theme'
+import useStore from '@/stores'
+import { request } from '@/request'
+defineOptions({ name: 'LoginLayout' })
+const { user } = useStore()
+
+const fileURL = computed(() => {
+  if (user.themeInfo?.loginImage) {
+    if (typeof user.themeInfo?.loginImage === 'string') {
+      return user.themeInfo?.loginImage
+    } else {
+      return URL.createObjectURL(user.themeInfo?.loginImage)
+    }
+  } else {
+    return ''
+  }
+})
+
+const loginImage = computed(() => {
+  if (user.themeInfo?.loginImage) {
+    return `${fileURL.value}`
+  } else {
+    return new URL(`../../assets/theme/${getThemeImg(user.themeInfo?.theme)}.jpg`, import.meta.url)
+      .href
+  }
+})
+</script>
+<style lang="scss" scope>
+.login-warp {
+  height: 100vh;
+
+  .login-image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/logo/LogoFull.vue b/src/components/logo/LogoFull.vue
new file mode 100644
index 0000000..0c67339
--- /dev/null
+++ b/src/components/logo/LogoFull.vue
@@ -0,0 +1,95 @@
+<template>
+  <img v-if="user.themeInfo?.loginLogo" :src="fileURL" alt="" height="45px" class="mr-8" />
+  <template v-else>
+    <svg
+      v-if="!isDefaultTheme"
+      viewBox="0 0 122 36"
+      xmlns="http://www.w3.org/2000/svg"
+      :height="height"
+      :class="!isDefaultTheme ? 'custom-logo-color' : ''"
+    >
+      <g clip-path="url(#clip0_5682_1471)" fill-rule="evenodd">
+        <path
+          d="M75.3094 19.0805V27.05H71.8274L71.8109 26.2436C70.5933 26.8762 69.4033 27.1925 68.2412 27.1923H67.8972C66.7033 27.1923 65.7546 26.7337 65.051 25.8166C64.5855 25.1007 64.342 24.2631 64.3513 23.4092V23.3143C64.3513 21.7489 64.9008 20.7092 65.9997 20.1953C66.4505 19.8949 67.5929 19.7447 69.4271 19.7447H71.3008V19.3058C71.3008 18.4045 71.1703 17.8867 70.9094 17.7523C70.6249 17.5388 70.1228 17.4321 69.4033 17.4321H65.6678L65.7312 14.2396L70.032 14.1233C72.5857 14.1233 74.1669 14.7558 74.7758 16.0208C75.1315 16.756 75.3094 17.7759 75.3094 19.0805ZM68.6032 22.3901C68.4844 22.5315 68.3597 22.9902 68.3597 23.3143C68.3597 24.0259 68.7234 24.3817 69.4508 24.3817C69.8855 24.3817 70.5022 24.2038 71.3008 23.848V22.1112C71.3008 22.1112 69.0361 21.875 68.6032 22.3901Z"
+          fill="currentColor"
+        />
+        <path
+          d="M56.6308 27.3317L55.4162 15.1815L52.0028 27.3317H48.028L44.6928 15.1815L43.4348 27.3317L37.9399 27.2849L40.6207 9.35034H47.6212L50.0211 17.8845L52.4444 9.35034H59.281L62.0087 27.3317H56.6308Z"
+          fill="currentColor"
+        />
+        <path
+          d="M85.3943 26.9654L83.5118 23.1105L81.6291 26.9654H77.2017L80.831 20.5778L77.3644 14.6084H81.6525L83.5118 18.2543L85.313 14.6084H89.6009L86.1576 20.5778L89.7637 26.9654H85.3943Z"
+          fill="currentColor"
+        />
+        <path
+          d="M101.114 26.9656C101.029 26.8419 96.8966 20.1336 96.8966 20.1336L95.5396 22.2226V26.9656H90.9727V9.11621H95.5396V16.3526L99.7128 9.17639H104.477L99.514 17.1079L105.855 26.9656H101.114Z"
+          fill="currentColor"
+        />
+        <path
+          d="M121.036 22.145C121.036 24.745 119.74 27.1282 115.097 27.1282H107.032V9.02689L113.203 8.90869C113.203 8.90869 116.858 8.74751 118.706 10.153C120.068 11.1885 120.515 13.0021 120.384 14.5197C120.254 16.0373 119.553 17.0129 118.405 17.727C119.979 18.354 121.036 19.5451 121.036 22.145ZM114.228 16.3325C115.766 16.3325 116.62 15.5559 116.62 14.45C116.62 13.2735 115.833 12.5837 114.228 12.5837L111.576 12.5906V16.3325H114.228ZM114.365 23.5374C116.497 23.5374 117.022 22.393 117.022 21.6316C117.022 20.4308 116.17 19.563 114.752 19.563H111.576V23.5374H114.365Z"
+          fill="currentColor"
+        />
+        <path
+          d="M17.4213 26.7354H12.8296L11.1277 28.4372C11.028 28.5369 10.9601 28.6639 10.9326 28.8022C10.9051 28.9405 10.9193 29.0838 10.9732 29.2141C11.0272 29.3443 11.1185 29.4557 11.2358 29.534C11.353 29.6123 11.4908 29.6541 11.6318 29.6541H18.6192C18.7602 29.6541 18.898 29.6123 19.0153 29.534C19.1325 29.4557 19.2239 29.3443 19.2778 29.2141C19.3318 29.0838 19.3459 28.9405 19.3184 28.8022C19.2909 28.6639 19.223 28.5369 19.1233 28.4372L17.4213 26.7354Z"
+          fill="currentColor"
+        />
+        <path
+          d="M30.04 13.3823H29.1348V19.7499H30.04C30.1305 19.7499 30.2201 19.732 30.3037 19.6974C30.3873 19.6628 30.4633 19.612 30.5273 19.548C30.5913 19.484 30.642 19.4081 30.6767 19.3244C30.7113 19.2408 30.7291 19.1512 30.7291 19.0607V14.0715C30.7291 13.8887 30.6565 13.7134 30.5273 13.5842C30.398 13.4549 30.2227 13.3823 30.04 13.3823Z"
+          fill="currentColor"
+        />
+        <path
+          d="M1.92296 13.3823H1.01776C0.834985 13.3823 0.659698 13.4549 0.530458 13.5842C0.401219 13.7134 0.328613 13.8887 0.328613 14.0715V19.0607C0.328611 19.1512 0.346435 19.2408 0.381067 19.3244C0.415699 19.4081 0.466461 19.484 0.530455 19.548C0.594448 19.612 0.670419 19.6628 0.754031 19.6974C0.837643 19.732 0.927258 19.7499 1.01776 19.7499H1.92296V13.3823Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19.0238 14.2251C18.682 14.2251 18.3541 14.3609 18.1124 14.6026C17.8707 14.8443 17.7349 15.1722 17.7349 15.514V16.4382C17.7349 16.7801 17.8707 17.108 18.1124 17.3497C18.3541 17.5914 18.682 17.7272 19.0239 17.7272C19.3657 17.7272 19.6936 17.5914 19.9353 17.3497C20.1771 17.108 20.3129 16.7801 20.3129 16.4382V15.5141C20.3129 15.3448 20.2796 15.1772 20.2148 15.0208C20.15 14.8644 20.055 14.7223 19.9353 14.6026C19.8156 14.4829 19.6735 14.388 19.5171 14.3232C19.3607 14.2584 19.1931 14.2251 19.0238 14.2251Z"
+          fill="currentColor"
+        />
+        <path
+          d="M12.3012 14.2251C11.9593 14.2251 11.6315 14.3609 11.3897 14.6026C11.148 14.8443 11.0122 15.1722 11.0122 15.514V16.4382C11.0122 16.7801 11.148 17.108 11.3897 17.3497C11.6315 17.5914 11.9593 17.7272 12.3012 17.7272C12.6431 17.7272 12.9709 17.5914 13.2127 17.3497C13.4544 17.108 13.5902 16.7801 13.5902 16.4382V15.5141C13.5902 15.3448 13.5569 15.1772 13.4921 15.0208C13.4273 14.8644 13.3324 14.7223 13.2127 14.6026C13.093 14.4829 12.9509 14.388 12.7945 14.3232C12.6381 14.2584 12.4704 14.2251 12.3012 14.2251Z"
+          fill="currentColor"
+        />
+        <path
+          d="M23.3607 6.91333H7.69709C6.3139 6.91489 4.98782 7.46505 4.00976 8.44311C3.0317 9.42117 2.48154 10.7473 2.47998 12.1304V20.9612C2.48154 22.3444 3.03169 23.6705 4.00975 24.6486C4.98781 25.6266 6.3139 26.1768 7.69709 26.1784H23.3607C24.7439 26.1768 26.07 25.6267 27.0481 24.6486C28.0262 23.6705 28.5764 22.3444 28.5779 20.9612V12.1304C28.5763 10.7472 28.0262 9.42115 27.0481 8.44309C26.07 7.46503 24.7439 6.91487 23.3607 6.91333ZM23.7988 20.9085C23.7988 21.1577 23.6998 21.3968 23.5235 21.573C23.3473 21.7492 23.1083 21.8482 22.859 21.8482H15.2189C14.0629 21.8482 12.9263 22.1453 11.9181 22.711L9.355 24.1492V21.8483H8.19882C7.94958 21.8483 7.71055 21.7493 7.53432 21.573C7.35808 21.3968 7.25907 21.1578 7.25906 20.9085V11.547C7.25907 11.2978 7.35808 11.0588 7.53432 10.8825C7.71056 10.7063 7.94958 10.6073 8.19882 10.6073H22.859C23.1082 10.6073 23.3472 10.7063 23.5235 10.8825C23.6997 11.0588 23.7987 11.2978 23.7987 11.5471L23.7988 20.9085Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+    <img v-else src="@/assets/logo/MaxKB-logo.svg" :height="height" />
+  </template>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import useStore from '@/stores'
+defineOptions({ name: 'LogoFull' })
+
+defineProps({
+  height: {
+    type: String,
+    default: '36px'
+  }
+})
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const fileURL = computed(() => {
+  if (user.themeInfo?.loginLogo) {
+    if (typeof user.themeInfo?.loginLogo === 'string') {
+      return user.themeInfo?.loginLogo
+    } else {
+      return URL.createObjectURL(user.themeInfo?.loginLogo)
+    }
+  } else {
+    return ''
+  }
+})
+</script>
+<style lang="scss" scoped>
+.custom-logo-color {
+  path {
+    fill: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/components/logo/LogoIcon.vue b/src/components/logo/LogoIcon.vue
new file mode 100644
index 0000000..51d47db
--- /dev/null
+++ b/src/components/logo/LogoIcon.vue
@@ -0,0 +1,59 @@
+<template>
+  <svg
+    v-if="!isDefaultTheme"
+    :class="!isDefaultTheme ? 'custom-logo-color' : ''"
+    :height="height"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 232.4409 232.4409"
+  >
+    <title>MaxKB</title>
+    <path
+      class="cls-1"
+      d="M128.4532,177H98.7785L87.78,187.9985a4.6069,4.6069,0,0,0,3.2576,7.8644h45.1569a4.6069,4.6069,0,0,0,3.2575-7.8644Z"
+    />
+    <path
+      class="cls-1"
+      d="M210.0008,90.7042h-5.85v41.1511h5.85a4.4537,4.4537,0,0,0,4.4537-4.4537V95.1579A4.4537,4.4537,0,0,0,210.0008,90.7042Z"
+    />
+    <path
+      class="cls-1"
+      d="M28.29,90.7042H22.44a4.4538,4.4538,0,0,0-4.4538,4.4537v32.2437a4.4538,4.4538,0,0,0,4.4538,4.4537h5.85Z"
+    />
+    <path
+      class="cls-1"
+      d="M138.8087,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,138.8087,96.1512Z"
+    />
+    <path
+      class="cls-1"
+      d="M95.3622,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,95.3622,96.1512Z"
+    />
+    <path
+      class="cls-1"
+      d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"
+    />
+  </svg>
+  <img v-else src="@/assets/logo/logo.svg" :height="height" />
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import useStore from '@/stores'
+defineOptions({ name: 'LogoIcon' })
+
+defineProps({
+  height: {
+    type: String,
+    default: '36px'
+  }
+})
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+</script>
+<style lang="scss" scoped>
+.custom-logo-color {
+  path {
+    fill: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/components/logo/SendIcon.vue b/src/components/logo/SendIcon.vue
new file mode 100644
index 0000000..933976c
--- /dev/null
+++ b/src/components/logo/SendIcon.vue
@@ -0,0 +1,44 @@
+<template>
+  <svg
+    v-if="!isDefaultTheme"
+    :class="!isDefaultTheme ? 'custom-logo-color' : ''"
+    width="24"
+    height="24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z"
+      fill="currentColor"
+    />
+  </svg>
+
+  <img v-else src="@/assets/icon_send_colorful.svg" />
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import useStore from '@/stores'
+defineOptions({ name: 'SendIcon' })
+
+defineProps({
+  height: {
+    type: String,
+    default: '36px'
+  }
+})
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+</script>
+<style lang="scss" scoped>
+.custom-logo-color {
+  path {
+    fill: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/components/markdown/EchartsRander.vue b/src/components/markdown/EchartsRander.vue
new file mode 100644
index 0000000..f008cda
--- /dev/null
+++ b/src/components/markdown/EchartsRander.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="charts-container">
+    <div ref="chartsRef" :style="style" v-resize="changeChartSize"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue'
+import * as echarts from 'echarts'
+const tmp = ref()
+const props = defineProps<{ option: string }>()
+const chartsRef = ref()
+
+const style = ref({
+  height: '220px',
+  width: '100%'
+})
+
+function initChart() {
+  if (chartsRef.value) {
+    let myChart = echarts?.getInstanceByDom(chartsRef.value)
+    if (myChart === null || myChart === undefined) {
+      myChart = echarts.init(chartsRef.value)
+    }
+    const option = JSON.parse(props.option)
+    if (option.actionType === 'EVAL') {
+      myChart.setOption(evalParseOption(option), true)
+    } else {
+      myChart.setOption(jsonParseOption(option), true)
+    }
+  }
+}
+function jsonParseOption(option: any) {
+  if (option.style) {
+    style.value = option.style
+  }
+
+  if (option.option) {
+    // 渲染数据
+    return option.option
+  }
+  return option
+}
+function evalParseOption(option_json: any) {
+  if (option_json.style) {
+    style.value = option_json.style
+  }
+  let option = {}
+  echarts
+  tmp.value = echarts
+  eval(option_json.option)
+  return option
+}
+
+function changeChartSize() {
+  echarts?.getInstanceByDom(chartsRef.value)?.resize()
+}
+
+watch(
+  () => props.option,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        initChart()
+      })
+    }
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(chartsRef.value)?.dispose()
+})
+</script>
+<style lang="scss" scoped>
+.charts-container {
+  overflow-x: auto;
+}
+.charts-container::-webkit-scrollbar-track-piece {
+  background-color: rgba(0, 0, 0, 0);
+  border-left: 1px solid rgba(0, 0, 0, 0);
+}
+
+.charts-container::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.charts-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+
+  background-clip: padding-box;
+
+  -webkit-border-radius: 5px;
+
+  -moz-border-radius: 5px;
+
+  border-radius: 5px;
+
+  min-height: 28px;
+}
+
+.charts-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+
+  -webkit-border-radius: 5px;
+
+  -moz-border-radius: 5px;
+
+  border-radius: 5px;
+}
+</style>
diff --git a/src/components/markdown/FormRander.vue b/src/components/markdown/FormRander.vue
new file mode 100644
index 0000000..22fee6f
--- /dev/null
+++ b/src/components/markdown/FormRander.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <DynamicsForm
+      :disabled="is_submit || disabled"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormRef"
+      :render_data="form_field_list"
+      label-suffix=":"
+      v-model="form_data"
+      :model="form_data"
+    ></DynamicsForm>
+    <el-button
+      :type="is_submit ? 'info' : 'primary'"
+      :disabled="is_submit || disabled"
+      @click="submit"
+      >提交</el-button
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const props = withDefaults(
+  defineProps<{
+    form_setting: string
+    disabled?: boolean
+    sendMessage?: (question: string, type: 'old' | 'new', other_params_data?: any) => void
+    child_node?: any
+    chat_record_id?: string
+    runtime_node_id?: string
+  }>(),
+  {
+    disabled: false
+  }
+)
+const form_setting_data = computed(() => {
+  if (props.form_setting) {
+    return JSON.parse(props.form_setting)
+  } else {
+    return {}
+  }
+})
+const _submit = ref<boolean>(false)
+/**
+ * 表单字段列表
+ */
+const form_field_list = computed(() => {
+  if (form_setting_data.value.form_field_list) {
+    return form_setting_data.value.form_field_list
+  }
+  return []
+})
+const is_submit = computed(() => {
+  if (_submit.value) {
+    return true
+  }
+  if (form_setting_data.value.is_submit) {
+    return form_setting_data.value.is_submit
+  } else {
+    return false
+  }
+})
+const _form_data = ref<any>({})
+const form_data = computed({
+  get: () => {
+    if (form_setting_data.value.is_submit) {
+      return form_setting_data.value.form_data
+    } else {
+      return _form_data.value
+    }
+  },
+  set: (v) => {
+    _form_data.value = v
+  }
+})
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const submit = () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    _submit.value = true
+    if (props.sendMessage) {
+      props.sendMessage('', 'old', {
+        child_node: props.child_node,
+        runtime_node_id: props.runtime_node_id,
+        chat_record_id: props.chat_record_id,
+        node_data: form_data.value
+      })
+    }
+  })
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/markdown/HtmlRander.vue b/src/components/markdown/HtmlRander.vue
new file mode 100644
index 0000000..a8be059
--- /dev/null
+++ b/src/components/markdown/HtmlRander.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="htmlRef" :innerHTML="source"></div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const htmlRef = ref<HTMLElement>()
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    script_exec?: boolean
+  }>(),
+  {
+    source: '',
+    script_exec: true
+  }
+)
+onMounted(() => {
+  if (htmlRef.value && props.script_exec) {
+    const range = document.createRange()
+    range.selectNode(htmlRef.value)
+    const scripts = htmlRef.value.getElementsByTagName('script')
+    if (scripts) {
+      var documentFragment = range.createContextualFragment(
+        [...scripts]
+          .map((item: HTMLElement) => {
+            htmlRef.value?.removeChild(item)
+            return item.outerHTML
+          })
+          .join('\n')
+      )
+      htmlRef.value.appendChild(documentFragment)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/markdown/MdEditor.vue b/src/components/markdown/MdEditor.vue
new file mode 100644
index 0000000..ec1c3ae
--- /dev/null
+++ b/src/components/markdown/MdEditor.vue
@@ -0,0 +1,14 @@
+<template>
+  <MdEditor noIconfont noPrettier v-bind="$attrs">
+    <template #defFooters>
+      <slot name="defFooters"> </slot>
+    </template>
+  </MdEditor>
+</template>
+
+<script setup lang="ts">
+import { MdEditor } from 'md-editor-v3'
+
+import './assets/markdown-iconfont.js'
+defineOptions({ name: 'MdEditor' })
+</script>
diff --git a/src/components/markdown/MdEditorMagnify.vue b/src/components/markdown/MdEditorMagnify.vue
new file mode 100644
index 0000000..ec0075f
--- /dev/null
+++ b/src/components/markdown/MdEditorMagnify.vue
@@ -0,0 +1,63 @@
+<template>
+  <MdEditor
+    v-bind="$attrs"
+    v-model="data"
+    :preview="false"
+    :toolbars="[]"
+    class="magnify-md-editor"
+    :footers="footers"
+  >
+    <template #defFooters>
+      <el-button text type="info" @click="openDialog">
+        <AppIcon class="color-secondary"  iconName="app-magnify" style="font-size: 16px"></AppIcon>
+      </el-button>
+    </template>
+  </MdEditor>
+  <!-- 回复内容弹出层 -->
+  <el-dialog v-model="dialogVisible" :title="title" append-to-body align-center>
+    <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
+    <template #footer>
+      <div class="dialog-footer mt-24">
+        <el-button type="primary" @click="submitDialog"> 确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+defineOptions({ name: 'MdEditorMagnify' })
+const props = defineProps<{
+  title: String
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue', 'submitDialog'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = props.modelValue
+  dialogVisible.value = true
+}
+function submitDialog() {
+  emit('submitDialog', cloneContent.value)
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.magnify-md-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>
diff --git a/src/components/markdown/MdPreview.vue b/src/components/markdown/MdPreview.vue
new file mode 100644
index 0000000..7632a5a
--- /dev/null
+++ b/src/components/markdown/MdPreview.vue
@@ -0,0 +1,8 @@
+<template>
+  <MdPreview noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { MdPreview } from 'md-editor-v3'
+defineOptions({ name: 'MdPreview' })
+</script>
diff --git a/src/components/markdown/MdRenderer.vue b/src/components/markdown/MdRenderer.vue
new file mode 100644
index 0000000..bc2f907
--- /dev/null
+++ b/src/components/markdown/MdRenderer.vue
@@ -0,0 +1,254 @@
+<template>
+  <template v-for="(item, index) in md_view_list" :key="index">
+    <div
+      v-if="item.type === 'question'"
+      @click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
+      class="problem-button ellipsis-2 mt-4 mb-4"
+      :class="sendMessage ? 'cursor' : 'disabled'"
+    >
+      <el-icon>
+        <EditPen />
+      </el-icon>
+      {{ item.content }}
+    </div>
+    <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
+    <EchartsRander
+      v-else-if="item.type === 'echarts_rander'"
+      :option="item.content"
+    ></EchartsRander>
+    <FormRander
+      :chat_record_id="chat_record_id"
+      :runtime_node_id="runtime_node_id"
+      :child_node="child_node"
+      :disabled="disabled"
+      :send-message="sendMessage"
+      v-else-if="item.type === 'form_rander'"
+      :form_setting="item.content"
+    ></FormRander>
+    <MdPreview
+      v-else
+      noIconfont
+      ref="editorRef"
+      editorId="preview-only"
+      :modelValue="item.content"
+      :key="index"
+      class="maxkb-md"
+    />
+  </template>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { config } from 'md-editor-v3'
+import HtmlRander from './HtmlRander.vue'
+import EchartsRander from './EchartsRander.vue'
+import FormRander from './FormRander.vue'
+config({
+  markdownItConfig(md) {
+    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0')
+      if (tokens[idx].content) {
+        tokens[idx].attrSet('title', tokens[idx].content)
+      }
+      tokens[idx].attrSet(
+        'onerror',
+        'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"'
+      )
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('target', '_blank')
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    document.appendChild
+  }
+})
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    inner_suffix?: boolean
+    sendMessage?: (question: string, type: 'old' | 'new', other_params_data?: any) => void
+    child_node?: any
+    chat_record_id?: string
+    runtime_node_id?: string
+    disabled?: boolean
+  }>(),
+  {
+    source: '',
+    disabled: false
+  }
+)
+const editorRef = ref()
+const md_view_list = computed(() => {
+  const temp_source = props.source
+  return split_form_rander(
+    split_echarts_rander(split_html_rander(split_quick_question([temp_source])))
+  )
+})
+
+const split_quick_question = (result: Array<string>) => {
+  return result
+    .map((item) => split_quick_question_(item))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+const split_quick_question_ = (source: string) => {
+  const temp_md_quick_question_list = source.match(/<quick_question>[\d\D]*?<\/quick_question>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<quick_question>[\d\D]*?<\/quick_question>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: 'md', content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'question',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<quick_question>', '')
+          .replace('</quick_question>', '')
+      }
+    }
+  })
+  return result
+}
+const split_html_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_html_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_html_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<html_rander>[\d\D]*?<\/html_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<html_rander>[\d\D]*?<\/html_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'html_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<html_rander>', '')
+          .replace('</html_rander>', '')
+      }
+    }
+  })
+  return result
+}
+
+const split_echarts_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_echarts_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_echarts_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'echarts_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<echarts_rander>', '')
+          .replace('</echarts_rander>', '')
+      }
+    }
+  })
+  return result
+}
+
+const split_form_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_form_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_form_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<form_rander>[\d\D]*?<\/form_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<form_rander>[\d\D]*?<\/form_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'form_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<form_rander>', '')
+          .replace('</form_rander>', '')
+      }
+    }
+  })
+  return result
+}
+</script>
+<style lang="scss" scoped>
+.problem-button {
+  width: 100%;
+  border: none;
+  border-radius: 8px;
+  background: var(--app-layout-bg-color);
+  height: 46px;
+  padding: 0 12px;
+  line-height: 46px;
+  box-sizing: border-box;
+  color: var(--el-text-color-regular);
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+
+  &:hover {
+    background: var(--el-color-primary-light-9);
+  }
+
+  &.disabled {
+    &:hover {
+      background: var(--app-layout-bg-color);
+    }
+  }
+
+  :deep(.el-icon) {
+    color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/components/markdown/assets/markdown-iconfont.js b/src/components/markdown/assets/markdown-iconfont.js
new file mode 100644
index 0000000..6b8505f
--- /dev/null
+++ b/src/components/markdown/assets/markdown-iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_2605852='<svg><symbol id="md-editor-icon-col-resize" viewBox="0 0 1024 1024"><path d="M661.63378906 895.64257813L661.63378906 128.35742187c0-21.09375 17.13867188-38.23242188 38.23242188-38.23242187 21.09375 0 38.23242188 17.13867188 38.23242187 38.23242188l0 766.62597656c0 21.09375-17.13867188 38.23242188-38.23242187 38.23242187-21.09375 0.65917969-38.23242188-16.47949219-38.23242188-37.57324218zM474.42675781 895.64257813L474.42675781 128.35742187c0-21.09375 17.13867188-38.23242188 38.23242188-38.23242187C534.41210938 90.125 551.55078125 107.26367187 551.55078125 128.35742187l0 766.62597657c0 21.09375-17.13867188 38.23242188-38.23242188 38.23242187-21.75292969 0.65917969-38.89160156-16.47949219-38.89160156-37.57324219zM287.87890625 895.64257813L287.87890625 128.35742187C287.87890625 107.26367187 305.01757812 90.125 326.11132812 90.125c21.09375 0 38.23242188 17.13867188 38.23242188 38.23242188l1e-8 766.62597656c0 21.09375-17.13867188 38.23242188-38.23242188 38.23242187-21.09375 0.65917969-38.23242188-16.47949219-38.23242188-37.57324218z"  ></path></symbol><symbol id="md-editor-icon-jump" viewBox="0 0 1024 1024"><path d="M280.25714112 790.09143067a46.39492035 46.39492035 0 0 1-46.34857179-46.34857179V280.25714112a46.39492035 46.39492035 0 0 1 46.34857179-46.34857179h208.56857299v46.34857179H280.25714112v463.48571776h463.48571776V535.17428589h46.34857179V743.74285888a46.39492035 46.39492035 0 0 1-46.34857179 46.34857179H280.25714112zM558.34857177 233.90856933v46.34857179h152.62584688L512 479.23155975 544.76844025 512 743.74285888 313.02558135V465.65142823h46.34857179V257.08285523a23.17428589 23.17428589 0 0 0-23.1742859-23.1742859H558.34857177z" fill="#000000" fill-opacity=".9" ></path></symbol><symbol id="md-editor-icon-copy" viewBox="0 0 1024 1024"><path d="M717.2421875 679.5265625a31.89375 31.89375 0 0 1 0-63.7875 30.8390625 30.8390625 0 0 0 30.8390625-30.8390625V308.4875a30.8390625 30.8390625 0 0 0-30.8390625-30.8390625H440.8296875a30.8390625 30.8390625 0 0 0-30.8390625 30.8390625 31.89375 31.89375 0 1 1-63.7875 0 94.8375 94.8375 0 0 1 94.6265625-94.6265625h276.4125a94.8375 94.8375 0 0 1 94.6265625 94.6265625v276.4125a94.8375 94.8375 0 0 1-94.6265625 94.6265625z"  ></path><path d="M575.8296875 817.775H311.103125a99.815625 99.815625 0 0 1-99.9421875-99.9421875v-265.78125a99.815625 99.815625 0 0 1 99.9421875-99.984375h264.7265625a99.815625 99.815625 0 0 1 99.9421875 99.9421875v265.78125c1.0546875 55.3078125-44.634375 99.984375-99.9421875 99.984375zM311.103125 415.8546875a35.859375 35.859375 0 0 0-36.1546875 36.1546875v265.78125a35.859375 35.859375 0 0 0 36.1546875 36.1546875h264.7265625a35.859375 35.859375 0 0 0 36.1546875-36.1546875v-265.78125a35.859375 35.859375 0 0 0-36.1546875-36.1546875z"  ></path></symbol><symbol id="md-editor-icon-task" viewBox="0 0 1024 1024"><path d="M672.32 672v68.8A59.52 59.52 0 0 1 612.48 800H283.52A59.52 59.52 0 0 1 224 740.48V411.52A59.52 59.52 0 0 1 283.52 352H352V283.52A59.52 59.52 0 0 1 411.52 224h329.28a59.52 59.52 0 0 1 59.52 59.52v329.28A59.52 59.52 0 0 1 740.48 672h-68.16z m0-64H736V288H416v64h196.8a59.52 59.52 0 0 1 59.52 59.52V608zM288 736h320V416H288v320z m128-64a32 32 0 0 1-22.72-9.28l-64-64a32 32 0 0 1 45.12-45.12l41.28 41.28 105.28-105.28a32 32 0 0 1 45.12 45.12l-128 128A32 32 0 0 1 416 672z"  ></path></symbol><symbol id="md-editor-icon-formula" viewBox="0 0 1024 1024"><path d="M539.21819878 548.59683227L575.84284019 512l-36.62464141-36.59683227L361.69158172 298.02254868l374.1024971-0.20161629v-51.77367211l-447.53949164 0.24333001v51.7736721L502.59355736 512 288.20592117 726.20687676v51.50253295l447.53949166 0.24333001v-51.77367211l-374.1024971-0.20161629 177.57528304-177.38061905"  ></path></symbol><symbol id="md-editor-icon-mermaid" viewBox="0 0 1024 1024"><path d="M812.40545039 771.45579978L724.78666362 771.45579978c-13.82543327 0-25.03357536-11.18650107-25.03357537-24.98201882L699.75308825 671.52263255c0-13.79742724 11.2081421-24.98201881 25.03357538-24.98201881l25.03357535 0L749.82023898 534.11611888c0-13.79870023-11.20686909-24.9832918-25.03357536-24.9832918L524.51615118 509.13282707l0 137.40778668 25.03484838-1e-8c13.82543327 0 25.03357536 11.18459157 25.03357536 24.98201882l1e-8 74.95178492c0 13.79551773-11.2081421 24.98201881-25.03357538 24.9820188L461.93284926 771.45643628c-13.82670626 0-25.03357536-11.18650107-25.03357536-24.9820188L436.8992739 671.52263255c0-13.79742724 11.20686909-24.98201881 25.03357537-24.98201881l25.03357537 0 0-137.40778666L299.21333638 509.13282707c-13.82543327 0-25.03357536 11.18459157-25.03357536 24.98329181l0 112.42449486 25.03357536 1e-8c13.82543327 0 25.03357536 11.18459157 25.03357537 24.9820188l0 74.95178493c0 13.79551773-11.2081421 24.98201881-25.03357537 24.98201879L211.59454961 771.45643628c-13.82543327 0-25.03357536-11.18650107-25.03357538-24.9820188L186.56097423 671.52263255c0-13.79742724 11.2081421-24.98201881 25.03357538-24.98201881l25.03357536 0L236.62812497 521.62351822c0-27.59549098 22.41692069-49.96658362 50.06906023-49.9665836L486.96642464 471.65693462 486.96642464 334.25105744l-25.03357538 0c-13.82670626 0-25.03357536-11.18650107-25.03357536-24.98456481L436.8992739 234.3172537c0-13.79870023 11.20686909-24.9832918 25.03357537-24.98329179l87.61878679 0c13.82543327 0 25.03357536 11.18459157 25.03357536 24.9832918l0 74.94860241c0 13.79870023-11.2081421 24.98456481-25.03357536 24.98456482l-25.03484837 0 0 137.40651368 212.78793662 0c27.65023005 0 50.06715074 22.37109264 50.06715072 49.96658361l0 124.91645902 25.03357537 0c13.82543327 0 25.03357536 11.18459157 25.03357537 24.9820188l0 74.95178491C837.43902577 760.26993521 826.23024717 771.45579978 812.40545039 771.45579978z"  ></path></symbol><symbol id="md-editor-icon-layout-one" viewBox="0 0 1024 1024"><path d="M729.2589302 200.59553315A65.17767906 65.17767906 0 0 1 794.43660927 265.77321222v492.45357557a65.17767906 65.17767906 0 0 1-65.17767907 65.17767906H251.28928375A21.72589302 21.72589302 0 0 1 229.56339073 801.67857383V222.32142617A21.72589302 21.72589302 0 0 1 251.28928375 200.59553315z m-325.88839531 43.45178604h-130.35535811v535.90536162h130.35535811v-535.90536162z m325.88839531 0H446.82232094v535.90536162H729.2589302a21.72589302 21.72589302 0 0 0 21.62450575-19.64020728L750.98482322 758.22678778V265.77321222A21.72589302 21.72589302 0 0 0 729.2589302 244.04731919z m-57.93571448 217.2589302a21.72589302 21.72589302 0 0 1 2.08568572 43.35039877L671.32321572 504.75803544H526.48392845a21.72589302 21.72589302 0 0 1-2.08568572-43.35039809L526.48392845 461.30624939h144.83928727z m0-130.35535812a21.72589302 21.72589302 0 0 1 2.08568572 43.35039876L671.32321572 374.40267732H526.48392845a21.72589302 21.72589302 0 0 1-2.08568572-43.3503981L526.48392845 330.95089127h144.83928727z"  ></path></symbol><symbol id="md-editor-icon-delete" viewBox="0 0 1024 1024"><path d="M515.79524194 179.05679987c-68.09641701 0-123.36437311 53.98477055-125.71620103 121.76005169H231.33065634c-17.63803047 0-32.06945491 14.32483177-32.0694549 32.07013384 0 17.63870941 14.32483177 32.07081277 32.07013384 32.07081277h35.38401145v358.75967145c0 67.34755264 45.64678017 122.40164448 102.09132918 122.40164447h287.56256215c56.33795634 0 102.09132917-54.73295599 102.09132917-122.40164447V365.17166244h32.07013384c17.63870941 0 32.07013383-14.32551071 32.07013383-32.07081278 0-17.63870941-14.32483177-32.07013383-32.07013383-32.07013384H641.29689977C639.26552878 233.04224935 583.89098001 179.0574788 515.79524194 179.0574788z m-65.63731748 121.76005169c2.35182792-34.74241867 30.68103455-61.68116815 65.74391014-61.68116814s63.39208222 27.04534214 65.42345322 61.68116814H450.15792446z m-81.45852015 485.33065058c-19.99053732 0-42.01244563-25.65624285-42.01244564-62.43003252V365.17166244h371.58813236V724.03792655c0 36.66719701-22.02190831 62.43071146-42.01244565 62.43071145H368.69940431v-0.32113586z m0 0"  ></path><path d="M411.7804923 709.07218092c14.64460976 0 26.72488523-14.6452887 26.72488522-33.03218354V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72488522-33.03286248-14.64596763 0-26.72556416 14.64596763-26.72556416 33.03286248v188.46669046c0 18.27962325 11.7591396 33.03218354 26.72556416 33.03218355z m96.74540162 1e-8c14.6452887 0 26.72488523-14.6452887 26.72488522-33.03218355V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72488522-33.03286248-14.6452887 0-26.72556416 14.64596763-26.72556415 33.03286248v188.46669046c0 18.27962325 12.08027546 33.03218354 26.72556415 33.03218355z m101.76951438 0c14.6452887 0 26.72556416-14.6452887 26.72556415-33.03218355V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72556415-33.03286248-14.6452887 0-26.72488523 14.64596763-26.72488522 33.03286248v188.46669046c0 18.27962325 11.651868 33.03218354 26.72488522 33.03218355z m0 0"  ></path></symbol><symbol id="md-editor-icon-upload" viewBox="0 0 1024 1024"><path d="M737 371.375a196.875 196.875 0 0 1 0 393.75h-28.125a28.125 28.125 0 0 1 0-56.25h28.125a140.625 140.625 0 0 0 0-281.25 129.375 129.375 0 0 0-24.46875 2.25 28.125 28.125 0 0 1-33.46875-24.1875 168.75 168.75 0 0 0-334.125 0 28.125 28.125 0 0 1-33.46875 24.1875A129.375 129.375 0 0 0 287 427.625a140.625 140.625 0 0 0 0 281.25h28.125a28.125 28.125 0 0 1 0 56.25H287a196.875 196.875 0 0 1 0-393.75h7.3125a225 225 0 0 1 435.375 0z" fill="#808080" ></path><path d="M540.125 849.5a28.125 28.125 0 0 1-56.25 0v-253.125a28.125 28.125 0 0 1 56.25 0z" fill="#808080" ></path><path d="M434.65625 727.4375a28.125 28.125 0 1 1-42.1875-37.125l98.4375-112.5a28.125 28.125 0 0 1 42.1875 0l98.4375 112.5a28.125 28.125 0 0 1-42.1875 37.125L512 639.125z" fill="#808080" ></path></symbol><symbol id="md-editor-icon-close" viewBox="0 0 1024 1024"><path d="M249.6376475 722.01411781l203.49176437-203.49176531-203.49176437-203.52 52.17882281-52.17882281 203.52 203.52 203.52-203.52 52.17882375 52.20705844-203.49176437 203.49176437 203.46352875 203.49176531-52.17882282 52.17882375-203.52-203.49176531-203.49176531 203.49176531-52.17882281-52.17882375z"  ></path></symbol><symbol id="md-editor-icon-prettier" viewBox="0 0 1024 1024"><path d="M211.4140625 248.98730469h601.171875c-7.11914063 0-12.65625-5.53710938-12.65625-12.65625v551.33789062c0-7.11914063 5.53710938-12.65625 12.65625-12.65625H211.4140625c7.11914063 0 12.65625 5.53710938 12.65625 12.65625V236.7265625c0 6.328125-5.14160156 12.26074219-12.65625 12.26074219z m-25.3125 528.79394531c0 20.17089844 16.21582031 36.38671875 36.38671875 36.38671875h579.41894531c20.17089844 0 36.38671875-16.21582031 36.38671875-36.38671875V246.21875c0-20.17089844-16.21582031-36.38671875-36.38671875-36.38671875H222.48828125c-20.17089844 0-36.38671875 16.21582031-36.38671875 36.38671875v531.5625z"  ></path><path d="M614.43652344 542.05859375v-34.8046875l-64.86328125 43.50585938 64.86328125 43.50585937V559.4609375zM722.80566406 464.14355469v101.64550781h-108.36914062v-29.26757813H693.93359375V464.14355469zM309.89550781 421.03320312h249.9609375v43.50585938H309.89550781zM309.89550781 532.96191406h192.21679688v43.50585938H309.89550781zM309.89550781 309.5h394.71679688v43.50585938H309.89550781zM309.89550781 644.890625h394.71679688v43.50585938H309.89550781z"  ></path></symbol><symbol id="md-editor-icon-revoke" viewBox="0 0 1024 1024"><path d="M709.05928138 754.60218462a13.58411482 13.58411482 0 0 1-13.54609472-14.38797265c2.07482258-34.75056609-2.28665003-83.43829236-34.85919514-118.0150511-36.83625182-39.10660745-102.99159607-52.54407248-194.82151398-39.50310477v107.38565752a13.57868292 13.57868292 0 0 1-23.17609681 9.6028445L239.10105777 496.12923514a13.56782041 13.56782041 0 0 1 0-19.20025774l203.55532297-203.5553236a13.56782041 13.56782041 0 0 1 23.1760968 9.60284512V378.16849919c95.28976679 0.92878193 166.90374165 15.58832844 218.73085904 44.73361354 61.22899822 34.43554022 95.41469088 90.29824307 101.60113914 166.03470614 4.31802124 52.87539214-36.97746971 128.96490117-67.17103018 161.34191262a13.54609409 13.54609409 0 0 1-9.93416417 4.32345313zM529.40787157 550.67752126c67.13844069 0 117.94987342 17.79350638 151.01668239 52.89711782 27.24426985 28.91716382 38.15066794 65.03646055 41.47473019 97.83169628 21.83995374-34.84290073 39.61716572-80.67910352 37.20559159-110.25890729-10.3578197-126.80317462-106.65784052-185.46851705-303.04905007-185.46851704l-3.76401095 0.40736049H452.25379398c-3.5956355 0-7.03918933-1.81954375-9.58655009-4.36147324-2.55822391-2.54736075-3.99213284-6.40913824-3.99213283-10.01563625V315.7608715L267.90416064 486.5318219 438.67511105 657.30277231V569.68767723c0-7.4737074 6.03979847-11.52015477 13.51350526-11.52015477h0.96137076c1.72177723 0 3.07421407-1.01025402 4.18766588-0.98852772l1.67289397-0.49426448 0.59203037-0.27157324c24.80553815-3.63365561 48.31838587-5.73563577 69.80529428-5.73563576z"  ></path></symbol><symbol id="md-editor-icon-next" viewBox="0 0 1024 1024"><path d="M316.87975457 753.70055965c-3.68797013 0-7.31076321-1.04827413-9.93416417-3.86720876-33.80548974-36.24422082-68.66468488-112.71936467-64.71600404-161.11379136 14.88223651-182.26937949 180.49871902-208.76953731 310.5010318-210.50217706V282.97649892a13.57868292 13.57868292 0 0 1 23.18152742-9.60284512l203.55532361 203.5553236a13.56782041 13.56782041 0 0 1 0 19.20025774L575.91757748 699.68455812a13.57868292 13.57868292 0 0 1-23.18152807-9.6028445V582.02255299c-88.61991785-11.81345433-152.26592144 1.5642643-187.86379674 39.3618869-31.77411855 33.72944891-36.40716502 81.98808899-34.53330737 117.15144685 0.14664978 0.80385784 0.22812188 1.18949265 0.22812188 2.03680246 0 7.49543309-6.07238731 13.12787107-13.56238851 13.12787045h-0.1249241z m250.04873446-347.61428813c-0.1629442 0-0.33675155-0.39649733-0.505127-0.39106607-195.03877333 0.20096431-286.64600125 57.31833747-297.12331318 185.65861881-2.41157412 29.57980313 14.28477487 74.9380365 34.71797726 109.17804369 3.99756411-39.78010991 17.91299859-73.11849276 41.0836635-97.71763533 32.5562507-34.54960117 82.71047472-52.10412315 149.0667839-52.10412253 21.42716198 0 44.91285214 1.83040627 69.79986238 5.47492505l1.34700558-0.03802073a13.58954608 13.58954608 0 0 1 14.58350569 13.54609471v87.61509509l170.77095041-170.77095104L579.8934159 315.7608715v70.52224875c0.71695447 1.6457364 1.92274152 3.45441698 1.92274153 5.3608641 0.02172568 4.53527996-1.92274152 13.03010455-12.78568825 13.61127177v0.8310154h-2.10198015z"  ></path></symbol><symbol id="md-editor-icon-sup" viewBox="0 0 1024 1024"><path d="M401.58302857 293.51116466L244.06698906 726.81901058h69.54765466l33.27904506-96.88337376h164.35444469L544.83150545 726.81901058h69.24332776L456.55879369 293.51116466H401.58302857zM365.92307279 571.68388177l62.70924952-189.30925308h1.18150456l62.70924951 189.30925308H365.92307279zM699.96663427 601.50792108L619.40950529 726.81901058h161.11425794zM658.8466953 365.13540311a186.98204713 186.98204713 0 0 0-41.10203733 44.7897637c-10.83045846 16.72007966-16.23673687 34.12041952-16.23673689 52.20101956h161.11425793v-44.80766529h-88.77395612c3.29389149-6.03283387 12.74592797-15.198445 28.3561094-27.53263651 21.91153908-17.25712718 36.71614922-31.30987079 44.39592885-42.12242766 7.67977963-10.81255689 11.51071865-23.3615674 11.51071865-37.61122844 0-19.99606957-6.64148775-36.08959379-19.94236482-48.2984742S707.00195686 243.47623678 684.53546867 243.47623678c-43.28603063 0-69.86988319 19.17259671-79.73365609 57.53569167l53.43622887 8.62856359c3.29389149-14.24966103 10.95576954-21.37449155 23.0214373-21.37449155 6.03283387 0 11.02737588 1.9154695 15.00152758 5.76431011 3.97415169 3.83093903 5.96122755 8.89708735 5.96122754 15.19844501 0 8.21682714-3.07907248 16.30834322-9.25511903 24.2566466-6.17604655 7.9483034-17.54355253 18.4923365-34.12041954 31.6500009z"  ></path></symbol><symbol id="md-editor-icon-italic" viewBox="0 0 1024 1024"><path d="M664.76018531 257.6733865h-171.85520848a19.09502317 19.09502317 0 0 0 0 38.19004632h57.47601974l-137.44597674 420.09050958H359.23981469a19.09502317 19.09502317 0 0 0 0 38.19004633h171.85520848a19.09502317 19.09502317 0 0 0 0-38.19004633h-55.92932285l137.56054686-420.09050958H664.76018531a19.09502317 19.09502317 0 0 0 0-38.19004632z"  ></path></symbol><symbol id="md-editor-icon-sub" viewBox="0 0 1024 1024"><path d="M762.62217901 279.2794052h-161.11425793l80.55712896 125.31108951zM401.58302856 275.60958042L244.06698906 708.91742636h69.54765466l33.27904506-96.88337377h164.35444469L544.83150545 708.91742636h69.24332775L456.55879368 275.60958042H401.58302856zM365.92307279 553.78229757l62.70924952-189.30925308h1.18150456l62.70924951 189.30925308H365.92307279zM691.7498071 721.66335433c3.29389149-6.03283387 12.74592797-15.198445 28.3561094-27.53263652 21.91153908-17.25712718 36.71614922-31.3098708 44.39592885-42.12242766 7.67977963-10.81255688 11.51071865-23.3615674 11.51071865-37.61122844 0-19.99606957-6.64148775-36.08959379-19.9423648-48.29847422S724.90354107 547.80316842 702.43705288 547.80316842c-43.28603063 0-69.86988319 19.17259671-79.7336561 57.53569169l53.43622888 8.62856357c3.29389149-14.24966104 10.95576954-21.37449155 23.02143731-21.37449154 6.03283387 0 11.02737588 1.9154695 15.00152756 5.76431011 3.97415169 3.83093903 5.96122755 8.89708735 5.96122754 15.19844501 0 8.21682714-3.07907248 16.30834322-9.25511902 24.25664661-6.15814497 7.9483034-17.52565094 18.4923365-34.12041952 31.65000089a186.98204712 186.98204712 0 0 0-41.10203736 44.78976371c-10.83045846 16.72007966-16.23673688 34.12041952-16.23673688 52.20101956h161.11425793v-44.80766529h-88.77395611z"  ></path></symbol><symbol id="md-editor-icon-preview" viewBox="0 0 1024 1024"><path d="M512 790.09143067C337.63667297 790.09143067 164.38571167 638.02176667 164.38571167 512S337.63667297 233.90856933 512 233.90856933c174.50237274 0 347.61428833 151.79157258 347.61428833 278.09143067s-173.11191561 278.09143067-347.61428833 278.09143067z m0-46.34857179c150.16937257 0 301.26571655-132.51056672 301.26571655-231.74285888S662.16937257 280.25714112 512 280.25714112C362.01602173 280.25714112 210.73428345 412.99945068 210.73428345 512s151.28173828 231.74285888 301.26571655 231.74285888z m0-92.69714355a139.04571533 139.04571533 0 1 1 0-278.09143066 139.04571533 139.04571533 0 0 1 0 278.09143066z m0-46.34857178a92.69714356 92.69714356 0 1 0 0-185.3942871 92.69714356 92.69714356 0 0 0 0 185.3942871z"  ></path></symbol><symbol id="md-editor-icon-coding" viewBox="0 0 1024 1024"><path d="M729.27590356 801.6842314H294.72409644a72.40832783 72.40832783 0 0 1-72.40832784-72.40832784V294.72409644A72.40832783 72.40832783 0 0 1 294.72409644 222.3157686h434.55180712a72.40832783 72.40832783 0 0 1 72.40832784 72.40832784v434.55180712a72.40832783 72.40832783 0 0 1-72.40832784 72.40832784z m36.61152442-510.26993897a34.82932226 34.82932226 0 0 0-36.25508398-33.30172041H294.36765601a34.82932226 34.82932226 0 0 0-36.25508399 33.30172041v39.92132842h507.77485596z m0 75.7690519H258.11257202v361.83795892a36.50968429 36.50968429 0 0 0 36.25508398 36.86612473h435.26468799a36.50968429 36.50968429 0 0 0 36.25508399-36.86612473zM646.7854035 661.39946122a15.73429909 15.73429909 0 0 1-22.04838675 0 15.27601854 15.27601854 0 0 1 0-21.6919463l80.25001735-65.48319944-80.25001735-65.43227937a15.27601854 15.27601854 0 0 1 0-21.74286638 15.83613921 15.83613921 0 0 1 22.04838675 0l92.5726723 75.56537166a17.51650124 17.51650124 0 0 1 0 23.27046824z m-156.78287018 46.33725622c-4.27728519 7.28156883-11.15149353 8.50365032-21.13182564 5.60120679-8.14720987-2.3932429-10.18401235-13.5956565-5.65212685-20.92814539l77.29665375-259.69231501s13.64657656-9.82757192 21.08090558-5.60120679a15.27601854 15.27601854 0 0 1 5.65212686 20.87722532z m-90.79047013-46.33725622a15.68337903 15.68337903 0 0 1-21.99746669 0L284.6419242 585.88500963a17.51650124 17.51650124 0 0 1 0-23.27046824L377.2145965 487.04916973a15.78521916 15.78521916 0 0 1 21.99746669 0 15.27601854 15.27601854 0 0 1 0 21.74286638L319.0129659 574.22431548l80.19909729 65.48319944a15.27601854 15.27601854 0 0 1 0 21.6919463z"  ></path></symbol><symbol id="md-editor-icon-underline" viewBox="0 0 1024 1024"><path d="M737.94928742 744.79869207H286.05071258c-3.18646431 0-5.79357148 2.46226788-5.79357146 5.50389289v44.03114319c0 3.04162503 2.60710716 5.5038929 5.79357147 5.5038929h451.89857483c3.18646431 0 5.79357148-2.46226788 5.79357146-5.5038929v-44.03114319c0-3.04162503-2.60710716-5.5038929-5.79357146-5.50389289z m-225.94928742-55.038929c50.25923252 0 97.47684002-19.62572336 133.10730458-55.18376827C680.73776912 599.0179499 700.29107285 551.72792276 700.29107285 501.46869024V275.51940282c0-4.77969646-3.91066074-8.69035719-8.69035722-8.69035721h-43.45178604c-4.77969646 0-8.69035719 3.91066074-8.6903572 8.69035721v225.94928742c0 70.2470541-57.21151829 127.45857239-127.45857239 127.45857238s-127.45857239-57.21151829-127.45857239-127.45857238V275.51940282c0-4.77969646-3.91066074-8.69035719-8.6903572-8.69035721h-43.45178605c-4.77969646 0-8.69035719 3.91066074-8.69035721 8.69035721v225.94928742c0 50.25923252 19.62572336 97.47684002 55.18376827 133.10730457C414.45074033 670.20645936 461.74076748 689.75976308 512 689.75976308z"  ></path></symbol><symbol id="md-editor-icon-fangda" viewBox="0 0 1024 1024"><path d="M482.03564834 541.96435166a23.17428589 23.17428589 0 0 1 1.92346573 30.59005737l-1.92346573 2.17838287L336.22304153 720.568573l105.72109223 0.02317427a23.17428589 23.17428589 0 0 1 23.01206588 20.46289445l0.16222001 2.71139145a23.17428589 23.17428589 0 0 1-20.48606872 23.01206589l-2.68821717 0.16222H280.25714112l-1.73807145-0.06952286-2.91996002-0.39396285-2.57234574-0.69522858-2.57234572-1.01966859-2.27108002-1.20506286-2.22473145-1.55267715-2.08568573-1.85394287a23.40602875 23.40602875 0 0 1-2.24790573-2.59552002l-1.6453743-2.54917146-1.25141143-2.64186859-0.81110002-2.43330001-0.69522858-3.47614289L257.08285523 743.74285888v-162.31269836a23.17428589 23.17428589 0 0 1 46.18635177-2.68821716l0.16222 2.68821716-0.02317427 106.34679795 145.85895537-145.81260681a23.17428589 23.17428589 0 0 1 32.76844024 0zM582.05586624 257.08285523H743.74285888l1.73807145 0.06952285 2.91996002 0.39396286 2.57234574 0.69522859 2.57234572 1.01966857 2.27108002 1.20506287 2.22473145 1.55267715 2.08568573 1.85394287c0.83427429 0.81110001 1.57585145 1.69172287 2.24790573 2.59552002l1.6453743 2.54917145 1.25141143 2.64186859 0.81110002 2.43330001 0.69522858 3.47614289L766.91714477 280.25714112v162.31269836a23.17428589 23.17428589 0 0 1-46.18635177 2.68821716L720.568573 442.56983948v-106.36997224l-145.83578111 145.8357811a23.17428589 23.17428589 0 0 1-34.69190596-30.59005737l1.92346573-2.17838287L687.75378418 303.431427h-105.67474366a23.17428589 23.17428589 0 0 1-23.03524017-20.46289443L558.88158035 280.25714112a23.17428589 23.17428589 0 0 1 20.48606872-23.0120659L582.05586624 257.08285523z"  ></path></symbol><symbol id="md-editor-icon-suoxiao" viewBox="0 0 1024 1024"><path d="M303.96443558 535.17428589H465.65142823l1.73807144 0.06952285 2.91996001 0.39396287 2.57234574 0.69522858 2.57234573 1.01966857 2.27108002 1.20506288 2.22473145 1.55267715 2.08568572 1.85394287c0.83427429 0.81110001 1.57585145 1.69172287 2.24790574 2.59552002l1.64537429 2.54917143 1.25141144 2.6418686 0.81110001 2.43330002 0.69522859 3.47614288L488.82571411 558.34857177v162.31269837a23.17428589 23.17428589 0 0 1-46.18635178 2.68821717L442.47714234 720.66127014v-106.36997223l-145.83578111 145.83578109a23.17428589 23.17428589 0 0 1-34.69190596-30.59005737l1.92346573-2.17838286L409.66235353 581.52285766h-105.67474366a23.17428589 23.17428589 0 0 1-23.0352402-20.46289443L280.79014969 558.34857177a23.17428589 23.17428589 0 0 1 20.48606873-23.01206588L303.96443558 535.17428589zM760.12707901 263.87292099a23.17428589 23.17428589 0 0 1 1.92346572 30.59005738l-1.92346572 2.17838286L614.3144722 442.47714234l105.72109222 0.02317428a23.17428589 23.17428589 0 0 1 23.01206589 20.46289444l0.16222 2.71139145a23.17428589 23.17428589 0 0 1-20.48606873 23.01206588l-2.68821716 0.16222002-163.42506409-0.06952287-2.91996001-0.39396286-2.57234574-0.69522858-2.57234573-1.01966857-2.27108002-1.20506287-2.22473145-1.55267716-2.08568572-1.85394287a23.40602875 23.40602875 0 0 1-2.24790574-2.59552002l-1.64537429-2.54917145-1.25141144-2.64186859-0.81110001-2.43330001-0.69522857-3.47614289L535.17428589 465.65142823V303.33872986a23.17428589 23.17428589 0 0 1 46.18635178-2.68821717l0.16221999 2.68821717v106.32362365l145.83578111-145.78943252a23.17428589 23.17428589 0 0 1 32.76844023 0z"  ></path></symbol><symbol id="md-editor-icon-baocun" viewBox="0 0 1024 1024"><path d="M695.19287847 245.2663952H328.80712153c-46.06674339 0-83.54072633 37.47398295-83.54072633 83.54072634v366.38575693c0 46.06674339 37.47398295 83.54072633 83.54072634 83.54072633h366.38575693c46.06674339 0 83.54072633-37.47398295 83.54072633-83.54072634V328.80712153c0-46.06674339-37.47398295-83.54072633-83.54072634-83.54072633z m-274.13292629 47.7375579h181.88009564v155.62443878c0 18.85633538-15.33569047 34.2516978-34.25169781 34.25169782H455.25197803c-18.85633538 0-34.2516978-15.33569047-34.2516978-34.25169782V293.0039531zM730.9960469 695.19287847c0 19.7514146-16.05175385 35.80316842-35.80316844 35.80316843H328.80712153c-19.7514146 0-35.80316842-16.05175385-35.80316843-35.80316844V328.80712153c0-19.7514146 16.05175385-35.80316842 35.80316844-35.80316843h44.51527274v155.62443878c0 45.17166417 36.75791959 81.9892557 81.98925571 81.9892557h113.43637198c45.17166417 0 81.9892557-36.75791959 81.9892557-81.9892557V293.0039531H695.19287847c19.7514146 0 35.80316842 16.05175385 35.80316843 35.80316844v366.38575693z"  ></path><path d="M549.17562323 441.05005455c13.18750038 0 23.86877897-10.68127858 23.86877894-23.86877894v-55.97228664c0-13.18750038-10.68127858-23.86877897-23.86877894-23.86877898s-23.86877897 10.68127858-23.86877896 23.86877898v55.97228664c0 13.12782842 10.68127858 23.86877897 23.86877896 23.86877894z"  ></path></symbol><symbol id="md-editor-icon-bold" viewBox="0 0 1024 1024"><path d="M337.99948597 263.41195693h174.00051403c21.78711731 0 38.3868257 0 59.06235508 6.22489056 18.82288355 5.6320438 32.7547819 12.44978111 49.72501888 24.82545665 12.52388741 9.18912433 23.04691639 22.30585777 31.05034721 37.27523849 8.522172 16.00686163 12.44978111 34.16279285 12.44978184 55.94990944 0 27.9379023-9.3373362 52.83746453-24.82545665 68.39969128-15.56222675 18.67467168-37.27523777 31.0503472-62.17480072 40.38768268 15.56222675 0 27.9379023 6.22489056 43.50012832 12.44978184 12.44978111 6.22489056 23.78797502 13.78368649 34.16279285 25.27009153 18.23003678 20.23089449 18.52646053 25.49240898 24.45492736 39.9430478 7.18826662 17.63719003 6.66952544 31.0503472 6.66952544 46.61257398 0 21.78711731-3.11244563 43.50012832-12.44978112 59.06235508-9.3373362 15.56222675-21.78711731 31.0503472-37.27523776 43.50012832-15.56222675 12.44978111-34.16279285 21.78711731-55.94990944 27.9379023-24.82545666 6.22489056-46.61257397 9.3373362-71.43803062 9.3373362H337.99948597V263.41195693z m68.32558498 205.05086195h93.22514794c12.44978111 0 24.82545666 0 37.27523777-3.11244563 12.44978111-3.11244563 21.19427055-6.81773731 27.93790229-12.44978112 9.55965365-8.00343082 14.00600393-13.11673417 18.67467167-21.78711731 6.96594917-12.9685223 6.22489056-21.78711731 6.22489056-34.16279284 0-18.67467168-6.81773731-36.68239102-18.67467167-49.7250189-18.00771935-19.86036517-31.34677095-25.19598596-59.06235509-24.82545664H406.32507095v146.06261244z m0 233.13697468h99.45003849c9.3373362 0 21.78711731 0 34.16279286-3.11244563 12.44978111-3.11244563 21.12016426-5.18740892 34.16279213-12.44978111 14.1542158-7.85521895 21.63890544-14.1542158 27.9379023-24.82545665 5.7061501-9.63375922 12.44978111-24.82545666 12.44978112-43.50012834 0-27.9379023-5.40972637-49.87323076-26.7522088-65.8800924-21.416588-16.00686163-47.79826748-24.2326099-81.96105961-24.23260988H406.32507095v174.00051401z m0 0"  ></path></symbol><symbol id="md-editor-icon-strike-through" viewBox="0 0 1024 1024"><path d="M821.59397555 532.97906546V490.95304114c0-1.15418807-0.33946708-2.03680247-1.56154857-2.03680247H552.46447575l-0.33946708-0.06789342c-7.26459548-1.42576173-14.66497778-2.85152347-22.0653601-4.20939176-11.47398726-2.10469589-15.75127245-2.91941687-21.59010619-4.07360495-36.05140373-7.06091523-57.98097699-14.05393705-75.76905189-24.30584283-25.73160455-15.00444487-38.22399303-35.44036299-38.22399305-62.46194242 0-26.95368604 11.13452018-49.42640662 32.11358562-64.97399882 20.43591813-15.1402317 49.42640662-23.08376134 83.71258155-23.08376133 39.24239426 0 69.6586445 10.38769261 90.36613628 30.89150413 10.59137286 10.45558601 18.39911565 23.28744158 23.08376133 38.15609962 1.08629466 3.32677737 2.10469589 7.73984939 3.12309713 12.76396216 0.33946708 1.6973354 1.83312222 2.91941687 3.59835103 2.91941687h50.92006176c1.96890906 0 3.66624444-1.56154857 3.66624445-3.53045762v-0.54314732c-0.67893415-4.61675227-0.88261441-8.21510331-1.35786832-10.7950531-4.95621935-29.73731607-19.01015639-55.67260087-40.668156-75.22590458-30.34835681-27.7005136-75.22590458-42.36549139-129.67642395-42.3654914-49.83376713 0-94.64342148 12.42449508-126.21385978 34.96510909-17.51650124 12.62817532-30.95939755 28.1078741-39.92132841 46.09962925-9.09771771 18.46700907-13.78236339 39.85343501-13.7823634 63.48034367 0 20.02855763 3.80203127 37.00191157 11.67766752 51.938463 5.56726009 10.52347943 13.10342924 19.82487738 23.08376132 28.44734118l6.9251284 5.97462057H204.57861375c-1.22208149 0-2.85152347 0.95050781-2.85152344 2.10469588V533.04695886c0 1.22208149 1.62944197 2.03680247 2.85152345 2.03680247h303.27988789l0.33946706 0.13578683c0.88261441 0.20368026 1.76522881 0.40736049 2.5799498 0.54314733 0.54314733 0.13578683 1.01840124 0.20368026 1.56154856 0.33946708 22.40482718 4.48096543 35.10089591 7.40038231 46.84645683 10.72715968 16.49810002 4.68464569 29.05838191 9.57297162 39.3781811 15.34391195 26.27475187 14.80076462 39.03871403 36.11929715 39.03871402 65.17767906 0 25.73160455-11.27030701 48.74747246-31.77411854 64.77031856-21.86167985 17.10914076-54.11105231 26.20685845-93.35344657 26.20685845-30.95939755 0-57.43782967-6.04251399-78.7563622-17.92386173-20.97906546-11.74556092-35.57614982-28.71891485-43.31599921-50.44480786-0.61104074-1.62944197-1.22208149-3.9378181-1.96890907-6.72144816-0.40736049-1.56154857-1.90101564-2.91941687-3.5304576-2.91941687h-55.74049428c-2.03680247 0-3.8699247 2.03680247-3.8699247 4.07360495v0.54314733c0 1.49365514 0.33946708 2.78363004 0.47525392 3.66624444 4.41307203 33.19988027 20.63959838 60.42513997 48.13643172 80.79316466 32.31726588 23.89848233 78.07742804 36.52665764 132.12058694 36.52665765 58.11676383 0 106.8642363-13.64657655 140.74305072-39.3781811 16.97335391-12.83185556 30.07678315-28.65102142 38.90292718-47.05013708 8.89403746-18.6027959 13.44289631-39.64975477 13.4428963-62.52983584 0-21.72589302-3.9378181-39.78554159-12.08502797-55.3331338-3.8699247-7.53616914-8.82614404-14.52919095-14.73287122-20.8432786l-5.36357984-5.77094033h152.96386556c1.35786832 0.06789342 1.6973354-0.88261441 1.69733538-2.03680248z"  ></path></symbol><symbol id="md-editor-icon-link" viewBox="0 0 1024 1024"><path d="M457.68526766 662.72338284l-48.06853829 46.71067021a67.07869491 67.07869491 0 0 1-95.05078242-95.0507824l123.29444312-123.56601632a66.80712103 66.80712103 0 0 1 92.06347167-2.44416299l3.25888393 2.71573683a27.15736647 27.15736647 0 0 0 38.0203126-38.83503419 74.68275705 74.68275705 0 0 0-4.88832593-5.70304691 121.12185338 121.12185338 0 0 0-165.38836062 5.97462079l-124.92388445 123.56601634a121.66500113 121.66500113 0 0 0 171.90612853 171.90612853L494.89085924 702.10156414A27.15736647 27.15736647 0 0 0 457.68526766 662.72338284zM747.99751273 276.00248727a121.93657437 121.93657437 0 0 0-171.90612853 0L529.10914076 321.89843586A27.15736647 27.15736647 0 0 0 566.31473234 361.27661716l46.98224407-46.71067021a67.07869491 67.07869491 0 0 1 95.05078177 95.0507824l-123.2944431 123.56601632a66.80712103 66.80712103 0 0 1-92.06347169 2.44416299l-3.25888393-2.71573683a27.15736647 27.15736647 0 0 0-38.02031258 38.83503419 74.68275705 74.68275705 0 0 0 6.24619402 5.70304691 121.39342726 121.39342726 0 0 0 165.38836061-5.97462079l123.56601699-123.56601634a121.93657437 121.93657437 0 0 0 1.08629423-171.90612853z"  ></path></symbol><symbol id="md-editor-icon-ordered-list" viewBox="0 0 1024 1024"><path d="M409.96096997 282.85972205h366.38575693v48.33427738H409.96096997zM409.96096997 486.9377821h366.38575693v47.73755791H409.96096997zM409.96096997 691.01584214h366.38575693v47.14083844H409.96096997zM297.77770889 278.68268574v104.42590792h26.25565684V231.54184731h-20.407806l-0.47737559 1.19343893c-4.89309968 15.21634658-18.91600732 27.74745553-41.7106912 37.35463906l-1.25311091 0.41770364v26.85237632l2.98359738-1.13376699c14.14225153-5.72850695 25.0622179-11.69570169 34.60972948-17.54355253zM350.88574206 563.31787476H283.57578541c7.0412898-8.95079212 17.84191227-18.67731953 32.22285159-29.35859814 26.79270438-17.2451928 39.14479748-35.92251232 36.75791959-55.31589522-1.96917426-27.32975191-18.25961589-41.88970707-48.45362128-43.32183378-26.13631296 0-44.03789716 12.47143702-53.22737705 37.17562321l-0.65639144 1.84983038 26.4346727 11.51668583 0.59671947-2.32720594c3.99802047-14.6196271 11.87471753-21.95927664 24.10746675-22.37698027 15.87273801 0 23.27205949 6.02686669 23.27205948 19.21436705 0.83540725 10.44259079-8.77177627 22.85435586-28.70220669 36.87726348-20.82550964 15.09700268-36.87726348 32.64055522-47.7375579 52.39196982l-0.23868779 16.94683305H350.88574206v-23.27205948zM328.80712153 710.70758479c13.36651621-6.56391422 20.10944627-16.70814527 20.10944627-30.31334927-1.01442311-27.80712749-17.2451928-42.24773874-48.45362129-42.72511433-26.25565685 0.53704752-42.96380213 14.02290766-49.7664041 40.21889253l-0.53704753 2.02884622 28.04581529 6.62358616 0.41770361-2.08851817c2.68523764-13.66487594 10.08455913-20.70616575 22.5559961-21.541573 12.5907809 0.41770364 18.67731953 5.72850695 19.15469512 16.70814528C319.43862579 693.40272004 310.84586537 699.96663427 294.19739205 699.96663427h-13.7245479v25.06221789h19.27403902c16.29044163 0.59671947 24.82353011 6.80260199 26.13631294 19.63207069 0.17901585 7.99604095-1.73048647 13.66487594-5.60916306 17.60322446-3.99802047 3.99802047-10.44259079 5.72850695-19.03535122 5.72850697h-1.43212672c-14.38093932-0.59671947-22.31730832-7.87669705-24.04779481-23.27205949l-0.29835973-2.14819011-28.04581527 6.62358617 0.41770363 1.96917426c5.31080332 26.73303243 23.27205949 40.57692423 53.4063929 41.0542998 33.41629054-1.43212673 51.31787476-17.00650501 53.28704902-46.42477508-0.41770364-15.39536242-9.070136-27.210408-25.71860932-35.08710505z"  ></path></symbol><symbol id="md-editor-icon-unordered-list" viewBox="0 0 1024 1024"><path d="M270.51669908 316.14107442m-42.36549141 1e-8a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M798.43634618 287.18914938l-433.25558604 0.22812188-0.02607106 53.75203192 433.30121039-0.22812188-0.0195533-53.75203191z"  ></path><path d="M270.51669908 512m-42.36549141 0a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M365.18076014 483.27619684l-0.02607106 53.75203192 433.30121039-0.22812188-0.0195533-53.75203191-433.25558603 0.22812187z"  ></path><path d="M270.51669908 707.85892558m-42.36549141-1e-8a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M365.18076014 679.78038143l-0.02607106 53.75203194 433.30121039-0.22812188-0.0195533-53.75203193-433.25558603 0.22812187z"  ></path></symbol><symbol id="md-editor-icon-code-row" viewBox="0 0 1024 1024"><path d="M616.98155188 365.94904204c-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516528 8.48464016-8.48396123 22.24052512-8.48396123 30.72516527 0L809.01332562 496.53048523c8.48464016 8.48464016 8.48464016 22.24052512 1e-8 30.72516527L647.70671715 688.56225897c-8.48464016 8.48464016-22.24052512 8.48464016-30.72516529 0-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516526L759.08518666 515.73413788a5.43147326 5.43147326 0 0 0 0-7.68146107L616.98155188 365.94904204zM264.30241473 515.73413788L406.40537059 657.83709371c8.48464016 8.48464016 8.48464016 22.24052512-1e-8 30.72516526s-22.24052512 8.48464016-30.72516528 0L214.37359684 527.25565051c-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516529l161.30660846-161.30660846c8.48464016-8.48396123 22.24052512-8.48396123 30.72516529 0 8.48464016 8.48464016 8.48464016 22.24052512 0 30.72516528L264.30241473 508.05267681a5.43147326 5.43147326 0 0 0 0 7.68146106zM558.43909632 310.49098437c11.69124619 2.69944222 18.98096223 14.36556783 16.28152003 26.05681399L491.33188639 697.74484345c-2.69876327 11.69124619-14.3648889 18.98096223-26.05613506 16.28152001-11.69124619-2.69876327-18.98096223-14.3648889-16.28219896-26.05613507L532.38296127 326.77318332c2.69876327-11.69124619 14.3648889-18.98096223 26.05613505-16.28219895z"  ></path></symbol><symbol id="md-editor-icon-quote" viewBox="0 0 1024 1024"><path d="M478.2078125 305.82124999l0 81.2025c0 11.0109375-8.926875 19.9378125-19.9378125 19.93781251-39.2934375 0-60.665625 40.2975-63.6271875 119.8378125l63.6271875 0c11.0109375 0 19.9378125 8.9353125 19.9378125 19.9378125l0 171.45c0 11.0109375-8.926875 19.9378125-19.9378125 19.9378125L288.625625 738.125c-11.019375 0-19.9378125-8.9353125-19.9378125-19.9378125l0-171.45c0-38.1290625 3.8390625-73.119375 11.4075-104.0090625 7.7625-31.674375 19.67625001-59.36624999 35.40375-82.31625 16.183125-23.5828125 36.4246875-42.08625001 60.1678125-54.97875 23.9034375-12.9684375 51.6965625-19.5496875 82.6115625-19.5496875C469.2809375 285.8834375 478.2078125 294.8103125 478.2078125 305.82124999zM735.374375 406.9615625c11.0109375 0 19.9378125-8.9353125 19.9378125-19.93781249l0-81.2025c0-11.0109375-8.926875-19.9378125-19.9378125-19.93781251-30.9065625 0-58.6996875 6.58125001-82.60312499 19.5496875-23.743125 12.8925-43.993125 31.3959375-60.17625001 54.97875-15.7275 22.95-27.64124999 50.641875-35.40375001 82.3246875-7.56 30.898125-11.3990625 65.8884375-11.39906249 104.000625l0 171.45c0 11.0109375 8.926875 19.9378125 19.9378125 19.9378125l169.6359375 0c11.0109375 0 19.9378125-8.9353125 19.93781251-19.9378125l0-171.45c0-11.0109375-8.926875-19.9378125-19.93781251-19.9378125L672.65 526.799375C675.569375 447.2590625 696.629375 406.9615625 735.374375 406.9615625z"  ></path></symbol><symbol id="md-editor-icon-title" viewBox="0 0 1024 1024"><path d="M314.24609375 264.80761693h81.01318385v206.32324271h250.65307617V264.80761693h81.01318309v494.38476563h-81.01318309v-218.81469727H395.2592776V759.19238256H314.24609375z"  ></path></symbol><symbol id="md-editor-icon-github" viewBox="0 0 1024 1024"><path d="M620.62946531 837.8883953a27.15736647 27.15736647 0 0 1-27.15736649-27.15736647v-105.09900749a64.36295809 64.36295809 0 0 0-17.92386174-51.87056937 27.15736647 27.15736647 0 0 1-5.97462079-27.15736649 27.15736647 27.15736647 0 0 1 22.54061444-17.65228787c78.21321488-8.96193087 150.72338284-34.76142862 150.72338282-162.94419766a121.39342726 121.39342726 0 0 0-33.13198727-83.10154081 27.15736647 27.15736647 0 0 1-5.97462017-27.15736648A108.62946531 108.62946531 0 0 0 707.53303719 267.58370352a228.66502383 228.66502383 0 0 0-71.69544698 35.0330025 27.15736647 27.15736647 0 0 1-22.26904054 3.80203107 333.49245808 333.49245808 0 0 0-175.97973347 0 27.15736647 27.15736647 0 0 1-22.26903993-3.80203107A217.25893001 217.25893001 0 0 0 343.62432931 267.58370352a108.62946531 108.62946531 0 0 0 3.80203106 64.90610521 27.15736647 27.15736647 0 0 1-5.97462079 27.15736647A119.76398527 119.76398527 0 0 0 308.31975294 445.19287897c0 127.09647417 72.51016795 153.71069291 150.9949567 162.94419765a27.15736647 27.15736647 0 0 1 22.26903992 17.92386173 27.15736647 27.15736647 0 0 1-5.97462016 27.15736648 63.54823709 63.54823709 0 0 0-17.92386174 50.51270128V810.73102883a27.15736647 27.15736647 0 0 1-54.31473297 0v-47.52539057A133.88581595 133.88581595 0 0 1 262.96695146 702.10156414c-10.59137286-13.57868292-19.82487759-24.98477676-29.05838233-27.15736648a27.15736647 27.15736647 0 1 1 13.0355358-54.31473235 112.43149638 112.43149638 0 0 1 58.65991117 47.25381732c22.5406138 28.78680846 41.00762327 52.14214327 97.76651859 40.46447552v-2.71573681a115.14723321 115.14723321 0 0 1 8.14720989-50.24112739c-76.5837729-17.38071462-157.51272461-64.36295809-157.512724-209.92644112a173.26399663 173.26399663 0 0 1 37.47716547-108.62946531 162.94419766 162.94419766 0 0 1 7.87563601-106.72844947A27.15736647 27.15736647 0 0 1 316.73853669 213.26897117C326.51518855 211.36795532 363.44920627 205.93648228 435.4162271 251.28928375a396.49754741 396.49754741 0 0 1 180.32491228 0C687.70815959 205.93648228 724.64217794 211.36795532 734.41882979 213.26897117a27.15736647 27.15736647 0 0 1 17.38071463 15.47969877 162.94419766 162.94419766 0 0 1 7.87563601 106.72844948 174.07871762 174.07871762 0 0 1 37.47716547 108.62946468c0 154.25384065-93.69291365 196.8909053-157.24115074 210.74116271a117.59139619 117.59139619 0 0 1 7.87563601 52.95686425V810.73102883a27.15736647 27.15736647 0 0 1-27.15736586 27.15736647z"  ></path></symbol><symbol id="md-editor-icon-fullscreen-exit" viewBox="0 0 1024 1024"><path d="M663.00853518 634.20814825H736.04827177a20.36802471 20.36802471 0 1 0 0-40.73604942H613.84012354a20.36802471 20.36802471 0 0 0-20.36802471 20.36802471v122.20814823a20.36802471 20.36802471 0 1 0 40.7360494 0v-73.0397366l87.42974607 87.42974606a20.36802471 20.36802471 0 1 0 28.79020292-28.81057095L663.00853518 634.20814825zM389.79185175 663.00853518V736.04827177a20.36802471 20.36802471 0 1 0 40.73604942 0V613.84012354a20.36802471 20.36802471 0 0 0-20.36802471-20.36802471H287.95172823a20.36802471 20.36802471 0 1 0 0 40.7360494h73.0397366l-87.42974606 87.42974607a20.36802471 20.36802471 0 1 0 28.81057095 28.79020292L389.79185175 663.00853518zM663.00853518 389.79185175H736.04827177a20.36802471 20.36802471 0 1 1 0 40.73604942H613.84012354a20.36802471 20.36802471 0 0 1-20.36802471-20.36802471V287.95172823a20.36802471 20.36802471 0 1 1 40.7360494 0v73.0397366l87.42974607-87.42974606a20.36802471 20.36802471 0 1 1 28.79020292 28.81057095L663.00853518 389.79185175zM389.79185175 360.99146482V287.95172823a20.36802471 20.36802471 0 1 1 40.73604942 0v122.20814823a20.36802471 20.36802471 0 0 1-20.36802471 20.36802471H287.95172823a20.36802471 20.36802471 0 1 1 0-40.7360494h73.0397366l-87.42974606-87.42974607a20.36802471 20.36802471 0 1 1 28.81057095-28.79020293L389.79185175 360.99146482z"  ></path></symbol><symbol id="md-editor-icon-fullscreen" viewBox="0 0 1024 1024"><path d="M585.86803606 585.86803606a20.36802471 20.36802471 0 0 1 28.78680846 0l101.02540254 100.97108801V627.41880646l0.19010178-2.77005136A20.36802471 20.36802471 0 0 1 756.41629648 627.41880646v115.41880708l-0.21725872 2.44416298a13.57868292 13.57868292 0 0 1-13.36142422 11.13451996h-115.41880708l-2.77005136-0.19010177a20.36802471 20.36802471 0 0 1-17.59797334-20.17792294l0.19010177-2.77005135a20.36802471 20.36802471 0 0 1 20.17792293-17.59797336h59.47463215l-101.02540255-101.02540254-1.98248732-2.28121876a20.36802471 20.36802471 0 0 1 1.98248732-26.5055897z m-147.73607212 0a20.36802471 20.36802471 0 0 1 1.98248732 26.5055897l-1.98248732 2.28121876-101.02540255 101.02540254h59.47463215a20.36802471 20.36802471 0 0 1 20.17792293 17.59797336l0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-17.59797334 20.17792294L396.58119354 756.41629648H281.16238646a13.57868292 13.57868292 0 0 1-13.36142422-11.13451996L267.58370352 742.83761354v-115.41880708a20.36802471 20.36802471 0 0 1 40.54594764-2.77005136l0.19010178 2.77005136v59.42031763l101.02540253-100.97108803a20.36802471 20.36802471 0 0 1 28.78680847 0zM742.83761354 267.58370352a13.57868292 13.57868292 0 0 1 13.36142422 11.13451996L756.41629648 281.16238646v115.41880708a20.36802471 20.36802471 0 0 1-40.54594764 2.77005136L715.68024706 396.58119354V337.16087593L614.65484453 438.13196394a20.36802471 20.36802471 0 0 1-30.76929579-26.5055897l1.98248732-2.28121876 101.02540255-101.02540254h-59.47463215a20.36802471 20.36802471 0 0 1-20.17792294-17.59797336L607.05078176 287.95172823a20.36802471 20.36802471 0 0 1 17.59797334-20.17792294L627.41880646 267.58370352h115.41880708zM396.58119354 267.58370352l2.77005136 0.19010177a20.36802471 20.36802471 0 0 1 17.59797334 20.17792294l-0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-20.17792293 17.59797336H337.1065614l101.02540254 101.02540253 1.98248732 2.28121877a20.36802471 20.36802471 0 0 1-30.76929578 26.5055897L308.31975294 337.16087593V396.58119354l-0.19010178 2.77005136A20.36802471 20.36802471 0 0 1 267.58370352 396.58119354V281.16238646l0.21725872-2.44416298A13.57868292 13.57868292 0 0 1 281.16238646 267.58370352h115.41880708z"  ></path></symbol><symbol id="md-editor-icon-code" viewBox="0 0 1024 1024"><path d="M286.78396126 504.04289189A27.04873681 27.04873681 0 0 0 294.74107001 484.84263353V349.05580234a27.15736647 27.15736647 0 0 1 27.15736585-27.15736648 27.15736647 27.15736647 0 0 0 0-54.31473234C276.98015246 267.58370352 240.42633703 304.13751833 240.42633703 349.05580234v124.54368154l-19.20025774 19.20025837a27.15736647 27.15736647 0 0 0 0 38.4005155l19.20025774 19.20025837V674.94419766c0 44.91828402 36.55381479 81.47209883 81.47209883 81.47209882a27.15736647 27.15736647 0 0 0 0-54.31473234 27.15736647 27.15736647 0 0 1-27.15736585-27.15736648v-135.78683119a27.04873681 27.04873681 0 0 0-7.95710875-19.20025836L278.82685316 512l7.9571081-7.95710811zM808.6670694 501.59872892a27.18452343 27.18452343 0 0 0-5.89314869-8.79898667L783.57366297 473.59948388V349.05580234c0-44.91828402-36.55381479-81.47209883-81.47209883-81.47209882a27.15736647 27.15736647 0 1 0 0 54.31473234 27.15736647 27.15736647 0 0 1 27.15736585 27.15736648v135.78683119a27.10305134 27.10305134 0 0 0 7.95710875 19.20025836l7.9571081 7.95710811-7.9571081 7.95710811A27.04873681 27.04873681 0 0 0 729.25892999 539.15736647v135.78683119a27.15736647 27.15736647 0 0 1-27.15736585 27.15736648 27.15736647 27.15736647 0 1 0 0 54.31473233c44.91828402 0 81.47209883-36.55381479 81.47209883-81.47209881v-124.54368154l19.20025774-19.20025837a27.18452343 27.18452343 0 0 0 5.89314869-29.60152883zM612.40078333 329.6111283a27.211681 27.211681 0 0 0-44.26650723 9.39644832l-162.835568 325.88839529a27.13020891 27.13020891 0 0 0 15.20812492 35.27741881 27.32031068 27.32031068 0 0 0 35.35889088-15.12665281l162.80841104-325.88839531a27.07589439 27.07589439 0 0 0-6.24619466-29.5472143z"  ></path></symbol><symbol id="md-editor-icon-catalog" viewBox="0 0 1024 1024"><path d="M683.13318788 654.61099014c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331864s7.98621522-17.11331865 17.11331863-17.11331864h285.22198028c9.12710341 0 17.11331865 7.98621522 17.11331864 17.11331864zM683.13318788 515.42266388c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331864s7.98621522-17.11331865 17.11331863-17.11331864h285.22198028c9.12710341 0 17.11331865 6.84532775 17.11331864 17.11331863zM683.13318788 375.09344941c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331865S371.67078554 357.98013076 380.79788896 357.98013076h285.22198028c9.12710341 0 17.11331865 7.98621522 17.11331864 17.11331864z"  ></path><path d="M723.06426543 859.97081603H322.61260528c-59.32617188 0-107.24346465-47.91729278-107.24346466-107.24346466V294.09040684c0-59.32617188 47.91729278-107.24346465 107.24346466-107.24346395H723.06426543c59.32617188 0 107.24346465 47.91729278 107.24346466 107.24346392v457.49605637c1.1408882 60.46706009-46.77640459 108.38435213-107.24346466 108.38435285zM322.61260528 221.07358017c-39.93107754 0-73.01682665 33.08574982-73.01682737 73.01682664v457.49605637c0 39.93107754 33.08574982 73.01682665 73.01682737 73.01682737H723.06426543c39.93107754 0 73.01682665-33.08574982 73.01682666-73.01682737V294.09040684C797.22198028 254.15932999 764.13623047 221.07358017 723.06426543 221.07358017H322.61260528z"  ></path></symbol><symbol id="md-editor-icon-table" viewBox="0 0 1024 1024"><path d="M836.44000244 553.03908539V391.93144989c0-0.20856857 0.11587143-0.37078857 0.11587143-0.55618286s-0.11587143-0.37078857-0.11587143-0.55618286V263.77764893a23.17428589 23.17428589 0 0 0-23.17428589-23.17428589H210.73428345a23.17428589 23.17428589 0 0 0-23.17428589 23.17428589v127.04143524c0 0.20856857-0.11587143 0.37078857-0.11587143 0.55618285s0.11587143 0.34761428 0.11587143 0.55618287v161.1076355c0 0.20856857-0.11587143 0.37078857-0.11587143 0.55618286s0.11587143 0.34761428 0.11587143 0.55618286V750.43765258a23.17428589 23.17428589 0 0 0 23.17428589 23.17428589h602.5314331a23.17428589 23.17428589 0 0 0 23.17428589-23.17428589V554.15145111c0-0.20856857 0.11587143-0.37078857 0.11587143-0.55618285s-0.11587143-0.37078857-0.11587143-0.55618287z m-405.55000305-22.61810302v-115.87142946h150.63285827v115.87142946H430.88999939z m150.63285827 46.34857177V727.2633667H430.88999939V576.76955414h150.63285827z m-347.61428831-162.22000123h150.63285826v115.87142946H233.90856933v-115.87142946z m393.9628601 1e-8h162.22000122v115.87142945H627.87142945v-115.87142945zM790.09143067 286.95193482v81.24904633H233.90856933V286.95193482h556.18286132zM233.90856933 576.76955414h150.63285828V727.2633667H233.90856933V576.76955414zM627.87142945 727.2633667V576.76955414h162.2200012V727.2633667H627.87142945z"  ></path></symbol><symbol id="md-editor-icon-image" viewBox="0 0 1024 1024"><path d="M731.17724609 241.57153319H293.64672852c-41.85791017 0-75.80566406 33.94775391-75.80566407 75.80566408v358.42895507c-0.98876953 3.95507813-0.98876953 7.74536134 0 11.53564455v19.44580077c0 41.85791017 33.94775391 75.80566406 75.80566407 75.80566406h437.53051757c41.85791017 0 75.80566406-33.94775391 75.80566406-75.80566406V317.37719727c0-41.85791017-33.94775391-75.80566406-75.80566406-75.80566408z m-437.53051757 46.14257814h437.53051757c16.31469727 0 29.66308594 13.34838867 29.66308595 29.66308594v287.89672851c-17.13867188-23.23608398-37.90283203-48.61450195-59.49096681-68.71948242-12.85400391-12.0300293-28.83911133-16.97387695-46.30737304-14.50195313-27.52075195 3.95507813-57.67822266 26.86157227-92.12036133 69.87304688-8.23974609 10.21728516-15.65551758 20.43457031-21.75292969 29.16870117-30.32226563-41.85791017-89.97802734-119.14672852-140.57006836-154.74243163-14.99633789-10.546875-31.80541991-13.01879883-48.94409179-7.41577149-18.62182617 6.09741211-36.74926758 21.91772461-55.20629883 48.28491211-10.71166992 15.16113281-21.58813477 33.94775391-32.62939452 56.03027343V317.37719727c0.16479492-16.47949219 13.34838867-29.66308594 29.82788085-29.66308594z"  ></path><path d="M610.87695313 398.95068359a51.91040039 51.91040039 0 1 0 103.82080078 0 51.91040039 51.91040039 0 1 0-103.82080078 0z"  ></path></symbol></svg>',function(l){var a=(a=document.getElementsByTagName("script"))[a.length-1],c=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var o,t,i,e,h,d=function(a,c){c.parentNode.insertBefore(a,c)};if(c&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}o=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_2605852,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?d(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=o,e=l.document,h=!1,v(),e.onreadystatechange=function(){"complete"==e.readyState&&(e.onreadystatechange=null,m())})}function m(){h||(h=!0,i())}function v(){try{e.documentElement.doScroll("left")}catch(a){return void setTimeout(v,50)}m()}}(window);
\ No newline at end of file
diff --git a/src/components/read-write/index.vue b/src/components/read-write/index.vue
new file mode 100644
index 0000000..8a13186
--- /dev/null
+++ b/src/components/read-write/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="cursor w-full">
+    <slot name="read">
+      <div class="flex align-center" v-if="!isEdit" @dblclick="dblclick">
+        <auto-tooltip :content="data">
+          {{ data }}
+        </auto-tooltip>
+
+        <el-button
+          v-if="trigger === 'default' && showEditIcon"
+          class="ml-4"
+          @click.stop="editNameHandle"
+          text
+        >
+          <el-icon><EditPen /></el-icon>
+        </el-button>
+      </div>
+    </slot>
+    <slot>
+      <div class="flex align-center" @click.stop v-if="isEdit">
+        <div class="w-full">
+          <el-input
+            ref="inputRef"
+            v-model="writeValue"
+            placeholder="请输入"
+            autofocus
+            :maxlength="maxlength || '-'"
+            :show-word-limit="maxlength ? true : false"
+            @blur="isEdit = false"
+            @keyup.enter="submit"
+            clearable
+          ></el-input>
+        </div>
+
+        <span class="ml-4">
+          <el-button type="primary" text @mousedown="submit" :disabled="loading">
+            <el-icon><Select /></el-icon>
+          </el-button>
+        </span>
+        <span>
+          <el-button text @click.stop="isEdit = false" :disabled="loading">
+            <el-icon><CloseBold /></el-icon>
+          </el-button>
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue'
+defineOptions({ name: 'ReadWrite' })
+const props = defineProps({
+  data: {
+    type: String,
+    default: ''
+  },
+  showEditIcon: {
+    type: Boolean,
+    default: false
+  },
+  maxlength: {
+    type: Number,
+    default: () => 0
+  },
+  trigger: {
+    type: String,
+    default: 'default',
+    validator: (value: string) => ['default', 'dblclick', 'manual'].includes(value)
+  },
+  write: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['change', 'close'])
+const inputRef = ref()
+const isEdit = ref(false)
+const writeValue = ref('')
+const loading = ref(false)
+
+watch(isEdit, (bool) => {
+  if (!bool) {
+    writeValue.value = ''
+    emit('close')
+  } else {
+    setTimeout(() => {
+      nextTick(() => {
+        inputRef.value?.focus()
+      })
+    }, 200)
+  }
+})
+
+watch(
+  () => props.write,
+  (bool) => {
+    if (bool && props.trigger === 'manual') {
+      editNameHandle()
+    } else {
+      isEdit.value = false
+    }
+  }
+)
+
+function dblclick() {
+  if (props.trigger === 'dblclick') {
+    editNameHandle()
+  }
+}
+
+function submit() {
+  loading.value = true
+  emit('change', writeValue.value)
+  setTimeout(() => {
+    isEdit.value = false
+    loading.value = false
+  }, 200)
+}
+function editNameHandle() {
+  writeValue.value = props.data
+  isEdit.value = true
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/tag-ellipsis/index.vue b/src/components/tag-ellipsis/index.vue
new file mode 100644
index 0000000..aed01a3
--- /dev/null
+++ b/src/components/tag-ellipsis/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-tag class="tag-ellipsis flex-between mb-8" effect="plain" v-bind="$attrs">
+    <slot></slot>
+  </el-tag>
+</template>
+<script setup lang="ts">
+import { ref, computed, useSlots } from 'vue'
+defineOptions({ name: 'TagEllipsis' })
+</script>
+<style lang="scss" scoped>
+/* tag超出省略号 */
+.tag-ellipsis {
+  border: 1px solid var(--el-border-color);
+  color: var(--app-text-color);
+  border-radius: 4px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 9px;
+  box-sizing: border-box;
+
+  :deep(.el-tag__content) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
diff --git a/src/components/tags-input/index.vue b/src/components/tags-input/index.vue
new file mode 100644
index 0000000..156827c
--- /dev/null
+++ b/src/components/tags-input/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <!-- 外层div -->
+  <div ref="InputTag" class="tags-input">
+    <div class="tags-container" v-if="tagsList.length">
+      <!-- 标签 -->
+      <el-tag
+        v-for="(item, index) in tagsList"
+        :key="index"
+        @close="removeTag(index)"
+        closable
+        class="mr-8"
+        type="info"
+        >{{ item.username }}
+      </el-tag>
+    </div>
+    <!-- 输入框 -->
+    <el-autocomplete
+      :placeholder="tagsList.length == 0 ? placeholder : ''"
+      :validate-event="false"
+      v-model="currentval"
+      :fetch-suggestions="querySearchAsync"
+      @select="handleSelect"
+      :popper-class="noData ? 'platform-auto-complete' : ''"
+    >
+      <template #default="{ item }">
+        <!-- 解决匹配不到提示无匹配数据 -->
+        <div class="default" v-if="noData">{{ item.default }}</div>
+        <div class="value" v-else>{{ item.username }}</div>
+      </template>
+    </el-autocomplete>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import UserApi from '@/api/user'
+defineOptions({ name: 'TagsInput' })
+const props = defineProps({
+  tags: {
+    /* 多个 */
+    type: Array<any>,
+    default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: '请输入'
+  },
+  limit: {
+    /* 最多生成标签数 */
+    type: Number,
+    default: -1
+  }
+})
+const emit = defineEmits(['update:tags'])
+const currentval = ref('')
+const tagsList = ref<any[]>([])
+const noData = ref(false) // 是否匹配到数据了
+
+watch([tagsList, currentval], (val) => {
+  emit('update:tags', val[0])
+})
+
+const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+  if (queryString) {
+    let matchResults
+    UserApi.getUserList(queryString).then((res) => {
+      if (res.data.length === 0) {
+        noData.value = true
+        matchResults = [{ default: '无匹配数据' }]
+      } else {
+        noData.value = false
+        matchResults = res.data
+      }
+      cb(matchResults)
+    })
+  } else {
+    cb([])
+  }
+}
+
+const handleSelect = (item: any) => {
+  if (!tagsList.value.some((obj: any) => obj.id === item.id)) {
+    tagsList.value.push(item)
+  }
+  currentval.value = ''
+}
+
+function removeTag(index: number) {
+  tagsList.value.splice(index, 1)
+}
+</script>
+<style lang="scss" scoped>
+.tags-input {
+  width: 100%;
+  min-height: 70px;
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  &:hover {
+    border: 1px solid var(--el-color-primary);
+  }
+  &:focus-within {
+    border: 1px solid var(--el-color-primary);
+  }
+  :deep(.el-autocomplete) {
+    width: 100%;
+  }
+  :deep(.el-input__wrapper) {
+    background: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    resize: none;
+  }
+  .tags-container {
+    padding: 0 6px;
+  }
+}
+</style>
diff --git a/src/directives/clickoutside.ts b/src/directives/clickoutside.ts
new file mode 100644
index 0000000..0e93cf7
--- /dev/null
+++ b/src/directives/clickoutside.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
+export default {
+  install: (app: App) => {
+    app.directive('click-outside', vClickOutside)
+  }
+}
diff --git a/src/directives/hasPermission.ts b/src/directives/hasPermission.ts
new file mode 100644
index 0000000..69c9a47
--- /dev/null
+++ b/src/directives/hasPermission.ts
@@ -0,0 +1,27 @@
+import type { App } from 'vue'
+import { hasPermission } from '@/utils/permission'
+
+const display = async (el: any, binding: any) => {
+  const has = hasPermission(
+    binding.value?.permission || binding.value,
+    binding.value?.compare || 'OR'
+  )
+  if (!has) {
+    el.style.display = 'none'
+  } else {
+    delete el.style.display
+  }
+}
+
+export default {
+  install: (app: App) => {
+    app.directive('hasPermission', {
+      async created(el: any, binding: any) {
+        display(el, binding)
+      },
+      async beforeUpdate(el: any, binding: any) {
+        display(el, binding)
+      }
+    })
+  }
+}
diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 0000000..de8ee80
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue'
+
+const directives = import.meta.glob('./*.ts', { eager: true })
+const install = (app: App) => {
+  Object.keys(directives)
+    .filter((key: string) => {
+      return !key.endsWith('index.ts')
+    })
+    .forEach((key: string) => {
+      const directive: any = directives[key]
+      app.use(directive.default)
+    })
+}
+export default { install }
diff --git a/src/directives/infiniteScrollUp.ts b/src/directives/infiniteScrollUp.ts
new file mode 100644
index 0000000..c5e2410
--- /dev/null
+++ b/src/directives/infiniteScrollUp.ts
@@ -0,0 +1,151 @@
+import { nextTick } from 'vue'
+
+import { throttle } from 'lodash-unified'
+import { getScrollContainer } from 'element-plus/es/utils/index'
+import type { App } from 'vue'
+export const SCOPE = 'InfiniteScrollUP'
+export const CHECK_INTERVAL = 50
+export const DEFAULT_DELAY = 200
+export const DEFAULT_DISTANCE = 0
+
+const attributes = {
+  delay: {
+    type: Number,
+    default: DEFAULT_DELAY
+  },
+  distance: {
+    type: Number,
+    default: DEFAULT_DISTANCE
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  immediate: {
+    type: Boolean,
+    default: true
+  }
+}
+
+type Attrs = typeof attributes
+type ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }
+type InfiniteScrollCallback = () => void
+type InfiniteScrollEl = HTMLElement & {
+  [SCOPE]: {
+    container: HTMLElement | Window
+    containerEl: HTMLElement
+    instance: any
+    delay: number // export for test
+    lastScrollTop: number
+    cb: InfiniteScrollCallback
+    onScroll: () => void
+    observer?: MutationObserver
+  }
+}
+
+const getScrollOptions = (el: HTMLElement, instance: any): ScrollOptions => {
+  return Object.entries(attributes).reduce((acm: any, [name, option]) => {
+    const { type, default: defaultValue } = option
+    const attrVal: any = el.getAttribute(`infinite-scroll-up-${name}`)
+    let value = instance[attrVal] ?? attrVal ?? defaultValue
+    value = value === 'false' ? false : value
+    value = type(value)
+    acm[name] = Number.isNaN(value) ? defaultValue : value
+    return acm
+  }, {} as ScrollOptions)
+}
+
+const destroyObserver = (el: InfiniteScrollEl) => {
+  const { observer } = el[SCOPE]
+
+  if (observer) {
+    observer.disconnect()
+    delete el[SCOPE].observer
+  }
+}
+
+const handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {
+  const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE]
+  const { disabled } = getScrollOptions(el, instance)
+  const { scrollTop } = containerEl
+
+  el[SCOPE].lastScrollTop = scrollTop
+
+  // trigger only if full check has done and not disabled and scroll down
+
+  if (observer || disabled || scrollTop > 0) return
+
+  if (scrollTop == 0) {
+    cb.call(instance)
+  }
+}
+
+function checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {
+  const { containerEl, instance } = el[SCOPE]
+  const { disabled } = getScrollOptions(el, instance)
+
+  if (disabled || containerEl.clientHeight == 0) return
+
+  if (containerEl.scrollTop <= 0) {
+    cb.call(instance)
+  } else {
+    destroyObserver(el)
+  }
+}
+
+const InfiniteScroll = {
+  async mounted(el: any, binding: any) {
+    const { instance, value: cb } = binding
+
+    // ensure parentNode mounted
+    await nextTick()
+
+    const { delay, immediate } = getScrollOptions(el, instance)
+    const container = getScrollContainer(el, true)
+    const containerEl = container === window ? document.documentElement : (container as HTMLElement)
+    const onScroll = throttle(handleScroll.bind(null, el, cb), delay)
+
+    if (!container) return
+
+    el[SCOPE] = {
+      instance,
+      container,
+      containerEl,
+      delay,
+      cb,
+      onScroll,
+      lastScrollTop: containerEl.scrollTop
+    }
+
+    if (immediate) {
+      const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL))
+      el[SCOPE].observer = observer
+      observer.observe(el, { childList: true, subtree: true })
+      checkFull(el, cb)
+    }
+
+    container.addEventListener('scroll', onScroll)
+  },
+  unmounted(el: any) {
+    if (!el[SCOPE]) return
+    const { container, onScroll } = el[SCOPE]
+
+    container?.removeEventListener('scroll', onScroll)
+    destroyObserver(el)
+  },
+  async updated(el: any) {
+    if (!el[SCOPE]) {
+      await nextTick()
+    } else {
+      const { containerEl, cb, observer } = el[SCOPE]
+      if (containerEl.clientHeight && observer) {
+        checkFull(el, cb)
+      }
+    }
+  }
+}
+export default {
+  install: (app: App) => {
+    app.directive('infinite-scroll-up', InfiniteScroll)
+  }
+}
diff --git a/src/directives/resize.ts b/src/directives/resize.ts
new file mode 100644
index 0000000..255b94b
--- /dev/null
+++ b/src/directives/resize.ts
@@ -0,0 +1,31 @@
+import type { App } from 'vue'
+export default {
+  install: (app: App) => {
+    app.directive('resize', {
+      created(el: any, binding: any) {
+        // 记录长宽
+        let width = ''
+        let height = ''
+        function getSize() {
+          const style = (document.defaultView as any).getComputedStyle(el)
+          // 如果当前长宽和历史长宽不同
+          if (width !== style.width || height !== style.height) {
+            // binding.value在这里就是下面的resizeChart函数
+
+            binding.value({
+              width: parseFloat(style.width),
+              height: parseFloat(style.height)
+            })
+          }
+          width = style.width
+          height = style.height
+        }
+
+        ;(el as any).__vueDomResize__ = setInterval(getSize, 500)
+      },
+      unmounted(el: any, binding: any) {
+        clearInterval((el as any).__vueDomResize__)
+      }
+    })
+  }
+}
diff --git a/src/enums/application.ts b/src/enums/application.ts
new file mode 100644
index 0000000..ee0f6d4
--- /dev/null
+++ b/src/enums/application.ts
@@ -0,0 +1,5 @@
+export enum SearchMode {
+  embedding = '向量检索',
+  keywords = '全文检索',
+  blend = '混合检索'
+}
diff --git a/src/enums/common.ts b/src/enums/common.ts
new file mode 100644
index 0000000..3afd8fc
--- /dev/null
+++ b/src/enums/common.ts
@@ -0,0 +1,16 @@
+export enum DeviceType {
+  Mobile = 'Mobile',
+  Desktop = 'Desktop'
+}
+
+export enum ValidType {
+  Application = 'application',
+  Dataset = 'dataset',
+  User = 'user'
+}
+
+export enum ValidCount {
+  Application = 5,
+  Dataset = 50,
+  User = 2
+}
diff --git a/src/enums/document.ts b/src/enums/document.ts
new file mode 100644
index 0000000..f3a7d24
--- /dev/null
+++ b/src/enums/document.ts
@@ -0,0 +1,16 @@
+export enum hitHandlingMethod {
+  optimization = '模型优化',
+  directly_return = '直接回答'
+}
+
+export enum hitStatus {
+  waiting = '等待中',
+  processing = '处理中',
+  completed = '已完成',
+  failed = '失败'
+}
+
+export enum isActivated {
+  true = '启用',
+  false = '禁用'
+}
diff --git a/src/enums/model.ts b/src/enums/model.ts
new file mode 100644
index 0000000..6253767
--- /dev/null
+++ b/src/enums/model.ts
@@ -0,0 +1,18 @@
+export enum PermissionType {
+  PRIVATE = '私有',
+  PUBLIC = '公用'
+}
+export enum PermissionDesc {
+  PRIVATE = '仅当前用户使用',
+  PUBLIC = '所有用户都可使用，不能编辑'
+}
+
+export enum modelType {
+  EMBEDDING = '向量模型',
+  LLM = '大语言模型',
+  STT = '语音识别',
+  TTS = '语音合成',
+  IMAGE = '图片理解',
+  TTI = '图片生成',
+  RERANKER = '重排模型'
+}
diff --git a/src/enums/team.ts b/src/enums/team.ts
new file mode 100644
index 0000000..4e72f36
--- /dev/null
+++ b/src/enums/team.ts
@@ -0,0 +1,6 @@
+export enum TeamEnum {
+  MANAGE = 'MANAGE',
+  USE = 'USE',
+  DATASET = 'DATASET',
+  APPLICATION = 'APPLICATION'
+}
diff --git a/src/enums/workflow.ts b/src/enums/workflow.ts
new file mode 100644
index 0000000..ca683bd
--- /dev/null
+++ b/src/enums/workflow.ts
@@ -0,0 +1,19 @@
+export enum WorkflowType {
+  Base = 'base-node',
+  Start = 'start-node',
+  AiChat = 'ai-chat-node',
+  SearchDataset = 'search-dataset-node',
+  Question = 'question-node',
+  Condition = 'condition-node',
+  Reply = 'reply-node',
+  FunctionLib = 'function-lib-node',
+  FunctionLibCustom = 'function-node',
+  RrerankerNode = 'reranker-node',
+  Application = 'application-node',
+  DocumentExtractNode = 'document-extract-node',
+  ImageUnderstandNode = 'image-understand-node',
+  FormNode = 'form-node',
+  TextToSpeechNode = 'text-to-speech-node',
+  SpeechToTextNode = 'speech-to-text-node',
+    ImageGenerateNode = 'image-generate-node'
+}
diff --git a/src/layout/components/app-header/index.vue b/src/layout/components/app-header/index.vue
new file mode 100644
index 0000000..dae3957
--- /dev/null
+++ b/src/layout/components/app-header/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
+    <el-alert
+      v-if="user.isExpire()"
+      title="未上传 License 或 License 已过期。"
+      type="warning"
+      class="border-b"
+      show-icon
+      :closable="false"
+    />
+    <TopBar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import TopBar from '../top-bar/index.vue'
+import useStore from '@/stores'
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+</script>
+
+<style lang="scss" scoped>
+.app-header {
+  background: var(--app-header-bg-color);
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}
+</style>
diff --git a/src/layout/components/app-main/index.vue b/src/layout/components/app-main/index.vue
new file mode 100644
index 0000000..1598772
--- /dev/null
+++ b/src/layout/components/app-main/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition appear name="fade-transform" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUpdate } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const cachedViews: any = ref([])
+onBeforeUpdate(() => {
+  const { name, meta } = route
+  if (name && !cachedViews.value.includes(name)) {
+    cachedViews.value.push(name)
+  }
+})
+</script>
diff --git a/src/layout/components/breadcrumb/index.vue b/src/layout/components/breadcrumb/index.vue
new file mode 100644
index 0000000..c380d37
--- /dev/null
+++ b/src/layout/components/breadcrumb/index.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="breadcrumb ml-4 mt-4 mb-12 flex">
+    <back-button :to="activeMenu" class="mt-4"></back-button>
+    <el-dropdown
+      placement="bottom"
+      trigger="click"
+      @command="changeMenu"
+      class="w-full"
+      style="display: block"
+    >
+      <div class="breadcrumb-hover flex-between cursor">
+        <div class="flex align-center">
+          <AppAvatar
+            v-if="isApplication && isAppIcon(current?.icon)"
+            shape="square"
+            :size="24"
+            style="background: none"
+            class="mr-8"
+          >
+            <img :src="current?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="isApplication"
+            :name="current?.name"
+            pinyinColor
+            shape="square"
+            class="mr-8"
+            :size="24"
+          />
+
+          <AppAvatar
+            v-else-if="isDataset && current?.type === '1'"
+            class="mr-8 avatar-purple"
+            shape="square"
+            :size="24"
+          >
+            <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="24">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <div class="ellipsis">{{ current?.name }}</div>
+        </div>
+
+        <el-button text>
+          <el-icon><CaretBottom /></el-icon>
+        </el-button>
+      </div>
+      <template #dropdown>
+        <el-scrollbar>
+          <div style="max-height: 400px">
+            <el-dropdown-menu>
+              <template v-for="(item, index) in list" :key="index">
+                <div :class="item.id === id ? 'dropdown-active' : ''">
+                  <el-dropdown-item :command="item.id">
+                    <div class="flex align-center">
+                      <AppAvatar
+                        v-if="isApplication && isAppIcon(item?.icon)"
+                        shape="square"
+                        :size="24"
+                        style="background: none"
+                        class="mr-8"
+                      >
+                        <img :src="item?.icon" alt="" />
+                      </AppAvatar>
+                      <AppAvatar
+                        v-else-if="isApplication"
+                        :name="item.name"
+                        pinyinColor
+                        class="mr-12"
+                        shape="square"
+                        :size="24"
+                      />
+                      <AppAvatar
+                        v-else-if="isDataset && item.type === '1'"
+                        class="mr-12 avatar-purple"
+                        shape="square"
+                        :size="24"
+                      >
+                        <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <AppAvatar v-else class="mr-12 avatar-blue" shape="square" :size="24">
+                        <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <span class="ellipsis"> {{ item?.name }}</span>
+                    </div>
+                  </el-dropdown-item>
+                </div>
+              </template>
+            </el-dropdown-menu>
+          </div>
+        </el-scrollbar>
+        <div class="breadcrumb__footer border-t" style="padding: 8px 11px; min-width: 200px">
+          <template v-if="isApplication">
+            <div class="w-full text-left cursor" @click="openCreateDialog">
+              <el-button link>
+                <el-icon class="mr-4"><Plus /></el-icon> 创建应用
+              </el-button>
+            </div>
+          </template>
+          <template v-else-if="isDataset">
+            <div class="w-full text-left cursor" @click="openCreateDialog">
+              <el-button link>
+                <el-icon class="mr-4"><Plus /></el-icon> 创建知识库
+              </el-button>
+            </div>
+          </template>
+        </div>
+      </template>
+    </el-dropdown>
+  </div>
+  <CreateApplicationDialog ref="CreateApplicationDialogRef" @refresh="refresh" />
+  <CreateDatasetDialog ref="CreateDatasetDialogRef" @refresh="refresh" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
+import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
+import CreateDatasetDialog from '@/views/dataset/component/CreateDatasetDialog.vue'
+import { isAppIcon, isWorkFlow } from '@/utils/application'
+import useStore from '@/stores'
+const { common, dataset, application } = useStore()
+const route = useRoute()
+const router = useRouter()
+const {
+  meta: { activeMenu },
+  params: { id }
+} = route as any
+
+onBeforeRouteLeave((to, from) => {
+  common.saveBreadcrumb(null)
+})
+
+const CreateDatasetDialogRef = ref()
+const CreateApplicationDialogRef = ref()
+const list = ref<any[]>([])
+const loading = ref(false)
+
+const breadcrumbData = computed(() => common.breadcrumb)
+
+const current = computed(() => {
+  return list.value?.filter((v) => v.id === id)?.[0]
+})
+
+const isApplication = computed(() => {
+  return activeMenu.includes('application')
+})
+const isDataset = computed(() => {
+  return activeMenu.includes('dataset')
+})
+
+function openCreateDialog() {
+  if (isDataset.value) {
+    CreateDatasetDialogRef.value.open()
+  } else if (isApplication.value) {
+    CreateApplicationDialogRef.value.open()
+  }
+}
+
+function changeMenu(id: string) {
+  const lastMatched = route.matched[route.matched.length - 1]
+  if (lastMatched) {
+    if (isDataset.value) {
+      router.push({ name: lastMatched.name, params: { id: id } })
+    } else if (isApplication.value) {
+      const type = list.value?.filter((v) => v.id === id)?.[0]?.type
+      if (
+        isWorkFlow(type) &&
+        (lastMatched.name === 'AppSetting' || lastMatched.name === 'AppHitTest')
+      ) {
+        router.push({ path: `/application/${id}/${type}/overview` })
+      } else {
+        router.push({
+          name: lastMatched.name,
+          params: { id: id, type: type }
+        })
+      }
+    }
+  }
+}
+
+function getDataset() {
+  loading.value = true
+  dataset
+    .asyncGetAllDataset()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+function getApplication() {
+  loading.value = true
+  application
+    .asyncGetAllApplication()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+function refresh() {
+  common.saveBreadcrumb(null)
+}
+onMounted(() => {
+  if (!breadcrumbData.value) {
+    if (isDataset.value) {
+      getDataset()
+    } else if (isApplication.value) {
+      getApplication()
+    }
+  } else {
+    list.value = breadcrumbData.value
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.dropdown-active) {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  .el-dropdown-menu__item {
+    color: var(--el-dropdown-menuItem-hover-color);
+  }
+}
+.breadcrumb {
+  .breadcrumb-hover {
+    padding: 4px;
+    border-radius: 4px;
+    &:hover {
+      background: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
+  }
+  &__footer {
+    &:hover {
+      background-color: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/index.ts b/src/layout/components/index.ts
new file mode 100644
index 0000000..c6d38f7
--- /dev/null
+++ b/src/layout/components/index.ts
@@ -0,0 +1,4 @@
+export { default as Sidebar } from './sidebar/index.vue'
+export { default as AppMain } from './app-main/index.vue'
+export { default as TopBar } from './top-bar/index.vue'
+export { default as AppHeader } from './app-header/index.vue'
diff --git a/src/layout/components/sidebar/SidebarItem.vue b/src/layout/components/sidebar/SidebarItem.vue
new file mode 100644
index 0000000..8601d63
--- /dev/null
+++ b/src/layout/components/sidebar/SidebarItem.vue
@@ -0,0 +1,109 @@
+<template>
+  <div v-if="(!menu.meta || !menu.meta.hidden) && showMenu()" class="sidebar-item">
+    <el-sub-menu
+      v-if="menu?.children && menu?.children.length > 0"
+      :index="menu.path"
+      popper-class="sidebar-container-popper"
+    >
+      <template #title>
+        <el-icon>
+          <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
+        </el-icon>
+        <span>{{ menu.meta?.title as string }}</span>
+      </template>
+      <sidebar-item
+        v-hasPermission="child.meta?.permission"
+        v-for="(child, index) in menu?.children"
+        :key="index"
+        :menu="child"
+        :activeMenu="activeMenu"
+      >
+      </sidebar-item>
+    </el-sub-menu>
+    <el-menu-item
+      v-else
+      ref="subMenu"
+      :index="menu.path"
+      popper-class="sidebar-popper"
+      @click="clickHandle(menu)"
+    >
+      <template #title>
+        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
+        <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
+      </template>
+    </el-menu-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
+import { isWorkFlow } from '@/utils/application'
+const props = defineProps<{
+  menu: RouteRecordRaw
+  activeMenu: any
+}>()
+
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { id, type }
+} = route as any
+
+
+
+function showMenu() {
+  if (isWorkFlow(type)) {
+    return props.menu.name !== 'AppHitTest'
+  } else {
+    return true
+  }
+}
+
+function clickHandle(item: any) {
+  if (isWorkFlow(type) && item.name === 'AppSetting') {
+    router.push({ path: `/application/${id}/workflow` })
+  }
+}
+const menuIcon = computed(() => {
+  if (props.activeMenu === props.menu.path) {
+    return props.menu.meta?.iconActive || props.menu?.meta?.icon
+  } else {
+    return props.menu?.meta?.icon
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.sidebar-item {
+  .sidebar-icon {
+    font-size: 20px;
+    margin-top: -2px;
+  }
+  .el-menu-item {
+    padding: 13px 12px 13px 16px !important;
+    font-weight: 500;
+    border-radius: 4px;
+    &:hover {
+      background: none;
+      color: var(--el-color-primary);
+    }
+  }
+  :deep(.el-sub-menu__title) {
+    padding: 13px 12px 13px 16px !important;
+    &:hover {
+      background: none;
+      color: var(--el-color-primary);
+    }
+  }
+  .el-sub-menu {
+    .el-menu-item {
+      padding-left: 43px !important;
+    }
+  }
+  .el-menu-item.is-active {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+}
+</style>
diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue
new file mode 100644
index 0000000..4fc4523
--- /dev/null
+++ b/src/layout/components/sidebar/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="sidebar p-8">
+    <div v-if="showBreadcrumb">
+      <AppBreadcrumb />
+    </div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu :default-active="activeMenu" router>
+        <sidebar-item
+          v-hasPermission="menu.meta?.permission"
+          v-for="(menu, index) in subMenuList"
+          :key="index"
+          :menu="menu"
+          :activeMenu="activeMenu"
+        >
+        </sidebar-item>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { getChildRouteListByPathAndName } from '@/router/index'
+import SidebarItem from './SidebarItem.vue'
+import AppBreadcrumb from './../breadcrumb/index.vue'
+
+const route = useRoute()
+
+const showBreadcrumb = computed(() => {
+  const { meta } = route as any
+  return (
+    meta?.activeMenu &&
+    (meta?.activeMenu.includes('dataset') || meta?.activeMenu.includes('application'))
+  )
+})
+
+const subMenuList = computed(() => {
+  const { meta } = route
+  return getChildRouteListByPathAndName(meta.parentPath, meta.parentName)
+})
+
+const activeMenu = computed(() => {
+  const { path, meta } = route
+  return meta.active || path
+})
+</script>
+
+<style lang="scss">
+.sidebar {
+  .el-menu {
+    height: 100%;
+    border: none;
+  }
+}
+</style>
diff --git a/src/layout/components/top-bar/avatar/APIKeyDialog.vue b/src/layout/components/top-bar/avatar/APIKeyDialog.vue
new file mode 100644
index 0000000..39d6797
--- /dev/null
+++ b/src/layout/components/top-bar/avatar/APIKeyDialog.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-dialog
+    :title="$t('layout.topbar.avatar.apiKey')"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-card shadow="never" class="layout-bg mb-16">
+      <el-text type="info" class="color-secondary">{{
+        $t('layout.topbar.avatar.apiServiceAddress')
+      }}</el-text>
+      <p style="margin-top: 10px">
+        <span class="vertical-middle lighter break-all">
+          {{ apiUrl }}
+        </span>
+        <el-button type="primary" text @click="copyClick(apiUrl)">
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </p>
+    </el-card>
+
+    <el-button type="primary" class="mb-16" @click="createApiKey">
+      {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
+    </el-button>
+    <el-table :data="apiKey" class="mb-16" :loading="loading">
+      <el-table-column prop="secret_key" label="API Key">
+        <template #default="{ row }">
+          <span class="vertical-middle lighter break-all">
+            {{ row.secret_key }}
+          </span>
+          <el-button type="primary" text @click="copyClick(row.secret_key)">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')"
+        width="60"
+      >
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')"
+        width="170"
+      >
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')"
+        align="left"
+        width="80"
+      >
+        <template #default="{ row }">
+          <span class="mr-4">
+            <el-tooltip
+              effect="dark"
+              :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')"
+              placement="top"
+            >
+              <el-button type="primary" text @click.stop="settingApiKey(row)">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip
+            effect="dark"
+            :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')"
+            placement="top"
+          >
+            <el-button type="primary" text @click="deleteApiKey(row)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import systemKeyApi from '@/api/system-api-key'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const props = defineProps({
+  userId: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['addData'])
+
+const apiUrl = window.location.origin + '/doc/'
+const SettingAPIKeyDialogRef = ref()
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const apiKey = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    apiKey.value = null
+  }
+})
+
+function settingApiKey(row: any) {
+  SettingAPIKeyDialogRef.value.open(row)
+}
+
+function deleteApiKey(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
+    t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
+    {
+      confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'),
+      cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      systemKeyApi.delAPIKey(row.id, loading).then(() => {
+        MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess'))
+        getApiKeyList()
+      })
+    })
+    .catch(() => {})
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool
+    ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
+    : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
+  systemKeyApi.putAPIKey(row.id, obj, loading).then((res) => {
+    MsgSuccess(str)
+    getApiKeyList()
+  })
+}
+
+function createApiKey() {
+  systemKeyApi.postAPIKey(loading).then((res) => {
+    getApiKeyList()
+  })
+}
+
+const open = () => {
+  getApiKeyList()
+  dialogVisible.value = true
+}
+
+function getApiKeyList() {
+  systemKeyApi.getAPIKey().then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+function refresh() {
+  getApiKeyList()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/layout/components/top-bar/avatar/AboutDialog.vue b/src/layout/components/top-bar/avatar/AboutDialog.vue
new file mode 100644
index 0000000..8a185c5
--- /dev/null
+++ b/src/layout/components/top-bar/avatar/AboutDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-dialog
+    v-model="aboutDialogVisible"
+    class="about-dialog border-r-4"
+    :class="!isDefaultTheme ? 'dialog-custom-header' : ''"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="logo flex-center" :id="titleId" :class="titleClass">
+        <LogoFull height="59px" />
+      </div>
+    </template>
+    <div class="about-ui" v-loading="loading">
+      <div class="flex">
+        <span class="label">授权给</span><span>{{ licenseInfo?.corporation || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">到期时间</span>
+        <span
+          >{{ licenseInfo?.expired || '-' }}
+          <span class="danger" v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"
+            >（{{ fromNowDate(licenseInfo?.expired) }}）</span
+          ></span
+        >
+      </div>
+      <div class="flex">
+        <span class="label">版本</span><span>{{ user.showXpack() ? '专业版' : '社区版' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">版本号</span><span>{{ user.version }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">序列号</span><span>{{ licenseInfo?.serialNo || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">备注</span><span>{{ licenseInfo?.remark || '-' }}</span>
+      </div>
+      <div class="mt-16 flex align-center" v-if="user.showXpack()">
+        <el-upload
+          ref="uploadRef"
+          action="#"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+          v-hasPermission="new Role('ADMIN')"
+        >
+          <el-button class="border-primary mr-16">更新 License</el-button>
+        </el-upload>
+      </div>
+    </div>
+    <div class="border-t text-center mt-16 p-16 pb-0">
+      <el-text type="info">2014-2025 版权所有 © 杭州飞致云信息科技有限公司</el-text>
+    </div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import licenseApi from '@/api/license'
+import { fromNowDate } from '@/utils/time'
+import { Role } from '@/utils/permission/type'
+import useStore from '@/stores'
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const aboutDialogVisible = ref(false)
+const loading = ref(false)
+const licenseInfo = ref<any>(null)
+const isUpdate = ref(false)
+
+watch(aboutDialogVisible, (bool) => {
+  if (!bool) {
+    if (isUpdate.value) {
+      window.location.reload()
+    }
+    isUpdate.value = false
+  }
+})
+const open = () => {
+  if (user.showXpack()) {
+    getLicenseInfo()
+  }
+
+  aboutDialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  let fd = new FormData()
+  fd.append('license_file', file.raw)
+  licenseApi.putLicense(fd, loading).then((res: any) => {
+    getLicenseInfo()
+    isUpdate.value = true
+  })
+}
+function getLicenseInfo() {
+  licenseApi.getLicense(loading).then((res: any) => {
+    licenseInfo.value = res.data?.license
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.about-dialog {
+  padding: 0 0 24px 0;
+  width: 620px;
+  font-weight: 400;
+  .el-dialog__header {
+    background: var(--app-header-bg-color);
+    margin-right: 0;
+    height: 140px;
+    box-sizing: border-box;
+    border-radius: 4px 4px 0 0;
+    &.show-close {
+      padding-right: 0;
+    }
+  }
+  .el-dialog__title {
+    height: 140px;
+    box-sizing: border-box;
+  }
+  .about-ui {
+    margin: 0 auto;
+    font-weight: 400;
+    font-size: 14px;
+    margin-top: 24px;
+    line-height: 36px;
+    padding: 0 40px;
+
+    .label {
+      width: 150px;
+      text-align: left;
+      color: var(--app-text-color-secondary);
+    }
+  }
+  &.dialog-custom-header {
+    .el-dialog__header {
+      background: var(--el-color-primary-light-9) !important;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/top-bar/avatar/ResetPassword.vue b/src/layout/components/top-bar/avatar/ResetPassword.vue
new file mode 100644
index 0000000..02e332b
--- /dev/null
+++ b/src/layout/components/top-bar/avatar/ResetPassword.vue
@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    v-model="resetPasswordDialog"
+    :title="$t('layout.topbar.avatar.resetPassword')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      class="reset-password-form"
+      ref="resetPasswordFormRef1"
+      :model="resetPasswordForm"
+      :rules="rules1"
+    >
+      <p class="mb-8 lighter">{{ $t('layout.topbar.avatar.dialog.newPassword') }}</p>
+      <el-form-item prop="password" style="margin-bottom: 8px">
+        <el-input
+          type="password"
+          class="input-item"
+          v-model="resetPasswordForm.password"
+          :placeholder="$t('layout.topbar.avatar.dialog.enterPassword')"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="re_password">
+        <el-input
+          type="password"
+          class="input-item"
+          v-model="resetPasswordForm.re_password"
+          :placeholder="$t('layout.topbar.avatar.dialog.confirmPassword')"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <el-form
+      class="reset-password-form mb-24"
+      ref="resetPasswordFormRef2"
+      :model="resetPasswordForm"
+      :rules="rules2"
+    >
+      <p class="mb-8 lighter">{{ $t('layout.topbar.avatar.dialog.useEmail') }}</p>
+      <el-form-item style="margin-bottom: 8px">
+        <el-input
+          class="input-item"
+          :disabled="true"
+          v-bind:modelValue="user.userInfo?.email"
+          :placeholder="$t('layout.topbar.avatar.dialog.enterEmail')"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <div class="flex-between w-full">
+          <el-input
+            class="code-input"
+            v-model="resetPasswordForm.code"
+            :placeholder="$t('layout.topbar.avatar.dialog.enterVerificationCode')"
+          >
+          </el-input>
+          <el-button
+            :disabled="isDisabled"
+            class="send-email-button ml-8"
+            @click="sendEmail"
+            :loading="loading"
+          >
+            {{
+              isDisabled
+                ? $t('layout.topbar.avatar.dialog.resend', { time })
+                : $t('layout.topbar.avatar.dialog.getVerificationCode')
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetPasswordDialog = false">{{
+          $t('layout.topbar.avatar.dialog.cancel')
+        }}</el-button>
+        <el-button type="primary" @click="resetPassword">
+          {{ $t('layout.topbar.avatar.dialog.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import UserApi from '@/api/user'
+import useStore from '@/stores'
+import { useRouter } from 'vue-router'
+import { t } from '@/locales'
+const router = useRouter()
+const { user } = useStore()
+
+const resetPasswordDialog = ref<boolean>(false)
+
+const resetPasswordForm = ref<ResetCurrentUserPasswordRequest>({
+  code: '',
+  password: '',
+  re_password: ''
+})
+
+const resetPasswordFormRef1 = ref<FormInstance>()
+const resetPasswordFormRef2 = ref<FormInstance>()
+
+const loading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
+
+const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: t('layout.topbar.avatar.dialog.enterPassword'),
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('layout.topbar.avatar.dialog.passwordLength'),
+      trigger: 'blur'
+    }
+  ],
+  re_password: [
+    {
+      required: true,
+      message: t('layout.topbar.avatar.dialog.confirmPassword'),
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('layout.topbar.avatar.dialog.passwordLength'),
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error(t('layout.topbar.avatar.dialog.passwordMismatch')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+  // @ts-ignore
+  code: [
+    {
+      required: true,
+      message: t('layout.topbar.avatar.dialog.enterVerificationCode'),
+      trigger: 'blur'
+    }
+  ]
+})
+/**
+ * 发送验证码
+ */
+const sendEmail = () => {
+  resetPasswordFormRef1.value?.validate().then(() => {
+    UserApi.sendEmailToCurrent(loading).then(() => {
+      MsgSuccess(t('layout.topbar.avatar.dialog.verificationCodeSentSuccess'))
+      isDisabled.value = true
+      handleTimeChange()
+    })
+  })
+}
+
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
+
+const open = () => {
+  resetPasswordForm.value = {
+    code: '',
+    password: '',
+    re_password: ''
+  }
+  resetPasswordDialog.value = true
+  resetPasswordFormRef1.value?.resetFields()
+  resetPasswordFormRef2.value?.resetFields()
+}
+const resetPassword = () => {
+  resetPasswordFormRef1.value?.validate().then(() => {
+    resetPasswordFormRef2.value
+      ?.validate()
+      .then(() => {
+        return UserApi.resetCurrentUserPassword(resetPasswordForm.value)
+      })
+      .then(() => {
+        return user.logout()
+      })
+      .then(() => {
+        router.push({ name: 'login' })
+      })
+  })
+}
+const close = () => {
+  resetPasswordDialog.value = false
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue b/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue
new file mode 100644
index 0000000..e7d95a8
--- /dev/null
+++ b/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="settingFormRef" :model="form">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.allow_cross_domain"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.cross_domain_list"
+          :placeholder="
+            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')
+          "
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')
+        }}</el-button>
+        <el-button type="primary" @click="submit(settingFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance } from 'element-plus'
+import overviewApi from '@/api/system-api-key'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const settingFormRef = ref()
+const form = ref<any>({
+  allow_cross_domain: false,
+  cross_domain_list: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const APIKeyId = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      allow_cross_domain: false,
+      cross_domain_list: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  APIKeyId.value = data.id
+  form.value.allow_cross_domain = data.allow_cross_domain
+  form.value.cross_domain_list = data.cross_domain_list?.length
+    ? data.cross_domain_list?.join('\n')
+    : ''
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        allow_cross_domain: form.value.allow_cross_domain,
+        cross_domain_list: form.value.cross_domain_list
+          ? form.value.cross_domain_list.split('\n').filter(function (item: string) {
+              return item !== ''
+            })
+          : []
+      }
+      overviewApi.putAPIKey(APIKeyId.value, obj, loading).then((res) => {
+        emit('refresh')
+        //@ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.SettingAPIKeyDialog.successMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/layout/components/top-bar/avatar/index.vue b/src/layout/components/top-bar/avatar/index.vue
new file mode 100644
index 0000000..dd7b65e
--- /dev/null
+++ b/src/layout/components/top-bar/avatar/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-dropdown trigger="click" type="primary">
+    <div class="flex-center cursor">
+      <AppAvatar>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+      </AppAvatar>
+      <span class="ml-8">{{ user.userInfo?.username }}</span>
+      <el-icon class="el-icon--right">
+        <CaretBottom/>
+      </el-icon>
+    </div>
+
+    <template #dropdown>
+      <el-dropdown-menu class="avatar-dropdown">
+        <div class="userInfo">
+          <p class="bold mb-4" style="font-size: 14px">{{ user.userInfo?.username }}</p>
+          <p>
+            <el-text type="info">
+              {{ user.userInfo?.email }}
+            </el-text>
+          </p>
+        </div>
+        <el-dropdown-item class="border-t p-8" @click="openResetPassword">
+          {{ $t('layout.topbar.avatar.resetPassword') }}
+        </el-dropdown-item>
+        <div v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')">
+          <el-dropdown-item class="border-t p-8" @click="openAPIKeyDialog">
+            {{ $t('layout.topbar.avatar.apiKey') }}
+          </el-dropdown-item>
+        </div>
+        <el-dropdown-item class="border-t" @click="openAbout">
+          {{ $t('layout.topbar.avatar.about') }}
+        </el-dropdown-item>
+        <el-dropdown-item class="border-t" @click="logout">
+          {{ $t('layout.topbar.avatar.logout') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <ResetPassword ref="resetPasswordRef"></ResetPassword>
+  <AboutDialog ref="AboutDialogRef"></AboutDialog>
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
+  <UserPwdDialog ref="UserPwdDialogRef"/>
+</template>
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+import useStore from '@/stores'
+import {useRouter} from 'vue-router'
+import ResetPassword from './ResetPassword.vue'
+import AboutDialog from './AboutDialog.vue'
+import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
+import APIKeyDialog from './APIKeyDialog.vue'
+import {ComplexPermission} from '@/utils/permission/type'
+
+const {user} = useStore()
+const router = useRouter()
+
+const UserPwdDialogRef = ref()
+const AboutDialogRef = ref()
+const APIKeyDialogRef = ref()
+const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
+
+const openAbout = () => {
+  AboutDialogRef.value?.open()
+}
+
+function openAPIKeyDialog() {
+  APIKeyDialogRef.value.open()
+}
+
+const openResetPassword = () => {
+  resetPasswordRef.value?.open()
+}
+
+const logout = () => {
+  user.logout().then(() => {
+    router.push({name: 'login'})
+  })
+}
+
+onMounted(() => {
+  if (user.userInfo?.is_edit_password) {
+    UserPwdDialogRef.value.open(user.userInfo)
+  }
+})
+</script>
+<style lang="scss" scoped>
+.avatar-dropdown {
+  min-width: 210px;
+
+  .userInfo {
+    padding: 12px 11px;
+  }
+
+  :deep(.el-dropdown-menu__item) {
+    padding: 12px 11px;
+  }
+}
+</style>
diff --git a/src/layout/components/top-bar/index.vue b/src/layout/components/top-bar/index.vue
new file mode 100644
index 0000000..93c117a
--- /dev/null
+++ b/src/layout/components/top-bar/index.vue
@@ -0,0 +1,106 @@
+·
+<template>
+  <div class="top-bar-container border-b flex-between">
+    <div class="flex-center h-full">
+      <div class="app-title-container cursor" @click="router.push('/')">
+        <div class="logo flex-center">
+          <LogoFull />
+        </div>
+      </div>
+      <TopMenu></TopMenu>
+    </div>
+    <div class="flex-center avatar">
+      <!-- <el-button
+        v-if="!user.isEnterprise()"
+        link
+        type="primary"
+        @click="toUrl('https://maxkb.cn/pricing.html')"
+        class="mr-8"
+      >
+        <AppIcon iconName="app-pricing" class="mr-8" style="font-size: 20px"></AppIcon>
+        购买专业版
+      </el-button> -->
+      <!-- <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.github')"
+        placement="top"
+        v-if="user.themeInfo?.showProject"
+      >
+        <AppIcon
+          iconName="app-github"
+          class="cursor color-secondary mr-8 ml-8"
+          style="font-size: 20px"
+          @click="toUrl(user.themeInfo?.projectUrl)"
+        ></AppIcon>
+      </el-tooltip> -->
+      <el-tooltip
+        effect="dark"
+        :content="$t('layout.topbar.wiki')"
+        placement="top"
+        v-if="user.themeInfo?.showUserManual"
+      >
+        <AppIcon
+          iconName="app-reading"
+          class="cursor color-secondary mr-8 ml-8"
+          style="font-size: 20px"
+          @click="toUrl(user.themeInfo?.userManualUrl)"
+        ></AppIcon>
+      </el-tooltip>
+
+      <el-dropdown v-if="false" trigger="click" type="primary">
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="(lang, index) in langList"
+              :key="index"
+              :value="lang.value"
+              @click="changeLang(lang.value)"
+              >{{ lang.label }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+        <AppIcon
+          iconName="app-translate"
+          class="cursor color-secondary mr-16 ml-8"
+          style="font-size: 20px"
+        >
+        </AppIcon>
+      </el-dropdown>
+      <Avatar></Avatar>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import TopMenu from './top-menu/index.vue'
+import Avatar from './avatar/index.vue'
+import { useRouter } from 'vue-router'
+import { langList } from '@/locales/index'
+import { useLocale } from '@/locales/useLocale'
+
+import useStore from '@/stores'
+const { user } = useStore()
+const router = useRouter()
+
+const { changeLocale } = useLocale()
+const changeLang = (lang: string) => {
+  changeLocale(lang)
+}
+function toUrl(url: string) {
+  window.open(url, '_blank')
+}
+</script>
+<style lang="scss">
+.top-bar-container {
+  height: var(--app-header-height);
+  box-sizing: border-box;
+  padding: var(--app-header-padding);
+
+  .app-title-container {
+    margin-right: 45px;
+  }
+
+  .line {
+    height: 2em;
+  }
+}
+</style>
diff --git a/src/layout/components/top-bar/top-menu/MenuItem.vue b/src/layout/components/top-bar/top-menu/MenuItem.vue
new file mode 100644
index 0000000..8e63664
--- /dev/null
+++ b/src/layout/components/top-bar/top-menu/MenuItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="menu-item-container flex-center h-full" :class="isActive ? 'active' : ''"
+    @click="router.push({ name: menu.name })">
+    <!-- <div class="icon">
+      <AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
+    </div> -->
+    <div class="title">
+      {{
+        $te(`layout.topbar.MenuItem.${String(props.menu.name)}`)
+          ? $t(`layout.topbar.MenuItem.${String(props.menu.name)}`)
+          : menu.meta?.title
+      }}
+    </div>
+
+  </div>
+</template>
+<script setup lang="ts">
+import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
+import { computed } from 'vue'
+const router = useRouter()
+const route = useRoute()
+
+const props = defineProps<{
+  menu: RouteRecordRaw
+}>()
+
+const isActive = computed(() => {
+  const { name, path, meta } = route
+  return (name == props.menu.name && path == props.menu.path) || meta?.activeMenu == props.menu.path
+})
+</script>
+<style lang="scss" scoped>
+.menu-item-container {
+  margin-right: 28px;
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+
+  .icon {
+    font-size: 15px;
+    margin-right: 5px;
+    margin-top: 2px;
+  }
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.active {
+  color: var(--el-color-primary);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    content: '';
+    background-color: var(--el-color-primary-light-9);
+    border-bottom: 3px solid var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/layout/components/top-bar/top-menu/index.vue b/src/layout/components/top-bar/top-menu/index.vue
new file mode 100644
index 0000000..b8b7390
--- /dev/null
+++ b/src/layout/components/top-bar/top-menu/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="top-menu-container flex align-center h-full">
+    <MenuItem
+      :menu="menu"
+      v-hasPermission="menu.meta?.permission"
+      v-for="(menu, index) in topMenuList"
+      :key="index"
+    >
+    </MenuItem>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getChildRouteListByPathAndName } from '@/router/index'
+import MenuItem from './MenuItem.vue'
+
+const topMenuList = computed(() => {
+  return getChildRouteListByPathAndName('/', 'home')
+})
+</script>
+<style lang="scss" scope>
+
+</style>
diff --git a/src/layout/hooks/useResize.ts b/src/layout/hooks/useResize.ts
new file mode 100644
index 0000000..d1c0a34
--- /dev/null
+++ b/src/layout/hooks/useResize.ts
@@ -0,0 +1,38 @@
+import { nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+import { DeviceType } from '@/enums/common'
+/** 参考 Bootstrap 的响应式设计 WIDTH = 600 */
+const WIDTH = 600
+
+/** 根据大小变化重新布局 */
+export default () => {
+  const { common } = useStore()
+  const _isMobile = () => {
+    const rect = document.body?.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+  }
+
+  const _resizeHandler = () => {
+    if (!document.hidden) {
+      const isMobile = _isMobile()
+      common.toggleDevice(isMobile ? DeviceType.Mobile : DeviceType.Desktop)
+    }
+  }
+
+  onBeforeMount(() => {
+    window.addEventListener('resize', _resizeHandler)
+  })
+
+  onMounted(() => {
+    nextTick(() => {
+      if (_isMobile()) {
+        common.toggleDevice(DeviceType.Mobile)
+      }
+    })
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', _resizeHandler)
+  })
+}
diff --git a/src/layout/layout-template/AppLayout.vue b/src/layout/layout-template/AppLayout.vue
new file mode 100644
index 0000000..71bca0d
--- /dev/null
+++ b/src/layout/layout-template/AppLayout.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { AppHeader, AppMain } from '../components'
+import useStore from '@/stores'
+const { user } = useStore()
+</script>
+
+<template>
+  <div class="app-layout">
+    <AppHeader />
+    <div class="app-main" :class="user.isExpire() ? 'isExpire' : ''">
+      <AppMain />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/layout/layout-template/DetailLayout.vue b/src/layout/layout-template/DetailLayout.vue
new file mode 100644
index 0000000..9e1a6c2
--- /dev/null
+++ b/src/layout/layout-template/DetailLayout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="main-layout h-full flex">
+    <div class="sidebar-container">
+      <Sidebar />
+    </div>
+    <div class="view-container">
+      <AppMain />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {  Sidebar, AppMain } from '../components'
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+
+</style>
diff --git a/src/layout/layout-template/SystemLayout.vue b/src/layout/layout-template/SystemLayout.vue
new file mode 100644
index 0000000..46221f3
--- /dev/null
+++ b/src/layout/layout-template/SystemLayout.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="app-layout">
+    <AppHeader />
+    <div class="app-main" :class="user.isExpire() ? 'isExpire' : ''">
+      <div class="main-layout h-full flex">
+        <div class="sidebar-container">
+          <Sidebar />
+        </div>
+        <div class="view-container">
+          <AppMain />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppHeader, Sidebar, AppMain } from '../components'
+import useStore from '@/stores'
+const { user } = useStore()
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/layout/layout-template/index.scss b/src/layout/layout-template/index.scss
new file mode 100644
index 0000000..8dcba63
--- /dev/null
+++ b/src/layout/layout-template/index.scss
@@ -0,0 +1,26 @@
+.app-layout {
+  background-color: var(--app-layout-bg-color);
+  height: 100%;
+}
+
+.app-main {
+  position: relative;
+  height: 100%;
+  padding: var(--app-header-height) 0 0 !important;
+  box-sizing: border-box;
+  overflow: auto;
+  &.isExpire {
+    padding-top: calc(var(--app-header-height) + 40px) !important;
+  }
+}
+
+.sidebar-container {
+  box-sizing: border-box;
+  transition: width 0.28s;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background-color: var(--sidebar-bg-color);
+}
+.view-container {
+  width: calc(100% - var(--sidebar-width));
+}
diff --git a/src/locales/index.ts b/src/locales/index.ts
new file mode 100644
index 0000000..51f94c1
--- /dev/null
+++ b/src/locales/index.ts
@@ -0,0 +1,66 @@
+import { useLocalStorage, usePreferredLanguages } from '@vueuse/core';
+import { computed } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+// 导入语言文件
+const langModules = import.meta.glob('./lang/*/index.ts', { eager: true }) as Record<string, () => Promise<{ default: Object }>>;
+
+const langModuleMap = new Map<string, Object>();
+
+export const langCode: Array<string> = [];
+
+export const localeConfigKey = 'MaxKB-locale';
+
+// 获取浏览器默认语言环境
+const languages = usePreferredLanguages();
+
+// 生成语言模块列表
+const generateLangModuleMap = () => {
+    const fullPaths = Object.keys(langModules);
+    fullPaths.forEach((fullPath) => {
+        const k = fullPath.replace('./lang', '');
+        const startIndex = 1;
+        const lastIndex = k.lastIndexOf('/');
+        const code = k.substring(startIndex, lastIndex);
+        langCode.push(code);
+        langModuleMap.set(code, langModules[fullPath]);
+    });
+};
+
+// 导出 Message
+const importMessages = computed(() => {
+    generateLangModuleMap();
+
+    const message: Recordable = {};
+    langModuleMap.forEach((value: any, key) => {
+        message[key] = value.default;
+    });
+    return message;
+});
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: useLocalStorage(localeConfigKey, 'zh_CN').value || languages.value[0] || 'zh_CN',
+    fallbackLocale: 'zh_CN',
+    messages: importMessages.value,
+    globalInjection: true,
+});
+
+export const langList = computed(() => {
+    if (langModuleMap.size === 0) generateLangModuleMap();
+
+    const list:any=[]
+    langModuleMap.forEach((value: any, key) => {
+        list.push({
+            label: value.default.lang,
+            value: key,
+        });
+    });
+
+    return list;
+});
+
+// @ts-ignore
+export const { t } = i18n.global;
+
+export default i18n;
diff --git a/src/locales/lang/en_US/components/index.ts b/src/locales/lang/en_US/components/index.ts
new file mode 100644
index 0000000..bd77588
--- /dev/null
+++ b/src/locales/lang/en_US/components/index.ts
@@ -0,0 +1,4 @@
+
+export default {
+
+};
diff --git a/src/locales/lang/en_US/index.ts b/src/locales/lang/en_US/index.ts
new file mode 100644
index 0000000..57efe0b
--- /dev/null
+++ b/src/locales/lang/en_US/index.ts
@@ -0,0 +1,90 @@
+import en from 'element-plus/es/locale/lang/en'
+import components from './components'
+import layout from './layout'
+import views from './views'
+
+export default {
+  lang: 'English',
+  layout,
+  views,
+  components,
+  en,
+  login: {
+    authentication: 'Login Authentication',
+    ldap: {
+      title: 'LDAP Settings',
+      address: 'LDAP Address',
+      serverPlaceholder: 'Please enter LDAP address',
+      bindDN: 'Bind DN',
+      bindDNPlaceholder: 'Please enter Bind DN',
+      password: 'Password',
+      passwordPlaceholder: 'Please enter password',
+      ou: 'User OU',
+      ouPlaceholder: 'Please enter User OU',
+      ldap_filter: 'User Filter',
+      ldap_filterPlaceholder: 'Please enter User Filter',
+      ldap_mapping: 'LDAP Attribute Mapping',
+      ldap_mappingPlaceholder: 'Please enter LDAP Attribute Mapping',
+      test: 'Test Connection',
+      enableAuthentication: 'Enable LDAP Authentication',
+      save: 'Save',
+      testConnectionSuccess: 'Test Connection Success',
+      testConnectionFailed: 'Test Connection Failed',
+      saveSuccess: 'Save Success'
+    },
+    cas: {
+      title: 'CAS Settings',
+      ldpUri: 'ldpUri',
+      ldpUriPlaceholder: 'Please enter ldpUri',
+      validateUrl: 'Validation Address',
+      validateUrlPlaceholder: 'Please enter Validation Address',
+      redirectUrl: 'Callback Address',
+      redirectUrlPlaceholder: 'Please enter Callback Address',
+      enableAuthentication: 'Enable CAS Authentication',
+      saveSuccess: 'Save Success',
+      save: 'Save'
+    },
+    oidc: {
+      title: 'OIDC Settings',
+      authEndpoint: 'Auth Endpoint',
+      authEndpointPlaceholder: 'Please enter Auth Endpoint',
+      tokenEndpoint: 'Token Endpoint',
+      tokenEndpointPlaceholder: 'Please enter Token Endpoint',
+      userInfoEndpoint: 'User Info Endpoint',
+      userInfoEndpointPlaceholder: 'Please enter User Info Endpoint',
+      clientId: 'Client ID',
+      clientIdPlaceholder: 'Please enter Client ID',
+      clientSecret: 'Client Secret',
+      clientSecretPlaceholder: 'Please enter Client Secret',
+      logoutEndpoint: 'Logout Endpoint',
+      logoutEndpointPlaceholder: 'Please enter Logout Endpoint',
+      redirectUrl: 'Redirect URL',
+      redirectUrlPlaceholder: 'Please enter Redirect URL',
+      enableAuthentication: 'Enable OIDC Authentication'
+    },
+    jump_tip: 'Jumping to the authentication source page for authentication',
+    jump: 'Jump',
+    oauth2: {
+      title: 'OAuth2 Settings',
+      authEndpoint: 'Auth Endpoint',
+      authEndpointPlaceholder: 'Please enter Auth Endpoint',
+      tokenEndpoint: 'Token Endpoint',
+      tokenEndpointPlaceholder: 'Please enter Token Endpoint',
+      userInfoEndpoint: 'User Info Endpoint',
+      userInfoEndpointPlaceholder: 'Please enter User Info Endpoint',
+      scope: 'Scope',
+      scopePlaceholder: 'Please enter Scope',
+      clientId: 'Client ID',
+      clientIdPlaceholder: 'Please enter Client ID',
+      clientSecret: 'Client Secret',
+      clientSecretPlaceholder: 'Please enter Client Secret',
+      redirectUrl: 'Redirect URL',
+      redirectUrlPlaceholder: 'Please enter Redirect URL',
+      filedMapping: 'Field Mapping',
+      filedMappingPlaceholder: 'Please enter Field Mapping',
+      enableAuthentication: 'Enable OAuth2 Authentication',
+      save: 'Save',
+      saveSuccess: 'Save Success'
+    }
+  }
+}
diff --git a/src/locales/lang/en_US/layout.ts b/src/locales/lang/en_US/layout.ts
new file mode 100644
index 0000000..bdd3d77
--- /dev/null
+++ b/src/locales/lang/en_US/layout.ts
@@ -0,0 +1,37 @@
+export default {
+    breadcrumb: {},
+    sidebar: {},
+    topbar: {
+        github: "Project address",
+        wiki: "User manual",
+        forum: "Forum for help",
+        MenuItem: {
+            application: "Application",
+            dataset: "Knowledge base",
+            setting: "System settings"
+        },
+        avatar: {
+            resetPassword: "Change password",
+            about: "About",
+            logout: "Logout",
+            version: "Version",
+            apiKey: "API Key",
+            apiServiceAddress: "API Service Address",
+            dialog: {
+                newPassword: "New password",
+                enterPassword: "Please enter new password",
+                confirmPassword: "Confirm password",
+                passwordLength: "Password length should be between 6 and 20 characters",
+                passwordMismatch: "Passwords do not match",
+                useEmail: "Use email",
+                enterEmail: "Please enter email",
+                enterVerificationCode: "Please enter verification code",
+                getVerificationCode: "Get verification code",
+                verificationCodeSentSuccess: "Verification code sent successfully",
+                resend: "Resend",
+                cancel: "Cancel",
+                save: "Save",
+            }
+        }
+    },
+};
diff --git a/src/locales/lang/en_US/views/404.ts b/src/locales/lang/en_US/views/404.ts
new file mode 100644
index 0000000..c637111
--- /dev/null
+++ b/src/locales/lang/en_US/views/404.ts
@@ -0,0 +1,5 @@
+export default {
+    title: "404",
+    message: "Unable to Access Application",
+    operate: "Back to Home",
+};
diff --git a/src/locales/lang/en_US/views/application-overview.ts b/src/locales/lang/en_US/views/application-overview.ts
new file mode 100644
index 0000000..2875f33
--- /dev/null
+++ b/src/locales/lang/en_US/views/application-overview.ts
@@ -0,0 +1,110 @@
+export default {
+  title: 'Overview',
+  appInfo: {
+    header: 'Application Info',
+    publicAccessLink: 'Public Access Link',
+    openText: 'On',
+    closeText: 'Off',
+    copyLinkText: 'Copy Link',
+    refreshLinkText: 'Refresh Link',
+    demo: 'Demo',
+    embedThirdParty: 'Embed Third Party',
+    accessRestrictions: 'Access Restrictions',
+    displaySetting: 'Display Setting',
+    apiAccessCredentials: 'API Access Credentials',
+    apiKey: 'API Key',
+    refreshToken: {
+      msgConfirm1: 'Do you want to regenerate the public access link?',
+      msgConfirm2:
+        'Regenerating the public access link will affect third-party embedded scripts changes and will require re-embedding the new script into third-party sites. Please proceed with caution!',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      refreshSuccess: 'Refresh Successful'
+    },
+    changeState: {
+      enableSuccess: 'Enable Successful',
+      disableSuccess: 'Disable Successful'
+    },
+    APIKeyDialog: {
+      creatApiKey: 'Create',
+      status: 'Status',
+      creationDate: 'Creation Date',
+      operations: 'Operations',
+      settings: 'Settings',
+      delete: 'Delete',
+      saveSettings: 'Save Settings',
+      msgConfirm1: 'Are you sure you want to delete the API Key?',
+      msgConfirm2:
+        'Deleting the API Key cannot be undone. Please confirm if you want to delete it!',
+      confirmDelete: 'Delete',
+      deleteSuccess: 'Delete Successful',
+      cancel: 'Cancel',
+      enabledSuccess: 'Enabled',
+      disabledSuccess: 'Disabled'
+    },
+    EditAvatarDialog: {
+      title: 'Edit Logo',
+      customizeUpload: 'Custom Upload',
+      upload: 'Upload',
+      default: 'Default Logo',
+      custom: 'Custom',
+      sizeTip: 'Suggested size 32*32, supports jpg, png, gif, size no more than 10 MB',
+      cancel: 'Cancel',
+      save: 'Save',
+      fileSizeExceeded: 'File size exceeds 10 MB',
+      setSuccess: 'Setting Successful',
+      uploadImagePrompt: 'Please upload an image'
+    },
+    EmbedDialog: {
+      embedDialogTitle: 'Embed Third Party',
+      fullscreenModeTitle: 'Fullscreen Mode',
+      copyInstructions: 'Copy the following code to embed',
+      floatingModeTitle: 'Floating Mode'
+    },
+    LimitDialog: {
+      dialogTitle: 'Access Restrictions',
+      showSourceLabel: 'Show Source',
+      clientQueryLimitLabel: 'Each Client Query Limit',
+      authentication: 'Authentication',
+      authenticationValue: 'Authentication Password',
+      timesDays: 'Times/Day',
+      whitelistLabel: 'Whitelist',
+      whitelistPlaceholder:
+        'Please enter allowed third-party source addresses, one per line, such as:\nhttp://127.0.0.1:5678\nhttps://dataease.io',
+      cancelButtonText: 'Cancel',
+      saveButtonText: 'Save',
+      settingSuccessMessage: 'Setting Successful'
+    },
+    SettingAPIKeyDialog: {
+      dialogTitle: 'Settings',
+      allowCrossDomainLabel: 'Allow Cross-Domain Address',
+      crossDomainPlaceholder:
+        'Please enter allowed cross-domain addresses, if open without inputting addresses, there are no restrictions.\nCross-domain addresses one per line, such as:\nhttp://127.0.0.1:5678\nhttps://dataease.io',
+      cancelButtonText: 'Cancel',
+      saveButtonText: 'Save',
+      successMessage: 'Setting Successful'
+    }
+  },
+  monitor: {
+    monitoringStatistics: 'Monitoring Statistics',
+    customRange: 'Custom Range',
+    startDatePlaceholder: 'Start Date',
+    endDatePlaceholder: 'End Date',
+    pastDayOptions: {
+      past7Days: 'Past 7 Days',
+      past30Days: 'Past 30 Days',
+      past90Days: 'Past 90 Days',
+      past183Days: 'Past Half Year',
+      other: 'Custom'
+    },
+    charts: {
+      customerTotal: 'Total Customers',
+      customerNew: 'New Customers',
+      queryCount: 'Query Count',
+      tokensTotal: 'Total Tokens',
+      userSatisfaction: 'User Satisfaction',
+      approval: 'Approval',
+      disapproval: 'Disapproval'
+    }
+  }
+}
diff --git a/src/locales/lang/en_US/views/application.ts b/src/locales/lang/en_US/views/application.ts
new file mode 100644
index 0000000..0c153f5
--- /dev/null
+++ b/src/locales/lang/en_US/views/application.ts
@@ -0,0 +1,116 @@
+export default {
+  applicationList: {
+    title: 'Applications',
+    searchBar: {
+      placeholder: 'Search by name'
+    },
+    card: {
+      createApplication: 'Create Application',
+      overview: 'Overview',
+      demo: 'Demo',
+      setting: 'Settings',
+      delete: {
+        tooltip: 'Delete',
+        confirmTitle: 'Are you sure you want to delete this application?',
+        confirmMessage:
+          'Deleting this application will no longer provide its services. Please proceed with caution.',
+        confirmButton: 'Delete',
+        cancelButton: 'Cancel',
+        successMessage: 'Successfully deleted'
+      }
+    },
+    tooltips: {
+      demo: 'Demo',
+      setting: 'Settings',
+      delete: 'Delete'
+    }
+  },
+  applicationForm: {
+    title: {
+      create: 'Create Application',
+      edit: 'Edit Settings',
+      info: 'Application Information',
+      copy: 'Copy Application'
+    },
+    form: {
+      appName: {
+        label: 'Application Name',
+        placeholder: 'Please enter the application name',
+        requiredMessage: 'Application name is required'
+      },
+      appDescription: {
+        label: 'Application Description',
+        placeholder:
+          'Describe the application scenario and use, e.g.: MaxKB assistant answering user questions about MaxKB product usage'
+      },
+      aiModel: {
+        label: 'AI Model',
+        placeholder: 'Please select an AI model',
+        unavailable: '(Unavailable)'
+      },
+      prompt: {
+        label: 'Prompt',
+        placeholder: 'Please enter prompt',
+        tooltip:
+          'By adjusting the content of the prompt, you can guide the direction of the large model conversation. This prompt will be fixed at the beginning of the context. Variables used: {data} carries known information from the knowledge base; {question} is the question posed by the user.'
+      },
+      multipleRoundsDialogue: 'Multiple Rounds Dialogue',
+      relatedKnowledgeBase: 'Related Knowledge Base',
+      relatedKnowledgeBaseWhere: 'Associated knowledge bases are displayed here',
+      prologue: 'Prologue',
+      problemOptimization: {
+        label: 'Problem Optimization',
+        tooltip:
+          'Optimize the current question based on historical chat to better match knowledge points.'
+      },
+      addModel: 'Add Model',
+      paramSetting: 'Parameter Settings',
+      add: 'Add',
+      apptest: 'Debug Preview'
+    },
+    buttons: {
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      create: 'Create',
+      createSuccess: 'Create Success',
+      save: 'Save',
+      saveSuccess: 'Save Success',
+      copy: 'Copy',
+      copySuccess: 'Copy Success'
+    },
+    dialogues: {
+      addDataset: 'Add Related Knowledge Base',
+      removeDataset: 'Remove Knowledge Base',
+      paramSettings: 'Parameter Settings',
+      refresh: 'Refresh',
+      selectSearchMode: 'Search Mode',
+      vectorSearch: 'Vector Search',
+      vectorSearchTooltip:
+        'Vector search is a retrieval method based on vector distance calculations, suitable for large data volumes in the knowledge base.',
+      fullTextSearch: 'Full-text Search',
+      fullTextSearchTooltip:
+        'Full-text search is a retrieval method based on text similarity, suitable for small data volumes in the knowledge base.',
+      hybridSearch: 'Hybrid Search',
+      hybridSearchTooltip:
+        'Hybrid search is a retrieval method based on both vector and text similarity, suitable for medium data volumes in the knowledge base.',
+      similarityThreshold: 'Similarity Threshold',
+      topReferences: 'Top N References',
+      maxCharacters: 'Maximum Characters per Reference',
+      noReferencesAction: 'When there are no knowledge base references',
+      continueQuestioning: 'Continue Questioning AI Model',
+      provideAnswer: 'Provide a Specific Answer',
+      prompt: 'Prompt',
+      promptPlaceholder: 'Please enter a prompt',
+      concent: 'Content',
+      concentPlaceholder: 'Please enter content',
+      designated_answer:
+        'Hello, I am MaxKB Assistant. My knowledge base only contains information related to MaxKB products. Please rephrase your question.'
+    }
+  },
+  prompt: {
+    defaultPrompt:
+      'Known information:\n{data}\nResponse requirements:\n- Please use concise and professional language to answer the user\'s question.\n- If you do not know the answer, reply, "No relevant information was found in the knowledge base; it is recommended to consult technical support or refer to the official documentation for operations."\n- Avoid mentioning that your knowledge is obtained from known information.\n- Ensure the answer is consistent with the information described in the known data.\n- Please use Markdown syntax to optimize the format of the answer.\n- Directly return any images, link addresses, and script languages found in the known information.\n- Please respond in the same language as the question.\nQuestion:\n{question}',
+    defaultPrologue:
+      'Hello, I am MaxKB Assistant. You can ask me questions about using MaxKB.\n- What are the main features of MaxKB?\n- Which large language models does MaxKB support?\n- What document types does MaxKB support?'
+  }
+}
diff --git a/src/locales/lang/en_US/views/index.ts b/src/locales/lang/en_US/views/index.ts
new file mode 100644
index 0000000..076cd0a
--- /dev/null
+++ b/src/locales/lang/en_US/views/index.ts
@@ -0,0 +1,8 @@
+import notFound from './404';
+import application from './application';
+import applicationOverview from './application-overview';
+export default {
+    notFound,
+    application,
+    applicationOverview
+};
diff --git a/src/locales/lang/zh_CN/components/index.ts b/src/locales/lang/zh_CN/components/index.ts
new file mode 100644
index 0000000..bd77588
--- /dev/null
+++ b/src/locales/lang/zh_CN/components/index.ts
@@ -0,0 +1,4 @@
+
+export default {
+
+};
diff --git a/src/locales/lang/zh_CN/index.ts b/src/locales/lang/zh_CN/index.ts
new file mode 100644
index 0000000..db403b8
--- /dev/null
+++ b/src/locales/lang/zh_CN/index.ts
@@ -0,0 +1,90 @@
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import components from './components'
+import layout from './layout'
+import views from './views'
+
+export default {
+  lang: '简体中文',
+  layout,
+  views,
+  components,
+  zhCn,
+  login: {
+    authentication: '登录认证',
+    ldap: {
+      title: 'LDAP 设置',
+      address: 'LDAP 地址',
+      serverPlaceholder: '请输入LDAP 地址',
+      bindDN: '绑定DN',
+      bindDNPlaceholder: '请输入绑定 DN',
+      password: '密码',
+      passwordPlaceholder: '请输入密码',
+      ou: '用户OU',
+      ouPlaceholder: '请输入用户 OU',
+      ldap_filter: '用户过滤器',
+      ldap_filterPlaceholder: '请输入用户过滤器',
+      ldap_mapping: 'LDAP 属性映射',
+      ldap_mappingPlaceholder: '请输入 LDAP 属性映射',
+      test: '测试连接',
+      enableAuthentication: '启用 LDAP 认证',
+      save: '保存',
+      testConnectionSuccess: '测试连接成功',
+      testConnectionFailed: '测试连接失败',
+      saveSuccess: '保存成功'
+    },
+    cas: {
+      title: 'CAS 设置',
+      ldpUri: 'ldpUri',
+      ldpUriPlaceholder: '请输入ldpUri',
+      validateUrl: '验证地址',
+      validateUrlPlaceholder: '请输入验证地址',
+      redirectUrl: '回调地址',
+      redirectUrlPlaceholder: '请输入回调地址',
+      enableAuthentication: '启用 CAS 认证',
+      saveSuccess: '保存成功',
+      save: '保存'
+    },
+    oidc: {
+      title: 'OIDC 设置',
+      authEndpoint: '授权端地址',
+      authEndpointPlaceholder: '请输入授权端地址',
+      tokenEndpoint: 'Token端地址',
+      tokenEndpointPlaceholder: '请输入 Token 端地址',
+      userInfoEndpoint: '用户信息端地址',
+      userInfoEndpointPlaceholder: '请输入用户信息端地址',
+      clientId: '客户端 ID',
+      clientIdPlaceholder: '请输入客户端 ID',
+      clientSecret: '客户端密钥',
+      clientSecretPlaceholder: '请输入客户端密钥',
+      logoutEndpoint: '注销端地址',
+      logoutEndpointPlaceholder: '请输入注销端地址',
+      redirectUrl: '回调地址',
+      redirectUrlPlaceholder: '请输入回调地址',
+      enableAuthentication: '启用 OIDC 认证'
+    },
+    jump_tip: '即将跳转至认证源页面进行认证',
+    jump: '跳转',
+    oauth2: {
+      title: 'OAuth2 设置',
+      authEndpoint: '授权端地址',
+      authEndpointPlaceholder: '请输入授权端地址',
+      tokenEndpoint: 'Token 端地址',
+      tokenEndpointPlaceholder: '请输入 Token 端地址',
+      userInfoEndpoint: '用户信息端地址',
+      userInfoEndpointPlaceholder: '请输入用户信息端地址',
+      scope: '连接范围',
+      scopePlaceholder: '请输入连接范围',
+      clientId: '客户端 ID',
+      clientIdPlaceholder: '请输入客户端 ID',
+      clientSecret: '客户端密钥',
+      clientSecretPlaceholder: '请输入客户端密钥',
+      redirectUrl: '回调地址',
+      redirectUrlPlaceholder: '请输入回调地址',
+      filedMapping: '字段映射',
+      filedMappingPlaceholder: '请输入字段映射',
+      enableAuthentication: '启用 OAuth2 认证',
+      save: '保存',
+      saveSuccess: '保存成功'
+    }
+  }
+}
diff --git a/src/locales/lang/zh_CN/layout.ts b/src/locales/lang/zh_CN/layout.ts
new file mode 100644
index 0000000..7dd28ac
--- /dev/null
+++ b/src/locales/lang/zh_CN/layout.ts
@@ -0,0 +1,41 @@
+export default {
+    breadcrumb: {
+        
+    },
+    sidebar: {
+
+    },
+    topbar: {
+        github: "项目地址",
+        wiki: "用户手册",
+        forum: "论坛求助",
+        MenuItem: {
+            application: "应用",
+            dataset: "知识库",
+            setting: "系统管理"
+        },
+        avatar: {
+            resetPassword: "修改密码",
+            about: "关于",
+            logout: "退出",
+            version:"版本号",
+            apiKey: "API Key 管理",
+            apiServiceAddress: "API 服务地址",
+            dialog:{
+                newPassword:"新密码",
+                enterPassword: "请输入修改密码",
+                confirmPassword: "确认密码",
+                passwordLength:"密码长度在 6 到 20 个字符",
+                passwordMismatch:"两次密码输入不一致",
+                useEmail:"使用邮箱",
+                enterEmail: "请输入邮箱",
+                enterVerificationCode: "请输入验证码",
+                getVerificationCode: "获取验证码",
+                verificationCodeSentSuccess:"验证码发送成功",
+                resend:"重新发送",
+                cancel:"取消",
+                save:"保存",
+            }
+        }
+    },
+};
diff --git a/src/locales/lang/zh_CN/views/404.ts b/src/locales/lang/zh_CN/views/404.ts
new file mode 100644
index 0000000..a65dcbb
--- /dev/null
+++ b/src/locales/lang/zh_CN/views/404.ts
@@ -0,0 +1,5 @@
+export default {
+        title: "404",
+        message: "无法访问应用",
+        operate: "返回首页",
+};
diff --git a/src/locales/lang/zh_CN/views/application-overview.ts b/src/locales/lang/zh_CN/views/application-overview.ts
new file mode 100644
index 0000000..88e71fc
--- /dev/null
+++ b/src/locales/lang/zh_CN/views/application-overview.ts
@@ -0,0 +1,109 @@
+export default {
+  title: '概览',
+  appInfo: {
+    header: '应用信息',
+    publicAccessLink: '公开访问链接',
+    openText: '开',
+    closeText: '关',
+    copyLinkText: '复制链接',
+    refreshLinkText: '刷新链接',
+    demo: '演示',
+    embedThirdParty: '嵌入第三方',
+    accessRestrictions: '访问限制',
+    displaySetting: '显示设置',
+    apiAccessCredentials: 'API 访问凭据',
+    apiKey: 'API Key',
+    refreshToken: {
+      msgConfirm1: '是否重新生成公开访问链接?',
+      msgConfirm2:
+        '重新生成公开访问链接会影响嵌入第三方脚本变更，需要将新脚本重新嵌入第三方，请谨慎操作！',
+      confirm: '确认',
+      cancel: '取消',
+      refreshSuccess: '刷新成功'
+    },
+    changeState: {
+      enableSuccess: '启用成功',
+      disableSuccess: '禁用成功'
+    },
+    APIKeyDialog: {
+      creatApiKey: '创建',
+      status: '状态',
+      creationDate: '创建日期',
+      operations: '操作',
+      settings: '设置',
+      delete: '删除',
+      saveSettings: '保存设置',
+      msgConfirm1: '是否删除API Key',
+      msgConfirm2: '删除API Key后将无法恢复，请确认是否删除？',
+      confirmDelete: '删除',
+      deleteSuccess: '删除成功',
+      cancel: '取消',
+      enabledSuccess: '已启用',
+      disabledSuccess: '已禁用'
+    },
+    EditAvatarDialog: {
+      title: '应用头像',
+      customizeUpload: '自定义上传',
+      upload: '上传',
+      default: '默认logo',
+      custom: '自定义',
+      sizeTip: '建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB',
+      cancel: '取消',
+      save: '保存',
+      fileSizeExceeded: '文件大小超过 10 MB',
+      setSuccess: '设置成功',
+      uploadImagePrompt: '请上传一张图片'
+    },
+    EmbedDialog: {
+      embedDialogTitle: '嵌入第三方',
+      fullscreenModeTitle: '全屏模式',
+      copyInstructions: '复制以下代码进行嵌入',
+      floatingModeTitle: '浮窗模式'
+    },
+    LimitDialog: {
+      dialogTitle: '访问限制',
+      showSourceLabel: '显示知识来源',
+      clientQueryLimitLabel: '每个客户端提问限制',
+      timesDays: '次/天',
+      authentication: '身份验证',
+      authenticationValue: '验证密码',
+      whitelistLabel: '白名单',
+      whitelistPlaceholder:
+        '请输入允许嵌入第三方的源地址，一行一个，如：\nhttp://127.0.0.1:5678\nhttps://dataease.io',
+      cancelButtonText: '取消',
+      saveButtonText: '保存',
+      settingSuccessMessage: '设置成功'
+    },
+    SettingAPIKeyDialog: {
+      dialogTitle: '设置',
+      allowCrossDomainLabel: '允许跨域地址',
+      crossDomainPlaceholder:
+        '请输入允许的跨域地址，开启后不输入跨域地址则不限制。\n跨域地址一行一个，如：\nhttp://127.0.0.1:5678 \nhttps://dataease.io',
+      cancelButtonText: '取消',
+      saveButtonText: '保存',
+      successMessage: '设置成功'
+    }
+  },
+  monitor: {
+    monitoringStatistics: '监控统计',
+    customRange: '自定义范围',
+    startDatePlaceholder: '开始时间',
+    endDatePlaceholder: '结束时间',
+    pastDayOptions: {
+      past7Days: '过去7天',
+      past30Days: '过去30天',
+      past90Days: '过去90天',
+      past183Days: '过去半年',
+      other: '自定义'
+    },
+    charts: {
+      customerTotal: '用户总数',
+      customerNew: '用户新增数',
+      queryCount: '提问次数',
+      tokensTotal: 'Tokens 总数',
+      userSatisfaction: '用户满意度',
+      approval: '赞同',
+      disapproval: '反对'
+    }
+  }
+}
diff --git a/src/locales/lang/zh_CN/views/application.ts b/src/locales/lang/zh_CN/views/application.ts
new file mode 100644
index 0000000..81c4588
--- /dev/null
+++ b/src/locales/lang/zh_CN/views/application.ts
@@ -0,0 +1,114 @@
+export default {
+  applicationList: {
+    title: '应用',
+    searchBar: {
+      placeholder: '按名称搜索'
+    },
+    card: {
+      createApplication: '创建应用',
+      overview: '概览',
+      demo: '演示',
+      setting: '设置',
+      delete: {
+        tooltip: '删除',
+        confirmTitle: '是否删除应用：',
+        confirmMessage: '删除后该应用将不再提供服务，请谨慎操作。',
+        confirmButton: '删除',
+        cancelButton: '取消',
+        successMessage: '删除成功'
+      }
+    },
+    tooltips: {
+      demo: '演示',
+      setting: '设置',
+      delete: '删除'
+    }
+  },
+  applicationForm: {
+    title: {
+      create: '创建应用',
+      edit: '设置',
+      info: '应用信息',
+      copy: '复制应用'
+    },
+    form: {
+      appName: {
+        label: '应用名称',
+        placeholder: '请输入应用名称',
+        requiredMessage: '请输入应用名称'
+      },
+      appDescription: {
+        label: '应用描述',
+        placeholder: '描述该应用的应用场景及用途，如：XXX 小助手回答用户提出的 XXX 产品使用问题'
+      },
+      aiModel: {
+        label: 'AI 模型',
+        placeholder: '请选择 AI 模型',
+        unavailable: '（不可用）'
+      },
+      prompt: {
+        label: '提示词',
+        placeholder: '请输入提示词',
+        tooltip:
+          '通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头。可以使用变量：{data} 是携带知识库中已知信息；{question} 是用户提出的问题。'
+      },
+      multipleRoundsDialogue: '多轮对话',
+      relatedKnowledgeBase: '关联知识库',
+      relatedKnowledgeBaseWhere: '关联知识库展示在这里',
+      prologue: '开场白',
+      problemOptimization: {
+        label: '问题优化',
+        tooltip: '根据历史聊天优化完善当前问题，更利于匹配知识点。'
+      },
+      addModel: '添加模型',
+      paramSetting: '参数设置',
+      add: '添加',
+      apptest: '调试预览'
+    },
+    buttons: {
+      confirm: '确认',
+      cancel: '取消',
+      create: '创建',
+      createSuccess: '创建成功',
+      save: '保存',
+      saveSuccess: '保存成功',
+      copy: '复制',
+      copySuccess: '复制成功'
+    },
+    dialogues: {
+      addDataset: '添加关联知识库',
+      removeDataset: '移除知识库',
+      paramSettings: '参数设置',
+      refresh: '刷新',
+      selectSearchMode: '检索模式',
+      vectorSearch: '向量检索',
+      vectorSearchTooltip: '向量检索是一种基于向量相似度的检索方式，适用于知识库中的大数据量场景。',
+      fullTextSearch: '全文检索',
+      fullTextSearchTooltip:
+        '全文检索是一种基于文本相似度的检索方式，适用于知识库中的小数据量场景。',
+      hybridSearch: '混合检索',
+      hybridSearchTooltip:
+        '混合检索是一种基于向量和文本相似度的检索方式，适用于知识库中的中等数据量场景。',
+      similarityThreshold: '相似度高于',
+      topReferences: '引用分段数 TOP',
+      maxCharacters: '最多引用字符数',
+      noReferencesAction: '无引用知识库分段时',
+      continueQuestioning: '继续向 AI 模型提问',
+      provideAnswer: '指定回答内容',
+      prompt: '提示词',
+      promptPlaceholder: '请输入提示词',
+      concent: '内容',
+      concentPlaceholder: '请输入内容',
+      designated_answer:
+        '你好，我是 XXX 小助手，我的知识库只包含了 XXX 产品相关知识，请重新描述您的问题。'
+    }
+  },
+  prompt: {
+    defaultPrompt: `已知信息：{data}
+用户问题：{question}
+回答要求：
+ - 请使用中文回答用户问题`,
+    defaultPrologue:
+      '您好，我是 XXX 小助手，您可以向我提出 XXX 使用问题。\n- XXX 主要功能有什么？\n- XXX 如何收费？\n- 需要转人工服务'
+  }
+}
diff --git a/src/locales/lang/zh_CN/views/index.ts b/src/locales/lang/zh_CN/views/index.ts
new file mode 100644
index 0000000..076cd0a
--- /dev/null
+++ b/src/locales/lang/zh_CN/views/index.ts
@@ -0,0 +1,8 @@
+import notFound from './404';
+import application from './application';
+import applicationOverview from './application-overview';
+export default {
+    notFound,
+    application,
+    applicationOverview
+};
diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts
new file mode 100644
index 0000000..c802162
--- /dev/null
+++ b/src/locales/useLocale.ts
@@ -0,0 +1,28 @@
+import { useLocalStorage } from '@vueuse/core';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { i18n, langCode, localeConfigKey } from '@/locales/index';
+
+export function useLocale() {
+    const { locale } = useI18n({ useScope: 'global' });
+    function changeLocale(lang: string) {
+        // 如果切换的语言不在对应语言文件里则默认为简体中文
+        if (!langCode.includes(lang)) {
+            lang = 'zh_CN';
+        }
+
+        locale.value = lang;
+        useLocalStorage(localeConfigKey, 'zh_CN').value = lang;
+    }
+
+    const getComponentsLocale = computed(() => {
+        return i18n.global.getLocaleMessage(locale.value).componentsLocale;
+    });
+
+    return {
+        changeLocale,
+        getComponentsLocale,
+        locale,
+    };
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..a93fe9e
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,62 @@
+import '@/styles/index.scss'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { createApp } from 'vue'
+import { store } from '@/stores'
+import directives from '@/directives'
+import App from './App.vue'
+import router from '@/router'
+import Components from '@/components'
+import i18n from './locales'
+import { config } from 'md-editor-v3'
+
+import screenfull from 'screenfull'
+
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+import mermaid from 'mermaid'
+
+import highlight from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
+
+config({
+  editorExtensions: {
+    highlight: {
+      instance: highlight
+    },
+    screenfull: {
+      instance: screenfull
+    },
+    katex: {
+      instance: katex
+    },
+    cropper: {
+      instance: Cropper
+    },
+    mermaid: {
+      instance: mermaid
+    }
+  }
+})
+
+const app = createApp(App)
+app.use(store)
+app.use(directives)
+
+for (const [key, component] of Object.entries(ElementPlusIcons)) {
+  app.component(key, component)
+}
+app.use(ElementPlus, {
+  locale: zhCn
+})
+
+app.use(router)
+app.use(i18n)
+app.use(Components)
+app.mount('#app')
+export { app }
diff --git a/src/request/Result.ts b/src/request/Result.ts
new file mode 100644
index 0000000..c1b04e5
--- /dev/null
+++ b/src/request/Result.ts
@@ -0,0 +1,42 @@
+export class Result<T> {
+  message: string;
+  code: number;
+  data: T;
+  constructor(message: string, code: number, data: T) {
+    this.message = message;
+    this.code = code;
+    this.data = data;
+  }
+
+  static success(data: any) {
+    return new Result("请求成功", 200, data);
+  }
+  static error(message: string, code: number) {
+    return new Result(message, code, null);
+  }
+}
+
+interface Page<T> {
+  /**
+   *分页数据
+   */
+  records: Array<T>;
+  /**
+   *当前页
+   */
+  current: number;
+  /**
+   * 每页展示size
+   */
+  size: number;
+  /**
+   *总数
+   */
+  total: number;
+  /**
+   *是否有下一页
+   */
+  hasNext: boolean;
+}
+export type { Page };
+export default Result;
diff --git a/src/request/index.ts b/src/request/index.ts
new file mode 100644
index 0000000..7d65d65
--- /dev/null
+++ b/src/request/index.ts
@@ -0,0 +1,345 @@
+import axios, { type AxiosRequestConfig } from 'axios'
+import { MsgError } from '@/utils/message'
+import type { NProgress } from 'nprogress'
+import type { Ref } from 'vue'
+import type { Result } from '@/request/Result'
+import useStore from '@/stores'
+import router from '@/router'
+
+import { ref, type WritableComputedRef } from 'vue'
+
+const axiosConfig = {
+  baseURL: '/api',
+  withCredentials: false,
+  timeout: 600000,
+  headers: {}
+}
+
+const instance = axios.create(axiosConfig)
+
+/* 设置请求拦截器 */
+instance.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    if (config.headers === undefined) {
+      config.headers = {}
+    }
+    const { user } = useStore()
+    const token = user.getToken()
+    if (token) {
+      config.headers['AUTHORIZATION'] = `${token}`
+    }
+    return config
+  },
+  (err: any) => {
+    return Promise.reject(err)
+  }
+)
+
+//设置响应拦截器
+instance.interceptors.response.use(
+  (response: any) => {
+    if (response.data) {
+      if (response.data.code !== 200 && !(response.data instanceof Blob)) {
+        if (response.config.url.includes('/application/authentication')) {
+          return Promise.reject(response.data)
+        }
+        if (
+          !response.config.url.includes('/valid') &&
+          !response.config.url.includes('/function_lib/debug')
+        ) {
+          MsgError(response.data.message)
+          return Promise.reject(response.data)
+        }
+      }
+    }
+    return response
+  },
+  (err: any) => {
+    if (err.code === 'ECONNABORTED') {
+      MsgError(err.message)
+      console.error(err)
+    }
+    if (err.response?.status === 404) {
+      if (!err.response.config.url.includes('/application/authentication')) {
+        router.push('/404 ')
+      }
+    }
+    if (err.response?.status === 401) {
+      if (
+        !err.response.config.url.includes('chat/open') &&
+        !err.response.config.url.includes('application/profile')
+      ) {
+        router.push({ name: 'login' })
+      }
+    }
+
+    if (err.response?.status === 403 && !err.response.config.url.includes('chat/open')) {
+      MsgError(
+        err.response.data && err.response.data.message ? err.response.data.message : '没有权限访问'
+      )
+    }
+    return Promise.reject(err)
+  }
+)
+
+export const request = instance
+
+/* 简化请求方法，统一处理返回结果，并增加loading处理，这里以{success,data,message}格式的返回值为例，具体项目根据实际需求修改 */
+const promise: (
+  request: Promise<any>,
+  loading?: NProgress | Ref<boolean> | WritableComputedRef<boolean>
+) => Promise<Result<any>> = (request, loading = ref(false)) => {
+  return new Promise((resolve, reject) => {
+    if ((loading as NProgress).start) {
+      ;(loading as NProgress).start()
+    } else {
+      ;(loading as Ref).value = true
+    }
+    request
+      .then((response) => {
+        // blob类型的返回状态是response.status
+        if (response.status === 200) {
+          resolve(response?.data || response)
+        } else {
+          reject(response?.data || response)
+        }
+      })
+      .catch((error) => {
+        reject(error)
+      })
+      .finally(() => {
+        if ((loading as NProgress).start) {
+          ;(loading as NProgress).done()
+        } else {
+          ;(loading as Ref).value = false
+        }
+      })
+  })
+}
+
+/**
+ * 发送get请求   一般用来请求资源
+ * @param url    资源url
+ * @param params 参数
+ * @param loading loading
+ * @returns 异步promise对象
+ */
+export const get: (
+  url: string,
+  params?: unknown,
+  loading?: NProgress | Ref<boolean>,
+  timeout?: number
+) => Promise<Result<any>> = (
+  url: string,
+  params: unknown,
+  loading?: NProgress | Ref<boolean>,
+  timeout?: number
+) => {
+  return promise(request({ url: url, method: 'get', params, timeout: timeout }), loading)
+}
+
+/**
+ * faso post请求 一般用来添加资源
+ * @param url    资源url
+ * @param params 参数
+ * @param data   添加数据
+ * @param loading loading
+ * @returns 异步promise对象
+ */
+export const post: (
+  url: string,
+  data?: unknown,
+  params?: unknown,
+  loading?: NProgress | Ref<boolean>,
+  timeout?: number
+) => Promise<Result<any> | any> = (url, data, params, loading, timeout) => {
+  return promise(request({ url: url, method: 'post', data, params, timeout }), loading)
+}
+
+/**|
+ * 发送put请求 用于修改服务器资源
+ * @param url     资源地址
+ * @param params  params参数地址
+ * @param data    需要修改的数据
+ * @param loading 进度条
+ * @returns
+ */
+export const put: (
+  url: string,
+  data?: unknown,
+  params?: unknown,
+  loading?: NProgress | Ref<boolean>,
+  timeout?: number
+) => Promise<Result<any>> = (url, data, params, loading, timeout) => {
+  return promise(request({ url: url, method: 'put', data, params, timeout }), loading)
+}
+
+/**
+ * 删除
+ * @param url     删除url
+ * @param params  params参数
+ * @param loading 进度条
+ * @returns
+ */
+export const del: (
+  url: string,
+  params?: unknown,
+  data?: unknown,
+  loading?: NProgress | Ref<boolean>,
+  timeout?: number
+) => Promise<Result<any>> = (url, params, data, loading, timeout) => {
+  return promise(request({ url: url, method: 'delete', params, data, timeout }), loading)
+}
+
+/**
+ * 流处理
+ * @param url  url地址
+ * @param data 请求body
+ * @returns
+ */
+export const postStream: (url: string, data?: unknown) => Promise<Result<any> | any> = (
+  url,
+  data
+) => {
+  const { user } = useStore()
+  const token = user.getToken()
+  const headers: HeadersInit = { 'Content-Type': 'application/json' }
+  if (token) {
+    headers['AUTHORIZATION'] = `${token}`
+  }
+  return fetch(url, {
+    method: 'POST',
+    body: data ? JSON.stringify(data) : undefined,
+    headers: headers
+  })
+}
+
+export const exportExcel: (
+  fileName: string,
+  url: string,
+  params: any,
+  loading?: NProgress | Ref<boolean>
+) => Promise<any> = (
+  fileName: string,
+  url: string,
+  params: any,
+  loading?: NProgress | Ref<boolean>
+) => {
+  return promise(request({ url: url, method: 'get', params, responseType: 'blob' }), loading).then(
+    (res: any) => {
+      if (res) {
+        const blob = new Blob([res], {
+          type: 'application/vnd.ms-excel'
+        })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = fileName
+        link.click()
+        //释放内存
+        window.URL.revokeObjectURL(link.href)
+      }
+      return true
+    }
+  )
+}
+
+export const exportFile: (
+  fileName: string,
+  url: string,
+  params: any,
+  loading?: NProgress | Ref<boolean>
+) => Promise<any> = (
+  fileName: string,
+  url: string,
+  params: any,
+  loading?: NProgress | Ref<boolean>
+) => {
+  return promise(request({ url: url, method: 'get', params, responseType: 'blob' }), loading).then(
+    (res: any) => {
+      if (res) {
+        const blob = new Blob([res], {
+          type: 'application/octet-stream'
+        })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = fileName
+        link.click()
+        //释放内存
+        window.URL.revokeObjectURL(link.href)
+      }
+      return true
+    }
+  )
+}
+
+export const exportExcelPost: (
+  fileName: string,
+  url: string,
+  params: any,
+  data: any,
+  loading?: NProgress | Ref<boolean>
+) => Promise<any> = (
+  fileName: string,
+  url: string,
+  params: any,
+  data: any,
+  loading?: NProgress | Ref<boolean>
+) => {
+  return promise(
+    request({
+      url: url,
+      method: 'post',
+      params, // 查询字符串参数
+      data, // 请求体数据
+      responseType: 'blob'
+    }),
+    loading
+  ).then((res: any) => {
+    if (res) {
+      const blob = new Blob([res], {
+        type: 'application/vnd.ms-excel'
+      })
+      const link = document.createElement('a')
+      link.href = window.URL.createObjectURL(blob)
+      link.download = fileName
+      link.click()
+      // 释放内存
+      window.URL.revokeObjectURL(link.href)
+    }
+    return true
+  })
+}
+
+export const download: (
+  url: string,
+  method: string,
+  data?: any,
+  params?: any,
+  loading?: NProgress | Ref<boolean>
+) => Promise<any> = (
+  url: string,
+  method: string,
+  data?: any,
+  params?: any,
+  loading?: NProgress | Ref<boolean>
+) => {
+  return promise(request({ url: url, method: method, data, params, responseType: 'blob' }), loading)
+}
+
+/**
+ * 与服务器建立ws链接
+ * @param url websocket路径
+ * @returns  返回一个websocket实例
+ */
+export const socket = (url: string) => {
+  let protocol = 'ws://'
+  if (window.location.protocol === 'https:') {
+    protocol = 'wss://'
+  }
+  let uri = protocol + window.location.host + url
+  if (!import.meta.env.DEV) {
+    uri = protocol + window.location.host + import.meta.env.VITE_BASE_PATH + url
+  }
+  return new WebSocket(uri)
+}
+export default instance
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..2a1572b
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,77 @@
+import { hasPermission } from '@/utils/permission/index'
+import {
+  createRouter,
+  createWebHistory,
+  createWebHashHistory,
+  type NavigationGuardNext,
+  type RouteLocationNormalized,
+  type RouteRecordRaw,
+  type RouteRecordName
+} from 'vue-router'
+import useStore from '@/stores'
+import { routes } from '@/router/routes'
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes
+})
+
+// 路由前置拦截器
+router.beforeEach(
+  async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+    if (to.name === '404') {
+      next()
+      return
+    }
+    const { user } = useStore()
+    const notAuthRouteNameList = ['register', 'login', 'forgot_password', 'reset_password', 'Chat']
+
+    if (!notAuthRouteNameList.includes(to.name ? to.name.toString() : '')) {
+      if (to.query && to.query.token) {
+        localStorage.setItem('token', to.query.token.toString())
+      }
+      const token = user.getToken()
+      if (!token) {
+        next({
+          path: '/login'
+        })
+        return
+      }
+      if (!user.userInfo) {
+        await user.profile()
+      }
+    }
+    // 判断是否有菜单权限
+    if (to.meta.permission ? hasPermission(to.meta.permission as any, 'OR') : true) {
+      next()
+    } else {
+      // 如果没有权限则直接取404页面
+      next('404')
+    }
+  }
+)
+
+export const getChildRouteListByPathAndName = (path: any, name?: RouteRecordName | any) => {
+  return getChildRouteList(routes, path, name)
+}
+
+export const getChildRouteList: (
+  routeList: Array<RouteRecordRaw>,
+  path: string,
+  name?: RouteRecordName | null | undefined
+) => Array<RouteRecordRaw> = (routeList, path, name) => {
+  for (let index = 0; index < routeList.length; index++) {
+    const route = routeList[index]
+    if (name === route.name && path === route.path) {
+      return route.children || []
+    }
+    if (route.children && route.children.length > 0) {
+      const result = getChildRouteList(route.children, path, name)
+      if (result && result?.length > 0) {
+        return result
+      }
+    }
+  }
+  return []
+}
+
+export default router
diff --git a/src/router/modules/application.ts b/src/router/modules/application.ts
new file mode 100644
index 0000000..2d59141
--- /dev/null
+++ b/src/router/modules/application.ts
@@ -0,0 +1,93 @@
+import Layout from '@/layout/layout-template/DetailLayout.vue'
+import { ComplexPermission } from '@/utils/permission/type'
+const applicationRouter = {
+  path: '/application',
+  name: 'application',
+  meta: { title: '应用', permission: 'APPLICATION:READ' },
+  redirect: '/application',
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
+  children: [
+    {
+      path: '/application',
+      name: 'application-index',
+      meta: { title: '应用主页', activeMenu: '/application' },
+      component: () => import('@/views/application/index.vue')
+    },
+    {
+      path: '/application/:id/:type',
+      name: 'ApplicationDetail',
+      meta: { title: '应用详情', activeMenu: '/application' },
+      component: Layout,
+      hidden: true,
+      children: [
+        {
+          path: 'overview',
+          name: 'AppOverview',
+          meta: {
+            icon: 'app-all-menu',
+            iconActive: 'app-all-menu-active',
+            title: '概览',
+            active: 'overview',
+            parentPath: '/application/:id/:type',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application-overview/index.vue')
+        },
+        {
+          path: 'setting',
+          name: 'AppSetting',
+          meta: {
+            icon: 'app-setting',
+            iconActive: 'app-setting-active',
+            title: '设置',
+            active: 'setting',
+            parentPath: '/application/:id/:type',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/application/ApplicationSetting.vue')
+        },
+        {
+          path: 'access',
+          name: 'AppAccess',
+          meta: {
+            icon: 'app-access',
+            iconActive: 'app-access-active',
+            title: '应用接入',
+            active: 'access',
+            parentPath: '/application/:id/:type',
+            parentName: 'ApplicationDetail',
+            permission: new ComplexPermission([], ['x-pack'], 'OR')
+          },
+          component: () => import('@/views/application/ApplicationAccess.vue')
+        },
+        {
+          path: 'hit-test',
+          name: 'AppHitTest',
+          meta: {
+            icon: 'app-hit-test',
+            title: '命中测试',
+            active: 'hit-test',
+            parentPath: '/application/:id/:type',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/hit-test/index.vue')
+        },
+        {
+          path: 'log',
+          name: 'Log',
+          meta: {
+            icon: 'app-document',
+            iconActive: 'app-document-active',
+            title: '对话日志',
+            active: 'log',
+            parentPath: '/application/:id/:type',
+            parentName: 'ApplicationDetail'
+          },
+          component: () => import('@/views/log/index.vue')
+        }
+      ]
+    }
+  ]
+}
+
+export default applicationRouter
diff --git a/src/router/modules/dataset.ts b/src/router/modules/dataset.ts
new file mode 100644
index 0000000..38eccaf
--- /dev/null
+++ b/src/router/modules/dataset.ts
@@ -0,0 +1,92 @@
+import Layout from '@/layout/layout-template/DetailLayout.vue'
+const datasetRouter = {
+  path: '/dataset',
+  name: 'dataset',
+  meta: { title: '知识库', permission: 'DATASET:READ' },
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
+  redirect: '/dataset',
+  children: [
+    {
+      path: '/dataset',
+      name: 'dataset-index',
+      meta: { title: '知识库主页', activeMenu: '/dataset' },
+      component: () => import('@/views/dataset/index.vue')
+    },
+    {
+      path: '/dataset/:type', // upload
+      name: 'UploadDocumentDataset',
+      meta: { activeMenu: '/dataset' },
+      component: () => import('@/views/dataset/UploadDocumentDataset.vue'),
+      hidden: true
+    },
+    {
+      path: '/dataset/:id',
+      name: 'DatasetDetail',
+      meta: { title: '文档', activeMenu: '/dataset' },
+      component: Layout,
+      hidden: true,
+      children: [
+        {
+          path: 'document',
+          name: 'Document',
+          meta: {
+            icon: 'app-document',
+            iconActive: 'app-document-active',
+            title: '文档',
+            active: 'document',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
+          component: () => import('@/views/document/index.vue')
+        },
+        {
+          path: 'problem',
+          name: 'Problem',
+          meta: {
+            icon: 'app-problems',
+            iconActive: 'QuestionFilled',
+            title: '问题',
+            active: 'problem',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
+          component: () => import('@/views/problem/index.vue')
+        },
+        {
+          path: 'hit-test',
+          name: 'DatasetHitTest',
+          meta: {
+            icon: 'app-hit-test',
+            title: '命中测试',
+            active: 'hit-test',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
+          component: () => import('@/views/hit-test/index.vue')
+        },
+        {
+          path: 'setting',
+          name: 'DatasetSetting',
+          meta: {
+            icon: 'app-setting',
+            iconActive: 'app-setting-active',
+            title: '设置',
+            active: 'setting',
+            parentPath: '/dataset/:id',
+            parentName: 'DatasetDetail'
+          },
+          component: () => import('@/views/dataset/DatasetSetting.vue')
+        }
+      ]
+    },
+    {
+      path: '/dataset/:id/:documentId', // 分段详情
+      name: 'Paragraph',
+      meta: { activeMenu: '/dataset' },
+      component: () => import('@/views/paragraph/index.vue'),
+      hidden: true
+    }
+  ]
+}
+
+export default datasetRouter
diff --git a/src/router/modules/function-lib.ts b/src/router/modules/function-lib.ts
new file mode 100644
index 0000000..2bb7f6b
--- /dev/null
+++ b/src/router/modules/function-lib.ts
@@ -0,0 +1,18 @@
+import Layout from '@/layout/layout-template/DetailLayout.vue'
+const functionLibRouter = {
+  path: '/function-lib',
+  name: 'function-lib',
+  meta: { title: '函数库', permission: 'APPLICATION:READ' },
+  redirect: '/function-lib',
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
+  children: [
+    {
+      path: '/function-lib',
+      name: 'function-lib-index',
+      meta: { title: '函数库主页', activeMenu: '/function-lib' },
+      component: () => import('@/views/function-lib/index.vue')
+    }
+  ]
+}
+
+export default functionLibRouter
diff --git a/src/router/modules/setting.ts b/src/router/modules/setting.ts
new file mode 100644
index 0000000..719aef7
--- /dev/null
+++ b/src/router/modules/setting.ts
@@ -0,0 +1,110 @@
+import { hasPermission } from '@/utils/permission/index'
+import Layout from '@/layout/layout-template/SystemLayout.vue'
+import { Role, ComplexPermission } from '@/utils/permission/type'
+const settingRouter = {
+  path: '/setting',
+  name: 'setting',
+  meta: { icon: 'Setting', title: '系统设置', permission: 'SETTING:READ' },
+  redirect: () => {
+    if (hasPermission(new Role('ADMIN'), 'AND')) {
+      return '/user'
+    }
+    return '/team'
+  },
+  component: Layout,
+  children: [
+    {
+      path: '/user',
+      name: 'user',
+      meta: {
+        icon: 'User',
+        iconActive: 'UserFilled',
+        title: '用户管理',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting',
+        permission: new Role('ADMIN')
+      },
+      component: () => import('@/views/user-manage/index.vue')
+    },
+    {
+      path: '/team',
+      name: 'team',
+      meta: {
+        icon: 'app-team',
+        iconActive: 'app-team-active',
+        title: '团队成员',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting'
+      },
+      component: () => import('@/views/team/index.vue')
+    },
+    {
+      path: '/template',
+      name: 'template',
+      meta: {
+        icon: 'app-template',
+        iconActive: 'app-template-active',
+        title: '模型设置',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting'
+      },
+      component: () => import('@/views/template/index.vue')
+    },
+    {
+      path: '/system',
+      name: 'system',
+      meta: {
+        icon: 'app-setting',
+        iconActive: 'app-setting-active',
+        title: '系统设置',
+        activeMenu: '/setting',
+        parentPath: '/setting',
+        parentName: 'setting',
+        permission: new Role('ADMIN')
+      },
+      children: [
+        {
+          path: '/system/theme',
+          name: 'theme',
+          meta: {
+            title: '外观设置',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
+          },
+          component: () => import('@/views/theme/index.vue')
+        },
+        {
+          path: '/system/authentication',
+          name: 'authentication',
+          meta: {
+            title: '登录认证',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
+          },
+          component: () => import('@/views/authentication/index.vue')
+        },
+        {
+          path: '/system/email',
+          name: 'email',
+          meta: {
+            title: '邮箱配置',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new Role('ADMIN')
+          },
+          component: () => import('@/views/email/index.vue')
+        }
+      ]
+    }
+  ]
+}
+
+export default settingRouter
diff --git a/src/router/routes.ts b/src/router/routes.ts
new file mode 100644
index 0000000..82ddb05
--- /dev/null
+++ b/src/router/routes.ts
@@ -0,0 +1,54 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { Role } from '@/utils/permission/type'
+
+const modules: any = import.meta.glob('./modules/*.ts', { eager: true })
+const rolesRoutes: RouteRecordRaw[] = [...Object.keys(modules).map((key) => modules[key].default)]
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    redirect: '/application',
+    children: [...rolesRoutes]
+  },
+
+  // 高级编排
+  {
+    path: '/application/:id/workflow',
+    name: 'ApplicationWorkflow',
+    meta: { activeMenu: '/application' },
+    component: () => import('@/views/application-workflow/index.vue')
+  },
+
+  {
+    path: '/chat/:accessToken',
+    name: 'Chat',
+    component: () => import('@/views/chat/index.vue')
+  },
+
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login/index.vue')
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: () => import('@/views/login/register/index.vue')
+  },
+  {
+    path: '/forgot_password',
+    name: 'forgot_password',
+    component: () => import('@/views/login/forgot-password/index.vue')
+  },
+  {
+    path: '/reset_password/:code/:email',
+    name: 'reset_password',
+    component: () => import('@/views/login/reset-password/index.vue')
+  },
+  {
+    path: '/:pathMatch(.*)',
+    name: '404',
+    component: () => import('@/views/404/index.vue')
+  }
+]
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..7329855
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,28 @@
+import { createPinia } from 'pinia'
+const store = createPinia()
+export { store }
+import useCommonStore from './modules/common'
+import useUserStore from './modules/user'
+import useDatasetStore from './modules/dataset'
+import useParagraphStore from './modules/paragraph'
+import useModelStore from './modules/model'
+import useApplicationStore from './modules/application'
+import useDocumentStore from './modules/document'
+import useProblemStore from './modules/problem'
+import useLogStore from './modules/log'
+import usePromptStore from './modules/prompt'
+
+const useStore = () => ({
+  common: useCommonStore(),
+  user: useUserStore(),
+  dataset: useDatasetStore(),
+  paragraph: useParagraphStore(),
+  model: useModelStore(),
+  application: useApplicationStore(),
+  document: useDocumentStore(),
+  problem: useProblemStore(),
+  log: useLogStore(),
+  prompt: usePromptStore(),
+})
+
+export default useStore
diff --git a/src/stores/modules/application.ts b/src/stores/modules/application.ts
new file mode 100644
index 0000000..af8900a
--- /dev/null
+++ b/src/stores/modules/application.ts
@@ -0,0 +1,141 @@
+import { defineStore } from 'pinia'
+import applicationApi from '@/api/application'
+import applicationXpackApi from '@/api/application-xpack'
+import { type Ref } from 'vue'
+
+import useUserStore from './user'
+
+const useApplicationStore = defineStore({
+  id: 'application',
+  state: () => ({
+    location: `${window.location.origin}/chat/`
+  }),
+  actions: {
+    async asyncGetAllApplication() {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .getAllAppilcation()
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncGetApplicationDetail(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .getApplicationDetail(id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncGetApplicationDataset(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .getApplicationDataset(id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncGetAccessToken(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        const user = useUserStore()
+        if (user.isEnterprise()) {
+          applicationXpackApi
+            .getAccessToken(id, loading)
+            .then((data) => {
+              resolve(data)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        } else {
+          applicationApi
+            .getAccessToken(id, loading)
+            .then((data) => {
+              resolve(data)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        }
+      })
+    },
+
+    async asyncGetAppProfile(loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        const user = useUserStore()
+        applicationApi
+          .getAppProfile(loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncAppAuthentication(
+      token: string,
+      loading?: Ref<boolean>,
+      authentication_value?: any
+    ) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .postAppAuthentication(token, loading, authentication_value)
+          .then((res) => {
+            localStorage.setItem('accessToken', res.data)
+            sessionStorage.setItem('accessToken', res.data)
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async refreshAccessToken(token: string) {
+      this.asyncAppAuthentication(token)
+    },
+    // 修改应用
+    async asyncPutApplication(id: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .putApplication(id, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async validatePassword(id: string, password: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        applicationApi
+          .validatePassword(id, password, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useApplicationStore
diff --git a/src/stores/modules/common.ts b/src/stores/modules/common.ts
new file mode 100644
index 0000000..636a36d
--- /dev/null
+++ b/src/stores/modules/common.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia'
+import { DeviceType, ValidType } from '@/enums/common'
+import type { Ref } from 'vue'
+import userApi from '@/api/user'
+
+export interface commonTypes {
+  breadcrumb: any
+  paginationConfig: any | null
+  search: any
+  device: string
+}
+
+const useCommonStore = defineStore({
+  id: 'common',
+  state: (): commonTypes => ({
+    breadcrumb: null,
+    // 搜索和分页缓存
+    paginationConfig: {},
+    search: {},
+    device: DeviceType.Desktop
+  }),
+  actions: {
+    saveBreadcrumb(data: any) {
+      this.breadcrumb = data
+    },
+    savePage(val: string, data: any) {
+      this.paginationConfig[val] = data
+    },
+    saveCondition(val: string, data: any) {
+      this.search[val] = data
+    },
+    toggleDevice(value: DeviceType) {
+      this.device = value
+    },
+    isMobile() {
+      return this.device === DeviceType.Mobile
+    },
+    async asyncGetValid(valid_type: ValidType, valid_count: number, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        userApi
+          .getValid(valid_type, valid_count, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useCommonStore
diff --git a/src/stores/modules/dataset.ts b/src/stores/modules/dataset.ts
new file mode 100644
index 0000000..b185d79
--- /dev/null
+++ b/src/stores/modules/dataset.ts
@@ -0,0 +1,74 @@
+import { defineStore } from 'pinia'
+import type { datasetData } from '@/api/type/dataset'
+import type { UploadUserFile } from 'element-plus'
+import datasetApi from '@/api/dataset'
+import { type Ref } from 'vue'
+
+export interface datasetStateTypes {
+  baseInfo: datasetData | null
+  webInfo: any
+  documentsType: string
+  documentsFiles: UploadUserFile[]
+}
+
+const useDatasetStore = defineStore({
+  id: 'dataset',
+  state: (): datasetStateTypes => ({
+    baseInfo: null,
+    webInfo: null,
+    documentsType: '',
+    documentsFiles: []
+  }),
+  actions: {
+    saveBaseInfo(info: datasetData | null) {
+      this.baseInfo = info
+    },
+    saveWebInfo(info: any) {
+      this.webInfo = info
+    },
+    saveDocumentsType(val: string) {
+      this.documentsType = val
+    },
+    saveDocumentsFile(file: UploadUserFile[]) {
+      this.documentsFiles = file
+    },
+    async asyncGetAllDataset(loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        datasetApi
+          .getAllDataset(loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetDatasetDetail(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        datasetApi
+          .getDatasetDetail(id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncSyncDataset(id: string, sync_type: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        datasetApi
+          .putSyncWebDataset(id, sync_type, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useDatasetStore
diff --git a/src/stores/modules/document.ts b/src/stores/modules/document.ts
new file mode 100644
index 0000000..0037f03
--- /dev/null
+++ b/src/stores/modules/document.ts
@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+import documentApi from '@/api/document'
+import { type Ref } from 'vue'
+
+const useDocumentStore = defineStore({
+  id: 'document',
+  state: () => ({}),
+  actions: {
+    async asyncGetAllDocument(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        documentApi
+          .getAllDocument(id, loading)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncPostDocument(datasetId: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        documentApi
+          .postDocument(datasetId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useDocumentStore
diff --git a/src/stores/modules/log.ts b/src/stores/modules/log.ts
new file mode 100644
index 0000000..d7a8d64
--- /dev/null
+++ b/src/stores/modules/log.ts
@@ -0,0 +1,67 @@
+import { defineStore } from 'pinia'
+import logApi from '@/api/log'
+import { type Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+
+const useLogStore = defineStore({
+  id: 'log',
+  state: () => ({}),
+  actions: {
+    async asyncGetChatLog(id: string, page: pageRequest, param: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .getChatLog(id, page, param, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncChatRecordLog(
+      id: string,
+      chatId: string,
+      page: pageRequest,
+      loading?: Ref<boolean>,
+      order_asc?: boolean
+    ) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .getChatRecordLog(id, chatId, page, loading, order_asc)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetChatLogClient(id: string, page: pageRequest, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .getChatLogClient(id, page, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncDelChatClientLog(id: string, chatId: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .delChatClientLog(id, chatId, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useLogStore
diff --git a/src/stores/modules/model.ts b/src/stores/modules/model.ts
new file mode 100644
index 0000000..0875e20
--- /dev/null
+++ b/src/stores/modules/model.ts
@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import modelApi from '@/api/model'
+import type { ListModelRequest, Provider } from '@/api/type/model'
+const useModelStore = defineStore({
+  id: 'model',
+  state: () => ({}),
+  actions: {
+    async asyncGetModel(data?: ListModelRequest) {
+      return new Promise((resolve, reject) => {
+        modelApi
+          .getModel(data)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetProvider() {
+      return new Promise((resolve, reject) => {
+        modelApi
+          .getProvider()
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useModelStore
diff --git a/src/stores/modules/paragraph.ts b/src/stores/modules/paragraph.ts
new file mode 100644
index 0000000..6c7c519
--- /dev/null
+++ b/src/stores/modules/paragraph.ts
@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+import paragraphApi from '@/api/paragraph'
+import type { Ref } from 'vue'
+
+const useParagraphStore = defineStore({
+  id: 'paragraph',
+  state: () => ({}),
+  actions: {
+    async asyncPutParagraph(
+      datasetId: string,
+      documentId: string,
+      paragraphId: string,
+      data: any,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .putParagraph(datasetId, documentId, paragraphId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncDelParagraph(
+      datasetId: string,
+      documentId: string,
+      paragraphId: string,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .delParagraph(datasetId, documentId, paragraphId, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useParagraphStore
diff --git a/src/stores/modules/problem.ts b/src/stores/modules/problem.ts
new file mode 100644
index 0000000..f8dd7b1
--- /dev/null
+++ b/src/stores/modules/problem.ts
@@ -0,0 +1,79 @@
+import { defineStore } from 'pinia'
+import { type Ref } from 'vue'
+import problemApi from '@/api/problem'
+import paragraphApi from '@/api/paragraph'
+import type { pageRequest } from '@/api/type/common'
+
+const useProblemStore = defineStore({
+  id: 'problem',
+  state: () => ({}),
+  actions: {
+    async asyncPostProblem(datasetId: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        problemApi
+          .postProblems(datasetId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetProblem(
+      datasetId: string,
+      page: pageRequest,
+      param: any,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        problemApi
+          .getProblems(datasetId, page, param, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncDisassociationProblem(
+      datasetId: string,
+      documentId: string,
+      paragraphId: string,
+      problemId: string,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .disassociationProblem(datasetId, documentId, paragraphId, problemId, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncAssociationProblem(
+      datasetId: string,
+      documentId: string,
+      paragraphId: string,
+      problemId: string,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .associationProblem(datasetId, documentId, paragraphId, problemId, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useProblemStore
diff --git a/src/stores/modules/prompt.ts b/src/stores/modules/prompt.ts
new file mode 100644
index 0000000..ec4be97
--- /dev/null
+++ b/src/stores/modules/prompt.ts
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+
+export interface promptTypes {
+  user: string
+  formValue: { model_id: string, prompt: string }
+}
+
+const usePromptStore = defineStore({
+  id: 'prompt',
+  state: (): promptTypes[] => (JSON.parse(localStorage.getItem('PROMPT_CACHE') || '[]')),
+  actions: {
+    save(user: string, formValue: any) {
+      this.$state.forEach((item: any, index: number) => {
+        if (item.user === user) {
+          this.$state.splice(index, 1)
+        }
+      })
+      this.$state.push({ user, formValue })
+      localStorage.setItem('PROMPT_CACHE', JSON.stringify(this.$state))
+    },
+    get(user: string) {
+      for (let i = 0; i < this.$state.length; i++) {
+        if (this.$state[i].user === user) {
+          return this.$state[i].formValue
+        }
+      }
+      return {
+        model_id: '',
+        prompt: '内容：{data}\n' +
+          '\n' +
+          '请总结上面的内容，并根据内容总结生成 5 个问题。\n' +
+          '回答要求：\n' +
+          '- 请只输出问题；\n' +
+          '- 请将每个问题放置<question></question>标签中。'
+      }
+    }
+  }
+})
+
+export default usePromptStore
\ No newline at end of file
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
new file mode 100644
index 0000000..af4f558
--- /dev/null
+++ b/src/stores/modules/user.ts
@@ -0,0 +1,166 @@
+import { defineStore } from 'pinia'
+import { type Ref } from 'vue'
+import type { User } from '@/api/type/user'
+import { cloneDeep } from 'lodash'
+import UserApi from '@/api/user'
+import ThemeApi from '@/api/theme'
+import { useElementPlusTheme } from 'use-element-plus-theme'
+import { defaultPlatformSetting } from '@/utils/theme'
+
+export interface userStateTypes {
+  userType: number // 1 系统操作者 2 对话用户
+  userInfo: User | null
+  token: any
+  version?: string
+  accessToken?: string
+  XPACK_LICENSE_IS_VALID: false
+  isXPack: false
+  themeInfo: any
+}
+
+const useUserStore = defineStore({
+  id: 'user',
+  state: (): userStateTypes => ({
+    userType: 1,
+    userInfo: null,
+    token: '',
+    version: '',
+    XPACK_LICENSE_IS_VALID: false,
+    isXPack: false,
+    themeInfo: null
+  }),
+  actions: {
+    showXpack() {
+      return this.isXPack
+    },
+    isDefaultTheme() {
+      return !this.themeInfo?.theme || this.themeInfo?.theme === '#3370FF'
+    },
+    setTheme(data: any) {
+      const { changeTheme } = useElementPlusTheme(this.themeInfo?.theme)
+      changeTheme(data?.['theme'])
+      this.themeInfo = cloneDeep(data)
+    },
+    isExpire() {
+      return this.isXPack && !this.XPACK_LICENSE_IS_VALID
+    },
+    isEnterprise() {
+      return this.isXPack && this.XPACK_LICENSE_IS_VALID
+    },
+    getToken(): String | null {
+      if (this.token) {
+        return this.token
+      }
+      return this.userType === 1 ? localStorage.getItem('token') : this.getAccessToken()
+    },
+    getAccessToken() {
+      const accessToken = sessionStorage.getItem('accessToken')
+      if (accessToken) {
+        return accessToken
+      }
+      return localStorage.getItem('accessToken')
+    },
+
+    getPermissions() {
+      if (this.userInfo) {
+        return this.isXPack && this.XPACK_LICENSE_IS_VALID
+          ? [...this.userInfo?.permissions, 'x-pack']
+          : this.userInfo?.permissions
+      } else {
+        return []
+      }
+    },
+    getRole() {
+      if (this.userInfo) {
+        return this.userInfo?.role
+      } else {
+        return ''
+      }
+    },
+    changeUserType(num: number) {
+      this.userType = num
+    },
+
+    async asyncGetProfile() {
+      return new Promise((resolve, reject) => {
+        UserApi.getProfile()
+          .then(async (ok) => {
+            this.version = ok.data?.version || '-'
+            this.isXPack = ok.data?.IS_XPACK
+            this.XPACK_LICENSE_IS_VALID = ok.data?.XPACK_LICENSE_IS_VALID
+
+            if (this.isEnterprise()) {
+              await this.theme()
+            } else {
+              this.themeInfo = {
+                ...defaultPlatformSetting
+              }
+            }
+            resolve(ok)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async theme(loading?: Ref<boolean>) {
+      return await ThemeApi.getThemeInfo(loading).then((ok) => {
+        this.setTheme(ok.data)
+        // window.document.title = this.themeInfo['title'] || 'MaxKB'
+        // const link = document.querySelector('link[rel="icon"]') as any
+        // if (link) {
+        //   link['href'] = this.themeInfo['icon'] || '/favicon.ico'
+        // }
+      })
+    },
+
+    async profile() {
+      return UserApi.profile().then(async (ok) => {
+        this.userInfo = ok.data
+        return this.asyncGetProfile()
+      })
+    },
+
+    async login(auth_type: string, username: string, password: string) {
+      return UserApi.login(auth_type, { username, password }).then((ok) => {
+        this.token = ok.data
+        localStorage.setItem('token', ok.data)
+        return this.profile()
+      })
+    },
+    async dingCallback(code: string) {
+      return UserApi.getDingCallback(code).then((ok) => {
+        this.token = ok.data
+        localStorage.setItem('token', ok.data)
+        return this.profile()
+      })
+    },
+    async wecomCallback(code: string) {
+      return UserApi.getWecomCallback(code).then((ok) => {
+        this.token = ok.data
+        localStorage.setItem('token', ok.data)
+        return this.profile()
+      })
+    },
+
+    async logout() {
+      return UserApi.logout().then(() => {
+        localStorage.removeItem('token')
+        return true
+      })
+    },
+    async getAuthType() {
+      return UserApi.getAuthType().then((ok) => {
+        return ok.data
+      })
+    },
+    async getQrType() {
+      return UserApi.getQrType().then((ok) => {
+        return ok.data
+      })
+    }
+  }
+})
+
+export default useUserStore
diff --git a/src/styles/app.scss b/src/styles/app.scss
new file mode 100644
index 0000000..be1299c
--- /dev/null
+++ b/src/styles/app.scss
@@ -0,0 +1,771 @@
+@font-face {
+  font-family: AlibabaPuHuiTi;
+  src:
+    url('./font/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'),
+    url('./font/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype'),
+    url('./font/AlibabaPuHuiTi-3-55-Regular.eot') format('eot'),
+    url('./font/AlibabaPuHuiTi-3-55-Regular.otf') format('opentype'),
+    url('./font/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2');
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'PingFang SC', AlibabaPuHuiTi !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color: var(--app-text-color);
+}
+
+#app {
+  height: 100%;
+}
+
+:focus {
+  outline: none;
+}
+
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 滚动条整体部分 */
+::-webkit-scrollbar {
+  width: 6px; // 纵向滚动条宽度
+  height: 6px; // 横向滚动条高度
+}
+
+/* 滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+/* 轨道 */
+::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: transparent;
+}
+
+.clearfix:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+h5 {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.bold {
+  font-weight: 600;
+}
+.lighter {
+  font-weight: 400;
+}
+
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+.w-120 {
+  width: 120px;
+}
+.w-240 {
+  width: 240px;
+}
+.w-280 {
+  width: 280px;
+}
+.w-500 {
+  width: 500px;
+}
+.max-w-200 {
+  max-width: 200px;
+}
+
+.mt-4 {
+  margin-top: calc(var(--app-base-px) - 4px);
+}
+
+.mt-8 {
+  margin-top: var(--app-base-px);
+}
+.mt-12 {
+  margin-top: calc(var(--app-base-px) + 4px);
+}
+.mt-16 {
+  margin-top: calc(var(--app-base-px) * 2);
+}
+.mt-20 {
+  margin-top: calc(var(--app-base-px) * 2 + 4px);
+}
+.mt-24 {
+  margin-top: calc(var(--app-base-px) * 3);
+}
+
+.mb-4 {
+  margin-bottom: calc(var(--app-base-px) - 4px);
+}
+.mb-8 {
+  margin-bottom: var(--app-base-px);
+}
+.mb-12 {
+  margin-bottom: calc(var(--app-base-px) + 4px);
+}
+.mb-16 {
+  margin-bottom: calc(var(--app-base-px) * 2);
+}
+.mb-24 {
+  margin-bottom: calc(var(--app-base-px) * 3);
+}
+.ml-4 {
+  margin-left: calc(var(--app-base-px) - 4px);
+}
+.ml-8 {
+  margin-left: var(--app-base-px);
+}
+.ml-12 {
+  margin-left: calc(var(--app-base-px) + 4px);
+}
+.ml-16 {
+  margin-left: calc(var(--app-base-px) * 2);
+}
+.ml-24 {
+  margin-left: calc(var(--app-base-px) * 3);
+}
+.mr-4 {
+  margin-right: calc(var(--app-base-px) - 4px);
+}
+.mr-8 {
+  margin-right: var(--app-base-px);
+}
+.mr-12 {
+  margin-right: calc(var(--app-base-px) + 4px);
+}
+.mr-16 {
+  margin-right: calc(var(--app-base-px) * 2);
+}
+.mr-24 {
+  margin-right: calc(var(--app-base-px) * 3);
+}
+.p-8 {
+  padding: var(--app-base-px);
+}
+.p-16 {
+  padding: calc(var(--app-base-px) * 2);
+}
+.p-24 {
+  padding: calc(var(--app-base-px) * 3);
+}
+.p-8-12 {
+  padding: calc(var(--app-base-px)) calc(var(--app-base-px) + 4px);
+}
+.p-12-16 {
+  padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
+}
+.p-12-24 {
+  padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 3);
+}
+.p-16-24 {
+  padding: calc(var(--app-base-px) * 2) calc(var(--app-base-px) * 3);
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.float-right {
+  float: right;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+
+.vertical-middle {
+  vertical-align: middle;
+}
+
+.line-height-22 {
+  line-height: 22px;
+}
+
+.border {
+  border: 1px solid var(--el-border-color);
+}
+
+.border-l {
+  border-left: 1px solid var(--el-border-color);
+}
+
+.border-b {
+  border-bottom: 1px solid var(--el-border-color);
+}
+.border-r {
+  border-right: 1px solid var(--el-border-color);
+}
+.border-t {
+  border-top: 1px solid var(--el-border-color);
+}
+
+.border-b-light {
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.border-r-4 {
+  border-radius: 4px;
+}
+
+.border-t-dashed {
+  border-top: 1px dashed var(--el-border-color);
+}
+.border-primary {
+  border: 1px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+}
+
+.border-none {
+  border: none;
+}
+
+.cursor {
+  cursor: pointer;
+}
+.notAllowed {
+  cursor: not-allowed;
+}
+
+/*
+  超出省略号
+*/
+
+.ellipsis {
+  display: inline-block;
+  max-width: 130px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/*
+  双行超出省略号，其他行数自定义 -webkit-line-clamp
+*/
+.ellipsis-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.ellipsis-1 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+/*
+  内容部分 自适应高度
+*/
+.main-calc-height {
+  height: var(--app-main-height);
+  box-sizing: border-box;
+}
+
+/*
+  标题前带竖线样式
+*/
+.title-decoration-1 {
+  position: relative;
+  padding-left: 12px;
+  &:before {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 80%;
+    content: '';
+    background: var(--el-color-primary);
+  }
+}
+
+/* tag */
+.default-tag {
+  background: var(--el-color-primary-light-8);
+  color: var(--el-color-primary);
+  border: none;
+}
+.danger-tag {
+  background: var(--tag-danger-bg);
+  color: #d03f3b;
+  border: none;
+}
+.success-tag {
+  background: var(--tag-success-bg);
+  color: var(--el-color-success);
+  border: none;
+}
+.warning-tag {
+  background: var(--tag-warning-bg);
+  color: var(--el-color-warning);
+  border: none;
+}
+
+.info-tag {
+  background: var(--app-text-color-light-1);
+  color: var(--app-text-color-secondary);
+  border: none;
+}
+
+.purple-tag {
+  background: #f2ebfe;
+  color: #7f3bf5;
+  border-color: #e0d7f0;
+}
+
+.blue-tag {
+  background: #ebf1ff;
+  color: #3370ff;
+  border-color: #d6e2ff;
+}
+
+/*
+  card 无边框无阴影 灰色背景
+*/
+.card-never {
+  background: var(--app-layout-bg-color);
+  border: none;
+}
+
+/*
+   图标旋转90度
+*/
+.rotate-90 {
+  transform: rotateZ(90deg);
+}
+.rotate-180 {
+  transform: rotateZ(180deg);
+}
+/*
+  表格第一行插入自定义行
+*/
+.table-quick-append {
+  background: #ffffff;
+  .el-table__append-wrapper {
+    position: absolute;
+    top: 0;
+    border-bottom: var(--el-table-border);
+    width: 100%;
+    height: 49px;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+    padding: 0 12px;
+    background: #ffffff;
+    cursor: pointer;
+    z-index: 2;
+    &:hover {
+      background: var(--el-color-primary-light-9);
+      z-index: 1;
+    }
+  }
+  .el-table__body {
+    margin-top: 49px;
+  }
+}
+
+// checkbox-group 文字在左 input在右
+.app-custom-checkbox-group {
+  line-height: normal;
+  .el-checkbox__label {
+    display: none;
+  }
+}
+
+/*
+  头像渐变背景
+*/
+.avatar-gradient {
+  background: var(--app-avatar-gradient-color);
+}
+
+.avatar-light {
+  background: var(--el-color-primary-light-4);
+}
+
+.avatar-purple {
+  background: #7f3bf5;
+}
+.avatar-blue {
+  background: #3370ff;
+}
+
+.avatar-green {
+  background: #34c724;
+}
+.avatar-grey {
+  background: #bbbfc4;
+}
+
+.success {
+  color: var(--el-color-success);
+}
+.danger {
+  color: var(--el-color-danger);
+}
+.warning {
+  color: var(--el-color-warning);
+}
+.primary {
+  color: var(--el-color-primary);
+}
+.info {
+  color: var(--el-color-info);
+}
+
+.color-secondary {
+  color: var(--app-text-color-secondary);
+}
+
+.layout-bg {
+  background: var(--app-layout-bg-color);
+}
+
+.white-bg {
+  background: #ffffff;
+}
+
+.app-warning-icon {
+  font-size: 16px;
+  color: var(--app-text-color-secondary);
+}
+
+.dotting {
+  display: inline-block;
+  width: 10px;
+  min-height: 2px;
+  padding-right: 2px;
+  margin-left: 2px;
+  padding-left: 2px;
+  border-left: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  background-color: currentColor;
+  background-clip: content-box;
+  box-sizing: border-box;
+  -webkit-animation: dot 0.8s infinite step-start both;
+  animation: dot 0.8s infinite step-start both;
+  &:before {
+    content: '...';
+  }
+  &::before {
+    content: '';
+  }
+}
+
+@-webkit-keyframes dot {
+  25% {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  50% {
+    border-right-color: transparent;
+    background-color: transparent;
+  }
+  75% {
+    border-right-color: transparent;
+  }
+}
+@keyframes dot {
+  25% {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  50% {
+    border-right-color: transparent;
+    background-color: transparent;
+  }
+  75% {
+    border-right-color: transparent;
+  }
+}
+
+.file-List-card {
+  border-radius: 4px;
+  .el-card__body {
+    padding: 8px 16px 8px 12px;
+  }
+}
+
+.card__radio {
+  width: 100%;
+  display: block;
+  line-height: 22px;
+  .el-radio {
+    white-space: break-spaces;
+    width: 100%;
+    height: 100%;
+    line-height: 22px;
+    color: var(--app-text-color);
+  }
+
+  :deep(.el-radio__label) {
+    padding-left: 30px;
+    width: 100%;
+  }
+  :deep(.el-radio__input) {
+    position: absolute;
+    top: 16px;
+  }
+  .active {
+    border: 1px solid var(--el-color-primary);
+  }
+  .el-card__body {
+    padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
+  }
+}
+
+// AI模型选择：添加模型hover样式
+.select-model {
+  .el-select-dropdown__footer {
+    &:hover {
+      background-color: var(--el-fill-color-light);
+    }
+  }
+  .model-icon {
+    width: 20px;
+  }
+  .check-icon {
+    position: absolute;
+    right: 10px;
+  }
+}
+
+// 段落card
+.paragraph-source-card {
+  height: 210px;
+  width: 100%;
+  .active-button {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+  }
+}
+
+// 分段 dialog
+.paragraph-dialog {
+  padding: 0 !important;
+  .el-scrollbar {
+    height: auto !important;
+  }
+  .el-dialog__header {
+    padding: 16px 24px;
+  }
+  .el-dialog__body {
+    border-top: 1px solid var(--el-border-color);
+  }
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color);
+  }
+
+  .title {
+    color: var(--app-text-color);
+  }
+}
+
+// card 选中样式
+.selected {
+  border: 1px solid var(--el-color-primary) !important;
+  &:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 14px solid var(--el-color-primary);
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  &:after {
+    content: '';
+    width: 3px;
+    height: 6px;
+    position: absolute;
+    right: 5px;
+    top: 2px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+  &:hover {
+    border: 1px solid var(--el-color-primary);
+  }
+}
+
+.app-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
+}
+
+.app-radio-button-group {
+  border: 1px solid var(--app-border-color-dark);
+  border-radius: var(--el-border-radius-base);
+  .el-radio-button {
+    padding: 3px;
+  }
+  .el-radio-button__inner {
+    border: none !important;
+    border-radius: var(--el-border-radius-base) !important;
+    padding: 5px 8px;
+    font-weight: 400;
+  }
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: var(--el-color-primary) !important;
+    background: var(--el-color-primary-light-9) !important;
+    border: none !important;
+    box-shadow: none !important;
+    font-weight: 500;
+  }
+}
+
+// 自定义主题
+.custom-header {
+  background: var(--el-color-primary-light-9) !important;
+}
+
+.edit-avatar {
+  position: relative;
+  .edit-mask {
+    position: absolute;
+    left: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.record-tip-confirm {
+  max-width: 800px !important;
+}
+
+//企业微信
+.wwLogin_qrcode_head {
+  padding: 20px 0 !important;
+}
+
+// 复合搜索框
+.complex-search {
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  .el-select__wrapper {
+    box-shadow: none !important;
+  }
+  .el-input__wrapper {
+    box-shadow: none !important;
+  }
+  &__left {
+    border-right: 1px solid var(--el-border-color);
+  }
+}
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
new file mode 100644
index 0000000..1e4ac5d
--- /dev/null
+++ b/src/styles/element-plus.scss
@@ -0,0 +1,419 @@
+:root {
+  --el-color-primary: #3370ff;
+  --el-menu-item-height: 45px;
+  --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
+  --el-border-color: #dee0e3;
+  --el-text-color-regular: #1f2329;
+  --el-color-info: #8f959e !important;
+  --el-disabled-bg-color: #eff0f1 !important;
+  --el-text-color-primary: #1f2329;
+}
+
+.el-button {
+  --el-button-font-weight: 400;
+  padding: 5px 12px;
+  &.is-text {
+    padding: 4px !important;
+    font-size: 16px;
+    max-height: 24px;
+    &:not(.is-disabled):hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+  &:focus {
+    color: var(--el-button-text-color);
+    background-color: var(--el-button-bg-color);
+    border-color: var(--el-button-border-color);
+  }
+  &.is-link:focus {
+    background: none;
+    border: none;
+  }
+}
+.el-button--text {
+  border: none !important;
+  &:focus {
+    border: none !important;
+  }
+}
+.el-button--large {
+  font-size: 16px;
+}
+.el-avatar {
+  --el-avatar-bg-color: var(--el-color-primary);
+  --el-avatar-size-small: 33px;
+  --el-avatar-border-radius: 6px;
+  cursor: pointer;
+}
+
+.el-form {
+  --el-form-inline-content-width: 100%;
+}
+
+.el-form-item {
+  margin-bottom: 16px;
+  .el-form-item {
+    margin-bottom: 16px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
+}
+.el-form-item__label {
+  font-weight: 400;
+  width: 100%;
+}
+
+.el-form-item__error {
+  position: unset;
+  font-size: 14px;
+}
+
+.el-form--label-top .el-form-item .el-form-item__label {
+  padding-right: 0;
+}
+
+.el-dialog {
+  --el-dialog-title-font-size: 16px;
+  --el-dialog-padding-primary: 24px;
+  --el-dialog-content-font-size: 14px;
+  .dialog-sub-title {
+    color: var(--app-text-color-secondary);
+    margin: 5px 0;
+    font-weight: 400;
+  }
+  .el-dialog__body {
+    color: var(--app-text-color);
+  }
+}
+.el-dialog__headerbtn {
+  top: 6px;
+}
+.el-dialog__header {
+  padding-bottom: 24px;
+  font-weight: 500;
+}
+.el-dialog__footer {
+  padding-top: 0;
+}
+
+.el-message {
+  --el-message-close-icon-color: var(--app-text-color-secondary);
+}
+.el-message-box {
+  --el-messagebox-font-size: 16px;
+  padding: 24px;
+  .el-message-box__header {
+    padding: 0;
+  }
+  .el-message-box__title {
+    word-break: break-all;
+    width: 95%;
+  }
+}
+
+.el-message-box__content {
+  padding: 24px 0;
+  color: var(--app-text-color);
+  font-weight: 400;
+}
+.el-message-box__btns {
+  padding: 0;
+  button {
+    min-width: 80px;
+    &:nth-child(2) {
+      margin-left: 12px;
+    }
+  }
+  button.danger {
+    background: var(--el-color-danger);
+    border: var(--el-color-danger);
+    color: #ffffff;
+  }
+}
+.el-message-box__headerbtn {
+  right: 10px;
+  top: 15px;
+  .el-message-box__close {
+    font-size: 20px;
+  }
+}
+
+.el-card {
+  --el-card-padding: calc(var(--app-base-px) * 2);
+  color: var(--el-text-color-regular);
+}
+.el-dropdown {
+  color: var(--app-text-color);
+}
+.el-dropdown-menu__item {
+  color: var(--app-text-color);
+  font-weight: 400;
+  padding: 5px 11px;
+  &:not(.is-disabled):focus,
+  &:not(.is-active):focus {
+    background-color: var(--app-text-color-light-1);
+    color: var(--app-text-color);
+  }
+  &.is-active,
+  &.is-active:hover {
+    color: var(--el-menu-active-color);
+    background: var(--el-color-primary-light-9);
+  }
+}
+
+.el-tag {
+  --el-tag-border-radius: 2px;
+  height: 24px;
+  padding: 0 6px;
+}
+.el-table {
+  --el-table-header-bg-color: var(--app-layout-bg-color);
+  --el-table-text-color: var(--app-text-color);
+  font-weight: 400;
+  thead {
+    color: var(--app-text-color-secondary);
+    th {
+      font-weight: 500;
+    }
+  }
+
+  th.el-table__cell {
+    border-top: var(--el-table-border);
+  }
+  .el-table__cell {
+    padding: 12px 0;
+  }
+  .el-checkbox {
+    height: 23px;
+  }
+  tr.highlight {
+    background: var(--el-table-current-row-bg-color);
+  }
+}
+
+.el-pagination .el-select .el-input {
+  width: 100px;
+}
+
+/* el-steps */
+.el-step__icon {
+  background: none;
+}
+.el-step__head.is-process {
+  .el-step__icon {
+    &.is-text {
+      color: #ffffff;
+      border-color: var(--el-color-primary) !important;
+      background: var(--el-color-primary) !important;
+    }
+  }
+}
+
+.el-text {
+  font-weight: 400;
+}
+
+.el-switch {
+  height: auto;
+}
+
+.el-slider {
+  --el-slider-button-size: 14px;
+  --el-slider-height: 4px;
+}
+.el-slider__button {
+  border: solid 1px var(--app-border-color-dark);
+  &.hover {
+    border: solid 2px var(--el-slider-main-bg-color);
+  }
+}
+.el-slider__runway.show-input {
+  margin-right: calc(var(--app-base-px) + 4px);
+}
+.el-slider__input {
+  width: 72px;
+}
+
+.input-with-select {
+  .el-input-group__prepend {
+    background-color: var(--el-fill-color-blank);
+  }
+}
+.el-textarea {
+  --el-input-placeholder-color: var(--app-input-color-placeholder);
+}
+.el-textarea__inner {
+  font-size: 14px;
+}
+.el-input {
+  --el-input-icon-color: var(--app-text-color-secondary);
+  --el-input-placeholder-color: var(--app-input-color-placeholder);
+}
+
+.el-input__inner {
+  font-size: 14px;
+}
+
+.el-input__wrapper {
+  padding: 1px 12px !important;
+}
+
+.el-input--large {
+  .el-input__inner {
+    font-size: 16px;
+  }
+}
+
+.el-select__wrapper.is-disabled {
+  background-color: var(--el-disabled-bg-color)!important;
+}
+.el-select__placeholder {
+  font-weight: 400;
+}
+.el-select__placeholder.is-transparent {
+  color: var(--app-input-color-placeholder);
+  font-weight: 400;
+}
+
+.el-select-group .el-select-dropdown__item {
+  padding-left: 11px;
+}
+.el-select-dropdown__item {
+  font-weight: 400;
+}
+
+.el-select__caret {
+  color: var(--app-text-color-secondary);
+}
+.el-tabs__header {
+  margin: 0 0 12px;
+}
+.el-tabs__item {
+  padding: 0 14px;
+}
+
+.el-tabs__nav-wrap:after {
+  height: 1px;
+}
+.el-tabs__active-bar {
+  height: 3px;
+}
+.el-drawer {
+  .el-drawer__header {
+    padding: 16px 24px;
+    margin: 0;
+    border-bottom: 1px solid var(--el-border-color);
+    color: var(--app-text-color);
+  }
+  .el-drawer__footer {
+    border-top: 1px solid var(--el-border-color);
+    padding: 16px 24px;
+  }
+}
+
+.el-cascader-node {
+  padding-left: 2px;
+}
+.el-cascader-node__prefix {
+  right: 10px;
+  left: auto;
+}
+
+// 自动补全增加暂无数据
+.platform-auto-complete {
+  .el-autocomplete-suggestion__wrap {
+    padding: 5px 0;
+    ul li {
+      pointer-events: none; // 阻止可点击事件
+      .default {
+        text-align: center;
+        color: #999;
+      }
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+.el-popover {
+  --el-popover-padding: 16px;
+}
+
+.el-radio {
+  --el-radio-font-weight: 400;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: var(--app-text-color);
+}
+
+.radio_content .is-disabled {
+  background-color: var(--el-disabled-bg-color)!important;;
+}
+
+.el-input-number.is-controls-right .el-input__wrapper {
+  padding-left: 15px !important;
+  padding-right: 42px !important;
+}
+
+.el-input-number.is-without-controls .el-input__wrapper {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+// select下拉框
+.select-popper {
+  max-width: 300px;
+  .el-select-dropdown__wrap {
+    max-width: 300px;
+  }
+}
+
+.auto-tooltip-popper {
+  max-width: 500px;
+}
+
+// radio 一行一个样式
+.radio-block {
+  width: 100%;
+  display: block;
+  .el-radio {
+    align-items: flex-start;
+    height: 100%;
+    width: 100%;
+  }
+  .el-radio__label {
+    width: 100%;
+    margin-top: -8px;
+    line-height: 30px;
+  }
+}
+
+// 提示横幅
+.el-alert__title {
+  color: var(--el-text-color-regular) !important;
+  font-weight: 400;
+}
+.el-alert--warning.is-light {
+  background-color: #ffe7cc;
+  .el-alert__icon {
+    color: #ff8800;
+  }
+}
+.el-alert--success.is-light {
+  background-color: #d6f4d3;
+  .el-alert__icon {
+    color: #34c724;
+  }
+}
+.el-alert--danger.is-light {
+  background-color: #fddbda;
+  .el-alert__icon {
+    color: #f54a45;
+  }
+}
+
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--el-checkbox-text-color);
+}
diff --git a/src/styles/font/AlibabaPuHuiTi-3-55-Regular.eot b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.eot
new file mode 100644
index 0000000..82f27fd
Binary files /dev/null and b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.eot differ
diff --git a/src/styles/font/AlibabaPuHuiTi-3-55-Regular.otf b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.otf
new file mode 100644
index 0000000..541e3c1
Binary files /dev/null and b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.otf differ
diff --git a/src/styles/font/AlibabaPuHuiTi-3-55-Regular.ttf b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.ttf
new file mode 100644
index 0000000..a6eaf36
Binary files /dev/null and b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.ttf differ
diff --git a/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff
new file mode 100644
index 0000000..f576376
Binary files /dev/null and b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff differ
diff --git a/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff2 b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff2
new file mode 100644
index 0000000..4b574fb
Binary files /dev/null and b/src/styles/font/AlibabaPuHuiTi-3-55-Regular.woff2 differ
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..36251d3
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,7 @@
+@import 'element-plus/dist/index.css';
+@import './variables.scss';
+@import './app.scss';
+@import './element-plus.scss';
+@import 'nprogress/nprogress.css';
+@import 'md-editor-v3/lib/style.css';
+@import './md-editor.scss';
diff --git a/src/styles/md-editor.scss b/src/styles/md-editor.scss
new file mode 100644
index 0000000..ad41aca
--- /dev/null
+++ b/src/styles/md-editor.scss
@@ -0,0 +1,41 @@
+.md-editor {
+  font-weight: 400;
+}
+.md-editor-preview {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  p {
+    padding: 0 !important;
+  }
+  .md-editor-admonition {
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    border: 0 !important;
+    max-width: 360px !important;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .md-editor-preview {
+    img {
+      max-width: 100% !important;
+    }
+  }
+}
+
+.md-editor-preview-wrapper {
+  padding: 0;
+}
+
+.md-editor-footer {
+  height: auto !important;
+}
+
+.ͼ1 .cm-placeholder {
+  color: var(--app-input-color-placeholder);
+  font-size: 14px;
+  font-weight: 400;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..f2c2a0a
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,53 @@
+:root {
+  --app-base-px: 8px;
+  --app-layout-bg-color: #f5f6f7;
+  --app-text-color: #1f2329;
+  --app-text-color-light-1: rgba(31, 35, 41, 0.1);
+  --app-text-color-secondary: #646a73;
+  --app-text-color-disable: #bbbfc4;
+  --app-input-color-placeholder: #8f959e;
+  --app-view-padding: 24px;
+  --app-view-bg-color: #ffffff;
+  --app-border-color-dark: #bbbfc4;
+  --md-bk-hover-color:var(--el-border-color-hover);
+  /** header 组件 */
+  --app-header-height: 56px;
+  --app-header-padding: 0 20px;
+  --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
+  --app-logo-color: linear-gradient(180deg, #3370FF 0%, #7f3bf5 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370FF 100%);
+
+  /* 计算高度 */
+  --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
+
+  /** sidebar 组件 */
+  --sidebar-bg-color: #ffffff;
+  --sidebar-width: 240px;
+  /** tag */
+  --tag-default-bg: rgba(51, 112, 255, 0.2);
+  --tag-default-color: #2b5fd9;
+  --tag-success-bg: rgba(52, 199, 36, 0.2);
+  --tag-success-color: #2ca91f;
+  --tag-warning-bg: rgba(255, 136, 0, 0.2);
+  --tag-warning-color: #d97400;
+  --tag-danger-bg: rgba(245, 74, 69, 0.2);
+
+  /** card */
+  --card-width: 330px;
+  --card-min-height: 166px;
+  --card-min-width: 220px;
+
+  /** setting */
+  --setting-left-width: 280px;
+
+  /** dataset */
+  --create-dataset-height: calc(var(--app-main-height) - 70px);
+
+  /** ai-chat */
+  --dialog-bg-gradient-color: linear-gradient(
+      188deg,
+      rgba(235, 241, 255, 0.2) 39.6%,
+      rgba(231, 249, 255, 0.2) 94.3%
+    ),
+    #eff0f1;
+}
diff --git a/src/utils/application.ts b/src/utils/application.ts
new file mode 100644
index 0000000..4666da7
--- /dev/null
+++ b/src/utils/application.ts
@@ -0,0 +1,10 @@
+export const defaultIcon = '/ui/favicon.ico'
+
+// 是否显示字母 / icon
+export function isAppIcon(url: string | undefined) {
+  return url === defaultIcon ? '' : url
+}
+
+export function isWorkFlow(type: string | undefined) {
+  return type === 'WORK_FLOW'
+}
diff --git a/src/utils/clipboard.ts b/src/utils/clipboard.ts
new file mode 100644
index 0000000..bde5e36
--- /dev/null
+++ b/src/utils/clipboard.ts
@@ -0,0 +1,15 @@
+import Clipboard from 'vue-clipboard3'
+import { MsgSuccess, MsgError } from '@/utils/message'
+/*
+  复制粘贴
+*/
+export async function copyClick(info: string) {
+  const { toClipboard } = Clipboard()
+  try {
+    await toClipboard(info)
+    MsgSuccess('复制成功')
+  } catch (e) {
+    console.error(e)
+    MsgError('复制失败')
+  }
+}
diff --git a/src/utils/common.ts b/src/utils/common.ts
new file mode 100644
index 0000000..770adde
--- /dev/null
+++ b/src/utils/common.ts
@@ -0,0 +1,24 @@
+/**
+ * 拆分数组 每n个拆分为一个数组
+ * @param sourceDataList 资源数据
+ * @param splitNum       每多少个拆分为一个数组
+ * @returns              拆分后数组
+ */
+export function splitArray<T>(sourceDataList: Array<T>, splitNum: number) {
+  const count =
+    sourceDataList.length % splitNum == 0
+      ? sourceDataList.length / splitNum
+      : sourceDataList.length / splitNum + 1
+  const arrayList: Array<Array<T>> = []
+  for (let i = 0; i < count; i++) {
+    let index = i * splitNum
+    const list: Array<T> = []
+    let j = 0
+    while (j < splitNum && index < sourceDataList.length) {
+      list.push(sourceDataList[index++])
+      j++
+    }
+    arrayList.push(list)
+  }
+  return arrayList
+}
diff --git a/src/utils/decimalFormat.ts b/src/utils/decimalFormat.ts
new file mode 100644
index 0000000..b9e84f9
--- /dev/null
+++ b/src/utils/decimalFormat.ts
@@ -0,0 +1,16 @@
+function format(decimal?: number, digits?: number): string | undefined {
+  if (digits == undefined) {
+    digits = 0;
+  }
+  return decimal?.toLocaleString("zh-CN", {
+    style: "decimal",
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+}
+
+const util = {
+  format,
+};
+
+export default util;
diff --git a/src/utils/message.ts b/src/utils/message.ts
new file mode 100644
index 0000000..ea9df38
--- /dev/null
+++ b/src/utils/message.ts
@@ -0,0 +1,60 @@
+import { ElMessageBox, ElMessage } from 'element-plus'
+
+export const MsgSuccess = (message: string) => {
+  ElMessage.success({
+    message: message,
+    type: 'success',
+    showClose: true,
+    duration: 3000
+  })
+}
+
+export const MsgInfo = (message: string) => {
+  ElMessage.info({
+    message: message,
+    type: 'info',
+    showClose: true,
+    duration: 3000
+  })
+}
+
+export const MsgWarning = (message: string) => {
+  ElMessage.warning({
+    message: message,
+    type: 'warning',
+    showClose: true,
+    duration: 3000
+  })
+}
+
+export const MsgError = (message: string) => {
+  ElMessage.error({
+    message: message,
+    type: 'error',
+    showClose: true,
+    duration: 3000
+  })
+}
+
+export const MsgAlert = (title: string, description: string, options?: any) => {
+  const defaultOptions: Object = {
+    confirmButtonText: '确定',
+    ...options
+  }
+  return ElMessageBox.alert(description, title, defaultOptions)
+}
+
+/**
+ * 删除知识库
+ * @param 参数 message: {title, description,type}
+ */
+
+export const MsgConfirm = (title: string, description: string, options?: any) => {
+  const defaultOptions: Object = {
+    showCancelButton: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    ...options
+  }
+  return ElMessageBox.confirm(description, title, defaultOptions)
+}
diff --git a/src/utils/permission/index.ts b/src/utils/permission/index.ts
new file mode 100644
index 0000000..37313f9
--- /dev/null
+++ b/src/utils/permission/index.ts
@@ -0,0 +1,55 @@
+import useStore from '@/stores';
+import { Role, Permission, ComplexPermission } from '@/utils/permission/type'
+/**
+ * 是否包含当前权限
+ * @param permission 当前权限
+ * @returns  True 包含 false 不包含
+ */
+const hasPermissionChild = (permission: Role | string | Permission | ComplexPermission) => {
+  const { user } = useStore();
+  const permissions = user.getPermissions()
+  const role = user.getRole()
+  if (!permission) {
+    return true
+  }
+  if (permission instanceof Role) {
+    return role === permission.role
+  }
+  if (permission instanceof Permission) {
+    return permissions.includes(permission.permission)
+  }
+  if (permission instanceof ComplexPermission) {
+    const permissionOk = permission.permissionList.some((p) => permissions.includes(p))
+    const roleOk = permission.roleList.includes(role)
+    return permission.compare === 'AND' ? permissionOk && roleOk : permissionOk || roleOk
+  }
+  if (typeof permission === 'string') {
+    return permissions.includes(permission)
+  }
+
+  return false
+}
+/**
+ * 判断是否有角色和权限
+ * @param role         角色
+ * @param permissions  权限
+ * @param requiredPermissions  权限
+ * @returns
+ */
+export const hasPermission = (
+  permission:
+    | Array<Role | string | Permission | ComplexPermission>
+    | Role
+    | string
+    | Permission
+    | ComplexPermission,
+  compare: 'OR' | 'AND'
+): boolean => {
+  if (permission instanceof Array) {
+    return compare === 'OR'
+      ? permission.some((p) => hasPermissionChild(p))
+      : permission.every((p) => hasPermissionChild(p))
+  } else {
+    return hasPermissionChild(permission)
+  }
+}
diff --git a/src/utils/permission/type.ts b/src/utils/permission/type.ts
new file mode 100644
index 0000000..874fc83
--- /dev/null
+++ b/src/utils/permission/type.ts
@@ -0,0 +1,36 @@
+/**
+ * 角色对象
+ */
+export class Role {
+  role: string
+
+  constructor(role: string) {
+    this.role = role
+  }
+}
+/**
+ * 权限对象
+ */
+export class Permission {
+  permission: string
+
+  constructor(permission: string) {
+    this.permission = permission
+  }
+}
+/**
+ * 复杂权限对象
+ */
+export class ComplexPermission {
+  roleList: Array<string>
+
+  permissionList: Array<string>
+
+  compare: 'OR' | 'AND'
+
+  constructor(roleList: Array<string>, permissionList: Array<string>, compare: 'OR' | 'AND') {
+    this.roleList = roleList
+    this.permissionList = permissionList
+    this.compare = compare
+  }
+}
diff --git a/src/utils/status.ts b/src/utils/status.ts
new file mode 100644
index 0000000..16f9859
--- /dev/null
+++ b/src/utils/status.ts
@@ -0,0 +1,68 @@
+import { type Dict } from '@/api/type/common'
+interface TaskTypeInterface {
+  // 向量化
+  EMBEDDING: number
+  // 生成问题
+  GENERATE_PROBLEM: number
+  // 同步
+  SYNC: number
+}
+interface StateInterface {
+  // 等待
+  PENDING: '0'
+  // 执行中
+  STARTED: '1'
+  // 成功
+  SUCCESS: '2'
+  // 失败
+  FAILURE: '3'
+  // 取消任务
+  REVOKE: '4'
+  // 取消成功
+  REVOKED: '5'
+  IGNORED: 'n'
+}
+const TaskType: TaskTypeInterface = {
+  EMBEDDING: 1,
+  GENERATE_PROBLEM: 2,
+  SYNC: 3
+}
+const State: StateInterface = {
+  // 等待
+  PENDING: '0',
+  // 执行中
+  STARTED: '1',
+  // 成功
+  SUCCESS: '2',
+  // 失败
+  FAILURE: '3',
+  // 取消任务
+  REVOKE: '4',
+  // 取消成功
+  REVOKED: '5',
+  IGNORED: 'n'
+}
+class Status {
+  task_status: Dict<any>
+  constructor(status?: string) {
+    if (!status) {
+      status = ''
+    }
+    status = status.split('').reverse().join('')
+    this.task_status = {}
+    for (let key in TaskType) {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      const index = value - 1
+      this.task_status[value] = status[index] ? status[index] : 'n'
+    }
+  }
+  toString() {
+    const r = []
+    for (let key in TaskType) {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      r.push(this.task_status[value])
+    }
+    return r.reverse().join('')
+  }
+}
+export { Status, State, TaskType, type TaskTypeInterface, type StateInterface }
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..35dbbbb
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,62 @@
+export const themeList = [
+  {
+    label: '默认',
+    value: '#3370FF',
+    loginBackground: 'default'
+  },
+  {
+    label: '活力橙',
+    value: '#FF8800',
+    loginBackground: 'orange'
+  },
+  {
+    label: '松石绿',
+    value: '#00B69D',
+    loginBackground: 'green'
+  },
+  {
+    label: '神秘紫',
+    value: '#7F3BF5',
+    loginBackground: 'purple'
+  },
+  {
+    label: '胭脂红',
+    value: '#F01D94',
+    loginBackground: 'red'
+  }
+]
+
+export function getThemeImg(val: string) {
+  return themeList.filter((v) => v.value === val)?.[0]?.loginBackground || 'default'
+}
+
+export const defaultSetting = {
+  icon: '',
+  loginLogo: '',
+  loginImage: '',
+  title: 'MaxKB',
+  slogan: '欢迎使用 MaxKB 智能知识库问答系统'
+}
+
+export const defaultPlatformSetting = {
+  showUserManual: true,
+  userManualUrl: 'https://maxkb.cn/docs/',
+  showForum: true,
+  forumUrl: 'https://bbs.fit2cloud.com/c/mk/11',
+  showProject: true,
+  projectUrl: 'https://github.com/1Panel-dev/MaxKB'
+}
+
+export function hexToRgba(hex?: string, alpha?: number) {
+  // 将16进制颜色值的两个字符一起转换成十进制
+  if (!hex) {
+    return ''
+  } else {
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
+
+    // 返回RGBA格式的字符串
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+}
diff --git a/src/utils/time.ts b/src/utils/time.ts
new file mode 100644
index 0000000..dcbe565
--- /dev/null
+++ b/src/utils/time.ts
@@ -0,0 +1,80 @@
+import moment from 'moment'
+import 'moment/dist/locale/zh-cn'
+moment.locale('zh-cn')
+
+// 当天日期 YYYY-MM-DD
+export const nowDate = moment().format('YYYY-MM-DD')
+
+// 当前时间的前n天
+export function beforeDay(n: number | string) {
+  return moment().subtract(n, 'days').format('YYYY-MM-DD')
+}
+
+const getCheckDate = (timestamp: any) => {
+  if (!timestamp) return false
+  const dt = new Date(timestamp)
+  if (isNaN(dt.getTime())) return false
+  return dt
+}
+export const datetimeFormat = (timestamp: any) => {
+  const dt = getCheckDate(timestamp)
+  if (!dt) return timestamp
+
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const hh = (dt.getHours() + '').padStart(2, '0')
+  const mm = (dt.getMinutes() + '').padStart(2, '0')
+  const ss = (dt.getSeconds() + '').padStart(2, '0')
+
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+}
+
+export const dateFormat = (timestamp: any) => {
+  const dt = getCheckDate(timestamp)
+  if (!dt) return timestamp
+
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+
+  return `${y}-${m}-${d}`
+}
+
+export function fromNowDate(time: any) {
+  // 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
+  const curTime = new Date()
+  const futureTime = new Date(time)
+  const timeDiff = futureTime.getTime() - curTime.getTime()
+
+  // 单位换算
+  const min = 60 * 1000
+  const hour = min * 60
+  const day = hour * 24
+  const week = day * 7
+
+  // 计算发布时间距离当前时间的周、天、时、分
+  const exceedWeek = Math.floor(timeDiff / week)
+  const exceedDay = Math.floor(timeDiff / day)
+  const exceedHour = Math.floor(timeDiff / hour)
+  const exceedMin = Math.floor(timeDiff / min)
+
+  // 最后判断时间差到底是属于哪个区间，然后return
+  if (exceedWeek > 0) {
+    return ''
+  } else {
+    if (exceedDay < 7 && exceedDay > 0) {
+      return exceedDay + '天后'
+    } else {
+      if (exceedHour < 24 && exceedHour > 0) {
+        return exceedHour + '小时后'
+      } else {
+        if (exceedMin < 0) {
+          return '已过期'
+        } else {
+          return '即将到期'
+        }
+      }
+    }
+  }
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..a926a40
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,102 @@
+export function toThousands(num: any) {
+  return num?.toString().replace(/\d+/, function (n: any) {
+    return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+  })
+}
+export function numberFormat(num: number) {
+  return num < 1000 ? toThousands(num) : toThousands((num / 1000).toFixed(1)) + 'k'
+}
+
+export function filesize(size: number) {
+  if (!size) return ''
+  /* byte */
+  const num = 1024.0
+
+  if (size < num) return size + 'B'
+  if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + 'K' //kb
+  if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + 'M' //M
+  if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + 'G' //G
+  return (size / Math.pow(num, 4)).toFixed(2) + 'T' //T
+}
+
+/*
+  随机id
+*/
+export const randomId = function () {
+  return Math.floor(Math.random() * 10000) + ''
+}
+
+/*
+  获取文件后缀
+*/
+export function fileType(name: string) {
+  const suffix = name.split('.')
+  return suffix[suffix.length - 1]
+}
+
+/*
+  获得文件对应图片
+*/
+const typeList: any = {
+  txt: ['txt', 'pdf', 'docx', 'md', 'html', 'zip', 'xlsx', 'xls', 'csv'],
+  table: ['xlsx', 'xls', 'csv'],
+  QA: ['xlsx', 'csv', 'xls', 'zip']
+}
+
+export function getImgUrl(name: string) {
+  const list = Object.values(typeList).flat()
+
+  const type = list.includes(fileType(name).toLowerCase()) ? fileType(name).toLowerCase() : 'unknow'
+  return new URL(`../assets/${type}-icon.svg`, import.meta.url).href
+}
+// 是否是白名单后缀
+export function isRightType(name: string, type: string) {
+  console.log(name, type)
+  return typeList[type].includes(fileType(name).toLowerCase())
+}
+
+/*
+  从指定数组中过滤出对应的对象
+*/
+export function relatedObject(list: any, val: any, attr: string) {
+  const filterData: any = list.filter((item: any) => item[attr] === val)?.[0]
+  return filterData || null
+}
+
+// 排序
+export function arraySort(list: Array<any>, property: any, desc?: boolean) {
+  return list.sort((a: any, b: any) => {
+    return desc ? b[property] - a[property] : a[property] - b[property]
+  })
+}
+
+// 判断对象里所有属性全部为空
+export function isAllPropertiesEmpty(obj: object) {
+  return Object.values(obj).every(
+    (value) =>
+      value === null || typeof value === 'undefined' || (typeof value === 'string' && !value)
+  )
+}
+
+// 数组对象中某一属性值的集合
+export function getAttrsArray(array: Array<any>, attr: string) {
+  return array.map((item) => {
+    return item[attr]
+  })
+}
+
+// 求和
+export function getSum(array: Array<any>) {
+  return array.reduce((total, item) => total + item, 0)
+}
+
+// 下载
+export function downloadByURL(url: string, name: string) {
+  const a = document.createElement('a')
+  a.setAttribute('href', url)
+  a.setAttribute('target', '_blank')
+  a.setAttribute('download', name)
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
diff --git a/src/views/404/index.vue b/src/views/404/index.vue
new file mode 100644
index 0000000..bb00f10
--- /dev/null
+++ b/src/views/404/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-row class="not-found-container">
+    <el-col class="img" :xs="0" :sm="0" :md="12" :lg="12" :xl="12"> </el-col>
+    <el-col class="message-container" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+      <div class="title">{{ $t('views.notFound.title')}}</div>
+      <div class="message">{{ $t('views.notFound.message') }}</div>
+      <!-- TODO 暂时不处理 -->
+      <!-- <div class="operate"><el-button type="primary" @click="router.push('/')">{{ $t('views.notFound.operate') }}</el-button></div> -->
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+<style lang="scss" scoped>
+.not-found-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .img {
+    background-image: url('@/assets/404.png');
+    background-size: 100% 100%;
+    width: 50%;
+    height: 100%;
+  }
+
+  .message-container {
+    color: var(--app-text-color);
+
+    .title {
+      font-size: 50px;
+      font-weight: 500;
+    }
+
+    .message {
+      font-size: 20px;
+      margin: 30px 0 20px 0;
+    }
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .not-found-container .message-container {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/application-overview/component/APIKeyDialog.vue b/src/views/application-overview/component/APIKeyDialog.vue
new file mode 100644
index 0000000..72832a2
--- /dev/null
+++ b/src/views/application-overview/component/APIKeyDialog.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-dialog
+    title="API Key"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    align-center
+  >
+    <el-button type="primary" class="mb-16" @click="createApiKey">
+      {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
+    </el-button>
+    <el-table :data="apiKey" class="mb-16" :loading="loading" height="420">
+      <el-table-column prop="secret_key" label="API Key">
+        <template #default="{ row }">
+          <span class="vertical-middle lighter break-all">
+            {{ row.secret_key }}
+          </span>
+          <el-button type="primary" text @click="copyClick(row.secret_key)">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')"
+        width="60"
+      >
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')"
+        width="170"
+      >
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')"
+        align="left"
+        width="80"
+      >
+        <template #default="{ row }">
+          <span class="mr-4">
+            <el-tooltip
+              effect="dark"
+              :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')"
+              placement="top"
+            >
+              <el-button type="primary" text @click.stop="settingApiKey(row)">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip
+            effect="dark"
+            :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')"
+            placement="top"
+          >
+            <el-button type="primary" text @click="deleteApiKey(row)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import overviewApi from '@/api/application-overview'
+import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['addData'])
+
+const SettingAPIKeyDialogRef = ref()
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const apiKey = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    apiKey.value = null
+  }
+})
+
+function settingApiKey(row: any) {
+  SettingAPIKeyDialogRef.value.open(row)
+}
+
+function deleteApiKey(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
+    t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
+    {
+      confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'),
+      cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      overviewApi.delAPIKey(id as string, row.id, loading).then(() => {
+        MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess'))
+        getApiKeyList()
+      })
+    })
+    .catch(() => {})
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool
+    ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
+    : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
+  overviewApi.putAPIKey(id as string, row.id, obj, loading).then((res) => {
+    MsgSuccess(str)
+    getApiKeyList()
+  })
+}
+
+function createApiKey() {
+  overviewApi.postAPIKey(id as string, loading).then((res) => {
+    getApiKeyList()
+  })
+}
+
+const open = () => {
+  getApiKeyList()
+  dialogVisible.value = true
+}
+
+function getApiKeyList() {
+  overviewApi.getAPIKey(id as string, loading).then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+function refresh() {
+  getApiKeyList()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application-overview/component/DisplaySettingDialog.vue b/src/views/application-overview/component/DisplaySettingDialog.vue
new file mode 100644
index 0000000..9f35c6f
--- /dev/null
+++ b/src/views/application-overview/component/DisplaySettingDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    title="显示设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="displayFormRef" :model="form">
+      <el-form-item>
+        <el-space direction="vertical" alignment="start">
+          <el-checkbox
+            v-model="form.show_source"
+            :label="isWorkFlow(detail.type) ? '显示执行详情' : '显示知识来源'"
+          />
+        </el-space>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"
+          >{{ $t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText') }}
+        </el-button>
+        <el-button type="primary" @click="submit(displayFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { t } from '@/locales'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+
+const displayFormRef = ref()
+const form = ref<any>({
+  show_source: false
+})
+
+const detail = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      show_source: false
+    }
+  }
+})
+
+const open = (data: any, content: any) => {
+  detail.value = content
+  form.value.show_source = data.show_source
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        show_source: form.value.show_source
+      }
+      applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.LimitDialog.settingSuccessMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application-overview/component/EditAvatarDialog.vue b/src/views/application-overview/component/EditAvatarDialog.vue
new file mode 100644
index 0000000..b4d15e8
--- /dev/null
+++ b/src/views/application-overview/component/EditAvatarDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <div>
+        <el-radio value="default">
+          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+          <AppAvatar
+            v-if="detail?.name"
+            :name="detail?.name"
+            pinyinColor
+            class="mt-8 mb-8"
+            shape="square"
+            :size="32"
+          />
+        </el-radio>
+      </div>
+      <div class="mt-8">
+        <el-radio value="custom">
+          <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+          <div class="flex mt-8">
+            <AppAvatar
+              v-if="fileURL"
+              shape="square"
+              :size="32"
+              style="background: none"
+              class="mr-16"
+            >
+              <img :src="fileURL" alt="" />
+            </AppAvatar>
+            <el-upload
+              ref="uploadRef"
+              action="#"
+              :auto-upload="false"
+              :show-file-list="false"
+              accept="image/jpeg, image/png, image/gif"
+              :on-change="onChange"
+            >
+              <el-button icon="Upload" :disabled="radioType !== 'custom'">{{
+                $t('views.applicationOverview.appInfo.EditAvatarDialog.upload')
+              }}</el-button>
+            </el-upload>
+          </div>
+          <div class="el-upload__tip info mt-16">
+            {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+          </div>
+        </el-radio>
+      </div>
+    </el-radio-group>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.cancel') }}</el-button
+        >
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.save') }}</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import overviewApi from '@/api/application-overview'
+import { cloneDeep } from 'lodash'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { defaultIcon, isAppIcon } from '@/utils/application'
+import useStore from '@/stores'
+import { t } from '@/locales'
+
+const { application } = useStore()
+
+const route = useRoute()
+const {
+  params: { id } //应用id
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const iconFile = ref<any>(null)
+const fileURL = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const detail = ref<any>(null)
+const radioType = ref('default')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    iconFile.value = null
+    fileURL.value = null
+  }
+})
+
+const open = (data: any) => {
+  radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
+  fileURL.value = isAppIcon(data.icon) ? data.icon : null
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  //1、判断文件大小是否合法，文件限制不能大于10MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    iconFile.value = file
+    fileURL.value = URL.createObjectURL(file.raw)
+  }
+}
+
+function submit() {
+  if (radioType.value === 'default') {
+    application.asyncPutApplication(id as string, { icon: defaultIcon }, loading).then((res) => {
+      emit('refresh')
+      MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
+      dialogVisible.value = false
+    })
+  } else if (radioType.value === 'custom' && iconFile.value) {
+    let fd = new FormData()
+    fd.append('file', iconFile.value.raw)
+    overviewApi.putAppIcon(id as string, fd, loading).then((res: any) => {
+      emit('refresh')
+      MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
+      dialogVisible.value = false
+    })
+  } else {
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application-overview/component/EmbedDialog.vue b/src/views/application-overview/component/EmbedDialog.vue
new file mode 100644
index 0000000..be37645
--- /dev/null
+++ b/src/views/application-overview/component/EmbedDialog.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.EmbedDialog.embedDialogTitle')"
+    v-model="dialogVisible"
+    width="900"
+    class="embed-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row :gutter="12">
+      <el-col :span="12">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.fullscreenModeTitle') }}
+          </p>
+          <img src="@/assets/window1.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source1)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source1 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.floatingModeTitle') }}
+          </p>
+          <img src="@/assets/window2.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source2)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source2 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { copyClick } from '@/utils/clipboard'
+import useStore from '@/stores'
+
+const { application } = useStore()
+
+const props = defineProps({
+  data: Object,
+  apiInputParams: String
+})
+
+const emit = defineEmits(['addData'])
+
+const dialogVisible = ref<boolean>(false)
+
+const source1 = ref('')
+
+const source2 = ref('')
+
+const urlParams1 = computed(() => (props.apiInputParams ? '?' + props.apiInputParams : ''))
+const urlParams2 = computed(() => (props.apiInputParams ? '&' + props.apiInputParams : ''))
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    source1.value = ''
+    source2.value = ''
+  }
+})
+
+const open = (val: string) => {
+  source1.value = `<iframe
+src="${application.location + val + urlParams1.value}"
+style="width: 100%; height: 100%;"
+frameborder="0"
+allow="microphone">
+</iframe>
+`
+
+  source2.value = `<script
+async
+defer
+src="${window.location.origin}/api/application/embed?protocol=${window.location.protocol.replace(
+    ':',
+    ''
+  )}&host=${window.location.host}&token=${val}${urlParams2.value}">
+<\/script>
+`
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.embed-dialog {
+  .title {
+    color: var(--app-text-color) !important;
+  }
+
+  .code {
+    color: var(--app-text-color) !important;
+
+    font-weight: 400;
+    font-size: 13px;
+    white-space: pre;
+    height: 188px;
+  }
+}
+</style>
diff --git a/src/views/application-overview/component/LimitDialog.vue b/src/views/application-overview/component/LimitDialog.vue
new file mode 100644
index 0000000..5de87f4
--- /dev/null
+++ b/src/views/application-overview/component/LimitDialog.vue
@@ -0,0 +1,198 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.LimitDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="limitFormRef" :model="form">
+      <!-- <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.showSourceLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.show_source"></el-switch>
+      </el-form-item> -->
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')"
+      >
+        <el-input-number
+          v-model="form.access_num"
+          :min="0"
+          :step="1"
+          :max="10000"
+          :value-on-clear="0"
+          controls-position="right"
+          style="width: 268px"
+          step-strictly
+        />
+        <span class="ml-4">{{
+          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+        }}</span>
+      </el-form-item>
+      <!--     身份验证 -->
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')"
+        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
+      >
+        <el-switch size="small" v-model="form.authentication" @change="firstGeneration"></el-switch>
+      </el-form-item>
+      <el-form-item
+        prop="authentication_value"
+        v-if="form.authentication"
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authenticationValue')"
+        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
+      >
+        <el-input
+          class="authentication-append-input"
+          v-model="form.authentication_value"
+          readonly
+          style="width: 268px"
+          disabled
+        >
+          <template #append>
+            <el-tooltip content="复制" placement="top">
+              <el-button
+                type="primary"
+                text
+                @click="copyClick(form.authentication_value)"
+                style="margin: 0 4px !important"
+              >
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </el-tooltip>
+            <el-tooltip content="刷新" placement="top">
+              <el-button
+                @click="refreshAuthentication"
+                type="primary"
+                text
+                style="margin: 0 4px 0 0 !important"
+              >
+                <el-icon><RefreshRight /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.white_active"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.white_list"
+          :placeholder="$t('views.applicationOverview.appInfo.LimitDialog.whitelistPlaceholder')"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"
+          >{{ $t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText') }}
+        </el-button>
+        <el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import { copyClick } from '@/utils/clipboard'
+import { ComplexPermission } from '@/utils/permission/type'
+import { first } from 'lodash'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const limitFormRef = ref()
+const form = ref<any>({
+  access_num: 0,
+  white_active: true,
+  white_list: '',
+  authentication_value: '',
+  authentication: false
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      access_num: 0,
+      white_active: true,
+      white_list: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value.access_num = data.access_num
+  form.value.white_active = data.white_active
+  form.value.white_list = data.white_list?.length ? data.white_list?.join('\n') : ''
+  form.value.authentication_value = data.authentication_value
+  form.value.authentication = data.authentication
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        white_list: form.value.white_list ? form.value.white_list.split('\n') : [],
+        white_active: form.value.white_active,
+        access_num: form.value.access_num,
+        authentication: form.value.authentication,
+        authentication_value: form.value.authentication_value
+      }
+      applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.LimitDialog.settingSuccessMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+function generateAuthenticationValue(length: number = 10) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const randomValues = new Uint8Array(length)
+  window.crypto.getRandomValues(randomValues)
+  return Array.from(randomValues)
+    .map((value) => chars[value % chars.length])
+    .join('')
+}
+function refreshAuthentication() {
+  form.value.authentication_value = generateAuthenticationValue()
+}
+
+function firstGeneration() {
+  if (form.value.authentication && !form.value.authentication_value) {
+    form.value.authentication_value = generateAuthenticationValue()
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.authentication-append-input {
+  .el-input-group__append {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/src/views/application-overview/component/SettingAPIKeyDialog.vue b/src/views/application-overview/component/SettingAPIKeyDialog.vue
new file mode 100644
index 0000000..dc580f9
--- /dev/null
+++ b/src/views/application-overview/component/SettingAPIKeyDialog.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="settingFormRef" :model="form">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.allow_cross_domain"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.cross_domain_list"
+          :placeholder="
+            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')
+          "
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.cancelButtonText')
+        }}</el-button>
+        <el-button type="primary" @click="submit(settingFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import overviewApi from '@/api/application-overview'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const settingFormRef = ref()
+const form = ref<any>({
+  allow_cross_domain: false,
+  cross_domain_list: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const APIKeyId = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      allow_cross_domain: false,
+      cross_domain_list: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  APIKeyId.value = data.id
+  form.value.allow_cross_domain = data.allow_cross_domain
+  form.value.cross_domain_list = data.cross_domain_list?.length
+    ? data.cross_domain_list?.join('\n')
+    : ''
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        allow_cross_domain: form.value.allow_cross_domain,
+        cross_domain_list: form.value.cross_domain_list
+          ? form.value.cross_domain_list.split('\n').filter(function (item: string) {
+              return item !== ''
+            })
+          : []
+      }
+      overviewApi.putAPIKey(id as string, APIKeyId.value, obj, loading).then((res) => {
+        emit('refresh')
+        //@ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.SettingAPIKeyDialog.successMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application-overview/component/StatisticsCharts.vue b/src/views/application-overview/component/StatisticsCharts.vue
new file mode 100644
index 0000000..dbcc2e8
--- /dev/null
+++ b/src/views/application-overview/component/StatisticsCharts.vue
@@ -0,0 +1,163 @@
+<template>
+  <el-row :gutter="16">
+    <el-col
+      :xs="12"
+      :sm="12"
+      :md="12"
+      :lg="6"
+      :xl="6"
+      v-for="(item, index) in statisticsType"
+      :key="index"
+      class="mb-16"
+    >
+      <el-card shadow="never">
+        <div class="flex align-center ml-8 mr-8">
+          <el-avatar :size="40" shape="square" :style="{ background: item.background }">
+            <appIcon :iconName="item.icon" :style="{ fontSize: '24px', color: item.color }" />
+          </el-avatar>
+          <div class="ml-12">
+            <p class="color-secondary lighter mb-4">{{ item.name }}</p>
+            <div v-if="item.id !== 'starCharts'" class="flex align-baseline">
+              <h2>{{ numberFormat(item.sum?.[0]) }}</h2>
+              <span v-if="item.sum.length > 1" class="ml-12" style="color: #f54a45"
+                >+{{ numberFormat(item.sum?.[1]) }}</span
+              >
+            </div>
+            <div v-else class="flex align-center mr-8">
+              <AppIcon iconName="app-like-color"></AppIcon>
+              <h2 class="ml-4">{{ item.sum?.[0] }}</h2>
+              <AppIcon class="ml-12" iconName="app-oppose-color"></AppIcon>
+              <h2 class="ml-4">{{ item.sum?.[1] }}</h2>
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16">
+    <el-col
+      :xs="24"
+      :sm="24"
+      :md="24"
+      :lg="12"
+      :xl="12"
+      v-for="(item, index) in statisticsType"
+      :key="index"
+      class="mb-16"
+    >
+      <el-card shadow="never">
+        <div class="p-8">
+          <AppCharts height="316px" :id="item.id" type="line" :option="item.option" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import AppCharts from '@/components/app-charts/index.vue'
+import { getAttrsArray, getSum, numberFormat } from '@/utils/utils'
+import { t } from '@/locales'
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
+const statisticsType = computed(() => [
+  {
+    id: 'customerCharts',
+    // @ts-ignore
+    name: t('views.applicationOverview.monitor.charts.customerTotal'),
+    icon: 'app-user',
+    background: '#EBF1FF',
+    color: '#3370FF',
+    sum: [
+      getSum(getAttrsArray(props.data, 'customer_num') || 0),
+      getSum(getAttrsArray(props.data, 'customer_added_count') || 0)
+    ],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.customerTotal'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          name: t('views.applicationOverview.monitor.charts.customerTotal'),
+          type: 'line',
+          area: true,
+          data: getAttrsArray(props.data, 'customer_num')
+        },
+        {
+          name:  t('views.applicationOverview.monitor.charts.customerNew'),
+          type: 'line',
+          area: true,
+          data: getAttrsArray(props.data, 'customer_added_count')
+        }
+      ]
+    }
+  },
+  {
+    id: 'chatRecordCharts',
+    name:  t('views.applicationOverview.monitor.charts.queryCount'),
+    icon: 'app-question',
+    background: '#FFF3E5',
+    color: '#FF8800',
+    sum: [getSum(getAttrsArray(props.data, 'chat_record_count') || 0)],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.queryCount'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          type: 'line',
+          data: getAttrsArray(props.data, 'chat_record_count')
+        }
+      ]
+    }
+  },
+  {
+    id: 'tokensCharts',
+    name: t('views.applicationOverview.monitor.charts.tokensTotal'),
+    icon: 'app-tokens',
+    background: '#E5FBF8',
+    color: '#00D6B9',
+    sum: [getSum(getAttrsArray(props.data, 'tokens_num') || 0)],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.tokensTotal'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          type: 'line',
+          data: getAttrsArray(props.data, 'tokens_num')
+        }
+      ]
+    }
+  },
+  {
+    id: 'starCharts',
+    name: t('views.applicationOverview.monitor.charts.userSatisfaction'),
+    icon: 'app-user-stars',
+    background: '#FEEDEC',
+    color: '#F54A45',
+    sum: [
+      getSum(getAttrsArray(props.data, 'star_num') || 0),
+      getSum(getAttrsArray(props.data, 'trample_num') || 0)
+    ],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.userSatisfaction'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          name: t('views.applicationOverview.monitor.charts.approval'),
+          type: 'line',
+          data: getAttrsArray(props.data, 'star_num')
+        },
+        {
+          name: t('views.applicationOverview.monitor.charts.disapproval'),
+          type: 'line',
+          data: getAttrsArray(props.data, 'trample_num')
+        }
+      ]
+    }
+  }
+])
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/src/views/application-overview/component/XPackDisplaySettingDialog.vue
new file mode 100644
index 0000000..6026982
--- /dev/null
+++ b/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -0,0 +1,505 @@
+<template>
+  <el-dialog
+    title="显示设置"
+    width="900"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    align-center
+    class="display-setting-dialog"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between mb-8">
+        <h4 :id="titleId" :class="titleClass">显示设置</h4>
+        <div class="flex align-center">
+          <el-button type="primary" @click.prevent="resetForm" link>
+            <el-icon class="mr-4"><Refresh /></el-icon>
+            恢复默认
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+    </template>
+
+    <el-row :gutter="8">
+      <el-col :span="12">
+        <div class="setting-preview border border-r-4 mr-16">
+          <div class="setting-preview-container">
+            <div class="setting-preview-header" :style="customStyle">
+              <div class="flex-between">
+                <div class="flex align-center">
+                  <div class="mr-12 ml-24 flex">
+                    <AppAvatar
+                      v-if="isAppIcon(detail?.icon)"
+                      shape="square"
+                      :size="32"
+                      style="background: none"
+                    >
+                      <img :src="detail?.icon" alt="" />
+                    </AppAvatar>
+                    <AppAvatar
+                      v-else-if="detail?.name"
+                      :name="detail?.name"
+                      pinyinColor
+                      shape="square"
+                      :size="32"
+                    />
+                  </div>
+
+                  <h4>
+                    {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+                  </h4>
+                </div>
+                <div class="mr-16">
+                  <el-button link>
+                    <AppIcon
+                      :iconName="'app-magnify'"
+                      :style="{
+                        color: xpackForm.custom_theme?.header_font_color
+                      }"
+                      style="font-size: 20px"
+                    ></AppIcon>
+                  </el-button>
+                  <el-button link>
+                    <el-icon
+                      :size="20"
+                      class="color-secondary"
+                      :style="{
+                        color: xpackForm.custom_theme?.header_font_color
+                      }"
+                      ><Close
+                    /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="p-16" style="position: relative">
+                <div class="flex">
+                  <div class="avatar">
+                    <el-image
+                      v-if="imgUrl.avatar"
+                      :src="imgUrl.avatar"
+                      alt=""
+                      fit="cover"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                    <LogoIcon
+                      v-else
+                      height="35px"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                  </div>
+
+                  <img src="@/assets/display-bg2.png" alt="" width="270" />
+                </div>
+                <div class="flex-between">
+                  <div class="avatar">
+                    <el-image
+                      v-if="imgUrl.user_avatar"
+                      :src="imgUrl.user_avatar"
+                      alt=""
+                      fit="cover"
+                      style="width: 35px; height: 35px; display: block"
+                    />
+                    <AppAvatar v-else>
+                      <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+                    </AppAvatar>
+                  </div>
+
+                  <img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
+                </div>
+              </div>
+              <div
+                style="position: absolute; bottom: 0; padding-bottom: 8px; box-sizing: border-box"
+                class="p-16 text-center w-full"
+              >
+                <img src="@/assets/display-bg1.png" alt="" class="w-full" />
+                <el-text
+                  type="info"
+                  v-if="xpackForm.disclaimer"
+                  class="mt-8"
+                  style="font-size: 12px"
+                >
+                  <auto-tooltip :content="xpackForm.disclaimer_value">
+                    {{ xpackForm.disclaimer_value }}
+                  </auto-tooltip>
+                </el-text>
+              </div>
+            </div>
+          </div>
+
+          <div class="float_icon">
+            <el-image
+              v-if="imgUrl.float_icon"
+              :src="imgUrl.float_icon"
+              alt=""
+              fit="cover"
+              style="width: 40px; height: 40px; display: block"
+            />
+            <img
+              v-else
+              src="/MaxKB.gif"
+              height="50px"
+              style="width: 40px; height: 40px; display: block"
+            />
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <el-form ref="displayFormRef" :model="form">
+          <el-row class="w-full mb-8">
+            <el-col :span="12">
+              <h5 class="mb-8">自定义主题色</h5>
+              <div>
+                <el-color-picker v-model="form.custom_theme.theme_color" />
+                {{ !form.custom_theme.theme_color ? '默认' : '' }}
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <h5 class="mb-8">头部标题字体颜色</h5>
+              <el-color-picker v-model="form.custom_theme.header_font_color" />
+            </el-col>
+          </el-row>
+          <el-card shadow="never" class="mb-8">
+            <div class="flex-between mb-8">
+              <span class="lighter">提问用户头像</span>
+
+              <el-upload
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small"
+              >建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
+            >
+          </el-card>
+          <el-card shadow="never" class="mb-8">
+            <div class="flex-between mb-8">
+              <span class="lighter">AI 回复头像</span>
+
+              <el-upload
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small">
+              建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
+            >
+          </el-card>
+          <el-card shadow="never" class="mb-8">
+            <div class="flex-between mb-8">
+              <span class="lighter">浮窗入口图标</span>
+              <el-upload
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
+              >
+                <el-button size="small"> 替换 </el-button>
+              </el-upload>
+            </div>
+            <el-text type="info" size="small">
+              建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB
+            </el-text>
+            <div class="border-t mt-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">图标默认位置</span>
+                <el-checkbox v-model="form.draggable" label="可拖拽位置" />
+              </div>
+              <el-row :gutter="8" class="w-full mb-8">
+                <el-col :span="12">
+                  <div class="flex align-center">
+                    <el-select v-model="form.float_location.x.type" style="width: 80px">
+                      <el-option label="左" value="left" />
+                      <el-option label="右" value="right" />
+                    </el-select>
+                    <el-input-number
+                      v-model="form.float_location.x.value"
+                      :min="0"
+                      :step="1"
+                      :precision="0"
+                      :value-on-clear="0"
+                      step-strictly
+                      controls-position="right"
+                    />
+                    <span class="ml-4">px</span>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="flex align-center">
+                    <el-select v-model="form.float_location.y.type" style="width: 80px">
+                      <el-option label="上" value="top" />
+                      <el-option label="下" value="bottom" />
+                    </el-select>
+                    <el-input-number
+                      v-model="form.float_location.y.value"
+                      :min="0"
+                      :step="1"
+                      :precision="0"
+                      :value-on-clear="0"
+                      step-strictly
+                      controls-position="right"
+                    />
+                    <span class="ml-4">px</span>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+
+          <el-space direction="vertical" alignment="start" :size="2">
+            <el-checkbox
+              v-model="form.show_source"
+              :label="isWorkFlow(detail.type) ? '显示执行详情' : '显示知识来源'"
+            />
+            <el-checkbox v-model="form.show_history" label="显示历史记录" />
+            <el-checkbox v-model="form.show_guide" label="显示引导图（浮窗模式）" />
+            <el-checkbox v-model="form.disclaimer" label="免责声明" @change="changeDisclaimer" />
+            <span v-if="form.disclaimer"
+              ><el-tooltip :content="form.disclaimer_value" placement="top">
+                <el-input
+                  v-model="form.disclaimer_value"
+                  style="width: 422px; margin-bottom: 10px"
+                  @change="changeValue"
+                  :maxlength="128"
+                /> </el-tooltip
+            ></span>
+          </el-space>
+        </el-form>
+      </el-col>
+    </el-row>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"
+          >{{ $t('views.applicationOverview.appInfo.LimitDialog.cancelButtonText') }}
+        </el-button>
+        <el-button type="primary" @click="submit(displayFormRef)" :loading="loading">
+          {{ $t('views.applicationOverview.appInfo.LimitDialog.saveButtonText') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { isAppIcon, isWorkFlow } from '@/utils/application'
+import applicationXpackApi from '@/api/application-xpack'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { t } from '@/locales'
+import useStore from '@/stores'
+import { cloneDeep } from 'lodash'
+const { user } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const defaultSetting = {
+  show_source: false,
+  show_history: true,
+  draggable: true,
+  show_guide: true,
+  avatar: '',
+  avatar_url: '',
+  float_icon: '',
+  float_icon_url: '',
+  user_avatar: '',
+  user_avatar_url: '',
+  disclaimer: false,
+  disclaimer_value: '「以上内容均由 AI 生成，仅供参考和借鉴」',
+  custom_theme: {
+    theme_color: '',
+    header_font_color: '#1f2329'
+  },
+  float_location: {
+    y: { type: 'bottom', value: 30 },
+    x: { type: 'right', value: 0 }
+  }
+}
+
+const displayFormRef = ref()
+const form = ref<any>({
+  show_source: false
+})
+
+const xpackForm = ref<any>({
+  show_source: false,
+  show_history: false,
+  draggable: false,
+  show_guide: false,
+  avatar: '',
+  avatar_url: '',
+  float_icon: '',
+  float_icon_url: '',
+  user_avatar: '',
+  user_avatar_url: '',
+  disclaimer: false,
+  disclaimer_value: '「以上内容均由 AI 生成，仅供参考和借鉴」',
+  custom_theme: {
+    theme_color: '',
+    header_font_color: '#1f2329'
+  },
+  float_location: {
+    y: { type: 'bottom', value: 30 },
+    x: { type: 'right', value: 0 }
+  }
+})
+
+const imgUrl = ref<any>({
+  avatar: '',
+  float_icon: '',
+  user_avatar: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const detail = ref<any>(null)
+
+const customStyle = computed(() => {
+  return {
+    background: xpackForm.value.custom_theme?.theme_color,
+    color: xpackForm.value.custom_theme?.header_font_color
+  }
+})
+
+function resetForm() {
+  form.value = cloneDeep(defaultSetting)
+  xpackForm.value = cloneDeep(defaultSetting)
+  imgUrl.value = {
+    avatar: '',
+    float_icon: '',
+    user_avatar: ''
+  }
+}
+
+const onChange = (file: any, fileList: UploadFiles, attr: string) => {
+  //1、判断文件大小是否合法，文件限制不能大于 10 MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    xpackForm.value[attr] = file.raw
+    imgUrl.value[attr] = URL.createObjectURL(file.raw)
+    xpackForm.value[`${attr}_url`] = ''
+  }
+}
+
+const open = (data: any, content: any) => {
+  detail.value = content
+  xpackForm.value.show_source = data.show_source
+  xpackForm.value.show_history = data.show_history
+  xpackForm.value.draggable = data.draggable
+  xpackForm.value.show_guide = data.show_guide
+  imgUrl.value.avatar = data.avatar
+  imgUrl.value.float_icon = data.float_icon
+  imgUrl.value.user_avatar = data.user_avatar
+  xpackForm.value.disclaimer = data.disclaimer
+  xpackForm.value.disclaimer_value = data.disclaimer_value
+  xpackForm.value.avatar_url = data.avatar
+  xpackForm.value.user_avatar_url = data.user_avatar
+  xpackForm.value.float_icon_url = data.float_icon
+  xpackForm.value.custom_theme = {
+    theme_color: data.custom_theme?.theme_color || '',
+    header_font_color: data.custom_theme?.header_font_color || '#1f2329'
+  }
+  xpackForm.value.float_location = data.float_location
+  form.value = xpackForm.value
+  dialogVisible.value = true
+}
+
+const changeValue = (value: string) => {
+  xpackForm.value.disclaimer_value = value
+}
+
+const changeDisclaimer = (value: boolean) => {
+  xpackForm.value.disclaimer = value
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let fd = new FormData()
+      Object.keys(xpackForm.value).map((item) => {
+        if (['custom_theme', 'float_location'].includes(item)) {
+          fd.append(item, JSON.stringify(xpackForm.value[item]))
+        } else {
+          fd.append(item, xpackForm.value[item])
+        }
+      })
+      applicationXpackApi.putAccessToken(id as string, fd, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('views.applicationOverview.appInfo.LimitDialog.settingSuccessMessage'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.setting-preview {
+  background: #f5f6f7;
+  height: 570px;
+  position: relative;
+  .float_icon {
+    position: absolute;
+    right: 8px;
+    bottom: 15px;
+  }
+  .setting-preview-container {
+    position: absolute;
+    left: 16px;
+    top: 25px;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+    background: var(--dialog-bg-gradient-color);
+    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    overflow: hidden;
+    width: 330px;
+    height: 520px;
+    .setting-preview-header {
+      background: var(--app-header-bg-color);
+      height: var(--app-header-height);
+      line-height: var(--app-header-height);
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--el-border-color);
+    }
+  }
+}
+.display-setting-dialog {
+  .el-dialog__header {
+    padding-right: 16px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>
diff --git a/src/views/application-overview/index.vue b/src/views/application-overview/index.vue
new file mode 100644
index 0000000..eda6ed6
--- /dev/null
+++ b/src/views/application-overview/index.vue
@@ -0,0 +1,420 @@
+<template>
+  <LayoutContainer :header="$t('views.applicationOverview.title')">
+    <el-scrollbar>
+      <div class="main-calc-height p-24">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.applicationOverview.appInfo.header') }}
+        </h4>
+        <el-card shadow="never" class="overview-card" v-loading="loading">
+          <div class="title flex align-center">
+            <div
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+              <AppAvatar
+                v-if="isAppIcon(detail?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="detail?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="detail?.name"
+                :name="detail?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+
+            <h4>{{ detail?.name }}</h4>
+          </div>
+
+          <el-row :gutter="12">
+            <el-col :span="12" class="mt-16">
+              <div class="flex">
+                <el-text type="info">{{
+                  $t('views.applicationOverview.appInfo.publicAccessLink')
+                }}</el-text>
+                <el-switch
+                  v-model="accessToken.is_active"
+                  class="ml-8"
+                  size="small"
+                  inline-prompt
+                  :active-text="$t('views.applicationOverview.appInfo.openText')"
+                  :inactive-text="$t('views.applicationOverview.appInfo.closeText')"
+                  @change="changeState($event)"
+                />
+              </div>
+
+              <div class="mt-4 mb-16 url-height flex align-center" style="margin-bottom: 37px">
+                <span class="vertical-middle lighter break-all ellipsis-1">
+                  {{ shareUrl }}
+                </span>
+
+                <el-button type="primary" text @click="copyClick(shareUrl)">
+                  <AppIcon iconName="app-copy"></AppIcon>
+                </el-button>
+                <el-button @click="refreshAccessToken" type="primary" text style="margin-left: 1px">
+                  <el-icon><RefreshRight /></el-icon>
+                </el-button>
+              </div>
+              <div>
+                <el-button
+                  v-if="accessToken?.is_active"
+                  :disabled="!accessToken?.is_active"
+                  type="primary"
+                  tag="a"
+                  :href="shareUrl"
+                  target="_blank"
+                >
+                  {{ $t('views.applicationOverview.appInfo.demo') }}
+                </el-button>
+                <el-button v-else :disabled="!accessToken?.is_active" type="primary">
+                  {{ $t('views.applicationOverview.appInfo.demo') }}
+                </el-button>
+                <el-button :disabled="!accessToken?.is_active" @click="openDialog">
+                  {{ $t('views.applicationOverview.appInfo.embedThirdParty') }}
+                </el-button>
+                <el-button @click="openLimitDialog">
+                  {{ $t('views.applicationOverview.appInfo.accessRestrictions') }}
+                </el-button>
+                <el-button @click="openDisplaySettingDialog">
+                  {{ $t('views.applicationOverview.appInfo.displaySetting') }}
+                </el-button>
+              </div>
+            </el-col>
+            <el-col :span="12" class="mt-16">
+              <div class="flex">
+                <el-text type="info"
+                  >{{ $t('views.applicationOverview.appInfo.apiAccessCredentials') }}
+                </el-text>
+              </div>
+              <div class="mt-4 mb-16 url-height">
+                <div>
+                  <el-text>API 文档：</el-text
+                  ><el-button
+                    type="primary"
+                    link
+                    @click="toUrl(apiUrl)"
+                    class="vertical-middle lighter break-all"
+                  >
+                    {{ apiUrl }}
+                  </el-button>
+                </div>
+                <div class="flex align-center">
+                  <span class="flex">
+                    <el-text style="width: 80px">Base URL：</el-text>
+                  </span>
+
+                  <span class="vertical-middle lighter break-all ellipsis-1">{{
+                    baseUrl + id
+                  }}</span>
+
+                  <el-button type="primary" text @click="copyClick(baseUrl + id)">
+                    <AppIcon iconName="app-copy"></AppIcon>
+                  </el-button>
+                </div>
+              </div>
+              <div>
+                <el-button @click="openAPIKeyDialog">{{
+                  $t('views.applicationOverview.appInfo.apiKey')
+                }}</el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+        <h4 class="title-decoration-1 mt-16 mb-16">
+          {{ $t('views.applicationOverview.monitor.monitoringStatistics') }}
+        </h4>
+        <div class="mb-16">
+          <el-select v-model="history_day" class="mr-12 w-120" @change="changeDayHandle">
+            <el-option
+              v-for="item in dayOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-date-picker
+            v-if="history_day === 'other'"
+            v-model="daterangeValue"
+            type="daterange"
+            :start-placeholder="$t('views.applicationOverview.monitor.startDatePlaceholder')"
+            :end-placeholder="$t('views.applicationOverview.monitor.endDatePlaceholder')"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            @change="changeDayRangeHandle"
+          />
+        </div>
+        <div v-loading="statisticsLoading">
+          <StatisticsCharts :data="statisticsData" />
+        </div>
+      </div>
+    </el-scrollbar>
+    <EmbedDialog
+      ref="EmbedDialogRef"
+      :data="detail"
+      :api-input-params="mapToUrlParams(apiInputParams)"
+    />
+    <APIKeyDialog ref="APIKeyDialogRef" />
+    <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
+    <XPackDisplaySettingDialog
+      ref="XPackDisplaySettingDialogRef"
+      @refresh="refresh"
+      v-if="user.isEnterprise()"
+    />
+    <DisplaySettingDialog ref="DisplaySettingDialogRef" @refresh="refresh" v-else />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import EmbedDialog from './component/EmbedDialog.vue'
+import APIKeyDialog from './component/APIKeyDialog.vue'
+import LimitDialog from './component/LimitDialog.vue'
+import DisplaySettingDialog from './component/DisplaySettingDialog.vue'
+import XPackDisplaySettingDialog from './component/XPackDisplaySettingDialog.vue'
+import EditAvatarDialog from './component/EditAvatarDialog.vue'
+import StatisticsCharts from './component/StatisticsCharts.vue'
+import applicationApi from '@/api/application'
+import overviewApi from '@/api/application-overview'
+import { nowDate, beforeDay } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { copyClick } from '@/utils/clipboard'
+import { isAppIcon } from '@/utils/application'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { user, application } = useStore()
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const apiUrl = window.location.origin + '/doc/chat/'
+
+const baseUrl = window.location.origin + '/api/application/'
+
+const DisplaySettingDialogRef = ref()
+const XPackDisplaySettingDialogRef = ref()
+const EditAvatarDialogRef = ref()
+const LimitDialogRef = ref()
+const APIKeyDialogRef = ref()
+const EmbedDialogRef = ref()
+
+const accessToken = ref<any>({})
+const detail = ref<any>(null)
+
+const loading = ref(false)
+
+const urlParams = computed(() =>
+  mapToUrlParams(apiInputParams.value) ? '?' + mapToUrlParams(apiInputParams.value) : ''
+)
+const shareUrl = computed(
+  
+  () => {
+    console.log(application.location )
+    console.log(urlParams )
+    return application.location + accessToken.value.access_token + urlParams.value}
+)
+
+const dayOptions = [
+  {
+    value: 7,
+    // @ts-ignore
+    label: t('views.applicationOverview.monitor.pastDayOptions.past7Days') // 使用 t 方法来国际化显示文本
+  },
+  {
+    value: 30,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past30Days')
+  },
+  {
+    value: 90,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past90Days')
+  },
+  {
+    value: 183,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past183Days')
+  },
+  {
+    value: 'other',
+    label: t('views.applicationOverview.monitor.pastDayOptions.other')
+  }
+]
+
+const history_day = ref<number | string>(7)
+
+// 日期组件时间
+const daterangeValue = ref('')
+
+// 提交日期时间
+const daterange = ref({
+  start_time: '',
+  end_time: ''
+})
+
+const statisticsLoading = ref(false)
+const statisticsData = ref([])
+
+const showEditIcon = ref(false)
+const apiInputParams = ref([])
+
+function toUrl(url: string) {
+  window.open(url, '_blank')
+}
+function openDisplaySettingDialog() {
+  if (user.isEnterprise()) {
+    XPackDisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  } else {
+    DisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  }
+}
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(detail.value)
+}
+
+function changeDayHandle(val: number | string) {
+  if (val !== 'other') {
+    daterange.value.start_time = beforeDay(val)
+    daterange.value.end_time = nowDate
+    getAppStatistics()
+  }
+}
+
+function changeDayRangeHandle(val: string) {
+  daterange.value.start_time = val[0]
+  daterange.value.end_time = val[1]
+  getAppStatistics()
+}
+
+function getAppStatistics() {
+  overviewApi.getStatistics(id, daterange.value, statisticsLoading).then((res: any) => {
+    statisticsData.value = res.data
+  })
+}
+
+function refreshAccessToken() {
+  MsgConfirm(
+    t('views.applicationOverview.appInfo.refreshToken.msgConfirm1'),
+    t('views.applicationOverview.appInfo.refreshToken.msgConfirm2'),
+    {
+      confirmButtonText: t('views.applicationOverview.appInfo.refreshToken.confirm'),
+      cancelButtonText: t('views.applicationOverview.appInfo.refreshToken.cancel')
+    }
+  )
+    .then(() => {
+      const obj = {
+        access_token_reset: true
+      }
+      // @ts-ignore
+      const str = t('views.applicationOverview.appInfo.refreshToken.refreshSuccess')
+      updateAccessToken(obj, str)
+    })
+    .catch(() => {})
+}
+function changeState(bool: Boolean) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool
+    ? t('views.applicationOverview.appInfo.changeState.enableSuccess')
+    : t('views.applicationOverview.appInfo.changeState.disableSuccess')
+  updateAccessToken(obj, str)
+}
+
+function updateAccessToken(obj: any, str: string) {
+  applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+    accessToken.value = res?.data
+    MsgSuccess(str)
+  })
+}
+
+function openLimitDialog() {
+  LimitDialogRef.value.open(accessToken.value)
+}
+
+function openAPIKeyDialog() {
+  APIKeyDialogRef.value.open()
+}
+function openDialog() {
+  EmbedDialogRef.value.open(accessToken.value?.access_token)
+}
+function getAccessToken() {
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    accessToken.value = res?.data
+  })
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    detail.value = res.data
+    detail.value.work_flow?.nodes
+      ?.filter((v: any) => v.id === 'base-node')
+      .map((v: any) => {
+        apiInputParams.value = v.properties.api_input_field_list
+          ? v.properties.api_input_field_list.map((v: any) => {
+              return {
+                name: v.variable,
+                value: v.default_value
+              }
+            })
+          : v.properties.input_field_list
+            ? v.properties.input_field_list
+                .filter((v: any) => v.assignment_method === 'api_input')
+                .map((v: any) => {
+                  return {
+                    name: v.variable,
+                    value: v.default_value
+                  }
+                })
+            : []
+      })
+  })
+}
+
+function refresh() {
+  getAccessToken()
+}
+
+function refreshIcon() {
+  getDetail()
+}
+
+function mapToUrlParams(map: any[]) {
+  const params = new URLSearchParams()
+
+  map.forEach((item: any) => {
+    params.append(encodeURIComponent(item.name), encodeURIComponent(item.value))
+  })
+
+  return params.toString() // 返回 URL 查询字符串
+}
+
+onMounted(() => {
+  getDetail()
+  getAccessToken()
+  changeDayHandle(history_day.value)
+})
+</script>
+<style lang="scss" scoped>
+.overview-card {
+  position: relative;
+  .active-button {
+    position: absolute;
+    right: 16px;
+    top: 21px;
+  }
+}
+</style>
diff --git a/src/views/application-workflow/component/DropdownMenu.vue b/src/views/application-workflow/component/DropdownMenu.vue
new file mode 100644
index 0000000..8d9a25c
--- /dev/null
+++ b/src/views/application-workflow/component/DropdownMenu.vue
@@ -0,0 +1,289 @@
+<template>
+  <div v-show="show" class="workflow-dropdown-menu border border-r-4">
+    <el-tabs v-model="activeName" class="workflow-dropdown-tabs">
+      <div style="display: flex; width: 100%; justify-content: center" class="mb-4">
+        <el-input v-model="search_text" style="width: 240px" placeholder="按名称搜索">
+          <template #suffix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+
+      <el-tab-pane label="基础组件" name="base">
+        <el-scrollbar height="400">
+          <div v-if="filter_menu_nodes.length > 0">
+            <template v-for="(item, index) in filter_menu_nodes" :key="index">
+              <div
+                class="workflow-dropdown-item cursor flex p-8-12"
+                @click.stop="clickNodes(item)"
+                @mousedown.stop="onmousedown(item)"
+              >
+                <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
+                <div class="pre-wrap">
+                  <div class="lighter">{{ item.label }}</div>
+                  <el-text type="info" size="small">{{ item.text }}</el-text>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-else class="ml-16 mt-8">
+            <el-text type="info">没有找到相关结果</el-text>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane label="函数库" name="function">
+        <el-scrollbar height="400">
+          <div
+            class="workflow-dropdown-item cursor flex p-8-12"
+            @click.stop="clickNodes(functionNode)"
+            @mousedown.stop="onmousedown(functionNode)"
+          >
+            <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8 mt-4" :size="32" />
+            <div class="pre-wrap">
+              <div class="lighter">{{ functionNode.label }}</div>
+              <el-text type="info" size="small">{{ functionNode.text }}</el-text>
+            </div>
+          </div>
+
+          <template v-for="(item, index) in filter_function_lib_list" :key="index">
+            <div
+              class="workflow-dropdown-item cursor flex p-8-12 align-center"
+              @click.stop="clickNodes(functionLibNode, item, 'function')"
+              @mousedown.stop="onmousedown(functionLibNode, item, 'function')"
+            >
+              <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8" :size="32" />
+              <div class="pre-wrap">
+                <div class="lighter ellipsis-1" :title="item.name">{{ item.name }}</div>
+                <p>
+                  <el-text
+                    class="ellipsis-1"
+                    type="info"
+                    size="small"
+                    :title="item.desc"
+                    v-if="item.desc"
+                    >{{ item.desc }}</el-text
+                  >
+                </p>
+              </div>
+            </div>
+          </template>
+        </el-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane label="应用" name="application">
+        <el-scrollbar height="400">
+          <div v-if="filter_application_list.length > 0">
+            <template v-for="(item, index) in filter_application_list" :key="index">
+              <div
+                class="workflow-dropdown-item cursor flex align-center p-8-12"
+                @click.stop="clickNodes(applicationNode, item, 'application')"
+                @mousedown.stop="onmousedown(applicationNode, item, 'application')"
+              >
+                <component
+                  :is="iconComponent(`application-node-icon`)"
+                  class="mr-8"
+                  :size="32"
+                  :item="item"
+                />
+                <div class="pre-wrap" style="width: 60%">
+                  <div class="lighter ellipsis" :title="item.name">
+                    {{ item.name }}
+                  </div>
+                  <p>
+                    <el-text
+                      class="ellipsis"
+                      type="info"
+                      size="small"
+                      :title="item.desc"
+                      v-if="item.desc"
+                      >{{ item.desc }}</el-text
+                    >
+                  </p>
+                </div>
+                <div class="status-tag" style="margin-left: auto">
+                  <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px"
+                    >高级编排</el-tag
+                  >
+                  <el-tag class="blue-tag" v-else style="height: 22px">简单配置</el-tag>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-else class="ml-16 mt-8">
+            <el-text type="info">没有找到相关结果</el-text>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { menuNodes, functionLibNode, functionNode, applicationNode } from '@/workflow/common/data'
+import { iconComponent } from '@/workflow/icons/utils'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+const search_text = ref<string>('')
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  workflowRef: Object
+})
+
+const emit = defineEmits(['clickNodes', 'onmousedown'])
+
+const loading = ref(false)
+const activeName = ref('base')
+
+const functionLibList = ref<any[]>([])
+const filter_function_lib_list = computed(() => {
+  return functionLibList.value.filter((item: any) =>
+    item.name.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+const applicationList = ref<any[]>([])
+const filter_application_list = computed(() => {
+  return applicationList.value.filter((item: any) =>
+    item.name.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+
+const filter_menu_nodes = computed(() => {
+  return menuNodes.filter((item) =>
+    item.label.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+function clickNodes(item: any, data?: any, type?: string) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    if (type == 'function') {
+      item['properties']['node_data'] = {
+        ...data,
+        function_lib_id: data.id,
+        input_field_list: data.input_field_list.map((field: any) => ({
+          ...field,
+          value: field.source == 'reference' ? [] : ''
+        }))
+      }
+    }
+    if (type == 'application') {
+      if (isWorkFlow(data.type)) {
+        const nodeData = data.work_flow.nodes[0].properties.node_data
+        const fileUploadSetting = nodeData.file_upload_setting
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id,
+          api_input_field_list: data.work_flow.nodes[0].properties.api_input_field_list,
+          user_input_field_list: data.work_flow.nodes[0].properties.user_input_field_list,
+          ...(!fileUploadSetting
+            ? {}
+            : {
+                ...(fileUploadSetting.document ? { document_list: [] } : {}),
+                ...(fileUploadSetting.image ? { image_list: [] } : {}),
+                ...(fileUploadSetting.audio ? { audio_list: [] } : {})
+              })
+        }
+      } else {
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id
+        }
+      }
+    }
+  }
+  props.workflowRef?.addNode(item)
+
+  emit('clickNodes', item)
+}
+
+function onmousedown(item: any, data?: any, type?: string) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    if (type == 'function') {
+      item['properties']['node_data'] = {
+        ...data,
+        function_lib_id: data.id,
+        input_field_list: data.input_field_list.map((field: any) => ({
+          ...field,
+          value: field.source == 'reference' ? [] : ''
+        }))
+      }
+    }
+    if (type == 'application') {
+      if (isWorkFlow(data.type)) {
+        const nodeData = data.work_flow.nodes[0].properties.node_data
+        const fileUploadSetting = nodeData.file_upload_setting
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id,
+          api_input_field_list: data.work_flow.nodes[0].properties.api_input_field_list,
+          user_input_field_list: data.work_flow.nodes[0].properties.user_input_field_list,
+          ...(!fileUploadSetting
+            ? {}
+            : {
+                ...(fileUploadSetting.document ? { document_list: [] } : {}),
+                ...(fileUploadSetting.image ? { image_list: [] } : {}),
+                ...(fileUploadSetting.audio ? { audio_list: [] } : {})
+              })
+        }
+      } else {
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id
+        }
+      }
+    }
+  }
+  props.workflowRef?.onmousedown(item)
+  emit('onmousedown', item)
+}
+
+function getList() {
+  applicationApi.listFunctionLib(props.id, loading).then((res: any) => {
+    functionLibList.value = res.data
+  })
+  applicationApi.getApplicationList(props.id, loading).then((res: any) => {
+    applicationList.value = res.data
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.workflow-dropdown-menu {
+  -moz-user-select: none; /* Firefox */
+  -webkit-user-select: none; /* WebKit内核 */
+  -ms-user-select: none; /* IE10及以后 */
+  -khtml-user-select: none; /* 早期浏览器 */
+  -o-user-select: none; /* Opera */
+  user-select: none; /* CSS3属性 */
+  position: absolute;
+  top: 49px;
+  right: 122px;
+  z-index: 99;
+  width: 268px;
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
+  background: #ffffff;
+  padding-bottom: 8px;
+
+  .title {
+    padding: 12px 12px 4px;
+  }
+  .workflow-dropdown-item {
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/src/views/application-workflow/component/PublishHistory.vue b/src/views/application-workflow/component/PublishHistory.vue
new file mode 100644
index 0000000..d66d7fb
--- /dev/null
+++ b/src/views/application-workflow/component/PublishHistory.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="workflow-publish-history border-l">
+    <h4 class="border-b p-16-24">发布历史</h4>
+    <div class="list-height pt-0">
+      <el-scrollbar>
+        <div class="p-8 pt-0">
+          <common-list
+            :data="LogData"
+            class="mt-8"
+            v-loading="loading"
+            @click="clickListHandle"
+            @mouseenter="mouseenter"
+            @mouseleave="mouseId = ''"
+          >
+            <template #default="{ row, index }">
+              <div class="flex-between">
+                <div style="max-width: 80%">
+                  <h5 :class="index === 0 ? 'primary' : ''" class="flex">
+                    <ReadWrite
+                      @change="editName($event, row)"
+                      :data="row.name || datetimeFormat(row.update_time)"
+                      trigger="manual"
+                      :write="row.writeStatus"
+                      @close="closeWrite(row)"
+                    />
+                    <el-tag v-if="index === 0" class="default-tag ml-4">最近发布</el-tag>
+                  </h5>
+                  <el-text type="info" class="color-secondary flex mt-8">
+                    <AppAvatar :size="20" class="avatar-grey mr-4">
+                      <el-icon><UserFilled /></el-icon>
+                    </AppAvatar>
+                    {{ row.publish_user_name }}
+                  </el-text>
+                </div>
+
+                <div @click.stop v-show="mouseId === row.id">
+                  <el-dropdown trigger="click" :teleported="false">
+                    <el-button text>
+                      <el-icon><MoreFilled /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click.stop="openEditVersion(row)">
+                          <el-icon><EditPen /></el-icon>
+                          编辑
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="refreshVersion(row)">
+                          <el-icon><RefreshLeft /></el-icon>
+                          恢复此版本
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+
+            <template #empty>
+              <div class="text-center">
+                <el-text type="info">暂无历史记录</el-text>
+              </div>
+            </template>
+          </common-list>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import applicationApi from '@/api/application'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgError } from '@/utils/message'
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const emit = defineEmits(['click', 'refreshVersion'])
+const loading = ref(false)
+const LogData = ref<any[]>([])
+
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+
+function clickListHandle(item: any) {
+  emit('click', item)
+}
+
+function refreshVersion(item: any) {
+  emit('refreshVersion', item)
+}
+
+function openEditVersion(item: any) {
+  item['writeStatus'] = true
+}
+
+function closeWrite(item: any) {
+  item['writeStatus'] = false
+}
+
+function editName(val: string, item: any) {
+  if (val) {
+    const obj = {
+      name: val
+    }
+    applicationApi.putWorkFlowVersion(id as string, item.id, obj, loading).then(() => {
+      MsgSuccess('修改成功')
+      item['writeStatus'] = false
+      getList()
+    })
+  } else {
+    MsgError('名字不能为空！')
+  }
+}
+
+function getList() {
+  applicationApi.getWorkFlowVersion(id, loading).then((res: any) => {
+    LogData.value = res.data
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.workflow-publish-history {
+  width: 320px;
+  position: absolute;
+  right: 0;
+  top: 57px;
+  background: #ffffff;
+  height: calc(100vh - 57px);
+  z-index: 9;
+  .list-height {
+    height: calc(100vh - 120px);
+  }
+}
+</style>
diff --git a/src/views/application-workflow/index.vue b/src/views/application-workflow/index.vue
new file mode 100644
index 0000000..b0dc539
--- /dev/null
+++ b/src/views/application-workflow/index.vue
@@ -0,0 +1,434 @@
+<template>
+  <div class="application-workflow" v-loading="loading">
+    <div class="header border-b flex-between p-12-24">
+      <div class="flex align-center">
+        <back-button
+          @click="router.push({ path: `/application/${id}/WORK_FLOW/overview` })"
+        ></back-button>
+        <h4>{{ detail?.name }}</h4>
+        <div v-if="showHistory && disablePublic">
+          <el-text type="info" class="ml-16 color-secondary"
+            >预览版本：
+            {{ currentVersion.name || datetimeFormat(currentVersion.update_time) }}</el-text
+          >
+        </div>
+        <el-text type="info" class="ml-16 color-secondary" v-else-if="saveTime"
+          >保存时间：{{ datetimeFormat(saveTime) }}</el-text
+        >
+      </div>
+      <div v-if="showHistory && disablePublic">
+        <el-button type="primary" class="mr-8" @click="refreshVersion()"> 恢复版本 </el-button>
+        <el-divider direction="vertical" />
+        <el-button text @click="closeHistory">
+          <el-icon><Close /></el-icon>
+        </el-button>
+      </div>
+      <div v-else>
+        <el-button icon="Plus" @click="showPopover = !showPopover"> 添加组件 </el-button>
+        <el-button @click="clickShowDebug" :disabled="showDebug">
+          <AppIcon iconName="app-play-outlined" class="mr-4"></AppIcon>
+          调试</el-button
+        >
+        <el-button @click="saveApplication(true)">
+          <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
+          保存
+        </el-button>
+        <el-button type="primary" @click="publicHandle"> 发布 </el-button>
+
+        <el-dropdown trigger="click">
+          <el-button text @click.stop class="ml-8 mt-4">
+            <el-icon class="rotate-90"><MoreFilled /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="openHistory">
+                <AppIcon iconName="app-history-outlined"></AppIcon>
+                发布历史
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <AppIcon iconName="app-save-outlined"></AppIcon>
+                自动保存
+                <div class="ml-4">
+                  <el-switch size="small" v-model="isSave" @change="changeSave" />
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 下拉框 -->
+    <el-collapse-transition>
+      <DropdownMenu
+        :show="showPopover"
+        :id="id"
+        v-click-outside="clickoutside"
+        @clickNodes="clickNodes"
+        @onmousedown="onmousedown"
+        :workflowRef="workflowRef"
+      />
+    </el-collapse-transition>
+    <!-- 主画布 -->
+    <div class="workflow-main" ref="workflowMainRef">
+      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
+    </div>
+    <!-- 调试 -->
+    <el-collapse-transition>
+      <div
+        v-click-outside="clickoutsideDebug"
+        class="workflow-debug-container"
+        :class="enlarge ? 'enlarge' : ''"
+        v-if="showDebug"
+      >
+        <div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
+          <div class="flex-between">
+            <div class="flex align-center">
+              <div class="mr-12 ml-24 flex">
+                <AppAvatar
+                  v-if="isAppIcon(detail?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                >
+                  <img :src="detail?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="detail?.name"
+                  :name="detail?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                />
+              </div>
+
+              <h4>
+                {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+              </h4>
+            </div>
+            <div class="mr-16">
+              <el-button link @click="enlarge = !enlarge">
+                <AppIcon
+                  :iconName="enlarge ? 'app-minify' : 'app-magnify'"
+                  class="color-secondary"
+                  style="font-size: 20px"
+                ></AppIcon>
+              </el-button>
+              <el-button link @click="showDebug = false">
+                <el-icon :size="20" class="color-secondary"><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="scrollbar-height">
+          <AiChat :application-details="detail" :type="'debug-ai-chat'"></AiChat>
+        </div>
+      </div>
+    </el-collapse-transition>
+    <!-- 发布历史 -->
+    <PublishHistory
+      v-if="showHistory"
+      @click="checkVersion"
+      v-click-outside="clickoutsideHistory"
+      @refreshVersion="refreshVersion"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import Workflow from '@/workflow/index.vue'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
+import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
+import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { datetimeFormat } from '@/utils/time'
+import useStore from '@/stores'
+import { WorkFlowInstance } from '@/workflow/common/validate'
+import { hasPermission } from '@/utils/permission'
+
+const { user, application } = useStore()
+const router = useRouter()
+const route = useRoute()
+
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+const {
+  params: { id }
+} = route as any
+
+let interval: any
+const workflowRef = ref()
+const workflowMainRef = ref()
+const loading = ref(false)
+const detail = ref<any>(null)
+
+const showPopover = ref(false)
+const showDebug = ref(false)
+const enlarge = ref(false)
+const saveTime = ref<any>('')
+const isSave = ref(false)
+const showHistory = ref(false)
+const disablePublic = ref(false)
+const currentVersion = ref<any>({})
+
+function clickoutsideHistory() {
+  if (!disablePublic.value) {
+    showHistory.value = false
+    disablePublic.value = false
+  }
+}
+
+function refreshVersion(item?: any) {
+  if (item) {
+    renderGraphData(item)
+  }
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+  showHistory.value = false
+  disablePublic.value = false
+}
+
+function checkVersion(item: any) {
+  disablePublic.value = true
+  currentVersion.value = item
+  renderGraphData(item)
+  closeInterval()
+}
+
+function renderGraphData(item: any) {
+  item.work_flow['nodes'].map((v: any) => {
+    v['properties']['noRender'] = true
+  })
+  detail.value.work_flow = item.work_flow
+  saveTime.value = item?.update_time
+  workflowRef.value?.clearGraphData()
+  nextTick(() => {
+    workflowRef.value?.render(item.work_flow)
+  })
+}
+
+function closeHistory() {
+  getDetail()
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+  showHistory.value = false
+  disablePublic.value = false
+}
+
+function openHistory() {
+  showHistory.value = true
+}
+
+function changeSave(bool: boolean) {
+  bool ? initInterval() : closeInterval()
+  localStorage.setItem('workflowAutoSave', bool.toString())
+}
+
+function clickNodes(item: any) {
+  // workflowRef.value?.addNode(item)
+  showPopover.value = false
+}
+
+function onmousedown(item: any) {
+  // workflowRef.value?.onmousedown(item)
+  showPopover.value = false
+}
+
+function clickoutside() {
+  showPopover.value = false
+}
+async function publicHandle() {
+  // 后执行发布
+  workflowRef.value
+    ?.validate()
+    .then(async () => {
+      const obj = {
+        work_flow: getGraphData()
+      }
+      await application.asyncPutApplication(id, obj)
+      const workflow = new WorkFlowInstance(obj.work_flow)
+      try {
+        workflow.is_valid()
+      } catch (e: any) {
+        MsgError(e.toString())
+        return
+      }
+      applicationApi.putPublishApplication(id as String, obj, loading).then(() => {
+        MsgSuccess('发布成功')
+      })
+    })
+    .catch((res: any) => {
+      const node = res.node
+      const err_message = res.errMessage
+      if (typeof err_message == 'string') {
+        MsgError(res.node.properties?.stepName + '节点 ' + err_message)
+      } else {
+        const keys = Object.keys(err_message)
+        MsgError(node.properties?.stepName + '节点 ' + err_message[keys[0]]?.[0]?.message)
+      }
+    })
+}
+
+const clickShowDebug = () => {
+  workflowRef.value
+    ?.validate()
+    .then(() => {
+      const graphData = getGraphData()
+      const workflow = new WorkFlowInstance(graphData)
+      try {
+        workflow.is_valid()
+        detail.value = {
+          ...detail.value,
+          type: 'WORK_FLOW',
+          ...workflow.get_base_node()?.properties.node_data,
+          work_flow: getGraphData()
+        }
+
+        showDebug.value = true
+      } catch (e: any) {
+        MsgError(e.toString())
+      }
+    })
+    .catch((res: any) => {
+      const node = res.node
+      const err_message = res.errMessage
+      if (typeof err_message == 'string') {
+        MsgError(res.node.properties?.stepName + '节点 ' + err_message)
+      } else {
+        const keys = Object.keys(err_message)
+        MsgError(node.properties?.stepName + '节点 ' + err_message[keys[0]]?.[0]?.message)
+      }
+    })
+}
+function clickoutsideDebug(e: any) {
+  if (workflowMainRef.value && e && e.target && workflowMainRef.value.contains(e?.target)) {
+    showDebug.value = false
+  }
+}
+
+function getGraphData() {
+  return workflowRef.value?.getGraphData()
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id).then((res: any) => {
+    res.data?.work_flow['nodes'].map((v: any) => {
+      v['properties']['noRender'] = true
+    })
+    detail.value = res.data
+    detail.value.stt_model_id = res.data.stt_model
+    detail.value.tts_model_id = res.data.tts_model
+    detail.value.tts_type = res.data.tts_type
+    saveTime.value = res.data?.update_time
+    workflowRef.value?.clearGraphData()
+    nextTick(() => {
+      workflowRef.value?.renderGraphData(detail.value.work_flow)
+    })
+  })
+}
+
+function saveApplication(bool?: boolean) {
+  const obj = {
+    work_flow: getGraphData()
+  }
+  application.asyncPutApplication(id, obj).then((res) => {
+    saveTime.value = new Date()
+    if (bool) {
+      MsgSuccess('保存成功')
+    }
+  })
+}
+
+/**
+ * 定时保存
+ */
+const initInterval = () => {
+  interval = setInterval(() => {
+    saveApplication()
+  }, 60000)
+}
+
+/**
+ * 关闭定时
+ */
+const closeInterval = () => {
+  if (interval) {
+    clearInterval(interval)
+  }
+}
+
+onMounted(() => {
+  getDetail()
+  const workflowAutoSave = localStorage.getItem('workflowAutoSave')
+  isSave.value = workflowAutoSave === 'true' ? true : false
+  // 初始化定时任务
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+})
+
+onBeforeUnmount(() => {
+  // 清除定时任务
+  closeInterval()
+  workflowRef.value?.clearGraphData()
+})
+</script>
+<style lang="scss">
+.application-workflow {
+  background: var(--app-layout-bg-color);
+  height: 100%;
+  .header {
+    background: #ffffff;
+  }
+  .workflow-main {
+    height: calc(100vh - 62px);
+    box-sizing: border-box;
+  }
+
+  .workflow-dropdown-tabs {
+    .el-tabs__nav-wrap {
+      padding: 0 16px;
+    }
+  }
+}
+
+.workflow-debug-container {
+  z-index: 2000;
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid #ffffff;
+  background: var(--dialog-bg-gradient-color);
+  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  overflow: hidden;
+  width: 450px;
+  height: 600px;
+  .workflow-debug-header {
+    background: var(--app-header-bg-color);
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  .scrollbar-height {
+    height: calc(100% - var(--app-header-height) - 24px);
+    padding-top: 24px;
+  }
+  &.enlarge {
+    width: 50% !important;
+    height: 100% !important;
+    bottom: 0 !important;
+    right: 0 !important;
+  }
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/application/ApplicationAccess.vue b/src/views/application/ApplicationAccess.vue
new file mode 100644
index 0000000..0461d6b
--- /dev/null
+++ b/src/views/application/ApplicationAccess.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="p-16-24">
+    <h4 class="mb-16">应用接入</h4>
+
+    <el-row :gutter="16">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        class="mb-16"
+        v-for="(item, index) in platforms"
+        :key="index"
+      >
+        <el-card shadow="hover" class="border-none cursor" style="--el-card-padding: 24px">
+          <div class="flex-between">
+            <div class="flex align-center ml-8 mr-8">
+              <img :src="item.logoSrc" alt="" class="icon" />
+              <div class="ml-12">
+                <h5 class="mb-4">{{ item.name }}</h5>
+                <el-text type="info" style="font-size: 12px">{{ item.description }}</el-text>
+              </div>
+            </div>
+            <div>
+              <el-switch
+                size="small"
+                v-model="item.isActive"
+                @change="changeStatus(item.key, item.isActive)"
+                :disabled="!item.exists"
+              />
+              <el-divider direction="vertical" />
+              <el-button class="mr-4" @click="openDrawer(item.key)">配置</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <AccessSettingDrawer ref="AccessSettingDrawerRef" @refresh="refresh" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import AccessSettingDrawer from './component/AccessSettingDrawer.vue'
+import applicationApi from '@/api/application'
+import { MsgSuccess } from '@/utils/message'
+import { useRoute } from 'vue-router'
+
+// 平台数据
+const platforms = reactive([
+  {
+    key: 'wecom',
+    logoSrc: new URL(`../../assets/logo_wechat-work.svg`, import.meta.url).href,
+    name: '企业微信应用',
+    description: '打造企业微信智能应用',
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'dingtalk',
+    logoSrc: new URL(`../../assets/logo_dingtalk.svg`, import.meta.url).href,
+    name: '钉钉应用',
+    description: '打造钉钉智能应用',
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'wechat',
+    logoSrc: new URL(`../../assets/logo_wechat.svg`, import.meta.url).href,
+    name: '公众号',
+    description: '打造公众号智能应用',
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'feishu',
+    logoSrc: new URL(`../../assets/logo_lark.svg`, import.meta.url).href,
+    name: '飞书应用',
+    description: '打造飞书智能应用',
+    isActive: false,
+    exists: false
+  }
+])
+
+const AccessSettingDrawerRef = ref()
+const loading = ref(false)
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+function openDrawer(key: string) {
+  AccessSettingDrawerRef.value.open(id, key)
+}
+
+function refresh() {
+  getPlatformStatus()
+}
+
+function getPlatformStatus() {
+  loading.value = true
+  applicationApi.getPlatformStatus(id).then((res: any) => {
+    platforms.forEach((platform) => {
+      platform.isActive = res.data[platform.key][1]
+      platform.exists = res.data[platform.key][0]
+    })
+    loading.value = false
+  })
+}
+
+function changeStatus(type: string, value: boolean) {
+  const data = {
+    type: type,
+    status: value
+  }
+  applicationApi.updatePlatformStatus(id, data).then(() => {
+    MsgSuccess('操作成功')
+  })
+}
+
+onMounted(() => {
+  getPlatformStatus()
+})
+</script>
+
+<style lang="scss" scoped>
+.p-16-24 {
+  padding: 16px 24px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.ml-8 {
+  margin-left: 8px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
+.ml-12 {
+  margin-left: 12px;
+}
+
+.mr-4 {
+  margin-right: 4px;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.icon {
+  width: 32px; // 设置图标宽度
+  height: 32px; // 设置图标高度
+}
+</style>
diff --git a/src/views/application/ApplicationSetting.vue b/src/views/application/ApplicationSetting.vue
new file mode 100644
index 0000000..50e4d62
--- /dev/null
+++ b/src/views/application/ApplicationSetting.vue
@@ -0,0 +1,911 @@
+<template>
+  <LayoutContainer class="create-application">
+    <template #header>
+      <div class="flex-between w-full">
+        <h3>
+          {{ $t('views.application.applicationForm.title.edit') }}
+        </h3>
+        <el-button type="primary" @click="submit(applicationFormRef)" :disabled="loading">
+          保存并发布
+        </el-button>
+      </div>
+    </template>
+    <el-row v-loading="loading">
+      <el-col :span="10">
+        <div class="p-24 mb-16" style="padding-bottom: 0">
+          <h4 class="title-decoration-1">
+            {{ $t('views.application.applicationForm.title.info') }}
+          </h4>
+        </div>
+        <div class="scrollbar-height-left">
+          <el-scrollbar>
+            <el-form
+              hide-required-asterisk
+              ref="applicationFormRef"
+              :model="applicationForm"
+              :rules="rules"
+              label-position="top"
+              require-asterisk-position="right"
+              class="p-24"
+              style="padding-top: 0"
+            >
+              <el-form-item prop="name">
+                <template #label>
+                  <div class="flex-between">
+                    <span
+                      >{{ $t('views.application.applicationForm.form.appName.label') }}
+                      <span class="danger">*</span></span
+                    >
+                  </div>
+                </template>
+                <el-input
+                  v-model="applicationForm.name"
+                  maxlength="64"
+                  :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+                  show-word-limit
+                  @blur="applicationForm.name = applicationForm.name?.trim()"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.appDescription.label')"
+              >
+                <el-input
+                  v-model="applicationForm.desc"
+                  type="textarea"
+                  :placeholder="
+                    $t('views.application.applicationForm.form.appDescription.placeholder')
+                  "
+                  :rows="3"
+                  maxlength="256"
+                  show-word-limit
+                />
+              </el-form-item>
+
+              <el-form-item :label="$t('views.application.applicationForm.form.aiModel.label')">
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{ $t('views.application.applicationForm.form.aiModel.label') }}</span>
+                    <el-button
+                      type="primary"
+                      link
+                      @click="openAIParamSettingDialog"
+                      :disabled="!applicationForm.model_id"
+                    >
+                      {{ $t('views.application.applicationForm.form.paramSetting') }}
+                    </el-button>
+                  </div>
+                </template>
+                <el-select
+                  @change="model_change"
+                  v-model="applicationForm.model_id"
+                  :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+                  class="w-full"
+                  popper-class="select-model"
+                  :clearable="true"
+                >
+                  <el-option-group
+                    v-for="(value, label) in modelOptions"
+                    :key="value"
+                    :label="relatedObject(providerOptions, label, 'provider')?.name"
+                  >
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                    >
+                      <div class="flex align-center">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <el-tag
+                          v-if="item.permission_type === 'PUBLIC'"
+                          type="info"
+                          class="info-tag ml-8"
+                          >公用
+                        </el-tag>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                    <!-- 不可用 -->
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                      disabled
+                    >
+                      <div class="flex">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <span class="danger">{{
+                          $t('views.application.applicationForm.form.aiModel.unavailable')
+                        }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                  </el-option-group>
+                  <template #footer>
+                    <div class="w-full text-left cursor" @click="openCreateModel()">
+                      <el-button type="primary" link>
+                        <el-icon class="mr-4">
+                          <Plus />
+                        </el-icon>
+                        {{ $t('views.application.applicationForm.form.addModel') }}
+                      </el-button>
+                    </div>
+                  </template>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="角色设定">
+                <MdEditorMagnify
+                  title="角色设定"
+                  v-model="applicationForm.model_setting.system"
+                  style="height: 120px"
+                  @submitDialog="submitSystemDialog"
+                  placeholder="你是 xxx 小助手"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.prompt.label')"
+                prop="model_setting.no_references_prompt"
+                :rules="{
+                  required: applicationForm.model_id,
+                  message: '请输入提示词',
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4"
+                      >{{ $t('views.application.applicationForm.form.prompt.label') }}
+                      (无引用知识库)
+                    </span>
+                    <el-tooltip
+                      effect="dark"
+                      content="通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头。可以使用变量：{question} 是用户提出问题的占位符。"
+                      placement="right"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                    <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                  </div>
+                </template>
+
+                <MdEditorMagnify
+                  title="提示词(无引用知识库)"
+                  v-model="applicationForm.model_setting.no_references_prompt"
+                  style="height: 120px"
+                  @submitDialog="submitNoReferencesPromptDialog"
+                  placeholder="{question}"
+                />
+              </el-form-item>
+              <el-form-item label="历史聊天记录" @click.prevent>
+                <el-input-number
+                  v-model="applicationForm.dialogue_number"
+                  :min="0"
+                  :value-on-clear="0"
+                  controls-position="right"
+                  class="w-full"
+                  :step="1"
+                  :step-strictly="true"
+                />
+              </el-form-item>
+              <el-form-item
+                label="$t('views.application.applicationForm.form.relatedKnowledgeBase')"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{
+                      $t('views.application.applicationForm.form.relatedKnowledgeBase')
+                    }}</span>
+                    <div>
+                      <el-button type="primary" link @click="openParamSettingDialog">
+                        <AppIcon iconName="app-operation" class="mr-4"></AppIcon>
+                        {{ $t('views.application.applicationForm.form.paramSetting') }}
+                      </el-button>
+                      <el-button type="primary" link @click="openDatasetDialog">
+                        <el-icon class="mr-4">
+                          <Plus />
+                        </el-icon>
+                        {{ $t('views.application.applicationForm.form.add') }}
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <div class="w-full">
+                  <el-text type="info" v-if="applicationForm.dataset_id_list?.length === 0"
+                    >{{ $t('views.application.applicationForm.form.relatedKnowledgeBaseWhere') }}
+                  </el-text>
+                  <el-row :gutter="12" v-else>
+                    <el-col
+                      :xs="24"
+                      :sm="24"
+                      :md="24"
+                      :lg="12"
+                      :xl="12"
+                      class="mb-8"
+                      v-for="(item, index) in applicationForm.dataset_id_list"
+                      :key="index"
+                    >
+                      <el-card class="relate-dataset-card border-r-4" shadow="never">
+                        <div class="flex-between">
+                          <div class="flex align-center" style="width: 80%">
+                            <AppAvatar
+                              v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                              class="mr-8 avatar-purple"
+                              shape="square"
+                              :size="32"
+                            >
+                              <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+
+                            <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="32">
+                              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+
+                            <span
+                              class="ellipsis cursor"
+                              :title="relatedObject(datasetList, item, 'id')?.name"
+                            >
+                              {{ relatedObject(datasetList, item, 'id')?.name }}</span
+                            >
+                          </div>
+                          <el-button text @click="removeDataset(item)">
+                            <el-icon>
+                              <Close />
+                            </el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.prompt.label')"
+                prop="model_setting.prompt"
+                :rules="{
+                  required: applicationForm.model_id,
+                  message: '请输入提示词',
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4">
+                      {{ $t('views.application.applicationForm.form.prompt.label') }}
+                      (引用知识库)
+                    </span>
+                    <el-tooltip
+                      effect="dark"
+                      content="通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头。可以使用变量：{data} 是引用知识库中分段的占位符；{question} 是用户提出问题的占位符。"
+                      placement="right"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                    <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                  </div>
+                </template>
+
+                <MdEditorMagnify
+                  title="提示词(引用知识库)"
+                  v-model="applicationForm.model_setting.prompt"
+                  style="height: 150px"
+                  @submitDialog="submitPromptDialog"
+                  :placeholder="defaultPrompt"
+                />
+              </el-form-item>
+              <el-form-item :label="$t('views.application.applicationForm.form.prologue')">
+                <MdEditorMagnify
+                  title="开场白"
+                  v-model="applicationForm.prologue"
+                  style="height: 150px"
+                  @submitDialog="submitPrologueDialog"
+                />
+              </el-form-item>
+
+              <el-form-item>
+                <template #label>
+                  <div class="flex-between">
+                    <div class="flex align-center">
+                      <span class="mr-4">语音输入</span>
+                      <!-- <el-tooltip
+                        effect="dark"
+                        content="开启后，需要设定语音转文本模型，语音输入完成后会转化为文字直接发送提问"
+                        placement="right"
+                      >
+                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                      </el-tooltip> -->
+                    </div>
+                    <el-switch
+                      size="small"
+                      v-model="applicationForm.stt_model_enable"
+                      @change="sttModelEnableChange"
+                    />
+                  </div>
+                </template>
+                <el-select
+                  v-show="applicationForm.stt_model_enable"
+                  v-model="applicationForm.stt_model_id"
+                  class="w-full"
+                  popper-class="select-model"
+                  placeholder="请选择语音识别模型"
+                >
+                  <el-option-group
+                    v-for="(value, label) in sttModelOptions"
+                    :key="value"
+                    :label="relatedObject(providerOptions, label, 'provider')?.name"
+                  >
+                    <el-option
+                      v-for="(item, index) in value?.filter((v: any) => v.status === 'SUCCESS')"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                    >
+                      <div class="flex align-center">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <el-tag
+                          v-if="item.permission_type === 'PUBLIC'"
+                          type="info"
+                          class="info-tag ml-8"
+                          >公用
+                        </el-tag>
+                      </div>
+                      <el-icon class="check-icon" v-if="item?.id === applicationForm.stt_model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                    <!-- 不可用 -->
+                    <el-option
+                      v-for="(item, index) in value?.filter((v: any) => v.status !== 'SUCCESS')"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                      disabled
+                    >
+                      <div class="flex">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <span class="danger">{{
+                          $t('views.application.applicationForm.form.aiModel.unavailable')
+                        }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item?.id === applicationForm.stt_model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <template #label>
+                  <div class="flex-between">
+                    <span class="mr-4">语音播放</span>
+                    <div>
+                      <el-button
+                        v-if="applicationForm.tts_type === 'TTS'"
+                        type="primary"
+                        link
+                        @click="openTTSParamSettingDialog"
+                        :disabled="!applicationForm.tts_model_id"
+                        class="mr-8"
+                      >
+                        <el-icon class="mr-4"><Setting /></el-icon>
+                        设置
+                      </el-button>
+                      <el-switch
+                        size="small"
+                        v-model="applicationForm.tts_model_enable"
+                        @change="ttsModelEnableChange"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <el-radio-group
+                  v-model="applicationForm.tts_type"
+                  v-show="applicationForm.tts_model_enable"
+                  class="mb-8"
+                >
+                  <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
+                  <el-radio value="TTS">TTS模型</el-radio>
+                </el-radio-group>
+                <el-select
+                  v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
+                  v-model="applicationForm.tts_model_id"
+                  class="w-full"
+                  popper-class="select-model"
+                  @change="ttsModelChange()"
+                  placeholder="请选择语音合成模型"
+                >
+                  <el-option-group
+                    v-for="(value, label) in ttsModelOptions"
+                    :key="value"
+                    :label="relatedObject(providerOptions, label, 'provider')?.name"
+                  >
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                    >
+                      <div class="flex align-center">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <el-tag
+                          v-if="item.permission_type === 'PUBLIC'"
+                          type="info"
+                          class="info-tag ml-8"
+                          >公用
+                        </el-tag>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                    <!-- 不可用 -->
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                      disabled
+                    >
+                      <div class="flex">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <span class="danger">{{
+                          $t('views.application.applicationForm.form.aiModel.unavailable')
+                        }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
+                        <Check />
+                      </el-icon>
+                    </el-option>
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <el-col :span="14" class="p-24 border-l">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.application.applicationForm.form.apptest') }}
+        </h4>
+        <div class="dialog-bg">
+          <div class="flex align-center p-24">
+            <div
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+              <AppAvatar
+                v-if="isAppIcon(applicationForm?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="applicationForm?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="applicationForm?.name"
+                :name="applicationForm?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+            <h4>
+              {{
+                applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
+              }}
+            </h4>
+          </div>
+          <div class="scrollbar-height">
+            <AiChat :applicationDetails="applicationForm" :type="'debug-ai-chat'"></AiChat>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshForm" />
+    <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
+
+    <!-- 添加模版 -->
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { groupBy } from 'lodash'
+import AIModeParamSettingDialog from './component/AIModeParamSettingDialog.vue'
+import ParamSettingDialog from './component/ParamSettingDialog.vue'
+import AddDatasetDialog from './component/AddDatasetDialog.vue'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+
+import EditAvatarDialog from '@/views/application-overview/component/EditAvatarDialog.vue'
+import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { Provider } from '@/api/type/model'
+import { relatedObject } from '@/utils/utils'
+import { MsgSuccess, MsgWarning } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from './component/TTSModeParamSettingDialog.vue'
+
+const { model, application } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+// @ts-ignore
+const defaultPrompt = t('views.application.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const applicationFormRef = ref<FormInstance>()
+const AddDatasetDialogRef = ref()
+const EditAvatarDialogRef = ref()
+
+const loading = ref(false)
+const datasetLoading = ref(false)
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 1,
+  prologue: t('views.application.prompt.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt,
+    system: '你是 xxx 小助手',
+    no_references_prompt: '{question}'
+  },
+  model_params_setting: {},
+  problem_optimization: false,
+  problem_optimization_prompt:
+    '()里面是用户问题,根据上下文回答揣测用户问题({question}) 要求: 输出一个补全问题,并且放在<data></data>标签中',
+  stt_model_id: '',
+  tts_model_id: '',
+  stt_model_enable: false,
+  tts_model_enable: false,
+  tts_type: 'BROWSER',
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const datasetList = ref([])
+const sttModelOptions = ref<any>(null)
+const ttsModelOptions = ref<any>(null)
+const showEditIcon = ref(false)
+
+function submitPrologueDialog(val: string) {
+  applicationForm.value.prologue = val
+}
+function submitPromptDialog(val: string) {
+  applicationForm.value.model_setting.prompt = val
+}
+function submitNoReferencesPromptDialog(val: string) {
+  applicationForm.value.model_setting.no_references_prompt = val
+}
+function submitSystemDialog(val: string) {
+  applicationForm.value.model_setting.system = val
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (
+    applicationForm.value.tts_model_enable &&
+    !applicationForm.value.tts_model_id &&
+    applicationForm.value.tts_type === 'TTS'
+  ) {
+    MsgWarning(t('请选择语音播放模型'))
+    return
+  }
+  if (applicationForm.value.stt_model_enable && !applicationForm.value.stt_model_id) {
+    MsgWarning(t('请选择语音输入模型'))
+    return
+  }
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      application.asyncPutApplication(id, applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('views.application.applicationForm.buttons.saveSuccess'))
+      })
+    }
+  })
+}
+const model_change = (model_id?: string) => {
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshForm({})
+  }
+}
+const openAIParamSettingDialog = () => {
+  const model_id = applicationForm.value.model_id
+  if (!model_id) {
+    MsgSuccess(t('请选择AI 模型'))
+    return
+  }
+  AIModeParamSettingDialogRef.value?.open(model_id, id, applicationForm.value.model_params_setting)
+}
+
+const openTTSParamSettingDialog = () => {
+  const model_id = applicationForm.value.tts_model_id
+  if (!model_id) {
+    MsgSuccess(t('请选择语音播放模型'))
+    return
+  }
+  TTSModeParamSettingDialogRef.value?.open(
+    model_id,
+    id,
+    applicationForm.value.tts_model_params_setting
+  )
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(applicationForm.value)
+}
+
+function refreshParam(data: any) {
+  applicationForm.value = { ...applicationForm.value, ...data }
+}
+
+function refreshForm(data: any) {
+  applicationForm.value.model_params_setting = data
+}
+
+function refreshTTSForm(data: any) {
+  applicationForm.value.tts_model_params_setting = data
+}
+
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+function removeDataset(id: any) {
+  if (applicationForm.value.dataset_id_list) {
+    applicationForm.value.dataset_id_list.splice(
+      applicationForm.value.dataset_id_list.indexOf(id),
+      1
+    )
+  }
+}
+
+function addDataset(val: Array<string>) {
+  applicationForm.value.dataset_id_list = val
+}
+
+function openDatasetDialog() {
+  AddDatasetDialogRef.value.open(applicationForm.value.dataset_id_list)
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    applicationForm.value = res.data
+    applicationForm.value.model_id = res.data.model
+    applicationForm.value.stt_model_id = res.data.stt_model
+    applicationForm.value.tts_model_id = res.data.tts_model
+    applicationForm.value.tts_type = res.data.tts_type
+    applicationForm.value.model_setting.no_references_prompt =
+      res.data.model_setting.no_references_prompt || '{question}'
+  })
+}
+
+function getDataset() {
+  application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+    datasetList.value = res.data
+  })
+}
+
+function getModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationModel(id)
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getSTTModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationSTTModel(id)
+    .then((res: any) => {
+      sttModelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getTTSModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationTTSModel(id)
+    .then((res: any) => {
+      ttsModelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function ttsModelChange() {
+  if (applicationForm.value.tts_model_id) {
+    TTSModeParamSettingDialogRef.value?.reset_default(applicationForm.value.tts_model_id, id)
+  } else {
+    refreshTTSForm({})
+  }
+}
+
+function ttsModelEnableChange() {
+  if (!applicationForm.value.tts_model_enable) {
+    applicationForm.value.tts_model_id = ''
+    applicationForm.value.tts_type = 'BROWSER'
+  }
+}
+
+function sttModelEnableChange() {
+  if (!applicationForm.value.stt_model_enable) {
+    applicationForm.value.stt_model_id = ''
+  }
+}
+
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res: any) => {
+      providerOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(applicationForm.value)
+}
+function refreshIcon() {
+  getDetail()
+}
+
+function refresh() {
+  getDataset()
+}
+
+onMounted(() => {
+  getProvider()
+  getModel()
+  getDataset()
+  getDetail()
+  getSTTModel()
+  getTTSModel()
+})
+</script>
+<style lang="scss" scoped>
+.create-application {
+  .relate-dataset-card {
+    color: var(--app-text-color);
+  }
+
+  .dialog-bg {
+    border-radius: 8px;
+    background: var(--dialog-bg-gradient-color);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .scrollbar-height-left {
+    height: calc(var(--app-main-height) - 64px);
+  }
+
+  .scrollbar-height {
+    height: calc(var(--app-main-height) - 166px);
+  }
+}
+
+.prologue-md-editor {
+  height: 150px;
+}
+
+:deep(.el-form-item__label) {
+  display: block;
+}
+</style>
diff --git a/src/views/application/component/AIModeParamSettingDialog.vue b/src/views/application/component/AIModeParamSettingDialog.vue
new file mode 100644
index 0000000..32a5c9a
--- /dev/null
+++ b/src/views/application/component/AIModeParamSettingDialog.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('views.application.applicationForm.dialogues.paramSettings')"
+    class="aiMode-param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <DynamicsForm
+      v-model="form_data"
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      :render_data="model_form_field"
+      ref="dynamicsFormRef"
+    >
+    </DynamicsForm>
+
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import modelAPi from '@/api/model'
+import applicationApi from '@/api/application'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const model_form_field = ref<Array<FormField>>([])
+const emit = defineEmits(['refresh'])
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const form_data = ref<any>({})
+const dialogVisible = ref(false)
+const loading = ref(false)
+const getApi = (model_id: string, application_id?: string) => {
+  return application_id
+    ? applicationApi.getModelParamsForm(application_id, model_id, loading)
+    : modelAPi.getModelParamsForm(model_id, loading)
+}
+const open = (model_id: string, application_id?: string, model_setting_data?: any) => {
+  form_data.value = {}
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    // 渲染动态表单
+    dynamicsFormRef.value?.render(model_form_field.value, model_setting_data)
+  })
+  dialogVisible.value = true
+}
+
+const reset_default = (model_id: string, application_id?: string) => {
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const model_setting_data = ok.data
+      .map((item) => {
+        if (item.show_default_value === false) {
+          return { [item.field]: undefined }
+        } else {
+          return { [item.field]: item.default_value }
+        }
+      })
+      .reduce((x, y) => ({ ...x, ...y }), {})
+
+    emit('refresh', model_setting_data)
+  })
+}
+
+const submit = async () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    emit('refresh', form_data.value)
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({ open, reset_default })
+</script>
+
+<style lang="scss" scoped>
+.aiMode-param-dialog {
+  padding: 8px 8px 24px 8px;
+
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+
+  .el-dialog__body {
+    padding: 16px !important;
+  }
+
+  .dialog-max-height {
+    height: 550px;
+  }
+
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/application/component/AccessSettingDrawer.vue b/src/views/application/component/AccessSettingDrawer.vue
new file mode 100644
index 0000000..a252255
--- /dev/null
+++ b/src/views/application/component/AccessSettingDrawer.vue
@@ -0,0 +1,262 @@
+<template>
+  <el-drawer v-model="visible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <h4>{{ drawerTitle }}</h4>
+      </div>
+    </template>
+
+    <el-form
+      v-if="dataLoaded"
+      ref="formRef"
+      :model="form[configType]"
+      label-width="120px"
+      :rules="rules[configType]"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <h4 class="title-decoration-1 mb-16">{{ infoTitle }}</h4>
+
+      <template v-for="(item, key) in configFields[configType]" :key="key">
+        <el-form-item :label="item.label" :prop="key">
+          <el-input
+            v-model="form[configType][key]"
+            :type="isPasswordField(key) ? (passwordVisible[key] ? 'text' : 'password') : 'text'"
+            :placeholder="item.placeholder"
+            :show-password="isPasswordField(key)"
+          >
+          </el-input>
+        </el-form-item>
+      </template>
+      <div v-if="configType === 'wechat'" class="flex align-center mb-16">
+        <span class="lighter mr-8">认证通过</span>
+        <el-switch v-if="configType === 'wechat'" v-model="form[configType].is_certification" />
+      </div>
+
+      <h4 class="title-decoration-1 mb-16">回调地址</h4>
+      <el-form-item label="URL" prop="callback_url">
+        <el-input v-model="form[configType].callback_url" placeholder="请输入回调地址" readonly>
+          <template #append>
+            <el-button @click="copyClick(form[configType].callback_url)">
+              <AppIcon iconName="app-copy"></AppIcon>
+            </el-button>
+          </template>
+        </el-input>
+        <el-text type="info" v-if="configType === 'wechat'">
+          复制链接填入到
+          <a
+            class="primary"
+            href="https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev"
+            target="_blank"
+            >微信公众平台</a
+          >-设置与开发-基本配置-服务器配置的 "服务器地址URL" 中
+        </el-text>
+        <el-text type="info" v-if="configType === 'dingtalk'">
+          复制链接填入到
+          <a
+            class="primary"
+            href="https://open-dev.dingtalk.com/fe/app?hash=%23%2Fcorp%2Fapp#/corp/app"
+            target="_blank"
+            >钉钉开放平台</a
+          >-机器人页面，设置 "消息接收模式" 为 HTTP模式 ，并把上面URL填写到"消息接收地址"中
+        </el-text>
+        <el-text type="info" v-if="configType === 'wecom'">
+          复制链接填入到
+          <a
+            class="primary"
+            href="https://work.weixin.qq.com/wework_admin/frame#apps"
+            target="_blank"
+            >企业微信后台</a
+          >-应用管理-自建-创建的应用-接收消息-设置 API 接收的 "URL" 中
+        </el-text>
+        <el-text type="info" v-if="configType === 'feishu'">
+          复制链接填入到
+          <a class="primary" href="https://open.feishu.cn/app/" target="_blank">飞书开放平台</a
+          >-事件与回调-事件配置-配置订阅方式的 "请求地址" 中
+        </el-text>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div>
+        <el-button @click="closeDrawer">取消</el-button>
+        <el-button type="primary" @click="submit" :disabled="loading">保存</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import type { FormInstance } from 'element-plus'
+import applicationApi from '@/api/application'
+import { useRoute } from 'vue-router'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import { copyClick } from '@/utils/clipboard'
+
+const formRef = ref<FormInstance>()
+const visible = ref(false)
+const loading = ref(false)
+const dataLoaded = ref(false)
+const configType = ref<'wechat' | 'dingtalk' | 'wecom' | 'feishu'>('wechat')
+const route = useRoute()
+const emit = defineEmits(['refresh'])
+const {
+  params: { id }
+} = route as any
+
+const form = reactive<any>({
+  wechat: {
+    app_id: '',
+    app_secret: '',
+    token: '',
+    encoding_aes_key: '',
+    is_certification: false,
+    callback_url: ''
+  },
+  dingtalk: { client_id: '', client_secret: '', callback_url: '' },
+  wecom: {
+    app_id: '',
+    agent_id: '',
+    secret: '',
+    token: '',
+    encoding_aes_key: '',
+    callback_url: ''
+  },
+  feishu: { app_id: '', app_secret: '', verification_token: '', callback_url: '' }
+})
+
+const rules = reactive<{ [propName: string]: any }>({
+  wechat: {
+    app_id: [{ required: true, message: '请输入开发者ID', trigger: 'blur' }],
+    app_secret: [{ required: true, message: '请输入开发者密码', trigger: 'blur' }],
+    token: [{ required: true, message: '请输入令牌', trigger: 'blur' }],
+    encoding_aes_key: [{ required: true, message: '请输入消息加解密密钥', trigger: 'blur' }]
+  },
+  dingtalk: {
+    client_id: [{ required: true, message: '请输入Client ID', trigger: 'blur' }],
+    client_secret: [{ required: true, message: '请输入Client Secret', trigger: 'blur' }]
+  },
+  wecom: {
+    app_id: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
+    agent_id: [{ required: true, message: '请输入Agent ID', trigger: 'blur' }],
+    secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
+    token: [{ required: true, message: '请输入Token', trigger: 'blur' }],
+    encoding_aes_key: [{ required: true, message: '请输入EncodingAESKey', trigger: 'blur' }]
+  },
+  feishu: {
+    app_id: [{ required: true, message: '请输入App ID', trigger: 'blur' }],
+    app_secret: [{ required: true, message: '请输入App Secret', trigger: 'blur' }],
+    verification_token: [{ required: false, message: '请输入Verification Token', trigger: 'blur' }]
+  }
+})
+
+const configFields: { [propName: string]: { [propName: string]: any } } = {
+  wechat: {
+    app_id: { label: '开发者ID (APP ID)', placeholder: '请输入开发者ID' },
+    app_secret: { label: '开发者密码 (APP Secret)', placeholder: '请输入开发者密码' },
+    token: { label: '令牌 (Token)', placeholder: '请输入令牌' },
+    encoding_aes_key: { label: '消息加解密密钥', placeholder: '请输入消息加解密密钥' }
+  },
+  dingtalk: {
+    client_id: { label: 'Client ID', placeholder: '' },
+    client_secret: { label: 'Client Secret', placeholder: '' }
+  },
+  wecom: {
+    app_id: { label: '企业ID', placeholder: '' },
+    agent_id: { label: 'Agent ID', placeholder: '' },
+    secret: { label: 'Secret', placeholder: '' },
+    token: { label: 'Token', placeholder: '' },
+    encoding_aes_key: { label: 'EncodingAESKey', placeholder: '' }
+  },
+  feishu: {
+    app_id: { label: 'App ID', placeholder: '' },
+    app_secret: { label: 'App Secret', placeholder: '' },
+    verification_token: { label: 'Verification Token', placeholder: '' }
+  }
+}
+
+const passwordFields = new Set(['app_secret', 'client_secret', 'secret'])
+
+const drawerTitle = computed(
+  () =>
+    ({
+      wechat: '公众号配置',
+      dingtalk: '钉钉应用配置',
+      wecom: '企业微信应用配置',
+      feishu: '飞书应用配置'
+    })[configType.value]
+)
+
+const infoTitle = computed(
+  () =>
+    ({
+      wechat: '应用信息',
+      dingtalk: '应用信息',
+      wecom: '应用信息',
+      feishu: '应用信息'
+    })[configType.value]
+)
+
+const passwordVisible = reactive<Record<string, boolean>>(
+  Object.keys(configFields[configType.value]).reduce(
+    (acc, key) => {
+      if (passwordFields.has(key)) {
+        acc[key] = false
+      }
+      return acc
+    },
+    {} as Record<string, boolean>
+  )
+)
+
+const isPasswordField = (key: any) => passwordFields.has(key)
+
+const closeDrawer = () => {
+  visible.value = false
+}
+
+const submit = async () => {
+  if (loading.value) return
+
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        applicationApi
+          .updatePlatformConfig(id, configType.value, form[configType.value], loading)
+          .then(() => {
+            MsgSuccess('配置保存成功')
+            closeDrawer()
+            emit('refresh')
+          })
+      } catch {
+        MsgError('保存失败，请检查输入或稍后再试')
+      }
+    }
+  })
+}
+
+const open = async (id: string, type: 'wechat' | 'dingtalk' | 'wecom' | 'feishu') => {
+  visible.value = true
+  configType.value = type
+  loading.value = true
+  dataLoaded.value = false
+  formRef.value?.resetFields()
+  try {
+    const res = await applicationApi.getPlatformConfig(id, type)
+    if (res.data) {
+      form[configType.value] = res.data
+    }
+    dataLoaded.value = true
+  } catch {
+    MsgError('加载配置失败，请检查输入或稍后再试')
+  } finally {
+    loading.value = false
+    form[configType.value].callback_url = `${window.location.origin}/api/${type}/${id}`
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/application/component/AddDatasetDialog.vue b/src/views/application/component/AddDatasetDialog.vue
new file mode 100644
index 0000000..2c7ecaa
--- /dev/null
+++ b/src/views/application/component/AddDatasetDialog.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.applicationForm.dialogues.addDataset')"
+    v-model="dialogVisible"
+    width="600"
+    append-to-body
+    class="addDataset-dialog"
+    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between mb-8">
+        <h4 :id="titleId" :class="titleClass">
+          {{ $t('views.application.applicationForm.dialogues.addDataset') }}
+        </h4>
+        <div class="flex align-center mr-8">
+          <el-button link class="ml-16" @click="refresh">
+            <el-icon class="mr-4"><Refresh /></el-icon
+            >{{ $t('views.application.applicationForm.dialogues.refresh') }}
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+      <div class="flex-between">
+        <el-text type="info" class="color-secondary">
+          所选知识库必须使用相同的 Embedding 模型
+        </el-text>
+        <el-input
+          v-model="searchValue"
+          placeholder="搜索"
+          prefix-icon="Search"
+          class="w-240"
+          clearable
+        />
+      </div>
+    </template>
+    <el-scrollbar>
+      <div class="max-height">
+        <el-row :gutter="12" v-loading="loading">
+          <el-col :span="12" v-for="(item, index) in filterData" :key="index" class="mb-16">
+            <CardCheckbox value-field="id" :data="item" v-model="checkList" @change="changeHandle">
+              <span class="ellipsis cursor" :title="item.name"> {{ item.name }}</span>
+            </CardCheckbox>
+          </el-col>
+        </el-row>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <div class="flex-between">
+        <div class="flex">
+          <el-text type="info" class="color-secondary mr-8" v-if="checkList.length > 0">
+            已选 {{ checkList.length }} 个知识库
+          </el-text>
+          <el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
+            清空
+          </el-button>
+        </div>
+        <span>
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('views.application.applicationForm.buttons.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submitHandle">
+            {{ $t('views.application.applicationForm.buttons.confirm') }}
+          </el-button>
+        </span>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  },
+  loading: Boolean
+})
+
+const emit = defineEmits(['addData', 'refresh'])
+
+const dialogVisible = ref<boolean>(false)
+const checkList = ref([])
+const currentEmbedding = ref('')
+const searchValue = ref('')
+const searchDate = ref<any[]>([])
+
+const filterData = computed(() => {
+  return currentEmbedding.value
+    ? searchDate.value.filter((v) => v.embedding_mode_id === currentEmbedding.value)
+    : searchDate.value
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    checkList.value = []
+    currentEmbedding.value = ''
+    searchValue.value = ''
+  }
+})
+
+watch(searchValue, (val) => {
+  if (val) {
+    searchDate.value = props.data.filter((v) => v.name.includes(val))
+  } else {
+    searchDate.value = props.data
+  }
+})
+
+function changeHandle() {
+  if (checkList.value.length > 0) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  } else if (checkList.value.length === 0) {
+    currentEmbedding.value = ''
+  }
+}
+function clearCheck() {
+  checkList.value = []
+  currentEmbedding.value = ''
+}
+
+const open = (checked: any) => {
+  searchDate.value = props.data
+  checkList.value = checked
+  if (checkList.value.length > 0) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  }
+
+  dialogVisible.value = true
+}
+const submitHandle = () => {
+  emit('addData', checkList.value)
+  dialogVisible.value = false
+}
+
+const refresh = () => {
+  emit('refresh')
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.addDataset-dialog {
+  padding: 0;
+  .el-dialog__header {
+    padding: 24px 24px 8px 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .el-dialog__footer {
+    padding: 8px 24px 24px 24px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+  .max-height {
+    max-height: calc(100vh - 260px);
+    padding: 0 16px;
+  }
+}
+</style>
diff --git a/src/views/application/component/CopyApplicationDialog.vue b/src/views/application/component/CopyApplicationDialog.vue
new file mode 100644
index 0000000..e49f3e1
--- /dev/null
+++ b/src/views/application/component/CopyApplicationDialog.vue
@@ -0,0 +1,178 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.applicationForm.title.copy')"
+    v-model="dialogVisible"
+    width="650"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="applicationFormRef"
+      :model="applicationForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
+        <el-input
+          v-model="applicationForm.name"
+          maxlength="64"
+          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
+        <el-input
+          v-model="applicationForm.desc"
+          type="textarea"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitValid(applicationFormRef)" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.copy') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { isWorkFlow } from '@/utils/application'
+import { t } from '@/locales'
+import useStore from '@/stores'
+import { ValidType, ValidCount } from '@/enums/common'
+const router = useRouter()
+const { common, user } = useStore()
+
+// @ts-ignore
+const defaultPrompt = t('views.application.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+const applicationFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+// @ts-ignore
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 0,
+  prologue: t('views.application.prompt.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt
+  },
+  problem_optimization: false,
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    applicationForm.value = {
+      name: '',
+      desc: '',
+      model_id: '',
+      dialogue_number: 0,
+      prologue: t('views.application.prompt.defaultPrologue'),
+      dataset_id_list: [],
+      dataset_setting: {
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        search_mode: 'embedding',
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      model_setting: {
+        prompt: defaultPrompt
+      },
+      problem_optimization: false,
+      type: 'SIMPLE'
+    }
+    applicationFormRef.value?.clearValidate()
+  }
+})
+
+const open = (data: any) => {
+  const obj = cloneDeep(data)
+  delete obj['id']
+  obj['name'] = obj['name'] + ' 副本'
+  applicationForm.value = obj
+  dialogVisible.value = true
+}
+
+const submitValid = (formEl: FormInstance | undefined) => {
+  if (user.isEnterprise()) {
+    submitHandle(formEl)
+  } else {
+    common
+      .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
+      .then(async (res: any) => {
+        if (res?.data) {
+          submitHandle(formEl)
+        } else {
+          MsgAlert('提示', '社区版最多支持 5 个应用，如需拥有更多应用，请升级为专业版。')
+        }
+      })
+  }
+}
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      applicationApi.postApplication(applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('views.application.applicationForm.buttons.createSuccess'))
+        if (isWorkFlow(applicationForm.value.type)) {
+          router.push({ path: `/application/${res.data.id}/workflow` })
+        } else {
+          router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
+        }
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application/component/CreateApplicationDialog.vue b/src/views/application/component/CreateApplicationDialog.vue
new file mode 100644
index 0000000..1ddb32b
--- /dev/null
+++ b/src/views/application/component/CreateApplicationDialog.vue
@@ -0,0 +1,219 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.applicationForm.title.create')"
+    v-model="dialogVisible"
+    width="650"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="applicationFormRef"
+      :model="applicationForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
+        <el-input
+          v-model="applicationForm.name"
+          maxlength="64"
+          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+          @blur="applicationForm.name = applicationForm.name?.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
+        <el-input
+          v-model="applicationForm.desc"
+          type="textarea"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="选择应用类型">
+        <el-radio-group v-model="applicationForm.type" class="card__radio">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="applicationForm.type === 'SIMPLE' ? 'active' : ''"
+              >
+                <el-radio value="SIMPLE" size="large">
+                  <p class="mb-4">简单配置</p>
+                  <el-text type="info">适合新手创建小助手</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="isWorkFlow(applicationForm.type) ? 'active' : ''"
+              >
+                <el-radio value="WORK_FLOW" size="large">
+                  <p class="mb-4">高级编排</p>
+                  <el-text type="info">适合高级用户自定义小助手的工作流</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle(applicationFormRef)" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { isWorkFlow } from '@/utils/application'
+import { t } from '@/locales'
+import useStore from '@/stores'
+import { ValidType, ValidCount } from '@/enums/common'
+
+const { common, user } = useStore()
+const router = useRouter()
+const emit = defineEmits(['refresh'])
+
+// @ts-ignore
+const defaultPrompt = t('views.application.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+const applicationFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 1,
+  prologue: t('views.application.prompt.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt,
+    system: '你是 xxx 小助手',
+    no_references_prompt: '{question}'
+  },
+  model_params_setting: {},
+  problem_optimization: false,
+  problem_optimization_prompt:
+    '()里面是用户问题,根据上下文回答揣测用户问题({question}) 要求: 输出一个补全问题,并且放在<data></data>标签中',
+  stt_model_id: '',
+  tts_model_id: '',
+  stt_model_enable: false,
+  tts_model_enable: false,
+  tts_type: 'BROWSER',
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ],
+  model_id: [
+    {
+      required: false,
+      message: t('views.application.applicationForm.form.aiModel.placeholder'),
+      trigger: 'change'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    applicationForm.value = {
+      name: '',
+      desc: '',
+      model_id: '',
+      dialogue_number: 1,
+      prologue: t('views.application.prompt.defaultPrologue'),
+      dataset_id_list: [],
+      dataset_setting: {
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        search_mode: 'embedding',
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      model_setting: {
+        prompt: defaultPrompt,
+        system: '你是 xxx 小助手',
+        no_references_prompt: '{question}'
+      },
+      model_params_setting: {},
+      problem_optimization: false,
+      problem_optimization_prompt:
+        '()里面是用户问题,根据上下文回答揣测用户问题({question}) 要求: 输出一个补全问题,并且放在<data></data>标签中',
+      stt_model_id: '',
+      tts_model_id: '',
+      stt_model_enable: false,
+      tts_model_enable: false,
+      tts_type: 'BROWSER',
+      type: 'SIMPLE'
+    }
+    applicationFormRef.value?.clearValidate()
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      applicationApi.postApplication(applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('views.application.applicationForm.buttons.createSuccess'))
+        if (isWorkFlow(applicationForm.value.type)) {
+          router.push({ path: `/application/${res.data.id}/workflow` })
+        } else {
+          router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
+        }
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/application/component/ParamSettingDialog.vue b/src/views/application/component/ParamSettingDialog.vue
new file mode 100644
index 0000000..8cc37f0
--- /dev/null
+++ b/src/views/application/component/ParamSettingDialog.vue
@@ -0,0 +1,348 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('views.application.applicationForm.dialogues.paramSettings')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="dialog-max-height">
+      <el-scrollbar>
+        <div class="p-16">
+          <el-form label-position="top" ref="paramFormRef" :model="form">
+            <el-form-item
+              :label="$t('views.application.applicationForm.dialogues.selectSearchMode')"
+            >
+              <el-radio-group
+                v-model="form.dataset_setting.search_mode"
+                class="card__radio"
+                @change="changeHandle"
+              >
+                <el-card
+                  shadow="never"
+                  class="mb-16"
+                  :class="form.search_mode === 'embedding' ? 'active' : ''"
+                >
+                  <el-radio value="embedding" size="large">
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.vectorSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.vectorSearchTooltip')
+                    }}</el-text>
+                  </el-radio>
+                </el-card>
+                <el-card
+                  shadow="never"
+                  class="mb-16"
+                  :class="form.dataset_setting.search_mode === 'keywords' ? 'active' : ''"
+                >
+                  <el-radio value="keywords" size="large">
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.fullTextSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.fullTextSearchTooltip')
+                    }}</el-text>
+                  </el-radio>
+                </el-card>
+                <el-card
+                  shadow="never"
+                  :class="form.dataset_setting.search_mode === 'blend' ? 'active' : ''"
+                >
+                  <el-radio value="blend" size="large">
+                    <p class="mb-4">
+                      {{ $t('views.application.applicationForm.dialogues.hybridSearch') }}
+                    </p>
+                    <el-text type="info">{{
+                      $t('views.application.applicationForm.dialogues.hybridSearchTooltip')
+                    }}</el-text>
+                  </el-radio>
+                </el-card>
+              </el-radio-group>
+            </el-form-item>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item>
+                  <template #label>
+                    <div class="flex align-center">
+                      <span class="mr-4">{{
+                        $t('views.application.applicationForm.dialogues.similarityThreshold')
+                      }}</span>
+                      <el-tooltip effect="dark" content="相似度越高相关性越强。" placement="right">
+                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                  <el-input-number
+                    v-model="form.dataset_setting.similarity"
+                    :min="0"
+                    :max="form.search_mode === 'blend' ? 2 : 1"
+                    :precision="3"
+                    :step="0.1"
+                    :value-on-clear="0"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="$t('views.application.applicationForm.dialogues.topReferences')"
+                >
+                  <el-input-number
+                    v-model="form.dataset_setting.top_n"
+                    :min="1"
+                    :max="100"
+                    :value-on-clear="1"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-form-item :label="$t('views.application.applicationForm.dialogues.maxCharacters')">
+              <el-slider
+                v-model="form.dataset_setting.max_paragraph_char_number"
+                show-input
+                :show-input-controls="false"
+                :min="500"
+                :max="100000"
+                class="custom-slider"
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="!isWorkflowType"
+              :label="$t('views.application.applicationForm.dialogues.noReferencesAction')"
+            >
+              <el-form
+                label-position="top"
+                ref="noReferencesformRef"
+                :model="noReferencesform"
+                :rules="noReferencesRules"
+                class="w-full"
+                :hide-required-asterisk="true"
+              >
+                <el-radio-group
+                  v-model="form.dataset_setting.no_references_setting.status"
+                  class="radio-block"
+                >
+                  <div>
+                    <el-radio value="ai_questioning">
+                      <p>
+                        {{ $t('views.application.applicationForm.dialogues.continueQuestioning') }}
+                      </p>
+                    </el-radio>
+                  </div>
+                  <div>
+                    <el-radio value="designated_answer">
+                      <p>{{ $t('views.application.applicationForm.dialogues.provideAnswer') }}</p>
+                      <el-form-item
+                        v-if="
+                          form.dataset_setting.no_references_setting.status === 'designated_answer'
+                        "
+                        prop="designated_answer"
+                      >
+                        <el-input
+                          v-model="noReferencesform.designated_answer"
+                          :rows="2"
+                          type="textarea"
+                          maxlength="2048"
+                          :placeholder="defaultValue['designated_answer']"
+                        />
+                      </el-form-item>
+                    </el-radio>
+                  </div>
+                </el-radio-group>
+              </el-form>
+            </el-form-item>
+
+            <el-form-item @click.prevent v-if="!isWorkflowType">
+              <template #label>
+                <div class="flex align-center">
+                  <span class="mr-4">{{
+                    $t('views.application.applicationForm.form.problemOptimization.label')
+                  }}</span>
+                </div>
+              </template>
+              <el-switch size="small" v-model="form.problem_optimization"></el-switch>
+            </el-form-item>
+            <el-form-item
+              v-if="form.problem_optimization"
+              :label="$t('views.application.applicationForm.form.prompt.label')"
+            >
+              <el-input
+                v-model="form.problem_optimization_prompt"
+                :rows="6"
+                type="textarea"
+                maxlength="2048"
+                :placeholder="defaultPrompt"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.application.applicationForm.buttons.cancel')
+        }}</el-button>
+        <el-button type="primary" @click="submit(noReferencesformRef)" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance, FormRules } from 'element-plus'
+import { isWorkFlow } from '@/utils/application'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref()
+const noReferencesformRef = ref()
+
+const defaultValue = {
+  ai_questioning: '{question}',
+  // @ts-ignore
+  designated_answer: t('views.application.applicationForm.dialogues.designated_answer')
+}
+
+const defaultPrompt = `()里面是用户问题,根据上下文回答揣测用户问题({question}) 要求: 输出一个补全问题,并且放在<data></data>标签中`
+
+const form = ref<any>({
+  dataset_setting: {
+    search_mode: 'embedding',
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  problem_optimization: false,
+  problem_optimization_prompt: defaultPrompt
+})
+
+const noReferencesform = ref<any>({
+  ai_questioning: defaultValue['ai_questioning'],
+  designated_answer: defaultValue['designated_answer']
+})
+
+const noReferencesRules = reactive<FormRules<any>>({
+  ai_questioning: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.dialogues.promptPlaceholder'),
+      trigger: 'blur'
+    }
+  ],
+  designated_answer: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.dialogues.concentPlaceholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const isWorkflowType = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      dataset_setting: {
+        search_mode: 'embedding',
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      problem_optimization: false,
+      problem_optimization_prompt: ''
+    }
+    noReferencesform.value = {
+      ai_questioning: defaultValue['ai_questioning'],
+      designated_answer: defaultValue['designated_answer']
+    }
+    noReferencesformRef.value?.clearValidate()
+  }
+})
+
+const open = (data: any, type?: string) => {
+  isWorkflowType.value = isWorkFlow(type)
+  form.value = {
+    dataset_setting: { ...data.dataset_setting },
+    problem_optimization: data.problem_optimization,
+    problem_optimization_prompt: data.problem_optimization_prompt
+  }
+  if (!isWorkflowType.value) {
+    noReferencesform.value[form.value.dataset_setting.no_references_setting.status] =
+      form.value.dataset_setting.no_references_setting.value
+  }
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (isWorkflowType.value) {
+    delete form.value['no_references_setting']
+    emit('refresh', form.value)
+    dialogVisible.value = false
+  } else {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        form.value.dataset_setting.no_references_setting.value =
+          noReferencesform.value[form.value.dataset_setting.no_references_setting.status]
+        emit('refresh', form.value)
+        dialogVisible.value = false
+      }
+    })
+  }
+}
+
+function changeHandle(val: string) {
+  if (val === 'keywords') {
+    form.value.dataset_setting.similarity = 0
+  } else {
+    form.value.dataset_setting.similarity = 0.6
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.param-dialog {
+  padding: 8px 8px 24px 8px;
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+  .dialog-max-height {
+    height: 560px;
+  }
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/application/component/TTSModeParamSettingDialog.vue b/src/views/application/component/TTSModeParamSettingDialog.vue
new file mode 100644
index 0000000..2e765d9
--- /dev/null
+++ b/src/views/application/component/TTSModeParamSettingDialog.vue
@@ -0,0 +1,173 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('views.application.applicationForm.dialogues.paramSettings')"
+    class="aiMode-param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <DynamicsForm
+      v-model="form_data"
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      :render_data="model_form_field"
+      ref="dynamicsFormRef"
+    >
+    </DynamicsForm>
+
+    <template #footer>
+      <div class="flex-between">
+        <span class="p-16">
+          <el-button @click="testPlay" :loading="playLoading">
+            <AppIcon iconName="app-video-play"></AppIcon>
+            试听
+          </el-button>
+        </span>
+        <span class="dialog-footer p-16">
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('views.application.applicationForm.buttons.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submit" :loading="loading">
+            {{ $t('views.application.applicationForm.buttons.confirm') }}
+          </el-button>
+        </span>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 先渲染，不然不能播放   -->
+  <audio ref="audioPlayer" controls hidden="hidden"></audio>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import modelAPi from '@/api/model'
+import applicationApi from '@/api/application'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import { keys } from 'lodash'
+import { app } from '@/main'
+import { MsgError } from '@/utils/message'
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const tts_model_id = ref('')
+const model_form_field = ref<Array<FormField>>([])
+const emit = defineEmits(['refresh'])
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const form_data = ref<any>({})
+const dialogVisible = ref(false)
+const loading = ref(false)
+const playLoading = ref(false)
+const getApi = (model_id: string, application_id?: string) => {
+  return application_id
+    ? applicationApi.getModelParamsForm(application_id, model_id, loading)
+    : modelAPi.getModelParamsForm(model_id, loading)
+}
+const open = (model_id: string, application_id?: string, model_setting_data?: any) => {
+  form_data.value = {}
+  tts_model_id.value = model_id
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const resp = ok.data
+      .map((item: any) => ({ [item.field]: item.show_default_value !== false ? item.default_value : undefined }))
+      .reduce((x, y) => ({ ...x, ...y }), {})
+    // 删除不存在的字段
+    if (model_setting_data) {
+      Object.keys(model_setting_data).forEach(key => {
+        if (!(key in resp)) {
+          delete model_setting_data[key];
+        }
+      });
+    }
+    model_setting_data = { ...resp, ...model_setting_data }
+    // 渲染动态表单
+    dynamicsFormRef.value?.render(model_form_field.value, model_setting_data)
+  })
+  dialogVisible.value = true
+}
+
+const reset_default = (model_id: string, application_id?: string) => {
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const model_setting_data = ok.data
+      .map((item) => ({ [item.field]: item.show_default_value !== false ? item.default_value : undefined }))
+      .reduce((x, y) => ({ ...x, ...y }), {})
+
+    emit('refresh', model_setting_data)
+  })
+}
+
+const submit = async () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    emit('refresh', form_data.value)
+    dialogVisible.value = false
+  })
+}
+
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+const testPlay = () => {
+  const data = {
+    ...form_data.value,
+    tts_model_id: tts_model_id.value
+  }
+  applicationApi
+    .playDemoText(id as string, data, playLoading)
+    .then(async (res: any) => {
+      if (res.type === 'application/json') {
+        const text = await res.text()
+        MsgError(text)
+        return
+      }
+      // 创建 Blob 对象
+      const blob = new Blob([res], { type: 'audio/mp3' })
+
+      // 创建对象 URL
+      const url = URL.createObjectURL(blob)
+
+      // 检查 audioPlayer 是否已经引用了 DOM 元素
+      if (audioPlayer.value instanceof HTMLAudioElement) {
+        audioPlayer.value.src = url
+        audioPlayer.value.play() // 自动播放音频
+      } else {
+        console.error('audioPlayer.value is not an instance of HTMLAudioElement')
+      }
+    })
+    .catch((err) => {
+      console.log('err: ', err)
+    })
+}
+
+defineExpose({ open, reset_default })
+</script>
+
+<style lang="scss" scoped>
+.aiMode-param-dialog {
+  padding: 8px 8px 24px 8px;
+
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+
+  .el-dialog__body {
+    padding: 16px !important;
+  }
+
+  .dialog-max-height {
+    height: 550px;
+  }
+
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/application/index.vue b/src/views/application/index.vue
new file mode 100644
index 0000000..15835ee
--- /dev/null
+++ b/src/views/application/index.vue
@@ -0,0 +1,422 @@
+<template>
+  <div class="application-list-container p-24" style="padding-top: 16px">
+    <div class="flex-between mb-16">
+      <h4>{{ $t('views.application.applicationList.title') }}</h4>
+      <div class="flex-between">
+        <el-select
+          v-model="selectUserId"
+          class="mr-12"
+          @change="searchHandle"
+          style="max-width: 240px; width: 150px"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          :placeholder="$t('views.application.applicationList.searchBar.placeholder')"
+          prefix-icon="Search"
+          class="w-240"
+          style="min-width: 240px"
+          clearable
+        />
+      </div>
+    </div>
+    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
+      <InfiniteScroll
+        :size="applicationList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
+            <el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
+              <div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog">
+                <AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
+                创建应用
+              </div>
+              <el-divider style="margin: 8px 0" />
+              <el-upload
+                ref="elUploadRef"
+                :file-list="[]"
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="(file: any, fileList: any) => importApplication(file)"
+                class="card-add-button"
+              >
+                <div class="flex align-center cursor p-8">
+                  <AppIcon iconName="app-import" class="mr-8"></AppIcon>导入应用
+                </div>
+              </el-upload>
+            </el-card>
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            v-for="(item, index) in applicationList"
+            :key="index"
+            class="mb-16"
+          >
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="application-card cursor"
+              @click="router.push({ path: `/application/${item.id}/${item.type}/overview` })"
+            >
+              <template #icon>
+                <AppAvatar
+                  v-if="isAppIcon(item?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="item?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="item?.name"
+                  :name="item?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                  class="mr-8"
+                />
+              </template>
+              <template #subTitle>
+                <el-text class="color-secondary" size="small">
+                  <auto-tooltip :content="item.username">
+                    创建者: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
+              <div class="status-tag">
+                <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px"
+                  >高级编排</el-tag
+                >
+                <el-tag class="blue-tag" v-else style="height: 22px">简单配置</el-tag>
+              </div>
+
+              <template #footer>
+                <div class="footer-content">
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.application.applicationList.card.demo')"
+                    placement="top"
+                  >
+                    <el-button text @click.stop @click="getAccessToken(item.id)">
+                      <AppIcon iconName="app-view"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.application.applicationList.card.setting')"
+                    placement="top"
+                  >
+                    <el-button text @click.stop="settingApplication(item)">
+                      <AppIcon iconName="Setting"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <span @click.stop>
+                    <el-dropdown trigger="click">
+                      <el-button text @click.stop>
+                        <el-icon><MoreFilled /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item
+                            v-if="is_show_copy_button(item)"
+                            @click="copyApplication(item)"
+                          >
+                            <AppIcon iconName="app-copy"></AppIcon>
+                            复制</el-dropdown-item
+                          >
+                          <el-dropdown-item @click.stop="exportApplication(item)">
+                            <AppIcon iconName="app-export"></AppIcon>
+                            导出
+                          </el-dropdown-item>
+                          <el-dropdown-item icon="Delete" @click.stop="deleteApplication(item)">{{
+                            $t('views.application.applicationList.card.delete.tooltip')
+                          }}</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </span>
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </InfiniteScroll>
+    </div>
+    <CreateApplicationDialog ref="CreateApplicationDialogRef" />
+    <CopyApplicationDialog ref="CopyApplicationDialogRef" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import applicationApi from '@/api/application'
+import CreateApplicationDialog from './component/CreateApplicationDialog.vue'
+import CopyApplicationDialog from './component/CopyApplicationDialog.vue'
+import { MsgSuccess, MsgConfirm, MsgAlert, MsgError } from '@/utils/message'
+import { isAppIcon } from '@/utils/application'
+import { useRouter } from 'vue-router'
+import { isWorkFlow } from '@/utils/application'
+import { ValidType, ValidCount } from '@/enums/common'
+import { t } from '@/locales'
+import useStore from '@/stores'
+const elUploadRef = ref<any>()
+const { application, user, common } = useStore()
+const router = useRouter()
+
+const CopyApplicationDialogRef = ref()
+const CreateApplicationDialogRef = ref()
+const loading = ref(false)
+
+const applicationList = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+interface UserOption {
+  label: string
+  value: string
+}
+
+const userOptions = ref<UserOption[]>([])
+
+const selectUserId = ref('all')
+
+const searchValue = ref('')
+
+const apiInputParams = ref([])
+
+function copyApplication(row: any) {
+  application.asyncGetApplicationDetail(row.id, loading).then((res: any) => {
+    CopyApplicationDialogRef.value.open({ ...res.data, model_id: res.data.model })
+  })
+}
+
+const is_show_copy_button = (row: any) => {
+  return user.userInfo ? user.userInfo.id == row.user_id : false
+}
+function settingApplication(row: any) {
+  if (isWorkFlow(row.type)) {
+    router.push({ path: `/application/${row.id}/workflow` })
+  } else {
+    router.push({ path: `/application/${row.id}/${row.type}/setting` })
+  }
+}
+const exportApplication = (application: any) => {
+  applicationApi.exportApplication(application.id, application.name, loading).catch((e) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`导出失败:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+const importApplication = (file: any) => {
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  elUploadRef.value.clearFiles()
+  applicationApi.importApplication(formData, loading).then((ok) => {
+    searchHandle()
+  })
+}
+function openCreateDialog() {
+  if (user.isEnterprise()) {
+    CreateApplicationDialogRef.value.open()
+  } else {
+    MsgConfirm(`提示`, '社区版最多支持 5 个应用，如需拥有更多应用，请升级为专业版。', {
+      cancelButtonText: '确定',
+      confirmButtonText: '购买专业版'
+    })
+      .then(() => {
+        window.open('https://maxkb.cn/pricing.html', '_blank')
+      })
+      .catch(() => {
+        common
+          .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
+          .then(async (res: any) => {
+            if (res?.data) {
+              CreateApplicationDialogRef.value.open()
+            }
+          })
+      })
+  }
+}
+
+function searchHandle() {
+  if (user.userInfo) {
+    localStorage.setItem(user.userInfo.id + 'application', selectUserId.value)
+  }
+  applicationList.value = []
+  paginationConfig.current_page = 1
+  paginationConfig.total = 0
+  getList()
+}
+
+function mapToUrlParams(map: any[]) {
+  const params = new URLSearchParams()
+
+  map.forEach((item: any) => {
+    params.append(encodeURIComponent(item.name), encodeURIComponent(item.value))
+  })
+
+  return params.toString() // 返回 URL 查询字符串
+}
+
+function getAccessToken(id: string) {
+  applicationList.value
+    .filter((app) => app.id === id)[0]
+    ?.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')
+    .map((v: any) => {
+      apiInputParams.value = v.properties.api_input_field_list
+        ? v.properties.api_input_field_list.map((v: any) => {
+            return {
+              name: v.variable,
+              value: v.default_value
+            }
+          })
+        : v.properties.input_field_list
+          ? v.properties.input_field_list
+              .filter((v: any) => v.assignment_method === 'api_input')
+              .map((v: any) => {
+                return {
+                  name: v.variable,
+                  value: v.default_value
+                }
+              })
+          : []
+    })
+
+  const apiParams = mapToUrlParams(apiInputParams.value)
+    ? '?' + mapToUrlParams(apiInputParams.value)
+    : ''
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    window.open(application.location + res?.data?.access_token + apiParams)
+  })
+}
+
+function deleteApplication(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.application.applicationList.card.delete.confirmTitle')}${row.name} ?`,
+    t('views.application.applicationList.card.delete.confirmMessage'),
+    {
+      confirmButtonText: t('views.application.applicationList.card.delete.confirmButton'),
+      cancelButtonText: t('views.application.applicationList.card.delete.cancelButton'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      applicationApi.delApplication(row.id, loading).then(() => {
+        const index = applicationList.value.findIndex((v) => v.id === row.id)
+        applicationList.value.splice(index, 1)
+        MsgSuccess(t('views.application.applicationList.card.delete.successMessage'))
+      })
+    })
+    .catch(() => {})
+}
+
+function getList() {
+  const params = {
+    ...(searchValue.value && { name: searchValue.value }),
+    ...(selectUserId.value &&
+      selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
+  }
+  applicationApi.getApplication(paginationConfig, params, loading).then((res) => {
+    res.data.records.forEach((item: any) => {
+      if (user.userInfo && item.user_id === user.userInfo.id) {
+        item.username = user.userInfo.username
+      } else {
+        item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
+      }
+    })
+    applicationList.value = [...applicationList.value, ...res.data.records]
+    paginationConfig.total = res.data.total
+  })
+}
+function getUserList() {
+  applicationApi.getUserList('APPLICATION', loading).then((res) => {
+    if (res.data) {
+      userOptions.value = res.data.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id
+        }
+      })
+      if (user.userInfo) {
+        const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'application')
+        if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
+          selectUserId.value = selectUserIdValue
+        }
+      }
+      getList()
+    }
+  })
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+<style lang="scss" scoped>
+.application-card-add {
+  width: 100%;
+  font-size: 14px;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-disabled-bg-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  &:hover {
+    border: 1px solid var(--el-card-bg-color);
+    background-color: var(--el-card-bg-color);
+  }
+  .card-add-button {
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+    :deep(.el-upload) {
+      display: block;
+      width: 100%;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
+.application-card {
+  .status-tag {
+    position: absolute;
+    right: 16px;
+    top: 15px;
+  }
+}
+.dropdown-custom-switch {
+  padding: 5px 11px;
+  font-size: 14px;
+  font-weight: 400;
+  span {
+    margin-right: 26px;
+  }
+}
+</style>
diff --git a/src/views/authentication/component/CAS.vue b/src/views/authentication/component/CAS.vue
new file mode 100644
index 0000000..70aed90
--- /dev/null
+++ b/src/views/authentication/component/CAS.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="authentication-setting__main main-calc-height">
+    <el-scrollbar>
+      <div class="form-container p-24" v-loading="loading">
+        <el-form
+          ref="authFormRef"
+          :rules="rules"
+          :model="form"
+          label-position="top"
+          require-asterisk-position="right"
+        >
+          <el-form-item :label="$t('login.cas.ldpUri')" prop="config_data.ldpUri">
+            <el-input
+              v-model="form.config_data.ldpUri"
+              :placeholder="$t('login.cas.ldpUriPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.cas.validateUrl')" prop="config_data.validateUrl">
+            <el-input
+              v-model="form.config_data.validateUrl"
+              :placeholder="$t('login.cas.validateUrlPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.cas.redirectUrl')" prop="config_data.redirectUrl">
+            <el-input
+              v-model="form.config_data.redirectUrl"
+              :placeholder="$t('login.cas.redirectUrlPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox v-model="form.is_active"
+              >{{ $t('login.cas.enableAuthentication') }}
+            </el-checkbox>
+          </el-form-item>
+        </el-form>
+
+        <div class="text-right">
+          <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+            {{ $t('login.cas.save') }}
+          </el-button>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import authApi from '@/api/auth-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+import { t } from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'CAS',
+  config_data: {
+    ldpUri: '',
+    validateUrl: '',
+    redirectUrl: ''
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.ldpUri': [
+    { required: true, message: t('login.cas.ldpUriPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.validateUrl': [
+    { required: true, message: t('login.cas.validateUrlPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.redirectUrl': [
+    {
+      required: true,
+      message: t('login.cas.redirectUrlPlaceholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+        MsgSuccess(t('login.cas.saveSuccess'))
+      })
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      if (!res.data.config_data.validateUrl) {
+        res.data.config_data.validateUrl = res.data.config_data.ldpUri
+      }
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/authentication/component/EditModal.vue b/src/views/authentication/component/EditModal.vue
new file mode 100644
index 0000000..917bd01
--- /dev/null
+++ b/src/views/authentication/component/EditModal.vue
@@ -0,0 +1,193 @@
+template
+<template>
+  <el-drawer
+    v-model="visible"
+    size="60%"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    @close="handleClose"
+  >
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <h4>{{ currentPlatform.name + '设置' }}</h4>
+      </div>
+    </template>
+
+    <el-form
+      :model="currentPlatform.config"
+      label-width="120px"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="formRef"
+    >
+      <el-form-item
+        v-for="(value, key) in currentPlatform.config"
+        :key="key"
+        :label="formatFieldName(key)"
+        :prop="key"
+        :rules="getValidationRules(key)"
+      >
+        <el-input
+          v-model="currentPlatform.config[key]"
+          :type="isPasswordField(key) ? 'password' : 'text'"
+          :show-password="isPasswordField(key)"
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button @click="validateConnection">校 验</el-button>
+        <el-button type="primary" @click="validateForm">保 存</el-button>
+      </span>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { ElForm } from 'element-plus'
+import platformApi from '@/api/platform-source'
+import { MsgError, MsgSuccess } from '@/utils/message'
+
+const visible = ref(false)
+const loading = ref(false)
+const formRef = ref<InstanceType<typeof ElForm>>()
+
+interface PlatformConfig {
+  [key: string]: string
+}
+
+interface Platform {
+  key: string
+  logoSrc: string
+  name: string
+  isActive: boolean
+  isValid: boolean
+  config: PlatformConfig
+}
+
+const currentPlatform = reactive<Platform>({
+  key: '',
+  logoSrc: '',
+  name: '',
+  isActive: false,
+  isValid: false,
+  config: {}
+})
+
+const formatFieldName = (key?: any): string => {
+  const fieldNames: { [key: string]: string } = {
+    corp_id: 'Corp ID',
+    app_key: currentPlatform?.key != 'lark' ? 'APP Key' : 'App ID',
+    app_secret: 'APP Secret',
+    agent_id: 'Agent ID',
+    callback_url: '回调地址'
+  }
+  return (
+    fieldNames[key as keyof typeof fieldNames] ||
+    (key ? key.charAt(0).toUpperCase() + key.slice(1) : '')
+  )
+}
+
+const getValidationRules = (key: any) => {
+  switch (key) {
+    case 'app_key':
+      return [{ required: true, message: '请输入 APP Key', trigger: ['blur', 'change'] }]
+    case 'app_secret':
+      return [{ required: true, message: '请输入 APP Secret', trigger: ['blur', 'change'] }]
+    case 'corp_id':
+      return [{ required: true, message: '请输入 Corp ID', trigger: ['blur', 'change'] }]
+    case 'agent_id':
+      return [{ required: true, message: '请输入 Agent ID', trigger: ['blur', 'change'] }]
+    case 'callback_url':
+      return [
+        { required: true, message: '请输入回调地址', trigger: ['blur', 'change'] },
+        { pattern: /^https?:\/\/.+/, message: '请输入有效的 URL 地址', trigger: ['blur', 'change'] }
+      ]
+    default:
+      return []
+  }
+}
+
+const open = async (platform: Platform) => {
+  visible.value = true
+  loading.value = true
+  Object.assign(currentPlatform, platform)
+
+  // 设置默认的 callback_url
+  let defaultCallbackUrl = window.location.origin
+  switch (platform.key) {
+    case 'wecom':
+      if (currentPlatform.config.app_key) {
+        currentPlatform.config.agent_id = currentPlatform.config.app_key
+        delete currentPlatform.config.app_key
+      }
+      currentPlatform.config.callback_url = `${defaultCallbackUrl}/api/wecom`
+      break
+    case 'dingtalk':
+      if (currentPlatform.config.agent_id) {
+        currentPlatform.config.corp_id = currentPlatform.config.agent_id
+        delete currentPlatform.config.agent_id
+      }
+      currentPlatform.config = {
+        corp_id: currentPlatform.config.corp_id,
+        app_key: currentPlatform.config.app_key,
+        app_secret: currentPlatform.config.app_secret,
+        callback_url: defaultCallbackUrl
+      }
+      break
+    case 'lark':
+      currentPlatform.config.callback_url = `${defaultCallbackUrl}/api/feishu`
+      break
+    default:
+      break
+  }
+  formRef.value?.clearValidate()
+}
+defineExpose({ open })
+
+const validateForm = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      saveConfig()
+    } else {
+      MsgError('请填写所有必填项并确保格式正确')
+    }
+  })
+}
+
+const handleClose = () => {
+  visible.value = false
+  formRef.value?.clearValidate()
+  emit('refresh')
+}
+
+function validateConnection() {
+  platformApi.validateConnection(currentPlatform, loading).then((res: any) => {
+    if (res.data) {
+      MsgSuccess('校验成功')
+    } else {
+      MsgError('校验失败')
+    }
+  })
+}
+
+const passwordFields = new Set(['app_secret', 'client_secret', 'secret'])
+
+const isPasswordField = (key: any) => passwordFields.has(key)
+const emit = defineEmits(['refresh'])
+function saveConfig() {
+  platformApi.updateConfig(currentPlatform, loading).then((res: any) => {
+    MsgSuccess('保存成功')
+    emit('refresh')
+    visible.value = false
+    formRef.value?.clearValidate()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+// 保持原有的样式
+</style>
diff --git a/src/views/authentication/component/LDAP.vue b/src/views/authentication/component/LDAP.vue
new file mode 100644
index 0000000..6eb5f21
--- /dev/null
+++ b/src/views/authentication/component/LDAP.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="authentication-setting__main main-calc-height">
+    <el-scrollbar>
+      <div class="form-container p-24" v-loading="loading">
+        <el-form
+          ref="authFormRef"
+          :rules="rules"
+          :model="form"
+          label-position="top"
+          require-asterisk-position="right"
+        >
+          <el-form-item :label="$t('login.ldap.address')" prop="config_data.ldap_server">
+            <el-input
+              v-model="form.config_data.ldap_server"
+              :placeholder="$t('login.ldap.serverPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.ldap.bindDN')" prop="config_data.base_dn">
+            <el-input
+              v-model="form.config_data.base_dn"
+              :placeholder="$t('login.ldap.bindDNPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.ldap.password')" prop="config_data.password">
+            <el-input
+              v-model="form.config_data.password"
+              :placeholder="$t('login.ldap.passwordPlaceholder')"
+              show-password
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.ldap.ou')" prop="config_data.ou">
+            <el-input v-model="form.config_data.ou" :placeholder="$t('login.ldap.ouPlaceholder')" />
+          </el-form-item>
+          <el-form-item :label="$t('login.ldap.ldap_filter')" prop="config_data.ldap_filter">
+            <el-input
+              v-model="form.config_data.ldap_filter"
+              :placeholder="$t('login.ldap.ldap_filterPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.ldap.ldap_mapping')" prop="config_data.ldap_mapping">
+            <el-input
+              v-model="form.config_data.ldap_mapping"
+              placeholder='{"name":"name","email":"mail","username":"cn"}'
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox v-model="form.is_active">{{
+              $t('login.ldap.enableAuthentication')
+            }}</el-checkbox>
+          </el-form-item>
+        </el-form>
+
+        <div class="text-right">
+          <el-button @click="submit(authFormRef, 'test')" :disabled="loading">
+            {{ $t('login.ldap.test') }}</el-button
+          >
+          <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+            {{ $t('login.ldap.save') }}
+          </el-button>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import authApi from '@/api/auth-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+import { t } from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'LDAP',
+  config_data: {
+    ldap_server: '',
+    base_dn: '',
+    password: '',
+    ou: '',
+    ldap_filter: '',
+    ldap_mapping: ''
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.ldap_server': [
+    { required: true, message: t('login.ldap.serverPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.base_dn': [
+    { required: true, message: t('login.ldap.bindDNPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.password': [
+    { required: true, message: t('login.ldap.passwordPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.ou': [{ required: true, message: t('login.ldap.ouPlaceholder'), trigger: 'blur' }],
+  'config_data.ldap_filter': [
+    { required: true, message: t('login.ldap.ldap_filterPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.ldap_mapping': [
+    { required: true, message: t('login.ldap.ldap_mappingPlaceholder'), trigger: 'blur' }
+  ]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (test) {
+        authApi.postAuthSetting(form.value, loading).then((res) => {
+          MsgSuccess(t('login.ldap.testConnectionSuccess'))
+        })
+      } else {
+        authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+          MsgSuccess(t('login.ldap.saveSuccess'))
+        })
+      }
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+      if (res.data.config_data.ldap_mapping) {
+        form.value.config_data.ldap_mapping = JSON.stringify(
+          JSON.parse(res.data.config_data.ldap_mapping)
+        )
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/authentication/component/OAuth2.vue b/src/views/authentication/component/OAuth2.vue
new file mode 100644
index 0000000..aaa1afd
--- /dev/null
+++ b/src/views/authentication/component/OAuth2.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="authentication-setting__main main-calc-height">
+    <el-scrollbar>
+      <div class="form-container p-24" v-loading="loading">
+        <el-form
+          ref="authFormRef"
+          :rules="rules"
+          :model="form"
+          label-position="top"
+          require-asterisk-position="right"
+        >
+          <el-form-item :label="$t('login.oauth2.authEndpoint')" prop="config_data.authEndpoint">
+            <el-input
+              v-model="form.config_data.authEndpoint"
+              :placeholder="$t('login.oauth2.authEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.tokenEndpoint')" prop="config_data.tokenEndpoint">
+            <el-input
+              v-model="form.config_data.tokenEndpoint"
+              :placeholder="$t('login.oauth2.tokenEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item
+            :label="$t('login.oauth2.userInfoEndpoint')"
+            prop="config_data.userInfoEndpoint"
+          >
+            <el-input
+              v-model="form.config_data.userInfoEndpoint"
+              :placeholder="$t('login.oauth2.userInfoEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.scope')" prop="config_data.scope">
+            <el-input
+              v-model="form.config_data.scope"
+              :placeholder="$t('login.oauth2.scopePlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.clientId')" prop="config_data.clientId">
+            <el-input
+              v-model="form.config_data.clientId"
+              :placeholder="$t('login.oauth2.clientIdPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.clientSecret')" prop="config_data.clientSecret">
+            <el-input
+              v-model="form.config_data.clientSecret"
+              :placeholder="$t('login.oauth2.clientSecretPlaceholder')"
+              show-password
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.redirectUrl')" prop="config_data.redirectUrl">
+            <el-input
+              v-model="form.config_data.redirectUrl"
+              :placeholder="$t('login.oauth2.redirectUrlPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oauth2.filedMapping')" prop="config_data.fieldMapping">
+            <el-input
+              v-model="form.config_data.fieldMapping"
+              :placeholder="$t('login.oauth2.filedMappingPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox v-model="form.is_active"
+              >{{ $t('login.oauth2.enableAuthentication') }}
+            </el-checkbox>
+          </el-form-item>
+        </el-form>
+
+        <div class="text-right">
+          <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+            {{ $t('login.ldap.save') }}
+          </el-button>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import authApi from '@/api/auth-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+import { t } from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'OAuth2',
+  config_data: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    scope: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUrl: '',
+    fieldMapping: ''
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.authEndpoint': [
+    { required: true, message: t('login.oauth2.authEndpointPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.tokenEndpoint': [
+    { required: true, message: t('login.oauth2.tokenEndpointPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.userInfoEndpoint': [
+    {
+      required: true,
+      message: t('login.oauth2.userInfoEndpointPlaceholder'),
+      trigger: 'blur'
+    }
+  ],
+  'config_data.scope': [
+    { required: true, message: t('login.oauth2.scopePlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.clientId': [
+    { required: true, message: t('login.oauth2.clientIdPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.clientSecret': [
+    { required: true, message: t('login.oauth2.clientSecretPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.redirectUrl': [
+    { required: true, message: t('login.oauth2.redirectUrlPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.fieldMapping': [
+    { required: true, message: t('login.oauth2.filedMappingPlaceholder'), trigger: 'blur' }
+  ]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+        MsgSuccess(t('login.ldap.saveSuccess'))
+      })
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/authentication/component/OIDC.vue b/src/views/authentication/component/OIDC.vue
new file mode 100644
index 0000000..079660c
--- /dev/null
+++ b/src/views/authentication/component/OIDC.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="authentication-setting__main main-calc-height">
+    <el-scrollbar>
+      <div class="form-container p-24" v-loading="loading">
+        <el-form
+          ref="authFormRef"
+          :rules="rules"
+          :model="form"
+          label-position="top"
+          require-asterisk-position="right"
+        >
+          <el-form-item :label="$t('login.oidc.authEndpoint')" prop="config_data.authEndpoint">
+            <el-input
+              v-model="form.config_data.authEndpoint"
+              :placeholder="$t('login.oidc.authEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oidc.tokenEndpoint')" prop="config_data.tokenEndpoint">
+            <el-input
+              v-model="form.config_data.tokenEndpoint"
+              :placeholder="$t('login.oidc.tokenEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item
+            :label="$t('login.oidc.userInfoEndpoint')"
+            prop="config_data.userInfoEndpoint"
+          >
+            <el-input
+              v-model="form.config_data.userInfoEndpoint"
+              :placeholder="$t('login.oidc.userInfoEndpointPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oidc.clientId')" prop="config_data.clientId">
+            <el-input
+              v-model="form.config_data.clientId"
+              :placeholder="$t('login.oidc.clientIdPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oidc.clientSecret')" prop="config_data.clientSecret">
+            <el-input
+              v-model="form.config_data.clientSecret"
+              :placeholder="$t('login.oidc.clientSecretPlaceholder')"
+              show-password
+            />
+          </el-form-item>
+          <el-form-item :label="$t('login.oidc.redirectUrl')" prop="config_data.redirectUrl">
+            <el-input
+              v-model="form.config_data.redirectUrl"
+              :placeholder="$t('login.oidc.redirectUrlPlaceholder')"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox v-model="form.is_active"
+              >{{ $t('login.oidc.enableAuthentication') }}
+            </el-checkbox>
+          </el-form-item>
+        </el-form>
+
+        <div class="text-right">
+          <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+            {{ $t('login.ldap.save') }}
+          </el-button>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import authApi from '@/api/auth-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+import { t } from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'OIDC',
+  config_data: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUrl: ''
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.authEndpoint': [
+    { required: true, message: t('login.oidc.authEndpointPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.tokenEndpoint': [
+    { required: true, message: t('login.oidc.tokenEndpointPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.userInfoEndpoint': [
+    {
+      required: true,
+      message: t('login.oidc.userInfoEndpointPlaceholder'),
+      trigger: 'blur'
+    }
+  ],
+  'config_data.clientId': [
+    { required: true, message: t('login.oidc.clientIdPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.clientSecret': [
+    { required: true, message: t('login.oidc.clientSecretPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.redirectUrl': [
+    { required: true, message: t('login.oidc.redirectUrlPlaceholder'), trigger: 'blur' }
+  ],
+  'config_data.logoutEndpoint': [
+    { required: true, message: t('login.oidc.logoutEndpointPlaceholder'), trigger: 'blur' }
+  ]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+        MsgSuccess(t('login.ldap.saveSuccess'))
+      })
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/authentication/component/SCAN.vue b/src/views/authentication/component/SCAN.vue
new file mode 100644
index 0000000..f4a48f1
--- /dev/null
+++ b/src/views/authentication/component/SCAN.vue
@@ -0,0 +1,262 @@
+<template>
+  <div v-loading="loading">
+    <el-card shadow="hover" class="border-none cursor" style="--el-card-padding: 16px 24px">
+      <div v-for="item in platforms" :key="item.key" class="mb-16">
+        <el-card class="mb-16" shadow="hover" style="--el-card-padding: 16px">
+          <div class="flex-between">
+            <div class="flex align-center ml-8 mr-8">
+              <img :src="item.logoSrc" alt="" class="icon" />
+              <h5 style="margin-left: 8px">{{ item.name }}</h5>
+              <el-tag v-if="item.isValid" type="success" class="ml-4">有效</el-tag>
+            </div>
+            <div>
+              <el-button type="primary" v-if="!item.isValid" @click="showDialog(item)"
+                >接入</el-button
+              >
+              <span v-if="item.isValid">
+                <span class="mr-4">{{ item.isActive ? '已开启' : '未开启' }}</span>
+                <el-switch
+                  size="small"
+                  v-model="item.isActive"
+                  :disabled="!item.isValid"
+                  @change="changeStatus(item)"
+                />
+              </span>
+            </div>
+          </div>
+          <el-collapse-transition>
+            <div v-if="item.isValid" class="border-t mt-16">
+              <el-row :gutter="12" class="mt-16">
+                <el-col v-for="(value, key) in item.config" :key="key" :span="12">
+                  <el-text type="info">{{ formatFieldName(key, item) }}</el-text>
+                  <div class="mt-4 mb-16 flex align-center">
+                    <span
+                      v-if="key !== 'app_secret'"
+                      class="vertical-middle lighter break-all ellipsis-1"
+                      >{{ value }}</span
+                    >
+                    <span
+                      v-if="key === 'app_secret' && !showPassword[item.key]?.[key]"
+                      class="vertical-middle lighter break-all ellipsis-1"
+                      >************</span
+                    >
+                    <span
+                      v-if="key === 'app_secret' && showPassword[item.key]?.[key]"
+                      class="vertical-middle lighter break-all ellipsis-1"
+                      >{{ value }}</span
+                    >
+                    <el-button type="primary" text @click="() => copyClick(value)">
+                      <AppIcon iconName="app-copy" />
+                    </el-button>
+                    <el-button
+                      v-if="key === 'app_secret'"
+                      type="primary"
+                      text
+                      @click="toggleShowPassword(item.key)"
+                    >
+                      <el-icon v-if="key === 'app_secret' && !showPassword[item.key]?.[key]">
+                        <Hide />
+                      </el-icon>
+                      <el-icon v-if="key === 'app_secret' && showPassword[item.key]?.[key]">
+                        <View />
+                      </el-icon>
+                    </el-button>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-button type="primary" @click="showDialog(item)">编辑</el-button>
+              <el-button @click="validateConnection(item)">校验</el-button>
+            </div>
+          </el-collapse-transition>
+        </el-card>
+      </div>
+      <EditModel ref="EditModelRef" @refresh="refresh" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { copyClick } from '@/utils/clipboard'
+import EditModel from './EditModal.vue'
+import platformApi from '@/api/platform-source'
+import { MsgError, MsgSuccess } from '@/utils/message'
+
+interface PlatformConfig {
+  [key: string]: string
+}
+
+interface Platform {
+  key: string
+  logoSrc: string
+  name: string
+  isActive: boolean
+  isValid: boolean
+  config: PlatformConfig
+}
+
+const EditModelRef = ref()
+const loading = ref(false)
+const platforms = reactive<Platform[]>(initializePlatforms())
+const showPassword = reactive<{ [platformKey: string]: { [key: string]: boolean } }>({})
+
+onMounted(() => {
+  getPlatformInfo()
+})
+
+function initializePlatforms(): Platform[] {
+  return [
+    createPlatform('wecom', '企业微信'),
+    createPlatform('dingtalk', '钉钉'),
+    createPlatform('lark', '飞书')
+  ]
+}
+
+function createPlatform(key: string, name: string): Platform {
+  let logo = ''
+  switch (key) {
+    case 'wecom':
+      logo = 'wechat-work'
+      break
+    case 'dingtalk':
+      logo = 'dingtalk'
+      break
+    case 'lark':
+      logo = 'lark'
+      break
+    default:
+      logo = '' // 默认值
+      break
+  }
+
+  const config = {
+    ...(key === 'wecom' ? { corp_id: '', agent_id: '' } : { app_key: '' }),
+    app_secret: '',
+    callback_url: ''
+  }
+
+  return {
+    key,
+    logoSrc: new URL(`../../../assets/logo_${logo}.svg`, import.meta.url).href,
+    name,
+    isActive: false,
+    isValid: false,
+    config
+  }
+}
+
+function formatFieldName(key?: any, item?: Platform): string {
+  const fieldNames: { [key: string]: string } = {
+    corp_id: 'Corp ID',
+    app_key: item?.key != 'lark' ? 'APP Key' : 'App ID',
+    app_secret: 'APP Secret',
+    agent_id: 'Agent ID',
+    callback_url: '回调地址'
+  }
+  return (
+    fieldNames[key as keyof typeof fieldNames] ||
+    (key ? key.charAt(0).toUpperCase() + key.slice(1) : '')
+  )
+}
+
+function getPlatformInfo() {
+  loading.value = true
+  platformApi.getPlatformInfo(loading).then((res: any) => {
+    if (res) {
+      platforms.forEach((platform) => {
+        const data = res.data.find((item: any) => item.platform === platform.key)
+        if (data) {
+          Object.assign(platform, {
+            isValid: data.is_valid,
+            isActive: data.is_active,
+            config: data.config
+          })
+          if (platform.key === 'dingtalk') {
+            const { corp_id, app_key, app_secret } = platform.config
+            platform.config = {
+              corp_id,
+              app_key,
+              app_secret,
+              callback_url: platform.config.callback_url
+            }
+          }
+          showPassword[platform.key] = {}
+          showPassword[platform.key]['app_secret'] = false
+        }
+      })
+    }
+  })
+}
+
+function validateConnection(currentPlatform: Platform) {
+  platformApi.validateConnection(currentPlatform, loading).then((res: any) => {
+    res.data ? MsgSuccess('校验成功') : MsgError('校验失败')
+  })
+}
+
+function refresh() {
+  getPlatformInfo()
+}
+
+function changeStatus(currentPlatform: Platform) {
+  platformApi.updateConfig(currentPlatform, loading).then((res: any) => {
+    MsgSuccess('操作成功')
+  })
+}
+
+function toggleShowPassword(platformKey: string) {
+  if (!showPassword[platformKey]) {
+    showPassword[platformKey] = {}
+  }
+  showPassword[platformKey]['app_secret'] = !showPassword[platformKey]['app_secret']
+}
+
+function showDialog(platform: Platform) {
+  EditModelRef.value?.open(platform)
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  width: 24px;
+  height: 24px;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.ml-4 {
+  margin-left: 4px;
+}
+
+.ml-8 {
+  margin-left: 8px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.border-t {
+  border-top: 1px solid #ebeef5;
+}
+
+.vertical-middle {
+  vertical-align: middle;
+}
+</style>
diff --git a/src/views/authentication/index.vue b/src/views/authentication/index.vue
new file mode 100644
index 0000000..689f0b7
--- /dev/null
+++ b/src/views/authentication/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="authentication-setting p-16-24">
+    <h4>{{ $t('login.authentication') }}</h4>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <template v-for="(item, index) in tabList" :key="index">
+        <el-tab-pane :label="item.label" :name="item.name">
+          <component :is="item.component" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import LDAP from './component/LDAP.vue'
+import CAS from './component/CAS.vue'
+import OIDC from './component/OIDC.vue'
+import SCAN from './component/SCAN.vue'
+import OAuth2 from './component/OAuth2.vue'
+import { t } from '@/locales'
+import useStore from '@/stores'
+
+const { user } = useStore()
+const router = useRouter()
+
+const activeName = ref('LDAP')
+const tabList = [
+  {
+    label: t('login.ldap.title'),
+    name: 'LDAP',
+    component: LDAP
+  },
+  {
+    label: t('login.cas.title'),
+    name: 'CAS',
+    component: CAS
+  },
+  {
+    label: t('login.oidc.title'),
+    name: 'OIDC',
+    component: OIDC
+  },
+  {
+    label: t('login.oauth2.title'),
+    name: 'OAuth2',
+    component: OAuth2
+  },
+  {
+    label: '扫码登录',
+    name: 'SCAN',
+    component: SCAN
+  }
+]
+
+function handleClick() {}
+
+onMounted(() => {
+  if (user.isExpire()) {
+    router.push({ path: `/application` })
+  }
+})
+</script>
+<style lang="scss" scoped>
+.authentication-setting__main {
+  background-color: var(--app-view-bg-color);
+  box-sizing: border-box;
+  min-width: 700px;
+  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 70px);
+  box-sizing: border-box;
+  :deep(.form-container) {
+    width: 70%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/chat/auth/component/password.vue b/src/views/chat/auth/component/password.vue
new file mode 100644
index 0000000..4139258
--- /dev/null
+++ b/src/views/chat/auth/component/password.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    :modelValue="show"
+    modal-class="positioned-mask"
+    width="300"
+    title="请输入密码打开链接"
+    custom-class="no-close-button"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    top="25vh"
+    center
+    :modal="true"
+  >
+    <el-form ref="FormRef" :model="form" @submit.prevent="validator">
+      <el-form-item prop="value" :rules="rules.value">
+        <el-input show-password v-model="form.value" />
+      </el-form-item>
+      <el-button class="w-full mt-8" type="primary" @click="validator" :loading="loading"
+        >确定</el-button
+      >
+    </el-form>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+const route = useRoute()
+const FormRef = ref()
+const {
+  params: { accessToken }
+} = route as any
+const { application } = useStore()
+const props = defineProps<{ applicationProfile: any; modelValue: boolean }>()
+const loading = ref<boolean>(false)
+const show = computed(() => {
+  if (props.applicationProfile) {
+    if (props.modelValue) {
+      return false
+    }
+    return props.applicationProfile.authentication
+  }
+  return false
+})
+const emit = defineEmits(['update:modelValue'])
+const auth = () => {
+  return application.asyncAppAuthentication(accessToken, loading, form.value).then(() => {
+    emit('update:modelValue', true)
+  })
+}
+const validator_auth = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('密码不能为空'))
+  } else {
+    auth().catch(() => {
+      callback(new Error('密码错误'))
+    })
+  }
+}
+const validator = () => {
+  FormRef.value.validate()
+}
+
+const rules = {
+  value: [{ required: true, validator: validator_auth, trigger: 'manual' }]
+}
+
+const form = ref({
+  type: 'password',
+  value: ''
+})
+</script>
+<style lang="scss">
+.positioned-mask {
+  top: var(--app-header-height);
+  height: calc(100% - var(--app-header-height));
+  .el-overlay-dialog {
+    top: var(--app-header-height);
+    height: calc(100% - var(--app-header-height));
+  }
+}
+</style>
diff --git a/src/views/chat/auth/index.vue b/src/views/chat/auth/index.vue
new file mode 100644
index 0000000..1f53772
--- /dev/null
+++ b/src/views/chat/auth/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="chat-pc__header" :style="customStyle">
+    <div class="flex align-center">
+      <div class="mr-12 ml-24 flex">
+        <AppAvatar
+          v-if="isAppIcon(application_profile?.icon)"
+          shape="square"
+          :size="32"
+          style="background: none"
+        >
+          <img :src="application_profile?.icon" alt="" />
+        </AppAvatar>
+        <AppAvatar
+          v-else-if="application_profile?.name"
+          :name="application_profile?.name"
+          pinyinColor
+          shape="square"
+          :size="32"
+        />
+      </div>
+      <h4>{{ application_profile?.name }}</h4>
+    </div>
+  </div>
+
+  <component
+    :is="auth_components[`/src/views/chat/auth/component/${auth_type}.vue`].default"
+    v-model="is_auth"
+    :applicationProfile="application_profile"
+  />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isAppIcon } from '@/utils/application'
+
+const auth_components: any = import.meta.glob('@/views/chat/auth/component/*.vue', {
+  eager: true
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = withDefaults(
+  defineProps<{ modelValue: boolean; application_profile: any; auth_type?: string; style?: any }>(),
+  {
+    auth_type: 'password',
+    style: {}
+  }
+)
+const is_auth = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+
+const customStyle = computed(() => {
+  return {
+    background: props.application_profile?.custom_theme?.theme_color,
+    color: props.application_profile?.custom_theme?.header_font_color,
+    border: 'none',
+    ...props.style
+  }
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/views/chat/base/index.vue b/src/views/chat/base/index.vue
new file mode 100644
index 0000000..b017339
--- /dev/null
+++ b/src/views/chat/base/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="chat layout-bg" v-loading="loading">
+    <div class="chat__header" :class="!isDefaultTheme ? 'custom-header' : ''">
+      <div class="chat-width flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h2>{{ applicationDetail?.name }}</h2>
+      </div>
+    </div>
+    <div class="chat__main chat-width">
+      <AiChat
+        v-model:applicationDetails="applicationDetail"
+        type="ai-chat"
+        :available="applicationAvailable"
+        :appId="applicationDetail?.id"
+      ></AiChat>
+    </div>
+    <div class="chat__footer"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+import { isAppIcon } from '@/utils/application'
+import useStore from '@/stores'
+
+const { user } = useStore()
+
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const loading = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+</script>
+<style lang="scss">
+.chat {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 24px);
+    height: calc(100vh - var(--app-header-height) - 24px);
+    overflow: hidden;
+  }
+
+  &__footer {
+    background: #f3f7f9;
+    height: 80px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 8px !important;
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
+    }
+  }
+  .chat-width {
+    // max-width: 80%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/chat/embed/index.vue b/src/views/chat/embed/index.vue
new file mode 100644
index 0000000..37ee5c4
--- /dev/null
+++ b/src/views/chat/embed/index.vue
@@ -0,0 +1,352 @@
+<template>
+  <div
+    class="chat-embed layout-bg"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <div class="chat-embed__header" :style="customStyle">
+      <div class="chat-width flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div>
+    <div>
+      <div class="chat-embed__main">
+        <AiChat
+          ref="AiChatRef"
+          v-model:applicationDetails="applicationDetail"
+          :available="applicationAvailable"
+          :appId="applicationDetail?.id"
+          :record="currentRecordList"
+          :chatId="currentChatId"
+          type="ai-chat"
+          @refresh="refresh"
+          @scroll="handleScroll"
+          class="AiChat-embed"
+        >
+          <template #operateBefore>
+            <div class="chat-width">
+              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+                <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
+              </el-button>
+            </div>
+          </template>
+        </AiChat>
+      </div>
+
+      <!-- 历史记录弹出层 -->
+      <div
+        v-if="applicationDetail.show_history || !user.isEnterprise()"
+        @click.prevent.stop="show = !show"
+        class="chat-popover-button cursor color-secondary"
+      >
+        <AppIcon
+          iconName="app-history-outlined"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color
+          }"
+        ></AppIcon>
+      </div>
+
+      <el-collapse-transition>
+        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
+          <div class="border-b p-16-24">
+            <span>历史记录</span>
+          </div>
+
+          <el-scrollbar max-height="300">
+            <div class="p-8">
+              <common-list
+                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+                :data="chatLogData"
+                v-loading="left_loading"
+                :defaultActive="currentChatId"
+                @click="clickListHandle"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <auto-tooltip :content="row.abstract">
+                      {{ row.abstract }}
+                    </auto-tooltip>
+                    <div @click.stop v-if="mouseId === row.id && row.id !== 'new'">
+                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <div class="text-center mt-24">
+                    <el-text type="info">暂无历史记录</el-text>
+                  </div>
+                </template>
+              </common-list>
+            </div>
+            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+              <span>仅显示最近 20 条对话</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-collapse-transition>
+      <div class="chat-popover-mask" v-show="show"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, nextTick, computed } from 'vue'
+import { isAppIcon } from '@/utils/application'
+import { hexToRgba } from '@/utils/theme'
+import useStore from '@/stores'
+
+const { user, log } = useStore()
+
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+const chatLogData = ref<any[]>([])
+const show = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+
+const mouseId = ref('')
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      paginationConfig.current_page = 1
+      paginationConfig.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function clickoutside() {
+  show.value = false
+}
+
+function newChat() {
+  paginationConfig.current_page = 1
+  currentRecordList.value = []
+  currentChatId.value = 'new'
+}
+
+function getChatLog(id: string) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.current_page = 1
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+    show.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id)
+  currentChatId.value = id
+}
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (applicationDetail.value.show_history || !user.isEnterprise()) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.chat-embed {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 24px);
+    height: calc(100vh - var(--app-header-height) - 24px);
+    overflow: hidden;
+  }
+  .new-chat-button {
+    z-index: 11;
+  }
+  // 历史对话弹出层
+  .chat-popover {
+    position: absolute;
+    top: var(--app-header-height);
+    background: #ffffff;
+    padding-bottom: 24px;
+    z-index: 2009;
+  }
+  .chat-popover-button {
+    z-index: 2009;
+    position: absolute;
+    top: 16px;
+    right: 85px;
+    font-size: 22px;
+  }
+  .chat-popover-mask {
+    background-color: var(--el-overlay-color-lighter);
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: var(--app-header-height);
+    z-index: 2008;
+  }
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+  .AiChat-embed {
+    .ai-chat__operate {
+      padding-top: 12px;
+    }
+  }
+  .chat-width {
+    max-width: var(--app-chat-width, 860px);
+    margin: 0 auto;
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-overlay) {
+  background-color: transparent;
+}
+</style>
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
new file mode 100644
index 0000000..36b8e44
--- /dev/null
+++ b/src/views/chat/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <component
+    v-if="chat_show && init_data_end"
+    :applicationAvailable="applicationAvailable"
+    :is="currentTemplate"
+    :application_profile="application_profile"
+    :key="route.fullPath"
+    v-loading="loading"
+  />
+  <Auth
+    v-else
+    :application_profile="application_profile"
+    :auth_type="application_profile.authentication_type"
+    v-model="is_auth"
+    :style="{
+      '--el-color-primary': application_profile?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(application_profile?.custom_theme?.theme_color, 0.1)
+    }"
+  ></Auth>
+</template>
+<script setup lang="ts">
+import { ref, onBeforeMount, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+import Auth from '@/views/chat/auth/index.vue'
+import { hexToRgba } from '@/utils/theme'
+const route = useRoute()
+const { application, user } = useStore()
+
+const components: any = import.meta.glob('@/views/chat/**/index.vue', {
+  eager: true
+})
+
+const {
+  query: { mode },
+  params: { accessToken }
+} = route as any
+const is_auth = ref<boolean>(false)
+const currentTemplate = computed(() => {
+  let modeName = ''
+  if (mode && mode === 'embed') {
+    modeName = 'embed'
+  } else {
+    modeName = show_history.value || !user.isEnterprise() ? 'pc' : 'base'
+  }
+  const name = `/src/views/chat/${modeName}/index.vue`
+  return components[name].default
+})
+/**
+ * 是否显示对话
+ */
+const chat_show = computed(() => {
+  if (init_data_end.value) {
+    if (!applicationAvailable.value) {
+      return true
+    }
+    if (application_profile.value) {
+      if (application_profile.value.authentication && is_auth.value) {
+        return true
+      } else if (!application_profile.value.authentication) {
+        return true
+      }
+    }
+  }
+  return false
+})
+const loading = ref(false)
+
+const show_history = ref(false)
+
+const application_profile = ref<any>({})
+/**
+
+ * 初始化结束
+ */
+const init_data_end = ref<boolean>(false)
+
+const applicationAvailable = ref<boolean>(true)
+function getAppProfile() {
+  return application.asyncGetAppProfile(loading).then((res: any) => {
+    show_history.value = res.data?.show_history
+    application_profile.value = res.data
+  })
+}
+function getAccessToken(token: string) {
+  return application.asyncAppAuthentication(token, loading).then(() => {
+    return getAppProfile()
+  })
+}
+onBeforeMount(() => {
+  user.changeUserType(2)
+  Promise.all([user.asyncGetProfile(), getAccessToken(accessToken)])
+    .catch(() => {
+      applicationAvailable.value = false
+    })
+    .finally(() => (init_data_end.value = true))
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/views/chat/pc/index.vue b/src/views/chat/pc/index.vue
new file mode 100644
index 0000000..ccc02c7
--- /dev/null
+++ b/src/views/chat/pc/index.vue
@@ -0,0 +1,486 @@
+<template>
+  <div
+    class="chat-pc layout-bg"
+    :class="classObj"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <!-- <div class="chat-pc__header" :style="customStyle">
+      <div class="flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div> -->
+    <div >
+      <div class="flex">
+        <div class="chat-pc__left border-r">
+          <div class="p-24 pb-0">
+            <el-button class="add-button w-full primary" @click="newChat">
+              <el-icon>
+                <Plus />
+              </el-icon>
+              <span class="ml-4">新建对话</span>
+            </el-button>
+            <p class="mt-20 mb-8">历史记录</p>
+          </div>
+          <div class="left-height pt-0">
+            <el-scrollbar>
+              <div class="p-8 pt-0">
+                <common-list
+                  :style="{
+                    '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+                    '--el-color-primary-light-9': hexToRgba(
+                      applicationDetail?.custom_theme?.theme_color,
+                      0.1
+                    )
+                  }"
+                  :data="chatLogData"
+                  class="mt-8"
+                  v-loading="left_loading"
+                  :defaultActive="currentChatId"
+                  @click="clickListHandle"
+                  @mouseenter="mouseenter"
+                  @mouseleave="mouseId = ''"
+                >
+                  <template #default="{ row }">
+                    <div class="flex-between">
+                      <auto-tooltip :content="row.abstract">
+                        {{ row.abstract }}
+                      </auto-tooltip>
+                      <div @click.stop v-if="mouseId === row.id && row.id !== 'new'">
+                        <el-button style="padding: 0" link @click.stop="deleteLog(row)">
+                          <el-icon><Delete /></el-icon>
+                        </el-button>
+                      </div>
+                    </div>
+                  </template>
+
+                  <template #empty>
+                    <div class="text-center">
+                      <el-text type="info">暂无历史记录</el-text>
+                    </div>
+                  </template>
+                </common-list>
+              </div>
+              <div v-if="chatLogData?.length" class="gradient-divider lighter mt-8">
+                <span>仅显示最近 20 条对话</span>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+        <div class="chat-pc__right" style="padding-top: 0;">
+          <div class="right-header border-b mb-24 p-16-24 flex-between">
+            <h4 class="ellipsis-1" style="width: 70%">
+              {{ currentChatName }}
+            </h4>
+
+            <span class="flex align-center" v-if="currentRecordList.length">
+              <AppIcon
+                v-if="paginationConfig.total"
+                iconName="app-chat-record"
+                class="info mr-8"
+                style="font-size: 16px"
+              ></AppIcon>
+              <span v-if="paginationConfig.total" class="lighter">
+                {{ paginationConfig.total }} 条提问
+              </span>
+              <el-dropdown class="ml-8">
+                <AppIcon iconName="app-export" class="cursor" title="导出聊天记录"></AppIcon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="exportMarkdown">导出 Markdown</el-dropdown-item>
+                    <el-dropdown-item @click="exportHTML">导出 HTML</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </span>
+          </div>
+          <div class="right-height chat-width">
+            <AiChat
+              ref="AiChatRef"
+              v-model:applicationDetails="applicationDetail"
+              :available="applicationAvailable"
+              type="ai-chat"
+              :appId="applicationDetail?.id"
+              :record="currentRecordList"
+              :chatId="currentChatId"
+              @refresh="refresh"
+              @scroll="handleScroll"
+            >
+            </AiChat>
+          </div>
+        </div>
+      </div>
+      <div class="collapse">
+        <el-button @click="isCollapse = !isCollapse">
+          <el-icon> <component :is="isCollapse ? 'Fold' : 'Expand'" /></el-icon>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, computed } from 'vue'
+import { marked } from 'marked'
+import { saveAs } from 'file-saver'
+import { isAppIcon } from '@/utils/application'
+import useStore from '@/stores'
+import useResize from '@/layout/hooks/useResize'
+import { hexToRgba } from '@/utils/theme'
+
+
+useResize()
+
+const { user, log, common } = useStore()
+
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const isCollapse = ref(false)
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+const classObj = computed(() => {
+  return {
+    mobile: common.isMobile(),
+    hideLeft: !isCollapse.value,
+    openLeft: isCollapse.value
+  }
+})
+
+const newObj = {
+  id: 'new',
+  abstract: '新建对话'
+}
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+
+const chatLogData = ref<any[]>([])
+
+const paginationConfig = ref({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+const currentChatName = ref('新建对话')
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      currentChatName.value = '新建对话'
+      paginationConfig.value.current_page = 1
+      paginationConfig.value.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.value.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.value.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function newChat() {
+  if (!chatLogData.value.some((v) => v.id === 'new')) {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+    chatLogData.value.unshift(newObj)
+  } else {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+  }
+  currentChatId.value = 'new'
+  currentChatName.value = '新建对话'
+  if (common.isMobile()) {
+    isCollapse.value = false
+  }
+}
+
+function getChatLog(id: string, refresh?: boolean) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+    if (refresh) {
+      currentChatName.value = chatLogData.value?.[0].abstract
+    }
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig.value,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.value.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.value.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    currentChatName.value = item.abstract
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+  }
+  if (common.isMobile()) {
+    isCollapse.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id, true)
+  currentChatId.value = id
+}
+
+async function exportMarkdown(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.md`
+  const markdownContent: string = currentRecordList.value
+    .map((record: any) => `# ${record.problem_text}\n\n${record.answer_text}\n\n`)
+    .join('\n')
+
+  const blob: Blob = new Blob([markdownContent], { type: 'text/markdown;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+async function exportHTML(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.html`
+  const markdownContent: string = currentRecordList.value
+    .map((record: any) => `# ${record.problem_text}\n\n${record.answer_text}\n\n`)
+    .join('\n')
+  const htmlContent: any = marked(markdownContent)
+
+  const blob: Blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (
+    (applicationDetail.value.show_history || !user.isEnterprise()) &&
+    props.applicationAvailable
+  ) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+
+console.log(globalThis)
+
+onMounted(() => {
+  init()
+
+
+})
+</script>
+<style lang="scss">
+.chat-pc {
+  overflow: hidden;
+
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+
+  &__left {
+    padding-top: calc(var(--app-header-height) - 8px);
+    background: #ffffff;
+    width: 280px;
+
+    .add-button {
+      border: 1px solid var(--el-color-primary);
+    }
+
+    .left-height {
+      height: calc(100vh - var(--app-header-height) - 135px);
+    }
+  }
+
+  &__right {
+    width: calc(100% - 280px);
+    padding-top: calc(var(--app-header-height));
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+
+    .right-header {
+      background: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .right-height {
+      height: calc(100vh - var(--app-header-height) * 2 - 24px);
+    }
+  }
+
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+
+  .collapse {
+    display: none;
+  }
+}
+// 适配移动端
+.mobile {
+  .chat-pc {
+    &__right {
+      width: 100%;
+    }
+    &__left {
+      display: none;
+      width: 0;
+    }
+  }
+  .collapse {
+    display: block;
+    position: fixed;
+    bottom: 90px;
+    z-index: 99;
+  }
+  &.openLeft {
+    .chat-pc {
+      &__left {
+        display: block;
+        position: fixed;
+        width: 100%;
+        z-index: 99;
+        height: calc(100vh - var(--app-header-height) + 6px);
+      }
+    }
+    .collapse {
+      display: block;
+      position: absolute;
+      bottom: 90px;
+      right: 0;
+      z-index: 99;
+    }
+  }
+}
+
+.chat-width {
+  max-width: 80%;
+  margin: 0 auto;
+}
+@media only screen and (max-width: 1000px) {
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/dataset/DatasetSetting.vue b/src/views/dataset/DatasetSetting.vue
new file mode 100644
index 0000000..3ea844e
--- /dev/null
+++ b/src/views/dataset/DatasetSetting.vue
@@ -0,0 +1,195 @@
+<template>
+  <LayoutContainer header="设置">
+    <div class="dataset-setting main-calc-height">
+      <el-scrollbar>
+        <div class="p-24" v-loading="loading">
+          <h4 class="title-decoration-1 mb-16">基本信息</h4>
+          <BaseForm ref="BaseFormRef" :data="detail" />
+
+          <el-form
+            ref="webFormRef"
+            :rules="rules"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+          >
+            <el-form-item label="知识库类型" required>
+              <el-card shadow="never" class="mb-8" v-if="detail.type === '0'">
+                <div class="flex align-center">
+                  <AppAvatar class="mr-8 avatar-blue" shape="square" :size="32">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <div>
+                    <div>通用型</div>
+                    <el-text type="info">可以通过上传文件或手动录入方式构建知识库</el-text>
+                  </div>
+                </div>
+              </el-card>
+              <el-card shadow="never" class="mb-8" v-if="detail?.type === '1'">
+                <div class="flex align-center">
+                  <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
+                    <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <div>
+                    <div>Web 站点</div>
+                    <el-text type="info"> 通过网站链接同步方式构建知识库 </el-text>
+                  </div>
+                </div>
+              </el-card>
+            </el-form-item>
+            <el-form-item label="Web 根地址" prop="source_url" v-if="detail.type === '1'">
+              <el-input
+                v-model="form.source_url"
+                placeholder="请输入 Web 根地址"
+                @blur="form.source_url = form.source_url.trim()"
+              />
+            </el-form-item>
+            <el-form-item label="选择器" v-if="detail.type === '1'">
+              <el-input
+                v-model="form.selector"
+                placeholder="默认为 body，可输入 .classname/#idname/tagname"
+                @blur="form.selector = form.selector.trim()"
+              />
+            </el-form-item>
+          </el-form>
+          <div v-if="application_id_list.length > 0">
+            <h4 class="title-decoration-1 mb-16">关联应用</h4>
+            <el-row :gutter="12">
+              <el-col
+                :span="12"
+                v-for="(item, index) in application_list.filter((obj: any) =>
+                  application_id_list.some((v: any) => v === obj?.id)
+                )"
+                :key="index"
+                class="mb-16"
+              >
+                <el-card shadow="never">
+                  <div class="flex-between">
+                    <div class="flex align-center">
+                      <AppAvatar
+                        v-if="isAppIcon(item?.icon)"
+                        shape="square"
+                        :size="32"
+                        style="background: none"
+                        class="mr-12"
+                      >
+                        <img :src="item?.icon" alt="" />
+                      </AppAvatar>
+                      <AppAvatar
+                        v-else-if="item?.name"
+                        :name="item?.name"
+                        pinyinColor
+                        shape="square"
+                        :size="32"
+                        class="mr-12"
+                      />
+                      {{ item.name }}
+                    </div>
+                  </div>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div class="text-right">
+            <el-button @click="submit" type="primary"> 保存 </el-button>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import BaseForm from '@/views/dataset/component/BaseForm.vue'
+import datasetApi from '@/api/dataset'
+import type { ApplicationFormType } from '@/api/type/application'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { isAppIcon } from '@/utils/application'
+import useStore from '@/stores'
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const { dataset } = useStore()
+const webFormRef = ref()
+const BaseFormRef = ref()
+const loading = ref(false)
+const detail = ref<any>({})
+const application_list = ref<Array<ApplicationFormType>>([])
+const application_id_list = ref([])
+const cloneModelId = ref('')
+
+const form = ref<any>({
+  source_url: '',
+  selector: ''
+})
+
+const rules = reactive({
+  source_url: [{ required: true, message: '请输入 Web 根地址', trigger: 'blur' }]
+})
+
+async function submit() {
+  if (await BaseFormRef.value?.validate()) {
+    await webFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const obj =
+          detail.value.type === '1'
+            ? {
+                application_id_list: application_id_list.value,
+                meta: form.value,
+                ...BaseFormRef.value.form
+              }
+            : {
+                application_id_list: application_id_list.value,
+                ...BaseFormRef.value.form
+              }
+
+        if (cloneModelId.value !== BaseFormRef.value.form.embedding_mode_id) {
+          MsgConfirm(`提示`, `修改知识库向量模型后，需要对知识库向量化，是否继续保存？`, {
+            confirmButtonText: '向量化',
+          })
+            .then(() => {
+              datasetApi.putDataset(id, obj, loading).then((res) => {
+                datasetApi.putReEmbeddingDataset(id).then(() => {
+                  MsgSuccess('保存成功')
+                })
+              })
+            })
+            .catch(() => {})
+        } else {
+          datasetApi.putDataset(id, obj, loading).then((res) => {
+            MsgSuccess('保存成功')
+          })
+        }
+      }
+    })
+  }
+}
+
+function getDetail() {
+  dataset.asyncGetDatasetDetail(id, loading).then((res: any) => {
+    detail.value = res.data
+    cloneModelId.value = res.data?.embedding_mode_id
+    if (detail.value.type === '1') {
+      form.value = res.data.meta
+    }
+    application_id_list.value = res.data?.application_id_list
+    datasetApi.listUsableApplication(id, loading).then((ok) => {
+      application_list.value = ok.data
+    })
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped>
+.dataset-setting {
+  width: 70%;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/views/dataset/UploadDocumentDataset.vue b/src/views/dataset/UploadDocumentDataset.vue
new file mode 100644
index 0000000..498199f
--- /dev/null
+++ b/src/views/dataset/UploadDocumentDataset.vue
@@ -0,0 +1,199 @@
+<template>
+  <LayoutContainer header="上传文档" class="create-dataset">
+    <template #backButton>
+      <back-button @click="back"></back-button>
+    </template>
+    <div class="create-dataset__main flex" v-loading="loading">
+      <div class="create-dataset__component main-calc-height">
+        <el-scrollbar>
+          <template v-if="active === 0">
+            <div class="upload-document p-24">
+              <!-- 上传文档 -->
+              <UploadComponent ref="UploadComponentRef" />
+            </div>
+          </template>
+          <template v-else-if="active === 1">
+            <SetRules ref="SetRulesRef" />
+          </template>
+          <template v-else-if="active === 2">
+            <ResultSuccess :data="successInfo" />
+          </template>
+        </el-scrollbar>
+      </div>
+    </div>
+    <div class="create-dataset__footer text-right border-t" v-if="active !== 2">
+      <el-button @click="router.go(-1)" :disabled="SetRulesRef?.loading || loading">取消</el-button>
+      <el-button @click="prev" v-if="active === 1" :disabled="SetRulesRef?.loading || loading">上一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 0" :disabled="SetRulesRef?.loading || loading">
+        {{ documentsType === 'txt' ? '下一步' : '开始导入' }}
+      </el-button>
+      <el-button
+        @click="submit"
+        type="primary"
+        v-if="active === 1"
+        :disabled="SetRulesRef?.loading || loading"
+      >
+        开始导入
+      </el-button>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import SetRules from './component/SetRules.vue'
+import ResultSuccess from './component/ResultSuccess.vue'
+import UploadComponent from './component/UploadComponent.vue'
+import documentApi from '@/api/document'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+
+import useStore from '@/stores'
+const { dataset, document } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+const documentsType = computed(() => dataset.documentsType)
+
+const router = useRouter()
+const route = useRoute()
+const {
+  query: { id } // id为datasetID，有id的是上传文档
+} = route
+
+const SetRulesRef = ref()
+const UploadComponentRef = ref()
+
+const loading = ref(false)
+const disabled = ref(false)
+const active = ref(0)
+const successInfo = ref<any>(null)
+async function next() {
+  disabled.value = true
+  if (await UploadComponentRef.value.validate()) {
+    if (documentsType.value === 'QA') {
+      let fd = new FormData()
+      documentsFiles.value.forEach((item: any) => {
+        if (item?.raw) {
+          fd.append('file', item?.raw)
+        }
+      })
+      if (id) {
+        // QA文档上传
+        documentApi.postQADocument(id as string, fd, loading).then((res) => {
+          MsgSuccess('提交成功')
+          clearStore()
+          router.push({ path: `/dataset/${id}/document` })
+        })
+      }
+    } else if (documentsType.value === 'table') {
+      let fd = new FormData()
+      documentsFiles.value.forEach((item: any) => {
+        if (item?.raw) {
+          fd.append('file', item?.raw)
+        }
+      })
+      if (id) {
+        // table文档上传
+        documentApi.postTableDocument(id as string, fd, loading).then((res) => {
+          MsgSuccess('提交成功')
+          clearStore()
+          router.push({ path: `/dataset/${id}/document` })
+        })
+      }
+    } else {
+      if (active.value++ > 2) active.value = 0
+    }
+  } else {
+    disabled.value = false
+  }
+}
+const prev = () => {
+  active.value = 0
+}
+
+function clearStore() {
+  dataset.saveDocumentsFile([])
+  dataset.saveDocumentsType('')
+}
+function submit() {
+  loading.value = true
+  const documents = [] as any
+  SetRulesRef.value?.paragraphList.map((item: any) => {
+    if (!SetRulesRef.value?.checkedConnect) {
+      item.content.map((v: any) => {
+        delete v['problem_list']
+      })
+    }
+    documents.push({
+      name: item.name,
+      paragraphs: item.content
+    })
+  })
+
+  if (id) {
+    // 上传文档
+    document
+      .asyncPostDocument(id as string, documents)
+      .then(() => {
+        MsgSuccess('提交成功')
+        clearStore()
+        router.push({ path: `/dataset/${id}/document` })
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+}
+function back() {
+  if (documentsFiles.value?.length > 0) {
+    MsgConfirm(`提示`, `当前的更改尚未保存，确认退出吗?`, {
+      confirmButtonText: '确认',
+      type: 'warning'
+    })
+      .then(() => {
+        router.go(-1)
+        clearStore()
+      })
+      .catch(() => {})
+  } else {
+    router.go(-1)
+  }
+}
+onUnmounted(() => {
+  clearStore()
+})
+</script>
+<style lang="scss" scoped>
+.create-dataset {
+  &__steps {
+    min-width: 450px;
+    max-width: 800px;
+    width: 80%;
+    margin: 0 auto;
+    padding-right: 60px;
+
+    :deep(.el-step__line) {
+      left: 64% !important;
+      right: -33% !important;
+    }
+  }
+
+  &__component {
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  &__footer {
+    padding: 16px 24px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #ffffff;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .upload-document {
+    width: 70%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/src/views/dataset/component/BaseForm.vue b/src/views/dataset/component/BaseForm.vue
new file mode 100644
index 0000000..43a00b3
--- /dev/null
+++ b/src/views/dataset/component/BaseForm.vue
@@ -0,0 +1,191 @@
+<template>
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+    v-loading="loading"
+  >
+    <el-form-item label="知识库名称" prop="name">
+      <el-input
+        v-model="form.name"
+        placeholder="请输入知识库名称"
+        maxlength="64"
+        show-word-limit
+        @blur="form.name = form.name.trim()"
+      />
+    </el-form-item>
+    <el-form-item label="知识库描述" prop="desc">
+      <el-input
+        v-model="form.desc"
+        type="textarea"
+        placeholder="描述知识库的内容，详尽的描述将帮助AI能深入理解该知识库的内容，能更准确的检索到内容，提高该知识库的命中率。"
+        maxlength="256"
+        show-word-limit
+        :autosize="{ minRows: 3 }"
+        @blur="form.desc = form.desc.trim()"
+      />
+    </el-form-item>
+    <el-form-item label="向量模型" prop="embedding_mode_id">
+      <el-select
+        v-model="form.embedding_mode_id"
+        placeholder="请选择向量模型"
+        class="w-full"
+        popper-class="select-model"
+        :clearable="true"
+      >
+        <el-option-group
+          v-for="(value, label) in modelOptions"
+          :key="value"
+          :label="relatedObject(providerOptions, label, 'provider')?.name"
+        >
+          <el-option
+            v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            class="flex-between"
+          >
+            <div class="flex align-center">
+              <span
+                v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                class="model-icon mr-8" style="margin-top: 10px;"
+              ></span>
+              <span>{{ item.name }}</span>
+              <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                >公用</el-tag
+              >
+            </div>
+            <el-icon class="check-icon" v-if="item.id === form.embedding_mode_id"
+              ><Check
+            /></el-icon>
+          </el-option>
+          <!-- 不可用 -->
+          <el-option
+            v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            class="flex-between"
+            disabled
+          >
+            <div class="flex align-center">
+              <span
+                v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                class="model-icon mr-8 mt-8"
+              ></span>
+              <span>{{ item.name }}</span>
+              <span class="danger">{{
+                $t('views.application.applicationForm.form.aiModel.unavailable')
+              }}</span>
+            </div>
+            <el-icon class="check-icon" v-if="item.id === form.embedding_mode_id"
+              ><Check
+            /></el-icon>
+          </el-option>
+        </el-option-group>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
+import { groupBy } from 'lodash'
+import useStore from '@/stores'
+import type { datasetData } from '@/api/type/dataset'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+const { model } = useStore()
+const form = ref<datasetData>({
+  name: '',
+  desc: '',
+  embedding_mode_id: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
+  desc: [{ required: true, message: '请输入知识库描述', trigger: 'blur' }],
+  embedding_mode_id: [{ required: true, message: '请输入Embedding模型', trigger: 'change' }]
+})
+
+const FormRef = ref()
+const loading = ref(false)
+const modelOptions = ref<any>([])
+const providerOptions = ref<Array<Provider>>([])
+
+watch(
+  () => props.data,
+  (value) => {
+    if (value && JSON.stringify(value) !== '{}') {
+      form.value.name = value.name
+      form.value.desc = value.desc
+      form.value.embedding_mode_id = value.embedding_mode_id
+    }
+  },
+  {
+    immediate: true
+  }
+)
+/*
+  表单校验
+*/
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+function getModel() {
+  loading.value = true
+  model
+    .asyncGetModel({ model_type: 'EMBEDDING' })
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res: any) => {
+      providerOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getProvider()
+  getModel()
+})
+onUnmounted(() => {
+  form.value = {
+    name: '',
+    desc: '',
+    embedding_mode_id: ''
+  }
+  FormRef.value?.clearValidate()
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/dataset/component/CreateDatasetDialog.vue b/src/views/dataset/component/CreateDatasetDialog.vue
new file mode 100644
index 0000000..091e9f7
--- /dev/null
+++ b/src/views/dataset/component/CreateDatasetDialog.vue
@@ -0,0 +1,175 @@
+<template>
+  <el-dialog
+    title="创建知识库"
+    v-model="dialogVisible"
+    width="680"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <!-- 基本信息 -->
+    <BaseForm ref="BaseFormRef" v-if="dialogVisible" />
+    <el-form
+      ref="DatasetFormRef"
+      :rules="rules"
+      :model="datasetForm"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="知识库类型" required>
+        <el-radio-group v-model="datasetForm.type" class="card__radio" @change="radioChange">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="datasetForm.type === '0' ? 'active' : ''"
+                @click="datasetForm.type = '0'"
+              >
+                <div class="flex-between">
+                  <div class="flex align-center">
+                    <AppAvatar class="mr-8 avatar-blue" shape="square" :size="32">
+                      <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                    </AppAvatar>
+                    <div>
+                      <p><el-text>通用型</el-text></p>
+                      <el-text type="info">上传本地文件或手动录入</el-text>
+                    </div>
+                  </div>
+                  <el-radio value="0" size="large" style="width: 16px"></el-radio>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="datasetForm.type === '1' ? 'active' : ''"
+                @click="datasetForm.type = '1'"
+              >
+                <div class="flex-between">
+                  <div class="flex align-center">
+                    <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
+                      <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                    </AppAvatar>
+                    <div>
+                      <p><el-text>Web 站点</el-text></p>
+                      <el-text type="info">同步Web网站文本数据</el-text>
+                    </div>
+                  </div>
+                  <el-radio value="1" size="large" style="width: 16px"></el-radio>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="Web 根地址" prop="source_url" v-if="datasetForm.type === '1'">
+        <el-input
+          v-model="datasetForm.source_url"
+          placeholder="请输入 Web 根地址"
+          @blur="datasetForm.source_url = datasetForm.source_url.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="选择器" v-if="datasetForm.type === '1'">
+        <el-input
+          v-model="datasetForm.selector"
+          placeholder="默认为 body，可输入 .classname/#idname/tagname"
+          @blur="datasetForm.selector = datasetForm.selector.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import BaseForm from './BaseForm.vue'
+import datasetApi from '@/api/dataset'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import useStore from '@/stores'
+import { ValidType, ValidCount } from '@/enums/common'
+
+const emit = defineEmits(['refresh'])
+
+const { common, user } = useStore()
+const router = useRouter()
+const BaseFormRef = ref()
+const DatasetFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const datasetForm = ref<any>({
+  type: '0',
+  source_url: '',
+  selector: ''
+})
+
+const rules = reactive({
+  source_url: [{ required: true, message: '请输入 Web 根地址', trigger: 'blur' }]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    datasetForm.value = {
+      type: '0',
+      source_url: '',
+      selector: ''
+    }
+    DatasetFormRef.value?.clearValidate()
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submitHandle = async () => {
+  if (await BaseFormRef.value?.validate()) {
+    await DatasetFormRef.value.validate((valid: any) => {
+      if (valid) {
+        if (datasetForm.value.type === '0') {
+          const obj = {
+            ...BaseFormRef.value.form,
+            type: datasetForm.value.type
+          }
+          datasetApi.postDataset(obj, loading).then((res) => {
+            MsgSuccess('创建成功')
+            router.push({ path: `/dataset/${res.data.id}/document` })
+            emit('refresh')
+          })
+        } else {
+          const obj = { ...BaseFormRef.value.form, ...datasetForm.value }
+          datasetApi.postWebDataset(obj, loading).then((res) => {
+            MsgSuccess('创建成功')
+            router.push({ path: `/dataset/${res.data.id}/document` })
+            emit('refresh')
+          })
+        }
+      } else {
+        return false
+      }
+    })
+  } else {
+    return false
+  }
+}
+function radioChange() {
+  datasetForm.value.source_url = ''
+  datasetForm.value.selector = ''
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/dataset/component/EditParagraphDialog.vue b/src/views/dataset/component/EditParagraphDialog.vue
new file mode 100644
index 0000000..3589b6d
--- /dev/null
+++ b/src/views/dataset/component/EditParagraphDialog.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    title="编辑分段"
+    v-model="dialogVisible"
+    width="80%"
+    destroy-on-close
+    class="paragraph-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-if="isConnect">
+      <el-col :span="18" class="p-24">
+        <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+      </el-col>
+      <el-col :span="6" class="border-l" style="width: 300px">
+        <p class="bold title p-24" style="padding-bottom: 0">
+          <span class="flex align-center">
+            <span>关联问题</span>
+            <el-divider direction="vertical" class="mr-4" />
+            <el-button text @click="addProblem">
+              <el-icon><Plus /></el-icon>
+            </el-button>
+          </span>
+        </p>
+        <el-scrollbar height="500px">
+          <div class="p-24" style="padding-top: 16px">
+            <el-input
+              v-if="isAddProblem"
+              v-model="problemValue"
+              placeholder="请选择问题"
+              @change="addProblemHandle"
+              @blur="isAddProblem = false"
+              ref="inputRef"
+            />
+
+            <template v-for="(item, index) in detail.problem_list" :key="index">
+              <TagEllipsis
+                @close="delProblemHandle(item, index)"
+                class="question-tag"
+                type="info"
+                effect="plain"
+                closable
+              >
+                <auto-tooltip :content="item.content">
+                  {{ item.content }}
+                </auto-tooltip>
+              </TagEllipsis>
+            </template>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+    <div v-else class="p-24">
+      <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { cloneDeep } from 'lodash'
+import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+
+const props = defineProps({
+  isConnect: Boolean
+})
+
+const emit = defineEmits(['updateContent'])
+
+const dialogVisible = ref<boolean>(false)
+
+const detail = ref<any>({})
+
+const paragraphFormRef = ref()
+const inputRef = ref()
+
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any) => {
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+function delProblemHandle(item: any, index: number) {
+  detail.value.problem_list.splice(index, 1)
+}
+function addProblemHandle() {
+  if (problemValue.value.trim()) {
+    if (
+      !detail.value?.problem_list.some((item: any) => item.content === problemValue.value.trim())
+    ) {
+      detail.value?.problem_list?.push({
+        content: problemValue.value.trim()
+      })
+    }
+
+    problemValue.value = ''
+    isAddProblem.value = false
+  }
+}
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    emit('updateContent', {
+      problem_list: detail.value.problem_list,
+      ...paragraphFormRef.value?.form
+    })
+    dialogVisible.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/dataset/component/ParagraphList.vue b/src/views/dataset/component/ParagraphList.vue
new file mode 100644
index 0000000..022bd8e
--- /dev/null
+++ b/src/views/dataset/component/ParagraphList.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <InfiniteScroll
+      :size="paragraph_list.length"
+      :total="modelValue.length"
+      :page_size="page_size"
+      v-model:current_page="current_page"
+      @load="next()"
+      :loading="loading"
+    >
+      <el-card
+        v-for="(child, cIndex) in paragraph_list"
+        :key="cIndex"
+        shadow="never"
+        class="card-never mb-16"
+      >
+        <div class="flex-between">
+          <span>{{ child.title || '-' }}</span>
+          <div>
+            <!-- 编辑分段按钮 -->
+            <el-button link @click="editHandle(child, cIndex)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+            <!-- 删除分段按钮  -->
+            <el-button link @click="deleteHandle(child, cIndex)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <div class="lighter mt-12">
+          {{ child.content }}
+        </div>
+        <div class="lighter mt-12">
+          <el-text type="info"> {{ child.content.length }} 个字符 </el-text>
+        </div>
+      </el-card>
+    </InfiniteScroll>
+
+    <EditParagraphDialog
+      ref="EditParagraphDialogRef"
+      @updateContent="updateContent"
+      :isConnect="isConnect"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { cloneDeep } from 'lodash'
+import { ref, computed } from 'vue'
+import EditParagraphDialog from './EditParagraphDialog.vue'
+import { MsgConfirm } from '@/utils/message'
+const page_size = ref<number>(30)
+const current_page = ref<number>(1)
+const currentCIndex = ref<number>(0)
+const EditParagraphDialogRef = ref()
+const emit = defineEmits(['update:modelValue'])
+const loading = ref<boolean>(false)
+const editHandle = (item: any, cIndex: number) => {
+  currentCIndex.value = cIndex
+  EditParagraphDialogRef.value.open(item)
+}
+
+const props = defineProps<{ modelValue: Array<any>; isConnect: boolean }>()
+
+const paragraph_list = computed(() => {
+  return props.modelValue.slice(0, page_size.value * (current_page.value - 1) + page_size.value)
+})
+
+const next = () => {
+  loading.value = true
+  current_page.value += 1
+  loading.value = false
+}
+
+const updateContent = (data: any) => {
+  const new_value = [...props.modelValue]
+  new_value[currentCIndex.value] = cloneDeep(data)
+  emit('update:modelValue', new_value)
+}
+
+const deleteHandle = (item: any, cIndex: number) => {
+  MsgConfirm(`是否删除分段：${item.title || '-'} ?`, `删除后将不会存入知识库，对本地文档无影响。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      const new_value = [...props.modelValue]
+      new_value.splice(cIndex, 1)
+      emit('update:modelValue', new_value)
+    })
+    .catch(() => {})
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/dataset/component/ParagraphPreview.vue b/src/views/dataset/component/ParagraphPreview.vue
new file mode 100644
index 0000000..3ad15ce
--- /dev/null
+++ b/src/views/dataset/component/ParagraphPreview.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-tabs v-model="activeName" class="paragraph-tabs">
+    <template v-for="(item, index) in data" :key="index">
+      <el-tab-pane :label="item.name" :name="index">
+        <template #label>
+          <div class="flex-center">
+            <img :src="getImgUrl(item && item?.name)" alt="" height="16" />
+            <span class="ml-4">{{ item?.name }}</span>
+          </div>
+        </template>
+        <div class="mb-16">
+          <el-text type="info">{{ item.content.length }} 段落</el-text>
+        </div>
+        <div class="paragraph-list" v-if="activeName == index">
+          <el-scrollbar>
+            <ParagraphList v-model="item.content" :isConnect="isConnect"> </ParagraphList>
+          </el-scrollbar>
+        </div>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getImgUrl } from '@/utils/utils'
+import ParagraphList from './ParagraphList.vue'
+
+defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  },
+  isConnect: Boolean
+})
+
+const activeName = ref(0)
+</script>
+<style scoped lang="scss">
+.paragraph-tabs {
+  :deep(.el-tabs__item) {
+    background: var(--app-text-color-light-1);
+    margin: 4px;
+    border-radius: 4px;
+    padding: 5px 10px 5px 8px !important;
+    height: auto;
+    &:nth-child(2) {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &.is-active {
+      border: 1px solid var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+      color: var(--el-text-color-primary);
+    }
+  }
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+  :deep(.el-tabs__active-bar) {
+    display: none;
+  }
+}
+.paragraph-list {
+  height: calc(var(--create-dataset-height) - 101px);
+}
+</style>
diff --git a/src/views/dataset/component/ResultSuccess.vue b/src/views/dataset/component/ResultSuccess.vue
new file mode 100644
index 0000000..d8ed40c
--- /dev/null
+++ b/src/views/dataset/component/ResultSuccess.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-scrollbar>
+    <el-result icon="success" title="🎉 知识库创建成功 🎉">
+      <template #sub-title>
+        <div class="mt-8">
+          <span class="bold">{{ data?.document_list.length || 0 }}</span>
+          <el-text type="info" class="ml-4">文档</el-text>
+          <el-divider direction="vertical" />
+          <span class="bold">{{ paragraph_count || 0 }}</span>
+          <el-text type="info" class="ml-4">分段</el-text>
+          <el-divider direction="vertical" />
+          <span class="bold">{{ numberFormat(char_length) || 0 }}</span>
+          <el-text type="info" class="ml-4">字符</el-text>
+        </div>
+      </template>
+      <template #extra>
+        <el-button @click="router.push({ path: `/dataset` })">返回知识库列表</el-button>
+        <el-button type="primary" @click="router.push({ path: `/dataset/${data?.id}/document` })"
+          >前往文档</el-button
+        >
+      </template>
+    </el-result>
+    <div class="result-success">
+      <p class="bolder">文档列表</p>
+      <el-card
+        shadow="never"
+        class="file-List-card mt-8"
+        v-for="(item, index) in data?.document_list"
+        :key="index"
+      >
+        <div class="flex-between">
+          <div class="flex">
+            <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
+            <div class="ml-8">
+              <p>{{ item && item?.name }}</p>
+              <el-text type="info" size="small">{{ filesize(item && item?.char_length) }}</el-text>
+            </div>
+          </div>
+          <div>
+            <el-text type="info" class="mr-16">{{ item && item?.paragraph_count }} 个分段</el-text>
+            <el-text v-if="item.status === '1'">
+              <el-icon class="success"><SuccessFilled /></el-icon>
+            </el-text>
+            <el-text v-else-if="item.status === '2'">
+              <el-icon class="danger"><CircleCloseFilled /></el-icon>
+            </el-text>
+            <el-text v-else-if="item.status === '0'">
+              <el-icon class="is-loading primary"><Loading /></el-icon> 导入中...
+            </el-text>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { numberFormat } from '@/utils/utils'
+import { filesize, getImgUrl } from '@/utils/utils'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+const router = useRouter()
+const paragraph_count = computed(() =>
+  props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.paragraph_count), 0)
+)
+
+const char_length = computed(
+  () =>
+    props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.char_length), 0) || 0
+)
+</script>
+<style scoped lang="scss">
+.result-success {
+  width: 70%;
+  margin: 0 auto;
+  margin-bottom: 30px;
+}
+</style>
diff --git a/src/views/dataset/component/SetRules.vue b/src/views/dataset/component/SetRules.vue
new file mode 100644
index 0000000..b523aa7
--- /dev/null
+++ b/src/views/dataset/component/SetRules.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="set-rules">
+    <el-row>
+      <el-col :span="10" class="p-24">
+        <h4 class="title-decoration-1 mb-16">设置分段规则</h4>
+        <div class="set-rules__right">
+          <el-scrollbar>
+            <div class="left-height" @click.stop>
+              <el-radio-group v-model="radio" class="set-rules__radio">
+                <el-card shadow="never" class="mb-16" :class="radio === '1' ? 'active' : ''">
+                  <el-radio value="1" size="large">
+                    <p class="mb-4">智能分段（推荐)</p>
+                    <el-text type="info">不了解如何设置分段规则推荐使用智能分段</el-text>
+                  </el-radio>
+                </el-card>
+                <el-card shadow="never" class="mb-16" :class="radio === '2' ? 'active' : ''">
+                  <el-radio value="2" size="large">
+                    <p class="mb-4">高级分段</p>
+                    <el-text type="info"
+                      >用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
+                    </el-text>
+                  </el-radio>
+
+                  <el-card
+                    v-if="radio === '2'"
+                    shadow="never"
+                    class="card-never mt-16"
+                    style="margin-left: 30px"
+                  >
+                    <div class="set-rules__form">
+                      <div class="form-item mb-16">
+                        <div class="title flex align-center mb-8">
+                          <span style="margin-right: 4px">分段标识</span>
+                          <el-tooltip
+                            effect="dark"
+                            content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。"
+                            placement="right"
+                          >
+                            <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                          </el-tooltip>
+                        </div>
+                        <div @click.stop>
+                          <el-select
+                            v-model="form.patterns"
+                            multiple
+                            allow-create
+                            default-first-option
+                            filterable
+                            placeholder="请选择"
+                          >
+                            <el-option
+                              v-for="(item, index) in splitPatternList"
+                              :key="index"
+                              :label="item.key"
+                              :value="item.value"
+                            >
+                            </el-option>
+                          </el-select>
+                        </div>
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">分段长度</div>
+                        <el-slider
+                          v-model="form.limit"
+                          show-input
+                          :show-input-controls="false"
+                          :min="50"
+                          :max="100000"
+                        />
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">自动清洗</div>
+                        <el-switch size="small" v-model="form.with_filter" />
+                        <div style="margin-top: 4px">
+                          <el-text type="info">去掉重复多余符号空格、空行、制表符</el-text>
+                        </div>
+                      </div>
+                    </div>
+                  </el-card>
+                </el-card>
+              </el-radio-group>
+            </div>
+          </el-scrollbar>
+          <div>
+            <el-checkbox v-model="checkedConnect" @change="changeHandle" style="white-space: normal;">
+              导入时添加分段标题为关联问题（适用于标题为问题的问答对）
+            </el-checkbox>
+          </div>
+          <div class="text-right mt-8">
+            <el-button @click="splitDocument">生成预览</el-button>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :span="14" class="p-24 border-l">
+        <div v-loading="loading">
+          <h4 class="title-decoration-1 mb-8">分段预览</h4>
+
+          <ParagraphPreview v-model:data="paragraphList" :isConnect="checkedConnect" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, reactive, watch } from 'vue'
+import ParagraphPreview from '@/views/dataset/component/ParagraphPreview.vue'
+import documentApi from '@/api/document'
+import useStore from '@/stores'
+import type { KeyValue } from '@/api/type/common'
+const { dataset } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+const splitPatternList = ref<Array<KeyValue<string, string>>>([])
+
+const radio = ref('1')
+const loading = ref(false)
+const paragraphList = ref<any[]>([])
+const patternLoading = ref<boolean>(false)
+const checkedConnect = ref<boolean>(false)
+
+const firstChecked = ref(true)
+
+const form = reactive<{
+  patterns: Array<string>
+  limit: number
+  with_filter: boolean
+  [propName: string]: any
+}>({
+  patterns: [],
+  limit: 500,
+  with_filter: true
+})
+
+function changeHandle(val: boolean) {
+  if (val && firstChecked.value) {
+    const list = paragraphList.value
+    list.map((item: any) => {
+      item.content.map((v: any) => {
+        v['problem_list'] = v.title.trim()
+          ? [
+              {
+                content: v.title.trim()
+              }
+            ]
+          : []
+      })
+    })
+    paragraphList.value = list
+    firstChecked.value = false
+  }
+}
+function splitDocument() {
+  loading.value = true
+  let fd = new FormData()
+  documentsFiles.value.forEach((item) => {
+    if (item?.raw) {
+      fd.append('file', item?.raw)
+    }
+  })
+  if (radio.value === '2') {
+    Object.keys(form).forEach((key) => {
+      if (key == 'patterns') {
+        form.patterns.forEach((item) => fd.append('patterns', item))
+      } else {
+        fd.append(key, form[key])
+      }
+    })
+  }
+  documentApi
+    .postSplitDocument(fd)
+    .then((res: any) => {
+      const list = res.data
+      if (checkedConnect.value) {
+        list.map((item: any) => {
+          item.content.map((v: any) => {
+            v['problem_list'] = v.title.trim()
+              ? [
+                  {
+                    content: v.title.trim()
+                  }
+                ]
+              : []
+          })
+        })
+      }
+      paragraphList.value = list
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+const initSplitPatternList = () => {
+  documentApi.listSplitPattern(patternLoading).then((ok) => {
+    splitPatternList.value = ok.data
+  })
+}
+
+watch(radio, () => {
+  if (radio.value === '2') {
+    initSplitPatternList()
+  }
+})
+
+onMounted(() => {
+  splitDocument()
+})
+
+defineExpose({
+  paragraphList,
+  checkedConnect,
+  loading
+})
+</script>
+<style scoped lang="scss">
+.set-rules {
+  width: 100%;
+
+  .left-height {
+    max-height: calc(var(--create-dataset-height) - 110px);
+    overflow-x: hidden;
+  }
+
+  &__radio {
+    width: 100%;
+    display: block;
+
+    .el-radio {
+      white-space: break-spaces;
+      width: 100%;
+      height: 100%;
+      line-height: 22px;
+      color: var(--app-text-color);
+    }
+
+    :deep(.el-radio__label) {
+      padding-left: 30px;
+      width: 100%;
+    }
+    :deep(.el-radio__input) {
+      position: absolute;
+      top: 16px;
+    }
+    .active {
+      border: 1px solid var(--el-color-primary);
+    }
+  }
+
+  &__form {
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataset/component/SyncWebDialog.vue b/src/views/dataset/component/SyncWebDialog.vue
new file mode 100644
index 0000000..60dda86
--- /dev/null
+++ b/src/views/dataset/component/SyncWebDialog.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-dialog
+    title="同步知识库"
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <p class="mb-8">同步方式</p>
+    <el-radio-group v-model="method" class="card__radio">
+      <el-card shadow="never" class="mb-16" :class="method === 'replace' ? 'active' : ''">
+        <el-radio value="replace" size="large">
+          <p class="mb-4">替换同步</p>
+          <el-text type="info">重新获取 Web 站点文档，覆盖替换本地知识库中的文档</el-text>
+        </el-radio>
+      </el-card>
+
+      <el-card shadow="never" class="mb-16" :class="method === 'complete' ? 'active' : ''">
+        <el-radio value="complete" size="large">
+          <p class="mb-4">整体同步</p>
+          <el-text type="info">先删除本地知识库所有文档，重新获取 Web 站点文档</el-text>
+        </el-radio>
+      </el-card>
+    </el-radio-group>
+    <p class="danger">注意：所有同步都会删除已有数据重新获取新数据，请谨慎操作。</p>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit" :loading="loading"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import useStore from '@/stores'
+const { dataset } = useStore()
+
+const emit = defineEmits(['refresh'])
+const loading = ref<boolean>(false)
+const method = ref('replace')
+const datasetId = ref('')
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    method.value = 'replace'
+  }
+})
+
+const open = (id: string) => {
+  datasetId.value = id
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  dataset.asyncSyncDataset(datasetId.value, method.value, loading).then((res: any) => {
+    emit('refresh', res.data)
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.select-provider {
+  font-size: 16px;
+  color: rgba(100, 106, 115, 1);
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+.active-breadcrumb {
+  font-size: 16px;
+  color: rgba(31, 35, 41, 1);
+  font-weight: 500;
+  line-height: 24px;
+}
+</style>
diff --git a/src/views/dataset/component/UploadComponent.vue b/src/views/dataset/component/UploadComponent.vue
new file mode 100644
index 0000000..bf8b83c
--- /dev/null
+++ b/src/views/dataset/component/UploadComponent.vue
@@ -0,0 +1,296 @@
+<template>
+  <h4 class="title-decoration-1 mb-8">上传文档</h4>
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
+    <div class="mt-16 mb-16">
+      <el-radio-group v-model="form.fileType" @change="radioChange" class="app-radio-button-group">
+        <el-radio-button value="txt">文本文件</el-radio-button>
+        <el-radio-button value="table">表格</el-radio-button>
+        <el-radio-button value="QA">QA 问答对</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <el-form-item prop="fileList" v-if="form.fileType === 'QA'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>3、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full mb-4"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".xlsx, .xls, .csv,.zip"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            拖拽文件至此上传或
+            <em class="hover" @click.prevent="handlePreview(false)"> 选择文件 </em>
+            <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
+          </p>
+          <div class="upload__decoration">
+            <p>支持格式：XLS、XLSX、CSV、ZIP</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item prop="fileList" v-else-if="form.fileType === 'table'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTableTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTableTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、第一行必须是列标题，且列标题必须是有意义的术语，表中每条记录将作为一个分段</p>
+          <p>3、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>4、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full mb-4"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".xlsx, .xls, .csv"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            拖拽文件至此上传或
+            <em class="hover" @click.prevent="handlePreview(false)"> 选择文件 </em>
+            <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
+          </p>
+          <div class="upload__decoration">
+            <p>支持格式：XLS、XLSX、CSV、ZIP</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item prop="fileList" v-else>
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>1、文件上传前，建议规范文件的分段标识</p>
+          <p>2、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".txt, .md, .log, .docx, .pdf, .html,.zip,.xlsx,.xls,.csv"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            拖拽文件至此上传或
+            <em class="hover" @click.prevent="handlePreview(false)"> 选择文件 </em>
+            <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
+          </p>
+          <div class="upload__decoration">
+            <p>支持格式：TXT、Markdown、PDF、DOCX、HTML、XLS、XLSX、CSV、ZIP</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+  <el-row :gutter="8" v-if="form.fileList?.length">
+    <template v-for="(item, index) in form.fileList" :key="index">
+      <el-col :span="12" class="mb-8">
+        <el-card shadow="never" class="file-List-card">
+          <div class="flex-between">
+            <div class="flex">
+              <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
+              <div class="ml-8">
+                <p>{{ item && item?.name }}</p>
+                <el-text type="info" size="small">{{
+                  filesize(item && item?.size) || '0K'
+                }}</el-text>
+              </div>
+            </div>
+            <el-button text @click="deleteFile(index)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </template>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onUnmounted, onMounted, computed, watch, nextTick } from 'vue'
+import type { UploadFiles } from 'element-plus'
+import { filesize, getImgUrl, isRightType } from '@/utils/utils'
+import { MsgError } from '@/utils/message'
+import documentApi from '@/api/document'
+import useStore from '@/stores'
+const { dataset } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+const documentsType = computed(() => dataset.documentsType)
+const form = ref({
+  fileType: 'txt',
+  fileList: [] as any
+})
+
+const rules = reactive({
+  fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
+})
+const FormRef = ref()
+
+watch(form.value, (value) => {
+  dataset.saveDocumentsType(value.fileType)
+  dataset.saveDocumentsFile(value.fileList)
+})
+
+function downloadTemplate(type: string) {
+  documentApi.exportQATemplate(`${type}模版.${type == 'csv' ? type : 'xlsx'}`, type)
+}
+
+function downloadTableTemplate(type: string) {
+  documentApi.exportTableTemplate(`${type}模版.${type == 'csv' ? type : 'xlsx'}`, type)
+}
+
+function radioChange() {
+  form.value.fileList = []
+}
+
+function deleteFile(index: number) {
+  form.value.fileList.splice(index, 1)
+}
+
+// 上传on-change事件
+const fileHandleChange = (file: any, fileList: UploadFiles) => {
+  //1、判断文件大小是否合法，文件限制不能大于100M
+  const isLimit = file?.size / 1024 / 1024 < 100
+  if (!isLimit) {
+    MsgError('文件大小超过 100MB')
+    fileList.splice(-1, 1) //移除当前超出大小的文件
+    return false
+  }
+  if (!isRightType(file?.name, form.value.fileType)) {
+    MsgError('文件格式不支持')
+    fileList.splice(-1, 1)
+    return false
+  }
+  if (file?.size === 0) {
+    MsgError('文件不能为空')
+    fileList.splice(-1, 1)
+    return false
+  }
+}
+
+const onExceed = () => {
+  MsgError('每次最多上传50个文件')
+}
+
+const handlePreview = (bool: boolean) => {
+  let inputDom: any = null
+  nextTick(() => {
+    if (document.querySelector('.el-upload__input') != null) {
+      inputDom = document.querySelector('.el-upload__input')
+      inputDom.webkitdirectory = bool
+    }
+  })
+}
+
+/*
+  表单校验
+*/
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+onMounted(() => {
+  if (documentsType.value) {
+    form.value.fileType = documentsType.value
+  }
+  if (documentsFiles.value) {
+    form.value.fileList = documentsFiles.value
+  }
+})
+onUnmounted(() => {
+  form.value = {
+    fileType: 'txt',
+    fileList: []
+  }
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss">
+.upload__decoration {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+.el-upload__text {
+  .hover:hover {
+    color: var(--el-color-primary-light-5);
+  }
+}
+.update-info {
+  background: #d6e2ff;
+  line-height: 25px;
+}
+</style>
diff --git a/src/views/dataset/index.vue b/src/views/dataset/index.vue
new file mode 100644
index 0000000..7214b53
--- /dev/null
+++ b/src/views/dataset/index.vue
@@ -0,0 +1,316 @@
+<template>
+  <div class="dataset-list-container p-24" style="padding-top: 16px">
+    <div class="flex-between mb-16">
+      <h4>知识库</h4>
+      <div class="flex-between">
+        <el-select
+          v-model="selectUserId"
+          class="mr-12"
+          @change="searchHandle"
+          style="max-width: 240px; width: 150px"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          :placeholder="$t('views.application.applicationList.searchBar.placeholder')"
+          prefix-icon="Search"
+          class="w-240"
+          style="max-width: 240px"
+          clearable
+        />
+      </div>
+    </div>
+    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
+      <InfiniteScroll
+        :size="datasetList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
+            <CardAdd title="创建知识库" @click="openCreateDialog" />
+          </el-col>
+          <template v-for="(item, index) in datasetList" :key="index">
+            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
+              <CardBox
+                :title="item.name"
+                :description="item.desc"
+                class="cursor"
+                @click="router.push({ path: `/dataset/${item.id}/document` })"
+              >
+                <template #icon>
+                  <AppAvatar
+                    v-if="item.type === '1'"
+                    class="mr-8 avatar-purple"
+                    shape="square"
+                    :size="32"
+                  >
+                    <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="32">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                </template>
+                <template #subTitle>
+                  <el-text class="color-secondary" size="small">
+                    <auto-tooltip :content="item.username">
+                      创建者: {{ item.username }}
+                    </auto-tooltip>
+                  </el-text>
+                </template>
+                <div class="delete-button">
+                  <el-tag class="blue-tag" v-if="item.type === '0'" style="height: 22px"
+                    >通用型</el-tag
+                  >
+                  <el-tag
+                    class="purple-tag"
+                    v-else-if="item.type === '1'"
+                    type="warning"
+                    style="height: 22px"
+                    >Web 站点</el-tag
+                  >
+                </div>
+
+                <template #footer>
+                  <div class="footer-content flex-between">
+                    <div>
+                      <span class="bold">{{ item?.document_count || 0 }}</span>
+                      文档<el-divider direction="vertical" />
+                      <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                      字符<el-divider direction="vertical" />
+                      <span class="bold">{{ item?.application_mapping_count || 0 }}</span>
+                      关联应用
+                    </div>
+                    <div @click.stop>
+                      <el-dropdown trigger="click">
+                        <el-button text @click.stop>
+                          <el-icon><MoreFilled /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item
+                              icon="Refresh"
+                              @click.stop="syncDataset(item)"
+                              v-if="item.type === '1'"
+                              >同步</el-dropdown-item
+                            >
+                            <el-dropdown-item @click="reEmbeddingDataset(item)">
+                              <AppIcon
+                                iconName="app-document-refresh"
+                                style="font-size: 16px"
+                              ></AppIcon>
+                              向量化</el-dropdown-item
+                            >
+                            <el-dropdown-item
+                              icon="Setting"
+                              @click.stop="router.push({ path: `/dataset/${item.id}/setting` })"
+                            >
+                              设置</el-dropdown-item
+                            >
+                            <el-dropdown-item @click.stop="export_dataset(item)">
+                              <AppIcon iconName="app-export"></AppIcon>导出Excel</el-dropdown-item
+                            >
+                            <el-dropdown-item @click.stop="export_zip_dataset(item)">
+                              <AppIcon iconName="app-export"></AppIcon>导出ZIP</el-dropdown-item
+                            >
+                            <el-dropdown-item icon="Delete" @click.stop="deleteDataset(item)"
+                              >删除</el-dropdown-item
+                            >
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
+                  </div>
+                </template>
+              </CardBox>
+            </el-col>
+          </template>
+        </el-row>
+      </InfiniteScroll>
+    </div>
+    <SyncWebDialog ref="SyncWebDialogRef" @refresh="refresh" />
+    <CreateDatasetDialog ref="CreateDatasetDialogRef" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from 'vue'
+import SyncWebDialog from '@/views/dataset/component/SyncWebDialog.vue'
+import CreateDatasetDialog from './component/CreateDatasetDialog.vue'
+import datasetApi from '@/api/dataset'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { useRouter } from 'vue-router'
+import { numberFormat } from '@/utils/utils'
+import { ValidType, ValidCount } from '@/enums/common'
+import useStore from '@/stores'
+import applicationApi from '@/api/application'
+
+const { user, common } = useStore()
+const router = useRouter()
+
+const CreateDatasetDialogRef = ref()
+const SyncWebDialogRef = ref()
+const loading = ref(false)
+const datasetList = ref<any[]>([])
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+
+const searchValue = ref('')
+
+interface UserOption {
+  label: string
+  value: string
+}
+
+const userOptions = ref<UserOption[]>([])
+
+const selectUserId = ref('all')
+
+function openCreateDialog() {
+  if (user.isEnterprise()) {
+    CreateDatasetDialogRef.value.open()
+  } else {
+    MsgConfirm(`提示`, '社区版最多支持 50 个知识库，如需拥有更多知识库，请升级为专业版。', {
+      cancelButtonText: '确定',
+      confirmButtonText: '购买专业版'
+    })
+      .then(() => {
+        window.open('https://maxkb.cn/pricing.html', '_blank')
+      })
+      .catch(() => {
+        common
+          .asyncGetValid(ValidType.Dataset, ValidCount.Dataset, loading)
+          .then(async (res: any) => {
+            if (res?.data) {
+              CreateDatasetDialogRef.value.open()
+            }
+          })
+      })
+  }
+}
+
+function refresh() {
+  MsgSuccess('同步任务发送成功')
+}
+
+function reEmbeddingDataset(row: any) {
+  datasetApi.putReEmbeddingDataset(row.id).then(() => {
+    MsgSuccess('提交成功')
+  })
+}
+
+function syncDataset(row: any) {
+  SyncWebDialogRef.value.open(row.id)
+}
+
+function searchHandle() {
+  if (user.userInfo) {
+    localStorage.setItem(user.userInfo.id + 'dataset', selectUserId.value)
+  }
+  paginationConfig.current_page = 1
+  datasetList.value = []
+  getList()
+}
+const export_dataset = (item: any) => {
+  datasetApi.exportDataset(item.name, item.id, loading).then((ok) => {
+    MsgSuccess('导出成功')
+  })
+}
+const export_zip_dataset = (item: any) => {
+  datasetApi.exportZipDataset(item.name, item.id, loading).then((ok) => {
+    MsgSuccess('导出成功')
+  })
+}
+
+function deleteDataset(row: any) {
+  MsgConfirm(
+    `是否删除知识库：${row.name} ?`,
+    `此知识库关联 ${row.application_mapping_count} 个应用，删除后无法恢复，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      datasetApi.delDataset(row.id, loading).then(() => {
+        const index = datasetList.value.findIndex((v) => v.id === row.id)
+        datasetList.value.splice(index, 1)
+        MsgSuccess('删除成功')
+      })
+    })
+    .catch(() => {})
+}
+
+function getList() {
+  const params = {
+    ...(searchValue.value && { name: searchValue.value }),
+    ...(selectUserId.value &&
+      selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
+  }
+  datasetApi.getDataset(paginationConfig, params, loading).then((res) => {
+    res.data.records.forEach((item: any) => {
+      if (user.userInfo && item.user_id === user.userInfo.id) {
+        item.username = user.userInfo.username
+      } else {
+        item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
+      }
+    })
+    paginationConfig.total = res.data.total
+    datasetList.value = [...datasetList.value, ...res.data.records]
+  })
+}
+
+function getUserList() {
+  applicationApi.getUserList('DATASET', loading).then((res) => {
+    if (res.data) {
+      userOptions.value = res.data.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id
+        }
+      })
+      if (user.userInfo) {
+        const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'dataset')
+        if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
+          selectUserId.value = selectUserIdValue
+        }
+      }
+      getList()
+    }
+  })
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+<style lang="scss" scoped>
+.dataset-list-container {
+  .delete-button {
+    position: absolute;
+    right: 12px;
+    top: 15px;
+    height: auto;
+  }
+  .footer-content {
+    .bold {
+      color: var(--app-text-color);
+    }
+  }
+  :deep(.el-divider__text) {
+    background: var(--app-layout-bg-color);
+  }
+}
+</style>
diff --git a/src/views/document/component/EmbeddingContentDialog.vue b/src/views/document/component/EmbeddingContentDialog.vue
new file mode 100644
index 0000000..64cb6f8
--- /dev/null
+++ b/src/views/document/component/EmbeddingContentDialog.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="选择向量化内容" width="500" :before-close="close">
+    <el-radio-group v-model="state">
+      <el-radio value="error" size="large">向量化未成功的分段</el-radio>
+      <el-radio value="all" size="large">全部分段</el-radio>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const dialogVisible = ref<boolean>(false)
+const state = ref<'all' | 'error'>('error')
+const stateMap = {
+  all: ['0', '1', '2', '3', '4', '5', 'n'],
+  error: ['0', '1', '3', '4', '5', 'n']
+}
+const submit_handle = ref<(stateList: Array<string>) => void>()
+const submit = () => {
+  if (submit_handle.value) {
+    submit_handle.value(stateMap[state.value])
+  }
+  close()
+}
+
+const open = (handle: (stateList: Array<string>) => void) => {
+  submit_handle.value = handle
+  dialogVisible.value = true
+}
+const close = () => {
+  submit_handle.value = undefined
+  dialogVisible.value = false
+}
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/document/component/ImportDocumentDialog.vue b/src/views/document/component/ImportDocumentDialog.vue
new file mode 100644
index 0000000..92d20e1
--- /dev/null
+++ b/src/views/document/component/ImportDocumentDialog.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <el-form
+      label-position="top"
+      ref="webFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="文档地址" prop="source_url" v-if="isImport">
+        <el-input
+          v-model="form.source_url"
+          placeholder="请输入文档地址，一行一个，地址不正确文档会导入失败。"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item
+        v-else-if="!isImport && documentType === '1'"
+        label="文档地址"
+        prop="source_url"
+      >
+        <el-input v-model="form.source_url" placeholder="请输入文档地址" />
+      </el-form-item>
+      <el-form-item label="选择器" v-if="documentType === '1'">
+        <el-input
+          v-model="form.selector"
+          placeholder="默认为 body，可输入 .classname/#idname/tagname"
+        />
+      </el-form-item>
+      <el-form-item v-if="!isImport">
+        <template #label>
+          <div class="flex align-center">
+            <span class="mr-4">命中处理方式</span>
+            <el-tooltip
+              effect="dark"
+              content="用户提问时，命中文档下的分段时按照设置的方式进行处理。"
+              placement="right"
+            >
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-radio-group v-model="form.hit_handling_method" class="radio-block mt-4">
+          <template v-for="(value, key) of hitHandlingMethod" :key="key">
+            <el-radio :value="key">{{ value }} </el-radio>
+          </template>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        prop="directly_return_similarity"
+        v-if="!isImport && form.hit_handling_method === 'directly_return'"
+      >
+        <div class="lighter w-full" style="margin-top: -20px">
+          <span>相似度高于</span>
+          <el-input-number
+            v-model="form.directly_return_similarity"
+            :min="0"
+            :max="1"
+            :precision="3"
+            :step="0.1"
+            :value-on-clear="0"
+            controls-position="right"
+            size="small"
+            class="ml-4 mr-4"
+          /><span>直接返回分段内容</span>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(webFormRef)" :loading="loading"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance } from 'element-plus'
+import documentApi from '@/api/document'
+import { MsgSuccess } from '@/utils/message'
+import { hitHandlingMethod } from '@/enums/document'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['refresh'])
+const webFormRef = ref()
+const loading = ref<boolean>(false)
+const isImport = ref<boolean>(false)
+const form = ref<any>({
+  source_url: '',
+  selector: '',
+  hit_handling_method: 'optimization',
+  directly_return_similarity: 0.9
+})
+
+// 文档设置
+const documentId = ref('')
+const documentType = ref<string | number>('') //文档类型：1: web文档；0:普通文档
+
+// 批量设置
+const documentList = ref<Array<string>>([])
+
+const rules = reactive({
+  source_url: [{ required: true, message: '请输入文档地址', trigger: 'blur' }],
+  directly_return_similarity: [{ required: true, message: '请输入相似度', trigger: 'blur' }]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      source_url: '',
+      selector: '',
+      hit_handling_method: 'optimization',
+      directly_return_similarity: 0.9
+    }
+    isImport.value = false
+    documentType.value = ''
+    documentId.value = ''
+    documentList.value = []
+  }
+})
+
+const open = (row: any, list: Array<string>) => {
+  if (row) {
+    documentType.value = row.type
+    documentId.value = row.id
+    form.value = {
+      hit_handling_method: row.hit_handling_method,
+      directly_return_similarity: row.directly_return_similarity,
+      ...row.meta
+    }
+    isImport.value = false
+  } else if (list) {
+    // 批量设置
+    documentList.value = list
+  } else {
+    // 导入 只有web文档类型
+    documentType.value = '1'
+    isImport.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (isImport.value) {
+        const obj = {
+          source_url_list: form.value.source_url.split('\n'),
+          selector: form.value.selector
+        }
+        documentApi.postWebDocument(id, obj, loading).then(() => {
+          MsgSuccess('导入成功')
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else {
+        if (documentId.value) {
+          const obj = {
+            hit_handling_method: form.value.hit_handling_method,
+            directly_return_similarity: form.value.directly_return_similarity,
+            meta: {
+              source_url: form.value.source_url,
+              selector: form.value.selector
+            }
+          }
+          documentApi.putDocument(id, documentId.value, obj, loading).then(() => {
+            MsgSuccess('设置成功')
+            emit('refresh')
+            dialogVisible.value = false
+          })
+        } else if (documentList.value.length > 0) {
+          // 批量设置
+          const obj = {
+            hit_handling_method: form.value.hit_handling_method,
+            directly_return_similarity: form.value.directly_return_similarity,
+            id_list: documentList.value
+          }
+          documentApi.batchEditHitHandling(id, obj, loading).then(() => {
+            MsgSuccess('设置成功')
+            emit('refresh')
+            dialogVisible.value = false
+          })
+        }
+      }
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/document/component/SelectDatasetDialog.vue b/src/views/document/component/SelectDatasetDialog.vue
new file mode 100644
index 0000000..774cce7
--- /dev/null
+++ b/src/views/document/component/SelectDatasetDialog.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    title="选择知识库"
+    v-model="dialogVisible"
+    width="600"
+    class="select-dataset-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header flex">
+        <h4 :id="titleId" :class="titleClass">选择知识库</h4>
+        <el-button link class="ml-16" @click="refresh">
+          <el-icon class="mr-4"><Refresh /></el-icon>刷新
+        </el-button>
+      </div>
+    </template>
+    <div class="content-height">
+      <el-radio-group v-model="selectDataset" class="card__radio">
+        <el-scrollbar height="500">
+          <div class="p-16">
+            <el-row :gutter="12" v-loading="loading">
+              <el-col :span="12" v-for="(item, index) in datasetList" :key="index" class="mb-16">
+                <el-card
+                  shadow="never"
+                  class="mb-8"
+                  :class="item.id === selectDataset ? 'active' : ''"
+                >
+                  <el-radio :value="item.id" size="large">
+                    <div class="flex align-center">
+                      <AppAvatar
+                        v-if="item?.type === '0'"
+                        class="mr-8 avatar-blue"
+                        shape="square"
+                        :size="32"
+                      >
+                        <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <AppAvatar
+                        v-if="item?.type === '1'"
+                        class="mr-8 avatar-purple"
+                        shape="square"
+                        :size="32"
+                      >
+                        <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <span class="ellipsis">
+                        {{ item.name }}
+                      </span>
+                    </div>
+                  </el-radio>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+        </el-scrollbar>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle" :disabled="!selectDataset || loading">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/document'
+
+import useStore from '@/stores'
+const { dataset } = useStore()
+const route = useRoute()
+const {
+  params: { id } // id为datasetID
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const loading = ref<boolean>(false)
+
+const dialogVisible = ref<boolean>(false)
+const selectDataset = ref('')
+const datasetList = ref<any>([])
+const documentList = ref<any>([])
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    selectDataset.value = ''
+    datasetList.value = []
+    documentList.value = []
+  }
+})
+
+const open = (list: any) => {
+  documentList.value = list
+  getDataset()
+  dialogVisible.value = true
+}
+const submitHandle = () => {
+  documentApi
+    .putMigrateMulDocument(id, selectDataset.value, documentList.value, loading)
+    .then((res) => {
+      emit('refresh')
+      dialogVisible.value = false
+    })
+}
+
+function getDataset() {
+  dataset.asyncGetAllDataset(loading).then((res: any) => {
+    datasetList.value = res.data?.filter((v: any) => v.id !== id)
+  })
+}
+
+const refresh = () => {
+  getDataset()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.select-dataset-dialog {
+  padding: 0;
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .el-dialog__footer {
+    padding: 0 24px 24px;
+  }
+}
+</style>
diff --git a/src/views/document/component/Status.vue b/src/views/document/component/Status.vue
new file mode 100644
index 0000000..bd9dd67
--- /dev/null
+++ b/src/views/document/component/Status.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-popover
+    v-model:visible="visible"
+    placement="top"
+    trigger="hover"
+    :popper-style="{ width: 'auto' }"
+  >
+    <template #default
+      ><StatusTable
+        v-if="visible"
+        :status="status"
+        :statusMeta="statusMeta"
+        :taskTypeMap="taskTypeMap"
+        :stateMap="stateMap"
+      ></StatusTable>
+    </template>
+    <template #reference>
+      <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
+        <el-icon class="success"><SuccessFilled /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.FAILURE">
+        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.STARTED">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.PENDING">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.REVOKE">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+    </template>
+  </el-popover>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TaskType, State } from '@/utils/status'
+import StatusTable from '@/views/document/component/StatusTable.vue'
+const props = defineProps<{ status: string; statusMeta: any }>()
+const visible = ref<boolean>(false)
+const checkList: Array<string> = [
+  State.REVOKE,
+  State.STARTED,
+  State.PENDING,
+  State.FAILURE,
+  State.REVOKED,
+  State.SUCCESS
+]
+const aggStatus = computed(() => {
+  let obj = { key: 0, value: '' }
+  for (const i in checkList) {
+    const state = checkList[i]
+    const index = props.status.indexOf(state)
+    if (index > -1) {
+      obj = { key: props.status.length - index, value: state }
+      break
+    }
+  }
+  return obj
+})
+const startedMap = {
+  [TaskType.EMBEDDING]: '索引中',
+  [TaskType.GENERATE_PROBLEM]: '生成中',
+  [TaskType.SYNC]: '同步中'
+}
+const taskTypeMap = {
+  [TaskType.EMBEDDING]: '向量化',
+  [TaskType.GENERATE_PROBLEM]: '生成问题',
+  [TaskType.SYNC]: '同步'
+}
+const stateMap: any = {
+  [State.PENDING]: (type: number) => '排队中',
+  [State.STARTED]: (type: number) => startedMap[type],
+  [State.REVOKE]: (type: number) => '取消中',
+  [State.REVOKED]: (type: number) => '成功',
+  [State.FAILURE]: (type: number) => '失败',
+  [State.SUCCESS]: (type: number) => '成功'
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/document/component/StatusTable.vue b/src/views/document/component/StatusTable.vue
new file mode 100644
index 0000000..534dc96
--- /dev/null
+++ b/src/views/document/component/StatusTable.vue
@@ -0,0 +1,109 @@
+<template>
+  <div v-for="status in statusTable" :key="status.type" >
+    <span> {{ taskTypeMap[status.type] }}：</span>
+    <span>
+      <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED">
+        <el-icon class="success"><SuccessFilled /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.FAILURE">
+        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.STARTED">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.PENDING">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.REVOKE">
+        <el-icon class="is-loading primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+    </span>
+    <span
+      class="ml-8 lighter"
+      :style="{ color: [State.FAILURE, State.REVOKED].includes(status.state) ? '#F54A45' : '' }"
+    >
+      完成
+      {{
+        Object.keys(status.aggs ? status.aggs : {})
+          .filter((k) => k == State.SUCCESS)
+          .map((k) => status.aggs[k])
+          .reduce((x: any, y: any) => x + y, 0)
+      }}/{{
+        Object.values(status.aggs ? status.aggs : {}).reduce((x: any, y: any) => x + y, 0)
+      }}</span
+    >
+    <el-text type="info" class="ml-12">
+      {{
+        status.time
+          ? status.time[status.state == State.REVOKED ? State.REVOKED : State.PENDING]?.substring(
+              0,
+              19
+            )
+          : undefined
+      }}
+    </el-text>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Status, TaskType, State, type TaskTypeInterface } from '@/utils/status'
+import { mergeWith } from 'lodash'
+const props = defineProps<{ status: string; statusMeta: any; stateMap: any; taskTypeMap: any }>()
+
+const parseAgg = (agg: { count: number; status: string }) => {
+  const status = new Status(agg.status)
+  return Object.keys(TaskType)
+    .map((key) => {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      return { [value]: { [status.task_status[value]]: agg.count } }
+    })
+    .reduce((x, y) => ({ ...x, ...y }), {})
+}
+
+const customizer: (x: any, y: any) => any = (objValue: any, srcValue: any) => {
+  if (objValue == undefined && srcValue) {
+    return srcValue
+  }
+  if (srcValue == undefined && objValue) {
+    return objValue
+  }
+  // 如果是数组，我们将元素进行聚合
+  if (typeof objValue === 'object' && typeof srcValue === 'object') {
+    // 若是object类型的对象，我们进行递归
+    return mergeWith(objValue, srcValue, customizer)
+  } else {
+    // 否则，单纯的将值进行累加
+    return objValue + srcValue
+  }
+}
+const aggs = computed(() => {
+  return (props.statusMeta.aggs ? props.statusMeta.aggs : [])
+    .map((agg: any) => {
+      return parseAgg(agg)
+    })
+    .reduce((x: any, y: any) => {
+      return mergeWith(x, y, customizer)
+    }, {})
+})
+
+const statusTable = computed(() => {
+  return Object.keys(TaskType)
+    .map((key) => {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      const parseStatus = new Status(props.status)
+      return {
+        type: value,
+        state: parseStatus.task_status[value],
+        aggs: aggs.value[value],
+        time: props.statusMeta.state_time[value]
+      }
+    })
+    .filter((item) => item.state !== State.IGNORED)
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/views/document/index.vue b/src/views/document/index.vue
new file mode 100644
index 0000000..3f79be8
--- /dev/null
+++ b/src/views/document/index.vue
@@ -0,0 +1,856 @@
+<template>
+  <LayoutContainer header="文档" class="document-main">
+    <div class="main-calc-height">
+      <div class="p-24">
+        <div class="flex-between">
+          <div>
+            <el-button
+              v-if="datasetDetail.type === '0'"
+              type="primary"
+              @click="router.push({ path: '/dataset/upload', query: { id: id } })"
+              >上传文档</el-button
+            >
+            <el-button v-if="datasetDetail.type === '1'" type="primary" @click="importDoc"
+              >导入文档</el-button
+            >
+            <el-button
+              @click="syncMulDocument"
+              :disabled="multipleSelection.length === 0"
+              v-if="datasetDetail.type === '1'"
+              >同步文档</el-button
+            >
+            <el-button @click="openDatasetDialog()" :disabled="multipleSelection.length === 0">
+              迁移
+            </el-button>
+            <el-button @click="batchRefresh" :disabled="multipleSelection.length === 0">
+              向量化
+            </el-button>
+            <el-button @click="openGenerateDialog()" :disabled="multipleSelection.length === 0">
+              生成问题
+            </el-button>
+            <el-button @click="openBatchEditDocument" :disabled="multipleSelection.length === 0">
+              设置
+            </el-button>
+            <el-button @click="deleteMulDocument" :disabled="multipleSelection.length === 0">
+              删除
+            </el-button>
+          </div>
+
+          <el-input
+            v-model="filterText"
+            placeholder="按 文档名称 搜索"
+            prefix-icon="Search"
+            class="w-240"
+            @change="getList"
+            clearable
+          />
+        </div>
+        <app-table
+          ref="multipleTableRef"
+          class="mt-16"
+          :data="documentData"
+          :pagination-config="paginationConfig"
+          :quick-create="datasetDetail.type === '0'"
+          @sizeChange="handleSizeChange"
+          @changePage="getList"
+          @cell-mouse-enter="cellMouseEnter"
+          @cell-mouse-leave="cellMouseLeave"
+          @creatQuick="creatQuickHandle"
+          @row-click="rowClickHandle"
+          @selection-change="handleSelectionChange"
+          v-loading="loading"
+          :row-key="(row: any) => row.id"
+          :storeKey="storeKey"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column prop="name" label="文件名称" min-width="280">
+            <template #default="{ row }">
+              <ReadWrite
+                @change="editName($event, row.id)"
+                :data="row.name"
+                :showEditIcon="row.id === currentMouseId"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="char_length" label="字符数" align="right">
+            <template #default="{ row }">
+              {{ numberFormat(row.char_length) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="paragraph_count" label="分段" align="right" />
+          <el-table-column prop="status" label="文件状态" width="130">
+            <template #header>
+              <div>
+                <span>文件状态</span>
+                <el-dropdown trigger="click" @command="dropdownHandle">
+                  <el-button
+                    style="margin-top: 1px"
+                    link
+                    :type="filterMethod['status'] ? 'primary' : ''"
+                  >
+                    <el-icon><Filter /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 100px">
+                      <el-dropdown-item
+                        :class="filterMethod['status'] ? '' : 'is-active'"
+                        :command="beforeCommand('status', '')"
+                        class="justify-center"
+                        >全部</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="filterMethod['status'] === State.SUCCESS ? 'is-active' : ''"
+                        class="justify-center"
+                        :command="beforeCommand('status', State.SUCCESS)"
+                        >成功</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="filterMethod['status'] === State.FAILURE ? 'is-active' : ''"
+                        class="justify-center"
+                        :command="beforeCommand('status', State.FAILURE)"
+                        >失败</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="
+                          filterMethod['status'] === State.STARTED &&
+                          filterMethod['task_type'] == TaskType.EMBEDDING
+                            ? 'is-active'
+                            : ''
+                        "
+                        class="justify-center"
+                        :command="beforeCommand('status', State.STARTED, TaskType.EMBEDDING)"
+                        >索引中</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="filterMethod['status'] === State.PENDING ? 'is-active' : ''"
+                        class="justify-center"
+                        :command="beforeCommand('status', State.PENDING)"
+                        >排队中</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="
+                          filterMethod['status'] === State.STARTED &&
+                          filterMethod['task_type'] === TaskType.GENERATE_PROBLEM
+                            ? 'is-active'
+                            : ''
+                        "
+                        class="justify-center"
+                        :command="beforeCommand('status', State.STARTED, TaskType.GENERATE_PROBLEM)"
+                        >生成中</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+            <template #default="{ row }">
+              <StatusVlue :status="row.status" :status-meta="row.status_meta"></StatusVlue>
+            </template>
+          </el-table-column>
+          <el-table-column width="130">
+            <template #header>
+              <div>
+                <span>启用状态</span>
+                <el-dropdown trigger="click" @command="dropdownHandle">
+                  <el-button
+                    style="margin-top: 1px"
+                    link
+                    :type="filterMethod['is_active'] ? 'primary' : ''"
+                  >
+                    <el-icon><Filter /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 100px">
+                      <el-dropdown-item
+                        :class="filterMethod['is_active'] === '' ? 'is-active' : ''"
+                        :command="beforeCommand('is_active', '')"
+                        class="justify-center"
+                        >全部</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="filterMethod['is_active'] === true ? 'is-active' : ''"
+                        class="justify-center"
+                        :command="beforeCommand('is_active', true)"
+                        >开启</el-dropdown-item
+                      >
+                      <el-dropdown-item
+                        :class="filterMethod['is_active'] === false ? 'is-active' : ''"
+                        class="justify-center"
+                        :command="beforeCommand('is_active', false)"
+                        >关闭</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+            <template #default="{ row }">
+              <div @click.stop>
+                <el-switch
+                  :loading="loading"
+                  size="small"
+                  v-model="row.is_active"
+                  :before-change="() => changeState(row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column width="130">
+            <template #header>
+              <div>
+                <span>命中处理方式</span>
+                <el-dropdown trigger="click" @command="dropdownHandle">
+                  <el-button
+                    style="margin-top: 1px"
+                    link
+                    :type="filterMethod['hit_handling_method'] ? 'primary' : ''"
+                  >
+                    <el-icon><Filter /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 100px">
+                      <el-dropdown-item
+                        :class="filterMethod['hit_handling_method'] ? '' : 'is-active'"
+                        :command="beforeCommand('hit_handling_method', '')"
+                        class="justify-center"
+                        >全部</el-dropdown-item
+                      >
+                      <template v-for="(value, key) of hitHandlingMethod" :key="key">
+                        <el-dropdown-item
+                          :class="filterMethod['hit_handling_method'] === key ? 'is-active' : ''"
+                          class="justify-center"
+                          :command="beforeCommand('hit_handling_method', key)"
+                          >{{ value }}</el-dropdown-item
+                        >
+                      </template>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+            <template #default="{ row }">
+              {{ hitHandlingMethod[row.hit_handling_method as keyof typeof hitHandlingMethod] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="创建时间" width="175">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.create_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_time" label="更新时间" width="175">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.update_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="left" width="110" fixed="right">
+            <template #default="{ row }">
+              <div v-if="datasetDetail.type === '0'">
+                <span class="mr-4">
+                  <el-tooltip
+                    effect="dark"
+                    v-if="
+                      ([State.STARTED, State.PENDING] as Array<string>).includes(
+                        getTaskState(row.status, TaskType.EMBEDDING)
+                      )
+                    "
+                    content="取消向量化"
+                    placement="top"
+                  >
+                    <el-button
+                      type="primary"
+                      text
+                      @click.stop="cancelTask(row, TaskType.EMBEDDING)"
+                    >
+                      <AppIcon iconName="app-close" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-tooltip v-else effect="dark" content="向量化" placement="top">
+                    <el-button type="primary" text @click.stop="refreshDocument(row)">
+                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="设置" placement="top">
+                    <el-button type="primary" text @click.stop="settingDoc(row)">
+                      <el-icon><Setting /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span @click.stop>
+                  <el-dropdown trigger="click">
+                    <el-button text type="primary">
+                      <el-icon><MoreFilled /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          v-if="
+                            ([State.STARTED, State.PENDING] as Array<string>).includes(
+                              getTaskState(row.status, TaskType.GENERATE_PROBLEM)
+                            )
+                          "
+                          @click="cancelTask(row, TaskType.GENERATE_PROBLEM)"
+                        >
+                          <el-icon><Connection /></el-icon>
+                          取消生成问题
+                        </el-dropdown-item>
+                        <el-dropdown-item v-else @click="openGenerateDialog(row)">
+                          <el-icon><Connection /></el-icon>
+                          生成问题
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="openDatasetDialog(row)">
+                          <AppIcon iconName="app-migrate"></AppIcon>
+                          迁移
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="exportDocument(row)">
+                          <AppIcon iconName="app-export"></AppIcon>
+                          导出Excel
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="exportDocumentZip(row)">
+                          <AppIcon iconName="app-export"></AppIcon>
+                          导出Zip
+                        </el-dropdown-item>
+                        <el-dropdown-item icon="Delete" @click.stop="deleteDocument(row)"
+                          >删除</el-dropdown-item
+                        >
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </span>
+              </div>
+              <div v-if="datasetDetail.type === '1'">
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="同步" placement="top">
+                    <el-button type="primary" text @click.stop="syncDocument(row)">
+                      <el-icon><Refresh /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span class="mr-4">
+                  <el-tooltip
+                    effect="dark"
+                    v-if="
+                      ([State.STARTED, State.PENDING] as Array<string>).includes(
+                        getTaskState(row.status, TaskType.EMBEDDING)
+                      )
+                    "
+                    content="取消向量化"
+                    placement="top"
+                  >
+                    <el-button
+                      type="primary"
+                      text
+                      @click.stop="cancelTask(row, TaskType.EMBEDDING)"
+                    >
+                      <AppIcon iconName="app-close" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+
+                  <el-tooltip effect="dark" v-else content="向量化" placement="top">
+                    <el-button type="primary" text @click.stop="refreshDocument(row)">
+                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+
+                <span @click.stop>
+                  <el-dropdown trigger="click">
+                    <el-button text type="primary">
+                      <el-icon><MoreFilled /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item icon="Setting" @click="settingDoc(row)"
+                          >设置</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                          v-if="
+                            ([State.STARTED, State.PENDING] as Array<string>).includes(
+                              getTaskState(row.status, TaskType.GENERATE_PROBLEM)
+                            )
+                          "
+                          @click="cancelTask(row, TaskType.GENERATE_PROBLEM)"
+                        >
+                          <el-icon><Connection /></el-icon>
+                          取消生成问题
+                        </el-dropdown-item>
+                        <el-dropdown-item v-else @click="openGenerateDialog(row)">
+                          <el-icon><Connection /></el-icon>
+                          生成问题
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="openDatasetDialog(row)">
+                          <AppIcon iconName="app-migrate"></AppIcon>
+                          迁移</el-dropdown-item
+                        >
+                        <el-dropdown-item @click="exportDocument(row)">
+                          <AppIcon iconName="app-export"></AppIcon>
+                          导出Excel
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="exportDocumentZip(row)">
+                          <AppIcon iconName="app-export"></AppIcon>
+                          导出Zip
+                        </el-dropdown-item>
+                        <el-dropdown-item icon="Delete" @click.stop="deleteDocument(row)"
+                          >删除</el-dropdown-item
+                        >
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+        </app-table>
+      </div>
+
+      <ImportDocumentDialog ref="ImportDocumentDialogRef" :title="title" @refresh="refresh" />
+      <SyncWebDialog ref="SyncWebDialogRef" @refresh="refresh" />
+      <!-- 选择知识库 -->
+      <SelectDatasetDialog ref="SelectDatasetDialogRef" @refresh="refreshMigrate" />
+      <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
+    </div>
+    <div class="mul-operation w-full flex" v-if="multipleSelection.length !== 0">
+      <el-button :disabled="multipleSelection.length === 0" @click="cancelTaskHandle(1)">
+        取消向量化
+      </el-button>
+      <el-button :disabled="multipleSelection.length === 0" @click="cancelTaskHandle(2)">
+        取消生成
+      </el-button>
+      <el-text type="info" class="secondary ml-24">
+        已选 {{ multipleSelection.length }} 项
+      </el-text>
+      <el-button class="ml-16" type="primary" link @click="clearSelection"> 清空 </el-button>
+    </div>
+    <EmbeddingContentDialog ref="embeddingContentDialogRef"></EmbeddingContentDialog>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { ElTable } from 'element-plus'
+import documentApi from '@/api/document'
+import ImportDocumentDialog from './component/ImportDocumentDialog.vue'
+import SyncWebDialog from '@/views/dataset/component/SyncWebDialog.vue'
+import SelectDatasetDialog from './component/SelectDatasetDialog.vue'
+import { numberFormat } from '@/utils/utils'
+import { datetimeFormat } from '@/utils/time'
+import { hitHandlingMethod } from '@/enums/document'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import StatusVlue from '@/views/document/component/Status.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
+import EmbeddingContentDialog from '@/views/document/component/EmbeddingContentDialog.vue'
+import { TaskType, State } from '@/utils/status'
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { id } // id为datasetID
+} = route as any
+
+const { common, dataset, document } = useStore()
+const storeKey = 'documents'
+const getTaskState = (status: string, taskType: number) => {
+  const statusList = status.split('').reverse()
+  return taskType - 1 > statusList.length + 1 ? 'n' : statusList[taskType - 1]
+}
+onBeforeRouteUpdate(() => {
+  common.savePage(storeKey, null)
+  common.saveCondition(storeKey, null)
+})
+onBeforeRouteLeave((to: any) => {
+  if (to.name !== 'Paragraph') {
+    common.savePage(storeKey, null)
+    common.saveCondition(storeKey, null)
+  } else {
+    common.saveCondition(storeKey, {
+      filterText: filterText.value,
+      filterMethod: filterMethod.value
+    })
+  }
+})
+const beforePagination = computed(() => common.paginationConfig[storeKey])
+const beforeSearch = computed(() => common.search[storeKey])
+const embeddingContentDialogRef = ref<InstanceType<typeof EmbeddingContentDialog>>()
+const SyncWebDialogRef = ref()
+const loading = ref(false)
+let interval: any
+const filterText = ref('')
+const filterMethod = ref<any>({})
+const documentData = ref<any[]>([])
+const currentMouseId = ref(null)
+const datasetDetail = ref<any>({})
+
+const paginationConfig = ref({
+  current_page: 1,
+  page_size: 10,
+  total: 0
+})
+
+const ImportDocumentDialogRef = ref()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<any[]>([])
+const title = ref('')
+
+const SelectDatasetDialogRef = ref()
+
+const exportDocument = (document: any) => {
+  documentApi.exportDocument(document.name, document.dataset_id, document.id, loading).then(() => {
+    MsgSuccess('导出成功')
+  })
+}
+const exportDocumentZip = (document: any) => {
+  documentApi
+    .exportDocumentZip(document.name, document.dataset_id, document.id, loading)
+    .then(() => {
+      MsgSuccess('导出成功')
+    })
+}
+
+function cancelTaskHandle(val: any) {
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  const obj = {
+    id_list: arr,
+    type: val
+  }
+  documentApi.batchCancelTask(id, obj, loading).then(() => {
+    MsgSuccess('批量取消成功')
+    multipleTableRef.value?.clearSelection()
+  })
+}
+
+function clearSelection() {
+  multipleTableRef.value?.clearSelection()
+}
+
+function openDatasetDialog(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v.id)
+      }
+    })
+  }
+
+  SelectDatasetDialogRef.value.open(arr)
+}
+
+function dropdownHandle(obj: any) {
+  filterMethod.value[obj.attr] = obj.command
+  if (obj.attr == 'status') {
+    filterMethod.value['task_type'] = obj.task_type
+  }
+
+  getList()
+}
+
+function beforeCommand(attr: string, val: any, task_type?: number) {
+  return {
+    attr: attr,
+    command: val,
+    task_type
+  }
+}
+const cancelTask = (row: any, task_type: number) => {
+  documentApi.cancelTask(row.dataset_id, row.id, { type: task_type }).then(() => {
+    MsgSuccess('发送成功')
+  })
+}
+
+function importDoc() {
+  title.value = '导入文档'
+  ImportDocumentDialogRef.value.open()
+}
+function settingDoc(row: any) {
+  title.value = '设置'
+  ImportDocumentDialogRef.value.open(row)
+}
+
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+
+function openBatchEditDocument() {
+  title.value = '设置'
+  const arr: string[] = multipleSelection.value.map((v) => v.id)
+  ImportDocumentDialogRef.value.open(null, arr)
+}
+
+/**
+ * 初始化轮询
+ */
+const initInterval = () => {
+  interval = setInterval(() => {
+    getList(true)
+  }, 6000)
+}
+
+/**
+ * 关闭轮询
+ */
+const closeInterval = () => {
+  if (interval) {
+    clearInterval(interval)
+  }
+}
+
+function syncDocument(row: any) {
+  if (row.meta?.source_url) {
+    MsgConfirm(`确认同步文档?`, `同步将删除已有数据重新获取新数据，请谨慎操作。`, {
+      confirmButtonText: '同步',
+      confirmButtonClass: 'danger'
+    })
+      .then(() => {
+        documentApi.putDocumentSync(row.dataset_id, row.id).then(() => {
+          getList()
+        })
+      })
+      .catch(() => {})
+  } else {
+    MsgConfirm(`提示`, `无法同步，请先去设置文档 URL地址`, {
+      confirmButtonText: '确认',
+      type: 'warning'
+    })
+      .then(() => {})
+      .catch(() => {})
+  }
+}
+
+function refreshDocument(row: any) {
+  const embeddingDocument = (stateList: Array<string>) => {
+    return documentApi.putDocumentRefresh(row.dataset_id, row.id, stateList).then(() => {
+      getList()
+    })
+  }
+  embeddingContentDialogRef.value?.open(embeddingDocument)
+}
+
+function rowClickHandle(row: any, column: any) {
+  if (column && column.type === 'selection') {
+    return
+  }
+
+  router.push({ path: `/dataset/${id}/${row.id}` })
+}
+
+/*
+  快速创建空白文档
+*/
+function creatQuickHandle(val: string) {
+  loading.value = true
+  const obj = [{ name: val }]
+  document
+    .asyncPostDocument(id, obj)
+    .then(() => {
+      getList()
+      MsgSuccess('创建成功')
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function syncMulDocument() {
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  documentApi.delMulSyncDocument(id, arr, loading).then(() => {
+    MsgSuccess('同步文档成功')
+    getList()
+  })
+}
+
+function deleteMulDocument() {
+  MsgConfirm(
+    `是否批量删除 ${multipleSelection.value.length} 个文档?`,
+    `所选文档中的分段会跟随删除，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      const arr: string[] = []
+      multipleSelection.value.map((v) => {
+        if (v) {
+          arr.push(v.id)
+        }
+      })
+      documentApi.delMulDocument(id, arr, loading).then(() => {
+        MsgSuccess('批量删除成功')
+        multipleTableRef.value?.clearSelection()
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+function batchRefresh() {
+  const arr: string[] = multipleSelection.value.map((v) => v.id)
+  const embeddingBatchDocument = (stateList: Array<string>) => {
+    documentApi.batchRefresh(id, arr, stateList, loading).then(() => {
+      MsgSuccess('批量向量化成功')
+      multipleTableRef.value?.clearSelection()
+    })
+  }
+  embeddingContentDialogRef.value?.open(embeddingBatchDocument)
+}
+
+function deleteDocument(row: any) {
+  MsgConfirm(
+    `是否删除文档：${row.name} ?`,
+    `此文档下的 ${row.paragraph_count} 个分段都会被删除，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      documentApi.delDocument(id, row.id, loading).then(() => {
+        MsgSuccess('删除成功')
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+/*
+  更新名称或状态
+*/
+function updateData(documentId: string, data: any, msg: string) {
+  documentApi
+    .putDocument(id, documentId, data, loading)
+    .then((res) => {
+      const index = documentData.value.findIndex((v) => v.id === documentId)
+      documentData.value.splice(index, 1, res.data)
+      MsgSuccess(msg)
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+function changeState(row: any) {
+  const obj = {
+    is_active: !row.is_active
+  }
+  const str = !row.is_active ? '启用成功' : '禁用成功'
+  currentMouseId.value && updateData(row.id, obj, str)
+}
+
+function editName(val: string, id: string) {
+  if (val) {
+    const obj = {
+      name: val
+    }
+    updateData(id, obj, '修改成功')
+  } else {
+    MsgError('文件名称不能为空！')
+  }
+}
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+function cellMouseLeave() {
+  currentMouseId.value = null
+}
+
+function handleSizeChange() {
+  paginationConfig.value.current_page = 1
+  getList()
+}
+
+function getList(bool?: boolean) {
+  const param = {
+    ...(filterText.value && { name: filterText.value }),
+    ...filterMethod.value
+  }
+  documentApi
+    .getDocument(id as string, paginationConfig.value, param, bool ? undefined : loading)
+    .then((res) => {
+      documentData.value = res.data.records
+      paginationConfig.value.total = res.data.total
+    })
+}
+
+function getDetail() {
+  dataset.asyncGetDatasetDetail(id, loading).then((res: any) => {
+    datasetDetail.value = res.data
+  })
+}
+
+function refreshMigrate() {
+  multipleTableRef.value?.clearSelection()
+  getList()
+}
+
+function refresh() {
+  paginationConfig.value.current_page = 1
+  getList()
+}
+
+const GenerateRelatedDialogRef = ref()
+function openGenerateDialog(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v.id)
+      }
+    })
+  }
+
+  GenerateRelatedDialogRef.value.open(arr, 'document')
+}
+
+onMounted(() => {
+  getDetail()
+  if (beforePagination.value) {
+    paginationConfig.value = beforePagination.value
+  }
+  if (beforeSearch.value) {
+    filterText.value = beforeSearch.value['filterText']
+    filterMethod.value = beforeSearch.value['filterMethod']
+  }
+  getList()
+  // 初始化定时任务
+  initInterval()
+})
+
+onBeforeUnmount(() => {
+  // 清除定时任务
+  closeInterval()
+})
+</script>
+<style lang="scss" scoped>
+.document-main {
+  box-sizing: border-box;
+  .mul-operation {
+    position: fixed;
+    margin-left: var(--sidebar-width);
+    bottom: 0;
+    right: 24px;
+    width: calc(100% - var(--sidebar-width) - 48px);
+    padding: 16px 24px;
+    box-sizing: border-box;
+    background: #ffffff;
+    z-index: 22;
+    box-shadow: 0px -2px 4px 0px rgba(31, 35, 41, 0.08);
+  }
+}
+</style>
diff --git a/src/views/email/index.vue b/src/views/email/index.vue
new file mode 100644
index 0000000..2b92280
--- /dev/null
+++ b/src/views/email/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <LayoutContainer header="邮箱配置">
+    <div class="email-setting main-calc-height">
+      <el-scrollbar>
+        <div class="p-24" v-loading="loading">
+          <el-form
+            ref="emailFormRef"
+            :rules="rules"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+          >
+            <el-form-item label="SMTP 主机" prop="email_host">
+              <el-input v-model="form.email_host" placeholder="请输入 SMTP 主机" />
+            </el-form-item>
+            <el-form-item label="SMTP 端口" prop="email_port">
+              <el-input v-model="form.email_port" placeholder="请输入 SMTP 端口" />
+            </el-form-item>
+            <el-form-item label="SMTP 账户" prop="email_host_user">
+              <el-input v-model="form.email_host_user" placeholder="请输入 SMTP 账户" />
+            </el-form-item>
+            <el-form-item label="发件人邮箱" prop="from_email">
+              <el-input v-model="form.from_email" placeholder="请输入发件人邮箱" />
+            </el-form-item>
+            <el-form-item label="密码" prop="email_host_password">
+              <el-input
+                v-model="form.email_host_password"
+                placeholder="请输入发件人密码"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.email_use_ssl"
+                >开启SSL(如果SMTP端口是465，通常需要启用SSL)
+              </el-checkbox>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.email_use_tls"
+                >开启TLS(如果SMTP端口是587，通常需要启用TLS)</el-checkbox
+              >
+            </el-form-item>
+            <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
+              测试连接
+            </el-button>
+          </el-form>
+
+          <div class="text-right">
+            <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
+              保存
+            </el-button>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import emailApi from '@/api/email-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+
+import { MsgSuccess } from '@/utils/message'
+const form = ref<any>({
+  email_host: '',
+  email_port: '',
+  email_host_user: '',
+  email_host_password: '',
+  email_use_tls: false,
+  email_use_ssl: false,
+  from_email: ''
+})
+
+const emailFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  email_host: [{ required: true, message: '请输入 SMTP 主机', trigger: 'blur' }],
+  email_port: [{ required: true, message: '请输入 SMTP 端口', trigger: 'blur' }],
+  email_host_user: [{ required: true, message: '请输入 SMTP 账户', trigger: 'blur' }],
+  email_host_password: [{ required: true, message: '请输入发件人邮箱密码', trigger: 'blur' }],
+  from_email: [{ required: true, message: '请输入发件人邮箱', trigger: 'blur' }]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (test) {
+        emailApi.postTestEmail(form.value, loading).then((res) => {
+          MsgSuccess('测试连接成功')
+        })
+      } else {
+        emailApi.putEmailSetting(form.value, loading).then((res) => {
+          MsgSuccess('设置成功')
+        })
+      }
+    }
+  })
+}
+
+function getDetail() {
+  emailApi.getEmailSetting(loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped>
+.email-setting {
+  width: 70%;
+  margin: 0 auto;
+  :deep(.el-checkbox__label) {
+    font-weight: 400;
+  }
+}
+</style>
diff --git a/src/views/first/index.vue b/src/views/first/index.vue
new file mode 100644
index 0000000..83075ab
--- /dev/null
+++ b/src/views/first/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <el-button v-hasPermission="'USER:DELETE'">用户删除权限</el-button>
+    <el-button v-hasPermission="'USER:READ'">用户只读权限</el-button>
+    <el-button v-hasPermission="new Role('USER')">普通用户角色</el-button>
+    <el-button v-hasPermission="[new Role('ADMIN'), new Role('USER')]"
+      >普通用户或者管理员</el-button
+    >
+    <el-button v-hasPermission="{ permission: ['USER:READ', new Role('USER')], compare: 'AND' }"
+      >普通角色并且用户只读权限</el-button
+    >
+
+    首页
+  </div>
+</template>
+<script setup lang="ts">
+import { Role } from '@/utils/permission/type'
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/function-lib/component/FieldFormDialog.vue b/src/views/function-lib/component/FieldFormDialog.vue
new file mode 100644
index 0000000..c16c627
--- /dev/null
+++ b/src/views/function-lib/component/FieldFormDialog.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="参数名" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入参数名"
+          maxlength="64"
+          show-word-limit
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="数据类型">
+        <el-select v-model="form.type">
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="来源">
+        <el-select v-model="form.source">
+          <el-option label="引用变量" value="reference" />
+          <el-option label="自定义" value="custom" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否必填" @click.prevent>
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? '保存' : '添加' }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const typeOptions = ['string', 'int', 'dict', 'array', 'float']
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  type: typeOptions[0],
+  source: 'reference',
+  is_required: true
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入参数名', trigger: 'blur' }]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      type: typeOptions[0],
+      source: 'reference',
+      is_required: true
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/function-lib/component/FunctionDebugDrawer.vue b/src/views/function-lib/component/FunctionDebugDrawer.vue
new file mode 100644
index 0000000..1f80347
--- /dev/null
+++ b/src/views/function-lib/component/FunctionDebugDrawer.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>调试</h4>
+      </div>
+    </template>
+    <div>
+      <div v-if="form.debug_field_list.length > 0" class="mb-16">
+        <h4 class="title-decoration-1 mb-16">输入参数</h4>
+        <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+          <el-form
+            ref="FormRef"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+            hide-required-asterisk
+            v-loading="loading"
+          >
+            <template v-for="(item, index) in form.debug_field_list" :key="index">
+              <el-form-item
+                :label="item.name"
+                :prop="'debug_field_list.' + index + '.value'"
+                :rules="{
+                  required: item.is_required,
+                  message: '请输入参数值',
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex">
+                    <span
+                      >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
+                    >
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                </template>
+                <el-input v-model="item.value" placeholder="请输入参数值" />
+              </el-form-item>
+            </template>
+          </el-form>
+        </el-card>
+      </div>
+
+      <el-button type="primary" @click="submit(FormRef)" :loading="loading"> 运行 </el-button>
+      <div v-if="showResult" class="mt-8">
+        <h4 class="title-decoration-1 mb-16 mt-16">运行结果</h4>
+        <div class="mb-16">
+          <el-alert v-if="isSuccess" title="运行成功" type="success" show-icon :closable="false" />
+          <el-alert v-else title="运行失败" type="error" show-icon :closable="false" />
+        </div>
+
+        <p class="lighter mb-8">输出</p>
+
+        <el-card
+          :class="isSuccess ? '' : 'danger'"
+          class="pre-wrap"
+          shadow="never"
+          style="max-height: 350px; overflow: scroll"
+        >
+          {{ result || '-' }}
+        </el-card>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import functionLibApi from '@/api/function-lib'
+import type { FormInstance } from 'element-plus'
+
+const FormRef = ref()
+const loading = ref(false)
+const debugVisible = ref(false)
+const showResult = ref(false)
+const isSuccess = ref(false)
+const result = ref('')
+
+const form = ref<any>({
+  debug_field_list: [],
+  code: '',
+  input_field_list: []
+})
+
+watch(debugVisible, (bool) => {
+  if (!bool) {
+    showResult.value = false
+    isSuccess.value = false
+    result.value = ''
+    form.value = {
+      debug_field_list: [],
+      code: '',
+      input_field_list: []
+    }
+  }
+})
+
+const submit = async (formEl: FormInstance | undefined) => {
+  const validate = formEl ? formEl.validate() : Promise.resolve()
+  validate.then(() => {
+    functionLibApi.postFunctionLibDebug(form.value, loading).then((res) => {
+      if (res.code === 500) {
+        showResult.value = true
+        isSuccess.value = false
+        result.value = res.message
+      } else {
+        showResult.value = true
+        isSuccess.value = true
+        result.value = res.data
+      }
+    })
+  })
+}
+
+const open = (data: any) => {
+  if (data.input_field_list.length > 0) {
+    data.input_field_list.forEach((item: any) => {
+      form.value.debug_field_list.push({
+        value: '',
+        ...item
+      })
+    })
+  }
+  form.value.code = data.code
+  form.value.input_field_list = data.input_field_list
+  debugVisible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/views/function-lib/component/FunctionFormDrawer.vue b/src/views/function-lib/component/FunctionFormDrawer.vue
new file mode 100644
index 0000000..b11fc78
--- /dev/null
+++ b/src/views/function-lib/component/FunctionFormDrawer.vue
@@ -0,0 +1,317 @@
+<template>
+  <el-drawer v-model="visible" size="60%" :before-close="close">
+    <template #header>
+      <h4>{{ title }}</h4>
+    </template>
+    <div>
+      <h4 class="title-decoration-1 mb-16">基础信息</h4>
+      <el-form
+        ref="FormRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+        v-loading="loading"
+      >
+        <el-form-item label="函数名称" prop="name">
+          <el-input
+            v-model="form.name"
+            placeholder="请输入函数名称"
+            maxlength="64"
+            show-word-limit
+            @blur="form.name = form.name?.trim()"
+          />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input
+            v-model="form.desc"
+            type="textarea"
+            placeholder="请输入函数的描述"
+            maxlength="128"
+            show-word-limit
+            :autosize="{ minRows: 3 }"
+            @blur="form.desc = form.desc?.trim()"
+          />
+        </el-form-item>
+        <el-form-item prop="permission_type">
+          <template #label>
+            <span>权限</span>
+          </template>
+
+          <el-radio-group v-model="form.permission_type" class="card__radio">
+            <el-row :gutter="16">
+              <template v-for="(value, key) of PermissionType" :key="key">
+                <el-col :span="12">
+                  <el-card
+                    shadow="never"
+                    class="mb-16"
+                    :class="form.permission_type === key ? 'active' : ''"
+                  >
+                    <el-radio :value="key" size="large">
+                      <p class="mb-4">{{ value }}</p>
+                      <el-text type="info">
+                        {{ PermissionDesc[key] }}
+                      </el-text>
+                    </el-radio>
+                  </el-card>
+                </el-col>
+              </template>
+            </el-row>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div class="flex-between">
+        <h4 class="title-decoration-1 mb-16">
+          输入参数 <el-text type="info" class="color-secondary"> 使用函数时显示 </el-text>
+        </h4>
+        <el-button link type="primary" @click="openAddDialog()">
+          <el-icon class="mr-4"><Plus /></el-icon> 添加
+        </el-button>
+      </div>
+
+      <el-table :data="form.input_field_list" class="mb-16">
+        <el-table-column prop="name" label="参数名" />
+        <el-table-column label="数据类型">
+          <template #default="{ row }">
+            <el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="必填">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch size="small" v-model="row.is_required" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="source" label="来源">
+          <template #default="{ row }">
+            {{ row.source === 'custom' ? '自定义' : '引用参数' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="left" width="80">
+          <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="修改" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <el-tooltip effect="dark" content="删除" placement="top">
+              <el-button type="primary" text @click="deleteField($index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <h4 class="title-decoration-1 mb-16">
+        Python 代码 <el-text type="info" class="color-secondary"> 使用函数时不显示 </el-text>
+      </h4>
+
+      <div class="function-CodemirrorEditor mb-8" v-if="showEditor">
+        <CodemirrorEditor v-model="form.code" />
+        <div class="function-CodemirrorEditor__footer">
+          <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
+            <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+          </el-button>
+        </div>
+      </div>
+      <h4 class="title-decoration-1 mb-16 mt-16">
+        输出参数 <el-text type="info" class="color-secondary"> 使用函数时显示 </el-text>
+      </h4>
+      <div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <span>结果 {result}</span>
+      </div>
+    </div>
+
+    <template #footer>
+      <div>
+        <el-button :loading="loading" @click="visible = false">取消</el-button>
+        <el-button :loading="loading" @click="openDebug">调试</el-button>
+        <el-button type="primary" @click="submit(FormRef)" :loading="loading">
+          {{ isEdit ? '保存' : '创建' }}</el-button
+        >
+      </div>
+    </template>
+
+    <!-- Codemirror 弹出层 -->
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body fullscreen>
+      <CodemirrorEditor
+        v-model="cloneContent"
+        style="height: calc(100vh - 160px) !important; border: 1px solid #bbbfc4; border-radius: 4px"
+      />
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import FieldFormDialog from './FieldFormDialog.vue'
+import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
+import type { functionLibData } from '@/api/type/function-lib'
+import functionLibApi from '@/api/function-lib'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { cloneDeep } from 'lodash'
+import { PermissionType, PermissionDesc } from '@/enums/model'
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['refresh'])
+const FieldFormDialogRef = ref()
+const FunctionDebugDrawerRef = ref()
+
+const FormRef = ref()
+
+const isEdit = ref(false)
+const loading = ref(false)
+const visible = ref(false)
+const showEditor = ref(false)
+const currentIndex = ref<any>(null)
+
+const form = ref<functionLibData>({
+  name: '',
+  desc: '',
+  code: '',
+  input_field_list: [],
+  permission_type: 'PRIVATE'
+})
+
+const dialogVisible = ref(false)
+const cloneContent = ref<any>('')
+
+watch(visible, (bool) => {
+  if (!bool) {
+    isEdit.value = false
+    showEditor.value = false
+    currentIndex.value = null
+    form.value = {
+      name: '',
+      desc: '',
+      code: '',
+      input_field_list: [],
+      permission_type: 'PRIVATE'
+    }
+  }
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入函数名称', trigger: 'blur' }],
+  permission_type: [{ required: true, message: '请选择', trigger: 'change' }]
+})
+
+function openCodemirrorDialog() {
+  cloneContent.value = form.value.code
+  dialogVisible.value = true
+}
+
+function submitDialog() {
+  form.value.code = cloneContent.value
+  dialogVisible.value = false
+}
+
+function close() {
+  if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
+    visible.value = false
+  } else {
+    MsgConfirm(`提示`, `当前的更改尚未保存，确认退出吗?`, {
+      confirmButtonText: '确认',
+      type: 'warning'
+    })
+      .then(() => {
+        visible.value = false
+      })
+      .catch(() => {})
+  }
+}
+
+function areAllValuesNonEmpty(obj: any) {
+  return Object.values(obj).some((value) => {
+    return Array.isArray(value)
+      ? value.length !== 0
+      : value !== null && value !== undefined && value !== ''
+  })
+}
+
+function openDebug() {
+  FunctionDebugDrawerRef.value.open(form.value)
+}
+
+function deleteField(index: any) {
+  form.value.input_field_list?.splice(index, 1)
+}
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  FieldFormDialogRef.value.open(data)
+}
+
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    form.value.input_field_list?.splice(currentIndex.value, 1, data)
+  } else {
+    form.value.input_field_list?.push(data)
+  }
+  currentIndex.value = null
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid: any) => {
+    if (valid) {
+      if (isEdit.value) {
+        functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
+          MsgSuccess('编辑成功')
+          emit('refresh', res.data)
+          visible.value = false
+        })
+      } else {
+        functionLibApi.postFunctionLib(form.value, loading).then((res) => {
+          MsgSuccess('创建成功')
+          emit('refresh')
+          visible.value = false
+        })
+      }
+    }
+  })
+}
+
+const open = (data: any) => {
+  if (data) {
+    isEdit.value = data?.id ? true : false
+    form.value = cloneDeep(data)
+  }
+  visible.value = true
+  setTimeout(() => {
+    showEditor.value = true
+  }, 100)
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss" scoped>
+.function-CodemirrorEditor__footer {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+.function-CodemirrorEditor {
+  position: relative;
+}
+</style>
diff --git a/src/views/function-lib/index.vue b/src/views/function-lib/index.vue
new file mode 100644
index 0000000..3e6770d
--- /dev/null
+++ b/src/views/function-lib/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="function-lib-list-container p-24" style="padding-top: 16px">
+    <div class="flex-between mb-16">
+      <h4>函数库</h4>
+      <div class="flex-between">
+        <el-select
+          v-model="selectUserId"
+          class="mr-12"
+          style="max-width: 240px; width: 150px"
+          @change="searchHandle"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          placeholder="按函数名称搜索"
+          prefix-icon="Search"
+          class="w-240"
+          style="max-width: 240px"
+          clearable
+        />
+      </div>
+    </div>
+    <div
+      v-loading.fullscreen.lock="
+        (paginationConfig.current_page === 1 && loading) || changeStateloading
+      "
+    >
+      <InfiniteScroll
+        :size="functionLibList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
+            <CardAdd title="创建函数" @click="openCreateDialog()" />
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            v-for="(item, index) in functionLibList"
+            :key="index"
+            class="mb-16"
+          >
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="function-lib-card"
+              @click="openCreateDialog(item)"
+              :class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
+            >
+              <template #icon>
+                <AppAvatar class="mr-12 avatar-green" shape="square" :size="32">
+                  <img src="@/assets/icon_function_outlined.svg" style="width: 58%" alt="" />
+                </AppAvatar>
+              </template>
+              <template #subTitle>
+                <el-text class="color-secondary" size="small">
+                  <auto-tooltip :content="item.username">
+                    创建者: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
+              <div class="status-button">
+                <el-tag
+                  class="info-tag"
+                  v-if="item.permission_type === 'PUBLIC'"
+                  style="height: 22px"
+                  >公用</el-tag
+                >
+                <el-tag
+                  class="danger-tag"
+                  v-else-if="item.permission_type === 'PRIVATE'"
+                  style="height: 22px"
+                  >私有</el-tag
+                >
+              </div>
+              <template #footer>
+                <div class="footer-content flex-between">
+                  <div>
+                    <el-tooltip effect="dark" content="复制" placement="top">
+                      <el-button text @click.stop="copyFunctionLib(item)">
+                        <AppIcon iconName="app-copy"></AppIcon>
+                      </el-button>
+                    </el-tooltip>
+                    <el-divider direction="vertical" />
+                    <el-tooltip effect="dark" content="删除" placement="top">
+                      <el-button
+                        :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                        text
+                        @click.stop="deleteFunctionLib(item)"
+                      >
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </div>
+                  <div @click.stop>
+                    <el-switch
+                      :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                      v-model="item.is_active"
+                      @change="changeState($event, item)"
+                      size="small"
+                    />
+                  </div>
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </InfiniteScroll>
+    </div>
+    <FunctionFormDrawer ref="FunctionFormDrawerRef" @refresh="refresh" :title="title" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import { cloneDeep } from 'lodash'
+import functionLibApi from '@/api/function-lib'
+import FunctionFormDrawer from './component/FunctionFormDrawer.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores'
+import applicationApi from '@/api/application'
+const { user } = useStore()
+
+const loading = ref(false)
+
+const FunctionFormDrawerRef = ref()
+
+const functionLibList = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+
+const searchValue = ref('')
+const title = ref('')
+const changeStateloading = ref(false)
+
+interface UserOption {
+  label: string
+  value: string
+}
+
+const userOptions = ref<UserOption[]>([])
+
+const selectUserId = ref('all')
+
+const canEdit = (row: any) => {
+  return user.userInfo?.id === row?.user_id
+}
+
+function openCreateDialog(data?: any) {
+  title.value = data ? '编辑函数' : '创建函数'
+  if (data) {
+    if (data?.permission_type !== 'PUBLIC' || canEdit(data)) {
+      FunctionFormDrawerRef.value.open(data)
+    }
+  } else {
+    FunctionFormDrawerRef.value.open(data)
+  }
+}
+
+function searchHandle() {
+  if (user.userInfo) {
+    localStorage.setItem(user.userInfo.id + 'function', selectUserId.value)
+  }
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  functionLibList.value = []
+  getList()
+}
+
+function changeState(bool: Boolean, row: any) {
+  if (!bool) {
+    MsgConfirm(
+      `是否禁用函数：${row.name} ?`,
+      `禁用后，引用了该函数的应用提问时会报错 ，请谨慎操作。`,
+      {
+        confirmButtonText: '禁用',
+        confirmButtonClass: 'danger'
+      }
+    )
+      .then(() => {
+        const obj = {
+          is_active: bool
+        }
+        functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
+      })
+      .catch(() => {
+        row.is_active = true
+      })
+  } else {
+    const obj = {
+      is_active: bool
+    }
+    functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
+  }
+}
+
+function deleteFunctionLib(row: any) {
+  MsgConfirm(
+    `是否删除函数：${row.name} ?`,
+    '删除后，引用了该函数的应用提问时会报错 ，请谨慎操作。',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      functionLibApi.delFunctionLib(row.id, loading).then(() => {
+        const index = functionLibList.value.findIndex((v) => v.id === row.id)
+        functionLibList.value.splice(index, 1)
+        MsgSuccess('删除成功')
+      })
+    })
+    .catch(() => {})
+}
+
+function copyFunctionLib(row: any) {
+  title.value = '复制函数'
+  const obj = cloneDeep(row)
+  delete obj['id']
+  obj['name'] = obj['name'] + ' 副本'
+  FunctionFormDrawerRef.value.open(obj)
+}
+
+function getList() {
+  const params = {
+    ...(searchValue.value && { name: searchValue.value }),
+    ...(selectUserId.value &&
+      selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
+  }
+  functionLibApi.getFunctionLib(paginationConfig, params, loading).then((res: any) => {
+    res.data.records.forEach((item: any) => {
+      if (user.userInfo && item.user_id === user.userInfo.id) {
+        item.username = user.userInfo.username
+      } else {
+        item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
+      }
+    })
+    functionLibList.value = [...functionLibList.value, ...res.data.records]
+    paginationConfig.total = res.data.total
+  })
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = functionLibList.value.findIndex((v) => v.id === data.id)
+    functionLibList.value.splice(index, 1, data)
+  } else {
+    paginationConfig.total = 0
+    paginationConfig.current_page = 1
+    functionLibList.value = []
+    getList()
+  }
+}
+
+function getUserList() {
+  applicationApi.getUserList('FUNCTION', loading).then((res) => {
+    if (res.data) {
+      userOptions.value = res.data.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id
+        }
+      })
+      if (user.userInfo) {
+        const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'function')
+        if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
+          selectUserId.value = selectUserIdValue
+        }
+      }
+      getList()
+    }
+  })
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+<style lang="scss" scoped>
+.function-lib-list-container {
+  .status-button {
+    position: absolute;
+    right: 12px;
+    top: 15px;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/hit-test/index.vue b/src/views/hit-test/index.vue
new file mode 100644
index 0000000..2a1845e
--- /dev/null
+++ b/src/views/hit-test/index.vue
@@ -0,0 +1,391 @@
+<template>
+  <div class="hit-test">
+    <LayoutContainer>
+      <template #header>
+        <h4>
+          命中测试
+          <el-text type="info" class="ml-4">针对用户提问调试段落匹配情况，保障回答效果。</el-text>
+        </h4>
+      </template>
+      <div class="hit-test__main p-16" v-loading="loading">
+        <div class="question-title clearfix" v-if="questionTitle">
+          <div class="avatar">
+            <AppAvatar>
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+            </AppAvatar>
+          </div>
+          <div class="content">
+            <h4 class="text break-all">{{ questionTitle }}</h4>
+          </div>
+        </div>
+        <el-scrollbar>
+          <div class="hit-test-height">
+            <el-empty v-if="first" :image="emptyImg" description="命中段落显示在这里" />
+            <el-empty v-else-if="paragraphDetail.length == 0" description="没有命中的分段" />
+            <el-row v-else>
+              <el-col
+                :xs="24"
+                :sm="12"
+                :md="12"
+                :lg="8"
+                :xl="6"
+                v-for="(item, index) in paragraphDetail"
+                :key="index"
+                class="p-8"
+              >
+                <CardBox
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="document-card layout-bg layout-bg cursor"
+                  :class="item.is_active ? '' : 'disabled'"
+                  :showIcon="false"
+                  @click="editParagraph(item)"
+                >
+                  <template #icon>
+                    <AppAvatar class="mr-12 avatar-light" :size="22">
+                      {{ index + 1 + '' }}</AppAvatar
+                    >
+                  </template>
+                  <div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <el-text>
+                        <el-icon>
+                          <Document />
+                        </el-icon>
+                        {{ item?.document_name }}
+                      </el-text>
+                      <div v-if="item.trample_num || item.star_num">
+                        <span v-if="item.star_num">
+                          <AppIcon iconName="app-like-color"></AppIcon>
+                          {{ item.star_num }}
+                        </span>
+                        <span v-if="item.trample_num" class="ml-4">
+                          <AppIcon iconName="app-oppose-color"></AppIcon>
+                          {{ item.trample_num }}
+                        </span>
+                      </div>
+                    </div>
+                  </template>
+                </CardBox>
+              </el-col>
+            </el-row>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
+    </LayoutContainer>
+    <div class="hit-test__operate p-24 pt-0">
+      <el-popover :visible="popoverVisible" placement="right-end" :width="500" trigger="click">
+        <template #reference>
+          <el-button icon="Setting" class="mb-8" @click="settingChange('open')">参数设置</el-button>
+        </template>
+        <div class="mb-16">
+          <div class="title mb-8">检索模式</div>
+          <el-radio-group
+            v-model="cloneForm.search_mode"
+            class="card__radio"
+            @change="changeHandle"
+          >
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'embedding' ? 'active' : ''"
+            >
+              <el-radio value="embedding" size="large">
+                <p class="mb-4">向量检索</p>
+                <el-text type="info">通过向量距离计算与用户问题最相似的文本分段</el-text>
+              </el-radio>
+            </el-card>
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'keywords' ? 'active' : ''"
+            >
+              <el-radio value="keywords" size="large">
+                <p class="mb-4">全文检索</p>
+                <el-text type="info">通过关键词检索，返回包含关键词最多的文本分段</el-text>
+              </el-radio>
+            </el-card>
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'blend' ? 'active' : ''"
+            >
+              <el-radio value="blend" size="large">
+                <p class="mb-4">混合检索</p>
+                <el-text type="info"
+                  >同时执行全文检索和向量检索，再进行重排序，从两类查询结果中选择匹配用户问题的最佳结果</el-text
+                >
+              </el-radio>
+            </el-card>
+          </el-radio-group>
+        </div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="mb-16">
+              <div class="title mb-8">相似度高于</div>
+              <el-input-number
+                v-model="cloneForm.similarity"
+                :min="0"
+                :max="cloneForm.search_mode === 'blend' ? 2 : 1"
+                :precision="3"
+                :step="0.1"
+                :value-on-clear="0"
+                controls-position="right"
+                class="w-full"
+              />
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="mb-16">
+              <div class="title mb-8">返回分段数 TOP</div>
+              <el-input-number
+                v-model="cloneForm.top_number"
+                :min="1"
+                :max="100"
+                controls-position="right"
+                class="w-full"
+              />
+            </div>
+          </el-col>
+        </el-row>
+
+        <div class="text-right">
+          <el-button @click="popoverVisible = false">取消</el-button>
+          <el-button type="primary" @click="settingChange('close')">确认</el-button>
+        </div>
+      </el-popover>
+      <div class="operate-textarea flex">
+        <el-input
+          ref="quickInputRef"
+          v-model="inputValue"
+          type="textarea"
+          placeholder="请输入"
+          :autosize="{ minRows: 1, maxRows: 8 }"
+          @keydown.enter="sendChatHandle($event)"
+        />
+        <div class="operate">
+          <el-button
+            text
+            class="sent-button"
+            :disabled="isDisabledChart || loading"
+            @click="sendChatHandle"
+          >
+            <img v-show="isDisabledChart || loading" src="@/assets/icon_send.svg" alt="" />
+            <img
+              v-show="!isDisabledChart && !loading"
+              src="@/assets/icon_send_colorful.svg"
+              alt=""
+            />
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import datasetApi from '@/api/dataset'
+import applicationApi from '@/api/application'
+import ParagraphDialog from '@/views/paragraph/component/ParagraphDialog.vue'
+import { arraySort } from '@/utils/utils'
+import emptyImg from '@/assets/hit-test-empty.png'
+
+const route = useRoute()
+const {
+  meta: { activeMenu },
+  params: { id }
+} = route as any
+
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const inputValue = ref('')
+const formInline = ref({
+  similarity: 0.6,
+  top_number: 5,
+  search_mode: 'embedding'
+})
+
+// 第一次加载
+const first = ref(true)
+
+const cloneForm = ref<any>({})
+
+const popoverVisible = ref(false)
+const questionTitle = ref('')
+
+const isDisabledChart = computed(() => !inputValue.value)
+
+const isApplication = computed(() => {
+  return activeMenu.includes('application')
+})
+const isDataset = computed(() => {
+  return activeMenu.includes('dataset')
+})
+
+function changeHandle(val: string) {
+  if (val === 'keywords') {
+    cloneForm.value.similarity = 0
+  } else {
+    cloneForm.value.similarity = 0.6
+  }
+}
+
+function settingChange(val: string) {
+  if (val === 'open') {
+    popoverVisible.value = true
+    cloneForm.value = cloneDeep(formInline.value)
+  } else if (val === 'close') {
+    popoverVisible.value = false
+    formInline.value = cloneDeep(cloneForm.value)
+  }
+}
+
+function editParagraph(row: any) {
+  title.value = '分段详情'
+  ParagraphDialogRef.value.open(row)
+}
+
+function sendChatHandle(event: any) {
+  if (!event.ctrlKey) {
+    // 如果没有按下组合键ctrl，则会阻止默认事件
+    event.preventDefault()
+    if (!isDisabledChart.value && !loading.value) {
+      getHitTestList()
+    }
+  } else {
+    // 如果同时按下ctrl+回车键，则会换行
+    inputValue.value += '\n'
+  }
+}
+function getHitTestList() {
+  const obj = {
+    query_text: inputValue.value,
+    ...formInline.value
+  }
+  if (isDataset.value) {
+    datasetApi.getDatasetHitTest(id, obj, loading).then((res) => {
+      paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
+      questionTitle.value = inputValue.value
+      inputValue.value = ''
+      first.value = false
+    })
+  } else if (isApplication.value) {
+    applicationApi.getApplicationHitTest(id, obj, loading).then((res) => {
+      paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
+      questionTitle.value = inputValue.value
+      inputValue.value = ''
+      first.value = false
+    })
+  }
+}
+
+function refresh(data: any) {
+  if (data) {
+    const obj = paragraphDetail.value.filter((v) => v.id === data.id)[0]
+    obj.content = data.content
+    obj.title = data.title
+  } else {
+    paragraphDetail.value = []
+    getHitTestList()
+  }
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.hit-test {
+  .question-title {
+    .avatar {
+      float: left;
+    }
+    .content {
+      padding-left: 40px;
+      .text {
+        padding: 6px 0;
+      }
+    }
+  }
+
+  &__operate {
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      :deep(.el-textarea__inner) {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+      }
+      .operate {
+        padding: 6px 10px;
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+        :deep(.el-loading-spinner) {
+          margin-top: -15px;
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+  }
+}
+.hit-test {
+  &__header {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+  }
+
+  .hit-test-height {
+    height: calc(var(--app-main-height) - 170px);
+  }
+  .document-card {
+    height: 210px;
+    border: 1px solid var(--app-layout-bg-color);
+    &:hover {
+      background: #ffffff;
+      border: 1px solid var(--el-border-color);
+    }
+    &.disabled {
+      background: var(--app-layout-bg-color);
+      border: 1px solid var(--app-layout-bg-color);
+      :deep(.description) {
+        color: var(--app-border-color-dark);
+      }
+      :deep(.title) {
+        color: var(--app-border-color-dark);
+      }
+    }
+    :deep(.description) {
+      -webkit-line-clamp: 5 !important;
+      height: 110px;
+    }
+    .active-button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/log/component/ChatRecordDrawer.vue b/src/views/log/component/ChatRecordDrawer.vue
new file mode 100644
index 0000000..8232d72
--- /dev/null
+++ b/src/views/log/component/ChatRecordDrawer.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-drawer v-model="visible" size="60%" @close="closeHandle" class="chat-record-drawer">
+    <template #header>
+      <h4 class="single-line">{{ currentAbstract }}</h4>
+    </template>
+    <div
+      v-loading="paginationConfig.current_page === 1 && loading"
+      class="h-full"
+      style="padding: 24px 0"
+    >
+      <AiChat
+        ref="AiChatRef"
+        :application-details="application"
+        type="log"
+        :record="recordList"
+        @scroll="handleScroll"
+      >
+      </AiChat>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="pre" :disabled="pre_disable || loading">上一条</el-button>
+        <el-button @click="next" :disabled="next_disable || loading">下一条</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { type ApplicationFormType, type chatType } from '@/api/type/application'
+import useStore from '@/stores'
+const AiChatRef = ref()
+const { log } = useStore()
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 应用信息
+     */
+    application?: ApplicationFormType
+    /**
+     * 对话 记录id
+     */
+    chatId: string
+    currentAbstract: string
+    /**
+     * 下一条
+     */
+    next: () => void
+    /**
+     * 上一条
+     */
+    pre: () => void
+
+    pre_disable: boolean
+
+    next_disable: boolean
+  }>(),
+  {}
+)
+
+const emit = defineEmits(['update:chatId', 'update:currentAbstract', 'refresh'])
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+const loading = ref(false)
+const visible = ref(false)
+const recordList = ref<chatType[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+function closeHandle() {
+  recordList.value = []
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(id as string, props.chatId, paginationConfig, loading)
+    .then((res: any) => {
+      paginationConfig.total = res.data.total
+      const list = res.data.records
+      recordList.value = [...list, ...recordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+watch(
+  () => props.chatId,
+  () => {
+    recordList.value = []
+    paginationConfig.total = 0
+    paginationConfig.current_page = 1
+    if (props.chatId) {
+      getChatRecord()
+    }
+  }
+)
+
+watch(visible, (bool) => {
+  if (!bool) {
+    emit('update:chatId', '')
+    emit('update:currentAbstract', '')
+    emit('refresh')
+  }
+})
+
+function handleScroll(event: any) {
+  if (
+    props.chatId !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.total > recordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+const open = () => {
+  visible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss">
+.single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-record-drawer {
+  .el-drawer__body {
+    background: var(--app-layout-bg-color);
+    padding: 0;
+  }
+
+  :deep(.el-divider__text) {
+    background: var(--app-layout-bg-color);
+  }
+}
+</style>
diff --git a/src/views/log/component/EditContentDialog.vue b/src/views/log/component/EditContentDialog.vue
new file mode 100644
index 0000000..c929054
--- /dev/null
+++ b/src/views/log/component/EditContentDialog.vue
@@ -0,0 +1,294 @@
+<template>
+  <el-dialog
+    title="修改内容"
+    v-model="dialogVisible"
+    width="600"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      label-position="top"
+      require-asterisk-position="right"
+      :rules="rules"
+      @submit.prevent
+    >
+      <el-form-item label="关联问题">
+        <el-input
+          v-model="form.problem_text"
+          placeholder="关联问题"
+          maxlength="256"
+          show-word-limit
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="内容" prop="content">
+        <MdEditor
+          v-model="form.content"
+          placeholder="请输入内容"
+          :maxLength="100000"
+          :preview="false"
+          :toolbars="toolbars"
+          style="height: 300px"
+          @onUploadImg="onUploadImg"
+          :footers="footers"
+        >
+          <template #defFooters>
+            <span style="margin-left: -6px">/ 100000</span>
+          </template>
+        </MdEditor>
+      </el-form-item>
+      <el-form-item label="标题">
+        <el-input
+          show-word-limit
+          v-model="form.title"
+          placeholder="请给当前内容设置一个标题，以便管理查看"
+          maxlength="256"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="选择知识库" prop="dataset_id">
+        <el-select
+          v-model="form.dataset_id"
+          filterable
+          placeholder="请选择知识库"
+          :loading="optionLoading"
+          @change="changeDataset"
+        >
+          <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id">
+            <span class="flex align-center">
+              <AppAvatar
+                v-if="!item.dataset_id && item.type === '1'"
+                class="mr-12 avatar-purple"
+                shape="square"
+                :size="24"
+              >
+                <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="!item.dataset_id && item.type === '0'"
+                class="mr-12 avatar-blue"
+                shape="square"
+                :size="24"
+              >
+                <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+              </AppAvatar>
+              {{ item.name }}
+            </span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="保存至文档" prop="document_id">
+        <el-select
+          v-model="form.document_id"
+          filterable
+          placeholder="请选择文档"
+          :loading="optionLoading"
+          @change="changeDocument"
+        >
+          <el-option
+            v-for="item in documentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitForm(formRef)" :loading="loading"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import logApi from '@/api/log'
+import imageApi from '@/api/image'
+import useStore from '@/stores'
+
+const { application, document, user } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+const formRef = ref()
+
+const toolbars = [
+  'bold',
+  'underline',
+  'italic',
+  '-',
+  'title',
+  'strikeThrough',
+  'sub',
+  'sup',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'task',
+  '-',
+  'codeRow',
+  'code',
+  'link',
+  'image',
+  'table',
+  'mermaid',
+  'katex',
+  '-',
+  'revoke',
+  'next',
+  '=',
+  'pageFullscreen',
+  'preview',
+  'htmlPreview'
+] as any[]
+
+const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch']
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const form = ref<any>({
+  chat_id: '',
+  record_id: '',
+  problem_text: '',
+  title: '',
+  content: '',
+  dataset_id: '',
+  document_id: ''
+})
+
+const rules = reactive<FormRules>({
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+  dataset_id: [{ required: true, message: '请选择知识库', trigger: 'change' }],
+  document_id: [{ required: true, message: '请选择文档', trigger: 'change' }]
+})
+
+const datasetList = ref<any[]>([])
+const documentList = ref<any[]>([])
+const optionLoading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      chat_id: '',
+      record_id: '',
+      problem_text: '',
+      title: '',
+      content: '',
+      dataset_id: '',
+      document_id: ''
+    }
+    datasetList.value = []
+    documentList.value = []
+    formRef.value?.clearValidate()
+  }
+})
+
+const onUploadImg = async (files: any, callback: any) => {
+  const res = await Promise.all(
+    files.map((file: any) => {
+      return new Promise((rev, rej) => {
+        const fd = new FormData()
+        fd.append('file', file)
+
+        imageApi
+          .postImage(fd)
+          .then((res: any) => {
+            rev(res)
+          })
+          .catch((error) => rej(error))
+      })
+    })
+  )
+
+  callback(res.map((item) => item.data))
+}
+
+function changeDataset(dataset_id: string) {
+  localStorage.setItem(id + 'chat_dataset_id', dataset_id)
+  form.value.document_id = ''
+  getDocument(dataset_id)
+}
+
+function changeDocument(document_id: string) {
+  localStorage.setItem(id + 'chat_document_id', document_id)
+}
+
+function getDocument(dataset_id: string) {
+  document.asyncGetAllDocument(dataset_id, loading).then((res: any) => {
+    documentList.value = res.data
+    if (localStorage.getItem(id + 'chat_document_id')) {
+      form.value.document_id = localStorage.getItem(id + 'chat_document_id') as string
+    }
+    if (!documentList.value.find((v) => v.id === form.value.document_id)) {
+      form.value.document_id = ''
+    }
+  })
+}
+
+function getDataset() {
+  application.asyncGetApplicationDataset(id, loading).then((res: any) => {
+    datasetList.value = res.data
+    if (localStorage.getItem(id + 'chat_dataset_id')) {
+      form.value.dataset_id = localStorage.getItem(id + 'chat_dataset_id') as string
+      if (!datasetList.value.find((v) => v.id === form.value.dataset_id)) {
+        form.value.dataset_id = ''
+        form.value.document_id = ''
+      } else {
+        getDocument(form.value.dataset_id)
+      }
+    }
+  })
+}
+
+const open = (data: any) => {
+  getDataset()
+  form.value.chat_id = data.chat_id
+  form.value.record_id = data.id
+  form.value.problem_text = data.problem_text ? data.problem_text.substring(0, 256) : ''
+  form.value.content = data.answer_text
+  formRef.value?.clearValidate()
+  dialogVisible.value = true
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      const obj = {
+        title: form.value.title,
+        content: form.value.content,
+        problem_text: form.value.problem_text
+      }
+      logApi
+        .putChatRecordLog(
+          id,
+          form.value.chat_id,
+          form.value.record_id,
+          form.value.dataset_id,
+          form.value.document_id,
+          obj,
+          loading
+        )
+        .then((res: any) => {
+          emit('refresh', res.data)
+          dialogVisible.value = false
+        })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/log/component/EditMarkDialog.vue b/src/views/log/component/EditMarkDialog.vue
new file mode 100644
index 0000000..06fa99e
--- /dev/null
+++ b/src/views/log/component/EditMarkDialog.vue
@@ -0,0 +1,160 @@
+<template>
+  <el-dialog
+    title="修改标注"
+    v-model="dialogVisible"
+    width="600"
+    class="edit-mark-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between">
+        <h4 :id="titleId" :class="titleClass">修改标注</h4>
+        <div class="text-right">
+          <el-button text @click="isEdit = true" v-if="!isEdit">
+            <el-icon><EditPen /></el-icon>
+          </el-button>
+          <el-button text style="margin-left: 4px" @click="deleteMark">
+            <el-icon><Delete /></el-icon>
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+    </template>
+
+    <el-scrollbar>
+      <div style="min-height: 250px; max-height: 350px" v-loading="loading">
+        <el-form
+          v-if="isEdit"
+          ref="formRef"
+          :model="form"
+          label-position="top"
+          require-asterisk-position="right"
+          :rules="rules"
+          @submit.prevent
+        >
+          <el-form-item prop="content">
+            <el-input
+              v-model="form.content"
+              placeholder="请输入分段内容"
+              maxlength="100000"
+              show-word-limit
+              :rows="15"
+              type="textarea"
+            >
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <span v-else class="pre-wrap">{{ form?.content }}</span>
+      </div>
+    </el-scrollbar>
+
+    <template #footer>
+      <span class="dialog-footer" v-if="isEdit">
+        <el-button @click.prevent="isEdit = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(formRef)" :loading="loading"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import logApi from '@/api/log'
+import useStore from '@/stores'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const { paragraph } = useStore()
+
+const emit = defineEmits(['refresh'])
+
+const formRef = ref()
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const form = ref<any>({})
+const isEdit = ref(false)
+const detail = ref<any>({})
+
+const rules = reactive<FormRules>({
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {}
+    isEdit.value = false
+  }
+})
+
+function deleteMark() {
+  logApi
+    .delMarkRecord(
+      id as string,
+      detail.value.chat_id,
+      detail.value.id,
+      form.value.dataset,
+      form.value.document,
+      form.value.id,
+      loading
+    )
+    .then(() => {
+      emit('refresh')
+      MsgSuccess('删除成功')
+      dialogVisible.value = false
+    })
+}
+
+function getMark(data: any) {
+  logApi.getMarkRecord(id as string, data.chat_id, data.id, loading).then((res: any) => {
+    if (res.data.length > 0) {
+      form.value = res.data[0]
+    }
+  })
+}
+
+const open = (data: any) => {
+  detail.value = data
+  getMark(data)
+  dialogVisible.value = true
+}
+const submit = async (formEl: FormInstance) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      paragraph
+        .asyncPutParagraph(
+          form.value.dataset,
+          form.value.document,
+          form.value.id,
+          {
+            content: form.value.content
+          },
+          loading
+        )
+        .then((res) => {
+          dialogVisible.value = false
+        })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.edit-mark-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 15px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>
diff --git a/src/views/log/index.vue b/src/views/log/index.vue
new file mode 100644
index 0000000..7305e08
--- /dev/null
+++ b/src/views/log/index.vue
@@ -0,0 +1,630 @@
+<template>
+  <LayoutContainer header="对话日志">
+    <div class="p-24">
+      <div class="mb-16">
+        <el-select v-model="history_day" class="mr-12 w-120" @change="changeDayHandle">
+          <el-option
+            v-for="item in dayOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-date-picker
+          v-if="history_day === 'other'"
+          v-model="daterangeValue"
+          type="daterange"
+          :start-placeholder="$t('views.applicationOverview.monitor.startDatePlaceholder')"
+          :end-placeholder="$t('views.applicationOverview.monitor.endDatePlaceholder')"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          @change="changeDayRangeHandle"
+        />
+        <el-input
+          v-model="search"
+          @change="getList"
+          placeholder="搜索"
+          prefix-icon="Search"
+          class="w-240"
+          style="margin-left: 10px"
+          clearable
+        />
+        <div style="display: flex; align-items: center" class="float-right">
+          <el-button @click="dialogVisible = true">清除策略</el-button>
+          <el-button @click="exportLog">导出</el-button>
+          <el-button @click="openDocumentDialog" :disabled="multipleSelection.length === 0"
+            >添加至知识库
+          </el-button>
+        </div>
+      </div>
+
+      <app-table
+        :data="tableData"
+        :pagination-config="paginationConfig"
+        @sizeChange="getList"
+        @changePage="getList"
+        @row-click="rowClickHandle"
+        v-loading="loading"
+        :row-class-name="setRowClass"
+        @selection-change="handleSelectionChange"
+        class="log-table"
+        ref="multipleTableRef"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="abstract" label="摘要" show-overflow-tooltip />
+        <el-table-column prop="chat_record_count" label="对话提问数" align="right" />
+        <el-table-column prop="star_num" align="right">
+          <template #header>
+            <div>
+              <span>用户反馈</span>
+              <el-popover :width="190" trigger="click" :visible="popoverVisible">
+                <template #reference>
+                  <el-button
+                    style="margin-top: -2px"
+                    :type="filter.min_star || filter.min_trample ? 'primary' : ''"
+                    link
+                    @click="popoverVisible = !popoverVisible"
+                  >
+                    <el-icon>
+                      <Filter />
+                    </el-icon>
+                  </el-button>
+                </template>
+                <div class="filter">
+                  <div class="form-item mb-16">
+                    <div @click.stop>
+                      赞同 >=
+                      <el-input-number
+                        v-model="filter.min_star"
+                        :min="0"
+                        :step="1"
+                        :value-on-clear="0"
+                        controls-position="right"
+                        style="width: 100px"
+                        size="small"
+                        step-strictly
+                      />
+                    </div>
+                  </div>
+                  <div class="form-item mb-16">
+                    <div @click.stop>
+                      反对 >=
+                      <el-input-number
+                        v-model="filter.min_trample"
+                        :min="0"
+                        :step="1"
+                        :value-on-clear="0"
+                        controls-position="right"
+                        style="width: 100px"
+                        size="small"
+                        step-strictly
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="text-right">
+                  <el-button size="small" @click="filterChange('clear')">清除</el-button>
+                  <el-button type="primary" @click="filterChange" size="small">确认</el-button>
+                </div>
+              </el-popover>
+            </div>
+          </template>
+          <template #default="{ row }">
+            <span class="mr-8" v-if="!row.trample_num && !row.star_num"> - </span>
+            <span class="mr-8" v-else>
+              <span v-if="row.star_num">
+                <AppIcon iconName="app-like-color"></AppIcon>
+                {{ row.star_num }}
+              </span>
+              <span v-if="row.trample_num" class="ml-8">
+                <AppIcon iconName="app-oppose-color"></AppIcon>
+                {{ row.trample_num }}
+              </span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mark_sum" label="改进标注" align="right" />
+        <el-table-column label="最近对话时间" width="180">
+          <template #default="{ row }">
+            {{ datetimeFormat(row.update_time) }}
+          </template>
+        </el-table-column>
+
+        <!-- <el-table-column label="操作" width="70" align="left">
+          <template #default="{ row }">
+            <el-tooltip effect="dark" content="删除" placement="top">
+              <el-button type="primary" text @click.stop="deleteLog(row)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column> -->
+      </app-table>
+    </div>
+    <ChatRecordDrawer
+      :next="nextChatRecord"
+      :pre="preChatRecord"
+      ref="ChatRecordRef"
+      v-model:chatId="currentChatId"
+      v-model:currentAbstract="currentAbstract"
+      :application="detail"
+      :pre_disable="pre_disable"
+      :next_disable="next_disable"
+      @refresh="refresh"
+    />
+    <el-dialog
+      title="清除策略"
+      v-model="dialogVisible"
+      width="25%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <span>删除</span>
+      <el-input-number
+        v-model="days"
+        controls-position="right"
+        :min="1"
+        :max="100000"
+        :value-on-clear="0"
+        step-strictly
+        style="width: 110px; margin-left: 8px; margin-right: 8px"
+      ></el-input-number>
+      <span>天之前的对话记录</span>
+      <template #footer>
+        <div class="dialog-footer" style="margin-top: 16px">
+          <el-button @click="dialogVisible = false"
+            >{{ $t('layout.topbar.avatar.dialog.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="saveCleanTime">
+            {{ $t('layout.topbar.avatar.dialog.save') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      title="添加至知识库"
+      v-model="documentDialogVisible"
+      width="50%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        label-position="top"
+        require-asterisk-position="right"
+        :rules="rules"
+        @submit.prevent
+      >
+        <el-form-item label="选择知识库" prop="dataset_id">
+          <el-select
+            v-model="form.dataset_id"
+            filterable
+            placeholder="请选择知识库"
+            :loading="optionLoading"
+            @change="changeDataset"
+          >
+            <el-option
+              v-for="item in datasetList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+              <span class="flex align-center">
+                <AppAvatar
+                  v-if="!item.dataset_id && item.type === '1'"
+                  class="mr-12 avatar-purple"
+                  shape="square"
+                  :size="24"
+                >
+                  <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="!item.dataset_id && item.type === '0'"
+                  class="mr-12 avatar-blue"
+                  shape="square"
+                  :size="24"
+                >
+                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                </AppAvatar>
+                {{ item.name }}
+              </span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="保存至文档" prop="document_id">
+          <el-select
+            v-model="form.document_id"
+            filterable
+            placeholder="请选择文档"
+            :loading="optionLoading"
+            @change="changeDocument"
+          >
+            <el-option
+              v-for="item in documentList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+              {{ item.name }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click.prevent="documentDialogVisible = false"> 取消 </el-button>
+          <el-button type="primary" @click="submitForm(formRef)" :loading="documentLoading">
+            保存
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import ChatRecordDrawer from './component/ChatRecordDrawer.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import logApi from '@/api/log'
+import { beforeDay, datetimeFormat, nowDate } from '@/utils/time'
+import useStore from '@/stores'
+import type { Dict } from '@/api/type/common'
+import { t } from '@/locales'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElTable } from 'element-plus'
+
+const { application, log, document, user } = useStore()
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+const formRef = ref()
+
+const dayOptions = [
+  {
+    value: 7,
+    // @ts-ignore
+    label: t('views.applicationOverview.monitor.pastDayOptions.past7Days') // 使用 t 方法来国际化显示文本
+  },
+  {
+    value: 30,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past30Days')
+  },
+  {
+    value: 90,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past90Days')
+  },
+  {
+    value: 183,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past183Days')
+  },
+  {
+    value: 'other',
+    label: t('views.applicationOverview.monitor.pastDayOptions.other')
+  }
+]
+const daterangeValue = ref('')
+// 提交日期时间
+const daterange = ref({
+  start_time: '',
+  end_time: ''
+})
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<any[]>([])
+
+const ChatRecordRef = ref()
+const loading = ref(false)
+const documentLoading = ref(false)
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+const dialogVisible = ref(false)
+const documentDialogVisible = ref(false)
+const days = ref<number>(180)
+const tableData = ref<any[]>([])
+const tableIndexMap = computed<Dict<number>>(() => {
+  return tableData.value
+    .map((row, index) => ({
+      [row.id]: index
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
+const history_day = ref<number | string>(7)
+
+const search = ref('')
+const detail = ref<any>(null)
+
+const currentChatId = ref<string>('')
+const currentAbstract = ref<string>('')
+const popoverVisible = ref(false)
+const defaultFilter = {
+  min_star: 0,
+  min_trample: 0,
+  comparer: 'and'
+}
+const filter = ref<any>({
+  min_star: 0,
+  min_trample: 0,
+  comparer: 'and'
+})
+
+const form = ref<any>({
+  dataset_id: '',
+  document_id: ''
+})
+
+const rules = reactive<FormRules>({
+  dataset_id: [{ required: true, message: '请选择知识库', trigger: 'change' }],
+  document_id: [{ required: true, message: '请选择文档', trigger: 'change' }]
+})
+
+const optionLoading = ref(false)
+const documentList = ref<any[]>([])
+
+function filterChange(val: string) {
+  if (val === 'clear') {
+    filter.value = cloneDeep(defaultFilter)
+  }
+  getList()
+  popoverVisible.value = false
+}
+
+/**
+ * 下一页
+ */
+const nextChatRecord = () => {
+  let index = tableIndexMap.value[currentChatId.value] + 1
+  if (index >= tableData.value.length) {
+    if (
+      index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+    ) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page + 1
+    getList().then(() => {
+      index = 0
+      currentChatId.value = tableData.value[index].id
+      currentAbstract.value = tableData.value[index].abstract
+    })
+  } else {
+    currentChatId.value = tableData.value[index].id
+    currentAbstract.value = tableData.value[index].abstract
+  }
+}
+const pre_disable = computed(() => {
+  let index = tableIndexMap.value[currentChatId.value] - 1
+  return index < 0 && paginationConfig.current_page <= 1
+})
+
+const next_disable = computed(() => {
+  let index = tableIndexMap.value[currentChatId.value] + 1
+  return (
+    index >= tableData.value.length &&
+    index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+  )
+})
+/**
+ * 上一页
+ */
+const preChatRecord = () => {
+  let index = tableIndexMap.value[currentChatId.value] - 1
+
+  if (index < 0) {
+    if (paginationConfig.current_page <= 1) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page - 1
+    getList().then(() => {
+      index = paginationConfig.page_size - 1
+      currentChatId.value = tableData.value[index].id
+      currentAbstract.value = tableData.value[index].abstract
+    })
+  } else {
+    currentChatId.value = tableData.value[index].id
+    currentAbstract.value = tableData.value[index].abstract
+  }
+}
+
+function rowClickHandle(row: any, column?: any) {
+  if (column && column.type === 'selection') {
+    return
+  }
+  currentChatId.value = row.id
+  currentAbstract.value = row.abstract
+  ChatRecordRef.value.open()
+}
+
+const setRowClass = ({ row }: any) => {
+  return currentChatId.value === row?.id ? 'highlight' : ''
+}
+
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+
+function deleteLog(row: any) {
+  MsgConfirm(`是否删除对话：${row.abstract} ?`, `删除后无法恢复，请谨慎操作。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      loading.value = true
+      logApi.delChatLog(id as string, row.id, loading).then(() => {
+        MsgSuccess('删除成功')
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+function getList() {
+  let obj: any = {
+    start_time: daterange.value.start_time,
+    end_time: daterange.value.end_time,
+    ...filter.value
+  }
+  if (search.value) {
+    obj = { ...obj, abstract: search.value }
+  }
+  return log.asyncGetChatLog(id as string, paginationConfig, obj, loading).then((res: any) => {
+    tableData.value = res.data.records
+    if (currentChatId.value) {
+      currentChatId.value = tableData.value[0]?.id
+    }
+    paginationConfig.total = res.data.total
+  })
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id as string, loading).then((res: any) => {
+    detail.value = res.data
+    days.value = res.data.clean_time
+  })
+}
+
+const exportLog = () => {
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  if (detail.value) {
+    let obj: any = {
+      start_time: daterange.value.start_time,
+      end_time: daterange.value.end_time,
+      ...filter.value
+    }
+    if (search.value) {
+      obj = { ...obj, abstract: search.value }
+    }
+
+    logApi.exportChatLog(detail.value.id, detail.value.name, obj, { select_ids: arr }, loading)
+  }
+}
+
+function refresh() {
+  getList()
+}
+
+function changeDayRangeHandle(val: string) {
+  daterange.value.start_time = val[0]
+  daterange.value.end_time = val[1]
+  getList()
+}
+
+function changeDayHandle(val: number | string) {
+  if (val !== 'other') {
+    daterange.value.start_time = beforeDay(val)
+    daterange.value.end_time = nowDate
+    getList()
+  }
+}
+
+function saveCleanTime() {
+  const obj = {
+    clean_time: days.value
+  }
+  application
+    .asyncPutApplication(id as string, obj, loading)
+    .then(() => {
+      MsgSuccess('保存成功')
+      dialogVisible.value = false
+      getDetail()
+    })
+    .catch(() => {
+      dialogVisible.value = false
+    })
+}
+
+function changeDataset(dataset_id: string) {
+  localStorage.setItem(id + 'chat_dataset_id', dataset_id)
+  form.value.document_id = ''
+  getDocument(dataset_id)
+}
+
+function changeDocument(document_id: string) {
+  localStorage.setItem(id + 'chat_document_id', document_id)
+}
+
+const datasetList = ref<any[]>([])
+
+function getDataset() {
+  application.asyncGetApplicationDataset(id, documentLoading).then((res: any) => {
+    datasetList.value = res.data
+    if (localStorage.getItem(id + 'chat_dataset_id')) {
+      form.value.dataset_id = localStorage.getItem(id + 'chat_dataset_id') as string
+      if (!datasetList.value.find((v) => v.id === form.value.dataset_id)) {
+        form.value.dataset_id = ''
+        form.value.document_id = ''
+      } else {
+        getDocument(form.value.dataset_id)
+      }
+    }
+  })
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  await formEl.validate((valid) => {
+    if (valid) {
+      const obj = {
+        document_id: form.value.document_id,
+        dataset_id: form.value.dataset_id,
+        chat_ids: arr
+      }
+      logApi.postChatRecordLog(id, form.value.dataset_id, obj, documentLoading).then((res: any) => {
+        multipleTableRef.value?.clearSelection()
+        documentDialogVisible.value = false
+      })
+    }
+  })
+}
+
+function getDocument(dataset_id: string) {
+  document.asyncGetAllDocument(dataset_id, documentLoading).then((res: any) => {
+    documentList.value = res.data
+    if (localStorage.getItem(id + 'chat_document_id')) {
+      form.value.document_id = localStorage.getItem(id + 'chat_document_id') as string
+    }
+    if (!documentList.value.find((v) => v.id === form.value.document_id)) {
+      form.value.document_id = ''
+    }
+  })
+}
+
+function openDocumentDialog() {
+  getDataset()
+  formRef.value?.clearValidate()
+  documentDialogVisible.value = true
+}
+
+onMounted(() => {
+  changeDayHandle(history_day.value)
+  getDetail()
+})
+</script>
+<style lang="scss" scoped>
+.log-table {
+  :deep(tr) {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login/components/QrCodeTab.vue b/src/views/login/components/QrCodeTab.vue
new file mode 100644
index 0000000..cf9255c
--- /dev/null
+++ b/src/views/login/components/QrCodeTab.vue
@@ -0,0 +1,76 @@
+<template>
+  <el-tabs v-model="activeKey" @tab-change="selectTab">
+    <template v-for="item in tabs" :key="item.key">
+      <el-tab-pane :label="item.value" :name="item.key">
+        <div class="text-center mt-16" v-if="item.key === activeKey">
+          <component
+            :is="defineAsyncComponent(() => import(`./${item.key}QrCode.vue`))"
+            :config="config"
+          />
+        </div>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, defineAsyncComponent } from 'vue'
+
+import platformApi from '@/api/platform-source'
+
+interface Tab {
+  key: string
+  value: string
+}
+
+interface PlatformConfig {
+  app_key: string
+  app_secret: string
+  platform: string
+  config: any
+}
+
+interface Config {
+  app_key: string
+  app_secret: string
+  corpId?: string
+  agentId?: string
+}
+
+const props = defineProps<{ tabs: Tab[] }>()
+const activeKey = ref('')
+const allConfigs = ref<PlatformConfig[]>([])
+const config = ref<Config>({ app_key: '', app_secret: '' })
+// const logoUrl = ref('')
+
+async function getPlatformInfo() {
+  try {
+    const res = await platformApi.getPlatformInfo()
+    return res.data
+  } catch (error) {
+    return []
+  }
+}
+
+onMounted(async () => {
+  if (props.tabs.length > 0) {
+    activeKey.value = props.tabs[0].key
+  }
+  allConfigs.value = await getPlatformInfo()
+  updateConfig(activeKey.value)
+})
+
+const updateConfig = (key: string) => {
+  const selectedConfig = allConfigs.value.find((item) => item.platform === key)
+  if (selectedConfig && selectedConfig.config) {
+    config.value = selectedConfig.config
+  }
+}
+
+const selectTab = (key: string) => {
+  activeKey.value = key
+  updateConfig(key)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/login/components/dingtalkQrCode.vue b/src/views/login/components/dingtalkQrCode.vue
new file mode 100644
index 0000000..0af09f1
--- /dev/null
+++ b/src/views/login/components/dingtalkQrCode.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="flex-center mb-16">
+    <img src="@/assets/logo_dingtalk.svg" alt="" width="24px" class="mr-4" />
+    <h2>钉钉扫码登录</h2>
+  </div>
+  <div class="ding-talk-qrName">
+    <div id="ding-talk-qr"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useScriptTag } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import useStore from '@/stores'
+import { MsgError } from '@/utils/message'
+
+// 声明 DTFrameLogin 和 QRLogin 的类型
+declare global {
+  interface Window {
+    DTFrameLogin: (
+      frameParams: IDTLoginFrameParams,
+      loginParams: IDTLoginLoginParams,
+      successCbk: (result: IDTLoginSuccess) => void,
+      errorCbk?: (errorMsg: string) => void
+    ) => void
+    QRLogin: (QRLogin: qrLogin) => Record<any, any>
+  }
+}
+
+// 定义接口类型
+interface IDTLoginFrameParams {
+  id: string
+  width?: number
+  height?: number
+}
+
+interface IDTLoginLoginParams {
+  redirect_uri: string
+  response_type: string
+  client_id: string
+  scope: string
+  prompt: string
+  state?: string
+  org_type?: string
+  corpId?: string
+  exclusiveLogin?: string
+  exclusiveCorpId?: string
+}
+
+interface IDTLoginSuccess {
+  redirectUrl: string
+  authCode: string
+  state?: string
+}
+
+interface qrLogin {
+  id: string
+  goto: string
+  width: string
+  height: string
+  style?: string
+}
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+    corp_id: string
+  }
+}>()
+
+const router = useRouter()
+const { user } = useStore()
+const { load } = useScriptTag('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js')
+const isConfigReady = ref(false)
+
+const initActive = async () => {
+  try {
+    await load(true)
+    if (!isConfigReady.value) {
+      return
+    }
+    console.log(props.config)
+
+    const data = {
+      appKey: props.config.app_key,
+      appSecret: props.config.app_secret,
+      corp_id: props.config.corp_id
+    }
+
+    const redirectUri = encodeURIComponent(window.location.origin)
+    window.DTFrameLogin(
+      {
+        id: 'ding-talk-qr',
+        width: 280,
+        height: 280
+      },
+      {
+        redirect_uri: redirectUri,
+        client_id: data.appKey,
+        scope: 'openid',
+        response_type: 'code',
+        state: 'fit2cloud-ding-qr',
+        prompt: 'consent'
+      },
+      (loginResult) => {
+        const authCode = loginResult.authCode
+        user.dingCallback(authCode).then(() => {
+          router.push({ name: 'home' })
+        })
+      },
+      (errorMsg: string) => {
+        MsgError(errorMsg)
+        console.log(errorMsg)
+      }
+    )
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+watch(
+  () => props.config,
+  (newConfig) => {
+    if (newConfig.app_secret && newConfig.app_key && newConfig.corp_id) {
+      isConfigReady.value = true
+      initActive()
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss">
+.ding-talk-qrName {
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  height: 280px;
+  width: 280px;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/views/login/components/larkQrCode.vue b/src/views/login/components/larkQrCode.vue
new file mode 100644
index 0000000..58f0027
--- /dev/null
+++ b/src/views/login/components/larkQrCode.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex-center mb-16">
+    <img src="@/assets/logo_lark.svg " alt="" width="24px" class="mr-4" />
+    <h2>飞书扫码登录</h2>
+  </div>
+  <div id="lark-qr" class="lark-qrName"></div>
+</template>
+
+<script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core'
+import { onMounted } from 'vue'
+
+const { load } = useScriptTag(
+  'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+)
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+  }
+}>()
+
+const initActive = async () => {
+  const scriptLoaded = await load(true)
+  if (!scriptLoaded) {
+    console.error('飞书二维码 SDK 加载失败')
+    return
+  }
+
+  const data = {
+    agentId: props.config.app_key,
+    appSecret: props.config.app_secret
+  }
+
+  const redirectUrl = encodeURIComponent(`${window.location.origin}/api/feishu`)
+  const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${redirectUrl}&response_type=code&state=fit2cloud-lark-qr`
+
+  const QRLoginObj = window.QRLogin({
+    id: 'lark-qr',
+    goto: url,
+    width: '266',
+    height: '266',
+    style: 'width:280px;height:280px;border:1px solid #e8e8e8;margin:0 auto;border-radius:8px;'
+  })
+
+  window.addEventListener('message', async (event: any) => {
+    if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
+      const loginTmpCode = event.data.tmp_code
+      window.location.href = `${url}&tmp_code=${loginTmpCode}`
+    }
+  })
+}
+
+onMounted(() => {
+  initActive()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/login/components/wecomQrCode.vue b/src/views/login/components/wecomQrCode.vue
new file mode 100644
index 0000000..5487ef9
--- /dev/null
+++ b/src/views/login/components/wecomQrCode.vue
@@ -0,0 +1,72 @@
+<template>
+  <div id="wecom-qr" class="wecom-qr" style="margin-left: 50px"></div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import * as ww from '@wecom/jssdk'
+import { WWLoginPanelSizeType, WWLoginRedirectType, WWLoginType } from '@wecom/jssdk'
+import { ref, nextTick, defineProps } from 'vue'
+import { MsgError } from '@/utils/message'
+import useStore from '@/stores'
+
+const router = useRouter()
+
+const wwLogin = ref({})
+const obj = ref<any>({ isWeComLogin: false })
+const { user } = useStore()
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+    corp_id?: string
+    agent_id?: string
+  }
+}>()
+
+const init = async () => {
+  await nextTick() // 确保DOM已更新
+  const data = {
+    corpId: props.config.corp_id,
+    agentId: props.config.agent_id
+  }
+  const redirectUri = window.location.origin
+  try {
+    wwLogin.value = ww.createWWLoginPanel({
+      el: '#wecom-qr',
+      params: {
+        login_type: WWLoginType.corpApp,
+        appid: data.corpId || '',
+        agentid: data.agentId,
+        redirect_uri: redirectUri,
+        state: 'fit2cloud-wecom-qr',
+        redirect_type: WWLoginRedirectType.callback,
+        panel_size: WWLoginPanelSizeType.small
+      },
+      onCheckWeComLogin: obj.value,
+      async onLoginSuccess({ code }: any) {
+        user.wecomCallback(code).then(() => {
+          setTimeout(() => {
+            router.push({ name: 'home' })
+          })
+        })
+      },
+      onLoginFail(err) {
+        MsgError(`${err.errMsg}`)
+      }
+    })
+  } catch (error) {
+    console.error('Error initializing login panel:', error)
+  }
+}
+
+init()
+</script>
+
+<style scoped lang="scss">
+.wecom-qr {
+  margin-top: -20px;
+  height: 331px;
+}
+</style>
diff --git a/src/views/login/forgot-password/index.vue b/src/views/login/forgot-password/index.vue
new file mode 100644
index 0000000..681e1b8
--- /dev/null
+++ b/src/views/login/forgot-password/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <login-layout>
+    <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库问答系统">
+      <h2 class="mb-24">忘记密码</h2>
+      <el-form
+        class="register-form"
+        ref="resetPasswordFormRef"
+        :model="CheckEmailForm"
+        :rules="rules"
+      >
+        <div class="mb-24">
+          <el-form-item prop="email">
+            <el-input
+              size="large"
+              class="input-item"
+              v-model="CheckEmailForm.email"
+              placeholder="请输入邮箱"
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="code">
+            <div class="flex-between w-full">
+              <el-input
+                size="large"
+                class="code-input"
+                v-model="CheckEmailForm.code"
+                placeholder="请输入验证码"
+              >
+              </el-input>
+
+              <el-button
+                :disabled="isDisabled"
+                size="large"
+                class="send-email-button ml-12"
+                @click="sendEmail"
+                :loading="loading"
+              >
+                {{ isDisabled ? `重新发送（${time}s）` : '获取验证码' }}</el-button
+              >
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-button size="large" type="primary" class="w-full" @click="checkCode">立即验证</el-button>
+      <div class="operate-container mt-12">
+        <el-button
+          class="register"
+          @click="router.push('/login')"
+          link
+          type="primary"
+          icon="ArrowLeft"
+        >
+          返回登录
+        </el-button>
+      </div>
+    </LoginContainer>
+  </login-layout>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { CheckCodeRequest } from '@/api/type/user'
+import { useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import UserApi from '@/api/user'
+import { MsgSuccess } from '@/utils/message'
+
+const router = useRouter()
+const CheckEmailForm = ref<CheckCodeRequest>({
+  email: '',
+  code: '',
+  type: 'reset_password'
+})
+
+const resetPasswordFormRef = ref<FormInstance>()
+const rules = ref<FormRules<CheckCodeRequest>>({
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        const emailRegExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
+        if (!emailRegExp.test(value) && value != '') {
+          callback(new Error('请输入有效邮箱格式！'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  code: [{ required: true, message: '请输入验证码' }]
+})
+const loading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
+
+const checkCode = () => {
+  resetPasswordFormRef.value
+    ?.validate()
+    .then(() => UserApi.checkCode(CheckEmailForm.value, loading))
+    .then(() => router.push({ name: 'reset_password', params: CheckEmailForm.value }))
+}
+/**
+ * 发送验证码
+ */
+const sendEmail = () => {
+  resetPasswordFormRef.value?.validateField('email', (v: boolean) => {
+    if (v) {
+      UserApi.sendEmit(CheckEmailForm.value.email, 'reset_password', loading).then(() => {
+        MsgSuccess('发送验证码成功')
+        isDisabled.value = true
+        handleTimeChange()
+      })
+    }
+  })
+}
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..d0445f1
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,290 @@
+<template>
+  <login-layout v-if="user.isEnterprise() ? user.themeInfo : true" v-loading="loading">
+    <LoginContainer :subTitle="user.themeInfo?.slogan || '欢迎使用智慧生态智能知识库问答系统'">
+      <h2 class="mb-24" v-if="!showQrCodeTab">{{ loginMode || '普通登录' }}</h2>
+      <div v-if="!showQrCodeTab">
+        <el-form
+          class="login-form"
+          :rules="rules"
+          :model="loginForm"
+          ref="loginFormRef"
+          @keyup.enter="login"
+        >
+          <div class="mb-24">
+            <el-form-item prop="username">
+              <el-input
+                size="large"
+                class="input-item"
+                v-model="loginForm.username"
+                placeholder="请输入用户名"
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="mb-24">
+            <el-form-item prop="password">
+              <el-input
+                type="password"
+                size="large"
+                class="input-item"
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                show-password
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <el-button size="large" type="primary" class="w-full" @click="login">登录</el-button>
+        <div class="operate-container flex-between mt-12">
+          <!-- <el-button class="register" @click="router.push('/register')" link type="primary">
+          注册
+        </el-button> -->
+          <el-button
+            class="forgot-password"
+            @click="router.push('/forgot_password')"
+            link
+            type="primary"
+          >
+            忘记密码?
+          </el-button>
+        </div>
+      </div>
+      <div v-if="showQrCodeTab">
+        <QrCodeTab :tabs="orgOptions" />
+      </div>
+
+      <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
+        <span>更多登录方式</span>
+      </div>
+      <div class="text-center mt-16">
+        <template v-for="item in modeList">
+          <el-button
+            v-if="item !== '' && loginMode !== item && item !== 'QR_CODE'"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            @click="changeMode(item)"
+          >
+            <span
+              :style="{
+                'font-size': item === 'OAUTH2' ? '8px' : '10px',
+                color: user.themeInfo?.theme
+              }"
+              >{{ item }}</span
+            >
+          </el-button>
+          <el-button
+            v-if="item === 'QR_CODE' && loginMode !== item"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            @click="changeMode('QR_CODE')"
+          >
+            <img src="@/assets/icon_qr_outlined.svg" width="25px" />
+          </el-button>
+          <el-button
+            v-if="item === '' && loginMode !== ''"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            style="font-size: 24px"
+            icon="UserFilled"
+            @click="changeMode('')"
+          />
+        </template>
+      </div>
+    </LoginContainer>
+  </login-layout>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onBeforeMount } from 'vue'
+import type { LoginRequest } from '@/api/type/user'
+import { useRouter } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import useStore from '@/stores'
+import authApi from '@/api/auth-setting'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import QrCodeTab from '@/views/login/components/QrCodeTab.vue'
+const loading = ref<boolean>(false)
+const { user } = useStore()
+const router = useRouter()
+const loginForm = ref<LoginRequest>({
+  username: '',
+  password: ''
+})
+
+const rules = ref<FormRules<LoginRequest>>({
+  username: [
+    {
+      required: true,
+      message: '请输入用户名',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    }
+  ]
+})
+const loginFormRef = ref<FormInstance>()
+
+const modeList = ref<string[]>([''])
+const QrList = ref<any[]>([''])
+const loginMode = ref('')
+const showQrCodeTab = ref(false)
+interface qrOption {
+  key: string
+  value: string
+}
+const orgOptions = ref<qrOption[]>([])
+function redirectAuth(authType: string) {
+  if (authType === 'LDAP' || authType === '') {
+    return
+  }
+  authApi.getAuthSetting(authType, loading).then((res: any) => {
+    if (!res.data) {
+      return
+    }
+    MsgConfirm(`${t('login.jump_tip')}`, t(''), {
+      confirmButtonText: t('login.jump'),
+      cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+      confirmButtonClass: ''
+    })
+      .then(() => {
+        if (!res.data.config_data) {
+          return
+        }
+        const config = res.data.config_data
+        const redirectUrl = eval(`\`${config.redirectUrl}\``)
+        let url
+        if (authType === 'CAS') {
+          url = config.ldpUri
+          if (url.indexOf('?') !== -1) {
+            url = `${config.ldpUri}&service=${encodeURIComponent(redirectUrl)}`
+          } else {
+            url = `${config.ldpUri}?service=${encodeURIComponent(redirectUrl)}`
+          }
+        }
+        if (authType === 'OIDC') {
+          url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=openid+profile+email`
+        }
+        if (authType === 'OAUTH2') {
+          url =
+            `${config.authEndpoint}?client_id=${config.clientId}&response_type=code` +
+            `&redirect_uri=${redirectUrl}&state=${res.data.id}`
+          if (config.scope) {
+            url += `&scope=${config.scope}`
+          }
+        }
+        if (url) {
+          window.location.href = url
+        }
+      })
+      .catch(() => {})
+  })
+}
+
+function changeMode(val: string) {
+  loginMode.value = val === 'LDAP' ? val : ''
+  if (val === 'QR_CODE') {
+    loginMode.value = val
+    showQrCodeTab.value = true
+    return
+  }
+  showQrCodeTab.value = false
+  loginForm.value = {
+    username: '',
+    password: ''
+  }
+  redirectAuth(val)
+  loginFormRef.value?.clearValidate()
+}
+
+const login = () => {
+  loginFormRef.value?.validate().then(() => {
+    loading.value = true
+    user
+      .login(loginMode.value, loginForm.value.username, loginForm.value.password)
+      .then(() => {
+        router.push({ name: 'home' })
+      })
+      .finally(() => (loading.value = false))
+  })
+}
+
+onMounted(() => {
+  user.asyncGetProfile().then((res) => {
+    if (user.isEnterprise()) {
+      loading.value = true
+      user
+        .getAuthType()
+        .then((res) => {
+          //如果结果包含LDAP，把LDAP放在第一个
+          const ldapIndex = res.indexOf('LDAP')
+          if (ldapIndex !== -1) {
+            const [ldap] = res.splice(ldapIndex, 1)
+            res.unshift(ldap)
+          }
+          modeList.value = [...modeList.value, ...res]
+        })
+        .finally(() => (loading.value = false))
+      user
+        .getQrType()
+        .then((res) => {
+          if (res.length > 0) {
+            modeList.value = ['QR_CODE', ...modeList.value]
+            QrList.value = res
+            QrList.value.forEach((item) => {
+              orgOptions.value.push({
+                key: item,
+                value: item === 'wecom' ? '企业微信' : item === 'dingtalk' ? '钉钉' : '飞书'
+              })
+            })
+          }
+        })
+        .finally(() => (loading.value = false))
+    }
+  })
+})
+</script>
+<style lang="scss" scope>
+.login-gradient-divider {
+  position: relative;
+  text-align: center;
+  color: var(--el-color-info);
+
+  ::before {
+    content: '';
+    width: 25%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+    position: absolute;
+    left: 16px;
+    top: 50%;
+  }
+
+  ::after {
+    content: '';
+    width: 25%;
+    height: 1px;
+    background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+    position: absolute;
+    right: 16px;
+    top: 50%;
+  }
+}
+
+.login-button-circle {
+  padding: 20px !important;
+  margin: 0 4px;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/login/register/index.vue b/src/views/login/register/index.vue
new file mode 100644
index 0000000..e5acf2a
--- /dev/null
+++ b/src/views/login/register/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <login-layout>
+    <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库问答系统">
+      <h2 class="mb-24">用户注册</h2>
+      <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
+        <div class="mb-24">
+          <el-form-item prop="username">
+            <el-input
+              size="large"
+              class="input-item"
+              v-model="registerForm.username"
+              placeholder="请输入用户名"
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="registerForm.password"
+              placeholder="请输入密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="registerForm.re_password"
+              placeholder="请输入确认密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="email">
+            <el-input
+              size="large"
+              class="input-item"
+              v-model="registerForm.email"
+              placeholder="请输入邮箱"
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="code">
+            <div class="flex-between w-full">
+              <el-input
+                size="large"
+                class="code-input"
+                v-model="registerForm.code"
+                placeholder="请输入验证码"
+              >
+              </el-input>
+              <el-button
+                :disabled="isDisabled"
+                size="large"
+                class="send-email-button ml-12"
+                @click="sendEmail"
+                :loading="sendEmailLoading"
+              >
+                {{ isDisabled ? `重新发送（${time}s）` : '获取验证码' }}</el-button
+              >
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-button size="large" type="primary" class="w-full" @click="register">注册</el-button>
+      <div class="operate-container mt-12">
+        <el-button
+          class="register"
+          @click="router.push('/login')"
+          link
+          type="primary"
+          icon="ArrowLeft"
+        >
+          返回登录
+        </el-button>
+      </div>
+    </LoginContainer>
+  </login-layout>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { RegisterRequest } from '@/api/type/user'
+import { useRouter } from 'vue-router'
+import UserApi from '@/api/user'
+import { MsgSuccess } from '@/utils/message'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const router = useRouter()
+const registerForm = ref<RegisterRequest>({
+  username: '',
+  password: '',
+  re_password: '',
+  email: '',
+  code: ''
+})
+
+const rules = ref<FormRules<RegisterRequest>>({
+  username: [
+    {
+      required: true,
+      message: '请输入用户名',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ],
+  re_password: [
+    {
+      required: true,
+      message: '请输入确认密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (registerForm.value.password != registerForm.value.re_password) {
+          callback(new Error('密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        const emailRegExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
+        if (!emailRegExp.test(value) && value != '') {
+          callback(new Error('请输入有效邮箱格式！'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  code: [{ required: true, message: '请输入验证码' }]
+})
+
+const registerFormRef = ref<FormInstance>()
+const register = () => {
+  registerFormRef.value
+    ?.validate()
+    .then(() => {
+      return UserApi.register(registerForm.value)
+    })
+    .then(() => {
+      router.push('login')
+    })
+}
+const sendEmailLoading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
+/**
+ * 发送验证码
+ */
+const sendEmail = () => {
+  registerFormRef.value?.validateField('email', (v: boolean) => {
+    if (v) {
+      UserApi.sendEmit(registerForm.value.email, 'register', sendEmailLoading).then(() => {
+        MsgSuccess('发送验证码成功')
+        isDisabled.value = true
+        handleTimeChange()
+      })
+    }
+  })
+}
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/login/reset-password/index.vue b/src/views/login/reset-password/index.vue
new file mode 100644
index 0000000..ac2111c
--- /dev/null
+++ b/src/views/login/reset-password/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <login-layout>
+    <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库问答系统">
+      <h2 class="mb-24">修改密码</h2>
+      <el-form
+        class="reset-password-form"
+        ref="resetPasswordFormRef"
+        :model="resetPasswordForm"
+        :rules="rules"
+      >
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.password"
+              placeholder="请输入密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.re_password"
+              placeholder="请输入确认密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-button size="large" type="primary" class="w-full" @click="resetPassword"
+        >确认修改</el-button
+      >
+      <div class="operate-container mt-12">
+        <el-button
+          size="large"
+          class="register"
+          @click="router.push('/login')"
+          link
+          type="primary"
+          icon="ArrowLeft"
+        >
+          返回登录
+        </el-button>
+      </div>
+    </LoginContainer>
+  </login-layout>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { ResetPasswordRequest } from '@/api/type/user'
+import { useRouter, useRoute } from 'vue-router'
+import { MsgSuccess } from '@/utils/message'
+import type { FormInstance, FormRules } from 'element-plus'
+import UserApi from '@/api/user'
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { code, email }
+} = route
+const resetPasswordForm = ref<ResetPasswordRequest>({
+  password: '',
+  re_password: '',
+  email: '',
+  code: ''
+})
+
+onMounted(() => {
+  if (code && email) {
+    resetPasswordForm.value.code = code as string
+    resetPasswordForm.value.email = email as string
+  } else {
+    router.push('forgot_password')
+  }
+})
+
+const rules = ref<FormRules<ResetPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ],
+  re_password: [
+    {
+      required: true,
+      message: '请输入确认密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error('密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+const resetPasswordFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const resetPassword = () => {
+  resetPasswordFormRef.value
+    ?.validate()
+    .then(() => UserApi.resetPassword(resetPasswordForm.value, loading))
+    .then(() => {
+      MsgSuccess('修改密码成功')
+      router.push({ name: 'login' })
+    })
+}
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/paragraph/component/ParagraphDialog.vue b/src/views/paragraph/component/ParagraphDialog.vue
new file mode 100644
index 0000000..8874956
--- /dev/null
+++ b/src/views/paragraph/component/ParagraphDialog.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    width="80%"
+    class="paragraph-dialog"
+    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-loading="loading">
+      <el-col :span="18">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="p-24" style="padding-bottom: 8px">
+            <div style="position: absolute; right: 20px; top: 20px; ">
+              <el-button text @click="isEdit = true" v-if="problemId && !isEdit">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </div>
+
+            <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="isEdit" />
+          </div>
+        </el-scrollbar>
+        <div class="text-right p-24 pt-0" v-if="problemId && isEdit">
+          <el-button @click.prevent="cancelEdit"> 取消 </el-button>
+          <el-button type="primary" :disabled="loading" @click="handleDebounceClick">
+            保存
+          </el-button>
+        </div>
+      </el-col>
+      <el-col :span="6" class="border-l" style="width: 300px">
+        <!-- 关联问题 -->
+        <ProblemComponent
+          :problemId="problemId"
+          :docId="document_id"
+          :datasetId="dataset_id"
+          ref="ProblemRef"
+        />
+      </el-col>
+    </el-row>
+    <template #footer v-if="!problemId">
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button :disabled="loading" type="primary" @click="handleDebounceClick">
+          提交
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep, debounce } from 'lodash'
+
+import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+import ProblemComponent from '@/views/paragraph/component/ProblemComponent.vue'
+import paragraphApi from '@/api/paragraph'
+import useStore from '@/stores'
+
+const props = defineProps({
+  title: String
+})
+
+const { paragraph } = useStore()
+
+const route = useRoute()
+const {
+  params: { id, documentId }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const ProblemRef = ref()
+const paragraphFormRef = ref<any>()
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+const problemId = ref('')
+const detail = ref<any>({})
+const isEdit = ref(false)
+const document_id = ref('')
+const dataset_id = ref('')
+const cloneData = ref(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    problemId.value = ''
+    detail.value = {}
+    isEdit.value = false
+    document_id.value = ''
+    dataset_id.value = ''
+    cloneData.value = null
+  }
+})
+
+const cancelEdit = () => {
+  isEdit.value = false
+  detail.value = cloneDeep(cloneData.value)
+}
+
+const open = (data: any) => {
+  if (data) {
+    detail.value.title = data.title
+    detail.value.content = data.content
+    cloneData.value = cloneDeep(detail.value)
+    problemId.value = data.id
+    document_id.value = data.document_id
+    dataset_id.value = data.dataset_id || id
+  } else {
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    loading.value = true
+    if (problemId.value) {
+      paragraph
+        .asyncPutParagraph(
+          dataset_id.value,
+          documentId || document_id.value,
+          problemId.value,
+          paragraphFormRef.value?.form,
+          loading
+        )
+        .then((res: any) => {
+          isEdit.value = false
+          emit('refresh', res.data)
+        })
+    } else {
+      const obj =
+        ProblemRef.value.problemList.length > 0
+          ? {
+              problem_list: ProblemRef.value.problemList,
+              ...paragraphFormRef.value?.form
+            }
+          : paragraphFormRef.value?.form
+      paragraphApi.postParagraph(id, documentId, obj, loading).then((res) => {
+        dialogVisible.value = false
+        emit('refresh')
+      })
+    }
+  }
+}
+const handleDebounceClick = debounce(() => {
+  submitHandle()
+}, 200)
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/paragraph/component/ParagraphForm.vue b/src/views/paragraph/component/ParagraphForm.vue
new file mode 100644
index 0000000..43739d2
--- /dev/null
+++ b/src/views/paragraph/component/ParagraphForm.vue
@@ -0,0 +1,173 @@
+<template>
+  <el-form
+    ref="paragraphFormRef"
+    :model="form"
+    label-position="top"
+    require-asterisk-position="right"
+    :rules="rules"
+    @submit.prevent
+  >
+    <el-form-item label="分段标题">
+      <el-input
+        v-if="isEdit"
+        v-model="form.title"
+        placeholder="请输入分段标题"
+        maxlength="256"
+        show-word-limit
+      >
+      </el-input>
+      <span class="lighter" v-else>{{ form.title || '-' }}</span>
+    </el-form-item>
+    <el-form-item label="分段内容" prop="content">
+      <MdEditor
+        v-if="isEdit"
+        v-model="form.content"
+        placeholder="请输入分段内容"
+        :maxLength="100000"
+        :preview="false"
+        :toolbars="toolbars"
+        style="height: 300px"
+        @onUploadImg="onUploadImg"
+        :footers="footers"
+      >
+        <template #defFooters>
+          <span style="margin-left: -6px">/ 100000</span>
+        </template>
+      </MdEditor>
+      <MdPreview
+        v-else
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="form.content"
+        class="maxkb-md"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onUnmounted, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import imageApi from '@/api/image'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  isEdit: Boolean
+})
+
+const toolbars = [
+  'bold',
+  'underline',
+  'italic',
+  '-',
+  'title',
+  'strikeThrough',
+  'sub',
+  'sup',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'task',
+  '-',
+  'codeRow',
+  'code',
+  'link',
+  'image',
+  'table',
+  'mermaid',
+  'katex',
+  '-',
+  'revoke',
+  'next',
+  '=',
+  'pageFullscreen',
+  'preview',
+  'htmlPreview'
+] as any[]
+
+const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch']
+
+const editorRef = ref()
+
+const form = ref<any>({
+  title: '',
+  content: ''
+})
+
+const rules = reactive<FormRules>({
+  content: [
+    { required: true, message: '请输入分段内容', trigger: 'blur' },
+    { max: 100000, message: '内容最多不超过 100000 个字', trigger: 'blur' }
+  ]
+})
+
+const paragraphFormRef = ref<FormInstance>()
+
+watch(
+  () => props.data,
+  (value) => {
+    if (value && JSON.stringify(value) !== '{}') {
+      form.value.title = value.title
+      form.value.content = value.content
+    }
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.isEdit,
+  (value) => {
+    if (!value) {
+      paragraphFormRef.value?.clearValidate()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+/*
+  表单校验
+*/
+function validate() {
+  if (!paragraphFormRef.value) return
+  return paragraphFormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+const onUploadImg = async (files: any, callback: any) => {
+  const res = await Promise.all(
+    files.map((file: any) => {
+      return new Promise((rev, rej) => {
+        const fd = new FormData()
+        fd.append('file', file)
+
+        imageApi
+          .postImage(fd)
+          .then((res: any) => {
+            rev(res)
+          })
+          .catch((error) => rej(error))
+      })
+    })
+  )
+
+  callback(res.map((item) => item.data))
+}
+
+onUnmounted(() => {
+  form.value = {
+    title: '',
+    content: ''
+  }
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/paragraph/component/ProblemComponent.vue b/src/views/paragraph/component/ProblemComponent.vue
new file mode 100644
index 0000000..c7cbf91
--- /dev/null
+++ b/src/views/paragraph/component/ProblemComponent.vue
@@ -0,0 +1,204 @@
+<template>
+  <p class="bold title p-24" style="padding-bottom: 0">
+    <span class="flex align-center">
+      <span>关联问题</span>
+      <el-divider direction="vertical" class="mr-4" />
+      <el-button text @click="addProblem">
+        <el-icon><Plus /></el-icon>
+      </el-button>
+    </span>
+  </p>
+  <div v-loading="loading">
+    <el-scrollbar height="500px">
+      <div class="p-24" style="padding-top: 16px">
+        <el-select
+          v-if="isAddProblem"
+          v-model="problemValue"
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          placeholder="请选择问题"
+          remote
+          :remote-method="remoteMethod"
+          :loading="optionLoading"
+          @change="addProblemHandle"
+          @blur="isAddProblem = false"
+          class="mb-16"
+          popper-class="select-popper"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in problemOptions"
+            :key="item.id"
+            :label="item.content"
+            :value="item.id"
+          >
+            {{ item.content }}
+          </el-option>
+        </el-select>
+        <template v-for="(item, index) in problemList" :key="index">
+          <TagEllipsis
+            @close="delProblemHandle(item, index)"
+            class="question-tag"
+            type="info"
+            effect="plain"
+            closable
+          >
+            <auto-tooltip :content="item.content">
+              {{ item.content }}
+            </auto-tooltip>
+          </TagEllipsis>
+        </template>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import paragraphApi from '@/api/paragraph'
+import useStore from '@/stores'
+
+const props = defineProps({
+  problemId: String,
+  docId: String,
+  datasetId: String
+})
+
+const route = useRoute()
+const {
+  params: { id, documentId } // id为datasetId
+} = route as any
+
+const { problem } = useStore()
+const inputRef = ref()
+const loading = ref(false)
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+const problemList = ref<any[]>([])
+
+const problemOptions = ref<any[]>([])
+const optionLoading = ref(false)
+
+watch(
+  () => props.problemId,
+  (value) => {
+    if (value) {
+      getProblemList()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+function delProblemHandle(item: any, index: number) {
+  if (item.id) {
+    problem
+      .asyncDisassociationProblem(
+        props.datasetId || id,
+        documentId || props.docId,
+        props.problemId || '',
+        item.id,
+        loading
+      )
+      .then((res: any) => {
+        getProblemList()
+      })
+  } else {
+    problemList.value.splice(index, 1)
+  }
+}
+
+function getProblemList() {
+  loading.value = true
+  paragraphApi
+    .getProblem(props.datasetId || id, documentId || props.docId, props.problemId || '')
+    .then((res) => {
+      problemList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+function addProblemHandle(val: string) {
+  if (props.problemId) {
+    const api = problemOptions.value.some((option) => option.id === val)
+      ? problem.asyncAssociationProblem(
+          props.datasetId || id,
+          documentId || props.docId,
+          props.problemId,
+          val,
+          loading
+        )
+      : paragraphApi.postProblem(
+          props.datasetId || id,
+          documentId || props.docId,
+          props.problemId,
+          {
+            content: val
+          },
+          loading
+        )
+    api.then(() => {
+      getProblemList()
+      problemValue.value = ''
+      isAddProblem.value = false
+    })
+  } else {
+    const problem = problemOptions.value.find((option) => option.id === val)
+    const content = problem ? problem.content : val
+    if (!problemList.value.some((item) => item.content === content)) {
+      problemList.value.push({ content: content })
+    }
+
+    problemValue.value = ''
+    isAddProblem.value = false
+  }
+}
+
+const remoteMethod = (query: string) => {
+  getProblemOption(query)
+}
+
+function getProblemOption(filterText?: string) {
+  return problem
+    .asyncGetProblem(
+      props.datasetId || (id as string),
+      { current_page: 1, page_size: 100 },
+      filterText && { content: filterText },
+      optionLoading
+    )
+    .then((res: any) => {
+      problemOptions.value = res.data.records
+    })
+}
+
+onMounted(() => {
+  getProblemOption()
+})
+onUnmounted(() => {
+  problemList.value = []
+  problemValue.value = ''
+  isAddProblem.value = false
+})
+
+defineExpose({
+  problemList
+})
+</script>
+<style scoped lang="scss">
+.question-tag {
+  // width: 217px;
+}
+</style>
diff --git a/src/views/paragraph/component/SelectDocumentDialog.vue b/src/views/paragraph/component/SelectDocumentDialog.vue
new file mode 100644
index 0000000..61b2b49
--- /dev/null
+++ b/src/views/paragraph/component/SelectDocumentDialog.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    title="选择知识库/文档"
+    v-model="dialogVisible"
+    width="500"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      label-position="top"
+      require-asterisk-position="right"
+      :rules="rules"
+      @submit.prevent
+    >
+      <el-form-item label="选择知识库" prop="dataset_id">
+        <el-select
+          v-model="form.dataset_id"
+          filterable
+          placeholder="请选择知识库"
+          :loading="optionLoading"
+          @change="changeDataset"
+        >
+          <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id">
+            <span class="flex align-center">
+              <AppAvatar
+                v-if="!item.dataset_id && item.type === '1'"
+                class="mr-12 avatar-purple"
+                shape="square"
+                :size="24"
+              >
+                <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="!item.dataset_id && item.type === '0'"
+                class="mr-12 avatar-blue"
+                shape="square"
+                :size="24"
+              >
+                <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+              </AppAvatar>
+              {{ item.name }}
+            </span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="保存至文档" prop="document_id">
+        <el-select
+          v-model="form.document_id"
+          filterable
+          placeholder="请选择文档"
+          :loading="optionLoading"
+        >
+          <el-option
+            v-for="item in documentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitForm(formRef)" :loading="loading"> 迁移 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import paragraphApi from '@/api/paragraph'
+import useStore from '@/stores'
+
+const { dataset, document } = useStore()
+
+const route = useRoute()
+const {
+  params: { id, documentId }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+const formRef = ref()
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const form = ref<any>({
+  dataset_id: '',
+  document_id: ''
+})
+
+const rules = reactive<FormRules>({
+  dataset_id: [{ required: true, message: '请选择知识库', trigger: 'change' }],
+  document_id: [{ required: true, message: '请选择文档', trigger: 'change' }]
+})
+
+const datasetList = ref<any[]>([])
+const documentList = ref<any[]>([])
+const optionLoading = ref(false)
+const paragraphList = ref<string[]>([])
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      dataset_id: '',
+      document_id: ''
+    }
+    datasetList.value = []
+    documentList.value = []
+    paragraphList.value = []
+    formRef.value?.clearValidate()
+  }
+})
+
+function changeDataset(id: string) {
+  form.value.document_id = ''
+  getDocument(id)
+}
+
+function getDocument(id: string) {
+  document.asyncGetAllDocument(id, loading).then((res: any) => {
+    documentList.value = res.data?.filter((v: any) => v.id !== documentId)
+  })
+}
+
+function getDataset() {
+  dataset.asyncGetAllDataset(loading).then((res: any) => {
+    datasetList.value = res.data
+  })
+}
+
+const open = (list: any) => {
+  paragraphList.value = list
+  getDataset()
+  formRef.value?.clearValidate()
+  dialogVisible.value = true
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      paragraphApi
+        .putMigrateMulParagraph(
+          id,
+          documentId,
+          form.value.dataset_id,
+          form.value.document_id,
+          paragraphList.value,
+          loading
+        )
+        .then(() => {
+          emit('refresh')
+          dialogVisible.value = false
+        })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/paragraph/index.vue b/src/views/paragraph/index.vue
new file mode 100644
index 0000000..2102ed1
--- /dev/null
+++ b/src/views/paragraph/index.vue
@@ -0,0 +1,420 @@
+<template>
+  <LayoutContainer back-to="-1" class="document-detail">
+    <template #header>
+      <div style="width: 78%">
+        <h3 style="display: inline-block">{{ documentDetail?.name }}</h3>
+        <el-text type="info" v-if="documentDetail?.type === '1'"
+          >（文档地址：<el-link :href="documentDetail?.meta?.source_url" target="_blank">
+            <span class="break-all">{{ documentDetail?.meta?.source_url }} </span></el-link
+          >）
+        </el-text>
+      </div>
+      <div class="header-button">
+        <el-button @click="batchSelectedHandle(true)" v-if="isBatch === false">
+          批量选择
+        </el-button>
+        <el-button @click="batchSelectedHandle(false)" v-if="isBatch === true">
+          取消选择
+        </el-button>
+        <el-button
+          @click="addParagraph"
+          type="primary"
+          :disabled="loading"
+          v-if="isBatch === false"
+        >
+          添加分段
+        </el-button>
+      </div>
+    </template>
+    <div
+      class="document-detail__main p-16"
+      v-loading="(paginationConfig.current_page === 1 && loading) || changeStateloading"
+    >
+      <div class="flex-between p-8">
+        <span>{{ paginationConfig.total }} 段落</span>
+        <el-input
+          v-model="search"
+          placeholder="搜索"
+          class="input-with-select"
+          style="width: 260px"
+          @change="searchHandle"
+          clearable
+        >
+          <template #prepend>
+            <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+              <el-option label="标题" value="title" />
+              <el-option label="内容" value="content" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <el-scrollbar>
+        <div class="document-detail-height">
+          <el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
+
+          <InfiniteScroll
+            v-else
+            :size="paragraphDetail.length"
+            :total="paginationConfig.total"
+            :page_size="paginationConfig.page_size"
+            v-model:current_page="paginationConfig.current_page"
+            @load="getParagraphList"
+            :loading="loading"
+          >
+            <el-row>
+              <el-col
+                :xs="24"
+                :sm="12"
+                :md="8"
+                :lg="6"
+                :xl="6"
+                v-for="(item, index) in paragraphDetail"
+                :key="index"
+                class="p-8"
+              >
+                <!-- 批量操作card -->
+                <CardBox
+                  v-if="isBatch === true"
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="document-card cursor"
+                  :class="multipleSelection.includes(item.id) ? 'selected' : ''"
+                  :showIcon="false"
+                  @click="selectHandle(item.id)"
+                >
+                  <div class="active-button" @click.stop></div>
+
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
+                    </div>
+                  </template>
+                </CardBox>
+                <!-- 非批量操作card -->
+                <CardBox
+                  v-else
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="document-card cursor"
+                  :class="item.is_active ? '' : 'disabled'"
+                  :showIcon="false"
+                  @click="editParagraph(item)"
+                >
+                  <div class="active-button" @click.stop>
+                    <el-switch
+                      :loading="loading"
+                      v-model="item.is_active"
+                      :before-change="() => changeState(item)"
+                      size="small"
+                    />
+                  </div>
+
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
+
+                      <span @click.stop>
+                        <el-dropdown trigger="click">
+                          <el-button text>
+                            <el-icon><MoreFilled /></el-icon>
+                          </el-button>
+                          <template #dropdown>
+                            <el-dropdown-menu>
+                              <el-dropdown-item @click="openGenerateDialog(item)">
+                                <el-icon><Connection /></el-icon>
+                                生成问题</el-dropdown-item
+                              >
+                              <el-dropdown-item @click="openSelectDocumentDialog(item)">
+                                <AppIcon iconName="app-migrate"></AppIcon>
+                                迁移</el-dropdown-item
+                              >
+                              <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(item)"
+                                >删除</el-dropdown-item
+                              >
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </span>
+                    </div>
+                  </template>
+                </CardBox>
+              </el-col>
+            </el-row>
+          </InfiniteScroll>
+        </div>
+      </el-scrollbar>
+
+      <div class="mul-operation border-t w-full" v-if="isBatch === true">
+        <el-button :disabled="multipleSelection.length === 0" @click="openGenerateDialog()">
+          生成问题
+        </el-button>
+        <el-button :disabled="multipleSelection.length === 0" @click="openSelectDocumentDialog()">
+          迁移
+        </el-button>
+
+        <el-button :disabled="multipleSelection.length === 0" @click="deleteMulParagraph">
+          删除
+        </el-button>
+        <span class="ml-8"> 已选 {{ multipleSelection.length }} 项 </span>
+      </div>
+    </div>
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
+    <SelectDocumentDialog ref="SelectDocumentDialogRef" @refresh="refreshMigrateParagraph" />
+    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/document'
+import paragraphApi from '@/api/paragraph'
+import ParagraphDialog from './component/ParagraphDialog.vue'
+import SelectDocumentDialog from './component/SelectDocumentDialog.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
+import { numberFormat } from '@/utils/utils'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores'
+
+const { paragraph } = useStore()
+const route = useRoute()
+const {
+  params: { id, documentId }
+} = route as any
+
+const SelectDocumentDialogRef = ref()
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const changeStateloading = ref(false)
+const documentDetail = ref<any>({})
+const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const search = ref('')
+const searchType = ref('title')
+
+// 批量操作
+const isBatch = ref(false)
+const multipleSelection = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+
+function refreshMigrateParagraph() {
+  paragraphDetail.value = paragraphDetail.value.filter(
+    (v) => !multipleSelection.value.includes(v.id)
+  )
+  multipleSelection.value = []
+  MsgSuccess('迁移删除成功')
+}
+
+function openSelectDocumentDialog(row?: any) {
+  if (row) {
+    multipleSelection.value = [row.id]
+  }
+  SelectDocumentDialogRef.value.open(multipleSelection.value)
+}
+function deleteMulParagraph() {
+  MsgConfirm(
+    `是否批量删除 ${multipleSelection.value.length} 个分段?`,
+    `删除后无法恢复，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      paragraphApi
+        .delMulParagraph(id, documentId, multipleSelection.value, changeStateloading)
+        .then(() => {
+          paragraphDetail.value = paragraphDetail.value.filter(
+            (v) => !multipleSelection.value.includes(v.id)
+          )
+          multipleSelection.value = []
+          MsgSuccess('批量删除成功')
+        })
+    })
+    .catch(() => {})
+}
+
+function batchSelectedHandle(bool: boolean) {
+  isBatch.value = bool
+  multipleSelection.value = []
+}
+
+function selectHandle(id: string) {
+  if (multipleSelection.value.includes(id)) {
+    multipleSelection.value.splice(multipleSelection.value.indexOf(id), 1)
+  } else {
+    multipleSelection.value.push(id)
+  }
+}
+
+function searchHandle() {
+  paginationConfig.current_page = 1
+  paragraphDetail.value = []
+  getParagraphList()
+}
+
+function changeState(row: any) {
+  const obj = {
+    is_active: !row.is_active
+  }
+  paragraph
+    .asyncPutParagraph(id, documentId, row.id, obj, changeStateloading)
+    .then((res) => {
+      const index = paragraphDetail.value.findIndex((v) => v.id === row.id)
+      paragraphDetail.value[index].is_active = !paragraphDetail.value[index].is_active
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+function deleteParagraph(row: any) {
+  MsgConfirm(`是否删除段落：${row.title || '-'} ?`, `删除后无法恢复，请谨慎操作。`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      paragraph.asyncDelParagraph(id, documentId, row.id, loading).then(() => {
+        const index = paragraphDetail.value.findIndex((v) => v.id === row.id)
+        paragraphDetail.value.splice(index, 1)
+        MsgSuccess('删除成功')
+      })
+    })
+    .catch(() => {})
+}
+
+function addParagraph() {
+  title.value = '添加分段'
+  ParagraphDialogRef.value.open()
+}
+function editParagraph(row: any) {
+  title.value = '分段详情'
+  ParagraphDialogRef.value.open(row)
+}
+
+function getDetail() {
+  loading.value = true
+  documentApi
+    .getDocumentDetail(id, documentId)
+    .then((res) => {
+      documentDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getParagraphList() {
+  paragraphApi
+    .getParagraph(
+      id,
+      documentId,
+      paginationConfig,
+      search.value && { [searchType.value]: search.value },
+      loading
+    )
+    .then((res) => {
+      paragraphDetail.value = [...paragraphDetail.value, ...res.data.records]
+      paginationConfig.total = res.data.total
+    })
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
+    paragraphDetail.value.splice(index, 1, data)
+  } else {
+    paginationConfig.current_page = 1
+    paragraphDetail.value = []
+    getParagraphList()
+  }
+}
+
+const GenerateRelatedDialogRef = ref()
+function openGenerateDialog(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v)
+      }
+    })
+  }
+
+  GenerateRelatedDialogRef.value.open(arr, 'paragraph')
+}
+
+onMounted(() => {
+  getDetail()
+  getParagraphList()
+})
+</script>
+<style lang="scss" scoped>
+.document-detail {
+  .header-button {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+  }
+
+  .document-detail-height {
+    height: calc(var(--app-main-height) - 75px);
+  }
+  .document-card {
+    height: 210px;
+    background: var(--app-layout-bg-color);
+    border: 1px solid var(--app-layout-bg-color);
+    &.selected {
+      background: #ffffff;
+      &:hover {
+        background: #ffffff;
+      }
+    }
+    &:hover {
+      background: #ffffff;
+      border: 1px solid var(--el-border-color);
+    }
+    &.disabled {
+      background: var(--app-layout-bg-color);
+      border: 1px solid var(--app-layout-bg-color);
+      :deep(.description) {
+        color: var(--app-border-color-dark);
+      }
+      :deep(.title) {
+        color: var(--app-border-color-dark);
+      }
+    }
+    :deep(.content) {
+      -webkit-line-clamp: 5 !important;
+      height: 110px !important;
+    }
+    .active-button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+  }
+
+  &__main {
+    position: relative;
+    box-sizing: border-box;
+    .mul-operation {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      background: #ffffff;
+    }
+  }
+}
+</style>
diff --git a/src/views/problem/component/CreateProblemDialog.vue b/src/views/problem/component/CreateProblemDialog.vue
new file mode 100644
index 0000000..2546f8a
--- /dev/null
+++ b/src/views/problem/component/CreateProblemDialog.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog
+    title="创建问题"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <el-form
+      label-position="top"
+      ref="problemFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="问题" prop="data">
+        <el-input
+          v-model="form.data"
+          placeholder="请输入问题，支持输入多个，一行一个。"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(problemFormRef)" :loading="loading">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import useStore from '@/stores'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+const { problem } = useStore()
+
+const emit = defineEmits(['refresh'])
+const problemFormRef = ref()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  data: ''
+})
+
+const rules = reactive({
+  data: [{ required: true, message: '请输入问题', trigger: 'blur' }]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      data: ''
+    }
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const arr = form.value.data.split('\n').filter(function (item: string) {
+        return item !== ''
+      })
+      problem.asyncPostProblem(id, arr, loading).then((res: any) => {
+        MsgSuccess('创建成功')
+        emit('refresh')
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/problem/component/DetailProblemDrawer.vue b/src/views/problem/component/DetailProblemDrawer.vue
new file mode 100644
index 0000000..b3aa32d
--- /dev/null
+++ b/src/views/problem/component/DetailProblemDrawer.vue
@@ -0,0 +1,192 @@
+<template>
+  <el-drawer v-model="visible" size="60%" @close="closeHandle">
+    <template #header>
+      <h4>问题详情</h4>
+    </template>
+    <div>
+      <el-scrollbar>
+        <div class="p-8">
+          <el-form label-position="top" v-loading="loading" @submit.prevent>
+            <el-form-item label="问题">
+              <ReadWrite
+                @change="editName"
+                :data="currentContent"
+                :showEditIcon="true"
+                :maxlength="256"
+              />
+            </el-form-item>
+            <el-form-item label="关联分段">
+              <template v-for="(item, index) in paragraphList" :key="index">
+                <CardBox
+                  :title="item.title || '-'"
+                  class="paragraph-source-card cursor mb-8"
+                  :showIcon="false"
+                  @click.stop="editParagraph(item)"
+                >
+                  <div class="active-button">
+                    <span class="mr-4">
+                      <el-tooltip effect="dark" content="取消关联" placement="top">
+                        <el-button type="primary" text @click.stop="disassociation(item)">
+                          <AppIcon iconName="app-quxiaoguanlian"></AppIcon>
+                        </el-button>
+                      </el-tooltip>
+                    </span>
+                  </div>
+                  <template #description>
+                    <el-scrollbar height="80">
+                      {{ item.content }}
+                    </el-scrollbar>
+                  </template>
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <el-text>
+                        <el-icon>
+                          <Document />
+                        </el-icon>
+                        {{ item?.document_name }}
+                      </el-text>
+                    </div>
+                  </template>
+                </CardBox>
+              </template>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+      <ParagraphDialog ref="ParagraphDialogRef" title="编辑分段" @refresh="refresh" />
+      <RelateProblemDialog ref="RelateProblemDialogRef" @refresh="refresh" />
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="relateProblem">关联分段</el-button>
+        <el-button @click="pre" :disabled="pre_disable || loading">上一条</el-button>
+        <el-button @click="next" :disabled="next_disable || loading">下一条</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import problemApi from '@/api/problem'
+import ParagraphDialog from '@/views/paragraph/component/ParagraphDialog.vue'
+import RelateProblemDialog from './RelateProblemDialog.vue'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import useStore from '@/stores'
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 当前的id
+     */
+    currentId: string
+    currentContent: string
+    /**
+     * 下一条
+     */
+    next: () => void
+    /**
+     * 上一条
+     */
+    pre: () => void
+
+    pre_disable: boolean
+
+    next_disable: boolean
+  }>(),
+  {}
+)
+
+const emit = defineEmits(['update:currentId', 'update:currentContent', 'refresh'])
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const { problem } = useStore()
+const RelateProblemDialogRef = ref()
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const visible = ref(false)
+const paragraphList = ref<any[]>([])
+
+function disassociation(item: any) {
+  problem
+    .asyncDisassociationProblem(
+      item.dataset_id,
+      item.document_id,
+      item.id,
+      props.currentId,
+      loading
+    )
+    .then(() => {
+      getRecord()
+    })
+}
+
+function relateProblem() {
+  RelateProblemDialogRef.value.open([props.currentId])
+}
+
+function editParagraph(row: any) {
+  ParagraphDialogRef.value.open(row)
+}
+
+function editName(val: string) {
+  if (val) {
+    const obj = {
+      content: val
+    }
+    problemApi.putProblems(id as string, props.currentId, obj, loading).then(() => {
+      emit('update:currentContent', val)
+      MsgSuccess('修改成功')
+    })
+  } else {
+    MsgError('问题不能为空！')
+  }
+}
+
+function closeHandle() {
+  paragraphList.value = []
+}
+
+function getRecord() {
+  if (props.currentId && visible.value) {
+    problemApi.getDetailProblems(id as string, props.currentId, loading).then((res) => {
+      paragraphList.value = res.data
+    })
+  }
+}
+
+function refresh() {
+  getRecord()
+}
+
+watch(
+  () => props.currentId,
+  () => {
+    paragraphList.value = []
+    getRecord()
+  }
+)
+
+watch(visible, (bool) => {
+  if (!bool) {
+    emit('update:currentId', '')
+    emit('update:currentContent', '')
+    emit('refresh')
+  }
+})
+
+const open = () => {
+  getRecord()
+  visible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>
diff --git a/src/views/problem/component/RelateProblemDialog.vue b/src/views/problem/component/RelateProblemDialog.vue
new file mode 100644
index 0000000..c91103d
--- /dev/null
+++ b/src/views/problem/component/RelateProblemDialog.vue
@@ -0,0 +1,294 @@
+<template>
+  <el-dialog
+    title="关联分段"
+    v-model="dialogVisible"
+    width="80%"
+    class="paragraph-dialog"
+    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-loading="loading">
+      <el-col :span="6">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="bold title align-center p-24 pb-0">选择文档</div>
+          <div class="p-8" style="padding-bottom: 8px">
+            <el-input
+              v-model="filterDoc"
+              placeholder="按 文档名称 搜索"
+              prefix-icon="Search"
+              clearable
+            />
+            <common-list
+              :data="documentList"
+              class="mt-8"
+              @click="clickDocumentHandle"
+              :default-active="currentDocument"
+            >
+              <template #default="{ row }">
+                <span class="flex lighter align-center">
+                  <auto-tooltip :content="row.name">
+                    {{ row.name }}
+                  </auto-tooltip>
+                  <el-badge
+                    :value="associationCount(row.id)"
+                    type="primary"
+                    v-if="associationCount(row.id)"
+                    class="paragraph-badge ml-4"
+                  />
+                </span>
+              </template>
+            </common-list>
+          </div>
+        </el-scrollbar>
+      </el-col>
+      <el-col :span="18" class="border-l">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="p-24" style="padding-bottom: 8px; padding-top: 16px">
+            <div class="flex-between mb-16">
+              <div class="bold title align-center">
+                选择分段
+                <el-text> （已选分段：{{ associationCount(currentDocument) }} 个） </el-text>
+              </div>
+              <el-input
+                v-model="search"
+                placeholder="搜索"
+                class="input-with-select"
+                style="width: 260px"
+                @change="searchHandle"
+              >
+                <template #prepend>
+                  <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+                    <el-option label="标题" value="title" />
+                    <el-option label="内容" value="content" />
+                  </el-select>
+                </template>
+              </el-input>
+            </div>
+            <el-empty v-if="paragraphList.length == 0" description="暂无数据" />
+
+            <InfiniteScroll
+              v-else
+              :size="paragraphList.length"
+              :total="paginationConfig.total"
+              :page_size="paginationConfig.page_size"
+              v-model:current_page="paginationConfig.current_page"
+              @load="getParagraphList"
+              :loading="loading"
+            >
+              <template v-for="(item, index) in paragraphList" :key="index">
+                <CardBox
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="paragraph-card cursor mb-16"
+                  :class="isAssociation(item.id) ? 'selected' : ''"
+                  :showIcon="false"
+                  @click="associationClick(item)"
+                >
+                </CardBox>
+              </template>
+            </InfiniteScroll>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+    <template #footer v-if="isMul">
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false"> 取消</el-button>
+        <el-button type="primary" @click="mulAssociation"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import problemApi from '@/api/problem'
+import paragraphApi from '@/api/paragraph'
+import useStore from '@/stores'
+import { MsgSuccess } from '@/utils/message'
+
+const { problem, document } = useStore()
+
+const route = useRoute()
+const {
+  params: { id } // datasetId
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+const documentList = ref<any[]>([])
+const cloneDocumentList = ref<any[]>([])
+const paragraphList = ref<any[]>([])
+const currentProblemId = ref<String>('')
+const currentMulProblemId = ref<string[]>([])
+
+// 回显
+const associationParagraph = ref<any[]>([])
+
+const currentDocument = ref<String>('')
+const search = ref('')
+const searchType = ref('title')
+const filterDoc = ref('')
+// 批量
+const isMul = ref(false)
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 50,
+  total: 0
+})
+
+function mulAssociation() {
+  const data = {
+    problem_id_list: currentMulProblemId.value,
+    paragraph_list: associationParagraph.value.map((item) => ({
+      paragraph_id: item.id,
+      document_id: item.document_id
+    }))
+  }
+  problemApi.postMulAssociationProblem(id, data, loading).then(() => {
+    MsgSuccess('批量关联分段成功')
+    dialogVisible.value = false
+  })
+}
+
+function associationClick(item: any) {
+  if (isMul.value) {
+    if (isAssociation(item.id)) {
+      associationParagraph.value.splice(associationParagraph.value.indexOf(item.id), 1)
+    } else {
+      associationParagraph.value.push(item)
+    }
+  } else {
+    if (isAssociation(item.id)) {
+      problem
+        .asyncDisassociationProblem(
+          id,
+          item.document_id,
+          item.id,
+          currentProblemId.value as string,
+          loading
+        )
+        .then(() => {
+          getRecord(currentProblemId.value)
+        })
+    } else {
+      problem
+        .asyncAssociationProblem(
+          id,
+          item.document_id,
+          item.id,
+          currentProblemId.value as string,
+          loading
+        )
+        .then(() => {
+          getRecord(currentProblemId.value)
+        })
+    }
+  }
+}
+
+function searchHandle() {
+  paginationConfig.current_page = 1
+  paragraphList.value = []
+  currentDocument.value && getParagraphList(currentDocument.value)
+}
+
+function clickDocumentHandle(item: any) {
+  paginationConfig.current_page = 1
+  paragraphList.value = []
+  currentDocument.value = item.id
+  getParagraphList(item.id)
+}
+
+function getDocument() {
+  document.asyncGetAllDocument(id, loading).then((res: any) => {
+    cloneDocumentList.value = res.data
+    documentList.value = res.data
+    currentDocument.value = cloneDocumentList.value?.length > 0 ? cloneDocumentList.value[0].id : ''
+    currentDocument.value && getParagraphList(currentDocument.value)
+  })
+}
+
+function getParagraphList(documentId: String) {
+  paragraphApi
+    .getParagraph(
+      id,
+      (documentId || currentDocument.value) as string,
+      paginationConfig,
+      search.value && { [searchType.value]: search.value },
+      loading
+    )
+    .then((res) => {
+      paragraphList.value = [...paragraphList.value, ...res.data.records]
+      paginationConfig.total = res.data.total
+    })
+}
+
+// 已关联分段
+function getRecord(problemId: String) {
+  problemApi.getDetailProblems(id as string, problemId as string, loading).then((res) => {
+    associationParagraph.value = res.data
+  })
+}
+
+function associationCount(documentId: String) {
+  return associationParagraph.value.filter((item) => item.document_id === documentId).length
+}
+function isAssociation(paragraphId: String) {
+  return associationParagraph.value.some((option) => option.id === paragraphId)
+}
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    documentList.value = []
+    cloneDocumentList.value = []
+    paragraphList.value = []
+    associationParagraph.value = []
+    isMul.value = false
+
+    currentDocument.value = ''
+    search.value = ''
+    searchType.value = 'title'
+    emit('refresh')
+  }
+})
+
+watch(filterDoc, (val) => {
+  paragraphList.value = []
+  documentList.value = val
+    ? cloneDocumentList.value.filter((item) => item.name.includes(val))
+    : cloneDocumentList.value
+  currentDocument.value = documentList.value?.length > 0 ? documentList.value[0].id : ''
+})
+
+const open = (problemId: any) => {
+  getDocument()
+  if (problemId.length == 1) {
+    currentProblemId.value = problemId[0]
+    getRecord(problemId)
+  } else if (problemId.length > 1) {
+    currentMulProblemId.value = problemId
+    isMul.value = true
+  }
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.paragraph-card {
+  position: relative;
+}
+.paragraph-badge {
+  .el-badge__content {
+    height: auto;
+    display: table;
+  }
+}
+</style>
diff --git a/src/views/problem/index.vue b/src/views/problem/index.vue
new file mode 100644
index 0000000..2b6c59d
--- /dev/null
+++ b/src/views/problem/index.vue
@@ -0,0 +1,362 @@
+<template>
+  <LayoutContainer header="问题">
+    <div class="main-calc-height">
+      <div class="p-24">
+        <div class="flex-between">
+          <div>
+            <el-button type="primary" @click="createProblem">创建问题</el-button>
+            <el-button @click="relateProblem()" :disabled="multipleSelection.length === 0"
+              >关联分段</el-button
+            >
+            <el-button @click="deleteMulDocument" :disabled="multipleSelection.length === 0"
+              >批量删除</el-button
+            >
+          </div>
+
+          <el-input
+            v-model="filterText"
+            placeholder="搜索内容"
+            prefix-icon="Search"
+            class="w-240"
+            @change="getList"
+            clearable
+          />
+        </div>
+        <app-table
+          ref="multipleTableRef"
+          class="mt-16"
+          :data="problemData"
+          :pagination-config="paginationConfig"
+          quick-create
+          quickCreateName="问题"
+          quickCreatePlaceholder="快速创建问题"
+          :quickCreateMaxlength="256"
+          @sizeChange="handleSizeChange"
+          @changePage="getList"
+          @cell-mouse-enter="cellMouseEnter"
+          @cell-mouse-leave="cellMouseLeave"
+          @creatQuick="creatQuickHandle"
+          @row-click="rowClickHandle"
+          @selection-change="handleSelectionChange"
+          :row-class-name="setRowClass"
+          v-loading="loading"
+          :row-key="(row: any) => row.id"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column prop="content" label="问题" min-width="280">
+            <template #default="{ row }">
+              <ReadWrite
+                @change="editName($event, row.id)"
+                :data="row.content"
+                :showEditIcon="row.id === currentMouseId"
+                :maxlength="256"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="paragraph_count" label="关联分段数" align="right" min-width="100">
+            <template #default="{ row }">
+              <el-link type="primary" @click.stop="rowClickHandle(row)" v-if="row.paragraph_count">
+                {{ row.paragraph_count }}
+              </el-link>
+              <span v-else>
+                {{ row.paragraph_count }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="创建时间" width="170">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.create_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_time" label="更新时间" width="170">
+            <template #default="{ row }">
+              {{ datetimeFormat(row.update_time) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="left" fixed="right">
+            <template #default="{ row }">
+              <div>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="关联分段" placement="top">
+                    <el-button type="primary" text @click.stop="relateProblem(row)">
+                      <el-icon><Connection /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span>
+                  <el-tooltip effect="dark" content="删除" placement="top">
+                    <el-button type="primary" text @click.stop="deleteProblem(row)">
+                      <el-icon><Delete /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+        </app-table>
+      </div>
+    </div>
+    <CreateProblemDialog ref="CreateProblemDialogRef" @refresh="refresh" />
+    <DetailProblemDrawer
+      :next="nextChatRecord"
+      :pre="preChatRecord"
+      ref="DetailProblemRef"
+      v-model:currentId="currentClickId"
+      v-model:currentContent="currentContent"
+      :pre_disable="pre_disable"
+      :next_disable="next_disable"
+      @refresh="refreshRelate"
+    />
+    <RelateProblemDialog ref="RelateProblemDialogRef" @refresh="refreshRelate" />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, onBeforeUnmount, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElTable } from 'element-plus'
+import problemApi from '@/api/problem'
+import CreateProblemDialog from './component/CreateProblemDialog.vue'
+import DetailProblemDrawer from './component/DetailProblemDrawer.vue'
+import RelateProblemDialog from './component/RelateProblemDialog.vue'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import type { Dict } from '@/api/type/common'
+import useStore from '@/stores'
+
+const route = useRoute()
+const {
+  params: { id } // 知识库id
+} = route as any
+
+const { problem } = useStore()
+
+const RelateProblemDialogRef = ref()
+const DetailProblemRef = ref()
+const CreateProblemDialogRef = ref()
+const loading = ref(false)
+
+// 当前需要修改问题的id
+const currentMouseId = ref('')
+// 当前点击打开drawer的id
+const currentClickId = ref('')
+const currentContent = ref('')
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 10,
+  total: 0
+})
+
+const filterText = ref('')
+const problemData = ref<any[]>([])
+const problemIndexMap = computed<Dict<number>>(() => {
+  return problemData.value
+    .map((row, index) => ({
+      [row.id]: index
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<any[]>([])
+
+function relateProblem(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v.id)
+      }
+    })
+  }
+
+  RelateProblemDialogRef.value.open(arr)
+}
+
+function createProblem() {
+  CreateProblemDialogRef.value.open()
+}
+
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+
+/*
+  快速创建空白文档
+*/
+function creatQuickHandle(val: string) {
+  loading.value = true
+  const obj = [val]
+  problem
+    .asyncPostProblem(id, obj)
+    .then((res) => {
+      getList()
+      MsgSuccess('创建成功')
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function deleteMulDocument() {
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  problemApi.delMulProblem(id, arr, loading).then(() => {
+    MsgSuccess('批量删除成功')
+    multipleTableRef.value?.clearSelection()
+    getList()
+  })
+}
+
+function deleteProblem(row: any) {
+  MsgConfirm(
+    `是否删除问题：${row.content} ?`,
+    `删除问题关联的 ${row.paragraph_count} 个分段会被取消关联，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      problemApi.delProblems(id, row.id, loading).then(() => {
+        MsgSuccess('删除成功')
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+function editName(val: string, problemId: string) {
+  if (val) {
+    const obj = {
+      content: val
+    }
+    problemApi.putProblems(id, problemId, obj, loading).then(() => {
+      getList()
+      MsgSuccess('修改成功')
+    })
+  } else {
+    MsgError('问题不能为空！')
+  }
+}
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+function cellMouseLeave() {
+  currentMouseId.value = ''
+}
+
+/**
+ * 下一页
+ */
+const nextChatRecord = () => {
+  let index = problemIndexMap.value[currentClickId.value] + 1
+  if (index >= problemData.value.length) {
+    if (
+      index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+    ) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page + 1
+    getList().then(() => {
+      index = 0
+      currentClickId.value = problemData.value[index].id
+      currentContent.value = problemData.value[index].content
+    })
+  } else {
+    currentClickId.value = problemData.value[index].id
+    currentContent.value = problemData.value[index].content
+  }
+}
+const pre_disable = computed(() => {
+  let index = problemIndexMap.value[currentClickId.value] - 1
+  return index < 0 && paginationConfig.current_page <= 1
+})
+
+const next_disable = computed(() => {
+  let index = problemIndexMap.value[currentClickId.value] + 1
+  return (
+    index >= problemData.value.length &&
+    index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+  )
+})
+/**
+ * 上一页
+ */
+const preChatRecord = () => {
+  let index = problemIndexMap.value[currentClickId.value] - 1
+
+  if (index < 0) {
+    if (paginationConfig.current_page <= 1) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page - 1
+    getList().then((ok) => {
+      index = paginationConfig.page_size - 1
+      currentClickId.value = problemData.value[index].id
+      currentContent.value = problemData.value[index].content
+    })
+  } else {
+    currentClickId.value = problemData.value[index].id
+    currentContent.value = problemData.value[index].content
+  }
+}
+
+function rowClickHandle(row: any, column?: any) {
+  if (column && column.type === 'selection') {
+    return
+  }
+  if (row.paragraph_count) {
+    currentClickId.value = row.id
+    currentContent.value = row.content
+    DetailProblemRef.value.open()
+  }
+}
+
+const setRowClass = ({ row }: any) => {
+  return currentClickId.value === row?.id ? 'highlight' : ''
+}
+
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+function getList() {
+  return problem
+    .asyncGetProblem(
+      id as string,
+      paginationConfig,
+      filterText.value && { content: filterText.value },
+      loading
+    )
+    .then((res: any) => {
+      problemData.value = res.data.records
+      paginationConfig.total = res.data.total
+    })
+}
+function refreshRelate() {
+  getList()
+  multipleTableRef.value?.clearSelection()
+}
+function refresh() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+
+onBeforeUnmount(() => {})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/team/component/CreateMemberDialog.vue b/src/views/team/component/CreateMemberDialog.vue
new file mode 100644
index 0000000..9890e60
--- /dev/null
+++ b/src/views/team/component/CreateMemberDialog.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    width="600"
+    class="member-dialog"
+  >
+    <template #header="{ titleId, titleClass }">
+      <h4 :id="titleId" :class="titleClass">添加成员</h4>
+      <div class="dialog-sub-title">成员登录后可以访问到您授权的数据。</div>
+    </template>
+
+    <el-form
+      ref="addMemberFormRef"
+      :model="memberForm"
+      label-position="top"
+      :rules="rules"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item label="用户名/邮箱" prop="users">
+        <tags-input v-model:tags="memberForm.users" placeholder="请输入成员的用户名或邮箱" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitMember(addMemberFormRef)" :loading="loading">
+          添加
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import TeamApi from '@/api/team'
+
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref<boolean>(false)
+
+const memberForm = ref({
+  users: []
+})
+
+const addMemberFormRef = ref<FormInstance>()
+
+const loading = ref<boolean>(false)
+
+const rules = ref<FormRules>({
+  users: [
+    {
+      type: 'array',
+      required: true,
+      message: '请输入用户名/邮箱',
+      trigger: 'change'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    memberForm.value = {
+      users: []
+    }
+    loading.value = false
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+const submitMember = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      loading.value = true
+      let idsArray = memberForm.value.users.map((obj: any) => obj.id)
+      TeamApi.postCreatTeamMember(idsArray)
+        .then((res) => {
+          MsgSuccess('提交成功')
+          emit('refresh', idsArray)
+          dialogVisible.value = false
+          loading.value = false
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    }
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scope>
+.member-dialog {
+  .el-dialog__header {
+    padding-bottom: 19px;
+  }
+}
+.custom-select-multiple {
+  width: 200%;
+  .el-input {
+    min-height: 100px;
+  }
+  .el-select__tags {
+    top: 0;
+    transform: none;
+    padding-top: 8px;
+  }
+  .el-input__wrapper {
+    align-items: start;
+  }
+}
+</style>
diff --git a/src/views/team/component/PermissionSetting.vue b/src/views/team/component/PermissionSetting.vue
new file mode 100644
index 0000000..d171c8b
--- /dev/null
+++ b/src/views/team/component/PermissionSetting.vue
@@ -0,0 +1,158 @@
+<template>
+  <el-input
+    v-model="filterText"
+    placeholder="搜索"
+    prefix-icon="Search"
+    class="p-24 pt-0 pb-0 mb-16 mt-4"
+    clearable
+  />
+  <div class="p-24 pt-0">
+    <el-table :data="filterData" :max-height="tableHeight">
+      <el-table-column prop="name" :label="isApplication ? '应用名称' : '知识库名称'">
+        <template #default="{ row }">
+          <div class="flex align-center">
+            <AppAvatar
+              v-if="isApplication"
+              :name="row.name"
+              pinyinColor
+              class="mr-12"
+              shape="square"
+              :size="24"
+            />
+            <AppAvatar v-else-if="isDataset" class="mr-12 avatar-blue" shape="square" :size="24">
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+            </AppAvatar>
+            <auto-tooltip :content="row?.name">
+              {{ row?.name }}
+            </auto-tooltip>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="管理" align="center" width="80" fixed="right">
+        <template #header>
+          <el-checkbox
+            :disabled="props.manage"
+            v-model="allChecked[TeamEnum.MANAGE]"
+            :indeterminate="allIndeterminate[TeamEnum.MANAGE]"
+            label="管理"
+          />
+        </template>
+        <template #default="{ row }">
+          <el-checkbox
+            :disabled="props.manage"
+            v-model="row.operate[TeamEnum.MANAGE]"
+            @change="(e: boolean) => checkedOperateChange(TeamEnum.MANAGE, row, e)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="查看" align="center" width="80" fixed="right">
+        <template #header>
+          <el-checkbox
+            :disabled="props.manage"
+            v-model="allChecked[TeamEnum.USE]"
+            :indeterminate="allIndeterminate[TeamEnum.USE]"
+            label="查看"
+          />
+        </template>
+        <template #default="{ row }">
+          <el-checkbox
+            :disabled="props.manage"
+            v-model="row.operate[TeamEnum.USE]"
+            @change="(e: boolean) => checkedOperateChange(TeamEnum.USE, row, e)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { TeamEnum } from '@/enums/team'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  id: String,
+  type: String,
+  tableHeight: Number,
+  manage: Boolean
+})
+
+const isDataset = computed(() => props.type === TeamEnum.DATASET)
+const isApplication = computed(() => props.type === TeamEnum.APPLICATION)
+
+const emit = defineEmits(['update:data'])
+const allChecked: any = ref({
+  [TeamEnum.MANAGE]: computed({
+    get: () => {
+      return filterData.value.some((item: any) => item.operate[TeamEnum.MANAGE])
+    },
+    set: (val: boolean) => {
+      if (val) {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.MANAGE] = true
+          item.operate[TeamEnum.USE] = true
+        })
+      } else {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.MANAGE] = false
+        })
+      }
+    }
+  }),
+  [TeamEnum.USE]: computed({
+    get: () => {
+      return filterData.value.some((item: any) => item.operate[TeamEnum.USE])
+    },
+    set: (val: boolean) => {
+      if (val) {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.USE] = true
+        })
+      } else {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.USE] = false
+          item.operate[TeamEnum.MANAGE] = false
+        })
+      }
+    }
+  })
+})
+
+const filterText = ref('')
+
+const filterData = computed(() => props.data.filter((v: any) => v.name.includes(filterText.value)))
+
+const allIndeterminate: any = ref({
+  [TeamEnum.MANAGE]: computed(() => {
+    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.MANAGE])
+    if (all_not_checked) {
+      return false
+    }
+    return !filterData.value.every((item: any) => item.operate[TeamEnum.MANAGE])
+  }),
+  [TeamEnum.USE]: computed(() => {
+    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.USE])
+    if (all_not_checked) {
+      return false
+    }
+    return !filterData.value.every((item: any) => item.operate[TeamEnum.USE])
+  })
+})
+
+function checkedOperateChange(Name: string | number, row: any, e: boolean) {
+  props.data.map((item: any) => {
+    if (item.id === row.id) {
+      item.operate[Name] = e
+      if (Name === TeamEnum.MANAGE && e) {
+        item.operate[TeamEnum.USE] = true
+      } else if (Name === TeamEnum.USE && !e) {
+        item.operate[TeamEnum.MANAGE] = false
+      }
+    }
+  })
+}
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/team/index.vue b/src/views/team/index.vue
new file mode 100644
index 0000000..4a35c59
--- /dev/null
+++ b/src/views/team/index.vue
@@ -0,0 +1,279 @@
+<template>
+  <LayoutContainer header="团队成员">
+    <div class="team-manage flex main-calc-height">
+      <div class="team-member p-8 border-r">
+        <div class="flex-between p-16">
+          <h4>成员</h4>
+          <el-button type="primary" link @click="addMember">
+            <AppIcon iconName="app-add-users" class="add-user-icon" />
+          </el-button>
+        </div>
+        <div class="team-member-input">
+          <el-input
+            v-model="filterText"
+            placeholder="请输入用户名搜索"
+            prefix-icon="Search"
+            clearable
+          />
+        </div>
+        <div class="list-height-left">
+          <el-scrollbar>
+            <common-list
+              :data="filterMember"
+              class="mt-8"
+              v-loading="loading"
+              @click="clickMemberHandle"
+              :default-active="currentUser"
+            >
+              <template #default="{ row }">
+                <div class="flex-between">
+                  <div>
+                    <span class="mr-8">{{ row.username }}</span>
+                    <el-tag v-if="isManage(row.type)" class="default-tag">所有者</el-tag>
+                  </div>
+                  <div @click.stop style="margin-top: 5px">
+                    <el-dropdown trigger="click" v-if="!isManage(row.type)">
+                      <span class="cursor">
+                        <el-icon class="rotate-90"><MoreFilled /></el-icon>
+                      </span>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item @click.prevent="deleteMember(row)"
+                            >移除</el-dropdown-item
+                          >
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </div>
+              </template>
+            </common-list>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="permission-setting flex" v-loading="rLoading">
+        <div class="team-manage__table">
+          <h4 class="p-24 pb-0 mb-4">权限设置</h4>
+          <el-tabs v-model="activeName" class="team-manage__tabs">
+            <el-tab-pane
+              v-for="(item, index) in settingTags"
+              :key="item.value"
+              :label="item.label"
+              :name="item.value"
+            >
+              <PermissionSetting
+                :key="index"
+                :data="item.data"
+                :type="item.value"
+                :tableHeight="tableHeight"
+                :manage="isManage(currentType)"
+              ></PermissionSetting>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <div class="submit-button">
+          <el-button type="primary" @click="submitPermissions">保存</el-button>
+        </div>
+      </div>
+    </div>
+    <CreateMemberDialog ref="CreateMemberRef" @refresh="refresh" />
+  </LayoutContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, watch } from 'vue'
+import TeamApi from '@/api/team'
+import type { TeamMember } from '@/api/type/team'
+import CreateMemberDialog from './component/CreateMemberDialog.vue'
+import PermissionSetting from './component/PermissionSetting.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { TeamEnum } from '@/enums/team'
+
+const CreateMemberRef = ref<InstanceType<typeof CreateMemberDialog>>()
+const loading = ref(false)
+const rLoading = ref(false)
+const memberList = ref<TeamMember[]>([]) // 全部成员
+const filterMember = ref<TeamMember[]>([]) // 搜索过滤后列表
+const currentUser = ref<String>('')
+const currentType = ref<String>('')
+
+const filterText = ref('')
+
+const activeName = ref(TeamEnum.DATASET)
+const tableHeight = ref(0)
+
+const settingTags = reactive([
+  {
+    label: '知识库',
+    value: TeamEnum.DATASET,
+    data: [] as any
+  },
+  {
+    label: '应用',
+    value: TeamEnum.APPLICATION,
+    data: [] as any
+  }
+])
+
+watch(filterText, (val) => {
+  if (val) {
+    filterMember.value = memberList.value.filter((v) => v.username.includes(val))
+  } else {
+    filterMember.value = memberList.value
+  }
+})
+
+function isManage(type: String) {
+  return type === 'manage'
+}
+
+function submitPermissions() {
+  rLoading.value = true
+  const obj: any = {
+    team_member_permission_list: []
+  }
+  settingTags.map((item) => {
+    item.data.map((v: any) => {
+      obj['team_member_permission_list'].push({
+        target_id: v.id,
+        type: v.type,
+        operate: v.operate
+      })
+    })
+  })
+  TeamApi.putMemberPermissions(currentUser.value, obj)
+    .then(() => {
+      MsgSuccess('提交成功')
+      MemberPermissions(currentUser.value)
+    })
+    .catch(() => {
+      rLoading.value = false
+    })
+}
+
+function MemberPermissions(id: String) {
+  rLoading.value = true
+  TeamApi.getMemberPermissions(id)
+    .then((res) => {
+      if (!res.data || Object.keys(res.data).length > 0) {
+        settingTags.map((item) => {
+          if (Object.keys(res.data).indexOf(item.value) !== -1) {
+            item.data = res.data[item.value]
+          }
+        })
+      }
+      rLoading.value = false
+    })
+    .catch(() => {
+      rLoading.value = false
+    })
+}
+
+function deleteMember(row: TeamMember) {
+  MsgConfirm(
+    `是否移除成员：${row.username}?`,
+    '移除后将会取消成员拥有的知识库和应用权限。',
+
+    {
+      confirmButtonText: '移除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      loading.value = true
+      TeamApi.delTeamMember(row.id)
+        .then(() => {
+          MsgSuccess('删除成功')
+          getMember()
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    })
+    .catch(() => {})
+}
+
+function clickMemberHandle(item: any) {
+  currentUser.value = item.id
+  currentType.value = item.type
+  MemberPermissions(item.id)
+}
+function addMember() {
+  CreateMemberRef.value?.open()
+}
+
+function getMember(id?: string) {
+  loading.value = true
+  TeamApi.getTeamMember()
+    .then((res) => {
+      memberList.value = res.data
+      filterMember.value = res.data
+
+      const user = (id && memberList.value.find((p) => p.user_id === id)) || null
+      currentUser.value = user ? user.id : memberList.value[0].id
+      currentType.value = user ? user.type : memberList.value[0].type
+      MemberPermissions(currentUser.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function refresh(data?: string[]) {
+  getMember(data && data[0])
+}
+
+onMounted(() => {
+  tableHeight.value = window.innerHeight - 330
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - 330
+    })()
+  }
+  getMember()
+})
+</script>
+
+<style lang="scss" scoped>
+.team-manage {
+  .add-user-icon {
+    font-size: 17px;
+  }
+  .team-member-input {
+    padding: 0 calc(var(--app-base-px) * 2);
+  }
+  .team-member {
+    box-sizing: border-box;
+    width: var(--setting-left-width);
+    min-width: var(--setting-left-width);
+  }
+
+  .permission-setting {
+    box-sizing: border-box;
+    width: calc(100% - var(--setting-left-width));
+    flex-direction: column;
+    position: relative;
+    .submit-button {
+      position: absolute;
+      top: 54px;
+      right: 24px;
+    }
+  }
+  .list-height-left {
+    height: calc(var(--create-dataset-height) - 60px);
+  }
+
+  &__tabs {
+    margin-top: 10px;
+
+    :deep(.el-tabs__nav-scroll) {
+      padding: 0 24px;
+    }
+  }
+  &__table {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/template/component/AddParamDrawer.vue b/src/views/template/component/AddParamDrawer.vue
new file mode 100644
index 0000000..f1f6bd8
--- /dev/null
+++ b/src/views/template/component/AddParamDrawer.vue
@@ -0,0 +1,77 @@
+<template>
+  <el-drawer
+    v-model="drawer"
+    :direction="direction"
+    size="600"
+    :destroy-on-close="true"
+    :before-close="cancelClick"
+  >
+    <template #header>
+      <h4>{{ isEdit ? '编辑参数' : '添加参数' }}</h4>
+    </template>
+    <template #default>
+      <DynamicsFormConstructor
+        v-model="currentItem"
+        label-position="top"
+        require-asterisk-position="right"
+        ref="DynamicsFormConstructorRef"
+      ></DynamicsFormConstructor>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick()">{{ isEdit ? '保存' : '添加' }}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DrawerProps } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+
+const drawer = ref(false)
+const direction = ref<DrawerProps['direction']>('rtl')
+const isEdit = ref(false)
+const DynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+
+const currentItem = ref(null)
+const currentIndex = ref(null)
+
+const emit = defineEmits(['refresh'])
+
+const open = (row: any, index: any) => {
+  if (row) {
+    currentItem.value = cloneDeep(row)
+    currentIndex.value = index
+    isEdit.value = true
+  }
+  drawer.value = true
+}
+
+function cancelClick() {
+  drawer.value = false
+  isEdit.value = false
+  currentItem.value = null
+  currentIndex.value = null
+}
+
+function confirmClick() {
+  const formEl = DynamicsFormConstructorRef.value
+  formEl?.validate().then((valid) => {
+    if (valid) {
+      emit('refresh', formEl?.getData(), currentIndex.value)
+      drawer.value = false
+      isEdit.value = false
+      currentItem.value = null
+      currentIndex.value = null
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/template/component/CreateModelDialog.vue b/src/views/template/component/CreateModelDialog.vue
new file mode 100644
index 0000000..4f19e40
--- /dev/null
+++ b/src/views/template/component/CreateModelDialog.vue
@@ -0,0 +1,441 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item>
+          <span @click="toSelectProvider" class="select-provider"
+            >选择供应商</span
+          ></el-breadcrumb-item
+        >
+        <el-breadcrumb-item
+          ><span class="active-breadcrumb">{{
+            `添加 ${providerValue?.name}`
+          }}</span></el-breadcrumb-item
+        >
+      </el-breadcrumb>
+    </template>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基础信息" name="base-info">
+        <DynamicsForm
+          v-model="form_data"
+          :render_data="model_form_field"
+          :model="form_data"
+          ref="dynamicsFormRef"
+          label-position="top"
+          require-asterisk-position="right"
+          class="mb-24"
+          label-width="auto"
+        >
+          <template #default>
+            <el-form-item prop="name" :rules="base_form_data_rule.name">
+              <template #label>
+                <div class="flex align-center" style="display: inline-flex">
+                  <div class="mr-4">
+                    <span>模型名称 </span>
+                  </div>
+                  <el-tooltip effect="dark" placement="right">
+                    <template #content>
+                      <p>MaxKB 中自定义的模型名称</p>
+                    </template>
+                    <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input
+                v-model="base_form_data.name"
+                maxlength="64"
+                show-word-limit
+                placeholder="请给基础模型设置一个名称"
+              />
+            </el-form-item>
+            <el-form-item prop="permission_type" :rules="base_form_data_rule.permission_type">
+              <template #label>
+                <span>权限</span>
+              </template>
+              <el-radio-group v-model="base_form_data.permission_type" class="card__radio">
+                <el-row :gutter="16">
+                  <template v-for="(value, key) of PermissionType" :key="key">
+                    <el-col :span="12">
+                      <el-card
+                        shadow="never"
+                        class="mb-16"
+                        :class="base_form_data.permission_type === key ? 'active' : ''"
+                      >
+                        <el-radio :value="key" size="large">
+                          <p class="mb-4">{{ value }}</p>
+                          <el-text type="info">
+                            {{ PermissionDesc[key] }}
+                          </el-text>
+                        </el-radio>
+                      </el-card>
+                    </el-col>
+                  </template>
+                </el-row>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
+              <template #label>
+                <div class="flex align-center" style="display: inline-flex">
+                  <span class="mr-4">模型类型 </span>
+                  <el-tooltip effect="dark" placement="right">
+                    <template #content>
+                      <p>大语言模型：在应用中与AI对话的推理模型。</p>
+                      <p>向量模型：在知识库中对文档内容进行向量化的模型。</p>
+                      <p>语音识别：在应用中开启语音识别后用于语音转文字的模型。</p>
+                      <p>语音合成：在应用中开启语音播放后用于文字转语音的模型。</p>
+                      <p>
+                        重排模型：在高级编排应用中使用多路召回时，对候选分段进行重新排序的模型。
+                      </p>
+                      <p>图片理解：在高级编排应用中用于图片理解的视觉模型。</p>
+                      <p>图片生成：在高级编排应用中用于图片生成的视觉模型。</p>
+                    </template>
+                    <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-select
+                v-loading="model_type_loading"
+                @change="list_base_model($event, true)"
+                v-model="base_form_data.model_type"
+                class="w-full m-2"
+                placeholder="请选择模型类型"
+              >
+                <el-option
+                  v-for="item in model_type_list"
+                  :key="item.value"
+                  :label="item.key"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
+              <template #label>
+                <div class="flex align-center" style="display: inline-flex">
+                  <div class="mr-4">
+                    <span>基础模型 </span>
+                    <span class="danger">列表中未列出的模型，直接输入模型名称，回车即可添加</span>
+                  </div>
+                </div>
+              </template>
+              <el-select
+                @change="getModelForm($event)"
+                v-loading="base_model_loading"
+                v-model="base_form_data.model_name"
+                class="w-full m-2"
+                placeholder="自定义输入基础模型后回车即可"
+                filterable
+                allow-create
+                default-first-option
+              >
+                <el-option v-for="item in base_model_list" :key="item.name" :value="item.name">
+                  <template #default>
+                    <div class="flex align-center" style="display: inline-flex">
+                      <div class="flex-between mr-4">
+                        <span>{{ item.name }} </span>
+                      </div>
+                      <el-tooltip effect="dark" placement="right" v-if="item.desc">
+                        <template #content>
+                          <p class="w-280">{{ item.desc }}</p>
+                        </template>
+                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </template>
+        </DynamicsForm>
+      </el-tab-pane>
+      <el-tab-pane label="高级设置" name="advanced-info">
+        <el-empty
+          v-if="!base_form_data.model_type || !base_form_data.model_name"
+          description="请先选择基础信息的模型类型和基础模型"
+        />
+        <el-empty
+          v-else-if="base_form_data.model_type === 'RERANKER' || base_form_data.model_type === 'EMBEDDING' || base_form_data.model_type === 'STT'"
+          description="所选模型不支持参数设置"
+        />
+        <div class="flex-between mb-8" v-else>
+          <h5>模型参数</h5>
+          <el-button type="text" @click.stop="openAddDrawer()" :disabled="base_form_data.model_type !== 'TTS' && base_form_data.model_type !== 'LLM' && base_form_data.model_type !== 'IMAGE' && base_form_data.model_type !== 'TTI'">
+            <AppIcon iconName="Plus" class="add-icon" />添加
+          </el-button>
+        </div>
+        <el-table
+          :data="base_form_data.model_params_form"
+          v-if="base_form_data.model_params_form?.length > 0"
+          class="mb-16"
+        >
+          <el-table-column prop="label" label="显示名称" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
+                row.label.label
+              }}</span>
+              <span v-else>{{ row.label }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="field" label="参数" show-overflow-tooltip />
+          <el-table-column label="组件类型" width="110px">
+            <template #default="{ row }">
+              <el-tag type="info" class="info-tag">{{
+                input_type_list.find((item) => item.value === row.input_type)?.label
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="default_value" label="默认值" show-overflow-tooltip />
+          <el-table-column label="必填">
+            <template #default="{ row }">
+              <div @click.stop>
+                <el-switch disabled size="small" v-model="row.required" />
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" align="left" width="80">
+            <template #default="{ row, $index }">
+              <span class="mr-4">
+                <el-tooltip effect="dark" content="修改" placement="top">
+                  <el-button type="primary" text @click.stop="openAddDrawer(row, $index)">
+                    <el-icon><EditPen /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </span>
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button type="primary" text @click="deleteParam($index)">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit" :loading="loading"> 添加 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <AddParamDrawer ref="AddParamRef" @refresh="refresh" />
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Provider, BaseModel } from '@/api/type/model'
+import type { Dict, KeyValue } from '@/api/type/common'
+import ModelApi from '@/api/model'
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import type { FormRules } from 'element-plus'
+import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
+import { PermissionType, PermissionDesc } from '@/enums/model'
+import { input_type_list } from '@/components/dynamics-form/constructor/data'
+import AddParamDrawer from '@/views/template/component/AddParamDrawer.vue'
+
+const providerValue = ref<Provider>()
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const emit = defineEmits(['change', 'submit'])
+const loading = ref<boolean>(false)
+const model_type_loading = ref<boolean>(false)
+const base_model_loading = ref<boolean>(false)
+const model_type_list = ref<Array<KeyValue<string, string>>>([])
+
+const base_model_list = ref<Array<BaseModel>>()
+const model_form_field = ref<Array<FormField>>([])
+const dialogVisible = ref<boolean>(false)
+const activeName = ref('base-info')
+const AddParamRef = ref()
+
+const base_form_data_rule = ref<FormRules>({
+  name: { required: true, trigger: 'blur', message: '模型名称不能为空' },
+  permission_type: { required: true, trigger: 'change', message: '权限不能为空' },
+  model_type: { required: true, trigger: 'change', message: '模型类型不能为空' },
+  model_name: { required: true, trigger: 'change', message: '基础模型不能为空' }
+})
+
+const base_form_data = ref<{
+  name: string
+  permission_type: string
+  model_type: string
+  model_name: string
+  model_params_form: any
+}>({ name: '', model_type: '', model_name: '', permission_type: 'PRIVATE', model_params_form: [] })
+
+const credential_form_data = ref<Dict<any>>({})
+
+const form_data = computed({
+  get: () => {
+    return {
+      ...credential_form_data.value,
+      name: base_form_data.value.name,
+      model_type: base_form_data.value.model_type,
+      model_name: base_form_data.value.model_name,
+      permission_type: base_form_data.value.permission_type,
+      model_params_form: base_form_data.value.model_params_form
+    }
+  },
+  set: (event: any) => {
+    credential_form_data.value = event
+  }
+})
+
+const getModelForm = (model_name: string) => {
+  if (!form_data.value.model_type) {
+    MsgWarning('请先选择模型类型')
+    base_form_data.value.model_name = ''
+    return
+  }
+  if (providerValue.value) {
+    ModelApi.getModelCreateForm(
+      providerValue.value.provider,
+      form_data.value.model_type,
+      model_name
+    ).then((ok) => {
+      model_form_field.value = ok.data
+      // 渲染动态表单
+      dynamicsFormRef.value?.render(model_form_field.value, undefined)
+    })
+
+    ModelApi.listBaseModelParamsForm(
+      providerValue.value.provider,
+      form_data.value.model_type,
+      model_name,
+      base_model_loading
+    ).then((ok) => {
+      base_form_data.value.model_params_form = ok.data
+    })
+  }
+}
+
+const open = (provider: Provider) => {
+  ModelApi.listModelType(provider.provider, model_type_loading).then((ok) => {
+    model_type_list.value = ok.data
+  })
+  providerValue.value = provider
+  dialogVisible.value = true
+  activeName.value = 'base-info'
+}
+
+const list_base_model = (model_type: any, change?: boolean) => {
+  if (change) {
+    base_form_data.value.model_name = ''
+    base_form_data.value.model_params_form = []
+  }
+  if (providerValue.value) {
+    ModelApi.listBaseModel(providerValue.value.provider, model_type, base_model_loading).then(
+      (ok) => {
+        base_model_list.value = ok.data
+      }
+    )
+  }
+}
+
+const close = () => {
+  base_form_data.value = {
+    name: '',
+    model_type: '',
+    model_name: '',
+    permission_type: 'PRIVATE',
+    model_params_form: []
+  }
+  credential_form_data.value = {}
+  model_form_field.value = []
+  base_model_list.value = []
+  loading.value = false
+  dialogVisible.value = false
+}
+const submit = () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    if (providerValue.value) {
+      ModelApi.createModel(
+        {
+          ...base_form_data.value,
+          credential: credential_form_data.value,
+          provider: providerValue.value.provider
+        },
+        loading
+      ).then((ok) => {
+        close()
+        MsgSuccess('创建模型成功')
+        emit('submit')
+      })
+    }
+  }).catch(() => { 
+    MsgError('基础信息有填写错误')
+  })
+}
+
+function openAddDrawer(data?: any, index?: any) {
+  AddParamRef.value?.open(data, index)
+}
+
+function deleteParam(index: any) {
+  base_form_data.value.model_params_form.splice(index, 1)
+}
+
+function refresh(data: any, index: any) {
+  for (let i = 0; i < base_form_data.value.model_params_form.length; i++) {
+    let field = base_form_data.value.model_params_form[i].field
+    let label = base_form_data.value.model_params_form[i].label
+    if (label && label.input_type === 'TooltipLabel') {
+      label = label.label
+    }
+    let label2 = data.label
+    if (label2 && label2.input_type === 'TooltipLabel') {
+      label2 = label2.label
+    }
+
+    if (field === data.field && index !== i) {
+      MsgError('变量已存在: ' + data.field)
+      return
+    }
+    if (label === label2 && index !== i) {
+      MsgError('变量已存在: ' + label)
+      return
+    }
+  }
+  if (index !== null) {
+    base_form_data.value.model_params_form.splice(index, 1, data)
+  } else {
+    base_form_data.value.model_params_form.push(data)
+  }
+}
+
+const toSelectProvider = () => {
+  close()
+  emit('change')
+}
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped>
+.select-provider {
+  font-size: 16px;
+  color: rgba(100, 106, 115, 1);
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.active-breadcrumb {
+  font-size: 16px;
+  color: rgba(31, 35, 41, 1);
+  font-weight: 500;
+  line-height: 24px;
+}
+</style>
diff --git a/src/views/template/component/EditModel.vue b/src/views/template/component/EditModel.vue
new file mode 100644
index 0000000..bc69040
--- /dev/null
+++ b/src/views/template/component/EditModel.vue
@@ -0,0 +1,290 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item
+          ><span class="active-breadcrumb">{{
+            `编辑 ${providerValue?.name}`
+          }}</span></el-breadcrumb-item
+        >
+      </el-breadcrumb>
+    </template>
+
+    <DynamicsForm
+      v-loading="formLoading"
+      v-model="form_data"
+      :render_data="model_form_field"
+      :model="form_data"
+      ref="dynamicsFormRef"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <template #default>
+        <el-form-item prop="name" :rules="base_form_data_rule.name">
+          <template #label>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="mr-4">
+                <span>模型名称 </span>
+              </div>
+              <el-tooltip effect="dark" placement="right">
+                <template #content>
+                  <p>MaxKB 中自定义的模型名称</p>
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-input
+            v-model="base_form_data.name"
+            maxlength="64"
+            show-word-limit
+            placeholder="请给基础模型设置一个名称"
+          />
+        </el-form-item>
+        <el-form-item prop="permission_type" :rules="base_form_data_rule.permission_type">
+          <template #label>
+            <span>权限</span>
+          </template>
+
+          <el-radio-group v-model="base_form_data.permission_type" class="card__radio">
+            <el-row :gutter="16">
+              <template v-for="(value, key) of PermissionType" :key="key">
+                <el-col :span="12">
+                  <el-card
+                    shadow="never"
+                    class="mb-16"
+                    :class="base_form_data.permission_type === key ? 'active' : ''"
+                  >
+                    <el-radio :value="key" size="large">
+                      <p class="mb-4">{{ value }}</p>
+                      <el-text type="info">
+                        {{ PermissionDesc[key] }}
+                      </el-text>
+                    </el-radio>
+                  </el-card>
+                </el-col>
+              </template>
+            </el-row>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
+          <template #label>
+            <span>模型类型</span>
+          </template>
+          <el-select
+            disabled
+            v-loading="model_type_loading"
+            @change="list_base_model($event, true)"
+            v-model="base_form_data.model_type"
+            class="w-full m-2"
+            placeholder="请选择模型类型"
+          >
+            <el-option
+              v-for="item in model_type_list"
+              :key="item.value"
+              :label="item.key"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
+          <template #label>
+            <div class="flex align-center" style="display: inline-flex">
+              <div class="mr-4">
+                <span>基础模型 </span>
+                <span class="danger">列表中未列出的模型，直接输入模型名称，回车即可添加</span>
+              </div>
+            </div>
+          </template>
+          <el-select
+            @change="getModelForm($event)"
+            v-loading="base_model_loading"
+            v-model="base_form_data.model_name"
+            class="w-full m-2"
+            placeholder="请选择基础模型"
+            filterable
+            allow-create
+            default-first-option
+          >
+            <el-option v-for="item in base_model_list" :key="item.name" :value="item.name">
+              <template #default>
+                <div class="flex align-center" style="display: inline-flex">
+                  <div class="flex-between mr-4">
+                    <span>{{ item.name }} </span>
+                  </div>
+                  <el-tooltip effect="dark" placement="right" v-if="item.desc">
+                    <template #content>
+                      <p>{{ item.desc }}</p>
+                    </template>
+                    <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </DynamicsForm>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit" :loading="loading"> 修改 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Provider, BaseModel, Model } from '@/api/type/model'
+import type { Dict, KeyValue } from '@/api/type/common'
+import ModelApi from '@/api/model'
+import type { FormField } from '@/components/dynamics-form/type'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import type { FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { PermissionType, PermissionDesc } from '@/enums/model'
+
+const providerValue = ref<Provider>()
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const emit = defineEmits(['change', 'submit'])
+const loading = ref<boolean>(false)
+const formLoading = ref<boolean>(false)
+const model_type_loading = ref<boolean>(false)
+const base_model_loading = ref<boolean>(false)
+const model_type_list = ref<Array<KeyValue<string, string>>>([])
+const modelValue = ref<Model>()
+const base_model_list = ref<Array<BaseModel>>([])
+const model_form_field = ref<Array<FormField>>([])
+const dialogVisible = ref<boolean>(false)
+
+const base_form_data_rule = ref<FormRules>({
+  name: { required: true, trigger: 'blur', message: '模型名称不能为空' },
+  model_type: { required: true, trigger: 'change', message: '模型类型不能为空' },
+  model_name: { required: true, trigger: 'change', message: '基础模型不能为空' }
+})
+
+const base_form_data = ref<{
+  name: string
+  permission_type: string
+  model_type: string
+
+  model_name: string
+}>({ name: '', model_type: '', model_name: '', permission_type: 'PRIVATE' })
+
+const credential_form_data = ref<Dict<any>>({})
+
+const form_data = computed({
+  get: () => {
+    return { ...credential_form_data.value, ...base_form_data.value }
+  },
+  set: (event: any) => {
+    credential_form_data.value = event
+  }
+})
+
+const getModelForm = (model_name: string) => {
+  if (providerValue.value) {
+    ModelApi.getModelCreateForm(
+      providerValue.value.provider,
+      form_data.value.model_type,
+      model_name
+    ).then((ok) => {
+      model_form_field.value = ok.data
+      if (modelValue.value) {
+        // 渲染动态表单
+        dynamicsFormRef.value?.render(model_form_field.value, modelValue.value.credential)
+      }
+    })
+  }
+}
+const list_base_model = (model_type: any, change?: boolean) => {
+  if (change) {
+    base_form_data.value.model_name = ''
+  }
+  if (providerValue.value) {
+    ModelApi.listBaseModel(providerValue.value.provider, model_type, base_model_loading).then(
+      (ok) => {
+        base_model_list.value = ok.data
+      }
+    )
+  }
+}
+const open = (provider: Provider, model: Model) => {
+  modelValue.value = model
+  ModelApi.getModelById(model.id, formLoading).then((ok) => {
+    modelValue.value = ok.data
+    ModelApi.listModelType(model.provider, model_type_loading).then((ok) => {
+      model_type_list.value = ok.data
+      list_base_model(model.model_type)
+    })
+    providerValue.value = provider
+
+    base_form_data.value = {
+      name: model.name,
+      permission_type: model.permission_type,
+      model_type: model.model_type,
+      model_name: model.model_name
+    }
+    form_data.value = model.credential
+    getModelForm(model.model_name)
+  })
+  dialogVisible.value = true
+}
+
+const close = () => {
+  base_form_data.value = { name: '', model_type: '', model_name: '', permission_type: '' }
+  dynamicsFormRef.value?.ruleFormRef?.resetFields()
+  credential_form_data.value = {}
+  model_form_field.value = []
+  base_model_list.value = []
+  dialogVisible.value = false
+}
+
+const submit = () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    if (modelValue.value) {
+      ModelApi.updateModel(
+        modelValue.value.id,
+        {
+          ...base_form_data.value,
+          credential: credential_form_data.value
+        },
+        loading
+      ).then((ok) => {
+        MsgSuccess('修改模型成功')
+        close()
+        emit('submit')
+      })
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped>
+.select-provider {
+  font-size: 16px;
+  color: rgba(100, 106, 115, 1);
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.active-breadcrumb {
+  font-size: 16px;
+  color: rgba(31, 35, 41, 1);
+  font-weight: 500;
+  line-height: 24px;
+}
+</style>
diff --git a/src/views/template/component/ModelCard.vue b/src/views/template/component/ModelCard.vue
new file mode 100644
index 0000000..4420cd5
--- /dev/null
+++ b/src/views/template/component/ModelCard.vue
@@ -0,0 +1,269 @@
+<template>
+  <card-box :title="model.name" shadow="hover" class="model-card">
+    <template #header>
+      <div class="flex">
+        <span style="height: 32px; width: 32px" :innerHTML="icon" class="mr-12"></span>
+        <div style="width: calc(100% - 32px - 4px - var(--app-base-px))">
+          <div class="flex" style="height: 22px">
+            <auto-tooltip :content="model.name" style="max-width: 40%">
+              {{ model.name }}
+            </auto-tooltip>
+            <span v-if="currentModel.status === 'ERROR'">
+              <el-tooltip effect="dark" :content="errMessage" placement="top">
+                <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+              </el-tooltip>
+            </span>
+            <span v-if="currentModel.status === 'PAUSE_DOWNLOAD'">
+              <el-tooltip
+                effect="dark"
+                :content="`基础模型: ${props.model.model_name} 下载失败`"
+                placement="top"
+              >
+                <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+              </el-tooltip>
+            </span>
+          </div>
+          <div class="mt-4">
+            <el-tag v-if="model.permission_type === 'PRIVATE'" type="danger" class="danger-tag"
+              >私有</el-tag
+            >
+            <el-tag v-else type="info" class="info-tag">公用</el-tag>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="mt-16">
+      <ul>
+        <li class="flex mt-16">
+          <el-text type="info">模型类型</el-text>
+          <span class="ellipsis ml-16">
+            {{ modelType[model.model_type as keyof typeof modelType] }}</span
+          >
+        </li>
+        <li class="flex mt-12">
+          <el-text type="info">基础模型</el-text>
+          <span class="ellipsis-1 ml-16" style="height: 20px; width: 70%">
+            {{ model.model_name }}</span
+          >
+        </li>
+        <li class="flex mt-12">
+          <el-text type="info">创建者</el-text>
+          <span class="ellipsis-1 ml-16" style="height: 20px; width: 70%">
+            {{ model.username }}</span
+          >
+        </li>
+      </ul>
+    </div>
+    <!-- progress -->
+    <div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'">
+      <DownloadLoading class="percentage" />
+
+      <div class="percentage-label flex-center">
+        正在下载中 <span class="dotting"></span>
+        <el-button
+          link
+          type="primary"
+          class="ml-16"
+          :disabled="!is_permisstion"
+          @click.stop="cancelDownload"
+          >取消下载</el-button
+        >
+      </div>
+    </div>
+
+    <template #mouseEnter>
+      <div class="operation-button">
+        <el-tooltip effect="dark" content="修改" placement="top">
+          <el-button text :disabled="!is_permisstion" @click.stop="openEditModel">
+            <el-icon>
+              <component
+                :is="
+                  currentModel.status === 'ERROR' || currentModel.status === 'PAUSE_DOWNLOAD'
+                    ? 'RefreshRight'
+                    : 'EditPen'
+                "
+              />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-dropdown trigger="click">
+          <el-button text @click.stop>
+            <el-icon><MoreFilled /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-if="currentModel.model_type === 'TTS' || currentModel.model_type === 'LLM' || currentModel.model_type === 'IMAGE' || currentModel.model_type === 'TTI'"
+                :disabled="!is_permisstion"
+                icon="Setting" @click.stop="openParamSetting"
+              >
+                模型参数设置
+              </el-dropdown-item>
+              <el-dropdown-item icon="Delete" :disabled="!is_permisstion" text @click.stop="deleteModel">
+                删除
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </template>
+    <EditModel ref="editModelRef" @submit="emit('change')"></EditModel>
+    <ParamSettingDialog ref="paramSettingRef" :model="model"/>
+  </card-box>
+</template>
+<script setup lang="ts">
+import type { Provider, Model } from '@/api/type/model'
+import ModelApi from '@/api/model'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import EditModel from '@/views/template/component/EditModel.vue'
+import DownloadLoading from '@/components/loading/DownloadLoading.vue'
+import { MsgConfirm } from '@/utils/message'
+import { modelType } from '@/enums/model'
+import useStore from '@/stores'
+import ParamSettingDialog from './ParamSettingDialog.vue'
+
+const props = defineProps<{
+  model: Model
+  provider_list: Array<Provider>
+  updateModelById: (model_id: string, model: Model) => void
+}>()
+
+const { user } = useStore()
+const downModel = ref<Model>()
+
+const is_permisstion = computed(() => {
+  return user.userInfo?.id == props.model.user_id
+})
+const currentModel = computed(() => {
+  if (downModel.value) {
+    return downModel.value
+  } else {
+    return props.model
+  }
+})
+
+const errMessage = computed(() => {
+  if (currentModel.value.meta && currentModel.value.meta.message) {
+    if (currentModel.value.meta.message === 'pull model manifest: file does not exist') {
+      return `${currentModel.value.model_name} 模型在Ollama不存在`
+    }
+    return currentModel.value.meta.message
+  }
+  return ''
+})
+const emit = defineEmits(['change', 'update:model'])
+const editModelRef = ref<InstanceType<typeof EditModel>>()
+let interval: any
+const deleteModel = () => {
+  MsgConfirm(`删除模型 `, `是否删除模型：${props.model.name} ?`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  })
+    .then(() => {
+      ModelApi.deleteModel(props.model.id).then(() => {
+        emit('change')
+      })
+    })
+    .catch(() => {})
+}
+
+const cancelDownload = () => {
+  ModelApi.pauseDownload(props.model.id).then(() => {
+    downModel.value = undefined
+    emit('change')
+  })
+}
+const openEditModel = () => {
+  const provider = props.provider_list.find((p) => p.provider === props.model.provider)
+  if (provider) {
+    editModelRef.value?.open(provider, props.model)
+  }
+}
+const icon = computed(() => {
+  return props.provider_list.find((p) => p.provider === props.model.provider)?.icon
+})
+
+/**
+ * 初始化轮询
+ */
+const initInterval = () => {
+  interval = setInterval(() => {
+    if (currentModel.value.status === 'DOWNLOAD') {
+      ModelApi.getModelMetaById(props.model.id).then((ok) => {
+        downModel.value = ok.data
+      })
+    } else {
+      if (downModel.value) {
+        props.updateModelById(props.model.id, downModel.value)
+        downModel.value = undefined
+      }
+    }
+  }, 6000)
+}
+
+/**
+ * 关闭轮询
+ */
+const closeInterval = () => {
+  if (interval) {
+    clearInterval(interval)
+  }
+}
+
+
+const paramSettingRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const openParamSetting = () => {
+  paramSettingRef.value?.open()
+}
+
+onMounted(() => {
+  initInterval()
+})
+onBeforeUnmount(() => {
+  // 清除定时任务
+  closeInterval()
+})
+</script>
+<style lang="scss" scoped>
+.model-card {
+  min-height: 135px;
+  min-width: auto;
+  .operation-button {
+    position: absolute;
+    right: 12px;
+    top: 18px;
+    height: auto;
+    .el-button + .el-button {
+      margin-left: 4px;
+    }
+  }
+  .progress-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    text-align: center;
+    .percentage {
+      margin-top: 55px;
+      margin-bottom: 16px;
+    }
+
+    // .percentage-value {
+    //   display: flex;
+    //   font-size: 13px;
+    //   align-items: center;
+    //   color: var(--app-text-color-secondary);
+    // }
+    .percentage-label {
+      margin-top: 50px;
+      margin-left: 10px;
+      font-size: 13px;
+      color: var(--app-text-color-secondary);
+    }
+  }
+}
+</style>
diff --git a/src/views/template/component/ParamSettingDialog.vue b/src/views/template/component/ParamSettingDialog.vue
new file mode 100644
index 0000000..0978b1d
--- /dev/null
+++ b/src/views/template/component/ParamSettingDialog.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-dialog
+    title="模型参数设置"
+    v-model="dialogVisible"
+    width="800px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+  >
+    <el-button type="primary" @click="openAddDrawer()" class="mb-12"> 添加参数 </el-button>
+    <el-table :data="modelParamsForm" class="mb-16">
+      <el-table-column prop="label" label="显示名称" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
+            row.label.label
+          }}</span>
+          <span v-else>{{ row.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="field" label="参数" show-overflow-tooltip />
+      <el-table-column label="组件类型" width="110px">
+        <template #default="{ row }">
+          <el-tag type="info" class="info-tag">{{
+            input_type_list.find((item) => item.value === row.input_type)?.label
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="default_value" label="默认值" show-overflow-tooltip />
+      <el-table-column label="必填">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch disabled size="small" v-model="row.required" />
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="left" width="80">
+        <template #default="{ row, $index }">
+          <span class="mr-4">
+            <el-tooltip effect="dark" content="修改" placement="top">
+              <el-button type="primary" text @click.stop="openAddDrawer(row, $index)">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip effect="dark" content="删除" placement="top">
+            <el-button type="primary" text @click="deleteParam($index)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit" :loading="loading"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <AddParamDrawer ref="AddParamRef" @refresh="refresh" />
+</template>
+
+<script setup lang="ts">
+import type { Model } from '@/api/type/model'
+import { ref } from 'vue'
+import AddParamDrawer from './AddParamDrawer.vue'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import ModelApi from '@/api/model'
+import { input_type_list } from '@/components/dynamics-form/constructor/data'
+
+const props = defineProps<{
+  model: Model
+}>()
+
+const loading = ref<boolean>(false)
+const dialogVisible = ref<boolean>(false)
+const modelParamsForm = ref<any[]>([])
+const AddParamRef = ref()
+
+const open = () => {
+  dialogVisible.value = true
+  loading.value = true
+  ModelApi.getModelParamsForm(props.model.id, loading)
+    .then((ok) => {
+      loading.value = false
+      modelParamsForm.value = ok.data
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+function openAddDrawer(data?: any, index?: any) {
+  AddParamRef.value?.open(data, index)
+}
+
+function deleteParam(index: any) {
+  modelParamsForm.value.splice(index, 1)
+}
+
+function refresh(data: any, index: any) {
+  for (let i = 0; i < modelParamsForm.value.length; i++) {
+    let field = modelParamsForm.value[i].field
+    let label = modelParamsForm.value[i].label
+    if (label && label.input_type === 'TooltipLabel') {
+      label = label.label
+    }
+    let label2 = data.label
+    if (label2 && label2.input_type === 'TooltipLabel') {
+      label2 = label2.label
+    }
+
+    if (field === data.field && index !== i) {
+      MsgError('变量已存在: ' + data.field)
+      return
+    }
+    if (label === label2 && index !== i) {
+      MsgError('变量已存在: ' + label)
+      return
+    }
+  }
+  if (index !== null) {
+    modelParamsForm.value.splice(index, 1, data)
+  } else {
+    modelParamsForm.value.push(data)
+  }
+}
+
+function submit() {
+  ModelApi.updateModelParamsForm(props.model.id, modelParamsForm.value, loading).then((ok) => {
+    MsgSuccess('模型参数保存成功')
+    close()
+    // emit('submit')
+  })
+}
+
+defineExpose({ open, close })
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/template/component/SelectProviderDialog.vue b/src/views/template/component/SelectProviderDialog.vue
new file mode 100644
index 0000000..383e39f
--- /dev/null
+++ b/src/views/template/component/SelectProviderDialog.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <template #header>
+      <div class="flex-between">
+        <h4>选择供应商</h4>
+        <el-dropdown>
+          <span class="el-dropdown-link">
+            {{ currentModelType || '全部模型' }}
+            <el-icon class="el-icon--right">
+              <arrow-down />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="item in modelTypeOptions"
+                :key="item.value"
+                @click="checkModelType(item.value)"
+              >
+                <span>{{ item.text }}</span>
+                <el-icon v-if="currentModelType === item.text"><Check /></el-icon>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </template>
+    <el-row :gutter="12" v-loading="loading">
+      <el-col :span="12" class="mb-16" v-for="(data, index) in list_provider" :key="index">
+        <el-card shadow="hover" @click="go_create(data)">
+          <div class="flex align-center cursor">
+            <span :innerHTML="data.icon" alt="" style="height: 24px; width: 24px" class="mr-8" />
+            <span>{{ data.name }}</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import ModelApi from '@/api/model'
+import type { Provider } from '@/api/type/model'
+
+const loading = ref<boolean>(false)
+const dialogVisible = ref<boolean>(false)
+const list_provider = ref<Array<Provider>>([])
+const currentModelType = ref('')
+
+const modelTypeOptions = ref([
+  { text: '全部模型', value: '' },
+  { text: '大语言模型', value: 'LLM' },
+  { text: '向量模型', value: 'EMBEDDING' },
+  { text: '重排模型', value: 'RERANKER' },
+  { text: '语音识别', value: 'STT' },
+  { text: '语音合成', value: 'TTS' },
+  { text: '图片理解', value: 'IMAGE' },
+  { text: '图片生成', value: 'TTI' },
+])
+
+const open = () => {
+  dialogVisible.value = true
+  const option = modelTypeOptions.value.find((item) => item.text === currentModelType.value)
+  checkModelType(option ? option.value : '')
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+const checkModelType = (model_type: string) => {
+  currentModelType.value = modelTypeOptions.value.filter(
+    (item) => item.value === model_type
+  )[0].text
+  ModelApi.getProviderByModelType(model_type, loading).then((ok) => {
+    list_provider.value = ok.data
+    list_provider.value.sort((a, b) => a.provider.localeCompare(b.provider))
+  })
+}
+
+const emit = defineEmits(['change'])
+const go_create = (provider: Provider) => {
+  close()
+  emit('change', provider)
+}
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/template/index.vue b/src/views/template/index.vue
new file mode 100644
index 0000000..046b5ea
--- /dev/null
+++ b/src/views/template/index.vue
@@ -0,0 +1,349 @@
+<template>
+  <LayoutContainer header="模型设置">
+    <div class="template-manage flex main-calc-height">
+      <div class="template-manage__left p-8 border-r">
+        <h4 class="p-16">供应商</h4>
+        <div class="model-list-height-left">
+          <div
+            class="all-mode flex cursor"
+            @click="clickListHandle(allObj as Provider)"
+            :class="!active_provider?.provider ? 'all-mode-active' : ''"
+          >
+            <AppIcon
+              class="mr-8"
+              style="height: 20px; width: 20px"
+              :iconName="'app-all-menu-active'"
+            ></AppIcon>
+            <span>全部模型</span>
+          </div>
+
+          <el-scrollbar>
+            <el-collapse class="template-collapse">
+              <el-collapse-item title="公有模型" name="1">
+                <template #title>
+                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
+                  公有模型
+                </template>
+                <common-list
+                  :data="online_provider_list"
+                  v-loading="loading"
+                  @click="clickListHandle"
+                  value-key="provider"
+                  default-active=""
+                  ref="commonList1"
+                >
+                  <template #default="{ row }">
+                    <div class="flex align-center">
+                      <span
+                        :innerHTML="row.icon"
+                        alt=""
+                        style="height: 20px; width: 20px"
+                        class="mr-8"
+                      />
+                      <span>{{ row.name }}</span>
+                    </div>
+                  </template>
+                </common-list>
+              </el-collapse-item>
+              <el-collapse-item title="私有模型" name="2">
+                <template #title>
+                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
+                  私有模型
+                </template>
+                <common-list
+                  :data="local_provider_list"
+                  v-loading="loading"
+                  @click="clickListHandle"
+                  value-key="provider"
+                  default-active=""
+                  ref="commonList2"
+                >
+                  <template #default="{ row }">
+                    <div class="flex align-center">
+                      <span
+                        :innerHTML="row.icon"
+                        alt=""
+                        style="height: 20px; width: 20px"
+                        class="mr-8"
+                      />
+                      <span>{{ row.name }}</span>
+                    </div>
+                  </template>
+                </common-list>
+              </el-collapse-item>
+            </el-collapse>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="template-manage__right w-full" v-loading="list_model_loading">
+        <div class="p-24 pb-0">
+          <h4>{{ active_provider?.name }}</h4>
+          <div class="flex-between mt-16 mb-16">
+            <el-button type="primary" @click="openCreateModel(active_provider)">添加模型</el-button>
+            <div class="flex-between complex-search">
+              <el-select class="complex-search__left" v-model="search_type" style="width: 120px" @change="search_type_change">
+                <el-option label="创建者" value="create_user" />
+                <el-option label="权限" value="permission_type" />
+                <el-option label="模型类型" value="model_type" />
+                <el-option label="模型名称" value="name" />
+              </el-select>
+              <el-input
+                v-if="search_type === 'name'"
+                v-model="model_search_form.name"
+                @change="list_model"
+                placeholder="按名称搜索"
+                prefix-icon="Search"
+                style="width: 220px"
+                clearable
+              />
+              <el-select
+                v-else-if="search_type === 'create_user'"
+                v-model="model_search_form.create_user"
+                @change="list_model"
+                clearable
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="u in user_options"
+                  :key="u.id"
+                  :value="u.id"
+                  :label="u.username"
+                />
+              </el-select>
+              <el-select
+                v-else-if="search_type === 'permission_type'"
+                v-model="model_search_form.permission_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
+                <el-option label="公有" value="PUBLIC" />
+                <el-option label="私有" value="PRIVATE" />
+              </el-select>
+              <el-select
+                v-else-if="search_type === 'model_type'"
+                v-model="model_search_form.model_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
+                <el-option label="大语言模型" value="LLM" />
+                <el-option label="向量模型" value="EMBEDDING" />
+                <el-option label="重排模型" value="RERANKER" />
+                <el-option label="语音识别" value="STT" />
+                <el-option label="语音合成" value="TTS" />
+                <el-option label="图片理解" value="IMAGE" />
+                <el-option label="图片生成" value="TTI" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="model-list-height">
+          <el-scrollbar>
+            <div class="p-24 pt-0">
+              <el-row v-if="model_split_list.length > 0" :gutter="15">
+                <template v-for="(row, index) in model_split_list" :key="index">
+                  <el-col
+                    :xs="24"
+                    :sm="24"
+                    :md="24"
+                    :lg="12"
+                    :xl="12"
+                    class="mb-16"
+                    v-for="(model, i) in row"
+                    :key="i"
+                  >
+                    <ModelCard
+                      @change="list_model"
+                      :updateModelById="updateModelById"
+                      :model="model"
+                      :provider_list="provider_list"
+                    >
+                    </ModelCard>
+                  </el-col>
+                </template>
+              </el-row>
+              <el-empty description="暂无数据" v-else />
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="list_model"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+
+    <SelectProviderDialog
+      ref="selectProviderRef"
+      @change="openCreateModel($event)"
+    ></SelectProviderDialog>
+  </LayoutContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import ModelApi from '@/api/model'
+import type { Provider, Model } from '@/api/type/model'
+import AppIcon from '@/components/icons/AppIcon.vue'
+import ModelCard from '@/views/template/component/ModelCard.vue'
+import { splitArray } from '@/utils/common'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+
+const allObj = {
+  icon: '',
+  provider: '',
+  name: '全部模型'
+}
+
+const commonList1 = ref()
+const commonList2 = ref()
+const loading = ref<boolean>(false)
+
+const active_provider = ref<Provider>()
+const search_type = ref('name')
+const model_search_form = ref<{
+  name: string
+  create_user: string
+  permission_type: string
+  model_type: string
+}>({
+  name: '',
+  create_user: '',
+  permission_type: '',
+  model_type: ''
+})
+const user_options = ref<any[]>([])
+const list_model_loading = ref<boolean>(false)
+const provider_list = ref<Array<Provider>>([])
+const online_provider_list = ref<Array<Provider>>([])
+const local_provider_list = ref<Array<Provider>>([])
+
+const model_list = ref<Array<Model>>([])
+
+const updateModelById = (model_id: string, model: Model) => {
+  model_list.value
+    .filter((m) => m.id == model_id)
+    .forEach((m) => {
+      m.status = model.status
+    })
+}
+const model_split_list = computed(() => {
+  return splitArray(model_list.value, 2)
+})
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const clickListHandle = (item: Provider) => {
+  active_provider.value = item
+  list_model()
+  if (active_provider.value.provider === '') {
+    commonList1.value.clearCurrent()
+    commonList2.value.clearCurrent()
+  }
+}
+
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+const list_model = () => {
+  const params = active_provider.value?.provider ? { provider: active_provider.value.provider } : {}
+  ModelApi.getModel({ ...model_search_form.value, ...params }, list_model_loading).then((ok) => {
+    model_list.value = ok.data
+    const v = model_list.value.map((m) => ({ id: m.user_id, username: m.username }))
+    if (user_options.value.length === 0) {
+      user_options.value = Array.from(new Map(v.map((item) => [item.id, item])).values())
+    }
+  })
+}
+
+const search_type_change = () => {
+  model_search_form.value = { name: '', create_user: '', permission_type: '', model_type: '' }
+}
+
+onMounted(() => {
+  ModelApi.getProvider(loading).then((ok) => {
+    active_provider.value = allObj
+    provider_list.value = [allObj, ...ok.data]
+
+    const local_provider = [
+      'model_ollama_provider',
+      'model_local_provider',
+      'model_xinference_provider',
+      'model_vllm_provider'
+    ]
+    ok.data.forEach((item) => {
+      if (local_provider.indexOf(item.provider) > -1) {
+        local_provider_list.value.push(item)
+      } else {
+        online_provider_list.value.push(item)
+      }
+    })
+    online_provider_list.value.sort((a, b) => a.provider.localeCompare(b.provider))
+    local_provider_list.value.sort((a, b) => a.provider.localeCompare(b.provider))
+    list_model()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.template-manage {
+  &__left {
+    box-sizing: border-box;
+    width: var(--setting-left-width);
+    min-width: var(--setting-left-width);
+  }
+
+  .model-list-height {
+    height: calc(var(--create-dataset-height) - 80px);
+  }
+
+  .model-list-height-left {
+    height: calc(var(--create-dataset-height) - 40px);
+  }
+  .all-mode {
+    padding: 10px 16px;
+  }
+  .all-mode-active {
+    background: var(--el-color-primary-light-9);
+    border-radius: 4px;
+    color: var(--el-color-primary);
+    font-weight: 500;
+  }
+  .template-collapse {
+    border-top: none !important;
+    border-bottom: none !important;
+    :deep(.el-collapse-item__header) {
+      border-bottom: none !important;
+      padding-left: 16px;
+      font-size: 14px;
+      height: 40px;
+      &:hover {
+        background: var(--app-text-color-light-1);
+        border-radius: 4px;
+      }
+    }
+    :deep(.el-collapse-item) {
+      margin-top: 2px;
+    }
+    :deep(.common-list) {
+      li {
+        padding-left: 30px !important;
+      }
+    }
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none !important;
+    }
+    :deep(.el-collapse-item__content) {
+      padding-bottom: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/theme/LoginPreview.vue b/src/views/theme/LoginPreview.vue
new file mode 100644
index 0000000..1124ae8
--- /dev/null
+++ b/src/views/theme/LoginPreview.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="login-preview mr-16">
+    <div class="header">
+      <div class="tag flex-between">
+        <div class="flex align-center">
+          <img v-if="props.data.icon" :src="fileURL" alt="" height="20px" class="mr-8" />
+          <img v-else src="@/assets/logo/logo.svg" height="24px" class="mr-8" />
+          <span class="ellipsis">{{ data.title }}</span>
+        </div>
+        <el-icon><Close /></el-icon>
+      </div>
+    </div>
+    <login-layout style="height: 530px">
+      <LoginContainer :subTitle="data.slogan" class="login-container">
+        <div class="mask"></div>
+        <h2 class="mb-24">{{ '普通登录' }}</h2>
+        <el-form class="login-form">
+          <div class="mb-24">
+            <el-form-item>
+              <el-input size="large" class="input-item" placeholder="请输入用户名"> </el-input>
+            </el-form-item>
+          </div>
+          <div class="mb-24">
+            <el-form-item>
+              <el-input
+                type="password"
+                size="large"
+                class="input-item"
+                placeholder="请输入密码"
+                show-password
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+        <el-button size="large" type="primary" class="w-full">登录</el-button>
+        <div class="operate-container flex-between mt-12">
+          <el-button class="forgot-password" link type="primary"> 忘记密码? </el-button>
+        </div>
+      </LoginContainer>
+    </login-layout>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
+  }
+})
+
+const fileURL = computed(() => {
+  if (props.data.icon) {
+    if (typeof props.data.icon === 'string') {
+      return props.data.icon
+    } else {
+      return URL.createObjectURL(props.data.icon)
+    }
+  } else {
+    return ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login-preview {
+  background: #ffffff;
+  border-radius: 4px;
+  transform-origin: center;
+  .login-container {
+    transform: translate(0, 0) scale(0.8);
+    position: relative;
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 3;
+    }
+  }
+
+  .header {
+    background: var(--el-disabled-bg-color);
+    height: 38px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    .tag {
+      width: 180px;
+      height: 30px;
+      background: #ffffff;
+      box-shadow: var(-app-text-color-light-1);
+      position: absolute;
+      bottom: 0;
+      left: 8px;
+      border-radius: 4px 4px 0 0;
+      padding: 0 8px;
+    }
+  }
+}
+</style>
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
new file mode 100644
index 0000000..df25ff4
--- /dev/null
+++ b/src/views/theme/index.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="theme-setting" v-loading="loading">
+    <h4 class="p-16-24">外观设置</h4>
+    <el-scrollbar>
+      <div class="p-24 pt-0">
+        <div class="app-card p-24">
+          <h5 class="mb-16">平台显示主题</h5>
+          <el-radio-group
+            v-model="themeRadio"
+            class="app-radio-button-group"
+            @change="changeThemeHandle"
+          >
+            <template v-for="(item, index) in themeList" :key="index">
+              <el-radio-button :label="item.label" :value="item.value" />
+            </template>
+            <el-radio-button label="自定义" value="custom" />
+          </el-radio-group>
+          <div v-if="themeRadio === 'custom'">
+            <h5 class="mt-16 mb-8">自定义主题</h5>
+            <el-color-picker v-model="customColor" @change="customColorHandle" />
+          </div>
+        </div>
+        <div class="app-card p-24 mt-16">
+          <h5 class="mb-16">平台登陆设置</h5>
+          <el-card shadow="never" class="layout-bg">
+            <div class="flex-between">
+              <h5 class="mb-16">页面预览</h5>
+              <el-button type="primary" link @click="resetForm('login')"> 恢复默认 </el-button>
+            </div>
+            <el-scrollbar>
+              <div class="theme-preview">
+                <el-row :gutter="8">
+                  <el-col :span="16">
+                    <LoginPreview :data="themeForm" />
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="theme-form">
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">网站 Logo</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/jpeg, image/png, image/gif"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'icon')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small"
+                          >顶部网站显示的 Logo，建议尺寸 48*48，支持 JPG、PNG、GIF，大小不超过 10
+                          MB</el-text
+                        >
+                      </el-card>
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">登录 Logo</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/jpeg, image/png, image/gif"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small"
+                          >登录页面右侧 Logo，建议尺寸 204*52，支持 JPG、PNG、GIF，大小不超过 10
+                          MB</el-text
+                        >
+                      </el-card>
+                      <el-card shadow="never" class="mb-8">
+                        <div class="flex-between mb-8">
+                          <span class="lighter">登录背景图</span>
+                          <el-upload
+                            ref="uploadRef"
+                            action="#"
+                            :auto-upload="false"
+                            :show-file-list="false"
+                            accept="image/jpeg, image/png, image/gif"
+                            :on-change="
+                              (file: any, fileList: any) => onChange(file, fileList, 'loginImage')
+                            "
+                          >
+                            <el-button size="small"> 替换图片 </el-button>
+                          </el-upload>
+                        </div>
+                        <el-text type="info" size="small">
+                          左侧背景图，矢量图建议尺寸 576*900，位图建议尺寸 1152*1800；支持
+                          JPG、PNG、GIF，大小不超过 10 MB
+                        </el-text>
+                      </el-card>
+
+                      <el-form
+                        ref="themeFormRef"
+                        :model="themeForm"
+                        label-position="top"
+                        require-asterisk-position="right"
+                        :rules="rules"
+                        @submit.prevent
+                      >
+                        <el-form-item label="网站名称" prop="title">
+                          <el-input v-model="themeForm.title" placeholder="请输入网站名称">
+                          </el-input>
+                          <el-text type="info"> 显示在网页 Tab 的平台名称 </el-text>
+                        </el-form-item>
+                        <el-form-item label="欢迎语" prop="slogan">
+                          <el-input
+                            v-model="themeForm.slogan"
+                            placeholder="请输入欢迎语"
+                            maxlength="64"
+                            show-word-limit
+                          >
+                          </el-input>
+                          <el-text type="info"> 产品 Logo 下的欢迎语 </el-text>
+                        </el-form-item>
+                      </el-form>
+                    </div></el-col
+                  >
+                </el-row>
+              </div>
+            </el-scrollbar>
+            <div class="mt-16">
+              <el-text type="info">默认为 MaxKB 登录界面，支持自定义设置</el-text>
+            </div>
+          </el-card>
+        </div>
+        <div class="app-card p-24 mt-16">
+          <h5 class="mb-16">平台设置</h5>
+          <el-card shadow="never" class="layout-bg">
+            <div class="flex-between">
+              <h5 class="mb-16">页面预览</h5>
+              <el-button type="primary" link @click="resetForm('platform')"> 恢复默认 </el-button>
+            </div>
+            <el-scrollbar>
+              <div class="theme-preview">
+                <el-row :gutter="8">
+                  <el-col :span="16">
+                    <div class="theme-platform mr-16">
+                      <div
+                        class="theme-platform-header border-b flex-between"
+                        :class="!isDefaultTheme ? 'custom-header' : ''"
+                      >
+                        <div class="flex-center h-full">
+                          <div class="app-title-container cursor">
+                            <div class="logo flex-center">
+                              <LogoFull height="25px" />
+                            </div>
+                          </div>
+                        </div>
+                        <div class="flex-center">
+                          <AppIcon
+                            iconName="app-github"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showProject"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-reading"
+                            class="cursor color-secondary mr-8 ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showUserManual"
+                          ></AppIcon>
+                          <AppIcon
+                            iconName="app-help"
+                            class="cursor color-secondary ml-8"
+                            style="font-size: 20px"
+                            v-if="themeForm.showForum"
+                          ></AppIcon>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="theme-form">
+                      <div>
+                        <el-checkbox v-model="themeForm.showUserManual" label="显示用户手册" />
+                        <div class="ml-16">
+                          <el-input
+                            v-model="themeForm.userManualUrl"
+                            placeholder="请输入 URL 地址"
+                          />
+                        </div>
+                      </div>
+                      <div class="my-2">
+                        <el-checkbox v-model="themeForm.showForum" label="显示论坛求助" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.forumUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                      <div class="mt-2">
+                        <el-checkbox v-model="themeForm.showProject" label="显示项目地址" />
+                        <div class="ml-16">
+                          <el-input v-model="themeForm.projectUrl" placeholder="请输入 URL 地址" />
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-scrollbar>
+            <div class="mt-16">
+              <el-text type="info">默认为 MaxKB 登录界面，支持自定义设置</el-text>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div class="theme-setting__operate w-full p-16-24">
+      <el-button @click="resetTheme">放弃更新</el-button>
+      <el-button type="primary" @click="updataTheme(themeFormRef)"> 保存并应用 </el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import LoginPreview from './LoginPreview.vue'
+import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
+import ThemeApi from '@/api/theme'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import useStore from '@/stores'
+
+const { user } = useStore()
+const router = useRouter()
+
+onBeforeRouteLeave((to, from) => {
+  user.setTheme(cloneTheme.value)
+})
+
+const themeInfo = computed(() => user.themeInfo)
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const themeFormRef = ref<FormInstance>()
+const loading = ref(false)
+const cloneTheme = ref(null)
+const themeForm = ref<any>({
+  theme: '',
+  icon: '',
+  loginLogo: '',
+  loginImage: '',
+  title: 'MaxKB',
+  slogan: '欢迎使用 MaxKB 智能知识库问答系统',
+  ...defaultPlatformSetting
+})
+const themeRadio = ref('')
+const customColor = ref('')
+
+const rules = reactive<FormRules>({
+  title: [{ required: true, message: '请输入网站标题', trigger: 'blur' }],
+  slogan: [{ required: true, message: '请输入欢迎语', trigger: 'blur' }]
+})
+
+const onChange = (file: any, fileList: UploadFiles, attr: string) => {
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(`文件大小超过 10M`)
+    return false
+  } else {
+    themeForm.value[attr] = file.raw
+  }
+  user.setTheme(themeForm.value)
+}
+
+function changeThemeHandle(val: string) {
+  if (val !== 'custom') {
+    themeForm.value.theme = val
+    user.setTheme(themeForm.value)
+  }
+}
+function customColorHandle(val: string) {
+  themeForm.value.theme = val
+  user.setTheme(themeForm.value)
+}
+
+function resetTheme() {
+  user.setTheme(cloneTheme.value)
+  themeForm.value = cloneDeep(themeInfo.value)
+}
+
+function resetForm(val: string) {
+  themeForm.value =
+    val === 'login'
+      ? {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultSetting
+        }
+      : {
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultPlatformSetting
+        }
+
+  user.setTheme(themeForm.value)
+}
+
+const updataTheme = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let fd = new FormData()
+      Object.keys(themeForm.value).map((item) => {
+        fd.append(item, themeForm.value[item])
+      })
+      ThemeApi.postThemeInfo(fd, loading).then((res) => {
+        user.theme()
+        cloneTheme.value = cloneDeep(themeForm.value)
+        MsgSuccess('外观设置成功')
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  if (user.isExpire()) {
+    router.push({ path: `/application` })
+  }
+  if (themeInfo.value) {
+    themeRadio.value = themeList.some((v) => v.value === themeInfo.value.theme)
+      ? themeInfo.value.theme
+      : 'custom'
+    customColor.value = themeInfo.value.theme
+    themeForm.value = cloneDeep(themeInfo.value)
+    cloneTheme.value = cloneDeep(themeInfo.value)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.theme-setting {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  padding-bottom: 64px;
+
+  &__operate {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: #ffffff;
+    text-align: right;
+    box-sizing: border-box;
+    box-shadow: 0px -2px 4px 0px rgba(31, 35, 41, 0.08);
+  }
+  .theme-preview {
+    min-width: 1000px;
+  }
+  .theme-platform {
+    background: #ffffff;
+    height: 220px;
+    .theme-platform-header {
+      padding: 10px 20px;
+      background: var(--app-header-bg-color);
+    }
+  }
+}
+</style>
diff --git a/src/views/user-manage/component/UserDialog.vue b/src/views/user-manage/component/UserDialog.vue
new file mode 100644
index 0000000..3624ba6
--- /dev/null
+++ b/src/views/user-manage/component/UserDialog.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="userFormRef"
+      :model="userForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form-item :prop="isEdit ? '' : 'username'" label="用户名">
+        <el-input
+          v-model="userForm.username"
+          placeholder="请输入用户名"
+          maxlength="20"
+          show-word-limit
+          :disabled="isEdit"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="姓名">
+        <el-input
+          v-model="userForm.nick_name"
+          placeholder="请输入姓名"
+          maxlength="64"
+          show-word-limit
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input type="email" v-model="userForm.email" placeholder="请输入邮箱"> </el-input>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input type="email" v-model="userForm.phone" placeholder="请输入手机号"> </el-input>
+      </el-form-item>
+      <el-form-item label="登录密码" prop="password" v-if="!isEdit">
+        <el-input
+          type="password"
+          v-model="userForm.password"
+          placeholder="请输入密码"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(userFormRef)" :loading="loading"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import userApi from '@/api/user-manage'
+import { MsgSuccess } from '@/utils/message'
+
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['refresh'])
+
+const userFormRef = ref()
+const userForm = ref<any>({
+  username: '',
+  email: '',
+  password: '',
+  phone: '',
+  nick_name: ''
+})
+
+const rules = reactive({
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ],
+  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ]
+})
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const isEdit = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    userForm.value = {
+      username: '',
+      email: '',
+      password: '',
+      phone: '',
+      nick_name: ''
+    }
+    isEdit.value = false
+    userFormRef.value?.clearValidate()
+  }
+})
+
+const open = (data: any) => {
+  if (data) {
+    userForm.value['id'] = data.id
+    userForm.value.username = data.username
+    userForm.value.email = data.email
+    userForm.value.password = data.password
+    userForm.value.phone = data.phone
+    userForm.value.nick_name = data.nick_name
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (isEdit.value) {
+        userApi.putUserManage(userForm.value.id, userForm.value, loading).then((res) => {
+          emit('refresh')
+          MsgSuccess('编辑成功')
+          dialogVisible.value = false
+        })
+      } else {
+        userApi.postUserManage(userForm.value, loading).then((res) => {
+          emit('refresh')
+          MsgSuccess('创建成功')
+          dialogVisible.value = false
+        })
+      }
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/user-manage/component/UserPwdDialog.vue b/src/views/user-manage/component/UserPwdDialog.vue
new file mode 100644
index 0000000..2b419ea
--- /dev/null
+++ b/src/views/user-manage/component/UserPwdDialog.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-dialog title="修改用户密码" v-model="dialogVisible">
+    <el-form
+      ref="userFormRef"
+      :model="userForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form-item label="新密码" prop="password">
+        <el-input
+          type="password"
+          v-model="userForm.password"
+          placeholder="请输入新密码"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="re_password">
+        <el-input
+          type="password"
+          v-model="userForm.re_password"
+          placeholder="请输入确认密码"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(userFormRef)" :loading="loading"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import useStore from '@/stores'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResetPasswordRequest } from '@/api/type/user'
+import userApi from '@/api/user-manage'
+import { MsgSuccess } from '@/utils/message'
+
+const emit = defineEmits(['refresh'])
+
+const { user } = useStore()
+
+const userFormRef = ref()
+const userForm = ref<any>({
+  password: '',
+  re_password: ''
+})
+
+const rules = reactive<FormRules<ResetPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: '请输入新密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    }
+  ],
+  re_password: [
+    {
+      required: true,
+      message: '请输入确认密码',
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (userFormRef.value.password != userFormRef.value.re_password) {
+          callback(new Error('密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const userId = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    userForm.value = {
+      password: '',
+      re_password: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  userId.value = data.id
+  dialogVisible.value = true
+  userFormRef.value?.clearValidate()
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      userApi.putUserManagePassword(userId.value, userForm.value, loading).then((res) => {
+        emit('refresh')
+        user.profile()
+        MsgSuccess('修改用户密码成功')
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/src/views/user-manage/index.vue b/src/views/user-manage/index.vue
new file mode 100644
index 0000000..9a81222
--- /dev/null
+++ b/src/views/user-manage/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <LayoutContainer header="用户管理">
+    <div class="p-24">
+      <div class="flex-between">
+        <el-button type="primary" @click="createUser">创建用户</el-button>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          placeholder="搜索"
+          prefix-icon="Search"
+          class="w-240"
+          clearable
+        />
+      </div>
+
+      <app-table
+        class="mt-16"
+        :data="tableData"
+        :pagination-config="paginationConfig"
+        @sizeChange="handleSizeChange"
+        @changePage="getList"
+        v-loading="loading"
+      >
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="nick_name" label="姓名" />
+        <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
+        <el-table-column prop="phone" label="手机号" />
+        <el-table-column prop="source" label="用户类型">
+          <template #default="{ row }">
+            {{
+              row.source === 'LOCAL'
+                ? '系统用户'
+                : row.source === 'wecom'
+                  ? '企业微信'
+                  : row.source === 'lark'
+                    ? '飞书'
+                    : row.source === 'dingtalk'
+                      ? '钉钉'
+                      : row.source
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="60">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch
+                :disabled="row.role === 'ADMIN'"
+                size="small"
+                v-model="row.is_active"
+                @change="changeState($event, row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" width="180">
+          <template #default="{ row }">
+            {{ datetimeFormat(row.create_time) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="110" align="left" fixed="right">
+          <template #default="{ row }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="编辑" placement="top">
+                <el-button type="primary" text @click.stop="editUser(row)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="修改用户密码" placement="top">
+                <el-button type="primary" text @click.stop="editPwdUser(row)">
+                  <el-icon><Lock /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button
+                  :disabled="row.role === 'ADMIN'"
+                  type="primary"
+                  text
+                  @click.stop="deleteUserManage(row)"
+                >
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+          </template>
+        </el-table-column>
+      </app-table>
+    </div>
+    <UserDialog :title="title" ref="UserDialogRef" @refresh="refresh" />
+    <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh" />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import UserDialog from './component/UserDialog.vue'
+import UserPwdDialog from './component/UserPwdDialog.vue'
+import { MsgSuccess, MsgConfirm, MsgAlert } from '@/utils/message'
+import userApi from '@/api/user-manage'
+import { datetimeFormat } from '@/utils/time'
+import useStore from '@/stores'
+import { ValidType, ValidCount } from '@/enums/common'
+
+const { common, user } = useStore()
+
+const UserDialogRef = ref()
+const UserPwdDialogRef = ref()
+const title = ref('')
+const loading = ref(false)
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+const tableData = ref<any[]>([])
+
+const searchValue = ref('')
+
+function searchHandle() {
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  tableData.value = []
+  getList()
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool ? '启用成功' : '禁用成功'
+  userApi.putUserManage(row.id, obj, loading).then((res) => {
+    getList()
+    MsgSuccess(str)
+  })
+}
+
+function editPwdUser(row: any) {
+  UserPwdDialogRef.value.open(row)
+}
+function editUser(row: any) {
+  title.value = '编辑用户'
+  UserDialogRef.value.open(row)
+}
+
+function createUser() {
+  if (user.isEnterprise()) {
+    title.value = '创建用户'
+    UserDialogRef.value.open()
+  } else {
+    MsgConfirm(`提示`, '社区版最多支持 2 个用户，如需拥有更多用户，请升级为专业版。', {
+      cancelButtonText: '确定',
+      confirmButtonText: '购买专业版'
+    })
+      .then(() => {
+        window.open('https://maxkb.cn/pricing.html', '_blank')
+      })
+      .catch(() => {
+        common.asyncGetValid(ValidType.User, ValidCount.User, loading).then(async (res: any) => {
+          if (res?.data) {
+            title.value = '创建用户'
+            UserDialogRef.value.open()
+          }
+        })
+      })
+  }
+}
+
+function deleteUserManage(row: any) {
+  MsgConfirm(
+    `是否删除用户：${row.username} ?`,
+    `删除用户，该用户创建的资源（应用、知识库、模型）都会删除，请谨慎操作。`,
+    {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      loading.value = true
+      userApi.delUserManage(row.id, loading).then(() => {
+        MsgSuccess('删除成功')
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+function getList() {
+  return userApi.getUserManage(paginationConfig, searchValue.value, loading).then((res) => {
+    tableData.value = res.data.records
+    paginationConfig.total = res.data.total
+  })
+}
+
+function refresh() {
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.log-table tr {
+  cursor: pointer;
+}
+</style>
diff --git a/src/workflow/common/AddFormCollect.vue b/src/workflow/common/AddFormCollect.vue
new file mode 100644
index 0000000..5850530
--- /dev/null
+++ b/src/workflow/common/AddFormCollect.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="dynamicsFormData"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading"> 添加 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+const props = withDefaults(
+  defineProps<{ title?: string; addFormField: (form_data: any) => void }>(),
+  { title: '添加参数' }
+)
+const dialogVisible = ref<boolean>(false)
+const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+const emit = defineEmits(['submit'])
+const dynamicsFormData = ref<any>({})
+const loading = ref<boolean>(false)
+const open = () => {
+  dialogVisible.value = true
+}
+const close = () => {
+  dialogVisible.value = false
+  dynamicsFormData.value = {}
+}
+const submit = () => {
+  dynamicsFormConstructorRef.value?.validate().then(() => {
+    props.addFormField(dynamicsFormConstructorRef.value?.getData())
+    close()
+  })
+}
+defineExpose({ close, open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/common/CustomLine.vue b/src/workflow/common/CustomLine.vue
new file mode 100644
index 0000000..48146e5
--- /dev/null
+++ b/src/workflow/common/CustomLine.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="custom-edge cursor" @mouseup.stop @click.stop v-show="props.model.isHovered">
+    <svg
+      @click="deleteEdge"
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 23.0001C5.925 23.0001 1 18.0751 1 12.0001C1 5.92512 5.925 1.00012 12 1.00012C18.075 1.00012 23 5.92512 23 12.0001C23 18.0751 18.075 23.0001 12 23.0001Z"
+        fill="#3370FF"
+      />
+      <path
+        d="M9.02524 7.61124L12.0002 10.5862L14.9752 7.61124C15.069 7.5175 15.1962 7.46484 15.3287 7.46484C15.4613 7.46484 15.5885 7.5175 15.6822 7.61124L16.3892 8.31824C16.483 8.412 16.5356 8.53915 16.5356 8.67174C16.5356 8.80432 16.483 8.93147 16.3892 9.02524L13.4142 12.0002L16.3892 14.9752C16.483 15.069 16.5356 15.1962 16.5356 15.3287C16.5356 15.4613 16.483 15.5885 16.3892 15.6822L15.6822 16.3892C15.5885 16.483 15.4613 16.5356 15.3287 16.5356C15.1962 16.5356 15.069 16.483 14.9752 16.3892L12.0002 13.4142L9.02524 16.3892C8.93147 16.483 8.80432 16.5356 8.67174 16.5356C8.53916 16.5356 8.412 16.483 8.31824 16.3892L7.61124 15.6822C7.5175 15.5885 7.46484 15.4613 7.46484 15.3287C7.46484 15.1962 7.5175 15.069 7.61124 14.9752L10.5862 12.0002L7.61124 9.02524C7.5175 8.93147 7.46484 8.80432 7.46484 8.67174C7.46484 8.53915 7.5175 8.412 7.61124 8.31824L8.31824 7.61124C8.412 7.5175 8.53916 7.46484 8.67174 7.46484C8.80432 7.46484 8.93147 7.5175 9.02524 7.61124Z"
+        fill="white"
+      />
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{ model: any }>()
+const deleteEdge = () => {
+  props.model.graphModel.deleteEdgeById(props.model.id)
+}
+</script>
+
+<style lang="scss">
+.custom-edge {
+  color: var(--el-color-primary);
+  stroke: none;
+  z-index: 100000;
+  position: absolute;
+  pointer-events: all;
+}
+</style>
diff --git a/src/workflow/common/EditFormCollect.vue b/src/workflow/common/EditFormCollect.vue
new file mode 100644
index 0000000..3413a56
--- /dev/null
+++ b/src/workflow/common/EditFormCollect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="dynamicsFormData"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading"> 修改 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+const props = withDefaults(
+  defineProps<{ title?: string; editFormField: (form_data: any, index: number) => void }>(),
+  { title: '修改参数' }
+)
+const dialogVisible = ref<boolean>(false)
+const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+const emit = defineEmits(['submit'])
+const dynamicsFormData = ref<any>({})
+const currentIndex = ref<number>(0)
+const loading = ref<boolean>(false)
+const open = (form_data: any, index: number) => {
+  dialogVisible.value = true
+  dynamicsFormData.value = form_data
+  currentIndex.value = index
+}
+const close = () => {
+  dialogVisible.value = false
+  dynamicsFormData.value = {}
+}
+const submit = () => {
+  dynamicsFormConstructorRef.value?.validate().then(() => {
+    props.editFormField(dynamicsFormConstructorRef.value?.getData(), currentIndex.value)
+    close()
+  })
+}
+defineExpose({ close, open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/common/NodeCascader.vue b/src/workflow/common/NodeCascader.vue
new file mode 100644
index 0000000..dfe734e
--- /dev/null
+++ b/src/workflow/common/NodeCascader.vue
@@ -0,0 +1,123 @@
+<template>
+  <el-cascader
+    @wheel="wheel"
+    :teleported="false"
+    :options="options"
+    @visible-change="visibleChange"
+    v-bind="$attrs"
+    v-model="data"
+    separator=" > "
+  >
+    <template #default="{ node, data }">
+      <span class="flex align-center" @wheel="wheel">
+        <component :is="iconComponent(`${data.type}-icon`)" class="mr-8" :size="18" />{{
+          data.label
+        }}</span
+      >
+    </template>
+  </el-cascader>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { iconComponent } from '../icons/utils'
+const props = defineProps<{
+  nodeModel: any
+  modelValue: Array<any>
+}>()
+const emit = defineEmits(['update:modelValue'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+const options = ref<Array<any>>([])
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function visibleChange(bool: boolean) {
+  if (bool) {
+    options.value = getIncomingNode(props.nodeModel.id)
+  }
+}
+
+function _getIncomingNode(id: String, startId: String, value: Array<any>) {
+  let list = props.nodeModel.graphModel.getNodeIncomingNode(id)
+  list = list.filter((item: any) => item.id !== startId)
+  let firstElement = null
+  if (list.length > 0) {
+    list.forEach((item: any) => {
+      if (!value.some((obj: any) => obj.id === item.id)) {
+        if (!value.some((value_item) => value_item.value === item.id)) {
+          value.unshift({
+            value: item.id,
+            label: item.properties.stepName,
+            type: item.type,
+            children: item.properties?.config?.fields || []
+          })
+          if (item.properties?.globalFields && item.type === 'start-node') {
+            firstElement = {
+              value: 'global',
+              label: '全局变量',
+              type: 'global',
+              children: item.properties?.config?.globalFields || []
+            }
+          }
+        }
+      }
+    })
+
+    list.forEach((item: any) => {
+      _getIncomingNode(item.id, startId, value)
+    })
+  }
+  if (firstElement) {
+    value.unshift(firstElement)
+  }
+  return value
+}
+function getIncomingNode(id: string) {
+  return _getIncomingNode(id, id, [])
+}
+const validate = () => {
+  const incomingNodeValue = getIncomingNode(props.nodeModel.id)
+  options.value = incomingNodeValue
+  if (!data.value || data.value.length === 0) {
+    return Promise.reject('引用变量必填')
+  }
+  if (data.value.length < 2) {
+    return Promise.reject('引用变量错误')
+  }
+  const node_id = data.value[0]
+  const node_field = data.value[1]
+  const nodeParent = incomingNodeValue.find((item: any) => item.value === node_id)
+  if (!nodeParent) {
+    data.value = []
+    return Promise.reject('不存在的引用变量')
+  }
+  if (!nodeParent.children.some((item: any) => item.value === node_field)) {
+    data.value = []
+    return Promise.reject('不存在的引用变量')
+  }
+  return Promise.resolve('')
+}
+props.nodeModel.graphModel.eventCenter.on('refresh_incoming_node_field', () => {
+  options.value = getIncomingNode(props.nodeModel.id)
+})
+defineExpose({ validate })
+onMounted(() => {
+  options.value = getIncomingNode(props.nodeModel.id)
+})
+</script>
+<style scoped></style>
diff --git a/src/workflow/common/NodeContainer.vue b/src/workflow/common/NodeContainer.vue
new file mode 100644
index 0000000..1dea9c7
--- /dev/null
+++ b/src/workflow/common/NodeContainer.vue
@@ -0,0 +1,312 @@
+<template>
+  <div @mousedown="mousedown" class="workflow-node-container p-16" style="overflow: visible">
+    <div
+      class="step-container app-card p-16"
+      :class="{ isSelected: props.nodeModel.isSelected, error: node_status !== 200 }"
+      style="overflow: visible"
+    >
+      <div v-resize="resizeStepContainer">
+        <div class="flex-between">
+          <div
+            class="flex align-center"
+            :style="{ maxWidth: node_status == 200 ? 'calc(100% - 85px)' : 'calc(100% - 85px)' }"
+          >
+            <component
+              :is="iconComponent(`${nodeModel.type}-icon`)"
+              class="mr-8"
+              :size="24"
+              :item="nodeModel?.properties.node_data"
+            />
+            <h4 v-if="showOperate(nodeModel.type)" style="max-width: 90%">
+              <ReadWrite
+                @mousemove.stop
+                @mousedown.stop
+                @keydown.stop
+                @click.stop
+                @change="editName"
+                :data="nodeModel.properties.stepName"
+                trigger="dblclick"
+              />
+            </h4>
+            <h4 v-else>{{ nodeModel.properties.stepName }}</h4>
+          </div>
+
+          <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop >
+            <el-button text @click="showNode = !showNode">
+              <el-icon class="arrow-icon color-secondary" :class="showNode ? 'rotate-180' : ''"
+                ><ArrowDownBold />
+              </el-icon>
+            </el-button>
+            <el-dropdown
+              v-if="showOperate(nodeModel.type)"
+              :teleported="false"
+              trigger="click"
+              placement="bottom-start"
+            >
+              <el-button text>
+                <img src="@/assets/icon_or.svg" alt="" v-if="condition === 'OR'" />
+                <img src="@/assets/icon_and.svg" alt="" v-if="condition === 'AND'" />
+              </el-button>
+              <template #dropdown>
+                <div style="width: 280px" class="p-12-16">
+                  <h5>执行条件</h5>
+                  <p class="mt-8 lighter">
+                    <span>前置</span>
+                    <el-select v-model="condition" size="small" style="width: 60px; margin: 0 8px">
+                      <el-option label="所有" value="AND" />
+                      <el-option label="任一" value="OR" />
+                    </el-select>
+                    <span>连线节点执行完，执行当前节点</span>
+                  </p>
+                </div>
+              </template>
+            </el-dropdown>
+            <el-dropdown v-if="showOperate(nodeModel.type)" :teleported="false" trigger="click">
+              <el-button text>
+                <el-icon class="color-secondary"><MoreFilled /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu style="min-width: 80px">
+                  <el-dropdown-item @click="copyNode" class="p-8">复制</el-dropdown-item>
+                  <el-dropdown-item @click="deleteNode" class="border-t p-8">删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+        <el-collapse-transition>
+          <div @mousedown.stop @keydown.stop @click.stop v-show="showNode" class="mt-16">
+            <el-alert
+              v-if="node_status != 200"
+              class="mb-16"
+              :title="props.nodeModel.type === 'application-node' ? '该应用不可用' : '该函数不可用'"
+              type="error"
+              show-icon
+              :closable="false"
+            />
+            <slot></slot>
+            <template v-if="nodeFields.length > 0">
+              <h5 class="title-decoration-1 mb-8 mt-8">参数输出</h5>
+              <template v-for="(item, index) in nodeFields" :key="index">
+                <div
+                  class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter"
+                  @mouseenter="showicon = index"
+                  @mouseleave="showicon = null"
+                >
+                  <span style="max-width: 92%">{{ item.label }} {{ '{' + item.value + '}' }}</span>
+                  <el-tooltip
+                    effect="dark"
+                    content="复制参数"
+                    placement="top"
+                    v-if="showicon === index"
+                  >
+                    <el-button link @click="copyClick(item.globeLabel)" style="padding: 0">
+                      <AppIcon iconName="app-copy"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </div>
+              </template>
+            </template>
+          </div>
+        </el-collapse-transition>
+      </div>
+    </div>
+
+    <el-collapse-transition>
+      <DropdownMenu
+        v-if="showAnchor"
+        @mousemove.stop
+        @mousedown.stop
+        @click.stop
+        @wheel="handleWheel"
+        :show="showAnchor"
+        :id="id"
+        style="left: 100%; top: 50%; transform: translate(0, -50%)"
+        @clickNodes="clickNodes"
+      />
+    </el-collapse-transition>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { app } from '@/main'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
+import { set } from 'lodash'
+import { iconComponent } from '../icons/utils'
+import { copyClick } from '@/utils/clipboard'
+import { WorkflowType } from '@/enums/workflow'
+import { MsgError, MsgConfirm } from '@/utils/message'
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const height = ref<{
+  stepContainerHeight: number
+  inputContainerHeight: number
+  outputContainerHeight: number
+}>({
+  stepContainerHeight: 0,
+  inputContainerHeight: 0,
+  outputContainerHeight: 0
+})
+const showAnchor = ref<boolean>(false)
+const anchorData = ref<any>()
+
+const condition = computed({
+  set: (v) => {
+    set(props.nodeModel.properties, 'condition', v)
+  },
+  get: () => {
+    if (props.nodeModel.properties.condition) {
+      return props.nodeModel.properties.condition
+    }
+    set(props.nodeModel.properties, 'condition', 'AND')
+    return true
+  }
+})
+const showNode = computed({
+  set: (v) => {
+    set(props.nodeModel.properties, 'showNode', v)
+  },
+  get: () => {
+    if (props.nodeModel.properties.showNode !== undefined) {
+      return props.nodeModel.properties.showNode
+    }
+    set(props.nodeModel.properties, 'showNode', true)
+    return true
+  }
+})
+const handleWheel = (event: any) => {
+  const isCombinationKeyPressed = event.ctrlKey || event.metaKey
+  if (!isCombinationKeyPressed) {
+    event.stopPropagation()
+  }
+}
+const node_status = computed(() => {
+  if (props.nodeModel.properties.status) {
+    return props.nodeModel.properties.status
+  }
+  return 200
+})
+function editName(val: string) {
+  if (val.trim() && val.trim() !== props.nodeModel.properties.stepName) {
+    if (
+      !props.nodeModel.graphModel.nodes?.some(
+        (node: any) => node.properties.stepName === val.trim()
+      )
+    ) {
+      set(props.nodeModel.properties, 'stepName', val.trim())
+    } else {
+      MsgError('节点名称已存在！')
+    }
+  }
+}
+const mousedown = () => {
+  props.nodeModel.graphModel.clearSelectElements()
+  set(props.nodeModel, 'isSelected', true)
+  set(props.nodeModel, 'isHovered', true)
+  props.nodeModel.graphModel.toFront(props.nodeModel.id)
+}
+const showicon = ref<number | null>(null)
+const copyNode = () => {
+  props.nodeModel.graphModel.clearSelectElements()
+  const cloneNode = props.nodeModel.graphModel.cloneNode(props.nodeModel.id)
+  set(cloneNode, 'isSelected', true)
+  set(cloneNode, 'isHovered', true)
+  props.nodeModel.graphModel.toFront(cloneNode.id)
+}
+const deleteNode = () => {
+  MsgConfirm(`提示`, `确定删除该节点？`, {
+    confirmButtonText: '删除',
+    confirmButtonClass: 'danger'
+  }).then(() => {
+    props.nodeModel.graphModel.deleteNode(props.nodeModel.id)
+  })
+  props.nodeModel.graphModel.eventCenter.emit('delete_node')
+}
+const resizeStepContainer = (wh: any) => {
+  if (wh.height) {
+    if (!props.nodeModel.virtual) {
+      height.value.stepContainerHeight = wh.height
+      props.nodeModel.setHeight(height.value.stepContainerHeight)
+    }
+  }
+}
+
+function clickNodes(item: any) {
+  const width = item.properties.width ? item.properties.width : 214
+  const nodeModel = props.nodeModel.graphModel.addNode({
+    type: item.type,
+    properties: item.properties,
+    x: anchorData.value?.x + width / 2 + 200,
+    y: anchorData.value?.y - item.height
+  })
+  props.nodeModel.graphModel.addEdge({
+    type: 'app-edge',
+    sourceNodeId: props.nodeModel.id,
+    sourceAnchorId: anchorData.value?.id,
+    targetNodeId: nodeModel.id
+  })
+
+  closeNodeMenu()
+}
+
+const props = defineProps<{
+  nodeModel: any
+}>()
+const nodeFields = computed(() => {
+  if (props.nodeModel.properties.config.fields) {
+    const fields = props.nodeModel.properties.config.fields?.map((field: any) => {
+      return {
+        label: field.label,
+        value: field.value,
+        globeLabel: `{{${props.nodeModel.properties.stepName}.${field.value}}}`,
+        globeValue: `{{context['${props.nodeModel.id}'].${field.value}}}`
+      }
+    })
+    return fields
+  }
+  return []
+})
+
+function showOperate(type: string) {
+  return type !== WorkflowType.Base && type !== WorkflowType.Start
+}
+const openNodeMenu = (anchorValue: any) => {
+  showAnchor.value = true
+  anchorData.value = anchorValue
+}
+const closeNodeMenu = () => {
+  showAnchor.value = false
+  anchorData.value = undefined
+}
+onMounted(() => {
+  set(props.nodeModel, 'openNodeMenu', (anchorData: any) => {
+    showAnchor.value ? closeNodeMenu() : openNodeMenu(anchorData)
+  })
+})
+</script>
+<style lang="scss" scoped>
+.workflow-node-container {
+  .step-container {
+    border: 2px solid #ffffff !important;
+    box-sizing: border-box;
+    &:hover {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+    }
+    &.isSelected {
+      border: 2px solid var(--el-color-primary) !important;
+    }
+    &.error {
+      border: 1px solid #f54a45 !important;
+    }
+  }
+  .arrow-icon {
+    transition: 0.2s;
+  }
+}
+:deep(.el-card) {
+  overflow: visible;
+}
+</style>
diff --git a/src/workflow/common/NodeControl.vue b/src/workflow/common/NodeControl.vue
new file mode 100644
index 0000000..1190724
--- /dev/null
+++ b/src/workflow/common/NodeControl.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
+    <el-button link @click="zoomOut">
+      <el-tooltip class="box-item" effect="dark" content="缩小" placement="top">
+        <el-icon :size="16" title="缩小"><ZoomOut /></el-icon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="zoomIn">
+      <el-tooltip class="box-item" effect="dark" content="放大" placement="top">
+        <el-icon :size="16" title="放大"><ZoomIn /></el-icon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="fitView">
+      <el-tooltip class="box-item" effect="dark" content="适应" placement="top">
+        <AppIcon iconName="app-fitview" title="适应"></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-divider direction="vertical" />
+    <el-button link @click="retract">
+      <el-tooltip class="box-item" effect="dark" content="收起全部节点" placement="top">
+        <AppIcon style="font-size: 16px" iconName="app-retract" title="收起全部节点"></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="extend">
+      <el-tooltip class="box-item" effect="dark" content="展开全部节点" placement="top">
+        <AppIcon style="font-size: 16px" iconName="app-extend" title="展开全部节点"></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="layout">
+      <el-tooltip class="box-item" effect="dark" content="一键美化" placement="top">
+        <AppIcon style="font-size: 16px" iconName="app-beautify" title="一键美化"></AppIcon>
+      </el-tooltip>
+    </el-button>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  lf: Object || String || null
+})
+
+function zoomIn() {
+  props.lf?.zoom(true, [0, 0])
+}
+function zoomOut() {
+  props.lf?.zoom(false, [0, 0])
+}
+function fitView() {
+  props.lf?.resetZoom()
+  props.lf?.resetTranslate()
+  props.lf?.fitView()
+}
+const layout = () => {
+  props.lf?.extension.dagre.layout()
+}
+const retract = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = false
+  })
+}
+const extend = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = true
+  })
+}
+</script>
+<style scoped></style>
diff --git a/src/workflow/common/app-node.ts b/src/workflow/common/app-node.ts
new file mode 100644
index 0000000..0a091df
--- /dev/null
+++ b/src/workflow/common/app-node.ts
@@ -0,0 +1,291 @@
+import Components from '@/components'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { HtmlResize } from '@logicflow/extension'
+
+import { h as lh } from '@logicflow/core'
+import { createApp, h } from 'vue'
+import directives from '@/directives'
+import i18n from '@/locales'
+import { WorkflowType } from '@/enums/workflow'
+import { nodeDict } from '@/workflow/common/data'
+class AppNode extends HtmlResize.view {
+  isMounted
+  r
+  app
+
+  constructor(props: any, VueNode: any) {
+    super(props)
+    this.isMounted = false
+    this.r = h(VueNode, {
+      properties: props.model.properties,
+      nodeModel: props.model
+    })
+
+    this.app = createApp({
+      render: () => this.r
+    })
+    this.app.use(ElementPlus, {
+      locale: zhCn
+    })
+    this.app.use(Components)
+    this.app.use(directives)
+    this.app.use(i18n)
+    for (const [key, component] of Object.entries(ElementPlusIcons)) {
+      this.app.component(key, component)
+    }
+
+    if (props.model.properties.noRender) {
+      delete props.model.properties.noRender
+    } else {
+      const filterNodes = props.graphModel.nodes.filter((v: any) => v.type === props.model.type)
+      if (filterNodes.length - 1 > 0) {
+        getNodesName(filterNodes.length - 1)
+      }
+    }
+    function getNodesName(num: number) {
+      let number = num
+      const name = props.model.properties.stepName + number
+      if (!props.graphModel.nodes?.some((node: any) => node.properties.stepName === name.trim())) {
+        props.model.properties.stepName = name
+      } else {
+        number += 1
+        getNodesName(number)
+      }
+    }
+    props.model.properties.config = nodeDict[props.model.type].properties.config
+    if (props.model.properties.height) {
+      props.model.height = props.model.properties.height
+    }
+  }
+
+  getAnchorShape(anchorData: any) {
+    const { x, y, type } = anchorData
+    let isConnect = false
+
+    if (type == 'left') {
+      isConnect = this.props.graphModel.edges.some((edge) => edge.targetAnchorId == anchorData.id)
+    } else {
+      isConnect = this.props.graphModel.edges.some((edge) => edge.sourceAnchorId == anchorData.id)
+    }
+
+    return lh(
+      'foreignObject',
+      {
+        ...anchorData,
+        x: x - 10,
+        y: y - 12,
+        width: 30,
+        height: 30
+      },
+      [
+        lh('div', {
+          style: { zindex: 0 },
+          onClick: () => {
+            if (type == 'right') {
+              this.props.model.openNodeMenu(anchorData)
+            }
+          },
+          dangerouslySetInnerHTML: {
+            __html: isConnect
+              ? `<svg width="100%" height="100%" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g filter="url(#filter0_d_5119_232585)">
+              <path d="M20.9998 29.8333C28.0875 29.8333 33.8332 24.0876 33.8332 17C33.8332 9.91231 28.0875 4.16663 20.9998 4.16663C13.9122 4.16663 8.1665 9.91231 8.1665 17C8.1665 24.0876 13.9122 29.8333 20.9998 29.8333Z" fill="white"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.9998 27.5C26.7988 27.5 31.4998 22.799 31.4998 17C31.4998 11.201 26.7988 6.49996 20.9998 6.49996C15.2008 6.49996 10.4998 11.201 10.4998 17C10.4998 22.799 15.2008 27.5 20.9998 27.5ZM33.8332 17C33.8332 24.0876 28.0875 29.8333 20.9998 29.8333C13.9122 29.8333 8.1665 24.0876 8.1665 17C8.1665 9.91231 13.9122 4.16663 20.9998 4.16663C28.0875 4.16663 33.8332 9.91231 33.8332 17Z" fill="#3370FF"/>
+              </g>
+              <defs>
+              <filter id="filter0_d_5119_232585" x="-1" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+              <feOffset dy="4"/>
+              <feGaussianBlur stdDeviation="4"/>
+              <feComposite in2="hardAlpha" operator="out"/>
+              <feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5119_232585"/>
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5119_232585" result="shape"/>
+              </filter>
+              </defs>
+              </svg>
+              `
+              : `<svg width="100%" height="100%" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_d_5199_166905)">
+        <path d="M20.9998 29.8333C28.0875 29.8333 33.8332 24.0876 33.8332 17C33.8332 9.91231 28.0875 4.16663 20.9998 4.16663C13.9122 4.16663 8.1665 9.91231 8.1665 17C8.1665 24.0876 13.9122 29.8333 20.9998 29.8333Z" fill="#3370FF"/>
+        <path d="M19.8332 11.75C19.8332 11.4278 20.0943 11.1666 20.4165 11.1666H21.5832C21.9053 11.1666 22.1665 11.4278 22.1665 11.75V15.8333H26.2498C26.572 15.8333 26.8332 16.0945 26.8332 16.4166V17.5833C26.8332 17.9055 26.572 18.1666 26.2498 18.1666H22.1665V22.25C22.1665 22.5721 21.9053 22.8333 21.5832 22.8333H20.4165C20.0943 22.8333 19.8332 22.5721 19.8332 22.25V18.1666H15.7498C15.4277 18.1666 15.1665 17.9055 15.1665 17.5833V16.4166C15.1665 16.0945 15.4277 15.8333 15.7498 15.8333H19.8332V11.75Z" fill="white"/>
+        </g>
+        <defs>
+        <filter id="filter0_d_5199_166905" x="-1" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <feOffset dy="4"/>
+        <feGaussianBlur stdDeviation="4"/>
+        <feComposite in2="hardAlpha" operator="out"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5199_166905"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5199_166905" result="shape"/>
+        </filter>
+        </defs>
+        </svg>`
+          }
+        })
+      ]
+    )
+  }
+
+  setHtml(rootEl: HTMLElement) {
+    if (!this.isMounted) {
+      this.isMounted = true
+      const node = document.createElement('div')
+      rootEl.appendChild(node)
+      this.app?.mount(node)
+    } else {
+      if (this.r && this.r.component) {
+        this.r.component.props.properties = this.props.model.getProperties()
+      }
+    }
+  }
+}
+
+class AppNodeModel extends HtmlResize.model {
+  refreshDeges() {
+    // 更新节点连接边的path
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.outgoing.edges.forEach((edge: any) => {
+      edge.updatePathByAnchor()
+    })
+  }
+  set_position(position: { x?: number; y?: number }) {
+    const { x, y } = position
+    if (x) {
+      this.x = x
+    }
+    if (y) {
+      this.y = y
+    }
+    this.refreshDeges()
+  }
+  getResizeOutlineStyle() {
+    const style = super.getResizeOutlineStyle()
+    style.stroke = 'none'
+    return style
+  }
+  getControlPointStyle() {
+    const style = super.getControlPointStyle()
+    style.stroke = 'none'
+    style.fill = 'none'
+    return style
+  }
+  getNodeStyle() {
+    return {
+      overflow: 'visible'
+    }
+  }
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+  // 如果不用修改锚地形状，可以重写颜色相关样式
+  getAnchorStyle(anchorInfo: any) {
+    const style = super.getAnchorStyle(anchorInfo)
+    if (anchorInfo.type === 'left') {
+      style.fill = 'red'
+      style.hover.fill = 'transparent'
+      style.hover.stroke = 'transpanrent'
+      style.className = 'lf-hide-default'
+    } else {
+      style.fill = 'green'
+    }
+    return style
+  }
+
+  setHeight(height: number) {
+    const sourceHeight = this.height
+    const targetHeight = height + 100
+    this.height = targetHeight
+    this.properties['height'] = targetHeight
+    this.move(0, (targetHeight - sourceHeight) / 2)
+    this.outgoing.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+  }
+  get_width() {
+    return this.properties?.width || 340
+  }
+
+  setAttributes() {
+    this.width = this.get_width()
+    const isLoop = (node_id: string, target_node_id: string) => {
+      const up_node_list = this.graphModel.getNodeIncomingNode(node_id)
+      for (const index in up_node_list) {
+        const item = up_node_list[index]
+        if (item.id === target_node_id) {
+          return true
+        } else {
+          const result = isLoop(item.id, target_node_id)
+          if (result) {
+            return true
+          }
+        }
+      }
+      return false
+    }
+    const circleOnlyAsTarget = {
+      message: '只允许从右边的锚点连出',
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any) => {
+        return sourceAnchor.type === 'right'
+      }
+    }
+    this.sourceRules.push({
+      message: '不可循环连线',
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {
+        return !isLoop(sourceNode.id, targetNode.id)
+      }
+    })
+
+    this.sourceRules.push(circleOnlyAsTarget)
+    this.targetRules.push({
+      message: '只允许连接左边的锚点',
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {
+        return targetAnchor.type === 'left'
+      }
+    })
+  }
+  getDefaultAnchor() {
+    const { id, x, y, width } = this
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
+    const anchors: any = []
+
+    if (this.type !== WorkflowType.Base) {
+      if (this.type !== WorkflowType.Start) {
+        anchors.push({
+          x: x - width / 2 + 10,
+          y: showNode ? y : y - 15,
+          id: `${id}_left`,
+          edgeAddable: false,
+          type: 'left'
+        })
+      }
+      anchors.push({
+        x: x + width / 2 - 10,
+        y: showNode ? y : y - 15,
+        id: `${id}_right`,
+        type: 'right'
+      })
+    }
+
+    return anchors
+  }
+}
+export { AppNodeModel, AppNode }
diff --git a/src/workflow/common/data.ts b/src/workflow/common/data.ts
new file mode 100644
index 0000000..21af2e0
--- /dev/null
+++ b/src/workflow/common/data.ts
@@ -0,0 +1,407 @@
+import { WorkflowType } from '@/enums/workflow'
+import { t } from '@/locales'
+
+export const startNode = {
+  id: WorkflowType.Start,
+  type: WorkflowType.Start,
+  x: 180,
+  y: 720,
+  properties: {
+    height: 200,
+    stepName: '开始',
+    config: {
+      fields: [
+        {
+          label: '用户问题',
+          value: 'question'
+        }
+      ],
+      globalFields: [
+        {
+          value: 'time',
+          label: '当前时间'
+        }
+      ]
+    }
+  }
+}
+export const baseNode = {
+  id: WorkflowType.Base,
+  type: WorkflowType.Base,
+  x: 200,
+  y: 270,
+  text: '',
+  properties: {
+    width: 420,
+    height: 200,
+    stepName: '基本信息',
+    input_field_list: [],
+    node_data: {
+      name: '',
+      desc: '',
+      // @ts-ignore
+      prologue: t('views.application.prompt.defaultPrologue')
+    },
+    config: {}
+  }
+}
+/**
+ * 说明
+ * type 与 nodes 文件对应
+ */
+export const baseNodes = [baseNode, startNode]
+/**
+ * ai对话节点配置数据
+ */
+export const aiChatNode = {
+  type: WorkflowType.AiChat,
+  text: '与 AI 大模型进行对话',
+  label: 'AI 对话',
+  height: 340,
+  properties: {
+    stepName: 'AI 对话',
+    config: {
+      fields: [
+        {
+          label: 'AI 回答内容',
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+/**
+ * 知识库检索配置数据
+ */
+export const searchDatasetNode = {
+  type: WorkflowType.SearchDataset,
+  text: '关联知识库，查找与问题相关的分段',
+  label: '知识库检索',
+  height: 355,
+  properties: {
+    stepName: '知识库检索',
+    config: {
+      fields: [
+        { label: '检索结果的分段列表', value: 'paragraph_list' },
+        { label: '满足直接回答的分段列表', value: 'is_hit_handling_method_list' },
+        {
+          label: '检索结果',
+          value: 'data'
+        },
+        {
+          label: '满足直接回答的分段内容',
+          value: 'directly_return'
+        }
+      ]
+    }
+  }
+}
+export const questionNode = {
+  type: WorkflowType.Question,
+  text: '根据历史聊天记录优化完善当前问题，更利于匹配知识库分段',
+  label: '问题优化',
+  height: 345,
+  properties: {
+    stepName: '问题优化',
+    config: {
+      fields: [
+        {
+          label: '问题优化结果',
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+export const conditionNode = {
+  type: WorkflowType.Condition,
+  text: '根据不同条件执行不同的节点',
+  label: '判断器',
+  height: 175,
+  properties: {
+    width: 600,
+    stepName: '判断器',
+    config: {
+      fields: [
+        {
+          label: '分支名称',
+          value: 'branch_name'
+        }
+      ]
+    }
+  }
+}
+export const replyNode = {
+  type: WorkflowType.Reply,
+  text: '指定回复内容，引用变量会转换为字符串进行输出',
+  label: '指定回复',
+  height: 210,
+  properties: {
+    stepName: '指定回复',
+    config: {
+      fields: [
+        {
+          label: '内容',
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+export const rerankerNode = {
+  type: WorkflowType.RrerankerNode,
+  text: '使用重排模型对多个知识库的检索结果进行二次召回',
+  label: '多路召回',
+  height: 252,
+  properties: {
+    stepName: '多路召回',
+    config: {
+      fields: [
+        {
+          label: '重排结果列表',
+          value: 'result_list'
+        },
+        {
+          label: '重排结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const formNode = {
+  type: WorkflowType.FormNode,
+  text: '在问答过程中用于收集用户信息，可以根据收集到表单数据执行后续流程',
+  label: '表单收集',
+  height: 252,
+  properties: {
+    width: 600,
+    stepName: '表单收集',
+    node_data: {
+      is_result: true,
+      form_field_list: [],
+      form_content_format: `你好，请先填写下面表单内容：
+{{form}}
+填写后请点击【提交】按钮进行提交。`
+    },
+    config: {
+      fields: [
+        {
+          label: '表单全部内容',
+          value: 'form_data'
+        }
+      ]
+    }
+  }
+}
+export const documentExtractNode = {
+  type: WorkflowType.DocumentExtractNode,
+  text: '提取文档中的内容',
+  label: '文档内容提取',
+  height: 252,
+  properties: {
+    stepName: '文档内容提取',
+    config: {
+      fields: [
+        {
+          label: '文档内容',
+          value: 'content'
+        }
+      ]
+    }
+  }
+}
+export const imageUnderstandNode = {
+  type: WorkflowType.ImageUnderstandNode,
+  text: '识别出图片中的对象、场景等信息回答用户问题',
+  label: '图片理解',
+  height: 252,
+  properties: {
+    stepName: '图片理解',
+    config: {
+      fields: [
+        {
+          label: 'AI 回答内容',
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+
+export const imageGenerateNode = {
+  type: WorkflowType.ImageGenerateNode,
+  text: '根据提供的文本内容生成图片',
+  label: '图片生成',
+  height: 252,
+  properties: {
+    stepName: '图片生成',
+    config: {
+      fields: [
+        {
+          label: 'AI 回答内容',
+          value: 'answer'
+        },
+        {
+          label: '图片',
+          value: 'image'
+        }
+      ]
+    }
+  }
+}
+
+export const speechToTextNode = {
+  type: WorkflowType.SpeechToTextNode,
+  text: '将音频通过语音识别模型转换为文本',
+  label: '语音转文本',
+  height: 252,
+  properties: {
+    stepName: '语音转文本',
+    config: {
+      fields: [
+        {
+          label: '结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const textToSpeechNode = {
+  type: WorkflowType.TextToSpeechNode,
+  text: '将文本通过语音合成模型转换为音频',
+  label: '文本转语音',
+  height: 252,
+  properties: {
+    stepName: '文本转语音',
+    config: {
+      fields: [
+        {
+          label: '结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const menuNodes = [
+  aiChatNode,
+  imageUnderstandNode,
+  imageGenerateNode,
+  searchDatasetNode,
+  rerankerNode,
+  conditionNode,
+  replyNode,
+  formNode,
+  questionNode,
+  documentExtractNode,
+  speechToTextNode,
+  textToSpeechNode
+]
+
+/**
+ * 自定义函数配置数据
+ */
+export const functionNode = {
+  type: WorkflowType.FunctionLibCustom,
+  text: '通过执行自定义脚本，实现数据处理',
+  label: '自定义函数',
+  height: 260,
+  properties: {
+    stepName: '自定义函数',
+    config: {
+      fields: [
+        {
+          label: '结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const functionLibNode = {
+  type: WorkflowType.FunctionLib,
+  text: '通过执行自定义脚本，实现数据处理',
+  label: '自定义函数',
+  height: 170,
+  properties: {
+    stepName: '自定义函数',
+    config: {
+      fields: [
+        {
+          label: '结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+
+export const applicationNode = {
+  type: WorkflowType.Application,
+  text: '应用节点',
+  label: '应用节点',
+  height: 260,
+  properties: {
+    stepName: '应用节点',
+    config: {
+      fields: [
+        {
+          label: '结果',
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+
+export const compareList = [
+  { value: 'is_null', label: '为空' },
+  { value: 'is_not_null', label: '不为空' },
+  { value: 'contain', label: '包含' },
+  { value: 'not_contain', label: '不包含' },
+  { value: 'eq', label: '等于' },
+  { value: 'ge', label: '大于等于' },
+  { value: 'gt', label: '大于' },
+  { value: 'le', label: '小于等于' },
+  { value: 'lt', label: '小于' },
+  { value: 'len_eq', label: '长度等于' },
+  { value: 'len_ge', label: '长度大于等于' },
+  { value: 'len_gt', label: '长度大于' },
+  { value: 'len_le', label: '长度小于等于' },
+  { value: 'len_lt', label: '长度小于' }
+]
+
+export const nodeDict: any = {
+  [WorkflowType.AiChat]: aiChatNode,
+  [WorkflowType.SearchDataset]: searchDatasetNode,
+  [WorkflowType.Question]: questionNode,
+  [WorkflowType.Condition]: conditionNode,
+  [WorkflowType.Base]: baseNode,
+  [WorkflowType.Start]: startNode,
+  [WorkflowType.Reply]: replyNode,
+  [WorkflowType.FunctionLib]: functionLibNode,
+  [WorkflowType.FunctionLibCustom]: functionNode,
+  [WorkflowType.RrerankerNode]: rerankerNode,
+  [WorkflowType.FormNode]: formNode,
+  [WorkflowType.Application]: applicationNode,
+  [WorkflowType.DocumentExtractNode]: documentExtractNode,
+  [WorkflowType.ImageUnderstandNode]: imageUnderstandNode,
+  [WorkflowType.TextToSpeechNode]: textToSpeechNode,
+  [WorkflowType.SpeechToTextNode]: speechToTextNode,
+  [WorkflowType.ImageGenerateNode]: imageGenerateNode
+}
+export function isWorkFlow(type: string | undefined) {
+  return type === 'WORK_FLOW'
+}
+
+export function isLastNode(nodeModel: any) {
+  const incoming = nodeModel.graphModel.getNodeIncomingNode(nodeModel.id)
+  const outcomming = nodeModel.graphModel.getNodeOutgoingNode(nodeModel.id)
+  if (incoming.length > 0 && outcomming.length === 0) {
+    return true
+  } else {
+    return false
+  }
+}
diff --git a/src/workflow/common/edge.ts b/src/workflow/common/edge.ts
new file mode 100644
index 0000000..8093e0a
--- /dev/null
+++ b/src/workflow/common/edge.ts
@@ -0,0 +1,188 @@
+import { BezierEdge, BezierEdgeModel, h } from '@logicflow/core'
+import { createApp, h as vh } from 'vue'
+
+import CustomLine from './CustomLine.vue'
+function isMouseInElement(element: any, e: any) {
+  const rect = element.getBoundingClientRect()
+  return (
+    e.clientX >= rect.left &&
+    e.clientX <= rect.right &&
+    e.clientY >= rect.top &&
+    e.clientY <= rect.bottom
+  )
+}
+const DEFAULT_WIDTH = 32
+const DEFAULT_HEIGHT = 32
+class CustomEdge2 extends BezierEdge {
+  isMounted
+
+  constructor() {
+    super()
+    this.isMounted = false
+    this.handleMouseUp = (e: any) => {
+      this.props.graphModel.clearSelectElements()
+      this.props.model.isSelected = true
+      const element = e.target.parentNode.parentNode.querySelector('.lf-custom-edge-wrapper')
+      if (isMouseInElement(element, e)) {
+        this.props.model.graphModel.deleteEdgeById(this.props.model.id)
+      }
+    }
+  }
+
+  getEdge() {
+    const { model } = this.props
+    const id = model.id
+    const { customWidth = DEFAULT_WIDTH, customHeight = DEFAULT_HEIGHT } = model.getProperties()
+    const { startPoint, endPoint, path, isAnimation, arrowConfig } = model
+    const animationStyle = model.getEdgeAnimationStyle()
+    const {
+      strokeDasharray,
+      stroke,
+      strokeDashoffset,
+      animationName,
+      animationDuration,
+      animationIterationCount,
+      animationTimingFunction,
+      animationDirection
+    } = animationStyle
+    const positionData = {
+      x: (startPoint.x + endPoint.x - customWidth) / 2,
+      y: (startPoint.y + endPoint.y - customHeight) / 2,
+      width: customWidth,
+      height: customHeight
+    }
+    const style = model.getEdgeStyle()
+    const wrapperStyle = {
+      width: customWidth,
+      height: customHeight
+    }
+
+    const app = createApp({
+      render: () => vh(CustomLine, { model: this.props.model })
+    })
+    setTimeout(() => {
+      const s = document.getElementById(id)
+      if (s && !this.isMounted) {
+        app.mount(s)
+        this.isMounted = true
+      }
+    }, 0)
+
+    delete style.stroke
+
+    return h('g', {}, [
+      h(
+        'style' as any,
+        { type: 'text/css' },
+        '.lf-edge{stroke:#afafaf}.lf-edge:hover{stroke: #3370FF;}'
+      ),
+      h('path', {
+        d: path,
+        ...style,
+        ...arrowConfig,
+        ...(isAnimation
+          ? {
+              strokeDasharray,
+              stroke,
+              style: {
+                strokeDashoffset,
+                animationName,
+                animationDuration,
+                animationIterationCount,
+                animationTimingFunction,
+                animationDirection
+              }
+            }
+          : {})
+      }),
+      h(
+        'foreignObject',
+        {
+          ...positionData,
+          y: positionData.y + 5,
+          x: positionData.x + 5,
+          style: {}
+        },
+        [
+          h('div', {
+            id,
+            style: { ...wrapperStyle },
+            className: 'lf-custom-edge-wrapper'
+          })
+        ]
+      )
+    ])
+  }
+}
+
+class CustomEdgeModel2 extends BezierEdgeModel {
+  getArrowStyle() {
+    const arrowStyle = super.getArrowStyle()
+    arrowStyle.offset = 1
+    arrowStyle.verticalLength = 0
+    return arrowStyle
+  }
+
+  getEdgeStyle() {
+    const style = super.getEdgeStyle()
+    // svg属性
+    style.strokeWidth = 2
+    style.stroke = '#BBBFC4'
+    style.offset = 0
+    return style
+  }
+  /**
+   * 重写此方法，使保存数据是能带上锚点数据。
+   */
+  getData() {
+    const data: any = super.getData()
+    if (data) {
+      data.sourceAnchorId = this.sourceAnchorId
+      data.targetAnchorId = this.targetAnchorId
+    }
+    return data
+  }
+  /**
+   * 给边自定义方案，使其支持基于锚点的位置更新边的路径
+   */
+  updatePathByAnchor() {
+    // TODO
+    const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId)
+    const sourceAnchor = sourceNodeModel
+      .getDefaultAnchor()
+      .find((anchor: any) => anchor.id === this.sourceAnchorId)
+
+    const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId)
+    const targetAnchor = targetNodeModel
+      .getDefaultAnchor()
+      .find((anchor: any) => anchor.id === this.targetAnchorId)
+    if (sourceAnchor && targetAnchor) {
+      const startPoint = {
+        x: sourceAnchor.x,
+        y: sourceAnchor.y
+      }
+      this.updateStartPoint(startPoint)
+      const endPoint = {
+        x: targetAnchor.x,
+        y: targetAnchor.y
+      }
+
+      this.updateEndPoint(endPoint)
+    }
+
+    // 这里需要将原有的pointsList设置为空，才能触发bezier的自动计算control点。
+    this.pointsList = []
+    this.initPoints()
+  }
+  setAttributes(): void {
+    super.setAttributes()
+    this.isHitable = true
+    this.zIndex = 0
+  }
+}
+
+export default {
+  type: 'app-edge',
+  view: CustomEdge2,
+  model: CustomEdgeModel2
+}
diff --git a/src/workflow/common/shortcut.ts b/src/workflow/common/shortcut.ts
new file mode 100644
index 0000000..b2fc43f
--- /dev/null
+++ b/src/workflow/common/shortcut.ts
@@ -0,0 +1,135 @@
+import type LogicFlow from '@logicflow/core'
+import { type GraphModel } from '@logicflow/core'
+import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
+import { WorkflowType } from '@/enums/workflow'
+let selected: any | null = null
+
+function translationNodeData(nodeData: any, distance: any) {
+  nodeData.x += distance
+  nodeData.y += distance
+  if (nodeData.text) {
+    nodeData.text.x += distance
+    nodeData.text.y += distance
+  }
+  return nodeData
+}
+
+function translationEdgeData(edgeData: any, distance: any) {
+  if (edgeData.startPoint) {
+    edgeData.startPoint.x += distance
+    edgeData.startPoint.y += distance
+  }
+  if (edgeData.endPoint) {
+    edgeData.endPoint.x += distance
+    edgeData.endPoint.y += distance
+  }
+  if (edgeData.pointsList && edgeData.pointsList.length > 0) {
+    edgeData.pointsList.forEach((point: any) => {
+      point.x += distance
+      point.y += distance
+    })
+  }
+  if (edgeData.text) {
+    edgeData.text.x += distance
+    edgeData.text.y += distance
+  }
+  return edgeData
+}
+
+const TRANSLATION_DISTANCE = 40
+let CHILDREN_TRANSLATION_DISTANCE = 40
+
+export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
+  const { keyboard } = lf
+  const {
+    options: { keyboard: keyboardOptions }
+  } = keyboard
+  const copy_node = () => {
+    CHILDREN_TRANSLATION_DISTANCE = TRANSLATION_DISTANCE
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    const { guards } = lf.options
+    const elements = graph.getSelectElements(false)
+    const enabledClone = guards && guards.beforeClone ? guards.beforeClone(elements) : true
+    if (!enabledClone || (elements.nodes.length === 0 && elements.edges.length === 0)) {
+      selected = null
+      return true
+    }
+    const base_nodes = elements.nodes.filter(
+      (node: any) => node.type === WorkflowType.Start || node.type === WorkflowType.Base
+    )
+    if (base_nodes.length > 0) {
+      MsgError(base_nodes[0]?.properties?.stepName + '不能被复制')
+      return
+    }
+    selected = elements
+    selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE))
+    selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE))
+    MsgSuccess('已复制节点')
+    return false
+  }
+  const paste_node = () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    if (selected && (selected.nodes || selected.edges)) {
+      lf.clearSelectElements()
+      const addElements = lf.addElements(selected, CHILDREN_TRANSLATION_DISTANCE)
+      if (!addElements) return true
+      addElements.nodes.forEach((node) => lf.selectElementById(node.id, true))
+      addElements.edges.forEach((edge) => lf.selectElementById(edge.id, true))
+      selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE))
+      selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE))
+      CHILDREN_TRANSLATION_DISTANCE = CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE
+    }
+    return false
+  }
+  const delete_node = () => {
+    const elements = graph.getSelectElements(true)
+    lf.clearSelectElements()
+    if (elements.nodes.length == 0 && elements.edges.length == 0) {
+      return
+    }
+    if (elements.edges.length > 0 && elements.nodes.length == 0) {
+      elements.edges.forEach((edge: any) => lf.deleteEdge(edge.id))
+      return
+    }
+    const nodes = elements.nodes.filter((node) => ['start-node', 'base-node'].includes(node.type))
+    if (nodes.length > 0) {
+      MsgError(`${nodes[0].properties?.stepName}节点不允许删除`)
+      return
+    }
+    MsgConfirm(`提示`, `确定删除该节点？`, {
+      confirmButtonText: '删除',
+      confirmButtonClass: 'danger'
+    }).then(() => {
+      if (!keyboardOptions?.enabled) return true
+      if (graph.textEditElement) return true
+
+      elements.edges.forEach((edge: any) => lf.deleteEdge(edge.id))
+      elements.nodes.forEach((node: any) => lf.deleteNode(node.id))
+    })
+
+    return false
+  }
+  graph.eventCenter.on('copy_node', copy_node)
+  // 复制
+  keyboard.on(['cmd + c', 'ctrl + c'], copy_node)
+  // 粘贴
+  keyboard.on(['cmd + v', 'ctrl + v'], paste_node)
+  // undo
+  keyboard.on(['cmd + z', 'ctrl + z'], () => {
+    // if (!keyboardOptions?.enabled) return true
+    // if (graph.textEditElement) return true
+    // lf.undo()
+    // return false
+  })
+  // redo
+  keyboard.on(['cmd + y', 'ctrl + y'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    lf.redo()
+    return false
+  })
+  // delete
+  keyboard.on(['backspace'], delete_node)
+}
diff --git a/src/workflow/common/validate.ts b/src/workflow/common/validate.ts
new file mode 100644
index 0000000..17a3532
--- /dev/null
+++ b/src/workflow/common/validate.ts
@@ -0,0 +1,149 @@
+import { WorkflowType } from '@/enums/workflow'
+
+const end_nodes: Array<string> = [
+  WorkflowType.AiChat,
+  WorkflowType.Reply,
+  WorkflowType.FunctionLib,
+  WorkflowType.FunctionLibCustom,
+  WorkflowType.ImageUnderstandNode,
+  WorkflowType.Application,
+  WorkflowType.SpeechToTextNode,
+  WorkflowType.TextToSpeechNode,
+    WorkflowType.ImageGenerateNode,
+]
+export class WorkFlowInstance {
+  nodes
+  edges
+  workFlowNodes: Array<any>
+  constructor(workflow: { nodes: Array<any>; edges: Array<any> }) {
+    this.nodes = workflow.nodes
+    this.edges = workflow.edges
+    this.workFlowNodes = []
+  }
+  /**
+   * 校验开始节点
+   */
+  private is_valid_start_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
+    if (start_node_list.length == 0) {
+      throw '开始节点必填'
+    } else if (start_node_list.length > 1) {
+      throw '开始节点只能有一个'
+    }
+  }
+  /**
+   * 校验基本信息节点
+   */
+  private is_valid_base_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
+    if (start_node_list.length == 0) {
+      throw '基本信息节点必填'
+    } else if (start_node_list.length > 1) {
+      throw '基本信息节点只能有一个'
+    }
+  }
+  /**
+   * 校验节点
+   */
+  is_valid() {
+    this.is_valid_start_node()
+    this.is_valid_base_node()
+    this.is_valid_work_flow()
+    this.is_valid_nodes()
+  }
+
+  /**
+   * 获取开始节点
+   * @returns
+   */
+  get_start_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
+    return start_node_list[0]
+  }
+  /**
+   * 获取基本节点
+   * @returns 基本节点
+   */
+  get_base_node() {
+    const base_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
+    return base_node_list[0]
+  }
+
+  /**
+   * 校验工作流
+   * @param up_node 上一个节点
+   */
+  private _is_valid_work_flow(up_node?: any) {
+    if (!up_node) {
+      up_node = this.get_start_node()
+    }
+    this.workFlowNodes.push(up_node)
+    this.is_valid_node(up_node)
+    const next_nodes = this.get_next_nodes(up_node)
+    for (const next_node of next_nodes) {
+      this._is_valid_work_flow(next_node)
+    }
+  }
+  private is_valid_work_flow() {
+    this.workFlowNodes = []
+    this._is_valid_work_flow()
+    const notInWorkFlowNodes = this.nodes
+      .filter((node: any) => node.id !== WorkflowType.Start && node.id !== WorkflowType.Base)
+      .filter((node) => !this.workFlowNodes.includes(node))
+    if (notInWorkFlowNodes.length > 0) {
+      throw `未在流程中的节点:${notInWorkFlowNodes.map((node) => node.properties.stepName).join('，')}`
+    }
+    this.workFlowNodes = []
+  }
+  /**
+   * 获取流程下一个节点列表
+   * @param node 节点
+   * @returns 节点列表
+   */
+  private get_next_nodes(node: any) {
+    const edge_list = this.edges.filter((edge) => edge.sourceNodeId == node.id)
+    const node_list = edge_list
+      .map((edge) => this.nodes.filter((node) => node.id == edge.targetNodeId))
+      .reduce((x, y) => [...x, ...y], [])
+    if (node_list.length == 0 && !end_nodes.includes(node.type)) {
+      throw '不存在的下一个节点'
+    }
+    return node_list
+  }
+  private is_valid_nodes() {
+    for (const node of this.nodes) {
+      if (node.type !== WorkflowType.Base && node.type !== WorkflowType.Start) {
+        if (!this.edges.some((edge) => edge.targetNodeId === node.id)) {
+          throw `未在流程中的节点:${node.properties.stepName}`
+        }
+      }
+    }
+  }
+  /**
+   * 校验节点
+   * @param node 节点
+   */
+  private is_valid_node(node: any) {
+    if (node.properties.status && node.properties.status === 500) {
+      throw `${node.properties.stepName} 节点不可用`
+    }
+    if (node.type === WorkflowType.Condition) {
+      const branch_list = node.properties.node_data.branch
+      for (const branch of branch_list) {
+        const source_anchor_id = `${node.id}_${branch.id}_right`
+        const edge_list = this.edges.filter((edge) => edge.sourceAnchorId == source_anchor_id)
+        if (edge_list.length == 0) {
+          throw `${node.properties.stepName} 节点的${branch.type}分支需要连接`
+        }
+      }
+    } else {
+      const edge_list = this.edges.filter((edge) => edge.sourceNodeId == node.id)
+      if (edge_list.length == 0 && !end_nodes.includes(node.type)) {
+        throw `${node.properties.stepName} 节点不能当做结束节点`
+      }
+    }
+    if (node.properties.status && node.properties.status !== 200) {
+      throw `${node.properties.stepName} 节点不可用`
+    }
+  }
+}
diff --git a/src/workflow/icons/ai-chat-node-icon.vue b/src/workflow/icons/ai-chat-node-icon.vue
new file mode 100644
index 0000000..24e6d46
--- /dev/null
+++ b/src/workflow/icons/ai-chat-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar class="avatar-gradient" shape="square">
+    <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/application-node-icon.vue b/src/workflow/icons/application-node-icon.vue
new file mode 100644
index 0000000..31f15d8
--- /dev/null
+++ b/src/workflow/icons/application-node-icon.vue
@@ -0,0 +1,28 @@
+<template>
+  <AppAvatar
+    v-if="isAppIcon(item?.icon)"
+    shape="square"
+    :size="32"
+    style="background: none"
+    class="mr-8"
+  >
+    <img :src="item?.icon" alt="" />
+  </AppAvatar>
+  <AppAvatar
+    v-else-if="item?.name"
+    :name="item?.name"
+    pinyinColor
+    shape="square"
+    :size="32"
+    class="mr-8"
+  />
+</template>
+<script setup lang="ts">
+import { isAppIcon } from '@/utils/application'
+const props = defineProps<{
+  item: {
+    name: string
+    icon: string
+  }
+}>()
+</script>
diff --git a/src/workflow/icons/base-node-icon.vue b/src/workflow/icons/base-node-icon.vue
new file mode 100644
index 0000000..a0b5d27
--- /dev/null
+++ b/src/workflow/icons/base-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800;">
+    <img src="@/assets/icon_hi.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/condition-node-icon.vue b/src/workflow/icons/condition-node-icon.vue
new file mode 100644
index 0000000..6deed31
--- /dev/null
+++ b/src/workflow/icons/condition-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_condition.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/document-extract-node-icon.vue b/src/workflow/icons/document-extract-node-icon.vue
new file mode 100644
index 0000000..7b81719
--- /dev/null
+++ b/src/workflow/icons/document-extract-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_docs.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/form-node-icon.vue b/src/workflow/icons/form-node-icon.vue
new file mode 100644
index 0000000..40f6ea7
--- /dev/null
+++ b/src/workflow/icons/form-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_form.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/function-lib-node-icon.vue b/src/workflow/icons/function-lib-node-icon.vue
new file mode 100644
index 0000000..e6e84a8
--- /dev/null
+++ b/src/workflow/icons/function-lib-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/function-node-icon.vue b/src/workflow/icons/function-node-icon.vue
new file mode 100644
index 0000000..e6e84a8
--- /dev/null
+++ b/src/workflow/icons/function-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/global-icon.vue b/src/workflow/icons/global-icon.vue
new file mode 100644
index 0000000..5d476dc
--- /dev/null
+++ b/src/workflow/icons/global-icon.vue
@@ -0,0 +1,4 @@
+<template>
+  <img src="@/assets/icon_globe_color.svg" style="width: 18px" alt="" />
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/image-generate-node-icon.vue b/src/workflow/icons/image-generate-node-icon.vue
new file mode 100644
index 0000000..64ca192
--- /dev/null
+++ b/src/workflow/icons/image-generate-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800;">
+    <img src="@/assets/icon_text-image.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/image-understand-node-icon.vue b/src/workflow/icons/image-understand-node-icon.vue
new file mode 100644
index 0000000..6f58417
--- /dev/null
+++ b/src/workflow/icons/image-understand-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_image.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/question-node-icon.vue b/src/workflow/icons/question-node-icon.vue
new file mode 100644
index 0000000..74ab30d
--- /dev/null
+++ b/src/workflow/icons/question-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34C724">
+    <img src="@/assets/icon_setting.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/reply-node-icon.vue b/src/workflow/icons/reply-node-icon.vue
new file mode 100644
index 0000000..07b2ed5
--- /dev/null
+++ b/src/workflow/icons/reply-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800">
+    <img src="@/assets/icon_reply.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/reranker-node-icon.vue b/src/workflow/icons/reranker-node-icon.vue
new file mode 100644
index 0000000..70c8f48
--- /dev/null
+++ b/src/workflow/icons/reranker-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #7F3BF5">
+    <img src="@/assets/icon_reranker.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/search-dataset-node-icon.vue b/src/workflow/icons/search-dataset-node-icon.vue
new file mode 100644
index 0000000..d2b2302
--- /dev/null
+++ b/src/workflow/icons/search-dataset-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/speech-to-text-node-icon.vue b/src/workflow/icons/speech-to-text-node-icon.vue
new file mode 100644
index 0000000..37cc26c
--- /dev/null
+++ b/src/workflow/icons/speech-to-text-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #ff8800">
+    <img src="@/assets/icon_speech_to_text.svg" style="width: 100%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/start-node-icon.vue b/src/workflow/icons/start-node-icon.vue
new file mode 100644
index 0000000..9a01ac9
--- /dev/null
+++ b/src/workflow/icons/start-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #D136D1;">
+    <img src="@/assets/icon_start.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/text-to-speech-node-icon.vue b/src/workflow/icons/text-to-speech-node-icon.vue
new file mode 100644
index 0000000..e48a068
--- /dev/null
+++ b/src/workflow/icons/text-to-speech-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14c0ff">
+    <img src="@/assets/icon_text_to_speech.svg" style="width: 100%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/workflow/icons/utils.ts b/src/workflow/icons/utils.ts
new file mode 100644
index 0000000..b667cdc
--- /dev/null
+++ b/src/workflow/icons/utils.ts
@@ -0,0 +1,5 @@
+const icons: any = import.meta.glob('./**.vue', { eager: true })
+export function iconComponent(name: string) {
+  const url = `./${name}.vue`
+  return icons[url]?.default || null
+}
diff --git a/src/workflow/index.vue b/src/workflow/index.vue
new file mode 100644
index 0000000..f2a72b3
--- /dev/null
+++ b/src/workflow/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <div className="workflow-app" id="container"></div>
+  <!-- 辅助工具栏 -->
+  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
+</template>
+<script setup lang="ts">
+import LogicFlow from '@logicflow/core'
+import { ref, onMounted, computed } from 'vue'
+import AppEdge from './common/edge'
+import Control from './common/NodeControl.vue'
+import { baseNodes } from '@/workflow/common/data'
+import '@logicflow/extension/lib/style/index.css'
+import '@logicflow/core/dist/style/index.css'
+import { initDefaultShortcut } from '@/workflow/common/shortcut'
+import Dagre from '@/workflow/plugins/dagre'
+const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
+
+defineOptions({ name: 'WorkFlow' })
+
+type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, any>
+  callback?: (lf: LogicFlow, container?: HTMLElement) => void
+}
+
+const props = defineProps({
+  data: Object || null
+})
+
+const defaultData = {
+  nodes: [...baseNodes]
+}
+const graphData = computed({
+  get: () => {
+    if (props.data) {
+      return props.data
+    } else {
+      return defaultData
+    }
+  },
+  set: (value) => {
+    return value
+  }
+})
+
+const lf = ref()
+onMounted(() => {
+  renderGraphData()
+})
+const render = (data: any) => {
+  lf.value.render(data)
+}
+const renderGraphData = (data?: any) => {
+  if (data) {
+    graphData.value = data
+  }
+  const container: any = document.querySelector('#container')
+  if (container) {
+    lf.value = new LogicFlow({
+      plugins: [Dagre],
+      textEdit: false,
+      adjustEdge: false,
+      adjustEdgeStartAndEnd: false,
+      background: {
+        backgroundColor: '#f5f6f7'
+      },
+      grid: {
+        size: 10,
+        type: 'dot',
+        config: {
+          color: '#DEE0E3',
+          thickness: 1
+        }
+      },
+      keyboard: {
+        enabled: true
+      },
+      isSilentMode: false,
+      container: container
+    })
+    lf.value.setTheme({
+      bezier: {
+        stroke: '#afafaf',
+        strokeWidth: 1
+      }
+    })
+    initDefaultShortcut(lf.value, lf.value.graphModel)
+    lf.value.batchRegister([...Object.keys(nodes).map((key) => nodes[key].default), AppEdge])
+    lf.value.setDefaultEdgeType('app-edge')
+
+    lf.value.render(graphData.value)
+
+    lf.value.graphModel.eventCenter.on('delete_edge', (id_list: Array<string>) => {
+      id_list.forEach((id: string) => {
+        lf.value.deleteEdge(id)
+      })
+    })
+
+    setTimeout(() => {
+      lf.value?.fitView()
+    }, 500)
+  }
+}
+const validate = () => {
+  return Promise.all(lf.value.graphModel.nodes.map((element: any) => element?.validate?.()))
+}
+const getGraphData = () => {
+  return lf.value.getGraphData()
+}
+
+const onmousedown = (shapeItem: ShapeItem) => {
+  if (shapeItem.type) {
+    lf.value.dnd.startDrag({
+      type: shapeItem.type,
+      properties: { ...shapeItem.properties }
+    })
+  }
+  if (shapeItem.callback) {
+    shapeItem.callback(lf.value)
+  }
+}
+const addNode = (shapeItem: ShapeItem) => {
+  lf.value.clearSelectElements()
+  const { virtualRectCenterPositionX, virtualRectCenterPositionY } =
+    lf.value.graphModel.getVirtualRectSize()
+  const newNode = lf.value.graphModel.addNode({
+    type: shapeItem.type,
+    properties: shapeItem.properties,
+    x: virtualRectCenterPositionX,
+    y: virtualRectCenterPositionY - lf.value.graphModel.height / 2
+  })
+  newNode.isSelected = true
+  newNode.isHovered = true
+  lf.value.toFront(newNode.id)
+}
+
+const clearGraphData = () => {
+  return lf.value.clearData()
+}
+
+defineExpose({
+  onmousedown,
+  validate,
+  getGraphData,
+  addNode,
+  clearGraphData,
+  renderGraphData,
+  render
+})
+</script>
+<style lang="scss">
+.workflow-app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.workflow-control {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 2;
+}
+.lf-drag-able {
+  cursor: pointer;
+}
+</style>
diff --git a/src/workflow/nodes/ai-chat-node/index.ts b/src/workflow/nodes/ai-chat-node/index.ts
new file mode 100644
index 0000000..b226719
--- /dev/null
+++ b/src/workflow/nodes/ai-chat-node/index.ts
@@ -0,0 +1,12 @@
+import ChatNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ChatNode extends AppNode {
+  constructor(props: any) {
+    super(props, ChatNodeVue)
+  }
+}
+export default {
+  type: 'ai-chat-node',
+  model: AppNodeModel,
+  view: ChatNode
+}
diff --git a/src/workflow/nodes/ai-chat-node/index.vue b/src/workflow/nodes/ai-chat-node/index.vue
new file mode 100644
index 0000000..f687029
--- /dev/null
+++ b/src/workflow/nodes/ai-chat-node/index.vue
@@ -0,0 +1,340 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="chat_data"
+        label-position="top"
+        require-asterisk-position="right"
+        class="mb-24"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="AI 模型"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: '请选择 AI 模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>AI 模型<span class="danger">*</span></span>
+              </div>
+              <el-button
+                :disabled="!chat_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(chat_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                {{ $t('views.application.applicationForm.form.paramSetting') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="chat_data.model_id"
+            placeholder="请选择 AI 模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === chat_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === chat_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+            <template #footer>
+              <div class="w-full text-left cursor" @click="openCreateModel()">
+                <el-button type="primary" link>
+                  <el-icon class="mr-4">
+                    <Plus />
+                  </el-icon>
+                  添加模型
+                </el-button>
+              </div>
+            </template>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="角色设定">
+          <MdEditorMagnify
+            title="角色设定"
+            v-model="chat_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            placeholder="角色设定"
+          />
+        </el-form-item>
+        <el-form-item
+          label="提示词"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: '请输入提示词',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>提示词<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头，可以使用变量。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="提示词"
+            v-model="chat_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item label="历史聊天记录">
+          <template #label>
+            <div class="flex-between">
+              <div>历史聊天记录</div>
+              <el-select v-model="chat_data.dialogue_type" type="small" style="width: 100px">
+                <el-option label="节点" value="NODE" />
+                <el-option label="工作流" value="WORKFLOW" />
+              </el-select>
+            </div>
+          </template>
+          <el-input-number
+            v-model="chat_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="chat_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 添加模版 -->
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set, groupBy } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import { isLastNode } from '@/workflow/common/data'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+
+const { model } = useStore()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+const model_change = (model_id?: string) => {
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+// @ts-ignore
+const defaultPrompt = `已知信息：
+{{知识库检索.data}}
+问题：
+{{开始.question}}`
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  dialogue_number: 1,
+  is_result: false,
+  temperature: null,
+  max_tokens: null,
+  dialogue_type: 'WORKFLOW'
+}
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+const props = defineProps<{ nodeModel: any }>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+const validate = () => {
+  return aiChatNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, chat_data.value.model_params_setting)
+  }
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+onMounted(() => {
+  getProvider()
+  getModel()
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+  if (!chat_data.value.dialogue_type) {
+    chat_data.value.dialogue_type = 'WORKFLOW'
+  }
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/application-node/index.ts b/src/workflow/nodes/application-node/index.ts
new file mode 100644
index 0000000..6292ab5
--- /dev/null
+++ b/src/workflow/nodes/application-node/index.ts
@@ -0,0 +1,12 @@
+import ChatNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ChatNode extends AppNode {
+  constructor(props: any) {
+    super(props, ChatNodeVue)
+  }
+}
+export default {
+  type: 'application-node',
+  model: AppNodeModel,
+  view: ChatNode
+}
diff --git a/src/workflow/nodes/application-node/index.vue b/src/workflow/nodes/application-node/index.vue
new file mode 100644
index 0000000..200a0c5
--- /dev/null
+++ b/src/workflow/nodes/application-node/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="applicationNodeFormRef"
+      >
+        <el-form-item
+          label="用户问题"
+          prop="question_reference_address"
+          :rules="{
+            message: '请选择检索问题',
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <NodeCascader
+            ref="applicationNodeFormRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择检索问题"
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('document_list') || 'document_list' in form_data"
+          label="选择文档"
+          prop="document_list"
+          :rules="{
+            message: '请选择文档',
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择文档"
+            v-model="form_data.document_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('image_list') || 'image_list' in form_data"
+          label="选择图片"
+          prop="image_list"
+          :rules="{
+            message: '请选择图片',
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择图片"
+            v-model="form_data.image_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('audio_list') || 'audio_list' in form_data"
+          label="选择语音文件"
+          prop="audio_list"
+          :rules="{
+            message: '请选择语音文件',
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择语音文件"
+            v-model="form_data.audio_list"
+          />
+        </el-form-item>
+        <div v-for="(field, index) in form_data.api_input_field_list" :key="'api-input-' + index">
+          <el-form-item
+            :label="field.variable"
+            :prop="'api_input_field_list.' + index + '.value'"
+            :rules="[
+              { required: field.is_required, message: `请输入${field.variable}`, trigger: 'blur' }
+            ]"
+          >
+            <NodeCascader
+              ref="nodeCascaderRef"
+              :nodeModel="nodeModel"
+              class="w-full"
+              placeholder="请选择检索问题"
+              v-model="form_data.api_input_field_list[index].value"
+            />
+          </el-form-item>
+        </div>
+
+        <div v-for="(field, index) in form_data.user_input_field_list" :key="'user-input-' + index">
+          <el-form-item
+            :label="field.label"
+            :prop="'user_input_field_list.' + index + '.value'"
+            :rules="[
+              { required: field.required, message: `请输入${field.label}`, trigger: 'blur' }
+            ]"
+          >
+            <NodeCascader
+              ref="nodeCascaderRef"
+              :nodeModel="nodeModel"
+              class="w-full"
+              placeholder="请选择检索问题"
+              v-model="form_data.user_input_field_list[index].value"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import { set, groupBy, create } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { ref, computed, onMounted, onActivated } from 'vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+
+const form = {
+  question_reference_address: ['start-node', 'question'],
+  api_input_field_list: [],
+  user_input_field_list: [],
+  document_list: ['start-node', 'document'],
+  image_list: ['start-node', 'image'],
+  audio_list: ['start-node', 'audio']
+}
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const applicationNodeFormRef = ref<FormInstance>()
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function handleFileUpload(type: string, isEnabled: boolean) {
+  const listKey = `${type}_list`
+  if (isEnabled) {
+    if (!props.nodeModel.properties.node_data[listKey]) {
+      set(props.nodeModel.properties.node_data, listKey, [])
+    }
+  } else {
+    // eslint-disable-next-line vue/no-mutating-props
+    delete props.nodeModel.properties.node_data[listKey]
+  }
+}
+
+const update_field = () => {
+  if (!props.nodeModel.properties.node_data.application_id) {
+    set(props.nodeModel.properties, 'status', 500)
+    return
+  }
+  applicationApi
+    .getApplicationById(id, props.nodeModel.properties.node_data.application_id)
+    .then((ok) => {
+      const old_api_input_field_list = props.nodeModel.properties.node_data.api_input_field_list
+      const old_user_input_field_list = props.nodeModel.properties.node_data.user_input_field_list
+      if (isWorkFlow(ok.data.type)) {
+        const nodeData = ok.data.work_flow.nodes[0].properties.node_data
+        const new_api_input_field_list = ok.data.work_flow.nodes[0].properties.api_input_field_list
+        const new_user_input_field_list =
+          ok.data.work_flow.nodes[0].properties.user_input_field_list
+        const merge_api_input_field_list = new_api_input_field_list.map((item: any) => {
+          const find_field = old_api_input_field_list.find(
+            (old_item: any) => old_item.variable == item.variable
+          )
+          if (find_field) {
+            return {
+              ...item,
+              value: find_field.value,
+              label:
+                typeof item.label === 'object' && item.label != null ? item.label.label : item.label
+            }
+          } else {
+            return item
+          }
+        })
+        console.log(merge_api_input_field_list)
+        set(
+          props.nodeModel.properties.node_data,
+          'api_input_field_list',
+          merge_api_input_field_list
+        )
+        const merge_user_input_field_list = new_user_input_field_list.map((item: any) => {
+          const find_field = old_user_input_field_list.find(
+            (old_item: any) => old_item.field == item.field
+          )
+          if (find_field) {
+            return {
+              ...item,
+              value: find_field.value,
+              label:
+                typeof item.label === 'object' && item.label != null ? item.label.label : item.label
+            }
+          } else {
+            return item
+          }
+        })
+        set(
+          props.nodeModel.properties.node_data,
+          'user_input_field_list',
+          merge_user_input_field_list
+        )
+        const fileUploadSetting = nodeData.file_upload_setting
+        // 如果是true，说明有文件上传
+        if (fileUploadSetting) {
+          handleFileUpload('document', fileUploadSetting.document)
+          handleFileUpload('image', fileUploadSetting.image)
+          handleFileUpload('audio', fileUploadSetting.audio)
+        } else {
+          ;['document_list', 'image_list', 'audio_list'].forEach((list) => {
+            // eslint-disable-next-line vue/no-mutating-props
+            delete props.nodeModel.properties.node_data[list]
+          })
+        }
+        set(props.nodeModel.properties, 'status', ok.data.id ? 200 : 500)
+      }
+    })
+    .catch((err) => {
+      // set(props.nodeModel.properties, 'status', 500)
+    })
+}
+
+const props = defineProps<{ nodeModel: any }>()
+
+const validate = () => {
+  return applicationNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  update_field()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue b/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
new file mode 100644
index 0000000..474cae9
--- /dev/null
+++ b/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="参数" prop="variable">
+        <el-input
+          v-model="form.variable"
+          placeholder="请输入参数"
+          maxlength="64"
+          show-word-limit
+          @blur="form.variable = form.variable.trim()"
+        />
+      </el-form-item>
+
+      <el-form-item label="是否必填" @click.prevent>
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+      <el-form-item
+        label="默认值"
+        prop="default_value"
+        :rules="{
+          required: form.is_required,
+          message: '请输入默认值',
+          trigger: 'blur'
+        }"
+      >
+        <el-input
+          v-model="form.default_value"
+          placeholder="请输入默认值"
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? '保存' : '添加' }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  variable: '',
+  type: 'input',
+  is_required: true,
+  assignment_method: 'api_input',
+  optionList: [''],
+  default_value: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+  variable: [
+    { required: true, message: '请输入参数', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母数字和下划线', trigger: 'blur' }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      variable: '',
+      type: 'input',
+      is_required: true,
+      assignment_method: 'api_input',
+      optionList: [''],
+      default_value: ''
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
new file mode 100644
index 0000000..f67642f
--- /dev/null
+++ b/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="lighter">{{ '接口传参' }}</h5>
+    <el-button link type="primary" @click="openAddDialog()">
+      <el-icon class="mr-4">
+        <Plus />
+      </el-icon>
+      添加
+    </el-button>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.api_input_field_list"
+    class="mb-16"
+  >
+    <el-table-column prop="variable" label="参数" />
+    <el-table-column prop="default_value" label="默认值" />
+    <el-table-column label="必填">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.is_required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" width="80">
+      <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="修改" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <ApiFieldFormDialog ref="ApiFieldFormDialogRef" @refresh="refreshFieldList" />
+
+</template>
+
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const currentIndex = ref(null)
+const ApiFieldFormDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+  ApiFieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+
+function refreshFieldList(data: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.user_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].field === data.variable) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  if (currentIndex.value !== null) {
+    inputFieldList.value.splice(currentIndex.value, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  currentIndex.value = null
+  ApiFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.api_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'api_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.api_input_field_list)
+  }
+  set(props.nodeModel.properties, 'api_input_field_list', inputFieldList)
+})
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
new file mode 100644
index 0000000..9b6fafc
--- /dev/null
+++ b/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    title="文件上传设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+    width="600"
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :model="form_data"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="单次上传最多文件数">
+        <el-slider
+          v-model="form_data.maxFiles"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="10"
+        />
+      </el-form-item>
+      <el-form-item label="每个文件最大（MB）">
+        <el-slider
+          v-model="form_data.fileLimit"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="100"
+        />
+      </el-form-item>
+      <el-form-item label="上传的文件类型">
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.document ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.document = !form_data.document"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">文档（TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF）</p>
+                <el-text class="color-secondary">需要使用“文档内容提取”节点解析文档内容</el-text>
+              </div>
+            </div>
+            <el-checkbox
+              v-model="form_data.document"
+              @change="form_data.document = !form_data.document"
+            />
+          </div>
+        </el-card>
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.image ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.image = !form_data.image"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">图片（JPG、JPEG、PNG、GIF）</p>
+                <el-text class="color-secondary">需要使用“图片理解”节点解析图片内容</el-text>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.image" @change="form_data.image = !form_data.image" />
+          </div>
+        </el-card>
+
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.audio ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.audio = !form_data.audio"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-audio.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">音频（MP3、WAV、OGG、ACC）</p>
+                <el-text class="color-secondary">需要使用“语音转文本”节点解析音频内容</el-text>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.audio" @change="form_data.audio = !form_data.audio" />
+          </div>
+        </el-card>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> 取消 </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading"> 确定 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+const emit = defineEmits(['refresh'])
+const props = defineProps<{ nodeModel: any }>()
+
+const dialogVisible = ref(false)
+const loading = ref(false)
+const fieldFormRef = ref()
+const form_data = ref({
+  maxFiles: 3,
+  fileLimit: 50,
+  document: true,
+  image: false,
+  audio: false,
+  video: false
+})
+
+function open(data: any) {
+  dialogVisible.value = true
+  nextTick(() => {
+    form_data.value = { ...form_data.value, ...data }
+  })
+}
+
+function close() {
+  dialogVisible.value = false
+}
+
+async function submit() {
+  const formEl = fieldFormRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    emit('refresh', form_data.value)
+    props.nodeModel.graphModel.eventCenter.emit('refreshFileUploadConfig')
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue b/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
new file mode 100644
index 0000000..96636f0
--- /dev/null
+++ b/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
@@ -0,0 +1,159 @@
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="currentRow"
+      label-position="top"
+      require-asterisk-position="right"
+      :input_type_list="inputTypeList"
+      ref="DynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> 取消 </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ isEdit ? '保存' : '添加' }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cloneDeep } from 'lodash'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+const emit = defineEmits(['refresh'])
+
+const DynamicsFormConstructorRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const currentItem = ref<FormField | any>()
+const check_field = (field_list: Array<string>, obj: any) => {
+  return field_list.every((field) => _.get(obj, field, undefined) !== undefined)
+}
+const currentRow = computed(() => {
+  if (currentItem.value) {
+    const row = currentItem.value
+    switch (row.type) {
+      case 'input':
+        if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || { maxlength: 20, minlength: 0 },
+          field: row.field || row.variable,
+          input_type: 'TextInput',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required
+        }
+      case 'select':
+        if (
+          check_field(
+            ['field', 'input_type', 'label', 'required', 'option_list'],
+            currentItem.value
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || {},
+          field: row.field || row.variable,
+          input_type: 'SingleSelect',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          option_list: row.option_list ? row.option_list: row.optionList.map((o: any) => {
+            return { key: o, value: o }
+          })
+        }
+
+      case 'date':
+        if (
+          check_field(
+            [
+              'field',
+              'input_type',
+              'label',
+              'required',
+              'attrs.format',
+              'attrs.value-format',
+              'attrs.type'
+            ],
+            currentItem.value
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          field: row.field || row.variable,
+          input_type: 'DatePicker',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          attrs: {
+            format: 'YYYY-MM-DD HH:mm:ss',
+            'value-format': 'YYYY-MM-DD HH:mm:ss',
+            type: 'datetime'
+          }
+        }
+      default:
+        return currentItem.value
+    }
+  } else {
+    return { input_type: 'TextInput', required: false, attrs: { maxlength: 20, minlength: 0 } }
+  }
+})
+const currentIndex = ref(null)
+const inputTypeList = ref([
+  { label: '文本框', value: 'TextInputConstructor' },
+  { label: '单选框', value: 'SingleSelectConstructor' },
+  { label: '多选框', value: 'MultiSelectConstructor' },
+  { label: '选项卡', value: 'RadioCardConstructor' },
+  { label: '日期', value: 'DatePickerConstructor' }
+])
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any, index: any) => {
+  dialogVisible.value = true
+
+  if (row) {
+    isEdit.value = true
+    currentItem.value = cloneDeep(row)
+    currentIndex.value = index
+  } else {
+    currentItem.value = null
+  }
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = null
+  currentItem.value = null as any
+}
+
+const submit = async () => {
+  const formEl = DynamicsFormConstructorRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    emit('refresh', formEl?.getData(), currentIndex.value)
+    isEdit.value = false
+    currentItem.value = null as any
+    currentIndex.value = null
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
new file mode 100644
index 0000000..b211376
--- /dev/null
+++ b/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="lighter">{{ '用户输入' }}</h5>
+    <el-button link type="primary" @click="openAddDialog()">
+      <el-icon class="mr-4">
+        <Plus />
+      </el-icon>
+      添加
+    </el-button>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.user_input_field_list"
+    class="mb-16"
+  >
+    <el-table-column prop="field" label="参数">
+      <template #default="{ row }">
+        <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column prop="label" label="显示名称">
+      <template #default="{ row }">
+        <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
+          <span :title="row.label.label" class="ellipsis-1">
+            {{ row.label.label }}
+          </span>
+        </span>
+        <span v-else>
+          <span :title="row.label" class="ellipsis-1">
+            {{ row.label }}
+          </span></span
+        >
+      </template>
+    </el-table-column>
+    <el-table-column label="组件类型">
+      <template #default="{ row }">
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">文本框</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">滑块</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">开关</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'"
+          >单选框</el-tag
+        >
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">多选框</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">选项卡</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">日期</el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column prop="default_value" label="默认值">
+      <template #default="{ row }">
+        <span :title="row.default_value" class="ellipsis-1">{{ getDefaultValue(row) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="必填">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" width="80">
+      <template #default="{ row, $index }">
+        <span class="mr-4">
+          <el-tooltip effect="dark" content="修改" placement="top">
+            <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import UserFieldFormDialog from './UserFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const UserFieldFormDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+
+function openAddDialog(data?: any, index?: any) {
+  UserFieldFormDialogRef.value.open(data, index)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+function refreshFieldList(data: any, index: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].field === data.field && index !== i) {
+      MsgError('参数已存在: ' + data.field)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.api_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].variable === data.field) {
+      MsgError('参数已存在: ' + data.field)
+      return
+    }
+  }
+  if (index !== null) {
+    inputFieldList.value.splice(index, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  UserFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+const getDefaultValue = (row: any) => {
+  if (row.default_value) {
+    const default_value = row.option_list
+      ?.filter((v: any) => row.default_value.indexOf(v.value) > -1)
+      .map((v: any) => v.label)
+      .join(',')
+    if (default_value) {
+      return default_value
+    }
+    return row.default_value
+  }
+  if (row.default_value !== undefined) {
+    return row.default_value
+  }
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.user_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'user_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.user_input_field_list)
+  }
+  // 兼容旧数据
+  inputFieldList.value.forEach((item, index) => {
+    item.label = item.label || item.name
+    item.field = item.field || item.variable
+    item.required = item.required || item.is_required
+    switch (item.type) {
+      case 'input':
+        item.input_type = 'TextInput'
+        break
+      case 'select':
+        item.input_type = 'SingleSelect'
+        break
+      case 'date':
+        item.input_type = 'DatePicker'
+        break
+    }
+  })
+  set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/nodes/base-node/index.ts b/src/workflow/nodes/base-node/index.ts
new file mode 100644
index 0000000..69ede8e
--- /dev/null
+++ b/src/workflow/nodes/base-node/index.ts
@@ -0,0 +1,22 @@
+import BaseNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class BaseNode extends AppNode {
+  constructor(props: any) {
+    super(props, BaseNodeVue)
+  }
+}
+
+class BaseModel extends AppNodeModel {
+  constructor(data: any, graphModel: any) {
+    super(data, graphModel)
+  }
+  get_width() {
+    return 600
+  }
+}
+export default {
+  type: 'base-node',
+  model: BaseModel,
+  view: BaseNode
+}
diff --git a/src/workflow/nodes/base-node/index.vue b/src/workflow/nodes/base-node/index.vue
new file mode 100644
index 0000000..0ddaa67
--- /dev/null
+++ b/src/workflow/nodes/base-node/index.vue
@@ -0,0 +1,440 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-form
+      @submit.prevent
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      class="mb-24"
+      label-width="auto"
+      ref="baseNodeFormRef"
+    >
+      <el-form-item
+        label="应用名称"
+        prop="name"
+        :rules="{
+          message: '应用名称不能为空',
+          trigger: 'blur',
+          required: true
+        }"
+      >
+        <el-input
+          v-model="form_data.name"
+          maxlength="64"
+          placeholder="请输入应用名称"
+          show-word-limit
+          @blur="form_data.name = form_data.name?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="应用描述">
+        <el-input
+          v-model="form_data.desc"
+          placeholder="请输入应用描述"
+          :rows="3"
+          type="textarea"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="开场白">
+        <MdEditorMagnify
+          @wheel="wheel"
+          title="开场白"
+          v-model="form_data.prologue"
+          style="height: 150px"
+          @submitDialog="submitDialog"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <div class="flex align-center">
+              <span class="mr-4">文件上传</span>
+              <el-tooltip
+                effect="dark"
+                content="开启后，问答页面会显示上传文件的按钮。"
+                placement="right"
+              >
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+            <div>
+              <el-button
+                v-if="form_data.file_upload_enable"
+                type="primary"
+                link
+                @click="openFileUploadSettingDialog"
+                class="mr-4"
+              >
+                <el-icon class="mr-4">
+                  <Setting />
+                </el-icon>
+              </el-button>
+              <el-switch
+                size="small"
+                v-model="form_data.file_upload_enable"
+                @change="switchFileUpload"
+              />
+            </div>
+          </div>
+        </template>
+      </el-form-item>
+      <UserInputFieldTable ref="UserInputFieldTableFef" :node-model="nodeModel" />
+      <ApiInputFieldTable ref="ApiInputFieldTableFef" :node-model="nodeModel" />
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <div class="flex align-center">
+              <span class="mr-4">语音输入</span>
+              <!-- <el-tooltip
+                effect="dark"
+                content="开启后，需要设定语音转文本模型，语音输入完成后会转化为文字直接发送提问"
+                placement="right"
+              >
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip> -->
+            </div>
+            <el-switch
+              size="small"
+              v-model="form_data.stt_model_enable"
+              @change="sttModelEnableChange"
+            />
+          </div>
+        </template>
+
+        <el-select
+          v-show="form_data.stt_model_enable"
+          v-model="form_data.stt_model_id"
+          class="w-full"
+          @wheel="wheel"
+          popper-class="select-model"
+          placeholder="请选择语音识别模型"
+        >
+          <el-option-group
+            v-for="(value, label) in sttModelOptions"
+            :key="value"
+            :label="relatedObject(providerOptions, label, 'provider')?.name"
+          >
+            <el-option
+              v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              class="flex-between"
+            >
+              <div class="flex align-center">
+                <span
+                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                  class="model-icon mr-8"
+                ></span>
+                <span>{{ item.name }}</span>
+                <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                  >公用
+                </el-tag>
+              </div>
+              <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
+                <Check />
+              </el-icon>
+            </el-option>
+            <!-- 不可用 -->
+            <el-option
+              v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              class="flex-between"
+              disabled
+            >
+              <div class="flex">
+                <span
+                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                  class="model-icon mr-8"
+                ></span>
+                <span>{{ item.name }}</span>
+                <span class="danger">{{
+                  $t('views.application.applicationForm.form.aiModel.unavailable')
+                }}</span>
+              </div>
+              <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
+                <Check />
+              </el-icon>
+            </el-option>
+          </el-option-group>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <span class="mr-4">语音播放</span>
+            <div>
+              <el-button
+                v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+                type="primary"
+                link
+                @click="openTTSParamSettingDialog"
+                :disabled="!form_data.tts_model_id"
+                class="mr-4"
+              >
+                <el-icon class="mr-4">
+                  <Setting />
+                </el-icon>
+              </el-button>
+              <el-switch
+                size="small"
+                v-model="form_data.tts_model_enable"
+                @change="ttsModelEnableChange"
+              />
+            </div>
+          </div>
+        </template>
+        <el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
+          <el-radio label="浏览器播放(免费)" value="BROWSER" />
+          <el-radio label="TTS模型" value="TTS" />
+        </el-radio-group>
+        <el-select
+          v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+          v-model="form_data.tts_model_id"
+          class="w-full"
+          @wheel="wheel"
+          popper-class="select-model"
+          @change="ttsModelChange()"
+          placeholder="请选择语音合成模型"
+          :teleported="false"
+        >
+          <el-option-group
+            v-for="(value, label) in ttsModelOptions"
+            :key="value"
+            :label="relatedObject(providerOptions, label, 'provider')?.name"
+          >
+            <el-option
+              v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              class="flex-between"
+            >
+              <div class="flex align-center">
+                <span
+                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                  class="model-icon mr-8"
+                ></span>
+                <span>{{ item.name }}</span>
+                <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                  >公用
+                </el-tag>
+              </div>
+              <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
+                <Check />
+              </el-icon>
+            </el-option>
+            <!-- 不可用 -->
+            <el-option
+              v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              class="flex-between"
+              disabled
+            >
+              <div class="flex">
+                <span
+                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                  class="model-icon mr-8"
+                ></span>
+                <span>{{ item.name }}</span>
+                <span class="danger">{{
+                  $t('views.application.applicationForm.form.aiModel.unavailable')
+                }}</span>
+              </div>
+              <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
+                <Check />
+              </el-icon>
+            </el-option>
+          </el-option-group>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+    <FileUploadSettingDialog
+      ref="FileUploadSettingDialogRef"
+      :node-model="nodeModel"
+      @refresh="refreshFileUploadForm"
+    />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { app } from '@/main'
+import { groupBy, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { relatedObject } from '@/utils/utils'
+import useStore from '@/stores'
+import applicationApi from '@/api/application'
+import type { Provider } from '@/api/type/model'
+import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
+import ApiInputFieldTable from './component/ApiInputFieldTable.vue'
+import UserInputFieldTable from './component/UserInputFieldTable.vue'
+import FileUploadSettingDialog from '@/workflow/nodes/base-node/component/FileUploadSettingDialog.vue'
+
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+
+const sttModelOptions = ref<any>(null)
+const ttsModelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const UserInputFieldTableFef = ref()
+const ApiInputFieldTableFef = ref()
+const FileUploadSettingDialogRef = ref<InstanceType<typeof FileUploadSettingDialog>>()
+
+const form = {
+  name: '',
+  desc: '',
+  prologue: t('views.application.prompt.defaultPrologue')
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prologue', val)
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const baseNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  if (
+    form_data.value.tts_model_enable &&
+    !form_data.value.tts_model_id &&
+    form_data.value.tts_type === 'TTS'
+  ) {
+    return Promise.reject({ node: props.nodeModel, errMessage: '请选择语音播放模型' })
+  }
+  if (form_data.value.stt_model_enable && !form_data.value.stt_model_id) {
+    return Promise.reject({ node: props.nodeModel, errMessage: '请选择语音输入模型' })
+  }
+  return baseNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+function getSTTModel() {
+  applicationApi.getApplicationSTTModel(id).then((res: any) => {
+    sttModelOptions.value = groupBy(res?.data, 'provider')
+  })
+}
+
+function getTTSModel() {
+  applicationApi.getApplicationTTSModel(id).then((res: any) => {
+    ttsModelOptions.value = groupBy(res?.data, 'provider')
+  })
+}
+
+function ttsModelChange() {
+  if (form_data.value.tts_model_id) {
+    TTSModeParamSettingDialogRef.value?.reset_default(form_data.value.tts_model_id, id)
+  } else {
+    refreshTTSForm({})
+  }
+}
+
+function ttsModelEnableChange() {
+  if (!form_data.value.tts_model_enable) {
+    form_data.value.tts_model_id = ''
+    form_data.value.tts_type = 'BROWSER'
+  }
+}
+
+function sttModelEnableChange() {
+  if (!form_data.value.stt_model_enable) {
+    form_data.value.stt_model_id = ''
+  }
+}
+
+const openTTSParamSettingDialog = () => {
+  const model_id = form_data.value.tts_model_id
+  if (!model_id) {
+    MsgSuccess(t('请选择语音播放模型'))
+    return
+  }
+  TTSModeParamSettingDialogRef.value?.open(model_id, id, form_data.value.tts_model_params_setting)
+}
+
+const refreshTTSForm = (data: any) => {
+  form_data.value.tts_model_params_setting = data
+}
+
+const switchFileUpload = () => {
+  const default_upload_setting = {
+    maxFiles: 3,
+    fileLimit: 50,
+    document: true,
+    image: false,
+    audio: false,
+    video: false
+  }
+
+  if (form_data.value.file_upload_enable) {
+    form_data.value.file_upload_setting =
+      form_data.value.file_upload_setting || default_upload_setting
+  }
+  props.nodeModel.graphModel.eventCenter.emit('refreshFileUploadConfig')
+}
+const openFileUploadSettingDialog = () => {
+  FileUploadSettingDialogRef.value?.open(form_data.value.file_upload_setting)
+}
+
+const refreshFileUploadForm = (data: any) => {
+  form_data.value.file_upload_setting = data
+}
+
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+  if (!props.nodeModel.properties.node_data.tts_type) {
+    set(props.nodeModel.properties.node_data, 'tts_type', 'BROWSER')
+  }
+  getProvider()
+  getTTSModel()
+  getSTTModel()
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  display: block;
+}
+</style>
diff --git a/src/workflow/nodes/condition-node/index.ts b/src/workflow/nodes/condition-node/index.ts
new file mode 100644
index 0000000..275c63a
--- /dev/null
+++ b/src/workflow/nodes/condition-node/index.ts
@@ -0,0 +1,68 @@
+import ConditioNodeVue from './index.vue'
+import { cloneDeep, set } from 'lodash'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ConditioNode extends AppNode {
+  constructor(props: any) {
+    super(props, ConditioNodeVue)
+  }
+}
+const get_up_index_height = (condition_list: Array<any>, index: number) => {
+  return condition_list
+    .filter((item, i) => i < index)
+    .map((item) => item.height + 8)
+    .reduce((x, y) => x + y, 0)
+}
+class ConditionModel extends AppNodeModel {
+  refreshBranch() {
+    // 更新节点连接边的path
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.outgoing.edges.forEach((edge: any) => {
+      edge.updatePathByAnchor()
+    })
+  }
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: { branch_condition_list }
+    } = this
+    if (this.height === undefined) {
+      this.height = 200
+    }
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
+    const anchors: any = []
+    anchors.push({
+      x: x - width / 2 + 10,
+      y: showNode ? y : y - 15,
+      id: `${id}_left`,
+      edgeAddable: false,
+      type: 'left'
+    })
+
+    if (branch_condition_list) {
+      for (let index = 0; index < branch_condition_list.length; index++) {
+        const element = branch_condition_list[index]
+        const h = get_up_index_height(branch_condition_list, index)
+        anchors.push({
+          x: x + width / 2 - 10,
+          y: showNode ? y - height / 2 + 75 + h + element.height / 2 : y - 15,
+          id: `${id}_${element.id}_right`,
+          type: 'right'
+        })
+      }
+    }
+
+    return anchors
+  }
+}
+export default {
+  type: 'condition-node',
+  model: ConditionModel,
+  view: ConditioNode
+}
diff --git a/src/workflow/nodes/condition-node/index.vue b/src/workflow/nodes/condition-node/index.vue
new file mode 100644
index 0000000..2a2346a
--- /dev/null
+++ b/src/workflow/nodes/condition-node/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-form
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      label-width="auto"
+      ref="ConditionNodeFormRef"
+      @submit.prevent
+    >
+      <template v-for="(item, index) in form_data.branch" :key="item.id">
+        <el-card
+          v-resize="(wh: any) => resizeCondition(wh, item, index)"
+          shadow="never"
+          class="card-never mb-8"
+          style="--el-card-padding: 12px"
+        >
+          <div class="flex-between lighter">
+            {{ item.type }}
+            <div class="info" v-if="item.conditions.length > 1">
+              <span>符合以下</span>
+              <el-select
+                :teleported="false"
+                v-model="item.condition"
+                size="small"
+                style="width: 60px; margin: 0 8px"
+              >
+                <el-option label="所有" value="and" />
+                <el-option label="任一" value="or" />
+              </el-select>
+              <span>条件</span>
+            </div>
+          </div>
+          <div v-if="index !== form_data.branch.length - 1" class="mt-8">
+            <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
+              <el-row :gutter="8">
+                <el-col :span="11">
+                  <el-form-item
+                    :prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
+                    :rules="{
+                      type: 'array',
+                      required: true,
+                      message: '请选择变量',
+                      trigger: 'change'
+                    }"
+                  >
+                    <NodeCascader
+                      ref="nodeCascaderRef"
+                      :nodeModel="nodeModel"
+                      class="w-full"
+                      placeholder="请选择变量"
+                      v-model="condition.field"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    :prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
+                    :rules="{
+                      required: true,
+                      message: '请选择条件',
+                      trigger: 'change'
+                    }"
+                  >
+                    <el-select
+                      @wheel="wheel"
+                      :teleported="false"
+                      v-model="condition.compare"
+                      placeholder="请选择条件"
+                      clearable
+                      @change="changeCondition($event, index, cIndex)"
+                    >
+                      <template v-for="(item, index) in compareList" :key="index">
+                        <el-option :label="item.label" :value="item.value" />
+                      </template>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item
+                    v-if="condition.compare !== 'is_null' && condition.compare !== 'is_not_null'"
+                    :prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
+                    :rules="{
+                      required: true,
+                      message: '请输入值',
+                      trigger: 'blur'
+                    }"
+                  >
+                    <el-input v-model="condition.value" placeholder="请输入值" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1">
+                  <el-button
+                    :disabled="index === 0 && cIndex === 0"
+                    link
+                    type="info"
+                    class="mt-4"
+                    @click="deleteCondition(index, cIndex)"
+                  >
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </div>
+
+          <el-button
+            link
+            type="primary"
+            @click="addCondition(index)"
+            v-if="index !== form_data.branch.length - 1"
+          >
+            <el-icon class="mr-4"><Plus /></el-icon> 添加条件
+          </el-button>
+        </el-card>
+      </template>
+      <el-button link type="primary" @click="addBranch">
+        <el-icon class="mr-4"><Plus /></el-icon> 添加分支
+      </el-button>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { randomId } from '@/utils/utils'
+import { compareList } from '@/workflow/common/data'
+
+const props = defineProps<{ nodeModel: any }>()
+const form = {
+  branch: [
+    {
+      conditions: [
+        {
+          field: [],
+          compare: '',
+          value: ''
+        }
+      ],
+      id: randomId(),
+      type: 'IF',
+      condition: 'and'
+    },
+    {
+      conditions: [],
+      id: randomId(),
+      type: 'ELSE',
+      condition: 'and'
+    }
+  ]
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const resizeCondition = (wh: any, row: any, index: number) => {
+  const branch_condition_list = cloneDeep(
+    props.nodeModel.properties.branch_condition_list
+      ? props.nodeModel.properties.branch_condition_list
+      : []
+  )
+  const new_branch_condition_list = branch_condition_list.map((item: any) => {
+    if (item.id === row.id) {
+      return { ...item, height: wh.height, index: index }
+    }
+    return item
+  })
+  set(props.nodeModel.properties, 'branch_condition_list', new_branch_condition_list)
+  refreshBranchAnchor(props.nodeModel.properties.node_data.branch, true)
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+      refreshBranchAnchor(form.branch, true)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const ConditionNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  const v_list = [
+    ConditionNodeFormRef.value?.validate(),
+    ...nodeCascaderRef.value.map((item: any) => item.validate())
+  ]
+  return Promise.all(v_list).catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function addBranch() {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  const obj = {
+    conditions: [
+      {
+        field: [],
+        compare: '',
+        value: ''
+      }
+    ],
+    type: 'ELSE IF ' + (list.length - 1),
+    id: randomId(),
+    condition: 'and'
+  }
+  list.splice(list.length - 1, 0, obj)
+  refreshBranchAnchor(list, true)
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+function refreshBranchAnchor(list: Array<any>, is_add: boolean) {
+  const branch_condition_list = cloneDeep(
+    props.nodeModel.properties.branch_condition_list
+      ? props.nodeModel.properties.branch_condition_list
+      : []
+  )
+  const new_branch_condition_list = list
+    .map((item, index) => {
+      const find = branch_condition_list.find((b: any) => b.id === item.id)
+      if (find) {
+        return { index: index, height: find.height, id: item.id }
+      } else {
+        if (is_add) {
+          return { index: index, height: 12, id: item.id }
+        }
+      }
+    })
+    .filter((item) => item)
+
+  set(props.nodeModel.properties, 'branch_condition_list', new_branch_condition_list)
+  props.nodeModel.refreshBranch()
+}
+
+function addCondition(index: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].push({
+    field: [],
+    compare: '',
+    value: ''
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function deleteCondition(index: number, cIndex: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].splice(cIndex, 1)
+  if (list[index]['conditions'].length === 0) {
+    const delete_edge = list.splice(index, 1)
+    const delete_target_anchor_id_list = delete_edge.map(
+      (item: any) => props.nodeModel.id + '_' + item.id + '_right'
+    )
+
+    props.nodeModel.graphModel.eventCenter.emit(
+      'delete_edge',
+      props.nodeModel.outgoing.edges
+        .filter((item: any) => delete_target_anchor_id_list.includes(item.sourceAnchorId))
+        .map((item: any) => item.id)
+    )
+    refreshBranchAnchor(list, false)
+
+    list.forEach((item: any, index: number) => {
+      if (item.type === 'ELSE IF ' + (index + 1)) {
+        item.type = 'ELSE IF ' + index
+      }
+    })
+  }
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function changeCondition(val: string, index: number, cIndex: number) {
+  if (val === 'is_null' || val === 'is_not_null') {
+    const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+    list[index]['conditions'][cIndex].value = 1
+    set(props.nodeModel.properties.node_data, 'branch', list)
+  }
+}
+
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/document-extract-node/index.ts b/src/workflow/nodes/document-extract-node/index.ts
new file mode 100644
index 0000000..9a7072d
--- /dev/null
+++ b/src/workflow/nodes/document-extract-node/index.ts
@@ -0,0 +1,12 @@
+import DocumentExtractNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, DocumentExtractNodeVue)
+  }
+}
+export default {
+  type: 'document-extract-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/src/workflow/nodes/document-extract-node/index.vue b/src/workflow/nodes/document-extract-node/index.vue
new file mode 100644
index 0000000..e9fa5e3
--- /dev/null
+++ b/src/workflow/nodes/document-extract-node/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="DatasetNodeFormRef"
+      >
+        <el-form-item label="选择文档" :rules="{
+            type: 'array',
+            required: true,
+            message: '请选择文件',
+            trigger: 'change'
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择文档"
+            v-model="form_data.document_list"
+          />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed } from 'vue'
+import { set } from 'lodash'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const form = {
+  document_list: ["start-node", "document"]
+}
+
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/workflow/nodes/form-node/index.ts b/src/workflow/nodes/form-node/index.ts
new file mode 100644
index 0000000..b7c2dbe
--- /dev/null
+++ b/src/workflow/nodes/form-node/index.ts
@@ -0,0 +1,12 @@
+import FormNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FormNode extends AppNode {
+  constructor(props: any) {
+    super(props, FormNodeVue)
+  }
+}
+export default {
+  type: 'form-node',
+  model: AppNodeModel,
+  view: FormNode
+}
diff --git a/src/workflow/nodes/form-node/index.vue b/src/workflow/nodes/form-node/index.vue
new file mode 100644
index 0000000..7ee19f1
--- /dev/null
+++ b/src/workflow/nodes/form-node/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="formNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="表单输出内容"
+          prop="form_content_format"
+          :rules="{
+            required: true,
+            message: '请表单输出内容',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>表单输出内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  设置执行该节点输出的内容，{{ '{ form }' }}为表单的占位符。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            title="表单输出内容"
+            v-model="form_data.form_content_format"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item label="表单配置" @click.prevent>
+          <template #label>
+            <div class="flex-between">
+              <h5 class="lighter">{{ '表单配置' }}</h5>
+              <el-button link type="primary" @click="openAddFormCollect()">
+                <el-icon class="mr-4">
+                  <Plus />
+                </el-icon>
+                添加
+              </el-button>
+            </div></template
+          >
+
+          <el-table
+            class="border"
+            v-if="form_data.form_field_list.length > 0"
+            :data="form_data.form_field_list"
+          >
+            <el-table-column prop="field" label="参数">
+              <template #default="{ row }">
+                <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="label" label="显示名称">
+              <template #default="{ row }">
+                <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
+                  <span :title="row.label.label" class="ellipsis-1">
+                    {{ row.label.label }}
+                  </span>
+                </span>
+                <span v-else>
+                  <span :title="row.label" class="ellipsis-1">
+                    {{ row.label }}
+                  </span></span
+                >
+              </template>
+            </el-table-column>
+
+            <el-table-column label="组件类型" width="110px">
+              <template #default="{ row }">
+                <el-tag type="info" class="info-tag">{{
+                  input_type_list.find((item) => item.value === row.input_type)?.label
+                }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="default_value" label="默认值">
+              <template #default="{ row }">
+                <span :title="row.default_value" class="ellipsis-1">{{
+                  getDefaultValue(row)
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="必填">
+              <template #default="{ row }">
+                <div @click.stop>
+                  <el-switch disabled size="small" v-model="row.required" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="left" width="80">
+              <template #default="{ row, $index }">
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="修改" placement="top">
+                    <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
+                      <el-icon><EditPen /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <el-tooltip effect="dark" content="删除" placement="top">
+                  <el-button type="primary" text @click="deleteField(row)">
+                    <el-icon>
+                      <Delete />
+                    </el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AddFormCollect ref="addFormCollectRef" :addFormField="addFormField"></AddFormCollect>
+    <EditFormCollect ref="editFormCollectRef" :editFormField="editFormField"></EditFormCollect>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import AddFormCollect from '@/workflow/common/AddFormCollect.vue'
+import EditFormCollect from '@/workflow/common/EditFormCollect.vue'
+import { type FormInstance } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { input_type_list } from '@/components/dynamics-form/constructor/data'
+import { MsgError } from '@/utils/message'
+import { set, cloneDeep } from 'lodash'
+const props = defineProps<{ nodeModel: any }>()
+const formNodeFormRef = ref<FormInstance>()
+const editFormField = (form_field_data: any, field_index: number) => {
+  const _value = form_data.value.form_field_list.map((item: any, index: number) => {
+    if (field_index === index) {
+      return cloneDeep(form_field_data)
+    }
+    return cloneDeep(item)
+  })
+  form_data.value.form_field_list = _value
+  sync_form_field_list()
+}
+const addFormField = (form_field_data: any) => {
+  if (form_data.value.form_field_list.some((field: any) => field.field === form_field_data.field)) {
+    MsgError('参数已存在:' + form_field_data.field)
+    return
+  }
+  form_data.value.form_field_list = cloneDeep([...form_data.value.form_field_list, form_field_data])
+  sync_form_field_list()
+}
+const sync_form_field_list = () => {
+  const fields = [
+    {
+      label: '表单全部内容',
+      value: 'form_data'
+    },
+    ...form_data.value.form_field_list.map((item: any) => ({
+      value: item.field,
+      label: typeof item.label == 'string' ? item.label : item.label.label
+    }))
+  ]
+  set(props.nodeModel.properties.config, 'fields', fields)
+}
+const addFormCollectRef = ref<InstanceType<typeof AddFormCollect>>()
+const editFormCollectRef = ref<InstanceType<typeof EditFormCollect>>()
+const openAddFormCollect = () => {
+  addFormCollectRef.value?.open()
+}
+const openEditFormCollect = (form_field_data: any, index: number) => {
+  editFormCollectRef.value?.open(cloneDeep(form_field_data), index)
+}
+const deleteField = (form_field_data: any) => {
+  form_data.value.form_field_list = form_data.value.form_field_list.filter(
+    (field: any) => field.field !== form_field_data.field
+  )
+  sync_form_field_list()
+}
+const form = ref<any>({
+  is_result: true,
+  form_content_format: `你好，请先填写下面表单内容：
+{{form}}
+填写后请点击【提交】按钮进行提交。`,
+  form_field_list: []
+})
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form.value)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const getDefaultValue = (row: any) => {
+  if (row.default_value) {
+    const default_value = row.option_list
+      ?.filter((v: any) => row.default_value.indexOf(v.value) > -1)
+      .map((v: any) => v.label)
+      .join(',')
+    if (default_value) {
+      return default_value
+    }
+    return row.default_value
+  }
+  if (row.default_value !== undefined) {
+    return row.default_value
+  }
+}
+
+const validate = () => {
+  return formNodeFormRef.value?.validate()
+}
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'form_content_format', val)
+}
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+  sync_form_field_list()
+  props.nodeModel.graphModel.eventCenter.emit('refresh_incoming_node_field')
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/function-lib-node/index.ts b/src/workflow/nodes/function-lib-node/index.ts
new file mode 100644
index 0000000..475818c
--- /dev/null
+++ b/src/workflow/nodes/function-lib-node/index.ts
@@ -0,0 +1,12 @@
+import FunctionLibNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FunctionLibNode extends AppNode {
+  constructor(props: any) {
+    super(props, FunctionLibNodeVue)
+  }
+}
+export default {
+  type: 'function-lib-node',
+  model: AppNodeModel,
+  view: FunctionLibNode
+}
diff --git a/src/workflow/nodes/function-lib-node/index.vue b/src/workflow/nodes/function-lib-node/index.vue
new file mode 100644
index 0000000..05a9128
--- /dev/null
+++ b/src/workflow/nodes/function-lib-node/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-16">节点设置</h5>
+    <h5 class="lighter mb-8">输入参数</h5>
+    <el-form
+      @submit.prevent
+      ref="FunctionNodeFormRef"
+      :model="chat_data"
+      label-position="top"
+      require-asterisk-position="right"
+      hide-required-asterisk
+    >
+      <el-card shadow="never" class="card-never mb-16" style="--el-card-padding: 12px">
+        <div v-if="chat_data.input_field_list?.length > 0">
+          <template v-for="(item, index) in chat_data.input_field_list" :key="item.name">
+            <el-form-item
+              :label="item.name"
+              :prop="'input_field_list.' + index + '.value'"
+              :rules="{
+                required: item.is_required,
+                message: '请输入参数值',
+                trigger: 'blur'
+              }"
+            >
+              <template #label>
+                <div class="flex-between">
+                  <div class="flex">
+                    <span class="flex">
+                      <auto-tooltip :content="item.name" style="max-width: 130px">
+                        {{ item.name }}
+                      </auto-tooltip>
+                      <span class="danger" v-if="item.is_required">*</span></span
+                    >
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                </div>
+              </template>
+              <NodeCascader
+                v-if="item.source === 'reference'"
+                ref="nodeCascaderRef"
+                :nodeModel="nodeModel"
+                class="w-full"
+                placeholder="请选择参数"
+                v-model="item.value"
+              />
+              <el-input v-else v-model="item.value" placeholder="请输入参数值" />
+            </el-form-item>
+          </template>
+        </div>
+
+        <el-text type="info" v-else> 暂无数据 </el-text>
+      </el-card>
+      <el-form-item label="返回内容" @click.prevent>
+        <template #label>
+          <div class="flex align-center">
+            <div class="mr-4">
+              <span>返回内容<span class="danger">*</span></span>
+            </div>
+            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+              <template #content>
+                关闭后该节点的内容则不输出给用户。 如果你想让用户看到该节点的输出内容，请打开开关。
+              </template>
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch size="small" v-model="chat_data.is_result" />
+      </el-form-item>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+const props = defineProps<{ nodeModel: any }>()
+
+const nodeCascaderRef = ref()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+const form = {
+  input_field_list: [],
+  is_result: false
+}
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const FunctionNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  return FunctionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const update_field = () => {
+  if (!props.nodeModel.properties.node_data.function_lib_id) {
+    set(props.nodeModel.properties, 'status', 500)
+    return
+  }
+  applicationApi
+    .getFunctionLib(id, props.nodeModel.properties.node_data.function_lib_id)
+    .then((ok) => {
+      const old_input_field_list = props.nodeModel.properties.node_data.input_field_list
+      const merge_input_field_list = ok.data.input_field_list.map((item: any) => {
+        const find_field = old_input_field_list.find((old_item: any) => old_item.name == item.name)
+        if (find_field && find_field.source == item.source) {
+          return { ...item, value: JSON.parse(JSON.stringify(find_field.value)) }
+        }
+        return { ...item, value: item.source == 'reference' ? [] : '' }
+      })
+      set(props.nodeModel.properties.node_data, 'input_field_list', merge_input_field_list)
+      set(props.nodeModel.properties, 'status', ok.data.is_active ? 200 : 500)
+    })
+    .catch((err) => {
+      set(props.nodeModel.properties, 'status', 500)
+    })
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  update_field()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/function-node/index.ts b/src/workflow/nodes/function-node/index.ts
new file mode 100644
index 0000000..ab3f36e
--- /dev/null
+++ b/src/workflow/nodes/function-node/index.ts
@@ -0,0 +1,12 @@
+import FunctionNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FunctionLibCustomNode extends AppNode {
+  constructor(props: any) {
+    super(props, FunctionNodeVue)
+  }
+}
+export default {
+  type: 'function-node',
+  model: AppNodeModel,
+  view: FunctionLibCustomNode
+}
diff --git a/src/workflow/nodes/function-node/index.vue b/src/workflow/nodes/function-node/index.vue
new file mode 100644
index 0000000..1b24f11
--- /dev/null
+++ b/src/workflow/nodes/function-node/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-16">节点设置</h5>
+    <div class="flex-between">
+      <h5 class="lighter mb-8">输入参数</h5>
+      <el-button link type="primary" @click="openAddDialog()">
+        <el-icon class="mr-4"><Plus /></el-icon> 添加
+      </el-button>
+    </div>
+    <el-form
+      @submit.prevent
+      ref="FunctionNodeFormRef"
+      :model="chat_data"
+      label-position="top"
+      require-asterisk-position="right"
+      hide-required-asterisk
+    >
+      <el-card shadow="never" class="card-never mb-16" style="--el-card-padding: 12px">
+        <div v-if="chat_data.input_field_list?.length > 0">
+          <template v-for="(item, index) in chat_data.input_field_list" :key="index">
+            <el-form-item
+              :label="item.name"
+              :prop="'input_field_list.' + index + '.value'"
+              :rules="{
+                required: item.is_required,
+                message: '请输入参数值',
+                trigger: 'blur'
+              }"
+            >
+              <template #label>
+                <div class="flex-between">
+                  <div class="flex">
+                    <span class="flex">
+                      <auto-tooltip :content="item.name" style="max-width: 130px">
+                        {{ item.name }}
+                      </auto-tooltip>
+                      <span class="danger" v-if="item.is_required">*</span>
+                    </span>
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                  <div>
+                    <el-button text @click.stop="openAddDialog(item, index)">
+                      <el-icon><EditPen /></el-icon>
+                    </el-button>
+                    <el-button text @click="deleteField(index)" style="margin-left: 4px !important">
+                      <el-icon>
+                        <Delete />
+                      </el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+              <NodeCascader
+                v-if="item.source === 'reference'"
+                ref="nodeCascaderRef"
+                :nodeModel="nodeModel"
+                class="w-full"
+                placeholder="请选择参数"
+                v-model="item.value"
+                :width="100"
+              />
+              <el-input v-else v-model="item.value" placeholder="请输入参数值" />
+            </el-form-item>
+          </template>
+        </div>
+
+        <el-text type="info" v-else> 暂无数据 </el-text>
+      </el-card>
+
+      <h5 class="lighter mb-8">Python 代码</h5>
+      <div class="function-CodemirrorEditor mb-8" v-if="showEditor">
+        <CodemirrorEditor
+          v-model="chat_data.code"
+          @wheel="wheel"
+          style="height: 130px !important"
+        />
+        <div class="function-CodemirrorEditor__footer">
+          <el-button text type="info" @click="openCodemirrorDialog" class="magnify">
+            <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+          </el-button>
+        </div>
+      </div>
+
+      <el-form-item label="返回内容" @click.prevent>
+        <template #label>
+          <div class="flex align-center">
+            <div class="mr-4">
+              <span>返回内容<span class="danger">*</span></span>
+            </div>
+            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+              <template #content>
+                关闭后该节点的内容则不输出给用户。 如果你想让用户看到该节点的输出内容，请打开开关。
+              </template>
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch size="small" v-model="chat_data.is_result" />
+      </el-form-item>
+    </el-form>
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
+    <!-- Codemirror 弹出层 -->
+    <el-dialog v-model="dialogVisible" title="Python 代码" append-to-body fullscreen>
+      <CodemirrorEditor
+        v-model="cloneContent"
+        style="height: calc(100vh - 160px) !important; border: 1px solid #bbbfc4; border-radius: 4px"
+      />
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import FieldFormDialog from '@/views/function-lib/component/FieldFormDialog.vue'
+import { isLastNode } from '@/workflow/common/data'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const FieldFormDialogRef = ref()
+const nodeCascaderRef = ref()
+
+const form = {
+  code: '',
+  input_field_list: [],
+  is_result: false
+}
+
+const currentIndex = ref<any>(null)
+const showEditor = ref(false)
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const FunctionNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  return FunctionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+
+function openCodemirrorDialog() {
+  cloneContent.value = chat_data.value.code
+  dialogVisible.value = true
+}
+
+function submitDialog() {
+  set(props.nodeModel.properties.node_data, 'code', cloneContent.value)
+  dialogVisible.value = false
+}
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  FieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  const list: any = cloneDeep(props.nodeModel.properties.node_data.input_field_list)
+  list.splice(index, 1)
+  set(props.nodeModel.properties.node_data, 'input_field_list', list)
+}
+
+function refreshFieldList(data: any) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.input_field_list)
+  const obj = {
+    ...data,
+    value: data.source === 'reference' ? [] : ''
+  }
+  if (currentIndex.value !== null) {
+    list.splice(currentIndex.value, 1, obj)
+  } else {
+    list.push(obj)
+  }
+  set(props.nodeModel.properties.node_data, 'input_field_list', list)
+  currentIndex.value = null
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+  setTimeout(() => {
+    showEditor.value = true
+  }, 100)
+})
+</script>
+<style lang="scss">
+.function-CodemirrorEditor__footer {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+.function-CodemirrorEditor {
+  position: relative;
+}
+</style>
diff --git a/src/workflow/nodes/image-generate/index.ts b/src/workflow/nodes/image-generate/index.ts
new file mode 100644
index 0000000..5afc2e5
--- /dev/null
+++ b/src/workflow/nodes/image-generate/index.ts
@@ -0,0 +1,14 @@
+import ImageGenerateNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, ImageGenerateNodeVue)
+  }
+}
+
+export default {
+  type: 'image-generate-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/src/workflow/nodes/image-generate/index.vue b/src/workflow/nodes/image-generate/index.vue
new file mode 100644
index 0000000..4780010
--- /dev/null
+++ b/src/workflow/nodes/image-generate/index.vue
@@ -0,0 +1,330 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="图片生成模型"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: '请选择图片生成模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>图片生成模型<span class="danger">*</span></span>
+              </div>
+              <el-button
+                :disabled="!form_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                {{ $t('views.application.applicationForm.form.paramSetting') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            placeholder="请选择图片生成模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+
+
+        <el-form-item
+          label="提示词(正向)"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: '请输入提示词',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>提示词(正向)<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >正向提示词，用来描述生成图像中期望包含的元素和视觉特点
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="提示词(正向)"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item
+          label="提示词(负向)"
+          prop="prompt"
+          :rules="{
+            required: false,
+            message: '请输入提示词',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>提示词(负向)</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >反向提示词，用来描述不希望在画面中看到的内容，可以对画面进行限制。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="提示词(负向)"
+            v-model="form_data.negative_prompt"
+            placeholder="请描述不想生成的图片内容，比如：颜色、血腥内容"
+            style="height: 150px"
+            @submitDialog="submitNegativeDialog"
+          />
+        </el-form-item>
+        <!--
+        <el-form-item>
+          <template #label>
+            <div class="flex-between">
+              <div>历史聊天记录</div>
+              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
+                <el-option label="节点" value="NODE" />
+                <el-option label="工作流" value="WORKFLOW" />
+              </el-select>
+            </div>
+          </template>
+          <el-input-number
+            v-model="form_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        -->
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const validate = () => {
+  return aiChatNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const defaultPrompt = `{{开始.question}}`
+
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  negative_prompt: '',
+  dialogue_number: 0,
+  dialogue_type: 'NODE',
+  is_result: true,
+  temperature: null,
+  max_tokens: null,
+  image_list: ['start-node', 'image']
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationTTIModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const model_change = () => {
+    if (form_data.value.model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(form_data.value.model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+function submitNegativeDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'negative_prompt', val)
+}
+
+onMounted(() => {
+  getModel()
+  getProvider()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/nodes/image-understand/index.ts b/src/workflow/nodes/image-understand/index.ts
new file mode 100644
index 0000000..06695d3
--- /dev/null
+++ b/src/workflow/nodes/image-understand/index.ts
@@ -0,0 +1,14 @@
+import ImageUnderstandNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, ImageUnderstandNodeVue)
+  }
+}
+
+export default {
+  type: 'image-understand-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/src/workflow/nodes/image-understand/index.vue b/src/workflow/nodes/image-understand/index.vue
new file mode 100644
index 0000000..59b2017
--- /dev/null
+++ b/src/workflow/nodes/image-understand/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="图片理解模型"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: '请选择图片理解模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>图片理解模型<span class="danger">*</span></span>
+              </div>
+              <el-button
+                :disabled="!form_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                {{ $t('views.application.applicationForm.form.paramSetting') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            placeholder="请选择图片理解模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="角色设定">
+          <MdEditorMagnify
+            title="角色设定"
+            v-model="form_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            placeholder="角色设定"
+          />
+        </el-form-item>
+        <el-form-item
+          label="提示词"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: '请输入提示词',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>提示词<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头，可以使用变量。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="提示词"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item>
+          <template #label>
+            <div class="flex-between">
+              <div>历史聊天记录</div>
+              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
+                <el-option label="节点" value="NODE" />
+                <el-option label="工作流" value="WORKFLOW" />
+              </el-select>
+            </div>
+          </template>
+          <el-input-number
+            v-model="form_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          label="选择图片"
+          :rules="{
+            type: 'array',
+            required: true,
+            message: '请选择图片',
+            trigger: 'change'
+          }"
+        >
+          <template #label>选择图片<span class="danger">*</span></template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择图片"
+            v-model="form_data.image_list"
+          />
+        </el-form-item>
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+    return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const defaultPrompt = `{{开始.question}}`
+
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  dialogue_number: 0,
+  dialogue_type: 'NODE',
+  is_result: true,
+  temperature: null,
+  max_tokens: null,
+  image_list: ['start-node', 'image']
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationImageModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const model_change = (model_id?: string) => {}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+onMounted(() => {
+  getModel()
+  getProvider()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/nodes/question-node/index.ts b/src/workflow/nodes/question-node/index.ts
new file mode 100644
index 0000000..324c246
--- /dev/null
+++ b/src/workflow/nodes/question-node/index.ts
@@ -0,0 +1,12 @@
+import QuestionNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class QuestionNode extends AppNode {
+  constructor(props: any) {
+    super(props, QuestionNodeVue)
+  }
+}
+export default {
+  type: 'question-node',
+  model: AppNodeModel,
+  view: QuestionNode
+}
diff --git a/src/workflow/nodes/question-node/index.vue b/src/workflow/nodes/question-node/index.vue
new file mode 100644
index 0000000..adaee73
--- /dev/null
+++ b/src/workflow/nodes/question-node/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        class="mb-24"
+        label-width="auto"
+        ref="questionNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="AI 模型"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: '请选择 AI 模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <div>
+                <span>AI 模型<span class="danger">*</span></span>
+              </div>
+              <el-button
+                type="primary"
+                link
+                :disabled="!form_data.model_id"
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                {{ $t('views.application.applicationForm.form.paramSetting') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            placeholder="请选择 AI 模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id"
+                  ><Check
+                /></el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id"
+                  ><Check
+                /></el-icon>
+              </el-option>
+            </el-option-group>
+            <template #footer>
+              <div class="w-full text-left cursor" @click="openCreateModel()">
+                <el-button type="primary" link>
+                  <el-icon class="mr-4"><Plus /></el-icon>
+                  添加模型
+                </el-button>
+              </div>
+            </template>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色设定">
+          <MdEditorMagnify
+            title="角色设定"
+            v-model="form_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            placeholder="角色设定"
+          />
+        </el-form-item>
+        <el-form-item
+          label="提示词"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: '请输入提示词',
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>提示词<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头，可以使用变量。</template
+                >
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                <el-icon><EditPen /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="提示词"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item label="历史聊天记录">
+          <el-input-number
+            v-model="form_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 添加模版 -->
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set, groupBy } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import { isLastNode } from '@/workflow/common/data'
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const { model } = useStore()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const model_change = (model_id?: string) => {
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+// @ts-ignore
+const defaultPrompt = `根据上下文优化和完善用户问题：{{开始.question}}
+请输出一个优化后的问题。`
+const form = {
+  model_id: '',
+  system: '你是一个问题优化大师',
+  prompt: defaultPrompt,
+  dialogue_number: 1,
+  is_result: false
+}
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+const props = defineProps<{ nodeModel: any }>()
+
+const questionNodeFormRef = ref<FormInstance>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+
+const validate = () => {
+  return questionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+onMounted(() => {
+  getProvider()
+  getModel()
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/reply-node/index.ts b/src/workflow/nodes/reply-node/index.ts
new file mode 100644
index 0000000..e3bd9d9
--- /dev/null
+++ b/src/workflow/nodes/reply-node/index.ts
@@ -0,0 +1,12 @@
+import ReplyNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ReplyNode extends AppNode {
+  constructor(props: any) {
+    super(props, ReplyNodeVue)
+  }
+}
+export default {
+  type: 'reply-node',
+  model: AppNodeModel,
+  view: ReplyNode
+}
diff --git a/src/workflow/nodes/reply-node/index.vue b/src/workflow/nodes/reply-node/index.vue
new file mode 100644
index 0000000..77ce289
--- /dev/null
+++ b/src/workflow/nodes/reply-node/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="replyNodeFormRef"
+      >
+        <el-form-item label="回复内容">
+          <template #label>
+            <div class="flex-between">
+              <span>回复内容</span>
+              <el-select
+                :teleported="false"
+                v-model="form_data.reply_type"
+                size="small"
+                style="width: 85px"
+              >
+                <el-option label="引用变量" value="referencing" />
+                <el-option label="自定义" value="content" />
+              </el-select>
+            </div>
+          </template>
+
+          <MdEditorMagnify
+            v-if="form_data.reply_type === 'content'"
+            @wheel="wheel"
+            title="回复内容"
+            v-model="form_data.content"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+          <NodeCascader
+            v-else
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择检索问题"
+            v-model="form_data.fields"
+          />
+        </el-form-item>
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import { ref, computed, onMounted } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form = {
+  reply_type: 'content',
+  content: '',
+  fields: [],
+  is_result: false
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'content', val)
+}
+
+const replyNodeFormRef = ref()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    replyNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/reranker-node/ParamSettingDialog.vue b/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
new file mode 100644
index 0000000..f968ffd
--- /dev/null
+++ b/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('views.application.applicationForm.dialogues.paramSettings')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div>
+      <el-scrollbar always>
+        <div class="p-16">
+          <el-form label-position="top" ref="paramFormRef" :model="form">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item>
+                  <template #label>
+                    <div class="flex align-center">
+                      <span class="mr-4">Score 高于</span>
+                      <el-tooltip effect="dark" content="Score越高相关性越强。" placement="right">
+                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                  <el-input-number
+                    v-model="form.similarity"
+                    :min="0"
+                    :max="form.search_mode === 'blend' ? 2 : 1"
+                    :precision="3"
+                    :step="0.1"
+                    :value-on-clear="0"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="$t('views.application.applicationForm.dialogues.topReferences')"
+                >
+                  <el-input-number
+                    v-model="form.top_n"
+                    :min="1"
+                    :max="100"
+                    :value-on-clear="1"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-form-item :label="$t('views.application.applicationForm.dialogues.maxCharacters')">
+              <el-slider
+                v-model="form.max_paragraph_char_number"
+                show-input
+                :show-input-controls="false"
+                :min="500"
+                :max="100000"
+                class="custom-slider"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{
+          $t('views.application.applicationForm.buttons.cancel')
+        }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('views.application.applicationForm.buttons.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance, FormRules } from 'element-plus'
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref<FormInstance>()
+
+const form = ref<any>({
+  top_n: 3,
+  similarity: 0,
+  max_paragraph_char_number: 5000
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      top_n: 3,
+      similarity: 0,
+      max_paragraph_char_number: 5000
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value = { ...form.value, ...cloneDeep(data) }
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  paramFormRef?.value?.validate((valid: boolean, fields: any) => {
+    if (valid) {
+      emit('refresh', cloneDeep(form.value))
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.param-dialog {
+  padding: 8px 8px 24px 8px;
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+  .dialog-max-height {
+    height: 550px;
+  }
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/workflow/nodes/reranker-node/index.ts b/src/workflow/nodes/reranker-node/index.ts
new file mode 100644
index 0000000..9b3afc5
--- /dev/null
+++ b/src/workflow/nodes/reranker-node/index.ts
@@ -0,0 +1,12 @@
+import RerankerNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, RerankerNodeVue)
+  }
+}
+export default {
+  type: 'reranker-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/src/workflow/nodes/reranker-node/index.vue b/src/workflow/nodes/reranker-node/index.vue
new file mode 100644
index 0000000..731c6d7
--- /dev/null
+++ b/src/workflow/nodes/reranker-node/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="rerankerNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="重排内容"
+          prop="reranker_reference_list"
+          :rules="{
+            type: 'array',
+            message: '请选择重排内容',
+            trigger: 'change',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span>重排内容<span class="danger">*</span></span>
+              <el-button @click="add_reranker_reference" link type="primary">
+                <el-icon class="mr-4"><Plus /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <el-row
+            :gutter="8"
+            style="margin-bottom: 8px"
+            v-for="(reranker_reference, index) in form_data.reranker_reference_list"
+            :key="index"
+          >
+            <el-col :span="22">
+              <el-form-item
+                :prop="'reranker_reference_list.' + index"
+                :rules="{
+                  type: 'array',
+                  required: true,
+                  message: '请选择变量',
+                  trigger: 'change'
+                }"
+              >
+                <NodeCascader
+                  :key="index"
+                  :nodeModel="nodeModel"
+                  class="w-full"
+                  placeholder="请选择重排内容"
+                  v-model="form_data.reranker_reference_list[index]"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-button link type="info" class="mt-4" @click="deleteCondition(index)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="检索参数">
+          <template #label>
+            <div class="flex-between">
+              <span>检索参数</span>
+              <el-button type="primary" link @click="openParamSettingDialog">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-row>
+              <el-col :span="12" class="color-secondary lighter"> Score 高于</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.reranker_setting.similarity?.toFixed(3) }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter"> 引用分段 Top</el-col>
+              <el-col :span="12" class="lighter"> {{ form_data.reranker_setting.top_n }}</el-col>
+              <el-col :span="12" class="color-secondary lighter"> 最大引用字符数</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.reranker_setting.max_paragraph_char_number }}</el-col
+              >
+            </el-row>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="检索问题"
+          prop="question_reference_address"
+          :rules="{
+            message: '请选择检索问题',
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span>检索问题<span class="danger">*</span></span>
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="检索问题"
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+        <el-form-item
+          label="重排模型"
+          prop="reranker_model_id"
+          :rules="{
+            required: true,
+            message: '请选择重排模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span>重排模型<span class="danger">*</span></span>
+            </div>
+          </template>
+          <el-select
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.reranker_model_id"
+            placeholder="请选择重排模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id"
+                  ><Check
+                /></el-icon>
+              </el-option>
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id"
+                  ><Check
+                /></el-icon>
+              </el-option>
+            </el-option-group>
+            <template #footer>
+              <div class="w-full text-left cursor" @click="openCreateModel()">
+                <el-button type="primary" link>
+                  <el-icon class="mr-4"><Plus /></el-icon>
+                  添加模型
+                </el-button>
+              </div>
+            </template>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <!-- 添加模版 -->
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set, cloneDeep, groupBy } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import ParamSettingDialog from './ParamSettingDialog.vue'
+import { ref, computed, onMounted } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+import type { Provider } from '@/api/type/model'
+import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { app } from '@/main'
+import { relatedObject } from '@/utils/utils'
+
+const { model } = useStore()
+const props = defineProps<{ nodeModel: any }>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+const form = {
+  reranker_reference_list: [[]],
+  reranker_model_id: '',
+  question_reference_address: [],
+  reranker_setting: {
+    top_n: 3,
+    similarity: 0,
+    max_paragraph_char_number: 5000
+  }
+}
+const providerOptions = ref<Array<Provider>>([])
+const modelOptions = ref<any>(null)
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(form_data.value.reranker_setting)
+}
+const deleteCondition = (index: number) => {
+  const list = cloneDeep(props.nodeModel.properties.node_data.reranker_reference_list)
+  list.splice(index, 1)
+  set(props.nodeModel.properties.node_data, 'reranker_reference_list', list)
+}
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'reranker_setting', data)
+}
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationRerankerModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel({ model_type: 'RERANKER' }).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+const add_reranker_reference = () => {
+  const list = cloneDeep(props.nodeModel.properties.node_data.reranker_reference_list)
+  list.push([])
+  set(props.nodeModel.properties.node_data, 'reranker_reference_list', list)
+}
+const rerankerNodeFormRef = ref()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    rerankerNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+onMounted(() => {
+  getProvider()
+  getModel()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped>
+.reply-node-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>
diff --git a/src/workflow/nodes/search-dataset-node/index.ts b/src/workflow/nodes/search-dataset-node/index.ts
new file mode 100644
index 0000000..316854d
--- /dev/null
+++ b/src/workflow/nodes/search-dataset-node/index.ts
@@ -0,0 +1,12 @@
+import SearchDatasetVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class SearchDatasetNode extends AppNode {
+  constructor(props: any) {
+    super(props, SearchDatasetVue)
+  }
+}
+export default {
+  type: 'search-dataset-node',
+  model: AppNodeModel,
+  view: SearchDatasetNode
+}
diff --git a/src/workflow/nodes/search-dataset-node/index.vue b/src/workflow/nodes/search-dataset-node/index.vue
new file mode 100644
index 0000000..61eb8aa
--- /dev/null
+++ b/src/workflow/nodes/search-dataset-node/index.vue
@@ -0,0 +1,215 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="DatasetNodeFormRef"
+      >
+        <el-form-item label="选择知识库">
+          <template #label>
+            <div class="flex-between">
+              <span>选择知识库</span>
+              <el-button type="primary" link @click="openDatasetDialog">
+                <el-icon><Plus /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-text type="info" v-if="form_data.dataset_id_list?.length === 0">
+              关联的知识库展示在这里
+            </el-text>
+            <template v-for="(item, index) in form_data.dataset_id_list" :key="index" v-else>
+              <div class="flex-between border border-r-4 white-bg mb-4" style="padding: 5px 8px">
+                <div class="flex align-center" style="line-height: 20px">
+                  <AppAvatar
+                    v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                    class="mr-8 avatar-purple"
+                    shape="square"
+                    :size="20"
+                  >
+                    <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+
+                  <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="20">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+
+                  <div class="ellipsis" :title="relatedObject(datasetList, item, 'id')?.name">
+                    {{ relatedObject(datasetList, item, 'id')?.name }}
+                  </div>
+                </div>
+                <el-button text @click="removeDataset(item)">
+                  <el-icon><Close /></el-icon>
+                </el-button>
+              </div>
+            </template>
+          </div>
+        </el-form-item>
+        <el-form-item label="检索参数">
+          <template #label>
+            <div class="flex-between">
+              <span>检索参数</span>
+              <el-button type="primary" link @click="openParamSettingDialog">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-row>
+              <el-col :span="12" class="color-secondary lighter">检索模式</el-col>
+              <el-col :span="12" class="lighter">
+                {{
+                  SearchMode[form_data.dataset_setting.search_mode as keyof typeof SearchMode]
+                }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter"> 相似度高于</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.similarity?.toFixed(3) }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter"> 引用分段 Top</el-col>
+              <el-col :span="12" class="lighter"> {{ form_data.dataset_setting.top_n }}</el-col>
+              <el-col :span="12" class="color-secondary lighter"> 最大引用字符数</el-col>
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.max_paragraph_char_number }}</el-col
+              >
+            </el-row>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="检索问题"
+          prop="question_reference_address"
+          :rules="{
+            message: '请选择检索问题',
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择检索问题"
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import AddDatasetDialog from '@/views/application/component/AddDatasetDialog.vue'
+import ParamSettingDialog from '@/views/application/component/ParamSettingDialog.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { relatedObject } from '@/utils/utils'
+import { SearchMode } from '@/enums/application'
+import useStore from '@/stores'
+const { dataset, application, user } = useStore()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const nodeCascaderRef = ref()
+const form = {
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding'
+  },
+  question_reference_address: []
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const DatasetNodeFormRef = ref<FormInstance>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const AddDatasetDialogRef = ref<InstanceType<typeof AddDatasetDialog>>()
+const datasetList = ref<any>([])
+const datasetLoading = ref(false)
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'dataset_setting', data.dataset_setting)
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(form_data.value, 'WORK_FLOW')
+}
+
+function removeDataset(id: any) {
+  const list = props.nodeModel.properties.node_data.dataset_id_list.filter((v: any) => v !== id)
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', list)
+}
+
+function addDataset(val: Array<string>) {
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', val)
+}
+
+function openDatasetDialog() {
+  if (AddDatasetDialogRef.value) {
+    AddDatasetDialogRef.value.open(form_data.value.dataset_id_list)
+  }
+}
+
+function getDataset() {
+  if (id) {
+    application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+      datasetList.value = res.data
+    })
+  } else {
+    dataset.asyncGetAllDataset(datasetLoading).then((res: any) => {
+      datasetList.value = res.data?.filter((v: any) => v.user_id === user.userInfo?.id)
+    })
+  }
+}
+function refresh() {
+  getDataset()
+}
+
+const validate = () => {
+  console.log(DatasetNodeFormRef.value)
+  return Promise.all([
+    nodeCascaderRef.value.validate(),
+    DatasetNodeFormRef.value?.validate()
+  ]).catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  getDataset()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/speech-to-text-node/index.ts b/src/workflow/nodes/speech-to-text-node/index.ts
new file mode 100644
index 0000000..aabaf1f
--- /dev/null
+++ b/src/workflow/nodes/speech-to-text-node/index.ts
@@ -0,0 +1,12 @@
+import SpeechToTextVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class SpeechToTextNode extends AppNode {
+  constructor(props: any) {
+    super(props, SpeechToTextVue)
+  }
+}
+export default {
+  type: 'speech-to-text-node',
+  model: AppNodeModel,
+  view: SpeechToTextNode
+}
diff --git a/src/workflow/nodes/speech-to-text-node/index.vue b/src/workflow/nodes/speech-to-text-node/index.vue
new file mode 100644
index 0000000..1f1daaf
--- /dev/null
+++ b/src/workflow/nodes/speech-to-text-node/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="语音识别模型"
+          prop="stt_model_id"
+          :rules="{
+            required: true,
+            message: '请选择语音识别模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>语音识别模型<span class="danger">*</span></span>
+              </div>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.stt_model_id"
+            placeholder="请选择语音识别模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="选择语音文件"
+          prop="audio_list"
+          :rules="{
+            message: '选择语音文件',
+            trigger: 'change',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>选择语音文件<span class="danger">*</span></span>
+              </div>
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="请选择语音文件"
+            v-model="form_data.audio_list"
+          />
+        </el-form-item>
+
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const form = {
+  stt_model_id: '',
+  is_result: true,
+  audio_list: []
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationSTTModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const model_change = (model_id?: string) => {}
+
+onMounted(() => {
+  getModel()
+  getProvider()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/nodes/start-node/index.ts b/src/workflow/nodes/start-node/index.ts
new file mode 100644
index 0000000..5adfb77
--- /dev/null
+++ b/src/workflow/nodes/start-node/index.ts
@@ -0,0 +1,12 @@
+import StartNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class StartNode extends AppNode {
+  constructor(props: any) {
+    super(props, StartNodeVue)
+  }
+}
+export default {
+  type: 'start-node',
+  model: AppNodeModel,
+  view: StartNode
+}
diff --git a/src/workflow/nodes/start-node/index.vue b/src/workflow/nodes/start-node/index.vue
new file mode 100644
index 0000000..20fa974
--- /dev/null
+++ b/src/workflow/nodes/start-node/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">全局变量</h5>
+    <div
+      v-for="(item, index) in nodeModel.properties.config.globalFields"
+      :key="index"
+      class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter"
+      @mouseenter="showicon = true"
+      @mouseleave="showicon = false"
+    >
+      <span>{{ item.label }} {{ '{' + item.value + '}' }}</span>
+      <el-tooltip effect="dark" content="复制参数" placement="top" v-if="showicon === true">
+        <el-button
+          link
+          @click="copyClick('{{' + '全局变量.' + item.value + '}}')"
+          style="padding: 0"
+        >
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </el-tooltip>
+    </div>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { copyClick } from '@/utils/clipboard'
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const showicon = ref(false)
+const globalFields = [
+  { label: '当前时间', value: 'time' },
+  { label: '历史聊天记录', value: 'history_context' },
+  { label: '对话id', value: 'chat_id' }
+]
+
+const getRefreshFieldList = () => {
+  const user_input_fields = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .map((v: any) => cloneDeep(v.properties.user_input_field_list))
+    .reduce((x: any, y: any) => [...x, ...y], [])
+    .map((i: any) => {
+      if (i.label && i.label.input_type === 'TooltipLabel') {
+        return { label: i.label.label, value: i.field || i.variable }
+      }
+      return { label: i.label || i.name, value: i.field || i.variable }
+    })
+  const api_input_fields = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .map((v: any) => cloneDeep(v.properties.api_input_field_list))
+    .reduce((x: any, y: any) => [...x, ...y], [])
+    .map((i: any) => ({ label: i.name || i.variable, value: i.variable }))
+
+  return [...user_input_fields, ...api_input_fields]
+}
+const refreshFieldList = () => {
+  const refreshFieldList = getRefreshFieldList()
+  set(props.nodeModel.properties.config, 'globalFields', [...globalFields, ...refreshFieldList])
+}
+props.nodeModel.graphModel.eventCenter.on('refreshFieldList', refreshFieldList)
+
+const refreshFileUploadConfig = () => {
+  let fields = cloneDeep(props.nodeModel.properties.config.fields)
+  const form_data = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .filter((v: any) => v.properties.node_data.file_upload_enable)
+    .map((v: any) => cloneDeep(v.properties.node_data.file_upload_setting))
+    .filter((v: any) => v)
+
+  fields = fields.filter((item: any) => item.value !== 'image' && item.value !== 'document' && item.value !== 'audio' && item.value !== 'video')
+
+  if (form_data.length === 0) {
+    set(props.nodeModel.properties.config, 'fields', fields)
+    return
+  }
+  let fileUploadFields = []
+  if (form_data[0].document) {
+    fileUploadFields.push({ label: '文档', value: 'document' })
+  }
+  if (form_data[0].image) {
+    fileUploadFields.push({ label: '图片', value: 'image' })
+  }
+  if (form_data[0].audio) {
+    fileUploadFields.push({ label: '音频', value: 'audio' })
+  }
+  if (form_data[0].video) {
+    fileUploadFields.push({ label: '视频', value: 'video' })
+  }
+
+  set(props.nodeModel.properties.config, 'fields', [...fields, ...fileUploadFields])
+}
+props.nodeModel.graphModel.eventCenter.on('refreshFileUploadConfig', refreshFileUploadConfig)
+
+onMounted(() => {
+  refreshFieldList()
+  refreshFileUploadConfig()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/workflow/nodes/text-to-speech-node/index.ts b/src/workflow/nodes/text-to-speech-node/index.ts
new file mode 100644
index 0000000..04e2363
--- /dev/null
+++ b/src/workflow/nodes/text-to-speech-node/index.ts
@@ -0,0 +1,12 @@
+import TextToSpeechVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class TextToSpeechNode extends AppNode {
+  constructor(props: any) {
+    super(props, TextToSpeechVue)
+  }
+}
+export default {
+  type: 'text-to-speech-node',
+  model: AppNodeModel,
+  view: TextToSpeechNode
+}
diff --git a/src/workflow/nodes/text-to-speech-node/index.vue b/src/workflow/nodes/text-to-speech-node/index.vue
new file mode 100644
index 0000000..8904225
--- /dev/null
+++ b/src/workflow/nodes/text-to-speech-node/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          label="语音合成模型"
+          prop="tts_model_id"
+          :rules="{
+            required: true,
+            message: '请选择语音合成模型',
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>语音合成模型<span class="danger">*</span></span>
+              </div>
+              <el-button
+                type="primary"
+                link
+                @click="openTTSParamSettingDialog"
+                :disabled="!form_data.tts_model_id"
+                class="mr-4"
+              >
+                {{ $t('views.application.applicationForm.form.paramSetting') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.tts_model_id"
+            placeholder="请选择语音合成模型"
+            class="w-full"
+            popper-class="select-model"
+            :clearable="true"
+          >
+            <el-option-group
+              v-for="(value, label) in modelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
+            >
+              <el-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span class="ellipsis" :title="item.name">{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+
+                  <span class="ellipsis" :title="item.name">{{ item.name }}</span>
+                  <span class="danger">（不可用）</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          prop="content_list"
+          label="选择文本内容"
+          :rules="{
+            message: '选择文本内容',
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>选择文本内容<span class="danger">*</span></span>
+              </div>
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            placeholder="选择文本内容"
+            v-model="form_data.content_list"
+          />
+        </el-form-item>
+
+        <el-form-item label="返回内容" @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>返回内容<span class="danger">*</span></span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+  <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import { relatedObject } from '@/utils/utils'
+import type { Provider } from '@/api/type/model'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
+
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const form = {
+  tts_model_id: '',
+  is_result: true,
+  content_list: [],
+  model_params_setting: {}
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationTTSModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function getProvider() {
+  model.asyncGetProvider().then((res: any) => {
+    providerOptions.value = res?.data
+  })
+}
+
+const openTTSParamSettingDialog = () => {
+  const model_id = form_data.value.tts_model_id
+  if (!model_id) {
+    MsgSuccess(t('请选择语音播放模型'))
+    return
+  }
+  TTSModeParamSettingDialogRef.value?.open(model_id, id, form_data.value.model_params_setting)
+}
+const refreshTTSForm = (data: any) => {
+  form_data.value.model_params_setting = data
+}
+
+const model_change = (model_id?: string) => {}
+
+onMounted(() => {
+  getModel()
+  getProvider()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/workflow/plugins/dagre.ts b/src/workflow/plugins/dagre.ts
new file mode 100644
index 0000000..67b72fd
--- /dev/null
+++ b/src/workflow/plugins/dagre.ts
@@ -0,0 +1,69 @@
+import { DagreLayout, type DagreLayoutOptions } from '@antv/layout'
+
+export default class Dagre {
+  static pluginName = 'dagre'
+  lf: any
+  option: DagreLayoutOptions | any
+  render(lf: any) {
+    this.lf = lf
+  }
+
+  /**
+   * option: {
+   *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
+   *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
+   *   nodeSize: undefined, // 节点大小
+   *   nodesepFunc: undefined, // 节点水平间距(px)
+   *   ranksepFunc: undefined, // 每一层节点之间间距
+   *   nodesep: 40, // 节点水平间距(px) 注意：如果有grid，需要保证nodesep为grid的偶数倍
+   *   ranksep: 40, // 每一层节点之间间距 注意：如果有grid，需要保证ranksep为grid的偶数倍
+   *   controlPoints: false, // 是否保留布局连线的控制点
+   *   radial: false, // 是否基于 dagre 进行辐射布局
+   *   focusNode: null, // radial 为 true 时生效，关注的节点
+   * };
+   */
+  layout(option = {}) {
+    const { nodes, edges, gridSize } = this.lf.graphModel
+    // 为了保证生成的节点在girdSize上，需要处理一下。
+    let nodesep = 40
+    let ranksep = 40
+    if (gridSize > 20) {
+      nodesep = gridSize * 2
+      ranksep = gridSize * 2
+    }
+    this.option = {
+      type: 'dagre',
+      rankdir: 'LR',
+      // align: 'UL',
+      // align: 'UR',
+      align: 'DR',
+      nodesep,
+      ranksep,
+      begin: [120, 120],
+      ...option
+    }
+    const layoutInstance = new DagreLayout(this.option)
+    const layoutData = layoutInstance.layout({
+      nodes: nodes.map((node: any) => ({
+        id: node.id,
+        size: {
+          width: node.width,
+          height: node.height
+        },
+        model: node
+      })),
+      edges: edges.map((edge: any) => ({
+        source: edge.sourceNodeId,
+        target: edge.targetNodeId,
+        model: edge
+      }))
+    })
+
+    layoutData.nodes?.forEach((node: any) => {
+      // @ts-ignore: pass node data
+      const { model } = node
+      model.set_position({ x: node.x, y: node.y })
+    })
+    this.lf.fitView()
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..8601394
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "target": "esnext", // 使用ES最新语法
+    "module": "esnext", // 使用ES模块语法
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..248dd5b
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+   
+  "files": [],
+  
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..b4a8795
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "skipLibCheck": true, // 跳过node依赖包语法检查
+    "types": [
+      "node"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
new file mode 100644
index 0000000..940b2df
--- /dev/null
+++ b/tsconfig.vitest.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "target": "esnext", // 使用ES最新语法
+    "module": "esnext", // 使用ES模块语法
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..26fefd2
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,44 @@
+import { fileURLToPath, URL } from 'node:url'
+import type { ProxyOptions } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
+
+import vue from '@vitejs/plugin-vue'
+import DefineOptions from 'unplugin-vue-define-options/vite'
+
+const envDir = './env'
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const ENV = loadEnv(mode, envDir)
+  const prefix = process.env.VITE_DYNAMIC_PREFIX || ENV.VITE_BASE_PATH;
+  const proxyConf: Record<string, string | ProxyOptions> = {}
+  proxyConf['/api'] = {
+    target: 'https://mb.jzce.com',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(ENV.VITE_BASE_PATH, '/')
+  }
+  return {
+    preflight: false,
+    lintOnSave: false,
+    base: prefix,
+    envDir: envDir,
+    plugins: [vue(), DefineOptions()],
+    server: {
+      cors: true,
+      host: '0.0.0.0',
+      port: Number(ENV.VITE_APP_PORT),
+      strictPort: true,
+      proxy: proxyConf,
+      mimeTypes: {
+        'application/javascript': ['js']
+      }
+    },
+    build: {
+      outDir: 'dist'
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    }
+  }
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..7c37fae
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig as never,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)