From c1d373178902ee189b3ddb6ea2197bdd9b032eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Sat, 16 May 2026 09:48:14 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=A7=AF=E5=88=86=E7=BB=9F=E8=AE=A1=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 剩余积分、今日消耗改为两列卡片并排展示
- 使用项目现有颜色体系（白色卡片 + 边框）
- 数字旁增加单位'分'
- 充值按钮移至卡片下方全宽展示
---
 tauri-app/src/pages/Profile/Profile.tsx | 49 +++++++++++++++++++------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/tauri-app/src/pages/Profile/Profile.tsx b/tauri-app/src/pages/Profile/Profile.tsx
index 161993d..2340ae9 100644
--- a/tauri-app/src/pages/Profile/Profile.tsx
+++ b/tauri-app/src/pages/Profile/Profile.tsx
@@ -208,29 +208,54 @@ export default function Profile() {
 
         <div style={{ height: 1, background: 'var(--border-light)', margin: '0 28px' }} />
 
-        {/* 积分区 */}
-        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '24px 28px' }}>
-          <div style={{ display: 'flex', gap: '40px' }}>
-            <div>
-              <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px' }}>
+        {/* 积分统计卡片 */}
+        <div style={{ padding: '24px 28px' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+            {/* 剩余积分 */}
+            <div
+              style={{
+                background: 'var(--bg-card)',
+                border: '1px solid var(--border-light)',
+                borderRadius: 'var(--radius-xl)',
+                padding: '20px 24px',
+              }}
+            >
+              <div style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)', marginBottom: '12px' }}>
                 剩余积分
               </div>
-              <div style={{ fontSize: '32px', fontWeight: 700, color: '#36b26a', lineHeight: 1 }}>
-                {balance?.balance ?? 0}
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
+                <span style={{ fontSize: '36px', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
+                  {balance?.balance ?? 0}
+                </span>
+                <span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-tertiary)' }}>分</span>
               </div>
             </div>
-            <div>
-              <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px' }}>
+
+            {/* 今日消耗 */}
+            <div
+              style={{
+                background: 'var(--bg-card)',
+                border: '1px solid var(--border-light)',
+                borderRadius: 'var(--radius-xl)',
+                padding: '20px 24px',
+              }}
+            >
+              <div style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)', marginBottom: '12px' }}>
                 今日消耗
               </div>
-              <div style={{ fontSize: '32px', fontWeight: 700, color: '#ff6b6b', lineHeight: 1 }}>
-                {todayConsumed}
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
+                <span style={{ fontSize: '36px', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
+                  {todayConsumed}
+                </span>
+                <span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-tertiary)' }}>分</span>
               </div>
             </div>
           </div>
+
+          {/* 充值按钮 */}
           <button
             className="btn btn-primary"
-            style={{ padding: '10px 28px', fontSize: '14px' }}
+            style={{ width: '100%', marginTop: '16px', padding: '12px', fontSize: 'var(--font-base)' }}
             onClick={() => setShowRechargeModal(true)}
           >
             在线充值