chore: alter notifications type column

2026-02-24 07:00:49 +08:00 · 2025-08-14 15:15:58 +08:00
46 changed files with 2299 additions and 4966 deletions
--- a/.github/workflows/deploy-staging.yml
+++ b/.github/workflows/deploy-staging.yml
@@ -1,23 +0,0 @@
-name: Staging CI & CD
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    environment: Deploy
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Deploy to Server
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ secrets.SSH_HOST }}
-          username: root
-          key: ${{ secrets.SSH_KEY }}
-          script: bash /opt/openisle/deploy-staging.sh
-
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,9 +1,9 @@
 name: CI & CD

 on:
+  push:
+    branches: [main]
  workflow_dispatch:
-  schedule:
-    - cron: "0 19 * * *"   # 每天 UTC 19:00，相当于北京时间凌晨3点

 jobs:
  build-and-deploy:
@@ -13,6 +13,22 @@ jobs:
    steps:
      - uses: actions/checkout@v4

+      # - uses: actions/setup-java@v4
+      #   with:
+      #     java-version: '17'
+      #     distribution: 'temurin'
+
+      # - run: mvn -B clean package -DskipTests
+
+      # - uses: actions/setup-node@v4
+      #   with:
+      #     node-version: '20'
+
+      # - run: |
+      #     cd open-isle-cli
+      #     npm ci
+      #     npm run build
+
      - name: Deploy to Server
        uses: appleboy/ssh-action@v1.0.3
        with:
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@

 OpenIsle 是一个使用 Spring Boot 和 Vue 3 构建的全栈开源社区平台，提供用户注册、登录、贴文发布、评论交互等完整功能，可用于项目社区或直接打造自主社区站点。

-## 🚧 开发
+## 🚀 部署

 ### 后端

@@ -20,26 +20,9 @@ OpenIsle 是一个使用 Spring Boot 和 Vue 3 构建的全栈开源社区平台

 ### 前端

-1. 进入前端目录
-    ```bash
-    cd frontend_nuxt
-    ```
-2. 安装依赖
-    ```bash
-    npm install
-    ```
-3. 启动开发服务
-    ```bash
-    npm run dev
-    ```
-
-    生产版本使用如下命令编译：
-
-    ```bash
-    npm run build
-    ```
-
-    会在 `.output` 目录生成文件，配合线上网站方式部署
+1. `cd open-isle-cli`
+2. 执行 `npm install`
+3. `npm run serve`可在本地启动开发服务，产品环境使用 `npm run build`生成 `dist/` 文件，配合线上网站方式部署

 ## ✨ 项目特点

--- a/backend/src/main/java/com/openisle/config/SecurityConfig.java
+++ b/backend/src/main/java/com/openisle/config/SecurityConfig.java
@@ -75,16 +75,14 @@ public class SecurityConfig {
        cfg.setAllowedOrigins(List.of(
                "http://127.0.0.1:8080",
                "http://127.0.0.1:3000",
-                "http://127.0.0.1:3001",
                "http://127.0.0.1",
                "http://localhost:8080",
                "http://localhost:3000",
-                "http://localhost:3001",
                "http://localhost",
                "http://30.211.97.238:3000",
                "http://30.211.97.238",
-                "http://192.168.7.98",
-                "http://192.168.7.98:3000",
+                "http://192.168.7.70",
+                "http://192.168.7.70:8080",
                websiteUrl,
                websiteUrl.replace("://www.", "://")
        ));
--- a/backend/src/main/resources/db/migration/V2__alter_notifications_type_column.sql
+++ b/backend/src/main/resources/db/migration/V2__alter_notifications_type_column.sql
@@ -0,0 +1,2 @@
+ALTER TABLE notifications
+    MODIFY COLUMN type VARCHAR(50) NOT NULL;
--- a/frontend_nuxt/.env.example
+++ b/frontend_nuxt/.env.example
@@ -1,15 +1,6 @@
-; 本地部署后端
-; NUXT_PUBLIC_API_BASE_URL=https://127.0.0.1:8081
-; 预发环境后端
-; NUXT_PUBLIC_API_BASE_URL=https://staging.open-isle.com
-; 生产环境后端
 NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
-
-; 预发环境
-; NUXT_PUBLIC_WEBSITE_BASE_URL=https://staging.open-isle.com
-; 正式环境/生产环境
 NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
-NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
+NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-xxx.apps.googleusercontent.com
 NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
 NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
 NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
--- a/frontend_nuxt/.env.staging.example
+++ b/frontend_nuxt/.env.staging.example
@@ -1,16 +0,0 @@
-; 本地部署后端
-; NUXT_PUBLIC_API_BASE_URL=https://127.0.0.1:8081
-; 预发环境后端
-NUXT_PUBLIC_API_BASE_URL=https://staging.open-isle.com
-; 生产环境后端
-; NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
-
-; 预发环境
-NUXT_PUBLIC_WEBSITE_BASE_URL=https://staging.open-isle.com
-; 正式环境/生产环境
-; NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
-
-NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
-NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
-NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
-NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -15,77 +15,62 @@
      <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
        <NuxtPage keepalive />
      </div>
-
-      <div v-if="showNewPostIcon && isMobile" class="app-new-post-icon" @click="goToNewPost">
-        <i class="fas fa-edit"></i>
-      </div>
    </div>
    <GlobalPopups />
  </div>
 </template>

-<script setup>
+<script>
 import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
+
 import GlobalPopups from '~/components/GlobalPopups.vue'
-import { useIsMobile } from '~/utils/screen'

-const isMobile = useIsMobile()
-const menuVisible = ref(!isMobile.value)
+export default {
+  name: 'App',
+  components: { HeaderComponent, MenuComponent, GlobalPopups },
+  setup() {
+    const isMobile = useIsMobile()
+    const menuVisible = ref(!isMobile.value)
+    const hideMenu = computed(() => {
+      return [
+        '/login',
+        '/signup',
+        '/404',
+        '/signup-reason',
+        '/github-callback',
+        '/twitter-callback',
+        '/discord-callback',
+        '/forgot-password',
+        '/google-callback',
+      ].includes(useRoute().path)
+    })

-const showNewPostIcon = computed(() => useRoute().path === '/')
+    const header = useTemplateRef('header')

-const hideMenu = computed(() => {
-  return [
-    '/login',
-    '/signup',
-    '/404',
-    '/signup-reason',
-    '/github-callback',
-    '/twitter-callback',
-    '/discord-callback',
-    '/forgot-password',
-    '/google-callback',
-  ].includes(useRoute().path)
-})
+    onMounted(() => {
+      if (typeof window !== 'undefined') {
+        menuVisible.value = window.innerWidth > 768
+      }
+    })

-const header = useTemplateRef('header')
+    const handleMenuOutside = (event) => {
+      const btn = header.value.$refs.menuBtn
+      if (btn && (btn === event.target || btn.contains(event.target))) {
+        return // 如果是菜单按钮的点击，不处理关闭
+      }

-onMounted(() => {
-  if (typeof window !== 'undefined') {
-    menuVisible.value = window.innerWidth > 768
-  }
-})
+      if (isMobile.value) {
+        menuVisible.value = false
+      }
+    }

-const handleMenuOutside = (event) => {
-  const btn = header.value.$refs.menuBtn
-  if (btn && (btn === event.target || btn.contains(event.target))) {
-    return // 如果是菜单按钮的点击，不处理关闭
-  }
-
-  if (isMobile.value) {
-    menuVisible.value = false
-  }
-}
-
-const goToNewPost = () => {
-  navigateTo('/new-post', { replace: false })
+    return { menuVisible, hideMenu, handleMenuOutside, header }
+  },
 }
 </script>
-
 <style src="~/assets/global.css"></style>
 <style>
-/* 页面过渡效果 */
-.page-enter-active,
-.page-leave-active {
-  transition: all 0.4s;
-}
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-  filter: blur(10px);
-}
-
 .header-container {
  position: fixed;
  top: 0;
@@ -118,24 +103,6 @@ const goToNewPost = () => {
  margin: 0 auto;
 }

-.app-new-post-icon {
-  background-color: var(--new-post-icon-color);
-  color: white;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  position: fixed;
-  bottom: 40px;
-  right: 20px;
-  font-size: 20px;
-  cursor: pointer;
-  z-index: 1000;
-  display: flex;
-  backdrop-filter: blur(5px);
-  justify-content: center;
-  align-items: center;
-}
-
@media (max-width: 768px) {
  .content,
  .content.menu-open {
--- a/frontend_nuxt/assets/fonts.css
+++ b/frontend_nuxt/assets/fonts.css
@@ -1,143 +0,0 @@
-/* Maple Mono - Thin 100 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-100-normal.woff2") format("woff2");
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - Thin Italic 100 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-100-italic.woff2") format("woff2");
-  font-weight: 100;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - ExtraLight 200 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-200-normal.woff2") format("woff2");
-  font-weight: 200;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - ExtraLight Italic 200 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-200-italic.woff2") format("woff2");
-  font-weight: 200;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - Light 300 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-300-normal.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - Light Italic 300 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-300-italic.woff2") format("woff2");
-  font-weight: 300;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - Regular 400 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-400-normal.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - Italic 400 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-400-italic.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - Medium 500 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-500-normal.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - Medium Italic 500 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-500-italic.woff2") format("woff2");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - SemiBold 600 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-600-normal.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - SemiBold Italic 600 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-600-italic.woff2") format("woff2");
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - Bold 700 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-700-normal.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - Bold Italic 700 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-700-italic.woff2") format("woff2");
-  font-weight: 700;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Maple Mono - ExtraBold 800 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-800-normal.woff2") format("woff2");
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Maple Mono - ExtraBold Italic 800 */
-@font-face {
-  font-family: "Maple Mono";
-  src: url("/fonts/maple-mono-800-italic.woff2") format("woff2");
-  font-weight: 800;
-  font-style: italic;
-  font-display: swap;
-}
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -2,13 +2,11 @@
  --primary-color-hover: rgb(9, 95, 105);
  --primary-color: rgb(10, 110, 120);
  --primary-color-disabled: rgba(93, 152, 156, 0.5);
-  --new-post-icon-color: rgba(10, 111, 120, 0.598);
  --header-height: 60px;
  --header-background-color: white;
  --header-border-color: lightgray;
  --header-text-color: black;
-  /* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */
-  --app-menu-background-color: white;
+  --menu-background-color: white;
  --background-color: white;
  /* --background-color-blur: rgba(255, 255, 255, 0.57); */
  --background-color-blur: var(--background-color);
@@ -17,16 +15,14 @@
  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
  --menu-text-color: black;
  --scroller-background-color: rgba(130, 175, 180, 0.5);
-  /* --normal-background-color: rgb(241, 241, 241); */
-  --normal-background-color: white;
+  --normal-background-color: rgb(241, 241, 241);
  --lottery-background-color: rgb(241, 241, 241);
-  --code-highlight-background-color: rgb(241, 241, 241);
  --login-background-color: rgb(248, 248, 248);
  --login-background-color-hover: #e0e0e0;
  --text-color: black;
  --blockquote-text-color: #6a737d;
  --menu-width: 200px;
-  --page-max-width: 1400px;
+  --page-max-width: 1200px;
  --page-max-width-mobile: 900px;
  --article-info-background-color: #f0f0f0;
  --activity-card-background-color: #fafafa;
@@ -37,9 +33,8 @@
  --header-border-color: #555;
  --primary-color: rgb(17, 182, 197);
  --primary-color-hover: rgb(13, 137, 151);
-  --new-post-icon-color: rgba(10, 111, 120, 0.598);
  --header-text-color: white;
-  --app-menu-background-color: #333;
+  --menu-background-color: #333;
  --background-color: #333;
  /* --background-color-blur: #333333a4; */
  --background-color-blur: var(--background-color);
@@ -47,10 +42,8 @@
  --normal-border-color: #555;
  --menu-selected-background-color: rgba(255, 255, 255, 0.1);
  --menu-text-color: white;
-  /* --normal-background-color: #000000; */
-  --normal-background-color: #333;
+  --normal-background-color: #000000;
  --lottery-background-color: #4e4e4e;
-  --code-highlight-background-color: #262b35;
  --login-background-color: #575757;
  --login-background-color-hover: #717171;
  --text-color: #eee;
@@ -138,43 +131,13 @@ body {
 }

 .info-content-text pre {
-  display: flex;
-  background-color: var(--code-highlight-background-color);
+  background-color: var(--normal-background-color);
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.5;
  position: relative;
 }

-.info-content-text pre .line-numbers {
-  counter-reset: line-number 0;
-  width: 2em;
-  font-size: 13px;
-  position: sticky;
-  flex-shrink: 0;
-  font-family: 'Maple Mono', monospace;
-  margin: 1em 0;
-  color: #888;
-  border-right: 1px solid #888;
-  box-sizing: border-box;
-  padding-right: 0.5em;
-  text-align: end;
-}
-
-.info-content-text pre .line-numbers .line-number::before {
-  content: counter(line-number);
-  counter-increment: line-number;
-}
-
-.info-content-text code {
-  font-family: 'Maple Mono', monospace;
-  font-size: 13px;
-  border-radius: 4px;
-  white-space: no-wrap;
-  background-color: var(--code-highlight-background-color);
-  color: var(--text-color);
-}
-
 .copy-code-btn {
  position: absolute;
  top: 4px;
@@ -193,13 +156,20 @@ body {
  opacity: 1;
 }

-.about-content a,
+.info-content-text code {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 13px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  background-color: var(--normal-background-color);
+  color: var(--text-color);
+}
+
 .info-content-text a {
  color: var(--primary-color);
  text-decoration: none;
 }

-.about-content a:hover,
 .info-content-text a:hover {
  text-decoration: underline;
 }
@@ -297,7 +267,7 @@ body {
  }

  .info-content-text pre {
-    line-height: 1.5;
+    line-height: 1.1;
  }

  .vditor-panel {
@@ -306,29 +276,6 @@ body {
  }
 }

-/* Transition API */
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-
-::view-transition-old(root) {
-  z-index: 1;
-}
-
-::view-transition-new(root) {
-  z-index: 2147483646;
-}
-
-[data-theme='dark']::view-transition-old(root) {
-  z-index: 2147483646;
-}
-
-[data-theme='dark']::view-transition-new(root) {
-  z-index: 1;
-}
-
 /* NProgress styles */
 #nprogress {
  pointer-events: none;
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/frontend_nuxt/components/Dropdown.vue
@@ -114,7 +114,7 @@
 </template>

 <script>
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useIsMobile } from '~/utils/screen'

 export default {
@@ -312,7 +312,7 @@ export default {
  border: none;
  outline: none;
  margin-left: 5px;
-  background-color: var(--app-menu-background-color);
+  background-color: var(--menu-background-color);
  color: var(--text-color);
 }

@@ -352,7 +352,7 @@ export default {
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: var(--app-menu-background-color);
+  background-color: var(--menu-background-color);
  z-index: 1300;
  display: flex;
  flex-direction: column;
--- a/frontend_nuxt/components/DropdownMenu.vue
+++ b/frontend_nuxt/components/DropdownMenu.vue
@@ -3,24 +3,22 @@
    <div class="dropdown-trigger" @click="toggle">
      <slot name="trigger"></slot>
    </div>
-    <Transition name="dropdown-menu">
-      <div v-if="visible" class="dropdown-menu-container">
-        <div
-          v-for="(item, idx) in items"
-          :key="idx"
-          class="dropdown-item"
-          :style="{ color: item.color || 'inherit' }"
-          @click="handle(item)"
-        >
-          {{ item.text }}
-        </div>
+    <div v-if="visible" class="dropdown-menu-container">
+      <div
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="dropdown-item"
+        :style="{ color: item.color || 'inherit' }"
+        @click="handle(item)"
+      >
+        {{ item.text }}
      </div>
-    </Transition>
+    </div>
  </div>
 </template>

 <script>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 export default {
  name: 'DropdownMenu',
  props: {
@@ -63,28 +61,17 @@ export default {
  position: relative;
  display: inline-block;
 }
-
 .dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
 }

-.dropdown-menu-enter-active,
-.dropdown-menu-leave-active {
-  transition: all 0.4s;
-}
-.dropdown-menu-enter-from,
-.dropdown-menu-leave-to {
-  opacity: 0;
-  transform: translateY(-16px);
-}
-
 .dropdown-menu-container {
  position: absolute;
  top: 100%;
  right: 0;
-  background-color: var(--app-menu-background-color);
+  background-color: var(--menu-background-color);
  border: 1px solid var(--normal-border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
@@ -95,9 +82,7 @@ export default {
 .dropdown-item {
  padding: 8px 16px;
  white-space: nowrap;
-  cursor: pointer;
 }
-
 .dropdown-item:hover {
  background-color: var(--menu-selected-background-color);
 }
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -8,7 +8,7 @@
          </button>
          <span v-if="isMobile && unreadCount > 0" class="menu-unread-dot"></span>
        </div>
-        <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
+        <NuxtLink class="logo-container" :to="`/`">
          <img
            alt="OpenIsle"
            src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
@@ -20,22 +20,11 @@
      </div>

      <ClientOnly>
-        <div class="header-content-right">
+        <div v-if="isLogin" class="header-content-right">
          <div v-if="isMobile" class="search-icon" @click="search">
            <i class="fas fa-search"></i>
          </div>
-
-          <div v-if="isMobile" class="theme-icon" @click="cycleTheme">
-            <i :class="iconClass"></i>
-          </div>
-
-          <ToolTip v-if="!isMobile && isLogin" content="发帖" placement="bottom">
-            <div class="new-post-icon" @click="goToNewPost">
-              <i class="fas fa-edit"></i>
-            </div>
-          </ToolTip>
-
-          <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
+          <DropdownMenu ref="userMenu" :items="headerMenuItems">
            <template #trigger>
              <div class="avatar-container">
                <img class="avatar-img" :src="avatar" alt="avatar" />
@@ -43,11 +32,14 @@
              </div>
            </template>
          </DropdownMenu>
+        </div>

-          <div v-if="!isLogin" class="auth-btns">
-            <div class="header-content-item-main" @click="goToLogin">登录</div>
-            <div class="header-content-item-secondary" @click="goToSignup">注册</div>
+        <div v-else class="header-content-right">
+          <div v-if="isMobile" class="search-icon" @click="search">
+            <i class="fas fa-search"></i>
          </div>
+          <div class="header-content-item-main" @click="goToLogin">登录</div>
+          <div class="header-content-item-secondary" @click="goToSignup">注册</div>
        </div>
      </ClientOnly>

@@ -60,13 +52,10 @@
 import { ClientOnly } from '#components'
 import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
-import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
-import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
-
 const props = defineProps({
  showMenuBtn: {
    type: Boolean,
@@ -124,33 +113,12 @@ const goToLogout = () => {
  navigateTo('/login', { replace: true })
 }

-const goToNewPost = () => {
-  navigateTo('/new-post', { replace: false })
-}
-
-const refrechData = async () => {
-  await fetchUnreadCount()
-  window.dispatchEvent(new Event('refresh-home'))
-}
-
 const headerMenuItems = computed(() => [
  { text: '设置', onClick: goToSettings },
  { text: '个人主页', onClick: goToProfile },
  { text: '退出', onClick: goToLogout },
 ])

-/** 其余逻辑保持不变 */
-const iconClass = computed(() => {
-  switch (themeState.mode) {
-    case ThemeMode.DARK:
-      return 'fas fa-moon'
-    case ThemeMode.LIGHT:
-      return 'fas fa-sun'
-    default:
-      return 'fas fa-desktop'
-  }
-})
-
 onMounted(async () => {
  const updateAvatar = async () => {
    if (authState.loggedIn) {
@@ -178,14 +146,22 @@ onMounted(async () => {
      await updateUnread()
    },
  )
+
+  watch(
+    () => router.currentRoute.value.fullPath,
+    () => {
+      if (userMenu.value) userMenu.value.close()
+      showSearch.value = false
+    },
+  )
 })
 </script>

 <style scoped>
 .header {
  display: flex;
+  justify-content: space-between;
  align-items: center;
-  justify-content: center;
  height: var(--header-height);
  background-color: var(--background-color-blur);
  backdrop-filter: blur(10px);
@@ -207,8 +183,10 @@ onMounted(async () => {
  display: flex;
  flex-direction: row;
  align-items: center;
+  justify-content: space-between;
  width: 100%;
  height: 100%;
+  margin: 0 auto;
  max-width: var(--page-max-width);
 }

@@ -219,14 +197,6 @@ onMounted(async () => {
 }

 .header-content-right {
-  display: flex;
-  margin-left: auto;
-  flex-direction: row;
-  align-items: center;
-  gap: 20px;
-}
-
-.auth-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -308,18 +278,11 @@ onMounted(async () => {
  background-color: var(--menu-selected-background-color);
 }

-.search-icon,
-.theme-icon {
+.search-icon {
  font-size: 18px;
  cursor: pointer;
 }

-.new-post-icon {
-  font-size: 18px;
-  cursor: pointer;
-  margin-right: 10px;
-}
-
@media (max-width: 1200px) {
  .header-content {
    padding-left: 15px;
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -1,181 +1,168 @@
 <template>
  <transition name="slide">
    <nav v-if="visible" class="menu">
-      <div class="menu-content">
-        <div class="menu-item-container">
-          <NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleItemClick">
-            <i class="menu-item-icon fas fa-hashtag"></i>
-            <span class="menu-item-text">话题</span>
-          </NuxtLink>
-          <NuxtLink
-            class="menu-item"
-            exact-active-class="selected"
-            to="/new-post"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-edit"></i>
-            <span class="menu-item-text">发帖</span>
-          </NuxtLink>
-          <NuxtLink
-            class="menu-item"
-            exact-active-class="selected"
-            to="/message"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-envelope"></i>
-            <span class="menu-item-text">我的消息</span>
-            <span v-if="unreadCount > 0" class="unread-container">
-              <span class="unread"> {{ showUnreadCount }} </span>
-            </span>
-          </NuxtLink>
-          <NuxtLink
-            class="menu-item"
-            exact-active-class="selected"
-            to="/about"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-info-circle"></i>
-            <span class="menu-item-text">关于</span>
-          </NuxtLink>
-          <NuxtLink
-            class="menu-item"
-            exact-active-class="selected"
-            to="/activities"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-gift"></i>
-            <span class="menu-item-text">🔥 活动</span>
-          </NuxtLink>
-          <NuxtLink
-            v-if="shouldShowStats"
-            class="menu-item"
-            exact-active-class="selected"
-            to="/about/stats"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-chart-line"></i>
-            <span class="menu-item-text">站点统计</span>
-          </NuxtLink>
-        </div>
+      <div class="menu-item-container">
+        <NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleItemClick">
+          <i class="menu-item-icon fas fa-hashtag"></i>
+          <span class="menu-item-text">话题</span>
+        </NuxtLink>
+        <NuxtLink
+          class="menu-item"
+          exact-active-class="selected"
+          to="/message"
+          @click="handleItemClick"
+        >
+          <i class="menu-item-icon fas fa-envelope"></i>
+          <span class="menu-item-text">我的消息</span>
+          <span v-if="unreadCount > 0" class="unread-container">
+            <span class="unread"> {{ showUnreadCount }} </span>
+          </span>
+        </NuxtLink>
+        <NuxtLink
+          class="menu-item"
+          exact-active-class="selected"
+          to="/about"
+          @click="handleItemClick"
+        >
+          <i class="menu-item-icon fas fa-info-circle"></i>
+          <span class="menu-item-text">关于</span>
+        </NuxtLink>
+        <NuxtLink
+          class="menu-item"
+          exact-active-class="selected"
+          to="/activities"
+          @click="handleItemClick"
+        >
+          <i class="menu-item-icon fas fa-gift"></i>
+          <span class="menu-item-text">🔥 活动</span>
+        </NuxtLink>
+        <NuxtLink
+          v-if="shouldShowStats"
+          class="menu-item"
+          exact-active-class="selected"
+          to="/about/stats"
+          @click="handleItemClick"
+        >
+          <i class="menu-item-icon fas fa-chart-line"></i>
+          <span class="menu-item-text">站点统计</span>
+        </NuxtLink>
+        <NuxtLink
+          class="menu-item"
+          exact-active-class="selected"
+          to="/new-post"
+          @click="handleItemClick"
+        >
+          <i class="menu-item-icon fas fa-edit"></i>
+          <span class="menu-item-text">发帖</span>
+        </NuxtLink>
+      </div>

-        <div class="menu-section">
-          <div class="section-header" @click="categoryOpen = !categoryOpen">
-            <span>类别</span>
-            <i :class="categoryOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
-          </div>
-          <div v-if="categoryOpen" class="section-items">
-            <div v-if="isLoadingCategory" class="menu-loading-container">
-              <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-            </div>
-            <div
-              v-else
-              v-for="c in categoryData"
-              :key="c.id"
-              class="section-item"
-              @click="gotoCategory(c)"
-            >
-              <template v-if="c.smallIcon || c.icon">
-                <img
-                  v-if="isImageIcon(c.smallIcon || c.icon)"
-                  :src="c.smallIcon || c.icon"
-                  class="section-item-icon"
-                  :alt="c.name"
-                />
-                <i v-else :class="['section-item-icon', c.smallIcon || c.icon]"></i>
-              </template>
-              <span class="section-item-text">
-                {{ c.name }}
-                <span class="section-item-text-count" v-if="c.count >= 0">x {{ c.count }}</span>
-              </span>
-            </div>
-          </div>
+      <div class="menu-section">
+        <div class="section-header" @click="categoryOpen = !categoryOpen">
+          <span>类别</span>
+          <i :class="categoryOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
        </div>
-
-        <div class="menu-section">
-          <div class="section-header" @click="tagOpen = !tagOpen">
-            <span>tag</span>
-            <i :class="tagOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
+        <div v-if="categoryOpen" class="section-items">
+          <div v-if="isLoadingCategory" class="menu-loading-container">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
          </div>
-          <div v-if="tagOpen" class="section-items">
-            <div v-if="isLoadingTag" class="menu-loading-container">
-              <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-            </div>
-            <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
+          <div
+            v-else
+            v-for="c in categoryData"
+            :key="c.id"
+            class="section-item"
+            @click="gotoCategory(c)"
+          >
+            <template v-if="c.smallIcon || c.icon">
              <img
-                v-if="isImageIcon(t.smallIcon || t.icon)"
-                :src="t.smallIcon || t.icon"
+                v-if="isImageIcon(c.smallIcon || c.icon)"
+                :src="c.smallIcon || c.icon"
                class="section-item-icon"
-                :alt="t.name"
+                :alt="c.name"
              />
-              <i v-else class="section-item-icon fas fa-hashtag"></i>
-              <span class="section-item-text"
-                >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
-              >
-            </div>
+              <i v-else :class="['section-item-icon', c.smallIcon || c.icon]"></i>
+            </template>
+            <span class="section-item-text">
+              {{ c.name }}
+              <span class="section-item-text-count" v-if="c.count >= 0">x {{ c.count }}</span>
+            </span>
          </div>
        </div>
      </div>

-      <!-- 解决动态样式的水合错误 -->
-      <ClientOnly v-if="!isMobile">
-        <div class="menu-footer">
-          <div class="menu-footer-btn" @click="cycleTheme">
-            <i :class="iconClass"></i>
+      <div class="menu-section">
+        <div class="section-header" @click="tagOpen = !tagOpen">
+          <span>tag</span>
+          <i :class="tagOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
+        </div>
+        <div v-if="tagOpen" class="section-items">
+          <div v-if="isLoadingTag" class="menu-loading-container">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+          </div>
+          <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
+            <img
+              v-if="isImageIcon(t.smallIcon || t.icon)"
+              :src="t.smallIcon || t.icon"
+              class="section-item-icon"
+              :alt="t.name"
+            />
+            <i v-else class="section-item-icon fas fa-hashtag"></i>
+            <span class="section-item-text"
+              >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
+            >
          </div>
        </div>
-      </ClientOnly>
+      </div>
+
+      <div class="menu-footer">
+        <div class="menu-footer-btn" @click="cycleTheme">
+          <i :class="iconClass"></i>
+        </div>
+      </div>
    </nav>
  </transition>
 </template>

 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
+import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
-import { useIsMobile } from '~/utils/screen'
-import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
-
-const isMobile = useIsMobile()
-
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl

 const props = defineProps({
-  visible: { type: Boolean, default: true },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
 })
+
 const emit = defineEmits(['item-click'])

 const categoryOpen = ref(true)
 const tagOpen = ref(true)
+const isLoadingCategory = ref(false)
+const isLoadingTag = ref(false)
+const categoryData = ref([])
+const tagData = ref([])

-/** ✅ 用 useAsyncData 替换原生 fetch，避免 SSR+CSR 二次请求 */
-const {
-  data: categoryData,
-  pending: isLoadingCategory,
-  error: categoryError,
-} = await useAsyncData(
-  // 稳定 key：避免 hydration 期误判
-  'menu:categories',
-  () => $fetch(`${API_BASE_URL}/api/categories`),
-  {
-    server: true, // SSR 预取
-    default: () => [], // 初始默认值，减少空判断
-    // 5 分钟内复用缓存，避免路由往返重复请求
-    staleTime: 5 * 60 * 1000,
-  },
-)
+const fetchCategoryData = async () => {
+  isLoadingCategory.value = true
+  const res = await fetch(`${API_BASE_URL}/api/categories`)
+  const data = await res.json()
+  categoryData.value = data
+  isLoadingCategory.value = false
+}

-const {
-  data: tagData,
-  pending: isLoadingTag,
-  error: tagError,
-} = await useAsyncData('menu:tags', () => $fetch(`${API_BASE_URL}/api/tags?limit=10`), {
-  server: true,
-  default: () => [],
-  staleTime: 5 * 60 * 1000,
-})
+const fetchTagData = async () => {
+  isLoadingTag.value = true
+  const res = await fetch(`${API_BASE_URL}/api/tags?limit=10`)
+  const data = await res.json()
+  tagData.value = data
+  isLoadingTag.value = false
+}

-/** 其余逻辑保持不变 */
 const iconClass = computed(() => {
  switch (themeState.mode) {
    case ThemeMode.DARK:
@@ -201,7 +188,6 @@ const updateCount = async () => {

 onMounted(async () => {
  await updateCount()
-  // 登录态变化时再拉一次未读数；与 useAsyncData 无关
  watch(() => authState.loggedIn, updateCount)
 })

@@ -225,34 +211,28 @@ const gotoTag = (t) => {
  navigateTo({ path: '/', query: { tags: value } }, { replace: true })
  handleItemClick()
 }
+
+await Promise.all([fetchCategoryData(), fetchTagData()])
 </script>

 <style scoped>
 .menu {
  position: sticky;
  top: var(--header-height);
-  width: 220px;
-  background-color: var(--app-menu-background-color);
+  width: 200px;
+  background-color: var(--menu-background-color);
  height: calc(100vh - 20px - var(--header-height));
  border-right: 1px solid var(--menu-border-color);
  display: flex;
  flex-direction: column;
+  padding: 10px;
  overflow-y: auto;
  scrollbar-width: none;
 }

-.menu-content {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-  padding: 10px 10px 0 10px;
+.menu-item-container {
 }

-/* .menu-item-container { */
-/**/
-/* } */
-
 .menu-item {
  padding: 4px 10px;
  text-decoration: none;
@@ -298,8 +278,10 @@ const gotoTag = (t) => {
 }

 .menu-footer {
-  position: relation;
+  position: fixed;
  height: 30px;
+  bottom: 10px;
+  right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
@@ -387,10 +369,6 @@ const gotoTag = (t) => {
    background-color: var(--background-color-blur);
  }

-  .menu-content {
-    border-radius: 20px;
-  }
-
  .slide-enter-active,
  .slide-leave-active {
    transition:
--- a/frontend_nuxt/components/SearchDropdown.vue
+++ b/frontend_nuxt/components/SearchDropdown.vue
@@ -37,10 +37,10 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue'
+import { useIsMobile } from '~/utils/screen'
 import Dropdown from '~/components/Dropdown.vue'
 import { stripMarkdown } from '~/utils/markdown'
-import { useIsMobile } from '~/utils/screen'
+import { ref, watch } from 'vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl

@@ -110,10 +110,6 @@ watch(selected, (val) => {
  selected.value = null
  keyword.value = ''
 })
-
-defineExpose({
-  toggle,
-})
 </script>

 <style scoped>
@@ -135,7 +131,7 @@ defineExpose({
 }

 .text-input {
-  background-color: var(--app-menu-background-color);
+  background-color: var(--menu-background-color);
  color: var(--text-color);
  border: none;
  outline: none;
--- a/frontend_nuxt/components/ToolTip.vue
+++ b/frontend_nuxt/components/ToolTip.vue
@@ -1,488 +0,0 @@
-<template>
-  <div class="tooltip-wrapper" ref="wrapperRef">
-    <!-- 触发器 -->
-    <div
-      class="tooltip-trigger"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-      @click="handleClick"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      :tabindex="focusable ? 0 : -1"
-    >
-      <slot />
-    </div>
-
-    <!-- 提示内容 -->
-    <Transition name="tooltip-fade">
-      <div
-        v-if="visible"
-        ref="tooltipRef"
-        class="tooltip-content"
-        :class="[
-          `tooltip-${placement}`,
-          { 'tooltip-dark': dark },
-          { 'tooltip-light': !dark }
-        ]"
-        :style="tooltipStyle"
-        role="tooltip"
-        :aria-describedby="ariaId"
-      >
-        <div class="tooltip-inner">
-          <slot name="content">
-            {{ content }}
-          </slot>
-        </div>
-        <div class="tooltip-arrow" :class="`tooltip-arrow-${placement}`"></div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script>
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, useId, watch } from 'vue'
-
-export default {
-  name: 'ToolTip',
-  props: {
-    // 提示内容
-    content: {
-      type: String,
-      default: ''
-    },
-    // 触发方式：hover、click、focus
-    trigger: {
-      type: String,
-      default: 'hover',
-      validator: (value) => ['hover', 'click', 'focus', 'manual'].includes(value)
-    },
-    // 位置：top、bottom、left、right
-    placement: {
-      type: String,
-      default: 'top',
-      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
-    },
-    // 是否启用暗色主题
-    dark: {
-      type: Boolean,
-      default: false
-    },
-    // 延迟显示时间（毫秒）
-    delay: {
-      type: Number,
-      default: 100
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 是否可通过Tab键聚焦
-    focusable: {
-      type: Boolean,
-      default: true
-    },
-    // 偏移距离
-    offset: {
-      type: Number,
-      default: 8
-    },
-    // 最大宽度
-    maxWidth: {
-      type: [String, Number],
-      default: '200px'
-    }
-  },
-  emits: ['show', 'hide'],
-  setup(props, { emit }) {
-    const wrapperRef = ref(null)
-    const tooltipRef = ref(null)
-    const visible = ref(false)
-    const ariaId = ref(`tooltip-${useId()}`)
-    
-    let showTimer = null
-    let hideTimer = null
-
-    // 计算tooltip样式
-    const tooltipStyle = computed(() => {
-      const maxWidth = typeof props.maxWidth === 'number' 
-        ? `${props.maxWidth}px` 
-        : props.maxWidth
-      
-      return {
-        maxWidth,
-        zIndex: 2000
-      }
-    })
-
-    // 显示tooltip
-    const show = () => {
-      if (props.disabled) return
-      
-      clearTimeout(hideTimer)
-      showTimer = setTimeout(() => {
-        visible.value = true
-        emit('show')
-        nextTick(() => {
-          updatePosition()
-        })
-      }, props.delay)
-    }
-
-    // 隐藏tooltip
-    const hide = () => {
-      clearTimeout(showTimer)
-      hideTimer = setTimeout(() => {
-        visible.value = false
-        emit('hide')
-      }, 100)
-    }
-
-    // 立即显示（用于manual模式）
-    const showImmediately = () => {
-      if (props.disabled) return
-      clearTimeout(hideTimer)
-      clearTimeout(showTimer)
-      visible.value = true
-      emit('show')
-      nextTick(() => {
-        updatePosition()
-      })
-    }
-
-    // 立即隐藏（用于manual模式）
-    const hideImmediately = () => {
-      clearTimeout(showTimer)
-      clearTimeout(hideTimer)
-      visible.value = false
-      emit('hide')
-    }
-
-    // 更新位置
-    const updatePosition = () => {
-      if (!wrapperRef.value || !tooltipRef.value) return
-
-      const trigger = wrapperRef.value.querySelector('.tooltip-trigger')
-      const tooltip = tooltipRef.value
-      
-      if (!trigger) return
-
-      const triggerRect = trigger.getBoundingClientRect()
-      const tooltipRect = tooltip.getBoundingClientRect()
-      
-      let top = 0
-      let left = 0
-
-      switch (props.placement) {
-        case 'top':
-          top = triggerRect.top - tooltipRect.height - props.offset
-          left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
-          break
-        case 'bottom':
-          top = triggerRect.bottom + props.offset
-          left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
-          break
-        case 'left':
-          top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
-          left = triggerRect.left - tooltipRect.width - props.offset
-          break
-        case 'right':
-          top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
-          left = triggerRect.right + props.offset
-          break
-      }
-
-      // 边界检测
-      const padding = 8
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-
-      if (left < padding) {
-        left = padding
-      } else if (left + tooltipRect.width > viewportWidth - padding) {
-        left = viewportWidth - tooltipRect.width - padding
-      }
-
-      if (top < padding) {
-        top = padding
-      } else if (top + tooltipRect.height > viewportHeight - padding) {
-        top = viewportHeight - tooltipRect.height - padding
-      }
-
-      tooltip.style.position = 'fixed'
-      tooltip.style.top = `${top}px`
-      tooltip.style.left = `${left}px`
-    }
-
-    // 事件处理
-    const handleMouseEnter = () => {
-      if (props.trigger === 'hover') {
-        show()
-      }
-    }
-
-    const handleMouseLeave = () => {
-      if (props.trigger === 'hover') {
-        hide()
-      }
-    }
-
-    const handleClick = () => {
-      if (props.trigger === 'click') {
-        if (visible.value) {
-          hide()
-        } else {
-          show()
-        }
-      }
-    }
-
-    const handleFocus = () => {
-      if (props.trigger === 'focus') {
-        show()
-      }
-    }
-
-    const handleBlur = () => {
-      if (props.trigger === 'focus') {
-        hide()
-      }
-    }
-
-    // 点击外部隐藏
-    const handleClickOutside = (event) => {
-      if (props.trigger === 'click' && wrapperRef.value && !wrapperRef.value.contains(event.target)) {
-        hide()
-      }
-    }
-
-    // 窗口大小改变时重新计算位置
-    const handleResize = () => {
-      if (visible.value) {
-        updatePosition()
-      }
-    }
-
-    // 监听禁用状态变化
-    watch(() => props.disabled, (newVal) => {
-      if (newVal && visible.value) {
-        hideImmediately()
-      }
-    })
-
-    onMounted(() => {
-      document.addEventListener('click', handleClickOutside)
-      window.addEventListener('resize', handleResize)
-      window.addEventListener('scroll', handleResize)
-    })
-
-    onBeforeUnmount(() => {
-      clearTimeout(showTimer)
-      clearTimeout(hideTimer)
-      document.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('resize', handleResize)
-      window.removeEventListener('scroll', handleResize)
-    })
-
-    return {
-      wrapperRef,
-      tooltipRef,
-      visible,
-      ariaId,
-      tooltipStyle,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleClick,
-      handleFocus,
-      handleBlur,
-      // 暴露给父组件的方法
-      show: showImmediately,
-      hide: hideImmediately
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tooltip-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip-trigger {
-  display: inline-block;
-  outline: none;
-}
-
-.tooltip-content {
-  position: fixed;
-  pointer-events: none;
-  z-index: 2000;
-}
-
-.tooltip-inner {
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 14px;
-  line-height: 1.4;
-  word-wrap: break-word;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* 亮色主题 */
-.tooltip-light .tooltip-inner {
-  background-color: var(--background-color);
-  color: var(--text-color);
-  border: 1px solid var(--normal-border-color);
-}
-
-/* 暗色主题 */
-.tooltip-dark .tooltip-inner {
-  background-color: rgba(0, 0, 0, 0.9);
-  color: white;
-}
-
-/* 箭头基础样式 */
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-/* 顶部箭头 */
-.tooltip-top .tooltip-arrow-top {
-  bottom: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 6px 6px 0 6px;
-}
-
-.tooltip-light.tooltip-top .tooltip-arrow-top {
-  border-color: var(--normal-border-color) transparent transparent transparent;
-}
-
-.tooltip-light.tooltip-top .tooltip-arrow-top::after {
-  content: '';
-  position: absolute;
-  top: -7px;
-  left: -6px;
-  border-width: 6px 6px 0 6px;
-  border-style: solid;
-  border-color: var(--background-color) transparent transparent transparent;
-}
-
-.tooltip-dark.tooltip-top .tooltip-arrow-top {
-  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
-}
-
-/* 底部箭头 */
-.tooltip-bottom .tooltip-arrow-bottom {
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 6px 6px 6px;
-}
-
-.tooltip-light.tooltip-bottom .tooltip-arrow-bottom {
-  border-color: transparent transparent var(--normal-border-color) transparent;
-}
-
-.tooltip-light.tooltip-bottom .tooltip-arrow-bottom::after {
-  content: '';
-  position: absolute;
-  top: 1px;
-  left: -6px;
-  border-width: 0 6px 6px 6px;
-  border-style: solid;
-  border-color: transparent transparent var(--background-color) transparent;
-}
-
-.tooltip-dark.tooltip-bottom .tooltip-arrow-bottom {
-  border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
-}
-
-/* 左侧箭头 */
-.tooltip-left .tooltip-arrow-left {
-  right: -6px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 6px 0 6px 6px;
-}
-
-.tooltip-light.tooltip-left .tooltip-arrow-left {
-  border-color: transparent transparent transparent var(--normal-border-color);
-}
-
-.tooltip-light.tooltip-left .tooltip-arrow-left::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: -7px;
-  border-width: 6px 0 6px 6px;
-  border-style: solid;
-  border-color: transparent transparent transparent var(--background-color);
-}
-
-.tooltip-dark.tooltip-left .tooltip-arrow-left {
-  border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
-}
-
-/* 右侧箭头 */
-.tooltip-right .tooltip-arrow-right {
-  left: -6px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 6px 6px 6px 0;
-}
-
-.tooltip-light.tooltip-right .tooltip-arrow-right {
-  border-color: transparent var(--normal-border-color) transparent transparent;
-}
-
-.tooltip-light.tooltip-right .tooltip-arrow-right::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: 1px;
-  border-width: 6px 6px 6px 0;
-  border-style: solid;
-  border-color: transparent var(--background-color) transparent transparent;
-}
-
-.tooltip-dark.tooltip-right .tooltip-arrow-right {
-  border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
-}
-
-/* 过渡动画 */
-.tooltip-fade-enter-active,
-.tooltip-fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.tooltip-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-.tooltip-fade-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .tooltip-inner {
-    padding: 6px 10px;
-    font-size: 13px;
-    max-width: 250px;
-  }
-}
-
-/* 键盘导航样式 */
-.tooltip-trigger:focus-visible {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-</style>
--- a/frontend_nuxt/main.js
+++ b/frontend_nuxt/main.js
@@ -1,5 +1 @@
 export { toast } from './composables/useToast'
-
-export const API_DOMAIN = 'https://www.open-isle.com'
-export const API_PORT = ''
-export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -12,10 +12,9 @@ export default defineNuxtConfig({
      twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
    },
  },
-  // 确保 Vditor 样式在 global.css 覆盖前加载
-  css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
+  // Ensure Vditor styles load before our overrides in global.css
+  css: ['vditor/dist/index.css', '~/assets/global.css'],
  app: {
-    pageTransition: { name: 'page', mode: 'out-in' },
    head: {
      script: [
        {
@@ -27,31 +26,7 @@ export default defineNuxtConfig({
                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                const theme = mode === 'dark' || mode === 'light' ? mode : (prefersDark ? 'dark' : 'light');
                document.documentElement.dataset.theme = theme;
-
-                
-                let themeColor = '#fff';
-                let themeStatus = 'default';
-                if (theme === 'dark') {
-                  themeColor = '#333';
-                  themeStatus = 'black-translucent';
-                } else {
-                  themeColor = '#ffffff';
-                  themeStatus = 'default';
-                }
-                
-                const androidMeta = document.createElement('meta');
-                androidMeta.name = 'theme-color';
-                androidMeta.content = themeColor;
-                
-                const iosMeta = document.createElement('meta');
-                iosMeta.name = 'apple-mobile-web-app-status-bar-style';
-                iosMeta.content = themeStatus;
-
-                document.head.appendChild(androidMeta);
-                document.head.appendChild(iosMeta);
-              } catch (e) {
-                console.warn('Theme initialization failed:', e);
-              }
+              } catch (e) {}
            })();
          `,
        },
@@ -85,27 +60,4 @@ export default defineNuxtConfig({
      isCustomElement: (tag) => ['l-hatch', 'l-hatch-spinner'].includes(tag),
    },
  },
-  vite: {
-    build: {
-      // increase warning limit and split large libraries into separate chunks
-      chunkSizeWarningLimit: 1024,
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            if (id.includes('node_modules')) {
-              if (id.includes('vditor')) {
-                return 'vditor'
-              }
-              if (id.includes('echarts')) {
-                return 'echarts'
-              }
-              if (id.includes('highlight.js')) {
-                return 'highlight'
-              }
-            }
-          },
-        },
-      },
-    },
-  },
 })
--- a/frontend_nuxt/package-lock.json
+++ b/frontend_nuxt/package-lock.json
--- a/frontend_nuxt/pages/forgot-password.vue
+++ b/frontend_nuxt/pages/forgot-password.vue
@@ -2,7 +2,6 @@
  <div class="forgot-page">
    <div class="forgot-content">
      <div class="forgot-title">找回密码</div>
- 
      <div v-if="step === 0" class="step-content">
        <BaseInput icon="fas fa-envelope" v-model="email" placeholder="邮箱" />
        <div v-if="emailError" class="error-message">{{ emailError }}</div>
@@ -20,10 +19,6 @@
        <div class="primary-button" @click="resetPassword" v-if="!isResetting">重置密码</div>
        <div class="primary-button disabled" v-else>提交中...</div>
      </div>
-      <div class="hint-message">
-        <i class="fas fa-info-circle"></i>
-        使用 Google 注册的用户可使用对应的邮箱进行找回密码
-      </div>
    </div>
  </div>
 </template>
@@ -31,8 +26,6 @@
 <script setup>
 import { toast } from '~/main'
 import BaseInput from '~/components/BaseInput.vue'
-import { useRoute } from 'vue-router'
-
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl

@@ -46,7 +39,6 @@ const passwordError = ref('')
 const isSending = ref(false)
 const isVerifying = ref(false)
 const isResetting = ref(false)
-const route = useRoute()

 onMounted(() => {
  if (route.query.email) {
@@ -145,21 +137,6 @@ const resetPassword = async () => {
  font-size: 24px;
  font-weight: bold;
 }
-
-.forgot-content .hint-message {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-  font-size: 13px;
-  color: var(--blockquote-text-color);
-}
-
-.hint-message i {
-  color: var(--primary-color);
-  font-size: 14px;
-}
 .step-content {
  display: flex;
  flex-direction: column;
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -1,7 +1,10 @@
 <template>
  <div class="home-page">
    <div v-if="!isMobile" class="search-container">
-      <div class="search-title">一切可能，从此刻启航，在此遇见灵感与共鸣</div>
+      <div class="search-title">一切可能，从此刻启航</div>
+      <div class="search-subtitle">
+        愿你在此遇见灵感与共鸣。若有疑惑，欢迎发问，亦可在知识的海洋中搜寻答案。
+      </div>
      <SearchDropdown />
    </div>

@@ -113,7 +116,7 @@
  </div>
 </template>
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref, watch, watchEffect, computed, onMounted, onBeforeUnmount } from 'vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
@@ -192,7 +195,7 @@ watch(
 const loadOptions = async () => {
  if (selectedCategory.value && !isNaN(selectedCategory.value)) {
    try {
-      const res = await fetch(`${API_BASE_URL}/api/categories/`)
+      const res = await fetch(`${API_BASE_URL}/api/categories/${selectedCategory.value}`)
      if (res.ok) categoryOptions.value = [await res.json()]
    } catch {}
  }
@@ -262,7 +265,7 @@ const {
      time: TimeManager.format(
        selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
      ),
-      pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
+      pinned: !!p.pinnedAt,
      type: p.type,
    }))
  },
@@ -305,7 +308,7 @@ const fetchNextPage = async () => {
        time: TimeManager.format(
          selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
        ),
-        pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
+        pinned: !!p.pinnedAt,
        type: p.type,
      }))
      articles.value.push(...mapped)
@@ -351,8 +354,6 @@ if (import.meta.server) {
 }
 onMounted(() => {
  if (categoryOptions.value.length === 0 && tagOptions.value.length === 0) loadOptions()
-
-  window.addEventListener('refresh-home', refreshFirst)
 })

 /** 其他工具函数 **/
@@ -370,8 +371,8 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }

 .search-container {
-  margin-top: 32px;
-  padding: 20px 20px 32px;
+  margin-top: 100px;
+  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -383,6 +384,10 @@ const sanitizeDescription = (text) => stripMarkdown(text)
  font-weight: bold;
 }

+.search-subtitle {
+  font-size: 16px;
+}
+
 .loading-container {
  display: flex;
  justify-content: center;
@@ -536,7 +541,6 @@ const sanitizeDescription = (text) => stripMarkdown(text)
  font-size: 14px;
  color: gray;
  display: -webkit-box;
-  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -505,26 +505,21 @@
 </template>

 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import { ref, onMounted, computed } from 'vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
+import { getToken, authState } from '~/utils/auth'
+import { markNotificationsRead, fetchUnreadCount, notificationState } from '~/utils/notification'
 import { toast } from '~/main'
-import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
-import {
-  fetchNotifications,
-  fetchUnreadCount,
-  isLoadingMessage,
-  markRead,
-  notifications,
-  markAllRead,
-} from '~/utils/notification'
 import TimeManager from '~/utils/time'
-
+import { reactionEmojiMap } from '~/utils/reactions'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
+const notifications = ref([])
+const isLoadingMessage = ref(false)
 const selectedTab = ref(
  ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
@@ -533,6 +528,234 @@ const filteredNotifications = computed(() =>
  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
 )

+const markRead = async (id) => {
+  if (!id) return
+  const n = notifications.value.find((n) => n.id === id)
+  if (!n || n.read) return
+  n.read = true
+  if (notificationState.unreadCount > 0) notificationState.unreadCount--
+  const ok = await markNotificationsRead([id])
+  if (!ok) {
+    n.read = false
+    notificationState.unreadCount++
+  } else {
+    fetchUnreadCount()
+  }
+}
+
+const markAllRead = async () => {
+  // 除了 REGISTER_REQUEST 类型消息
+  const idsToMark = notifications.value
+    .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
+    .map((n) => n.id)
+  if (idsToMark.length === 0) return
+  notifications.value.forEach((n) => {
+    if (n.type !== 'REGISTER_REQUEST') n.read = true
+  })
+  notificationState.unreadCount = notifications.value.filter((n) => !n.read).length
+  const ok = await markNotificationsRead(idsToMark)
+  if (!ok) {
+    notifications.value.forEach((n) => {
+      if (idsToMark.includes(n.id)) n.read = false
+    })
+    await fetchUnreadCount()
+    return
+  }
+  fetchUnreadCount()
+  if (authState.role === 'ADMIN') {
+    toast.success('已读所有消息（注册请求除外）')
+  } else {
+    toast.success('已读所有消息')
+  }
+}
+
+const iconMap = {
+  POST_VIEWED: 'fas fa-eye',
+  COMMENT_REPLY: 'fas fa-reply',
+  POST_REVIEWED: 'fas fa-shield-alt',
+  POST_REVIEW_REQUEST: 'fas fa-gavel',
+  POST_UPDATED: 'fas fa-comment-dots',
+  USER_ACTIVITY: 'fas fa-user',
+  FOLLOWED_POST: 'fas fa-feather-alt',
+  USER_FOLLOWED: 'fas fa-user-plus',
+  USER_UNFOLLOWED: 'fas fa-user-minus',
+  POST_SUBSCRIBED: 'fas fa-bookmark',
+  POST_UNSUBSCRIBED: 'fas fa-bookmark',
+  REGISTER_REQUEST: 'fas fa-user-clock',
+  ACTIVITY_REDEEM: 'fas fa-coffee',
+  LOTTERY_WIN: 'fas fa-trophy',
+  LOTTERY_DRAW: 'fas fa-bullhorn',
+  MENTION: 'fas fa-at',
+}
+
+const fetchNotifications = async () => {
+  try {
+    const token = getToken()
+    if (!token) {
+      toast.error('请先登录')
+      return
+    }
+    isLoadingMessage.value = true
+    notifications.value = []
+    const res = await fetch(`${API_BASE_URL}/api/notifications`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    isLoadingMessage.value = false
+    if (!res.ok) {
+      toast.error('获取通知失败')
+      return
+    }
+    const data = await res.json()
+
+    for (const n of data) {
+      if (n.type === 'COMMENT_REPLY') {
+        notifications.value.push({
+          ...n,
+          src: n.comment.author.avatar,
+          iconClick: () => {
+            markRead(n.id)
+            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+          },
+        })
+      } else if (n.type === 'REACTION') {
+        notifications.value.push({
+          ...n,
+          emoji: reactionEmojiMap[n.reactionType],
+          iconClick: () => {
+            if (n.fromUser) {
+              markRead(n.id)
+              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'POST_VIEWED') {
+        notifications.value.push({
+          ...n,
+          src: n.fromUser ? n.fromUser.avatar : null,
+          icon: n.fromUser ? undefined : iconMap[n.type],
+          iconClick: () => {
+            if (n.fromUser) {
+              markRead(n.id)
+              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'LOTTERY_WIN') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.post) {
+              markRead(n.id)
+              router.push(`/posts/${n.post.id}`)
+            }
+          },
+        })
+      } else if (n.type === 'LOTTERY_DRAW') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.post) {
+              markRead(n.id)
+              router.push(`/posts/${n.post.id}`)
+            }
+          },
+        })
+      } else if (n.type === 'POST_UPDATED') {
+        notifications.value.push({
+          ...n,
+          src: n.comment.author.avatar,
+          iconClick: () => {
+            markRead(n.id)
+            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+          },
+        })
+      } else if (n.type === 'USER_ACTIVITY') {
+        notifications.value.push({
+          ...n,
+          src: n.comment.author.avatar,
+          iconClick: () => {
+            markRead(n.id)
+            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+          },
+        })
+      } else if (n.type === 'MENTION') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.fromUser) {
+              markRead(n.id)
+              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'USER_FOLLOWED' || n.type === 'USER_UNFOLLOWED') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.fromUser) {
+              markRead(n.id)
+              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'FOLLOWED_POST') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.post) {
+              markRead(n.id)
+              navigateTo(`/posts/${n.post.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'POST_SUBSCRIBED' || n.type === 'POST_UNSUBSCRIBED') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {
+            if (n.post) {
+              markRead(n.id)
+              navigateTo(`/posts/${n.post.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'POST_REVIEW_REQUEST') {
+        notifications.value.push({
+          ...n,
+          src: n.fromUser ? n.fromUser.avatar : null,
+          icon: n.fromUser ? undefined : iconMap[n.type],
+          iconClick: () => {
+            if (n.post) {
+              markRead(n.id)
+              navigateTo(`/posts/${n.post.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'REGISTER_REQUEST') {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+          iconClick: () => {},
+        })
+      } else {
+        notifications.value.push({
+          ...n,
+          icon: iconMap[n.type],
+        })
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 const fetchPrefs = async () => {
  notificationPrefs.value = await fetchNotificationPreferences()
 }
@@ -619,7 +842,7 @@ const formatType = (t) => {
  }
 }

-onActivated(() => {
+onMounted(() => {
  fetchNotifications()
  fetchPrefs()
 })
@@ -636,8 +859,6 @@ onActivated(() => {
 .message-page {
  background-color: var(--background-color);
  overflow-x: hidden;
-  height: calc(100vh - var(--header-height));
-  overflow-y: auto;
 }

 .message-page-header {
--- a/frontend_nuxt/pages/new-post.vue
+++ b/frontend_nuxt/pages/new-post.vue
@@ -77,7 +77,7 @@
  </div>
 </template>

-<script setup>
+<script>
 import 'flatpickr/dist/flatpickr.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import FlatPickr from 'vue-flatpickr-component'
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -232,7 +232,7 @@
 </template>

 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRoute } from 'vue-router'
 import CommentItem from '~/components/CommentItem.vue'
@@ -268,6 +268,7 @@ const postReactions = ref([])
 const comments = ref([])
 const status = ref('PUBLISHED')
 const pinnedAt = ref(null)
+const isWaitingFetchingPost = ref(false)
 const isWaitingPostingComment = ref(false)
 const postTime = ref('')
 const postItems = ref([])
@@ -391,7 +392,7 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
  avatar: c.author.avatar,
  text: c.content,
  reactions: c.reactions || [],
-  pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at),
+  pinned: !!c.pinnedAt,
  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
  openReplies: level === 0,
  src: c.author.avatar,
@@ -454,41 +455,38 @@ const onCommentDeleted = (id) => {
  fetchComments()
 }

-const {
-  data: postData,
-  pending: pendingPost,
-  error: postError,
-  refresh: refreshPost,
-} = await useAsyncData(`post-${postId}`, () => $fetch(`${API_BASE_URL}/api/posts/${postId}`), {
-  server: true,
-  lazy: false,
-})
-
-// 用 pendingPost 驱动现有 UI（替代 isWaitingFetchingPost 手控）
-const isWaitingFetchingPost = computed(() => pendingPost.value)
-
-// 同步到现有的响应式字段
-watchEffect(() => {
-  const data = postData.value
-  if (!data) return
-  postContent.value = data.content
-  author.value = data.author
-  title.value = data.title
-  category.value = data.category
-  tags.value = data.tags || []
-  postReactions.value = data.reactions || []
-  subscribed.value = !!data.subscribed
-  status.value = data.status
-  pinnedAt.value = data.pinnedAt
-  postTime.value = TimeManager.format(data.createdAt)
-  lottery.value = data.lottery || null
-  if (lottery.value && lottery.value.endTime) startCountdown()
-})
-
-// 404 客户端跳转
-// if (postError.value?.statusCode === 404 && process.client) {
-//   router.replace('/404')
-// }
+const fetchPost = async () => {
+  try {
+    isWaitingFetchingPost.value = true
+    const token = getToken()
+    const res = await fetch(`${API_BASE_URL}/api/posts/${postId}`, {
+      headers: { Authorization: token ? `Bearer ${token}` : '' },
+    })
+    isWaitingFetchingPost.value = false
+    if (!res.ok) {
+      if (res.status === 404 && process.client) {
+        router.replace('/404')
+      }
+      return
+    }
+    const data = await res.json()
+    postContent.value = data.content
+    author.value = data.author
+    title.value = data.title
+    category.value = data.category
+    tags.value = data.tags || []
+    postReactions.value = data.reactions || []
+    subscribed.value = !!data.subscribed
+    status.value = data.status
+    pinnedAt.value = data.pinnedAt
+    postTime.value = TimeManager.format(data.createdAt)
+    lottery.value = data.lottery || null
+    if (lottery.value && lottery.value.endTime) startCountdown()
+    await nextTick()
+  } catch (e) {
+    console.error(e)
+  }
+}

 const totalPosts = computed(() => comments.value.length + 1)
 const lastReplyTime = computed(() =>
@@ -609,7 +607,6 @@ const approvePost = async () => {
  if (res.ok) {
    status.value = 'PUBLISHED'
    toast.success('已通过审核')
-    await refreshPost()
  } else {
    toast.error('操作失败')
  }
@@ -623,8 +620,8 @@ const pinPost = async () => {
    headers: { Authorization: `Bearer ${token}` },
  })
  if (res.ok) {
+    pinnedAt.value = new Date().toISOString()
    toast.success('已置顶')
-    await refreshPost()
  } else {
    toast.error('操作失败')
  }
@@ -638,8 +635,8 @@ const unpinPost = async () => {
    headers: { Authorization: `Bearer ${token}` },
  })
  if (res.ok) {
+    pinnedAt.value = null
    toast.success('已取消置顶')
-    await refreshPost()
  } else {
    toast.error('操作失败')
  }
@@ -677,7 +674,6 @@ const rejectPost = async () => {
  if (res.ok) {
    status.value = 'REJECTED'
    toast.success('已驳回')
-    await refreshPost()
  } else {
    toast.error('操作失败')
  }
@@ -713,7 +709,7 @@ const joinLottery = async () => {
  })
  if (res.ok) {
    toast.success('已参与抽奖')
-    await refreshPost()
+    await fetchPost()
  } else {
    toast.error('操作失败')
  }
@@ -784,8 +780,9 @@ onMounted(async () => {
  window.addEventListener('scroll', updateCurrentIndex)
  jumpToHashComment()
 })
-</script>

+await fetchPost()
+</script>
 <style>
 .post-page-container {
  background-color: var(--background-color);
@@ -867,7 +864,6 @@ onMounted(async () => {
  direction: ltr;
  height: 300px;
  width: 2px;
-  appearance: none;
  -webkit-appearance: none;
  background: transparent;
 }
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -204,32 +204,12 @@
        </div>

        <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-          <div class="timeline-tabs">
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
-              @click="timelineFilter = 'all'"
-            >
-              全部
-            </div>
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
-              @click="timelineFilter = 'articles'"
-            >
-              文章
-            </div>
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
-              @click="timelineFilter = 'comments'"
-            >
-              评论和回复
-            </div>
-          </div>
          <BasePlaceholder
-            v-if="filteredTimelineItems.length === 0"
+            v-if="timelineItems.length === 0"
            text="暂无时间线"
            icon="fas fa-inbox"
          />
-          <BaseTimeline :items="filteredTimelineItems">
+          <BaseTimeline :items="timelineItems">
            <template #item="{ item }">
              <template v-if="item.type === 'post'">
                发布了文章
@@ -344,15 +324,6 @@ const hotPosts = ref([])
 const hotReplies = ref([])
 const hotTags = ref([])
 const timelineItems = ref([])
-const timelineFilter = ref('all')
-const filteredTimelineItems = computed(() => {
-  if (timelineFilter.value === 'articles') {
-    return timelineItems.value.filter((item) => item.type === 'post')
-  } else if (timelineFilter.value === 'comments') {
-    return timelineItems.value.filter((item) => item.type === 'comment' || item.type === 'reply')
-  }
-  return timelineItems.value
-})
 const followers = ref([])
 const followings = ref([])
 const medals = ref([])
@@ -806,23 +777,6 @@ watch(selectedTab, async (val) => {
  width: 40%;
 }

-.timeline-tabs {
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--normal-border-color);
-  margin-bottom: 10px;
-}
-
-.timeline-tab-item {
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.timeline-tab-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .profile-timeline {
  padding: 20px;
 }
--- a/frontend_nuxt/plugins/soft-manifest.client.ts
+++ b/frontend_nuxt/plugins/soft-manifest.client.ts
@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // 覆盖默认行为：收到 manifest 更新时，不立刻在路由切换里刷新
+  nuxtApp.hooks.hook('app:manifest:update', () => {
+    // todo 选择：弹个提示，让用户点击刷新；或延迟到页面隐藏时再刷新
+    // 例如：document.addEventListener('visibilitychange', () => { if (document.hidden) location.reload() })
+  })
+})
--- a/frontend_nuxt/public/fonts/maple-mono-100-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-100-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-100-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-100-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-200-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-200-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-200-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-200-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-300-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-300-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-300-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-300-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-400-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-400-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-400-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-400-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-500-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-500-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-500-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-500-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-600-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-600-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-600-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-600-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-700-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-700-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-700-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-700-normal.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-800-italic.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-800-italic.woff2
--- a/frontend_nuxt/public/fonts/maple-mono-800-normal.woff2
+++ b/frontend_nuxt/public/fonts/maple-mono-800-normal.woff2
--- a/frontend_nuxt/utils/google.js
+++ b/frontend_nuxt/utils/google.js
@@ -24,7 +24,6 @@ export async function googleGetIdToken() {
 export function googleAuthorize() {
  const config = useRuntimeConfig()
  const GOOGLE_CLIENT_ID = config.public.googleClientId
-  const WEBSITE_BASE_URL = config.public.websiteBaseUrl
  if (!GOOGLE_CLIENT_ID) {
    toast.error('Google 登录不可用, 请检查网络设置与VPN')
    return
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -1,14 +1,5 @@
 import hljs from 'highlight.js'
-if (typeof window !== 'undefined') {
-  const theme =
-    document.documentElement.dataset.theme ||
-    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-  if (theme === 'dark') {
-    import('highlight.js/styles/atom-one-dark.css')
-  } else {
-    import('highlight.js/styles/atom-one-light.css')
-  }
-}
+import 'highlight.js/styles/github.css'
 import MarkdownIt from 'markdown-it'
 import { toast } from '../main'
 import { tiebaEmoji } from './tiebaEmoji'
@@ -95,11 +86,7 @@ const md = new MarkdownIt({
    } else {
      code = hljs.highlightAuto(str).value
    }
-    const lineNumbers = code
-      .trim()
-      .split('\n')
-      .map(() => `<div class="line-number"></div>`)
-    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><div class="line-numbers">${lineNumbers.join('')}</div><code class="hljs language-${lang || ''}">${code.trim()}</code></pre>`
+    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><code class="hljs language-${lang || ''}">${code}</code></pre>`
  },
 })

--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -1,32 +1,10 @@
-import { navigateTo, useRuntimeConfig } from 'nuxt/app'
-import { reactive, ref } from 'vue'
-import { toast } from '~/composables/useToast'
-import { authState, getToken } from '~/utils/auth'
-import { reactionEmojiMap } from '~/utils/reactions'
+import { getToken } from './auth'
+import { reactive } from 'vue'

 export const notificationState = reactive({
  unreadCount: 0,
 })

-const iconMap = {
-  POST_VIEWED: 'fas fa-eye',
-  COMMENT_REPLY: 'fas fa-reply',
-  POST_REVIEWED: 'fas fa-shield-alt',
-  POST_REVIEW_REQUEST: 'fas fa-gavel',
-  POST_UPDATED: 'fas fa-comment-dots',
-  USER_ACTIVITY: 'fas fa-user',
-  FOLLOWED_POST: 'fas fa-feather-alt',
-  USER_FOLLOWED: 'fas fa-user-plus',
-  USER_UNFOLLOWED: 'fas fa-user-minus',
-  POST_SUBSCRIBED: 'fas fa-bookmark',
-  POST_UNSUBSCRIBED: 'fas fa-bookmark',
-  REGISTER_REQUEST: 'fas fa-user-clock',
-  ACTIVITY_REDEEM: 'fas fa-coffee',
-  LOTTERY_WIN: 'fas fa-trophy',
-  LOTTERY_DRAW: 'fas fa-bullhorn',
-  MENTION: 'fas fa-at',
-}
-
 export async function fetchUnreadCount() {
  const config = useRuntimeConfig()
  const API_BASE_URL = config.public.apiBaseUrl
@@ -109,235 +87,3 @@ export async function updateNotificationPreference(type, enabled) {
    return false
  }
 }
-
-/**
- * 处理信息的高阶函数
- * @returns
- */
-function createFetchNotifications() {
-  const notifications = ref([])
-  const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
-    const config = useRuntimeConfig()
-    const API_BASE_URL = config.public.apiBaseUrl
-    if (isLoadingMessage && notifications && markRead) {
-      try {
-        const token = getToken()
-        if (!token) {
-          toast.error('请先登录')
-          return
-        }
-        isLoadingMessage.value = true
-        notifications.value = []
-        const res = await fetch(`${API_BASE_URL}/api/notifications`, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        })
-        isLoadingMessage.value = false
-        if (!res.ok) {
-          toast.error('获取通知失败')
-          return
-        }
-        const data = await res.json()
-
-        for (const n of data) {
-          if (n.type === 'COMMENT_REPLY') {
-            notifications.value.push({
-              ...n,
-              src: n.comment.author.avatar,
-              iconClick: () => {
-                markRead(n.id)
-                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-              },
-            })
-          } else if (n.type === 'REACTION') {
-            notifications.value.push({
-              ...n,
-              emoji: reactionEmojiMap[n.reactionType],
-              iconClick: () => {
-                if (n.fromUser) {
-                  markRead(n.id)
-                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'POST_VIEWED') {
-            notifications.value.push({
-              ...n,
-              src: n.fromUser ? n.fromUser.avatar : null,
-              icon: n.fromUser ? undefined : iconMap[n.type],
-              iconClick: () => {
-                if (n.fromUser) {
-                  markRead(n.id)
-                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'LOTTERY_WIN') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.post) {
-                  markRead(n.id)
-                  router.push(`/posts/${n.post.id}`)
-                }
-              },
-            })
-          } else if (n.type === 'LOTTERY_DRAW') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.post) {
-                  markRead(n.id)
-                  router.push(`/posts/${n.post.id}`)
-                }
-              },
-            })
-          } else if (n.type === 'POST_UPDATED') {
-            notifications.value.push({
-              ...n,
-              src: n.comment.author.avatar,
-              iconClick: () => {
-                markRead(n.id)
-                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-              },
-            })
-          } else if (n.type === 'USER_ACTIVITY') {
-            notifications.value.push({
-              ...n,
-              src: n.comment.author.avatar,
-              iconClick: () => {
-                markRead(n.id)
-                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-              },
-            })
-          } else if (n.type === 'MENTION') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.fromUser) {
-                  markRead(n.id)
-                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'USER_FOLLOWED' || n.type === 'USER_UNFOLLOWED') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.fromUser) {
-                  markRead(n.id)
-                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'FOLLOWED_POST') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.post) {
-                  markRead(n.id)
-                  navigateTo(`/posts/${n.post.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'POST_SUBSCRIBED' || n.type === 'POST_UNSUBSCRIBED') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {
-                if (n.post) {
-                  markRead(n.id)
-                  navigateTo(`/posts/${n.post.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'POST_REVIEW_REQUEST') {
-            notifications.value.push({
-              ...n,
-              src: n.fromUser ? n.fromUser.avatar : null,
-              icon: n.fromUser ? undefined : iconMap[n.type],
-              iconClick: () => {
-                if (n.post) {
-                  markRead(n.id)
-                  navigateTo(`/posts/${n.post.id}`, { replace: true })
-                }
-              },
-            })
-          } else if (n.type === 'REGISTER_REQUEST') {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-              iconClick: () => {},
-            })
-          } else {
-            notifications.value.push({
-              ...n,
-              icon: iconMap[n.type],
-            })
-          }
-        }
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  }
-
-  const markRead = async (id) => {
-    if (!id) return
-    const n = notifications.value.find((n) => n.id === id)
-    if (!n || n.read) return
-    n.read = true
-    if (notificationState.unreadCount > 0) notificationState.unreadCount--
-    const ok = await markNotificationsRead([id])
-    if (!ok) {
-      n.read = false
-      notificationState.unreadCount++
-    } else {
-      fetchUnreadCount()
-    }
-  }
-
-  const markAllRead = async () => {
-    // 除了 REGISTER_REQUEST 类型消息
-    const idsToMark = notifications.value
-      .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
-      .map((n) => n.id)
-    if (idsToMark.length === 0) return
-    notifications.value.forEach((n) => {
-      if (n.type !== 'REGISTER_REQUEST') n.read = true
-    })
-    notificationState.unreadCount = notifications.value.filter((n) => !n.read).length
-    const ok = await markNotificationsRead(idsToMark)
-    if (!ok) {
-      notifications.value.forEach((n) => {
-        if (idsToMark.includes(n.id)) n.read = false
-      })
-      await fetchUnreadCount()
-      return
-    }
-    fetchUnreadCount()
-    if (authState.role === 'ADMIN') {
-      toast.success('已读所有消息（注册请求除外）')
-    } else {
-      toast.success('已读所有消息')
-    }
-  }
-  return {
-    fetchNotifications,
-    markRead,
-    notifications,
-    isLoadingMessage,
-    markRead,
-    markAllRead,
-  }
-}
-
-export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
-  createFetchNotifications()
--- a/frontend_nuxt/utils/theme.js
+++ b/frontend_nuxt/utils/theme.js
@@ -14,46 +14,19 @@ export const themeState = reactive({
 })

 function apply(mode) {
-  if (!import.meta.client) return
+  if (!process.client) return
  const root = document.documentElement
-  let newMode =
-    mode === ThemeMode.SYSTEM
-      ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      : mode
-  if (root.dataset.theme === newMode) return
-  root.dataset.theme = newMode
-
-  // 更新 meta 标签
-  const androidMeta = document.querySelector('meta[name="theme-color"]')
-  const iosMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')
-  const themeColor = getComputedStyle(document.documentElement)
-    .getPropertyValue('--background-color')
-    .trim()
-  const themeStatus = newMode === 'dark' ? 'black-translucent' : 'default'
-
-  if (androidMeta) {
-    androidMeta.content = themeColor
+  if (mode === ThemeMode.SYSTEM) {
+    root.dataset.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
  } else {
-    const newAndroidMeta = document.createElement('meta')
-    newAndroidMeta.name = 'theme-color'
-    newAndroidMeta.content = themeColor
-    document.head.appendChild(newAndroidMeta)
-  }
-
-  if (iosMeta) {
-    iosMeta.content = themeStatus
-  } else {
-    const newIosMeta = document.createElement('meta')
-    newIosMeta.name = 'apple-mobile-web-app-status-bar-style'
-    newIosMeta.content = themeStatus
-    document.head.appendChild(newIosMeta)
+    root.dataset.theme = mode
  }
 }

 export function initTheme() {
-  if (!import.meta.client) return
+  if (!process.client) return
  const saved = localStorage.getItem(THEME_KEY)
  if (saved && Object.values(ThemeMode).includes(saved)) {
    themeState.mode = saved
@@ -62,117 +35,15 @@ export function initTheme() {
 }

 export function setTheme(mode) {
-  if (!import.meta.client) return
+  if (!process.client) return
  if (!Object.values(ThemeMode).includes(mode)) return
  themeState.mode = mode
  localStorage.setItem(THEME_KEY, mode)
  apply(mode)
 }

-function getCircle(event) {
-  if (!import.meta.client) return undefined
-
-  let x, y
-  if (event.touches?.length) {
-    x = event.touches[0].clientX
-    y = event.touches[0].clientY
-  } else if (event.changedTouches?.length) {
-    x = event.changedTouches[0].clientX
-    y = event.changedTouches[0].clientY
-  } else {
-    x = event.clientX
-    y = event.clientY
-  }
-
-  return {
-    x,
-    y,
-    radius: Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),
-  }
-}
-
-function withViewTransition(event, applyFn, direction = true) {
-  if (typeof document !== 'undefined' && document.startViewTransition) {
-    const transition = document.startViewTransition(async () => {
-      applyFn()
-      await nextTick()
-    })
-
-    transition.ready
-      .then(() => {
-        const { x, y, radius } = getCircle(event)
-
-        const clipPath = [`circle(0 at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
-
-        document.documentElement.animate(
-          {
-            clipPath: direction ? clipPath : [...clipPath].reverse(),
-          },
-          {
-            duration: 400,
-            easing: 'ease-in-out',
-            pseudoElement: direction
-              ? '::view-transition-new(root)'
-              : '::view-transition-old(root)',
-          },
-        )
-      })
-      .catch(console.warn)
-  } else {
-    fallbackThemeTransition(applyFn)
-  }
-}
-
-function fallbackThemeTransition(applyFn) {
-  if (!import.meta.client) return
-
-  const root = document.documentElement
-  const computedStyle = getComputedStyle(root)
-
-  // 获取当前背景色用于过渡
-  const currentBg = computedStyle.getPropertyValue('--background-color').trim()
-
-  // 创建过渡元素
-  const transitionElement = document.createElement('div')
-  transitionElement.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${currentBg};
-    z-index: 9999;
-    pointer-events: none;
-    backdrop-filter: blur(1px);
-  `
-  document.body.appendChild(transitionElement)
-
-  // 使用 Web Animations API 实现淡出动画
-  const animation = transitionElement.animate([{ opacity: 1 }, { opacity: 0 }], {
-    duration: 300,
-    easing: 'ease-out',
-  })
-
-  // 应用主题变更
-  applyFn()
-
-  // 动画完成后清理
-  animation.finished
-    .then(() => {
-      document.body.removeChild(transitionElement)
-    })
-    .catch(() => {
-      // 降级处理
-      document.body.removeChild(transitionElement)
-    })
-}
-
-function getSystemTheme() {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-export function cycleTheme(event) {
-  if (!import.meta.client) return
+export function cycleTheme() {
+  if (!process.client) return
  const modes = [ThemeMode.SYSTEM, ThemeMode.LIGHT, ThemeMode.DARK]
  const index = modes.indexOf(themeState.mode)
  const next = modes[(index + 1) % modes.length]
@@ -183,31 +54,10 @@ export function cycleTheme(event) {
  } else {
    toast.success('🌙 已经切换到暗色主题')
  }
-  // 获取当前真实主题
-  const currentTheme = themeState.mode === ThemeMode.SYSTEM ? getSystemTheme() : themeState.mode
-
-  // 获取新主题的真实表现
-  const nextTheme = next === ThemeMode.SYSTEM ? getSystemTheme() : next
-
-  // 如果新旧主题相同，不用过渡动画
-  if (currentTheme === nextTheme) {
-    setTheme(next)
-    return
-  }
-
-  // 计算新主题是否是暗色
-  const newThemeIsDark = nextTheme === 'dark'
-
-  withViewTransition(
-    event,
-    () => {
-      setTheme(next)
-    },
-    !newThemeIsDark,
-  )
+  setTheme(next)
 }

-if (import.meta.client && window.matchMedia) {
+if (process.client && window.matchMedia) {
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (themeState.mode === ThemeMode.SYSTEM) {
      apply(ThemeMode.SYSTEM)