470 lines
18 KiB
JavaScript
470 lines
18 KiB
JavaScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
|
||
function PlusIcon(props) {
|
||
return (
|
||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function TrashIcon(props) {
|
||
return (
|
||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 6h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M8 6l1-2h6l1 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M6 6l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M10 11v6M14 11v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function SettingsIcon(props) {
|
||
return (
|
||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" />
|
||
<path d="M19.4 15a7.97 7.97 0 0 0 .1-2l2-1.5-2-3.5-2.3.5a8.02 8.02 0 0 0-1.7-1l-.4-2.3h-4l-.4 2.3a8.02 8.02 0 0 0-1.7 1l-2.3-.5-2 3.5 2 1.5a7.97 7.97 0 0 0 .1 2l-2 1.5 2 3.5 2.3-.5a8.02 8.02 0 0 0 1.7 1l.4 2.3h4l.4-2.3a8.02 8.02 0 0 0 1.7-1l2.3.5 2-3.5-2-1.5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function RefreshIcon(props) {
|
||
return (
|
||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||
<path d="M4 12a8 8 0 0 1 12.5-6.9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M16 5h3v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M20 12a8 8 0 0 1-12.5 6.9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M8 19H5v-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function Stat({ label, value, delta }) {
|
||
const dir = delta > 0 ? 'up' : delta < 0 ? 'down' : '';
|
||
return (
|
||
<div className="stat">
|
||
<span className="label">{label}</span>
|
||
<span className={`value ${dir}`}>{value}</span>
|
||
{typeof delta === 'number' && (
|
||
<span className={`badge ${dir}`}>
|
||
{delta > 0 ? '↗' : delta < 0 ? '↘' : '—'} {Math.abs(delta).toFixed(2)}%
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function HomePage() {
|
||
const [funds, setFunds] = useState([]);
|
||
const [code, setCode] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const timerRef = useRef(null);
|
||
const [refreshMs, setRefreshMs] = useState(30000);
|
||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||
const [tempSeconds, setTempSeconds] = useState(30);
|
||
const [manualRefreshing, setManualRefreshing] = useState(false);
|
||
|
||
// --- 新增：API 地址与数据源模式 ---
|
||
const [useJsonp, setUseJsonp] = useState(false);
|
||
const [apiBase, setApiBase] = useState('/api');
|
||
const [tempApiBase, setTempApiBase] = useState('/api');
|
||
const [tempUseJsonp, setTempUseJsonp] = useState(false);
|
||
|
||
// 构造绝对路径的工具函数，避免 GitHub Pages basePath 干扰
|
||
const buildUrl = (path) => {
|
||
// 如果 apiBase 是绝对地址，直接拼接
|
||
if (apiBase.startsWith('http://') || apiBase.startsWith('https://')) {
|
||
const base = apiBase.replace(/\/$/, '');
|
||
const p = path.startsWith('/') ? path : `/${path}`;
|
||
return `${base}${p}`;
|
||
}
|
||
// 否则拼接当前 origin 确保是绝对地址
|
||
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||
const base = apiBase.startsWith('/') ? apiBase : `/${apiBase}`;
|
||
const p = path.startsWith('/') ? path : `/${path}`;
|
||
return `${origin}${base.replace(/\/$/, '')}${p}`;
|
||
};
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const saved = JSON.parse(localStorage.getItem('funds') || '[]');
|
||
if (Array.isArray(saved) && saved.length) {
|
||
setFunds(saved);
|
||
refreshAll(saved.map((f) => f.code));
|
||
}
|
||
const savedMs = parseInt(localStorage.getItem('refreshMs') || '30000', 10);
|
||
if (Number.isFinite(savedMs) && savedMs > 0) {
|
||
setRefreshMs(savedMs);
|
||
setTempSeconds(Math.round(savedMs / 1000));
|
||
}
|
||
const savedApi = localStorage.getItem('apiBase') || '/api';
|
||
setApiBase(savedApi);
|
||
setTempApiBase(savedApi);
|
||
const savedJsonp = localStorage.getItem('useJsonp') === 'true';
|
||
setUseJsonp(savedJsonp);
|
||
setTempUseJsonp(savedJsonp);
|
||
} catch {}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (timerRef.current) clearInterval(timerRef.current);
|
||
timerRef.current = setInterval(() => {
|
||
const codes = funds.map((f) => f.code);
|
||
if (codes.length) refreshAll(codes);
|
||
}, refreshMs);
|
||
return () => {
|
||
if (timerRef.current) clearInterval(timerRef.current);
|
||
};
|
||
}, [funds, refreshMs]);
|
||
|
||
// --- 辅助：JSONP 数据抓取逻辑 ---
|
||
const loadScript = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
const script = document.createElement('script');
|
||
script.src = url;
|
||
script.async = true;
|
||
script.onload = () => {
|
||
document.body.removeChild(script);
|
||
resolve();
|
||
};
|
||
script.onerror = () => {
|
||
document.body.removeChild(script);
|
||
reject(new Error('脚本加载失败'));
|
||
};
|
||
document.body.appendChild(script);
|
||
});
|
||
};
|
||
|
||
const fetchFundData = async (c) => {
|
||
if (useJsonp) {
|
||
// JSONP 模式：直接请求东方财富
|
||
return new Promise(async (resolve, reject) => {
|
||
const gzUrl = `https://fundgz.1234567.com.cn/js/${c}.js?rt=${Date.now()}`;
|
||
// 东方财富估值接口固定回调 jsonpgz
|
||
window.jsonpgz = (json) => {
|
||
const gszzlNum = Number(json.gszzl);
|
||
const gzData = {
|
||
code: json.fundcode,
|
||
name: json.name,
|
||
dwjz: json.dwjz,
|
||
gsz: json.gsz,
|
||
gztime: json.gztime,
|
||
gszzl: Number.isFinite(gszzlNum) ? gszzlNum : json.gszzl
|
||
};
|
||
|
||
// 获取重仓 (通过脚本注入并解析全局变量)
|
||
const holdingsUrl = `https://fundf10.eastmoney.com/FundArchivesDatas.aspx?type=jjcc&code=${c}&topline=10&year=&month=&rt=${Date.now()}`;
|
||
loadScript(holdingsUrl).then(() => {
|
||
let holdings = [];
|
||
const html = window.apidata?.content || '';
|
||
const rows = html.match(/<tr[\s\S]*?<\/tr>/gi) || [];
|
||
for (const r of rows) {
|
||
const cells = (r.match(/<td[\s\S]*?>([\s\S]*?)<\/td>/gi) || []).map(td => td.replace(/<[^>]*>/g, '').trim());
|
||
const codeIdx = cells.findIndex(txt => /^\d{6}$/.test(txt));
|
||
const weightIdx = cells.findIndex(txt => /\d+(?:\.\d+)?\s*%/.test(txt));
|
||
if (codeIdx >= 0 && weightIdx >= 0) {
|
||
holdings.push({
|
||
code: cells[codeIdx],
|
||
name: cells[codeIdx + 1] || '',
|
||
weight: cells[weightIdx]
|
||
});
|
||
}
|
||
}
|
||
resolve({ ...gzData, holdings: holdings.slice(0, 10) });
|
||
}).catch(() => resolve({ ...gzData, holdings: [] }));
|
||
};
|
||
loadScript(gzUrl).catch(reject);
|
||
});
|
||
} else {
|
||
// API 模式：使用绝对路径请求后端
|
||
const res = await fetch(buildUrl(`/fund?code=${encodeURIComponent(c)}`), { cache: 'no-store' });
|
||
if (!res.ok) throw new Error('网络错误');
|
||
return await res.json();
|
||
}
|
||
};
|
||
|
||
const refreshAll = async (codes) => {
|
||
try {
|
||
const updated = await Promise.all(codes.map(c => fetchFundData(c)));
|
||
setFunds(updated);
|
||
localStorage.setItem('funds', JSON.stringify(updated));
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
|
||
const addFund = async (e) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
const clean = code.trim();
|
||
if (!clean) {
|
||
setError('请输入基金编号');
|
||
return;
|
||
}
|
||
if (funds.some((f) => f.code === clean)) {
|
||
setError('该基金已添加');
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
try {
|
||
const data = await fetchFundData(clean);
|
||
const next = [data, ...funds];
|
||
setFunds(next);
|
||
localStorage.setItem('funds', JSON.stringify(next));
|
||
setCode('');
|
||
} catch (e) {
|
||
setError(e.message || '添加失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const removeFund = (removeCode) => {
|
||
const next = funds.filter((f) => f.code !== removeCode);
|
||
setFunds(next);
|
||
localStorage.setItem('funds', JSON.stringify(next));
|
||
};
|
||
|
||
const manualRefresh = async () => {
|
||
if (manualRefreshing) return;
|
||
const codes = funds.map((f) => f.code);
|
||
if (!codes.length) return;
|
||
setManualRefreshing(true);
|
||
try {
|
||
await refreshAll(codes);
|
||
} finally {
|
||
setManualRefreshing(false);
|
||
}
|
||
};
|
||
|
||
const saveSettings = (e) => {
|
||
e?.preventDefault?.();
|
||
const ms = Math.max(5, Number(tempSeconds)) * 1000;
|
||
setRefreshMs(ms);
|
||
localStorage.setItem('refreshMs', String(ms));
|
||
|
||
const nextApi = (tempApiBase || '/api').trim();
|
||
setApiBase(nextApi);
|
||
localStorage.setItem('apiBase', nextApi);
|
||
|
||
setUseJsonp(tempUseJsonp);
|
||
localStorage.setItem('useJsonp', String(tempUseJsonp));
|
||
|
||
setSettingsOpen(false);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const onKey = (ev) => {
|
||
if (ev.key === 'Escape' && settingsOpen) setSettingsOpen(false);
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [settingsOpen]);
|
||
|
||
return (
|
||
<div className="container content">
|
||
<div className="navbar glass">
|
||
<div className="brand">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="var(--accent)" strokeWidth="2" />
|
||
<path d="M5 14c2-4 7-6 14-5" stroke="var(--primary)" strokeWidth="2" />
|
||
</svg>
|
||
<span>实时基金估值</span>
|
||
</div>
|
||
<div className="actions">
|
||
<div className="badge" title="当前刷新频率">
|
||
<span>刷新</span>
|
||
<strong>{Math.round(refreshMs / 1000)}秒</strong>
|
||
</div>
|
||
<button
|
||
className="icon-button"
|
||
aria-label="立即刷新"
|
||
onClick={manualRefresh}
|
||
disabled={manualRefreshing || funds.length === 0}
|
||
aria-busy={manualRefreshing}
|
||
title="立即刷新"
|
||
>
|
||
<RefreshIcon className={manualRefreshing ? 'spin' : ''} width="18" height="18" />
|
||
</button>
|
||
<button
|
||
className="icon-button"
|
||
aria-label="打开设置"
|
||
onClick={() => setSettingsOpen(true)}
|
||
title="设置"
|
||
>
|
||
<SettingsIcon width="18" height="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid">
|
||
<div className="col-12 glass card" role="region" aria-label="添加基金">
|
||
<div className="title" style={{ marginBottom: 12 }}>
|
||
<PlusIcon width="20" height="20" />
|
||
<span>添加基金</span>
|
||
<span className="muted">输入基金编号（例如：110022）</span>
|
||
</div>
|
||
<form className="form" onSubmit={addFund}>
|
||
<label htmlFor="fund-code" className="muted" style={{ position: 'absolute', left: -9999 }}>
|
||
基金编号
|
||
</label>
|
||
<input
|
||
id="fund-code"
|
||
className="input"
|
||
placeholder="基金编号"
|
||
value={code}
|
||
onChange={(e) => setCode(e.target.value)}
|
||
inputMode="numeric"
|
||
aria-invalid={!!error}
|
||
/>
|
||
<button className="button" type="submit" disabled={loading} aria-busy={loading}>
|
||
{loading ? '添加中…' : '添加'}
|
||
</button>
|
||
</form>
|
||
{error && <div className="muted" role="alert" style={{ marginTop: 8, color: 'var(--danger)' }}>{error}</div>}
|
||
</div>
|
||
|
||
<div className="col-12">
|
||
{funds.length === 0 ? (
|
||
<div className="glass card empty">尚未添加基金</div>
|
||
) : (
|
||
<div className="grid">
|
||
{funds.map((f) => (
|
||
<div key={f.code} className="col-6">
|
||
<div className="glass card" role="article" aria-label={`${f.name} 基金信息`}>
|
||
<div className="row" style={{ marginBottom: 10 }}>
|
||
<div className="title">
|
||
<span>{f.name}</span>
|
||
<span className="muted">#{f.code}</span>
|
||
</div>
|
||
<div className="actions">
|
||
<div className="badge">
|
||
<span>估值时间</span>
|
||
<strong>{f.gztime || f.time || '-'}</strong>
|
||
</div>
|
||
<button
|
||
className="icon-button danger"
|
||
aria-label={`删除基金 ${f.code}`}
|
||
onClick={() => removeFund(f.code)}
|
||
title="删除"
|
||
>
|
||
<TrashIcon width="18" height="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="row" style={{ marginBottom: 12 }}>
|
||
<Stat label="单位净值" value={f.dwjz ?? '—'} />
|
||
<Stat label="估值净值" value={f.gsz ?? '—'} />
|
||
<Stat label="涨跌幅" value={typeof f.gszzl === 'number' ? `${f.gszzl.toFixed(2)}%` : f.gszzl ?? '—'} delta={Number(f.gszzl) || 0} />
|
||
</div>
|
||
<div style={{ marginBottom: 8 }} className="title">
|
||
<span>前10重仓股票</span>
|
||
<span className="muted">持仓占比</span>
|
||
</div>
|
||
{Array.isArray(f.holdings) && f.holdings.length ? (
|
||
<div className="list" role="list">
|
||
{f.holdings.map((h, idx) => (
|
||
<div className="item" role="listitem" key={idx}>
|
||
<span className="name">
|
||
{h.name ? h.name : h.code}
|
||
{h.code ? ` (${h.code})` : ''}
|
||
</span>
|
||
<span className="weight">{h.weight}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="muted">暂无重仓数据</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="footer">数据源：基金估值与重仓来自东方财富公开接口，可能存在延迟</div>
|
||
{settingsOpen && (
|
||
<div className="modal-overlay" role="dialog" aria-modal="true" aria-label="刷新频率设置" onClick={() => setSettingsOpen(false)}>
|
||
<div className="glass card modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="title" style={{ marginBottom: 12 }}>
|
||
<SettingsIcon width="20" height="20" />
|
||
<span>设置</span>
|
||
<span className="muted">配置刷新频率与数据源</span>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ marginBottom: 16 }}>
|
||
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>刷新频率</div>
|
||
<div className="chips" style={{ marginBottom: 12 }}>
|
||
{[10, 30, 60, 120, 300].map((s) => (
|
||
<button
|
||
key={s}
|
||
type="button"
|
||
className={`chip ${tempSeconds === s ? 'active' : ''}`}
|
||
onClick={() => setTempSeconds(s)}
|
||
aria-pressed={tempSeconds === s}
|
||
>
|
||
{s} 秒
|
||
</button>
|
||
))}
|
||
</div>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
min="5"
|
||
step="5"
|
||
value={tempSeconds}
|
||
onChange={(e) => setTempSeconds(Number(e.target.value))}
|
||
placeholder="自定义秒数"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group" style={{ marginBottom: 16 }}>
|
||
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>数据源模式</div>
|
||
<div className="chips" style={{ marginBottom: 12 }}>
|
||
<button
|
||
type="button"
|
||
className={`chip ${!tempUseJsonp ? 'active' : ''}`}
|
||
onClick={() => setTempUseJsonp(false)}
|
||
>
|
||
后端 API (推荐)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`chip ${tempUseJsonp ? 'active' : ''}`}
|
||
onClick={() => setTempUseJsonp(true)}
|
||
>
|
||
JSONP 直连 (免跨域)
|
||
</button>
|
||
</div>
|
||
{!tempUseJsonp && (
|
||
<div style={{ marginTop: 8 }}>
|
||
<div className="muted" style={{ marginBottom: 4, fontSize: '0.75rem' }}>API 基础地址 (绝对路径)</div>
|
||
<input
|
||
className="input"
|
||
type="text"
|
||
value={tempApiBase}
|
||
onChange={(e) => setTempApiBase(e.target.value)}
|
||
placeholder="/api 或 https://your-backend.com/api"
|
||
/>
|
||
<div className="muted" style={{ marginTop: 4, fontSize: '0.7rem' }}>
|
||
部署到 GitHub Pages 时，请填写完整的后端域名地址。
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="row" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
|
||
<button className="button" onClick={saveSettings}>保存并关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|