From 5cefc5d63024a625671cd82478cd7fe6f2ae0751 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Wed, 16 Sep 2026 10:20:02 +0800
Subject: [PATCH] chore(points): align types/api with final backend contract -
 apps/web/src/pages/subscription/UpgradeSubscription.tsx

---
 .../subscription/UpgradeSubscription.tsx      | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/subscription/UpgradeSubscription.tsx b/apps/web/src/pages/subscription/UpgradeSubscription.tsx
index 36033d6b0..8f9e9f95a 100644
--- a/apps/web/src/pages/subscription/UpgradeSubscription.tsx
+++ b/apps/web/src/pages/subscription/UpgradeSubscription.tsx
@@ -1,11 +1,10 @@
 /**
  * 升级/降级/续费页面
- * P1-3: antd Button/Modal/Radio/Spin → 自定义 UI 组件
  */
 import React from "react"
 import { Modal } from "@/components/ui"
 import { useNavigate } from "react-router-dom"
-import type { PlanType } from "@/api/subscription"
+import type { PlanId } from "@/api/subscription/types"
 import PageHead from "@/components/layout/PageHead"
 import { Button } from "@/components/ui"
 import { PLANS_META, getPlanName, getPlanPrice } from "./constants"
@@ -13,6 +12,9 @@ import { BillingCycleSwitch, Spinner } from "./components/SubscriptionUI"
 import { useSubscription } from "./hooks/useSubscription"
 import "./UpgradeSubscription.css"
 
+/** 可选择的付费档位（不含 free） */
+const PAID_PLANS: PlanId[] = ["monthly", "quarterly", "yearly"]
+
 const UpgradeSubscription: React.FC = () => {
   const navigate = useNavigate()
   const {
@@ -49,12 +51,12 @@ const UpgradeSubscription: React.FC = () => {
   const handleCancelClick = () => {
     Modal.confirm({
       title: "确认取消订阅",
-      content: "取消后，当前周期结束前仍可正常使用，到期后降级为体验版。",
+      content: "取消后，当前周期结束前仍可正常使用，到期后降级为免费版。",
       okText: "确认取消",
       cancelText: "再想想",
       onOk: async () => {
         const ok = await handleCancel()
-        if (ok) navigate("/app/subscription")
+        if (ok) navigate("/subscription")
       },
     })
   }
@@ -74,14 +76,22 @@ const UpgradeSubscription: React.FC = () => {
       <PageHead title="变更订阅方案" description={`当前套餐：${getPlanName(currentPlan)}`} />
 
       <div className="xx-upgrade-plans">
-        {(["standard", "pro", "enterprise"] as PlanType[]).map((planId) => {
+        {PAID_PLANS.map((planId) => {
           const plan = PLANS_META[planId]
           const isCurrent = planId === currentPlan
+          // 年卡显示年价，其他显示月价
+          const monthlyPrice = plan.priceYuan
+          const yearlyPrice = plan.yearlyPriceYuan || plan.priceYuan * 12
+          // 选中季卡时默认切到月付周期；年卡切到年付
+          const resolvedCycle: "monthly" | "yearly" = planId === "yearly" ? "yearly" : "monthly"
           return (
             <div
               key={planId}
               className={`xx-upgrade-card ${isCurrent ? "current" : ""} ${selectedPlan === planId ? "selected" : ""}`}
-              onClick={() => setSelectedPlan(planId)}
+              onClick={() => {
+                setSelectedPlan(planId)
+                setBillingCycle(resolvedCycle)
+              }}
             >
               {isCurrent && <div className="xx-current-badge">当前</div>}
               <h3>{plan.name}</h3>
@@ -89,8 +99,8 @@ const UpgradeSubscription: React.FC = () => {
                 <BillingCycleSwitch
                   value={billingCycle}
                   onChange={setBillingCycle}
-                  monthlyPrice={plan.price}
-                  yearlyPrice={plan.yearlyPrice}
+                  monthlyPrice={monthlyPrice}
+                  yearlyPrice={yearlyPrice}
                 />
               </div>
             </div>