update: category

db/converter/converter.go

@@ -32,9 +32,10 @@ func ToResourceResponse(resource *entity.Resource) dto.ResourceResponse {
 	response.Tags = make([]dto.TagResponse, len(resource.Tags))
 	for i, tag := range resource.Tags {
 		response.Tags[i] = dto.TagResponse{
-			ID:          tag.ID,
+			ID:            tag.ID,
-			Name:        tag.Name,
+			Name:          tag.Name,
-			Description: tag.Description,
+			Description:   tag.Description,
+			ResourceCount: 0, // 在资源上下文中，标签的资源数量不相关
 		}
 	}
 
@@ -71,19 +72,21 @@ func ToCategoryResponseList(categories []entity.Category, resourceCounts map[uin
 }
 
 // ToTagResponse 将Tag实体转换为TagResponse
-func ToTagResponse(tag *entity.Tag) dto.TagResponse {
+func ToTagResponse(tag *entity.Tag, resourceCount int64) dto.TagResponse {
 	return dto.TagResponse{
-		ID:          tag.ID,
+		ID:            tag.ID,
-		Name:        tag.Name,
+		Name:          tag.Name,
-		Description: tag.Description,
+		Description:   tag.Description,
+		ResourceCount: resourceCount,
 	}
 }
 
 // ToTagResponseList 将Tag实体列表转换为TagResponse列表
-func ToTagResponseList(tags []entity.Tag) []dto.TagResponse {
+func ToTagResponseList(tags []entity.Tag, resourceCounts map[uint]int64) []dto.TagResponse {
 	responses := make([]dto.TagResponse, len(tags))
 	for i, tag := range tags {
-		responses[i] = ToTagResponse(&tag)
+		count := resourceCounts[tag.ID]
+		responses[i] = ToTagResponse(&tag, count)
 	}
 	return responses
 }

db/dto/response.go

@@ -39,9 +39,10 @@ type CategoryResponse struct {
 
 // TagResponse 标签响应
 type TagResponse struct {
-	ID          uint   `json:"id"`
+	ID            uint   `json:"id"`
-	Name        string `json:"name"`
+	Name          string `json:"name"`
-	Description string `json:"description"`
+	Description   string `json:"description"`
+	ResourceCount int64  `json:"resource_count"`
 }
 
 // PanResponse 平台响应

db/repo/category_repository.go

@@ -12,6 +12,8 @@ type CategoryRepository interface {
 	FindByName(name string) (*entity.Category, error)
 	FindWithResources() ([]entity.Category, error)
 	GetResourceCount(categoryID uint) (int64, error)
+	FindWithPagination(page, pageSize int) ([]entity.Category, int64, error)
+	Search(query string, page, pageSize int) ([]entity.Category, int64, error)
 }
 
 // CategoryRepositoryImpl Category的Repository实现
@@ -49,3 +51,49 @@ func (r *CategoryRepositoryImpl) GetResourceCount(categoryID uint) (int64, error
 	err := r.db.Model(&entity.Resource{}).Where("category_id = ?", categoryID).Count(&count).Error
 	return count, err
 }
+
+// FindWithPagination 分页查询分类
+func (r *CategoryRepositoryImpl) FindWithPagination(page, pageSize int) ([]entity.Category, int64, error) {
+	var categories []entity.Category
+	var total int64
+
+	// 获取总数
+	err := r.db.Model(&entity.Category{}).Count(&total).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	// 分页查询
+	offset := (page - 1) * pageSize
+	err = r.db.Offset(offset).Limit(pageSize).Order("created_at DESC").Find(&categories).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	return categories, total, nil
+}
+
+// Search 搜索分类
+func (r *CategoryRepositoryImpl) Search(query string, page, pageSize int) ([]entity.Category, int64, error) {
+	var categories []entity.Category
+	var total int64
+
+	// 构建搜索条件
+	searchQuery := "%" + query + "%"
+
+	// 获取总数
+	err := r.db.Model(&entity.Category{}).Where("name ILIKE ? OR description ILIKE ?", searchQuery, searchQuery).Count(&total).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	// 分页搜索
+	offset := (page - 1) * pageSize
+	err = r.db.Where("name ILIKE ? OR description ILIKE ?", searchQuery, searchQuery).
+		Offset(offset).Limit(pageSize).Order("created_at DESC").Find(&categories).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	return categories, total, nil
+}

db/repo/tag_repository.go

@@ -13,6 +13,8 @@ type TagRepository interface {
 	FindWithResources() ([]entity.Tag, error)
 	GetResourceCount(tagID uint) (int64, error)
 	FindByResourceID(resourceID uint) ([]entity.Tag, error)
+	FindWithPagination(page, pageSize int) ([]entity.Tag, int64, error)
+	Search(query string, page, pageSize int) ([]entity.Tag, int64, error)
 }
 
 // TagRepositoryImpl Tag的Repository实现
@@ -58,3 +60,49 @@ func (r *TagRepositoryImpl) FindByResourceID(resourceID uint) ([]entity.Tag, err
 		Where("resource_tags.resource_id = ?", resourceID).Find(&tags).Error
 	return tags, err
 }
+
+// FindWithPagination 分页查询标签
+func (r *TagRepositoryImpl) FindWithPagination(page, pageSize int) ([]entity.Tag, int64, error) {
+	var tags []entity.Tag
+	var total int64
+
+	// 获取总数
+	err := r.db.Model(&entity.Tag{}).Count(&total).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	// 分页查询
+	offset := (page - 1) * pageSize
+	err = r.db.Offset(offset).Limit(pageSize).Order("created_at DESC").Find(&tags).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	return tags, total, nil
+}
+
+// Search 搜索标签
+func (r *TagRepositoryImpl) Search(query string, page, pageSize int) ([]entity.Tag, int64, error) {
+	var tags []entity.Tag
+	var total int64
+
+	// 构建搜索条件
+	searchQuery := "%" + query + "%"
+
+	// 获取总数
+	err := r.db.Model(&entity.Tag{}).Where("name ILIKE ? OR description ILIKE ?", searchQuery, searchQuery).Count(&total).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	// 分页搜索
+	offset := (page - 1) * pageSize
+	err = r.db.Where("name ILIKE ? OR description ILIKE ?", searchQuery, searchQuery).
+		Offset(offset).Limit(pageSize).Order("created_at DESC").Find(&tags).Error
+	if err != nil {
+		return nil, 0, err
+	}
+
+	return tags, total, nil
+}

handlers/category_handler.go

@@ -13,7 +13,23 @@ import (
 
 // GetCategories 获取分类列表
 func GetCategories(c *gin.Context) {
-	categories, err := repoManager.CategoryRepository.FindAll()
+	// 获取分页参数
+	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
+	pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "20"))
+	search := c.Query("search")
+
+	var categories []entity.Category
+	var total int64
+	var err error
+
+	if search != "" {
+		// 搜索分类
+		categories, total, err = repoManager.CategoryRepository.Search(search, page, pageSize)
+	} else {
+		// 分页查询
+		categories, total, err = repoManager.CategoryRepository.FindWithPagination(page, pageSize)
+	}
+
 	if err != nil {
 		ErrorResponse(c, err.Error(), http.StatusInternalServerError)
 		return
@@ -30,7 +46,14 @@ func GetCategories(c *gin.Context) {
 	}
 
 	responses := converter.ToCategoryResponseList(categories, resourceCounts)
-	SuccessResponse(c, responses)
+
+	// 返回分页格式的响应
+	SuccessResponse(c, gin.H{
+		"items":     responses,
+		"total":     total,
+		"page":      page,
+		"page_size": pageSize,
+	})
 }
 
 // CreateCategory 创建分类

handlers/tag_handler.go

@@ -13,14 +13,47 @@ import (
 
 // GetTags 获取标签列表
 func GetTags(c *gin.Context) {
-	tags, err := repoManager.TagRepository.FindAll()
+	// 获取分页参数
+	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
+	pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "20"))
+	search := c.Query("search")
+
+	var tags []entity.Tag
+	var total int64
+	var err error
+
+	if search != "" {
+		// 搜索标签
+		tags, total, err = repoManager.TagRepository.Search(search, page, pageSize)
+	} else {
+		// 分页查询
+		tags, total, err = repoManager.TagRepository.FindWithPagination(page, pageSize)
+	}
+
 	if err != nil {
 		ErrorResponse(c, err.Error(), http.StatusInternalServerError)
 		return
 	}
 
-	responses := converter.ToTagResponseList(tags)
+	// 获取每个标签的资源数量
-	SuccessResponse(c, responses)
+	resourceCounts := make(map[uint]int64)
+	for _, tag := range tags {
+		count, err := repoManager.TagRepository.GetResourceCount(tag.ID)
+		if err != nil {
+			continue
+		}
+		resourceCounts[tag.ID] = count
+	}
+
+	responses := converter.ToTagResponseList(tags, resourceCounts)
+
+	// 返回分页格式的响应
+	SuccessResponse(c, gin.H{
+		"items":     responses,
+		"total":     total,
+		"page":      page,
+		"page_size": pageSize,
+	})
 }
 
 // CreateTag 创建标签
@@ -44,7 +77,7 @@ func CreateTag(c *gin.Context) {
 
 	SuccessResponse(c, gin.H{
 		"message": "标签创建成功",
-		"tag":     converter.ToTagResponse(tag),
+		"tag":     converter.ToTagResponse(tag, 0),
 	})
 }
 
@@ -63,7 +96,9 @@ func GetTagByID(c *gin.Context) {
 		return
 	}
 
-	response := converter.ToTagResponse(tag)
+	// 获取资源数量
+	resourceCount, _ := repoManager.TagRepository.GetResourceCount(tag.ID)
+	response := converter.ToTagResponse(tag, resourceCount)
 	SuccessResponse(c, response)
 }
 
@@ -137,7 +172,9 @@ func GetTagByIDGlobal(c *gin.Context) {
 		return
 	}
 
-	response := converter.ToTagResponse(tag)
+	// 获取资源数量
+	resourceCount, _ := repoManager.TagRepository.GetResourceCount(tag.ID)
+	response := converter.ToTagResponse(tag, resourceCount)
 	SuccessResponse(c, response)
 }
 
@@ -149,6 +186,16 @@ func GetTagsGlobal(c *gin.Context) {
 		return
 	}
 
-	responses := converter.ToTagResponseList(tags)
+	// 获取每个标签的资源数量
+	resourceCounts := make(map[uint]int64)
+	for _, tag := range tags {
+		count, err := repoManager.TagRepository.GetResourceCount(tag.ID)
+		if err != nil {
+			continue
+		}
+		resourceCounts[tag.ID] = count
+	}
+
+	responses := converter.ToTagResponseList(tags, resourceCounts)
 	SuccessResponse(c, responses)
 }

web/pages/admin.vue

@@ -125,7 +125,7 @@
                 <i class="fas fa-chevron-right text-gray-400"></i>
               </div>
             </button>
-            <button @click="showAddCategoryModal = true" class="w-full text-left p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+            <button @click="goToAddCategory" class="w-full text-left p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
               <div class="flex items-center justify-between">
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-200">添加分类</span>
                 <i class="fas fa-plus text-gray-400"></i>
@@ -152,7 +152,7 @@
                 <i class="fas fa-chevron-right text-gray-400"></i>
               </div>
             </button>
-            <button @click="showAddTagModal = true" class="w-full text-left p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+            <button @click="goToAddTag" class="w-full text-left p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
               <div class="flex items-center justify-between">
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-200">添加标签</span>
                 <i class="fas fa-plus text-gray-400"></i>
@@ -366,11 +366,21 @@ const goToPlatformManagement = () => {
 }
 
 const goToCategoryManagement = () => {
-  // 实现分类管理页面跳转
+  router.push('/categories')
 }
 
 const goToTagManagement = () => {
-  // 实现标签管理页面跳转
+  router.push('/tags')
+}
+
+// 新增：跳转到分类管理并打开新增弹窗
+const goToAddCategory = () => {
+  router.push('/categories?action=add')
+}
+
+// 新增：跳转到标签管理并打开新增弹窗
+const goToAddTag = () => {
+  router.push('/tags?action=add')
 }
 
 const goToBatchAdd = () => {

web/pages/categories.vue

@@ -0,0 +1,477 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-3 sm:p-5">
+    <!-- 全局加载状态 -->
+    <div v-if="pageLoading" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-xl">
+        <div class="flex flex-col items-center space-y-4">
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+          <div class="text-center">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">正在加载...</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">请稍候，正在加载分类数据</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto">
+      <!-- 头部 -->
+      <div class="bg-slate-800 dark:bg-gray-800 text-white dark:text-gray-100 rounded-lg shadow-lg p-4 sm:p-8 mb-4 sm:mb-8 text-center flex items-center">
+        <nav class="mt-4 flex flex-col sm:flex-row justify-center gap-2 sm:gap-4">
+          <NuxtLink 
+            to="/admin" 
+            class="w-full sm:w-auto px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition-colors text-center flex items-center justify-center gap-2"
+          >
+            <i class="fas fa-arrow-left"></i> 返回
+          </NuxtLink>
+        </nav>
+        <div class="flex-1">
+          <h1 class="text-2xl sm:text-3xl font-bold">
+            <NuxtLink to="/admin" class="text-white hover:text-gray-200 dark:hover:text-gray-300 no-underline">分类管理</NuxtLink>
+          </h1>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="flex justify-between items-center mb-4">
+        <div class="flex gap-2">
+          <button 
+            @click="showAddModal = true"
+            class="w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md transition-colors text-center flex items-center justify-center gap-2"
+          >
+            <i class="fas fa-plus"></i> 添加分类
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <div class="relative">
+            <input 
+              v-model="searchQuery"
+              @keyup="debounceSearch"
+              type="text" 
+              class="w-64 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 transition-all text-sm"
+              placeholder="搜索分类名称..."
+            />
+            <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
+              <i class="fas fa-search text-gray-400 text-sm"></i>
+            </div>
+          </div>
+          <button 
+            @click="refreshData"
+            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 flex items-center gap-2"
+          >
+            <i class="fas fa-refresh"></i> 刷新
+          </button>
+        </div>
+      </div>
+
+      <!-- 分类列表 -->
+      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-full">
+            <thead>
+              <tr class="bg-slate-800 dark:bg-gray-700 text-white dark:text-gray-100">
+                <th class="px-4 py-3 text-left text-sm font-medium">ID</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-left text-sm font-medium">创建时间</th>
+                <th class="px-4 py-3 text-left text-sm font-medium">操作</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr v-if="loading" class="text-center py-8">
+                <td colspan="6" class="text-gray-500 dark:text-gray-400">
+                  <i class="fas fa-spinner fa-spin mr-2"></i>加载中...
+                </td>
+              </tr>
+              <tr v-else-if="categories.length === 0" class="text-center py-8">
+                <td colspan="6" class="text-gray-500 dark:text-gray-400">
+                  <div class="flex flex-col items-center justify-center py-12">
+                    <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 48 48">
+                      <circle cx="24" cy="24" r="20" stroke-width="3" stroke-dasharray="6 6" />
+                      <path d="M16 24h16M24 16v16" stroke-width="3" stroke-linecap="round" />
+                    </svg>
+                    <div class="text-lg font-semibold text-gray-400 dark:text-gray-500 mb-2">暂无分类</div>
+                    <div class="text-sm text-gray-400 dark:text-gray-600 mb-4">你可以点击上方"添加分类"按钮创建新分类</div>
+                    <button 
+                      @click="showAddModal = true" 
+                      class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors text-sm flex items-center gap-2"
+                    >
+                      <i class="fas fa-plus"></i> 添加分类
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr 
+                v-for="category in categories" 
+                :key="category.id"
+                class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 font-medium">{{ category.id }}</td>
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
+                  <span :title="category.name">{{ category.name }}</span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  <span v-if="category.description" :title="category.description">{{ category.description }}</span>
+                  <span v-else class="text-gray-400 dark:text-gray-500 italic">无描述</span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 rounded-full text-xs">
+                    {{ category.resource_count || 0 }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  {{ formatTime(category.create_time) }}
+                </td>
+                <td class="px-4 py-3 text-sm">
+                  <div class="flex items-center gap-2">
+                    <button 
+                      @click="editCategory(category)"
+                      class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+                      title="编辑分类"
+                    >
+                      <i class="fas fa-edit"></i>
+                    </button>
+                    <button 
+                      @click="deleteCategory(category.id)"
+                      class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                      title="删除分类"
+                    >
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex flex-wrap justify-center gap-1 sm:gap-2 mt-6">
+        <button 
+          v-if="currentPage > 1"
+          @click="goToPage(currentPage - 1)"
+          class="bg-white text-gray-700 hover:bg-gray-50 px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm flex items-center"
+        >
+          <i class="fas fa-chevron-left mr-1"></i> 上一页
+        </button>
+        
+        <button 
+          @click="goToPage(1)"
+          :class="currentPage === 1 ? 'bg-slate-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'"
+          class="px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          1
+        </button>
+        
+        <button 
+          v-if="totalPages > 1"
+          @click="goToPage(2)"
+          :class="currentPage === 2 ? 'bg-slate-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'"
+          class="px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          2
+        </button>
+        
+        <span v-if="currentPage > 2" class="px-2 py-1 sm:px-3 sm:py-2 text-gray-500 text-sm">...</span>
+        
+        <button 
+          v-if="currentPage !== 1 && currentPage !== 2 && currentPage > 2"
+          class="bg-slate-800 text-white px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          {{ currentPage }}
+        </button>
+        
+        <button 
+          v-if="currentPage < totalPages"
+          @click="goToPage(currentPage + 1)"
+          class="bg-white text-gray-700 hover:bg-gray-50 px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm flex items-center"
+        >
+          下一页 <i class="fas fa-chevron-right ml-1"></i>
+        </button>
+      </div>
+
+      <!-- 统计信息 -->
+      <div v-if="totalPages <= 1" class="mt-4 text-center">
+        <div class="inline-flex items-center bg-white dark:bg-gray-800 rounded-lg shadow px-6 py-3">
+          <div class="text-sm text-gray-600 dark:text-gray-400">
+            共 <span class="font-semibold text-gray-900 dark:text-gray-100">{{ totalCount }}</span> 个分类
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加/编辑分类模态框 -->
+    <div v-if="showAddModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+        <div class="p-6">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {{ editingCategory ? '编辑分类' : '添加分类' }}
+            </h3>
+            <button @click="closeModal" class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          
+          <form @submit.prevent="handleSubmit">
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">分类名称：</label>
+              <input
+                v-model="formData.name"
+                type="text"
+                required
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+                placeholder="请输入分类名称"
+              />
+            </div>
+            
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">描述：</label>
+              <textarea
+                v-model="formData.description"
+                rows="3"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+                placeholder="请输入分类描述（可选）"
+              ></textarea>
+            </div>
+            
+            <div class="flex justify-end gap-3">
+              <button 
+                type="button"
+                @click="closeModal"
+                class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-600 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
+              >
+                取消
+              </button>
+              <button 
+                type="submit"
+                :disabled="submitting"
+                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {{ submitting ? '提交中...' : (editingCategory ? '更新' : '添加') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const userStore = useUserStore()
+const config = useRuntimeConfig()
+
+// 页面状态
+const pageLoading = ref(true)
+const loading = ref(false)
+const categories = ref([])
+
+// 分页状态
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalCount = ref(0)
+const totalPages = ref(0)
+
+// 搜索状态
+const searchQuery = ref('')
+let searchTimeout: NodeJS.Timeout | null = null
+
+// 模态框状态
+const showAddModal = ref(false)
+const submitting = ref(false)
+const editingCategory = ref(null)
+
+// 表单数据
+const formData = ref({
+  name: '',
+  description: ''
+})
+
+// 获取认证头
+const getAuthHeaders = () => {
+  return userStore.authHeaders
+}
+
+// 页面元数据
+useHead({
+  title: '分类管理 - 网盘资源管理系统',
+  meta: [
+    { name: 'description', content: '管理网盘资源分类' },
+    { name: 'keywords', content: '分类管理,资源管理' }
+  ]
+})
+
+// 检查认证状态
+const checkAuth = () => {
+  userStore.initAuth()
+  if (!userStore.isAuthenticated) {
+    router.push('/')
+    return
+  }
+}
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    loading.value = true
+    const params = {
+      page: currentPage.value,
+      page_size: pageSize.value,
+      search: searchQuery.value
+    }
+    
+    const response = await $fetch('/categories', {
+      baseURL: config.public.apiBase,
+      params
+    })
+    
+    // 解析响应
+    if (response && typeof response === 'object' && 'code' in response && response.code === 200) {
+      categories.value = response.data.items || []
+      totalCount.value = response.data.total || 0
+      totalPages.value = Math.ceil(totalCount.value / pageSize.value)
+    } else {
+      categories.value = response.items || []
+      totalCount.value = response.total || 0
+      totalPages.value = Math.ceil(totalCount.value / pageSize.value)
+    }
+  } catch (error) {
+    console.error('获取分类列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索防抖
+const debounceSearch = () => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
+  searchTimeout = setTimeout(() => {
+    currentPage.value = 1
+    fetchCategories()
+  }, 300)
+}
+
+// 刷新数据
+const refreshData = () => {
+  fetchCategories()
+}
+
+// 分页跳转
+const goToPage = (page: number) => {
+  currentPage.value = page
+  fetchCategories()
+}
+
+// 编辑分类
+const editCategory = (category: any) => {
+  editingCategory.value = category
+  formData.value = {
+    name: category.name,
+    description: category.description || ''
+  }
+  showAddModal.value = true
+}
+
+// 删除分类
+const deleteCategory = async (categoryId: number) => {
+  if (!confirm(`确定要删除分类吗？`)) {
+    return
+  }
+  
+  try {
+    await $fetch(`/categories/${categoryId}`, {
+      baseURL: config.public.apiBase,
+      method: 'DELETE',
+      headers: getAuthHeaders()
+    })
+    await fetchCategories()
+  } catch (error) {
+    console.error('删除分类失败:', error)
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    submitting.value = true
+    
+    if (editingCategory.value) {
+      await $fetch(`/categories/${editingCategory.value.id}`, {
+        baseURL: config.public.apiBase,
+        method: 'PUT',
+        body: formData.value,
+        headers: getAuthHeaders()
+      })
+    } else {
+      await $fetch('/categories', {
+        baseURL: config.public.apiBase,
+        method: 'POST',
+        body: formData.value,
+        headers: getAuthHeaders()
+      })
+    }
+    
+    closeModal()
+    await fetchCategories()
+  } catch (error) {
+    console.error('提交分类失败:', error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭模态框
+const closeModal = () => {
+  showAddModal.value = false
+  editingCategory.value = null
+  formData.value = {
+    name: '',
+    description: ''
+  }
+}
+
+// 格式化时间
+const formatTime = (timestamp: string) => {
+  if (!timestamp) return '-'
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+// 退出登录
+const handleLogout = () => {
+  userStore.logout()
+  navigateTo('/login')
+}
+
+// 页面加载
+onMounted(async () => {
+  try {
+    checkAuth()
+    await fetchCategories()
+    
+    // 检查URL参数，如果action=add则自动打开新增弹窗
+    const route = useRoute()
+    if (route.query.action === 'add') {
+      showAddModal.value = true
+    }
+  } catch (error) {
+    console.error('分类管理页面初始化失败:', error)
+  } finally {
+    pageLoading.value = false
+  }
+})
+</script>
+
+<style scoped>
+/* 自定义样式 */
+</style> 

web/pages/tags.vue

@@ -0,0 +1,477 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-3 sm:p-5">
+    <!-- 全局加载状态 -->
+    <div v-if="pageLoading" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-8 shadow-xl">
+        <div class="flex flex-col items-center space-y-4">
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+          <div class="text-center">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">正在加载...</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">请稍候，正在加载标签数据</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto">
+      <!-- 头部 -->
+      <div class="bg-slate-800 dark:bg-gray-800 text-white dark:text-gray-100 rounded-lg shadow-lg p-4 sm:p-8 mb-4 sm:mb-8 text-center flex items-center">
+        <nav class="mt-4 flex flex-col sm:flex-row justify-center gap-2 sm:gap-4">
+          <NuxtLink 
+            to="/admin" 
+            class="w-full sm:w-auto px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition-colors text-center flex items-center justify-center gap-2"
+          >
+            <i class="fas fa-arrow-left"></i> 返回
+          </NuxtLink>
+        </nav>
+        <div class="flex-1">
+          <h1 class="text-2xl sm:text-3xl font-bold">
+            <NuxtLink to="/admin" class="text-white hover:text-gray-200 dark:hover:text-gray-300 no-underline">标签管理</NuxtLink>
+          </h1>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="flex justify-between items-center mb-4">
+        <div class="flex gap-2">
+          <button 
+            @click="showAddModal = true"
+            class="w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md transition-colors text-center flex items-center justify-center gap-2"
+          >
+            <i class="fas fa-plus"></i> 添加标签
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <div class="relative">
+            <input 
+              v-model="searchQuery"
+              @keyup="debounceSearch"
+              type="text" 
+              class="w-64 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 transition-all text-sm"
+              placeholder="搜索标签名称..."
+            />
+            <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
+              <i class="fas fa-search text-gray-400 text-sm"></i>
+            </div>
+          </div>
+          <button 
+            @click="refreshData"
+            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 flex items-center gap-2"
+          >
+            <i class="fas fa-refresh"></i> 刷新
+          </button>
+        </div>
+      </div>
+
+      <!-- 标签列表 -->
+      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-full">
+            <thead>
+              <tr class="bg-slate-800 dark:bg-gray-700 text-white dark:text-gray-100">
+                <th class="px-4 py-3 text-left text-sm font-medium">ID</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-left text-sm font-medium">创建时间</th>
+                <th class="px-4 py-3 text-left text-sm font-medium">操作</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr v-if="loading" class="text-center py-8">
+                <td colspan="6" class="text-gray-500 dark:text-gray-400">
+                  <i class="fas fa-spinner fa-spin mr-2"></i>加载中...
+                </td>
+              </tr>
+              <tr v-else-if="tags.length === 0" class="text-center py-8">
+                <td colspan="6" class="text-gray-500 dark:text-gray-400">
+                  <div class="flex flex-col items-center justify-center py-12">
+                    <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 48 48">
+                      <circle cx="24" cy="24" r="20" stroke-width="3" stroke-dasharray="6 6" />
+                      <path d="M16 24h16M24 16v16" stroke-width="3" stroke-linecap="round" />
+                    </svg>
+                    <div class="text-lg font-semibold text-gray-400 dark:text-gray-500 mb-2">暂无标签</div>
+                    <div class="text-sm text-gray-400 dark:text-gray-600 mb-4">你可以点击上方"添加标签"按钮创建新标签</div>
+                    <button 
+                      @click="showAddModal = true" 
+                      class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors text-sm flex items-center gap-2"
+                    >
+                      <i class="fas fa-plus"></i> 添加标签
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr 
+                v-for="tag in tags" 
+                :key="tag.id"
+                class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 font-medium">{{ tag.id }}</td>
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
+                  <span :title="tag.name">{{ tag.name }}</span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  <span v-if="tag.description" :title="tag.description">{{ tag.description }}</span>
+                  <span v-else class="text-gray-400 dark:text-gray-500 italic">无描述</span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  <span class="px-2 py-1 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 rounded-full text-xs">
+                    {{ tag.resource_count || 0 }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                  {{ formatTime(tag.create_time) }}
+                </td>
+                <td class="px-4 py-3 text-sm">
+                  <div class="flex items-center gap-2">
+                    <button 
+                      @click="editTag(tag)"
+                      class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+                      title="编辑标签"
+                    >
+                      <i class="fas fa-edit"></i>
+                    </button>
+                    <button 
+                      @click="deleteTag(tag.id)"
+                      class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                      title="删除标签"
+                    >
+                      <i class="fas fa-trash"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex flex-wrap justify-center gap-1 sm:gap-2 mt-6">
+        <button 
+          v-if="currentPage > 1"
+          @click="goToPage(currentPage - 1)"
+          class="bg-white text-gray-700 hover:bg-gray-50 px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm flex items-center"
+        >
+          <i class="fas fa-chevron-left mr-1"></i> 上一页
+        </button>
+        
+        <button 
+          @click="goToPage(1)"
+          :class="currentPage === 1 ? 'bg-slate-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'"
+          class="px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          1
+        </button>
+        
+        <button 
+          v-if="totalPages > 1"
+          @click="goToPage(2)"
+          :class="currentPage === 2 ? 'bg-slate-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'"
+          class="px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          2
+        </button>
+        
+        <span v-if="currentPage > 2" class="px-2 py-1 sm:px-3 sm:py-2 text-gray-500 text-sm">...</span>
+        
+        <button 
+          v-if="currentPage !== 1 && currentPage !== 2 && currentPage > 2"
+          class="bg-slate-800 text-white px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm"
+        >
+          {{ currentPage }}
+        </button>
+        
+        <button 
+          v-if="currentPage < totalPages"
+          @click="goToPage(currentPage + 1)"
+          class="bg-white text-gray-700 hover:bg-gray-50 px-2 py-1 sm:px-4 sm:py-2 rounded border transition-colors text-sm flex items-center"
+        >
+          下一页 <i class="fas fa-chevron-right ml-1"></i>
+        </button>
+      </div>
+
+      <!-- 统计信息 -->
+      <div v-if="totalPages <= 1" class="mt-4 text-center">
+        <div class="inline-flex items-center bg-white dark:bg-gray-800 rounded-lg shadow px-6 py-3">
+          <div class="text-sm text-gray-600 dark:text-gray-400">
+            共 <span class="font-semibold text-gray-900 dark:text-gray-100">{{ totalCount }}</span> 个标签
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加/编辑标签模态框 -->
+    <div v-if="showAddModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
+        <div class="p-6">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {{ editingTag ? '编辑标签' : '添加标签' }}
+            </h3>
+            <button @click="closeModal" class="text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          
+          <form @submit.prevent="handleSubmit">
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">标签名称：</label>
+              <input
+                v-model="formData.name"
+                type="text"
+                required
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+                placeholder="请输入标签名称"
+              />
+            </div>
+            
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">描述：</label>
+              <textarea
+                v-model="formData.description"
+                rows="3"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+                placeholder="请输入标签描述（可选）"
+              ></textarea>
+            </div>
+            
+            <div class="flex justify-end gap-3">
+              <button 
+                type="button"
+                @click="closeModal"
+                class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-600 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
+              >
+                取消
+              </button>
+              <button 
+                type="submit"
+                :disabled="submitting"
+                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {{ submitting ? '提交中...' : (editingTag ? '更新' : '添加') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const userStore = useUserStore()
+const config = useRuntimeConfig()
+
+// 页面状态
+const pageLoading = ref(true)
+const loading = ref(false)
+const tags = ref([])
+
+// 分页状态
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalCount = ref(0)
+const totalPages = ref(0)
+
+// 搜索状态
+const searchQuery = ref('')
+let searchTimeout: NodeJS.Timeout | null = null
+
+// 模态框状态
+const showAddModal = ref(false)
+const submitting = ref(false)
+const editingTag = ref(null)
+
+// 表单数据
+const formData = ref({
+  name: '',
+  description: ''
+})
+
+// 获取认证头
+const getAuthHeaders = () => {
+  return userStore.authHeaders
+}
+
+// 页面元数据
+useHead({
+  title: '标签管理 - 网盘资源管理系统',
+  meta: [
+    { name: 'description', content: '管理网盘资源标签' },
+    { name: 'keywords', content: '标签管理,资源管理' }
+  ]
+})
+
+// 检查认证状态
+const checkAuth = () => {
+  userStore.initAuth()
+  if (!userStore.isAuthenticated) {
+    router.push('/')
+    return
+  }
+}
+
+// 获取标签列表
+const fetchTags = async () => {
+  try {
+    loading.value = true
+    const params = {
+      page: currentPage.value,
+      page_size: pageSize.value,
+      search: searchQuery.value
+    }
+    
+    const response = await $fetch('/tags', {
+      baseURL: config.public.apiBase,
+      params
+    })
+    
+    // 解析响应
+    if (response && typeof response === 'object' && 'code' in response && response.code === 200) {
+      tags.value = response.data.items || []
+      totalCount.value = response.data.total || 0
+      totalPages.value = Math.ceil(totalCount.value / pageSize.value)
+    } else {
+      tags.value = response.items || []
+      totalCount.value = response.total || 0
+      totalPages.value = Math.ceil(totalCount.value / pageSize.value)
+    }
+  } catch (error) {
+    console.error('获取标签列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索防抖
+const debounceSearch = () => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
+  searchTimeout = setTimeout(() => {
+    currentPage.value = 1
+    fetchTags()
+  }, 300)
+}
+
+// 刷新数据
+const refreshData = () => {
+  fetchTags()
+}
+
+// 分页跳转
+const goToPage = (page: number) => {
+  currentPage.value = page
+  fetchTags()
+}
+
+// 编辑标签
+const editTag = (tag: any) => {
+  editingTag.value = tag
+  formData.value = {
+    name: tag.name,
+    description: tag.description || ''
+  }
+  showAddModal.value = true
+}
+
+// 删除标签
+const deleteTag = async (tagId: number) => {
+  if (!confirm(`确定要删除标签吗？`)) {
+    return
+  }
+  
+  try {
+    await $fetch(`/tags/${tagId}`, {
+      baseURL: config.public.apiBase,
+      method: 'DELETE',
+      headers: getAuthHeaders()
+    })
+    await fetchTags()
+  } catch (error) {
+    console.error('删除标签失败:', error)
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    submitting.value = true
+    
+    if (editingTag.value) {
+      await $fetch(`/tags/${editingTag.value.id}`, {
+        baseURL: config.public.apiBase,
+        method: 'PUT',
+        body: formData.value,
+        headers: getAuthHeaders()
+      })
+    } else {
+      await $fetch('/tags', {
+        baseURL: config.public.apiBase,
+        method: 'POST',
+        body: formData.value,
+        headers: getAuthHeaders()
+      })
+    }
+    
+    closeModal()
+    await fetchTags()
+  } catch (error) {
+    console.error('提交标签失败:', error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭模态框
+const closeModal = () => {
+  showAddModal.value = false
+  editingTag.value = null
+  formData.value = {
+    name: '',
+    description: ''
+  }
+}
+
+// 格式化时间
+const formatTime = (timestamp: string) => {
+  if (!timestamp) return '-'
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+// 退出登录
+const handleLogout = () => {
+  userStore.logout()
+  navigateTo('/login')
+}
+
+// 页面加载
+onMounted(async () => {
+  try {
+    checkAuth()
+    await fetchTags()
+    
+    // 检查URL参数，如果action=add则自动打开新增弹窗
+    const route = useRoute()
+    if (route.query.action === 'add') {
+      showAddModal.value = true
+    }
+  } catch (error) {
+    console.error('标签管理页面初始化失败:', error)
+  } finally {
+    pageLoading.value = false
+  }
+})
+</script>
+
+<style scoped>
+/* 自定义样式 */
+</style>