diff --git a/README.md b/README.md
index 8b13789..9143bb6 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,13 @@
+## 今日计划
+### 一、技术
+用vue3框架ts进行开发，element plus页面构建，web端应用        
+用了高德地图API     
 
+### 二、功能介绍
+1. 登录注册
+2. ai文字询问
+3. ai语音询问
+4. ai图片询问
+5. 个人信息展示
+6. 地图实时显示地理位置
+7. ai生成今日天气的风景图
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index bc57d8c..b60e825 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -8,4 +8,5 @@ export {}
 declare global {
   const ElMenu: typeof import('element-plus/es')['ElMenu']
   const ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }
diff --git a/components.d.ts b/components.d.ts
index 73ded34..93b8b95 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Charts: typeof import('./src/components/charts.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
@@ -22,14 +23,19 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLoading: typeof import('element-plus/es')['ElLoading']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -47,14 +53,18 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    LocationMap: typeof import('./src/components/LocationMap.vue')['default']
+    Main: typeof import('./src/components/main.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
@@ -62,4 +72,7 @@ declare module 'vue' {
     ValidCode: typeof import('./src/components/validCode.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/index.html b/index.html
index 872ab31..4d45f34 100644
--- a/index.html
+++ b/index.html
@@ -11,3 +11,5 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+
+
diff --git a/package-lock.json b/package-lock.json
index 74aebc9..16bbadd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,22 +9,27 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "axios": "^1.9.0",
+        "axios": "^1.10.0",
         "echarts": "^5.6.0",
         "element-plus": "^2.9.9",
         "pinia": "^3.0.1",
+        "pinia-plugin-persistedstate": "^4.3.0",
+        "recordrtc": "^5.6.2",
         "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "weixin-js-sdk": "^1.6.5"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.1",
         "@types/axios": "^0.9.36",
         "@types/echarts": "^4.9.22",
-        "@types/node": "^22.14.0",
+        "@types/node": "^22.15.34",
+        "@types/recordrtc": "^5.6.14",
         "@vitejs/plugin-vue": "^5.2.3",
         "@vue/tsconfig": "^0.7.0",
         "less": "^4.3.0",
         "npm-run-all2": "^7.0.2",
+        "sass-embedded": "^1.89.2",
         "typescript": "~5.8.0",
         "unplugin-auto-import": "^19.1.2",
         "unplugin-vue-components": "^28.5.0",
@@ -502,6 +507,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/@bufbuild/protobuf/-/protobuf-2.5.2.tgz",
+      "integrity": "sha512-foZ7qr0IsUBjzWIq+SuBLfdQCpJ1j8cTuNNT4owngTHoN5KsJb8L9t65fzz7SCeSWzescoOil/0ldqiL041ABg==",
+      "dev": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -1022,6 +1034,85 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nuxt/kit": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmmirror.com/@nuxt/kit/-/kit-3.17.4.tgz",
+      "integrity": "sha512-l+hY8sy2XFfg3PigZj+PTu6+KIJzmbACTRimn1ew/gtCz+F38f6KTF4sMRTN5CUxiB8TRENgEonASmkAWfpO9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.0.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.5",
+        "ignore": "^7.0.4",
+        "jiti": "^2.4.2",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.1.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.13",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.0.1",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/unimport": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-5.0.1.tgz",
+      "integrity": "sha512-1YWzPj6wYhtwHE+9LxRlyqP4DiRrhGfJxdtH475im8ktyZXO3jHj/3PZ97zDdvkYoovFdi0K4SKl3a7l92v3sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "pkg-types": "^2.1.0",
+        "scule": "^1.3.0",
+        "strip-literal": "^3.0.0",
+        "tinyglobby": "^0.2.13",
+        "unplugin": "^2.3.2",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1391,7 +1482,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
@@ -1410,15 +1500,22 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.15.3",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.15.3.tgz",
-      "integrity": "sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==",
+      "version": "22.15.34",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.15.34.tgz",
+      "integrity": "sha512-8Y6E5WUupYy1Dd0II32BsWAx5MWdcnRd8L84Oys3veg1YrYtNtzgO4CFhiBg6MDSjk7Ay36HYOnU7/tuOzIzcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/recordrtc": {
+      "version": "5.6.14",
+      "resolved": "https://registry.npmmirror.com/@types/recordrtc/-/recordrtc-5.6.14.tgz",
+      "integrity": "sha512-Reiy1sl11xP0r6w8DW3iQjc1BgXFyNC7aDuutysIjpFoqyftbQps9xPA2FoBkfVXpJM61betgYPNt+v65zvMhA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@@ -1845,7 +1942,6 @@
       "version": "8.14.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1914,9 +2010,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -2009,6 +2105,13 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "dev": true,
+      "license": "MIT/X11"
+    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -2025,6 +2128,62 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/c12": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/c12/-/c12-3.0.4.tgz",
+      "integrity": "sha512-t5FaZTYbbCtvxuZq9xxIruYydrAGsJ+8UdP0pZzMiK2xl/gNiSOy0OxhLzHUEEb0m1QXYqfzfvyIFEmz/g9lqg==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "confbox": "^0.2.2",
+        "defu": "^6.1.4",
+        "dotenv": "^16.5.0",
+        "exsolve": "^1.0.5",
+        "giget": "^2.0.0",
+        "jiti": "^2.4.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^2.1.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/c12/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/c12/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2084,6 +2243,22 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmmirror.com/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2100,9 +2275,17 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.2.tgz",
       "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmmirror.com/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2200,6 +2383,12 @@
         }
       }
     },
+    "node_modules/deep-pick-omit": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/deep-pick-omit/-/deep-pick-omit-1.2.1.tgz",
+      "integrity": "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==",
+      "license": "MIT"
+    },
     "node_modules/default-browser": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/default-browser/-/default-browser-5.2.1.tgz",
@@ -2243,6 +2432,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2252,6 +2447,24 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "license": "MIT"
+    },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2351,6 +2564,12 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/errx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/errx/-/errx-0.1.0.tgz",
+      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
+      "license": "MIT"
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2457,7 +2676,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
       "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2503,14 +2721,12 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.0.5.tgz",
       "integrity": "sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fdir": {
       "version": "6.4.4",
       "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.4.4.tgz",
       "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -2688,6 +2904,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giget": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/giget/-/giget-2.0.0.tgz",
+      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "node-fetch-native": "^1.6.6",
+        "nypm": "^0.6.0",
+        "pathe": "^2.0.3"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -2730,6 +2963,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -2809,6 +3052,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-7.0.4.tgz",
+      "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
@@ -2823,6 +3075,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2981,6 +3240,15 @@
         "node": ">=16"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3037,6 +3305,21 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/knitwork/-/knitwork-1.2.0.tgz",
+      "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
+      "license": "MIT"
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
@@ -3095,7 +3378,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.1.1.tgz",
       "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
@@ -3262,7 +3544,6 @@
       "version": "1.7.4",
       "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.7.4.tgz",
       "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.0",
@@ -3275,14 +3556,12 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
       "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mlly/node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
       "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.8",
@@ -3350,6 +3629,12 @@
         "node": ">= 4.4.x"
       }
     },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmmirror.com/node-fetch-native/-/node-fetch-native-1.6.6.tgz",
+      "integrity": "sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.19.tgz",
@@ -3440,6 +3725,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nypm": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/nypm/-/nypm-0.6.0.tgz",
+      "integrity": "sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.0.0",
+        "tinyexec": "^0.3.2"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^14.16.0 || >=16.10.0"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
     "node_modules/open": {
       "version": "10.1.2",
       "resolved": "https://registry.npmmirror.com/open/-/open-10.1.2.tgz",
@@ -3503,7 +3813,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/perfect-debounce": {
@@ -3522,7 +3831,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3576,11 +3884,34 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.3.0.tgz",
+      "integrity": "sha512-x9wxpHj6iFDj5ITQJ3rj6+KesEqyRk/vqcE3WE+VGfetleV9Zufqwa9qJ6AkA5wmRSQEp7BTA1us/MDVTRHFFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.17.2",
+        "deep-pick-omit": "^1.2.1",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": ">=0.10.0",
+        "pinia": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.1.0.tgz",
       "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "confbox": "^0.2.1",
@@ -3650,7 +3981,6 @@
       "version": "0.2.10",
       "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.10.tgz",
       "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -3663,6 +3993,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc9": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      }
+    },
     "node_modules/read-package-json-fast": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz",
@@ -3703,6 +4043,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/recordrtc": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmmirror.com/recordrtc/-/recordrtc-5.6.2.tgz",
+      "integrity": "sha512-1QNKKNtl7+KcwD1lyOgP3ZlbiJ1d0HtXnypUy7yq49xEERxk31PHvE9RCciDrulPCY7WJ+oz0R9hpNxgsIurGQ==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
@@ -3762,6 +4108,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -3770,6 +4126,319 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/sass-embedded": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded/-/sass-embedded-1.89.2.tgz",
+      "integrity": "sha512-Ack2K8rc57kCFcYlf3HXpZEJFNUX8xd8DILldksREmYXQkRHI879yy8q4mRDJgrojkySMZqmmmW1NxrFxMsYaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-android-arm": "1.89.2",
+        "sass-embedded-android-arm64": "1.89.2",
+        "sass-embedded-android-riscv64": "1.89.2",
+        "sass-embedded-android-x64": "1.89.2",
+        "sass-embedded-darwin-arm64": "1.89.2",
+        "sass-embedded-darwin-x64": "1.89.2",
+        "sass-embedded-linux-arm": "1.89.2",
+        "sass-embedded-linux-arm64": "1.89.2",
+        "sass-embedded-linux-musl-arm": "1.89.2",
+        "sass-embedded-linux-musl-arm64": "1.89.2",
+        "sass-embedded-linux-musl-riscv64": "1.89.2",
+        "sass-embedded-linux-musl-x64": "1.89.2",
+        "sass-embedded-linux-riscv64": "1.89.2",
+        "sass-embedded-linux-x64": "1.89.2",
+        "sass-embedded-win32-arm64": "1.89.2",
+        "sass-embedded-win32-x64": "1.89.2"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-arm/-/sass-embedded-android-arm-1.89.2.tgz",
+      "integrity": "sha512-oHAPTboBHRZlDBhyRB6dvDKh4KvFs+DZibDHXbkSI6dBZxMTT+Yb2ivocHnctVGucKTLQeT7+OM5DjWHyynL/A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.89.2.tgz",
+      "integrity": "sha512-+pq7a7AUpItNyPu61sRlP6G2A8pSPpyazASb+8AK2pVlFayCSPAEgpwpCE9A2/Xj86xJZeMizzKUHxM2CBCUxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.89.2.tgz",
+      "integrity": "sha512-HfJJWp/S6XSYvlGAqNdakeEMPOdhBkj2s2lN6SHnON54rahKem+z9pUbCriUJfM65Z90lakdGuOfidY61R9TYg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-x64/-/sass-embedded-android-x64-1.89.2.tgz",
+      "integrity": "sha512-BGPzq53VH5z5HN8de6jfMqJjnRe1E6sfnCWFd4pK+CAiuM7iw5Fx6BQZu3ikfI1l2GY0y6pRXzsVLdp/j4EKEA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.89.2.tgz",
+      "integrity": "sha512-UCm3RL/tzMpG7DsubARsvGUNXC5pgfQvP+RRFJo9XPIi6elopY5B6H4m9dRYDpHA+scjVthdiDwkPYr9+S/KGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.89.2.tgz",
+      "integrity": "sha512-D9WxtDY5VYtMApXRuhQK9VkPHB8R79NIIR6xxVlN2MIdEid/TZWi1MHNweieETXhWGrKhRKglwnHxxyKdJYMnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.89.2.tgz",
+      "integrity": "sha512-leP0t5U4r95dc90o8TCWfxNXwMAsQhpWxTkdtySDpngoqtTy3miMd7EYNYd1znI0FN1CBaUvbdCMbnbPwygDlA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.89.2.tgz",
+      "integrity": "sha512-2N4WW5LLsbtrWUJ7iTpjvhajGIbmDR18ZzYRywHdMLpfdPApuHPMDF5CYzHbS+LLx2UAx7CFKBnj5LLjY6eFgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.89.2.tgz",
+      "integrity": "sha512-Z6gG2FiVEEdxYHRi2sS5VIYBmp17351bWtOCUZ/thBM66+e70yiN6Eyqjz80DjL8haRUegNQgy9ZJqsLAAmr9g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.89.2.tgz",
+      "integrity": "sha512-nTyuaBX6U1A/cG7WJh0pKD1gY8hbg1m2SnzsyoFG+exQ0lBX/lwTLHq3nyhF+0atv7YYhYKbmfz+sjPP8CZ9lw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.89.2.tgz",
+      "integrity": "sha512-N6oul+qALO0SwGY8JW7H/Vs0oZIMrRMBM4GqX3AjM/6y8JsJRxkAwnfd0fDyK+aICMFarDqQonQNIx99gdTZqw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.89.2.tgz",
+      "integrity": "sha512-K+FmWcdj/uyP8GiG9foxOCPfb5OAZG0uSVq80DKgVSC0U44AdGjvAvVZkrgFEcZ6cCqlNC2JfYmslB5iqdL7tg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.89.2.tgz",
+      "integrity": "sha512-g9nTbnD/3yhOaskeqeBQETbtfDQWRgsjHok6bn7DdAuwBsyrR3JlSFyqKc46pn9Xxd9SQQZU8AzM4IR+sY0A0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.89.2.tgz",
+      "integrity": "sha512-Ax7dKvzncyQzIl4r7012KCMBvJzOz4uwSNoyoM5IV6y5I1f5hEwI25+U4WfuTqdkv42taCMgpjZbh9ERr6JVMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.89.2.tgz",
+      "integrity": "sha512-j96iJni50ZUsfD6tRxDQE2QSYQ2WrfHxeiyAXf41Kw0V4w5KYR/Sf6rCZQLMTUOHnD16qTMVpQi20LQSqf4WGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.89.2.tgz",
+      "integrity": "sha512-cS2j5ljdkQsb4PaORiClaVYynE9OAPZG/XjbOMxpQmjRIf7UroY4PEIH+Waf+y47PfXFX9SyxhYuw2NIKGbEng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
@@ -3782,7 +4451,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -3888,6 +4556,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmmirror.com/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "license": "MIT"
+    },
     "node_modules/strip-final-newline": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
@@ -3905,7 +4579,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-3.0.0.tgz",
       "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^9.0.1"
@@ -3918,7 +4591,6 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.1.tgz",
       "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/superjson": {
@@ -3933,11 +4605,55 @@
         "node": ">=16"
       }
     },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/sync-message-port/-/sync-message-port-1.1.3.tgz",
+      "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.13.tgz",
       "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.4.4",
@@ -3998,9 +4714,29 @@
       "version": "1.6.1",
       "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.1.tgz",
       "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/unctx": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/unctx/-/unctx-2.4.1.tgz",
+      "integrity": "sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.1.0"
+      }
+    },
+    "node_modules/unctx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.21.0.tgz",
@@ -4071,7 +4807,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-2.3.2.tgz",
       "integrity": "sha512-3n7YA46rROb3zSj8fFxtxC/PqoyvYQ0llwz9wtUPUutr9ig09C8gGo5CWCwHrUzlqC1LLR43kxp5vEIyH1ac1w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.1",
@@ -4119,7 +4854,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
       "integrity": "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pathe": "^2.0.2",
@@ -4168,6 +4902,22 @@
         }
       }
     },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -4199,6 +4949,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "6.3.4",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.4.tgz",
@@ -4432,7 +5189,12 @@
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/weixin-js-sdk": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
+      "integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ==",
       "license": "MIT"
     },
     "node_modules/which": {
diff --git a/package.json b/package.json
index 5423c0e..3ca1ab1 100644
--- a/package.json
+++ b/package.json
@@ -12,22 +12,27 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "echarts": "^5.6.0",
     "element-plus": "^2.9.9",
     "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.3.0",
+    "recordrtc": "^5.6.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "weixin-js-sdk": "^1.6.5"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.1",
     "@types/axios": "^0.9.36",
-    "@types/echarts": "^4.9.22",      
-    "@types/node": "^22.14.0",
+    "@types/echarts": "^4.9.22",
+    "@types/node": "^22.15.34",
+    "@types/recordrtc": "^5.6.14",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
     "less": "^4.3.0",
     "npm-run-all2": "^7.0.2",
+    "sass-embedded": "^1.89.2",
     "typescript": "~5.8.0",
     "unplugin-auto-import": "^19.1.2",
     "unplugin-vue-components": "^28.5.0",
diff --git a/public/5.png b/public/5.png
new file mode 100644
index 0000000..c123c5e
Binary files /dev/null and b/public/5.png differ
diff --git a/src/App.vue b/src/App.vue
index 38cd007..fa5d5bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,11 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" :key="$route.fullPath" />
+    </keep-alive>
+  </RouterView>
 </template>
 
 <style>
diff --git a/src/api/interface/index.ts b/src/api/interface/index.ts
index 9486dbf..9b17b0d 100644
--- a/src/api/interface/index.ts
+++ b/src/api/interface/index.ts
@@ -1,9 +1,12 @@
 import request from "@/utils/request"
-import { type aiChatForm , type aiResponseData} from '@/api/interface/type'
+import { type aiChatForm , type aiTableForm, type aiResponseData, type aiResponsePictureData} from '@/api/interface/type'
 
 enum API {
-    AICHAT_URL = "/questionSimple"
+    AICHAT_URL = "/user/questionSimple",
+    AIPICTURE_URL = "/user/picture",
+    AIMUSIC_URL = "/wordAudio/handleAudioFile"
 }
 //对外暴露请求函数
 
-export const reqAiChat = (data: aiChatForm) => request.post(API.AICHAT_URL, data) as Promise<aiResponseData>;
\ No newline at end of file
+export const reqAiChat = (data: aiChatForm) => request.post(API.AICHAT_URL, data) as Promise<aiResponseData>;
+export const reqAitable = (data: aiTableForm) => request.post(API.AIPICTURE_URL, data) as Promise<aiResponsePictureData>;
diff --git a/src/api/interface/type.ts b/src/api/interface/type.ts
index 4a09cf2..f295982 100644
--- a/src/api/interface/type.ts
+++ b/src/api/interface/type.ts
@@ -1,9 +1,29 @@
 //AI接口参数
 export interface aiChatForm {
-    answer: string;
+    question: string,
+    userId: string,
+    sessionId: string,
+    token: string
+}
+
+export interface aiTableForm {
+    picture: string
+    userId: string
+    sessionId: string
+    token: string
 }
 
 export interface aiResponseData {
-    code:number,
-    Respond:string
-}
\ No newline at end of file
+    code: number
+    msg: string
+    data: {
+        Respond: string
+    }
+}
+
+export interface aiResponsePictureData {
+    code: number
+    msg: string
+    data: string
+}
+
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
deleted file mode 100644
index 034336c..0000000
--- a/src/api/user/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-//用户相关接口
-import request from "@/utils/request";
-import { type loginForm ,type userResponseData} from '@/api/user/type';
-
-//统一管理接口
-enum API{
-    LOGIN_URL = "/login",
-    REGISTER_URL = "/user/register"
-}
-//对外暴露请求函数
-
-//登录接口方法
-export const reqLogin = (data: loginForm) => request.post(API.LOGIN_URL, data) as Promise<userResponseData>;
-
-//注册用户信息接口方法
-export const reqRegiter = (data: loginForm) => request.post(API.REGISTER_URL, data) as Promise<userResponseData>;
\ No newline at end of file
diff --git a/src/api/user/login/index.ts b/src/api/user/login/index.ts
new file mode 100644
index 0000000..7e2c5e2
--- /dev/null
+++ b/src/api/user/login/index.ts
@@ -0,0 +1,12 @@
+import request from "@/utils/request"
+import { type loginForm, type userLoginResponseData, type userRecordResponseData } from "./type"
+import { useUserStore } from "@/stores/modules/user"
+
+enum API {
+    LOGIN_URL = "/user/login",
+    RECORD_URL = "/user/queryRecord"
+}
+
+export const reqLogin = (data: loginForm) => request.post(API.LOGIN_URL,data) as Promise<userLoginResponseData> 
+
+export const reqRecordGet = (id: number) => request.post(`${API.RECORD_URL}?userId=${id}`) as Promise<userRecordResponseData>
\ No newline at end of file
diff --git a/src/api/user/login/type.ts b/src/api/user/login/type.ts
new file mode 100644
index 0000000..4390dba
--- /dev/null
+++ b/src/api/user/login/type.ts
@@ -0,0 +1,34 @@
+import { number } from "echarts"
+
+export interface loginForm {
+    username:string,
+    password:string
+    email: string,
+}
+
+export interface userLoginResponseData {
+    code:number
+    msg:string
+    data:{
+        id:number
+        username:string
+        email:string
+        token:string
+        sessionId:string
+    }
+}
+
+export interface userRecordResponseData {
+    code: number
+    msg: string
+    data: {
+        flatMap(arg0: (session: { 文本对话: any[] }) => { username: any; content: any; createdAt: any; updatedAt: any }[]): { username: string; content: string; createdAt: string; updatedAt: string }[] | { username: string; content: string; createdAt: string; updatedAt: string }[]
+        sessionId: string
+        文本对话 : Array<{
+            username: string
+            content: string
+            createdAt: string
+            updatedAt: string
+        }>
+    }
+}
\ No newline at end of file
diff --git a/src/api/user/register/index.ts b/src/api/user/register/index.ts
new file mode 100644
index 0000000..c140cec
--- /dev/null
+++ b/src/api/user/register/index.ts
@@ -0,0 +1,12 @@
+//用户相关接口
+import request from "@/utils/request";
+import { type registerForm ,type userRegisterResponseData} from '@/api/user/register/type';
+
+//统一管理接口
+enum API{
+    REGISTER_URL = "/user/register"
+}
+//对外暴露请求函数
+
+//注册用户信息接口方法
+export const reqRegister = (data: registerForm) => request.post(API.REGISTER_URL, data) as Promise<userRegisterResponseData>;
\ No newline at end of file
diff --git a/src/api/user/register/type.ts b/src/api/user/register/type.ts
new file mode 100644
index 0000000..23cfec0
--- /dev/null
+++ b/src/api/user/register/type.ts
@@ -0,0 +1,13 @@
+//登录接口参数
+export interface registerForm{
+    username:string,
+    password:string,
+    email: string
+}
+
+//登录，注册返回数据类型
+export interface userRegisterResponseData {
+    code:number,
+    msg:string
+    data: string
+}
\ No newline at end of file
diff --git a/src/api/user/show/index.ts b/src/api/user/show/index.ts
new file mode 100644
index 0000000..e3f60d3
--- /dev/null
+++ b/src/api/user/show/index.ts
@@ -0,0 +1,12 @@
+import { type UserShowResponse } from "./type";
+import request from "@/utils/request";
+import { type UserUpdateForm, type UserUpdateResponse } from "./type";
+
+enum API {
+    USER_SHOW_URL = "/user/show",
+    USER_UPDATE_URL = "/user/update"
+}
+
+// 获取用户信息接口方法
+export const reqUserShow = (id: string) => request.post(`${API.USER_SHOW_URL}/${id}`) as Promise<UserShowResponse>;
+export const reqUserUpdate = (data: UserUpdateForm) => request.post(API.USER_UPDATE_URL, data) as Promise<UserUpdateResponse>;
\ No newline at end of file
diff --git a/src/api/user/show/type.ts b/src/api/user/show/type.ts
new file mode 100644
index 0000000..46d8cc4
--- /dev/null
+++ b/src/api/user/show/type.ts
@@ -0,0 +1,24 @@
+export interface UserShowResponse {
+    code: number
+    message: string
+    data: {
+        username: string
+        email: string
+        avatarImageUrl: string
+        password: string
+        weatherImageUrl: string
+    }
+}
+
+export interface UserUpdateForm {
+    userId: number
+    username: string
+    password: string
+    email: string
+    avatarImageUrl: string
+}
+
+export interface UserUpdateResponse {
+    code: number
+    msg: string
+}
\ No newline at end of file
diff --git a/src/api/user/type.ts b/src/api/user/type.ts
deleted file mode 100644
index 6fc5e77..0000000
--- a/src/api/user/type.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-//登录接口参数
-export interface loginForm{
-    username:string,
-    password:string
-    email: string,
-}
-
-//登录，注册返回数据类型
-export interface userResponseData {
-    code:number,
-    msg:string
-}
\ No newline at end of file
diff --git a/src/assets/fonts/DFKTL1B.TTF b/src/assets/fonts/DFKTL1B.TTF
new file mode 100644
index 0000000..2dcf336
Binary files /dev/null and b/src/assets/fonts/DFKTL1B.TTF differ
diff --git a/src/assets/fonts/blomster.ttf b/src/assets/fonts/blomster.ttf
new file mode 100644
index 0000000..b342c50
Binary files /dev/null and b/src/assets/fonts/blomster.ttf differ
diff --git a/src/assets/fonts/theFonts.css b/src/assets/fonts/theFonts.css
new file mode 100644
index 0000000..fca5426
--- /dev/null
+++ b/src/assets/fonts/theFonts.css
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: bigWord;
+    src: url(./blomster.ttf);
+}
\ No newline at end of file
diff --git a/src/components/LocationMap.vue b/src/components/LocationMap.vue
new file mode 100644
index 0000000..7de7563
--- /dev/null
+++ b/src/components/LocationMap.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="amap-wrapper">
+    <div ref="mapContainer" class="map-container"></div>
+    <div v-if="loading" class="map-mask">
+      <el-icon class="is-loading"><Loading /></el-icon>
+      <span>{{ loadingText }}</span>
+    </div>
+    <div v-if="error" class="map-mask">
+      <el-alert :title="error" type="error" show-icon />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Loading } from '@element-plus/icons-vue'
+import { useRealtimeLocationWS } from '@/utils/ws'
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true
+  },
+  wsHost: {
+    type: String,
+    default: 'localhost:8080'
+  },
+  loadingText: {
+    type: String,
+    default: '正在加载地图...'
+  }
+})
+
+const emit = defineEmits(['position-update', 'ws-message'])
+
+const mapContainer = ref<HTMLElement | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+let map: AMap.Map | null = null
+let marker: AMap.Marker | null = null
+let watchId: number | null = null
+
+// 初始化WebSocket
+const locationWS = useRealtimeLocationWS(
+  props.userId, 
+  props.wsHost,
+  (msg) => emit('ws-message', msg)
+)
+
+// 加载地图脚本
+const loadAMapScript = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve()
+      return
+    }
+    
+    const script = document.createElement('script')
+    script.src = 'https://webapi.amap.com/maps?v=2.0&key=5ee696eaddb2f84093a5721c8e505cf8'
+    script.async = true
+    
+    script.onload = () => resolve()
+    script.onerror = () => reject(new Error('加载地图脚本失败'))
+    
+    document.head.appendChild(script)
+  })
+}
+
+// 初始化地图
+const initMap = async (): Promise<void> => {
+  try {
+    await loadAMapScript()
+    
+    if (!mapContainer.value) {
+      throw new Error('地图容器不存在')
+    }
+
+    map = new AMap.Map(mapContainer.value, {
+      zoom: 15,
+      center: [116.397428, 39.90923],
+      resizeEnable: true
+    })
+
+    marker = new AMap.Marker({
+      position: [116.397428, 39.90923],
+    })
+    map.add(marker)
+
+    startWatchingLocation()
+    loading.value = false
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '地图初始化失败'
+    ElMessage.error(error.value)
+  }
+}
+
+// 开始监听位置
+const startWatchingLocation = () => {
+  if (!navigator.geolocation) {
+    error.value = '浏览器不支持地理定位'
+    return
+  }
+  
+  watchId = navigator.geolocation.watchPosition(
+    (position) => updatePosition(position),
+    (err) => {
+      error.value = `定位错误: ${err.message}`
+      ElMessage.error(error.value)
+    },
+    { maximumAge: 0, timeout: 10000 }
+  )
+}
+
+// 更新位置
+const updatePosition = (position: GeolocationPosition) => {
+  if (!map) return
+  
+  const newPos: [number, number] = [
+    position.coords.longitude,
+    position.coords.latitude
+  ]
+  
+  if (marker) marker.setPosition(newPos)
+  map.setCenter(newPos)
+  
+  emit('position-update', { lng: newPos[0], lat: newPos[1] })
+  locationWS.sendLocation(newPos)
+}
+
+// 清理资源
+const cleanup = () => {
+  if (watchId) navigator.geolocation.clearWatch(watchId)
+  if (map) map.destroy()
+}
+
+onMounted(() => initMap())
+onBeforeUnmount(() => cleanup())
+</script>
+
+<style scoped>
+.amap-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+}
+
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+
+.map-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 999;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 6158c08..42a5c84 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import './assets/main.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import '@/assets/fonts/theFonts.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -15,15 +16,12 @@ const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-app.use(createPinia())
-app.use(router)
-
-app.mount('#app')
-
-
-
+const pinia = createPinia()
 
 
+app.use(pinia)
+app.use(router)
 
+app.mount('#app')
 app.use(ElementPlus)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index beaa195..f4c996e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,7 @@ import ChatAi from '@/views/ask/chatAi.vue'
 import MusicAi from '@/views/ask/musicAi.vue'
 import My from '@/views/myself/my.vue'
 import Used from '@/views/myself/used.vue'
+import Change from '@/views/myself/change.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -56,6 +57,11 @@ const router = createRouter({
       path: '/used',
       name: 'used',
       component: Used,
+    },
+    {
+      path: '/change',
+      name: 'change',
+      component: Change
     }
   ]
 })
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..0c7dfda
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,8 @@
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+// pinia persist
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export default pinia;
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
new file mode 100644
index 0000000..e6fda8f
--- /dev/null
+++ b/src/stores/modules/user.ts
@@ -0,0 +1,277 @@
+import { defineStore } from 'pinia'
+import { reqRegister } from '@/api/user/register'
+import { reqLogin } from '@/api/user/login'
+import { type registerForm, type userRegisterResponseData } from '@/api/user/register/type'
+import { type loginForm, type userLoginResponseData } from '@/api/user/login/type'
+import { reqAitable } from '@/api/interface'
+import { type aiTableForm, type aiResponsePictureData } from '@/api/interface/type'
+import { useRouter } from 'vue-router'
+import { ElNotification } from 'element-plus'
+
+// 定义用户状态类型
+interface UserState {
+  userId: number 
+  token: string
+  username: string
+  email: string
+  sessionId: string
+  generatedImages: UserImage[]
+  currentImage: UserImage | null
+}
+
+interface UserImage {
+  ossUrl: string
+  createdAt: number
+}
+
+// localStorage键名常量
+const STORAGE_KEYS = {
+  USER_ID: 'userId',
+  TOKEN: 'token',
+  USERNAME: 'username',
+  EMAIL: 'email',
+  SESSION_ID: 'sessionId',
+  GENERATED_IMAGES: 'generatedImages',
+  CURRENT_IMAGE: 'currentImage'
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    userId: 0,
+    token: '',
+    username: '',
+    email: '',
+    sessionId: '',
+    generatedImages: [],
+    currentImage: null
+  }),
+
+  actions: {
+    /**
+     * 保存用户基本信息到localStorage
+     */
+    saveUserToLocalStorage() {
+      localStorage.setItem(STORAGE_KEYS.USER_ID, this.userId.toString())
+      localStorage.setItem(STORAGE_KEYS.TOKEN, this.token)
+      localStorage.setItem(STORAGE_KEYS.USERNAME, this.username)
+      localStorage.setItem(STORAGE_KEYS.EMAIL, this.email)
+      localStorage.setItem(STORAGE_KEYS.SESSION_ID, this.sessionId)
+    },
+
+    /**
+     * 从localStorage加载用户基本信息
+     */
+    loadUserFromLocalStorage() {
+      const userId = localStorage.getItem(STORAGE_KEYS.USER_ID)
+      const token = localStorage.getItem(STORAGE_KEYS.TOKEN)
+      const username = localStorage.getItem(STORAGE_KEYS.USERNAME)
+      const email = localStorage.getItem(STORAGE_KEYS.EMAIL)
+      const sessionId = localStorage.getItem(STORAGE_KEYS.SESSION_ID)
+
+      if (userId && token) {
+        this.userId = parseInt(userId)
+        this.token = token
+        this.username = username || ''
+        this.email = email || ''
+        this.sessionId = sessionId || ''
+      }
+    },
+
+        // 用户注册方法
+    async userRegister(data: registerForm) {
+      try {
+        const result: userRegisterResponseData = await reqRegister(data)
+        
+        if (result.code === 200) {
+          ElNotification({
+            title: '注册成功',
+            message: '请登录后使用完整功能',
+            type: 'success',
+            duration: 3000
+          })
+          return true
+        } else {
+          ElNotification({
+            title: '注册失败',
+            message: result.msg,
+            type: 'error',
+            duration: 3000
+          })
+        }
+      } catch (error: any) {
+        console.error('Register request failed:', error)
+        ElNotification({
+          title: '注册异常',
+          message: error.response?.data?.message || '注册请求失败，请稍后再试',
+          type: 'error',
+          duration: 3000
+        })
+      }
+    },
+
+    // 用户登录方法
+    async userLogin(data: loginForm) {
+      try {
+        const result: userLoginResponseData = await reqLogin(data)
+        
+        if (result.code === 200) {
+          this.userId = result.data.id
+          this.email = result.data.email
+          this.username = result.data.username
+          this.token = result.data.token
+          this.sessionId = result.data.sessionId
+          
+          // 使用新的方法保存用户信息
+          this.saveUserToLocalStorage()
+          this.loadImagesFromStorage()
+
+          ElNotification({
+            title: '登录成功',
+            message: `欢迎回来，${this.username}`,
+            type: 'success',
+            duration: 3000
+          })
+          return true
+        } else {
+          ElNotification({
+            title: '登录失败',
+            message: result.msg || '用户不存在或密码错误',
+            type: 'error',
+            duration: 3000
+          })
+        }
+      } catch (error: any) {
+        console.error('Login request failed:', error)
+        ElNotification({
+          title: '登录异常',
+          message: error.response?.data?.message || '登录请求失败，请稍后再试',
+          type: 'error',
+          duration: 3000
+        })
+      }
+    },
+
+    // 初始化用户状态
+    initUserState() {
+      this.loadUserFromLocalStorage()
+      this.loadImagesFromStorage()
+    },
+
+    /**
+     * 从localStorage加载图片数据
+     */
+    loadImagesFromStorage() {
+      const imagesJson = localStorage.getItem(STORAGE_KEYS.GENERATED_IMAGES)
+      if (imagesJson) {
+        try {
+          this.generatedImages = JSON.parse(imagesJson)
+          this.generatedImages.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0))
+        } catch (error) {
+          console.error('Failed to parse generated images:', error)
+          this.generatedImages = []
+        }
+      }
+
+      const currentImageJson = localStorage.getItem(STORAGE_KEYS.CURRENT_IMAGE)
+      if (currentImageJson) {
+        try {
+          this.currentImage = JSON.parse(currentImageJson)
+        } catch (error) {
+          console.error('Failed to parse current image:', error)
+          this.currentImage = null
+        }
+      }
+    },
+
+    /**
+     * 保存图片数据到localStorage
+     */
+    saveImagesToStorage() {
+      localStorage.setItem(STORAGE_KEYS.GENERATED_IMAGES, JSON.stringify(this.generatedImages))
+      console.log('保存生成的图片到localStorage:', this.generatedImages)
+      localStorage.setItem(STORAGE_KEYS.CURRENT_IMAGE, JSON.stringify(this.currentImage))
+    },
+
+
+    // 生成图片方法
+    async generateImage(prompt: string) {
+      try {
+        const requestData: aiTableForm = {
+          picture: prompt,
+          userId: this.userId.toString(),
+          sessionId: this.sessionId,
+          token: this.token
+        }
+
+        const response: aiResponsePictureData = await reqAitable(requestData)
+        
+        if (response.code === 200 && response.data) {
+          const newImage: UserImage = {
+            ossUrl: response.data,
+            createdAt: Date.now()
+          }
+          
+          this.generatedImages.unshift(newImage)
+          this.currentImage = newImage
+          this.saveImagesToStorage()
+          
+          ElNotification({
+            title: '图片生成成功',
+            message: '已生成新图片',
+            type: 'success',
+            duration: 3000
+          })
+          
+          return newImage.ossUrl
+        } else {
+          throw new Error(response.msg || '图片生成失败')
+        }
+      } catch (error: any) {
+        ElNotification({
+          title: '生成失败',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+        throw error
+      }
+    },
+
+    // 设置当前显示的图片
+    setCurrentImage(imageUrl: string) {
+      const image = this.generatedImages.find(img => img.ossUrl === imageUrl)
+      if (image) {
+        this.currentImage = image
+        localStorage.setItem(STORAGE_KEYS.CURRENT_IMAGE, JSON.stringify(image))
+      }
+    },
+
+    // 清除用户数据
+    clearUserData() {
+      this.$reset()
+      Object.values(STORAGE_KEYS).forEach(key => localStorage.removeItem(key))
+    }
+  },
+
+  getters: {
+    // 判断用户是否已登录
+    isLoggedIn(): boolean {
+      return !!this.token && !!this.userId && !!this.username && !!this.email
+    },
+
+    // 获取当前用户的所有图片
+    allImages(): UserImage[] {
+      return this.generatedImages
+    },
+    
+    // 获取当前显示的图片
+    displayedImage(): string | undefined {
+      return this.currentImage?.ossUrl
+    },
+    
+    // 检查是否有生成记录
+    hasGeneratedImages(): boolean {
+      return this.generatedImages.length > 0
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/types/amap.d.ts b/src/types/amap.d.ts
new file mode 100644
index 0000000..d2f1030
--- /dev/null
+++ b/src/types/amap.d.ts
@@ -0,0 +1,71 @@
+// types/amap.d.ts
+declare global {
+  namespace AMap {
+    // 基础类
+    class Map {
+      constructor(container: HTMLElement, options?: MapOptions);
+      destroy(): void;
+      add(overlay: Overlay): void;
+      setCenter(lnglat: LngLat | [number, number]): void;
+      setZoom(zoom: number): void;
+    }
+    class Marker {
+      constructor(options?: MarkerOptions);
+      on(event: string, callback: (event: MapsEvent) => void): void;
+      getPosition(): LngLat;
+      setPosition(lnglat: LngLat | [number, number]): void;
+    }
+    class InfoWindow {
+      constructor(options?: InfoWindowOptions);
+      open(map: Map, position: LngLat | [number, number]): void;
+    }
+    class Polyline {
+      constructor(options?: PolylineOptions);
+    }
+    class LngLat {
+      constructor(lng: number, lat: number);
+    }
+    class Pixel {
+      constructor(x: number, y: number);
+    }
+
+    // 配置接口
+    interface MapOptions {
+      zoom?: number;
+      center?: LngLat | [number, number];
+      resizeEnable?: boolean;
+    }
+    interface MarkerOptions {
+      position?: LngLat | [number, number];
+      icon?: string;
+      offset?: Pixel;
+    }
+    interface InfoWindowOptions {
+      isCustom?: boolean;
+      content?: string;
+      offset?: Pixel;
+    }
+    interface PolylineOptions {
+      path?: (LngLat | [number, number])[];
+      strokeColor?: string;
+      strokeWeight?: number;
+      strokeStyle?: string;
+    }
+    interface MapsEvent {
+      target: Marker;
+    }
+
+    // 全局暴露
+    const Map: typeof Map;
+    const Marker: typeof Marker;
+    const InfoWindow: typeof InfoWindow;
+    const Polyline: typeof Polyline;
+    const LngLat: typeof LngLat;
+    const Pixel: typeof Pixel;
+  }
+
+  // 全局变量
+  const AMap: typeof AMap;
+}
+
+export {};
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
index e05b30c..b3a335c 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -14,6 +14,7 @@ let request = axios.create({
 //添加请求与响应拦截器
 request.interceptors.request.use((config) => {
     //config配置对象有headers属性请求头，配置一些公共参数
+    
     //返回配置对象
     return config;
 })
@@ -58,5 +59,5 @@ request.interceptors.response.use(
         return Promise.reject(error);
     })
     
-    // 对外暴露
+// 对外暴露
 export default request;
\ No newline at end of file
diff --git a/src/utils/ws.ts b/src/utils/ws.ts
new file mode 100644
index 0000000..95cbc5a
--- /dev/null
+++ b/src/utils/ws.ts
@@ -0,0 +1,145 @@
+import { ref, onBeforeUnmount } from 'vue'
+import { ElMessage } from 'element-plus'
+
+export interface WebSocketMessage {
+  userId: number
+  latitude: number
+  longitude: number
+  recordTime: string
+}
+
+export interface WebSocketResponse {
+  trackId?: string
+  status?: string
+  recordTime?: string
+  remark?: string
+}
+
+export class RealtimeLocationWS {
+  private ws: WebSocket | null = null
+  private sid: string
+  private userId: number
+  private wsUrl: string
+  private retryCount = 0
+  private maxRetryCount = 3
+  private retryTimer: number | null = null
+  private messageHandler: ((data: WebSocketResponse) => void) | null = null
+
+  public connected = ref(false)
+
+  constructor(userId: number, host: string, onMessage?: (data: WebSocketResponse) => void) {
+    this.userId = userId
+    this.sid = this.generateSessionId()
+    this.wsUrl = `ws://${host}/realtime/${this.sid}`
+    this.messageHandler = onMessage || null
+    this.connect()
+  }
+
+  private generateSessionId(): string {
+    return 'sid-' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36)
+  }
+
+  public connect(): void {
+    if (this.connected.value) return
+
+    try {
+      this.ws = new WebSocket(this.wsUrl)
+
+      this.ws.onopen = () => {
+        this.connected.value = true
+        this.retryCount = 0
+        console.log('WebSocket连接已建立')
+      }
+
+      this.ws.onmessage = (event) => {
+        try {
+          const response: WebSocketResponse = JSON.parse(event.data)
+          console.log('收到服务端响应:', response)
+          this.messageHandler?.(response)
+        } catch (error) {
+          console.error('解析WebSocket消息失败:', error)
+        }
+      }
+
+      this.ws.onerror = (error) => {
+        console.error('WebSocket错误:', error)
+        this.reconnect()
+      }
+
+      this.ws.onclose = () => {
+        this.connected.value = false
+        console.log('WebSocket连接已关闭')
+        this.reconnect()
+      }
+    } catch (error) {
+      console.error('WebSocket初始化失败:', error)
+      this.reconnect()
+    }
+  }
+
+  private reconnect(): void {
+    if (this.retryCount >= this.maxRetryCount) {
+      console.error(`已达到最大重试次数(${this.maxRetryCount})，停止重连`)
+      ElMessage.warning('位置服务连接失败，请刷新页面重试')
+      return
+    }
+
+    this.retryCount++
+    const delay = Math.min(1000 * 2 ** this.retryCount, 30000) // 指数退避，最大30秒
+
+    console.log(`将在${delay}ms后尝试第${this.retryCount}次重连...`)
+    this.retryTimer = window.setTimeout(() => {
+      this.connect()
+    }, delay)
+  }
+
+  public sendLocation(position: [number, number]): boolean {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.warn('WebSocket未连接，无法发送位置数据')
+      return false
+    }
+
+    const [longitude, latitude] = position
+    const message: WebSocketMessage = {
+      userId: this.userId,
+      latitude,
+      longitude,
+      recordTime: new Date().toISOString().split('.')[0] // ISO8601格式，去掉毫秒部分
+    }
+
+    try {
+      this.ws.send(JSON.stringify(message))
+      console.log('已发送位置数据:', message)
+      return true
+    } catch (error) {
+      console.error('发送位置数据失败:', error)
+      return false
+    }
+  }
+
+  public close(): void {
+    if (this.retryTimer) {
+      clearTimeout(this.retryTimer)
+      this.retryTimer = null
+    }
+
+    if (this.ws) {
+      this.ws.close()
+      this.ws = null
+    }
+
+    this.connected.value = false
+  }
+}
+
+// 导出一个创建WebSocket实例的函数
+export function useRealtimeLocationWS(userId: number, host: string, onMessage?: (data: WebSocketResponse) => void) {
+  const wsInstance = new RealtimeLocationWS(userId, host, onMessage)
+
+  // 自动在组件卸载时关闭连接
+  onBeforeUnmount(() => {
+    wsInstance.close()
+  })
+
+  return wsInstance
+}
\ No newline at end of file
diff --git a/src/views/ask/chatAi.vue b/src/views/ask/chatAi.vue
index 4e1c891..b86c197 100644
--- a/src/views/ask/chatAi.vue
+++ b/src/views/ask/chatAi.vue
@@ -57,10 +57,10 @@
                     </span>
 
                     <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar> user </el-avatar>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
                     </span>      
                 </div>
             </el-header>
@@ -71,7 +71,7 @@
                     <div style="display: flex; margin-bottom: 2%; width: 100%;" v-show="isShow">
                         <span style="display: flex; width: 100%;">
                             <el-card style="display: flex; margin-left: auto; align-items: self-end;" v-model="userThing">
-                                <p style="display: flex; width: auto;">{{ userThing }}</p>
+                                <p style="display: flex; width: auto;">{{ userThing.question }}</p>
                             </el-card>
                             <el-avatar style="margin-left: 1%"> user </el-avatar>
                         </span>
@@ -117,11 +117,11 @@
 import { onMounted, ref, watch } from 'vue'
 import { getTimeState } from '@/utils/index'
 import { ElMessage } from 'element-plus'
-import router from '@/router'
-import axios from 'axios'
 import { reqAiChat } from '@/api/interface'
+import { useUserStore } from '@/stores/modules/user'
+import { type aiChatForm } from '@/api/interface/type'
+import { useRouter } from 'vue-router'
 
-const baseURL = ''
 
 //侧边栏开合
 const isCollapse = ref(false)
@@ -140,50 +140,68 @@ onMounted(() => {
   console.log(thisTimeState.value)
 })
 
+ /*网页全屏*/
+const handleFullscreen = () => {
+    document.documentElement.requestFullscreen()
+}
+
 /*对话框写入部分*/
 const text = ref()
 const isShow = ref(false)
 const handleEnter = (event: KeyboardEvent) => {
-  // 如果按下Shift+Enter则插入换行
-  if (event.shiftKey) {
-    return
-  }
-  // 否则阻止默认行为（不换行）
+  if (event.shiftKey) return
   event.preventDefault()
+  submitClick() // 回车触发提交
 }
 
 /*对话框交互部分*/
+// 获取用户状态
+const userStore = useUserStore()
+const userId = userStore.userId.toString()
+const sessionId = userStore.sessionId
+
 const backThing = ref()
-const userThing = ref()
-watch(userThing, async (newValue) => {
-  if (newValue.trim()) {
-    backThing.value = '思考中...'
-    backThing.value = await reqAiChat(newValue.trim())
-      .then((res) => {
-        if (res.code === 200) {
-          return res.Respond
-        } else {
-          ElMessage.error('请求失败，请稍后再试')
-          return '请求失败，请稍后再试'
-        }
-      })
-      .catch((error) => {
-        console.error('请求错误:', error)
-        ElMessage.error('请求错误，请稍后再试')
-        return '请求错误，请稍后再试'
-      })
-  }
+const userThing = ref<aiChatForm>({
+  question: text.value ?? '',
+  userId: userId, // 默认用1或默认userId
+  sessionId: sessionId,
+  token: userStore.token
 })
-const submitClick = (): void => {
+
+
+const submitClick = async (): Promise<void> => {
   const inputValue = text.value.trim()
   if (!inputValue) {
     ElMessage.warning('请输入内容')
     return
   }
-  
-  userThing.value = inputValue
-  text.value = ''
+
   isShow.value = true
+  
+  try {
+    backThing.value = '思考中...'
+    userThing.value.question = inputValue // 更新用户输入内容
+    
+    const res = await reqAiChat({
+      question: inputValue,
+      userId: userId,
+      sessionId: sessionId,
+      token: userStore.token
+    })
+    
+    if (res.code === 200) {
+      backThing.value = res.data.Respond
+    } else {
+      ElMessage.error(res.msg || '请求失败，请稍后再试')
+      backThing.value = '请求失败，请稍后再试'
+    }
+  } catch (error) {
+    console.error('请求错误:', error)
+    ElMessage.error('请求错误，请稍后再试')
+    backThing.value = '请求错误，请稍后再试'
+  } finally {
+    text.value = ''
+  }
 }
 
 
diff --git a/src/views/ask/musicAi.vue b/src/views/ask/musicAi.vue
index fd0ceb7..3dd725b 100644
--- a/src/views/ask/musicAi.vue
+++ b/src/views/ask/musicAi.vue
@@ -57,25 +57,58 @@
                     </span>
 
                     <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar> user </el-avatar>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
                     </span>      
                 </div>
             </el-header>
 
             <div style="display: flex; width: 100%; height: 100%; align-items: flex-end;">
                 <div style=" width: 80%; padding-bottom: 0; margin-bottom: 10%; height: 50%; margin-right: 10%;">
-                    <el-input clearable v-model="text" type="textarea" 
-                            style="display: flex; width: 100%; height: 30%; margin-bottom: 5%; border-width: 2px;" 
-                            placeholder="来享受音乐吧" 
-                            :autosize="{ minRows: 6, maxRows: 6 }"
-                            @keyup.enter="handleEnter">
-                    </el-input>
-
-                    <div style="display: flex; width: 100%; justify-content: right;">
-                        <el-button style="display: flex; margin-right: 5%;" type="primary" plain round @click="submitClick">
+                    <div style="display: flex; margin-bottom: 2%; width: 100%;" v-show="isShow">
+                        <span style="display: flex; width: 100%;">
+                            <el-card style="display: flex; margin-left: auto; align-items: self-end;">
+                                <p style="display: flex; width: auto;">发送了一条音频</p>
+                            </el-card>
+                            <el-avatar style="margin-left: 1%"> user </el-avatar>
+                        </span>
+                    </div>
+
+                    <div style="display: flex; width: 100%; margin-bottom: 2%;" v-show="isShow">
+                        <span style="display: flex;">
+                            <el-avatar> AI </el-avatar>
+                            <el-card>
+                                <p>{{ backThing }}</p>
+                            </el-card>
+                        </span>
+                    </div>
+                    
+                    
+                    <el-card shadow="hover" style="margin-bottom: 5%;">
+                        <div class="audio-info" v-if="audioBlob" style="padding: 10px;" v-show="!isShow">
+                            <p>录音时长: {{ duration }}秒</p>
+                            <p>文件大小: {{ fileSize }}KB</p>
+                            <audio controls v-if="wavUrl" :src="wavUrl"></audio>
+                        </div>
+                        <div v-else class="empty-state">
+                            <el-icon><Headset /></el-icon>
+                            <span>暂无录音内容</span>
+                        </div>
+                    </el-card>
+
+                    <div style="display: flex; width: 100%; justify-content: right; border-color: black; border-width: 5px;">
+                        <el-button :disabled="isRecording" size="large" style="display: flex; margin-left: 1%; margin-bottom: 1%;" type="primary" plain round @click="recordClick1">
+                            <el-icon style="color: blue;"><ChatLineRound />点我录制</el-icon>
+                        </el-button>
+                        <el-button :disabled="!isRecording" size="large" style="display: flex; margin-left: 2%; margin-bottom: 1%;" type="primary" plain round @click="recordClick2">
+                            <el-icon style="color: blue;"><ChatLineRound />点我停止</el-icon>
+                        </el-button>
+                        <el-button :disabled="!audioBlob || isRecording"  size="large" style="display: flex; margin-right: 2%; margin-bottom: 1%;" type="primary" plain round @click="recordClick3">
+                            <el-icon style="color: blue;"><ChatLineRound />点我重录</el-icon>
+                        </el-button>
+                        <el-button :disabled="!audioBlob" style="display: flex; margin-right: 5%;" type="primary" plain round @click="submitClick">
                             <el-icon style="color: blue;"><Upload /></el-icon>
                         </el-button>
                     </div>
@@ -93,10 +126,16 @@
 </template>
   
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
 import { getTimeState } from '@/utils/index'
 import { ElMessage } from 'element-plus'
-import router from '@/router'
+import RecordRTC from 'recordrtc';
+import { useUserStore } from '@/stores/modules/user';
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+import { reqAiChat } from '@/api/interface'
+import type { aiChatForm } from '@/api/interface/type';
 
   const isCollapse = ref(false)
   const handleOpen = (key: string, keyPath: string[]) => {
@@ -114,25 +153,181 @@ onMounted(() => {
   console.log(thisTimeState.value)
 })
 
-const text = ref()
-const handleEnter = (event: KeyboardEvent) => {
-  // 如果按下Shift+Enter则插入换行
-  if (event.shiftKey) {
-    return
+ /*网页全屏*/
+const handleFullscreen = () => {
+    document.documentElement.requestFullscreen()
+}
+
+const userStore = useUserStore()
+
+const isRecording = ref(false);
+const audioBlob = ref<Blob | null>(null);
+const wavUrl: Ref<string | null> = ref(null);
+const recorder = ref<RecordRTC | null>(null);
+const audioStream = ref<MediaStream | null>(null);
+const startTime = ref(0);
+const duration = computed(() => {
+  if (!startTime.value || !audioBlob.value) return 0;
+  return ((Date.now() - startTime.value) / 1000).toFixed(1);
+});
+const fileSize = computed(() => {
+  if (!audioBlob.value) return 0;
+  return (audioBlob.value.size / 1024).toFixed(1);
+});
+
+// 清理资源
+const cleanupResources = () => {
+  if (recorder.value) {
+    recorder.value.destroy()
+    recorder.value = null
+  }
+  
+  if (audioStream.value) {
+    audioStream.value.getTracks().forEach(track => track.stop())
+    audioStream.value = null
+  }
+  
+  if (wavUrl.value) {
+    URL.revokeObjectURL(wavUrl.value)
+    wavUrl.value = null
   }
-  // 否则阻止默认行为（不换行）
-  event.preventDefault()
 }
 
-const submitClick = () => {
-    if(text.value.trim() == 0) {
-        ElMessage.warning("请输入东西哦亲")
+const backThing = ref();
+const isShow = ref(false);
+const recordClick1 = async () => {
+    ElMessage.success("开始录音")
+    isShow.value = false;
+    audioBlob.value = null
+    // 这里可以添加录音逻辑
+     try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: false,
+        noiseSuppression: false,
+        autoGainControl: false,
+        sampleRate: 16000,
+        channelCount: 1
+      } 
+    })
+    
+    audioStream.value = stream
+    startTime.value = Date.now()
+
+    recorder.value = new RecordRTC(stream, {
+      type: 'audio',
+      mimeType: 'audio/wav',
+      recorderType: RecordRTC.StereoAudioRecorder,
+      desiredSampRate: 16000,
+      numberOfAudioChannels: 1,
+      bufferSize: 4096,
+      disableLogs: true,
+      audioBitsPerSecond: 256000
+    })
+    
+    recorder.value.startRecording()
+    isRecording.value = true
+    ElMessage.success("录音已开始")
+    
+  } catch (error) {
+    console.error("录音失败:", error)
+    ElMessage.error("无法访问麦克风，请检查权限设置")
+    cleanupResources()
+  }
+}
+
+const recordClick2 = async() => {
+    ElMessage.success("停止录音")
+    // 这里可以添加停止录音逻辑
+    if (!recorder.value || !isRecording.value) {
+        ElMessage.warning("请先开始录音");
+        return;
+    }       
+    recorder.value.stopRecording(() => {
+        if (recorder.value) {
+            audioBlob.value = recorder.value.getBlob();
+            wavUrl.value = URL.createObjectURL(audioBlob.value);
+        }
+        isRecording.value = false;
+        ElMessage.success("录音已停止，请上传音频");
+    
+    // 关闭音频流
+    if (audioStream.value) {
+      audioStream.value.getTracks().forEach(track => track.stop());
+    }
+  });
+}
+
+const recordClick3 = () => {
+  if (wavUrl.value) {
+    URL.revokeObjectURL(wavUrl.value)
+    wavUrl.value = null
+  }
+  audioBlob.value = null
+  isShow.value = false
+  ElMessage.info("已重置录音状态")
+}
+
+const submitClick = async() => {
+    if (!audioBlob.value) {
+        ElMessage.warning("请先录制音频");
+        return;
     }
 
+    // 这里可以添加上传音频的逻辑
+    isShow.value = true;
+    try {
+    const formData = new FormData();
+    formData.append('audioFile', audioBlob.value, 'voice.wav'); 
+    formData.append('sessionId', userStore.sessionId || '');
+    formData.append('token', userStore.token || '');
+
+    // 使用axios发送请求
+    const url = 'http://localhost:8080';
+    const response = await axios.post(
+      `${url}/wordAudio/handleAudioFile`,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        timeout: 30000 
+      }
+    )
+    
+    if (response.data.code === 200) {
+      console.log(response.data.data)
+      try {
+        const from: aiChatForm = {
+          question: response.data.data,
+          userId: userStore.userId.toString(),
+          sessionId: userStore.sessionId,
+          token: userStore.token
+        }
+
+        const res = await reqAiChat(from)
+        backThing.value = res.data.Respond
+        console.log(backThing.value)
+      } catch (error) {}
 
+      ElMessage.success("音频处理成功")
+    } else {
+      backThing.value = response.data.msg || '处理失败'
+      ElMessage.error(response.data.msg || '音频处理失败')
+    }
+  } catch (error) {
+    console.error("提交失败:", error)
+    backThing.value = '处理失败'
+    ElMessage.error("提交失败，请重试")
+  } finally {
 
-} 
+  }
+}
 
+// 组件卸载时清理资源
+onUnmounted(() => {
+  cleanupResources()
+})
 
 </script>
 
diff --git a/src/views/ask/tableAi.vue b/src/views/ask/tableAi.vue
index 7689a8b..8600fcb 100644
--- a/src/views/ask/tableAi.vue
+++ b/src/views/ask/tableAi.vue
@@ -56,18 +56,43 @@
                         {{ thisTimeState }}
                     </span>
 
-                    <span @click="handleFullscreen" style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                    <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
+                        <span  @click="handleFullscreen"  style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar> user </el-avatar>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
                     </span>      
                 </div>
             </el-header>
 
             <div style="display: flex; width: 100%; height: 100%; align-items: flex-end;">
                 <div style=" width: 80%; padding-bottom: 0; margin-bottom: 10%; height: 50%; margin-right: 10%;">
+
+                    <div style="display: flex; margin-bottom: 2%; width: 100%;" v-show="isShow">
+                        <span style="display: flex; width: 100%;">
+                            <el-card style="display: flex; margin-left: auto; align-items: self-end;" v-model="userThing">
+                                <p style="display: flex; width: auto;">{{ userThing.picture }}</p>
+                            </el-card>
+                            <el-avatar style="margin-left: 1%"> user </el-avatar>
+                        </span>
+                    </div>
+
+                    <div style="display: flex; width: 100%; margin-bottom: 2%;" v-show="isShow">
+                      <span style="display: flex;">
+                        <el-avatar> AI </el-avatar>
+                        <el-card>
+                          <template v-if="backThing === '思考中...'">
+                            <p>思考中...</p>
+                          </template>
+                          <template v-else-if="backThing">
+                            <img :src="backThing" alt="生成的图片" style="max-width: 100%; max-height: 400px; object-fit: contain;">
+                          </template>
+                        </el-card>
+                      </span>
+                    </div>                  
+                    
                     <el-input clearable v-model="text" type="textarea" 
+                            :userThing="userThing.picture"
                             style="display: flex; width: 100%; height: 30%; margin-bottom: 5%; border-width: 2px;" 
                             placeholder="来制定你的计划吧" 
                             :autosize="{ minRows: 3, maxRows: 6 }"
@@ -96,8 +121,11 @@
 import { onMounted, ref } from 'vue'
 import { getTimeState } from '@/utils/index'
 import { ElMessage } from 'element-plus'
-import router from '@/router'
+import { useUserStore } from '@/stores/modules/user'
+import { type aiTableForm } from '@/api/interface/type' 
+import { useRouter } from 'vue-router'
 
+/*侧边栏*/
   const isCollapse = ref(false)
   const handleOpen = (key: string, keyPath: string[]) => {
     console.log(key, keyPath)
@@ -118,30 +146,57 @@ const handleFullscreen = () => {
     document.documentElement.requestFullscreen()
 }
 
+/*对话框写入部分*/
 const text = ref()
+const isShow = ref(false)
+
 const handleEnter = (event: KeyboardEvent) => {
-  // 如果按下Shift+Enter则插入换行
-  if (event.shiftKey) {
-    return
+  if (!event.shiftKey) {
+    event.preventDefault()
+    submitClick()
   }
-  // 否则阻止默认行为（不换行）
-  event.preventDefault()
 }
 
-const submitClick = () => {
-    if(text.value.trim() == 0) {
-        ElMessage.warning("请输入东西哦亲")
-    }else{
-
-    }
-
-
-
+/*对话框交互部分*/
+// 获取用户状态
+const userStore = useUserStore()
+const userId = userStore.userId.toString()
+
+const backThing = ref()
+const userThing = ref<aiTableForm>({
+  picture: text.value,
+  userId: userId ,
+  sessionId: userStore.sessionId,
+  token: userStore.token
+})
 
-    ElMessage.success("正在为您生成计划")
-} 
+const submitClick = async () => {
+  const inputValue = text.value.trim()
+  if (!inputValue) {
+    ElMessage.warning('请输入图片描述')
+    return
+  }
 
 
+  try {
+    isShow.value = true
+    userThing.value.picture = inputValue
+    backThing.value = '思考中...'
+
+    // 使用store中的方法生成图片
+    const imageData = await userStore.generateImage(inputValue)
+    backThing.value = imageData
+    
+    ElMessage.success('图片生成成功')
+    console.log('生成的图片:', imageData)   // 打印生成的图片数据
+    text.value = ''
+  } catch (error: any) {
+    console.error('图片生成失败:', error)
+    ElMessage.error(error.message || '图片生成失败')
+    backThing.value = ''
+  } finally {
+  }
+}
 </script>
 
 <style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 5b45a5a..ab295ae 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -57,24 +57,41 @@
                     </span>
 
                     <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar> user </el-avatar>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
                     </span>      
                 </div>
             </el-header>
 
-            <el-carousel
-                height="600px"
-                direction="vertical"
-                type="card"
-                :autoplay="true"
-            >
-                <el-carousel-item v-for="key in item" :key="item">
-                <h3 text="2xl" justify="center">{{ key }}</h3>
-                </el-carousel-item>
-            </el-carousel>
+          <!-- 全新设计的轮播图 -->
+            <div class="carousel-container">
+                <el-carousel
+                    height="550px"
+                    direction="horizontal"
+                    type="card"
+                    :autoplay="true"
+                    :interval="5000"
+                    indicator-position="outside"
+                    arrow="always"
+                    @change="onCarouselChange"
+                >
+                    <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+                        <div class="custom-carousel-card" :class="{'active': currentIndex === index}">
+                            <div class="card-content">
+                                <div class="card-icon">
+                                    <el-icon :size="64" class="icon-element">
+                                        <component :is="item.icon" />
+                                    </el-icon>
+                                </div>
+                                <h3 class="card-title">{{ item.title }}</h3>
+                                <p class="card-desc">{{ item.desc }}</p>
+                            </div>
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
 
 
 
@@ -89,6 +106,10 @@
 import { onMounted, ref } from 'vue'
 import { getTimeState } from '@/utils/index'
 import { ElMessage } from 'element-plus'
+import { FullScreen, ChatRound, Mic, Memo, UserFilled } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/modules/user'
+
+const userStore = useUserStore()
 
   const isCollapse = ref(false)
   const handleOpen = (key: string, keyPath: string[]) => {
@@ -106,14 +127,57 @@ onMounted(() => {
   console.log(thisTimeState.value)
 })
 
-const item = [
-    ['在蓝心小V里你可以问问AI该怎么制定计划'],
-    ["如果你不开心，你也可以在AI原子能力里面和AI聊天"],
-    ["如果你想听听音乐，也可以和AI探讨音乐世界的美丽，他也许会帮你制作哦"],
-    ["在我的计划里面你可以清楚的查看到每一次AI为你制定的计划，你也可以自定义"],
-    ["个人中心里面我们会为您统计您的计划安排和生活，有更加针对化的建议哦"]
-]
+ /*网页全屏*/
+const handleFullscreen = () => {
+    document.documentElement.requestFullscreen()
+}
+
+// 轮播图当前索引
+const currentIndex = ref(0)
+
+// 轮播图变更处理
+const onCarouselChange = (index: number) => {
+    currentIndex.value = index
+}
 
+// 优化后的轮播图数据结构（添加图标和背景色）
+const carouselItems = [
+    {
+        title: '蓝心小V - 智能计划助手',
+        desc: '问问AI如何制定科学计划，高效管理时间，提升工作学习效率。',
+        icon: ChatRound,
+        bgColor: '#f0f7ff',
+        textColor: '#3a7bd5'
+    },
+    {
+        title: 'AI原子能力 - 情感陪伴',
+        desc: '与AI聊天倾诉，获取情感支持和专业建议，让心情更舒畅。',
+        icon: ChatRound,
+        bgColor: '#f8f9fa',
+        textColor: '#5c6b77'
+    },
+    {
+        title: 'AI音乐实验室 - 创作无限',
+        desc: '探索音乐世界，AI不仅能推荐歌曲，还能帮你创作专属旋律。',
+        icon: Mic,
+        bgColor: '#fff6f0',
+        textColor: '#ff7a45'
+    },
+    {
+        title: '我的计划表 - 目标管理',
+        desc: '查看AI制定的计划，自定义编辑和跟踪进度，实现目标可视化。',
+        icon: Memo,
+        bgColor: '#f0fff4',
+        textColor: '#52c41a'
+    },
+    {
+        title: '个人中心 - 数据洞察',
+        desc: '查看计划统计和生活习惯分析，获取个性化建议，优化自我管理。',
+        icon: UserFilled,
+        bgColor: '#fcf6ff',
+        textColor: '#722ed1'
+    }
+]
 </script>
 
 <style>
@@ -131,14 +195,34 @@ const item = [
     margin-left: 0;
     padding-left: 0;
 }
-.el-carousel__item h3 {
-  color: #475669;
-  opacity: 0.80;
-  line-height: 300px;
-  margin: 0;
+
+/* 优化后的轮播图样式 */
+.el-carousel__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.carousel-content {
   text-align: center;
-  margin-left: 0;
-  padding-left: 0;
+  max-width: 800px;
+  width: 100%;
+}
+
+.carousel-title {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  line-height: 1.3;
+}
+
+.carousel-desc {
+  font-size: 18px;
+  color: #666;
+  line-height: 1.6;
 }
 
 .el-carousel__item:nth-child(2n) {
@@ -148,4 +232,20 @@ const item = [
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
 }
+
+.blue-title {
+  color: #3a7bd5;
+}
+
+.blue-desc {
+  color: #4a88d9;
+}
+
+.gray-title {
+  color: #5c6b77;
+}
+
+.gray-desc {
+  color: #6d7a85;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 50a6d63..7cda6b6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,162 +1,352 @@
 <template>
-    <div class="placeHolder" style="display: flex; height: 100vh; width: 100%; align-items: center; justify-items: center;">
-        <div class="imgPlaceHolder" style="display: flex; width: 500px; height: 50%; background-color: pink; border-radius: 10px; align-items: center; justify-content: center; justify-items: center; margin-left: 15%;">
-            <img src="@/assets/login.png" alt="login" style="display: flex; width: 98%; height: 98%; border-radius: 10px; align-items: center; justify-content: center; justify-items: center;"/>
+    <div class="login-container">
+        <div class="login-illustration">
+            <img src="@/assets/login.png" alt="login illustration" class="illustration-img"/>
         </div>
-        <div class="formPlaceHolder" style="display: flex; width: 500px; margin-right: 15%;">
+        <div class="login-form-container">
+            <div class="form-header">
+                <h2>欢迎登录</h2>
+                <p>请输入您的账号信息</p>
+            </div>
             <el-form
                 ref="ruleFormRef"
-                style="max-width: 600px"
+                class="login-form"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="auto"
+                @keyup.enter="loginHandler"
             >
                 <el-form-item label="用户名" prop="name">
-                <el-input v-model="ruleForm.name"/>
+                    <el-input 
+                        v-model="ruleForm.name" 
+                        placeholder="3-16位字符"
+                        :prefix-icon="User"
+                    />
                 </el-form-item>
 
                 <el-form-item label="邮箱" prop="email">
-                <el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
+                    <el-input 
+                        v-model="ruleForm.email" 
+                        type="email" 
+                        placeholder="请输入有效邮箱"
+                        :prefix-icon="Message"
+                    />
                 </el-form-item>
 
                 <el-form-item label="密码" prop="password">
-                <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password/>
+                    <el-input 
+                        v-model="ruleForm.password" 
+                        type="password" 
+                        show-password
+                        placeholder="6-16位密码"
+                        :prefix-icon="Lock"
+                    />
                 </el-form-item>
 
                 <el-form-item label="验证码" prop="validCode">
-                <el-input v-model="ruleForm.validCode"/> 
-                <ValidCodeComponent v-model="captcha" style="display: flex; background-color: paleturquoise; margin-top: 3px; margin-left: 70%;"/>
+                    <div class="captcha-wrapper">
+                        <el-input 
+                            v-model="ruleForm.validCode" 
+                            placeholder="请输入验证码"
+                            :prefix-icon="Key"
+                        />
+                        <ValidCode 
+                            v-model="captcha" 
+                            class="captcha-comp"
+                            @refresh="() => captcha = ''"
+                        />
+                    </div>
                 </el-form-item>
 
-                <div style="display: flex; margin-top: 8px; justify-content: center;">
-                  <el-button color="purple" type="primary"  plain round @click="loginHandler"> <div>登录</div> </el-button>
-                  <el-text tag="ins" shadow="hover" @click="registerHandler">还没有账号？点击注册</el-text>
+                <div class="action-buttons">
+                    <el-button 
+                        class="login-btn"
+                        :loading="isLogging"
+                        @click="loginHandler"
+                    >
+                        登 录
+                    </el-button>
+                    <div class="form-footer">
+                        <el-text tag="span" class="footer-text">还没有账号？</el-text>
+                        <el-text tag="ins" class="register-link" @click="registerHandler">立即注册</el-text>
+                    </div>
                 </div>            
-
             </el-form>
-
-
-         
-
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, type Component } from 'vue'
-import { RowAlign, type FormInstance, type FormRules } from 'element-plus'
-import ValidCodeComponent from '@/components/validCode.vue'
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
 import { useRouter } from 'vue-router'
-import axios from 'axios'
-import request from '@/utils/request'
-import type { loginForm, userResponseData } from '@/api/user/type'
-import { reqLogin } from '@/api/user'
-
-
-interface RuleForm {
-  name: string
-  password: string
-  email: string
-  validCode: string
-}
+import { ElMessage } from 'element-plus'
+import { User, Lock, Message, Key } from '@element-plus/icons-vue'
+import type { loginForm } from '@/api/user/login/type'
+import { useUserStore } from '@/stores/modules/user'
+import ValidCode from '@/components/validCode.vue'
 
+// 保持原有变量名称不变
 const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive<RuleForm>({
+const ruleForm = reactive({
   name: '',
   password: '',
   email: '',
-  validCode: '',
+  validCode: ''
 })
 const captcha = ref('')
+const isLogging = ref(false)
+const router = useRouter()
+const userStore = useUserStore()
 
+// 验证码验证规则
 const validCode = (rule: any, value: string, callback: any) => {
-  if (value === '') {
+  if (!value) {
     callback(new Error('请输入验证码'))
   } else if (value !== captcha.value) {
     callback(new Error('验证码错误'))
-    console.log(value, captcha.value)
+    captcha.value = '' // 验证错误时重置验证码
   } else {
     callback()
   }
 }
-const rules = reactive<FormRules<RuleForm>>({
+
+// 表单验证规则
+const rules = reactive<FormRules>({
   name: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    { min: 3, max: 16, message: '长度3-16个字符', trigger: 'blur' }
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 16, message: 'Length should be 6 to 16', trigger: 'blur' },
+    { min: 6, max: 16, message: '长度6-16个字符', trigger: 'blur' }
   ],
   email: [
     { required: true, message: '请输入邮箱', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
   ],
   validCode: [
-    {validator: validCode, trigger: 'blur'}
+    { validator: validCode, trigger: 'blur' }
   ]
 })
 
-
-const router = useRouter()
-
 const registerHandler = () => {
   router.push('/register')
 }
 
 const loginHandler = async () => {
-  if (!ruleFormRef.value) return
+  try {
+    await ruleFormRef.value?.validate()
+    isLogging.value = true
 
-  // 表单验证
-  await ruleFormRef.value.validate((valid) => {
-    if (!valid) {
-      console.log('验证失败')
+    const loginForm: loginForm = {
+      username: ruleForm.name,
+      password: ruleForm.password,
+      email: ruleForm.email,
+    }
+    const flag = await userStore.userLogin(loginForm)
+    if(flag) {
+      router.push('/')
     }
-  })
+  } catch (error) {
+    // 错误处理已在Pinia中完成，此处不需要重复
+  } finally {
+    isLogging.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+  gap: 60px;
+}
 
-  const loginData: loginForm = {
-    username: ruleForm.name,
-    password: ruleForm.password,
-    email: ruleForm.email,
+.login-illustration {
+  width: 500px;
+  height: 500px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
   }
+}
 
-  try {
-    const response: userResponseData = await reqLogin(loginData);
-    if (response.code === 200) {
-      // 验证验证码
-      router.push('/')
-      console.log(response.message)
-    } else {
-      alert('用户名或密码错误');
+.illustration-img {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.login-form-container {
+  width: 420px;
+  padding: 40px;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+  }
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 30px;
+  
+  h2 {
+    color: #303133;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  
+  p {
+    color: #909399;
+    font-size: 14px;
+  }
+}
+
+.login-form {
+  width: 100%;
+  
+  :deep(.el-form-item__label) {
+    color: #606266;
+    font-weight: 500;
+  }
+  
+  :deep(.el-input__wrapper) {
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px #dcdfe6;
+    transition: all 0.3s;
+    
+    &:hover {
+      box-shadow: 0 0 0 1px #c0c4cc;
+    }
+    
+    &.is-focus {
+      box-shadow: 0 0 0 1px #7c3aed !important;
     }
-  } catch (error) {
-    console.error('登录失败:', error);
-    alert('登录失败，请重试');
   }
 }
 
-</script>
+.captcha-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  
+  :deep(.el-input) {
+    flex: 1;
+  }
+}
+
+.captcha-comp {
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 44px;
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+  border: none;
+  color: white;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s;
   
-<style scoped>
-.imgPlaceHolder {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-.formPlaceHolder {
-  margin-left: 2px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
+  &:hover {
+    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.form-footer {
   display: flex;
-  align-content: center;
+  align-items: center;
   justify-content: center;
-  height: 50%;
-  background-color: rgb(255, 213, 220);
+  gap: 8px;
+}
+
+.footer-text {
+  color: #909399;
+  font-size: 14px;
+}
+
+.register-link {
+  color: #7c3aed;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.3s;
+  
+  &:hover {
+    color: #6d28d9;
+    text-decoration: underline;
+  }
 }
-.placeHolder {
-  background-color: bisque;
+
+@media (max-width: 992px) {
+  .login-container {
+    flex-direction: column;
+    gap: 40px;
+    padding: 40px 20px;
+  }
+  
+  .login-illustration {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    aspect-ratio: 1/1;
+  }
+  
+  .login-form-container {
+    width: 100%;
+    max-width: 400px;
+  }
 }
-.el-form {
-  align-content: center;
+
+@media (max-width: 576px) {
+  .login-form-container {
+    padding: 30px 20px;
+  }
+  
+  .captcha-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .captcha-comp {
+    width: 100%;
+  }
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/myself/change.vue b/src/views/myself/change.vue
new file mode 100644
index 0000000..ed277e5
--- /dev/null
+++ b/src/views/myself/change.vue
@@ -0,0 +1,216 @@
+<template>
+    <div class="common-layout" style="display: flex; height: 100vh; width: 100%;">
+      <el-container>
+        <el-container>
+          <el-aside width="25%">
+            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+                <el-radio-button :value="false">打开侧边栏</el-radio-button>
+                <el-radio-button :value="true">收缩侧边栏</el-radio-button>
+            </el-radio-group>
+            <el-menu
+                router
+                :default-active="$route.path"
+                class="el-menu-vertical-demo"
+                :collapse="isCollapse"
+                @open="handleOpen"
+                @close="handleClose"
+            >
+                <el-sub-menu>
+                    <template #title>
+                        <el-icon><ChatRound /></el-icon>
+                        <span>问问AI</span>
+                    </template>
+                    <el-menu-item-group>
+                        <el-menu-item index="/tableAi">蓝心小V</el-menu-item>
+                        <el-menu-item index="/chatAi">AI原子能力</el-menu-item>
+                        <el-menu-item index="/musicAi">AI语音研究实验室</el-menu-item>
+                    </el-menu-item-group>
+                </el-sub-menu>
+
+                <el-menu-item index="/table">
+                    <el-icon><Memo /></el-icon>
+                    <template #title>我的计划表</template>
+                </el-menu-item>
+
+                <el-sub-menu>
+                    <template #title>
+                        <el-icon><UserFilled /></el-icon>
+                        <span>个人中心</span>
+                    </template>
+                    <el-menu-item-group>
+                        <el-menu-item index="/my">个人信息</el-menu-item>
+                        <el-menu-item index="/used">使用情况</el-menu-item>
+                    </el-menu-item-group>
+                </el-sub-menu>
+            </el-menu>
+          </el-aside>
+
+          <el-main>
+            <el-header style="font-size: larger;">
+                <div style="display: flex; width: 100%;">
+                    <span style="display: flex; justify-content: center; width: 50%;">
+                        {{ timeGreeting }}
+                    </span>
+                    <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
+                            <el-icon><FullScreen /></el-icon>
+                        </span>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
+                    </span>      
+                </div>
+            </el-header>
+
+            <div style="width: 80%;">
+                <h3>个人信息修改</h3>
+                <el-form>
+                    <el-form-item label="头像">
+                        <img :src="avatarImageUrl" style="margin-bottom: 2%; width: 30%; height: 100%;"></img>
+                        <el-button  type="primary" size="small" @click="changeAdvater">修改头像</el-button>
+                    </el-form-item>
+                    <el-form-item label="用户ID">
+                        <el-input v-model="userStore.userId" placeholder="用户ID" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="用户名">
+                        <el-input v-model="userName" placeholder="请输入修改用户名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱">
+                        <el-input v-model="Email" placeholder="请输入修改邮箱"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码">
+                        <el-input type="password" show-password v-model="password" placeholder="请修改密码"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="update">保存修改</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+
+            
+           </el-main>
+        </el-container>
+      </el-container>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import { ref, computed, onMounted} from 'vue'
+import { getTimeState } from '@/utils'
+import { useUserStore } from '@/stores/modules/user'
+import { reqUserShow, reqUserUpdate,} from '@/api/user/show'
+import type{ UserUpdateForm } from '@/api/user/show/type'
+import axios from 'axios'
+import { onActivated } from 'vue'
+
+
+// 侧边栏状态
+const isCollapse = ref(false)
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log('Menu opened:', key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log('Menu closed:', key, keyPath)
+}
+
+// 时间问候语
+const timeGreeting = computed(() => getTimeState() || '')
+
+// 全屏功能
+const handleFullscreen = () => {
+  document.documentElement.requestFullscreen().catch(err => {
+    console.error('全屏模式失败:', err)
+  })
+}
+
+const userStore = useUserStore()
+const avatarImageUrl = ref('/5.png')
+const userName = ref(userStore.username || '')
+const Email = ref(userStore.email || '')
+const password = ref('')
+
+const changeAdvater = async () => {
+  // 创建隐藏的文件输入元素
+  const fileInput = document.createElement('input')
+  fileInput.type = 'file'
+  fileInput.accept = 'image/*'
+  
+  fileInput.onchange = async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (!file) return
+    
+    const url = 'http://localhost:8080'
+    const formdata = new FormData()
+    formdata.append('file', file)
+
+    try {
+        const res = await axios.post(
+            `${url}/common/upload`,
+            formdata,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }
+        )
+        console.log(res.data.code)
+        avatarImageUrl.value = res.data.data
+    } catch (error) {
+      console.error('修改头像失败:', error)
+    }
+  }
+  
+  // 这行应该放在onchange回调函数外部
+  fileInput.click() 
+}
+
+const update = async () => {
+    try {
+            const form: UserUpdateForm = {
+                userId: userStore.userId,
+                username: userName.value,
+                email: Email.value,
+                password: password.value,
+                avatarImageUrl: avatarImageUrl.value
+            }
+            const res = await reqUserUpdate(form)
+            if (res.code === 200) {
+                ElMessage.success('信息修改成功')
+
+                try{
+                    const response = await reqUserShow(userStore.userId.toString())
+                    if(response.code === 200) {
+                        userStore.username = response.data.username
+                        userStore.email = response.data.email
+                        avatarImageUrl.value = response.data.avatarImageUrl
+                    }
+                }catch (error) {
+                    console.error('获取用户信息失败:', error)
+                }
+
+            } else {
+                ElMessage.error('修改失败')
+            }
+        } catch (error) {
+            console.error('修改信息失败:', error)
+        }
+}
+
+const fetchUserData = async () => {
+  try {
+    const response = await reqUserShow(userStore.userId.toString())
+    if(response.code === 200) {
+        userName.value = response.data.username,
+        Email.value = response.data.email,
+        password.value = response.data.password,
+        avatarImageUrl.value = response.data.avatarImageUrl || '/5.png'  
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+  }
+}
+
+onMounted(fetchUserData)
+
+onActivated(fetchUserData)
+</script>
\ No newline at end of file
diff --git a/src/views/myself/my.vue b/src/views/myself/my.vue
index 9dab16b..3e9b6bb 100644
--- a/src/views/myself/my.vue
+++ b/src/views/myself/my.vue
@@ -1,8 +1,6 @@
 <template>
     <div class="common-layout" style="display: flex; height: 100vh; width: 100%;">
-        
       <el-container>
-
         <el-container>
           <el-aside width="25%">
             <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
@@ -44,63 +42,176 @@
                         <el-menu-item index="/used">使用情况</el-menu-item>
                     </el-menu-item-group>
                 </el-sub-menu>
-
             </el-menu>
-
           </el-aside>
 
           <el-main>
             <el-header style="font-size: larger;">
                 <div style="display: flex; width: 100%;">
                     <span style="display: flex; justify-content: center; width: 50%;">
-                        {{ thisTimeState }}
+                        {{ timeGreeting }}
                     </span>
-
                     <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar> user </el-avatar>
+                        <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
                     </span>      
                 </div>
             </el-header>
 
-
-
-
-
+            <div>
+              
+              <el-descriptions
+                  title="个人信息"
+                  direction="vertical"
+                  border
+                  style="margin-top: 0; margin-left: 0; width: 80%;"
+              >
+              
+                <el-descriptions-item
+                    :rowspan="1"
+                    :colspan="1"
+                    :width="240"
+                    label="Photo"
+                    align="center"
+                >
+                  <img :src="imgUrl" alt="头像"style="width: 40%; height: 40%;"/>
+                </el-descriptions-item>
+                <el-descriptions-item label="Username">{{ username }}</el-descriptions-item>
+                <el-descriptions-item label="Email">{{ email }}</el-descriptions-item>
+                <el-descriptions-item label="weatherImg">
+                  <img :src="weatherImage" alt="天气图片" style="display: flex; width: 40%; height: 40%; justify-self: center;"/>
+                </el-descriptions-item>
+                <el-descriptions-item label="User ID">{{ userId }}</el-descriptions-item>
+                <el-descriptions-item label="Remarks">
+                  <el-tag size="big" type="primary" @click="toggleTag('student')" v-show="tags.student">学生</el-tag>
+                  <el-tag size="big" type="success" @click="toggleTag('worker')" v-show="tags.worker">上班族</el-tag>
+                  <el-tag size="big" type="info" @click="toggleTag('retiree')" v-show="tags.retiree">退休族</el-tag>
+                  <el-tag type="warning" @click="resetTags" v-show="!allTagsVisible">点我重置</el-tag>
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+
+            <!-- <div class="tag-display">
+              <p class="tag-text">FINDING YOU ARE {{ currentTags }}</p>
+            </div> -->
+            <el-button @click="change" style="display: flex; width: 80%; height: 2%; font-size: smaller; margin-top: 2%;">
+              <el-icon><UserFilled /></el-icon>
+                    修改个人信息
+            </el-button>
+
+            <div style="display: flex; height: 50%; width: 80%; justify-content: center; align-items: center; margin-top: 2%;">
+                <LocationMap 
+                  :userId="id"
+                  @position-update="handlePositionUpdate"
+                  @ws-message="handleWsMessage"
+                />
+            </div>
           </el-main>
         </el-container>
-
       </el-container>
     </div>
 </template>
-  
+
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref, onMounted, computed, onBeforeUnmount, nextTick, onActivated } from 'vue'
 import { getTimeState } from '@/utils/index'
-import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/modules/user'
+import { ChatRound, Memo, UserFilled, FullScreen } from '@element-plus/icons-vue'
+import { reqUserShow, reqUserUpdate, } from '@/api/user/show'
+import type { UserUpdateForm, } from '@/api/user/show/type'
+import LocationMap from '@/components/LocationMap.vue'
 import router from '@/router'
 
-  const isCollapse = ref(false)
-  const handleOpen = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath)
-  }
-  const handleClose = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath)
-  }
 
-  /*时间问候*/
-const timeState = getTimeState()
-const thisTimeState = ref('')
-onMounted(() => {
-  thisTimeState.value = timeState || ''
-  console.log(thisTimeState.value)
+// 侧边栏状态
+const isCollapse = ref(false)
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log('Menu opened:', key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log('Menu closed:', key, keyPath)
+}
+
+// 时间问候语
+const timeGreeting = computed(() => getTimeState() || '')
+
+// 全屏功能
+const handleFullscreen = () => {
+  document.documentElement.requestFullscreen().catch(err => {
+    console.error('全屏模式失败:', err)
+  })
+}
+
+// 用户标签状态
+const tags = ref({
+  student: true,
+  worker: true,
+  retiree: true
 })
 
+// 切换标签状态
+const toggleTag = (tag: keyof typeof tags.value) => {
+  tags.value[tag] = !tags.value[tag]
+}
+
+// 重置所有标签
+const resetTags = () => {
+  tags.value = {
+    student: true,
+    worker: true,
+    retiree: true
+  }
+}
+
+// 计算属性
+const allTagsVisible = computed(() => 
+  tags.value.student && tags.value.worker && tags.value.retiree
+)
+
+const username = ref('')
+const email = ref('')
+const userStore = useUserStore()
+const id = userStore.userId
+const weatherImage = ref('')
+const userId = ref()
+
+const imgUrl = ref("/5.png")
+const change = () => {
+  router.push('/change')
+}
+
+const handlePositionUpdate = (pos: { lng: number; lat: number }) => {
+  console.log('位置更新:', pos)
+}
+
+const handleWsMessage = (msg: any) => {
+  console.log('收到WS消息:', msg)
+  ElMessage.success(msg.remark)
+  if (msg.status === 'success') {
+    ElMessage.success('位置上报成功')
+  }
+}
 
+const fetchUserData = async () => {
+  try {
+    const res = await reqUserShow(id.toString())
+    if(res.code === 200) {
+      username.value = res.data.username || '未设置用户名'
+      email.value = res.data.email || '未设置邮箱'
+      userId.value = id
+      weatherImage.value = res.data.weatherImageUrl || '/defaultWeather.png'
+      imgUrl.value = res.data.avatarImageUrl || '/5.png'
+    }
+  } catch(error) {
+    console.error('获取用户信息失败:', error)
+  }
+}
 
+onMounted(fetchUserData)
 
+onActivated(fetchUserData)
 </script>
 
 <style>
@@ -109,13 +220,27 @@ onMounted(() => {
   min-height: 400px;
 }
 .el-menu-item-group__title {
-    height: 0;
-    width: 0;
+  height: 0;
+  width: 0;
 }
 .el-main {
-    margin-top: 0;
-    padding-top: 0.8%;
-    margin-left: 0;
-    padding-left: 0;
+  margin-top: 0;
+  padding-top: 0.8%;
+  margin-left: 0;
+  padding-left: 0;
+}
+.tag-display {
+  display: flex;
+  width: 80%;
+  height: 40%;
+  margin-top: 2%;
+  align-content: center;
+  justify-content: center;
+}
+.tag-text {
+  width: 100%;
+  text-align: center;
+  font-family: bigWord;
+  font-size: 6vh;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/myself/used.vue b/src/views/myself/used.vue
index 365a84c..7e46baf 100644
--- a/src/views/myself/used.vue
+++ b/src/views/myself/used.vue
@@ -1,110 +1,161 @@
 <template>
     <div class="common-layout" style="display: flex; height: 100vh; width: 100%;">
-        
-      <el-container>
-
         <el-container>
-          <el-aside width="25%">
-            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
-                <el-radio-button :value="false">打开侧边栏</el-radio-button>
-                <el-radio-button :value="true">收缩侧边栏</el-radio-button>
-            </el-radio-group>
-            <el-menu
-                router
-                :default-active="$route.path"
-                class="el-menu-vertical-demo"
-                :collapse="isCollapse"
-                @open="handleOpen"
-                @close="handleClose"
-            >
-                <el-sub-menu>
-                    <template #title>
-                        <el-icon><ChatRound /></el-icon>
-                        <span>问问AI</span>
-                    </template>
-                    <el-menu-item-group>
-                        <el-menu-item index="/tableAi">蓝心小V</el-menu-item>
-                        <el-menu-item index="/chatAi">AI原子能力</el-menu-item>
-                        <el-menu-item index="/musicAi">AI语音研究实验室</el-menu-item>
-                    </el-menu-item-group>
-                </el-sub-menu>
-
-                <el-menu-item index="/table">
-                    <el-icon><Memo /></el-icon>
-                    <template #title>我的计划表</template>
-                </el-menu-item>
-
-                <el-sub-menu>
-                    <template #title>
-                        <el-icon><UserFilled /></el-icon>
-                        <span>个人中心</span>
-                    </template>
-                    <el-menu-item-group>
-                        <el-menu-item index="/my">个人信息</el-menu-item>
-                        <el-menu-item index="/used">使用情况</el-menu-item>
-                    </el-menu-item-group>
-                </el-sub-menu>
-
-            </el-menu>
-
-          </el-aside>
-
-          <el-main>
-            <el-header style="font-size: larger;">
-                <div style="display: flex; width: 100%;">
-                    <span style="display: flex; justify-content: center; width: 50%;">
-                        {{ thisTimeState }}
-                    </span>
-
-                    <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
-                            <el-icon><FullScreen /></el-icon>
-                        </span>
-                        <el-avatar> user </el-avatar>
-                    </span>      
-                </div>
-            </el-header>
-
-           
-
-
-
-          </el-main>
+            <el-container>
+                <el-aside width="25%">
+                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+                        <el-radio-button :value="false">打开侧边栏</el-radio-button>
+                        <el-radio-button :value="true">收缩侧边栏</el-radio-button>
+                    </el-radio-group>
+                    <el-menu
+                        router
+                        :default-active="$route.path"
+                        class="el-menu-vertical-demo"
+                        :collapse="isCollapse"
+                        @open="handleOpen"
+                        @close="handleClose"
+                    >
+                        <el-sub-menu>
+                            <template #title>
+                                <el-icon><ChatRound /></el-icon>
+                                <span>问问AI</span>
+                            </template>
+                            <el-menu-item-group>
+                                <el-menu-item index="/tableAi">蓝心小V</el-menu-item>
+                                <el-menu-item index="/chatAi">AI原子能力</el-menu-item>
+                                <el-menu-item index="/musicAi">AI语音研究实验室</el-menu-item>
+                            </el-menu-item-group>
+                        </el-sub-menu>
+
+                        <el-menu-item index="/table">
+                            <el-icon><Memo /></el-icon>
+                            <template #title>我的计划表</template>
+                        </el-menu-item>
+
+                        <el-sub-menu>
+                            <template #title>
+                                <el-icon><UserFilled /></el-icon>
+                                <span>个人中心</span>
+                            </template>
+                            <el-menu-item-group>
+                                <el-menu-item index="/my">个人信息</el-menu-item>
+                                <el-menu-item index="/used">使用情况</el-menu-item>
+                            </el-menu-item-group>
+                        </el-sub-menu>
+                    </el-menu>
+                </el-aside>
+
+                <el-main>
+                    <el-header style="font-size: larger;">
+                        <div style="display: flex; width: 100%;">
+                            <span style="display: flex; justify-content: center; width: 50%;">
+                                {{ thisTimeState }}
+                            </span>
+
+                            <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
+                                <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
+                                    <el-icon><FullScreen /></el-icon>
+                                </span>
+                                <el-avatar>{{ userStore.username || 'user' }}</el-avatar>
+                            </span>      
+                        </div>
+                    </el-header>
+
+                    <div>
+                        外边框: <el-switch v-model="parentBorder" /> 
+                        内边框: <el-switch v-model="childBorder" /> 
+                        保持展开:<el-switch v-model="preserveExpanded" />
+
+                        <el-table :data="tableData" :border="parentBorder">
+                          <el-table-column type="expand">
+                            <template #default="{ row }">
+                              <div style="padding: 20px;">
+                                <p><strong>Detail Content:</strong> {{ row.content }}</p>
+                                <p><strong>Created:</strong> {{ row.createdAt }}</p>
+                                <p><strong>Updated:</strong> {{ row.updatedAt }}</p>
+                              </div>
+                            </template>
+                          </el-table-column>
+                          <el-table-column prop="username" label="Username" />
+                          <el-table-column prop="content" label="Content Summary" :formatter="contentSummary" />
+                        </el-table>
+                    </div>
+                </el-main>
+            </el-container>
         </el-container>
-
-      </el-container>
     </div>
 </template>
   
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { getTimeState } from '@/utils/index'
-import { ElMessage } from 'element-plus'
-import router from '@/router'
+import { useUserStore } from '@/stores/modules/user'
+import { reqRecordGet } from '@/api/user/login'
+import { type userRecordResponseData } from '@/api/user/login/type'
 
-  const isCollapse = ref(false)
-  const handleOpen = (key: string, keyPath: string[]) => {
+const isCollapse = ref(false)
+const handleOpen = (key: string, keyPath: string[]) => {
     console.log(key, keyPath)
-  }
-  const handleClose = (key: string, keyPath: string[]) => {
+}
+const handleClose = (key: string, keyPath: string[]) => {
     console.log(key, keyPath)
-  }
+}
 
-  /*时间问候*/
+/*时间问候*/
 const timeState = getTimeState()
 const thisTimeState = ref('')
 onMounted(() => {
-  thisTimeState.value = timeState || ''
-  console.log(thisTimeState.value)
+    thisTimeState.value = timeState || ''
+    console.log(thisTimeState.value)
 })
 
+/*网页全屏*/
+const handleFullscreen = () => {
+    document.documentElement.requestFullscreen()
+}
+
+/*获取用户记录信息 */
+const userStore = useUserStore()
+const userId = userStore.userId
+const tableData = ref<Array<{
+    username: string
+    content: string
+    createdAt: string
+    updatedAt: string
+}>>([])
+
+onMounted(async () => {
+  try {
+    const receiveInfo = await reqRecordGet(userId)
+    if(receiveInfo.code === 200) {
+      tableData.value = receiveInfo.data.flatMap((session: { 文本对话: any[] }) => 
+        session.文本对话.map((conversation: { username: any; content: any; createdAt: any; updatedAt: any }) => ({
+          username: conversation.username,
+          content: conversation.content,
+          createdAt: conversation.createdAt,
+          updatedAt: conversation.updatedAt
+        }))
+    )
+    } else {
+      console.error('Failed to fetch user records:', receiveInfo.msg)
+    }
+  } catch (error) {
+    console.error('Failed to fetch user record:', error)
+  }
+})
+const contentSummary = (row: { content: string }) => {
+    return row.content.length > 50 ? row.content.slice(0, 50) + '...' : row.content
+}
 
+const parentBorder = ref(false)
+const childBorder = ref(false)
+const preserveExpanded = ref(false)
 </script>
 
 <style>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  min-height: 400px;
+    width: 200px;
+    min-height: 400px;
 }
 .el-menu-item-group__title {
     height: 0;
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index cb35886..85ab0ef 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,37 +1,71 @@
 <template>
-    <div class="placeHolder" style="display: flex; height: 100vh; width: 100%; align-items: center; justify-items: center;">
-        <div class="imgPlaceHolder" style="display: flex; width: 500px; height: 50%; background-color: pink; border-radius: 10px; align-items: center; justify-content: center; justify-items: center; margin-left: 15%;">
-          <img src="@/assets/register.png" alt="register" style="display: flex; width: 98%; height: 98%; border-radius: 10px; align-items: center; justify-content: center; justify-items: center;"/>
+    <div class="register-container">
+        <div class="register-illustration">
+            <img src="@/assets/register.png" alt="register illustration" class="illustration-img"/>
         </div>
-        <div class="formPlaceHolder" style="display: flex; width: 500px; margin-right: 15%;">
+        <div class="register-form-container">
+            <div class="form-header">
+                <h2>创建账号</h2>
+                <p>请填写您的注册信息</p>
+            </div>
             <el-form
                 ref="ruleFormRef"
-                style="max-width: 600px"
+                class="register-form"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="auto"
+                @keyup.enter="registerHandler"
             >
                 <el-form-item label="用户名" prop="name">
-                <el-input v-model="ruleForm.name"/>
+                    <el-input 
+                        v-model="ruleForm.name" 
+                        placeholder="3-16位字符"
+                        :prefix-icon="User"
+                    />
                 </el-form-item>
 
                 <el-form-item label="邮箱" prop="email">
-                <el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
+                    <el-input 
+                        v-model="ruleForm.email" 
+                        type="email" 
+                        placeholder="请输入有效邮箱"
+                        :prefix-icon="Message"
+                    />
                 </el-form-item>
 
                 <el-form-item label="密码" prop="password">
-                <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password/>
+                    <el-input 
+                        v-model="ruleForm.password" 
+                        type="password" 
+                        show-password
+                        placeholder="6-16位密码"
+                        :prefix-icon="Lock"
+                    />
                 </el-form-item>
 
                 <el-form-item label="确认密码" prop="passwordConfirm">
-                <el-input v-model="ruleForm.passwordConfirm" type="password" autocomplete="off" show-password/>
+                    <el-input 
+                        v-model="ruleForm.passwordConfirm" 
+                        type="password" 
+                        show-password
+                        placeholder="请再次输入密码"
+                        :prefix-icon="Lock"
+                    />
                 </el-form-item>
 
-                <div style="display: flex; margin-top: 8px; justify-content: center;">
-                  <el-button color="purple" type="primary"  plain round @click="registerHandler"> <div>注册</div> </el-button>
-                  <el-text tag="ins" shadow="hover" @click="loginHandler">已有账号？点击登录</el-text>
+                <div class="action-buttons">
+                    <el-button 
+                        class="register-btn"
+                        :loading="isRegistering"
+                        @click="registerHandler"
+                    >
+                        注 册
+                    </el-button>
+                    <div class="form-footer">
+                        <el-text tag="span" class="footer-text">已有账号？</el-text>
+                        <el-text tag="ins" class="login-link" @click="loginHandler">立即登录</el-text>
+                    </div>
                 </div>            
-
             </el-form>
         </div>
     </div>
@@ -39,12 +73,11 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
-import { RowAlign, type FormInstance, type FormRules } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { User, Lock, Message } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/modules/user'
 import { useRouter } from 'vue-router'
-import axios from 'axios'
-import request from '@/utils/request'
-import type { loginForm, userResponseData } from '@/api/user/type'
-import { reqRegiter } from '@/api/user'
+import type { registerForm } from '@/api/user/register/type'
 
 interface RuleForm {
   name: string
@@ -60,97 +93,229 @@ const ruleForm = reactive<RuleForm>({
   password: '',
   passwordConfirm: '',
 })
+const isRegistering = ref(false)
+const router = useRouter()
+const userStore = useUserStore()
 
-const validatePassword = (rule: any, value: string, callback: (arg0: Error | undefined) => void) => {
+const validatePassword = (rule: any, value: string, callback: any) => {
   if (value === '') {
-    callback(new Error('请确认密码'));
+    callback(new Error('请确认密码'))
   } else if (value !== ruleForm.password) {
-    callback(new Error('两次输入的密码不一致'));
+    callback(new Error('两次输入的密码不一致'))
   } else {
-    callback(undefined);
+    callback()
   }
 }
 
 const rules = reactive<FormRules<RuleForm>>({
   name: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    { min: 3, max: 16, message: '长度3-16个字符', trigger: 'blur' },
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 16, message: 'Length should be 6 to 16', trigger: 'blur' },
+    { min: 6, max: 16, message: '长度6-16个字符', trigger: 'blur' },
   ],
   passwordConfirm: [
     { validator: validatePassword, trigger: 'blur' },
   ],
   email: [
     { required: true, message: '请输入邮箱', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
   ],
-
 })
 
-const router = useRouter()
 const loginHandler = () => {
   router.push('/login')
 }
+
 const registerHandler = async () => {
-  if (!ruleFormRef.value) return
+  try {
+    await ruleFormRef.value?.validate()
+    isRegistering.value = true
 
-  // 表单验证
-  await ruleFormRef.value.validate((valid) => {
-    if (!valid) {
-      console.log('验证失败');
+    const registerForm :registerForm = {
+      username: ruleForm.name,
+      password: ruleForm.password,
+      email: ruleForm.email
     }
-  })
+    const flag =  await userStore.userRegister(registerForm)
+    if(flag) router.push('/login')
+    
+  } catch (error) {
+    console.error('注册失败:', error)
+  } finally {
+    isRegistering.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.register-container {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+  gap: 60px;
+}
 
-  // 提交注册请求
-  const registerData: loginForm = {
-    username: ruleForm.name,
-    password: ruleForm.password,
-    email: ruleForm.email,
+.register-illustration {
+  width: 500px;
+  height: 500px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
   }
-  try {
-    const response: userResponseData =  await reqRegiter(registerData);
-    if (response) {
-          if (response.code === 200) {
-            alert('注册成功，请登录');
-            router.push('/login');
-          } else {
-            alert(response.message);
-          }
-        } else {
-          console.error('未收到有效的响应');
-          alert('注册失败，请重试');
-        }
-  } catch (error) {
-      console.error('注册失败:', error);
-      alert('注册失败，请重试');
+}
+
+.illustration-img {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.register-form-container {
+  width: 420px;
+  padding: 40px;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+  }
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 30px;
+  
+  h2 {
+    color: #303133;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  
+  p {
+    color: #909399;
+    font-size: 14px;
+  }
+}
+
+.register-form {
+  width: 100%;
+  
+  :deep(.el-form-item__label) {
+    color: #606266;
+    font-weight: 500;
+  }
+  
+  :deep(.el-input__wrapper) {
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px #dcdfe6;
+    transition: all 0.3s;
+    
+    &:hover {
+      box-shadow: 0 0 0 1px #c0c4cc;
+    }
+    
+    &.is-focus {
+      box-shadow: 0 0 0 1px #7c3aed !important;
     }
-        
+  }
 }
-</script>
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.register-btn {
+  width: 100%;
+  height: 44px;
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+  border: none;
+  color: white;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s;
   
-<style scoped>
-.imgPlaceHolder {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-.formPlaceHolder {
-  margin-left: 2px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
+  &:hover {
+    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.form-footer {
   display: flex;
-  align-content: center;
+  align-items: center;
   justify-content: center;
-  height: 50%;
-  background-color: rgb(255, 213, 220);
+  gap: 8px;
+}
+
+.footer-text {
+  color: #909399;
+  font-size: 14px;
 }
-.placeHolder {
-  background-color: bisque;
+
+.login-link {
+  color: #7c3aed;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.3s;
+  
+  &:hover {
+    color: #6d28d9;
+    text-decoration: underline;
+  }
 }
-.el-form {
-  align-content: center;
+
+@media (max-width: 992px) {
+  .register-container {
+    flex-direction: column;
+    gap: 40px;
+    padding: 40px 20px;
+  }
+  
+  .register-illustration {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    aspect-ratio: 1/1;
+  }
+  
+  .register-form-container {
+    width: 100%;
+    max-width: 400px;
+  }
+}
+
+@media (max-width: 576px) {
+  .register-form-container {
+    padding: 30px 20px;
+  }
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/table/index.vue b/src/views/table/index.vue
index 184f539..ae91922 100644
--- a/src/views/table/index.vue
+++ b/src/views/table/index.vue
@@ -1,8 +1,6 @@
 <template>
     <div class="common-layout" style="display: flex; height: 100vh; width: 100%;">
-        
       <el-container>
-
         <el-container>
           <el-aside width="20%">
             <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
@@ -44,122 +42,110 @@
                         <el-menu-item index="/used">使用情况</el-menu-item>
                     </el-menu-item-group>
                 </el-sub-menu>
-
             </el-menu>
-
           </el-aside>
 
           <el-main>
             <el-header style="font-size: larger;">
                 <div style="display: flex; width: 100%;">
                     <span style="display: flex; justify-content: center; width: 50%;">
-                        {{ thisTimeState }}
+                        {{ timeGreeting }}
                     </span>
-
                     <span style="display: flex; width: 50%; justify-items: right; justify-content: right;">
-                        <span style="display: flex; margin-right: 8%;">
+                        <span @click="handleFullscreen" style="display: flex; margin-right: 8%;">
                             <el-icon><FullScreen /></el-icon>
                         </span>
-                        <el-avatar src=""> user </el-avatar>
+                        <el-avatar src=""> {{ userStore.username || 'user' }} </el-avatar>
                     </span>      
                 </div>
             </el-header>
-
             
-            <div ref="chartRef" style="display: flex; width: 100%; height: 90%; justify-content: left; margin-left: 0; margin-bottom: 0; margin-top: 3%;"></div>
-
+            <div class="image-container">
+              <div v-if="userStore.displayedImage" class="image-wrapper">
+                <img 
+                  :src="userStore.displayedImage" 
+                  alt="Generated Image" 
+                  class="generated-image"
+                />
+                <div class="image-actions" v-if="userStore.displayedImage">
+                  <el-button 
+                    type="primary" 
+                    @click="handleDownload"
+                  >
+                    下载图片
+                  </el-button>
+                </div>
+              </div>
+
+              <div v-else class="empty-state">
+                <el-empty description="暂无生成的图片" />
+                <p style="display: flex; align-content: center; justify-content: center;">
+                  请前往AI生成页面创建您的第一张图片
+                </p>
+              </div>
+            </div>
           </el-main>
         </el-container>
-
       </el-container>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { getTimeState } from '@/utils/index'
-import * as echarts from 'echarts'
+import { useUserStore } from '@/stores/modules/user'
+import { ElMessage } from 'element-plus'
+import { ChatRound, Memo, UserFilled, FullScreen } from '@element-plus/icons-vue'
+
+// 侧边栏状态
+const isCollapse = ref(false)
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log('Menu opened:', key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log('Menu closed:', key, keyPath)
+}
 
-  const isCollapse = ref(false)
-  const handleOpen = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath)
-  }
-  const handleClose = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath)
-  }
-
-  /*时间问候*/
-const timeState = getTimeState()
-const thisTimeState = ref('')
-onMounted(() => {
-  thisTimeState.value = timeState || ''
-  console.log(thisTimeState.value)
-})
+// 时间问候语
+const timeGreeting = computed(() => getTimeState() || '')
 
+// 全屏功能
+const handleFullscreen = () => {
+  document.documentElement.requestFullscreen().catch(err => {
+    ElMessage.warning(`全屏模式失败: ${err.message}`)
+  })
+}
 
-const chartRef = ref(null);
+// 使用用户存储
+const userStore = useUserStore()
 
+// 初始化用户状态
 onMounted(() => {
-    nextTick(() => {
-        if (chartRef.value) {
-            try {
-                const myChart = echarts.init(chartRef.value);
-                const option = {
-                    toolbox: {
-                        show: true,
-                        feature: {
-                            dataView: {
-                                show: true,
-                                readOnly: true,
-                                optionToContent: function (opt: any) {
-                                    const axisData = opt.xAxis[0].data;
-                                    const series = opt.series;
-                                    let table = '<table style="width:100%;text-align:center; margin: 0 auto; border-collapse: collapse; border: 1px solid #000;"><tbody><tr style="border: 1px solid #000; align-items: center; align-content: center;">' + '<td style="border: 1px solid #000;">项目</td>';
-                                    series.forEach(function (item: any) {
-                                        table += '<td style="border: 1px solid #000;">' + item.name + '</td>';
-                                    });
-                                    table += '</tr>';
-
-                                    for (let i = 0, l = axisData.length; i < l; i++) {
-                                        table += '<tr style="border: 1px solid #000;">'
-                                            + '<td style="border: 1px solid #000;">' + axisData[i] + '</td>';
-                                        for (let j = 0; j < series.length; j++) {
-                                            table += '<td style="border: 1px solid #000;">' + series[j].data[i] + '</td>';
-                                        }
-                                        table += '</tr>';
-                                    }
-                                    table += '</tbody></table>';
-                                    return table;
-                                }
-                            },
-                            saveAsImage: {
-                                show: true
-                            }
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['运动', '练习口语', '高数', '概统', '吃饭', '游戏', '网课']
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series: [
-                        {
-                            name: '时间',
-                            type: 'bar',
-                            data: [1, 0.5, 3, 2, 1, 0.5, 1.5]
-                        }
-                    ]
-                };
+  userStore.initUserState()
+  
+  // 如果没有当前图片但有历史图片，显示最新的一张
+  if (!userStore.currentImage && userStore.hasGeneratedImages) {
+    userStore.setCurrentImage(userStore.generatedImages[0].ossUrl)
+  }
+})
 
-                myChart.setOption(option);
-            } catch (error) {
-                console.error('初始化 ECharts 时出错:', error);
-            }
-        }
-    });
-});
+// 下载图片处理
+const handleDownload = () => {
+  if (!userStore.displayedImage) return
+  
+  try {
+    const link = document.createElement('a')
+    link.href = userStore.displayedImage
+    link.download = `ai-image-${new Date().getTime()}.jpg`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    ElMessage.success('图片下载成功')
+  } catch (error) {
+    ElMessage.error('图片下载失败')
+    console.error('下载图片失败:', error)
+  }
+}
 </script>
 
 <style>
@@ -168,13 +154,33 @@ onMounted(() => {
   min-height: 400px;
 }
 .el-menu-item-group__title {
-    height: 0;
-    width: 0;
+  height: 0;
+  width: 0;
 }
 .el-main {
-    margin-top: 0;
-    padding-top: 0.8%;
-    margin-left: 0;
-    padding-left: 0;
+  margin-top: 0;
+  padding-top: 0.8%;
+  margin-left: 0;
+  padding-left: 0;
+}
+.image-container {
+  margin-top: 20px;
+}
+.generated-image {
+  max-width: 100%;
+  max-height: 70vh;
+  display: block;
+  margin: 0 auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.image-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+.empty-state {
+  text-align: center;
+  margin-top: 50px;
 }
 </style>
\ No newline at end of file