更换 UI

src/pages/macro/StrategyView.jsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { CapsuleTabs, Card } from 'antd-mobile'
 import { api } from '../../api/client.js'
 
-// 策略研究: 顶部 chip 行选策略, 下面显示 4 张图 (debt / gdp / debtToGdp / interestToGdp) + 表格
+// 策略研究: 顶部 CapsuleTabs 选策略, 下面 4 张图 + 表格
+// 使用 antd-mobile: CapsuleTabs / Card
 const SERIES = [
-  { key: 'debt',         label: '政府债务 (万亿美元)', color: '#8884d8' },
-  { key: 'gdp',          label: 'GDP (万亿美元)',      color: '#3cb44b' },
-  { key: 'debtToGdp',    label: '债务/GDP (%)',        color: '#4363d8' },
-  { key: 'interestToGdp', label: '债务利息/GDP (%)',   color: '#f58231' },
+  { key: 'debt',          label: '政府债务 (万亿美元)', color: '#8884d8' },
+  { key: 'gdp',           label: 'GDP (万亿美元)',      color: '#3cb44b' },
+  { key: 'debtToGdp',     label: '债务/GDP (%)',        color: '#4363d8' },
+  { key: 'interestToGdp', label: '债务利息/GDP (%)',    color: '#f58231' },
 ]
 
 export default function StrategyView() {
@@ -40,22 +42,14 @@ export default function StrategyView() {
   return (
     <div>
       <div className="page-title">策略研究</div>
-      <div className="chip-row" style={{ paddingLeft: 12 }}>
+      <CapsuleTabs activeKey={selected || undefined} onChange={setSelected}>
         {strategies.map((s) => (
-          <button
-            key={s.name}
-            className={'chip' + (selected === s.name ? ' active' : '')}
-            onClick={() => setSelected(s.name)}
-          >
-            {s.description || s.name}
-          </button>
+          <CapsuleTabs.Tab key={s.name} title={s.description || s.name} />
         ))}
-      </div>
-
+      </CapsuleTabs>
       {cur && (
         <div style={{ padding: '0 12px 12px' }}>
-          <div className="card">
-            <div style={{ fontWeight: 600, marginBottom: 4 }}>{cur.description || cur.name}</div>
+          <Card className="chart-card">
             <div style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 8 }}>
               数据 {rows.length} 条 · 来源 {cur.data.source || 'seed'}
             </div>
@@ -100,9 +94,9 @@ export default function StrategyView() {
                 </tbody>
               </table>
             </div>
-          </div>
+          </Card>
         </div>
       )}
     </div>
   )
-}
+}