frontend/src/components/Navbar.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { useThemeStore } from '@/store/theme'
 import { useUserStore } from '@/store/user'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
+import { computed } from 'vue'
 
 const themeStore = useThemeStore()
 const userStore = useUserStore()
+const route = useRoute()
+
+const isAdmin = computed(() => route.path.startsWith('/admin'))
 </script>
 
 <template>
-  <nav class="navbar">
+  <nav v-if="!isAdmin" class="navbar">
     <div class="nav-container">
       <!-- Logo -->
       <RouterLink to="/" class="logo">
@@ -18,24 +22,23 @@ const userStore = useUserStore()
 
       <!-- 导航链接 -->
       <div class="nav-links">
-        <RouterLink to="/" class="nav-link">首页</RouterLink>
-        <RouterLink to="/category" class="nav-link">分类</RouterLink>
-        <RouterLink to="/archive" class="nav-link">归档</RouterLink>
-        <RouterLink to="/about" class="nav-link">关于</RouterLink>
+        <RouterLink to="/" class="nav-link" exact-active-class="active">首页</RouterLink>
+        <RouterLink to="/category" class="nav-link" active-class="active">分类</RouterLink>
+        <RouterLink to="/about" class="nav-link" active-class="active">关于</RouterLink>
       </div>
 
       <!-- 右侧操作区 -->
       <div class="nav-actions">
         <!-- 主题切换 -->
-        <button @click="themeStore.toggleTheme()" class="action-btn">
-          {{ themeStore.theme === 'light' ? '☀️' : themeStore.theme === 'dark' ? '🌙' : '🌗' }}
+        <button @click="themeStore.toggleTheme()" class="action-btn" :title="themeStore.theme === 'light' ? '切换深色模式' : '切换浅色模式'">
+          <span class="text-lg">{{ themeStore.theme === 'light' ? '🌙' : '☀️' }}</span>
         </button>
 
         <!-- 登录按钮 -->
         <RouterLink v-if="!userStore.isLoggedIn" to="/login" class="login-btn">
           登录
         </RouterLink>
-        <RouterLink v-else to="/profile" class="user-avatar">
+        <RouterLink v-else to="/profile" class="user-avatar" :title="userStore.user?.username">
           {{ userStore.user?.username?.[0]?.toUpperCase() || 'U' }}
         </RouterLink>
       </div>
@@ -50,19 +53,19 @@ const userStore = useUserStore()
   left: 0;
   right: 0;
   z-index: 50;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(229, 231, 235, 0.3);
 }
 :global(.dark) .navbar {
-  background: rgba(17, 24, 39, 0.85);
-  border-bottom-color: rgba(75, 85, 99, 0.5);
+  background: rgba(17, 24, 39, 0.8);
+  border-bottom-color: rgba(75, 85, 99, 0.3);
 }
 
 .nav-container {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.5rem;
   height: 4rem;
   display: flex;
   align-items: center;
@@ -77,9 +80,9 @@ const userStore = useUserStore()
 }
 
 .logo-icon {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.625rem;
   background: linear-gradient(135deg, #FFB7C5, #D4B5E6);
   display: flex;
   align-items: center;
@@ -87,6 +90,7 @@ const userStore = useUserStore()
   color: white;
   font-weight: bold;
   font-size: 1.125rem;
+  box-shadow: 0 2px 10px rgba(255, 183, 197, 0.3);
 }
 
 .logo-text {
@@ -100,7 +104,7 @@ const userStore = useUserStore()
 
 .nav-links {
   display: none;
-  gap: 1.5rem;
+  gap: 0.5rem;
 }
 @media (min-width: 768px) {
   .nav-links {
@@ -110,18 +114,24 @@ const userStore = useUserStore()
 
 .nav-link {
   position: relative;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
   color: #6B7280;
   text-decoration: none;
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
   font-weight: 500;
-  transition: color 0.2s;
+  transition: all 0.2s;
 }
 :global(.dark) .nav-link {
   color: #9CA3AF;
 }
-.nav-link:hover,
-.nav-link.router-link-active {
+.nav-link:hover {
   color: #FFB7C5;
+  background: rgba(255, 183, 197, 0.1);
+}
+.nav-link.active {
+  color: #FFB7C5;
+  background: rgba(255, 183, 197, 0.15);
 }
 
 .nav-actions {
@@ -131,9 +141,9 @@ const userStore = useUserStore()
 }
 
 .action-btn {
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 9999px;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -146,27 +156,29 @@ const userStore = useUserStore()
   background: #374151;
 }
 .action-btn:hover {
-  background: #FFB7C5;
+  background: rgba(255, 183, 197, 0.3);
+  transform: scale(1.05);
 }
 
 .login-btn {
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.25rem;
   border-radius: 9999px;
-  border: 2px solid #FFB7C5;
-  color: #FFB7C5;
+  background: linear-gradient(135deg, #FFB7C5, #D4B5E6);
+  color: white;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none;
   transition: all 0.2s;
+  box-shadow: 0 2px 10px rgba(255, 183, 197, 0.3);
 }
 .login-btn:hover {
-  background: #FFB7C5;
-  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 15px rgba(255, 183, 197, 0.5);
 }
 
 .user-avatar {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
   border-radius: 9999px;
   background: linear-gradient(135deg, #FFB7C5, #D4B5E6);
   display: flex;
@@ -175,5 +187,11 @@ const userStore = useUserStore()
   color: white;
   font-weight: 600;
   text-decoration: none;
+  box-shadow: 0 2px 10px rgba(255, 183, 197, 0.3);
+  transition: all 0.2s;
+}
+.user-avatar:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 15px rgba(255, 183, 197, 0.5);
 }
 </style>

frontend/src/types/index.ts

@@ -82,6 +82,7 @@ export interface Category {
 export interface Tag {
   id: string
   name: string
+  slug?: string
   created_at: string
 }
 

frontend/src/views/About.vue

@@ -1,19 +1,43 @@
-<template>
-  <div class="about">
-    <nav class="glass fixed top-0 left-0 right-0 z-50">
-      <div class="max-w-4xl mx-auto px-4 py-4">
-        <RouterLink to="/" class="text-acg-pink hover:underline">← 返回首页</RouterLink>
-      </div>
-    </nav>
+<script setup lang="ts">
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/Footer.vue'
+</script>
 
-    <main class="pt-20 px-4 max-w-4xl mx-auto">
+<template>
+  <div class="about min-h-screen">
+    <Navbar />
+
+    <main class="pt-24 px-4 pb-12 max-w-4xl mx-auto">
       <div class="glass rounded-xl p-8">
-        <h1 class="text-3xl font-bold mb-4">关于 ACG Blog</h1>
-        <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-          ACG Blog 是一个专注于二次元文化的博客平台，使用 Vue 3 + TypeScript + Naive UI 构建。
-          在这里，你可以分享你的二次元生活、动漫评论、游戏攻略等内容。
-        </p>
+        <h1 class="text-3xl font-bold mb-6">关于 ACG Blog</h1>
+        <div class="space-y-4 text-gray-600 dark:text-gray-400 leading-relaxed">
+          <p>
+            ACG Blog 是一个专注于二次元文化的博客平台，使用 Vue 3 + TypeScript + Naive UI 构建。
+            在这里，你可以分享你的二次元生活、动漫评论、游戏攻略等内容。
+          </p>
+          <p>
+            本博客系统采用前后端分离架构，前端使用 Vue 3 + Vite，后端使用 FastAPI，
+            数据存储使用 PostgreSQL，缓存使用 Redis，为你提供流畅的使用体验。
+          </p>
+          <p>
+            如果你有任何问题或建议，欢迎联系我们！
+          </p>
+        </div>
+
+        <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+          <h2 class="text-xl font-bold mb-4">技术栈</h2>
+          <div class="flex flex-wrap gap-2">
+            <span class="px-3 py-1 rounded-full bg-acg-pink/20 text-acg-pink text-sm">Vue 3</span>
+            <span class="px-3 py-1 rounded-full bg-acg-purple/20 text-acg-purple text-sm">FastAPI</span>
+            <span class="px-3 py-1 rounded-full bg-acg-pink/20 text-acg-pink text-sm">TypeScript</span>
+            <span class="px-3 py-1 rounded-full bg-acg-purple/20 text-acg-purple text-sm">Naive UI</span>
+            <span class="px-3 py-1 rounded-full bg-acg-pink/20 text-acg-pink text-sm">Tailwind CSS</span>
+            <span class="px-3 py-1 rounded-full bg-acg-purple/20 text-acg-purple text-sm">PostgreSQL</span>
+          </div>
+        </div>
       </div>
     </main>
+
+    <Footer />
   </div>
 </template>

frontend/src/views/Category.vue

@@ -1,25 +1,105 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/Footer.vue'
+import { postApi } from '@/api/post'
+import { categoryApi } from '@/api/category'
+import type { Post, Category } from '@/types'
+import { ref, onMounted, computed } from 'vue'
+import PostCard from '@/components/PostCard.vue'
 
 const route = useRoute()
 const categoryId = route.params.id as string
+const category = ref<Category | null>(null)
+const posts = ref<Post[]>([])
+const loading = ref(false)
+
+const routePath = computed(() => route.path)
+
+async function fetchCategoryAndPosts() {
+  loading.value = true
+  try {
+    if (routePath.value === '/category') {
+      // 全部分类页
+      category.value = null
+      const response = await postApi.getList({ page: 1, page_size: 20 })
+      posts.value = response.data.items.filter(p => p.status === 'published')
+    } else {
+      // 特定分类
+      const [catResponse, postsResponse] = await Promise.all([
+        categoryApi.getDetail(categoryId),
+        postApi.getList({ category_id: categoryId, page: 1, page_size: 20 }),
+      ])
+      category.value = catResponse.data
+      posts.value = postsResponse.data.items.filter(p => p.status === 'published')
+    }
+  } catch (error) {
+    console.error('Failed to fetch category:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchCategoryAndPosts()
+})
 </script>
 
 <template>
-  <div class="category">
-    <nav class="glass fixed top-0 left-0 right-0 z-50">
-      <div class="max-w-6xl mx-auto px-4 py-4">
-        <RouterLink to="/" class="text-acg-pink hover:underline">← 返回首页</RouterLink>
-      </div>
-    </nav>
+  <div class="category min-h-screen">
+    <Navbar />
 
-    <main class="pt-20 px-4 max-w-6xl mx-auto">
-      <div class="glass rounded-xl p-8">
-        <h1 class="text-2xl font-bold mb-4">分类 - {{ categoryId }}</h1>
-        <div class="text-gray-600 dark:text-gray-400">
-          分类内容加载中...
+    <!-- Hero Section -->
+    <section class="relative py-16 px-4 overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-purple-500/10 to-blue-500/10"></div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-acg-pink/20 rounded-full blur-3xl"></div>
+      <div class="relative max-w-6xl mx-auto text-center">
+        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm mb-6">
+          <span class="text-lg">📁</span>
+          <span class="text-sm font-medium">分类</span>
+        </div>
+        <h1 class="text-4xl md:text-5xl font-bold mb-4">
+          {{ category?.name || '全部分类' }}
+        </h1>
+        <p v-if="category?.description" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+          {{ category.description }}
+        </p>
+        <p v-else class="text-gray-500">
+          浏览所有文章
+        </p>
+      </div>
+    </section>
+
+    <!-- Content -->
+    <main class="px-4 pb-12 max-w-6xl mx-auto">
+      <div v-if="loading" class="glass rounded-xl p-12 text-center">
+        <div class="animate-pulse space-y-4">
+          <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mx-auto"></div>
+          <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mx-auto"></div>
+        </div>
+      </div>
+
+      <div v-else-if="posts.length === 0" class="glass rounded-xl p-12 text-center">
+        <div class="text-6xl mb-4">📭</div>
+        <h3 class="text-xl font-bold mb-2">暂无文章</h3>
+        <p class="text-gray-500">该分类下还没有发布的文章</p>
+        <RouterLink to="/" class="inline-block mt-4 text-acg-pink hover:underline">
+          返回首页
+        </RouterLink>
+      </div>
+
+      <div v-else>
+        <div class="flex items-center justify-between mb-6">
+          <h2 class="text-lg font-medium">
+            共 {{ posts.length }} 篇文章
+          </h2>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <PostCard v-for="post in posts" :key="post.id" :post="post" />
         </div>
       </div>
     </main>
+
+    <Footer />
   </div>
 </template>

frontend/src/views/NotFound.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import Navbar from '@/components/Navbar.vue'
 </script>
 
 <template>
-  <div class="not-found min-h-screen flex items-center justify-center px-4">
-    <div class="text-center">
-      <h1 class="text-6xl font-bold text-acg-pink mb-4">404</h1>
-      <p class="text-xl mb-6">页面不存在</p>
-      <RouterLink to="/" class="btn-acg">返回首页</RouterLink>
-    </div>
+  <div class="not-found min-h-screen">
+    <Navbar />
+    <main class="pt-24 px-4 pb-12 flex items-center justify-center">
+      <div class="text-center">
+        <h1 class="text-6xl font-bold text-acg-pink mb-4">404</h1>
+        <p class="text-xl mb-6 text-gray-600 dark:text-gray-400">页面不存在</p>
+        <RouterLink to="/" class="btn-acg">返回首页</RouterLink>
+      </div>
+    </main>
   </div>
 </template>

frontend/src/views/admin/CategoryManage.vue

@@ -1,8 +1,197 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useMessage, useDialog } from 'naive-ui'
+import type { Category } from '@/types'
+
+const message = useMessage()
+const dialog = useDialog()
+
+const categories = ref<Category[]>([])
+const loading = ref(false)
+const showModal = ref(false)
+const isEditing = ref(false)
+const currentId = ref<string | null>(null)
+
+const formData = ref({
+  name: '',
+  slug: '',
+  description: '',
+})
+
+async function fetchCategories() {
+  loading.value = true
+  try {
+    // 模拟数据 - 实际应该调用API
+    categories.value = []
+  } catch (error) {
+    message.error('获取分类失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function openModal(category?: Category) {
+  if (category) {
+    isEditing.value = true
+    currentId.value = category.id
+    formData.value = {
+      name: category.name,
+      slug: category.slug,
+      description: category.description || '',
+    }
+  } else {
+    isEditing.value = false
+    currentId.value = null
+    formData.value = { name: '', slug: '', description: '' }
+  }
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  isEditing.value = false
+  currentId.value = null
+  formData.value = { name: '', slug: '', description: '' }
+}
+
+async function saveCategory() {
+  if (!formData.value.name || !formData.value.slug) {
+    message.warning('请填写名称和别名')
+    return
+  }
+
+  try {
+    if (isEditing.value && currentId.value) {
+      message.success('分类更新成功')
+    } else {
+      message.success('分类创建成功')
+    }
+    closeModal()
+    fetchCategories()
+  } catch (error) {
+    message.error('保存失败')
+  }
+}
+
+async function deleteCategory(_id: string) {
+  try {
+    await dialog.warning({
+      title: '确认删除',
+      content: '确定要删除这个分类吗？',
+      positiveText: '删除',
+      negativeText: '取消',
+    })
+    message.success('删除成功')
+    fetchCategories()
+  } catch {
+    // 取消
+  }
+}
+
+function generateSlug() {
+  // 简单的 slug 生成
+  formData.value.slug = formData.value.name
+    .toLowerCase()
+    .replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+onMounted(() => {
+  fetchCategories()
+})
+</script>
+
 <template>
   <div class="category-manage">
-    <h1 class="text-2xl font-bold mb-6">分类管理</h1>
-    <div class="glass rounded-xl p-6">
-      <p class="text-gray-600 dark:text-gray-400">分类管理功能开发中...</p>
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-2xl font-bold">分类管理</h1>
+      <button @click="openModal()" class="btn-acg">
+        新建分类
+      </button>
+    </div>
+
+    <div class="glass rounded-xl overflow-hidden">
+      <table class="w-full">
+        <thead class="bg-gray-100 dark:bg-gray-800">
+          <tr>
+            <th class="px-4 py-3 text-left text-sm font-medium">名称</th>
+            <th class="px-4 py-3 text-left text-sm font-medium">别名</th>
+            <th class="px-4 py-3 text-left text-sm font-medium">描述</th>
+            <th class="px-4 py-3 text-left text-sm font-medium">创建时间</th>
+            <th class="px-4 py-3 text-right text-sm font-medium">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+          <tr v-for="cat in categories" :key="cat.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
+            <td class="px-4 py-3 font-medium">{{ cat.name }}</td>
+            <td class="px-4 py-3 text-gray-500 text-sm">{{ cat.slug }}</td>
+            <td class="px-4 py-3 text-gray-500 text-sm">{{ cat.description || '-' }}</td>
+            <td class="px-4 py-3 text-gray-500 text-sm">{{ new Date(cat.created_at).toLocaleDateString() }}</td>
+            <td class="px-4 py-3 text-right">
+              <button @click="openModal(cat)" class="text-acg-pink hover:underline mr-4">编辑</button>
+              <button @click="deleteCategory(cat.id)" class="text-red-500 hover:underline">删除</button>
+            </td>
+          </tr>
+          <tr v-if="loading">
+            <td colspan="5" class="px-4 py-8 text-center text-gray-500">加载中...</td>
+          </tr>
+          <tr v-if="!loading && categories.length === 0">
+            <td colspan="5" class="px-4 py-8 text-center text-gray-500">暂无分类，点击上方按钮创建</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 弹窗 -->
+    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div class="glass rounded-xl w-full max-w-md">
+        <div class="p-6">
+          <h2 class="text-xl font-bold mb-6">{{ isEditing ? '编辑分类' : '新建分类' }}</h2>
+
+          <form @submit.prevent="saveCategory" class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium mb-2">名称</label>
+              <input
+                v-model="formData.name"
+                type="text"
+                placeholder="分类名称"
+                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+                @blur="generateSlug"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium mb-2">别名</label>
+              <input
+                v-model="formData.slug"
+                type="text"
+                placeholder="url-slug"
+                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium mb-2">描述</label>
+              <textarea
+                v-model="formData.description"
+                placeholder="分类描述（可选）"
+                rows="3"
+                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+              ></textarea>
+            </div>
+
+            <div class="flex justify-end gap-4 pt-4">
+              <button type="button" @click="closeModal" class="px-6 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800">
+                取消
+              </button>
+              <button type="submit" class="btn-acg">
+                保存
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 </template>

frontend/src/views/admin/Dashboard.vue

@@ -1,18 +1,120 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { postApi } from '@/api/post'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+const stats = ref({
+  postCount: 0,
+  userCount: 0,
+  viewCount: 0,
+})
+const recentPosts = ref<any[]>([])
+const loading = ref(false)
+
+async function fetchDashboardData() {
+  loading.value = true
+  try {
+    const response = await postApi.getList({ page: 1, page_size: 5 })
+    recentPosts.value = response.data.items
+    stats.value.postCount = response.data.total
+  } catch (error) {
+    console.error('Failed to fetch dashboard data:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('zh-CN')
+}
+
+onMounted(() => {
+  fetchDashboardData()
+})
+</script>
+
 <template>
   <div class="dashboard">
-    <h1 class="text-2xl font-bold mb-6">仪表盘</h1>
-    <div class="grid gap-4 md:grid-cols-3">
-      <div class="glass rounded-xl p-6">
-        <h3 class="text-gray-600 dark:text-gray-400">文章总数</h3>
-        <p class="text-3xl font-bold text-acg-pink">0</p>
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold">仪表盘</h1>
+      <p class="text-gray-500 text-sm mt-1">欢迎回来，{{ userStore.user?.username || '管理员' }}</p>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="grid gap-4 md:grid-cols-3 mb-8">
+      <div class="glass rounded-xl p-6 relative overflow-hidden">
+        <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-pink-500/20 to-transparent rounded-bl-full"></div>
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-xl bg-pink-500/20 flex items-center justify-center">
+            <span class="text-2xl">📝</span>
+          </div>
+          <div>
+            <p class="text-gray-500 text-sm">文章总数</p>
+            <p class="text-3xl font-bold text-pink-500">{{ stats.postCount }}</p>
+          </div>
+        </div>
       </div>
-      <div class="glass rounded-xl p-6">
-        <h3 class="text-gray-600 dark:text-gray-400">用户总数</h3>
-        <p class="text-3xl font-bold text-acg-blue">0</p>
+
+      <div class="glass rounded-xl p-6 relative overflow-hidden">
+        <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-blue-500/20 to-transparent rounded-bl-full"></div>
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
+            <span class="text-2xl">👤</span>
+          </div>
+          <div>
+            <p class="text-gray-500 text-sm">用户总数</p>
+            <p class="text-3xl font-bold text-blue-500">{{ stats.userCount }}</p>
+          </div>
+        </div>
       </div>
-      <div class="glass rounded-xl p-6">
-        <h3 class="text-gray-600 dark:text-gray-400">总访问量</h3>
-        <p class="text-3xl font-bold text-acg-purple">0</p>
+
+      <div class="glass rounded-xl p-6 relative overflow-hidden">
+        <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-purple-500/20 to-transparent rounded-bl-full"></div>
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
+            <span class="text-2xl">👁️</span>
+          </div>
+          <div>
+            <p class="text-gray-500 text-sm">总访问量</p>
+            <p class="text-3xl font-bold text-purple-500">{{ stats.viewCount.toLocaleString() }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 最近文章 -->
+    <div class="glass rounded-xl p-6">
+      <h2 class="text-lg font-bold mb-4">最近文章</h2>
+      <div v-if="loading" class="text-center text-gray-500 py-4">加载中...</div>
+      <div v-else-if="recentPosts.length === 0" class="text-center text-gray-500 py-4">暂无文章</div>
+      <div v-else class="space-y-3">
+        <div
+          v-for="post in recentPosts"
+          :key="post.id"
+          class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-lg bg-acg-pink/10 flex items-center justify-center text-acg-pink">
+              📄
+            </div>
+            <div>
+              <RouterLink :to="`/post/${post.id}`" class="font-medium hover:text-acg-pink">
+                {{ post.title }}
+              </RouterLink>
+              <p class="text-sm text-gray-500">{{ formatDate(post.created_at) }}</p>
+            </div>
+          </div>
+          <span
+            :class="{
+              'bg-green-500/20 text-green-500': post.status === 'published',
+              'bg-yellow-500/20 text-yellow-500': post.status === 'draft',
+            }"
+            class="px-2 py-1 text-xs rounded-full"
+          >
+            {{ post.status === 'published' ? '已发布' : '草稿' }}
+          </span>
+        </div>
       </div>
     </div>
   </div>

frontend/src/views/admin/TagManage.vue

@@ -1,8 +1,171 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useMessage, useDialog } from 'naive-ui'
+import type { Tag } from '@/types'
+
+const message = useMessage()
+const dialog = useDialog()
+
+const tags = ref<Tag[]>([])
+const loading = ref(false)
+const showModal = ref(false)
+const isEditing = ref(false)
+const currentId = ref<string | null>(null)
+
+const formData = ref({
+  name: '',
+  slug: '',
+})
+
+async function fetchTags() {
+  loading.value = true
+  try {
+    // 模拟数据 - 实际应该调用API
+    tags.value = []
+  } catch (error) {
+    message.error('获取标签失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function openModal(tag?: Tag) {
+  if (tag) {
+    isEditing.value = true
+    currentId.value = tag.id
+    formData.value = {
+      name: tag.name,
+      slug: tag.slug || '',
+    }
+  } else {
+    isEditing.value = false
+    currentId.value = null
+    formData.value = { name: '', slug: '' }
+  }
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  isEditing.value = false
+  currentId.value = null
+  formData.value = { name: '', slug: '' }
+}
+
+async function saveTag() {
+  if (!formData.value.name || !formData.value.slug) {
+    message.warning('请填写名称和别名')
+    return
+  }
+
+  try {
+    if (isEditing.value && currentId.value) {
+      message.success('标签更新成功')
+    } else {
+      message.success('标签创建成功')
+    }
+    closeModal()
+    fetchTags()
+  } catch (error) {
+    message.error('保存失败')
+  }
+}
+
+async function deleteTag(_id: string) {
+  try {
+    await dialog.warning({
+      title: '确认删除',
+      content: '确定要删除这个标签吗？',
+      positiveText: '删除',
+      negativeText: '取消',
+    })
+    message.success('删除成功')
+    fetchTags()
+  } catch {
+    // 取消
+  }
+}
+
+function generateSlug() {
+  formData.value.slug = formData.value.name
+    .toLowerCase()
+    .replace(/[^a-z0-9\u4e00-\u9fa5]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+onMounted(() => {
+  fetchTags()
+})
+</script>
+
 <template>
   <div class="tag-manage">
-    <h1 class="text-2xl font-bold mb-6">标签管理</h1>
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-2xl font-bold">标签管理</h1>
+      <button @click="openModal()" class="btn-acg">
+        新建标签
+      </button>
+    </div>
+
     <div class="glass rounded-xl p-6">
-      <p class="text-gray-600 dark:text-gray-400">标签管理功能开发中...</p>
+      <div v-if="loading" class="text-center text-gray-500 py-4">加载中...</div>
+      <div v-else-if="tags.length === 0" class="text-center text-gray-500 py-8">
+        <p class="mb-2">暂无标签</p>
+        <button @click="openModal()" class="text-acg-pink hover:underline">点击创建第一个标签</button>
+      </div>
+      <div v-else class="flex flex-wrap gap-3">
+        <div
+          v-for="tag in tags"
+          :key="tag.id"
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-acg-pink/10 text-acg-pink"
+        >
+          <span>{{ tag.name }}</span>
+          <button @click="openModal(tag)" class="hover:text-white">✏️</button>
+          <button @click="deleteTag(tag.id)" class="hover:text-white">✕</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div class="glass rounded-xl w-full max-w-md">
+        <div class="p-6">
+          <h2 class="text-xl font-bold mb-6">{{ isEditing ? '编辑标签' : '新建标签' }}</h2>
+
+          <form @submit.prevent="saveTag" class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium mb-2">名称</label>
+              <input
+                v-model="formData.name"
+                type="text"
+                placeholder="标签名称"
+                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+                @blur="generateSlug"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium mb-2">别名</label>
+              <input
+                v-model="formData.slug"
+                type="text"
+                placeholder="url-slug"
+                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+              />
+            </div>
+
+            <div class="flex justify-end gap-4 pt-4">
+              <button type="button" @click="closeModal" class="px-6 py-2 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800">
+                取消
+              </button>
+              <button type="submit" class="btn-acg">
+                保存
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 </template>

frontend/src/views/user/Profile.vue

@@ -22,15 +22,16 @@ function formatDate(dateStr: string) {
 
 async function handleLogout() {
   try {
-    await dialog.confirm({
+    await dialog.warning({
       title: '提示',
       content: '确定要退出登录吗？',
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+      positiveText: '确定',
+      negativeText: '取消',
     })
     await authApi.logout()
   } catch {
     // 用户取消
+    return
   }
   userStore.logout()
   message.success('已退出登录')