Implement power statistics API and enhance Power Management component. Add new Statistics interface and update UI to display formatted usage data. Adjust styles for better readability.

Cunkebao/src/pages/mobile/mine/recharge/index/api.ts

@@ -1,5 +1,17 @@
 import request from "@/api/request";
 
+export interface Statistics {
+  totalTokens: number; // 总算力
+  todayUsed: number; // 今日使用
+  monthUsed: number; // 本月使用
+  remainingTokens: number; // 剩余算力
+  totalConsumed: number; // 总消耗
+}
+// 算力统计接口
+export function getStatistics(): Promise<Statistics> {
+  return request("/v1/tokens/statistics", undefined, "GET");
+}
+
 // 算力包套餐类型
 export interface PowerPackage {
   id: number;

Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss

@@ -138,7 +138,7 @@
 }
 
 .usageValue {
-  font-size: 32px;
+  font-size: 20px;
   font-weight: 600;
   margin-bottom: 8px;
 }

Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx

@@ -11,8 +11,8 @@ import {
 } from "@ant-design/icons";
 import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
-import { getPowerStats, getOrderList } from "./api";
-import type { PowerStats } from "./api";
+import { getStatistics, getOrderList } from "./api";
+import type { Statistics } from "./api";
 import { Pagination } from "antd";
 
 type OrderRecordView = {
@@ -29,7 +29,7 @@ const PowerManagement: React.FC = () => {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState("overview");
   const [loading, setLoading] = useState(false);
-  const [stats, setStats] = useState<PowerStats | null>(null);
+  const [stats, setStats] = useState<Statistics | null>(null);
   const [records, setRecords] = useState<OrderRecordView[]>([]);
   const [filterType, setFilterType] = useState<string>("all");
   const [filterStatus, setFilterStatus] = useState<string>("all");
@@ -69,7 +69,7 @@ const PowerManagement: React.FC = () => {
 
   const fetchStats = async () => {
     try {
-      const res = await getPowerStats();
+      const res = await getStatistics();
       setStats(res);
     } catch (error) {
       console.error("获取统计失败:", error);
@@ -143,6 +143,22 @@ const PowerManagement: React.FC = () => {
     );
   };
 
+  // 格式化数值：超过1000用k，超过10000用w，保留1位小数
+  const formatNumber = (value: number | undefined): string => {
+    if (value === undefined || value === null) return "0";
+    const num = Number(value);
+    if (isNaN(num)) return "0";
+
+    if (num >= 10000) {
+      const w = num / 10000;
+      return w % 1 === 0 ? `${w}w` : `${w.toFixed(1)}w`;
+    } else if (num >= 1000) {
+      const k = num / 1000;
+      return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+    }
+    return String(num);
+  };
+
   // 渲染概览Tab
   const renderOverview = () => (
     <div className={style.overviewContent}>
@@ -155,7 +171,9 @@ const PowerManagement: React.FC = () => {
             </div>
             <div className={style.textWrapper}>
               <div className={style.cardTitle}>总算力</div>
-              <div className={style.cardValue}>{stats?.totalPower || 0}</div>
+              <div className={style.cardValue}>
+                {formatNumber(stats?.totalTokens)}
+              </div>
             </div>
           </div>
         </Card>
@@ -167,19 +185,19 @@ const PowerManagement: React.FC = () => {
         <div className={style.usageStats}>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valueGreen}`}>
-              {stats?.todayUsed || 0}
+              {formatNumber(stats?.todayUsed)}
             </div>
             <div className={style.usageLabel}>今日使用</div>
           </div>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valueBlue}`}>
-              {stats?.monthUsed || 0}
+              {formatNumber(stats?.monthUsed)}
             </div>
             <div className={style.usageLabel}>本月使用</div>
           </div>
           <div className={style.usageItem}>
             <div className={`${style.usageValue} ${style.valuePurple}`}>
-              {stats?.remainingPower || 0}
+              {formatNumber(stats?.remainingTokens)}
             </div>
             <div className={style.usageLabel}>剩余算力</div>
           </div>
@@ -278,7 +296,9 @@ const PowerManagement: React.FC = () => {
                   <div className={style.recordAmount}>
                     -¥{record.amount.toFixed(1)}
                   </div>
-                  <div className={style.recordPower}>{record.power} 算力</div>
+                  <div className={style.recordPower}>
+                    {formatNumber(record.power)} 算力
+                  </div>
                 </div>
               </div>
               <div className={style.recordDesc}>{record.description}</div>