521 lines
19 KiB
JavaScript
521 lines
19 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);
|
||
const [useJsonp, setUseJsonp] = useState(false);
|
||
const [apiBase, setApiBase] = useState('/api');
|
||
const [tempApiBase, setTempApiBase] = useState('/api');
|
||
|
||
const buildUrl = (path) => {
|
||
const base = (apiBase || '/api').replace(/\/$/, '');
|
||
const p = path.startsWith('/') ? path : `/${path}`;
|
||
return `${base}${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');
|
||
if (savedApi && typeof savedApi === 'string') {
|
||
setApiBase(savedApi);
|
||
setTempApiBase(savedApi);
|
||
}
|
||
const savedJsonp = localStorage.getItem('useJsonp');
|
||
if (savedJsonp === 'true') setUseJsonp(true);
|
||
} 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]);
|
||
|
||
const loadScript = (src, timeoutMs = 8000) => {
|
||
return new Promise((resolve, reject) => {
|
||
const s = document.createElement('script');
|
||
s.src = src;
|
||
s.async = true;
|
||
let done = false;
|
||
const clear = () => {
|
||
if (s.parentNode) s.parentNode.removeChild(s);
|
||
};
|
||
const timer = setTimeout(() => {
|
||
if (done) return;
|
||
done = true;
|
||
clear();
|
||
reject(new Error('JSONP 加载超时'));
|
||
}, timeoutMs);
|
||
s.onload = () => {
|
||
if (done) return;
|
||
done = true;
|
||
clearTimeout(timer);
|
||
clear();
|
||
resolve();
|
||
};
|
||
s.onerror = () => {
|
||
if (done) return;
|
||
done = true;
|
||
clearTimeout(timer);
|
||
clear();
|
||
reject(new Error('JSONP 加载失败'));
|
||
};
|
||
document.head.appendChild(s);
|
||
});
|
||
};
|
||
|
||
const getFundGZByJsonp = async (c) => {
|
||
return new Promise(async (resolve, reject) => {
|
||
const prev = window.jsonpgz;
|
||
try {
|
||
window.jsonpgz = (json) => {
|
||
try {
|
||
const gszzlNum = Number(json.gszzl);
|
||
const data = {
|
||
code: json.fundcode,
|
||
name: json.name,
|
||
dwjz: json.dwjz,
|
||
gsz: json.gsz,
|
||
gztime: json.gztime,
|
||
gszzl: Number.isFinite(gszzlNum) ? gszzlNum : json.gszzl
|
||
};
|
||
resolve(data);
|
||
} catch (e) {
|
||
reject(e);
|
||
} finally {
|
||
window.jsonpgz = prev;
|
||
}
|
||
};
|
||
await loadScript(`https://fundgz.1234567.com.cn/js/${encodeURIComponent(c)}.js`);
|
||
// 如果脚本未触发回调
|
||
setTimeout(() => {
|
||
reject(new Error('估值 JSONP 未返回'));
|
||
window.jsonpgz = prev;
|
||
}, 0);
|
||
} catch (e) {
|
||
window.jsonpgz = prev;
|
||
reject(e);
|
||
}
|
||
});
|
||
};
|
||
|
||
const stripHtml = (s) => s.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
|
||
const parseHoldingsHtml = (html) => {
|
||
const list = [];
|
||
const tableMatch = html.match(/<table[\s\S]*?<\/table>/i);
|
||
const table = tableMatch ? tableMatch[0] : html;
|
||
const rows = table.match(/<tr[\s\S]*?<\/tr>/gi) || [];
|
||
for (const r of rows) {
|
||
const cells = [...r.matchAll(/<td[\s\S]*?>([\s\S]*?)<\/td>/gi)].map((m) => stripHtml(m[1]));
|
||
if (!cells.length) continue;
|
||
const codeIdx = cells.findIndex((c) => /^\d{6}$/.test(c));
|
||
const weightIdx = cells.findIndex((c) => /\d+(?:\.\d+)?\s*%/.test(c));
|
||
const code = codeIdx >= 0 ? cells[codeIdx] : null;
|
||
const name = codeIdx >= 0 && codeIdx + 1 < cells.length ? cells[codeIdx + 1] : null;
|
||
const weight = weightIdx >= 0 ? cells[weightIdx].replace(/\s+/g, '') : null;
|
||
if (code && (name || name === '') && weight) {
|
||
list.push({ code, name, weight });
|
||
} else {
|
||
const anchorNameMatch = r.match(/<a[^>]*?>([^<]+)<\/a>/i);
|
||
const altName = anchorNameMatch ? stripHtml(anchorNameMatch[1]) : null;
|
||
const codeMatch = r.match(/(\d{6})/);
|
||
const weightMatch = r.match(/(\d+(?:\.\d+)?)\s*%/);
|
||
const fallbackCode = codeMatch ? codeMatch[1] : null;
|
||
const fallbackWeight = weightMatch ? `${weightMatch[1]}%` : null;
|
||
if ((code || fallbackCode) && (name || altName) && (weight || fallbackWeight)) {
|
||
list.push({ code: code || fallbackCode, name: name || altName, weight: weight || fallbackWeight });
|
||
}
|
||
}
|
||
}
|
||
return list.slice(0, 10);
|
||
};
|
||
|
||
const getHoldingsByJsonp = async (c) => {
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
// Eastmoney 返回形如 var apidata={content:'<table>...</table>'}
|
||
// 先清理可能残留的变量
|
||
delete window.apidata;
|
||
await loadScript(`https://fundf10.eastmoney.com/FundArchivesDatas.aspx?type=jjcc&code=${encodeURIComponent(c)}&topline=10&year=&month=&rt=${Date.now()}`);
|
||
const content = window.apidata?.content || '';
|
||
const m = content.match(/<table[\s\S]*<\/table>/i) || content.match(/content:\s*'([\s\S]*?)'/i);
|
||
const html = m ? (m[0].startsWith('<table') ? m[0] : m[1]) : content;
|
||
const list = parseHoldingsHtml(html || '');
|
||
resolve(list);
|
||
} catch (e) {
|
||
// 兜底：无法解析时返回空数组
|
||
resolve([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
const fetchFundData = async (c) => {
|
||
if (useJsonp) {
|
||
const gz = await getFundGZByJsonp(c);
|
||
const holdings = await getHoldingsByJsonp(c);
|
||
return { ...gz, holdings };
|
||
}
|
||
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);
|
||
localStorage.setItem('useJsonp', useJsonp ? 'true' : 'false');
|
||
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="title" style={{ marginBottom: 8 }}>
|
||
<span>数据源</span>
|
||
<span className="muted">跨域环境推荐 JSONP 直连</span>
|
||
</div>
|
||
<div className="chips" style={{ marginBottom: 12 }}>
|
||
{[
|
||
{ key: 'api', label: '后端 API（推荐）', active: !useJsonp },
|
||
{ key: 'jsonp', label: 'JSONP 直连', active: useJsonp }
|
||
].map((opt) => (
|
||
<button
|
||
key={opt.key}
|
||
type="button"
|
||
className={`chip ${opt.active ? 'active' : ''}`}
|
||
onClick={() => setUseJsonp(opt.key === 'jsonp')}
|
||
aria-pressed={opt.active}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{!useJsonp && (
|
||
<div className="form" style={{ marginBottom: 12 }}>
|
||
<label htmlFor="api-base" className="muted" style={{ position: 'absolute', left: -9999 }}>
|
||
API 基础地址
|
||
</label>
|
||
<input
|
||
id="api-base"
|
||
className="input"
|
||
type="text"
|
||
value={tempApiBase}
|
||
onChange={(e) => setTempApiBase(e.target.value)}
|
||
placeholder="/api 或 https://你的域名/api"
|
||
/>
|
||
</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>
|
||
<form onSubmit={saveSettings}>
|
||
<div className="form" style={{ marginBottom: 12 }}>
|
||
<label htmlFor="refresh-seconds" className="muted" style={{ position: 'absolute', left: -9999 }}>
|
||
自定义刷新秒数
|
||
</label>
|
||
<input
|
||
id="refresh-seconds"
|
||
className="input"
|
||
type="number"
|
||
min="5"
|
||
step="5"
|
||
value={tempSeconds}
|
||
onChange={(e) => setTempSeconds(Number(e.target.value))}
|
||
placeholder="秒数（≥5）"
|
||
/>
|
||
<button className="button" type="submit">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|