tyapi-server/docs/前端订阅状态筛选功能说明.md

前端订阅状态筛选功能说明

功能概述

本次更新为前端产品列表页面添加了订阅状态筛选功能，并优化了订阅状态的判断逻辑。

主要修改

1. 产品列表页面 (tyapi-frontend/src/pages/products/index.vue)

新增功能

• 订阅状态筛选器：添加了"订阅状态"筛选选项，用户可以选择"已订阅"或"未订阅"
• 优化订阅状态判断：移除了原来的 loadUserSubscriptions 逻辑，直接使用产品接口返回的 is_subscribed 字段

修改内容

// 新增筛选条件
const filters = reactive({
  category_id: '',
  is_package: null,
  is_subscribed: null,  // 新增：订阅状态筛选
  keyword: ''
})

// 新增筛选器UI
<FilterItem label="订阅状态">
  <el-select v-model="filters.is_subscribed" placeholder="选择订阅状态" clearable @change="handleFilterChange"
    class="w-full">
    <el-option label="已订阅" value="true" />
    <el-option label="未订阅" value="false" />
  </el-select>
</FilterItem>

// 优化订阅状态传递
<ProductCard v-for="product in products" :key="product.id" :product="product"
  :is-subscribed="product.is_subscribed" @view-detail="handleViewDetail"
  @subscribe="handleSubscribe" />

移除的功能

• 移除了 loadUserSubscriptions 方法
• 移除了 userSubscriptions 响应式数据
• 移除了 isProductSubscribed 方法
• 移除了对 subscriptionApi 的依赖

2. 产品卡片组件 (tyapi-frontend/src/components/product/ProductCard.vue)

新增功能

• 未启用产品处理：当产品 is_enabled 为 false 时，显示灰色的"未启用"按钮，不允许订阅
• 优化按钮逻辑：重新设计了按钮的显示逻辑，按优先级显示

修改内容

<!-- 未启用的产品 -->
<el-button
  v-if="!product.is_enabled"
  type="info"
  disabled
  class="action-btn disabled-btn"
  size="small"
>
  未启用
</el-button>

<!-- 已订阅的产品 -->
<el-button
  v-else-if="isSubscribed"
  type="info"
  disabled
  class="action-btn subscribed-btn"
  size="small"
>
  已订阅
</el-button>

<!-- 可订阅的产品 -->
<el-button
  v-else
  type="success"
  @click="handleSubscribe"
  class="action-btn subscribe-btn"
  size="small"
>
  订阅
</el-button>

新增样式

.disabled-btn {
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.2);
  color: #64748b;
  cursor: not-allowed;
}

.disabled-btn:hover {
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.2);
  color: #64748b;
  transform: none;
  box-shadow: none;
}

功能特性

1. 订阅状态筛选

• 用户可以通过筛选器选择查看"已订阅"或"未订阅"的产品
• 筛选条件会实时应用到产品列表
• 支持与其他筛选条件组合使用

2. 产品状态显示

• 已启用且未订阅：显示绿色的"订阅"按钮
• 已启用且已订阅：显示灰色的"已订阅"按钮（禁用状态）
• 未启用：显示灰色的"未启用"按钮（禁用状态）

3. 性能优化

• 移除了额外的订阅列表加载，减少了API调用
• 直接使用产品接口返回的订阅状态，提高了响应速度
• 订阅成功后直接重新加载产品列表，确保状态同步

使用说明

筛选功能

1. 在产品列表页面的筛选区域找到"订阅状态"下拉框
2. 选择"已订阅"查看已订阅的产品
3. 选择"未订阅"查看未订阅的产品
4. 选择"全部"（清空选择）查看所有产品
5. 可以与其他筛选条件组合使用

订阅操作

1. 对于已启用的产品，点击"订阅"按钮进行订阅
2. 订阅成功后，按钮会自动变为"已订阅"状态
3. 未启用的产品无法订阅，会显示"未启用"状态

技术实现

后端支持

• 产品列表接口支持 is_subscribed 筛选参数
• 返回的产品数据包含 is_subscribed 字段
• 支持可选认证，未认证用户不显示订阅状态

前端实现

• 使用 Vue 3 Composition API
• 响应式数据管理筛选条件
• 组件化设计，便于维护和扩展

测试验证

单元测试

• 创建了 product_subscription_filter_test.go 测试文件
• 验证筛选条件构建逻辑
• 验证产品响应结构

功能测试

• 前端项目编译成功
• 后端项目编译成功
• 所有测试用例通过

注意事项

1. 认证要求：订阅状态筛选功能需要用户登录才能使用
2. 数据同步：订阅操作成功后会自动刷新产品列表
3. 状态一致性：前端显示状态与后端数据保持一致
4. 性能考虑：减少了不必要的API调用，提高了页面加载速度