+ {/* 算力概览区域:蓝色卡片 + 4个统计卡片 */}
+
+ {/* 蓝色算力概览卡片 */}
+
+
+
+
剩余算力
+
+ {formatNumber(stats?.remainingTokens)}
+
+
+
+ 总计 {stats?.totalTokens || 0}
+
+
+
+ 使用率 {getUsageRate()}%
+
+
+
+
+
+ {/* 4个统计卡片(2x2网格) */}
+
+
+
+
+ {formatNumber(stats?.todayUsed)}
+
+
+
+
+
+ {formatNumber(stats?.yesterdayUsed)}
+
+
+
+
+
+ {formatNumber(stats?.historyConsumed || stats?.totalConsumed)}
+
+
+
+
+
+ {getEstimatedDays()}
+
+
+
+
+
+ {/* 导航标签 */}
+
+ {navTabs.map(tab => (
+
handleTabChange(tab.key)}
+ >
+ {tab.label}
+
+ ))}
+
+
+
+ {/* 算力明细Tab内容 */}
+ {activeTab === "details" && (
+ <>
+ {/* 筛选器 */}
+
+
setFilterTypeVisible(false)}
+ value={[filterType]}
+ onConfirm={value => {
+ setFilterType(value[0] as string);
+ setFilterTypeVisible(false);
+ }}
+ >
+ {() => (
+ setFilterTypeVisible(true)}
+ >
+
+ {getTypeLabel()}
+
+ )}
+
+
+
setFilterActionVisible(false)}
+ value={[filterAction]}
+ onConfirm={value => {
+ setFilterAction(value[0] as string);
+ setFilterActionVisible(false);
+ }}
+ >
+ {() => (
+ setFilterActionVisible(true)}
+ >
+
+ {getActionLabel()}
+
+ )}
+
+
+
setFilterTimeVisible(false)}
+ value={[filterTime]}
+ onConfirm={value => {
+ setFilterTime(value[0] as string);
+ setFilterTimeVisible(false);
+ }}
+ >
+ {() => (
+ setFilterTimeVisible(true)}
+ >
+
+ {getTimeLabel()}
+
+ )}
+
+
+
+ {/* 算力消耗记录列表 */}
+
+ {loading && records.length === 0 ? (
+
+ ) : records.length > 0 ? (
+ <>
+ {records.map(record => {
+ const isConsume = record.type === 0;
+ const powerColor = isConsume ? '#ff7a00' : '#52c41a';
+ const iconBgColor = isConsume ? '#fff4e6' : '#f6ffed';
+
+ return (
+
+ {/* 左侧:图标 + 文字信息 */}
+
+
+
+
+
+
+ {getRecordTitle(record)}
+
+
+ {formatDateTime(record.createTime)}
+
+
+
+ {/* 右侧:算力数值 */}
+
+
+ {isConsume ? '-' : '+'}{formatNumber(Math.abs(record.tokens))}
+
+
算力点
+
+
+ );
+ })}
+
+ >
+ ) : (
+
+ )}
+
+ >
+ )}
+
+ {/* 购买算力Tab内容 */}
+ {activeTab === "buy" && (
+
+ {loading && packages.length === 0 ? (
+
+ ) : (
+ packages.map(pkg => {
+ const savings = getSavings(pkg);
+ const tokensValue = formatTokens(pkg.tokens);
+
+ return (
+
+ {/* 套餐头部 */}
+
+
+ {pkg.name}
+ {pkg.discount > 0 && (
+
+ {pkg.discount}% OFF
+
+ )}
+
+
+
+
+ {/* 价格信息 */}
+
+
+
+ ¥{(pkg.price / 100).toFixed(2)}
+
+ {pkg.originalPrice && pkg.originalPrice > pkg.price && (
+
+ ¥{(pkg.originalPrice / 100).toFixed(2)}
+
+ )}
+
+ {savings > 0 && (
+
+ 节省 ¥{(savings / 100).toFixed(2)}
+
+ )}
+
+ ¥{pkg.unitPrice.toFixed(3)}/算力
+
+
+
+ {/* 功能列表 */}
+ {pkg.description && pkg.description.length > 0 && (
+
+ {pkg.description.map((desc, index) => (
+
+
+ {desc}
+
+ ))}
+
+ )}
+
+ {/* 立即购买按钮 */}
+
+
+ );
+ })
+ )}
+
+ {/* 自定义算力包 */}
+
+
+
+
自定义算力包
+
+ 根据您的需求定制,灵活购买算力
+
+
+
+ {/* 快速选择 */}
+
+ {[10, 50, 100].map(amount => (
+
+ ))}
+
+
+ {/* 自定义输入 */}
+
+
+
+
+ {/* 立即购买按钮 */}
+
+
+
+ {/* 安全保障承诺 */}
+
+
+
+ 安全保障承诺
+
+
+
+
+ 算力永不过期,购买后永久有效
+
+
+
+ 透明计费,每次AI服务消耗明细可查
+
+
+
+ 7×24小时技术支持
+
+
+
+ 企业级数据安全全认证
+
+
+
+
+ )}
+
+ {/* 购买记录Tab内容 */}
+ {activeTab === "orders" && (
+
+ {/* 搜索栏 */}
+
+
+ {
+ setOrderKeyword(value);
+ }}
+ onEnterPress={() => {
+ setOrderPage(1);
+ setOrderHasMore(true);
+ fetchOrders(1, false);
+ }}
+ className={style.searchInput}
+ />
+
+
+ {/* 筛选器 */}
+
+
setOrderStatusVisible(false)}
+ value={[orderStatus]}
+ onConfirm={value => {
+ setOrderStatus(value[0] as string);
+ setOrderStatusVisible(false);
+ // useEffect 会自动触发 fetchOrders
+ }}
+ >
+ {() => (
+ setOrderStatusVisible(true)}
+ >
+
+ {getOrderStatusLabel()}
+
+ )}
+
+
+
setOrderTimeVisible(false)}
+ value={[orderTime]}
+ onConfirm={value => {
+ setOrderTime(value[0] as string);
+ setOrderTimeVisible(false);
+ // useEffect 会自动触发 fetchOrders
+ }}
+ >
+ {() => (
+ setOrderTimeVisible(true)}
+ >
+
+ {getOrderTimeLabel()}
+
+ )}
+
+
+
setOrderPayTypeVisible(false)}
+ value={[orderPayType]}
+ onConfirm={value => {
+ setOrderPayType(value[0] as string);
+ setOrderPayTypeVisible(false);
+ // useEffect 会自动触发 fetchOrders
+ }}
+ >
+ {() => (
+ setOrderPayTypeVisible(true)}
+ >
+
+ {getOrderPayTypeLabel()}
+
+ )}
+
+
+
+ {/* 订单列表 */}
+
+ {loading && orders.length === 0 ? (
+
+ ) : orders.length > 0 ? (
+ <>
+ {orders.map(order => {
+ const statusInfo = getOrderStatusInfo(order.status);
+ // tokens 已经是格式化好的字符串,如 "280,000"
+ const tokens = order.tokens || "0";
+
+ return (
+
+
+
+ {order.goodsName || "算力充值"}
+
+
+ +{tokens}
+
+
+
+
+
+ 订单号: {order.orderNo || "-"}
+
+
+ {order.payType === 1 ? (
+
+ ) : order.payType === 2 ? (
+
+ ) : null}
+ {order.payType ? getPayTypeText(order.payType) : order.payTypeText || "未支付"}
+
+
+
+
+ {order.statusText || statusInfo.text}
+
+
+ {formatDateTime(order.createTime)}
+
+
+
+
+ );
+ })}
+
+ >
+ ) : (
+
+ )}
+
+
+ )}
+
+ {/* 算力分配Tab内容 */}
+ {activeTab === "allocation" && (
+
+ {/* 算力分配表单 */}
+
+
+
+ 算力分配
+
+
+
+ {/* 选择账号 */}
+
+
+
({ label: getAccountDisplayName(acc), value: acc.uid || acc.userId || acc.id }))]}
+ visible={allocationAccountVisible}
+ onClose={() => setAllocationAccountVisible(false)}
+ value={allocationAccount ? [allocationAccount.uid || allocationAccount.userId || allocationAccount.id] : []}
+ onConfirm={value => {
+ const selectedAccount = accounts.find(acc => (acc.uid || acc.userId || acc.id) === value[0]);
+ setAllocationAccount(selectedAccount || null);
+ setAllocationAccountVisible(false);
+ }}
+ >
+ {() => (
+ setAllocationAccountVisible(true)}
+ >
+ {allocationAccount ? getAccountDisplayName(allocationAccount) : "请选择账号"}
+
+
+ )}
+
+
+
+ {/* 填写数量 */}
+
+
+
+
+
+ {/* 确认分配按钮 */}
+
+
+
+
+ {/* 分配记录 */}
+
+
+
+
分配记录
+
+
setAllocationAccountFilterVisible(false)}
+ value={[allocationAccountFilter]}
+ onConfirm={value => {
+ setAllocationAccountFilter(value[0] as string);
+ setAllocationAccountFilterVisible(false);
+ // 重新加载记录
+ setAllocationPage(1);
+ setAllocationHasMore(true);
+ fetchAllocationRecords(1, false);
+ }}
+ >
+ {() => (
+ setAllocationAccountFilterVisible(true)}
+ >
+ {allocationAccountOptions.find(opt => opt.value === allocationAccountFilter)?.label || "全部账号"}
+
+
+ )}
+
+
+
setAllocationTimeFilterVisible(false)}
+ value={[allocationTimeFilter]}
+ onConfirm={value => {
+ setAllocationTimeFilter(value[0] as string);
+ setAllocationTimeFilterVisible(false);
+ // 重新加载记录
+ setAllocationPage(1);
+ setAllocationHasMore(true);
+ fetchAllocationRecords(1, false);
+ }}
+ >
+ {() => (
+ setAllocationTimeFilterVisible(true)}
+ >
+ {allocationTimeOptions.find(opt => opt.value === allocationTimeFilter)?.label || "最近7天"}
+
+
+ )}
+
+
+
+
+ {/* 记录列表 */}
+
+ {loading && allocationRecords.length === 0 ? (
+
+ ) : allocationRecords.length > 0 ? (
+ <>
+ {allocationRecords.map(record => {
+ // 从remarks中提取账号信息,格式可能是 "账号名 - 其他信息" 或直接是账号名
+ const accountName = record.remarks || `账号${record.wechatAccountId || record.id}`;
+
+ return (
+
+
+
+
+
+ {accountName}
+
+
+ {formatDateTime(record.createTime)}
+
+
+
+
+ +{formatNumber(Math.abs(record.tokens))}
+
+
+ );
+ })}
+
+ >
+ ) : (
+
+ )}
+
+
+
+ )}
+
+
+ {/* 支付弹框 */}
+