油价集成

src/pages/MacroPage.jsx

@@ -5,23 +5,29 @@ import DataView from './macro/DataView.jsx'
 import StrategyView from './macro/StrategyView.jsx'
 import ArticlesView from './macro/ArticlesView.jsx'
 import ArticleDetail from './macro/ArticleDetail.jsx'
+import OilPage from './macro/OilPage.jsx'
 
-// 宏观: 顶栏 3 tab (经济文章 / 经济数据 / 策略研究), 默认 经济数据
-// /macro         → 重定向到 /macro/data
-// /macro/data    → 经济数据 (默认)
-// /macro/strategy→ 策略研究
-// /macro/articles→ 经济文章
+// 宏观: 顶栏 4 tab (油价 / 经济数据 / 策略研究 / 经济文章), 默认 油价
+// /macro           → 显示 oil tab (本组件 activeFromPath 决定)
+// /macro/oil       → 油价 (新增)
+// /macro/data      → 经济数据
+// /macro/strategy  → 策略研究
+// /macro/articles  → 经济文章
 // /macro/articles/:slug → 文章详情
 const TABS = [
+  { key: 'oil',      label: '油价',     path: '/macro/oil' },
   { key: 'data',     label: '经济数据', path: '/macro/data' },
   { key: 'strategy', label: '策略研究', path: '/macro/strategy' },
   { key: 'articles', label: '经济文章', path: '/macro/articles' },
 ]
 
 function activeFromPath(pathname) {
+  if (pathname.startsWith('/macro/oil')) return 'oil'
   if (pathname.startsWith('/macro/articles')) return 'articles'
   if (pathname.startsWith('/macro/strategy')) return 'strategy'
-  return 'data'
+  if (pathname.startsWith('/macro/data')) return 'data'
+  // 父路由 /macro 或 / 走 Tab 列表第一个 (油价)
+  return 'oil'
 }
 
 export default function MacroPage() {
@@ -33,6 +39,7 @@ export default function MacroPage() {
     key: t.key,
     label: t.label,
     render: () => {
+      if (t.key === 'oil') return <OilPage />
       if (t.key === 'data') return <DataView />
       if (t.key === 'strategy') return <StrategyView />
       if (t.key === 'articles') return <ArticlesView />
@@ -46,7 +53,6 @@ export default function MacroPage() {
   }
 
   // 详情页 /macro/articles/:slug 和 /macro/data/:name 单独走 React Router 渲染, 不参与滑屏
-  // 这样浏览器/手机物理返回键也能正常回到列表
   if (location.pathname.match(/^\/macro\/(articles|data|strategy)\/[^/]+$/)) {
     return (
       <Routes>
@@ -62,4 +68,4 @@ export default function MacroPage() {
       <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
     </div>
   )
-}
+}

src/pages/macro/OilPage.jsx

@@ -0,0 +1,250 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Card, DotLoading, Empty, ErrorBlock } from 'antd-mobile'
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import { getOilForecast, getOilHistory, getOilSchedule } from '../../api/oil.js'
+
+// 油价页 (新):
+//   - 上: 下次调价预测 (无 WTI / 无柱状图)
+//   - 中: 浙江省最近半年价格走势 (3 油品折线, 一张图)
+//   - 下: 调价日历 (按年切换)
+// 数据源:
+//   - 预测/日历: apizero 实时 (后端代理)
+//   - 走势: DB oil_price_history 表 (cron 每天 04:00 抓浙江 3 油品入库)
+
+const FUEL_LABELS = {
+  '92': '92# 汽油',
+  '95': '95# 汽油',
+  '0': '0# 柴油',
+}
+// 3 油品各自配色 (与原柱状图色调保持一致)
+const FUEL_COLORS = {
+  '92': '#1677ff',
+  '95': '#52c41a',
+  '0': '#888',
+}
+
+function n(v, d = 2) { return Number.isFinite(Number(v)) ? Number(v).toFixed(d) : '-' }
+
+// 调价预测 (保留, 但不显示 WTI / 布伦特)
+function ForecastPanel() {
+  const [forecast, setForecast] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [err, setErr] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setErr('')
+    getOilForecast()
+      .then((d) => { if (!cancelled) setForecast(d) })
+      .catch((e) => !cancelled && setErr(e.message || '加载失败'))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  if (loading) return <div className="monitor-loading"><DotLoading /> 加载中...</div>
+  if (err) return <ErrorBlock status="default" title="加载失败" description={err} />
+
+  const p = forecast?.prediction
+  return (
+    <Card className="oil-card">
+      <div className="oil-card-title">下次调价预测</div>
+      <div className="oil-prediction">
+        <div className="oil-pred-row">
+          <span className="oil-pred-label">调价日</span>
+          <span className="oil-pred-value">{forecast?.next_adjust_date || '-'}</span>
+          <span className="oil-pred-tag">剩 {forecast?.days_remaining ?? '-'} 天</span>
+        </div>
+        <div className="oil-pred-row">
+          <span className="oil-pred-label">方向</span>
+          <span className={'oil-pred-direction ' + (p?.direction || '')}>
+            {p?.direction_emoji || ''} {p?.direction || '-'}
+          </span>
+          <span className="oil-pred-tag">置信度 {p?.confidence || '-'}</span>
+        </div>
+        <div className="oil-pred-row">
+          <span className="oil-pred-label">预计幅度</span>
+          <span className="oil-pred-value">
+            {p?.estimated_change_per_ton != null
+              ? `${p.estimated_change_per_ton > 0 ? '+' : ''}${p.estimated_change_per_ton} 元/吨`
+              : '-'}
+            {p?.estimated_change_per_liter != null && (
+              <span className="oil-pred-sub"> ({p.estimated_change_per_liter > 0 ? '+' : ''}{p.estimated_change_per_liter} 元/升)</span>
+            )}
+          </span>
+        </div>
+        {p?.analysis && (
+          <div className="oil-pred-analysis">{p.analysis}</div>
+        )}
+      </div>
+    </Card>
+  )
+}
+
+// 浙江省最近半年价格走势
+function HistoryPanel() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [err, setErr] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setErr('')
+    getOilHistory({ days: 180 })
+      .then((d) => { if (!cancelled) setData(d.items || []) })
+      .catch((e) => !cancelled && setErr(e.message || '加载失败'))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  // 整形: rows = [{date, fuel, price}] -> 3 油品并排
+  //   pivot: [{date, 92, 95, 0}]
+  const chartData = useMemo(() => {
+    const m = new Map()
+    for (const r of data) {
+      if (!m.has(r.date)) m.set(r.date, { date: r.date })
+      m.get(r.date)[r.fuel] = r.price
+    }
+    return Array.from(m.values()).sort((a, b) => a.date.localeCompare(b.date))
+  }, [data])
+
+  // 3 油品都有数据?
+  const hasData = chartData.length > 0
+
+  return (
+    <Card className="oil-card">
+      <div className="oil-card-title">浙江省最近半年价格走势</div>
+      {loading && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
+      {err && <ErrorBlock status="default" title="加载失败" description={err} />}
+      {!loading && !err && !hasData && (
+        <Empty description="暂无历史数据 (每天 04:00 自动抓取, 调价次日入库)" />
+      )}
+      {!loading && !err && hasData && (
+        <>
+          <div className="oil-chart">
+            <ResponsiveContainer width="100%" height={260}>
+              <LineChart data={chartData} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
+                <XAxis dataKey="date" tick={{ fontSize: 10 }} />
+                <YAxis tick={{ fontSize: 10 }} domain={['dataMin - 0.1', 'dataMax + 0.1']} unit="" />
+                <Tooltip formatter={(v) => `${Number(v).toFixed(3)} 元/升`} />
+                <Legend wrapperStyle={{ fontSize: 11 }} />
+                {Object.keys(FUEL_LABELS).map((k) => (
+                  <Line
+                    key={k}
+                    type="monotone"
+                    dataKey={k}
+                    name={FUEL_LABELS[k]}
+                    stroke={FUEL_COLORS[k]}
+                    strokeWidth={2}
+                    dot={{ r: 3 }}
+                    connectNulls
+                  />
+                ))}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="oil-chart-tip">共 {chartData.length} 个数据点 (调价次日入库)</div>
+        </>
+      )}
+    </Card>
+  )
+}
+
+// 调价日历 (不变)
+function SchedulePanel() {
+  const [year, setYear] = useState(new Date().getFullYear())
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [err, setErr] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setErr('')
+    getOilSchedule(year)
+      .then((d) => { if (!cancelled) setData(d) })
+      .catch((e) => !cancelled && setErr(e.message || '加载失败'))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [year])
+
+  const byMonth = useMemo(() => {
+    const m = {}
+    if (!data?.schedule) return m
+    for (const it of data.schedule) {
+      const mm = it.date.slice(0, 7)
+      if (!m[mm]) m[mm] = []
+      m[mm].push(it)
+    }
+    return m
+  }, [data])
+
+  return (
+    <Card className="oil-card">
+      <div className="oil-card-title-row">
+        <div className="oil-card-title">调价日历</div>
+        <div className="oil-year-tabs">
+          {[2025, 2026].map((y) => (
+            <button
+              key={y}
+              className={'oil-year-tab ' + (y === year ? 'active' : '')}
+              onClick={() => setYear(y)}
+            >
+              {y}
+            </button>
+          ))}
+        </div>
+      </div>
+      {data?._cached && <div className="oil-cache-hint">本次来自本地缓存, 不消耗 apizero 配额</div>}
+      {loading && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
+      {err && <ErrorBlock status="default" title="加载失败" description={err} />}
+      {!loading && !err && data && (
+        <>
+          <div className="oil-schedule-meta">
+            {data.year} 年共 <b>{data.total_adjustments}</b> 个调价窗口
+            {data.next_adjust_date && (
+              <span className="oil-pred-tag">下一个: {data.next_adjust_date} (剩 {data.days_remaining} 天)</span>
+            )}
+          </div>
+          <div className="oil-schedule-list">
+            {Object.keys(byMonth).sort().map((m) => (
+              <div key={m} className="oil-month">
+                <div className="oil-month-label">{m}</div>
+                <div className="oil-month-items">
+                  {byMonth[m].map((it) => (
+                    <div key={it.date} className={'oil-day ' + (it.status === '已过' ? 'past' : 'future')}>
+                      <div className="oil-day-date">{it.date.slice(8)}</div>
+                      <div className="oil-day-status">{it.status}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </Card>
+  )
+}
+
+// 油价页入口: 预测 + 走势 + 日历
+export default function OilPage() {
+  return (
+    <div className="oil-page">
+      <ForecastPanel />
+      <HistoryPanel />
+      <SchedulePanel />
+    </div>
+  )
+}