# 定价页面改进说明

## 概述

定价页面现在实现了智能的套餐过滤和按钮显示逻辑，确保只显示有效的可订阅套餐，并提供清晰的用户体验。

## 主要改进

### 1. 智能套餐过滤

定价页面现在只显示以下套餐：

1. **免费套餐** - 总是显示
2. **用户当前套餐** - 总是显示（即使没有 stripePriceId）
3. **有效的付费套餐** - 必须有 `stripePriceId` 才显示

#### 过滤逻辑
```typescript
const filteredPlans = plans.filter((plan: SubscriptionPlan) => {
  // 免费套餐总是显示
  if (isPlanFree(plan)) return true
  
  // 用户当前套餐总是显示
  if (userData && isCurrentPlan(plan.id)) return true
  
  // 其他套餐必须有 stripePriceId 才能显示（可订阅）
  return plan.stripePriceId && plan.stripePriceId.trim() !== ''
})
```

### 2. 智能按钮显示

按钮显示遵循以下逻辑：

#### 免费套餐
- **当前套餐**: 显示 "当前方案" 按钮（禁用）
- **非当前套餐**: 不显示任何按钮

#### 付费套餐
- **当前套餐**: 显示 "当前方案" 按钮（禁用）
- **可订阅套餐**: 显示 "立即订阅" 按钮
- **无价格ID套餐**: 不显示按钮（理论上不会出现，因为已过滤）

#### 按钮逻辑代码
```typescript
{(() => {
  // 免费套餐逻辑
  if (isFree) {
    if (isCurrent) {
      return <Button variant="outline" disabled>{t('currentPlan')}</Button>
    }
    return null // 免费套餐且非当前套餐，不显示按钮
  }
  
  // 付费套餐逻辑
  if (isCurrent) {
    return <Button variant="outline" disabled>{t('currentPlan')}</Button>
  }
  
  // 可订阅的付费套餐
  if (plan.stripePriceId && plan.stripePriceId.trim() !== '') {
    return (
      <SubscribeButton priceId={plan.stripePriceId} planName={plan.displayName}>
        {t('subscribeNow')}
      </SubscribeButton>
    )
  }
  
  return null
})()}
```

### 3. 多语言支持

添加了新的翻译键：

#### 英文 (en.json)
```json
{
  "pricing": {
    "subscribeNow": "Subscribe Now",
    "currentPlan": "Current Plan"
  }
}
```

#### 中文 (zh.json)
```json
{
  "pricing": {
    "subscribeNow": "立即订阅",
    "currentPlan": "当前方案"
  }
}
```

## 用户体验场景

### 1. 匿名用户
- 看到：免费套餐（无按钮）+ 有价格ID的付费套餐（立即订阅按钮）
- 不看到：没有价格ID的付费套餐

### 2. 免费用户
- 看到：免费套餐（当前方案按钮）+ 有价格ID的付费套餐（立即订阅按钮）
- 不看到：没有价格ID的付费套餐

### 3. Pro 用户
- 看到：免费套餐（无按钮）+ 当前Pro套餐（当前方案按钮）+ 其他有价格ID的套餐（立即订阅按钮）
- 不看到：没有价格ID的付费套餐

## 技术实现

### 1. 动态数据获取
```typescript
useEffect(() => {
  fetchPlans()
}, [userData]) // 依赖 userData，确保用户数据加载后再过滤套餐
```

### 2. 套餐判定工具
使用统一的工具函数：
- `isPlanFree(plan)` - 判断是否为免费套餐
- `isPlanPro(plan)` - 判断是否为Pro套餐
- `isCurrentPlan(planId)` - 判断是否为用户当前套餐

### 3. 类型安全
```typescript
const filteredPlans = (data.plans || []).filter((plan: SubscriptionPlan) => {
  // 过滤逻辑
})
```

## 配置要求

### 1. 套餐配置
确保付费套餐有有效的 `stripePriceId`：

```sql
-- 检查套餐配置
SELECT id, name, "displayName", price, "stripePriceId", "isActive" 
FROM subscription_plans 
WHERE "isActive" = true;

-- 设置价格ID
UPDATE subscription_plans 
SET "stripePriceId" = 'price_your_stripe_price_id' 
WHERE name = 'pro';
```

### 2. 验证工具
使用测试脚本验证配置：

```bash
npx tsx scripts/test-pricing-page-filtering.ts
```

## 优势

1. **用户友好**: 只显示用户可以实际订阅的套餐
2. **防止错误**: 避免显示无法订阅的套餐
3. **清晰导航**: 明确的按钮状态和操作
4. **灵活配置**: 支持动态套餐管理
5. **多语言**: 完整的国际化支持

## 故障排除

### 问题：套餐不显示
**原因**: 付费套餐没有设置 `stripePriceId`
**解决**: 在数据库中设置正确的 Stripe 价格 ID

### 问题：按钮不显示
**原因**: 套餐被过滤掉或逻辑判断问题
**解决**: 检查套餐配置和用户状态

### 问题：翻译缺失
**原因**: 缺少 `subscribeNow` 翻译键
**解决**: 在对应语言文件中添加翻译

## 测试建议

1. 测试不同用户状态下的页面显示
2. 验证按钮功能和状态
3. 检查多语言显示
4. 确认套餐过滤逻辑
5. 测试订阅流程