From a188dd3734bbee9669fcdfdb755b9b541be04ffc Mon Sep 17 00:00:00 2001
From: kevin <kevin@lmve.net>
Date: Wed, 26 Nov 2025 21:15:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=94=A8=E6=88=B7=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/defConfig/errorCodes.json             |    4 +-
 backend/routers/apiUsers.go                   |  186 ++-
 frontent/ops_vue_js/package-lock.json         |  923 ++++++++++++
 frontent/ops_vue_js/package.json              |    1 +
 .../ops_vue_js/src/components/HeardMain.vue   |    4 +-
 .../ops_vue_js/src/components/datePicker.vue  |   11 +-
 .../src/components/imageCropper.vue           | 1301 +++++++++--------
 frontent/ops_vue_js/src/i18n/en.json          |    3 +-
 frontent/ops_vue_js/src/i18n/zh-CN.json       |    3 +-
 frontent/ops_vue_js/src/my_network_func.js    |    8 +-
 frontent/ops_vue_js/src/stores/user.js        |   38 +-
 .../ops_vue_js/src/views/settings/account.vue |   74 +-
 12 files changed, 1852 insertions(+), 704 deletions(-)

diff --git a/backend/defConfig/errorCodes.json b/backend/defConfig/errorCodes.json
index 93bcb71..eb8c688 100644
--- a/backend/defConfig/errorCodes.json
+++ b/backend/defConfig/errorCodes.json
@@ -7,7 +7,7 @@
     "userNameNoFund":-41,
     "userPassIncorrect":-42,
     "userCookieError":-44,
-    "userCookieNotFund":-45,
-    "userCookieExpired":-46
+    "userCookieNotFund":-44,
+    "userCookieExpired":-44
 
 }
\ No newline at end of file
diff --git a/backend/routers/apiUsers.go b/backend/routers/apiUsers.go
index e8cfa9e..4e5d476 100644
--- a/backend/routers/apiUsers.go
+++ b/backend/routers/apiUsers.go
@@ -65,6 +65,51 @@ type From_user_login struct {
 	Remember bool   `json:"remember"`
 }
 
+type From_user_updateinfo struct {
+	Username string `json:"username"`
+	Remark   string `json:"remark"`
+	Birthday string `json:"birthday"`
+}
+
+func AuthenticationAuthority(ctx *gin.Context) (bool, models.TabUser_, map[string]interface{}) {
+	var user models.TabUser_
+
+	data, cookieval := SeparateData(ctx)
+	//fmt.Println("cookieis" + cookieval)
+	if cookieval != "" {
+		cookie := models.TabCookie_{
+			Value: cookieval,
+		}
+		if models.DB.Where(&cookie).First(&cookie).Error == nil {
+			//找到cookie，验证cookie有效性，以及更新cookie
+			if models.CheckCookiesAndUpdate(&cookie) {
+				//cookie有效
+				//载入user
+				user := models.TabUser_{
+					ID: cookie.UserID,
+				}
+				models.DB.Where(&user).First(&user)
+
+				return true, user, data
+
+			} else {
+				ReturnJson(ctx, "userCookieExpired", nil)
+				return false, user, nil
+			}
+
+		} else {
+			ReturnJson(ctx, "userCookieNotFund", nil)
+			return false, user, nil
+		}
+
+	} else {
+		ReturnJson(ctx, "userCookieError", nil)
+		return false, user, nil
+	}
+
+	//return false, user
+}
+
 func ApiUser(r *gin.RouterGroup) {
 
 	r.GET("/test", func(ctx *gin.Context) {
@@ -73,55 +118,120 @@ func ApiUser(r *gin.RouterGroup) {
 	r.POST("/test", func(ctx *gin.Context) {
 		ReturnJson(ctx, "apiOK", nil)
 	})
-	//通过cookie获取用户info
-	r.POST("/getinfo", func(ctx *gin.Context) {
-		_, cookieval := SeparateData(ctx)
-		//fmt.Println("cookieis" + cookieval)
-		if cookieval != "" {
-			cookie := models.TabCookie_{
-				Value: cookieval,
-			}
-			if models.DB.Where(&cookie).First(&cookie).Error == nil {
-				//找到cookie，验证cookie有效性，以及更新cookie
-				if models.CheckCookiesAndUpdate(&cookie) {
-					//cookie有效
-					//返回最新cookie
-					redata := map[string]interface{}{
-						"cookie": cookie,
-					}
-					//载入用户info
-					userInfo := models.TabFileInfo_{
-						UserID: cookie.UserID,
-					}
-					if models.DB.Where(&userInfo).First(&userInfo).Error == nil {
-						redata["userInfo"] = userInfo
+	//更新用户info
+	r.POST("/updateInfo", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var jsonData From_user_updateinfo
+
+			if err := mapstructure.Decode(data, &jsonData); err == nil {
+				// fmt.Println("updateinfo data is", jsonData)
+				// fmt.Println(user)
+				t, err := time.Parse("2006-01-02", jsonData.Birthday)
+				if err == nil {
+					var userinfo models.TabUserInfo_
+					userinfo.UserID = user.ID
+
+					var userinfoupdate models.TabUserInfo_
+					userinfoupdate.UserID = user.ID
+					userinfoupdate.CreatedAt = time.Now()
+					userinfoupdate.Username = jsonData.Username
+					userinfoupdate.Birthdate = t
+					userinfoupdate.FirstName = jsonData.Remark
+
+					//先查找是否有记录
+					if models.DB.Where(&userinfo).First(&userinfo).Error == nil {
+						//有记录，更新
+						models.DB.Model(&userinfo).Updates(&userinfoupdate)
 					} else {
-						redata["userInfo"] = nil
+						//无记录，创建
+						models.DB.Create(&userinfoupdate) // 传入指针
+
 					}
 
-					//载入user
-					user := models.TabUser_{
-						ID: cookie.UserID,
-					}
-					models.DB.Where(&user).First(&user)
-					user.Pass = ""
-					user.Salt = ""
-
-					redata["user"] = user
-
-					ReturnJson(ctx, "apiOK", redata)
+					ReturnJson(ctx, "apiOK", nil)
 
 				} else {
-					ReturnJson(ctx, "userCookieExpired", nil)
+					ReturnJson(ctx, "jsonErr", nil)
 				}
 
 			} else {
-				ReturnJson(ctx, "userCookieNotFund", nil)
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		}
+
+	})
+
+	//通过cookie获取用户info
+	r.POST("/getinfo", func(ctx *gin.Context) {
+		isAuth, user, _ := AuthenticationAuthority(ctx)
+		if isAuth {
+			//载入用户info
+			var userinfo models.TabUserInfo_
+			userinfo.UserID = user.ID
+			//fmt.Println(userInfo)
+			var redata map[string]interface{} = make(map[string]interface{})
+			if models.DB.Where(&userinfo).First(&userinfo).Error == nil {
+				redata["userInfo"] = userinfo
+			} else {
+				redata["userInfo"] = nil
 			}
 
-		} else {
-			ReturnJson(ctx, "userCookieError", nil)
+			user.Pass = ""
+			user.Salt = ""
+
+			redata["user"] = user
+
+			ReturnJson(ctx, "apiOK", redata)
+
 		}
+		// _, cookieval := SeparateData(ctx)
+		// //fmt.Println("cookieis" + cookieval)
+		// if cookieval != "" {
+		// 	cookie := models.TabCookie_{
+		// 		Value: cookieval,
+		// 	}
+		// 	if models.DB.Where(&cookie).First(&cookie).Error == nil {
+		// 		//找到cookie，验证cookie有效性，以及更新cookie
+		// 		if models.CheckCookiesAndUpdate(&cookie) {
+		// 			//cookie有效
+		// 			//返回最新cookie
+		// 			redata := map[string]interface{}{
+		// 				"cookie": cookie,
+		// 			}
+		// 			//载入用户info
+		// 			userInfo := models.TabFileInfo_{
+		// 				UserID: cookie.UserID,
+		// 			}
+		// 			if models.DB.Where(&userInfo).First(&userInfo).Error == nil {
+		// 				redata["userInfo"] = userInfo
+		// 			} else {
+		// 				redata["userInfo"] = nil
+		// 			}
+
+		// 			//载入user
+		// 			user := models.TabUser_{
+		// 				ID: cookie.UserID,
+		// 			}
+		// 			models.DB.Where(&user).First(&user)
+		// 			user.Pass = ""
+		// 			user.Salt = ""
+
+		// 			redata["user"] = user
+
+		// 			ReturnJson(ctx, "apiOK", redata)
+
+		// 		} else {
+		// 			ReturnJson(ctx, "userCookieExpired", nil)
+		// 		}
+
+		// 	} else {
+		// 		ReturnJson(ctx, "userCookieNotFund", nil)
+		// 	}
+
+		// } else {
+		// 	ReturnJson(ctx, "userCookieError", nil)
+		// }
 
 	})
 	//用户登陆
diff --git a/frontent/ops_vue_js/package-lock.json b/frontent/ops_vue_js/package-lock.json
index 60bce58..4577f73 100644
--- a/frontent/ops_vue_js/package-lock.json
+++ b/frontent/ops_vue_js/package-lock.json
@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
+        "sass-embedded": "^1.93.3",
         "vite": "^7.1.11",
         "vite-plugin-vue-devtools": "^8.0.3"
       },
@@ -485,6 +486,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.10.1.tgz",
+      "integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==",
+      "dev": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@cropper/element": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.1.0.tgz",
@@ -1140,6 +1148,316 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1846,6 +2164,20 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.27.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
@@ -1881,6 +2213,13 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/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.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -1931,6 +2270,30 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/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.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2051,6 +2414,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2215,6 +2592,20 @@
         }
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -2334,6 +2725,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -2379,6 +2780,13 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -2395,6 +2803,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -2414,6 +2847,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
@@ -2516,6 +2960,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2578,6 +3051,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -2738,6 +3219,21 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -2799,6 +3295,366 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/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/sass-embedded": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.93.3.tgz",
+      "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "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-all-unknown": "1.93.3",
+        "sass-embedded-android-arm": "1.93.3",
+        "sass-embedded-android-arm64": "1.93.3",
+        "sass-embedded-android-riscv64": "1.93.3",
+        "sass-embedded-android-x64": "1.93.3",
+        "sass-embedded-darwin-arm64": "1.93.3",
+        "sass-embedded-darwin-x64": "1.93.3",
+        "sass-embedded-linux-arm": "1.93.3",
+        "sass-embedded-linux-arm64": "1.93.3",
+        "sass-embedded-linux-musl-arm": "1.93.3",
+        "sass-embedded-linux-musl-arm64": "1.93.3",
+        "sass-embedded-linux-musl-riscv64": "1.93.3",
+        "sass-embedded-linux-musl-x64": "1.93.3",
+        "sass-embedded-linux-riscv64": "1.93.3",
+        "sass-embedded-linux-x64": "1.93.3",
+        "sass-embedded-unknown-all": "1.93.3",
+        "sass-embedded-win32-arm64": "1.93.3",
+        "sass-embedded-win32-x64": "1.93.3"
+      }
+    },
+    "node_modules/sass-embedded-all-unknown": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.3.tgz",
+      "integrity": "sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "sass": "1.93.3"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.3.tgz",
+      "integrity": "sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.3.tgz",
+      "integrity": "sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.3.tgz",
+      "integrity": "sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.3.tgz",
+      "integrity": "sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.3.tgz",
+      "integrity": "sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.3.tgz",
+      "integrity": "sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.3.tgz",
+      "integrity": "sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.3.tgz",
+      "integrity": "sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.3.tgz",
+      "integrity": "sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.3.tgz",
+      "integrity": "sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.3.tgz",
+      "integrity": "sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.3.tgz",
+      "integrity": "sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.3.tgz",
+      "integrity": "sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.3.tgz",
+      "integrity": "sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-unknown-all": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.3.tgz",
+      "integrity": "sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
+      ],
+      "dependencies": {
+        "sass": "1.93.3"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.3.tgz",
+      "integrity": "sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.93.3",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.3.tgz",
+      "integrity": "sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2854,6 +3710,45 @@
         "node": ">=16"
       }
     },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "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.npmjs.org/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.npmjs.org/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/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2871,6 +3766,20 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -2881,6 +3790,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/unplugin-utils": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
@@ -2929,6 +3845,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
diff --git a/frontent/ops_vue_js/package.json b/frontent/ops_vue_js/package.json
index fbb6f5f..ce82e3d 100644
--- a/frontent/ops_vue_js/package.json
+++ b/frontent/ops_vue_js/package.json
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "sass-embedded": "^1.93.3",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.3"
   }
diff --git a/frontent/ops_vue_js/src/components/HeardMain.vue b/frontent/ops_vue_js/src/components/HeardMain.vue
index bcfd566..02f7d49 100644
--- a/frontent/ops_vue_js/src/components/HeardMain.vue
+++ b/frontent/ops_vue_js/src/components/HeardMain.vue
@@ -184,9 +184,7 @@ onMounted(() => {
             >
               <img
                 :src="
-                  userStore.userInfo
-                    ? userStore.userInfo.AvatarPath
-                    : '/ava.svg'
+                  userStore.getUserAvatarPath()
                 "
                 alt=""
                 class="avatar avatar-sm"
diff --git a/frontent/ops_vue_js/src/components/datePicker.vue b/frontent/ops_vue_js/src/components/datePicker.vue
index 55cee8e..bc94f9d 100644
--- a/frontent/ops_vue_js/src/components/datePicker.vue
+++ b/frontent/ops_vue_js/src/components/datePicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch ,defineProps} from "vue";
 import Litepicker from "litepicker";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@@ -11,6 +11,12 @@ watch(locale, () => {
   picker?.setOptions({ lang: locale.value });
 });
 
+defineProps({
+  setdef: {
+    type: String,
+    default: "",
+  },
+})
 onMounted(() => {
   // @formatter:off
 
@@ -37,6 +43,7 @@ defineExpose({
 </script>
 
 <template>
+  
   <div class="input-icon">
     <span class="input-icon-addon"
       ><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
@@ -67,7 +74,7 @@ defineExpose({
       class="form-control"
       :placeholder="t('message.select_date')"
       ref="datepicker"
-      value=""
+      :value="setdef"
     />
   </div>
 </template>
diff --git a/frontent/ops_vue_js/src/components/imageCropper.vue b/frontent/ops_vue_js/src/components/imageCropper.vue
index 7a5ec28..b5bb163 100644
--- a/frontent/ops_vue_js/src/components/imageCropper.vue
+++ b/frontent/ops_vue_js/src/components/imageCropper.vue
@@ -1,760 +1,791 @@
 <template>
-  <div class="cropper-demo">
-    <div class="container">
-      <header>
-        <h1>CropperJS 组件演示</h1>
-        <p class="description">
-          此演示展示了CropperJS各个组件的功能和使用方法。您可以通过下方控制面板调整裁剪区域、查看预览效果，并了解每个组件的作用。
-        </p>
-      </header>
-      
-      <div class="demo-area">
-        <div class="cropper-container">
-          <h3>裁剪画布</h3>
-          <div class="canvas-wrapper">
-            <canvas 
-              ref="canvas" 
-              class="cropper-canvas"
-              @mousedown="onCanvasMouseDown"
-              @mousemove="onCanvasMouseMove"
-              @mouseup="onCanvasMouseUp"
-              @mouseleave="onCanvasMouseLeave"
-            ></canvas>
-          </div>
-          
-          <div class="viewer-container">
-            <div class="viewer-label">实时预览</div>
-            <canvas ref="previewCanvas" class="preview-viewer"></canvas>
-          </div>
-          
-          <div class="status-bar">
-            <div>选区位置: <span>{{ positionInfo }}</span></div>
-            <div>选区尺寸: <span>{{ sizeInfo }}</span></div>
-            <div>宽高比: <span>{{ ratioInfo }}</span></div>
-          </div>
+  <div class="avatar-cropper">
+    <!-- 上传区域 -->
+    <div v-if="!imageSrc" class="upload-area" @click="triggerFileInput">
+      <div class="upload-content">
+        <div class="upload-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
         </div>
-        
-        <div class="controls">
-          <h3>控制面板</h3>
-          
-          <div class="control-group">
-            <h4>选区操作</h4>
-            <div class="btn-group">
-              <button 
-                :class="{ active: interactionMode === 'move' }"
-                @click="setInteractionMode('move')"
+        <h3>点击上传图片</h3>
+        <p>支持 JPG、PNG 格式，建议尺寸 200×200 像素以上</p>
+      </div>
+      <input 
+        ref="fileInput"
+        type="file" 
+        accept="image/*" 
+        @change="handleFileSelect"
+        style="display: none"
+      >
+    </div>
+
+    <!-- 裁剪区域 -->
+    <div v-else class="cropper-container">
+      <div class="cropper-header">
+        <h3>调整头像</h3>
+        <button class="btn-close" @click="reset">×</button>
+      </div>
+      
+      <div class="cropper-content">
+        <!-- 裁剪画布 -->
+        <div class="canvas-wrapper">
+            <div class="canvas-container" ref="canvasContainer">
+              <canvas ref="canvas" class="cropper-canvas"></canvas>
+              <div 
+                class="crop-box"
+                :style="cropBoxStyle"
+                @mousedown="startDrag"
+                @touchstart="startDrag"
               >
-                移动选区
-              </button>
-              <button 
-                :class="{ active: interactionMode === 'resize' }"
-                @click="setInteractionMode('resize')"
-              >
-                调整大小
-              </button>
-              <button @click="rotateSelection">旋转</button>
+                <div class="crop-box-handle" v-for="handle in handles" :key="handle.position"
+                  :class="`handle-${handle.position}`"
+                  @mousedown="startResize(handle.position, $event)"
+                  @touchstart="startResize(handle.position, $event)"
+                ></div>
+              </div>
             </div>
-          </div>
-          
-          <div class="control-group">
-            <h4>宽高比设置</h4>
-            <div class="btn-group">
-              <button 
-                v-for="ratio in aspectRatios" 
-                :key="ratio.value"
-                @click="setAspectRatio(ratio.value)"
-              >
-                {{ ratio.label }}
-              </button>
+        </div>
+
+        <!-- 预览区域 -->
+        <div class="preview-section">
+          <div class="preview-container">
+            <div class="preview-item">
+              <h4>圆形预览</h4>
+              <div class="preview-circle">
+                <img v-if="previewUrl" :src="previewUrl" alt="头像预览" class="preview-image">
+                <div v-else class="preview-placeholder">预览</div>
+              </div>
             </div>
-          </div>
-          
-          <div class="control-group">
-            <h4>遮罩设置</h4>
-            <div class="slider-container">
-              <label for="opacitySlider">遮罩透明度: <span>{{ shade.opacity }}</span></label>
-              <input 
-                type="range" 
-                id="opacitySlider" 
-                min="0" 
-                max="1" 
-                step="0.1" 
-                v-model="shade.opacity"
-              >
-            </div>
-            <div class="btn-group">
-              <button 
-                v-for="color in shadeColors" 
-                :key="color.value"
-                @click="setShadeColor(color.value)"
-              >
-                {{ color.label }}
-              </button>
-            </div>
-          </div>
-          
-          <div class="control-group">
-            <h4>十字准星</h4>
-            <div class="crosshair-controls">
-              <button @click="showCrosshair">显示准星</button>
-              <button @click="hideCrosshair">隐藏准星</button>
-              <button @click="moveCrosshair">移动准星</button>
-            </div>
-          </div>
-          
-          <div class="control-group">
-            <h4>其他操作</h4>
-            <div class="btn-group">
-              <button @click="resetSelection">重置选区</button>
-              <button @click="cropImage">裁剪图片</button>
-              <button @click="downloadResult">下载结果</button>
+            <div class="preview-item">
+              <h4>方形预览</h4>
+              <div class="preview-square">
+                <img v-if="previewUrl" :src="previewUrl" alt="头像预览" class="preview-image">
+                <div v-else class="preview-placeholder">预览</div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      
-      <div class="component-info">
-        <h3>组件说明</h3>
-        <div class="info-grid">
-          <div class="info-card" v-for="component in components" :key="component.name">
-            <h4>{{ component.name }}</h4>
-            <p>{{ component.description }}</p>
-          </div>
+
+      <!-- 控制面板 -->
+      <div class="control-panel">
+        <div class="control-group">
+          <label>缩放: {{ Math.round(scale * 100) }}%</label>
+          <input 
+            type="range" 
+            min="10" 
+            max="200" 
+            step="1" 
+            v-model.number="scale"
+            class="zoom-slider"
+          >
+        </div>
+
+        <div class="control-group">
+          <label>旋转: {{ rotation }}°</label>
+          <input 
+            type="range" 
+            min="0" 
+            max="360" 
+            step="1" 
+            v-model.number="rotation"
+            class="rotate-slider"
+          >
+        </div>
+
+        <div class="button-group">
+          <button class="btn-secondary" @click="reset">重新选择</button>
+          <button class="btn-primary" @click="cropAvatar">确认裁剪</button>
         </div>
       </div>
     </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+      <p>处理中...</p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
-// Refs
+// 响应式数据
+const fileInput = ref(null)
 const canvas = ref(null)
-const previewCanvas = ref(null)
+const canvasContainer = ref(null)
+const imageSrc = ref('')
+const previewUrl = ref('')
+const loading = ref(false)
 
-// 响应式状态
-const selection = reactive({
-  x: 100,
-  y: 100,
-  width: 300,
-  height: 200,
-  aspectRatio: 0,
-  isMoving: false,
+// 裁剪状态
+const state = reactive({
+  scale: 100,
+  rotation: 0,
+  position: { x: 0, y: 0 },
+  cropSize: 200,
+  isDragging: false,
   isResizing: false,
-  startX: 0,
-  startY: 0
+  resizeDirection: null,
+  dragStart: { x: 0, y: 0 }
 })
 
-const shade = reactive({
-  opacity: 0.5,
-  color: '#000000'
-})
-
-const crosshair = reactive({
-  visible: false,
-  x: 200,
-  y: 150
-})
-
-const interactionMode = ref('move')
-const rotation = ref(0)
-
 // 计算属性
-const positionInfo = computed(() => {
-  return `x: ${selection.x}, y: ${selection.y}`
-})
-
-const sizeInfo = computed(() => {
-  return `${selection.width} × ${selection.height}`
-})
-
-const ratioInfo = computed(() => {
-  const ratio = (selection.width / selection.height).toFixed(2)
-  return selection.aspectRatio ? 
-    `${selection.aspectRatio}:1` : 
-    `${ratio}:1 (自由)`
-})
-
-// 常量数据
-const aspectRatios = [
-  { value: 0, label: '自由' },
-  { value: 1, label: '1:1 (方形)' },
-  { value: 1.777, label: '16:9 (宽屏)' },
-  { value: 0.75, label: '3:4 (竖屏)' }
-]
-
-const shadeColors = [
-  { value: '#000000', label: '黑色遮罩' },
-  { value: '#3498db', label: '蓝色遮罩' },
-  { value: '#e74c3c', label: '红色遮罩' }
-]
-
-const components = [
-  { 
-    name: 'CropperImage', 
-    description: '承载原始图片的基础组件，负责加载和显示图片，支持跨域处理和图片大小限制。' 
-  },
-  { 
-    name: 'CropperShade', 
-    description: '创建遮罩层，突出显示裁剪区域，可调整透明度和颜色。' 
-  },
-  { 
-    name: 'CropperHandle', 
-    description: '裁剪框的控制手柄，用于调整选区大小和旋转，支持八个方向的手柄。' 
-  },
-  { 
-    name: 'CropperCrosshair', 
-    description: '十字准星，用于精确定位，可显示/隐藏和移动到指定位置。' 
-  },
-  { 
-    name: 'CropperSelection', 
-    description: '管理裁剪选区，包括位置、大小和约束条件，支持宽高比锁定。' 
-  },
-  { 
-    name: 'CropperCanvas', 
-    description: '画布容器，承载所有裁剪组件，提供绘制上下文和事件处理。' 
-  },
-  { 
-    name: 'CropperViewer', 
-    description: '实时预览裁剪结果的视图，同步显示裁剪区域的内容。' 
+const scale = computed({
+  get: () => state.scale,
+  set: (value) => {
+    state.scale = Math.max(10, Math.min(200, value))
+    redrawCanvas()
   }
-]
+})
 
-// 图片引用
-const img = new Image()
-img.src = 'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
+const rotation = computed({
+  get: () => state.rotation,
+  set: (value) => {
+    state.rotation = value % 360
+    redrawCanvas()
+  }
+})
+
+const cropBoxStyle = computed(() => ({
+  width: `${state.cropSize}px`,
+  height: `${state.cropSize}px`,
+  left: `${state.position.x}px`,
+  top: `${state.position.y}px`,
+  transform: `rotate(${state.rotation}deg)`
+}))
+
+// 控制点配置
+const handles = [
+  { position: 'nw' }, { position: 'n' }, { position: 'ne' },
+  { position: 'w' }, { position: 'e' },
+  { position: 'sw' }, { position: 's' }, { position: 'se' }
+]
 
 // 方法
-const setCanvasSize = () => {
-  if (!canvas.value) return
-  
-  const container = canvas.value.parentElement
-  canvas.value.width = container.clientWidth
-  canvas.value.height = container.clientHeight
-  drawCanvas()
+const triggerFileInput = () => {
+  fileInput.value?.click()
 }
 
-const drawCanvas = () => {
-  if (!canvas.value || !previewCanvas.value) return
+const handleFileSelect = (event) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (!file.type.startsWith('image/')) {
+    alert('请选择图片文件')
+    return
+  }
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    imageSrc.value = e.target.result
+    nextTick(() => {
+      initializeCropper()
+    })
+  }
+  reader.readAsDataURL(file)
+}
+
+const initializeCropper = () => {
+  if (!canvas.value || !canvasContainer.value) return
+
+  const containerRect = canvasContainer.value.getBoundingClientRect()
+  const containerSize = Math.min(containerRect.width, containerRect.height) - 40
   
+  // 设置画布尺寸
+  canvas.value.width = containerSize
+  canvas.value.height = containerSize
+  
+  // 初始化裁剪框位置
+  state.cropSize = Math.min(containerSize * 0.6, 300)
+  state.position.x = (containerSize - state.cropSize) / 2
+  state.position.y = (containerSize - state.cropSize) / 2
+  state.scale = 100
+  state.rotation = 0
+
+  redrawCanvas()
+}
+
+const redrawCanvas = () => {
+  if (!canvas.value || !imageSrc.value) return
+
   const ctx = canvas.value.getContext('2d')
-  const previewCtx = previewCanvas.value.getContext('2d')
+  const size = canvas.value.width
   
   // 清空画布
-  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
+  ctx.clearRect(0, 0, size, size)
   
   // 绘制背景
-  ctx.fillStyle = '#ecf0f1'
-  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height)
+  ctx.fillStyle = '#f5f5f5'
+  ctx.fillRect(0, 0, size, size)
   
-  // 绘制图片
-  if (img.complete) {
-    const scale = Math.min(
-      canvas.value.width / img.width, 
-      canvas.value.height / img.height
+  // 创建离屏canvas用于图片变换
+  const offscreen = document.createElement('canvas')
+  const offscreenCtx = offscreen.getContext('2d')
+  
+  const img = new Image()
+  img.onload = () => {
+    // 计算缩放后的尺寸
+    const scaleFactor = state.scale / 100
+    const imgWidth = img.width * scaleFactor
+    const imgHeight = img.height * scaleFactor
+    
+    // 设置离屏canvas尺寸
+    offscreen.width = Math.max(imgWidth, imgHeight) * 2
+    offscreen.height = Math.max(imgWidth, imgHeight) * 2
+    
+    // 在离屏canvas上绘制并旋转图片
+    offscreenCtx.save()
+    offscreenCtx.translate(offscreen.width / 2, offscreen.height / 2)
+    offscreenCtx.rotate(state.rotation * Math.PI / 180)
+    offscreenCtx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight)
+    offscreenCtx.restore()
+    
+    // 在主画布上绘制
+    ctx.drawImage(offscreen, 
+      (size - offscreen.width) / 2, 
+      (size - offscreen.height) / 2
     )
-    const x = (canvas.value.width - img.width * scale) / 2
-    const y = (canvas.value.height - img.height * scale) / 2
     
-    ctx.save()
-    if (rotation.value !== 0) {
-      ctx.translate(canvas.value.width / 2, canvas.value.height / 2)
-      ctx.rotate(rotation.value * Math.PI / 180)
-      ctx.translate(-canvas.value.width / 2, -canvas.value.height / 2)
-    }
-    ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
-    ctx.restore()
+    updatePreview()
   }
-  
-  // 绘制遮罩
-  ctx.fillStyle = shade.color
-  ctx.globalAlpha = shade.opacity
-  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height)
-  
-  // 清除选区区域的遮罩
-  ctx.globalCompositeOperation = 'destination-out'
-  ctx.fillRect(
-    selection.x, 
-    selection.y, 
-    selection.width, 
-    selection.height
-  )
-  ctx.globalCompositeOperation = 'source-over'
-  ctx.globalAlpha = 1
-  
-  // 绘制选区边框
-  ctx.strokeStyle = '#3498db'
-  ctx.lineWidth = 2
-  ctx.strokeRect(
-    selection.x, 
-    selection.y, 
-    selection.width, 
-    selection.height
-  )
-  
-  // 绘制控制手柄
-  const handleSize = 8
-  ctx.fillStyle = '#3498db'
-  
-  // 四角手柄
-  ctx.fillRect(
-    selection.x - handleSize/2, 
-    selection.y - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x + selection.width - handleSize/2, 
-    selection.y - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x - handleSize/2, 
-    selection.y + selection.height - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x + selection.width - handleSize/2, 
-    selection.y + selection.height - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  
-  // 四边手柄
-  ctx.fillRect(
-    selection.x + selection.width/2 - handleSize/2, 
-    selection.y - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x + selection.width/2 - handleSize/2, 
-    selection.y + selection.height - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x - handleSize/2, 
-    selection.y + selection.height/2 - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  ctx.fillRect(
-    selection.x + selection.width - handleSize/2, 
-    selection.y + selection.height/2 - handleSize/2, 
-    handleSize, 
-    handleSize
-  )
-  
-  // 绘制十字准星
-  if (crosshair.visible) {
-    ctx.strokeStyle = '#e74c3c'
-    ctx.lineWidth = 1
-    ctx.setLineDash([5, 5])
-    
-    // 横线
-    ctx.beginPath()
-    ctx.moveTo(0, crosshair.y)
-    ctx.lineTo(canvas.value.width, crosshair.y)
-    ctx.stroke()
-    
-    // 竖线
-    ctx.beginPath()
-    ctx.moveTo(crosshair.x, 0)
-    ctx.lineTo(crosshair.x, canvas.value.height)
-    ctx.stroke()
-    
-    ctx.setLineDash([])
-    
-    // 中心点
-    ctx.fillStyle = '#e74c3c'
-    ctx.beginPath()
-    ctx.arc(crosshair.x, crosshair.y, 4, 0, Math.PI * 2)
-    ctx.fill()
-  }
-  
-  // 更新预览
-  updatePreview()
+  img.src = imageSrc.value
 }
 
 const updatePreview = () => {
-  if (!previewCanvas.value || !canvas.value) return
-  
-  const previewCtx = previewCanvas.value.getContext('2d')
-  previewCtx.clearRect(0, 0, previewCanvas.value.width, previewCanvas.value.height)
-  
-  if (img.complete) {
-    const scale = Math.min(
-      canvas.value.width / img.width, 
-      canvas.value.height / img.height
-    )
-    const imgX = (canvas.value.width - img.width * scale) / 2
-    const imgY = (canvas.value.height - img.height * scale) / 2
-    
-    // 计算源图像中的对应区域
-    const srcX = (selection.x - imgX) / scale
-    const srcY = (selection.y - imgY) / scale
-    const srcWidth = selection.width / scale
-    const srcHeight = selection.height / scale
-    
-    // 绘制到预览画布
-    previewCtx.drawImage(
-      img, 
-      srcX, srcY, srcWidth, srcHeight,
-      0, 0, previewCanvas.value.width, previewCanvas.value.height
-    )
-    
-    // 绘制预览边框
-    previewCtx.strokeStyle = '#3498db'
-    previewCtx.lineWidth = 2
-    previewCtx.strokeRect(0, 0, previewCanvas.value.width, previewCanvas.value.height)
-  }
-}
-
-const setAspectRatio = (ratio) => {
-  selection.aspectRatio = ratio
-  if (ratio > 0) {
-    selection.height = selection.width / ratio
-  }
-  drawCanvas()
-}
-
-const setShadeColor = (color) => {
-  shade.color = color
-  drawCanvas()
-}
-
-const setInteractionMode = (mode) => {
-  interactionMode.value = mode
-}
-
-const showCrosshair = () => {
-  crosshair.visible = true
-  drawCanvas()
-}
-
-const hideCrosshair = () => {
-  crosshair.visible = false
-  drawCanvas()
-}
-
-const moveCrosshair = () => {
-  crosshair.x = Math.random() * canvas.value.width
-  crosshair.y = Math.random() * canvas.value.height
-  drawCanvas()
-}
-
-const resetSelection = () => {
-  selection.x = 100
-  selection.y = 100
-  selection.width = 300
-  selection.height = 200
-  selection.aspectRatio = 0
-  rotation.value = 0
-  drawCanvas()
-}
-
-const rotateSelection = () => {
-  rotation.value = (rotation.value + 90) % 360
-  drawCanvas()
-}
-
-const cropImage = () => {
-  alert('裁剪功能已触发！在实际应用中，这里会执行裁剪操作。')
-}
-
-const downloadResult = () => {
-  alert('下载功能已触发！在实际应用中，这里会下载裁剪后的图片。')
-}
-
-// 画布事件处理
-const onCanvasMouseDown = (e) => {
   if (!canvas.value) return
+
+  const previewCanvas = document.createElement('canvas')
+  previewCanvas.width = state.cropSize
+  previewCanvas.height = state.cropSize
+  const previewCtx = previewCanvas.getContext('2d')
   
-  const rect = canvas.value.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
+  // 绘制裁剪区域到预览canvas
+  previewCtx.drawImage(
+    canvas.value,
+    state.position.x, state.position.y, state.cropSize, state.cropSize,
+    0, 0, state.cropSize, state.cropSize
+  )
   
-  // 检查是否点击在选区内
-  if (x >= selection.x && x <= selection.x + selection.width &&
-      y >= selection.y && y <= selection.y + selection.height) {
-    selection.isMoving = true
-    selection.startX = x - selection.x
-    selection.startY = y - selection.y
+  previewUrl.value = previewCanvas.toDataURL('image/png')
+}
+
+const startDrag = (e) => {
+  console.log('startDrag', e)
+  e.preventDefault()
+  state.isDragging = true
+  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+  
+  state.dragStart.x = clientX - state.position.x
+  state.dragStart.y = clientY - state.position.y
+  
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchmove', onDrag)
+  document.addEventListener('touchend', stopDrag)
+}
+
+const onDrag = (e) => {
+  if (!state.isDragging || !canvas.value) return
+  
+  e.preventDefault()
+  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+  
+  const containerRect = canvas.value.getBoundingClientRect()
+  const newX = clientX - containerRect.left - state.dragStart.x
+  const newY = clientY - containerRect.top - state.dragStart.y
+  
+  // 限制在画布范围内
+  state.position.x = Math.max(0, Math.min(canvas.value.width - state.cropSize, newX))
+  state.position.y = Math.max(0, Math.min(canvas.value.height - state.cropSize, newY))
+  
+  updatePreview()
+}
+
+const stopDrag = () => {
+  state.isDragging = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('touchend', stopDrag)
+}
+
+const startResize = (direction, e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  
+  state.isResizing = true
+  state.resizeDirection = direction
+  
+  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+  
+  state.dragStart.x = clientX
+  state.dragStart.y = clientY
+  state.dragStart.width = state.cropSize
+  state.dragStart.position = { ...state.position }
+  
+  document.addEventListener('mousemove', onResize)
+  document.addEventListener('mouseup', stopResize)
+  document.addEventListener('touchmove', onResize)
+  document.addEventListener('touchend', stopResize)
+}
+
+const onResize = (e) => {
+  if (!state.isResizing || !canvas.value) return
+  
+  e.preventDefault()
+  const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+  const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+  
+  const deltaX = clientX - state.dragStart.x
+  const deltaY = clientY - state.dragStart.y
+  const minSize = 50
+  const maxSize = Math.min(canvas.value.width, canvas.value.height)
+  
+  let newSize = state.dragStart.width
+  let newX = state.dragStart.position.x
+  let newY = state.dragStart.position.y
+  
+  switch (state.resizeDirection) {
+    case 'e':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + deltaX))
+      break
+    case 'w':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width - deltaX))
+      newX = state.dragStart.position.x + deltaX
+      break
+    case 's':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + deltaY))
+      break
+    case 'n':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width - deltaY))
+      newY = state.dragStart.position.y + deltaY
+      break
+    case 'se':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(deltaX, deltaY)))
+      break
+    case 'sw':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(-deltaX, deltaY)))
+      newX = state.dragStart.position.x + deltaX
+      break
+    case 'ne':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(deltaX, -deltaY)))
+      newY = state.dragStart.position.y + deltaY
+      break
+    case 'nw':
+      newSize = Math.max(minSize, Math.min(maxSize, state.dragStart.width + Math.max(-deltaX, -deltaY)))
+      newX = state.dragStart.position.x + deltaX
+      newY = state.dragStart.position.y + deltaY
+      break
+  }
+  
+  // 限制位置在画布范围内
+  state.cropSize = newSize
+  state.position.x = Math.max(0, Math.min(canvas.value.width - newSize, newX))
+  state.position.y = Math.max(0, Math.min(canvas.value.height - newSize, newY))
+  
+  updatePreview()
+}
+
+const stopResize = () => {
+  state.isResizing = false
+  state.resizeDirection = null
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+  document.removeEventListener('touchmove', onResize)
+  document.removeEventListener('touchend', stopResize)
+}
+
+const cropAvatar = async () => {
+  loading.value = true
+  
+  try {
+    // 模拟处理时间
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    // 创建最终裁剪结果
+    const resultCanvas = document.createElement('canvas')
+    resultCanvas.width = 400 // 输出尺寸
+    resultCanvas.height = 400
+    const resultCtx = resultCanvas.getContext('2d')
+    
+    // 绘制圆形遮罩
+    resultCtx.beginPath()
+    resultCtx.arc(200, 200, 200, 0, Math.PI * 2)
+    resultCtx.closePath()
+    resultCtx.clip()
+    
+    // 绘制图片
+    const img = new Image()
+    img.onload = () => {
+      resultCtx.drawImage(img, 0, 0, 400, 400)
+      
+      // 触发裁剪完成事件
+      const dataUrl = resultCanvas.toDataURL('image/png')
+      emit('cropped', dataUrl)
+      
+      loading.value = false
+    }
+    img.src = previewUrl.value
+    
+  } catch (error) {
+    console.error('裁剪失败:', error)
+    loading.value = false
   }
 }
 
-const onCanvasMouseMove = (e) => {
-  if (selection.isMoving && canvas.value) {
-    const rect = canvas.value.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    
-    selection.x = x - selection.startX
-    selection.y = y - selection.startY
-    
-    // 限制选区不超出画布
-    selection.x = Math.max(
-      0, 
-      Math.min(canvas.value.width - selection.width, selection.x)
-    )
-    selection.y = Math.max(
-      0, 
-      Math.min(canvas.value.height - selection.height, selection.y)
-    )
-    
-    drawCanvas()
+const reset = () => {
+  imageSrc.value = ''
+  previewUrl.value = ''
+  if (fileInput.value) {
+    fileInput.value.value = ''
   }
 }
 
-const onCanvasMouseUp = () => {
-  selection.isMoving = false
-}
-
-const onCanvasMouseLeave = () => {
-  selection.isMoving = false
-}
-
-// 生命周期
+// 组件挂载
 onMounted(() => {
-  setCanvasSize()
-  window.addEventListener('resize', setCanvasSize)
-  
-  img.onload = () => {
-    drawCanvas()
-  }
+  window.addEventListener('resize', initializeCropper)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', setCanvasSize)
+  window.removeEventListener('resize', initializeCropper)
 })
 
-// 监听器
-watch([shade, selection], () => {
-  drawCanvas()
-}, { deep: true })
-
-watch(() => shade.opacity, () => {
-  drawCanvas()
+// 监听图片源变化
+watch(imageSrc, () => {
+  if (imageSrc.value) {
+    nextTick(() => {
+      initializeCropper()
+    })
+  }
 })
+
+// 定义组件事件
+const emit = defineEmits(['cropped'])
 </script>
 
 <style scoped>
-.cropper-demo {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  padding: 20px;
-  color: #333;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-header {
-  text-align: center;
-  margin-bottom: 30px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 10px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-  color: #2c3e50;
-  margin-bottom: 10px;
-}
-
-.description {
-  color: #7f8c8d;
+.avatar-cropper {
   max-width: 800px;
   margin: 0 auto;
-  line-height: 1.6;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-.demo-area {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-bottom: 30px;
+/* 上传区域 */
+.upload-area {
+  border: 2px dashed #d1d5db;
+  border-radius: 12px;
+  padding: 60px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: #fafafa;
 }
 
+.upload-area:hover {
+  border-color: #3b82f6;
+  background: #f8fafc;
+}
+
+.upload-content .upload-icon {
+  color: #9ca3af;
+  margin-bottom: 16px;
+}
+
+.upload-content h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.upload-content p {
+  color: #6b7280;
+  font-size: 14px;
+}
+
+/* 裁剪容器 */
 .cropper-container {
-  flex: 1;
-  min-width: 500px;
   background: white;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
-.controls {
-  flex: 0 0 300px;
-  background: white;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+.cropper-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
 }
 
+.cropper-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.btn-close:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.cropper-content {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 24px;
+  padding: 24px;
+}
+
+/* 画布区域 */
 .canvas-wrapper {
   position: relative;
+}
+
+.canvas-container {
+  position: relative;
   width: 100%;
   height: 400px;
-  border: 2px dashed #bdc3c7;
-  border-radius: 5px;
+  background: #f9fafb;
+  border-radius: 8px;
   overflow: hidden;
-  margin-bottom: 20px;
-  background: #ecf0f1;
 }
 
 .cropper-canvas {
   width: 100%;
   height: 100%;
+  display: block;
 }
 
-.viewer-container {
+.crop-box {
+  position: absolute;
+  border: 2px solid #3b82f6;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
+  cursor: move;
+  z-index: 10;
+}
+
+.crop-box-handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #3b82f6;
+  border: 2px solid white;
+  border-radius: 2px;
+  z-index: 20;
+}
+
+.handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
+.handle-n { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
+.handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
+.handle-w { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
+.handle-e { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }
+.handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
+.handle-s { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
+.handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
+
+/* 预览区域 */
+.preview-section {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
 }
 
-.viewer-label {
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: #2c3e50;
+.preview-container {
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
 }
 
-.preview-viewer {
-  width: 200px;
-  height: 150px;
-  border: 2px solid #3498db;
-  border-radius: 5px;
+.preview-item h4 {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  text-align: center;
+}
+
+.preview-circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
   overflow: hidden;
-  background: white;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.preview-square {
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-placeholder {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+/* 控制面板 */
+.control-panel {
+  grid-column: 1 / -1;
+  padding: 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
 }
 
 .control-group {
   margin-bottom: 20px;
 }
 
-h3 {
-  color: #2c3e50;
-  margin-bottom: 15px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #ecf0f1;
-}
-
-.btn-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-button {
-  padding: 10px 15px;
-  border: none;
-  border-radius: 5px;
-  background: #3498db;
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s;
-  font-weight: 600;
-  flex: 1;
-  min-width: 80px;
-}
-
-button:hover {
-  background: #2980b9;
-  transform: translateY(-2px);
-}
-
-button.active {
-  background: #e74c3c;
-}
-
-.slider-container {
-  margin: 15px 0;
-}
-
-label {
+.control-group label {
   display: block;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
+  font-size: 14px;
   font-weight: 500;
+  color: #374151;
 }
 
-input[type="range"] {
+.zoom-slider, .rotate-slider {
   width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #e5e7eb;
+  outline: none;
+  -webkit-appearance: none;
 }
 
-.component-info {
+.zoom-slider::-webkit-slider-thumb,
+.rotate-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+}
+
+.button-group {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.btn-primary, .btn-secondary {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+}
+
+.btn-secondary {
   background: white;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
+  color: #374151;
+  border: 1px solid #d1d5db;
 }
 
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-  margin-top: 15px;
+.btn-secondary:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
 }
 
-.info-card {
-  background: #f8f9fa;
-  padding: 15px;
-  border-radius: 8px;
-  border-left: 4px solid #3498db;
-}
-
-.info-card h4 {
-  color: #2c3e50;
-  margin-bottom: 10px;
-}
-
-.info-card p {
-  color: #7f8c8d;
-  font-size: 0.9rem;
-  line-height: 1.5;
-}
-
-.status-bar {
+/* 加载状态 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-  font-size: 0.9rem;
-  color: #7f8c8d;
-}
-
-.crosshair-controls {
-  display: flex;
-  gap: 10px;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  color: white;
+  z-index: 1000;
 }
 
-.crosshair-controls button {
-  padding: 8px 12px;
-  font-size: 0.9rem;
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-left: 4px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
 }
 
-@media (max-width: 900px) {
-  .demo-area {
-    flex-direction: column;
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .cropper-content {
+    grid-template-columns: 1fr;
+    gap: 20px;
   }
   
-  .cropper-container, .controls {
-    min-width: 100%;
+  .preview-container {
+    flex-direction: row;
+    justify-content: center;
   }
   
-  .status-bar {
+  .canvas-container {
+    height: 300px;
+  }
+  
+  .button-group {
     flex-direction: column;
-    gap: 5px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json
index fb07a20..461464e 100644
--- a/frontent/ops_vue_js/src/i18n/en.json
+++ b/frontent/ops_vue_js/src/i18n/en.json
@@ -46,7 +46,8 @@
     "user_settings": "Settings",
     "preferences": "Preferences",
     "administrator": "Administrator",
-    "select_date":"Select a date"
+    "select_date":"Select a date",
+    "save_ok":"Saved successfully"
   },
   "settings": {
     "account_settings": "Account Settings",
diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json
index 639738d..1d69854 100644
--- a/frontent/ops_vue_js/src/i18n/zh-CN.json
+++ b/frontent/ops_vue_js/src/i18n/zh-CN.json
@@ -46,7 +46,8 @@
     "user_settings": "个人资料",
     "preferences": "偏好设置",
     "administrator": "管理员",
-    "select_date":"选择日期"
+    "select_date":"选择日期",
+    "save_ok":"保存成功"
   },
   "settings": {
     "account_settings": "个人设置",
diff --git a/frontent/ops_vue_js/src/my_network_func.js b/frontent/ops_vue_js/src/my_network_func.js
index 72742fe..6d672e9 100644
--- a/frontent/ops_vue_js/src/my_network_func.js
+++ b/frontent/ops_vue_js/src/my_network_func.js
@@ -54,12 +54,12 @@ export const my_network_func = {
           {
             
             if(response.data.err_code==0){
-              if(response.data.return.cookie){
+              // if(response.data.return.cookie){
                 
-                userstore.cookieUpdata(response.data.return.cookie)
-              }
+              //   userstore.cookieUpdata(response.data.return.cookie)
+              // }
 
-            }else if(response.data.err_code==-46){
+            }else if(response.data.err_code==-44){//后端返回的cookie错误码
               //userCookieExpired
               userstore.logout()
             }
diff --git a/frontent/ops_vue_js/src/stores/user.js b/frontent/ops_vue_js/src/stores/user.js
index 080fd33..9a28cbc 100644
--- a/frontent/ops_vue_js/src/stores/user.js
+++ b/frontent/ops_vue_js/src/stores/user.js
@@ -8,7 +8,7 @@ import { my_network_func } from "@/my_network_func";
 export const useUserStore = defineStore("user", () => {
   // 状态 (State)
   const userInfo = ref(null);
-  const user =ref(null)
+  const user = ref(null);
   const userCookie = ref(null);
   const isLoggedIn = ref(false);
 
@@ -23,6 +23,30 @@ export const useUserStore = defineStore("user", () => {
     return userCookie.value;
   };
 
+  const getUserBirthday = () => {
+    if (userInfo.value != null) {
+      const date = new Date(userInfo.value.Birthdate);
+
+      // 获取年月日并格式化
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+
+      const formattedDate = `${year}-${month}-${day}`;
+      return formattedDate;
+    }
+    return "";
+  };
+
+  const getUserAvatarPath = () => {
+    if (userInfo.value != null) {
+      if (userInfo.value.AvatarPath != "") {
+        return userInfo.value.AvatarPath;
+      }
+    }
+    return "/ava.svg";
+  };
+
   const getUserInfoFromCookie = () => {
     my_network_func.postJson("/users/getinfo", {}, (r) => {
       //console.log(r);
@@ -30,11 +54,11 @@ export const useUserStore = defineStore("user", () => {
         case 200:
           switch (r.data.err_code) {
             case 0:
-              user.value=r.data.return.user
-              if(r.data.return.userInfo){
-                userInfo.value=r.data.return.userInfo
-              }else{
-                userInfo.value=null
+              user.value = r.data.return.user;
+              if (r.data.return.userInfo) {
+                userInfo.value = r.data.return.userInfo;
+              } else {
+                userInfo.value = null;
               }
               break;
             default:
@@ -92,6 +116,8 @@ export const useUserStore = defineStore("user", () => {
     userInfo,
     userCookie,
     isLoggedIn,
+    getUserAvatarPath,
+    getUserBirthday,
     logout,
     login,
     loginFromStoreCookie,
diff --git a/frontent/ops_vue_js/src/views/settings/account.vue b/frontent/ops_vue_js/src/views/settings/account.vue
index 3ea6943..26c73f8 100644
--- a/frontent/ops_vue_js/src/views/settings/account.vue
+++ b/frontent/ops_vue_js/src/views/settings/account.vue
@@ -4,15 +4,20 @@ import settingNavigation from "@/components/settingNavigation.vue";
 import { useI18n } from "vue-i18n";
 import datePicker from "@/components/datePicker.vue";
 import imageCropper from "@/components/imageCropper.vue";
+import { useUserStore } from "@/stores/user";
+import { my_network_func } from "@/my_network_func";
+import MyOffcanvas from "@/components/MyOffcanvas.vue";
+const mos = ref();
+
 const { t } = useI18n();
 
 const birthday = ref();
 const username = ref();
 const userremark = ref();
 
-function updataInfo() {
-  
+const userStore = useUserStore();
 
+function updataInfo() {
   let isDataErr = false;
 
   let birthdayValue = birthday.value.datepicker.value;
@@ -46,14 +51,43 @@ function updataInfo() {
   console.log("用户名:", usernameValue);
   console.log("备注:", userremarkValue);
   console.log("生日:", birthdayValue);
+  my_network_func.postJson(
+    "/users/updateInfo",
+    {
+      username: usernameValue,
+      remark: userremarkValue,
+      birthday: birthdayValue,
+    },
+    (r) => {
+      console.log(r);
+      switch (r.statusCode) {
+        case 200:
+          switch (r.data.err_code) {
+            case 0:
+              mos.value?.showAlert(
+                "success",
+                t("message.save_ok"),
+                1000
+              );
+              break;
+            default:
+              mos.value?.showAlert("danger", t("message.server_error"), 5000);
+              break;
+          }
+          break;
+        default:
+          mos.value?.showAlert("danger", t("message.network_err"), 5000);
+          break;
+      }
+    }
+  );
 }
 
-onMounted(()=>{
+onMounted(() => {
   //console.log("account mounted");
   //username.value.value="Kevin";
 
-})
-
+});
 </script>
 
 <template>
@@ -77,12 +111,13 @@ onMounted(()=>{
                 </h3>
                 <div class="row align-items-center">
                   <div class="col-auto">
-                    <span
+                    <img
+                      :src="userStore.getUserAvatarPath()"
+                      alt=""
                       class="avatar avatar-xl"
-                      style="background-image: url(./static/avatars/000m.jpg)"
-                    ></span>
+                    />
                   </div>
-                  <imageCropper />
+                  <!-- <imageCropper /> -->
                   <div class="col-auto">
                     <button class="btn">
                       {{ t("settings.change_avatar") }}
@@ -93,15 +128,29 @@ onMounted(()=>{
                 <div class="row g-3">
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.name") }}</div>
-                    <input ref="username" type="text" class="form-control" />
+                    <input
+                      ref="username"
+                      type="text"
+                      class="form-control"
+                      :value="
+                        userStore.userInfo ? userStore.userInfo.Username : ''
+                      "
+                    />
                   </div>
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.remark") }}</div>
-                    <input ref="userremark" type="text" class="form-control" />
+                    <input
+                      ref="userremark"
+                      type="text"
+                      class="form-control"
+                      :value="
+                        userStore.userInfo ? userStore.userInfo.FirstName : ''
+                      "
+                    />
                   </div>
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.birthday") }}</div>
-                    <datePicker ref="birthday" />
+                    <datePicker ref="birthday" :setdef="userStore.getUserBirthday()"/>
                   </div>
                   <div>
                     <button class="btn" @click="updataInfo">
@@ -139,4 +188,5 @@ onMounted(()=>{
       </div>
     </div>
   </div>
+  <MyOffcanvas ref="mos" />
 </template>