diff --git a/config/plugins/index.ts b/config/plugins/index.ts
index 4507b2c..eda6bf3 100644
--- a/config/plugins/index.ts
+++ b/config/plugins/index.ts
@@ -6,9 +6,9 @@ import createAutoImport from './auto-import'
 import createComponents from './components'
 import createSvgIcon from './svg-icon'
 import createMock from './mock'
-
+import VueDevTools from 'vite-plugin-vue-devtools'
 export default function createVitePlugins(viteEnv, isBuild = false) {
-  const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()]
+  const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx(), VueDevTools()]
   vitePlugins.push(createAutoImport())
   vitePlugins.push(createComponents())
   vitePlugins.push(createSvgIcon(isBuild))
diff --git a/package.json b/package.json
index 2eb0711..652fa01 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "query-string": "^9.0.0",
     "v-viewer": "^3.0.10",
     "viewerjs": "^1.11.6",
+    "vite-plugin-vue-devtools": "^7.0.27",
     "vue": "^3.4.21",
     "vue-codemirror6": "^1.1.27",
     "vue-color-kit": "^1.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0803522..279f48d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ dependencies:
   viewerjs:
     specifier: ^1.11.6
     version: 1.11.6
+  vite-plugin-vue-devtools:
+    specifier: ^7.0.27
+    version: 7.0.27(vite@5.1.6)(vue@3.4.21)
   vue:
     specifier: ^3.4.21
     version: 3.4.21(typescript@5.0.4)
@@ -101,6 +104,9 @@ dependencies:
   vue-color-kit:
     specifier: ^1.0.5
     version: 1.0.6(vue@3.4.21)
+  vue-cropper:
+    specifier: ^1.1.2
+    version: 1.1.2
   vue-draggable-plus:
     specifier: ^0.3.5
     version: 0.3.5(@types/sortablejs@1.15.8)
@@ -217,11 +223,9 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@antfu/utils@0.7.7:
     resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
-    dev: true
 
   /@arco-design/color@0.4.0:
     resolution: {integrity: sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==}
@@ -257,12 +261,10 @@ packages:
     dependencies:
       '@babel/highlight': 7.24.2
       picocolors: 1.0.0
-    dev: true
 
   /@babel/compat-data@7.24.1:
     resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/core@7.24.1:
     resolution: {integrity: sha512-F82udohVyIgGAY2VVj/g34TpFUG606rumIHjTfVbssPg2zTR7PuuEpZcX8JA6sgBfIYmJrFtWgPvHQuJamVqZQ==}
@@ -285,7 +287,6 @@ packages:
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/generator@7.24.1:
     resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==}
@@ -295,14 +296,12 @@ packages:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
-    dev: true
 
   /@babel/helper-annotate-as-pure@7.22.5:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-compilation-targets@7.23.6:
     resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
@@ -313,7 +312,6 @@ packages:
       browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
-    dev: true
 
   /@babel/helper-create-class-features-plugin@7.24.1(@babel/core@7.24.1):
     resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==}
@@ -331,12 +329,10 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       semver: 6.3.1
-    dev: true
 
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-function-name@7.23.0:
     resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
@@ -344,35 +340,30 @@ packages:
     dependencies:
       '@babel/template': 7.24.0
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-member-expression-to-functions@7.23.0:
     resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-module-imports@7.24.1:
     resolution: {integrity: sha512-HfEWzysMyOa7xI5uQHc/OcZf67/jc+xe/RZlznWQHhbb8Pg1SkRdbK4yEi61aY8wxQA7PkSfoojtLQP/Kpe3og==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.1):
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
@@ -386,19 +377,16 @@ packages:
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/helper-validator-identifier': 7.22.20
-    dev: true
 
   /@babel/helper-optimise-call-expression@7.22.5:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-plugin-utils@7.24.0:
     resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.1):
     resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
@@ -410,28 +398,24 @@ packages:
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
-    dev: true
 
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
     resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/helper-string-parser@7.24.1:
     resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
@@ -444,7 +428,6 @@ packages:
   /@babel/helper-validator-option@7.23.5:
     resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helpers@7.24.1:
     resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==}
@@ -455,7 +438,6 @@ packages:
       '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/highlight@7.24.2:
     resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
@@ -465,7 +447,6 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.0.0
-    dev: true
 
   /@babel/parser@7.24.1:
     resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==}
@@ -474,6 +455,47 @@ packages:
     dependencies:
       '@babel/types': 7.24.0
 
+  /@babel/plugin-proposal-decorators@7.24.1(@babel/core@7.24.1):
+    resolution: {integrity: sha512-zPEvzFijn+hRvJuX2Vu3KbEBN39LN3f7tW3MQO2LsIs57B26KU+kUc82BdAktS1VCM6libzh45eKGI65lg0cpA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.1
+      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.1)
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/plugin-syntax-decorators': 7.24.1(@babel/core@7.24.1)
+    dev: false
+
+  /@babel/plugin-syntax-decorators@7.24.1(@babel/core@7.24.1):
+    resolution: {integrity: sha512-05RJdO/cCrtVWuAaSn1tS3bH8jbsJa/Y1uD186u6J4C/1mnHFxseeuWpsqr9anvo7TUulev7tm7GDwRV+VuhDw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.1
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: false
+
+  /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.1):
+    resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.1
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: false
+
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.1):
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.1
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: false
+
   /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.1):
     resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
     engines: {node: '>=6.9.0'}
@@ -482,7 +504,6 @@ packages:
     dependencies:
       '@babel/core': 7.24.1
       '@babel/helper-plugin-utils': 7.24.0
-    dev: true
 
   /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.1):
     resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
@@ -492,7 +513,6 @@ packages:
     dependencies:
       '@babel/core': 7.24.1
       '@babel/helper-plugin-utils': 7.24.0
-    dev: true
 
   /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.1):
     resolution: {integrity: sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==}
@@ -505,7 +525,6 @@ packages:
       '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.1)
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.1)
-    dev: true
 
   /@babel/runtime@7.24.1:
     resolution: {integrity: sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==}
@@ -521,7 +540,6 @@ packages:
       '@babel/code-frame': 7.24.2
       '@babel/parser': 7.24.1
       '@babel/types': 7.24.0
-    dev: true
 
   /@babel/traverse@7.24.1:
     resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==}
@@ -539,7 +557,6 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/types@7.24.0:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
@@ -873,7 +890,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.19.12:
@@ -882,7 +898,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.19.12:
@@ -891,7 +906,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.19.12:
@@ -900,7 +914,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.19.12:
@@ -909,7 +922,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.19.12:
@@ -918,7 +930,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.19.12:
@@ -927,7 +938,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.19.12:
@@ -936,7 +946,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.19.12:
@@ -945,7 +954,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.19.12:
@@ -954,7 +962,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.19.12:
@@ -963,7 +970,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.14.54:
@@ -981,7 +987,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.19.12:
@@ -990,7 +995,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.19.12:
@@ -999,7 +1003,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.19.12:
@@ -1008,7 +1011,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.19.12:
@@ -1017,7 +1019,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.19.12:
@@ -1026,7 +1027,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.19.12:
@@ -1035,7 +1035,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.19.12:
@@ -1044,7 +1043,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.19.12:
@@ -1053,7 +1051,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.19.12:
@@ -1062,7 +1059,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.19.12:
@@ -1071,7 +1067,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.19.12:
@@ -1080,7 +1075,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0):
@@ -1147,17 +1141,14 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/source-map@0.3.6:
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
@@ -1174,7 +1165,6 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@lezer/common@1.2.1:
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
@@ -1316,6 +1306,10 @@ packages:
       fastq: 1.17.1
     dev: true
 
+  /@polka/url@1.0.0-next.25:
+    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+    dev: false
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -1336,14 +1330,12 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
-    dev: true
 
   /@rollup/rollup-android-arm-eabi@4.13.0:
     resolution: {integrity: sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.13.0:
@@ -1351,7 +1343,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.13.0:
@@ -1359,7 +1350,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.13.0:
@@ -1367,7 +1357,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.13.0:
@@ -1375,7 +1364,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.13.0:
@@ -1384,7 +1372,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.13.0:
@@ -1393,7 +1380,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.13.0:
@@ -1402,7 +1388,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.13.0:
@@ -1411,7 +1396,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.13.0:
@@ -1420,7 +1404,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.13.0:
@@ -1428,7 +1411,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.13.0:
@@ -1436,7 +1418,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.13.0:
@@ -1444,7 +1425,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rushstack/eslint-patch@1.7.2:
@@ -1480,7 +1460,6 @@ packages:
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true
 
   /@types/event-emitter@0.3.5:
     resolution: {integrity: sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ==}
@@ -1517,7 +1496,6 @@ packages:
     resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
     dependencies:
       undici-types: 5.26.5
-    dev: true
 
   /@types/query-string@6.3.0:
     resolution: {integrity: sha512-yuIv/WRffRzL7cBW+sla4HwBZrEXRNf1MKQ5SklPEadth+BKbDxiVG8A3iISN5B3yC4EeSCzMZP8llHTcUhOzQ==}
@@ -1770,7 +1748,6 @@ packages:
 
   /@vue/babel-helper-vue-transform-on@1.2.2:
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
-    dev: true
 
   /@vue/babel-plugin-jsx@1.2.2(@babel/core@7.24.1):
     resolution: {integrity: sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==}
@@ -1794,7 +1771,6 @@ packages:
       svg-tags: 1.0.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.24.1):
     resolution: {integrity: sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==}
@@ -1807,7 +1783,6 @@ packages:
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/parser': 7.24.1
       '@vue/compiler-sfc': 3.4.21
-    dev: true
 
   /@vue/compiler-core@3.4.21:
     resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
@@ -1847,6 +1822,39 @@ packages:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
     dev: false
 
+  /@vue/devtools-core@7.0.27(vite@5.1.6)(vue@3.4.21):
+    resolution: {integrity: sha512-3rbtNGxFFFPfIObgTAPIw0h0rJy+y1PrbfgM9nXRf3/FIJkthfS19yj31pj9EWIqRsyiqK5u1Ni7SAJZ0vsQOA==}
+    dependencies:
+      '@vue/devtools-kit': 7.0.27(vue@3.4.21)
+      '@vue/devtools-shared': 7.0.27
+      mitt: 3.0.1
+      nanoid: 3.3.7
+      pathe: 1.1.2
+      vite-hot-client: 0.2.3(vite@5.1.6)
+    transitivePeerDependencies:
+      - vite
+      - vue
+    dev: false
+
+  /@vue/devtools-kit@7.0.27(vue@3.4.21):
+    resolution: {integrity: sha512-/A5xM38pPCFX5Yhl/lRFAzjyK6VNsH670nww2WbjFKWqlu3I+lMxWKzQkCW6A1V8bduITgl2kHORfg2gTw6QaA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@vue/devtools-shared': 7.0.27
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      vue: 3.4.21(typescript@5.0.4)
+    dev: false
+
+  /@vue/devtools-shared@7.0.27:
+    resolution: {integrity: sha512-4VxtmZ6yjhiSloqZZq2UYU0TBGxOJ8GxWvp5OlAH70zYqi0FIAyWGPkOhvfoZ7DKQyv2UU0mmKzFHjsEkelGyQ==}
+    dependencies:
+      rfdc: 1.3.1
+    dev: false
+
   /@vue/eslint-config-prettier@7.1.0(eslint@8.57.0)(prettier@2.8.8):
     resolution: {integrity: sha512-Pv/lVr0bAzSIHLd9iz0KnvAr4GKyCEl+h52bc4e5yWuDVtLgFwycF7nrbWTAQAS+FU6q1geVd07lc6EWfJiWKQ==}
     peerDependencies:
@@ -2354,7 +2362,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -2438,7 +2445,6 @@ packages:
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
-    dev: true
 
   /bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
@@ -2484,7 +2490,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /browserslist@4.23.0:
     resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
@@ -2495,12 +2500,18 @@ packages:
       electron-to-chromium: 1.4.711
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
-    dev: true
 
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
 
+  /bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      run-applescript: 7.0.0
+    dev: false
+
   /cache-base@1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
@@ -2542,11 +2553,9 @@ packages:
   /camelcase@6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
-    dev: true
 
   /caniuse-lite@1.0.30001599:
     resolution: {integrity: sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==}
-    dev: true
 
   /capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
@@ -2613,7 +2622,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /chrome-trace-event@1.0.3:
     resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
@@ -2747,13 +2755,11 @@ packages:
 
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-    dev: true
 
   /copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
     dependencies:
       is-what: 3.14.1
-    dev: true
 
   /copy-descriptor@0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
@@ -2785,7 +2791,6 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: true
 
   /crypto-js@4.2.0:
     resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
@@ -2876,7 +2881,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
@@ -2891,6 +2895,19 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+    dev: false
+
+  /default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+    dev: false
+
   /define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -2900,6 +2917,11 @@ packages:
       gopd: 1.0.1
     dev: false
 
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /define-property@0.2.5:
     resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==}
     engines: {node: '>=0.10.0'}
@@ -3029,7 +3051,6 @@ packages:
 
   /electron-to-chromium@1.4.711:
     resolution: {integrity: sha512-hRg81qzvUEibX2lDxnFlVCHACa+LtrCPIsWAxo161LDYIB3jauf57RGsMZV9mvGwE98yGH06icj3zBEoOkxd/w==}
-    dev: true
 
   /emojis-list@3.0.0:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
@@ -3067,9 +3088,12 @@ packages:
     requiresBuild: true
     dependencies:
       prr: 1.0.1
-    dev: true
     optional: true
 
+  /error-stack-parser-es@0.1.1:
+    resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
+    dev: false
+
   /es-define-property@1.0.0:
     resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
     engines: {node: '>= 0.4'}
@@ -3355,12 +3379,10 @@ packages:
       '@esbuild/win32-arm64': 0.19.12
       '@esbuild/win32-ia32': 0.19.12
       '@esbuild/win32-x64': 0.19.12
-    dev: true
 
   /escalade@3.1.2:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
-    dev: true
 
   /escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
@@ -3580,6 +3602,21 @@ packages:
     engines: {node: '>=0.8.x'}
     dev: true
 
+  /execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+    dev: false
+
   /expand-brackets@2.1.4:
     resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
     engines: {node: '>=0.10.0'}
@@ -3687,7 +3724,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /filter-obj@5.1.0:
     resolution: {integrity: sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==}
@@ -3769,6 +3805,15 @@ packages:
       universalify: 2.0.1
     dev: true
 
+  /fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: false
+
   /fs-extra@5.0.0:
     resolution: {integrity: sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==}
     dependencies:
@@ -3786,7 +3831,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind@1.1.2:
@@ -3802,7 +3846,6 @@ packages:
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /get-intrinsic@1.2.4:
     resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
@@ -3819,6 +3862,11 @@ packages:
     resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
     dev: false
 
+  /get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+    dev: false
+
   /get-value@2.0.6:
     resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
     engines: {node: '>=0.10.0'}
@@ -3829,7 +3877,6 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -3856,7 +3903,6 @@ packages:
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
-    dev: true
 
   /globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
@@ -3976,10 +4022,13 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+    dev: false
+
   /html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /html-void-elements@2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
@@ -3996,6 +4045,11 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+    dev: false
+
   /i18next@20.6.1:
     resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
     dependencies:
@@ -4008,7 +4062,6 @@ packages:
     requiresBuild: true
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
     optional: true
 
   /ignore@5.3.1:
@@ -4020,7 +4073,6 @@ packages:
     resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
     engines: {node: '>=0.10.0'}
     hasBin: true
-    dev: true
 
   /immer@9.0.21:
     resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==}
@@ -4028,7 +4080,6 @@ packages:
 
   /immutable@4.3.5:
     resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
-    dev: true
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -4069,7 +4120,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.3.0
-    dev: true
 
   /is-buffer@1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
@@ -4104,6 +4154,12 @@ packages:
       is-data-descriptor: 1.0.1
     dev: true
 
+  /is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dev: false
+
   /is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
@@ -4119,19 +4175,25 @@ packages:
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-hotkey@0.2.0:
     resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
     dev: false
 
+  /is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+    dependencies:
+      is-docker: 3.0.0
+    dev: false
+
   /is-number@3.0.0:
     resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==}
     engines: {node: '>=0.10.0'}
@@ -4142,7 +4204,6 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -4166,26 +4227,36 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
   /is-url@1.2.4:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
     dev: false
 
   /is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
-    dev: true
 
   /is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+    dependencies:
+      is-inside-container: 1.0.0
+    dev: false
+
   /isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
     dev: true
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true
 
   /isobject@2.1.0:
     resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==}
@@ -4214,7 +4285,6 @@ packages:
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
@@ -4231,7 +4301,6 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@@ -4260,7 +4329,6 @@ packages:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
-    dev: true
 
   /jsonc-parser@3.2.1:
     resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
@@ -4278,7 +4346,6 @@ packages:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
-    dev: true
 
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -4310,6 +4377,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: false
+
   /less-loader@11.1.4(less@4.2.0)(webpack@5.90.3):
     resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
     engines: {node: '>= 14.15.0'}
@@ -4337,7 +4408,6 @@ packages:
       mime: 1.6.0
       needle: 3.3.1
       source-map: 0.6.1
-    dev: true
 
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -4442,7 +4512,6 @@ packages:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
       yallist: 3.1.1
-    dev: true
 
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@@ -4470,7 +4539,6 @@ packages:
     dependencies:
       pify: 4.0.1
       semver: 5.7.2
-    dev: true
     optional: true
 
   /map-cache@0.2.2:
@@ -4561,7 +4629,6 @@ packages:
 
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -4618,9 +4685,13 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
     requiresBuild: true
-    dev: true
     optional: true
 
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -4665,13 +4736,17 @@ packages:
     dependencies:
       commander: 12.0.0
 
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
@@ -4721,7 +4796,6 @@ packages:
     dependencies:
       iconv-lite: 0.6.3
       sax: 1.3.0
-    dev: true
     optional: true
 
   /neo-async@2.6.2:
@@ -4741,12 +4815,17 @@ packages:
 
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-    dev: true
 
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
+
+  /npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: false
 
   /nprogress@0.2.0:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
@@ -4806,6 +4885,23 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: false
+
+  /open@10.1.0:
+    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+    engines: {node: '>=18'}
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
+    dev: false
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -4849,7 +4945,6 @@ packages:
   /parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
-    dev: true
 
   /parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
@@ -4892,7 +4987,11 @@ packages:
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: true
+
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: false
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
@@ -4913,7 +5012,10 @@ packages:
 
   /pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-    dev: true
+
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+    dev: false
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -4921,13 +5023,11 @@ packages:
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /pinia-plugin-persistedstate@3.2.1(pinia@2.1.7):
@@ -5068,7 +5168,6 @@ packages:
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     requiresBuild: true
-    dev: true
     optional: true
 
   /punycode.js@2.3.1:
@@ -5127,7 +5226,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
@@ -5187,6 +5285,10 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
+  /rfdc@1.3.1:
+    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
+    dev: false
+
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
@@ -5215,7 +5317,11 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.13.0
       '@rollup/rollup-win32-x64-msvc': 4.13.0
       fsevents: 2.3.3
-    dev: true
+
+  /run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+    dev: false
 
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -5236,7 +5342,6 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     requiresBuild: true
-    dev: true
     optional: true
 
   /sass-loader@13.3.3(sass@1.72.0)(webpack@5.90.3):
@@ -5271,12 +5376,10 @@ packages:
       chokidar: 3.6.0
       immutable: 4.3.5
       source-map-js: 1.2.0
-    dev: true
 
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
     requiresBuild: true
-    dev: true
     optional: true
 
   /schema-utils@3.3.0:
@@ -5301,13 +5404,11 @@ packages:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
     requiresBuild: true
-    dev: true
     optional: true
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
-    dev: true
 
   /semver@7.6.0:
     resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
@@ -5358,12 +5459,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
-    dev: true
 
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: true
 
   /side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -5375,11 +5474,25 @@ packages:
       object-inspect: 1.13.1
     dev: false
 
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
       is-arrayish: 0.3.2
 
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.25
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: false
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -5488,13 +5601,17 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /split-on-first@3.0.0:
     resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==}
     engines: {node: '>=12'}
@@ -5553,6 +5670,11 @@ packages:
       ansi-regex: 5.0.1
     dev: true
 
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -5627,7 +5749,6 @@ packages:
 
   /svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-    dev: true
 
   /svgo@2.8.0:
     resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
@@ -5715,7 +5836,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /to-regex@3.0.2:
     resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==}
@@ -5731,6 +5851,11 @@ packages:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
     dev: false
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /traverse@0.6.8:
     resolution: {integrity: sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==}
     engines: {node: '>= 0.4'}
@@ -5746,7 +5871,6 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
 
   /tsutils@3.21.0(typescript@5.0.4):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -5789,7 +5913,6 @@ packages:
 
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-    dev: true
 
   /unidragger@2.4.0:
     resolution: {integrity: sha512-MueZK2oXuGE6OAlGKIrSXK2zCq+8yb1QUZgqyTDCSJzvwYL0g2Llrad+TtoQTYxtFnNyxxSw0IMnKNIgEMia1w==}
@@ -5841,7 +5964,6 @@ packages:
   /universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
-    dev: true
 
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
@@ -5929,7 +6051,6 @@ packages:
       browserslist: 4.23.0
       escalade: 3.1.2
       picocolors: 1.0.0
-    dev: true
 
   /upper-case-first@2.0.2:
     resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
@@ -5988,6 +6109,39 @@ packages:
     resolution: {integrity: sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==}
     dev: false
 
+  /vite-hot-client@0.2.3(vite@5.1.6):
+    resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0
+    dependencies:
+      vite: 5.1.6(@types/node@20.11.30)(less@4.2.0)(sass@1.72.0)
+    dev: false
+
+  /vite-plugin-inspect@0.8.3(vite@5.1.6):
+    resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0
+      debug: 4.3.4
+      error-stack-parser-es: 0.1.1
+      fs-extra: 11.2.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
+      picocolors: 1.0.0
+      sirv: 2.0.4
+      vite: 5.1.6(@types/node@20.11.30)(less@4.2.0)(sass@1.72.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: false
+
   /vite-plugin-mock@2.9.8(mockjs@1.1.0)(vite@5.1.6):
     resolution: {integrity: sha512-YTQM5Sn7t+/DNOwTkr+W26QGTCk1PrDkhGHslTJ90lIPJhJtDTwuSkEYMAuLP9TcVQ/qExTFx/x/GE3kxJ05sw==}
     engines: {node: '>=12.0.0'}
@@ -6042,6 +6196,46 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-vue-devtools@7.0.27(vite@5.1.6)(vue@3.4.21):
+    resolution: {integrity: sha512-sb4B3ZGYueIiqQvQGCEDBsC8Byr4VnlUbbDS44DhYfcIEDChTSO0yRmJ3IJeESJQQMhEh3wS0cgQglL8A9lCuw==}
+    engines: {node: '>=v14.21.3'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0
+    dependencies:
+      '@vue/devtools-core': 7.0.27(vite@5.1.6)(vue@3.4.21)
+      '@vue/devtools-kit': 7.0.27(vue@3.4.21)
+      '@vue/devtools-shared': 7.0.27
+      execa: 8.0.1
+      sirv: 2.0.4
+      vite: 5.1.6(@types/node@20.11.30)(less@4.2.0)(sass@1.72.0)
+      vite-plugin-inspect: 0.8.3(vite@5.1.6)
+      vite-plugin-vue-inspector: 4.0.2(vite@5.1.6)
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - rollup
+      - supports-color
+      - vue
+    dev: false
+
+  /vite-plugin-vue-inspector@4.0.2(vite@5.1.6):
+    resolution: {integrity: sha512-KPvLEuafPG13T7JJuQbSm5PwSxKFnVS965+MP1we2xGw9BPkkc/+LPix5MMWenpKWqtjr0ws8THrR+KuoDC8hg==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
+    dependencies:
+      '@babel/core': 7.24.1
+      '@babel/plugin-proposal-decorators': 7.24.1(@babel/core@7.24.1)
+      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.1)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.1)
+      '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.1)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.1)
+      '@vue/compiler-dom': 3.4.21
+      kolorist: 1.8.0
+      magic-string: 0.30.8
+      vite: 5.1.6(@types/node@20.11.30)(less@4.2.0)(sass@1.72.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /vite@5.1.6(@types/node@20.11.30)(less@4.2.0)(sass@1.72.0):
     resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6078,7 +6272,6 @@ packages:
       sass: 1.72.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vue-codemirror6@1.2.5(@lezer/common@1.2.1)(vue@3.4.21):
     resolution: {integrity: sha512-QVOoYzqS368NPpT0xJr5N66kHyiNOH+n4C5ksYtYOLlxJp1OXi0JDUGXMNbKOrth5osXPrYRDzwEmss5KP/lnw==}
@@ -6102,6 +6295,10 @@ packages:
       vue: 3.4.21(typescript@5.0.4)
     dev: false
 
+  /vue-cropper@1.1.2:
+    resolution: {integrity: sha512-S4cmvQzdNiVpNGigFwgULSwxWp55bdD1xf+RIEH+4mLDpD9/MUjNoHf970V3nFX7SerUrPZbOXG/ZBaD6pxfWQ==}
+    dev: false
+
   /vue-demi@0.13.11(vue@3.4.21):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
@@ -6300,7 +6497,6 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
-    dev: true
 
   /wildcard@1.1.2:
     resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
@@ -6351,7 +6547,6 @@ packages:
 
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
 
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
diff --git a/src/apis/auth/type.ts b/src/apis/auth/type.ts
index 1ef2cd3..7d0b2b1 100644
--- a/src/apis/auth/type.ts
+++ b/src/apis/auth/type.ts
@@ -54,5 +54,5 @@ export interface LoginResp {
 
 // 第三方登录授权类型
 export interface SocialAuthAuthorizeResp {
-  authorizeUrl: string;
-}
\ No newline at end of file
+  authorizeUrl: string
+}
diff --git a/src/apis/common/captcha.ts b/src/apis/common/captcha.ts
index 3dfbe8a..4963f0d 100644
--- a/src/apis/common/captcha.ts
+++ b/src/apis/common/captcha.ts
@@ -7,3 +7,11 @@ const BASE_URL = '/captcha'
 export function getImageCaptcha() {
   return http.get<Common.ImageCaptchaResp>(`${BASE_URL}/img`)
 }
+/**@desc 获取手机验证码 */
+export function getPhoneCaptcha(query: { phone: string }) {
+  return http.get<boolean>(`${BASE_URL}/sms`, query)
+}
+/**@desc 获取邮箱验证码 */
+export function getEmailCaptcha(query: { email: string }) {
+  return http.get<boolean>(`${BASE_URL}/mail`, query)
+}
diff --git a/src/apis/system/type.ts b/src/apis/system/type.ts
index 8a2d691..b8e5810 100644
--- a/src/apis/system/type.ts
+++ b/src/apis/system/type.ts
@@ -222,3 +222,8 @@ export interface BasicConfigRecordResp {
   site_logo?: string
   site_favicon?: string
 }
+/** 绑定三方账号信息*/
+export interface BindSocialAccountRes {
+  source: string
+  description: string
+}
diff --git a/src/apis/system/user.ts b/src/apis/system/user.ts
index 2832bbb..547a574 100644
--- a/src/apis/system/user.ts
+++ b/src/apis/system/user.ts
@@ -37,3 +37,25 @@ export function exportUser(query: System.UserQuery) {
 export function resetUserPwd(data: any, id: string) {
   return http.patch(`${BASE_URL}/${id}/password`, data)
 }
+
+/** @desc 修改用户基础信息 */
+export function updateUserBaseInfo(data: { nickname?: string; gender?: number }) {
+  return http.patch(`${BASE_URL}/basic/info`, data)
+}
+
+/** @desc 修改邮箱 */
+export function updateUserEmail(data: { newEmail: string; captcha: string; currentPassword: string }) {
+  return http.patch(`${BASE_URL}/email`, data)
+}
+/**@desc 绑定三方账号 */
+export function bindSocialAccount(source: string, data: any) {
+  return http.post(`${BASE_URL}/social/${source}`, data)
+}
+/**@desc 获取绑定的三方账号 */
+export function getSocialAccount() {
+  return http.get<System.BindSocialAccountRes[]>(`${BASE_URL}/social`)
+}
+/**@desc 解绑三方账号 */
+export function unbindSocialAccount(source: string) {
+  return http.del(`${BASE_URL}/social/${source}`)
+}
diff --git a/src/assets/icons/Mail.svg b/src/assets/icons/Mail.svg
new file mode 100644
index 0000000..3240de9
--- /dev/null
+++ b/src/assets/icons/Mail.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F6F7FB"/>
+<rect x="12.334" y="14.667" width="23.3333" height="18.6667" fill="#4785FF"/>
+<path d="M12.334 14.667H35.6673V18.167C29.0348 24.1362 18.9665 24.1362 12.334 18.167V14.667Z" fill="#94C2FF"/>
+<circle cx="23.9993" cy="23.4163" r="2.33333" fill="white"/>
+</svg>
diff --git a/src/assets/icons/MailUnbind.svg b/src/assets/icons/MailUnbind.svg
new file mode 100644
index 0000000..2d68acf
--- /dev/null
+++ b/src/assets/icons/MailUnbind.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F6F7FB"/>
+<rect x="12.334" y="14.667" width="23.3333" height="18.6667" fill="#86909C"/>
+<path d="M12.334 14.667H35.6673V18.167C29.0348 24.1362 18.9665 24.1362 12.334 18.167V14.667Z" fill="#C3C7CE"/>
+<circle cx="23.9993" cy="23.4163" r="2.33333" fill="white"/>
+</svg>
diff --git a/src/assets/icons/Tel.svg b/src/assets/icons/Tel.svg
new file mode 100644
index 0000000..cd6bc96
--- /dev/null
+++ b/src/assets/icons/Tel.svg
@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F6F7FB"/>
+<path d="M15.25 11.75H32.75V36.25H15.25V11.75Z" fill="#4785FF"/>
+<path d="M15.25 28.0835H32.75V36.2502H15.25V28.0835Z" fill="#94C2FF"/>
+<circle cx="24.0013" cy="32.1668" r="2.33333" fill="white"/>
+<path d="M20.5 14.0835H27.5V15.8335H20.5V14.0835Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/TelUnbind.svg b/src/assets/icons/TelUnbind.svg
new file mode 100644
index 0000000..4f734cc
--- /dev/null
+++ b/src/assets/icons/TelUnbind.svg
@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#F6F7FB"/>
+<path d="M15.25 11.75H32.75V36.25H15.25V11.75Z" fill="#86909C"/>
+<path d="M15.25 28.0835H32.75V36.2502H15.25V28.0835Z" fill="white" fill-opacity="0.5"/>
+<circle cx="24.0013" cy="32.1668" r="2.33333" fill="white"/>
+<path d="M20.5 14.0835H27.5V15.8335H20.5V14.0835Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/id.svg b/src/assets/icons/id.svg
new file mode 100644
index 0000000..ae136f4
--- /dev/null
+++ b/src/assets/icons/id.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3C1 1.89543 1.89543 1 3 1H11C12.1046 1 13 1.89543 13 3V11C13 12.1046 12.1046 13 11 13H3C1.89543 13 1 12.1046 1 11V3Z" fill="#86909C"/>
+<path d="M5.01758 4V10H3.74902V4H5.01758Z" fill="white"/>
+<path d="M8.18823 10H6.06128V4H8.20581C8.80933 4 9.32886 4.12012 9.7644 4.36035C10.2 4.59863 10.5349 4.94141 10.7693 5.38867C11.0056 5.83594 11.1238 6.37109 11.1238 6.99414C11.1238 7.61914 11.0056 8.15625 10.7693 8.60547C10.5349 9.05469 10.198 9.39941 9.75854 9.63965C9.32104 9.87988 8.79761 10 8.18823 10ZM7.32983 8.91309H8.1355C8.5105 8.91309 8.82593 8.84668 9.08179 8.71387C9.3396 8.5791 9.53296 8.37109 9.66186 8.08984C9.79272 7.80664 9.85815 7.44141 9.85815 6.99414C9.85815 6.55078 9.79272 6.18848 9.66186 5.90723C9.53296 5.62598 9.34058 5.41895 9.08472 5.28613C8.82886 5.15332 8.51343 5.08691 8.13843 5.08691H7.32983V8.91309Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/loginProtect.svg b/src/assets/icons/loginProtect.svg
new file mode 100644
index 0000000..6eab8ad
--- /dev/null
+++ b/src/assets/icons/loginProtect.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 10L24 4L41 10V28.1366C41 32.389 38.7495 36.3238 35.0842 38.4799L30.0842 41.421C26.3289 43.6301 21.6711 43.6301 17.9158 41.421L12.9158 38.4799C9.25049 36.3238 7 32.389 7 28.1366V10Z" fill="#4785FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.139 17.9763L22.0848 33.2062L13.9395 25.0608L16.0608 22.9395L21.9154 28.7941L32.8612 16.0239L35.139 17.9763Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/loginStatus.svg b/src/assets/icons/loginStatus.svg
new file mode 100644
index 0000000..b8ebc67
--- /dev/null
+++ b/src/assets/icons/loginStatus.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45 38V21H21V38H36L41 44V38H45Z" fill="#94C2FF"/>
+<path d="M4 32V6H40V32H17L10 40V32H4Z" fill="#4785FF"/>
+<rect x="10" y="12" width="24" height="3" fill="white"/>
+<rect x="10" y="19" width="14" height="3" fill="white"/>
+</svg>
diff --git a/src/assets/icons/mfa.svg b/src/assets/icons/mfa.svg
new file mode 100644
index 0000000..d556611
--- /dev/null
+++ b/src/assets/icons/mfa.svg
@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6H38L44 15H4L10 6Z" fill="#94C2FF"/>
+<rect x="4" y="15" width="40" height="25" fill="#4785FF"/>
+<path d="M14.7539 20H17.3496V28.6367H15.668V22.7949C15.668 22.627 15.6699 22.3926 15.6738 22.0918C15.6777 21.7871 15.6797 21.5527 15.6797 21.3887L14.0449 28.6367H12.293L10.6699 21.3887C10.6699 21.5527 10.6719 21.7871 10.6758 22.0918C10.6797 22.3926 10.6816 22.627 10.6816 22.7949V28.6367H9V20H11.625L13.1953 26.791L14.7539 20Z" fill="white"/>
+<path d="M18.5454 20.0117H24.6684V21.5293H20.3384V23.5156H24.1294V25.0156H20.3384V28.6367H18.5454V20.0117Z" fill="white"/>
+<path d="M27.1064 25.373H29.2978L28.2197 21.9746L27.1064 25.373ZM27.2177 20H29.2568L32.3154 28.6367H30.3584L29.8017 26.8613H26.6201L26.0224 28.6367H24.1357L27.2177 20Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/password.svg b/src/assets/icons/password.svg
new file mode 100644
index 0000000..758fb56
--- /dev/null
+++ b/src/assets/icons/password.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 27V14C32 9.58172 28.4183 6 24 6C19.5817 6 16 9.58172 16 14V27C16 31.4183 19.5817 35 24 35C28.4183 35 32 31.4183 32 27ZM24 3C17.9249 3 13 7.92487 13 14V27C13 33.0751 17.9249 38 24 38C30.0751 38 35 33.0751 35 27V14C35 7.92487 30.0751 3 24 3Z" fill="#94C2FF"/>
+<path d="M6 13H42V41H6V13Z" fill="#4785FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 27C25.3807 27 26.5 25.8807 26.5 24.5C26.5 23.1193 25.3807 22 24 22C22.6193 22 21.5 23.1193 21.5 24.5C21.5 25.8807 22.6193 27 24 27ZM24 30C27.0376 30 29.5 27.5376 29.5 24.5C29.5 21.4624 27.0376 19 24 19C20.9624 19 18.5 21.4624 18.5 24.5C18.5 27.5376 20.9624 30 24 30Z" fill="white"/>
+<path d="M22.5 27H25.5V35H22.5V27Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/success.svg b/src/assets/icons/success.svg
new file mode 100644
index 0000000..4cf6830
--- /dev/null
+++ b/src/assets/icons/success.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00033 1.16666C10.222 1.16666 12.8337 3.77833 12.8337 6.99999C12.8337 10.2217 10.222 12.8333 7.00033 12.8333C3.77867 12.8333 1.16699 10.2217 1.16699 6.99999C1.16699 3.77833 3.77867 1.16666 7.00033 1.16666Z" fill="#00B42A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.14096 5.01194L9.47611 5.29316C9.66128 5.44838 9.68542 5.72433 9.53011 5.90943C9.53008 5.90946 9.53006 5.90949 9.52994 5.90944L6.60396 9.39457C6.44853 9.57951 6.17264 9.60361 5.9875 9.44842L5.31721 8.88598L8.52451 5.06578C8.67993 4.88084 8.95583 4.85674 9.14096 5.01194Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.19314 7.32433L4.48668 6.99832C4.64581 6.82159 4.91696 6.80433 5.09721 6.95947L7.15505 8.73065L6.59516 9.40433C6.44073 9.59016 6.16489 9.6156 5.97906 9.46117C5.97677 9.45926 5.9745 9.45733 5.97225 9.45538L4.23181 7.94776C4.04918 7.78956 4.02938 7.51326 4.18758 7.33063C4.18941 7.32851 4.19126 7.32641 4.19314 7.32433Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/warning.svg b/src/assets/icons/warning.svg
new file mode 100644
index 0000000..7d200d6
--- /dev/null
+++ b/src/assets/icons/warning.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.01" x="0.333333" y="0.333333" width="13.3333" height="13.3333" stroke="#F0F0F0" stroke-width="0.666667"/>
+<path d="M6.99995 13.4159C3.45612 13.4159 0.583282 10.543 0.583282 6.99919C0.583282 3.45536 3.45612 0.58252 6.99995 0.58252C10.5438 0.58252 13.4166 3.45536 13.4166 6.99919C13.4166 10.543 10.5438 13.4159 6.99995 13.4159Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99995 13.4159C3.45612 13.4159 0.583282 10.543 0.583282 6.99919C0.583282 3.45536 3.45612 0.58252 6.99995 0.58252C10.5438 0.58252 13.4166 3.45536 13.4166 6.99919C13.4166 10.543 10.5438 13.4159 6.99995 13.4159ZM6.1833 10.1492C6.1833 9.69815 6.54893 9.33252 6.99996 9.33252C7.45099 9.33252 7.81663 9.69815 7.81663 10.1492C7.81663 10.6002 7.45099 10.9659 6.99996 10.9659C6.54893 10.9659 6.1833 10.6002 6.1833 10.1492ZM6.21963 3.68084C6.1833 3.75214 6.1833 3.84548 6.1833 4.03217V7.92384C6.1833 8.11052 6.1833 8.20386 6.21963 8.27517C6.25158 8.33789 6.30258 8.38888 6.3653 8.42084C6.4366 8.45717 6.52994 8.45717 6.71663 8.45717H7.2833C7.46998 8.45717 7.56332 8.45717 7.63463 8.42084C7.69735 8.38888 7.74834 8.33789 7.7803 8.27517C7.81663 8.20386 7.81663 8.11052 7.81663 7.92384V4.03217C7.81663 3.84548 7.81663 3.75214 7.7803 3.68084C7.74834 3.61812 7.69735 3.56712 7.63463 3.53517C7.56332 3.49884 7.46998 3.49884 7.2833 3.49884H6.71663C6.52994 3.49884 6.4366 3.49884 6.3653 3.53517C6.30258 3.56712 6.25158 3.61812 6.21963 3.68084Z" fill="#FF8B07"/>
+</svg>
diff --git a/src/router/index.ts b/src/router/index.ts
index 2f3dfd9..b2951e5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -46,6 +46,12 @@ export const constantRoutes: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/social/callback',
+    name: 'SocialCallback',
+    component: () => import('@/views/login/social/index.vue'),
+    meta: { hidden: true }
+  },
   {
     path: '/setting',
     name: 'Setting',
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 8fee6e2..929d335 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -2,15 +2,18 @@ import { defineStore } from 'pinia'
 import { ref, reactive, computed } from 'vue'
 import { resetRouter } from '@/router'
 import { accountLogin as accountLoginApi, logout as logoutApi, getUserInfo as getUserInfoApi } from '@/apis'
-import type { UserInfo } from '@/apis'
+import { socialAuth, type UserInfo } from '@/apis'
 import { setToken, clearToken, getToken } from '@/utils/auth'
 import { resetHasRouteFlag } from '@/router/permission'
 import getAvatar from '@/utils/avatar'
 
 const storeSetup = () => {
-  const userInfo = reactive<Pick<UserInfo, 'nickname' | 'avatar'>>({
+  const userInfo = reactive<Pick<UserInfo, 'nickname' | 'avatar' | 'email' | 'phone' | 'registrationDate'>>({
     nickname: '',
-    avatar: ''
+    avatar: '',
+    email: '',
+    phone: '',
+    registrationDate: ''
   })
   const name = computed(() => userInfo.nickname)
   const avatar = computed(() => userInfo.avatar)
@@ -32,7 +35,16 @@ const storeSetup = () => {
     setToken(res.data.token)
     token.value = res.data.token
   }
-
+  // 三方账号身份登录
+  const socialLogin = async (source: string, req: any) => {
+    try {
+      const res = await socialAuth(source, req)
+      setToken(res.data.token)
+    } catch (err) {
+      clearToken()
+      throw err
+    }
+  }
   // 退出登录
   const logout = async () => {
     try {
@@ -57,6 +69,9 @@ const storeSetup = () => {
     const res = await getUserInfoApi()
     userInfo.nickname = res.data.nickname
     userInfo.avatar = getAvatar(res.data.avatar, res.data.gender)
+    userInfo.email = res.data.email
+    userInfo.phone = res.data.phone
+    userInfo.registrationDate = res.data.registrationDate
     if (res.data.roles && res.data.roles.length) {
       roles.value = res.data.roles
       permissions.value = res.data.permissions
@@ -71,6 +86,7 @@ const storeSetup = () => {
     roles,
     permissions,
     accountLogin,
+    socialLogin,
     logout,
     logoutCallBack,
     getInfo,
diff --git a/src/views/login/social/index.vue b/src/views/login/social/index.vue
new file mode 100644
index 0000000..38ba569
--- /dev/null
+++ b/src/views/login/social/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <a-spin :loading="loading" :tip="isLogin() ? '绑定中。。。' : '登录中。。。'">
+    <div></div>
+  </a-spin>
+</template>
+<script setup lang="ts">
+import { isLogin } from '@/utils/auth'
+import { bindSocialAccount } from '@/apis'
+import { useRoute, useRouter } from 'vue-router'
+import { getCurrentInstance, ref } from 'vue'
+const { proxy } = getCurrentInstance() as any
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const source = route.query.source as string
+
+/**
+ * 绑定第三方账号
+ */
+const handleBindSocial = () => {
+  if (loading.value) return
+  loading.value = true
+  const { redirect, ...othersQuery } = router.currentRoute.value.query
+  bindSocialAccount(source, othersQuery)
+    .then((res) => {
+      router.push({
+        path: '/setting/profile',
+        query: {
+          tab: 'security-setting'
+        }
+      })
+      proxy.$message.success(res.msg)
+    })
+    .catch(() => {
+      router.push({
+        path: '/setting/profile',
+        query: {
+          tab: 'security-setting'
+        }
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+if (isLogin()) {
+  handleBindSocial()
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SocialCallback'
+}
+</script>
+
+<style scoped lang="less">
+div {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  margin-left: -50px;
+  margin-top: -50px;
+}
+</style>
diff --git a/src/views/setting/components/Card.vue b/src/views/setting/components/Card.vue
new file mode 100644
index 0000000..0cd061e
--- /dev/null
+++ b/src/views/setting/components/Card.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="card">
+    <div class="card_header">
+      <slot name="header"></slot>
+    </div>
+    <div class="card_body">
+      <slot name="body"> </slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+<style scoped lang="scss">
+.card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background: var(--color-bg-1);
+  border: 1px solid var(--color-neutral-2);
+  .card_header {
+    padding: 18px 20px;
+    background: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      from(rgba(232, 244, 255, 0.5)),
+      to(hsla(0, 0%, 100%, 0))
+    );
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    background: linear-gradient(180deg, rgba(232, 244, 255, 0.5), hsla(0, 0%, 100%, 0));
+  }
+  .card_body {
+    flex: 1;
+    padding: 15px 28px;
+  }
+  .card_footer {
+    padding: 15px 28px;
+    border-top: 1px solid var(--color-neutral-2);
+  }
+}
+</style>
diff --git a/src/views/setting/components/VerifyModel.vue b/src/views/setting/components/VerifyModel.vue
new file mode 100644
index 0000000..9ac028e
--- /dev/null
+++ b/src/views/setting/components/VerifyModel.vue
@@ -0,0 +1,107 @@
+<template>
+  <a-modal v-model:visible="visible" :title="title" @before-ok="save" @cancel="handleCancel">
+    <a-form :model="form" ref="formRef">
+      <a-form-item
+        field="newPhone"
+        label="新手机号"
+        :rules="[{ required: true, match: Regexp.Phone, message: '请输入正确的手机号' }]"
+        v-if="verifyType === 'phone'"
+      >
+        <a-input v-model="form.newPhone" />
+      </a-form-item>
+      <a-form-item
+        field="email"
+        label="邮箱"
+        v-if="verifyType === 'email'"
+        :rules="[{ required: true, match: Regexp.Email, message: '请输入正确的邮箱' }]"
+      >
+        <a-input v-model="form.email" />
+      </a-form-item>
+      <a-form-item field="verifyCode" label="验证码" :rules="[{ required: true, message: '请输入正确的验证码' }]">
+        <a-input v-model="form.captcha" />
+        <a-button type="outline" @click="onSendCaptcha">发送验证码</a-button>
+      </a-form-item>
+      <a-form-item
+        field="currentPassword"
+        label="当前密码"
+        :rules="[
+          { required: true, message: '请输入当前密码' },
+          { match: Regexp.Password, message: '请输入格式的密码' }
+        ]"
+      >
+        <a-input v-model="form.currentPassword" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { getPhoneCaptcha, getEmailCaptcha, updateUserEmail } from '@/apis'
+import { encryptByRsa } from '@/utils/encrypt'
+import * as Regexp from '@/utils/regexp'
+import { Message, type Modal } from '@arco-design/web-vue'
+import { useUserStore } from '@/stores'
+const userStore = useUserStore()
+const visible = ref<boolean>(false)
+const form = reactive({
+  newPhone: '',
+  captcha: '',
+  currentPassword: '',
+  email: ''
+})
+const formRef = ref()
+const verifyType = ref()
+const title = computed(() => {
+  return verifyType.value === 'phone' ? '修改手机号' : '修改邮箱'
+})
+const onSendCaptcha = () => {
+  formRef.value.validateField(verifyType.value === 'phone' ? 'newPhone' : 'email', (validate) => {
+    if (!validate) {
+      // 发送验证码
+      if (verifyType.value === 'phone') {
+        //手机号
+        getPhoneCaptcha({ phone: form.newPhone }).then((res) => {
+          console.log(res)
+        })
+      } else if (verifyType.value === 'email') {
+        //邮箱
+        getEmailCaptcha({ email: form.email }).then((res) => {
+          console.log(res)
+        })
+      }
+    }
+  })
+}
+const save: InstanceType<typeof Modal>['onBeforeOk'] = async () => {
+  const flag = await formRef.value?.validate()
+  if (flag) return false
+  try {
+    const res = await updateUserEmail({
+      newEmail: form.email,
+      captcha: form.captcha,
+      currentPassword: encryptByRsa(form.currentPassword) as string
+    })
+    if (res.code === 200) {
+      Message.success('修改成功')
+      visible.value = false
+      // 修改成功后，重新获取用户信息
+      userStore.getInfo()
+      return true
+    }
+  } catch (error) {
+    return false
+  }
+  // return await saveApi()
+}
+const handleCancel = () => {
+  formRef.value?.resetFields()
+  visible.value = false
+}
+const open = (type: string) => {
+  verifyType.value = type
+  visible.value = true
+}
+defineExpose({
+  open
+})
+</script>
diff --git a/src/views/setting/profile/AvatarModel.vue b/src/views/setting/profile/AvatarModel.vue
new file mode 100644
index 0000000..b106616
--- /dev/null
+++ b/src/views/setting/profile/AvatarModel.vue
@@ -0,0 +1,54 @@
+<template>
+  <a-model v-model:visible="visible">
+    <div class="cropper">
+      // 裁剪左侧内容
+      <div class="cropper_left">
+        <vueCropper
+          :tyle="{ width: '400px' }"
+          ref="cropperRef"
+          :img="options.img"
+          :info="true"
+          :info-true="options.infoTrue"
+          :auto-crop="options.autoCrop"
+          :fixed-box="options.fixedBox"
+          :can-move="options.canMoveBox"
+          :can-scale="options.canScale"
+          :fixed-number="fixedNumber"
+          :fixed="options.fixed"
+          :full="options.full"
+          :center-box="options.centerBox"
+          @real-time="previewHandle"
+        />
+        <div class="reupload_box">
+          <div class="reupload_text" @click="uploadFile('reload')">重新上传</div>
+          <div>
+            <el-icon class="rotate_right" @click="changeScale(1)">
+              <CirclePlus />
+            </el-icon>
+            <el-icon class="rotate_right" @click="changeScale(-1)">
+              <Remove />
+            </el-icon>
+            <el-icon class="rotate_right" @click="rotateRight">
+              <RefreshRight />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+      <div class="cropper_right">
+        <div class="preview_text">预览</div>
+        <div :style="getStyle" class="previewImg">
+          <div :style="previewFileStyle">
+            <img :style="previews.img" :src="previews.url" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-model>
+</template>
+<script setup lang="ts">
+import 'vue-cropper/dist/index.css'
+import VueCropper from 'vue-cropper'
+import { ref } from 'vue'
+
+const visible = ref(true)
+</script>
diff --git a/src/views/setting/profile/LeftBox.vue b/src/views/setting/profile/LeftBox.vue
new file mode 100644
index 0000000..a4bd882
--- /dev/null
+++ b/src/views/setting/profile/LeftBox.vue
@@ -0,0 +1,113 @@
+<template>
+  <Card style="height: 600px">
+    <template #header> 主账号信息 </template>
+    <template #body>
+      <div class="body">
+        <section>
+          <div class="avatar">
+            <img src="https://q1.itc.cn/q_70/images03/20240320/fcf023d835c54f78bac6c7efc98fbb4c.jpeg" />
+          </div>
+          <div class="name">
+            <span style="margin-right: 10px">{{ userInfo.nickname }}</span>
+            <icon-edit :size="16" class="btn" @click="onEditNickName" />
+          </div>
+          <div class="id">
+            <GiSvgIcon name="id" :size="16" />
+            <span style="margin-left: 10px">88888888</span>
+          </div>
+        </section>
+        <footer>
+          <div class="footer_item">
+            <div>
+              <span style="margin-right: 10px">安全手机</span>
+              <span>{{ userInfo.phone }}</span>
+            </div>
+            <div>
+              <span
+                ><GiSvgIcon :name="userInfo.email ? 'success' : 'warning'" :size="14" /><span
+                  style="margin-left: 5px; font-size: 12px"
+                  >{{ userInfo.phone ? '已绑定' : '未绑定' }}</span
+                ></span
+              >
+              <a-divider direction="vertical" />
+              <icon-edit :size="16" class="btn" @click="openVerifyModel('phone')" />
+            </div>
+          </div>
+          <div class="footer_item">
+            <div>
+              <span style="margin-right: 10px">安全邮箱</span>
+              <span>{{ userInfo.email }}</span>
+            </div>
+            <div>
+              <span
+                ><GiSvgIcon :name="userInfo.email ? 'success' : 'warning'" :size="14" /><span
+                  style="margin-left: 5px; font-size: 12px"
+                  >{{ userInfo.email ? '已绑定' : '未绑定' }}</span
+                ></span
+              >
+              <a-divider direction="vertical" />
+              <icon-edit :size="16" class="btn" @click="openVerifyModel('email')" />
+            </div>
+          </div>
+        </footer>
+      </div>
+    </template>
+    <template #footer>
+      <div class="footer">注册于 {{ userInfo.registrationDate }}</div>
+    </template>
+  </Card>
+  <VerifyModel ref="verifyModelRef" />
+</template>
+<script setup lang="ts">
+import Card from '../components/Card.vue'
+import { updateUserBaseInfo } from '@/apis'
+import VerifyModel from '../components/VerifyModel.vue'
+import { useUserStore } from '@/stores'
+const userStore = useUserStore()
+const userInfo = computed(() => userStore.userInfo)
+const verifyModelRef = ref<InstanceType<typeof VerifyModel>>()
+const onEditNickName = () => {
+  userStore.editNickNameVisible = true
+}
+const openVerifyModel = (type: 'phone' | 'email') => {
+  verifyModelRef.value?.open(type)
+}
+</script>
+<style scoped lang="scss">
+.body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .btn {
+    cursor: pointer;
+  }
+  & > section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .avatar > img {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+    .name {
+      font-size: 20px;
+      margin: 20px 0;
+    }
+  }
+  & > footer .footer_item {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 10px;
+    font-size: 12px;
+  }
+}
+.footer {
+  padding: 15px 28px;
+  text-align: center;
+  border-top: 1px solid var(--color-neutral-2);
+}
+</style>
diff --git a/src/views/setting/profile/RightBox.vue b/src/views/setting/profile/RightBox.vue
index d906cda..4fb93a7 100644
--- a/src/views/setting/profile/RightBox.vue
+++ b/src/views/setting/profile/RightBox.vue
@@ -1,161 +1,137 @@
 <template>
-  <div class="right-box">
-    <section class="right-box__header">
-      <a-avatar :size="60" :trigger-icon-style="{ color: '#3491FA' }">
-        <img :src="userStore.avatar" />
-        <template #trigger-icon>
-          <IconCamera />
-        </template>
-      </a-avatar>
-      <section class="username">{{ userStore.name }}</section>
-      <ul class="list">
-        <li><icon-user /><span>前端开发工程师</span></li>
-        <li><icon-safe /><span>前端</span></li>
-        <li><icon-location /><span>广州</span></li>
-      </ul>
-      <a-button type="primary" class="edit-btn"
-        ><template #icon> <icon-edit /> </template>编辑信息</a-button
-      >
-    </section>
-
-    <a-tabs hide-content default-active-key="2">
-      <a-tab-pane key="1">
-        <template #title>文章</template>
-      </a-tab-pane>
-      <a-tab-pane key="2">
-        <template #title>项目</template>
-      </a-tab-pane>
-      <a-tab-pane key="3">
-        <template #title>应用（3）</template>
-      </a-tab-pane>
-    </a-tabs>
-
-    <section class="right-box__comment">
-      <a-comment
-        v-for="(item, index) in list"
-        :key="index"
-        :author="item.name"
-        datetime="1个小时之前"
-        align="right"
-        class="comment-item"
-      >
-        <template #actions>
-          <a-space :size="20">
-            <span class="action" key="heart">
-              <span><IconHeart /></span>
-              <span>83</span>
-            </span>
-            <span class="action" key="star">
-              <span><IconStar /></span>
-              <span>3</span>
-            </span>
-            <span class="action" key="reply"> <IconMessage /><span>回复</span></span>
-          </a-space>
-        </template>
-        <template #avatar>
-          <a-avatar>
-            <img alt="avatar" :src="item.avatar" />
-          </a-avatar>
-        </template>
-        <template #content>
-          <div class="text">{{ item.text }}</div>
-        </template>
-      </a-comment>
-    </section>
-  </div>
+  <Card>
+    <template #header> 登录方式 </template>
+    <template #body>
+      <div class="mode-list">
+        <div v-for="item in modeList" :key="item.title" class="mode-item">
+          <div class="mode-item-box">
+            <div class="mode-item-icon">
+              <GiSvgIcon :name="item.icon" :size="50" />
+            </div>
+            <div class="mode-item-content">
+              <div class="mode-item-title">
+                <div>{{ item.title }}</div>
+                <div style="margin-left: 10px">
+                  <GiSvgIcon :name="item.status ? 'success' : 'warning'" :size="14" /><span
+                    style="margin-left: 5px; font-size: 12px"
+                    >{{ item.status ? '已绑定' : '未绑定' }}</span
+                  >
+                </div>
+              </div>
+              <div class="mode-item-subtitle">{{ item.subtitle }}</div>
+            </div>
+          </div>
+          <div class="model-item-btn">
+            <a-button @click="openVerifyModel(item.type, item.status)" v-if="item.jumpMode == 'modal'">{{
+              item.status ? '修改' : '绑定'
+            }}</a-button>
+            <a-button @click="onBinding(item.type, item.status)" v-else-if="item.jumpMode == 'link'">{{
+              item.status ? '解绑' : '绑定'
+            }}</a-button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Card>
+  <VerifyModel ref="verifyModelRef" />
 </template>
 
 <script setup lang="ts">
 import { useUserStore } from '@/stores'
+import Card from '../components/Card.vue'
+import VerifyModel from '../components/VerifyModel.vue'
+import { socialAuth, getSocialAccount, unbindSocialAccount } from '@/apis'
+interface ModeItem {
+  title: string
+  icon: string
+  subtitle: string
+  type: 'phone' | 'email' | 'gitee' | 'github'
+  jumpMode: 'link' | 'modal'
+  status: boolean
+}
 const userStore = useUserStore()
-
-const list = [
+const userInfo = computed(() => userStore.userInfo)
+const verifyModelRef = ref<InstanceType<typeof VerifyModel>>()
+const openVerifyModel = (type: 'phone' | 'email') => {
+  verifyModelRef.value?.open(type)
+}
+const socialList = ref<any>([])
+const modeList = ref<ModeItem[]>([])
+modeList.value = [
   {
-    avatar:
-      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-    name: 'Lin',
-    text: '生活会让你苦上一阵子，等你适应以后，再让你苦上一辈子'
+    title: '绑定手机号',
+    icon: 'Tel',
+    subtitle: `${userInfo.value.phone || '绑定后'},可通过手机验证码快捷登录`,
+    type: 'phone',
+    jumpMode: 'modal',
+    status: userInfo.value.phone ? true : false
   },
   {
-    avatar:
-      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-    name: 'Lin',
-    text: '我从一无所有，到资产过亿，从家徒四壁，到豪车别墅，这些不是靠的别人，完全是靠我自己，一点一滴，想出来的'
+    title: '绑定邮箱',
+    icon: 'Mail',
+    subtitle: `${userInfo.value.email || '绑定后'},可通过邮箱验证码进行登录`,
+    type: 'email',
+    jumpMode: 'modal',
+    status: userInfo.value.email ? true : false
   },
   {
-    avatar:
-      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-    name: 'Lin',
-    text: '有很多事情你当时想不通，别着急，过一段时间你再想，就想不起来了'
+    title: '绑定Gitee',
+    icon: 'gitee',
+    subtitle: '绑定后，可通过Gitee进行登录',
+    jumpMode: 'link',
+    type: 'gitee',
+    status: socialList.value.some((el) => el == 'gitee')
   },
   {
-    avatar:
-      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-    name: 'Lin',
-    text: '⽐你优秀的⼈都⽐你努⼒，你努力还有什么用'
-  },
-  {
-    avatar:
-      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-    name: '窃·格瓦拉',
-    text: '打工这辈子是不可能打工的，做生意又不会做，就是偷这种东西，才可以维持生活这样子'
+    title: '绑定GitHub',
+    icon: 'github',
+    subtitle: '绑定后，可通过github进行登录',
+    type: 'github',
+    jumpMode: 'link',
+    status: socialList.value.some((el) => el == 'github')
   }
 ]
+const initData = () => {
+  getSocialAccount().then((res) => {
+    socialList.value = res.data.map((el) => el.source)
+  })
+}
+onMounted(() => {
+  initData()
+})
+const onBinding = (type: string, status: boolean) => {
+  if (!status) {
+    socialAuth(type).then((res) => {
+      window.open(res.data.authorizeUrl, '_self')
+    })
+  } else {
+    unbindSocialAccount(type).then((res) => {
+      if (res.code == 200) {
+        userStore.getInfo()
+      }
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.edit-btn {
-  color: #fff;
-  border-color: #fff;
-  background: transparent;
-  &:hover {
-    background: rgb(var(--primary-5));
-    border-color: rgb(var(--primary-5));
-  }
-}
-
-.right-box {
-  flex: 1;
-  background-color: var(--color-bg-1);
-  display: flex;
-  flex-direction: column;
-  border-radius: 2px;
-  overflow: hidden;
-  overflow-y: auto;
-  &__header {
-    min-height: 204px;
-    height: fit-content;
+.mode-list {
+  .mode-item {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: var(--color-white);
-    background-color: rgb(var(--primary-6));
-    .username {
-      font-size: 16px;
-      font-weight: 500;
-      margin: 10px 0;
-    }
-    .list {
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .mode-item-box {
       display: flex;
-      margin-bottom: 10px;
-      > li {
-        margin-right: 15px;
-        span {
-          margin-left: 2px;
-        }
+      align-items: center;
+      .mode-item-icon {
+        margin-right: 10px;
       }
-    }
-  }
-  &__comment {
-    flex: 1;
-    padding: 20px 30px;
-    padding-left: 16px;
-    overflow: auto;
-    .comment-item {
-      margin-bottom: 15px;
-      .text {
-        color: $color-text-2;
+      .mode-item-content > div {
+        line-height: 26px;
+      }
+      .mode-item-content .mode-item-title {
+        display: flex;
+        align-items: center;
       }
     }
   }
diff --git a/src/views/setting/profile/index.vue b/src/views/setting/profile/index.vue
index 4a66b47..150b9fe 100644
--- a/src/views/setting/profile/index.vue
+++ b/src/views/setting/profile/index.vue
@@ -1,66 +1,12 @@
 <template>
   <div class="user">
     <div class="user__info">
-      <a-row>
-        <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="8" :xxl="7">
-          <section class="user-card">
-            <div class="user-card__header">
-              <a-avatar :size="60" :trigger-icon-style="{ color: '#3491FA' }">
-                <img :src="userStore.avatar" />
-                <template #trigger-icon>
-                  <IconCamera />
-                </template>
-              </a-avatar>
-              <div class="name">{{ userStore.name }}</div>
-              <p class="desc">尘缘已定，不念过往</p>
-            </div>
-
-            <ul class="user-card__list">
-              <li class="list-item">
-                <span class="icon"><icon-bookmark :stroke-width="1" :size="16" /></span>
-                <span>前端工程师</span>
-              </li>
-              <li class="list-item">
-                <span class="icon"><icon-branch :stroke-width="1" :size="16" /></span
-                ><span>中台-数据平台团队-前端创新团队-前端架构和平台工具团队</span>
-              </li>
-              <li class="list-item">
-                <span class="icon"><icon-location :stroke-width="1" :size="16" /></span><span>广州市</span>
-              </li>
-            </ul>
-
-            <a-row justify="space-around" class="user-card__images">
-              <img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-weibo.cbf658a0.svg" />
-              <img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-zhihu.1dc5a4ff.svg" />
-              <img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-facebook.e95df60e.svg" />
-              <img src="https://file.iviewui.com/admin-pro-dist/img/icon-social-twitter.5db80e81.svg" />
-            </a-row>
-
-            <a-divider style="border-bottom-style: dashed" />
-
-            <a-typography-title :heading="6">标签</a-typography-title>
-            <a-space wrap :size="5">
-              <a-tag>vue3</a-tag>
-              <a-tag>pinia</a-tag>
-              <a-tag>vite</a-tag>
-              <a-tag>ts</a-tag>
-              <a-tag>arco design</a-tag>
-            </a-space>
-
-            <a-descriptions :column="1" style="margin-top: 20px">
-              <a-descriptions-item label="星座">双鱼座</a-descriptions-item>
-              <a-descriptions-item label="生日">07月16日</a-descriptions-item>
-              <a-descriptions-item label="爱好">
-                <a-space wrap :size="5">
-                  <a-tag color="purple">王者荣耀</a-tag>
-                  <a-tag color="magenta">旅行</a-tag>
-                </a-space>
-              </a-descriptions-item>
-            </a-descriptions>
-          </section>
+      <a-row justify="space-between">
+        <a-col :span="7" style="padding-right: 20px">
+          <LeftBox />
         </a-col>
-        <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="16" :xxl="17">
-          <RightBox></RightBox>
+        <a-col :span="17">
+          <RightBox />
         </a-col>
       </a-row>
     </div>
@@ -71,7 +17,7 @@
 import { Message } from '@arco-design/web-vue'
 import { useUserStore } from '@/stores'
 import RightBox from './RightBox.vue'
-
+import LeftBox from './LeftBox.vue'
 defineOptions({ name: 'Profile' })
 
 const route = useRoute()
@@ -80,7 +26,7 @@ const userStore = useUserStore()
 
 <style lang="scss" scoped>
 .user {
-  background-color: var(--color-bg-1);
+  // background-color: var(--color-bg-1);
   &__alert {
     padding: $padding;
     padding-bottom: 0;
@@ -88,51 +34,7 @@ const userStore = useUserStore()
   &__info {
     box-sizing: border-box;
     overflow: hidden;
-    display: flex;
-  }
-}
-
-.user-card {
-  width: 100%;
-  height: fit-content;
-  padding: $padding;
-  box-sizing: border-box;
-  background: var(--color-bg-1);
-  border-radius: 2px;
-  &__header {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .name {
-      font-size: 20px;
-      font-weight: bolder;
-      line-height: 1.5;
-      margin: 8px;
-      color: $color-text-1;
-    }
-    .desc {
-      font-size: 12px;
-      color: $color-text-3;
-    }
-  }
-  &__list {
-    margin-top: 20px;
-    .list-item {
-      padding-bottom: 16px;
-      display: flex;
-      > .icon {
-        margin-right: 8px;
-      }
-    }
-  }
-  &__images {
-    margin: 10px 0;
-    img {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-    }
+    // display: flex;
   }
 }
 </style>
diff --git a/src/views/setting/security/AccountProtection.vue b/src/views/setting/security/AccountProtection.vue
new file mode 100644
index 0000000..1c95ad0
--- /dev/null
+++ b/src/views/setting/security/AccountProtection.vue
@@ -0,0 +1,99 @@
+<template>
+  <Card>
+    <template #header> 账号保护 </template>
+    <template #body>
+      <div class="mode-item" v-for="item in modeList" :key="item.title">
+        <div class="mode-item-content">
+          <div class="icon"><GiSvgIcon :name="item.icon" :size="36" /></div>
+          <div>
+            <div style="font-size: 14px; font-weight: 500; line-height: 28px; display: flex; align-items: center">
+              <span>{{ item.title }}</span>
+              <div style="margin-left: 10px">
+                <GiSvgIcon :name="item.status ? 'success' : 'warning'" :size="14" /><span
+                  style="margin-left: 5px; font-size: 12px"
+                  >{{ item.status ? '已开启' : '未开启' }}</span
+                >
+              </div>
+            </div>
+            <div style="font-size: 12px">{{ item.subtitle }}</div>
+          </div>
+        </div>
+        <div>
+          <a-button disabled>未开放</a-button>
+        </div>
+      </div>
+      <div>
+        <div class="content_title">
+          <div class="icon"><GiSvgIcon name="loginProtect" :size="36" /></div>
+          <div>
+            <div style="font-size: 14px; font-weight: 500; line-height: 28px">操作保护</div>
+            <div style="font-size: 12px">进行敏感操作时需进行二次身份校验</div>
+          </div>
+        </div>
+        <div class="content_Box">
+          <p>可使用<span class="subTitle">手机号</span>进行二次身份验证</p>
+          <p>未设置密码有效期</p>
+          <p>敏感操作二次身份验证后<span class="subTitle">10</span>分钟内不需要再次进行验证</p>
+          <p class="link_btn">修改规则(未开发)</p>
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+<script setup lang="ts">
+import Card from '../components/Card.vue'
+interface ModeItem {
+  title: string
+  icon: string
+  subtitle: string
+  status: boolean
+}
+const modeList = ref<ModeItem[]>([])
+modeList.value = [
+  { title: '登录保护', icon: 'loginProtect', subtitle: '开启登录保护后，账号登录需进行二次身份验证', status: false }
+]
+</script>
+<style scoped lang="scss">
+.mode-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  .mode-item-content {
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 10px;
+    }
+  }
+}
+.content_title {
+  display: flex;
+  align-items: center;
+  .icon {
+    margin-right: 10px;
+  }
+}
+.content_Box {
+  border-left: 1px solid #ccc;
+  margin-left: 40px;
+  padding-left: 10px;
+  font-size: 12px;
+  margin-top: 20px;
+  & > p {
+    margin: 10px;
+  }
+}
+.link_btn {
+  cursor: pointer;
+  color: #007aff;
+  &:hover {
+    color: rgba($color: #007aff, $alpha: 0.8);
+  }
+}
+.subTitle {
+  background: var(--color-neutral-2);
+  padding: 1px 5px;
+  margin: 0px 5px;
+  border-radius: 3px;
+}
+</style>
diff --git a/src/views/setting/security/BasicsSetting.vue b/src/views/setting/security/BasicsSetting.vue
new file mode 100644
index 0000000..0888312
--- /dev/null
+++ b/src/views/setting/security/BasicsSetting.vue
@@ -0,0 +1,62 @@
+<template>
+  <Card style="height: 100%">
+    <template #header>基本设置</template>
+    <template #body>
+      <div class="mode-item" v-for="item in modeList" :key="item.title">
+        <div class="mode-item-content">
+          <div class="icon"><GiSvgIcon :name="item.icon" :size="36" /></div>
+          <div>
+            <div style="font-size: 14px; font-weight: 500; line-height: 28px; display: flex; align-items: center">
+              <span>{{ item.title }}</span>
+              <div style="margin-left: 10px">
+                <GiSvgIcon :name="item.status ? 'success' : 'warning'" :size="14" /><span
+                  style="margin-left: 5px; font-size: 12px"
+                  >{{ item.status ? '已开启' : '未开启' }}</span
+                >
+              </div>
+            </div>
+            <div style="font-size: 12px">{{ item.subtitle }}</div>
+          </div>
+        </div>
+        <div>
+          <a-button @click="openVerifyModel(item.type)">修改</a-button>
+        </div>
+      </div>
+    </template>
+  </Card>
+  <VerifyModel ref="verifyModelRef" />
+</template>
+<script setup lang="ts">
+import Card from '../components/Card.vue'
+import VerifyModel from '../components/VerifyModel.vue'
+interface ModeItem {
+  title: string
+  icon: string
+  subtitle: string
+  type: 'phone' | 'email'
+  status: boolean
+}
+const modeList = ref<ModeItem[]>([])
+modeList.value = [
+  { title: '绑定手机号', icon: 'Tel', subtitle: '+86******88888可通过手机验证码快捷登录', type: 'phone', status: true },
+  { title: '绑定邮箱', icon: 'Mail', subtitle: '邮箱可用于身份验证、密码找回、通知接收', type: 'email', status: true }
+]
+const verifyModelRef = ref<InstanceType<typeof VerifyModel>>()
+const openVerifyModel = (type: 'phone' | 'email') => {
+  verifyModelRef.value?.open(type)
+}
+</script>
+<style lang="scss" scoped>
+.mode-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  .mode-item-content {
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/setting/security/PasswordPolicy.vue b/src/views/setting/security/PasswordPolicy.vue
new file mode 100644
index 0000000..a563449
--- /dev/null
+++ b/src/views/setting/security/PasswordPolicy.vue
@@ -0,0 +1,61 @@
+<template>
+  <Card>
+    <template #header> 密码策略 </template>
+    <template #body>
+      <div class="content_title">
+        <div class="icon"><GiSvgIcon name="password" :size="36" /></div>
+        <div>
+          <div style="font-size: 14px; font-weight: 500; line-height: 28px">登录密码</div>
+          <div style="font-size: 12px">为了您的账号安全，建议定期修改密码</div>
+        </div>
+      </div>
+      <div class="content_Box">
+        <p>
+          密码至少包含 <span class="subTitle">大写字母</span><span class="subTitle">小写字母</span
+          ><span class="subTitle">数字</span><span class="subTitle">特殊字符</span>3种
+        </p>
+        <p>限制密码长度至少为<span class="subTitle">8</span>位</p>
+        <p>未设置密码有效期</p>
+        <p>新密码不能与历史前<span class="subTitle">3</span>次密码重复</p>
+        <p>1小时内密码错误可重试 <span class="subTitle">5</span>次</p>
+        <p>超过错误密码重试次数账号将被锁定<span class="subTitle">60</span>分钟</p>
+        <p class="link_btn">修改规则(未开发)</p>
+      </div>
+    </template>
+  </Card>
+</template>
+<script setup lang="ts">
+import Card from '../components/Card.vue'
+</script>
+<style scoped lang="scss">
+.content_title {
+  display: flex;
+  align-items: center;
+  .icon {
+    margin-right: 10px;
+  }
+}
+.content_Box {
+  border-left: 1px solid #ccc;
+  margin-left: 40px;
+  padding-left: 10px;
+  font-size: 12px;
+  margin-top: 20px;
+  & > p {
+    margin: 10px;
+  }
+}
+.link_btn {
+  cursor: pointer;
+  color: #007aff;
+  &:hover {
+    color: rgba($color: #007aff, $alpha: 0.8);
+  }
+}
+.subTitle {
+  background: var(--color-neutral-2);
+  padding: 1px 5px;
+  margin: 0px 5px;
+  border-radius: 3px;
+}
+</style>
diff --git a/src/views/setting/security/SessionSetting.vue b/src/views/setting/security/SessionSetting.vue
new file mode 100644
index 0000000..37a8ed6
--- /dev/null
+++ b/src/views/setting/security/SessionSetting.vue
@@ -0,0 +1,48 @@
+<template>
+  <Card style="height: 100%">
+    <template #header> 登录会话设置 </template>
+    <template #body>
+      <div class="content_title">
+        <div class="icon"><GiSvgIcon name="loginStatus" :size="36" /></div>
+        <div>
+          <div style="font-size: 14px; font-weight: 500; line-height: 28px">登录态保持时间设置</div>
+          <div style="font-size: 12px">保持登录状态的限制</div>
+        </div>
+      </div>
+      <div class="content_Box">
+        <p>操作登录会话保持120分钟，超时登录会话将失效</p>
+        <p>登录会话最大保持0天，超时登录会话将失效</p>
+        <p class="link_btn">修改规则(未开发)</p>
+      </div>
+    </template>
+  </Card>
+</template>
+<script setup lang="ts">
+import Card from '../components/Card.vue'
+</script>
+<style scoped lang="scss">
+.content_title {
+  display: flex;
+  align-items: center;
+  .icon {
+    margin-right: 10px;
+  }
+}
+.content_Box {
+  border-left: 1px solid #ccc;
+  margin-left: 40px;
+  padding-left: 10px;
+  font-size: 12px;
+  margin-top: 20px;
+  & > p {
+    margin: 10px;
+  }
+}
+.link_btn {
+  cursor: pointer;
+  color: #007aff;
+  &:hover {
+    color: rgba($color: #007aff, $alpha: 0.8);
+  }
+}
+</style>
diff --git a/src/views/setting/security/index.vue b/src/views/setting/security/index.vue
index c88bb02..3a55964 100644
--- a/src/views/setting/security/index.vue
+++ b/src/views/setting/security/index.vue
@@ -1,10 +1,30 @@
 <template>
-  <div class="page"></div>
+  <div class="page">
+    <div class="flex_box">
+      <div class="flex_item_container">
+        <BasicsSetting />
+      </div>
+      <div class="flex_item_container">
+        <SessionSetting />
+      </div>
+    </div>
+    <div class="flex_box">
+      <div class="flex_item_container">
+        <PasswordPolicy />
+      </div>
+      <div class="flex_item_container">
+        <AccountProtection />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Message } from '@arco-design/web-vue'
-
+import BasicsSetting from './BasicsSetting.vue'
+import SessionSetting from './SessionSetting.vue'
+import PasswordPolicy from './PasswordPolicy.vue'
+import AccountProtection from './AccountProtection.vue'
 defineOptions({ name: 'Security' })
 
 const route = useRoute()
@@ -15,5 +35,17 @@ const form = reactive({ name: '' })
 .page {
   padding: $padding;
   background-color: var(--color-bg-1);
+  .flex_box {
+    display: flex;
+    margin-bottom: 20px;
+    height: 100%;
+    .flex_item_container {
+      width: 100%;
+      height: 100%;
+    }
+    & .flex_item_container:first-child {
+      margin-right: 20px;
+    }
+  }
 }
 </style>