diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100755
new mode 100644
index d50cdcf9..0a4b97de
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,7 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# Export Git hook params
-export GIT_PARAMS=$*
-
-npx --no-install fabric verify-commit
+npx --no -- commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100755
index d37daa07..00000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 00000000..3f5e287f
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };
diff --git a/package.json b/package.json
index 71c90a12..1eda866b 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
     "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
     "openapi": "max openapi",
-    "prepare": "husky install",
+    "prepare": "husky",
     "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "preview": "npm run build && max preview --port 8000",
     "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
@@ -42,9 +42,7 @@
     ]
   },
   "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
+    "defaults"
   ],
   "dependencies": {
     "@ant-design/icons": "^4.8.3",
@@ -60,6 +58,8 @@
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^3.3.0",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/classnames": "^2.3.1",
     "@types/express": "^4.17.21",
@@ -76,7 +76,7 @@
     "eslint": "^8.57.0",
     "express": "^4.19.2",
     "gh-pages": "^3.2.3",
-    "husky": "^7.0.4",
+    "husky": "^9.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^10.5.4",
diff --git a/src/pages/User/Login/__snapshots__/login.test.tsx.snap b/src/pages/User/Login/__snapshots__/login.test.tsx.snap
index 1b928773..5622a1b7 100644
--- a/src/pages/User/Login/__snapshots__/login.test.tsx.snap
+++ b/src/pages/User/Login/__snapshots__/login.test.tsx.snap
@@ -610,16 +610,16 @@ exports[`Login Page should show login form 1`] = `
       style="flex: 1; padding: 32px 0px;"
     >
       <div
-        class="ant-pro-form-login-container css-dev-only-do-not-override-11lehqq css-dev-only-do-not-override-11lehqq"
+        class="ant-pro-form-login-container css-dev-only-do-not-override-ccdg5a css-dev-only-do-not-override-ccdg5a"
       >
         <div
-          class="ant-pro-form-login-top css-dev-only-do-not-override-11lehqq css-dev-only-do-not-override-11lehqq"
+          class="ant-pro-form-login-top css-dev-only-do-not-override-ccdg5a css-dev-only-do-not-override-ccdg5a"
         >
           <div
-            class="ant-pro-form-login-header css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-form-login-header css-dev-only-do-not-override-ccdg5a"
           >
             <span
-              class="ant-pro-form-login-logo css-dev-only-do-not-override-11lehqq"
+              class="ant-pro-form-login-logo css-dev-only-do-not-override-ccdg5a"
             >
               <img
                 alt="logo"
@@ -627,24 +627,24 @@ exports[`Login Page should show login form 1`] = `
               />
             </span>
             <span
-              class="ant-pro-form-login-title css-dev-only-do-not-override-11lehqq"
+              class="ant-pro-form-login-title css-dev-only-do-not-override-ccdg5a"
             >
               Ant Design
             </span>
           </div>
           <div
-            class="ant-pro-form-login-desc css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-form-login-desc css-dev-only-do-not-override-ccdg5a"
           >
             Ant Design is the most influential web design specification in Xihu district
           </div>
         </div>
         <div
-          class="ant-pro-form-login-main css-dev-only-do-not-override-11lehqq"
+          class="ant-pro-form-login-main css-dev-only-do-not-override-ccdg5a"
           style="width: 328px; min-width: 280px; max-width: 75vw;"
         >
           <form
             autocomplete="off"
-            class="ant-form ant-form-vertical ant-pro-form css-dev-only-do-not-override-11lehqq"
+            class="ant-form ant-form-vertical ant-pro-form css-dev-only-do-not-override-ccdg5a"
           >
             <input
               style="display: none;"
@@ -947,7 +947,7 @@ exports[`Login Page should show login form 1`] = `
               </a>
             </div>
             <button
-              class="ant-btn ant-btn-primary ant-btn-lg"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
               style="width: 100%;"
               type="button"
             >
@@ -957,7 +957,7 @@ exports[`Login Page should show login form 1`] = `
             </button>
           </form>
           <div
-            class="ant-pro-form-login-main-other css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-form-login-main-other css-dev-only-do-not-override-ccdg5a"
           >
             Login with :
             <span
@@ -1023,17 +1023,17 @@ exports[`Login Page should show login form 1`] = `
       </div>
     </div>
     <footer
-      class="ant-layout-footer css-dev-only-do-not-override-11lehqq"
+      class="ant-layout-footer css-dev-only-do-not-override-ccdg5a"
       style="padding: 0px; background: none;"
     >
       <div
-        class="ant-pro-global-footer css-dev-only-do-not-override-11lehqq"
+        class="ant-pro-global-footer css-dev-only-do-not-override-ccdg5a"
       >
         <div
-          class="ant-pro-global-footer-list css-dev-only-do-not-override-11lehqq"
+          class="ant-pro-global-footer-list css-dev-only-do-not-override-ccdg5a"
         >
           <a
-            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-ccdg5a"
             href="https://pro.ant.design"
             rel="noreferrer"
             target="_blank"
@@ -1042,7 +1042,7 @@ exports[`Login Page should show login form 1`] = `
             Ant Design Pro
           </a>
           <a
-            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-ccdg5a"
             href="https://github.com/ant-design/ant-design-pro"
             rel="noreferrer"
             target="_blank"
@@ -1069,7 +1069,7 @@ exports[`Login Page should show login form 1`] = `
             </span>
           </a>
           <a
-            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-11lehqq"
+            class="ant-pro-global-footer-list-link css-dev-only-do-not-override-ccdg5a"
             href="https://ant.design"
             rel="noreferrer"
             target="_blank"
@@ -1079,7 +1079,7 @@ exports[`Login Page should show login form 1`] = `
           </a>
         </div>
         <div
-          class="ant-pro-global-footer-copyright css-dev-only-do-not-override-11lehqq"
+          class="ant-pro-global-footer-copyright css-dev-only-do-not-override-ccdg5a"
         >
           <span
             aria-label="copyright"