fix

2025-07-29 00:30:32 +08:00
parent 10d086414b
commit 83530c0f9b
15 changed files with 710 additions and 37 deletions
--- a/docs/产品列表接口订阅状态功能说明.md
+++ b/docs/产品列表接口订阅状态功能说明.md
@@ -0,0 +1,129 @@
+# 产品列表接口订阅状态功能说明
+
+## 概述
+
+产品列表接口（`/api/v1/products`）现已支持可选认证和订阅状态功能。用户可以选择是否登录，登录后可以查看产品的订阅状态，并可以按订阅状态进行筛选。
+
+## 功能特性
+
+### 1. 可选认证
+- 未登录用户：可以正常获取产品列表，但不会显示订阅状态
+- 已登录用户：可以获取产品列表，并显示每个产品的订阅状态
+
+### 2. 订阅状态显示
+- 对于已登录用户，每个产品响应中会包含 `is_subscribed` 字段
+- 该字段为 `true` 表示用户已订阅该产品，`false` 表示未订阅，`null` 表示未登录
+
+### 3. 订阅状态筛选
+- 已登录用户可以通过 `is_subscribed` 参数筛选产品
+- `is_subscribed=true`：只显示已订阅的产品
+- `is_subscribed=false`：只显示未订阅的产品
+- 不传该参数：显示所有产品
+
+## API 接口
+
+### 请求地址
+```
+GET /api/v1/products
+```
+
+### 请求参数
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| page | int | 否 | 页码，默认1 |
+| page_size | int | 否 | 每页数量，默认10 |
+| keyword | string | 否 | 搜索关键词 |
+| category_id | string | 否 | 分类ID |
+| is_enabled | bool | 否 | 是否启用 |
+| is_visible | bool | 否 | 是否可见 |
+| is_package | bool | 否 | 是否组合包 |
+| is_subscribed | bool | 否 | 是否已订阅（需要认证） |
+| sort_by | string | 否 | 排序字段 |
+| sort_order | string | 否 | 排序方向（asc/desc） |
+
+### 响应格式
+
+```json
+{
+  "code": 200,
+  "message": "获取产品列表成功",
+  "data": {
+    "total": 100,
+    "page": 1,
+    "size": 10,
+    "items": [
+      {
+        "id": "product-id",
+        "name": "产品名称",
+        "code": "PRODUCT001",
+        "description": "产品描述",
+        "price": 99.99,
+        "is_enabled": true,
+        "is_visible": true,
+        "is_package": false,
+        "is_subscribed": true,  // 新增字段：订阅状态
+        "category": {
+          "id": "category-id",
+          "name": "分类名称"
+        },
+        "created_at": "2024-01-01T00:00:00Z",
+        "updated_at": "2024-01-01T00:00:00Z"
+      }
+    ]
+  }
+}
+```
+
+## 使用示例
+
+### 1. 未登录用户获取产品列表
+```bash
+curl -X GET "http://localhost:8080/api/v1/products?page=1&page_size=10"
+```
+
+### 2. 已登录用户获取产品列表
+```bash
+curl -X GET "http://localhost:8080/api/v1/products?page=1&page_size=10" \
+  -H "Authorization: Bearer your-jwt-token"
+```
+
+### 3. 筛选已订阅的产品
+```bash
+curl -X GET "http://localhost:8080/api/v1/products?is_subscribed=true" \
+  -H "Authorization: Bearer your-jwt-token"
+```
+
+### 4. 筛选未订阅的产品
+```bash
+curl -X GET "http://localhost:8080/api/v1/products?is_subscribed=false" \
+  -H "Authorization: Bearer your-jwt-token"
+```
+
+## 技术实现
+
+### 1. 数据库查询优化
+- 使用 `EXISTS` 子查询来筛选订阅状态
+- 批量查询用户订阅状态，减少数据库查询次数
+
+### 2. 缓存策略
+- 订阅状态查询结果会被缓存，提高查询性能
+- 缓存时间设置为10分钟，可根据业务需求调整
+
+### 3. 向后兼容
+- 新功能完全向后兼容
+- 未登录用户的使用体验不受影响
+- 现有前端代码无需修改即可正常工作
+
+## 注意事项
+
+1. **认证要求**：`is_subscribed` 筛选功能需要用户登录
+2. **性能考虑**：订阅状态查询会增加一定的数据库负载，建议合理使用
+3. **缓存更新**：当用户订阅/取消订阅产品时，需要清除相关缓存
+4. **错误处理**：如果用户ID无效，会返回空的产品列表
+
+## 更新日志
+
+- 2024-01-01：新增可选认证和订阅状态功能
+- 2024-01-01：新增订阅状态筛选功能
+- 2024-01-01：优化数据库查询性能 
--- a/docs/前端订阅状态筛选功能说明.md
+++ b/docs/前端订阅状态筛选功能说明.md
@@ -0,0 +1,166 @@
+# 前端订阅状态筛选功能说明
+
+## 功能概述
+
+本次更新为前端产品列表页面添加了订阅状态筛选功能，并优化了订阅状态的判断逻辑。
+
+## 主要修改
+
+### 1. 产品列表页面 (`tyapi-frontend/src/pages/products/index.vue`)
+
+#### 新增功能
+- **订阅状态筛选器**：添加了"订阅状态"筛选选项，用户可以选择"已订阅"或"未订阅"
+- **优化订阅状态判断**：移除了原来的 `loadUserSubscriptions` 逻辑，直接使用产品接口返回的 `is_subscribed` 字段
+
+#### 修改内容
+```javascript
+// 新增筛选条件
+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` 时，显示灰色的"未启用"按钮，不允许订阅
+- **优化按钮逻辑**：重新设计了按钮的显示逻辑，按优先级显示
+
+#### 修改内容
+```vue
+<!-- 未启用的产品 -->
+<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>
+```
+
+#### 新增样式
+```css
+.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调用，提高了页面加载速度