feat: cahnge stats page style

src/pages/StatsPage/components/StatsTokenSection.tsx

@@ -1,13 +1,22 @@
 import { Card, Empty, Select, Space, Spin, Table, Tag } from 'antd';
 import type { StatsPageLogic } from '../StatsPageLogic';
+import { useIsMobile } from '../../../hooks/useIsMobile';
 
 export default function StatsTokenSection({ logic }: { logic: StatsPageLogic }) {
   const { data, tokenData, tokenLoading } = logic;
+  const isMobile = useIsMobile();
   if (!data) return null;
 
   return (
     <div className="stats-page-token-section">
-      <Card title="Token 使用量" className="stats-page-chart-card" extra={<TokenControls logic={logic} />}>
+      <Card
+        title="Token 使用量"
+        className="stats-page-chart-card"
+        extra={!isMobile && <TokenControls logic={logic} />}
+      >
+        {isMobile && (
+            <TokenControls logic={logic} />
+        )}
         {tokenLoading ? (
           <Spin className="stats-state-spin-small" />
         ) : !logic.tokenAgentId ? (

src/pages/StatsPage/styles/stats-page-h5.css

@@ -72,11 +72,19 @@
 }
 
 .stats-page-h5 .points-integration-row,
-.stats-page-h5 .stats-page-token-cards-grid,
 .stats-page-h5 .stats-page-token-charts-grid {
   grid-template-columns: 1fr;
 }
 
+.stats-page-h5 .stats-page-token-cards-grid {
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+
+.stats-page-h5 .stats-page-token-value {
+  font-size: 20px;
+}
+
 .stats-page-h5 .stats-page-cards-grid,
 .stats-page-h5 .points-integration-section,
 .stats-page-h5 .stats-page-chart-card,
@@ -90,15 +98,41 @@
   padding-bottom: 0.25rem;
 }
 
+.stats-page-h5 .stats-page-chart-container {
+  padding: 0;
+  height: 160px;
+  padding-bottom: 12px;
+}
+
 .stats-page-h5 .stats-page-chart-bar-group {
   min-width: 1.625rem;
 }
 
-.stats-page-h5 .stats-token-controls {
-  width: 100%;
+.stats-page-h5 .stats-page-chart-card .ant-card-head {
+  padding: 12px 16px;
 }
 
-.stats-page-h5 .stats-token-agent-select,
-.stats-page-h5 .stats-token-small-select {
-  width: 100%;
+.stats-page-h5 .stats-page-chart-card .ant-card-head-title {
+  font-size: 16px;
+}
+
+.stats-page-h5 .stats-token-controls {
+  width: 100%;
+  display: flex !important;
+  flex-wrap: wrap;
+  gap: 8px !important;
+}
+
+.stats-page-h5 .stats-token-agent-select {
+  flex: 0 0 100% !important;
+  width: 100% !important;
+}
+
+.stats-page-h5 .stats-token-small-select {
+  flex: 1 !important;
+  width: auto !important;
+}
+
+.stats-page-h5 .ant-card-body {
+  padding: 16px;
 }

src/styles.css

@@ -2404,6 +2404,10 @@ span.mention {
   border: 1px solid rgba(255,255,255,0.7);
 }
 
+.stats-page-h5 .stats-page-token-card {
+  padding: 12px;
+}
+
 .stats-page-token-label {
   font-size: 12.5px;
   color: var(--color-text-secondary);
@@ -2464,14 +2468,14 @@ span.mention {
 .points-integration-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  gap: 12px;
 }
 
 .points-integration-item {
-  border-radius: 18px;
-  padding: 16px 18px;
+  border-radius: 12px;
   background: rgba(255,255,255,0.72);
-  border: 1px solid rgba(255,255,255,0.7);
+  border: 1px solid rgba(227, 239, 255, 0.5);
+  padding: 8px;
 }
 
 .points-integration-label {
@@ -2484,7 +2488,7 @@ span.mention {
 }
 
 .points-integration-value {
-  font-size: 26px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--color-text);
 }