收敛账户中心弹窗比例与字号
This commit is contained in:
Your Name
parent
b5420a1156
commit
83d2a1574b
@ -1580,29 +1580,29 @@ export function LovartHome({
|
||||
) : null}
|
||||
|
||||
<Dialog open={accountCenterOpen} onOpenChange={setAccountCenterOpen}>
|
||||
<DialogContent className="max-h-[92vh] w-[96vw] max-w-[1220px] overflow-hidden rounded-[30px] border-black/10 bg-[#f6f6f7] p-0">
|
||||
<DialogContent className="max-h-[90vh] w-[94vw] max-w-[1080px] overflow-hidden rounded-[24px] border-black/10 bg-[#f6f6f7] p-0">
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>账户管理</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex h-full max-h-[92vh] flex-col p-7">
|
||||
<div className="mb-4 flex items-center gap-8 border-b border-black/8 pb-3">
|
||||
<div className="flex h-full max-h-[90vh] flex-col p-5">
|
||||
<div className="mb-3 flex items-center gap-6 border-b border-black/8 pb-2.5">
|
||||
<button
|
||||
type="button"
|
||||
className={`text-[40px] font-semibold leading-none ${accountCenterTab === "account" ? "text-black" : "text-black/35"}`}
|
||||
className={`text-[15px] font-semibold leading-tight ${accountCenterTab === "account" ? "text-black" : "text-black/35"}`}
|
||||
onClick={() => setAccountCenterTab("account")}
|
||||
>
|
||||
账户管理
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`text-[40px] font-semibold leading-none ${accountCenterTab === "usage" ? "text-black" : "text-black/35"}`}
|
||||
className={`text-[15px] font-semibold leading-tight ${accountCenterTab === "usage" ? "text-black" : "text-black/35"}`}
|
||||
onClick={() => setAccountCenterTab("usage")}
|
||||
>
|
||||
用量
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`text-[40px] font-semibold leading-none ${accountCenterTab === "billing" ? "text-black" : "text-black/35"}`}
|
||||
className={`text-[15px] font-semibold leading-tight ${accountCenterTab === "billing" ? "text-black" : "text-black/35"}`}
|
||||
onClick={() => setAccountCenterTab("billing")}
|
||||
>
|
||||
账单
|
||||
@ -1612,30 +1612,30 @@ export function LovartHome({
|
||||
<div className="flex-1 overflow-y-auto pr-1">
|
||||
{accountCenterTab === "account" ? (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-[22px] border border-black/10 bg-white px-5 py-4">
|
||||
<div className="rounded-[18px] border border-black/10 bg-white px-4 py-3.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#d4551f] text-[20px] font-semibold text-white">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#d4551f] text-[16px] font-semibold text-white">
|
||||
{userInitials}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-[20px] font-semibold text-black">
|
||||
<div className="truncate text-[15px] font-semibold text-black">
|
||||
{accountProfile.name}
|
||||
</div>
|
||||
<div className="truncate text-[14px] text-black/45">{accountProfile.email}</div>
|
||||
<div className="truncate text-[12px] text-black/45">{accountProfile.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-10 rounded-2xl bg-[#2f3542] px-4 text-sm text-white hover:bg-[#242a36] hover:text-white"
|
||||
className="h-9 rounded-xl bg-[#2f3542] px-3.5 text-[13px] text-white hover:bg-[#242a36] hover:text-white"
|
||||
onClick={() => toast.info("编辑资料功能后续开放")}
|
||||
>
|
||||
编辑资料
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-10 rounded-2xl border border-black/10 bg-white px-4 text-sm text-black/75 hover:bg-black/5"
|
||||
className="h-9 rounded-xl border border-black/10 bg-white px-3.5 text-[13px] text-black/75 hover:bg-black/5"
|
||||
onClick={() => {
|
||||
void signOut({ redirect: true, callbackUrl: "/" });
|
||||
}}
|
||||
@ -1646,12 +1646,12 @@ export function LovartHome({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] border border-black/10 bg-white px-5 py-5">
|
||||
<div className="mb-3 flex items-center gap-6 text-[16px] font-semibold">
|
||||
<div className="rounded-[18px] border border-black/10 bg-white px-4 py-4">
|
||||
<div className="mb-2.5 flex items-center gap-5 text-[14px] font-semibold">
|
||||
<span className="text-black">账户信息</span>
|
||||
<span className="text-black/30">设备管理</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-[150px_1fr] gap-y-3 text-[16px]">
|
||||
<div className="grid grid-cols-[120px_1fr] gap-y-2.5 text-[13px]">
|
||||
<div className="text-black/55">当前订阅</div>
|
||||
<div className="text-black">{accountProfile.planName}</div>
|
||||
<div className="text-black/55">可用积分</div>
|
||||
@ -1666,11 +1666,11 @@ export function LovartHome({
|
||||
) : null}
|
||||
|
||||
{accountCenterTab === "usage" ? (
|
||||
<div className="rounded-[22px] border border-black/10 bg-white">
|
||||
<div className="grid grid-cols-[2fr_1fr_2fr_1fr] items-center border-b border-black/8 px-5 py-3 text-[14px] font-semibold text-black/80">
|
||||
<div className="rounded-[18px] border border-black/10 bg-white">
|
||||
<div className="grid grid-cols-[2fr_1fr_2fr_1fr] items-center border-b border-black/8 px-4 py-2.5 text-[13px] font-semibold text-black/80">
|
||||
<span>明细</span>
|
||||
<Select value={usageFilter} onValueChange={(value: "all" | "consumed" | "earned") => setUsageFilter(value)}>
|
||||
<SelectTrigger className="h-8 w-[120px] border-black/10 bg-white text-[13px]">
|
||||
<SelectTrigger className="h-7 w-[110px] border-black/10 bg-white text-[12px]">
|
||||
<span>{usageFilter === "all" ? "全部" : usageFilter === "consumed" ? "已消耗" : "已获取"}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -1687,7 +1687,7 @@ export function LovartHome({
|
||||
{filteredUsageRecords.map((record, idx) => (
|
||||
<div
|
||||
key={record.id}
|
||||
className={`grid grid-cols-[2fr_1fr_2fr_1fr] items-center px-5 py-3 text-[14px] ${idx % 2 === 1 ? "bg-black/[0.02]" : ""}`}
|
||||
className={`grid grid-cols-[2fr_1fr_2fr_1fr] items-center px-4 py-2.5 text-[13px] ${idx % 2 === 1 ? "bg-black/[0.02]" : ""}`}
|
||||
>
|
||||
<div className="truncate pr-3 text-black/80">{record.detail}</div>
|
||||
<div className="text-black/55">{record.status === "consumed" ? "已消耗" : "已获取"}</div>
|
||||
@ -1705,8 +1705,8 @@ export function LovartHome({
|
||||
) : null}
|
||||
|
||||
{accountCenterTab === "billing" ? (
|
||||
<div className="rounded-[22px] border border-black/10 bg-white">
|
||||
<div className="grid grid-cols-[2fr_2fr_1.5fr_1.5fr_1fr] items-center border-b border-black/8 px-5 py-3 text-[14px] font-semibold text-black/80">
|
||||
<div className="rounded-[18px] border border-black/10 bg-white">
|
||||
<div className="grid grid-cols-[2fr_2fr_1.5fr_1.5fr_1fr] items-center border-b border-black/8 px-4 py-2.5 text-[13px] font-semibold text-black/80">
|
||||
<span>日期</span>
|
||||
<span>类别</span>
|
||||
<span>金额</span>
|
||||
@ -1718,7 +1718,7 @@ export function LovartHome({
|
||||
{accountCenterData.billingRecords.map((record, idx) => (
|
||||
<div
|
||||
key={record.id}
|
||||
className={`grid grid-cols-[2fr_2fr_1.5fr_1.5fr_1fr] items-center px-5 py-3 text-[14px] ${idx % 2 === 1 ? "bg-black/[0.02]" : ""}`}
|
||||
className={`grid grid-cols-[2fr_2fr_1.5fr_1.5fr_1fr] items-center px-4 py-2.5 text-[13px] ${idx % 2 === 1 ? "bg-black/[0.02]" : ""}`}
|
||||
>
|
||||
<div className="text-black/65">{formatDateTime(record.date)}</div>
|
||||
<div className="text-black/80">{record.category}</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user