1

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": "*",

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>