mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 08:44:41 +08:00
SaladDay
d52ab6c5f4
The account header (login + badges + actions) already renders independently of the usage query — the quota is fetched async via Tauri invoke + React Query, so the account never waits on it. Make that visually obvious and jump-free: while the usage loads, show a spinner inside a placeholder shaped like the final quota card (same rounded-xl / border / bg-card), so the card morphs smoothly into the data instead of popping in from an empty gap.
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
import { useCodexOauthQuotaByAccountId } from "@/lib/query/subscription";
|
|
import { SubscriptionQuotaView } from "@/components/SubscriptionQuotaFooter";
|
|
|
|
interface CodexOauthAccountQuotaProps {
|
|
/** cc-switch 自管的 ChatGPT 账号 ID */
|
|
accountId: string;
|
|
}
|
|
|
|
/**
|
|
* 设置 → 认证中心里，单个 ChatGPT (Codex OAuth) 账号的用量展示。
|
|
*
|
|
* 直接按 accountId 查询 cc-switch 自管 OAuth token 的订阅额度，复用
|
|
* `SubscriptionQuotaView` 的展开布局（进度条 + 重置倒计时 + 刷新按钮），
|
|
* 因此与供应商卡片里的额度展示保持完全一致的观感与状态处理。
|
|
*
|
|
* 面板打开时拉取一次，不轮询；用户可点卡片内的刷新按钮手动更新。
|
|
*/
|
|
const CodexOauthAccountQuota: React.FC<CodexOauthAccountQuotaProps> = ({
|
|
accountId,
|
|
}) => {
|
|
const {
|
|
data: quota,
|
|
isFetching: loading,
|
|
refetch,
|
|
} = useCodexOauthQuotaByAccountId(accountId, {
|
|
enabled: true,
|
|
autoQuery: false,
|
|
});
|
|
|
|
// 首次加载占位：账号头部由父组件独立渲染，这里只负责用量区。
|
|
// 用量请求是异步的（Tauri invoke + React Query），加载期间给一个
|
|
// 与最终额度卡片同形状（rounded-xl / border / bg-card）的转圈占位，
|
|
// 这样账号会立刻显示、用量数据到达后原地平滑替换，不产生跳版。
|
|
if (loading && !quota) {
|
|
return (
|
|
<div className="mt-3 flex items-center justify-center rounded-xl border border-border-default bg-card py-5 shadow-sm">
|
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SubscriptionQuotaView
|
|
quota={quota}
|
|
loading={loading}
|
|
refetch={refetch}
|
|
appIdForExpiredHint="codex_oauth"
|
|
inline={false}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default CodexOauthAccountQuota;
|