diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
index 7c14047..bfa5870 100644
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 85468b0..2157ce5 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -11,6 +11,7 @@ Before submitting the PR, please make sure you do the following:
 - Added necessary documentation (if appropriate)
 
 -->
+
 ## Proposed changes
 
 <!-- Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue. -->
diff --git a/README.md b/README.md
index dc4a3dd..e236138 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Mocking up web app with <b>Boot-Vue </b><sup><em>(speed)</em></sup><br>
 
 ## Features
 
-- ⚡  [Lightning fast](https://github.com/kirklin/boot-vue#readme): Built with Vue 3, Vite, and pnpm 🔥
+- ⚡ [Lightning fast](https://github.com/kirklin/boot-vue#readme): Built with Vue 3, Vite, and pnpm 🔥
 - 💪 [Strongly typed](https://www.typescriptlang.org/): Uses TypeScript 💻
 - 🔥 [Latest syntax](https://github.com/vuejs/rfcs/pull/227): Uses the new <script setup> syntax 🆕
 - 📦 [Components auto importing](./src/components): Automatically imports components 🚚
@@ -38,6 +38,7 @@ Mocking up web app with <b>Boot-Vue </b><sup><em>(speed)</em></sup><br>
 - 💡 [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
 ### Performance
+
 <img src='README.assets/BootVue-Lighthouse.png' alt='Boot-Vue Outstanding performance' width='1851'/>
 
 ## directory
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 40e1ba8..0f92a11 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -34,6 +34,7 @@
 - 💡 [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
 ### 性能
+
 <img src='README.assets/BootVue-Lighthouse.png' alt='Boot-Vue Outstanding performance' width='1851'/>
 
 ## 项目结构
diff --git a/eslint.config.js b/eslint.config.js
index d359b9d..fd2a6ce 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,4 +2,22 @@ import kirklin from "@kirklin/eslint-config";
 
 export default kirklin({
   unocss: true,
+  formatters: {
+    /**
+     * 格式化CSS、LESS、SCSS文件，以及Vue中的`<style>`块
+     * 默认情况下使用Prettier
+     */
+    css: true,
+    /**
+     * 格式化HTML文件
+     * 默认情况下使用Prettier
+     */
+    html: true,
+    /**
+     * 格式化Markdown文件
+     * 支持Prettier和dprint
+     * 默认情况下使用Prettier
+     */
+    markdown: "prettier",
+  },
 });
diff --git a/index.html b/index.html
index 22392bd..647c550 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <meta name="description" content="Vite Starter Template By Kirk Lin">
+    <meta name="description" content="Vite Starter Template By Kirk Lin" />
   </head>
   <body>
     <div id="app">
@@ -39,7 +39,7 @@
         }
 
         .loader:before {
-          content: '';
+          content: "";
           width: 48px;
           height: 5px;
           background: #f0808050;
@@ -51,7 +51,7 @@
         }
 
         .loader:after {
-          content: '';
+          content: "";
           width: 100%;
           height: 100%;
           background: #f08080;
@@ -72,7 +72,7 @@
           }
 
           50% {
-            transform: translateY(18px) scale(1, .9) rotate(45deg);
+            transform: translateY(18px) scale(1, 0.9) rotate(45deg);
             border-bottom-right-radius: 40px;
           }
 
@@ -86,7 +86,6 @@
         }
 
         @keyframes shadow324 {
-
           0%,
           100% {
             transform: scale(1, 1);
diff --git a/package.json b/package.json
index 99226e1..1d6884b 100644
--- a/package.json
+++ b/package.json
@@ -45,15 +45,16 @@
     "@iconify-json/mdi": "^1.1.63",
     "@iconify-json/tabler": "^1.1.102",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
-    "@kirklin/eslint-config": "^1.1.1",
+    "@kirklin/eslint-config": "^2.0.0",
     "@types/node": "^20.10.6",
     "@types/nprogress": "^0.2.3",
     "@unocss/eslint-config": "^0.58.2",
-    "@vitejs/plugin-vue": "^5.0.1",
+    "@vitejs/plugin-vue": "^5.0.2",
     "@vitest/coverage-c8": "^0.33.0",
     "@vue/compiler-dom": "^3.4.3",
     "@vue/test-utils": "^2.4.3",
     "eslint": "^8.56.0",
+    "eslint-plugin-format": "^0.1.0",
     "husky": "^8.0.3",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6a7a5f..41a59f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,8 +53,8 @@ devDependencies:
     specifier: ^2.0.0
     version: 2.0.0(rollup@2.79.1)(vue-i18n@9.8.0)
   '@kirklin/eslint-config':
-    specifier: ^1.1.1
-    version: 1.1.1(@vue/compiler-sfc@3.4.3)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.1.0)
+    specifier: ^2.0.0
+    version: 2.0.0(@vue/compiler-sfc@3.4.3)(eslint-plugin-format@0.1.0)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.1.0)
   '@types/node':
     specifier: ^20.10.6
     version: 20.10.6
@@ -65,8 +65,8 @@ devDependencies:
     specifier: ^0.58.2
     version: 0.58.2(eslint@8.56.0)(typescript@5.3.3)
   '@vitejs/plugin-vue':
-    specifier: ^5.0.1
-    version: 5.0.1(vite@5.0.10)(vue@3.4.3)
+    specifier: ^5.0.2
+    version: 5.0.2(vite@5.0.10)(vue@3.4.3)
   '@vitest/coverage-c8':
     specifier: ^0.33.0
     version: 0.33.0(vitest@1.1.0)
@@ -79,6 +79,9 @@ devDependencies:
   eslint:
     specifier: ^8.56.0
     version: 8.56.0
+  eslint-plugin-format:
+    specifier: ^0.1.0
+    version: 0.1.0(eslint@8.56.0)
   husky:
     specifier: ^8.0.3
     version: 8.0.3
@@ -1801,6 +1804,18 @@ packages:
       chalk: 4.1.2
     dev: true
 
+  /@dprint/formatter@0.2.1:
+    resolution: {integrity: sha512-GCzgRt2o4mhZLy8L47k2A+q9EMG/jWhzZebE29EqKsxmjDrSfv2VisEj/Q+39OOf04jTkEfB/TRO+IZSyxHdYg==}
+    dev: true
+
+  /@dprint/markdown@0.16.3:
+    resolution: {integrity: sha512-KvwUrCdHR1spFk0EcdW33KEGFLfkcdx6hJN8mwipGBw0b40sl5oPtVUTgRiH70eV7VUhPfycDfIsDutWNHb17w==}
+    dev: true
+
+  /@dprint/toml@0.5.4:
+    resolution: {integrity: sha512-d+5GwwzztZD0QixmOBhaO6nWVLsAeYsJ1HJYNxDoDRbASFCpza9BBVshG5ctBRXCkkIHhD9BO1SnbOoRQltUQw==}
+    dev: true
+
   /@es-joy/jsdoccomment@0.41.0:
     resolution: {integrity: sha512-aKUhyn1QI5Ksbqcr3fFJj16p99QdjUxXAEuFst1Z47DRyoiMwivIH9MV/ARcJOCXVjPfjITciej8ZD2O/6qUmw==}
     engines: {node: '>=16'}
@@ -2023,8 +2038,8 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint-types/jsdoc@46.8.2-1:
-    resolution: {integrity: sha512-FwD7V0xX0jyaqj8Ul5ZY+TAAPohDfVqtbuXJNHb+OIv1aTIqZi5+Zn3F2UwQ5O3BnQd2mTduyK0+HjGx3/AMFg==}
+  /@eslint-types/jsdoc@46.9.1:
+    resolution: {integrity: sha512-oKH2l8HALyZ3bQzSecoWYsJSgdTLILAYlY8dprNBg3LzUZtnfcq0P8ixDmE7UdMCujGAmmGtmgYbzmUDRxSkzg==}
     dev: true
 
   /@eslint-types/typescript-eslint@6.16.0:
@@ -2253,8 +2268,8 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
-  /@kirklin/eslint-config@1.1.1(@vue/compiler-sfc@3.4.3)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.1.0):
-    resolution: {integrity: sha512-fMKxncrh90gpJWB0Md8yUSpUVPA0dwKnN/3x709IqxWS4PSp+oi8jcjwIOdgrHeWQZ6QUBVHvUxfv4R6ASp7+Q==}
+  /@kirklin/eslint-config@2.0.0(@vue/compiler-sfc@3.4.3)(eslint-plugin-format@0.1.0)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.1.0):
+    resolution: {integrity: sha512-JHfEVPznug4WQNN7wtafxsbpFFtZvF/jYLC4j1kGpx+HjBZAMgnPUUEbxWcQek+UQ3SnerS9VyoGzsrPMC/ENQ==}
     hasBin: true
     peerDependencies:
       '@unocss/eslint-plugin': '>=0.50.0'
@@ -2283,7 +2298,7 @@ packages:
     dependencies:
       '@antfu/eslint-define-config': 1.23.0-2
       '@antfu/install-pkg': 0.3.1
-      '@eslint-types/jsdoc': 46.8.2-1
+      '@eslint-types/jsdoc': 46.9.1
       '@eslint-types/typescript-eslint': 6.16.0
       '@eslint-types/unicorn': 50.0.1
       '@stylistic/eslint-plugin': 1.5.1(eslint@8.56.0)(typescript@5.3.3)
@@ -2293,10 +2308,11 @@ packages:
       eslint-config-flat-gitignore: 0.1.2
       eslint-merge-processors: 0.1.0(eslint@8.56.0)
       eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
+      eslint-plugin-format: 0.1.0(eslint@8.56.0)
       eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)
       eslint-plugin-jsdoc: 46.10.1(eslint@8.56.0)
       eslint-plugin-jsonc: 2.11.2(eslint@8.56.0)
-      eslint-plugin-kirklin: 1.0.0(eslint@8.56.0)
+      eslint-plugin-kirklin: 1.1.0(eslint@8.56.0)
       eslint-plugin-markdown: 3.0.1(eslint@8.56.0)
       eslint-plugin-n: 16.6.0(eslint@8.56.0)
       eslint-plugin-no-only-tests: 3.1.0
@@ -3101,8 +3117,8 @@ packages:
       - rollup
     dev: true
 
-  /@vitejs/plugin-vue@5.0.1(vite@5.0.10)(vue@3.4.3):
-    resolution: {integrity: sha512-lwvZX5tDhJpRJEKsjoUSWgaD26Lk9X4aDYGAPpr/Q6cLTT3PC8LPu2dsnYEweAZiNgHsbyKL2Svc/CDrFOsbtw==}
+  /@vitejs/plugin-vue@5.0.2(vite@5.0.10)(vue@3.4.3):
+    resolution: {integrity: sha512-kEjJHrLb5ePBvjD0SPZwJlw1QTRcjjCA9sB5VyfonoXVBxTS7TMnqL6EkLt1Eu61RDeiuZ/WN9Hf6PxXhPI2uA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
@@ -4500,6 +4516,15 @@ packages:
       parse-gitignore: 2.0.0
     dev: true
 
+  /eslint-formatting-reporter@0.0.0(eslint@8.56.0):
+    resolution: {integrity: sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      eslint: 8.56.0
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
@@ -4547,6 +4572,10 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-parser-plain@0.1.0:
+    resolution: {integrity: sha512-oOeA6FWU0UJT/Rxc3XF5Cq0nbIZbylm7j8+plqq0CZoE6m4u32OXJrR+9iy4srGMmF6v6pmgvP1zPxSRIGh3sg==}
+    dev: true
+
   /eslint-plugin-es-x@7.5.0(eslint@8.56.0):
     resolution: {integrity: sha512-ODswlDSO0HJDzXU0XvgZ3lF3lS3XAZEossh15Q2UHjwrJggWeBoKqqEsLTZLXl+dh5eOAozG0zRcYtuE35oTuQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4570,6 +4599,21 @@ packages:
       ignore: 5.2.4
     dev: true
 
+  /eslint-plugin-format@0.1.0(eslint@8.56.0):
+    resolution: {integrity: sha512-IgOu+GEH+PdKnpuPrFzY8q8QgnzAUijDZsNLhpp5jx0Lbu9u968/STcmEZGnIMVBw3zeTNN/FsU6d2Rdgcy6Aw==}
+    peerDependencies:
+      eslint: ^8.40.0
+    dependencies:
+      '@dprint/formatter': 0.2.1
+      '@dprint/markdown': 0.16.3
+      '@dprint/toml': 0.5.4
+      eslint: 8.56.0
+      eslint-formatting-reporter: 0.0.0(eslint@8.56.0)
+      eslint-parser-plain: 0.1.0
+      prettier: 3.1.1
+      synckit: 0.8.8
+    dev: true
+
   /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.16.0)(eslint@8.56.0):
     resolution: {integrity: sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==}
     engines: {node: '>=12'}
@@ -4627,8 +4671,8 @@ packages:
       natural-compare: 1.4.0
     dev: true
 
-  /eslint-plugin-kirklin@1.0.0(eslint@8.56.0):
-    resolution: {integrity: sha512-HLp8jdwIuMgH/ntP7EBf0CZ/ZqXfPlMDL535I9llsN4jMuC+/WrN2u1Ga+zJl9WauDHrVgME9xmmH6GvgozMWg==}
+  /eslint-plugin-kirklin@1.1.0(eslint@8.56.0):
+    resolution: {integrity: sha512-rvSBb8+QXWniwmuYlYE0CcgTPdF0PISdw14/fuNPcU7pcI3TVkYSIcC6vci+7zPAjGhEqRwhklQts1UPt922Bw==}
     peerDependencies:
       eslint: '*'
     dependencies:
@@ -4993,6 +5037,10 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
+
   /fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -6835,6 +6883,19 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier@3.1.1:
+    resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
diff --git a/src/layouts/Navbar/components/ThemeChange/index.vue b/src/layouts/Navbar/components/ThemeChange/index.vue
index 6ef5e9a..e4a9715 100644
--- a/src/layouts/Navbar/components/ThemeChange/index.vue
+++ b/src/layouts/Navbar/components/ThemeChange/index.vue
@@ -130,33 +130,33 @@ function changeTheme(event: MouseEvent, theme: CustomTheme) {
  .scrollbar::-webkit-scrollbar {
   width: 20px;
   height: 20px;
- }
+}
 
- .scrollbar::-webkit-scrollbar-track {
+.scrollbar::-webkit-scrollbar-track {
   border-radius: 100vh;
   background: #f7f4ed;
- }
+}
 
- .scrollbar::-webkit-scrollbar-thumb {
+.scrollbar::-webkit-scrollbar-thumb {
   background: #e0cbcb;
   border-radius: 100vh;
   border: 3px solid #f6f7ed;
- }
+}
 
- .scrollbar::-webkit-scrollbar-thumb:hover {
+.scrollbar::-webkit-scrollbar-thumb:hover {
   background: #c0a0b9;
- }
+}
 
- ::view-transition-old(root),
- ::view-transition-new(root) {
-   animation: none;
-   mix-blend-mode: normal;
- }
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
 
- ::view-transition-old(root) {
-   z-index: 999;
- }
- ::view-transition-new(root) {
-   z-index: 1;
- }
- </style>
+::view-transition-old(root) {
+  z-index: 999;
+}
+::view-transition-new(root) {
+  z-index: 1;
+}
+</style>
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 08d02f4..1034161 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,3 +1,3 @@
 :root {
-    --theme-color: #2563eb;
+  --theme-color: #2563eb;
 }