diff --git a/package.json b/package.json
index 8aa4128..a7df156 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@mdi/font": "7.4.47",
+    "@mdit/plugin-katex": "^0.13.1",
+    "@mdit/plugin-sub": "^0.13.1",
+    "@mdit/plugin-sup": "^0.13.1",
     "@primevue/themes": "^4.0.0",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
@@ -20,10 +23,14 @@
     "axios": "^1.7.2",
     "core-js": "^3.37.1",
     "crypto-js": "^4.2.0",
+    "dompurify": "^3.1.7",
     "highlight.js": "^11.10.0",
     "instantsearch.css": "^8.5.1",
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-mathjax": "^2.0.0",
     "prettydiff": "^101.2.6",
     "primevue": "^4.0.0",
     "roboto-fontface": "*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dda455a..4bc326a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,15 @@ importers:
       '@mdi/font':
         specifier: 7.4.47
         version: 7.4.47
+      '@mdit/plugin-katex':
+        specifier: ^0.13.1
+        version: 0.13.1(markdown-it@14.1.0)
+      '@mdit/plugin-sub':
+        specifier: ^0.13.1
+        version: 0.13.1(markdown-it@14.1.0)
+      '@mdit/plugin-sup':
+        specifier: ^0.13.1
+        version: 0.13.1(markdown-it@14.1.0)
       '@primevue/themes':
         specifier: ^4.0.0
         version: 4.0.0(@primeuix/styled@0.0.5)
@@ -38,6 +47,9 @@ importers:
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
+      dompurify:
+        specifier: ^3.1.7
+        version: 3.1.7
       highlight.js:
         specifier: ^11.10.0
         version: 11.10.0
@@ -50,6 +62,15 @@ importers:
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
+      markdown-it-emoji:
+        specifier: ^3.0.0
+        version: 3.0.0
+      markdown-it-mathjax:
+        specifier: ^2.0.0
+        version: 2.0.0
       prettydiff:
         specifier: ^101.2.6
         version: 101.2.6
@@ -436,6 +457,42 @@ packages:
   '@mdi/font@7.4.47':
     resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==}
 
+  '@mdit/plugin-katex@0.13.1':
+    resolution: {integrity: sha512-ODWJ0vw8r+uqpUEXlSJYyLHr16NfixPDrkhIGroy2osg9NAcpQ86MF/itDympw4WU1UmFhy2E2w2R2kAXcm6mA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
+  '@mdit/plugin-sub@0.13.1':
+    resolution: {integrity: sha512-2rIvEl6pXUoXIm3JMO5ZOQ+vWIeFXmLkqxcmTZB2yOIfhYdLwIcSyquRwtI2AX8zCuvaTdiQ/aypvIE4tDoURw==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
+  '@mdit/plugin-sup@0.13.1':
+    resolution: {integrity: sha512-vkNif2Rbj7/gtk4/HJt5hnb+Dcbnek/V4HtLdtqUUnq9bIbzFBpYw5jZ1ZKKZeetDtRvOUPH5oy5d7iXAHorUg==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
+  '@mdit/plugin-tex@0.13.1':
+    resolution: {integrity: sha512-lkRf6XrfVfS11FzT3hiooWdOUPJfAd/cnAv4NN/4WU7qOEz0e0HBVQO8PQb5CPwrE94Ld4+E6rQwJfVH1grkwQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      markdown-it: ^14.1.0
+    peerDependenciesMeta:
+      markdown-it:
+        optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -600,6 +657,18 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/katex@0.16.7':
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
+
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
@@ -890,6 +959,10 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -973,6 +1046,9 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dompurify@3.1.7:
+    resolution: {integrity: sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1513,6 +1589,10 @@ packages:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
 
+  katex@0.16.11:
+    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -1523,6 +1603,9 @@ packages:
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
@@ -1544,6 +1627,16 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  markdown-it-emoji@3.0.0:
+    resolution: {integrity: sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==}
+
+  markdown-it-mathjax@2.0.0:
+    resolution: {integrity: sha512-Fafv7TnMENccWYTNjMZzV4BzONPxpK9Mknr1iMEK6m7PI5a5UTCOFctPzx7Nhv81fFzYEY8WHDkSu9n43fTV9g==}
+
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   marked-highlight@2.1.3:
     resolution: {integrity: sha512-t35JWm2u8HanOJ+gSJBAYQ0Jgr3vy+gl7ORAXN8bSEQFHl5FYXH0A7YXVMrfhmKaSuBSy6LidXECn3U9Qv/dHA==}
     peerDependencies:
@@ -1554,6 +1647,9 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1738,6 +1834,10 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1960,6 +2060,9 @@ packages:
     resolution: {integrity: sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
 
@@ -2440,6 +2543,33 @@ snapshots:
 
   '@mdi/font@7.4.47': {}
 
+  '@mdit/plugin-katex@0.13.1(markdown-it@14.1.0)':
+    dependencies:
+      '@mdit/plugin-tex': 0.13.1(markdown-it@14.1.0)
+      '@types/katex': 0.16.7
+      '@types/markdown-it': 14.1.2
+      katex: 0.16.11
+    optionalDependencies:
+      markdown-it: 14.1.0
+
+  '@mdit/plugin-sub@0.13.1(markdown-it@14.1.0)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+    optionalDependencies:
+      markdown-it: 14.1.0
+
+  '@mdit/plugin-sup@0.13.1(markdown-it@14.1.0)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+    optionalDependencies:
+      markdown-it: 14.1.0
+
+  '@mdit/plugin-tex@0.13.1(markdown-it@14.1.0)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+    optionalDependencies:
+      markdown-it: 14.1.0
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2556,6 +2686,17 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/katex@0.16.7': {}
+
+  '@types/linkify-it@5.0.0': {}
+
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/minimatch@5.1.2': {}
 
   '@types/node@12.20.55': {}
@@ -2906,6 +3047,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  commander@8.3.0: {}
+
   concat-map@0.0.1: {}
 
   confbox@0.1.7: {}
@@ -2980,6 +3123,8 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dompurify@3.1.7: {}
+
   entities@4.5.0: {}
 
   es-abstract@1.23.3:
@@ -3655,6 +3800,10 @@ snapshots:
 
   jwt-decode@4.0.0: {}
 
+  katex@0.16.11:
+    dependencies:
+      commander: 8.3.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -3668,6 +3817,10 @@ snapshots:
     dependencies:
       immediate: 3.0.6
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   local-pkg@0.5.0:
     dependencies:
       mlly: 1.7.1
@@ -3689,12 +3842,27 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  markdown-it-emoji@3.0.0: {}
+
+  markdown-it-mathjax@2.0.0: {}
+
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   marked-highlight@2.1.3(marked@12.0.2):
     dependencies:
       marked: 12.0.2
 
   marked@12.0.2: {}
 
+  mdurl@2.0.0: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.7:
@@ -3867,6 +4035,8 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   qs@6.9.7: {}
@@ -4124,6 +4294,8 @@ snapshots:
 
   ua-parser-js@1.0.39: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.3: {}
 
   unbox-primitive@1.0.2:
diff --git a/src/App.vue b/src/App.vue
index a3f574b..1bf220c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,11 @@
     <Toast />
     <AppHeader />
     <v-main>
-      <router-view />
+      <router-view v-slot="{ Component, route }">
+        <transition name="md3" mode="out-in">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </router-view>
     </v-main>
     <AppFooter />
   </v-app>
@@ -12,3 +16,22 @@
 <script setup>
 import Toast from "primevue/toast";
 </script>
+
+<style scoped>
+.md3-enter-active,
+.md3-leave-active {
+  transition: opacity 0.25s ease, transform 0.3s ease-in-out;
+}
+
+/* 页面进入的初始状态 */
+.md3-enter-from {
+  opacity: 0;
+  transform: translateX(15px) scale(1); /* 从右侧轻微滑入并缩小 */
+}
+
+/* 页面离开状态 */
+.md3-leave-to {
+  opacity: 0;
+  transform: translateX(-15px) scale(1); /* 向左滑出并缩小 */
+}
+</style>
diff --git a/src/assets/ZeroCatLogo.svg b/src/assets/ZeroCatLogo.svg
new file mode 100644
index 0000000..c547bd5
--- /dev/null
+++ b/src/assets/ZeroCatLogo.svg
@@ -0,0 +1,39 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" fill="none">
+<g filter="url(#filter_41_12)">
+<circle cx="100" cy="100" r="100"   fill="#FFFFFF" >
+</circle>
+</g>
+<g filter="url(#filter_41_6)">
+<path d="M100 100L160 100L100 160L100 100Z"   fill="#415F91" >
+</path>
+<path d="M100 100L40 160L100 160L100 100Z"   fill="#415F91" >
+</path>
+<path d="M100 40L160 40L100 100L100 40Z"   fill="#8EACE3" >
+</path>
+<path d="M100 40L40 100L100 100L100 40Z"   fill="#8EACE3" >
+</path>
+</g>
+<defs>
+<filter id="filter_41_12" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="feFloodId_41_12"/>
+<feBlend mode="normal" in="SourceGraphic" in2="feFloodId_41_12" result="shape_41_12"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha_41_12"/>
+<feOffset dx="0" dy="2"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha_41_12" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="shape_41_12" result="innerShadow_0_41_12" />
+</filter>
+<filter id="filter_41_6" x="22" y="24" width="156" height="156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="feFloodId_41_6"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha_41_6"/>
+<feOffset dx="0" dy="2"/>
+<feGaussianBlur stdDeviation="9"/>
+<feComposite in2="hardAlpha_41_6" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="feFloodId_41_6" result="dropShadow_1_41_6"/>
+<feBlend mode="normal" in="SourceGraphic" in2="dropShadow_1_41_6" result="shape_41_6"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d05eb5d..171bf93 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-app-bar :elevation="2">
+  <v-app-bar :elevation="2"  border >
     <template v-slot:prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     </template>
-    <v-app-bar-title>ZeroCatNext</v-app-bar-title>
+    <v-app-bar-title><strong>ZeroCat</strong>Next</v-app-bar-title>
     <template v-slot:append>
       <v-menu>
         <template v-slot:activator="{ props }">
@@ -24,7 +24,8 @@
       </v-menu>
     </template>
   </v-app-bar>
-  <v-navigation-drawer v-model="drawer">
+  <v-navigation-drawer v-model="drawer"
+  >
     <v-list>
       <v-list-item
         v-if="islogin == true"
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index c5ccf2b..6f1dce1 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -34,7 +34,7 @@
         }})
       </v-card-subtitle>
     </v-card-item>
-    <v-card-text>{{ comment.text }}</v-card-text>
+    <v-card-text><Markdown>{{ comment.text }}</Markdown></v-card-text>
     <v-card
       class="pb-3 pl-10 pr-3"
       v-if="comment.children && comment.children.length"
@@ -155,7 +155,7 @@
               }}) - {{ morecommnets.insertedAt }}
             </v-card-subtitle>
           </v-card-item>
-          <v-card-text>{{ morecommnets.text }}</v-card-text>
+          <v-card-text><Markdown>{{ morecommnets.text }}</Markdown></v-card-text>
         </v-card>
         <v-card
           class="mb-2"
@@ -221,7 +221,7 @@
               }}) - {{ comment.insertedAt }}</v-card-subtitle
             >
           </v-card-item>
-          <v-card-text>{{ comment.text }}</v-card-text>
+          <v-card-text><Markdown>{{ comment.text }}</Markdown></v-card-text>
         </v-card>
 
         <v-card class="mt-4" elevation hover border>
@@ -262,6 +262,7 @@
 </template>
 
 <script>
+import Markdown from "./Markdown.vue";
 import TimeAgo from "./TimeAgo.vue";
 
 import request from "../axios/axios";
@@ -271,6 +272,7 @@ import { UAParser } from "ua-parser-js";
 export default {
   components: {
     TimeAgo,
+    Markdown,
   },
   props: {
     url: {
diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
new file mode 100644
index 0000000..59464b3
--- /dev/null
+++ b/src/components/Markdown.vue
@@ -0,0 +1,89 @@
+<template>
+  <!-- 使用默认插槽传入的内容 -->
+  <div v-html="sanitizedHtmlContent"></div>
+</template>
+
+<script>
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js";
+import "highlight.js/styles/atom-one-dark.css";
+import createDOMPurify from "dompurify";
+import { full as emojiPlugin } from "markdown-it-emoji";
+
+// 初始化并配置 MarkdownIt 实例
+function createMarkdownInstance() {
+  const md = new MarkdownIt({
+    highlight: function (str, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return `<pre class="hljs"><code>${
+            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+          }</code></pre>`;
+        } catch (error) {
+          console.error("代码高亮出错：", error);
+        }
+      }
+      return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+    },
+    breaks: true,
+    linkify: true,
+    typographer: true,
+    html: true,
+  });
+
+  // 加载插件
+  md.use(emojiPlugin);
+  return md;
+}
+
+// 配置 DOMPurify，添加链接安全性和过滤规则
+function createSanitizeFunction() {
+  const DOMPurify = createDOMPurify(window);
+
+  // 配置链接处理
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.href && !node.href.startsWith("about:blank#")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "nofollow noreferrer noopener");
+    }
+    if (node.hasAttribute("xlink:href") || node.hasAttribute("href")) {
+      node.setAttribute("xlink:show", "new");
+    }
+    if ("preload" in node) {
+      node.setAttribute("preload", "none");
+    }
+  });
+
+  // 返回实际的内容过滤函数
+  return (content) =>
+    DOMPurify.sanitize(content, {
+      FORBID_TAGS: ["form", "input", "style"],
+      FORBID_ATTR: ["autoplay", "style"],
+    });
+}
+
+export default {
+  name: "Markdown",
+
+  data() {
+    return {
+      markdownInstance: createMarkdownInstance(),
+      sanitizeContent: createSanitizeFunction(),
+    };
+  },
+
+  computed: {
+    // 渲染并安全处理内容
+    sanitizedHtmlContent() {
+      // 通过 slot 的内容作为 Markdown 输入
+      const rawContent = this.$slots.default ? this.$slots.default()[0].children : "";
+      const renderedMarkdown = this.markdownInstance.render(rawContent);
+      return this.sanitizeContent(renderedMarkdown);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Scoped styling, if needed */
+</style>
diff --git a/src/pages/account/callback.vue b/src/pages/account/callback.vue
index c5fa2b4..eec3bc8 100644
--- a/src/pages/account/callback.vue
+++ b/src/pages/account/callback.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-card class="mx-auto" rel="noopener" target="_blank">
+    <v-card class="mx-auto" rel="noopener" target="_blank" border>
       <template v-slot:title>
         <span>您正在登录一个账户</span> </template
       ><template v-slot:subtitle>
diff --git a/src/pages/account/login.vue b/src/pages/account/login.vue
index b755767..8abdd4d 100644
--- a/src/pages/account/login.vue
+++ b/src/pages/account/login.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard class="auth-card pa-4 pt-7" max-width="448">
+    <v-card class="auth-card pa-4 pt-7" max-width="448" border>
       <v-row>
         <v-col cols="12">
-          <VCardText>
+          <v-cardtext>
             <h5 class="text-h5 font-weight-semibold mb-1">
               欢迎来到ZeroCatNext！ 👋🏻
             </h5>
             <p class="mb-0">登录你的账户</p>
-          </VCardText>
+          </v-cardtext>
         </v-col></v-row
       >
 
-      <VCardText>
-        <VForm>
-          <VRow>
+      <v-cardtext>
+        <v-form>
+          <v-row>
             <!-- email -->
-            <VCol cols="12">
-              <VTextField
+            <v-col cols="12">
+              <v-text-field
                 label="邮箱"
                 type="text"
                 v-model="username"
                 variant="outlined"
                 :rules="emailRules"
-              ></VTextField>
-              <VTextField
+              ></v-text-field>
+              <v-text-field
                 label="密码"
                 v-model="password"
                 variant="outlined"
@@ -32,16 +32,16 @@
                 :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
                 :type="show1 ? 'text' : 'password'"
                 @click:append="show1 = !show1"
-              ></VTextField>
-            </VCol>
-            <VCol cols="9">
+              ></v-text-field>
+            </v-col>
+            <v-col cols="9">
               <div id="recaptcha-div"></div>
-            </VCol>
-            <VCol cols="3">
+            </v-col>
+            <v-col cols="3">
               <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-            </VCol>
+            </v-col>
             <!-- password -->
-            <VCol cols="12">
+            <v-col cols="12">
               <!-- remember me checkbox
               <div class="d-flex align-center justify-space-between flex-wrap ">
                 <VCheckbox disabled label="Remember me" />
@@ -60,8 +60,8 @@
                 append-icon="mdi-arrow-right"
               ></v-btn>
               <!-- login button -->
-            </VCol>
-            <VCol cols="12">
+            </v-col>
+            <v-col cols="12">
               <v-btn
                 class="text-none"
                 color="white"
@@ -84,12 +84,12 @@
                 to="/account/retrieve"
               ></v-btn>
               <!-- login button -->
-            </VCol>
+            </v-col>
             <!-- create account -->
-          </VRow>
-        </VForm>
-      </VCardText>
-      <v-card
+          </v-row>
+        </v-form>
+      </v-cardtext>
+      <!--<v-card
         class="mx-auto bg-surface-light"
         :href="BASE_API + '/user/login?redirect=new'"
       >
@@ -103,8 +103,8 @@
         ><template v-slot:subtitle>
           <span>您将在 {{ BASE_API }} 完成登录</span>
         </template>
-      </v-card>
-    </VCard>
+      </v-card>-->
+    </v-card>
   </div>
   <LoadingDialog :show="loading" text="登录中" />
 </template>
@@ -194,6 +194,7 @@ export default {
         this.$router.push("/");
       }
     },
+
     addtoast(text) {
       this.$toast.add({
         severity: "info",
diff --git a/src/pages/account/logout.vue b/src/pages/account/logout.vue
index 3c5d6de..1179d9e 100644
--- a/src/pages/account/logout.vue
+++ b/src/pages/account/logout.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-card class="mx-auto" rel="noopener" target="_blank">
+    <v-card class="mx-auto" rel="noopener" target="_blank" border>
       <template v-slot:title>
         <span>{{ titlemessage }}</span> </template
       ><template v-slot:subtitle>
diff --git a/src/pages/account/register.vue b/src/pages/account/register.vue
index fd40eaf..8b6b606 100644
--- a/src/pages/account/register.vue
+++ b/src/pages/account/register.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard class="auth-card pa-4 pt-7" max-width="448">
+    <v-card class="auth-card pa-4 pt-7" max-width="448" border>
       <v-row>
         <v-col cols="12">
-          <VCardText>
+          <v-cardtext>
             <h5 class="text-h5 font-weight-semibold mb-1">
               欢迎来到ZeroCatNext！ 👋🏻
             </h5>
             <p class="mb-0">创建你的账户</p>
-          </VCardText>
+          </v-cardtext>
         </v-col></v-row
       >
 
-      <VCardText>
-        <VForm>
-          <VRow>
+      <v-cardtext>
+        <v-form>
+          <v-row>
             <!-- email -->
-            <VCol cols="12">
-              <VTextField
+            <v-col cols="12">
+              <v-text-field
                 label="邮箱"
                 type="email"
                 v-model="email"
@@ -25,8 +25,8 @@
                 required
                 :rules="emailRules"
               >
-              </VTextField>
-              <VTextField
+              </v-text-field>
+              <v-text-field
                 label="用户名"
                 type="text"
                 v-model="username"
@@ -34,16 +34,16 @@
                 required
                 :rules="usernameRules"
               >
-              </VTextField>
-            </VCol>
-            <VCol cols="9">
+              </v-text-field>
+            </v-col>
+            <v-col cols="9">
               <div id="recaptcha-div"></div>
-            </VCol>
-            <VCol cols="3">
+            </v-col>
+            <v-col cols="3">
               <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-            </VCol>
+            </v-col>
             <!-- password -->
-            <VCol cols="12">
+            <v-col cols="12">
               <!-- remember me checkbox
               <div class="d-flex align-center justify-space-between flex-wrap ">
                 <VCheckbox disabled label="Remember me" />
@@ -169,9 +169,9 @@
                   </v-card>
                 </template>
               </v-dialog>
-            </VCol>
+            </v-col>
 
-            <VCol cols="12">
+            <v-col cols="12">
               <v-btn
                 class="text-none"
                 color="white"
@@ -194,11 +194,11 @@
                 to="/account/retrieve"
               ></v-btn>
               <!-- login button -->
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-      <v-card
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-cardtext>
+      <!--<v-card
         class="mx-auto bg-surface-light"
         :href="BASE_API + '/user/login?redirect=new'"
       >
@@ -212,8 +212,8 @@
         ><template v-slot:subtitle>
           <span>您将在 {{ BASE_API }} 完成登录</span>
         </template>
-      </v-card>
-    </VCard>
+      </v-card>-->
+    </v-card>
   </div>
 
   <LoadingDialog :show="loading" text="正在注册" />
diff --git a/src/pages/account/retrieve.vue b/src/pages/account/retrieve.vue
index 04a1135..671f819 100644
--- a/src/pages/account/retrieve.vue
+++ b/src/pages/account/retrieve.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard class="auth-card pa-4 pt-7" max-width="448">
+    <v-card class="auth-card pa-4 pt-7" max-width="448" border>
       <v-row>
         <v-col cols="12">
-          <VCardText>
+          <v-cardtext>
             <h5 class="text-h5 font-weight-semibold mb-1">
               欢迎来到ZeroCatNext！ 👋🏻
             </h5>
             <p class="mb-0">找回密码</p>
-          </VCardText>
+          </v-cardtext>
         </v-col></v-row
       >
 
-      <VCardText>
-        <VForm>
-          <VRow>
+      <v-cardtext>
+        <v-form>
+          <v-row>
             <!-- email -->
-            <VCol cols="12">
-              <VTextField
+            <v-col cols="12">
+              <v-text-field
                 label="邮箱"
                 type="text"
                 v-model="email"
                 variant="outlined"
                 :rules="emailRules"
-              ></VTextField>
-            </VCol>
-            <VCol cols="9">
+              ></v-text-field>
+            </v-col>
+            <v-col cols="9">
               <div id="recaptcha-div"></div>
-            </VCol>
-            <VCol cols="3">
+            </v-col>
+            <v-col cols="3">
               <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-            </VCol>
+            </v-col>
             <!-- password -->
-            <VCol cols="12">
+            <v-col cols="12">
               <!-- remember me checkbox
               <div class="d-flex align-center justify-space-between flex-wrap ">
                 <VCheckbox disabled label="Remember me" />
@@ -51,8 +51,8 @@
                 append-icon="mdi-arrow-right"
               ></v-btn>
               <!-- login button -->
-            </VCol>
-            <VCol cols="12">
+            </v-col>
+            <v-col cols="12">
               <v-btn
                 class="text-none"
                 color="white"
@@ -75,12 +75,12 @@
                 to="/account/register"
               ></v-btn>
               <!-- login button -->
-            </VCol>
+            </v-col>
             <!-- create account -->
-          </VRow>
-        </VForm>
-      </VCardText>
-      <v-card
+          </v-row>
+        </v-form>
+      </v-cardtext>
+      <!--<v-card
         class="mx-auto bg-surface-light"
         :href="BASE_API + '/user/login?redirect=new'"
       >
@@ -94,8 +94,8 @@
         ><template v-slot:subtitle>
           <span>您将在 {{ BASE_API }} 完成登录</span>
         </template>
-      </v-card>
-    </VCard>
+      </v-card>-->
+    </v-card>
   </div>
   <LoadingDialog :show="loading" text="正在发送邮件" />
 </template>
diff --git a/src/pages/account/retrievecallback.vue b/src/pages/account/retrievecallback.vue
index 998d9ec..475b10a 100644
--- a/src/pages/account/retrievecallback.vue
+++ b/src/pages/account/retrievecallback.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard class="auth-card pa-4 pt-7" max-width="448">
+    <v-card class="auth-card pa-4 pt-7" max-width="448" border>
       <v-row>
         <v-col cols="12">
-          <VCardText>
+          <v-cardtext>
             <h5 class="text-h5 font-weight-semibold mb-1">
               欢迎来到ZeroCatNext！ 👋🏻
             </h5>
             <p class="mb-0">重设密码</p>
-          </VCardText>
+          </v-cardtext>
         </v-col></v-row
       >
 
-      <VCardText>
-        <VForm>
-          <VRow>
+      <v-cardtext>
+        <v-form>
+          <v-row>
             <!-- email -->
-            <VCol cols="12">
-              <VTextField
+            <v-col cols="12">
+              <v-text-field
                 label="密码"
                 v-model="password"
                 variant="outlined"
@@ -26,8 +26,8 @@
                 :type="show1 ? 'text' : 'password'"
                 @click:append="show1 = !show1"
               >
-              </VTextField>
-              <VTextField
+              </v-text-field>
+              <v-text-field
                 label="确认密码"
                 v-model="password2"
                 variant="outlined"
@@ -36,16 +36,16 @@
                 :type="show2 ? 'text' : 'password'"
                 @click:append="show2 = !show2"
               >
-              </VTextField>
-            </VCol>
-            <VCol cols="9">
+              </v-text-field>
+            </v-col>
+            <v-col cols="9">
               <div id="recaptcha-div"></div>
-            </VCol>
-            <VCol cols="3">
+            </v-col>
+            <v-col cols="3">
               <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-            </VCol>
+            </v-col>
             <!-- password -->
-            <VCol cols="12">
+            <v-col cols="12">
               <!-- remember me checkbox
               <div class="d-flex align-center justify-space-between flex-wrap ">
                 <VCheckbox disabled label="Remember me" />
@@ -64,8 +64,8 @@
                 append-icon="mdi-arrow-right"
               ></v-btn>
               <!-- login button -->
-            </VCol>
-            <VCol cols="12">
+            </v-col>
+            <v-col cols="12">
               <v-btn
                 class="text-none"
                 color="white"
@@ -77,12 +77,12 @@
                 to="/account/login"
               ></v-btn>
               <!-- login button -->
-            </VCol>
+            </v-col>
             <!-- create account -->
-          </VRow>
-        </VForm>
-      </VCardText>
-      <v-card
+          </v-row>
+        </v-form>
+      </v-cardtext>
+      <!--<v-card
         class="mx-auto bg-surface-light"
         :href="BASE_API + '/user/login?redirect=new'"
       >
@@ -96,8 +96,8 @@
         ><template v-slot:subtitle>
           <span>您将在 {{ BASE_API }} 完成登录</span>
         </template>
-      </v-card>
-    </VCard>
+      </v-card>-->
+    </v-card>
   </div>
   <LoadingDialog :show="loading" text="正在重设密码" />
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index e693c5b..8f2e756 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,7 +2,7 @@
   <v-layout>
     <v-app-bar color="transparent" flat>
       <div class="d-flex flex-1-1-0 ps-md-4">
-        <v-avatar image="https://vuetifyjs.b-cdn.net/docs/images/logos/v.png" />
+        <v-avatar :image="localuser.islogin==true?'https://s4-1.wuyuan.1r.ink/user/'+localuser.user.avatar:'../assets/ZeroCatLogo.svg'"/>
       </div>
 
       <div class="d-flex flex-1-1-0 pe-3">
@@ -225,10 +225,11 @@
 import { ref } from "vue";
 import request from "../axios/axios";
 import $vuetify from "@/plugins/vuetify";
-
+import {localuser} from "../stores/user"
 export default {
   data() {
     return {
+      localuser,
       teams: [
         {
           title: "孙悟元",