fix: revert vditor change

feat: 忘记密码页面添加提示 & 修复缺少定义导致的报错 #535

backend/src/main/java/com/openisle/config/SecurityConfig.java

@@ -81,8 +81,8 @@ public class SecurityConfig {
                 "http://localhost",
                 "http://30.211.97.238:3000",
                 "http://30.211.97.238",
-                "http://192.168.7.70",
-                "http://192.168.7.70:8080",
+                "http://192.168.7.98",
+                "http://192.168.7.98:3000",
                 websiteUrl,
                 websiteUrl.replace("://www.", "://")
         ));

backend/src/main/java/com/openisle/controller/CategoryController.java

@@ -12,6 +12,7 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 @RestController
@@ -44,8 +45,11 @@ public class CategoryController {
 
     @GetMapping
     public List<CategoryDto> list() {
-        return categoryService.listCategories().stream()
-                .map(c -> categoryMapper.toDto(c, postService.countPostsByCategory(c.getId())))
+        List<Category> all = categoryService.listCategories();
+        List<Long> ids = all.stream().map(Category::getId).toList();
+        Map<Long, Long> postsCntByCategoryIds = postService.countPostsByCategoryIds(ids);
+        return all.stream()
+                .map(c -> categoryMapper.toDto(c, postsCntByCategoryIds.getOrDefault(c.getId(), 0L)))
                 .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
                 .collect(Collectors.toList());
     }

backend/src/main/java/com/openisle/controller/TagController.java

@@ -15,6 +15,7 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 @RestController
@@ -62,8 +63,11 @@ public class TagController {
     @GetMapping
     public List<TagDto> list(@RequestParam(value = "keyword", required = false) String keyword,
                              @RequestParam(value = "limit", required = false) Integer limit) {
-        List<TagDto> dtos = tagService.searchTags(keyword).stream()
-                .map(t -> tagMapper.toDto(t, postService.countPostsByTag(t.getId())))
+        List<Tag> tags = tagService.searchTags(keyword);
+        List<Long> tagIds = tags.stream().map(Tag::getId).toList();
+        Map<Long, Long> postCntByTagIds = postService.countPostsByTagIds(tagIds);
+        List<TagDto> dtos = tags.stream()
+                .map(t -> tagMapper.toDto(t, postCntByTagIds.getOrDefault(t.getId(), 0L)))
                 .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
                 .collect(Collectors.toList());
         if (limit != null && limit > 0 && dtos.size() > limit) {

backend/src/main/java/com/openisle/model/Notification.java

@@ -22,7 +22,7 @@ public class Notification {
     private Long id;
 
     @Enumerated(EnumType.STRING)
-    @Column(nullable = false)
+    @Column(nullable = false, length = 50)
     private NotificationType type;
 
     @ManyToOne(fetch = FetchType.LAZY, optional = false)

backend/src/main/java/com/openisle/repository/PostRepository.java

@@ -92,8 +92,14 @@ public interface PostRepository extends JpaRepository<Post, Long> {
 
     long countByCategory_Id(Long categoryId);
 
+    @Query("SELECT c.id, COUNT(p) FROM Post p JOIN p.category c WHERE c.id IN :categoryIds GROUP BY c.id")
+    List<Object[]> countPostsByCategoryIds(@Param("categoryIds") List<Long> categoryIds);
+
     long countDistinctByTags_Id(Long tagId);
 
+    @Query("SELECT t.id, COUNT(DISTINCT p) FROM Post p JOIN p.tags t WHERE t.id IN :tagIds GROUP BY t.id")
+    List<Object[]> countPostsByTagIds(@Param("tagIds") List<Long> tagIds);
+
     long countByAuthor_Id(Long userId);
 
     @Query("SELECT FUNCTION('date', p.createdAt) AS d, COUNT(p) AS c FROM Post p " +

backend/src/main/java/com/openisle/service/PostService.java

@@ -31,16 +31,15 @@ import com.openisle.service.EmailSender;
 
 import java.time.ZoneId;
 import java.time.ZoneOffset;
-import java.util.List;
+import java.util.*;
+
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.domain.Sort;
 import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.CollectionUtils;
 
 import java.time.LocalDateTime;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashSet;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.concurrent.ConcurrentMap;
 import java.util.concurrent.ScheduledFuture;
@@ -567,10 +566,31 @@ public class PostService {
         return postRepository.countByCategory_Id(categoryId);
     }
 
+    public Map<Long, Long> countPostsByCategoryIds(List<Long> categoryIds) {
+        Map<Long, Long> result = new HashMap<>();
+        var dbResult = postRepository.countPostsByCategoryIds(categoryIds);
+        dbResult.forEach(r -> {
+            result.put(((Long)r[0]), ((Long)r[1]));
+        });
+        return result;
+    }
+
     public long countPostsByTag(Long tagId) {
         return postRepository.countDistinctByTags_Id(tagId);
     }
 
+    public Map<Long, Long> countPostsByTagIds(List<Long> tagIds) {
+        Map<Long, Long> result = new HashMap<>();
+        if (CollectionUtils.isEmpty(tagIds)) {
+            return result;
+        }
+        var dbResult = postRepository.countPostsByTagIds(tagIds);
+        dbResult.forEach(r -> {
+            result.put(((Long)r[0]), ((Long)r[1]));
+        });
+        return result;
+    }
+
     private java.util.List<Post> sortByPinnedAndCreated(java.util.List<Post> posts) {
         return posts.stream()
                 .sorted(java.util.Comparator

frontend_nuxt/.env.example

@@ -1,6 +1,6 @@
 NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
 NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
-NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-xxx.apps.googleusercontent.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

frontend_nuxt/assets/fonts.css

@@ -0,0 +1,143 @@
+/* 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;
+}

frontend_nuxt/assets/global.css

@@ -17,6 +17,7 @@
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   --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;
@@ -44,6 +45,7 @@
   --menu-text-color: white;
   --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;
@@ -131,13 +133,43 @@ body {
 }
 
 .info-content-text pre {
-  background-color: var(--normal-background-color);
+  display: flex;
+  background-color: var(--code-highlight-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;
@@ -156,15 +188,6 @@ body {
   opacity: 1;
 }
 
-.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;
@@ -267,7 +290,7 @@ body {
   }
 
   .info-content-text pre {
-    line-height: 1.1;
+    line-height: 1.5;
   }
 
   .vditor-panel {

frontend_nuxt/components/DropdownMenu.vue

@@ -82,6 +82,7 @@ export default {
 .dropdown-item {
   padding: 8px 16px;
   white-space: nowrap;
+  cursor: pointer;
 }
 .dropdown-item:hover {
   background-color: var(--menu-selected-background-color);

frontend_nuxt/components/HeaderComponent.vue

@@ -8,7 +8,7 @@
           </button>
           <span v-if="isMobile && unreadCount > 0" class="menu-unread-dot"></span>
         </div>
-        <div class="logo-container" @click="goToHome">
+        <NuxtLink class="logo-container" :to="`/`">
           <img
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
@@ -16,7 +16,7 @@
             height="60"
           />
           <div class="logo-text">OpenIsle</div>
-        </div>
+        </NuxtLink>
       </div>
 
       <ClientOnly>
@@ -51,7 +51,6 @@
 <script setup>
 import { ClientOnly } from '#components'
 import { computed, nextTick, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
@@ -67,16 +66,12 @@ const props = defineProps({
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const unreadCount = computed(() => notificationState.unreadCount)
-const router = useRouter()
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
 const userMenu = ref(null)
 const menuBtn = ref(null)
 
-const goToHome = async () => {
-  await navigateTo('/', { replace: true })
-}
 const search = () => {
   showSearch.value = true
   nextTick(() => {
@@ -151,14 +146,6 @@ onMounted(async () => {
       await updateUnread()
     },
   )
-
-  watch(
-    () => router.currentRoute.value.fullPath,
-    () => {
-      if (userMenu.value) userMenu.value.close()
-      showSearch.value = false
-    },
-  )
 })
 </script>
 
@@ -180,6 +167,8 @@ onMounted(async () => {
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
+  text-decoration: none;
+  color: inherit;
 }
 
 .header-content {

frontend_nuxt/components/MenuComponent.vue

@@ -2,7 +2,7 @@
   <transition name="slide">
     <nav v-if="visible" class="menu">
       <div class="menu-item-container">
-        <NuxtLink class="menu-item" exact-active-class="selected" to="/" @click="handleHomeClick">
+        <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>
@@ -128,41 +128,46 @@ 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'
+
 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([])
 
-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
-}
+/** ✅ 用 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 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 {
+  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 iconClass = computed(() => {
   switch (themeState.mode) {
     case ThemeMode.DARK:
@@ -188,13 +193,10 @@ const updateCount = async () => {
 
 onMounted(async () => {
   await updateCount()
+  // 登录态变化时再拉一次未读数；与 useAsyncData 无关
   watch(() => authState.loggedIn, updateCount)
 })
 
-const handleHomeClick = () => {
-  navigateTo('/', { replace: true })
-}
-
 const handleItemClick = () => {
   if (window.innerWidth <= 768) emit('item-click')
 }
@@ -215,8 +217,6 @@ const gotoTag = (t) => {
   navigateTo({ path: '/', query: { tags: value } }, { replace: true })
   handleItemClick()
 }
-
-await Promise.all([fetchCategoryData(), fetchTagData()])
 </script>
 
 <style scoped>

frontend_nuxt/components/SearchDropdown.vue

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

frontend_nuxt/nuxt.config.ts

@@ -12,8 +12,8 @@ export default defineNuxtConfig({
       twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
     },
   },
-  // Ensure Vditor styles load before our overrides in global.css
-  css: ['vditor/dist/index.css', '~/assets/global.css'],
+  // 确保 Vditor 样式在 global.css 覆盖前加载
+  css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
   app: {
     head: {
       script: [
@@ -52,6 +52,8 @@ export default defineNuxtConfig({
         },
       ],
     },
+    baseURL: '/',
+    buildAssetsDir: '/_nuxt/',
   },
   vue: {
     compilerOptions: {

frontend_nuxt/pages/forgot-password.vue

@@ -2,6 +2,7 @@
   <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>
@@ -19,6 +20,10 @@
         <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>
@@ -26,6 +31,8 @@
 <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
 
@@ -39,6 +46,7 @@ const passwordError = ref('')
 const isSending = ref(false)
 const isVerifying = ref(false)
 const isResetting = ref(false)
+const route = useRoute()
 
 onMounted(() => {
   if (route.query.email) {
@@ -137,6 +145,21 @@ 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;

frontend_nuxt/pages/index.vue

@@ -50,7 +50,7 @@
           </div>
         </div>
 
-        <div v-if="isLoadingPosts && articles.length === 0" class="loading-container">
+        <div v-if="pendingFirst" class="loading-container">
           <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
 
@@ -60,7 +60,12 @@
           </div>
         </div>
 
-        <div class="article-item" v-for="article in articles" :key="article.id">
+        <div
+          v-if="!pendingFirst"
+          class="article-item"
+          v-for="article in articles"
+          :key="article.id"
+        >
           <div class="article-main-container">
             <NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
               <i v-if="article.pinned" class="fas fa-thumbtack pinned-icon"></i>
@@ -104,15 +109,14 @@
         热门帖子功能开发中，敬请期待。
       </div>
       <div v-else class="placeholder-container">分类浏览功能开发中，敬请期待。</div>
-      <div v-if="isLoadingPosts && articles.length > 0" class="loading-container bottom-loading">
+      <div v-if="isLoadingMore && articles.length > 0" class="loading-container bottom-loading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
     </div>
   </div>
 </template>
-
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
@@ -142,7 +146,9 @@ const selectedTags = ref([])
 const route = useRoute()
 const tagOptions = ref([])
 const categoryOptions = ref([])
-const isLoadingPosts = ref(false)
+
+const isLoadingMore = ref(false)
+
 const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
 const selectedTopic = ref(
   route.query.view === 'ranking' ? '排行榜' : route.query.view === 'latest' ? '最新' : '最新回复',
@@ -153,11 +159,11 @@ const pageSize = 10
 const isMobile = useIsMobile()
 const allLoaded = ref(false)
 
+/** URL 参数 -> 本地筛选值 **/
 const selectedCategorySet = (category) => {
   const c = decodeURIComponent(category)
   selectedCategory.value = isNaN(c) ? c : Number(c)
 }
-
 const selectedTagsSet = (tags) => {
   const t = Array.isArray(tags) ? tags.join(',') : tags
   selectedTags.value = t
@@ -167,23 +173,17 @@ const selectedTagsSet = (tags) => {
     .map((v) => (isNaN(v) ? v : Number(v)))
 }
 
+/** 初始化：仅在客户端首渲染时根据路由同步一次 **/
 onMounted(() => {
-  const query = route.query
-  const category = query.category
-  const tags = query.tags
-
-  if (category) {
-    selectedCategorySet(category)
-  }
-  if (tags) {
-    selectedTagsSet(tags)
-  }
+  const { category, tags } = route.query
+  if (category) selectedCategorySet(category)
+  if (tags) selectedTagsSet(tags)
 })
 
+/** 路由变更时同步筛选 **/
 watch(
   () => route.query,
-  () => {
-    const query = route.query
+  (query) => {
     const category = query.category
     const tags = query.tags
     category && selectedCategorySet(category)
@@ -191,18 +191,14 @@ watch(
   },
 )
 
+/** 选项加载（分类/标签名称回填） **/
 const loadOptions = async () => {
   if (selectedCategory.value && !isNaN(selectedCategory.value)) {
     try {
-      const res = await fetch(`${API_BASE_URL}/api/categories/${selectedCategory.value}`)
-      if (res.ok) {
-        categoryOptions.value = [await res.json()]
-      }
-    } catch (e) {
-      /* ignore */
-    }
+      const res = await fetch(`${API_BASE_URL}/api/categories/`)
+      if (res.ok) categoryOptions.value = [await res.json()]
+    } catch {}
   }
-
   if (selectedTags.value.length) {
     const arr = []
     for (const t of selectedTags.value) {
@@ -210,74 +206,97 @@ const loadOptions = async () => {
         try {
           const r = await fetch(`${API_BASE_URL}/api/tags/${t}`)
           if (r.ok) arr.push(await r.json())
-        } catch (e) {
-          /* ignore */
-        }
+        } catch {}
       }
     }
     tagOptions.value = arr
   }
 }
 
-const buildUrl = () => {
-  let url = `${API_BASE_URL}/api/posts?page=${page.value}&pageSize=${pageSize}`
-  if (selectedCategory.value) {
-    url += `&categoryId=${selectedCategory.value}`
-  }
-  if (selectedTags.value.length) {
-    selectedTags.value.forEach((t) => {
-      url += `&tagIds=${t}`
-    })
-  }
-  return url
+/** 列表 API 路径与查询参数 **/
+const baseQuery = computed(() => ({
+  categoryId: selectedCategory.value || undefined,
+  tagIds: selectedTags.value.length ? selectedTags.value : undefined,
+}))
+const listApiPath = computed(() => {
+  if (selectedTopic.value === '排行榜') return '/api/posts/ranking'
+  if (selectedTopic.value === '最新回复') return '/api/posts/latest-reply'
+  return '/api/posts'
+})
+const buildUrl = ({ pageNo }) => {
+  const url = new URL(`${API_BASE_URL}${listApiPath.value}`)
+  url.searchParams.set('page', pageNo)
+  url.searchParams.set('pageSize', pageSize)
+  if (baseQuery.value.categoryId) url.searchParams.set('categoryId', baseQuery.value.categoryId)
+  if (baseQuery.value.tagIds)
+    for (const t of baseQuery.value.tagIds) url.searchParams.append('tagIds', t)
+  return url.toString()
 }
+const tokenHeader = computed(() => {
+  const token = getToken()
+  return token ? { Authorization: `Bearer ${token}` } : {}
+})
 
-const buildRankUrl = () => {
-  let url = `${API_BASE_URL}/api/posts/ranking?page=${page.value}&pageSize=${pageSize}`
-  if (selectedCategory.value) {
-    url += `&categoryId=${selectedCategory.value}`
-  }
-  if (selectedTags.value.length) {
-    selectedTags.value.forEach((t) => {
-      url += `&tagIds=${t}`
-    })
-  }
-  return url
-}
+/** —— 首屏数据托管（SSR） —— **/
+const asyncKey = computed(() => [
+  'home:firstpage',
+  selectedTopic.value,
+  String(baseQuery.value.categoryId ?? ''),
+  JSON.stringify(baseQuery.value.tagIds ?? []),
+])
+const {
+  data: firstPage,
+  pending: pendingFirst,
+  refresh: refreshFirst,
+} = await useAsyncData(
+  () => asyncKey.value.join('::'),
+  async () => {
+    const res = await $fetch(buildUrl({ pageNo: 0 }), { headers: tokenHeader.value })
+    const data = Array.isArray(res) ? res : []
+    return data.map((p) => ({
+      id: p.id,
+      title: p.title,
+      description: p.content,
+      category: p.category,
+      tags: p.tags || [],
+      members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+      comments: p.commentCount,
+      views: p.views,
+      time: TimeManager.format(
+        selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
+      ),
+      pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
+      type: p.type,
+    }))
+  },
+  {
+    server: true,
+    default: () => [],
+    watch: [selectedTopic, baseQuery],
+  },
+)
 
-const buildReplyUrl = () => {
-  let url = `${API_BASE_URL}/api/posts/latest-reply?page=${page.value}&pageSize=${pageSize}`
-  if (selectedCategory.value) {
-    url += `&categoryId=${selectedCategory.value}`
-  }
-  if (selectedTags.value.length) {
-    selectedTags.value.forEach((t) => {
-      url += `&tagIds=${t}`
-    })
-  }
-  return url
-}
-
-const fetchPosts = async (reset = false) => {
-  if (reset) {
+/** 首屏/筛选变更：重置分页并灌入 firstPage **/
+watch(
+  firstPage,
+  (data) => {
     page.value = 0
-    allLoaded.value = false
-    articles.value = []
-  }
-  if (isLoadingPosts.value || allLoaded.value) return
-  try {
-    isLoadingPosts.value = true
-    const token = getToken()
-    const res = await fetch(buildUrl(), {
-      headers: {
-        Authorization: token ? `Bearer ${token}` : '',
-      },
-    })
-    isLoadingPosts.value = false
-    if (!res.ok) return
-    const data = await res.json()
-    articles.value.push(
-      ...data.map((p) => ({
+    articles.value = [...(data || [])]
+    allLoaded.value = (data?.length || 0) < pageSize
+  },
+  { immediate: true },
+)
+
+/** —— 滚动加载更多 —— **/
+let inflight = null
+const fetchNextPage = async () => {
+  if (allLoaded.value || pendingFirst.value || inflight) return
+  const nextPage = page.value + 1
+  isLoadingMore.value = true
+  inflight = $fetch(buildUrl({ pageNo: nextPage }), { headers: tokenHeader.value })
+    .then((res) => {
+      const data = Array.isArray(res) ? res : []
+      const mapped = data.map((p) => ({
         id: p.id,
         title: p.title,
         description: p.content,
@@ -286,130 +305,59 @@ const fetchPosts = async (reset = false) => {
         members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
         comments: p.commentCount,
         views: p.views,
-        time: TimeManager.format(p.createdAt),
-        pinned: !!p.pinnedAt,
+        time: TimeManager.format(
+          selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
+        ),
+        pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
         type: p.type,
-      })),
-    )
-    if (data.length < pageSize) {
-      allLoaded.value = true
-    } else {
-      page.value += 1
-    }
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const fetchRanking = async (reset = false) => {
-  if (reset) {
-    page.value = 0
-    allLoaded.value = false
-    articles.value = []
-  }
-  if (isLoadingPosts.value || allLoaded.value) return
-  try {
-    isLoadingPosts.value = true
-    const token = getToken()
-    const res = await fetch(buildRankUrl(), {
-      headers: {
-        Authorization: token ? `Bearer ${token}` : '',
-      },
+      }))
+      articles.value.push(...mapped)
+      if (data.length < pageSize) {
+        allLoaded.value = true
+      } else {
+        page.value = nextPage
+      }
     })
-    isLoadingPosts.value = false
-    if (!res.ok) return
-    const data = await res.json()
-    articles.value.push(
-      ...data.map((p) => ({
-        id: p.id,
-        title: p.title,
-        description: p.content,
-        category: p.category,
-        tags: p.tags || [],
-        members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
-        comments: p.commentCount,
-        views: p.views,
-        time: TimeManager.format(p.createdAt),
-        pinned: !!p.pinnedAt,
-        type: p.type,
-      })),
-    )
-    if (data.length < pageSize) {
-      allLoaded.value = true
-    } else {
-      page.value += 1
-    }
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const fetchLatestReply = async (reset = false) => {
-  if (reset) {
-    page.value = 0
-    allLoaded.value = false
-    articles.value = []
-  }
-  if (isLoadingPosts.value || allLoaded.value) return
-  try {
-    isLoadingPosts.value = true
-    const token = getToken()
-    const res = await fetch(buildReplyUrl(), {
-      headers: {
-        Authorization: token ? `Bearer ${token}` : '',
-      },
+    .finally(() => {
+      inflight = null
+      isLoadingMore.value = false
     })
-    isLoadingPosts.value = false
-    if (!res.ok) return
-    const data = await res.json()
-    articles.value.push(
-      ...data.map((p) => ({
-        id: p.id,
-        title: p.title,
-        description: p.content,
-        category: p.category,
-        tags: p.tags || [],
-        members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
-        comments: p.commentCount,
-        views: p.views,
-        time: TimeManager.format(p.lastReplyAt || p.createdAt),
-        pinned: !!p.pinnedAt,
-        type: p.type,
-      })),
-    )
-    if (data.length < pageSize) {
-      allLoaded.value = true
-    } else {
-      page.value += 1
-    }
-  } catch (e) {
-    console.error(e)
-  }
 }
 
-const fetchContent = async (reset = false) => {
-  if (selectedTopic.value === '排行榜') {
-    await fetchRanking(reset)
-  } else if (selectedTopic.value === '最新回复') {
-    await fetchLatestReply(reset)
-  } else {
-    await fetchPosts(reset)
-  }
+/** 绑定滚动加载（避免挂载瞬间触发） **/
+let initialReady = false
+const loadMoreGuarded = async () => {
+  if (!initialReady) return
+  await fetchNextPage()
 }
+useScrollLoadMore(loadMoreGuarded)
+watch(
+  articles,
+  () => {
+    if (!initialReady && articles.value.length) initialReady = true
+  },
+  { immediate: true },
+)
 
-useScrollLoadMore(fetchContent)
-
+/** 切换分类/标签/Tab：useAsyncData 已 watch，这里只需确保 options 加载 **/
 watch([selectedCategory, selectedTags], () => {
-  fetchContent(true)
+  loadOptions()
 })
-
 watch(selectedTopic, () => {
-  fetchContent(true)
+  // 仅当需要额外选项时加载
+  loadOptions()
 })
 
-const sanitizeDescription = (text) => stripMarkdown(text)
+/** 选项首屏加载：服务端执行一次；客户端兜底 **/
+if (import.meta.server) {
+  await loadOptions()
+}
+onMounted(() => {
+  if (categoryOptions.value.length === 0 && tagOptions.value.length === 0) loadOptions()
+})
 
-await Promise.all([loadOptions(), fetchContent()])
+/** 其他工具函数 **/
+const sanitizeDescription = (text) => stripMarkdown(text)
 </script>
 
 <style scoped>

frontend_nuxt/pages/new-post.vue

@@ -77,7 +77,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import 'flatpickr/dist/flatpickr.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import FlatPickr from 'vue-flatpickr-component'

frontend_nuxt/pages/posts/[id]/index.vue

@@ -232,7 +232,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRoute } from 'vue-router'
 import CommentItem from '~/components/CommentItem.vue'
@@ -268,7 +268,6 @@ 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([])
@@ -392,7 +391,7 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
   avatar: c.author.avatar,
   text: c.content,
   reactions: c.reactions || [],
-  pinned: !!c.pinnedAt,
+  pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at),
   reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
   openReplies: level === 0,
   src: c.author.avatar,
@@ -455,38 +454,41 @@ const onCommentDeleted = (id) => {
   fetchComments()
 }
 
-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 {
+  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 totalPosts = computed(() => comments.value.length + 1)
 const lastReplyTime = computed(() =>
@@ -607,6 +609,7 @@ const approvePost = async () => {
   if (res.ok) {
     status.value = 'PUBLISHED'
     toast.success('已通过审核')
+    await refreshPost()
   } else {
     toast.error('操作失败')
   }
@@ -620,8 +623,8 @@ const pinPost = async () => {
     headers: { Authorization: `Bearer ${token}` },
   })
   if (res.ok) {
-    pinnedAt.value = new Date().toISOString()
     toast.success('已置顶')
+    await refreshPost()
   } else {
     toast.error('操作失败')
   }
@@ -635,8 +638,8 @@ const unpinPost = async () => {
     headers: { Authorization: `Bearer ${token}` },
   })
   if (res.ok) {
-    pinnedAt.value = null
     toast.success('已取消置顶')
+    await refreshPost()
   } else {
     toast.error('操作失败')
   }
@@ -674,6 +677,7 @@ const rejectPost = async () => {
   if (res.ok) {
     status.value = 'REJECTED'
     toast.success('已驳回')
+    await refreshPost()
   } else {
     toast.error('操作失败')
   }
@@ -709,7 +713,7 @@ const joinLottery = async () => {
   })
   if (res.ok) {
     toast.success('已参与抽奖')
-    await fetchPost()
+    await refreshPost()
   } else {
     toast.error('操作失败')
   }
@@ -780,9 +784,8 @@ onMounted(async () => {
   window.addEventListener('scroll', updateCurrentIndex)
   jumpToHashComment()
 })
-
-await fetchPost()
 </script>
+
 <style>
 .post-page-container {
   background-color: var(--background-color);

frontend_nuxt/plugins/click-outside.ts

@@ -1,3 +1,4 @@
+import { defineNuxtPlugin } from 'nuxt/app'
 import ClickOutside from '~/directives/clickOutside.js'
 
 export default defineNuxtPlugin((nuxtApp) => {

frontend_nuxt/router/index.js

@@ -1,7 +0,0 @@
-export default {
-  push(path) {
-    if (process.client) {
-      window.location.href = path
-    }
-  },
-}

frontend_nuxt/utils/google.js

@@ -24,6 +24,7 @@ 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

frontend_nuxt/utils/markdown.js

@@ -1,5 +1,14 @@
 import hljs from 'highlight.js'
-import 'highlight.js/styles/github.css'
+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 MarkdownIt from 'markdown-it'
 import { toast } from '../main'
 import { tiebaEmoji } from './tiebaEmoji'
@@ -86,7 +95,11 @@ const md = new MarkdownIt({
     } else {
       code = hljs.highlightAuto(str).value
     }
-    return `<pre class="code-block"><button class="copy-code-btn">Copy</button><code class="hljs language-${lang || ''}">${code}</code></pre>`
+    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>`
   },
 })