From a557319b3e5fa49b9aff2adf8df9bd7aa8792dec Mon Sep 17 00:00:00 2001
From: wong <106998207@qq.com>
Date: Sat, 6 Dec 2025 17:13:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E5=8A=9B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DeviceSelection/selectionPopup.tsx        |   14 +-
 Cunkebao/src/components/PopuLayout/footer.tsx |   18 +-
 .../pages/mobile/mine/content/form/index.tsx  |  156 +-
 .../mobile/mine/recharge/buy-power/api.ts     |    4 +-
 .../pages/mobile/mine/recharge/index/api.ts   |   42 +
 .../mine/recharge/index/index.module.scss     | 1512 ++++++++++---
 .../mobile/mine/recharge/index/index.tsx      | 1952 ++++++++++++++---
 .../mobile/mine/recharge/usage-records/api.ts |    1 +
 .../wechat-accounts/detail/detail.module.scss |   26 +-
 .../mobile/scenarios/plan/list/index.tsx      |   28 +-
 .../controller/TokensRecordController.php     |   22 +
 .../common/controller/PaymentService.php      |    3 +-
 .../cunkebao/controller/TokensController.php  |   57 +-
 13 files changed, 3100 insertions(+), 735 deletions(-)

diff --git a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
index 8dbac0ad..0485f58d 100644
--- a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
+++ b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
@@ -121,13 +121,13 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
       }
     } else {
       // 多选模式：原有的逻辑
-      if (tempSelectedOptions.some(v => v.id === device.id)) {
-        setTempSelectedOptions(
-          tempSelectedOptions.filter(v => v.id !== device.id),
-        );
-      } else {
-        const newSelectedOptions = [...tempSelectedOptions, device];
-        setTempSelectedOptions(newSelectedOptions);
+    if (tempSelectedOptions.some(v => v.id === device.id)) {
+      setTempSelectedOptions(
+        tempSelectedOptions.filter(v => v.id !== device.id),
+      );
+    } else {
+      const newSelectedOptions = [...tempSelectedOptions, device];
+      setTempSelectedOptions(newSelectedOptions);
       }
     }
   };
diff --git a/Cunkebao/src/components/PopuLayout/footer.tsx b/Cunkebao/src/components/PopuLayout/footer.tsx
index a9d09855..3dbf8a52 100644
--- a/Cunkebao/src/components/PopuLayout/footer.tsx
+++ b/Cunkebao/src/components/PopuLayout/footer.tsx
@@ -34,15 +34,15 @@ const PopupFooter: React.FC<PopupFooterProps> = ({
       {/* 分页栏 */}
       <div className={style.paginationRow}>
         {onSelectAll && (
-          <div className={style.totalCount}>
-            <Checkbox
-              checked={isAllSelected}
-              onChange={e => onSelectAll(e.target.checked)}
-              className={style.selectAllCheckbox}
-            >
-              全选当前页
-            </Checkbox>
-          </div>
+        <div className={style.totalCount}>
+          <Checkbox
+            checked={isAllSelected}
+            onChange={e => onSelectAll(e.target.checked)}
+            className={style.selectAllCheckbox}
+          >
+            全选当前页
+          </Checkbox>
+        </div>
         )}
         <div className={style.paginationControls}>
           <Button
diff --git a/Cunkebao/src/pages/mobile/mine/content/form/index.tsx b/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
index 95667d0c..8d55e3f7 100644
--- a/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/content/form/index.tsx
@@ -106,7 +106,7 @@ export default function ContentForm() {
             setUseAI(data.aiEnabled === 1);
           } else {
             // 兼容旧数据，默认根据是否有 aiPrompt 判断
-            setUseAI(!!data.aiPrompt);
+          setUseAI(!!data.aiPrompt);
           }
           setEnabled(data.status === 1);
           // 时间范围
@@ -151,7 +151,7 @@ export default function ContentForm() {
           .map(s => s.trim())
           .filter(Boolean),
         catchType,
-          aiPrompt,
+        aiPrompt,
           aiEnabled: useAI ? 1 : 0,
         timeEnabled: dateRange[0] || dateRange[1] ? 1 : 0,
         startTime: dateRange[0] ? formatDate(dateRange[0]) : "",
@@ -347,37 +347,37 @@ export default function ContentForm() {
 
           <div className={style["form-card"]}>
             <Collapse className={style["keyword-collapse"]}>
-              <Collapse.Panel
-                key="keywords"
+            <Collapse.Panel
+              key="keywords"
                 title={
                   <div className={style["keyword-header"]}>
                     <span className={style["keyword-title"]}>关键词设置</span>
                     <DownOutlined className={style["keyword-arrow"]} />
                   </div>
                 }
-              >
-                <div className={style["form-section"]}>
-                  <label className={style["form-label"]}>包含关键词</label>
-                  <TextArea
-                    placeholder="多个关键词用逗号分隔"
-                    value={keywordsInclude}
-                    onChange={e => setKeywordsInclude(e.target.value)}
-                    className={style["input"]}
-                    autoSize={{ minRows: 2, maxRows: 4 }}
-                  />
-                </div>
-                <div className={style["form-section"]}>
-                  <label className={style["form-label"]}>排除关键词</label>
-                  <TextArea
-                    placeholder="多个关键词用逗号分隔"
-                    value={keywordsExclude}
-                    onChange={e => setKeywordsExclude(e.target.value)}
-                    className={style["input"]}
-                    autoSize={{ minRows: 2, maxRows: 4 }}
-                  />
-                </div>
-              </Collapse.Panel>
-            </Collapse>
+            >
+              <div className={style["form-section"]}>
+                <label className={style["form-label"]}>包含关键词</label>
+                <TextArea
+                  placeholder="多个关键词用逗号分隔"
+                  value={keywordsInclude}
+                  onChange={e => setKeywordsInclude(e.target.value)}
+                  className={style["input"]}
+                  autoSize={{ minRows: 2, maxRows: 4 }}
+                />
+              </div>
+              <div className={style["form-section"]}>
+                <label className={style["form-label"]}>排除关键词</label>
+                <TextArea
+                  placeholder="多个关键词用逗号分隔"
+                  value={keywordsExclude}
+                  onChange={e => setKeywordsExclude(e.target.value)}
+                  className={style["input"]}
+                  autoSize={{ minRows: 2, maxRows: 4 }}
+                />
+              </div>
+            </Collapse.Panel>
+          </Collapse>
           </div>
 
           {/* 采集内容类型 */}
@@ -400,38 +400,38 @@ export default function ContentForm() {
                     );
                   }}
                 >
-                  {type === "text"
-                    ? "文本"
-                    : type === "image"
-                      ? "图片"
-                      : "视频"}
+                    {type === "text"
+                      ? "文本"
+                      : type === "image"
+                        ? "图片"
+                        : "视频"}
                 </button>
               ))}
             </div>
           </div>
 
           <div className={style["form-card"]}>
-            <div
-              className={style["form-section"]}
-              style={{ display: "flex", alignItems: "center", gap: 12 }}
-            >
-              <Switch checked={useAI} onChange={setUseAI} />
-              <span className={style["ai-desc"]}>
+          <div
+            className={style["form-section"]}
+            style={{ display: "flex", alignItems: "center", gap: 12 }}
+          >
+            <Switch checked={useAI} onChange={setUseAI} />
+            <span className={style["ai-desc"]}>
                 启用后,该内容库下的内容会通过AI生成
-              </span>
-            </div>
-            {useAI && (
-              <div className={style["form-section"]}>
-                <label className={style["form-label"]}>AI提示词</label>
-                <TextArea
+            </span>
+          </div>
+          {useAI && (
+            <div className={style["form-section"]}>
+              <label className={style["form-label"]}>AI提示词</label>
+              <TextArea
                   placeholder="请输入AI提示词"
                   value={aiPrompt}
                   onChange={e => setAIPrompt(e.target.value)}
                   className={style["input"]}
                   autoSize={{ minRows: 4, maxRows: 10 }}
                 />
-              </div>
-            )}
+            </div>
+          )}
           </div>
 
           <div className={style["form-card"]}>
@@ -441,51 +441,51 @@ export default function ContentForm() {
             <div className={style["date-inputs"]}>
               <div className={style["date-item"]}>
                 <label className={style["date-label"]}>开始时间</label>
-                <AntdInput
-                  readOnly
+              <AntdInput
+                readOnly
                   value={
                     dateRange[0]
                       ? `${dateRange[0].getFullYear()}/${String(dateRange[0].getMonth() + 1).padStart(2, "0")}/${String(dateRange[0].getDate()).padStart(2, "0")}`
                       : ""
                   }
-                  placeholder="年/月/日"
+                placeholder="年/月/日"
                   className={style["date-input"]}
-                  onClick={() => setShowStartPicker(true)}
-                />
-                <DatePicker
-                  visible={showStartPicker}
-                  title="开始时间"
-                  value={dateRange[0]}
-                  onClose={() => setShowStartPicker(false)}
-                  onConfirm={val => {
-                    setDateRange([val, dateRange[1]]);
-                    setShowStartPicker(false);
-                  }}
-                />
-              </div>
+                onClick={() => setShowStartPicker(true)}
+              />
+              <DatePicker
+                visible={showStartPicker}
+                title="开始时间"
+                value={dateRange[0]}
+                onClose={() => setShowStartPicker(false)}
+                onConfirm={val => {
+                  setDateRange([val, dateRange[1]]);
+                  setShowStartPicker(false);
+                }}
+              />
+            </div>
               <div className={style["date-item"]}>
                 <label className={style["date-label"]}>结束时间</label>
-                <AntdInput
-                  readOnly
+              <AntdInput
+                readOnly
                   value={
                     dateRange[1]
                       ? `${dateRange[1].getFullYear()}/${String(dateRange[1].getMonth() + 1).padStart(2, "0")}/${String(dateRange[1].getDate()).padStart(2, "0")}`
                       : ""
                   }
-                  placeholder="年/月/日"
+                placeholder="年/月/日"
                   className={style["date-input"]}
-                  onClick={() => setShowEndPicker(true)}
-                />
-                <DatePicker
-                  visible={showEndPicker}
-                  title="结束时间"
-                  value={dateRange[1]}
-                  onClose={() => setShowEndPicker(false)}
-                  onConfirm={val => {
-                    setDateRange([dateRange[0], val]);
-                    setShowEndPicker(false);
-                  }}
-                />
+                onClick={() => setShowEndPicker(true)}
+              />
+              <DatePicker
+                visible={showEndPicker}
+                title="结束时间"
+                value={dateRange[1]}
+                onClose={() => setShowEndPicker(false)}
+                onConfirm={val => {
+                  setDateRange([dateRange[0], val]);
+                  setShowEndPicker(false);
+                }}
+              />
               </div>
             </div>
           </div>
@@ -493,7 +493,7 @@ export default function ContentForm() {
           <div className={style["form-card"]}>
             <div className={style["enable-section"]}>
               <span className={style["enable-label"]}>是否启用</span>
-              <Switch checked={enabled} onChange={setEnabled} />
+            <Switch checked={enabled} onChange={setEnabled} />
             </div>
           </div>
         </form>
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
index 261f38dc..144ee1da 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/recharge/buy-power/api.ts
@@ -4,7 +4,7 @@ import request from "@/api/request";
 export interface PowerPackage {
   id: number;
   name: string;
-  tokens: number; // 算力点数
+  tokens: number | string; // 算力点数（可能是字符串，如"2,800"）
   price: number; // 价格（分）
   originalPrice: number; // 原价（分）
   unitPrice: number; // 单价
@@ -13,7 +13,7 @@ export interface PowerPackage {
   isRecommend: number; // 是否推荐
   isHot: number; // 是否热门
   isVip: number; // 是否VIP
-  features: string[]; // 功能特性
+  features?: string[]; // 功能特性（可选）
   description: string[]; // 描述关键词
   status: number;
   createTime: string;
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
index de13a1e0..055808cb 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts
@@ -6,6 +6,9 @@ export interface Statistics {
   monthUsed: number; // 本月使用
   remainingTokens: number; // 剩余算力
   totalConsumed: number; // 总消耗
+  yesterdayUsed?: number; // 昨日消耗
+  historyConsumed?: number; // 历史消耗
+  estimatedDays?: number; // 预计可用天数
 }
 // 算力统计接口
 export function getStatistics(): Promise<Statistics> {
@@ -143,3 +146,42 @@ export function buyPackage(params: { id: number; price: number }) {
 export function buyCustomPower(params: { amount: number }) {
   return request("/v1/power/buy-custom", params, "POST");
 }
+
+// 查询订单状态
+export interface QueryOrderResponse {
+  id: number;
+  mchId: number;
+  companyId: number;
+  userId: number;
+  orderType: number;
+  status: number; // 0: 待支付, 1: 已支付
+  goodsId: number;
+  goodsName: string;
+  goodsSpecs: string;
+  money: number;
+  orderNo: string;
+  payType: number | null;
+  payTime: number | null;
+  payInfo: any;
+  createTime: number;
+}
+
+export function queryOrder(orderNo: string): Promise<QueryOrderResponse> {
+  return request("/v1/tokens/queryOrder", { orderNo }, "GET");
+}
+
+// 账号信息
+export interface Account {
+  id: number;
+  userName: string;
+  realName: string;
+  nickname: string;
+  departmentId: number;
+  departmentName: string;
+  avatar: string;
+}
+
+// 获取账号列表
+export function getAccountList(): Promise<{ list: Account[]; total: number }> {
+  return request("/v1/kefu/accounts/list", undefined, "GET");
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
index 99d1355e..6cc1bc1c 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss
@@ -1,359 +1,1363 @@
-// 算力管理页面样式
 .powerPage {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 20px;
+}
+
+.overviewSection {
   padding: 16px;
+  background-color: #f5f5f5;
 }
 
-.powerTabs {
-  :global {
-    .adm-tabs-header {
-      background: #fff;
-      border-bottom: 1px solid #f0f0f0;
-    }
-  }
-}
-
-.refreshBtn {
-  font-size: 18px;
-  color: #666;
-  cursor: pointer;
-  padding: 4px;
-
-  &:active {
-    opacity: 0.6;
-  }
-}
-
-// ==================== 概览Tab ====================
-.overviewContent {
-}
-
-.accountCards {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.balanceCard,
-.powerCard {
-  flex: 1;
-  border-radius: 10px;
-  border: 1px solid #f0f0f0;
-}
-
-.balanceCard {
-  border: 1px solid #cbdbea;
-  background: #edfcff;
-}
-
-.powerCard {
-  border: 1px solid #e3dbf0;
-  background: #f9f0ff;
-}
-.powerCard .iconWrapper {
-  background: #e9d9ff;
-}
-
-.cardContent {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.iconWrapper {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.balanceCard .iconWrapper {
-  background: #d6edff;
-}
-
-.cardIcon {
-  font-size: 24px;
-}
-
-.balanceCard .cardIcon {
-  color: #1890ff;
-}
-
-.powerCard .cardIcon {
-  color: #722ed1;
-}
-
-.textWrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.cardTitle {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.cardValue {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-}
-
-.balanceCard .cardValue {
-  color: #1890ff;
-}
-
-.powerCard .cardValue {
-  color: #722ed1;
-}
-
-// 使用情况卡片
-.usageCard {
-  padding: 20px 16px;
+.overviewCard {
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  margin-bottom: 8px;
   border-radius: 12px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  padding: 12px 20px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: none;
 }
 
-.usageTitle {
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
-  margin-bottom: 16px;
+.overviewContent {
+  position: relative;
+  z-index: 1;
 }
 
-.usageStats {
+.remainingPower {
+  margin-bottom: 6px;
   display: flex;
-  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
 }
 
-.usageItem {
-  flex: 1;
-  text-align: center;
+.remainingLabel {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
 }
 
-.usageValue {
-  font-size: 20px;
-  font-weight: 600;
+.remainingValue {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 1.2;
+}
+
+.totalInfo {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
   margin-bottom: 8px;
 }
 
-.valueGreen {
-  color: #52c41a;
+.progressBar {
+  width: 100%;
+  height: 6px;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 6px;
 }
 
-.valueBlue {
-  color: #1890ff;
+.progressFill {
+  height: 100%;
+  background-color: #ffffff;
+  border-radius: 4px;
+  transition: width 0.3s ease;
 }
 
-.valuePurple {
-  color: #722ed1;
+.usageRate {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
 }
 
-.usageLabel {
-  font-size: 13px;
-  color: #888;
+.lightningIcon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 36px;
+  color: rgba(255, 255, 255, 0.2);
 }
 
-// 快速操作卡片
-.actionCard {
-  padding: 20px 16px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.actionTitle {
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
+.navTabs {
+  display: flex;
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 16px;
   margin-bottom: 16px;
 }
 
-.actionButtons {
-  display: flex;
-  gap: 12px;
+.navTab {
+  flex: 1;
+  text-align: center;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s;
 }
 
-.buyButton {
-  flex: 1;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.navTab:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 20px;
+  background-color: #f0f0f0;
+}
+
+.navTabActive {
+  color: #1677ff;
+  font-weight: 600;
+  background-color: #ffffff;
+}
+
+.navTabActive::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: #1677ff;
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.statCard {
+  border-radius: 12px;
+  padding: 10px 12px;
+  position: relative;
+  overflow: hidden;
   border: none;
-  color: #fff;
-  font-size: 15px;
-  font-weight: 500;
-  padding: 12px;
-  border-radius: 8px;
+  box-shadow: none;
+}
+
+.statCardGreen {
+  background: #52c41a;
+  color: #ffffff;
+}
+
+.statCardGrey {
+  background: #262626;
+  color: #ffffff;
+}
+
+.statCardPurple {
+  background: #722ed1;
+  color: #ffffff;
+}
+
+.statCardOrange {
+  background: #fa8c16;
+  color: #ffffff;
+}
+
+.statIcon {
+  font-size: 18px;
+  opacity: 0.9;
+  margin-right: 6px;
+}
+
+.statTitle {
+  font-size: 11px;
+  opacity: 0.9;
+}
+
+.statTitleRow {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 6px;
-
-  &:active {
-    opacity: 0.8;
-  }
+  margin-bottom: 6px;
 }
 
-.buttonIcon {
-  font-size: 16px;
-}
-
-.recordButton {
-  flex: 1;
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  color: #333;
-  font-size: 15px;
-  padding: 12px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-
-  &:active {
-    background: #f5f5f5;
-  }
-}
-
-// ==================== 消费记录Tab ====================
-.recordsContent {
+.statValue {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1.2;
 }
 
 .filters {
   display: flex;
   gap: 12px;
+  padding: 0 16px;
   margin-bottom: 16px;
 }
 
 .filterButton {
+  flex: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
   padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background-color: #ffffff;
   border-radius: 8px;
   font-size: 14px;
   color: #333;
   cursor: pointer;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
 
-  span {
-    font-size: 12px;
-  }
+.filterIcon {
+  font-size: 12px;
+  color: #999;
 }
 
 .recordList {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  padding: 0 16px;
 }
 
 .recordItem {
-  padding: 16px;
+  margin-bottom: 12px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  border: 1px solid #f0f0f0;
+  padding: 16px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); // 更柔和的阴影
   cursor: pointer;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
+  transition: all 0.3s;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background-color: #ffffff;
 }
 
 .recordItem:active {
   transform: scale(0.98);
-}
-
-.recordItem:hover {
-  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.08);
-}
-
-.recordHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
 }
 
 .recordLeft {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.recordIconWrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 0; // 图标顶部与标题顶部对齐
 }
 
-.recordType {
-  font-size: 16px;
-  font-weight: 600;
-  color: #222;
+.recordIconWrapperConsume {
+  background-color: #fff4e6; // 浅橙色背景
 }
 
-.recordStatus {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 10px;
+.recordIconWrapperRecharge {
+  background-color: #f6ffed; // 浅绿色背景
 }
 
-.recordRight {
-  text-align: right;
+.recordIcon {
+  font-size: 20px;
 }
 
-.recordAmount {
-  font-size: 16px;
-  font-weight: 600;
-  color: #ff4d4f;
+.recordIconWrapperConsume .recordIcon {
+  color: #ff7a00; // 橙色图标
+}
+
+.recordIconWrapperRecharge .recordIcon {
+  color: #52c41a; // 绿色图标
+}
+
+.recordInfo {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.recordTitle {
+  font-size: 15px;
+  font-weight: 500;
   margin-bottom: 4px;
-}
-
-.recordPower {
-  font-size: 12px;
-  color: #666;
-}
-
-.recordDesc {
-  font-size: 13px;
-  color: #666;
-  margin-bottom: 6px;
+  line-height: 1.4;
+  color: #333; // 深灰色标题文字
 }
 
 .recordTime {
-  font-size: 12px;
+  font-size: 13px;
   color: #999;
+  line-height: 1.4;
 }
 
-.emptyRecords {
-  text-align: center;
-  padding: 60px 20px;
+.recordRight {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  padding-top: 19px; // 与时间戳对齐：标题高度(15px * 1.4) + margin-bottom(4px) ≈ 19px
+  margin-left: 16px; // 增加左右间距
 }
 
-.emptyIcon {
-  font-size: 64px;
-  margin-bottom: 16px;
+.recordPowerWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
 }
 
-.emptyText {
-  font-size: 14px;
+.recordPower {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.4; // 与时间戳行高一致
+}
+
+.recordPowerConsume {
+  color: #ff7a00; // 橙色 - 扣除
+}
+
+.recordPowerRecharge {
+  color: #52c41a; // 绿色 - 增加
+}
+
+.recordPowerUnit {
+  font-size: 13px;
   color: #999;
+  margin-top: 2px;
+  line-height: 1.4; // 与时间戳行高一致
 }
 
 .loadingContainer {
-  text-align: center;
-  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
 }
 
 .loadingText {
   font-size: 14px;
   color: #999;
+}
+
+.emptyRecords {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+}
+
+.emptyText {
+  font-size: 14px;
+  color: #999;
   margin-top: 12px;
 }
 
-.paginationWrap {
-  padding: 15px;
-  background: #fff;
+// 购买算力页面样式
+.buyPowerContent {
+  padding: 16px;
+}
+
+.packageCard {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  padding: 20px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.packageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.packageNameRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.packageName {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.discountTag {
+  background-color: #ff4d4f;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.packageTokensHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tokensIcon {
+  font-size: 24px;
+  color: #ffd700;
+}
+
+.tokensValue {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.tokensNumber {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.2;
+}
+
+.tokensUnit {
+  font-size: 13px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.packagePriceSection {
+  margin-bottom: 20px;
+}
+
+.priceRow {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.currentPrice {
+  font-size: 24px;
+  font-weight: 600;
+  color: #ff4d4f;
+}
+
+.originalPrice {
+  font-size: 14px;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.savings {
+  font-size: 14px;
+  color: #52c41a;
+  margin-bottom: 8px;
+}
+
+.unitPrice {
+  font-size: 13px;
+  color: #999;
+}
+
+.packageFeatures {
+  margin-bottom: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.featureItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #666;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.featureIcon {
+  font-size: 16px;
+  color: #52c41a;
+  flex-shrink: 0;
+}
+
+.buyButton {
+  margin-top: 8px;
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.buyButtonIcon {
+  font-size: 18px;
+}
+
+// 自定义算力包样式
+.customPackageCard {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  padding: 24px 20px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.customPackageHeader {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.customPackageIcon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  svg {
+    font-size: 32px;
+    color: #1677ff;
+  }
+}
+
+.customPackageTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.customPackageDesc {
+  font-size: 14px;
+  color: #999;
+}
+
+.quickSelectButtons {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.quickSelectBtn {
+  flex: 1;
+  height: 44px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #ffffff;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.quickSelectBtnActive {
+  border-color: #1677ff;
+  background-color: #e6f7ff;
+  color: #1677ff;
+}
+
+.customInputWrapper {
+  margin-bottom: 20px;
+}
+
+.customInput {
+  height: 44px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.customBuyButton {
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  background: linear-gradient(135deg, #722ed1 0%, #1677ff 100%);
+  border: none;
+  color: #ffffff;
+
+  &:disabled {
+    background: #d9d9d9;
+    color: #ffffff;
+  }
+}
+
+// 安全保障承诺样式
+.securityCard {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  padding: 20px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.securityHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.securityIcon {
+  font-size: 18px;
+  color: #52c41a;
+}
+
+.securityTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.securityList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.securityItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.securityItemIcon {
+  font-size: 16px;
+  color: #52c41a;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+// 购买记录页面样式
+.ordersContent {
+  padding: 16px;
+}
+
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+.searchIcon {
+  font-size: 18px;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+}
+
+.orderFilters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.orderList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.orderCard {
+  border-radius: 12px;
+  padding: 16px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.orderHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.orderTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  flex: 1;
+}
+
+.orderAmount {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1677ff;
+}
+
+.orderInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.orderLeft {
+  flex: 1;
+}
+
+.orderNumber {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.orderPayment {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #666;
+}
+
+.paymentIcon {
+  font-size: 14px;
+}
+
+.orderRight {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.orderStatus {
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.orderTime {
+  font-size: 13px;
+  color: #999;
+}
+
+// 算力分配页面样式
+.allocationContent {
+  padding: 16px;
+}
+
+.allocationFormCard {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  padding: 20px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.allocationFormHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.allocationFormIcon {
+  font-size: 20px;
+  color: #1677ff;
+}
+
+.allocationFormTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.allocationFormBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.formItem {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.formLabel {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.formInput {
+  height: 44px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.formInputIcon {
+  font-size: 12px;
+  color: #999;
+}
+
+.allocationConfirmButton {
+  margin-top: 8px;
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.allocationRecordsCard {
+  border-radius: 12px;
+  padding: 20px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+
+.allocationRecordsHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.allocationRecordsIcon {
+  font-size: 18px;
+  color: #ff7a00;
+}
+
+.allocationRecordsTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  flex: 1;
+}
+
+.allocationRecordsFilters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.allocationRecordsList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.allocationRecordItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.allocationRecordLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.allocationRecordIcon {
+  font-size: 20px;
+  color: #1677ff;
+  background-color: #e6f7ff;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.allocationRecordInfo {
+  flex: 1;
+}
+
+.allocationRecordName {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.allocationRecordTime {
+  font-size: 13px;
+  color: #999;
+}
+
+.allocationRecordAmount {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+// 支付弹框样式
+.paymentDialog {
+  padding: 20px;
+  background-color: #ffffff;
+}
+
+.paymentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.paymentTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.paymentClose {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+}
+
+.paymentProduct {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.paymentProductLeft {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+
+.paymentProductIcon {
+  font-size: 24px;
+  color: #1677ff;
+  margin-top: 4px;
+}
+
+.paymentProductInfo {
+  flex: 1;
+}
+
+.paymentProductName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.paymentProductTokens {
+  font-size: 14px;
+  color: #1677ff;
+  margin-bottom: 4px;
+}
+
+.paymentProductValid {
+  font-size: 13px;
+  color: #666;
+}
+
+.paymentProductRight {
+  text-align: right;
+}
+
+.paymentPrice {
+  font-size: 20px;
+  font-weight: 600;
+  color: #ff4d4f;
+  margin-bottom: 4px;
+}
+
+.paymentDiscount {
+  font-size: 12px;
+  color: #ff4d4f;
+  background-color: #fff1f0;
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.paymentMethods {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.paymentMethod {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.paymentMethodActive {
+  border-color: #1677ff;
+  background-color: #e6f7ff;
+}
+
+.paymentMethodIcon {
+  font-size: 20px;
+}
+
+.paymentQrCode {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.qrCodeImage {
+  width: 250px;
+  height: 250px;
+  margin: 0 auto 16px;
+  display: block;
+  border-radius: 8px;
+}
+
+.qrCodeHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 14px;
+  color: #666;
+}
+
+.qrCodeHintIcon {
+  font-size: 16px;
+  color: #52c41a;
+}
+
+.paymentInfo {
+  margin-bottom: 20px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.paymentInfoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 14px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.paymentInfoIcon {
+  font-size: 16px;
+  color: #1677ff;
+}
+
+.paymentInfoLabel {
+  color: #666;
+  flex: 1;
+}
+
+.paymentInfoValue {
+  color: #1677ff;
+  font-weight: 500;
+}
+
+.paymentOrderNo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.orderNoText {
+  color: #333;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.copyIcon {
+  font-size: 16px;
+  color: #1677ff;
+  cursor: pointer;
+}
+
+.completePaymentButton {
+  margin-bottom: 20px;
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.completePaymentIcon {
+  font-size: 18px;
+}
+
+.paymentInstructions {
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.paymentInstructionsTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.instructionsIcon {
+  font-size: 16px;
+  color: #faad14;
+}
+
+.paymentInstructionsList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.instructionItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.instructionIcon {
+  font-size: 14px;
+  color: #52c41a;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+// 支付成功弹框样式
+.paymentSuccessDialog {
+  padding: 20px;
+  background-color: #ffffff;
+}
+
+.paymentSuccessHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.paymentSuccessTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.paymentSuccessClose {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+}
+
+.paymentSuccessIcon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #f6ffed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+
+  svg {
+    font-size: 48px;
+    color: #52c41a;
+  }
+}
+
+.paymentSuccessText {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.paymentSuccessDesc {
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.paymentSuccessProduct {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.paymentSuccessProductLeft {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+
+.paymentSuccessProductIcon {
+  font-size: 24px;
+  color: #1677ff;
+  margin-top: 4px;
+}
+
+.paymentSuccessProductInfo {
+  flex: 1;
+}
+
+.paymentSuccessProductName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.paymentSuccessProductTokens {
+  font-size: 14px;
+  color: #1677ff;
+}
+
+.paymentSuccessProductRight {
+  text-align: right;
+}
+
+.paymentSuccessPrice {
+  font-size: 18px;
+  font-weight: 600;
+  color: #ff4d4f;
+  margin-bottom: 8px;
+}
+
+.paymentSuccessPayType {
+  font-size: 13px;
+  color: #666;
+}
+
+.paymentSuccessInfo {
+  margin-bottom: 24px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.paymentSuccessInfoItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.paymentSuccessInfoLabel {
+  color: #666;
+}
+
+.paymentSuccessInfoValue {
+  color: #333;
+  font-weight: 500;
+}
+
+.paymentSuccessOrderNo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.successOrderNoText {
+  color: #333;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.successCopyIcon {
+  font-size: 16px;
+  color: #1677ff;
+  cursor: pointer;
+}
+
+.paymentSuccessButton {
+  height: 48px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
index 3f52a632..26db1844 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx
@@ -1,136 +1,226 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Card, Button, Toast, Tabs, Tag, Picker } from "antd-mobile";
+import { Card, Toast, Picker } from "antd-mobile";
 import style from "./index.module.scss";
 import {
-  SyncOutlined,
-  ShoppingCartOutlined,
-  HistoryOutlined,
+  ThunderboltOutlined,
   LineChartOutlined,
+  BarChartOutlined,
+  HistoryOutlined,
+  CalendarOutlined,
   DownOutlined,
+  CheckCircleOutlined,
+  SafetyOutlined,
+  AimOutlined,
+  SearchOutlined,
+  WechatOutlined,
+  AlipayCircleOutlined,
+  DesktopOutlined,
+  UserOutlined,
+  CloseOutlined,
+  ClockCircleOutlined,
+  CopyOutlined,
+  CheckOutlined,
+  ExclamationCircleOutlined,
 } from "@ant-design/icons";
+import { Button, Dialog, Input, Popup } from "antd-mobile";
 import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
-import { getStatistics, getOrderList } from "./api";
+import { getStatistics, getOrderList, queryOrder, getAccountList } from "./api";
+import type { QueryOrderResponse, Account } from "./api";
+import { getTokensUseRecord } from "../usage-records/api";
+import { getTaocanList, buyPackage } from "../buy-power/api";
 import type { Statistics, OrderList } from "./api";
-import { Pagination } from "antd";
+import type { TokensUseRecordItem } from "../usage-records/api";
+import type { PowerPackage } from "../buy-power/api";
 
-type TagColor = NonNullable<React.ComponentProps<typeof Tag>["color"]>;
-
-type GoodsSpecs =
-  | {
-      id: number;
-      name: string;
-      price: number;
-      tokens: number;
-    }
-  | undefined;
-
-const parseGoodsSpecs = (value: OrderList["goodsSpecs"]): GoodsSpecs => {
-  if (!value) return undefined;
-  if (typeof value === "string") {
-    try {
-      return JSON.parse(value);
-    } catch (error) {
-      console.warn("解析 goodsSpecs 失败:", error, value);
-      return undefined;
-    }
-  }
-  return value;
-};
-
-const formatTimestamp = (value?: number | string | null) => {
+// 格式化日期时间：2025/2/22 17:02
+const formatDateTime = (value?: string | number | null) => {
   if (value === undefined || value === null) return "";
   if (typeof value === "string" && value.trim() === "") return "";
 
-  const numericValue =
-    typeof value === "number" ? value : Number.parseFloat(value);
-
-  if (Number.isNaN(numericValue)) {
-    return String(value);
+  let date: Date;
+  if (typeof value === "string") {
+    date = new Date(value);
+  } else {
+    const numericValue = Number(value);
+    if (Number.isNaN(numericValue)) {
+      return String(value);
+    }
+    const timestamp =
+      numericValue > 1e12
+        ? numericValue
+        : numericValue > 1e10
+          ? numericValue
+          : numericValue * 1000;
+    date = new Date(timestamp);
   }
 
-  const timestamp =
-    numericValue > 1e12
-      ? numericValue
-      : numericValue > 1e10
-        ? numericValue
-        : numericValue * 1000;
-
-  const date = new Date(timestamp);
   if (Number.isNaN(date.getTime())) {
     return String(value);
   }
-  return date.toLocaleString("zh-CN", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
+
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = String(date.getHours()).padStart(2, "0");
+  const minute = String(date.getMinutes()).padStart(2, "0");
+
+  return `${year}/${month}/${day} ${hour}:${minute}`;
 };
 
-const centsToYuan = (value?: number | string | null) => {
-  if (value === undefined || value === null) return 0;
-  if (typeof value === "string" && value.trim() === "") return 0;
+// 格式化数值，超过1000用K，超过10000用W，保留1位小数
+const formatNumber = (value: number | undefined): string => {
+  if (value === undefined || value === null) return "0";
   const num = Number(value);
-  if (!Number.isFinite(num)) return 0;
-  if (Number.isInteger(num)) {
-    return num / 100;
+  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 num;
+  return num.toFixed(1);
+};
+
+// 类型映射：form字段到显示名称（数据库字段映射）
+const formLabelMap: Record<number, string> = {
+  0: "未知",
+  1: "点赞",
+  2: "朋友圈同步",
+  3: "朋友圈发布",
+  4: "群发微信",
+  5: "群发群消息",
+  6: "群发群公告",
+  7: "海报获客",
+  8: "订单获客",
+  9: "电话获客",
+  10: "微信群获客",
+  11: "API获客",
+  12: "AI改写",
+  13: "AI客服",
+  14: "生成群公告",
+  1001: "商家",
+  1002: "充值",
+  1003: "系统",
+};
+
+// 根据form字段获取类型名称，优先显示remarks
+const getRecordTitle = (item: TokensUseRecordItem): string => {
+  // 优先显示remarks，如果没有则显示类型名称
+  if (item.remarks && item.remarks.trim()) {
+    return item.remarks;
+  }
+  return formLabelMap[item.form] || "使用记录";
 };
 
 const PowerManagement: React.FC = () => {
-  const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState("overview");
+  const [activeTab, setActiveTab] = useState("details"); // details, buy, orders, allocation
   const [loading, setLoading] = useState(false);
   const [stats, setStats] = useState<Statistics | null>(null);
-  const [records, setRecords] = useState<OrderList[]>([]);
+  const [records, setRecords] = useState<TokensUseRecordItem[]>([]);
+  const [packages, setPackages] = useState<PowerPackage[]>([]);
+  const [buyLoading, setBuyLoading] = useState(false);
+  const [customAmount, setCustomAmount] = useState<string>("");
+  const [selectedQuickAmount, setSelectedQuickAmount] = useState<number | null>(null);
+  const [orders, setOrders] = useState<OrderList[]>([]);
+  const [orderKeyword, setOrderKeyword] = useState<string>("");
+  const [orderStatus, setOrderStatus] = useState<string>("all");
+  const [orderTime, setOrderTime] = useState<string>("7days");
+  const [orderPayType, setOrderPayType] = useState<string>("all");
+  const [orderStatusVisible, setOrderStatusVisible] = useState(false);
+  const [orderTimeVisible, setOrderTimeVisible] = useState(false);
+  const [orderPayTypeVisible, setOrderPayTypeVisible] = useState(false);
+  const [allocationAccount, setAllocationAccount] = useState<Account | null>(null);
+  const [allocationAmount, setAllocationAmount] = useState<string>("");
+  const [allocationAccountVisible, setAllocationAccountVisible] = useState(false);
+  const [allocationRecords, setAllocationRecords] = useState<any[]>([]);
+  const [allocationAccountFilter, setAllocationAccountFilter] = useState<string>("all");
+  const [allocationTimeFilter, setAllocationTimeFilter] = useState<string>("7days");
+  const [allocationAccountFilterVisible, setAllocationAccountFilterVisible] = useState(false);
+  const [allocationTimeFilterVisible, setAllocationTimeFilterVisible] = useState(false);
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [paymentDialogVisible, setPaymentDialogVisible] = useState(false);
+  const [paymentData, setPaymentData] = useState<{
+    packageName: string;
+    tokens: string;
+    price: number;
+    originalPrice?: number;
+    discount?: number;
+    codeUrl: string;
+    orderNo: string;
+    payType: number; // 1: 微信, 2: 支付宝
+  } | null>(null);
+  const [countdown, setCountdown] = useState(300); // 5分钟倒计时（秒）
+  const [expireTime, setExpireTime] = useState<Date | null>(null);
+  const [paymentSuccessVisible, setPaymentSuccessVisible] = useState(false);
+  const [paymentSuccessData, setPaymentSuccessData] = useState<QueryOrderResponse | null>(null);
+  const [pollingTimer, setPollingTimer] = useState<NodeJS.Timeout | null>(null);
+
+  // 筛选器状态
   const [filterType, setFilterType] = useState<string>("all");
-  const [filterStatus, setFilterStatus] = useState<string>("all");
+  const [filterAction, setFilterAction] = useState<string>("all");
+  const [filterTime, setFilterTime] = useState<string>("all");
   const [filterTypeVisible, setFilterTypeVisible] = useState(false);
-  const [filterStatusVisible, setFilterStatusVisible] = useState(false);
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(10);
-  const [total, setTotal] = useState(0);
+  const [filterActionVisible, setFilterActionVisible] = useState(false);
+  const [filterTimeVisible, setFilterTimeVisible] = useState(false);
 
   const typeOptions = [
     { label: "全部类型", value: "all" },
-    { label: "AI分析", value: "ai_analysis" },
-    { label: "内容生成", value: "content_gen" },
-    { label: "数据训练", value: "data_train" },
-    { label: "智能推荐", value: "smart_rec" },
-    { label: "语音识别", value: "voice_rec" },
+    { label: "点赞", value: "1" },
+    { label: "朋友圈同步", value: "2" },
+    { label: "朋友圈发布", value: "3" },
+    { label: "群发微信", value: "4" },
+    { label: "群发群消息", value: "5" },
+    { label: "群发群公告", value: "6" },
+    { label: "海报获客", value: "7" },
+    { label: "订单获客", value: "8" },
+    { label: "电话获客", value: "9" },
+    { label: "微信群获客", value: "10" },
+    { label: "API获客", value: "11" },
+    { label: "AI改写", value: "12" },
+    { label: "AI客服", value: "13" },
+    { label: "生成群公告", value: "14" },
   ];
 
-  const statusOptions = [
-    { label: "全部状态", value: "all" },
-    { label: "待支付", value: "pending", requestValue: "0" },
-    { label: "已支付", value: "paid", requestValue: "1" },
-    { label: "已取消", value: "cancelled", requestValue: "2" },
-    { label: "已退款", value: "refunded", requestValue: "3" },
+  const actionOptions = [
+    { label: "全部行为", value: "all" },
+    { label: "消耗", value: "consume" },
+    { label: "充值", value: "recharge" },
   ];
 
-  const statusMeta: Record<number, { label: string; color: TagColor }> = {
-    0: { label: "待支付", color: "warning" },
-    1: { label: "已支付", color: "success" },
-    2: { label: "已取消", color: "default" },
-    3: { label: "已退款", color: "primary" },
-  };
+  const timeOptions = [
+    { label: "最近7天", value: "7days" },
+    { label: "最近30天", value: "30days" },
+    { label: "最近90天", value: "90days" },
+    { label: "全部时间", value: "all" },
+  ];
+
+  // 导航标签数据
+  const navTabs = [
+    { key: "details", label: "算力明细" },
+    { key: "buy", label: "购买算力" },
+    { key: "orders", label: "购买记录" },
+    { key: "allocation", label: "算力分配" },
+  ];
 
   useEffect(() => {
     fetchStats();
   }, []);
 
   useEffect(() => {
-    if (activeTab === "records") {
-      setPage(1);
-      fetchRecords(1);
+    if (activeTab === "details") {
+      fetchRecords();
+    } else if (activeTab === "buy") {
+      fetchPackages();
+    } else if (activeTab === "orders") {
+      fetchOrders();
+    } else if (activeTab === "allocation") {
+      fetchAccounts();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, filterType, filterStatus]);
+  }, [activeTab, filterType, filterAction, filterTime, orderStatus, orderTime, orderPayType]);
 
   const fetchStats = async () => {
     try {
@@ -142,303 +232,1455 @@ const PowerManagement: React.FC = () => {
     }
   };
 
-  const fetchRecords = async (customPage?: number) => {
+  const fetchRecords = async () => {
     setLoading(true);
     try {
-      const reqPage = customPage !== undefined ? customPage : page;
-      const statusRequestValue = statusOptions.find(
-        opt => opt.value === filterStatus,
-      )?.requestValue;
-      const res = await getOrderList({
-        page: String(reqPage),
-        limit: String(pageSize),
-        orderType: "1",
-        status: statusRequestValue,
-      });
-      setRecords(res.list || []);
-      setTotal(Number(res.total || 0));
+      // 根据筛选条件构建参数
+      const params: any = {
+        page: "1",
+        limit: "50", // 显示更多记录
+        type: filterAction === "consume" ? "0" : filterAction === "recharge" ? "1" : undefined,
+      };
+
+      // 类型筛选：根据form字段筛选
+      if (filterType !== "all") {
+        params.form = filterType;
+      }
+
+      // 时间筛选（转换为 startTime 和 endTime，只保留日期）
+      if (filterTime !== "all") {
+        const now = new Date();
+        const daysMap: Record<string, number> = {
+          "7days": 7,
+          "30days": 30,
+          "90days": 90,
+        };
+        const days = daysMap[filterTime] || 7;
+        const startTime = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+        params.startTime = startTime.toISOString().slice(0, 10); // YYYY-MM-DD
+        params.endTime = now.toISOString().slice(0, 10); // YYYY-MM-DD
+      }
+
+      const res = await getTokensUseRecord(params);
+      console.log("接口返回数据:", res);
+
+      // 处理返回数据：request拦截器会返回 res.data.data，所以直接使用 res.list
+      let list = Array.isArray(res?.list) ? res.list : [];
+      console.log("处理后的列表:", list, "列表长度:", list.length);
+
+      console.log("最终列表:", list);
+      setRecords(list);
     } catch (error) {
-      console.error("获取订单记录失败:", error);
-      Toast.show({ content: "获取订单记录失败", position: "top" });
+      console.error("获取使用记录失败:", error);
+      Toast.show({ content: "获取使用记录失败", position: "top" });
     } finally {
       setLoading(false);
     }
   };
 
-  const handleRefresh = () => {
-    if (loading) return;
-    fetchStats();
-    if (activeTab === "records") {
-      fetchRecords();
+  const fetchPackages = async () => {
+    setLoading(true);
+    try {
+      const res = await getTaocanList();
+      setPackages(res.list || []);
+    } catch (error) {
+      console.error("获取套餐列表失败:", error);
+      Toast.show({ content: "获取套餐列表失败", position: "top" });
+    } finally {
+      setLoading(false);
     }
   };
 
-  const handleBuyPower = () => {
-    navigate("/recharge/buy-power");
-  };
+  const fetchOrders = async () => {
+    setLoading(true);
+    try {
+      const params: any = {
+        page: "1",
+        limit: "50",
+        orderType: "1", // 算力充值
+      };
 
-  const handleViewRecords = () => {
-    navigate("/recharge/usage-records");
-  };
+      // 关键词搜索（订单号）
+      if (orderKeyword) {
+        params.keyword = orderKeyword;
+      }
 
-  const getTypeLabel = () => {
-    return (
-      typeOptions.find(opt => opt.value === filterType)?.label || "全部类型"
-    );
-  };
+      // 订单状态筛选
+      if (orderStatus !== "all") {
+        params.status = orderStatus;
+      }
 
-  const getStatusLabel = () => {
-    return (
-      statusOptions.find(opt => opt.value === filterStatus)?.label || "全部状态"
-    );
-  };
+      // 支付方式筛选
+      if (orderPayType !== "all") {
+        params.payType = orderPayType;
+      }
 
-  // 格式化数值：超过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";
+      // 时间筛选（转换为 startTime 和 endTime，只保留日期）
+      if (orderTime !== "all") {
+        const now = new Date();
+        const daysMap: Record<string, number> = {
+          "7days": 7,
+          "30days": 30,
+          "90days": 90,
+        };
+        const days = daysMap[orderTime] || 7;
+        const startTime = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+        params.startTime = startTime.toISOString().slice(0, 10); // YYYY-MM-DD
+        params.endTime = now.toISOString().slice(0, 10); // YYYY-MM-DD
+      }
 
-    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`;
+      const res = await getOrderList(params);
+      const list = res.list || [];
+      setOrders(list);
+    } catch (error) {
+      console.error("获取订单列表失败:", error);
+      Toast.show({ content: "获取订单列表失败", position: "top" });
+    } finally {
+      setLoading(false);
     }
-    return String(num);
   };
 
-  // 渲染概览Tab
-  const renderOverview = () => (
-    <div className={style.overviewContent}>
-      {/* 账户信息卡片 */}
-      <div className={style.accountCards}>
-        <Card className={style.powerCard}>
-          <div className={style.cardContent}>
-            <div className={style.iconWrapper}>
-              <LineChartOutlined className={style.cardIcon} />
-            </div>
-            <div className={style.textWrapper}>
-              <div className={style.cardTitle}>总算力</div>
-              <div className={style.cardValue}>
-                {formatNumber(stats?.totalTokens)}
-              </div>
-            </div>
-          </div>
-        </Card>
-      </div>
+  const handleBuyPackage = async (pkg: PowerPackage) => {
+    setBuyLoading(true);
+    try {
+      const res = await buyPackage({
+        id: pkg.id,
+        price: pkg.price,
+      });
 
-      {/* 使用情况卡片 */}
-      <Card className={style.usageCard}>
-        <div className={style.usageTitle}>使用情况</div>
-        <div className={style.usageStats}>
-          <div className={style.usageItem}>
-            <div className={`${style.usageValue} ${style.valueGreen}`}>
-              {formatNumber(stats?.todayUsed)}
-            </div>
-            <div className={style.usageLabel}>今日使用</div>
-          </div>
-          <div className={style.usageItem}>
-            <div className={`${style.usageValue} ${style.valueBlue}`}>
-              {formatNumber(stats?.monthUsed)}
-            </div>
-            <div className={style.usageLabel}>本月使用</div>
-          </div>
-          <div className={style.usageItem}>
-            <div className={`${style.usageValue} ${style.valuePurple}`}>
-              {formatNumber(stats?.remainingTokens)}
-            </div>
-            <div className={style.usageLabel}>剩余算力</div>
-          </div>
-        </div>
-      </Card>
+      if (res?.code_url) {
+        // 显示新版支付弹框
+        const tokensValue = formatTokens(pkg.tokens);
+        const savings = getSavings(pkg);
+        const discount = savings > 0 && pkg.originalPrice
+          ? Math.round((savings / pkg.originalPrice) * 100)
+          : pkg.discount || 0;
 
-      {/* 快速操作 */}
-      <Card className={style.actionCard}>
-        <div className={style.actionTitle}>快速操作</div>
-        <div className={style.actionButtons}>
-          <Button className={style.buyButton} onClick={handleBuyPower} block>
-            <ShoppingCartOutlined className={style.buttonIcon} />
-            &nbsp; 购买算力包
-          </Button>
-          <Button
-            className={style.recordButton}
-            onClick={handleViewRecords}
-            block
-          >
-            <HistoryOutlined className={style.buttonIcon} />
-            &nbsp; 使用记录
-          </Button>
-        </div>
-      </Card>
-    </div>
-  );
+        setPaymentData({
+          packageName: pkg.name,
+          tokens: tokensValue,
+          price: pkg.price / 100,
+          originalPrice: pkg.originalPrice ? pkg.originalPrice / 100 : undefined,
+          discount: discount,
+          codeUrl: res.code_url,
+          orderNo: res.orderNo || res.order_no || `ORDER${Date.now()}`,
+          payType: 1, // 默认微信支付
+        });
+        setCountdown(300); // 5分钟倒计时
+        const expire = new Date();
+        expire.setMinutes(expire.getMinutes() + 5);
+        setExpireTime(expire);
+        setPaymentDialogVisible(true);
+      }
+    } catch (error) {
+      console.error("购买失败:", error);
+      Toast.show({ content: "购买失败，请重试", position: "top" });
+    } finally {
+      setBuyLoading(false);
+    }
+  };
 
-  // 渲染订单记录Tab
-  const renderRecords = () => (
-    <div className={style.recordsContent}>
-      {/* 筛选器 */}
-      <div className={style.filters}>
-        <Picker
-          columns={[typeOptions]}
-          visible={filterTypeVisible}
-          onClose={() => setFilterTypeVisible(false)}
-          value={[filterType]}
-          onConfirm={value => {
-            setFilterType(value[0] as string);
-            setFilterTypeVisible(false);
-          }}
-        >
-          {() => (
-            <div
-              className={style.filterButton}
-              onClick={() => setFilterTypeVisible(true)}
-            >
-              <DownOutlined className={style.filterIcon} />
-              {getTypeLabel()}
-            </div>
-          )}
-        </Picker>
+  // 格式化算力值
+  const formatTokens = (tokens: number | string): string => {
+    if (typeof tokens === "string") {
+      return tokens;
+    }
+    return tokens.toLocaleString();
+  };
 
-        <Picker
-          columns={[statusOptions]}
-          visible={filterStatusVisible}
-          onClose={() => setFilterStatusVisible(false)}
-          value={[filterStatus]}
-          onConfirm={value => {
-            setFilterStatus(value[0] as string);
-            setFilterStatusVisible(false);
-          }}
-        >
-          {() => (
-            <div
-              className={style.filterButton}
-              onClick={() => setFilterStatusVisible(true)}
-            >
-              <DownOutlined className={style.filterIcon} />
-              {getStatusLabel()}
-            </div>
-          )}
-        </Picker>
-      </div>
+  // 计算节省金额
+  const getSavings = (pkg: PowerPackage): number => {
+    if (pkg.originalPrice && pkg.originalPrice > pkg.price) {
+      return pkg.originalPrice - pkg.price;
+    }
+    return 0;
+  };
 
-      {/* 订单记录列表 */}
-      <div className={style.recordList}>
-        {loading && records.length === 0 ? (
-          <div className={style.loadingContainer}>
-            <div className={style.loadingText}>加载中...</div>
-          </div>
-        ) : records.length > 0 ? (
-          records.map(record => {
-            const statusCode =
-              record.status !== undefined ? Number(record.status) : undefined;
-            const tagColor =
-              statusCode !== undefined
-                ? statusMeta[statusCode]?.color || "default"
-                : "default";
-            const tagLabel =
-              record.statusText ||
-              (statusCode !== undefined
-                ? statusMeta[statusCode]?.label || "未知状态"
-                : "未知状态");
-            const goodsSpecs = parseGoodsSpecs(record.goodsSpecs);
-            const amount = centsToYuan(record.money);
-            const powerValue = Number(goodsSpecs?.tokens ?? record.tokens ?? 0);
-            const power = Number.isNaN(powerValue) ? 0 : powerValue;
-            const description =
-              record.orderTypeText ||
-              goodsSpecs?.name ||
-              record.goodsName ||
-              "";
-            const createTime = formatTimestamp(record.createTime);
+  // 处理快速选择金额
+  const handleQuickSelect = (amount: number) => {
+    setSelectedQuickAmount(amount);
+    setCustomAmount(amount.toString());
+  };
 
-            return (
-              <Card
-                key={record.id ?? record.orderNo}
-                className={style.recordItem}
-                onClick={() =>
-                  record.orderNo &&
-                  navigate(`/recharge/order/${record.orderNo}`)
-                }
-              >
-                <div className={style.recordHeader}>
-                  <div className={style.recordLeft}>
-                    <div className={style.recordType}>
-                      {record.goodsName || "算力充值"}
-                    </div>
-                    <Tag color={tagColor} className={style.recordStatus}>
-                      {tagLabel}
-                    </Tag>
-                  </div>
-                  <div className={style.recordRight}>
-                    <div className={style.recordAmount}>
-                      -¥{amount.toFixed(2)}
-                    </div>
-                    <div className={style.recordPower}>
-                      {formatNumber(power)} 算力
-                    </div>
-                  </div>
-                </div>
-                <div className={style.recordDesc}>{description}</div>
-                <div className={style.recordTime}>{createTime}</div>
-              </Card>
-            );
-          })
-        ) : (
-          <div className={style.emptyRecords}>
-            <div className={style.emptyIcon}>📋</div>
-            <div className={style.emptyText}>暂无订单记录</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+  // 处理自定义金额输入（只允许整数）
+  const handleCustomAmountChange = (value: string) => {
+    // 只允许输入数字，自动去除小数点
+    const intValue = value.replace(/[^\d]/g, '');
+    setCustomAmount(intValue);
+    setSelectedQuickAmount(null);
+  };
+
+  // 购买自定义金额
+  const handleBuyCustom = async () => {
+    if (!customAmount || !customAmount.trim()) {
+      Toast.show({ content: "请输入购买金额", position: "top" });
+      return;
+    }
+
+    const amount = parseInt(customAmount);
+    if (isNaN(amount) || amount < 1) {
+      Toast.show({ content: "请输入有效的金额1元", position: "top" });
+      return;
+    }
+
+    setBuyLoading(true);
+    try {
+      // 使用自定义购买接口，传入金额（元）
+      const res = await buyPackage({
+        price: amount, // 金额传元，不是分
+      });
+
+      if (res?.code_url) {
+        // 显示新版支付弹框
+        setPaymentData({
+          packageName: "自定义购买算力",
+          tokens: "待计算", // 自定义购买时算力点数由后端返回
+          price: amount,
+          codeUrl: res.code_url,
+          orderNo: res.orderNo || res.order_no || `CUSTOM${Date.now()}`,
+          payType: 1, // 默认微信支付
+        });
+        setCountdown(300); // 5分钟倒计时
+        const expire = new Date();
+        expire.setMinutes(expire.getMinutes() + 5);
+        setExpireTime(expire);
+        setPaymentDialogVisible(true);
+      }
+    } catch (error) {
+      console.error("购买失败:", error);
+      Toast.show({ content: "购买失败，请重试", position: "top" });
+    } finally {
+      setBuyLoading(false);
+    }
+  };
+
+  // 计算使用率
+  const getUsageRate = (): number => {
+    if (!stats || !stats.totalTokens || stats.totalTokens === 0) return 0;
+    const used = stats.totalTokens - stats.remainingTokens;
+    return Math.round((used / stats.totalTokens) * 100);
+  };
+
+  // 获取预计可用天数（直接使用接口返回的字段）
+  const getEstimatedDays = (): number => {
+    return stats?.estimatedDays || 0;
+  };
+
+  const getTypeLabel = () =>
+    typeOptions.find(opt => opt.value === filterType)?.label || "全部";
+  const getActionLabel = () =>
+    actionOptions.find(opt => opt.value === filterAction)?.label || "全部";
+  const getTimeLabel = () =>
+    timeOptions.find(opt => opt.value === filterTime)?.label || "最近7天";
+
+  // 订单筛选选项
+  const orderStatusOptions = [
+    { label: "全部状态", value: "all" },
+    { label: "待支付", value: "0" },
+    { label: "已支付", value: "1" },
+    { label: "已取消", value: "2" },
+    { label: "已退款", value: "3" },
+  ];
+
+  const orderTimeOptions = [
+    { label: "最近7天", value: "7days" },
+    { label: "最近30天", value: "30days" },
+    { label: "最近90天", value: "90days" },
+    { label: "全部", value: "all" },
+  ];
+
+  const orderPayTypeOptions = [
+    { label: "全部方式", value: "all" },
+    { label: "微信支付", value: "1" },
+    { label: "支付宝", value: "2" },
+  ];
+
+  const getOrderStatusLabel = () =>
+    orderStatusOptions.find(opt => opt.value === orderStatus)?.label || "全部状态";
+  const getOrderTimeLabel = () =>
+    orderTimeOptions.find(opt => opt.value === orderTime)?.label || "最近7天";
+  const getOrderPayTypeLabel = () =>
+    orderPayTypeOptions.find(opt => opt.value === orderPayType)?.label || "全部方式";
+
+  // 获取支付方式文本
+  const getPayTypeText = (payType?: number): string => {
+    switch (payType) {
+      case 1:
+        return "微信支付";
+      case 2:
+        return "支付宝支付";
+      default:
+        return "未知";
+    }
+  };
+
+  // 获取状态文本和样式
+  const getOrderStatusInfo = (status?: number) => {
+    switch (status) {
+      case 0:
+        return { text: "待支付", color: "#faad14", bgColor: "#fffbe6" };
+      case 1:
+        return { text: "已支付", color: "#52c41a", bgColor: "#f6ffed" };
+      case 2:
+        return { text: "已取消", color: "#999999", bgColor: "#f5f5f5" };
+      case 3:
+        return { text: "已退款", color: "#1890ff", bgColor: "#e6f7ff" };
+      default:
+        return { text: "未知", color: "#666", bgColor: "#f5f5f5" };
+    }
+  };
+
+  // 获取账号列表
+  const fetchAccounts = async () => {
+    try {
+      const res = await getAccountList();
+      setAccounts(res.list || []);
+    } catch (error) {
+      console.error("获取账号列表失败:", error);
+      Toast.show({ content: "获取账号列表失败", position: "top" });
+    }
+  };
+
+  // 获取账号显示名称
+  const getAccountDisplayName = (account: Account) => {
+    const parts: string[] = [];
+    if (account.realName) {
+      parts.push(account.realName);
+    }
+    if (account.userName) {
+      parts.push(account.userName);
+    }
+    if (parts.length > 0) {
+      return parts.join(" - ");
+    }
+    return account.nickname || `账号${account.id}`;
+  };
+
+  // 获取分配记录
+  const fetchAllocationRecords = async () => {
+    // TODO: 实现真实的分配记录接口
+    setAllocationRecords([]);
+  };
+
+  // 处理确认分配
+  const handleConfirmAllocation = () => {
+    if (!allocationAccount) {
+      Toast.show({ content: "请选择账号", position: "top" });
+      return;
+    }
+    if (!allocationAmount || !allocationAmount.trim()) {
+      Toast.show({ content: "请输入分配算力数量", position: "top" });
+      return;
+    }
+    const amount = parseInt(allocationAmount);
+    if (isNaN(amount) || amount <= 0) {
+      Toast.show({ content: "请输入有效的算力数量", position: "top" });
+      return;
+    }
+
+    // TODO: 调用真实的分配接口
+    Toast.show({ content: "分配成功", position: "top" });
+    setAllocationAccount(null);
+    setAllocationAmount("");
+    // 重新加载记录
+    fetchAllocationRecords();
+  };
+
+  // 分配记录筛选选项
+  const allocationAccountOptions = [
+    { label: "全部账号", value: "all" },
+    ...accounts.map(acc => ({ label: getAccountDisplayName(acc), value: acc.id.toString() })),
+  ];
+
+  const allocationTimeOptions = [
+    { label: "最近7天", value: "7days" },
+    { label: "最近30天", value: "30days" },
+    { label: "最近90天", value: "90days" },
+    { label: "全部", value: "all" },
+  ];
+
+  // 倒计时效果
+  useEffect(() => {
+    if (paymentDialogVisible && countdown > 0) {
+      const timer = setInterval(() => {
+        setCountdown(prev => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      return () => clearInterval(timer);
+    }
+  }, [paymentDialogVisible, countdown]);
+
+  // 格式化倒计时时间
+  const formatCountdown = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+  };
+
+  // 格式化过期时间
+  const formatExpireTime = (date: Date | null): string => {
+    if (!date) return "";
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hour = String(date.getHours()).padStart(2, "0");
+    const minute = String(date.getMinutes()).padStart(2, "0");
+    return `${month}/${day} ${hour}:${minute}`;
+  };
+
+  // 复制订单号
+  const handleCopyOrderNo = async () => {
+    if (!paymentData?.orderNo) return;
+    try {
+      await navigator.clipboard.writeText(paymentData.orderNo);
+      Toast.show({ content: "订单号已复制", position: "top" });
+    } catch (error) {
+      // 降级方案
+      const textarea = document.createElement("textarea");
+      textarea.value = paymentData.orderNo;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      Toast.show({ content: "订单号已复制", position: "top" });
+    }
+  };
+
+  // 切换支付方式
+  const handleChangePayType = (payType: number) => {
+    if (paymentData) {
+      setPaymentData({ ...paymentData, payType });
+      // TODO: 根据支付方式重新获取二维码
+    }
+  };
+
+  // 查询订单状态（轮询）
+  const pollOrderStatus = async (orderNo: string) => {
+    try {
+      const res = await queryOrder(orderNo);
+      if (res.status === 1) {
+        // 订单已支付，显示支付成功弹框
+        setPaymentSuccessData(res);
+        setPaymentSuccessVisible(true);
+        setPaymentDialogVisible(false);
+        // 清除轮询
+        if (pollingTimer) {
+          clearInterval(pollingTimer);
+          setPollingTimer(null);
+        }
+        // 刷新统计数据
+        fetchStats();
+        // 刷新订单列表
+        if (activeTab === "orders") {
+          fetchOrders();
+        }
+      }
+    } catch (error) {
+      console.error("查询订单状态失败:", error);
+    }
+  };
+
+  // 开始轮询订单状态
+  useEffect(() => {
+    if (paymentDialogVisible && paymentData?.orderNo) {
+      // 立即查询一次
+      pollOrderStatus(paymentData.orderNo);
+      // 每3秒轮询一次
+      const timer = setInterval(() => {
+        pollOrderStatus(paymentData.orderNo);
+      }, 3000);
+      setPollingTimer(timer);
+      return () => {
+        clearInterval(timer);
+        setPollingTimer(null);
+      };
+    } else {
+      // 关闭支付弹框时清除轮询
+      if (pollingTimer) {
+        clearInterval(pollingTimer);
+        setPollingTimer(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paymentDialogVisible, paymentData?.orderNo]);
+
+  // 完成支付
+  const handleCompletePayment = () => {
+    // 手动触发一次查询
+    if (paymentData?.orderNo) {
+      pollOrderStatus(paymentData.orderNo);
+    }
+  };
+
+  // 关闭支付成功弹框
+  const handleClosePaymentSuccess = () => {
+    setPaymentSuccessVisible(false);
+    setPaymentSuccessData(null);
+  };
+
+  // 格式化支付时间
+  const formatPayTime = (timestamp: number | null): string => {
+    if (!timestamp) return "";
+    const date = new Date(timestamp * 1000);
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hour = String(date.getHours()).padStart(2, "0");
+    const minute = String(date.getMinutes()).padStart(2, "0");
+    return `${month}/${day} ${hour}:${minute}`;
+  };
+
+  // 解析商品规格
+  const parseGoodsSpecs = (specs: string) => {
+    try {
+      const parsed = typeof specs === "string" ? JSON.parse(specs) : specs;
+      return parsed;
+    } catch {
+      return null;
+    }
+  };
+
+  // 复制支付成功弹框的订单号
+  const handleCopySuccessOrderNo = async () => {
+    if (!paymentSuccessData?.orderNo) return;
+    try {
+      await navigator.clipboard.writeText(paymentSuccessData.orderNo);
+      Toast.show({ content: "订单号已复制", position: "top" });
+    } catch (error) {
+      const textarea = document.createElement("textarea");
+      textarea.value = paymentSuccessData.orderNo;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      Toast.show({ content: "订单号已复制", position: "top" });
+    }
+  };
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    // 移除导航逻辑，只切换tab
+  };
 
   return (
     <Layout
-      loading={loading}
-      header={
-        <>
-          <NavCommon
-            title="算力管理"
-            right={
-              <div className={style.refreshBtn} onClick={handleRefresh}>
-                <SyncOutlined spin={loading} />
-              </div>
-            }
-          />
-          <Tabs
-            activeKey={activeTab}
-            onChange={setActiveTab}
-            className={style.powerTabs}
-          >
-            <Tabs.Tab title="概览" key="overview" />
-            <Tabs.Tab title="订单记录" key="records" />
-          </Tabs>
-        </>
-      }
-      footer={
-        activeTab === "records" && records.length > 0 ? (
-          <div className={style.paginationWrap}>
-            <Pagination
-              current={page}
-              pageSize={pageSize}
-              total={total}
-              showSizeChanger={false}
-              onChange={p => {
-                setPage(p);
-                fetchRecords(p);
-              }}
-            />
-          </div>
-        ) : null
-      }
+      loading={loading && !stats}
+      header={<NavCommon title="算力中心" />}
     >
       <div className={style.powerPage}>
-        {activeTab === "overview" && renderOverview()}
-        {activeTab === "records" && renderRecords()}
+        {/* 算力概览区域：蓝色卡片 + 4个统计卡片 */}
+        <div className={style.overviewSection}>
+          {/* 蓝色算力概览卡片 */}
+          <div className={style.overviewCard}>
+            <div className={style.overviewContent}>
+              <div className={style.remainingPower}>
+                <div className={style.remainingLabel}>剩余算力</div>
+                <div className={style.remainingValue}>
+                  {formatNumber(stats?.remainingTokens)}
+                </div>
+              </div>
+              <div className={style.totalInfo}>
+                <span>总计 {stats?.totalTokens || 0}</span>
+              </div>
+              <div className={style.progressBar}>
+                <div
+                  className={style.progressFill}
+                  style={{
+                    width: `${getUsageRate()}%`,
+                  }}
+                />
+              </div>
+              <div className={style.usageRate}>
+                使用率 {getUsageRate()}%
+              </div>
+              <ThunderboltOutlined className={style.lightningIcon} />
+            </div>
+          </div>
+
+          {/* 4个统计卡片（2x2网格） */}
+          <div className={style.statsGrid}>
+            <Card className={`${style.statCard} ${style.statCardGreen}`}>
+              <div className={style.statTitleRow}>
+                <LineChartOutlined className={style.statIcon} />
+                <div className={style.statTitle}>今日消耗</div>
+              </div>
+              <div className={style.statValue}>
+                {formatNumber(stats?.todayUsed)}
+              </div>
+            </Card>
+            <Card className={`${style.statCard} ${style.statCardGrey}`}>
+              <div className={style.statTitleRow}>
+                <BarChartOutlined className={style.statIcon} />
+                <div className={style.statTitle}>昨日消耗</div>
+              </div>
+              <div className={style.statValue}>
+                {formatNumber(stats?.yesterdayUsed)}
+              </div>
+            </Card>
+            <Card className={`${style.statCard} ${style.statCardPurple}`}>
+              <div className={style.statTitleRow}>
+                <HistoryOutlined className={style.statIcon} />
+                <div className={style.statTitle}>历史消耗</div>
+              </div>
+              <div className={style.statValue}>
+                {formatNumber(stats?.historyConsumed || stats?.totalConsumed)}
+              </div>
+            </Card>
+            <Card className={`${style.statCard} ${style.statCardOrange}`}>
+              <div className={style.statTitleRow}>
+                <CalendarOutlined className={style.statIcon} />
+                <div className={style.statTitle}>预计可用(天)</div>
+              </div>
+              <div className={style.statValue}>
+                {getEstimatedDays()}
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* 导航标签 */}
+        <div className={style.navTabs}>
+          {navTabs.map(tab => (
+            <div
+              key={tab.key}
+              className={`${style.navTab} ${activeTab === tab.key ? style.navTabActive : ""}`}
+              onClick={() => handleTabChange(tab.key)}
+            >
+              {tab.label}
+            </div>
+          ))}
+        </div>
+
+
+        {/* 算力明细Tab内容 */}
+        {activeTab === "details" && (
+          <>
+            {/* 筛选器 */}
+            <div className={style.filters}>
+              <Picker
+                columns={[typeOptions]}
+                visible={filterTypeVisible}
+                onClose={() => setFilterTypeVisible(false)}
+                value={[filterType]}
+                onConfirm={value => {
+                  setFilterType(value[0] as string);
+                  setFilterTypeVisible(false);
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setFilterTypeVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getTypeLabel()}
+                  </div>
+                )}
+              </Picker>
+
+              <Picker
+                columns={[actionOptions]}
+                visible={filterActionVisible}
+                onClose={() => setFilterActionVisible(false)}
+                value={[filterAction]}
+                onConfirm={value => {
+                  setFilterAction(value[0] as string);
+                  setFilterActionVisible(false);
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setFilterActionVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getActionLabel()}
+                  </div>
+                )}
+              </Picker>
+
+              <Picker
+                columns={[timeOptions]}
+                visible={filterTimeVisible}
+                onClose={() => setFilterTimeVisible(false)}
+                value={[filterTime]}
+                onConfirm={value => {
+                  setFilterTime(value[0] as string);
+                  setFilterTimeVisible(false);
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setFilterTimeVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getTimeLabel()}
+                  </div>
+                )}
+              </Picker>
+            </div>
+
+            {/* 算力消耗记录列表 */}
+            <div className={style.recordList}>
+              {loading && records.length === 0 ? (
+                <div className={style.loadingContainer}>
+                  <div className={style.loadingText}>加载中...</div>
+                </div>
+              ) : records.length > 0 ? (
+                records.map(record => (
+                  <Card key={record.id} className={style.recordItem}>
+                    <div className={style.recordLeft}>
+                      <div className={`${style.recordIconWrapper} ${record.type === 0 ? style.recordIconWrapperConsume : style.recordIconWrapperRecharge}`}>
+                        <ThunderboltOutlined className={style.recordIcon} />
+                      </div>
+                      <div className={style.recordInfo}>
+                        <div className={style.recordTitle}>
+                          {getRecordTitle(record)}
+                        </div>
+                        <div className={style.recordTime}>
+                          {formatDateTime(record.createTime)}
+                        </div>
+                      </div>
+                    </div>
+                    <div className={style.recordRight}>
+                      <div className={style.recordPowerWrapper}>
+                        <div className={`${style.recordPower} ${record.type === 0 ? style.recordPowerConsume : style.recordPowerRecharge}`}>
+                          {record.type === 0 ? '-' : '+'}{formatNumber(Math.abs(record.tokens))}
+                        </div>
+                        <div className={style.recordPowerUnit}>算力点</div>
+                      </div>
+                    </div>
+                  </Card>
+                ))
+              ) : (
+                <div className={style.emptyRecords}>
+                  <div className={style.emptyText}>暂无消耗记录</div>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* 购买算力Tab内容 */}
+        {activeTab === "buy" && (
+          <div className={style.buyPowerContent}>
+            {loading && packages.length === 0 ? (
+              <div className={style.loadingContainer}>
+                <div className={style.loadingText}>加载中...</div>
+              </div>
+            ) : (
+              packages.map(pkg => {
+                const savings = getSavings(pkg);
+                const tokensValue = formatTokens(pkg.tokens);
+
+                return (
+                  <Card key={pkg.id} className={style.packageCard}>
+                    {/* 套餐头部 */}
+                    <div className={style.packageHeader}>
+                      <div className={style.packageNameRow}>
+                        <span className={style.packageName}>{pkg.name}</span>
+                        {pkg.discount > 0 && (
+                          <span className={style.discountTag}>
+                            {pkg.discount}% OFF
+                          </span>
+                        )}
+                      </div>
+                      <div className={style.packageTokensHeader}>
+                        <ThunderboltOutlined className={style.tokensIcon} />
+                        <div className={style.tokensValue}>
+                          <div className={style.tokensNumber}>{tokensValue}</div>
+                          <div className={style.tokensUnit}>算力</div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 价格信息 */}
+                    <div className={style.packagePriceSection}>
+                      <div className={style.priceRow}>
+                        <span className={style.currentPrice}>
+                          ¥{(pkg.price / 100).toFixed(2)}
+                        </span>
+                        {pkg.originalPrice && pkg.originalPrice > pkg.price && (
+                          <span className={style.originalPrice}>
+                            ¥{(pkg.originalPrice / 100).toFixed(2)}
+                          </span>
+                        )}
+                      </div>
+                      {savings > 0 && (
+                        <div className={style.savings}>
+                          节省 ¥{(savings / 100).toFixed(2)}
+                        </div>
+                      )}
+                      <div className={style.unitPrice}>
+                        ¥{pkg.unitPrice.toFixed(3)}/算力
+                      </div>
+                    </div>
+
+                    {/* 功能列表 */}
+                    {pkg.description && pkg.description.length > 0 && (
+                      <div className={style.packageFeatures}>
+                        {pkg.description.map((desc, index) => (
+                          <div key={index} className={style.featureItem}>
+                            <CheckCircleOutlined className={style.featureIcon} />
+                            <span>{desc}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* 立即购买按钮 */}
+                    <Button
+                      block
+                      color="primary"
+                      size="large"
+                      className={style.buyButton}
+                      loading={buyLoading}
+                      onClick={() => handleBuyPackage(pkg)}
+                    >
+                      <ThunderboltOutlined className={style.buyButtonIcon} />
+                      立即购买
+                    </Button>
+                  </Card>
+                );
+              })
+            )}
+
+            {/* 自定义算力包 */}
+            <Card className={style.customPackageCard}>
+              <div className={style.customPackageHeader}>
+                <div className={style.customPackageIcon}>
+                  <AimOutlined />
+                </div>
+                <div className={style.customPackageTitle}>自定义算力包</div>
+                <div className={style.customPackageDesc}>
+                  根据您的需求定制,灵活购买算力
+                </div>
+              </div>
+
+              {/* 快速选择 */}
+              <div className={style.quickSelectButtons}>
+                {[10, 50, 100].map(amount => (
+                  <button
+                    key={amount}
+                    className={`${style.quickSelectBtn} ${
+                      selectedQuickAmount === amount ? style.quickSelectBtnActive : ""
+                    }`}
+                    onClick={() => handleQuickSelect(amount)}
+                  >
+                    ¥{amount}
+                  </button>
+                ))}
+              </div>
+
+              {/* 自定义输入 */}
+              <div className={style.customInputWrapper}>
+                <Input
+                  type="number"
+                  placeholder="请输入购买金额（元）"
+                  value={customAmount}
+                  onChange={handleCustomAmountChange}
+                  className={style.customInput}
+                />
+              </div>
+
+              {/* 立即购买按钮 */}
+              <Button
+                block
+                size="large"
+                className={style.customBuyButton}
+                loading={buyLoading}
+                onClick={handleBuyCustom}
+                disabled={!customAmount || !customAmount.trim()}
+              >
+                立即购买
+              </Button>
+            </Card>
+
+            {/* 安全保障承诺 */}
+            <Card className={style.securityCard}>
+              <div className={style.securityHeader}>
+                <CheckCircleOutlined className={style.securityIcon} />
+                <span className={style.securityTitle}>安全保障承诺</span>
+              </div>
+              <div className={style.securityList}>
+                <div className={style.securityItem}>
+                  <CheckCircleOutlined className={style.securityItemIcon} />
+                  <span>算力永不过期,购买后永久有效</span>
+                </div>
+                <div className={style.securityItem}>
+                  <CheckCircleOutlined className={style.securityItemIcon} />
+                  <span>透明计费,每次AI服务消耗明细可查</span>
+                </div>
+                <div className={style.securityItem}>
+                  <CheckCircleOutlined className={style.securityItemIcon} />
+                  <span>7×24小时技术支持</span>
+                </div>
+                <div className={style.securityItem}>
+                  <CheckCircleOutlined className={style.securityItemIcon} />
+                  <span>企业级数据安全全认证</span>
+                </div>
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* 购买记录Tab内容 */}
+        {activeTab === "orders" && (
+          <div className={style.ordersContent}>
+            {/* 搜索栏 */}
+            <div className={style.searchBar}>
+              <SearchOutlined className={style.searchIcon} />
+              <Input
+                placeholder="搜索订单号"
+                value={orderKeyword}
+                onChange={value => {
+                  setOrderKeyword(value);
+                }}
+                onEnterPress={() => fetchOrders()}
+                className={style.searchInput}
+              />
+            </div>
+
+            {/* 筛选器 */}
+            <div className={style.orderFilters}>
+              <Picker
+                columns={[orderStatusOptions]}
+                visible={orderStatusVisible}
+                onClose={() => setOrderStatusVisible(false)}
+                value={[orderStatus]}
+                onConfirm={value => {
+                  setOrderStatus(value[0] as string);
+                  setOrderStatusVisible(false);
+                  // useEffect 会自动触发 fetchOrders
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setOrderStatusVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getOrderStatusLabel()}
+                  </div>
+                )}
+              </Picker>
+
+              <Picker
+                columns={[orderTimeOptions]}
+                visible={orderTimeVisible}
+                onClose={() => setOrderTimeVisible(false)}
+                value={[orderTime]}
+                onConfirm={value => {
+                  setOrderTime(value[0] as string);
+                  setOrderTimeVisible(false);
+                  // useEffect 会自动触发 fetchOrders
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setOrderTimeVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getOrderTimeLabel()}
+                  </div>
+                )}
+              </Picker>
+
+              <Picker
+                columns={[orderPayTypeOptions]}
+                visible={orderPayTypeVisible}
+                onClose={() => setOrderPayTypeVisible(false)}
+                value={[orderPayType]}
+                onConfirm={value => {
+                  setOrderPayType(value[0] as string);
+                  setOrderPayTypeVisible(false);
+                  // useEffect 会自动触发 fetchOrders
+                }}
+              >
+                {() => (
+                  <div
+                    className={style.filterButton}
+                    onClick={() => setOrderPayTypeVisible(true)}
+                  >
+                    <DownOutlined className={style.filterIcon} />
+                    {getOrderPayTypeLabel()}
+                  </div>
+                )}
+              </Picker>
+            </div>
+
+            {/* 订单列表 */}
+            <div className={style.orderList}>
+              {loading && orders.length === 0 ? (
+                <div className={style.loadingContainer}>
+                  <div className={style.loadingText}>加载中...</div>
+                </div>
+              ) : orders.length > 0 ? (
+                orders.map(order => {
+                  const statusInfo = getOrderStatusInfo(order.status);
+                  // tokens 已经是格式化好的字符串，如 "280,000"
+                  const tokens = order.tokens || "0";
+
+                  return (
+                    <Card key={order.id} className={style.orderCard}>
+                      <div className={style.orderHeader}>
+                        <div className={style.orderTitle}>
+                          {order.goodsName || "算力充值"}
+                        </div>
+                        <div className={style.orderAmount}>
+                          +{tokens}
+                        </div>
+                      </div>
+                      <div className={style.orderInfo}>
+                        <div className={style.orderLeft}>
+                          <div className={style.orderNumber}>
+                            订单号: {order.orderNo || "-"}
+                          </div>
+                          <div className={style.orderPayment}>
+                            {order.payType === 1 ? (
+                              <WechatOutlined className={style.paymentIcon} />
+                            ) : order.payType === 2 ? (
+                              <AlipayCircleOutlined className={style.paymentIcon} />
+                            ) : null}
+                            {order.payType ? getPayTypeText(order.payType) : order.payTypeText || "未支付"}
+                          </div>
+                        </div>
+                        <div className={style.orderRight}>
+                          <div
+                            className={style.orderStatus}
+                            style={{
+                              color: statusInfo.color,
+                              backgroundColor: statusInfo.bgColor,
+                            }}
+                          >
+                            {order.statusText || statusInfo.text}
+                          </div>
+                          <div className={style.orderTime}>
+                            {formatDateTime(order.createTime)}
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+                  );
+                })
+              ) : (
+                <div className={style.emptyRecords}>
+                  <div className={style.emptyText}>暂无订单记录</div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 算力分配Tab内容 */}
+        {activeTab === "allocation" && (
+          <div className={style.allocationContent}>
+            {/* 算力分配表单 */}
+            <Card className={style.allocationFormCard}>
+              <div className={style.allocationFormHeader}>
+                <ThunderboltOutlined className={style.allocationFormIcon} />
+                <span className={style.allocationFormTitle}>算力分配</span>
+              </div>
+
+              <div className={style.allocationFormBody}>
+                {/* 选择账号 */}
+                <div className={style.formItem}>
+                  <label className={style.formLabel}>选择账号</label>
+                  <Picker
+                    columns={[accounts.map(acc => ({ label: getAccountDisplayName(acc), value: acc.id }))]}
+                    visible={allocationAccountVisible}
+                    onClose={() => setAllocationAccountVisible(false)}
+                    value={allocationAccount ? [allocationAccount.id] : []}
+                    onConfirm={value => {
+                      const selectedAccount = accounts.find(acc => acc.id === value[0]);
+                      setAllocationAccount(selectedAccount || null);
+                      setAllocationAccountVisible(false);
+                    }}
+                  >
+                    {() => (
+                      <div
+                        className={style.formInput}
+                        onClick={() => setAllocationAccountVisible(true)}
+                      >
+                        {allocationAccount ? getAccountDisplayName(allocationAccount) : "请选择账号"}
+                        <DownOutlined className={style.formInputIcon} />
+                      </div>
+                    )}
+                  </Picker>
+                </div>
+
+                {/* 填写数量 */}
+                <div className={style.formItem}>
+                  <label className={style.formLabel}>填写数量</label>
+                  <Input
+                    type="number"
+                    placeholder="请输入分配算力数量"
+                    value={allocationAmount}
+                    onChange={setAllocationAmount}
+                    className={style.formInput}
+                  />
+                </div>
+
+                {/* 确认分配按钮 */}
+                <Button
+                  block
+                  color="primary"
+                  size="large"
+                  className={style.allocationConfirmButton}
+                  onClick={handleConfirmAllocation}
+                >
+                  确认分配
+                </Button>
+              </div>
+            </Card>
+
+            {/* 分配记录 */}
+            <Card className={style.allocationRecordsCard}>
+              <div className={style.allocationRecordsHeader}>
+                <DesktopOutlined className={style.allocationRecordsIcon} />
+                <span className={style.allocationRecordsTitle}>分配记录</span>
+                <div className={style.allocationRecordsFilters}>
+                  <Picker
+                    columns={[allocationAccountOptions]}
+                    visible={allocationAccountFilterVisible}
+                    onClose={() => setAllocationAccountFilterVisible(false)}
+                    value={[allocationAccountFilter]}
+                    onConfirm={value => {
+                      setAllocationAccountFilter(value[0] as string);
+                      setAllocationAccountFilterVisible(false);
+                    }}
+                  >
+                    {() => (
+                      <div
+                        className={style.filterButton}
+                        onClick={() => setAllocationAccountFilterVisible(true)}
+                      >
+                        {allocationAccountOptions.find(opt => opt.value === allocationAccountFilter)?.label || "全部账号"}
+                        <DownOutlined className={style.filterIcon} />
+                      </div>
+                    )}
+                  </Picker>
+
+                  <Picker
+                    columns={[allocationTimeOptions]}
+                    visible={allocationTimeFilterVisible}
+                    onClose={() => setAllocationTimeFilterVisible(false)}
+                    value={[allocationTimeFilter]}
+                    onConfirm={value => {
+                      setAllocationTimeFilter(value[0] as string);
+                      setAllocationTimeFilterVisible(false);
+                    }}
+                  >
+                    {() => (
+                      <div
+                        className={style.filterButton}
+                        onClick={() => setAllocationTimeFilterVisible(true)}
+                      >
+                        {allocationTimeOptions.find(opt => opt.value === allocationTimeFilter)?.label || "最近7天"}
+                        <DownOutlined className={style.filterIcon} />
+                      </div>
+                    )}
+                  </Picker>
+                </div>
+              </div>
+
+              {/* 记录列表 */}
+              <div className={style.allocationRecordsList}>
+                {allocationRecords.length > 0 ? (
+                  allocationRecords.map(record => (
+                    <div key={record.id} className={style.allocationRecordItem}>
+                      <div className={style.allocationRecordLeft}>
+                        <UserOutlined className={style.allocationRecordIcon} />
+                        <div className={style.allocationRecordInfo}>
+                          <div className={style.allocationRecordName}>
+                            {record.accountName}
+                          </div>
+                          <div className={style.allocationRecordTime}>
+                            {record.createTime}
+                          </div>
+                        </div>
+                      </div>
+                      <div className={style.allocationRecordAmount}>
+                        {record.amount}
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className={style.emptyRecords}>
+                    <div className={style.emptyText}>暂无分配记录</div>
+                  </div>
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
       </div>
+
+      {/* 支付弹框 */}
+      <Popup
+        visible={paymentDialogVisible}
+        onMaskClick={() => setPaymentDialogVisible(false)}
+        bodyStyle={{
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          maxHeight: "90vh",
+          overflowY: "auto",
+        }}
+      >
+        {paymentData && (
+          <div className={style.paymentDialog}>
+            {/* 头部 */}
+            <div className={style.paymentHeader}>
+              <div className={style.paymentTitle}>购买算力包</div>
+              <CloseOutlined
+                className={style.paymentClose}
+                onClick={() => setPaymentDialogVisible(false)}
+              />
+            </div>
+
+            {/* 产品详情 */}
+            <div className={style.paymentProduct}>
+              <div className={style.paymentProductLeft}>
+                <ThunderboltOutlined className={style.paymentProductIcon} />
+                <div className={style.paymentProductInfo}>
+                  <div className={style.paymentProductName}>
+                    {paymentData.packageName}
+                  </div>
+                  <div className={style.paymentProductTokens}>
+                    算力点数: {paymentData.tokens}
+                  </div>
+                  <div className={style.paymentProductValid}>
+                    有效期: 永久
+                  </div>
+                </div>
+              </div>
+              <div className={style.paymentProductRight}>
+                <div className={style.paymentPrice}>¥{paymentData.price.toFixed(2)}</div>
+                {paymentData.discount && paymentData.discount > 0 && (
+                  <div className={style.paymentDiscount}>
+                    省{paymentData.discount}%
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 支付方式选择 */}
+            <div className={style.paymentMethods}>
+              <div
+                className={`${style.paymentMethod} ${
+                  paymentData.payType === 1 ? style.paymentMethodActive : ""
+                }`}
+                onClick={() => handleChangePayType(1)}
+              >
+                <WechatOutlined className={style.paymentMethodIcon} />
+                <span>微信支付</span>
+              </div>
+              <div
+                className={`${style.paymentMethod} ${
+                  paymentData.payType === 2 ? style.paymentMethodActive : ""
+                }`}
+                onClick={() => handleChangePayType(2)}
+              >
+                <AlipayCircleOutlined className={style.paymentMethodIcon} />
+                <span>支付宝</span>
+              </div>
+            </div>
+
+            {/* 二维码 */}
+            <div className={style.paymentQrCode}>
+              <img
+                src={paymentData.codeUrl}
+                alt="支付二维码"
+                className={style.qrCodeImage}
+              />
+              <div className={style.qrCodeHint}>
+                <CheckCircleOutlined className={style.qrCodeHintIcon} />
+                请使用{paymentData.payType === 1 ? "微信" : "支付宝"}扫码支付
+              </div>
+            </div>
+
+            {/* 支付信息 */}
+            <div className={style.paymentInfo}>
+              <div className={style.paymentInfoItem}>
+                <ClockCircleOutlined className={style.paymentInfoIcon} />
+                <span className={style.paymentInfoLabel}>支付剩余时间</span>
+                <span className={style.paymentInfoValue}>
+                  {formatCountdown(countdown)}
+                </span>
+              </div>
+              <div className={style.paymentInfoItem}>
+                <span className={style.paymentInfoLabel}>二维码有效期至</span>
+                <span className={style.paymentInfoValue}>
+                  {formatExpireTime(expireTime)}
+                </span>
+              </div>
+              <div className={style.paymentInfoItem}>
+                <span className={style.paymentInfoLabel}>订单号</span>
+                <div className={style.paymentOrderNo}>
+                  <span className={style.orderNoText}>{paymentData.orderNo}</span>
+                  <CopyOutlined
+                    className={style.copyIcon}
+                    onClick={handleCopyOrderNo}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 完成支付按钮 */}
+            <Button
+              block
+              color="primary"
+              size="large"
+              className={style.completePaymentButton}
+              onClick={handleCompletePayment}
+            >
+              <CheckOutlined className={style.completePaymentIcon} />
+              我已完成支付
+            </Button>
+
+            {/* 支付说明 */}
+            <div className={style.paymentInstructions}>
+              <div className={style.paymentInstructionsTitle}>
+                <ExclamationCircleOutlined className={style.instructionsIcon} />
+                支付说明
+              </div>
+              <div className={style.paymentInstructionsList}>
+                <div className={style.instructionItem}>
+                  <CheckCircleOutlined className={style.instructionIcon} />
+                  <span>
+                    请在5分钟内完成支付,超时后需重新生成二维码
+                  </span>
+                </div>
+                <div className={style.instructionItem}>
+                  <CheckCircleOutlined className={style.instructionIcon} />
+                  <span>
+                    支付成功后算力将立即到账,可在账户中查看
+                  </span>
+                </div>
+                <div className={style.instructionItem}>
+                  <CheckCircleOutlined className={style.instructionIcon} />
+                  <span>
+                    支持自动检测支付状态,无需手动刷新
+                  </span>
+                </div>
+                <div className={style.instructionItem}>
+                  <CheckCircleOutlined className={style.instructionIcon} />
+                  <span>
+                    如遇问题请联系客服:400-123-4567
+                  </span>
+                </div>
+                <div className={style.instructionItem}>
+                  <CheckCircleOutlined className={style.instructionIcon} />
+                  <span>
+                    支持7天无理由退款(未使用部分按比例退款)
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </Popup>
+
+      {/* 支付成功弹框 */}
+      <Popup
+        visible={paymentSuccessVisible}
+        onMaskClick={handleClosePaymentSuccess}
+        bodyStyle={{
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          maxHeight: "90vh",
+          overflowY: "auto",
+        }}
+      >
+        {paymentSuccessData && (
+          <div className={style.paymentSuccessDialog}>
+            {/* 头部 */}
+            <div className={style.paymentSuccessHeader}>
+              <div className={style.paymentSuccessTitle}>支付成功</div>
+              <CloseOutlined
+                className={style.paymentSuccessClose}
+                onClick={handleClosePaymentSuccess}
+              />
+            </div>
+
+            {/* 成功图标和文字 */}
+            <div className={style.paymentSuccessIcon}>
+              <CheckCircleOutlined />
+            </div>
+            <div className={style.paymentSuccessText}>支付成功</div>
+            <div className={style.paymentSuccessDesc}>
+              您购买的算力包已到账
+            </div>
+
+            {/* 套餐信息 */}
+            <div className={style.paymentSuccessProduct}>
+              <div className={style.paymentSuccessProductLeft}>
+                <ThunderboltOutlined className={style.paymentSuccessProductIcon} />
+                <div className={style.paymentSuccessProductInfo}>
+                  <div className={style.paymentSuccessProductName}>
+                    {paymentSuccessData.goodsName}
+                  </div>
+                  {(() => {
+                    const specs = parseGoodsSpecs(paymentSuccessData.goodsSpecs);
+                    const tokens = specs?.tokens || 0;
+                    return (
+                      <div className={style.paymentSuccessProductTokens}>
+                        算力点数: {tokens.toLocaleString()}
+                      </div>
+                    );
+                  })()}
+                </div>
+              </div>
+              <div className={style.paymentSuccessProductRight}>
+                <div className={style.paymentSuccessPrice}>
+                  ¥{(paymentSuccessData.money / 100).toFixed(2)}
+                </div>
+                <div className={style.paymentSuccessPayType}>
+                  支付方式: {paymentSuccessData.payType === 1 ? "微信支付" : paymentSuccessData.payType === 2 ? "支付宝" : "未知"}
+                </div>
+              </div>
+            </div>
+
+            {/* 订单信息 */}
+            <div className={style.paymentSuccessInfo}>
+              <div className={style.paymentSuccessInfoItem}>
+                <span className={style.paymentSuccessInfoLabel}>支付时间</span>
+                <span className={style.paymentSuccessInfoValue}>
+                  {formatPayTime(paymentSuccessData.payTime)}
+                </span>
+              </div>
+              <div className={style.paymentSuccessInfoItem}>
+                <span className={style.paymentSuccessInfoLabel}>订单号</span>
+                <div className={style.paymentSuccessOrderNo}>
+                  <span className={style.successOrderNoText}>
+                    {paymentSuccessData.orderNo}
+                  </span>
+                  <CopyOutlined
+                    className={style.successCopyIcon}
+                    onClick={handleCopySuccessOrderNo}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 完成按钮 */}
+            <Button
+              block
+              color="primary"
+              size="large"
+              className={style.paymentSuccessButton}
+              onClick={handleClosePaymentSuccess}
+            >
+              完成
+            </Button>
+          </div>
+        )}
+      </Popup>
     </Layout>
   );
 };
diff --git a/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
index 5d3aff23..e9a318d5 100644
--- a/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
+++ b/Cunkebao/src/pages/mobile/mine/recharge/usage-records/api.ts
@@ -36,6 +36,7 @@ export interface TokensUseRecordItem {
 
 export interface TokensUseRecordList {
   list: TokensUseRecordItem[];
+  total?: number;
 }
 
 //算力使用明细
diff --git a/Cunkebao/src/pages/mobile/mine/wechat-accounts/detail/detail.module.scss b/Cunkebao/src/pages/mobile/mine/wechat-accounts/detail/detail.module.scss
index 954921fc..b06f237d 100644
--- a/Cunkebao/src/pages/mobile/mine/wechat-accounts/detail/detail.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/wechat-accounts/detail/detail.module.scss
@@ -339,8 +339,8 @@
               height: 5px;
               border-radius: 10px 10px 0 0;
               background: #1677ff;
-            }
           }
+        }
 
           .stat-icon-chat {
             width: 20px;
@@ -700,7 +700,7 @@
         .adm-avatar {
           width: 48px;
           height: 48px;
-          border-radius: 50%;
+        border-radius: 50%;
         }
       }
 
@@ -710,13 +710,13 @@
       }
 
       .friend-name-row {
-        display: flex;
-        align-items: center;
+          display: flex;
+          align-items: center;
         gap: 8px;
-        margin-bottom: 4px;
+          margin-bottom: 4px;
       }
 
-      .friend-name {
+          .friend-name {
         font-size: 15px;
         font-weight: 600;
         color: #111;
@@ -727,7 +727,7 @@
         display: flex;
         flex-wrap: wrap;
         gap: 4px;
-      }
+          }
 
       .friend-tag {
         font-size: 11px;
@@ -735,17 +735,17 @@
         border-radius: 999px;
         background: #f5f5f5;
         color: #666;
-      }
+        }
 
       .friend-id-row {
-        font-size: 12px;
+          font-size: 12px;
         color: #999;
         margin-bottom: 6px;
-      }
+        }
 
       .friend-status-row {
-        display: flex;
-        flex-wrap: wrap;
+          display: flex;
+          flex-wrap: wrap;
         gap: 6px;
       }
 
@@ -764,7 +764,7 @@
           font-size: 11px;
           color: #999;
           margin-bottom: 4px;
-        }
+          }
 
         .value-amount {
           font-size: 14px;
diff --git a/Cunkebao/src/pages/mobile/scenarios/plan/list/index.tsx b/Cunkebao/src/pages/mobile/scenarios/plan/list/index.tsx
index 59613c07..903b86fb 100644
--- a/Cunkebao/src/pages/mobile/scenarios/plan/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/scenarios/plan/list/index.tsx
@@ -370,13 +370,13 @@ const ScenarioList: React.FC = () => {
             title={scenarioName || ""}
             right={
               scenarioId !== "10" ? (
-                <Button
-                  size="small"
-                  color="primary"
-                  onClick={handleCreateNewPlan}
-                >
-                  <PlusOutlined /> 新建计划
-                </Button>
+              <Button
+                size="small"
+                color="primary"
+                onClick={handleCreateNewPlan}
+              >
+                <PlusOutlined /> 新建计划
+              </Button>
               ) : null
             }
           />
@@ -427,13 +427,13 @@ const ScenarioList: React.FC = () => {
                 {searchTerm ? "没有找到匹配的计划" : "暂无计划"}
               </div>
               {scenarioId !== "10" && (
-                <Button
-                  color="primary"
-                  onClick={handleCreateNewPlan}
-                  className={style["create-first-btn"]}
-                >
-                  <PlusOutlined /> 创建第一个计划
-                </Button>
+              <Button
+                color="primary"
+                onClick={handleCreateNewPlan}
+                className={style["create-first-btn"]}
+              >
+                <PlusOutlined /> 创建第一个计划
+              </Button>
               )}
             </div>
           ) : (
diff --git a/Server/application/chukebao/controller/TokensRecordController.php b/Server/application/chukebao/controller/TokensRecordController.php
index eabaf090..af49f99a 100644
--- a/Server/application/chukebao/controller/TokensRecordController.php
+++ b/Server/application/chukebao/controller/TokensRecordController.php
@@ -16,6 +16,8 @@ class TokensRecordController extends BaseController
         $limit =  $this->request->param('limit', 10);
         $type =  $this->request->param('type', '');
         $form =  $this->request->param('form', '');
+        $startTime = $this->request->param('startTime', '');
+        $endTime = $this->request->param('endTime', '');
         $userId = $this->getUserInfo('id');
         $companyId = $this->getUserInfo('companyId');
 
@@ -32,6 +34,26 @@ class TokensRecordController extends BaseController
             $where[] = ['form','=',$form];
         }
 
+        // 时间筛选
+        if (!empty($startTime)) {
+            // 支持时间戳或日期字符串格式
+            $startTimestamp = is_numeric($startTime) ? intval($startTime) : strtotime($startTime);
+            if ($startTimestamp !== false) {
+                $where[] = ['createTime', '>=', $startTimestamp];
+            }
+        }
+        
+        if (!empty($endTime)) {
+            // 支持时间戳或日期字符串格式
+            $endTimestamp = is_numeric($endTime) ? intval($endTime) : strtotime($endTime);
+            if ($endTimestamp !== false) {
+                // 如果是日期字符串，自动设置为当天的23:59:59
+                if (!is_numeric($endTime)) {
+                    $endTimestamp = strtotime(date('Y-m-d 23:59:59', $endTimestamp));
+                }
+                $where[] = ['createTime', '<=', $endTimestamp];
+            }
+        }
 
         $query = TokensRecord::where($where);
         $total = $query->count();
diff --git a/Server/application/common/controller/PaymentService.php b/Server/application/common/controller/PaymentService.php
index 9c951c8c..7df8f23d 100644
--- a/Server/application/common/controller/PaymentService.php
+++ b/Server/application/common/controller/PaymentService.php
@@ -495,7 +495,7 @@ class PaymentService
         switch ($order['orderType']) {
             case 1:
                 // 处理购买算力
-                $token = TokensCompany::where(['companyId' => $order->companyId])->find();
+                $token = TokensCompany::where(['companyId' => $order->companyId,'userId' => $order->userId])->find();
                 $goodsSpecs = json_decode($order->goodsSpecs, true);
                 if (!empty($token)) {
                     $token->tokens = $token->tokens + $goodsSpecs['tokens'];
@@ -504,6 +504,7 @@ class PaymentService
                     $newTokens = $token->tokens;
                 } else {
                     $tokensCompany = new TokensCompany();
+                    $tokensCompany->userId = $order->userId;
                     $tokensCompany->companyId = $order->companyId;
                     $tokensCompany->tokens = $goodsSpecs['tokens'];
                     $tokensCompany->createTime = time();
diff --git a/Server/application/cunkebao/controller/TokensController.php b/Server/application/cunkebao/controller/TokensController.php
index a72ff49d..6594f577 100644
--- a/Server/application/cunkebao/controller/TokensController.php
+++ b/Server/application/cunkebao/controller/TokensController.php
@@ -72,7 +72,7 @@ class TokensController extends BaseController
 
         } else {
             //获取配置的tokens比例
-            $tokens_multiple = Env::get('payment.tokens_multiple', 28);
+            $tokens_multiple = Env::get('payment.tokens_multiple', 20);
             $specs = [
                 'id' => 0,
                 'name' => '自定义购买算力',
@@ -119,7 +119,7 @@ class TokensController extends BaseController
                 return ResponseHelper::success($order, '订单已支付');
             } else {
                 $errorMsg = !empty($order['payInfo']) ? $order['payInfo'] : '订单未支付';
-                return ResponseHelper::success($order,$errorMsg,400);
+                return ResponseHelper::success($order,$errorMsg);
             }
         } else {
             return ResponseHelper::success($order, '订单已支付');
@@ -140,6 +140,7 @@ class TokensController extends BaseController
             $status = $this->request->param('status', ''); // 订单状态筛选
             $keyword = $this->request->param('keyword', ''); // 关键词搜索（订单号）
             $orderType = $this->request->param('orderType', ''); // 订单类型筛选
+            $payType = $this->request->param('payType', ''); // 支付类型筛选
             $startTime = $this->request->param('startTime', ''); // 开始时间
             $endTime = $this->request->param('endTime', ''); // 结束时间
 
@@ -166,6 +167,11 @@ class TokensController extends BaseController
                 $where[] = ['orderType', '=', $orderType];
             }
 
+            // 支付类型筛选
+            if($payType !== '') {
+                $where[] = ['payType', '=', $payType];
+            }
+
             // 时间范围筛选
             if (!empty($startTime)) {
                 $where[] = ['createTime', '>=', strtotime($startTime)];
@@ -300,16 +306,63 @@ class TokensController extends BaseController
             ])->sum('tokens');
             $totalRecharged = intval($totalRecharged);
 
+            // 计算预计可用天数（基于过去一个月的平均消耗）
+            $estimatedDays = $this->calculateEstimatedDays($companyId, $remainingTokens);
+
             return ResponseHelper::success([
                 'totalTokens' => $totalRecharged, // 总算力（累计充值）
                 'todayUsed' => $todayUsed, // 今日使用
                 'monthUsed' => $monthUsed, // 本月使用
                 'remainingTokens' => $remainingTokens, // 剩余算力
                 'totalConsumed' => $totalConsumed, // 累计消费
+                'estimatedDays' => $estimatedDays, // 预计可用天数
             ], '获取成功');
 
         } catch (\Exception $e) {
             return ResponseHelper::error('获取算力统计失败：' . $e->getMessage());
         }
     }
+
+    /**
+     * 计算预计可用天数（基于过去一个月的平均消耗）
+     * @param int $companyId 公司ID
+     * @param int $remainingTokens 当前剩余算力
+     * @return int 预计可用天数，-1表示无法计算（无消耗记录或余额为0）
+     */
+    private function calculateEstimatedDays($companyId, $remainingTokens)
+    {
+        // 如果余额为0或负数，无法计算
+        if ($remainingTokens <= 0) {
+            return -1;
+        }
+
+        // 计算过去30天的消耗总量（只统计减少的记录，type=0）
+        $oneMonthAgo = time() - (30 * 24 * 60 * 60); // 30天前的时间戳
+        
+        $totalConsumed = TokensRecord::where([
+            ['companyId', '=', $companyId],
+            ['type', '=', 0],  // 只统计减少的记录
+            ['createTime', '>=', $oneMonthAgo]
+        ])->sum('tokens');
+
+        $totalConsumed = intval($totalConsumed);
+
+        // 如果过去30天没有消耗记录，无法计算
+        if ($totalConsumed <= 0) {
+            return -1;
+        }
+
+        // 计算平均每天消耗量
+        $avgDailyConsumption = $totalConsumed / 30;
+
+        // 如果平均每天消耗为0，无法计算
+        if ($avgDailyConsumption <= 0) {
+            return -1;
+        }
+
+        // 计算预计可用天数 = 当前余额 / 平均每天消耗量
+        $estimatedDays = floor($remainingTokens / $avgDailyConsumption);
+
+        return $estimatedDays;
+    }
 }
\ No newline at end of file