chore(points): align types/api with final backend contract - apps/web/src/pages/subscription/UpgradeSubscription.tsx

This commit is contained in:
2026-09-16 10:20:02 +08:00
parent e8174c1680
commit 5cefc5d630
@@ -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>