前端：完善 naive-ui 配置，修复 API 返回值访问方式，修复 Sidebar 硬编码数据，修复路由守卫逻辑，修复其他组件问题。

frontend/src/api/index.ts

@@ -1,5 +1,4 @@
-import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
-import type { ApiResponse } from '@/types'
+import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
 
 // 创建 axios 实例
 const request: AxiosInstance = axios.create({
@@ -27,20 +26,22 @@ request.interceptors.request.use(
 
 // 响应拦截器
 request.interceptors.response.use(
-  (response: AxiosResponse<ApiResponse>) => {
-    return response
+  (response) => {
+    // 成功时返回 response.data（即 ApiResponse）
+    return response.data
   },
   (error: any) => {
     if (error.response) {
-      const { status } = error.response
+      const { status, data } = error.response
 
-      // 401 未授权，跳转登录页
+      // 401 未授权，清除 token
       if (status === 401) {
         localStorage.removeItem('access_token')
         window.location.href = '/login'
       }
 
-      return Promise.reject(error.response.data)
+      // 返回错误信息
+      return Promise.reject(data)
     }
 
     return Promise.reject(error)
@@ -48,21 +49,22 @@ request.interceptors.response.use(
 )
 
 // 封装请求方法
+// 返回 Promise<ApiResponse<T>>，调用者通过 .data 访问实际数据
 export const http = {
-  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    return request.get(url, config)
+  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<{ code: number; message: string; data: T }> {
+    return request.get(url, config).then(res => res.data)
   },
 
-  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    return request.post(url, data, config)
+  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<{ code: number; message: string; data: T }> {
+    return request.post(url, data, config).then(res => res.data)
   },
 
-  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    return request.put(url, data, config)
+  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<{ code: number; message: string; data: T }> {
+    return request.put(url, data, config).then(res => res.data)
   },
 
-  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
-    return request.delete(url, config)
+  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<{ code: number; message: string; data: T }> {
+    return request.delete(url, config).then(res => res.data)
   },
 }
 

frontend/src/components/Sidebar.vue

@@ -1,26 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
+import { categoryApi } from '@/api/category'
+import { postApi } from '@/api/post'
+import type { Category, Post } from '@/types'
 
-const categories = ref([
-  { id: '1', name: '动漫资讯', slug: 'anime', post_count: 12 },
-  { id: '2', name: '游戏攻略', slug: 'game', post_count: 8 },
-  { id: '3', name: '二次元美图', slug: 'pictures', post_count: 25 },
-  { id: '4', name: '同人创作', slug: 'fanwork', post_count: 15 },
-])
+const categories = ref<Category[]>([])
+const tags = ref<string[]>(['原神', '崩坏星穹铁道', '我的世界', 'EVA', '约定的梦幻岛', '咒术回战', 'Cosplay', '手办'])
+const hotPosts = ref<Post[]>([])
 
-const tags = ref([
-  '原神', '崩坏星穹铁道', '我的世界', 'EVA',
-  '约定的梦幻岛', '咒术回战', 'Cosplay', '手办'
-])
+async function fetchSidebarData() {
+  try {
+    // 获取分类
+    const catResponse = await categoryApi.getAll()
+    categories.value = catResponse.data
 
-const hotPosts = ref([
-  { id: '1', title: '《原神》4.2版本前瞻：芙宁娜技能演示', view_count: 5200 },
-  { id: '2', title: '2024年必追的10部春季新番', view_count: 3800 },
-  { id: '3', title: '《崩坏星穹铁道》角色强度榜更新', view_count: 2900 },
-  { id: '4', title: '二次元手游开服大横评', view_count: 2100 },
-  { id: '5', title: '手办入坑指南：从萌新到进阶', view_count: 1800 },
-])
+    // 获取热门文章
+    const postsResponse = await postApi.getList({ page: 1, page_size: 10 })
+    hotPosts.value = postsResponse.data.items
+      .filter((p: Post) => p.status === 'published')
+      .sort((a: Post, b: Post) => b.view_count - a.view_count)
+      .slice(0, 5)
+  } catch (error) {
+    console.error('Failed to fetch sidebar data:', error)
+  }
+}
+
+onMounted(() => {
+  fetchSidebarData()
+})
 </script>
 
 <template>
@@ -53,9 +61,8 @@ const hotPosts = ref([
       <h3 class="sidebar-title">分类</h3>
       <ul class="category-list">
         <li v-for="cat in categories" :key="cat.id">
-          <RouterLink :to="`/category/${cat.slug}`" class="category-item">
+          <RouterLink :to="`/category/${cat.id}`" class="category-item">
             <span>{{ cat.name }}</span>
-            <span class="category-count">{{ cat.post_count }}</span>
           </RouterLink>
         </li>
       </ul>
@@ -65,9 +72,9 @@ const hotPosts = ref([
     <div class="sidebar-card">
       <h3 class="sidebar-title">标签</h3>
       <div class="tag-cloud">
-        <RouterLink v-for="tag in tags" :key="tag" :to="`/tag/${tag}`" class="tag">
+        <span v-for="tag in tags" :key="tag" class="tag">
           {{ tag }}
-        </RouterLink>
+        </span>
       </div>
     </div>
 

frontend/src/main.ts

@@ -1,12 +1,14 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import naive from 'naive-ui'
 import App from './App.vue'
 import router from './router'
-// import naive-ui (按需引入，后续按需配置)
+import './style.css'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(naive)
 
 app.mount('#app')

frontend/src/router/index.ts

@@ -83,17 +83,37 @@ const router = createRouter({
 })
 
 // 路由守卫
-router.beforeEach((to, _from, next) => {
+router.beforeEach(async (to, _from, next) => {
   const userStore = useUserStore()
   const token = localStorage.getItem('access_token')
 
+  // 需要登录但未登录
   if (to.meta.requiresAuth && !token) {
     next({ name: 'Login' })
-  } else if (to.meta.requiresAdmin && userStore.user?.is_active !== true) {
-    next({ name: 'Home' })
-  } else {
-    next()
+    return
   }
+
+  // 需要管理员权限但不是管理员
+  if (to.meta.requiresAdmin) {
+    // 如果还没有用户信息，先获取
+    if (!userStore.user && token) {
+      try {
+        await userStore.fetchUser()
+      } catch {
+        // 获取失败，清除 token
+        userStore.logout()
+        next({ name: 'Login' })
+        return
+      }
+    }
+
+    if (!userStore.user?.is_superuser) {
+      next({ name: 'Home' })
+      return
+    }
+  }
+
+  next()
 })
 
 export default router

frontend/src/store/user.ts

@@ -10,7 +10,7 @@ export const useUserStore = defineStore('user', () => {
 
   // 计算属性
   const isLoggedIn = computed(() => !!token.value)
-  const isAdmin = computed(() => user.value?.is_active === true)
+  const isAdmin = computed(() => user.value?.is_superuser === true)
 
   // Actions
   function setToken(newToken: string | null) {

frontend/src/types/index.ts

@@ -5,6 +5,7 @@ export interface User {
   email: string
   avatar?: string
   is_active: boolean
+  is_superuser: boolean
   created_at: string
   updated_at: string
 }

frontend/src/views/Category.vue

@@ -23,7 +23,7 @@ async function fetchCategoryAndPosts() {
       // 全部分类页
       category.value = null
       const response = await postApi.getList({ page: 1, page_size: 20 })
-      posts.value = response.data.items.filter(p => p.status === 'published')
+      posts.value = response.data.items.filter((p: Post) => p.status === 'published')
     } else {
       // 特定分类
       const [catResponse, postsResponse] = await Promise.all([
@@ -31,7 +31,7 @@ async function fetchCategoryAndPosts() {
         postApi.getList({ category_id: categoryId, page: 1, page_size: 20 }),
       ])
       category.value = catResponse.data
-      posts.value = postsResponse.data.items.filter(p => p.status === 'published')
+      posts.value = postsResponse.data.items.filter((p: Post) => p.status === 'published')
     }
   } catch (error) {
     console.error('Failed to fetch category:', error)

frontend/src/views/Home.vue

@@ -22,7 +22,7 @@ async function fetchPosts(categoryId?: string) {
       params.category_id = categoryId
     }
     const response = await postApi.getList(params)
-    posts.value = response.data.items.filter(p => p.status === 'published')
+    posts.value = response.data.items.filter((p: any) => p.status === 'published')
   } catch (error) {
     console.error('Failed to fetch posts:', error)
   } finally {

frontend/src/views/admin/PostManage.vue

@@ -93,7 +93,7 @@ async function savePost() {
     closeEditor()
     fetchPosts()
   } catch (error: any) {
-    message.error(error.response?.data?.message || '保存失败')
+    message.error(error?.message || '保存失败')
   }
 }
 

frontend/src/views/auth/Login.vue

@@ -23,7 +23,7 @@ async function handleLogin() {
     message.success('登录成功')
     router.push('/')
   } catch (error: any) {
-    message.error(error.response?.data?.message || '登录失败，请检查邮箱和密码')
+    message.error(error?.message || '登录失败，请检查邮箱和密码')
   } finally {
     loading.value = false
   }

frontend/src/views/auth/Register.vue

@@ -32,7 +32,7 @@ async function handleRegister() {
     message.success('注册成功，请登录')
     router.push('/login')
   } catch (error: any) {
-    message.error(error.response?.data?.message || '注册失败')
+    message.error(error?.message || '注册失败')
   } finally {
     loading.value = false
   }