修改架构，移动端优先。

save
2026-08-03 18:05:50 +08:00
parent 1c07b417ce
commit 08b3655a38
71 changed files with 2524 additions and 290 deletions
@@ -0,0 +1,10 @@
+// 首页: 暂留占位, 后续接入监控告警 / 个性化推荐
+export default function HomePage() {
+  return (
+    <div className="placeholder-page">
+      <div className="icon">⌂</div>
+      <div>首页</div>
+      <div style={{ fontSize: 12, opacity: .7 }}>后续接入: 监控告警 / 个性化推荐 / 收藏的指标</div>
+    </div>
+  )
+}
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { useNavigate, useLocation, Navigate } from 'react-router-dom'
+import { useAuth } from '../auth/AuthContext.jsx'
+
+export default function LoginPage() {
+  const { user, login } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const from = location.state?.from?.pathname || '/'
+
+  const [email, setEmail] = useState('admin@iboard.local')
+  const [password, setPassword] = useState('admin123')
+  const [remember, setRemember] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState('')
+
+  if (user) return <Navigate to={from} replace />
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    setErr('')
+    setBusy(true)
+    try {
+      await login(email.trim(), password, remember)
+      navigate(from, { replace: true })
+    } catch (e) {
+      setErr(e.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <form className="login-card" onSubmit={onSubmit}>
+        <div className="login-title">iBoard</div>
+        <div className="login-subtitle">登录后继续</div>
+        {err && <div className="login-error">{err}</div>}
+        <div className="login-field">
+          <label htmlFor="email">邮箱</label>
+          <input id="email" type="email" autoComplete="username" required value={email} onChange={(e) => setEmail(e.target.value)} />
+        </div>
+        <div className="login-field">
+          <label htmlFor="password">密码</label>
+          <input id="password" type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+        </div>
+        <label className="login-options">
+          <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
+          <span>记住登录 (7 天免登录)</span>
+        </label>
+        <button className="login-btn" type="submit" disabled={busy}>
+          {busy ? '登录中...' : '登录'}
+        </button>
+        <div className="login-hint">
+          默认账号: admin@iboard.local<br />
+          首次登录后请尽快修改密码
+        </div>
+      </form>
+    </div>
+  )
+}
@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useNavigate, useLocation, Routes, Route, Navigate } from 'react-router-dom'
+import SwipeTabs from '../components/SwipeTabs.jsx'
+import DataView from './macro/DataView.jsx'
+import StrategyView from './macro/StrategyView.jsx'
+import ArticlesView from './macro/ArticlesView.jsx'
+import ArticleDetail from './macro/ArticleDetail.jsx'
+
+// 宏观: 顶栏 3 tab (经济文章 / 经济数据 / 策略研究), 默认 经济数据
+// /macro         → 重定向到 /macro/data
+// /macro/data    → 经济数据 (默认)
+// /macro/strategy→ 策略研究
+// /macro/articles→ 经济文章
+// /macro/articles/:slug → 文章详情
+const TABS = [
+  { 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/articles')) return 'articles'
+  if (pathname.startsWith('/macro/strategy')) return 'strategy'
+  return 'data'
+}
+
+export default function MacroPage() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const active = activeFromPath(location.pathname)
+
+  const tabs = TABS.map((t) => ({
+    key: t.key,
+    label: t.label,
+    render: () => {
+      if (t.key === 'data') return <DataView />
+      if (t.key === 'strategy') return <StrategyView />
+      if (t.key === 'articles') return <ArticlesView />
+      return null
+    },
+  }))
+
+  function onChange(key) {
+    const next = TABS.find((t) => t.key === key)
+    if (next) navigate(next.path)
+  }
+
+  // 详情页 /macro/articles/:slug 单独走 React Router 渲染, 不参与滑屏
+  if (location.pathname.match(/^\/macro\/articles\/[^/]+$/)) {
+    return (
+      <Routes>
+        <Route path="articles/:slug" element={<ArticleDetail />} />
+      </Routes>
+    )
+  }
+
+  return (
+    <div>
+      <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
+    </div>
+  )
+}
@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../auth/AuthContext.jsx'
+
+export default function MePage() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  async function onLogout() {
+    if (!confirm('确定退出登录?')) return
+    await logout()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <div>
+      <div className="me-header">
+        <div className="me-name">{user?.name || '用户'}</div>
+        <div className="me-email">{user?.email}</div>
+      </div>
+      <div className="me-list">
+        <div className="list-item">
+          <span className="label">用户 ID</span>
+          <span className="value">#{user?.id}</span>
+        </div>
+        <div className="list-item">
+          <span className="label">注册时间</span>
+          <span className="value">{user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}</span>
+        </div>
+        <div className="list-item" onClick={onLogout} role="button" style={{ cursor: 'pointer' }}>
+          <span className="label danger">退出登录</span>
+          <span className="value">›</span>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,10 @@
+// 监控: 暂留占位
+export default function MonitorPage() {
+  return (
+    <div className="placeholder-page">
+      <div className="icon">◉</div>
+      <div>监控</div>
+      <div style={{ fontSize: 12, opacity: .7 }}>后续接入: 指标阈值告警 / 时序趋势</div>
+    </div>
+  )
+}
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { api } from '../../api/client.js'
+
+// 文章详情: /macro/articles/:slug
+export default function ArticleDetail() {
+  const { slug } = useParams()
+  const navigate = useNavigate()
+  const [article, setArticle] = useState(null)
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/articles/' + encodeURIComponent(slug))
+      .then((data) => { if (!cancelled) setArticle(data.article) })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [slug])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!article) return <div className="empty">文章不存在</div>
+
+  return (
+    <div className="article-detail">
+      <div className="article-back" onClick={() => navigate(-1)} role="button">‹ 返回</div>
+      <h1>{article.title}</h1>
+      <div className="meta">{article.date}</div>
+      <div className="article-content" dangerouslySetInnerHTML={{ __html: article.contentHtml }} />
+    </div>
+  )
+}
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../../api/client.js'
+
+// 经济文章: 列表, 点进 /macro/articles/:slug
+export default function ArticlesView() {
+  const [articles, setArticles] = useState([])
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/articles')
+      .then((data) => { if (!cancelled) setArticles(data.articles || []) })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!articles.length) return <div className="empty">暂无文章</div>
+
+  return (
+    <div>
+      <div className="page-title">经济文章</div>
+      <div className="list">
+        {articles.map((a) => (
+          <Link key={a.id} to={`/macro/articles/${encodeURIComponent(a.slug)}`} className="list-item">
+            <div className="list-item-title">{a.title}</div>
+            <div className="list-item-meta">{a.date}</div>
+            <div className="list-item-excerpt">{a.excerpt}</div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { api } from '../../api/client.js'
+
+// 经济数据: 从 /api/indicators 拉所有指标, 顶上一个 chip 行切换, 下面渲染图表+表格
+export default function DataView() {
+  const [indicators, setIndicators] = useState([])
+  const [selected, setSelected] = useState(null)
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/indicators')
+      .then((data) => {
+        if (cancelled) return
+        setIndicators(data.indicators || [])
+        if (data.indicators && data.indicators[0]) setSelected(data.indicators[0].name)
+      })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!indicators.length) return <div className="empty">暂无指标数据, 请先执行 npm run db:seed</div>
+
+  // 按 groupName 分组, chip 行按组排列
+  const groups = groupBy(indicators, 'groupName')
+  const cur = indicators.find((i) => i.name === selected)
+  const chartData = cur ? buildMonthlySeries(cur.data) : []
+
+  return (
+    <div>
+      <div className="page-title">经济数据</div>
+      {Object.entries(groups).map(([groupName, list]) => (
+        <div key={groupName}>
+          <div className="section-title">{groupName}</div>
+          <div className="chip-row">
+            {list.map((i) => (
+              <button
+                key={i.name}
+                className={'chip' + (selected === i.name ? ' active' : '')}
+                onClick={() => setSelected(i.name)}
+              >
+                {shortTitle(i)}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+
+      {cur && (
+        <div style={{ padding: '0 12px 12px' }}>
+          <div className="card">
+            <div style={{ fontWeight: 600, marginBottom: 4 }}>{cur.data.title || cur.name}</div>
+            <div style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 8 }}>
+              单位 {cur.data.unit || '-'} · 来源 {cur.data.source || 'seed'}
+            </div>
+            <div className="chart-wrap">
+              <ResponsiveContainer width="100%" height={260}>
+                <LineChart data={chartData} margin={{ top: 10, right: 16, left: 0, bottom: 0 }}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="month" tick={{ fontSize: 11 }} />
+                  <YAxis tick={{ fontSize: 11 }} />
+                  <Tooltip />
+                  <Legend />
+                  <Line type="monotone" dataKey="value" name={cur.data.unit || '值'} stroke="#2563eb" strokeWidth={2} dot={{ r: 3 }} />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+            <div style={{ maxHeight: 240, overflow: 'auto' }}>
+              <table className="data-table">
+                <thead>
+                  <tr><th>月份</th><th style={{ textAlign: 'right' }}>数值</th></tr>
+                </thead>
+                <tbody>
+                  {chartData.map((r) => (
+                    <tr key={r.month}><td>{r.month}</td><td style={{ textAlign: 'right' }}>{r.value}</td></tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function groupBy(arr, key) {
+  return arr.reduce((acc, x) => {
+    const k = x[key] || '其它'
+    ;(acc[k] = acc[k] || []).push(x)
+    return acc
+  }, {})
+}
+
+function shortTitle(i) {
+  if (i.data && i.data.title) return i.data.title
+  return i.name
+}
+
+// 把 data.rows: [{month, value}, ...] 直接返回, 服务端已经按月排好
+function buildMonthlySeries(data) {
+  return (data && data.rows) || []
+}
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { api } from '../../api/client.js'
+
+// 策略研究: 顶部 chip 行选策略, 下面显示 4 张图 (debt / gdp / debtToGdp / interestToGdp) + 表格
+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' },
+]
+
+export default function StrategyView() {
+  const [strategies, setStrategies] = useState([])
+  const [selected, setSelected] = useState(null)
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/strategies')
+      .then((data) => {
+        if (cancelled) return
+        setStrategies(data.strategies || [])
+        if (data.strategies && data.strategies[0]) setSelected(data.strategies[0].name)
+      })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!strategies.length) return <div className="empty">暂无策略数据</div>
+
+  const cur = strategies.find((s) => s.name === selected)
+  const rows = cur ? cur.data.rows : []
+
+  return (
+    <div>
+      <div className="page-title">策略研究</div>
+      <div className="chip-row" style={{ paddingLeft: 12 }}>
+        {strategies.map((s) => (
+          <button
+            key={s.name}
+            className={'chip' + (selected === s.name ? ' active' : '')}
+            onClick={() => setSelected(s.name)}
+          >
+            {s.description || s.name}
+          </button>
+        ))}
+      </div>
+
+      {cur && (
+        <div style={{ padding: '0 12px 12px' }}>
+          <div className="card">
+            <div style={{ fontWeight: 600, marginBottom: 4 }}>{cur.description || cur.name}</div>
+            <div style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 8 }}>
+              数据 {rows.length} 条 · 来源 {cur.data.source || 'seed'}
+            </div>
+            {SERIES.map((s) => (
+              <div key={s.key} style={{ marginBottom: 12 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>{s.label}</div>
+                <div className="chart-wrap">
+                  <ResponsiveContainer width="100%" height={220}>
+                    <LineChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="year" tick={{ fontSize: 11 }} />
+                      <YAxis tick={{ fontSize: 11 }} />
+                      <Tooltip />
+                      <Legend />
+                      <Line type="monotone" dataKey={s.key} name={s.label} stroke={s.color} strokeWidth={2} dot={{ r: 3 }} />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            ))}
+            <div style={{ maxHeight: 220, overflow: 'auto', marginTop: 8 }}>
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>年份</th>
+                    <th style={{ textAlign: 'right' }}>债务</th>
+                    <th style={{ textAlign: 'right' }}>GDP</th>
+                    <th style={{ textAlign: 'right' }}>债务/GDP</th>
+                    <th style={{ textAlign: 'right' }}>利息/GDP</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((r) => (
+                    <tr key={r.year}>
+                      <td>{r.year}</td>
+                      <td style={{ textAlign: 'right' }}>{r.debt}</td>
+                      <td style={{ textAlign: 'right' }}>{r.gdp}</td>
+                      <td style={{ textAlign: 'right' }}>{r.debtToGdp}</td>
+                      <td style={{ textAlign: 'right' }}>{r.interestToGdp}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}