diff --git a/package.json b/package.json
index 6a4dc7e..195aa40 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
     "@vueuse/core": "^9.13.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.12",
+    "less": "^4.2.0",
     "nzh": "^1.0.13",
+    "pinia-plugin-persistedstate": "^4.1.3",
     "vconsole": "^3.15.1",
     "vue": "^3.3.8",
     "vue-i18n": "^9.6.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acfe950..276fadc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
         version: 3.0.0-alpha-4000020240111001(@dcloudio/types@3.4.12)(postcss@8.4.40)(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/uni-app-plus':
         specifier: 3.0.0-alpha-4000020240111001
-        version: 3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+        version: 3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/uni-components':
         specifier: 3.0.0-alpha-4000020240111001
         version: 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vue@3.4.35(typescript@5.5.4))
@@ -68,9 +68,15 @@ importers:
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
+      less:
+        specifier: ^4.2.0
+        version: 4.2.0
       nzh:
         specifier: ^1.0.13
         version: 1.0.13
+      pinia-plugin-persistedstate:
+        specifier: ^4.1.3
+        version: 4.1.3(pinia@2.0.36(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2)
       vconsole:
         specifier: ^3.15.1
         version: 3.15.1
@@ -98,7 +104,7 @@ importers:
         version: 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/vite-plugin-uni':
         specifier: 3.0.0-alpha-4000020240111001
-        version: 3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+        version: 3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
       '@iconify-json/carbon':
         specifier: ^1.1.27
         version: 1.1.36
@@ -113,7 +119,7 @@ importers:
         version: 0.1.4
       '@uni-helper/unocss-preset-uni':
         specifier: ^0.2.9
-        version: 0.2.9(@unocss/preset-mini@0.62.3)(@unocss/rule-utils@0.62.3)(@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))(unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))))(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
+        version: 0.2.9(@unocss/preset-mini@0.62.3)(@unocss/rule-utils@0.62.3)(@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))))(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       '@uni-helper/volar-service-uni-pages':
         specifier: ^0.2.14
         version: 0.2.26
@@ -143,13 +149,13 @@ importers:
         version: 5.5.4
       unocss:
         specifier: ^0.58.9
-        version: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+        version: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       unocss-applet:
         specifier: ^0.8.2
-        version: 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
+        version: 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
       vite:
         specifier: ^5.0.11
-        version: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+        version: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.5.4)
@@ -170,18 +176,34 @@ packages:
     resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.25.2':
     resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/compat-data@7.26.2':
+    resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/core@7.25.2':
     resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/core@7.26.0':
+    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/generator@7.25.0':
     resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.26.2':
+    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.24.7':
     resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
     engines: {node: '>=6.9.0'}
@@ -194,6 +216,10 @@ packages:
     resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-compilation-targets@7.25.9':
+    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-create-class-features-plugin@7.25.0':
     resolution: {integrity: sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==}
     engines: {node: '>=6.9.0'}
@@ -223,12 +249,22 @@ packages:
     resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.25.2':
     resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-optimise-call-expression@7.24.7':
     resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
     engines: {node: '>=6.9.0'}
@@ -261,14 +297,26 @@ packages:
     resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.24.7':
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.24.8':
     resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-wrap-function@7.25.0':
     resolution: {integrity: sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==}
     engines: {node: '>=6.9.0'}
@@ -277,6 +325,10 @@ packages:
     resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helpers@7.26.0':
+    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/highlight@7.24.7':
     resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
     engines: {node: '>=6.9.0'}
@@ -286,6 +338,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3':
     resolution: {integrity: sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==}
     engines: {node: '>=6.9.0'}
@@ -759,18 +816,34 @@ packages:
     resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/standalone@7.26.2':
+    resolution: {integrity: sha512-i2VbegsRfwa9yq3xmfDX3tG2yh9K0cCqwpSyVG2nPxifh0EOnucAZUeO/g4lW2Zfg03aPJNtPfxQbDHzXc7H+w==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.0':
     resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.25.3':
     resolution: {integrity: sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.25.9':
+    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.25.2':
     resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
@@ -1609,6 +1682,14 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@nuxt/kit@3.14.1592':
+    resolution: {integrity: sha512-r9r8bISBBisvfcNgNL3dSIQHSBe0v5YkX5zwNblIC2T0CIEgxEVoM5rq9O5wqgb5OEydsHTtT2hL57vdv6VT2w==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  '@nuxt/schema@3.14.1592':
+    resolution: {integrity: sha512-A1d/08ueX8stTXNkvGqnr1eEXZgvKn+vj6s7jXhZNWApUSqMgItU4VK28vrrdpKbjIPwq2SwhnGOHUYvN9HwCQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
@@ -1625,6 +1706,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.19.2':
     resolution: {integrity: sha512-OHflWINKtoCFSpm/WmuQaWW4jeX+3Qt3XQDepkkiFTsoxFc5BpF3Z5aDxFZgBqRjO6ATP5+b1iilp4kGIZVWlA==}
     cpu: [arm]
@@ -1714,6 +1804,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@sindresorhus/merge-streams@2.3.0':
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
+
   '@sinonjs/commons@1.8.6':
     resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
 
@@ -2130,6 +2224,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   address@1.2.2:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
@@ -2282,6 +2381,11 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
@@ -2305,6 +2409,14 @@ packages:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
 
+  c12@2.0.1:
+    resolution: {integrity: sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2332,6 +2444,9 @@ packages:
   caniuse-lite@1.0.30001646:
     resolution: {integrity: sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==}
 
+  caniuse-lite@1.0.30001683:
+    resolution: {integrity: sha512-iqmNnThZ0n70mNwvxpEC2nBJ037ZHZUoBI5Gorh1Mw6IlEAZujEoU1tXA628iZfzm7R9FvFzxbfdgml82a3k8Q==}
+
   centra@2.7.0:
     resolution: {integrity: sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==}
 
@@ -2355,10 +2470,21 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
   cjs-module-lexer@1.3.1:
     resolution: {integrity: sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==}
 
@@ -2410,6 +2536,9 @@ packages:
   compare-versions@3.6.0:
     resolution: {integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==}
 
+  compatx@0.1.8:
+    resolution: {integrity: sha512-jcbsEAR81Bt5s1qOFymBufmCbXCXbk0Ql+K5ouj6gCyx2yHlu6AgmGIi9HxfKixpUDO5bCFJUHQ5uM6ecbTebw==}
+
   computeds@0.0.1:
     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
 
@@ -2419,6 +2548,9 @@ packages:
   confbox@0.1.7:
     resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
   consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2448,6 +2580,9 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+
   copy-text-to-clipboard@3.2.0:
     resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
     engines: {node: '>=12'}
@@ -2544,6 +2679,9 @@ packages:
   dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
+  deep-pick-omit@1.2.1:
+    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -2599,6 +2737,10 @@ packages:
     engines: {node: '>=8'}
     deprecated: Use your platform's native DOMException instead
 
+  dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
@@ -2608,6 +2750,9 @@ packages:
   electron-to-chromium@1.5.4:
     resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
 
+  electron-to-chromium@1.5.63:
+    resolution: {integrity: sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==}
+
   emittery@0.8.1:
     resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
     engines: {node: '>=10'}
@@ -2638,6 +2783,10 @@ packages:
     resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
     engines: {node: '>=18'}
 
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
@@ -2671,6 +2820,10 @@ packages:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
 
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
@@ -2815,6 +2968,10 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
 
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -2860,6 +3017,10 @@ packages:
   get-tsconfig@4.7.6:
     resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
 
+  giget@1.2.3:
+    resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
+    hasBin: true
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2875,6 +3036,10 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  globby@14.0.2:
+    resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
+    engines: {node: '>=18'}
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -2915,6 +3080,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
   html-encoding-sniffer@2.0.1:
     resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==}
     engines: {node: '>=10'}
@@ -2950,6 +3118,10 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   icss-replace-symbols@1.1.0:
     resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
 
@@ -2962,6 +3134,19 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@6.0.2:
+    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
+    engines: {node: '>= 4'}
+
+  image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
   immutable@4.3.7:
     resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
 
@@ -3053,6 +3238,9 @@ packages:
   is-typedarray@1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
 
+  is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -3229,6 +3417,10 @@ packages:
     resolution: {integrity: sha512-c+PHQZakiQuMKbnhvrjZUvrK6E/AfmTOf4P+E3Y4FNVHcNMX9e/XrnbEvO+m4wS6ZjsvhHh/POQTlfy8uXFc0A==}
     hasBin: true
 
+  jiti@2.4.0:
+    resolution: {integrity: sha512-H5UpaUI+aHOqZXlYOaFP/8AzKsg+guWu+Pr3Y8i7+Y3zr1aXAvCvTAQ1RxSc6oVD8R8c7brgNtTVP91E7upH/g==}
+    hasBin: true
+
   jpeg-js@0.3.7:
     resolution: {integrity: sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==}
 
@@ -3260,6 +3452,11 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
@@ -3281,6 +3478,13 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  knitwork@1.1.0:
+    resolution: {integrity: sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -3288,6 +3492,11 @@ packages:
     resolution: {integrity: sha512-M6T051+5QCGLBQb8id3hdvIW8+zeFV2FyBGFS9IEK5H9Wt4MueD4bW1eWikpHgZp+5xR3l5c8pZUkQsIA0BFZg==}
     engines: {node: '>=8'}
 
+  less@4.2.0:
+    resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -3365,6 +3574,13 @@ packages:
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  magic-string@0.30.13:
+    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
+
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
@@ -3443,16 +3659,40 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
   mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  mlly@1.7.3:
+    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
+
   module-alias@2.2.3:
     resolution: {integrity: sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==}
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -3480,6 +3720,11 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
   negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -3512,6 +3757,11 @@ packages:
   nwsapi@2.2.12:
     resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
 
+  nypm@0.3.12:
+    resolution: {integrity: sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
   nzh@1.0.13:
     resolution: {integrity: sha512-K3npIPUq155Oqal3KHZZ8fjiAiBw3NOGcdisTbxr0KQ4N1xlqgsMwzJ1a/oagcsl7f1FWnFh56MSS15fqvCF+Q==}
 
@@ -3526,6 +3776,9 @@ packages:
   ofetch@1.3.4:
     resolution: {integrity: sha512-KLIET85ik3vhEfS+3fDlc/BAZiAp+43QEC/yCo5zkNoY2YaKvNkOaFr/6wCFgFH1kuYQM5pMNi0Tg8koiIemtw==}
 
+  ohash@1.1.4:
+    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
+
   omggif@1.0.10:
     resolution: {integrity: sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==}
 
@@ -3593,6 +3846,10 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
   parse5@6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
 
@@ -3625,6 +3882,10 @@ packages:
   path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
 
+  path-type@5.0.0:
+    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
+    engines: {node: '>=12'}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -3642,6 +3903,9 @@ packages:
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -3659,6 +3923,21 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pinia-plugin-persistedstate@4.1.3:
+    resolution: {integrity: sha512-5Rad7oSoEh0na+j4jEViVQMtAYE38KjU7ixKc+am33QX/clJ1mb19zTZqMJXvq+PnQW7uuEuL33Q6NL0GbkfWw==}
+    peerDependencies:
+      '@pinia/nuxt': '>=0.5.0'
+      pinia: '>=2.0.0'
+    peerDependenciesMeta:
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
   pinia@2.0.36:
     resolution: {integrity: sha512-4UKApwjlmJH+VuHKgA+zQMddcCb3ezYnyewQ9NVrsDqZ/j9dMv5+rh+1r48whKNdpFkZAWVxhBp5ewYaYX9JcQ==}
     peerDependencies:
@@ -3686,6 +3965,9 @@ packages:
   pkg-types@1.1.3:
     resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
 
+  pkg-types@1.2.1:
+    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
+
   pngjs@3.4.0:
     resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
     engines: {node: '>=4.0.0'}
@@ -3772,6 +4054,9 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
   psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
 
@@ -3804,6 +4089,9 @@ packages:
     resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
     engines: {node: '>= 0.8'}
 
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -3814,6 +4102,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
+    engines: {node: '>= 14.16.0'}
+
   regenerate-unicode-properties@10.1.1:
     resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
     engines: {node: '>=4'}
@@ -3919,6 +4211,10 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3977,6 +4273,10 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
   slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
@@ -4025,6 +4325,9 @@ packages:
   std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
 
+  std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -4104,6 +4407,10 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
   terminal-link@2.1.1:
     resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
     engines: {node: '>=8'}
@@ -4160,6 +4467,9 @@ packages:
     resolution: {integrity: sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==}
     engines: {node: '>=8'}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   tsx@4.17.0:
     resolution: {integrity: sha512-eN4mnDA5UMKDt4YZixo9tBioibaMBpoxBkD+rIPAjVmYERSG0/dWEY1CEFuV89CgASlKL499q8AhmkMnnjtOJg==}
     engines: {node: '>=18.0.0'}
@@ -4194,6 +4504,12 @@ packages:
   unconfig@0.5.5:
     resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==}
 
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  unctx@2.3.1:
+    resolution: {integrity: sha512-PhKke8ZYauiqh3FEMVNm7ljvzQiph0Mt3GBRve03IJm7ukfaON2OBK795tLwhbyfzknuRRkW0+Ze+CQUmzOZ+A==}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -4213,6 +4529,13 @@ packages:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
 
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unimport@3.13.2:
+    resolution: {integrity: sha512-VKAepeIb6BWLtBl4tmyHY1/7rJgz3ynmZrWf8cU1a+v5Uv/k1gyyAEeGBnYcrwy8bxG5sflxEx4a9VQUqOVHUA==}
+
   unimport@3.9.1:
     resolution: {integrity: sha512-4gtacoNH6YPx2Aa5Xfyrf8pU2RdXjWUACb/eF7bH1AcZtqs+6ijbNB0M3BPENbtVjnCcg8tw9UJ1jQGbCzKA6g==}
 
@@ -4265,15 +4588,29 @@ packages:
     resolution: {integrity: sha512-KeczzHl2sATPQUx1gzo+EnUkmN4VmGBYRRVOZSGvGITE9rGHRDGqft6ONceP3vgXcyJ2XjX5axG5jMWUwNCYLw==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@1.16.0:
+    resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
+    engines: {node: '>=14.0.0'}
+
   unquote@1.1.1:
     resolution: {integrity: sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==}
 
+  untyped@1.5.1:
+    resolution: {integrity: sha512-reBOnkJBFfBZ8pCKaeHgfZLcehXtM6UTxc+vqs1JvCps0c4amLNp3fhdGBZwYp+VLyoY9n3X5KOP7lCyWBUX9A==}
+    hasBin: true
+
   update-browserslist-db@1.1.0:
     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
@@ -4527,6 +4864,9 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
   yaml-language-server@1.15.0:
     resolution: {integrity: sha512-N47AqBDCMQmh6mBLmI6oqxryHRzi33aPFPsJhYy3VTUGCdLHYjGh4FZzpUjRlphaADBBkDmnkM/++KNIOHi5Rw==}
     hasBin: true
@@ -4571,8 +4911,16 @@ snapshots:
       '@babel/highlight': 7.24.7
       picocolors: 1.0.1
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
+
   '@babel/compat-data@7.25.2': {}
 
+  '@babel/compat-data@7.26.2': {}
+
   '@babel/core@7.25.2':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -4593,6 +4941,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/core@7.26.0':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helpers': 7.26.0
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+      convert-source-map: 2.0.0
+      debug: 4.3.6
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/generator@7.25.0':
     dependencies:
       '@babel/types': 7.25.2
@@ -4600,6 +4968,14 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
 
+  '@babel/generator@7.26.2':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.0.2
+
   '@babel/helper-annotate-as-pure@7.24.7':
     dependencies:
       '@babel/types': 7.25.2
@@ -4619,6 +4995,14 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
+  '@babel/helper-compilation-targets@7.25.9':
+    dependencies:
+      '@babel/compat-data': 7.26.2
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
   '@babel/helper-create-class-features-plugin@7.25.0(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4668,6 +5052,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4678,6 +5069,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-optimise-call-expression@7.24.7':
     dependencies:
       '@babel/types': 7.25.2
@@ -4718,10 +5118,16 @@ snapshots:
 
   '@babel/helper-string-parser@7.24.8': {}
 
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.24.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/helper-validator-option@7.24.8': {}
 
+  '@babel/helper-validator-option@7.25.9': {}
+
   '@babel/helper-wrap-function@7.25.0':
     dependencies:
       '@babel/template': 7.25.0
@@ -4735,6 +5141,11 @@ snapshots:
       '@babel/template': 7.25.0
       '@babel/types': 7.25.2
 
+  '@babel/helpers@7.26.0':
+    dependencies:
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
+
   '@babel/highlight@7.24.7':
     dependencies:
       '@babel/helper-validator-identifier': 7.24.7
@@ -4746,6 +5157,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.2
 
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4790,9 +5205,14 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.24.8
 
   '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2)':
@@ -4800,6 +5220,11 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4830,11 +5255,21 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4845,31 +5280,61 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -4880,11 +5345,21 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.24.8
+
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -5344,12 +5819,20 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/standalone@7.26.2': {}
+
   '@babel/template@7.25.0':
     dependencies:
       '@babel/code-frame': 7.24.7
       '@babel/parser': 7.25.3
       '@babel/types': 7.25.2
 
+  '@babel/template@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
+
   '@babel/traverse@7.25.3':
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -5362,20 +5845,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
+      debug: 4.3.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.25.2':
     dependencies:
       '@babel/helper-string-parser': 7.24.8
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@dcloudio/types@3.4.12': {}
 
-  '@dcloudio/uni-app-plus@3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
+  '@dcloudio/uni-app-plus@3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
-      '@dcloudio/uni-app-uts': 3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))
-      '@dcloudio/uni-app-vite': 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+      '@dcloudio/uni-app-uts': 3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))
+      '@dcloudio/uni-app-vite': 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/uni-app-vue': 3.0.0-alpha-4000020240111001
       debug: 4.3.6
       fs-extra: 10.1.0
@@ -5391,7 +5891,7 @@ snapshots:
       - vite
       - vue
 
-  '@dcloudio/uni-app-uts@3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))':
+  '@dcloudio/uni-app-uts@3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@babel/parser': 7.25.3
       '@babel/types': 7.25.2
@@ -5413,7 +5913,7 @@ snapshots:
       magic-string: 0.30.11
       picocolors: 1.0.1
       source-map-js: 1.2.0
-      unplugin-auto-import: 0.16.7(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2)
+      unplugin-auto-import: 0.16.7(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - '@vueuse/core'
@@ -5423,14 +5923,14 @@ snapshots:
       - ts-node
       - vue
 
-  '@dcloudio/uni-app-vite@3.0.0-alpha-4000020240111001(postcss@8.4.40)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
+  '@dcloudio/uni-app-vite@3.0.0-alpha-4000020240111001(postcss@8.4.40)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@dcloudio/uni-cli-shared': 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/uni-i18n': 3.0.0-alpha-4000020240111001
       '@dcloudio/uni-nvue-styler': 3.0.0-alpha-4000020240111001
       '@dcloudio/uni-shared': 3.0.0-alpha-4000020240111001
       '@rollup/pluginutils': 4.2.1
-      '@vitejs/plugin-vue': 4.6.2(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+      '@vitejs/plugin-vue': 4.6.2(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
       '@vue/compiler-dom': 3.3.11
       '@vue/compiler-sfc': 3.3.11
       debug: 4.3.6
@@ -5856,7 +6356,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@dcloudio/vite-plugin-uni@3.0.0-alpha-4000020240111001(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
+  '@dcloudio/vite-plugin-uni@3.0.0-alpha-4000020240111001(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
@@ -5864,9 +6364,9 @@ snapshots:
       '@dcloudio/uni-cli-shared': 3.0.0-alpha-4000020240111001(postcss@8.4.40)(vue@3.4.35(typescript@5.5.4))
       '@dcloudio/uni-shared': 3.0.0-alpha-4000020240111001
       '@rollup/pluginutils': 4.2.1
-      '@vitejs/plugin-legacy': 4.1.1(terser@5.31.3)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
-      '@vitejs/plugin-vue': 4.6.2(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+      '@vitejs/plugin-legacy': 4.1.1(terser@5.31.3)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      '@vitejs/plugin-vue': 4.6.2(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))
       '@vue/compiler-core': 3.3.11
       '@vue/compiler-dom': 3.3.11
       '@vue/compiler-sfc': 3.3.11
@@ -5882,8 +6382,8 @@ snapshots:
       magic-string: 0.30.11
       picocolors: 1.0.1
       terser: 5.31.3
-      unplugin-auto-import: 0.16.7(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2)
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      unplugin-auto-import: 0.16.7(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - '@vueuse/core'
@@ -6297,7 +6797,7 @@ snapshots:
 
   '@jest/transform@27.5.1':
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.26.0
       '@jest/types': 27.5.1
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
@@ -6636,6 +7136,53 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@nuxt/kit@3.14.1592(rollup@4.19.2)':
+    dependencies:
+      '@nuxt/schema': 3.14.1592(rollup@4.19.2)
+      c12: 2.0.1
+      consola: 3.2.3
+      defu: 6.1.4
+      destr: 2.0.3
+      globby: 14.0.2
+      hash-sum: 2.0.0
+      ignore: 6.0.2
+      jiti: 2.4.0
+      klona: 2.0.6
+      knitwork: 1.1.0
+      mlly: 1.7.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      semver: 7.6.3
+      ufo: 1.5.4
+      unctx: 2.3.1
+      unimport: 3.13.2(rollup@4.19.2)
+      untyped: 1.5.1
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
+  '@nuxt/schema@3.14.1592(rollup@4.19.2)':
+    dependencies:
+      c12: 2.0.1
+      compatx: 0.1.8
+      consola: 3.2.3
+      defu: 6.1.4
+      hookable: 5.5.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      std-env: 3.8.0
+      ufo: 1.5.4
+      uncrypto: 0.1.3
+      unimport: 3.13.2(rollup@4.19.2)
+      untyped: 1.5.1
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@polka/url@1.0.0-next.25': {}
 
   '@rollup/pluginutils@4.2.1':
@@ -6651,6 +7198,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.19.2
 
+  '@rollup/pluginutils@5.1.3(rollup@4.19.2)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 4.0.2
+    optionalDependencies:
+      rollup: 4.19.2
+
   '@rollup/rollup-android-arm-eabi@4.19.2':
     optional: true
 
@@ -6699,6 +7254,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.19.2':
     optional: true
 
+  '@sindresorhus/merge-streams@2.3.0': {}
+
   '@sinonjs/commons@1.8.6':
     dependencies:
       type-detect: 4.0.8
@@ -6713,24 +7270,24 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.25.3
-      '@babel/types': 7.25.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.25.2
+      '@babel/types': 7.26.0
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.25.3
-      '@babel/types': 7.25.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.25.2
+      '@babel/types': 7.26.0
 
   '@types/cookie@0.4.1': {}
 
@@ -6803,15 +7360,15 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@uni-helper/unocss-preset-uni@0.2.9(@unocss/preset-mini@0.62.3)(@unocss/rule-utils@0.62.3)(@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))(unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))))(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))':
+  '@uni-helper/unocss-preset-uni@0.2.9(@unocss/preset-mini@0.62.3)(@unocss/rule-utils@0.62.3)(@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))))(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
     dependencies:
       '@uni-helper/uni-env': 0.1.4
       '@unocss/rule-utils': 0.62.3
-      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
-      unocss-applet: 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
+      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
+      unocss-applet: 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
     optionalDependencies:
       '@unocss/preset-mini': 0.62.3
-      '@unocss/vite': 0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      '@unocss/vite': 0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
 
   '@uni-helper/volar-service-uni-pages@0.2.26':
     dependencies:
@@ -6825,31 +7382,31 @@ snapshots:
       '@vue/compiler-sfc': 3.4.35
       jsonc-parser: 3.3.1
 
-  '@unocss-applet/preset-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))':
+  '@unocss-applet/preset-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
     dependencies:
-      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     optionalDependencies:
       '@unocss/core': 0.62.3
       '@unocss/preset-mini': 0.62.3
       '@unocss/preset-uno': 0.62.3
 
-  '@unocss-applet/preset-rem-rpx@0.8.2(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))':
+  '@unocss-applet/preset-rem-rpx@0.8.2(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
     dependencies:
-      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
 
-  '@unocss-applet/transformer-attributify@0.8.2(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))':
+  '@unocss-applet/transformer-attributify@0.8.2(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))':
     dependencies:
-      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     optionalDependencies:
-      magic-string: 0.30.11
+      magic-string: 0.30.13
 
-  '@unocss/astro@0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))':
+  '@unocss/astro@0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@unocss/core': 0.58.9
       '@unocss/reset': 0.58.9
-      '@unocss/vite': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      '@unocss/vite': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     optionalDependencies:
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - rollup
 
@@ -6999,7 +7556,7 @@ snapshots:
   '@unocss/rule-utils@0.62.3':
     dependencies:
       '@unocss/core': 0.62.3
-      magic-string: 0.30.11
+      magic-string: 0.30.13
 
   '@unocss/scope@0.58.9': {}
 
@@ -7040,7 +7597,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.58.9
 
-  '@unocss/vite@0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))':
+  '@unocss/vite@0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@4.19.2)
@@ -7052,29 +7609,29 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.11
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - rollup
 
-  '@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))':
+  '@unocss/vite@0.62.3(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.0(rollup@4.19.2)
+      '@rollup/pluginutils': 5.1.3(rollup@4.19.2)
       '@unocss/config': 0.62.3
       '@unocss/core': 0.62.3
       '@unocss/inspector': 0.62.3
       '@unocss/scope': 0.62.3
       '@unocss/transformer-directives': 0.62.3
       chokidar: 3.6.0
-      magic-string: 0.30.11
+      magic-string: 0.30.13
       tinyglobby: 0.2.5
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
     optional: true
 
-  '@vitejs/plugin-legacy@4.1.1(terser@5.31.3)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))':
+  '@vitejs/plugin-legacy@4.1.1(terser@5.31.3)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.25.3(@babel/core@7.25.2)
@@ -7084,23 +7641,23 @@ snapshots:
       regenerator-runtime: 0.13.11
       systemjs: 6.15.1
       terser: 5.31.3
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
       vue: 3.4.35(typescript@5.5.4)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.6.2(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
+  '@vitejs/plugin-vue@4.6.2(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
       vue: 3.4.35(typescript@5.5.4)
 
   '@volar/language-core@1.11.1':
@@ -7302,6 +7859,8 @@ snapshots:
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0: {}
+
   address@1.2.2: {}
 
   agent-base@6.0.2:
@@ -7374,14 +7933,14 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  babel-jest@27.5.1(@babel/core@7.25.2):
+  babel-jest@27.5.1(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.26.0
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
       '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 27.5.1(@babel/core@7.25.2)
+      babel-preset-jest: 27.5.1(@babel/core@7.26.0)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -7400,8 +7959,8 @@ snapshots:
 
   babel-plugin-jest-hoist@27.5.1:
     dependencies:
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.6
 
@@ -7429,27 +7988,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-preset-current-node-syntax@1.0.1(@babel/core@7.25.2):
+  babel-preset-current-node-syntax@1.0.1(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
+      '@babel/core': 7.26.0
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.0)
 
-  babel-preset-jest@27.5.1(@babel/core@7.25.2):
+  babel-preset-jest@27.5.1(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.26.0
       babel-plugin-jest-hoist: 27.5.1
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.26.0)
 
   balanced-match@1.0.2: {}
 
@@ -7502,6 +8061,13 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.0(browserslist@4.23.3)
 
+  browserslist@4.24.2:
+    dependencies:
+      caniuse-lite: 1.0.30001683
+      electron-to-chromium: 1.5.63
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
+
   bser@2.1.1:
     dependencies:
       node-int64: 0.4.0
@@ -7523,6 +8089,21 @@ snapshots:
 
   bytes@3.1.2: {}
 
+  c12@2.0.1:
+    dependencies:
+      chokidar: 4.0.1
+      confbox: 0.1.7
+      defu: 6.1.4
+      dotenv: 16.4.5
+      giget: 1.2.3
+      jiti: 2.4.0
+      mlly: 1.7.3
+      ohash: 1.1.4
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.2.1
+      rc9: 2.1.2
+
   cac@6.7.14: {}
 
   cac@6.7.9: {}
@@ -7543,6 +8124,8 @@ snapshots:
 
   caniuse-lite@1.0.30001646: {}
 
+  caniuse-lite@1.0.30001683: {}
+
   centra@2.7.0:
     dependencies:
       follow-redirects: 1.15.6
@@ -7576,8 +8159,18 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.1:
+    dependencies:
+      readdirp: 4.0.2
+
+  chownr@2.0.0: {}
+
   ci-info@3.9.0: {}
 
+  citty@0.1.6:
+    dependencies:
+      consola: 3.2.3
+
   cjs-module-lexer@1.3.1: {}
 
   cli-cursor@5.0.0:
@@ -7623,12 +8216,16 @@ snapshots:
 
   compare-versions@3.6.0: {}
 
+  compatx@0.1.8: {}
+
   computeds@0.0.1: {}
 
   concat-map@0.0.1: {}
 
   confbox@0.1.7: {}
 
+  confbox@0.1.8: {}
+
   consola@3.2.3: {}
 
   content-disposition@0.5.4:
@@ -7647,6 +8244,10 @@ snapshots:
 
   cookie@0.6.0: {}
 
+  copy-anything@2.0.6:
+    dependencies:
+      is-what: 3.14.1
+
   copy-text-to-clipboard@3.2.0: {}
 
   core-js-compat@3.37.1:
@@ -7721,6 +8322,8 @@ snapshots:
 
   dedent@0.7.0: {}
 
+  deep-pick-omit@1.2.1: {}
+
   deepmerge@4.3.1: {}
 
   default-gateway@6.0.3:
@@ -7762,12 +8365,16 @@ snapshots:
     dependencies:
       webidl-conversions: 5.0.0
 
+  dotenv@16.4.5: {}
+
   duplexer@0.1.2: {}
 
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.4: {}
 
+  electron-to-chromium@1.5.63: {}
+
   emittery@0.8.1: {}
 
   emoji-regex@10.3.0: {}
@@ -7799,6 +8406,11 @@ snapshots:
 
   environment@1.1.0: {}
 
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
@@ -7892,6 +8504,8 @@ snapshots:
 
   escalade@3.1.2: {}
 
+  escalade@3.2.0: {}
+
   escape-html@1.0.3: {}
 
   escape-string-regexp@1.0.5: {}
@@ -8071,6 +8685,10 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -8107,6 +8725,17 @@ snapshots:
       resolve-pkg-maps: 1.0.0
     optional: true
 
+  giget@1.2.3:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      defu: 6.1.4
+      node-fetch-native: 1.6.4
+      nypm: 0.3.12
+      ohash: 1.1.4
+      pathe: 1.1.2
+      tar: 6.2.1
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -8127,6 +8756,15 @@ snapshots:
 
   globals@11.12.0: {}
 
+  globby@14.0.2:
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      path-type: 5.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.1.0
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4
@@ -8157,6 +8795,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  hookable@5.5.3: {}
+
   html-encoding-sniffer@2.0.1:
     dependencies:
       whatwg-encoding: 1.0.5
@@ -8196,6 +8836,11 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   icss-replace-symbols@1.1.0: {}
 
   icss-utils@5.1.0(postcss@8.4.40):
@@ -8204,6 +8849,13 @@ snapshots:
 
   ieee754@1.2.1: {}
 
+  ignore@5.3.2: {}
+
+  ignore@6.0.2: {}
+
+  image-size@0.5.5:
+    optional: true
+
   immutable@4.3.7: {}
 
   import-local@3.2.0:
@@ -8219,7 +8871,7 @@ snapshots:
       jiti: 2.0.0-beta.2
       jiti-v1: jiti@1.21.6
       pathe: 1.1.2
-      pkg-types: 1.1.3
+      pkg-types: 1.2.1
       tsx: 4.17.0
     transitivePeerDependencies:
       - supports-color
@@ -8278,6 +8930,8 @@ snapshots:
 
   is-typedarray@1.0.0: {}
 
+  is-what@3.14.1: {}
+
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
@@ -8288,8 +8942,8 @@ snapshots:
 
   istanbul-lib-instrument@5.2.1:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/parser': 7.25.3
+      '@babel/core': 7.26.0
+      '@babel/parser': 7.26.2
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -8368,10 +9022,10 @@ snapshots:
 
   jest-config@27.5.1:
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.26.0
       '@jest/test-sequencer': 27.5.1
       '@jest/types': 27.5.1
-      babel-jest: 27.5.1(@babel/core@7.25.2)
+      babel-jest: 27.5.1(@babel/core@7.26.0)
       chalk: 4.1.2
       ci-info: 3.9.0
       deepmerge: 4.3.1
@@ -8496,7 +9150,7 @@ snapshots:
 
   jest-message-util@27.5.1:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.26.2
       '@jest/types': 27.5.1
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
@@ -8601,16 +9255,16 @@ snapshots:
 
   jest-snapshot@27.5.1:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/generator': 7.25.0
-      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
-      '@babel/traverse': 7.25.3
-      '@babel/types': 7.25.2
+      '@babel/core': 7.26.0
+      '@babel/generator': 7.26.2
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.26.0)
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
       '@types/babel__traverse': 7.20.6
       '@types/prettier': 2.7.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.26.0)
       chalk: 4.1.2
       expect: 27.5.1
       graceful-fs: 4.2.11
@@ -8688,6 +9342,8 @@ snapshots:
   jiti@2.0.0-beta.2:
     optional: true
 
+  jiti@2.4.0: {}
+
   jpeg-js@0.3.7: {}
 
   js-tokens@4.0.0: {}
@@ -8702,7 +9358,7 @@ snapshots:
   jsdom@16.7.0:
     dependencies:
       abab: 2.0.6
-      acorn: 8.12.1
+      acorn: 8.14.0
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -8737,6 +9393,8 @@ snapshots:
 
   jsesc@2.5.2: {}
 
+  jsesc@3.0.2: {}
+
   json-parse-even-better-errors@2.3.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -8753,12 +9411,30 @@ snapshots:
 
   kleur@3.0.3: {}
 
+  klona@2.0.6: {}
+
+  knitwork@1.1.0: {}
+
   kolorist@1.8.0: {}
 
   lcid@3.1.1:
     dependencies:
       invert-kv: 3.0.1
 
+  less@4.2.0:
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+
   leven@3.1.0: {}
 
   licia@1.41.1: {}
@@ -8817,8 +9493,8 @@ snapshots:
 
   local-pkg@0.5.0:
     dependencies:
-      mlly: 1.7.1
-      pkg-types: 1.1.3
+      mlly: 1.7.3
+      pkg-types: 1.2.1
 
   localstorage-polyfill@1.0.1: {}
 
@@ -8848,6 +9524,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.13:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
   make-dir@4.0.0:
     dependencies:
       semver: 7.6.3
@@ -8905,10 +9591,23 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+
+  minipass@5.0.0: {}
+
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+
   mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
 
+  mkdirp@1.0.4: {}
+
   mlly@1.7.1:
     dependencies:
       acorn: 8.12.1
@@ -8916,8 +9615,17 @@ snapshots:
       pkg-types: 1.1.3
       ufo: 1.5.4
 
+  mlly@1.7.3:
+    dependencies:
+      acorn: 8.14.0
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
+
   module-alias@2.2.3: {}
 
+  mri@1.2.0: {}
+
   mrmime@2.0.0: {}
 
   ms@2.0.0: {}
@@ -8934,6 +9642,12 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  needle@3.3.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.4.1
+    optional: true
+
   negotiator@0.6.3: {}
 
   node-fetch-native@1.6.4: {}
@@ -8956,6 +9670,15 @@ snapshots:
 
   nwsapi@2.2.12: {}
 
+  nypm@0.3.12:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      execa: 8.0.1
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
+
   nzh@1.0.13: {}
 
   object-assign@4.1.1: {}
@@ -8968,6 +9691,8 @@ snapshots:
       node-fetch-native: 1.6.4
       ufo: 1.5.4
 
+  ohash@1.1.4: {}
+
   omggif@1.0.10: {}
 
   on-finished@2.4.1:
@@ -9037,11 +9762,13 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-node-version@1.0.1: {}
+
   parse5@6.0.1: {}
 
   parseurl@1.3.3: {}
@@ -9060,6 +9787,8 @@ snapshots:
 
   path-to-regexp@0.1.7: {}
 
+  path-type@5.0.0: {}
+
   pathe@1.1.2: {}
 
   perfect-debounce@1.0.0: {}
@@ -9074,15 +9803,32 @@ snapshots:
 
   picocolors@1.0.1: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
-  picomatch@4.0.2:
-    optional: true
+  picomatch@4.0.2: {}
 
   pidtree@0.6.0: {}
 
   pify@2.3.0: {}
 
+  pify@4.0.1:
+    optional: true
+
+  pinia-plugin-persistedstate@4.1.3(pinia@2.0.36(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2):
+    dependencies:
+      '@nuxt/kit': 3.14.1592(rollup@4.19.2)
+      deep-pick-omit: 1.2.1
+      defu: 6.1.4
+      destr: 2.0.3
+    optionalDependencies:
+      pinia: 2.0.36(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   pinia@2.0.36(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-api': 6.6.3
@@ -9107,6 +9853,12 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
+  pkg-types@1.2.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.3
+      pathe: 1.1.2
+
   pngjs@3.4.0: {}
 
   postcss-import@14.1.0(postcss@8.4.40):
@@ -9192,6 +9944,9 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
+  prr@1.0.1:
+    optional: true
+
   psl@1.9.0: {}
 
   punycode@2.3.1: {}
@@ -9217,6 +9972,11 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.3
+
   react-is@17.0.2: {}
 
   read-cache@1.0.0:
@@ -9227,6 +9987,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.0.2: {}
+
   regenerate-unicode-properties@10.1.1:
     dependencies:
       regenerate: 1.4.2
@@ -9338,6 +10100,9 @@ snapshots:
 
   scule@1.3.0: {}
 
+  semver@5.7.2:
+    optional: true
+
   semver@6.3.1: {}
 
   semver@7.6.3: {}
@@ -9409,6 +10174,8 @@ snapshots:
 
   slash@3.0.0: {}
 
+  slash@5.1.0: {}
+
   slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.1
@@ -9470,6 +10237,8 @@ snapshots:
 
   std-env@3.7.0: {}
 
+  std-env@3.8.0: {}
+
   string-argv@0.3.2: {}
 
   string-hash@1.1.3: {}
@@ -9538,6 +10307,15 @@ snapshots:
 
   tapable@2.2.1: {}
 
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+
   terminal-link@2.1.1:
     dependencies:
       ansi-escapes: 4.3.2
@@ -9593,6 +10371,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tslib@2.8.1: {}
+
   tsx@4.17.0:
     dependencies:
       esbuild: 0.23.1
@@ -9633,6 +10413,15 @@ snapshots:
       - supports-color
     optional: true
 
+  uncrypto@0.1.3: {}
+
+  unctx@2.3.1:
+    dependencies:
+      acorn: 8.12.1
+      estree-walker: 3.0.3
+      magic-string: 0.30.11
+      unplugin: 1.12.0
+
   undici-types@5.26.5: {}
 
   unicode-canonical-property-names-ecmascript@2.0.0: {}
@@ -9646,6 +10435,26 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.1.0: {}
 
+  unicorn-magic@0.1.0: {}
+
+  unimport@3.13.2(rollup@4.19.2):
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.19.2)
+      acorn: 8.14.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.13
+      mlly: 1.7.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      strip-literal: 2.1.0
+      unplugin: 1.16.0
+    transitivePeerDependencies:
+      - rollup
+
   unimport@3.9.1(rollup@4.19.2):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.19.2)
@@ -9668,12 +10477,12 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))):
+  unocss-applet@0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))):
     dependencies:
-      '@unocss-applet/preset-applet': 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
-      '@unocss-applet/preset-rem-rpx': 0.8.2(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
-      '@unocss-applet/transformer-attributify': 0.8.2(magic-string@0.30.11)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)))
-      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      '@unocss-applet/preset-applet': 0.8.2(@unocss/core@0.62.3)(@unocss/preset-mini@0.62.3)(@unocss/preset-uno@0.62.3)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+      '@unocss-applet/preset-rem-rpx': 0.8.2(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+      '@unocss-applet/transformer-attributify': 0.8.2(magic-string@0.30.13)(unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))
+      unocss: 0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     optionalDependencies:
       '@unocss/preset-uno': 0.62.3
     transitivePeerDependencies:
@@ -9681,9 +10490,9 @@ snapshots:
       - '@unocss/preset-mini'
       - magic-string
 
-  unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)):
+  unocss@0.58.9(postcss@8.4.40)(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)):
     dependencies:
-      '@unocss/astro': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      '@unocss/astro': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
       '@unocss/cli': 0.58.9(rollup@4.19.2)
       '@unocss/core': 0.58.9
       '@unocss/extractor-arbitrary-variants': 0.58.9
@@ -9702,9 +10511,9 @@ snapshots:
       '@unocss/transformer-compile-class': 0.58.9
       '@unocss/transformer-directives': 0.58.9
       '@unocss/transformer-variant-group': 0.58.9
-      '@unocss/vite': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3))
+      '@unocss/vite': 0.58.9(rollup@4.19.2)(vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))
     optionalDependencies:
-      vite: 5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3)
+      vite: 5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -9712,7 +10521,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-auto-import@0.16.7(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2):
+  unplugin-auto-import@0.16.7(@nuxt/kit@3.14.1592(rollup@4.19.2))(@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4)))(rollup@4.19.2):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.19.2)
@@ -9723,6 +10532,7 @@ snapshots:
       unimport: 3.9.1(rollup@4.19.2)
       unplugin: 1.12.0
     optionalDependencies:
+      '@nuxt/kit': 3.14.1592(rollup@4.19.2)
       '@vueuse/core': 9.13.0(vue@3.4.35(typescript@5.5.4))
     transitivePeerDependencies:
       - rollup
@@ -9734,14 +10544,37 @@ snapshots:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.2
 
+  unplugin@1.16.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unquote@1.1.1: {}
 
+  untyped@1.5.1:
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/standalone': 7.26.2
+      '@babel/types': 7.26.0
+      defu: 6.1.4
+      jiti: 2.4.0
+      mri: 1.2.0
+      scule: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+
   update-browserslist-db@1.1.0(browserslist@4.23.3):
     dependencies:
       browserslist: 4.23.3
       escalade: 3.1.2
       picocolors: 1.0.1
 
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
+    dependencies:
+      browserslist: 4.24.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   url-parse@1.5.10:
     dependencies:
       querystringify: 2.2.0
@@ -9770,7 +10603,7 @@ snapshots:
       core-js: 3.37.1
       mutation-observer: 1.0.3
 
-  vite@5.3.5(@types/node@20.14.14)(sass@1.77.8)(terser@5.31.3):
+  vite@5.3.5(@types/node@20.14.14)(less@4.2.0)(sass@1.77.8)(terser@5.31.3):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.40
@@ -9778,6 +10611,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.14.14
       fsevents: 2.3.3
+      less: 4.2.0
       sass: 1.77.8
       terser: 5.31.3
 
@@ -9949,6 +10783,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yallist@4.0.0: {}
+
   yaml-language-server@1.15.0:
     dependencies:
       ajv: 8.17.1
@@ -9975,7 +10811,7 @@ snapshots:
   yargs@16.2.0:
     dependencies:
       cliui: 7.0.4
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/src/App.vue b/src/App.vue
index 566b969..1d8d768 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,17 @@
 <script setup>
 import {useStatus} from "@/store/status";
+import { useUserStore } from '@/store'
+import {
+  useProvideUserModal,
+} from '@/hooks'
 import ws from '@/connect'
 const {statusBarHeight}= useStatus()
+const { uid, isShow } = useProvideUserModal()
+const userStore = useUserStore()
 const root = document.documentElement
 root.style.setProperty('--statusBarHeight',`${statusBarHeight.value}px`)
 const init = () => {
+  userStore.loadSetting()
   ws.connect()
 }
 init()
diff --git a/src/api/upload/index.js b/src/api/upload/index.js
new file mode 100644
index 0000000..efd2645
--- /dev/null
+++ b/src/api/upload/index.js
@@ -0,0 +1,21 @@
+import { post, upload } from '@/utils/upload/request'
+
+// 上传头像裁剪图片服务接口
+export const ServeUploadAvatar = (data) => {
+  return post('/api/v1/upload/avatar', data)
+}
+
+// 上传头像裁剪图片服务接口
+export const ServeUploadImage = (data) => {
+  return post('/api/v1/upload/image', data)
+}
+
+// 查询大文件拆分信息服务接口
+export const ServeFindFileSplitInfo = (data = {}) => {
+  return post('/api/v1/upload/multipart/initiate', data)
+}
+
+// 文件拆分上传服务接口
+export const ServeFileSubareaUpload = (data = {}, options = {}) => {
+  return upload('/api/v1/upload/multipart', data, options)
+}
diff --git a/src/api/user/index.js b/src/api/user/index.js
new file mode 100644
index 0000000..ccf507f
--- /dev/null
+++ b/src/api/user/index.js
@@ -0,0 +1,9 @@
+import request from '@/service/index.js'
+
+export const ServeGetUserSetting = (data) => {
+  return request({
+    url: '/api/v1/users/setting',
+    method: 'GET',
+    data,
+  })
+}
diff --git a/src/components/base/Avatar.vue b/src/components/base/Avatar.vue
new file mode 100644
index 0000000..8a23450
--- /dev/null
+++ b/src/components/base/Avatar.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { hashStrToHexColor } from '@/utils/common'
+import { defAvatar } from '@/constant/default'
+
+defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  username: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: Number,
+    default: 30
+  },
+  fontSize: {
+    type: Number,
+    default: 14
+  }
+})
+</script>
+
+<template>
+  <n-avatar v-if="src.length" round :src="src" :size="size" :fallback-src="defAvatar" />
+
+  <n-avatar
+    v-else
+    round
+    :style="{
+      color: '#ffffff',
+      backgroundColor: hashStrToHexColor(username || ''),
+      fontSize: fontSize + 'px'
+    }"
+    :size="size"
+  >
+    {{ username && username.substring(0, 1) }}
+  </n-avatar>
+</template>
+<style lang="less" scoped></style>
diff --git a/src/components/base/AvatarCropper.vue b/src/components/base/AvatarCropper.vue
new file mode 100644
index 0000000..3fb39c8
--- /dev/null
+++ b/src/components/base/AvatarCropper.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { reactive, ref } from 'vue'
+import { NModal, NCard } from 'naive-ui'
+import { Close, UploadOne, RefreshOne, Redo, Undo } from '@icon-park/vue-next'
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper'
+import { ServeUploadAvatar } from '@/api/upload'
+
+const emit = defineEmits(['close', 'success'])
+const state = reactive({
+  show: true,
+  src: ''
+})
+
+const cropper = ref('cropper')
+
+const option = reactive({
+  img: '',
+  size: 1,
+  full: false,
+  outputType: 'png',
+  canMove: true,
+  fixedBox: true,
+  original: false,
+  canMoveBox: true,
+  autoCrop: true,
+  autoCropWidth: 250,
+  autoCropHeight: 250,
+  centerBox: false,
+  high: true,
+  preview: ''
+})
+
+const onMaskClick = () => {
+  emit('close')
+}
+
+function onTriggerUpload() {
+  document.getElementById('upload-avatar').click()
+}
+
+const onUpload = (e) => {
+  let file = e.target.files[0]
+
+  let reader = new FileReader()
+  reader.onload = (e) => {
+    let data
+    if (typeof e.target.result === 'object') {
+      // 把Array Buffer转化为blob 如果是base64不需要
+      data = window.URL.createObjectURL(new Blob([e.target.result]))
+
+      console.log(data, e.target.result)
+    } else {
+      data = e.target.result
+    }
+
+    option.img = data
+  }
+
+  reader.readAsArrayBuffer(file)
+}
+
+const realTime = (data) => {
+  cropper.value.getCropData((img) => {
+    option.preview = img
+  })
+}
+
+const rotateLeft = () => {
+  cropper.value.rotateLeft()
+}
+const rotateRight = () => {
+  cropper.value.rotateRight()
+}
+
+const refreshCrop = () => {
+  cropper.value.refresh()
+}
+
+const onSubmit = () => {
+  cropper.value.getCropBlob((blob) => {
+    let file = new File([blob], 'avatar.png', {
+      type: blob.type,
+      lastModified: Date.now()
+    })
+
+    const form = new FormData()
+    form.append('file', file)
+
+    ServeUploadAvatar(form).then((res) => {
+      if (res.code == 200) {
+        emit('success', res.data.avatar)
+      } else {
+        window['$message'].info(res.message)
+      }
+    })
+  })
+}
+</script>
+
+<template>
+  <input
+    id="upload-avatar"
+    type="file"
+    accept="image/png, image/jpeg, image/jpg, image/webp"
+    @change="onUpload"
+  />
+  <n-modal v-model:show="state.show" :on-after-leave="onMaskClick">
+    <n-card style="width: 800px" title="选择头像" :bordered="false" class="modal-radius">
+      <template #header-extra>
+        <n-icon size="22" :component="Close" @click="state.show = false" class="pointer" />
+      </template>
+
+      <div class="content">
+        <div class="canvas">
+          <vue-cropper
+            ref="cropper"
+            :img="option.img"
+            :output-size="option.size"
+            :output-type="option.outputType"
+            :info="true"
+            :full="option.full"
+            :can-move="option.canMove"
+            :can-move-box="option.canMoveBox"
+            :fixed-box="option.fixedBox"
+            :original="option.original"
+            :auto-crop="option.autoCrop"
+            :auto-crop-width="option.autoCropWidth"
+            :auto-crop-height="option.autoCropHeight"
+            :center-box="option.centerBox"
+            @real-time="realTime"
+          />
+        </div>
+        <div class="view">
+          <div class="preview">
+            <img :src="option.preview" v-show="option.preview" />
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <section class="el-container" style="height: 38px">
+          <aside
+            class="el-aside"
+            style="
+              width: 400px;
+              justify-content: space-between;
+              align-items: center;
+              display: flex;
+              padding: 0 5px;
+            "
+          >
+            <n-button @click="onTriggerUpload" type="primary" ghost>
+              上传图片
+              <template #icon>
+                <n-icon :component="UploadOne" />
+              </template>
+            </n-button>
+
+            <n-button @click="refreshCrop">
+              重置
+              <template #icon>
+                <n-icon :component="RefreshOne" />
+              </template>
+            </n-button>
+
+            <n-button @click="rotateLeft">
+              <template #icon>
+                <n-icon :component="Undo" />
+              </template>
+              左转
+            </n-button>
+
+            <n-button @click="rotateRight">
+              <template #icon>
+                <n-icon :component="Redo" />
+              </template>
+              右转
+            </n-button>
+          </aside>
+          <main class="el-main" style="text-align: center">
+            <n-button type="primary" @click="onSubmit">保存头像</n-button>
+          </main>
+        </section>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+#upload-avatar {
+  display: none;
+}
+.content {
+  width: 100%;
+  height: 400px;
+  display: flex;
+
+  .canvas {
+    width: 400px;
+    height: 400px;
+    padding: 5px;
+  }
+
+  .view {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .preview {
+      width: 180px;
+      height: 180px;
+      border-radius: 20px;
+      overflow: hidden;
+      border: 1px solid var(--border-color);
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/base/Loading.vue b/src/components/base/Loading.vue
new file mode 100644
index 0000000..63ee6e7
--- /dev/null
+++ b/src/components/base/Loading.vue
@@ -0,0 +1,305 @@
+<script setup></script>
+
+<template>
+  <div class="loading-content">
+    <div class="ant-spin ant-spin-lg ant-spin-spinning">
+      <span class="ant-spin-dot ant-spin-dot-spin">
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+      </span>
+    </div>
+    <p>数据加载中...</p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.loading-content {
+  width: 100%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  p {
+    margin-top: 10px;
+    color: rgb(194 194 194);
+  }
+}
+
+/* ant-spin 加载动画 start */
+.ant-spin {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+  font-feature-settings: 'tnum';
+  position: absolute;
+  display: none;
+  color: #1890ff;
+  text-align: center;
+  vertical-align: middle;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition:
+    transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+.ant-spin-spinning {
+  position: static;
+  display: inline-block;
+  opacity: 1;
+}
+
+.ant-spin-nested-loading {
+  position: relative;
+}
+
+.ant-spin-nested-loading > div > .ant-spin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 400px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  padding-top: 5px;
+  text-shadow: 0 1px 2px #fff;
+}
+
+.ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
+  margin-top: -20px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
+  margin: -7px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
+  padding-top: 2px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
+  margin-top: -17px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
+  margin: -16px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
+  padding-top: 11px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
+  margin-top: -26px;
+}
+
+.ant-spin-container {
+  position: relative;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.ant-spin-container::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: none \9;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  content: '';
+  pointer-events: none;
+}
+
+.ant-spin-blur {
+  clear: both;
+  overflow: hidden;
+  opacity: 0.5;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.ant-spin-blur::after {
+  opacity: 0.4;
+  pointer-events: auto;
+}
+
+.ant-spin-tip {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.ant-spin-dot {
+  position: relative;
+  display: inline-block;
+  font-size: 20px;
+  width: 1em;
+  height: 1em;
+}
+
+.ant-spin-dot-item {
+  position: absolute;
+  display: block;
+  width: 9px;
+  height: 9px;
+  background-color: #1890ff;
+  border-radius: 100%;
+  -webkit-transform: scale(0.75);
+  transform: scale(0.75);
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  -webkit-animation: antSpinMove 1s infinite linear alternate;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+
+.ant-spin-dot-item:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.ant-spin-dot-item:nth-child(2) {
+  top: 0;
+  right: 0;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.ant-spin-dot-item:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.ant-spin-dot-item:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+
+.ant-spin-dot-spin {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-animation: antRotate 1.2s infinite linear;
+  animation: antRotate 1.2s infinite linear;
+}
+
+.ant-spin-sm .ant-spin-dot {
+  font-size: 14px;
+}
+
+.ant-spin-sm .ant-spin-dot i {
+  width: 6px;
+  height: 6px;
+}
+
+.ant-spin-lg .ant-spin-dot {
+  font-size: 32px;
+}
+
+.ant-spin-lg .ant-spin-dot i {
+  width: 14px;
+  height: 14px;
+}
+
+.ant-spin.ant-spin-show-text .ant-spin-text {
+  display: block;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .ant-spin-blur {
+    background: #fff;
+    opacity: 0.5;
+  }
+}
+
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+.ant-spin-rtl {
+  direction: rtl;
+}
+
+.ant-spin-rtl .ant-spin-dot-spin {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  -webkit-animation-name: antRotateRtl;
+  animation-name: antRotateRtl;
+}
+
+@-webkit-keyframes antRotateRtl {
+  to {
+    -webkit-transform: rotate(-405deg);
+    transform: rotate(-405deg);
+  }
+}
+
+@keyframes antRotateRtl {
+  to {
+    -webkit-transform: rotate(-405deg);
+    transform: rotate(-405deg);
+  }
+}
+
+/* ant-spin 加载动画 end */
+</style>
diff --git a/src/components/base/UploadsModal.vue b/src/components/base/UploadsModal.vue
new file mode 100644
index 0000000..cb94f10
--- /dev/null
+++ b/src/components/base/UploadsModal.vue
@@ -0,0 +1,164 @@
+<script setup>
+import { NProgress } from 'naive-ui'
+import { useUploadsStore } from '@/store'
+import { fileFormatSize } from '@/utils/strings'
+
+const uploadsStore = useUploadsStore()
+
+const statusItem = {
+  0: '等待上传',
+  1: '上传中',
+  2: '上传完成',
+  3: '网络异常'
+}
+</script>
+
+<template>
+  <div class="section me-scrollbar me-scrollbar-thumb">
+    <div class="title bdr-b">
+      <span>上传管理 ({{ uploadsStore.successCount }}/{{ uploadsStore.items.length }})</span>
+      <span class="pointer" @click="uploadsStore.close()">关闭</span>
+    </div>
+
+    <div class="file-item" v-for="item in uploadsStore.items" :key="item.upload_id">
+      <div class="file-header">
+        <div class="type-icon flex-center">
+          {{ item.username.substr(0, 1) }}
+        </div>
+        <div class="filename">{{ item.username }}</div>
+        <div class="status">
+          <span :class="{ success: item.status == 2 }">
+            {{ statusItem[item.status] }}
+          </span>
+        </div>
+      </div>
+
+      <div class="file-mian">
+        <div class="progress flex-center">
+          <n-progress
+            style="width: 60px; height: 60px"
+            type="circle"
+            :percentage="item.percentage"
+          />
+        </div>
+        <div class="detail">
+          <p>
+            名称：<span>{{ item.file.name }}</span>
+          </p>
+          <p>
+            类型：<span>{{ item.file.type || 'text' }}</span>
+          </p>
+          <p>
+            大小：<span>{{ fileFormatSize(item.file.size) }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.section {
+  height: 100%;
+  width: 100%;
+
+  .title {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+  }
+
+  .file-item {
+    width: 95%;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    margin: 15px auto;
+    overflow: hidden;
+    border: 1px solid var(--im-message-border-color);
+    border-radius: 5px;
+
+    .file-header {
+      height: 45px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+      border-bottom: 1px solid var(--im-message-border-color);
+
+      .type-icon {
+        height: 30px;
+        width: 30px;
+        background-color: rgb(80, 138, 254);
+        border-radius: 50%;
+        margin-left: 5px;
+        font-size: 10px;
+        font-weight: 200;
+        overflow: hidden;
+        color: white;
+      }
+
+      .filename {
+        margin-left: 10px;
+        font-size: 14px;
+        width: 65%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .status {
+        position: absolute;
+        right: 14px;
+        top: 12px;
+        font-size: 13px;
+        color: #6b6868;
+        font-weight: 200;
+
+        .success {
+          color: rgb(103, 194, 58);
+        }
+      }
+    }
+
+    .file-mian {
+      padding: 8px;
+      display: flex;
+      flex-direction: row;
+
+      .progress {
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+      }
+
+      .detail {
+        flex: auto;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        margin-left: 10px;
+        justify-content: center;
+        align-items: flex-start;
+        font-size: 13px;
+
+        p {
+          margin: 3px;
+          color: #ada8a8;
+
+          span {
+            color: #595a5a;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.n-progress-text) {
+  font-size: 13px !important;
+}
+</style>
diff --git a/src/components/base/Xtime.vue b/src/components/base/Xtime.vue
new file mode 100644
index 0000000..7d9acb0
--- /dev/null
+++ b/src/components/base/Xtime.vue
@@ -0,0 +1,41 @@
+<script>
+import { defineComponent, h, ref, onUnmounted, watch } from 'vue'
+import { beautifyTime } from '@/utils/datetime'
+
+// 时间组件
+export default defineComponent({
+  name: 'Xtime',
+  props: {
+    time: {
+      type: String,
+      default: '2022-03-06 21:20:00'
+    }
+  },
+  setup(props) {
+    let timeout = null
+
+    const inTime = new Date(props.time.replace(/-/g, '/')).getTime()
+
+    const text = ref('')
+
+    const format = () => {
+      clearTimeout(timeout)
+
+      text.value = beautifyTime(props.time)
+      if (new Date().getTime() - inTime < 30 * 60 * 1000) {
+        timeout = setTimeout(format, 60 * 1000)
+      }
+    }
+
+    watch(props, format)
+
+    onUnmounted(() => {
+      clearTimeout(timeout)
+    })
+
+    format()
+
+    return () => h('span', [text.value])
+  }
+})
+</script>
diff --git a/src/components/talk/ForwardRecord.vue b/src/components/talk/ForwardRecord.vue
new file mode 100644
index 0000000..d8c9f14
--- /dev/null
+++ b/src/components/talk/ForwardRecord.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import Loading from '@/components/base/Loading.vue'
+import { ServeGetForwardRecords } from '@/api/chat'
+import { MessageComponents } from '@/constant/message'
+import { ITalkRecord } from '@/types/chat'
+import { useInject } from '@/hooks'
+
+const emit = defineEmits(['close'])
+const props = defineProps({
+  msgId: {
+    type: String,
+    required: true
+  }
+})
+
+const { showUserInfoModal } = useInject()
+const isShow = ref(true)
+const items = ref<ITalkRecord[]>([])
+const title = ref('会话记录')
+
+const onMaskClick = () => {
+  emit('close')
+}
+
+const onLoadData = () => {
+  ServeGetForwardRecords({
+    msg_id: props.msgId
+  }).then((res) => {
+    if (res.code == 200) {
+      items.value = res.data.items || []
+
+      title.value = `会话记录(${items.value.length})`
+    }
+  })
+}
+
+onMounted(() => {
+  onLoadData()
+})
+</script>
+
+<template>
+  <n-modal
+    v-model:show="isShow"
+    preset="card"
+    :title="title"
+    style="max-width: 500px"
+    class="modal-radius"
+    :on-after-leave="onMaskClick"
+    :segmented="{
+      content: true
+    }"
+    :header-style="{
+      padding: '20px 15px'
+    }"
+    :content-style="{
+      padding: 0
+    }"
+  >
+    <div class="main-box me-scrollbar me-scrollbar-thumb">
+      <Loading v-if="items.length === 0" />
+
+      <div v-for="item in items" :key="item.msg_id" class="message-item">
+        <div class="left-box pointer" @click="showUserInfoModal(item.user_id)">
+          <im-avatar :src="item.avatar" :size="30" :username="item.nickname" />
+        </div>
+
+        <div class="right-box">
+          <div class="msg-header">
+            <span class="name">{{ item.nickname }}</span>
+            <span class="time"> {{ item.created_at }}</span>
+          </div>
+
+          <component
+            :is="MessageComponents[item.msg_type] || 'unknown-message'"
+            :extra="item.extra"
+            :data="item"
+          />
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.main-box {
+  height: 600px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.message-item {
+  min-height: 38px;
+  display: flex;
+  margin-bottom: 10px;
+  padding: 5px 15px;
+
+  .left-box {
+    width: 30px;
+    display: flex;
+    user-select: none;
+    padding-top: 8px;
+  }
+
+  .right-box {
+    width: 100%;
+    overflow-x: auto;
+    padding: 0px 5px 15px 5px;
+    box-sizing: border-box;
+    height: fit-content;
+
+    .msg-header {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      position: relative;
+      user-select: none;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/HistoryRecord.vue b/src/components/talk/HistoryRecord.vue
new file mode 100644
index 0000000..82d806e
--- /dev/null
+++ b/src/components/talk/HistoryRecord.vue
@@ -0,0 +1,281 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import Loading from '@/components/base/Loading.vue'
+import { ServeFindTalkRecords } from '@/api/chat'
+import { Down, Calendar } from '@icon-park/vue-next'
+import * as message from '@/constant/message'
+import { ITalkRecord } from '@/types/chat'
+import { useInject } from '@/hooks'
+
+const emit = defineEmits(['close'])
+const props = defineProps({
+  talkType: {
+    type: Number,
+    default: 0
+  },
+  receiverId: {
+    type: Number,
+    default: 0
+  }
+})
+const { showUserInfoModal } = useInject()
+const model = reactive({
+  cursor: 0,
+  limit: 30,
+  msgType: 0,
+  loading: false,
+  loadMore: false,
+  isLoadMore: true
+})
+
+const isShow = ref(true)
+const items = ref<ITalkRecord[]>([])
+
+const tabs = [
+  { name: '全部', type: 0, show: true },
+  { name: '图片', type: message.ChatMsgTypeImage, show: true },
+  { name: '音频', type: message.ChatMsgTypeAudio, show: true },
+  { name: '视频', type: message.ChatMsgTypeVideo, show: true },
+  { name: '文件', type: message.ChatMsgTypeFile, show: true },
+  { name: '会话', type: message.ChatMsgTypeForward, show: true },
+  { name: '代码', type: message.ChatMsgTypeCode, show: true },
+  { name: '位置', type: message.ChatMsgTypeLocation, show: true },
+  { name: '群投票', type: message.ChatMsgTypeVote, show: props.talkType == 2 }
+]
+
+const onMaskClick = () => {
+  emit('close')
+}
+
+const loadChatRecord = () => {
+  let data = {
+    talk_type: props.talkType,
+    receiver_id: props.receiverId,
+    msg_type: model.msgType,
+    cursor: model.cursor,
+    limit: model.limit
+  }
+
+  if (model.cursor === 0) {
+    model.loading = true
+  } else {
+    model.loadMore = true
+  }
+
+  ServeFindTalkRecords(data).then((res) => {
+    if (res.code != 200) return
+
+    if (data.cursor === 0) {
+      items.value = []
+    }
+
+    let list = res.data.items || []
+    if (list.length) {
+      model.cursor = res.data.cursor
+    }
+
+    model.loading = false
+    model.loadMore = false
+    model.isLoadMore = list.length >= model.limit
+    items.value.push(...list)
+  })
+}
+
+const triggerType = (type: number) => {
+  model.msgType = type
+  model.cursor = 0
+  loadChatRecord()
+}
+
+onMounted(() => {
+  loadChatRecord()
+})
+</script>
+
+<template>
+  <n-modal
+    v-model:show="isShow"
+    preset="card"
+    title="消息管理"
+    style="max-width: 750px"
+    class="modal-radius"
+    :on-after-leave="onMaskClick"
+    :segmented="{
+      content: true
+    }"
+    :header-style="{
+      padding: '20px 15px'
+    }"
+    :content-style="{
+      padding: 0
+    }"
+  >
+    <section class="main-box el-container is-vertical o-hidden">
+      <header class="el-header bdr-b search" style="height: 50px">
+        <div class="type-items">
+          <span
+            v-for="tab in tabs"
+            :key="tab.name"
+            class="pointer"
+            :class="{ active: model.msgType == tab.type }"
+            @click="triggerType(tab.type)"
+            v-show="tab.show"
+          >
+            {{ tab.name }}
+          </span>
+        </div>
+        <div style="display: flex; align-items: center">
+          <!-- <n-popover placement="bottom-end" trigger="click" :show-arrow="false">
+            <template #trigger>
+              <n-icon
+                :size="20"
+                class="pointer"
+                :component="Calendar"
+              />
+            </template>
+            <n-date-picker
+              panel
+              type="date"
+              :is-date-disabled="disablePreviousDate"
+              :on-update:value="datefunc"
+            />
+          </n-popover> -->
+
+          <n-icon :size="20" class="pointer" :component="Calendar" />
+        </div>
+      </header>
+
+      <main v-if="model.loading" class="el-main flex-center">
+        <Loading />
+      </main>
+
+      <main v-else-if="items.length === 0" class="el-main flex-center">
+        <n-empty size="200" description="暂无相关数据">
+          <template #icon>
+            <img src="@/assets/image/no-data.svg" alt="" />
+          </template>
+        </n-empty>
+      </main>
+
+      <main v-else class="el-main me-scrollbar me-scrollbar-thumb">
+        <div v-for="item in items" :key="item.id" class="message-item">
+          <div class="left-box">
+            <im-avatar
+              :src="item.avatar"
+              :size="30"
+              :username="item.nickname"
+              @click="showUserInfoModal(item.user_id)"
+            />
+          </div>
+
+          <div class="right-box me-scrollbar">
+            <div class="msg-header">
+              <span class="name">{{ item.nickname }}</span>
+              <span class="time"> {{ item.created_at }}</span>
+            </div>
+
+            <template v-if="item.is_revoke == 1">
+              <div class="msg-content">此消息已被撤回</div>
+            </template>
+
+            <component
+              v-if="item.is_revoke == 0"
+              :is="message.MessageComponents[item.msg_type] || 'unknown-message'"
+              :extra="item.extra"
+              :data="item"
+            />
+          </div>
+        </div>
+
+        <div class="more pointer flex-center" @click="loadChatRecord" v-show="model.isLoadMore">
+          <n-icon v-show="!model.loadMore" :size="20" class="icon" :component="Down" />
+          <span> &nbsp;{{ model.loadMore ? '数据加载中...' : '加载更多' }} </span>
+        </div>
+      </main>
+    </section>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.main-box {
+  height: 550px;
+
+  .search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px 0 5px;
+
+    .type-items {
+      line-height: 40px;
+      user-select: none;
+
+      .active {
+        color: #03a9f4;
+        font-weight: 500;
+      }
+
+      span {
+        height: 40px;
+        width: 45px;
+        margin: 0 10px;
+        font-size: 13px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.message-item {
+  min-height: 30px;
+  display: flex;
+  margin-bottom: 5px;
+  flex-direction: row;
+  padding: 5px 15px;
+
+  &:first-child {
+    margin-top: 10px;
+  }
+
+  .left-box {
+    width: 30px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    user-select: none;
+    padding-top: 8px;
+    margin-right: 10px;
+
+    img {
+      height: 30px;
+      width: 30px;
+      border-radius: 3px;
+    }
+  }
+
+  .right-box {
+    width: 100%;
+    overflow-x: auto;
+    padding: 0px 5px 15px 5px;
+    box-sizing: border-box;
+    height: fit-content;
+
+    .msg-header {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      position: relative;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
+
+.more {
+  margin: 10px auto 20px;
+  width: 150px;
+  height: 30px;
+}
+</style>
diff --git a/src/components/talk/message/AudioMessage.vue b/src/components/talk/message/AudioMessage.vue
new file mode 100644
index 0000000..3a6d8ce
--- /dev/null
+++ b/src/components/talk/message/AudioMessage.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { PlayOne, PauseOne } from '@icon-park/vue-next'
+import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
+
+defineProps<{
+  extra: ITalkRecordExtraAudio
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const audioRef = ref()
+
+const durationDesc = ref('-')
+
+const state = reactive({
+  isAudioPlay: false,
+  progress: 0,
+  duration: 0,
+  currentTime: 0,
+  loading: true
+})
+
+const onPlay = () => {
+  if (state.isAudioPlay) {
+    audioRef.value.pause()
+  } else {
+    audioRef.value.play()
+  }
+
+  state.isAudioPlay = !state.isAudioPlay
+}
+
+const onPlayEnd = () => {
+  state.isAudioPlay = false
+  state.progress = 0
+}
+
+const onCanplay = () => {
+  state.duration = audioRef.value.duration
+  durationDesc.value = formatTime(parseInt(audioRef.value.duration))
+  state.loading = false
+}
+
+const onError = (e: any) => {
+  console.log('音频播放异常===>', e)
+}
+
+const onTimeUpdate = () => {
+  let audio = audioRef.value
+  if (audio.duration == 0) {
+    state.progress = 0
+  } else {
+    state.currentTime = audio.currentTime
+    state.progress = (audio.currentTime / audio.duration) * 100
+  }
+}
+
+const formatTime = (value: number = 0) => {
+  if (value == 0) {
+    return '-'
+  }
+
+  const minutes = Math.floor(value / 60)
+  let seconds = value
+  if (minutes > 0) {
+    seconds = Math.floor(value - minutes * 60)
+  }
+
+  return `${minutes}'${seconds}"`
+}
+</script>
+<template>
+  <div class="im-message-audio">
+    <audio
+      ref="audioRef"
+      preload="auto"
+      type="audio/mp3,audio/wav"
+      :src="extra.url"
+      @timeupdate="onTimeUpdate"
+      @ended="onPlayEnd"
+      @canplay="onCanplay"
+      @error="onError"
+    />
+
+    <div class="play">
+      <div class="btn pointer" @click.stop="onPlay">
+        <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" />
+      </div>
+    </div>
+    <div class="desc">
+      <span class="line" v-for="i in 23" :key="i"></span>
+      <span
+        class="indicator"
+        :style="{ left: state.progress + '%' }"
+        v-show="state.progress > 0"
+      ></span>
+    </div>
+    <div class="time">{{ durationDesc }}</div>
+  </div>
+</template>
+<style lang="less" scoped>
+.im-message-audio {
+  --audio-bg-color: #f5f5f5;
+  --audio-btn-bg-color: #ffffff;
+
+  width: 200px;
+  height: 45px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  background-color: var(--audio-bg-color);
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .play {
+    width: 45px;
+    height: inherit;
+    flex-shrink: 0;
+
+    .btn {
+      width: 26px;
+      height: 26px;
+      background-color: var(--audio-btn-bg-color);
+      border-radius: 50%;
+      color: rgb(24, 24, 24);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .desc {
+    flex: 1 1;
+    height: inherit;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    .line {
+      justify-content: space-between;
+      height: 30px;
+      width: 2px;
+      background-color: rgb(40, 39, 39);
+      margin-left: 3px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:nth-child(1) {
+        height: 16px;
+      }
+      &:nth-child(2) {
+        height: 10px;
+      }
+      &:nth-child(3) {
+        height: 8px;
+      }
+      &:nth-child(4) {
+        height: 6px;
+      }
+      &:nth-child(5) {
+        height: 2px;
+      }
+      &:nth-child(6) {
+        height: 10px;
+      }
+      &:nth-child(7) {
+        height: 20px;
+      }
+
+      &:nth-child(8) {
+        height: 16px;
+      }
+      &:nth-child(9) {
+        height: 10px;
+      }
+      &:nth-child(10) {
+        height: 13px;
+      }
+      &:nth-child(11) {
+        height: 10px;
+      }
+      &:nth-child(12) {
+        height: 8px;
+      }
+      &:nth-child(13) {
+        height: 15px;
+      }
+      &:nth-child(14) {
+        height: 16px;
+      }
+      &:nth-child(15) {
+        height: 16px;
+      }
+      &:nth-child(16) {
+        height: 15px;
+      }
+      &:nth-child(17) {
+        height: 14px;
+      }
+      &:nth-child(18) {
+        height: 12px;
+      }
+      &:nth-child(19) {
+        height: 8px;
+      }
+      &:nth-child(20) {
+        height: 3px;
+      }
+      &:nth-child(21) {
+        height: 6px;
+      }
+      &:nth-child(22) {
+        height: 10px;
+      }
+      &:nth-child(23) {
+        height: 16px;
+      }
+    }
+
+    .indicator {
+      position: absolute;
+      height: 70%;
+      width: 1px;
+      background-color: #9b9595;
+    }
+  }
+
+  .time {
+    width: 50px;
+    height: inherit;
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+}
+
+html[theme-mode='dark'] {
+  .im-message-audio {
+    --audio-bg-color: #2c2c32;
+    --audio-btn-bg-color: rgb(78, 75, 75);
+
+    .btn {
+      color: #ffffff;
+    }
+
+    .desc {
+      .line {
+        background-color: rgb(169, 167, 167);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/CodeMessage.vue b/src/components/talk/message/CodeMessage.vue
new file mode 100644
index 0000000..bd91c76
--- /dev/null
+++ b/src/components/talk/message/CodeMessage.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NCode } from 'naive-ui'
+import { Copy, Stretching } from '@icon-park/vue-next'
+import { clipboard } from '@/utils/common'
+import { useUtil } from '@/hooks'
+import { ITalkRecordExtraCode, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraCode
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const { useMessage } = useUtil()
+const lineMumber = props.extra.code.trim().split('\n').length
+const full = ref(false)
+
+const onClipboard = () => {
+  clipboard(props.extra.code, () => {
+    useMessage.success('复制成功')
+  })
+}
+</script>
+<template>
+  <section
+    class="im-message-code el-container is-vertical"
+    :class="{
+      maxwidth: maxWidth,
+      full: full
+    }"
+  >
+    <header class="el-header tools">
+      <p># {{ extra.lang }}</p>
+      <p>
+        <n-icon class="icon" :component="Stretching" @click="full = !full" />
+        <n-icon class="icon" :component="Copy" @click="onClipboard" />
+      </p>
+    </header>
+    <main class="el-main me-scrollbar me-scrollbar-thumb" :lineMumber="lineMumber">
+      <n-code :language="extra.lang" :code="extra.code" show-line-numbers />
+      <div class="el-footer mask pointer" v-show="lineMumber > 20" @click="full = !full">
+        查看更多
+      </div>
+    </main>
+  </section>
+</template>
+<style lang="less" scoped>
+.im-message-code {
+  min-width: 300px;
+  min-height: 100px;
+  border-radius: 10px;
+  overflow-x: auto;
+  border: 1px solid var(--border-color);
+  padding: 5px 8px;
+  max-height: 500px;
+  overflow-y: hidden;
+  flex: unset;
+
+  .el-main {
+    overflow-y: hidden;
+  }
+
+  &.maxwidth {
+    max-width: 60%;
+  }
+
+  &.full {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: var(--im-bg-color);
+    width: 100%;
+    height: 100%;
+    border: 0;
+    box-sizing: border-box;
+    max-width: unset;
+    max-height: unset;
+    overflow-y: unset;
+    border-radius: unset;
+
+    .el-main {
+      overflow-y: unset;
+    }
+
+    .mask {
+      display: none;
+    }
+  }
+
+  .tools {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 30px;
+    cursor: pointer;
+    padding: 0 8px;
+
+    .icon {
+      margin-left: 5px;
+    }
+  }
+
+  .mask {
+    height: 80px;
+    text-align: center;
+    line-height: 10;
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    color: var(--im-text-color);
+  }
+}
+
+html[theme-mode='dark'] {
+  .im-message-code {
+    background: var(--im-message-bg-color);
+
+    .mask {
+      background: linear-gradient(to bottom, transparent 0%, var(--im-bg-color) 100%);
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/FileMessage.vue b/src/components/talk/message/FileMessage.vue
new file mode 100644
index 0000000..5991598
--- /dev/null
+++ b/src/components/talk/message/FileMessage.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { fileFormatSize } from '@/utils/strings'
+import { download, getFileNameSuffix } from '@/utils/functions'
+import { ITalkRecordExtraFile, ITalkRecord } from '@/types/chat'
+
+defineProps<{
+  extra: ITalkRecordExtraFile
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+</script>
+
+<template>
+  <section class="file-message">
+    <div class="main">
+      <div class="ext">{{ getFileNameSuffix(extra.name) }}</div>
+      <div class="file-box">
+        <p class="info">
+          <span class="name">{{ extra.name }}</span>
+          <span class="size">({{ fileFormatSize(extra.size) }})</span>
+        </p>
+        <p class="notice">文件已成功发送, 文件助手永久保存</p>
+      </div>
+    </div>
+    <div class="footer">
+      <a @click="download(data.msg_id)">下载</a>
+      <a>在线预览</a>
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.file-message {
+  width: 250px;
+  min-height: 85px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--im-message-border-color);
+
+  .main {
+    height: 45px;
+    display: flex;
+    flex-direction: row;
+    margin-top: 5px;
+
+    .ext {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 45px;
+      height: 45px;
+      color: #ffffff;
+      background: #49a4ff;
+      border-radius: 5px;
+      font-size: 12px;
+    }
+
+    .file-box {
+      flex: 1 1;
+      height: 45px;
+      margin-left: 10px;
+      overflow: hidden;
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        overflow: hidden;
+        height: 24px;
+        font-size: 14px;
+
+        .name {
+          flex: 1 auto;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .size {
+          font-size: 12px;
+          color: #cac6c6;
+          flex-shrink: 0;
+        }
+      }
+
+      .notice {
+        height: 25px;
+        line-height: 25px;
+        font-size: 12px;
+        color: #929191;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .footer {
+    height: 30px;
+    line-height: 37px;
+    text-align: right;
+    font-size: 12px;
+    border-top: 1px solid var(--border-color);
+    margin-top: 10px;
+
+    a {
+      margin: 0 3px;
+      user-select: none;
+      cursor: pointer;
+      color: var(--im-text-color);
+
+      &:hover {
+        color: royalblue;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/ForwardMessage.vue b/src/components/talk/message/ForwardMessage.vue
new file mode 100644
index 0000000..aa0a5f0
--- /dev/null
+++ b/src/components/talk/message/ForwardMessage.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import ForwardRecord from '../ForwardRecord.vue'
+import { ITalkRecordExtraForward, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraForward
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const isShowRecord = ref(false)
+
+const title = computed(() => {
+  return [...new Set(props.extra.records.map((v) => v.nickname))].join('、')
+})
+
+const onClick = () => {
+  isShowRecord.value = true
+}
+</script>
+<template>
+  <section class="im-message-forward pointer" @click="onClick">
+    <div class="title">{{ title }} 的会话记录</div>
+    <div class="list" v-for="(record, index) in extra.records" :key="index">
+      <p>
+        <span>{{ record.nickname }}: </span>
+        <span>{{ record.text }}</span>
+      </p>
+    </div>
+
+    <div class="tips">
+      <span>转发：聊天会话记录 ({{ extra.msg_ids.length }}条)</span>
+    </div>
+
+    <ForwardRecord v-if="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" />
+  </section>
+</template>
+
+<style lang="less" scoped>
+.im-message-forward {
+  width: 250px;
+  min-height: 95px;
+  max-height: 150px;
+  border-radius: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--im-message-border-color);
+  user-select: none;
+
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    margin-bottom: 5px;
+  }
+
+  .list p {
+    height: 18px;
+    line-height: 18px;
+    font-size: 12px;
+    color: #a8a8a8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 5px;
+  }
+
+  .tips {
+    height: 32px;
+    line-height: 35px;
+    color: #8a8888;
+    border-top: 1px solid var(--border-color);
+    font-size: 12px;
+    margin-top: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/components/talk/message/GroupNoticeMessage.vue b/src/components/talk/message/GroupNoticeMessage.vue
new file mode 100644
index 0000000..520c2f2
--- /dev/null
+++ b/src/components/talk/message/GroupNoticeMessage.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ITalkRecordExtraGroupNotice, ITalkRecord } from '@/types/chat'
+
+defineProps<{
+  extra: ITalkRecordExtraGroupNotice
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+let show = ref(false)
+</script>
+<template>
+  <section class="im-message-group-notice pointer" @click="show = !show">
+    <div class="title">
+      <n-tag :bordered="false" size="small" type="primary"> 群公告 </n-tag>
+      《{{ extra.title }}》
+    </div>
+    <div class="content" :class="{ ellipsis: !show }">
+      {{ extra.content }}
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.im-message-group-notice {
+  max-width: 500px;
+  min-height: 10px;
+  border-radius: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--im-message-border-color);
+  user-select: none;
+
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    margin-bottom: 5px;
+    position: relative;
+  }
+
+  .content {
+    font-size: 13px;
+    color: #a8a8a8;
+    line-height: 24px;
+    white-space: pre-wrap;
+
+    &.ellipsis {
+      height: 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/ImageMessage.vue b/src/components/talk/message/ImageMessage.vue
new file mode 100644
index 0000000..df3c846
--- /dev/null
+++ b/src/components/talk/message/ImageMessage.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { NImage } from 'naive-ui'
+import { getImageInfo } from '@/utils/functions'
+import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
+
+defineProps<{
+  extra: ITalkRecordExtraImage
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const img = (src: string, width = 200) => {
+  const info = getImageInfo(src)
+
+  if (info.width == 0 || info.height == 0) {
+    return {}
+  }
+
+  if (info.width < width) {
+    return {
+      width: `${info.width}px`,
+      height: `${info.height}px`
+    }
+  }
+
+  return {
+    width: width + 'px',
+    height: `${info.height / (info.width / width)}px`
+  }
+}
+</script>
+<template>
+  <section
+    class="im-message-image"
+    :class="{ left: data.float === 'left' }"
+    :style="img(extra.url, 350)"
+  >
+    <n-image :src="extra.url" />
+  </section>
+</template>
+<style lang="less" scoped>
+.im-message-image {
+  overflow: hidden;
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--im-message-left-bg-color);
+  min-width: 30px;
+  min-height: 30px;
+
+  &.left {
+    background: var(--im-message-right-bg-color);
+  }
+
+  :deep(.n-image img) {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+  }
+}
+</style>
diff --git a/src/components/talk/message/LoginMessage.vue b/src/components/talk/message/LoginMessage.vue
new file mode 100644
index 0000000..7729e83
--- /dev/null
+++ b/src/components/talk/message/LoginMessage.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { ITalkRecordExtraLogin, ITalkRecord } from '@/types/chat'
+
+defineProps<{
+  extra: ITalkRecordExtraLogin
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+function getExploreName(userAgent = '') {
+  if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
+    return 'Opera'
+  } else if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) {
+    return 'IE'
+  } else if (userAgent.indexOf('Edge') > -1) {
+    return 'Edge'
+  } else if (userAgent.indexOf('Firefox') > -1) {
+    return 'Firefox'
+  } else if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') == -1) {
+    return 'Safari'
+  } else if (userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('Safari') > -1) {
+    return 'Chrome'
+  } else {
+    return 'Unkonwn'
+  }
+}
+
+function getExploreOs(userAgent = '') {
+  if (userAgent.indexOf('Mac OS') > -1) {
+    return 'Mac OS'
+  } else {
+    return 'Windows'
+  }
+}
+</script>
+<template>
+  <section class="im-message-login">
+    <h4>登录操作通知</h4>
+    <p>登录时间：{{ extra.datetime }} (CST)</p>
+    <p>IP 地址：{{ extra.ip }}</p>
+    <p>登录地点：{{ extra.address }}</p>
+    <p>
+      登录设备：{{ getExploreName(extra.agent) }} /
+      {{ getExploreOs(extra.agent) }}
+    </p>
+    <p>异常原因：{{ extra.reason }}</p>
+  </section>
+</template>
+<style lang="less" scoped>
+.im-message-login {
+  width: 300px;
+  min-height: 50px;
+  background: var(--im-message-bg-color);
+  border-radius: 5px;
+  padding: 15px;
+  color: var(--im-text-color);
+
+  p {
+    font-size: 13px;
+    margin: 10px 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/MixedMessage.vue b/src/components/talk/message/MixedMessage.vue
new file mode 100644
index 0000000..4ab41be
--- /dev/null
+++ b/src/components/talk/message/MixedMessage.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { NImage } from 'naive-ui'
+import { textReplaceEmoji } from '@/utils/emojis'
+import { textReplaceLink } from '@/utils/strings'
+import { getImageInfo } from '@/utils/functions'
+import { ITalkRecordExtraMixed, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraMixed
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const float = props.data.float
+
+const img = (src, width = 200) => {
+  const info = getImageInfo(src)
+
+  if (info.width == 0 || info.height == 0) {
+    return {}
+  }
+
+  if (info.width < width) {
+    return {
+      width: `${info.width}px`,
+      height: `${info.height}px`
+    }
+  }
+
+  let h = info.height / (info.width / width)
+
+  return {
+    width: width + 'px',
+    height: h + 'px'
+  }
+}
+</script>
+
+<template>
+  <div
+    class="im-message-mixed"
+    :class="{
+      left: float == 'left',
+      right: float == 'right',
+      maxwidth: maxWidth
+    }"
+  >
+    <pre>
+      <template v-for="(item) in extra.items" :key="item.id">
+   
+        <template v-if="item.type === 1">
+               <span v-html="textReplaceEmoji(textReplaceLink(item.content))" />
+        </template>
+
+        <template v-else-if="item.type === 3">
+          <div
+            :style="img(item.content, 300)"
+            style="display: flex; margin: 5px 0;border-radius: 8px;overflow: hidden;;"
+          >
+            <n-image :src="item.content"></n-image>
+          </div>
+        </template>
+      </template>
+    </pre>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.im-message-mixed {
+  min-width: 30px;
+  min-height: 30px;
+  padding: 3px;
+  color: var(--im-message-left-text-color);
+  background: var(--im-message-left-bg-color);
+  border-radius: 0px 10px 10px 10px;
+
+  &.right {
+    background-color: var(--im-message-right-bg-color);
+    color: var(--im-message-right-text-color);
+    border-radius: 10px 0px 10px 10px;
+  }
+
+  &.maxwidth {
+    max-width: 70%;
+  }
+
+  pre {
+    display: flex;
+    flex-direction: column;
+    white-space: pre-wrap;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    font-size: 14px;
+    padding: 3px 5px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
+    line-height: 25px;
+
+    :deep(a) {
+      color: #2196f3;
+      text-decoration: revert;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/RevokeMessage.vue b/src/components/talk/message/RevokeMessage.vue
new file mode 100644
index 0000000..a3da869
--- /dev/null
+++ b/src/components/talk/message/RevokeMessage.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { formatTime } from '@/utils/datetime'
+
+defineProps({
+  login_uid: {
+    type: Number,
+    default: 0
+  },
+  user_id: {
+    type: Number,
+    default: 0
+  },
+  talk_type: {
+    type: Number,
+    default: 0
+  },
+  nickname: {
+    type: String,
+    default: ''
+  },
+  datetime: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+<template>
+  <div class="im-message-revoke">
+    <div class="content">
+      <span v-if="login_uid == user_id"> 你撤回了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else-if="talk_type == 1"> 对方撤回了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else>
+        "{{ nickname }}" 撤回了一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.im-message-revoke {
+  display: flex;
+  justify-content: center;
+
+  .content {
+    margin: 10px auto;
+    background-color: #f5f5f5;
+    font-size: 11px;
+    line-height: 30px;
+    padding: 0 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #979191;
+    user-select: none;
+    font-weight: 300;
+    display: inline-block;
+    border-radius: 3px;
+
+    span {
+      margin: 0 5px;
+    }
+  }
+}
+
+html[theme-mode='dark'] {
+  .im-message-revoke {
+    .content {
+      background: unset;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/TextMessage.vue b/src/components/talk/message/TextMessage.vue
new file mode 100644
index 0000000..023241b
--- /dev/null
+++ b/src/components/talk/message/TextMessage.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { textReplaceEmoji } from '@/utils/emojis'
+import { textReplaceLink, textReplaceMention } from '@/utils/strings'
+import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraText
+  data: ITalkRecord
+  maxWidth?: boolean
+  source?: 'panel' | 'forward' | 'history'
+}>()
+
+const float = props.data.float
+
+let textContent = props.extra?.content || ''
+
+textContent = textReplaceLink(textContent)
+
+if (props.data.talk_type == 2) {
+  textContent = textReplaceMention(textContent, '#1890ff')
+}
+
+textContent = textReplaceEmoji(textContent)
+</script>
+
+<template>
+  <div
+    class="im-message-text"
+    :class="{
+      left: float == 'left',
+      right: float == 'right',
+      maxwidth: maxWidth,
+      'radius-reset': source != 'panel'
+    }"
+  >
+    <pre v-html="textContent" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.im-message-text {
+  min-width: 30px;
+  min-height: 30px;
+  padding: 3px;
+  color: var(--im-message-left-text-color);
+  background: var(--im-message-left-bg-color);
+  border-radius: 0px 10px 10px 10px;
+
+  &.right {
+    background-color: var(--im-message-right-bg-color);
+    color: var(--im-message-right-text-color);
+    border-radius: 10px 0px 10px 10px;
+  }
+
+  &.maxwidth {
+    max-width: 70%;
+  }
+
+  &.radius-reset {
+    border-radius: 0;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    font-size: 14px;
+    padding: 3px 5px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
+    line-height: 25px;
+
+    :deep(.emoji) {
+      vertical-align: text-bottom;
+      margin: 0 5px;
+    }
+
+    :deep(a) {
+      color: #2196f3;
+      text-decoration: revert;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/UnknownMessage.vue b/src/components/talk/message/UnknownMessage.vue
new file mode 100644
index 0000000..df197df
--- /dev/null
+++ b/src/components/talk/message/UnknownMessage.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  extra: Object,
+  data: Object
+})
+</script>
+
+<template>
+  <div class="im-message-unknown">[{{ data.msg_type }}] 未知消息类型</div>
+</template>
+
+<style lang="less" scoped>
+.im-message-unknown {
+  height: 35px;
+  line-height: 35px;
+  border-radius: 20px;
+  color: #979191;
+  background: #eff0f1;
+  width: 150px;
+  text-align: center;
+  font-weight: 300;
+}
+</style>
diff --git a/src/components/talk/message/VideoMessage.vue b/src/components/talk/message/VideoMessage.vue
new file mode 100644
index 0000000..3967678
--- /dev/null
+++ b/src/components/talk/message/VideoMessage.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import 'xgplayer/dist/index.min.css'
+import { ref, nextTick } from 'vue'
+import { NImage, NModal, NCard } from 'naive-ui'
+import { Play, Close } from '@icon-park/vue-next'
+import { getImageInfo } from '@/utils/functions'
+import Player from 'xgplayer'
+import { ITalkRecordExtraVideo, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraVideo
+  data: ITalkRecord
+  maxWidth?: Boolean
+}>()
+
+const img = (src: string, width = 200) => {
+  const info: any = getImageInfo(src)
+
+  if (info.width == 0 || info.height == 0) {
+    return {}
+  }
+
+  if (info.height > 300) {
+    return {
+      height: '300px'
+    }
+  }
+
+  if (info.width < width) {
+    return {
+      width: `${info.width}px`,
+      height: `${info.height}px`
+    }
+  }
+
+  return {
+    width: width + 'px',
+    height: info.height / (info.width / width) + 'px'
+  }
+}
+
+const open = ref(false)
+
+async function onPlay() {
+  open.value = true
+
+  await nextTick()
+
+  new Player({
+    id: 'im-xgplayer',
+    url: props.extra.url,
+    fluid: true,
+    autoplay: true,
+    lang: 'zh-cn'
+  })
+}
+</script>
+<template>
+  <section
+    class="im-message-video"
+    :class="{ left: data.float === 'left' }"
+    :style="img(extra.cover, 350)"
+    @click="onPlay"
+  >
+    <n-image :src="extra.cover" preview-disabled />
+
+    <div class="btn-video">
+      <n-icon :component="Play" size="36" />
+    </div>
+
+    <n-modal v-model:show="open">
+      <n-card
+        style="width: 800px; min-height: 300px; background-color: #ffffff; position: relative"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div id="im-xgplayer"></div>
+        <div class="im-xgplayer-close" @click="open = false">
+          <n-icon :component="Close" size="18" />
+        </div>
+      </n-card>
+    </n-modal>
+  </section>
+</template>
+<style lang="less" scoped>
+.im-message-video {
+  overflow: hidden;
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--im-message-left-bg-color);
+  min-width: 30px;
+  min-height: 30px;
+  display: inline-flex;
+  position: relative;
+
+  &.left {
+    background: var(--im-message-right-bg-color);
+  }
+
+  :deep(.n-image img) {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+  }
+
+  .btn-video {
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    left: calc(50% - 15px);
+    top: calc(50% - 10px);
+    cursor: pointer;
+    color: #ffffff;
+  }
+
+  &:hover {
+    .btn-video {
+      color: #03a9f4;
+    }
+  }
+}
+
+.im-xgplayer-close {
+  position: absolute;
+  height: 35px;
+  width: 35px;
+  background-color: #f5f5f5;
+  right: -45px;
+  top: -45px;
+  cursor: pointer;
+  border-radius: 50%;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/talk/message/VoteMessage.vue b/src/components/talk/message/VoteMessage.vue
new file mode 100644
index 0000000..c856fd5
--- /dev/null
+++ b/src/components/talk/message/VoteMessage.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { reactive, computed, onMounted, ref } from 'vue'
+import { NCheckbox, NProgress } from 'naive-ui'
+import { ServeConfirmVoteHandle } from '@/api/chat'
+import { useUserStore } from '@/store'
+
+const props = defineProps({
+  extra: Object,
+  data: Object
+})
+
+const extra = ref(props.extra)
+const userStore = useUserStore()
+const mode = extra.value.detail.answer_mode
+const state = reactive({ options: [] })
+
+// 是否可提交
+const isCanSubmit = computed(() => {
+  return state.options.some((item) => item.is_checked)
+})
+
+// 是否已投票
+const isVoted = computed(() => {
+  return extra.value.vote_users.some((item) => item == userStore.uid)
+})
+
+/**
+ * 设置投票选项
+ */
+function setOptions(options) {
+  for (const option of options) {
+    state.options.push({
+      key: option.key,
+      value: option.value,
+      is_checked: false,
+      num: 0,
+      progress: 0
+    })
+  }
+}
+
+/**
+ * 更新统计信息
+ *
+ * @param {*} data
+ */
+function updateStatistics(data) {
+  let count = data.count
+
+  state.options.forEach((option) => {
+    option.num = data.options[option.key]
+
+    if (count > 0) {
+      option.progress = (data.options[option.key] / count) * 100
+    }
+  })
+}
+
+/**
+ * 选择投票
+ *
+ * @param {*} data
+ * @param {*} option
+ */
+function change(data, option) {
+  if (mode == 0) {
+    state.options.forEach((option) => (option.is_checked = false))
+  }
+
+  option.is_checked = data
+}
+
+/**
+ * 表单提交
+ */
+const onSubmit = () => {
+  if (!isCanSubmit.value) return
+
+  let items = []
+
+  state.options.forEach((item) => {
+    item.is_checked && items.push(item.key)
+  })
+
+  ServeConfirmVoteHandle({
+    msg_id: props.data.msg_id,
+    options: items.join(',')
+  }).then((res) => {
+    if (res.code == 200) {
+      updateStatistics(res.data)
+      extra.value.vote_users.push(userStore.uid)
+      extra.value.detail.answered_num++
+    }
+  })
+}
+
+onMounted(() => {
+  setOptions(extra.value.detail.answer_option)
+  updateStatistics(extra.value.statistics)
+})
+</script>
+
+<template>
+  <section class="im-message-vote">
+    <div class="vote-from">
+      <div class="vheader">
+        <p style="font-weight: bold">
+          {{ mode == 1 ? '[多选投票]' : '[单选投票]' }}
+        </p>
+        <p>{{ extra.detail.title }}</p>
+      </div>
+
+      <template v-if="isVoted">
+        <div class="vbody">
+          <div class="vote-view" v-for="option in state.options" :key="option.key">
+            <p class="vote-option">{{ option.key }}、 {{ option.value }}</p>
+            <p class="vote-census">{{ option.num }} 票 {{ option.progress }}%</p>
+            <p class="vote-progress">
+              <n-progress
+                type="line"
+                :height="5"
+                :show-indicator="false"
+                :percentage="parseInt(option.progress)"
+                color="#1890ff"
+              />
+            </p>
+          </div>
+        </div>
+        <div class="vfooter vote-view">
+          <p>应参与人数：{{ extra.detail.answer_num }} 人</p>
+          <p>实际参与人数：{{ extra.detail.answered_num }} 人</p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="vbody">
+          <div
+            class="option"
+            :class="{ radio: mode == 0 }"
+            v-for="option in state.options"
+            :key="option.key"
+          >
+            <p class="checkbox">
+              <n-checkbox
+                v-model:checked="option.is_checked"
+                @update:checked="change(option.is_checked, option)"
+              />
+            </p>
+            <p class="text" @click="change(!option.is_checked, option)">
+              {{ option.key }}、{{ option.value }}
+            </p>
+          </div>
+        </div>
+        <div class="vfooter">
+          <n-button plain round @click="onSubmit">
+            {{ isCanSubmit ? '立即投票' : '请选择进行投票' }}
+          </n-button>
+        </div>
+      </template>
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.im-message-vote {
+  width: 300px;
+  min-height: 150px;
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .vote-from {
+    width: 100%;
+
+    .vheader {
+      min-height: 50px;
+      background: #4e83fd;
+      padding: 15px;
+      position: relative;
+
+      p {
+        margin: 3px 0;
+        &:first-child {
+          color: rgb(245, 237, 237);
+          font-size: 13px;
+          margin-bottom: 8px;
+        }
+
+        &:last-child {
+          color: white;
+        }
+      }
+
+      &::before {
+        content: '投票';
+        position: absolute;
+        font-size: 60px;
+        color: white;
+        opacity: 0.1;
+        top: -5px;
+        right: 10px;
+      }
+    }
+
+    .vbody {
+      min-height: 80px;
+      width: 100%;
+      padding: 5px 15px;
+      box-sizing: border-box;
+
+      .option {
+        margin: 14px 0px;
+        font-size: 13px;
+        display: flex;
+        flex-direction: row;
+
+        .text {
+          margin-left: 10px;
+          cursor: pointer;
+          line-height: 26px;
+        }
+
+        &.radio {
+          :deep(.n-checkbox-box) {
+            border-radius: 50%;
+            margin-top: 2px;
+          }
+        }
+      }
+
+      margin-bottom: 10px;
+    }
+
+    .vfooter {
+      height: 55px;
+      text-align: center;
+      box-sizing: border-box;
+
+      .n-button {
+        width: 90%;
+        font-weight: 400;
+      }
+
+      &.vote-view {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding-left: 15px;
+
+        p {
+          border-left: 2px solid #2196f3;
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+
+  .vote-view {
+    width: 100%;
+    min-height: 30px;
+    margin: 15px 0;
+    box-sizing: border-box;
+
+    > p {
+      margin: 6px 0px;
+      font-size: 13px;
+    }
+
+    .vote-option {
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .vote-census {
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/index.js b/src/components/talk/message/index.js
new file mode 100644
index 0000000..69cad73
--- /dev/null
+++ b/src/components/talk/message/index.js
@@ -0,0 +1,11 @@
+import { defineAsyncComponent } from 'vue'
+
+export function setComponents(app) {
+  // 动态导出当前目录下的组件
+  const modules = import.meta.glob(['./*.vue', './system/*.vue'])
+
+  for (const [key, value] of Object.entries(modules)) {
+    const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
+    app.component(name, defineAsyncComponent(value))
+  }
+}
diff --git a/src/components/talk/message/system/SysGroupCancelMutedMessage.vue b/src/components/talk/message/system/SysGroupCancelMutedMessage.vue
new file mode 100644
index 0000000..28c8819
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupCancelMutedMessage.vue
@@ -0,0 +1,23 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+const { showUserInfoModal } = useInject()
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>取消了全员禁言</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupCreateMessage.vue b/src/components/talk/message/system/SysGroupCreateMessage.vue
new file mode 100644
index 0000000..b2277ed
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupCreateMessage.vue
@@ -0,0 +1,28 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>创建了群聊，并邀请了</span>
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupJoinMessage.vue b/src/components/talk/message/system/SysGroupJoinMessage.vue
new file mode 100644
index 0000000..9ca2792
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupJoinMessage.vue
@@ -0,0 +1,30 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>邀请了</span>
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+
+      <span>加入群聊</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue b/src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue
new file mode 100644
index 0000000..39e954d
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue
@@ -0,0 +1,30 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>解除了</span>
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+
+      <span>禁言</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupMemberKickedMessage.vue b/src/components/talk/message/system/SysGroupMemberKickedMessage.vue
new file mode 100644
index 0000000..57a4236
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupMemberKickedMessage.vue
@@ -0,0 +1,30 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>将</span>
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+
+      <span>踢出群聊</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupMemberMutedMessage.vue b/src/components/talk/message/system/SysGroupMemberMutedMessage.vue
new file mode 100644
index 0000000..c8ea9c4
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupMemberMutedMessage.vue
@@ -0,0 +1,30 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>设置了</span>
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+
+      <span>禁言</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupMemberQuitMessage.vue b/src/components/talk/message/system/SysGroupMemberQuitMessage.vue
new file mode 100644
index 0000000..7543e33
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupMemberQuitMessage.vue
@@ -0,0 +1,23 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>退出了群聊</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupMutedMessage.vue b/src/components/talk/message/system/SysGroupMutedMessage.vue
new file mode 100644
index 0000000..2d37def
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupMutedMessage.vue
@@ -0,0 +1,23 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.owner_id)">
+        {{ extra.owner_name }}
+      </a>
+
+      <span>设置了全员禁言</span>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysGroupTransferMessage.vue b/src/components/talk/message/system/SysGroupTransferMessage.vue
new file mode 100644
index 0000000..f9b0552
--- /dev/null
+++ b/src/components/talk/message/system/SysGroupTransferMessage.vue
@@ -0,0 +1,21 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a @click="showUserInfoModal(extra.old_owner_id)">{{ extra.old_owner_name }}</a>
+      <span>将群主转让给</span>
+      <a @click="showUserInfoModal(extra.new_owner_id)">{{ extra.new_owner_name }}</a>
+    </div>
+  </div>
+</template>
diff --git a/src/components/talk/message/system/SysTextMessage.vue b/src/components/talk/message/system/SysTextMessage.vue
new file mode 100644
index 0000000..559065a
--- /dev/null
+++ b/src/components/talk/message/system/SysTextMessage.vue
@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  extra: Object,
+  data: Object
+})
+</script>
+
+<template>
+  <div class="im-message-system-text">
+    <div class="content">
+      {{ extra.content }}
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.im-message-system-text {
+  display: flex;
+  justify-content: center;
+
+  .content {
+    margin: 10px auto;
+    background-color: #f5f5f5;
+    font-size: 11px;
+    line-height: 30px;
+    padding: 0 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #979191;
+    user-select: none;
+    font-weight: 300;
+    display: inline-block;
+    border-radius: 3px;
+  }
+}
+
+html[theme-mode='dark'] {
+  .im-message-system-text {
+    .content {
+      background: unset;
+      color: unset;
+    }
+  }
+}
+</style>
diff --git a/src/components/talk/message/system/sys-message.less b/src/components/talk/message/system/sys-message.less
new file mode 100644
index 0000000..2443ed0
--- /dev/null
+++ b/src/components/talk/message/system/sys-message.less
@@ -0,0 +1,43 @@
+.im-message-sys-text {
+  display: flex;
+  justify-content: center;
+
+  .sys-text {
+    margin: 10px auto;
+    background-color: #f5f5f5;
+    font-size: 11px;
+    line-height: 30px;
+    padding: 0 8px;
+    word-wrap: break-word;
+    color: #979191;
+    user-select: none;
+    font-weight: 300;
+    display: inline-block;
+    border-radius: 3px;
+    max-width: 80%;
+    text-align: center;
+
+    span {
+      margin: 0 5px;
+    }
+
+    a {
+      color: #939596;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+html[theme-mode='dark'] {
+  .im-message-sys-text {
+    .sys-text {
+      background: unset;
+    }
+  }
+}
diff --git a/src/connect.js b/src/connect.js
index 83dc6c0..260eb5f 100644
--- a/src/connect.js
+++ b/src/connect.js
@@ -1,6 +1,6 @@
 // import { h } from 'vue'
 // import { NAvatar } from 'naive-ui'
-import { useTalkStore,useUserStore } from '@/store'
+import { useTalkStore,useUserStore,useDialogueStore } from '@/store'
 // import { notifyIcon } from '@/constant/default'
 import WsSocket from './plugins/ws-socket'
 import EventTalk from './event/talk'
@@ -86,7 +86,7 @@ class Connect {
     this.onPing()
     this.onPong()
     this.onImMessage()
-    // this.onImMessageRead()
+    this.onImMessageRead()
     // this.onImContactStatus()
     this.onImMessageRevoke()
     // this.onImMessageKeyboard()
@@ -104,21 +104,21 @@ class Connect {
     this.conn.on('im.message', (data) => new EventTalk(data))
   }
 
-  // onImMessageRead() {
-  //   this.conn.on('im.message.read', (data) => {
-  //     const dialogueStore = useDialogueStore()
+  onImMessageRead() {
+    this.conn.on('im.message.read', (data) => {
+      const dialogueStore = useDialogueStore()
 
-  //     if (dialogueStore.index_name !== `1_${data.sender_id}`) {
-  //       return
-  //     }
+      if (dialogueStore.index_name !== `1_${data.sender_id}`) {
+        return
+      }
 
-  //     const { msg_ids = [] } = data
+      const { msg_ids = [] } = data
 
-  //     for (const msgid of msg_ids) {
-  //       dialogueStore.updateDialogueRecord({ msg_id: msgid, is_read: 1 })
-  //     }
-  //   })
-  // }
+      for (const msgid of msg_ids) {
+        dialogueStore.updateDialogueRecord({ msg_id: msgid, is_read: 1 })
+      }
+    })
+  }
 
   onImContactStatus() {
     // 好友在线状态事件
diff --git a/src/constant/default.ts b/src/constant/default.ts
new file mode 100644
index 0000000..e52b225
--- /dev/null
+++ b/src/constant/default.ts
@@ -0,0 +1,21 @@
+import avatar from '@/static/image/chatList/notify.png'
+import notify from '@/static/image/chatList/notify.png'
+
+export const GenderOptions = [
+  {
+    label: '未知',
+    value: '0'
+  },
+  {
+    label: '男',
+    value: '1'
+  },
+  {
+    label: '女',
+    value: '2'
+  }
+]
+
+export const defAvatar = avatar
+
+export const notifyIcon = notify
diff --git a/src/directive/dropsize.js b/src/directive/dropsize.js
new file mode 100644
index 0000000..cac2e66
--- /dev/null
+++ b/src/directive/dropsize.js
@@ -0,0 +1,104 @@
+import { storage } from '@/utils/storage'
+
+function getCacheKey(key, direction) {
+  if (!key.length) return ''
+
+  return `dropsize_${direction}_${key}`
+}
+
+export default {
+  mounted: function (el, binding) {
+    let { min, max, direction = 'right', key = '' } = binding.value
+
+    el.style.position = 'relative'
+    el.touch = { status: false, pageX: 0, pageY: 0, width: 0, height: 0 }
+
+    const cacheKey = getCacheKey(key, direction)
+    const cursor = ['left', 'right'].includes(direction) ? 'col-resize' : 'row-resize'
+
+    const linedom = document.createElement('div')
+    linedom.className = `dropsize-line dropsize-line-${direction}`
+
+    el.linedomMouseup = function () {
+      if (!el.touch.status) return
+
+      el.touch.status = false
+
+      linedom.classList.remove('dropsize-resizing')
+
+      document.querySelector('body').classList.remove(`dropsize-${cursor}`)
+    }
+
+    el.linedomMousemove = function (e) {
+      if (!el.touch.status) return
+
+      let width,
+        height = 0
+      switch (direction) {
+        case 'left':
+        case 'right':
+          if (direction == 'left') {
+            width = el.touch.width + el.touch.pageX - e.pageX
+          } else {
+            width = el.touch.width + e.pageX - el.touch.pageX
+          }
+
+          if (width < min) width = min
+          if (width > max) width = max
+
+          el.style.width = `${width}px`
+
+          cacheKey && storage.set(cacheKey, width)
+          break
+        case 'top':
+        case 'bottom':
+          if (direction == 'top') {
+            height = el.touch.height + el.touch.pageY - e.pageY
+          } else {
+            height = el.touch.height + e.pageY - el.touch.pageY
+          }
+
+          if (height < min) height = min
+          if (height > max) height = max
+
+          el.style.height = `${height}px`
+
+          cacheKey && storage.set(cacheKey, height)
+          break
+      }
+    }
+
+    linedom.addEventListener('mousedown', function (e) {
+      el.touch = {
+        status: true,
+        pageX: e.pageX,
+        pageY: e.pageY,
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      }
+
+      this.classList.add('dropsize-resizing')
+
+      document.querySelector('body').classList.add(`dropsize-${cursor}`)
+
+      document.addEventListener('mouseup', el.linedomMouseup)
+      document.addEventListener('mousemove', el.linedomMousemove)
+    })
+
+    if (cacheKey) {
+      const value = storage.get(cacheKey)
+
+      if (direction == 'left' || direction == 'right') {
+        el.style.width = `${value}px`
+      } else {
+        el.style.height = `${value}px`
+      }
+    }
+
+    el.appendChild(linedom)
+  },
+  unmounted: function (el) {
+    document.removeEventListener('mousemove', el.linedomMouseup)
+    document.removeEventListener('mouseup', el.linedomMousemove)
+  }
+}
diff --git a/src/directive/focus.js b/src/directive/focus.js
new file mode 100644
index 0000000..b417197
--- /dev/null
+++ b/src/directive/focus.js
@@ -0,0 +1,7 @@
+export default {
+  mounted(el) {
+    setTimeout(() => {
+      el.focus()
+    }, 0)
+  }
+}
diff --git a/src/directive/index.ts b/src/directive/index.ts
new file mode 100644
index 0000000..3d86bb8
--- /dev/null
+++ b/src/directive/index.ts
@@ -0,0 +1,15 @@
+import dropsize from './dropsize'
+import focus from './focus'
+import loading from './loading'
+
+const directives = {
+  dropsize,
+  focus,
+  loading
+}
+
+export function setupDirective(app: any) {
+  for (const key in directives) {
+    app.directive(key, directives[key])
+  }
+}
diff --git a/src/directive/inner/loading.vue b/src/directive/inner/loading.vue
new file mode 100644
index 0000000..c1a717c
--- /dev/null
+++ b/src/directive/inner/loading.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="loading-content">
+    <div class="ant-spin ant-spin-spinning">
+      <span class="ant-spin-dot ant-spin-dot-spin">
+        <i class="ant-spin-dot-item"></i>
+        <i class="ant-spin-dot-item"></i>
+        <i class="ant-spin-dot-item"></i>
+        <i class="ant-spin-dot-item"></i>
+      </span>
+      <div class="ant-spin-text" style="color: #9b9b9b; margin-top: 8px">加载中...</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  background: var(--im-bg-color);
+  z-index: 1000;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  p {
+    margin-top: 10px;
+    color: rgb(194 194 194);
+  }
+}
+
+.ant-spin {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #000000d9;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: absolute;
+  display: none;
+  color: #1890ff;
+  text-align: center;
+  vertical-align: middle;
+  opacity: 0;
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-spin-spinning {
+  position: static;
+  display: inline-block;
+  opacity: 1;
+}
+.ant-spin-container {
+  position: relative;
+  transition: opacity 0.3s;
+}
+.ant-spin-container:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0;
+  transition: all 0.3s;
+  content: '';
+  pointer-events: none;
+}
+.ant-spin-blur {
+  clear: both;
+  opacity: 0.5;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+.ant-spin-blur:after {
+  opacity: 0.4;
+  pointer-events: auto;
+}
+.ant-spin-tip {
+  color: #00000073;
+}
+.ant-spin-dot {
+  position: relative;
+  display: inline-block;
+  font-size: 20px;
+  width: 1em;
+  height: 1em;
+}
+.ant-spin-dot-item {
+  position: absolute;
+  display: block;
+  width: 9px;
+  height: 9px;
+  background-color: #1890ff;
+  border-radius: 100%;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+.ant-spin-dot-item:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.ant-spin-dot-item:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+.ant-spin-dot-item:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.ant-spin-dot-item:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+.ant-spin-dot-spin {
+  transform: rotate(45deg);
+  animation: antRotate 1.2s infinite linear;
+}
+.ant-spin-sm .ant-spin-dot {
+  font-size: 14px;
+}
+.ant-spin-sm .ant-spin-dot i {
+  width: 6px;
+  height: 6px;
+}
+.ant-spin-lg .ant-spin-dot {
+  font-size: 32px;
+}
+.ant-spin-lg .ant-spin-dot i {
+  width: 14px;
+  height: 14px;
+}
+.ant-spin.ant-spin-show-text .ant-spin-text {
+  display: block;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .ant-spin-blur {
+    background: #fff;
+    opacity: 0.5;
+  }
+}
+.ant-spin-rtl {
+  direction: rtl;
+}
+.ant-spin-rtl .ant-spin-dot-spin {
+  transform: rotate(-45deg);
+  animation-name: antRotateRtl;
+}
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes antRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+</style>
diff --git a/src/directive/loading.js b/src/directive/loading.js
new file mode 100644
index 0000000..a405c2c
--- /dev/null
+++ b/src/directive/loading.js
@@ -0,0 +1,55 @@
+import { createApp } from 'vue'
+import Loading from './inner/loading.vue'
+
+export default {
+  mounted(el, binding) {
+    const app = createApp(Loading)
+    const instance = app.mount(document.createElement('div'))
+    el.instance = instance
+
+    if (binding.value) {
+      if (el.style.position == '') {
+        el.dataset['position'] = true
+      }
+
+      if (el.style.overflow == '') {
+        el.dataset['overflow'] = true
+      }
+
+      appendEl(el)
+    }
+  },
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      binding.value ? appendEl(el) : removeEl(el)
+    }
+  }
+}
+
+// 插入元素
+const appendEl = (el) => {
+  // 给父元素加个定位，让loading元素定位
+  el.style.position = 'relative'
+  el.style.overflow = 'hidden'
+
+  el?.appendChild(el.instance.$el)
+}
+
+// 移除元素
+const removeEl = (el) => {
+  if (el.dataset['position']) {
+    el.style.position = ''
+  }
+
+  if (el.dataset['overflow']) {
+    el.style.overflow = ''
+  }
+
+  delete el.dataset['position']
+  delete el.dataset['overflow']
+
+  let $el = el.instance.$el
+  if (el?.contains($el)) {
+    el?.removeChild($el)
+  }
+}
diff --git a/src/event/base.js b/src/event/base.js
index 1a80b4e..26807e2 100644
--- a/src/event/base.js
+++ b/src/event/base.js
@@ -1,4 +1,4 @@
-import { useDialogueStore } from '@/store'
+import { useUserStore,useDialogueStore } from '@/store'
 // import router from '@/router'
 import { useAuth } from "@/store/auth/index.js";
 
@@ -14,7 +14,7 @@ class Base {
    * 获取当前登录用户的ID
    */
   getAccountId() {
-    return userInfo.value.ID
+    return useUserStore().uid
   }
 
   getTalkParams() {
diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644
index 0000000..9680d12
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1,14 @@
+// export * from './useAccessPrompt'
+// export * from './useClickEvent'
+// export * from './useConnectStatus'
+// export * from './useEventBus'
+// export * from './useFriendsMenu'
+// export * from './useGroupListMenu'
+export * from './useInject'
+export * from './useSessionMenu'
+// export * from './useSmsLock'
+export * from './useTalkRecord'
+// export * from './useThemeMode'
+// export * from './useUnreadMessage'
+export * from './useProvideUserModal'
+// export * from './useVisibilityChange'
diff --git a/src/hooks/useInject.js b/src/hooks/useInject.js
new file mode 100644
index 0000000..319c382
--- /dev/null
+++ b/src/hooks/useInject.js
@@ -0,0 +1,11 @@
+import { inject } from 'vue'
+
+export function useInject() {
+  const user = inject('$user')
+
+  const showUserInfoModal = (uid) => {
+    user(uid)
+  }
+
+  return { showUserInfoModal }
+}
diff --git a/src/hooks/useProvideUserModal.js b/src/hooks/useProvideUserModal.js
new file mode 100644
index 0000000..7e59208
--- /dev/null
+++ b/src/hooks/useProvideUserModal.js
@@ -0,0 +1,20 @@
+import { ref, provide } from 'vue'
+
+export function useProvideUserModal() {
+  const isShow = ref(false)
+  const uid = ref(0)
+
+  const show = (id) => {
+    uid.value = id
+    isShow.value = true
+  }
+
+  const close = () => {
+    uid.value = 0
+    isShow.value = false
+  }
+
+  provide('$user', show)
+
+  return { isShow, uid, show, close }
+}
diff --git a/src/hooks/useSessionMenu.js b/src/hooks/useSessionMenu.js
new file mode 100644
index 0000000..9a6eebb
--- /dev/null
+++ b/src/hooks/useSessionMenu.js
@@ -0,0 +1,268 @@
+import { reactive, nextTick, computed, h, inject } from 'vue'
+// import { renderIcon } from '@/utils/util'
+// import {
+//   ArrowUp,
+//   ArrowDown,
+//   Logout,
+//   Delete,
+//   Clear,
+//   Remind,
+//   CloseRemind,
+//   EditTwo,
+//   IdCard
+// } from '@icon-park/vue-next'
+import { ServeTopTalkList, ServeDeleteTalkList, ServeSetNotDisturb } from '@/api/chat'
+import { useDialogueStore, useTalkStore } from '@/store'
+import { ServeSecedeGroup } from '@/api/group'
+// import { ServeDeleteContact, ServeEditContactRemark } from '@/api/contact'
+// import { NInput } from 'naive-ui'
+
+export function useSessionMenu() {
+  const dropdown = reactive({
+    options: [],
+    show: false,
+    x: 0,
+    y: 0,
+    item: {}
+  })
+
+  const dialogueStore = useDialogueStore()
+  const talkStore = useTalkStore()
+
+  const user = inject('$user')
+
+  // 当前会话索引
+  const indexName = computed(() => dialogueStore.index_name)
+
+  // const onContextMenu = (e: any, item: ISession) => {
+  //   dropdown.show = false
+  //   dropdown.item = Object.assign({}, item)
+  //   dropdown.options = []
+
+  //   const options: any[] = []
+
+  //   if (item.talk_type == 1) {
+  //     options.push({
+  //       icon: renderIcon(IdCard),
+  //       label: '好友信息',
+  //       key: 'info'
+  //     })
+
+  //     options.push({
+  //       icon: renderIcon(EditTwo),
+  //       label: '修改备注',
+  //       key: 'remark'
+  //     })
+  //   }
+
+  //   options.push({
+  //     icon: renderIcon(item.is_top ? ArrowDown : ArrowUp),
+  //     label: item.is_top ? '取消置顶' : '会话置顶',
+  //     key: 'top'
+  //   })
+
+  //   options.push({
+  //     icon: renderIcon(item.is_disturb ? Remind : CloseRemind),
+  //     label: item.is_disturb ? '关闭免打扰' : '开启免打扰',
+  //     key: 'disturb'
+  //   })
+
+  //   options.push({
+  //     icon: renderIcon(Clear),
+  //     label: '移除会话',
+  //     key: 'remove'
+  //   })
+
+  //   if (item.talk_type == 1) {
+  //     options.push({
+  //       icon: renderIcon(Delete),
+  //       label: '删除好友',
+  //       key: 'delete_contact'
+  //     })
+  //   } else {
+  //     options.push({
+  //       icon: renderIcon(Logout),
+  //       label: '退出群聊',
+  //       key: 'signout_group'
+  //     })
+  //   }
+
+  //   dropdown.options = [...options]
+
+  //   nextTick(() => {
+  //     dropdown.show = true
+  //     dropdown.x = e.clientX
+  //     dropdown.y = e.clientY
+  //   })
+
+  //   e.preventDefault()
+  // }
+
+  const onCloseContextMenu = () => {
+    dropdown.show = false
+    dropdown.item = {}
+  }
+
+  const onDeleteTalk = (index_name = '') => {
+    talkStore.delItem(index_name)
+
+    index_name === indexName.value && dialogueStore.$reset()
+  }
+
+  const onUserInfo = (item) => {
+    user(item.receiver_id)
+  }
+
+  // 移除会话
+  const onRemoveTalk = (item) => {
+    ServeDeleteTalkList({
+      list_id: item.id
+    }).then(({ code }) => {
+      if (code == 200) {
+        onDeleteTalk(item.index_name)
+      }
+    })
+  }
+
+  // 设置消息免打扰
+  const onSetDisturb = (item) => {
+    ServeSetNotDisturb({
+      talk_type: item.talk_type,
+      receiver_id: item.receiver_id,
+      is_disturb: item.is_disturb == 0 ? 1 : 0
+    }).then(({ code, message }) => {
+      if (code == 200) {
+        window['$message'].success('设置成功!')
+        talkStore.updateItem({
+          index_name: item.index_name,
+          is_disturb: item.is_disturb == 0 ? 1 : 0
+        })
+      } else {
+        window['$message'].error(message)
+      }
+    })
+  }
+
+  // 置顶会话
+  const onToTopTalk = (item) => {
+    if (item.is_top == 0 && talkStore.topItems.length >= 18) {
+      return window['$message'].info('置顶最多不能超过18个会话')
+    }
+
+    ServeTopTalkList({
+      list_id: item.id,
+      type: item.is_top == 0 ? 1 : 2
+    }).then(({ code, message }) => {
+      if (code == 200) {
+        talkStore.updateItem({
+          index_name: item.index_name,
+          is_top: item.is_top == 0 ? 1 : 0
+        })
+      } else {
+        window['$message'].error(message)
+      }
+    })
+  }
+
+  // // 移除联系人
+  // const onDeleteContact = (item) => {
+  //   const name = item.remark || item.name
+
+  //   window['$dialog'].create({
+  //     showIcon: false,
+  //     title: `删除 [${name}] 联系人？`,
+  //     content: '删除后不再接收对方任何消息。',
+  //     positiveText: '确定',
+  //     negativeText: '取消',
+  //     onPositiveClick: () => {
+  //       ServeDeleteContact({
+  //         friend_id: item.receiver_id
+  //       }).then(({ code, message }) => {
+  //         if (code == 200) {
+  //           window['$message'].success('删除联系人成功')
+  //           onDeleteTalk(item.index_name)
+  //         } else {
+  //           window['$message'].error(message)
+  //         }
+  //       })
+  //     }
+  //   })
+  // }
+
+  // 退出群聊
+  const onSignOutGroup = (item) => {
+    window['$dialog'].create({
+      showIcon: false,
+      title: `退出 [${item.name}] 群聊？`,
+      content: '退出后不再接收此群的任何消息。',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        ServeSecedeGroup({
+          group_id: item.receiver_id
+        }).then(({ code, message }) => {
+          if (code == 200) {
+            window['$message'].success('已退出群聊')
+            onDeleteTalk(item.index_name)
+          } else {
+            window['$message'].error(message)
+          }
+        })
+      }
+    })
+  }
+
+  // const onChangeRemark = (item) => {
+  //   let remark = ''
+  //   window['$dialog'].create({
+  //     showIcon: false,
+  //     title: '修改备注',
+  //     content: () => {
+  //       return h(NInput, {
+  //         defaultValue: item.remark,
+  //         placeholder: '请输入备注信息',
+  //         style: { marginTop: '20px' },
+  //         onInput: (value) => (remark = value),
+  //         autofocus: true
+  //       })
+  //     },
+  //     negativeText: '取消',
+  //     positiveText: '修改备注',
+  //     onPositiveClick: () => {
+  //       ServeEditContactRemark({
+  //         friend_id: item.receiver_id,
+  //         remark: remark
+  //       }).then(({ code, message }) => {
+  //         if (code == 200) {
+  //           window['$message'].success('备注成功')
+  //           talkStore.updateItem({
+  //             index_name: item.index_name,
+  //             remark: remark
+  //           })
+  //         } else {
+  //           window['$message'].error(message)
+  //         }
+  //       })
+  //     }
+  //   })
+  // }
+
+  // 会话列表右键菜单回调事件
+  const onContextMenuTalkHandle = (key) => {
+    // 注册回调事件
+    const evnets = {
+      info: onUserInfo,
+      top: onToTopTalk,
+      remove: onRemoveTalk,
+      disturb: onSetDisturb,
+      signout_group: onSignOutGroup,
+      delete_contact: onDeleteContact,
+      remark: onChangeRemark
+    }
+
+    dropdown.show = false
+    evnets[key] && evnets[key](dropdown.item)
+  }
+
+  return { dropdown, onCloseContextMenu, onContextMenuTalkHandle, onToTopTalk }
+}
diff --git a/src/hooks/useTalkRecord.js b/src/hooks/useTalkRecord.js
new file mode 100644
index 0000000..9774d09
--- /dev/null
+++ b/src/hooks/useTalkRecord.js
@@ -0,0 +1,146 @@
+import { reactive, computed, nextTick } from 'vue'
+import { ServeTalkRecords } from '@/api/chat'
+import { useDialogueStore } from '@/store'
+import { formatTalkRecord } from '@/utils/talk'
+import { addClass, removeClass } from '@/utils/dom'
+
+export const useTalkRecord = (uid) => {
+  const dialogueStore = useDialogueStore()
+
+  const records = computed(() => dialogueStore.records)
+
+  const location = reactive({
+    msgid: '',
+    num: 0
+  })
+
+  const loadConfig = reactive({
+    receiver_id: 0,
+    talk_type: 0,
+    status: 0,
+    cursor: 0
+  })
+
+  const onJumpMessage = (msgid) => {
+    const element = document.getElementById(msgid)
+    if (!element) {
+      if (location.msgid == '') {
+        location.msgid = msgid
+        location.num = 3
+      } else {
+        location.num--
+
+        if (location.num === 0) {
+          location.msgid = ''
+          location.num = 0
+          window['$message'].info('仅支持查看最近300条的记录')
+          return
+        }
+      }
+
+      const el = document.getElementById('imChatPanel')
+
+      return el?.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+
+    location.msgid = ''
+    location.num = 0
+
+    element?.scrollIntoView({
+      behavior: 'smooth'
+    })
+
+    addClass(element, 'border')
+
+    setTimeout(() => {
+      element && removeClass(element, 'border')
+    }, 3000)
+  }
+
+  // 加载数据列表
+  const load = async (params) => {
+    const request = {
+      talk_type: params.talk_type,
+      receiver_id: params.receiver_id,
+      cursor: loadConfig.cursor,
+      limit: 30
+    }
+
+    loadConfig.status = 0
+
+    let scrollHeight = 0
+    const el = document.getElementById('imChatPanel')
+    if (el) {
+      scrollHeight = el.scrollHeight
+    }
+
+    const { data, code } = await ServeTalkRecords(request)
+    if (code != 200) {
+      return (loadConfig.status = 1)
+    }
+
+    // 防止对话切换过快，数据渲染错误
+    if (
+      request.talk_type != loadConfig.talk_type ||
+      request.receiver_id != loadConfig.receiver_id
+    ) {
+      return (location.msgid = '')
+    }
+
+    const items = (data.items || []).map((item) => formatTalkRecord(uid, item))
+
+    if (request.cursor == 0) {
+      // 判断是否是初次加载
+      dialogueStore.clearDialogueRecord()
+    }
+
+    dialogueStore.unshiftDialogueRecord(items.reverse())
+
+    loadConfig.status = items.length >= request.limit ? 1 : 2
+
+    loadConfig.cursor = data.cursor
+
+    nextTick(() => {
+      const el = document.getElementById('imChatPanel')
+
+      if (el) {
+        if (request.cursor == 0) {
+          el.scrollTop = el.scrollHeight
+
+          setTimeout(() => {
+            el.scrollTop = el.scrollHeight + 1000
+          }, 50)
+        } else {
+          el.scrollTop = el.scrollHeight - scrollHeight
+        }
+      }
+
+      if (location.msgid) {
+        onJumpMessage(location.msgid)
+      }
+    })
+  }
+
+  const onRefreshLoad = () => {
+    if (loadConfig.status == 1) {
+      load({
+        receiver_id: loadConfig.receiver_id,
+        talk_type: loadConfig.talk_type,
+        limit: 30
+      })
+    }
+  }
+
+  const onLoad = (params) => {
+    loadConfig.cursor = 0
+    loadConfig.receiver_id = params.receiver_id
+    loadConfig.talk_type = params.talk_type
+
+    load(params)
+  }
+
+  return { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage }
+}
diff --git a/src/main.js b/src/main.js
index d21415c..38ed547 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ import xLoaderror  from '@/components/x-loaderror/index.vue'
 import { vLoading } from "@/components/x-loading/index.js"
 import messagePopup from '@/components/x-message/useMessagePopup'
 import pageAnimation from '@/components/page-animation/index.vue'
+import * as plugins from './plugins'
 const {showMessage}=messagePopup()
 dayjs.locale('zh-cn')
 if (import.meta.env.VITE_SHOW_CONSOLE){
@@ -19,6 +20,8 @@ if (import.meta.env.VITE_SHOW_CONSOLE){
 export function createApp() {
   const app = createSSRApp(App)
   app.use(tmui,{...config})
+  plugins.setPinia(app)
+  plugins.setComponents(app)
   app.directive("loading", vLoading)
   app.mixin(pageAnimation)
  app.component('x-loaderror',xLoaderror)
diff --git a/src/pages.json b/src/pages.json
index 72973ae..5ad0396 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -14,6 +14,14 @@
         "enablePullDownRefresh":false
       }
     },
+    {
+      "path": "pages/dialog/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh":false
+      }
+    },
 
 
     {
diff --git a/src/pages/dialog/components/chatItem.vue b/src/pages/dialog/components/chatItem.vue
new file mode 100644
index 0000000..be74bf0
--- /dev/null
+++ b/src/pages/dialog/components/chatItem.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <wd-swipe-action >
+      <div @click="cellClick" :class="['chatItem',props.data.is_top ===1?'isTop':'' ]">
+        <div class="avatarImg">
+          <tm-badge :count="props.data.unread_num" :maxCount="99" color="#D03050">
+            <tm-image preview :width="96" :height="96" :round="12" :src="props.data.avatar"></tm-image>
+          </tm-badge>
+        </div>
+        <div class="chatInfo">
+          <div class="chatInfo_1">
+            <div class="flex items-center">
+              <div class="text-[#000000] text-[32rpx] font-bold opacity-90">{{ props.data.name }}</div>
+              <div>
+                <div class="companyTag">公司</div>
+              </div>
+            </div>
+            <div class="text-[#000000] text-[28rpx] font-medium opacity-26">{{ beautifyTime(props.data.updated_at) }}
+            </div>
+          </div>
+          <div class="chatInfo_2 w-full mr-[6rpx]">
+            <div class="w-full chatInfo_2_1 textEllipsis">{{ props.data.msg_text }}</div>
+          </div>
+        </div>
+      </div>
+      <template #right>
+        <div class="flex flex-row flex-row-center-end">
+          <div @click="handleTop" class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center">{{props.data.is_top===1?'取消置顶':'置顶'}}</div>
+          <div class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#CF3050] flex items-center justify-center">删除</div>
+        </div>
+      </template>
+    </wd-swipe-action>
+    <div v-if="props.index !== talkStore.talkItems.length - 1" class="divider"></div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, defineProps } from "vue"
+import dayjs from "dayjs";
+import { beautifyTime } from '@/utils/datetime'
+import { useTalkStore } from '@/store'
+import { useSessionMenu } from '@/hooks'
+
+const talkStore = useTalkStore()
+const {
+  onToTopTalk
+} = useSessionMenu()
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+    required: true,
+  },
+  index: {
+    type: Number,
+    default: -1,
+    required: true,
+  }
+});
+
+const cellClick = () => {
+  console.log(props.data);
+
+}
+
+const handleTop = () => {
+  console.log(props.data,1);
+  onToTopTalk(props.data)
+}
+
+
+
+</script>
+<style lang="scss" scoped>
+.chatItem {
+  width: 100%;
+  height: 154rpx;
+  padding: 30rpx 16rpx;
+  display: flex;
+  align-items: center;
+  &.isTop{
+    background-color: #F3F3F3;
+  }
+}
+
+.avatarImg {
+  height: 96rpx;
+  width: 96rpx;
+}
+
+.chatInfo {
+  flex: 1;
+  margin-left: 20rpx;
+}
+
+.chatInfo_1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.chatInfo_2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6rpx;
+}
+
+.chatInfo_2_1 {
+  font-size: 28rpx;
+  color: #000000;
+  opacity: 40%;
+
+}
+
+.companyTag {
+  width: 76rpx;
+  height: 38rpx;
+  border: 1px solid #7A58DE;
+  font-size: 24rpx;
+  text-align: center;
+  border-radius: 6rpx;
+  color: #7A58DE;
+  font-weight: bold;
+  margin-left: 12rpx;
+}
+
+.textEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.divider {
+  background-color: rgba(243, 243, 243, 1);
+  height: 1rpx;
+  margin: 0 18rpx;
+}
+</style>
diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue
new file mode 100644
index 0000000..cc39684
--- /dev/null
+++ b/src/pages/dialog/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="outer-layer">
+    <div>
+      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220" >
+        <div class="flex flex-col items-center justify-center" >
+          <div class="text-[34rpx] font-bold" >{{ talkParams.username }}</div>
+          <div v-if="true" class="text-[24rpx] text-[#999999]" >公司群</div>
+        </div>
+        <template v-slot:right>
+          <div class="mr-[36rpx]">
+            <tm-icon color="rgb(51, 51, 51)" :font-size="36" name="tmicon-gengduo"></tm-icon>
+          </div>
+			</template>
+      </tm-navbar>
+    </div>
+    <div class="root">
+      <div class="dialogBox" >
+        <!-- <div v-if="loadConfig.status == 0" class="h-[240rpx] flex items-center justify-center flex-col" >
+          <wd-loading />
+          <div class="text-[#959598] mt-[20rpx] text-[28rpx]" > 正在加载中... </div>
+        </div>
+        <div v-else-if="loadConfig.status == 1"  @click="onRefreshLoad" >查看更多消息 ...</div>
+        <span v-else class="no-more"> 没有更多消息了 </span> -->
+        <div
+          class="message-item"
+          v-for="(item, index) in records"
+          :key="item.msg_id"
+          :id="item.msg_id"
+        >
+          <!-- 系统消息 -->
+          <div v-if="item.msg_type >= 1000" class="message-box">
+            <component
+              :is="MessageComponents[item.msg_type] || 'unknown-message'"
+              :extra="item.extra"
+              :data="item"
+            />
+          </div>
+          <!-- 撤回消息 -->
+        <div v-else-if="item.is_revoke == 1" class="message-box">
+          <revoke-message
+            :login_uid="uid"
+            :user_id="item.user_id"
+            :nickname="item.nickname"
+            :talk_type="item.talk_type"
+            :datetime="item.created_at"
+          />
+        </div>
+
+        </div>
+      </div>
+    </div>
+    <div class="footBox" >
+      <div class="mt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between" >
+        <div class="w-[534rpx]" >
+          <tm-input :height="72" placeholder=""    ></tm-input>
+        </div>
+        <tm-image :width="52" :height="52" :round="12" :src="smile"></tm-image>
+        <tm-image :width="52" :height="52" :round="12" :src="addCircleGray"></tm-image>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref,reactive,watch,computed,onMounted } from 'vue';
+import { useChatList } from "@/store/chatList/index.js";
+import {useAuth} from "@/store/auth";
+import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
+import addCircleGray from "@/static/image/chatList/addCircleGray.png";
+import { MessageComponents, ForwardableMessageType } from '@/constant/message'
+import smile from "@/static/image/chatList/smile@2x.png";
+import { useInject, useTalkRecord } from '@/hooks'
+
+const userStore = useUserStore()
+const dialogueStore = useDialogueStore()
+
+const talkParams = reactive({
+  uid: computed(() => userStore.uid),
+  index_name: computed(() => dialogueStore.index_name),
+  type: computed(() => dialogueStore.talk.talk_type),
+  receiver_id: computed(() => dialogueStore.talk.receiver_id),
+  username: computed(() => dialogueStore.talk.username),
+  online: computed(() => dialogueStore.online),
+  keyboard: computed(() => dialogueStore.keyboard),
+  num: computed(() => dialogueStore.members.length)
+})
+
+const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(talkParams.uid)
+watch(() => records, (newValue, oldValue) => {
+  console.log(newValue);
+
+},{deep:true,immediate:true})
+
+watch(() => talkParams.uid, (newValue, oldValue) => {
+  let objT = {
+    uid: talkParams.uid,
+    talk_type: talkParams.type,
+    receiver_id: talkParams.receiver_id,
+    index_name: talkParams.index_name
+  }
+  onLoad({ ...objT, limit: 30 })
+},{immediate:true})
+
+onMounted(() => {
+  let objT = {
+    uid: talkParams.uid,
+    talk_type: talkParams.type,
+    receiver_id: talkParams.receiver_id,
+    index_name: talkParams.index_name
+  }
+  onLoad({ ...objT, limit: 30 })
+})
+
+</script>
+<style scoped lang="scss">
+.outer-layer {
+  overflow-y: auto;
+  flex: 1;
+  background-image: url("@/static/image/clockIn/z3280@3x.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+}
+.root {
+  flex: 1;
+  padding: 20rpx 32rpx;
+}
+.searchRoot {
+  background-color: #fff;
+  padding: 22rpx 18rpx;
+}
+.contentRoot {
+  margin-top: 20rpx;
+  background-color: #fff;
+}
+.footBox {
+  height: 162rpx;
+  background-color: #fff;
+}
+.dialogBox{
+  height: 100%;
+}
+
+</style>
diff --git a/src/pages/index/components/chatItem.vue b/src/pages/index/components/chatItem.vue
new file mode 100644
index 0000000..e3e5d52
--- /dev/null
+++ b/src/pages/index/components/chatItem.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <wd-swipe-action>
+      <div @click="cellClick" :class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']">
+        <div class="avatarImg">
+          <tm-badge :count="props.data.unread_num" :maxCount="99" color="#D03050">
+            <tm-image preview :width="96" :height="96" :round="12" :src="props.data.avatar"></tm-image>
+          </tm-badge>
+        </div>
+        <div class="chatInfo">
+          <div class="chatInfo_1">
+            <div class="flex items-center">
+              <div class="text-[#000000] text-[32rpx] font-bold opacity-90">{{ props.data.name }}</div>
+              <div>
+                <div class="companyTag">公司</div>
+              </div>
+            </div>
+            <div class="text-[#000000] text-[28rpx] font-medium opacity-26">{{ beautifyTime(props.data.updated_at) }}
+            </div>
+          </div>
+          <div class="chatInfo_2 w-full mr-[6rpx]">
+            <div class="w-full chatInfo_2_1 textEllipsis">{{ props.data.msg_text }}</div>
+          </div>
+        </div>
+      </div>
+      <template #right>
+        <div class="flex flex-row flex-row-center-end">
+          <div @click="handleTop"
+            class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center">
+            {{ props.data.is_top === 1 ? '取消置顶' : '置顶' }}</div>
+          <div class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#CF3050] flex items-center justify-center">删除</div>
+        </div>
+      </template>
+    </wd-swipe-action>
+    <div v-if="props.index !== talkStore.talkItems.length - 1" class="divider"></div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, defineProps } from "vue"
+import dayjs from "dayjs";
+import { beautifyTime } from '@/utils/datetime'
+import { ServeClearTalkUnreadNum } from '@/api/chat'
+import { useTalkStore, useDialogueStore } from '@/store'
+import { useSessionMenu } from '@/hooks'
+
+const talkStore = useTalkStore()
+const {
+  onToTopTalk
+} = useSessionMenu()
+const dialogueStore = useDialogueStore()
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
+    required: true,
+  },
+  index: {
+    type: Number,
+    default: -1,
+    required: true,
+  }
+});
+
+const cellClick = () => {
+  console.log(props.data);
+  // 更新编辑信息
+  dialogueStore.setDialogue(props.data)
+
+  // 清空消息未读数
+  if (props.data.unread_num > 0) {
+    ServeClearTalkUnreadNum({
+      talk_type: props.data.talk_type,
+      receiver_id: props.data.receiver_id
+    }).then(() => {
+      talkStore.updateItem({
+        index_name: props.data.index_name,
+        unread_num: 0
+      })
+    })
+  }
+  uni.navigateTo({
+    url: '/pages/dialog/index',
+  })
+}
+
+const handleTop = () => {
+  console.log(props.data, 1);
+  onToTopTalk(props.data)
+}
+
+
+
+</script>
+<style lang="scss" scoped>
+.chatItem {
+  width: 100%;
+  height: 154rpx;
+  padding: 30rpx 16rpx;
+  display: flex;
+  align-items: center;
+
+  &.isTop {
+    background-color: #F3F3F3;
+  }
+}
+
+.avatarImg {
+  height: 96rpx;
+  width: 96rpx;
+}
+
+.chatInfo {
+  flex: 1;
+  margin-left: 20rpx;
+}
+
+.chatInfo_1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.chatInfo_2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6rpx;
+}
+
+.chatInfo_2_1 {
+  font-size: 28rpx;
+  color: #000000;
+  opacity: 40%;
+
+}
+
+.companyTag {
+  width: 76rpx;
+  height: 38rpx;
+  border: 1px solid #7A58DE;
+  font-size: 24rpx;
+  text-align: center;
+  border-radius: 6rpx;
+  color: #7A58DE;
+  font-weight: bold;
+  margin-left: 12rpx;
+}
+
+.textEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.divider {
+  background-color: rgba(243, 243, 243, 1);
+  height: 1rpx;
+  margin: 0 18rpx;
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index b6f3d85..4173ded 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,42 +1,66 @@
 <template>
   <div class="outer-layer">
     <div>
-      <tm-navbar :hideBack="false" hideHome :title="123"> </tm-navbar>
+      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="320" >
+        <template v-slot:left>
+          <div class="flex items-center ml-[48rpx]" >
+            <tm-image :width="72" :height="72" :round="12" :src="userStore.avatar"></tm-image>
+            <div class="ml-[24rpx] text-[36rpx] font-bold">{{ userStore.nickname }}</div>
+          </div>
+        </template>
+        <template v-slot:right>
+          <div class="mr-[48rpx]">
+            <tm-image :width="41" :height="41" :round="12" :src="addCircle"></tm-image>
+          </div>
+			</template>
+      </tm-navbar>
     </div>
     <div class="root">
       <div class="searchRoot">
         <tm-input placeholder="请输入…" color="#F9F9FD" :round="1" prefix="tmicon-search" prefixColor="#46299D" ></tm-input>
       </div>
       <div class="contentRoot">
-        <div class="chatItem" >
-          <div class="avatarImg">
-            <tm-image preview :width="96" :height="96" :src="userInfo.Avatar"></tm-image>
-          </div>
-          <div class="chatInfo" >
-            <div class="chatInfo_1" >
-              <div class="flex items-center">
-                <div class="text-[#000000] text-[32rpx] font-bold opacity-90" >泰丰国际（600）</div>
-                <div>
-                  <div class="companyTag" >公司</div>
-                </div>
-              </div>
-              <div class="text-[#000000] text-[28rpx] font-medium opacity-26" >12:00</div>
-            </div>
-            <div class="chatInfo_2 w-full mr-[6rpx]">
-              <div class="w-full chatInfo_2_1 textEllipsis" >欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入欢迎加入</div>
-            </div>
-          </div>
-        </div>
+        <chatItem
+          v-for="(item,index) in items"
+          :key="item.index_name"
+          :index="index"
+          :data="item"
+        />
       </div>
     </div>
   </div>
 </template>
 <script setup>
+import { ref,watch,computed } from 'vue';
 import { useChatList } from "@/store/chatList/index.js";
 import {useAuth} from "@/store/auth";
+import { useTalkStore,useUserStore } from '@/store'
+import chatItem from './components/chatItem.vue';
+import addCircle from "@/static/image/chatList/addCircle.png";
 
+const talkStore = useTalkStore()
+const userStore = useUserStore()
 const {userInfo}=useAuth()
 
+const topItems = computed(() => talkStore.topItems)
+const items = computed(() => {
+  // if (searchKeyword.value.length === 0) {
+    return talkStore.talkItems
+  // }
+
+  // return talkStore.talkItems.filter((item) => {
+  //   let keyword = item.remark || item.name
+
+  //   return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
+  // })
+})
+
+
+watch(() => talkStore, (newValue, oldValue) => {
+  console.log(talkStore);
+
+},{deep:true,immediate:true})
+
 </script>
 <style scoped lang="scss">
 .outer-layer {
@@ -60,52 +84,5 @@ const {userInfo}=useAuth()
   margin-top: 20rpx;
   background-color: #fff;
 }
-.chatItem{
-  width: 100%;
-  padding: 30rpx 16rpx;
-  display: flex;
-  align-items: center;
-}
-.avatarImg{
-  height: 96rpx;
-  width: 96rpx;
-}
-.chatInfo{
-  flex:1;
-  margin-left: 20rpx;
-}
-.chatInfo_1{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.chatInfo_2{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 6rpx;
-}
-.chatInfo_2_1{
-  font-size: 28rpx;
-  color: #000000;
-  opacity: 40%;
 
-}
-.companyTag{
-  width: 76rpx;
-  height: 38rpx;
-  border: 1px solid #7A58DE;
-  font-size: 24rpx;
-  text-align: center;
-  border-radius: 6rpx;
-  color: #7A58DE;
-  font-weight: bold;
-}
-.textEllipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-}
 </style>
diff --git a/src/plugins/component.js b/src/plugins/component.js
new file mode 100644
index 0000000..b21aed9
--- /dev/null
+++ b/src/plugins/component.js
@@ -0,0 +1,11 @@
+import { setComponents as Components } from '@/components/talk/message'
+import Avatar from '@/components/base/Avatar.vue'
+
+export { setupDirective } from '@/directive'
+
+// 注册全局消息组件
+export function setComponents(app) {
+  Components(app)
+
+  app.component('im-avatar', Avatar)
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
new file mode 100644
index 0000000..4b9ffc9
--- /dev/null
+++ b/src/plugins/index.js
@@ -0,0 +1,3 @@
+export * from './component'
+export * from './ws-socket'
+export * from './pinia'
diff --git a/src/plugins/pinia.js b/src/plugins/pinia.js
new file mode 100644
index 0000000..62b0bb8
--- /dev/null
+++ b/src/plugins/pinia.js
@@ -0,0 +1,9 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export function setPinia(app) {
+  const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
+
+  app.use(pinia)
+}
diff --git a/src/static/image/chatList/addCircle.png b/src/static/image/chatList/addCircle.png
new file mode 100644
index 0000000..a0104b1
Binary files /dev/null and b/src/static/image/chatList/addCircle.png differ
diff --git a/src/static/image/chatList/addCircleGray.png b/src/static/image/chatList/addCircleGray.png
new file mode 100644
index 0000000..a292977
Binary files /dev/null and b/src/static/image/chatList/addCircleGray.png differ
diff --git a/src/static/image/chatList/avatar.png b/src/static/image/chatList/avatar.png
new file mode 100644
index 0000000..5e9fea0
Binary files /dev/null and b/src/static/image/chatList/avatar.png differ
diff --git a/src/static/image/chatList/notify.png b/src/static/image/chatList/notify.png
new file mode 100644
index 0000000..c3c2f66
Binary files /dev/null and b/src/static/image/chatList/notify.png differ
diff --git a/src/static/image/chatList/smile@2x.png b/src/static/image/chatList/smile@2x.png
new file mode 100644
index 0000000..7e38bf9
Binary files /dev/null and b/src/static/image/chatList/smile@2x.png differ
diff --git a/src/store/auth/index.js b/src/store/auth/index.js
index a26ecf5..7c23a52 100644
--- a/src/store/auth/index.js
+++ b/src/store/auth/index.js
@@ -3,7 +3,8 @@ import {uniStorage} from "@/utils/uniStorage.js"
 
 import {ref} from 'vue'
 export const useAuth = createGlobalState(() => {
-  const token = useStorage('token', '', uniStorage)
+  // const token = useStorage('token', '', uniStorage)
+  const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ffea38d3362de44912166520e87a6f38da2162e348845fabbb0db3604d4a2e7e543f680408fdbb166cbc70418235831e0b95aed8016b4a3b75feeec68212e4824da6e28c747409384ce136db6b9cd6e688cc40db73794e69f51be0920811cc437e51ca29fc82fccc1e98cb39b2577ef5b574460c853336d6afbe13149711d5e3fe')
   const refreshToken = useStorage('refreshToken', '', uniStorage)
   const userInfo = useStorage('userInfo', {}, uniStorage)
   const leaderList = useStorage('leaderList', [], uniStorage)
diff --git a/src/store/index.js b/src/store/index.js
index 8fbe24f..6f2d6d0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,5 +4,5 @@ export * from '@/store/modules/talk'
 // export * from '@/store/modules/editor'
 export * from '@/store/modules/dialogue'
 // export * from '@/store/modules/editor-draft'
-// export * from '@/store/modules/uploads'
+export * from '@/store/modules/uploads'
 // export * from '@/store/modules/note'
diff --git a/src/store/modules/talk.js b/src/store/modules/talk.js
index 7adce9a..30391c8 100644
--- a/src/store/modules/talk.js
+++ b/src/store/modules/talk.js
@@ -22,9 +22,15 @@ export const useTalkStore = defineStore('talk', {
 
     // 对话列表
     talkItems: (state) => {
-      return state.items.sort((a, b) => {
+      let topList = state.items.filter((item) => item.is_top == 1)
+      let listT = state.items.filter(v=>v.is_top !== 1)
+      let listP = topList.sort((a, b) => {
         return ttime(b.updated_at) - ttime(a.updated_at)
       })
+      listT = listT.sort((a, b) => {
+        return ttime(b.updated_at) - ttime(a.updated_at)
+      })
+      return [...listP,...listT]
     },
 
     // 消息未读数总计
@@ -65,10 +71,9 @@ export const useTalkStore = defineStore('talk', {
     // 更新对话消息
     updateMessage(params) {
       const item = this.items.find((item) => item.index_name === params.index_name)
-
       if (item) {
         item.unread_num++
-        // item.msg_text = params.msg_text
+        item.msg_text = params.msg_text
         item.updated_at = params.updated_at
       }
     },
diff --git a/src/store/modules/uploads.ts b/src/store/modules/uploads.ts
new file mode 100644
index 0000000..0451d7b
--- /dev/null
+++ b/src/store/modules/uploads.ts
@@ -0,0 +1,125 @@
+import { defineStore } from 'pinia'
+import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
+import { ServeSendTalkFile } from '@/api/chat'
+
+// @ts-ignore
+const message = window.$message
+
+// 处理拆分上传文件
+function fileSlice(file: File, uploadId: string, eachSize: number) {
+  const splitNum = Math.ceil(file.size / eachSize) // 分片总数
+  const items: FormData[] = []
+
+  // 处理每个分片的上传操作
+  for (let i = 0; i < splitNum; i++) {
+    const start = i * eachSize
+    const end = Math.min(file.size, start + eachSize)
+
+    const form = new FormData()
+    form.append('file', file.slice(start, end))
+    form.append('upload_id', uploadId)
+    form.append('split_index', `${i + 1}`)
+    form.append('split_num', `${splitNum}`)
+
+    items.push(form)
+  }
+
+  return items
+}
+
+export const useUploadsStore = defineStore('uploads', {
+  state: () => {
+    return {
+      isShow: false,
+      items: []
+    }
+  },
+  getters: {
+    successCount: (state) => {
+      return state.items.filter((item: any) => {
+        return item.status === 2
+      }).length
+    }
+  },
+  actions: {
+    close() {
+      this.isShow = false
+    },
+
+    // 初始化上传
+    initUploadFile(file: File, talkType: number, receiverId: number, username: string) {
+      ServeFindFileSplitInfo({
+        file_name: file.name,
+        file_size: file.size
+      }).then((res) => {
+        if (res.code == 200) {
+          const { upload_id, split_size } = res.data
+
+          // @ts-ignore
+          this.items.unshift({
+            file: file,
+            talk_type: talkType,
+            receiver_id: receiverId,
+            upload_id: upload_id,
+            uploadIndex: 0,
+            percentage: 0,
+            status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常
+            files: fileSlice(file, upload_id, split_size),
+            avatar: '',
+            username: username
+          })
+
+          this.triggerUpload(upload_id)
+          this.isShow = true
+        } else {
+          message.error(res.message)
+        }
+      })
+    },
+
+    // 获取分片文件数组索引
+    findItem(uploadId: string): any {
+      return this.items.find((item: any) => item.upload_id === uploadId)
+    },
+
+    // 触发上传
+    triggerUpload(uploadId: string) {
+      const item = this.findItem(uploadId)
+
+      const form = item.files[item.uploadIndex]
+
+      item.status = 1
+
+      ServeFileSubareaUpload(form)
+        .then((res) => {
+          if (res.code == 200) {
+            item.uploadIndex++
+
+            if (item.uploadIndex === item.files.length) {
+              item.status = 2
+              item.percentage = 100
+              this.sendUploadMessage(item)
+            } else {
+              const percentage = (item.uploadIndex / item.files.length) * 100
+              item.percentage = percentage.toFixed(1)
+              this.triggerUpload(uploadId)
+            }
+          } else {
+            item.status = 3
+          }
+        })
+        .catch(() => {
+          item.status = 3
+        })
+    },
+
+    // 发送上传消息
+    sendUploadMessage(item: any) {
+      ServeSendTalkFile({
+        upload_id: item.upload_id,
+        receiver_id: item.receiver_id,
+        talk_type: item.talk_type
+      })
+    }
+  }
+})
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 8410433..612ddb1 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-// import { ServeGetUserSetting } from '@/api/user'
+import { ServeGetUserSetting } from '@/api/user/index.js'
 // import { ServeFindFriendApplyNum } from '@/api/contact'
 import { ServeGroupApplyUnread } from '@/api/group'
 // import { delAccessToken } from '@/utils/auth'
@@ -38,21 +38,21 @@ export const useUserStore = defineStore('user', {
     // },
 
     loadSetting() {
-      // ServeGetUserSetting().then(({ code, data }) => {
-      //   if (code == 200) {
-      //     this.nickname = data.user_info.nickname
-      //     this.uid = data.user_info.uid
-      //     this.avatar = data.user_info.avatar
+      ServeGetUserSetting().then(({ code, data }) => {
+        if (code == 200) {
+          this.nickname = data.user_info.nickname
+          this.uid = data.user_info.uid
+          this.avatar = data.user_info.avatar
 
-      //     this.gender = data.user_info.gender
-      //     this.mobile = data.user_info.mobile || ''
-      //     this.email = data.user_info.email || ''
-      //     this.motto = data.user_info.motto
-      //     this.isQiye = data.user_info.is_qiye || false
+          this.gender = data.user_info.gender
+          this.mobile = data.user_info.mobile || ''
+          this.email = data.user_info.email || ''
+          this.motto = data.user_info.motto
+          this.isQiye = data.user_info.is_qiye || false
 
-      //     storage.set('user_info', data)
-      //   }
-      // })
+          // storage.set('user_info', data)
+        }
+      })
 
       // ServeFindFriendApplyNum().then(({ code, data }) => {
       //   if (code == 200) {
diff --git a/src/utils/common.js b/src/utils/common.js
new file mode 100644
index 0000000..512ac2d
--- /dev/null
+++ b/src/utils/common.js
@@ -0,0 +1,198 @@
+import { createApp } from 'vue'
+
+/**
+ * 防抖函数
+ *
+ * @param {*} fn 回调方法
+ * @param {*} delay 延迟时间
+ * @returns
+ */
+export function debounce(fn, delay) {
+  let timer = null
+
+  return function () {
+    timer && clearTimeout(timer)
+
+    let content = this
+    let args = arguments
+    timer = setTimeout(() => {
+      fn.apply(content, args)
+    }, delay)
+  }
+}
+
+/**
+ * 节流函数
+ *
+ * @param {*} fn 回调方法
+ * @param {*} delay 延迟时间
+ * @returns
+ */
+export function throttle(fn, delay, call = function () {}) {
+  let lastTime = 0
+
+  return function () {
+    // 获取当前时间戳
+    let now = new Date().getTime()
+
+    // 如果当前时间减去上次时间大于限制时间时才执行
+    if (now - lastTime > delay) {
+      lastTime = now
+      fn.apply(this, arguments)
+    } else {
+      call()
+    }
+  }
+}
+
+/**
+ * 剪贴板复制功能
+ *
+ * @param {String} text 复制内容
+ * @param {Function} callback 复制成功回调方法
+ */
+export function clipboard(text, callback) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      callback && callback()
+    })
+    .catch(() => {
+      alert('Oops, unable to copy')
+    })
+}
+
+export async function clipboardImage(src, callback) {
+  const { state } = await navigator.permissions.query({
+    name: 'clipboard-write'
+  })
+
+  if (state != 'granted') return
+
+  try {
+    const data = await fetch(src)
+    const blob = await data.blob()
+
+    // navigator.clipboard.write 仅支持 png 图片
+    if (blob.type == 'image/png') {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          [blob.type]: blob
+        })
+      ])
+
+      return callback()
+    }
+
+    const objectURL = URL.createObjectURL(blob)
+
+    const img = new Image()
+    img.src = URL.createObjectURL(blob)
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      canvas.toBlob(
+        (blob) => {
+          const data = [new ClipboardItem({ [blob.type]: blob })]
+
+          navigator.clipboard
+            .write(data)
+            .then(() => {
+              callback()
+            })
+            .catch((err) => {
+              console.error(err)
+            })
+
+          URL.revokeObjectURL(objectURL)
+        },
+        'image/png',
+        1
+      )
+    }
+  } catch (err) {
+    console.error(err.name, err.message)
+  }
+}
+
+export function hashStrToHexColor(str) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  let color = '#'
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff
+    color += value.toString(16).padStart(2, '0')
+  }
+  return color
+}
+
+export function emitCall(event, data, fn) {
+  return { event: event, data: data, callBack: fn || function () {} }
+}
+
+// 判断是否是客户端模式
+export function isElectronMode() {
+  return electron() != undefined
+}
+
+export function electron() {
+  return window.electron
+}
+
+export function htmlDecode(input) {
+  return input
+    .replace(/&amp;/g, '&')
+    .replace(/&#39;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&#34;/g, '"')
+}
+
+// 文件转 图片 关键函数  异步
+export function getVideoImage(file, time = 1) {
+  return new Promise((resolve) => {
+    let video = document.createElement('video')
+
+    const objectURL = URL.createObjectURL(file)
+
+    video.src = objectURL
+    video.currentTime = time
+    video.autoplay = true
+    video.muted = true
+
+    video.oncanplay = () => {
+      let canvas = document.createElement('canvas')
+      canvas.width = video.videoWidth
+      canvas.height = video.videoHeight
+
+      let ctx = canvas.getContext('2d')
+      ctx?.drawImage(video, 0, 0, canvas.width, canvas.height)
+
+      let data = {
+        url: canvas.toDataURL('image/jpeg', 1),
+        width: video.videoWidth,
+        height: video.videoHeight,
+        duration: video.duration,
+        file: null
+      }
+
+      canvas.toBlob((blob) => {
+        data.file = new File([blob], 'image.jpeg', {
+          type: blob.type,
+          lastModified: Date.now()
+        })
+
+        URL.revokeObjectURL(objectURL)
+
+        resolve(data)
+      }, 'image/jpeg')
+    }
+  })
+}
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
new file mode 100644
index 0000000..d16e443
--- /dev/null
+++ b/src/utils/dom.ts
@@ -0,0 +1,56 @@
+function trim(string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return
+  let curClass = el.className
+  const classes = (cls || '').split(' ')
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.add(clsName)
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return
+  const classes = cls.split(' ')
+  let curClass = ' ' + el.className + ' '
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i]
+    if (!clsName) continue
+
+    if (el.classList) {
+      el.classList.remove(clsName)
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ')
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass)
+  }
+}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..e57bcf3
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,73 @@
+interface IStorage {
+  setItem(key: string, value: any): void
+  getItem(key: string): any
+  removeItem(key: string): void
+  clear(): void
+}
+
+class Storage {
+  // 缓存前缀
+  prefix = ''
+
+  // 缓存驱动
+  storage: IStorage = localStorage
+
+  constructor(prefix = '', storage: IStorage) {
+    this.prefix = prefix
+    this.storage = storage
+  }
+
+  cacheKey(key: string) {
+    return `${this.prefix}_${key}`.toUpperCase()
+  }
+
+  get(key: string, def: any = '') {
+    const item = this.storage.getItem(this.cacheKey(key))
+
+    if (!item) return def
+
+    try {
+      const { value, expire } = JSON.parse(item)
+
+      // 在有效期内直接返回
+      if (expire === null || expire >= Date.now()) {
+        return value
+      }
+
+      this.remove(key)
+    } catch (e) {
+      console.warn(e)
+    }
+
+    return def
+  }
+
+  /**
+   * 设置缓存
+   *
+   * @param {String} key // 缓存KEY
+   * @param {Any} value // 缓存值
+   * @param {Number|null} expire // 缓存时间单位秒
+   */
+  set(key: string, value: any, expire: number | null = 60 * 60 * 24) {
+    this.storage.setItem(
+      this.cacheKey(key),
+      JSON.stringify({
+        value,
+        expire: expire !== null ? new Date().getTime() + expire * 1000 : null
+      })
+    )
+  }
+
+  remove(key: string) {
+    this.storage.removeItem(this.cacheKey(key))
+  }
+
+  clear() {
+    this.storage.clear()
+  }
+}
+
+export default Storage
+
+export const storage = new Storage('im', localStorage)
diff --git a/src/utils/upload/auth.js b/src/utils/upload/auth.js
new file mode 100644
index 0000000..b869dc5
--- /dev/null
+++ b/src/utils/upload/auth.js
@@ -0,0 +1,37 @@
+import { storage } from './storage'
+
+const AccessToken = 'AUTH_TOKEN'
+
+/**
+ * 验证是否登录
+ *
+ * @returns token
+ */
+export function isLoggedIn() {
+  return getAccessToken() != ''
+}
+
+/**
+ * 获取登录授权 Token
+ *
+ * @returns token
+ */
+export function getAccessToken() {
+  return storage.get(AccessToken) || ''
+}
+
+/**
+ * 设置登录授权 Token
+ *
+ * @returns token
+ */
+export function setAccessToken(token = '', expire = 60 * 60 * 2) {
+  return storage.set(AccessToken, token, expire) || ''
+}
+
+/**
+ * 删除登录授权 Token
+ */
+export function delAccessToken() {
+  storage.remove(AccessToken)
+}
diff --git a/src/utils/upload/request.js b/src/utils/upload/request.js
new file mode 100644
index 0000000..963d1cd
--- /dev/null
+++ b/src/utils/upload/request.js
@@ -0,0 +1,109 @@
+import axios from 'axios'
+import { delAccessToken, getAccessToken } from '@/utils/upload/auth'
+
+// 创建 axios 实例
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: import.meta.env.VITE_BASE_API,
+
+  // 请求超时时间
+  timeout: 10000
+})
+
+let once = false
+
+/**
+ * 异常拦截处理器
+ *
+ * @param {*} error
+ */
+const errorHandler = (error) => {
+  // 判断是否是响应错误信息
+  if (error.response) {
+    if (error.response.status == 401) {
+      delAccessToken()
+
+      if (!once) {
+        once = true
+        console.log('当前登录已失效，请重新登录');
+
+        // window['$dialog'].info({
+        //   title: '友情提示',
+        //   content: '当前登录已失效，请重新登录？',
+        //   positiveText: '立即登录?',
+        //   maskClosable: false,
+        //   onPositiveClick: () => {
+        //     location.reload()
+        //   }
+        // })
+      }
+    }
+  }
+
+  return Promise.reject(error)
+}
+
+// 请求拦截器
+request.interceptors.request.use((config) => {
+  const token = getAccessToken()
+
+  if (token) {
+    config.headers['Authorization'] = `Bearer ${token}`
+  }
+
+  return config
+}, errorHandler)
+
+// 响应拦截器
+request.interceptors.response.use((response) => response.data, errorHandler)
+
+/**
+ * GET 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const get = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    params: data,
+    method: 'get',
+    ...options
+  })
+}
+
+/**
+ * POST 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const post = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    method: 'post',
+    data: data,
+    ...options
+  })
+}
+
+/**
+ * 上传文件 POST 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const upload = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    method: 'post',
+    data: data,
+    ...options
+  })
+}
diff --git a/src/utils/upload/storage.ts b/src/utils/upload/storage.ts
new file mode 100644
index 0000000..e57bcf3
--- /dev/null
+++ b/src/utils/upload/storage.ts
@@ -0,0 +1,73 @@
+interface IStorage {
+  setItem(key: string, value: any): void
+  getItem(key: string): any
+  removeItem(key: string): void
+  clear(): void
+}
+
+class Storage {
+  // 缓存前缀
+  prefix = ''
+
+  // 缓存驱动
+  storage: IStorage = localStorage
+
+  constructor(prefix = '', storage: IStorage) {
+    this.prefix = prefix
+    this.storage = storage
+  }
+
+  cacheKey(key: string) {
+    return `${this.prefix}_${key}`.toUpperCase()
+  }
+
+  get(key: string, def: any = '') {
+    const item = this.storage.getItem(this.cacheKey(key))
+
+    if (!item) return def
+
+    try {
+      const { value, expire } = JSON.parse(item)
+
+      // 在有效期内直接返回
+      if (expire === null || expire >= Date.now()) {
+        return value
+      }
+
+      this.remove(key)
+    } catch (e) {
+      console.warn(e)
+    }
+
+    return def
+  }
+
+  /**
+   * 设置缓存
+   *
+   * @param {String} key // 缓存KEY
+   * @param {Any} value // 缓存值
+   * @param {Number|null} expire // 缓存时间单位秒
+   */
+  set(key: string, value: any, expire: number | null = 60 * 60 * 24) {
+    this.storage.setItem(
+      this.cacheKey(key),
+      JSON.stringify({
+        value,
+        expire: expire !== null ? new Date().getTime() + expire * 1000 : null
+      })
+    )
+  }
+
+  remove(key: string) {
+    this.storage.removeItem(this.cacheKey(key))
+  }
+
+  clear() {
+    this.storage.clear()
+  }
+}
+
+export default Storage
+
+export const storage = new Storage('im', localStorage)
diff --git a/tsconfig.json b/tsconfig.json
index 4e2bf83..22b126a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,7 @@
     "./src/*.ts",
     "./src/*.d.ts",
     "./src/**/*.ts"
-, "src/connect.js", "src/store/index.js", "src/store/modules/settings.js", "src/store/modules/user.js", "src/store/modules/uploads.js", "src/store/modules/talk.js", "src/event/talk.js", "src/plugins/ws-socket.js"  ],
+, "src/connect.js", "src/store/index.js", "src/store/modules/settings.js", "src/store/modules/user.js", "src/store/modules/uploads.ts", "src/store/modules/talk.js", "src/event/talk.js", "src/plugins/ws-socket.js", "src/hooks/index.js", "src/hooks/useSessionMenu.js", "src/hooks/useProvideUserModal.js", "src/hooks/useInject.js", "src/hooks/useTalkRecord.js", "src/plugins/index.js", "src/plugins/pinia.js", "src/plugins/component.js"  ],
   "vueCompilerOptions": {
     "experimentalRuntimeMode": "runtime-uni-app",
     "nativeTags": ["block", "component", "template", "slot"]