数据结构优化

client/src/pages/BlogDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <section id="blog-detail" class="page-section block animate-slide-down">
-    <div class="max-w-4xl mx-auto pt-32 px-6 pb-20 relative">
+    <div class="max-w-7xl mx-auto pt-32 px-6 pb-20 relative">
       <!-- 返回按钮 -->
       <button
           @click="$router.push('/blog')"
@@ -27,71 +27,171 @@
       </div>
 
       <!-- Blog detail content -->
-      <div v-else class="space-y-12 relative">
-        <!-- 目录侧边栏 (仅在 XL 屏幕显示) -->
-        <aside class="hidden xl:block absolute left-full ml-12 top-0 h-full">
-          <div class="sticky top-32 w-64 p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
-            <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
-              <i data-lucide="list" class="w-4 h-4 text-art-accent"></i>
-              目录导航
-            </h3>
-            <nav class="space-y-1 relative">
-              <!-- 激活状态的指示条 -->
-              <div
-                  class="absolute left-0 w-0.5 bg-art-accent transition-all duration-300 ease-out"
-                  :style="activeIndicatorStyle"
-                  v-if="toc.length > 0"
-              ></div>
-
-              <ul class="space-y-1 border-l border-white/10 ml-[1px]">
-                <li v-for="item in toc" :key="item.id">
-                  <a
-                      @click.prevent="scrollToHeading(item.id)"
-                      href="#"
-                      class="block text-xs py-1.5 transition-all duration-200 border-l-2 border-transparent pl-4 hover:text-white"
-                      :class="[
-                      activeId === item.id ? 'text-art-accent font-medium' : 'text-art-muted',
-                      item.level > 2 ? 'pl-8' : 'pl-4'
-                    ]"
-                  >
-                    {{ item.text }}
-                  </a>
-                </li>
-              </ul>
-              <div v-if="toc.length === 0" class="text-xs text-art-muted italic pl-4">
-                暂无目录
+      <div v-else class="xl:flex xl:gap-12 relative">
+        <!-- 主内容区域 -->
+        <div class="flex-1 space-y-12">
+          <!-- 文章信息 -->
+          <div class="border-b border-white/5 pb-10">
+            <div class="flex items-center gap-4 mb-6">
+              <span class="px-3 py-1 border border-white/20 rounded-full text-xs font-mono text-art-accent uppercase tracking-wider">{{ post.categoryName || '未分类' }}</span>
+              <span class="text-sm text-art-muted">{{ post.date }}</span>
+            </div>
+            <h1 class="font-serif text-4xl md:text-5xl lg:text-6xl text-white leading-tight mb-8">{{ post.title }}</h1>
+            <div class="flex items-center gap-4">
+              <div class="w-10 h-10 rounded-full overflow-hidden border border-white/20">
+                <img
+                    src="https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao"
+                    alt="Avatar"
+                    class="w-full h-full object-cover"
+                >
               </div>
-            </nav>
+              <div>
+                <div class="text-sm font-medium text-white">年糕崽崽</div>
+                <div class="text-xs text-art-muted">前端架构师</div>
+              </div>
+            </div>
           </div>
-        </aside>
 
-        <!-- 文章信息 -->
-        <div class="border-b border-white/5 pb-10">
-          <div class="flex items-center gap-4 mb-6">
-            <span class="px-3 py-1 border border-white/20 rounded-full text-xs font-mono text-art-accent uppercase tracking-wider">{{ post.categoryName || '未分类' }}</span>
-            <span class="text-sm text-art-muted">{{ post.date }}</span>
-          </div>
-          <h1 class="font-serif text-4xl md:text-5xl lg:text-6xl text-white leading-tight mb-8">{{ post.title }}</h1>
-          <div class="flex items-center gap-4">
-            <div class="w-10 h-10 rounded-full overflow-hidden border border-white/20">
-              <img
-                  src="https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao"
-                  alt="Avatar"
-                  class="w-full h-full object-cover"
-              >
-            </div>
-            <div>
-              <div class="text-sm font-medium text-white">年糕崽崽</div>
-              <div class="text-xs text-art-muted">前端架构师</div>
-            </div>
-          </div>
+          <!-- 文章内容 - 使用 v-html 渲染 Markdown 解析后的 HTML -->
+          <!-- ref="articleRef" 用于后续绑定复制事件和提取目录 -->
+          <article ref="articleRef" class="blog-content prose prose-invert prose-lg max-w-none text-art-muted leading-relaxed">
+            <div v-html="renderedContent"></div>
+          </article>
         </div>
 
-        <!-- 文章内容 - 使用 v-html 渲染 Markdown 解析后的 HTML -->
-        <!-- ref="articleRef" 用于后续绑定复制事件和提取目录 -->
-        <article ref="articleRef" class="blog-content prose prose-invert prose-lg max-w-none text-art-muted leading-relaxed">
-          <div v-html="renderedContent"></div>
-        </article>
+        <!-- 目录侧边栏 (仅在 XL 屏幕显示) -->
+        <aside class="hidden xl:block w-64 flex-shrink-0">
+          <div class="sticky top-32 space-y-6">
+            <!-- 目录导航 -->
+            <div class="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+              <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+                <i data-lucide="list" class="w-4 h-4 text-art-accent"></i>
+                目录导航
+              </h3>
+              <nav class="space-y-1 relative">
+                <!-- 激活状态的指示条 -->
+                <div
+                    class="absolute left-0 w-0.5 bg-art-accent transition-all duration-300 ease-out"
+                    :style="activeIndicatorStyle"
+                    v-if="toc.length > 0"
+                ></div>
+
+                <ul class="space-y-1 border-l border-white/10 ml-[1px]">
+                  <li v-for="item in toc" :key="item.id">
+                    <a
+                        @click.prevent="scrollToHeading(item.id)"
+                        href="#"
+                        class="block text-xs py-1.5 transition-all duration-200 border-l-2 border-transparent pl-4 hover:text-white"
+                        :class="[
+                        activeId === item.id ? 'text-art-accent font-medium' : 'text-art-muted',
+                        item.level > 2 ? 'pl-8' : 'pl-4'
+                      ]"
+                    >
+                      {{ item.text }}
+                    </a>
+                  </li>
+                </ul>
+                <div v-if="toc.length === 0" class="text-xs text-art-muted italic pl-4">
+                  暂无目录
+                </div>
+              </nav>
+            </div>
+
+            <!-- 专栏跳转卡片 -->
+            <div v-if="post.columnId && post.columnName" class="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+              <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+                <i data-lucide="book-open" class="w-4 h-4 text-art-accent"></i>
+                所属专栏
+              </h3>
+              <a
+                  @click.prevent="router.push(`/columns/${post.columnId}`)"
+                  href="#"
+                  class="block p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 hover:border-art-accent/50 transition-all duration-200 group"
+              >
+                <div class="text-sm font-medium text-white group-hover:text-art-accent transition-colors mb-1">
+                  {{ post.columnName }}
+                </div>
+                <div class="text-xs text-art-muted flex items-center gap-1">
+                  <i data-lucide="arrow-right" class="w-3 h-3"></i>
+                  查看专栏
+                </div>
+              </a>
+            </div>
+
+            <!-- 分类搜索卡片 -->
+            <div v-if="post.categoryId && post.categoryName" class="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+              <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+                <i data-lucide="folder" class="w-4 h-4 text-art-accent"></i>
+                分类
+              </h3>
+              <a
+                  @click.prevent="router.push(`/blog?category=${post.categoryId}`)"
+                  href="#"
+                  class="block p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 hover:border-art-accent/50 transition-all duration-200 group"
+              >
+                <div class="text-sm font-medium text-white group-hover:text-art-accent transition-colors mb-1">
+                  {{ post.categoryName }}
+                </div>
+                <div class="text-xs text-art-muted flex items-center gap-1">
+                  <i data-lucide="arrow-right" class="w-3 h-3"></i>
+                  查看分类
+                </div>
+              </a>
+            </div>
+
+            <!-- 标签搜索卡片 -->
+            <div v-if="post.tags && post.tags.length > 0" class="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+              <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+                <i data-lucide="tags" class="w-4 h-4 text-art-accent"></i>
+                标签
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                <a
+                    v-for="tag in post.tags"
+                    :key="tag.id"
+                    @click.prevent="router.push(`/blog?tag=${tag.id}`)"
+                    href="#"
+                    class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 hover:bg-art-accent/20 hover:border-art-accent/50 hover:text-art-accent text-xs text-art-muted transition-all duration-200"
+                >
+                  {{ tag.name }}
+                </a>
+              </div>
+            </div>
+
+            <!-- 推荐博客 -->
+            <div class="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+              <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+                <i data-lucide="sparkles" class="w-4 h-4 text-art-accent"></i>
+                推荐阅读
+              </h3>
+              <div v-if="loadingRecommendations" class="flex justify-center py-4">
+                <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-art-accent"></div>
+              </div>
+              <div v-else-if="recommendedPosts.length === 0" class="text-xs text-art-muted italic py-4">
+                暂无推荐
+              </div>
+              <div v-else class="space-y-3">
+                <a
+                    v-for="recPost in recommendedPosts"
+                    :key="recPost.id"
+                    @click.prevent="router.push(`/blog/${recPost.id}`)"
+                    href="#"
+                    class="block p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 hover:border-art-accent/50 transition-all duration-200 group"
+                >
+                  <div class="text-sm font-medium text-white group-hover:text-art-accent transition-colors mb-2 line-clamp-2">
+                    {{ recPost.title }}
+                  </div>
+                  <div class="flex items-center gap-3 text-xs text-art-muted">
+                    <span v-if="recPost.categoryName" class="px-2 py-0.5 rounded border border-white/20">
+                      {{ recPost.categoryName }}
+                    </span>
+                    <span>{{ recPost.date }}</span>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </aside>
       </div>
     </div>
   </section>
@@ -100,7 +200,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { fetchPost, Post, getPublicSettings } from '../services/api'
+import { fetchPost, getRecommendedPosts, Post, getPublicSettings } from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
 
 // 引入 Markdown 解析依赖
@@ -138,6 +238,8 @@ const post = ref<Post>({
 
 const loading = ref(false)
 const error = ref('')
+const recommendedPosts = ref<Post[]>([])
+const loadingRecommendations = ref(false)
 
 const { initObserver } = useScrollAnimation()
 
@@ -371,6 +473,9 @@ const fetchBlogDetail = async () => {
         await updatePageTitle(postData.title)
       }
       
+      // 获取推荐文章
+      fetchRecommendations()
+      
       // 初始化动画、事件监听和目录 - 在数据加载完成后
       nextTick(() => {
         setTimeout(() => {
@@ -392,6 +497,20 @@ const fetchBlogDetail = async () => {
   }
 }
 
+// 获取推荐文章
+const fetchRecommendations = async () => {
+  loadingRecommendations.value = true
+  try {
+    const posts = await getRecommendedPosts(postId, 3)
+    recommendedPosts.value = posts
+  } catch (err) {
+    console.error('Error fetching recommendations:', err)
+    recommendedPosts.value = []
+  } finally {
+    loadingRecommendations.value = false
+  }
+}
+
 onMounted(() => {
   fetchBlogDetail()
 })

client/src/pages/Home.vue

@@ -49,13 +49,14 @@
           @click="$router.push('/blog/' + featuredPost.id)"
         >
           <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10"></div>
-          <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-60 mix-blend-overlay"></div>
+          <div class="absolute inset-0 bg-[url('/public/bg/img.png')] bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-60 mix-blend-overlay"></div>
           <div class="relative z-20 space-y-2">
             <div class="flex items-center gap-3">
               <span class="px-2 py-1 text-[10px] font-mono border border-white/20 rounded-full text-white backdrop-blur-sm">{{ featuredPost.categoryName || '未分类' }}</span>
               <span class="text-xs text-white/60">{{ featuredPost.date }}</span>
             </div>
-            <h3 class="font-serif text-3xl text-white group-hover:text-art-accent transition-colors">当极简主义遇见复杂数据：Dashboard 设计哲学</h3>
+            <h3 class="font-serif text-3xl text-white group-hover:text-art-accent transition-colors">
+              {{ featuredPost.title }}</h3>
           </div>
         </div>
         <div 

client/src/services/api.ts

@@ -560,6 +560,19 @@ export const fetchPost = async (id: number | string): Promise<Post> => {
   }
 }
 
+// 获取推荐文章（基于IP的协同过滤）
+export const getRecommendedPosts = async (postId: number | string, limit: number = 3): Promise<Post[]> => {
+  try {
+    const response = await fetch(`${API_BASE}/posts/${postId}/recommendations?limit=${limit}`)
+    if (!response.ok) throw new Error('Failed to fetch recommended posts')
+    const data = await response.json()
+    return data.result || []
+  } catch (error) {
+    console.error(`Error fetching recommended posts for ${postId}:`, error)
+    return []
+  }
+}
+
 export const createPost = async (postData: Omit<Post, 'id'>): Promise<void> => {
   try {
     const response = await fetch(`${API_BASE}/admin/posts`, {