' +
'
' +
@@ -750,50 +860,287 @@
});
}
+ function chartCaptionHtml(tab) {
+ const detail = state.detail;
+ const payload = detail && detail.payload ? detail.payload : {};
+ const meta = payload.meta || {};
+ if (tab === "daily") {
+ const bars = (payload.prices || []).slice(-48);
+ const last = bars.length ? bars[bars.length - 1].trade_date : "";
+ return "日线 · 近48根 · 至 " + (displayCompactDate(last) || "--");
+ }
+ const d = displayCompactDate(meta.intraday_trade_date) || displayCompactDate(meta.trade_date);
+ return "分时 · " + (d || "--");
+ }
+
+ function switchChartTab(tab) {
+ const detail = state.detail;
+ if (!detail || !detail.payload) return;
+ detail.tab = tab;
+ const payload = detail.payload;
+ const meta = payload.meta || {};
+ const chart = document.getElementById("m-detail-chart");
+ if (chart) {
+ if (tab === "daily") {
+ chart.innerHTML = dailyChart(payload);
+ } else if (meta.intraday_status === "available") {
+ chart.innerHTML = intradayChart(payload);
+ } else {
+ chart.innerHTML = emptyChart(meta.intraday_notice || "分时数据暂不可用");
+ }
+ }
+ const caption = document.getElementById("m-detail-caption");
+ if (caption) caption.textContent = chartCaptionHtml(tab);
+ document.querySelectorAll(".m-detail-tab").forEach(function (btn) {
+ const active = btn.dataset.chartTab === tab;
+ btn.classList.toggle("active", active);
+ btn.setAttribute("aria-selected", String(active));
+ });
+ }
+
+ function updateStarButton() {
+ const btn = document.querySelector(".m-detail-star");
+ if (!btn) return;
+ const watched = Boolean(state.detail && state.detail.watchlist);
+ btn.classList.toggle("is-added", watched);
+ btn.setAttribute("aria-label", watched ? "移出自选" : "加入自选");
+ btn.setAttribute("aria-pressed", String(watched));
+ btn.innerHTML = starIcon(watched);
+ btn.disabled = false;
+ }
+
+ function toggleWatch() {
+ const detail = state.detail;
+ if (!detail || !detail.code) return;
+ const btn = document.querySelector(".m-detail-star");
+ const adding = !detail.watchlist;
+ const code = detail.code;
+ const url = adding ? "/api/watchlist" : "/api/watchlist/" + encodeURIComponent(code);
+ const method = adding ? "POST" : "DELETE";
+ const body = adding ? { code: code, name: detail.name || code, sector: detail.sector || "" } : null;
+ if (btn) btn.disabled = true;
+ global.MobileAPI.request(url, method, body).then(function () {
+ detail.watchlist = adding;
+ updateStarButton();
+ showToast(adding ? "已加入自选" : "已移出自选");
+ }).catch(function () {
+ updateStarButton();
+ showToast("操作失败，请重试");
+ });
+ }
+
+ function showToast(message) {
+ const root = document.getElementById("m-sheet-root");
+ if (!root) return;
+ let toast = document.getElementById("m-toast");
+ if (!toast) {
+ toast = document.createElement("div");
+ toast.id = "m-toast";
+ toast.className = "m-toast";
+ root.appendChild(toast);
+ }
+ toast.textContent = message;
+ toast.classList.remove("is-visible");
+ void toast.offsetWidth;
+ toast.classList.add("is-visible");
+ global.clearTimeout(toast._timer);
+ toast._timer = global.setTimeout(function () {
+ toast.classList.remove("is-visible");
+ }, 1500);
+ }
+
function renderDetail(payload) {
const body = document.getElementById("m-detail-sheet-body");
if (!body) return;
const stock = payload.stock || {};
- const prices = payload.prices || [];
const meta = payload.meta || {};
const name = stock.name && stock.name !== "--" ? stock.name : "--";
const price = number(stock.price);
const change = number(stock.change);
const industry = stock.industry && stock.industry !== "其他" ? stock.industry : (stock.sector || "其他");
- const spark = sparklineHtml(prices);
+ state.detail = {
+ code: stock.code || "",
+ name: name === "--" ? "" : name,
+ sector: industry === "其他" ? "" : industry,
+ watchlist: Boolean(stock.watchlist),
+ tab: "intraday",
+ payload: payload,
+ };
+
+ const headName = document.querySelector(".m-detail-head-name");
+ const headCode = document.querySelector(".m-detail-head-code");
+ if (headName) headName.textContent = name;
+ if (headCode) headCode.textContent = stock.code || "";
+ updateStarButton();
+
+ const intradayOk = meta.intraday_status === "available";
+ const chartHtml = intradayOk ? intradayChart(payload) : emptyChart(meta.intraday_notice || "分时数据暂不可用");
body.innerHTML =
'
' +
- '
' + escapeHtml(name) + '' + escapeHtml(stock.code || "") + "
" +
'
' +
'' + (price ? formatNumber(price, 2) : "--") + "" +
'' + (change > 0 ? "+" : "") + formatNumber(change, 2) + "%" +
"
" +
- '
' + escapeHtml(industry) + " · " + escapeHtml(displayCompactDate(meta.trade_date) || "--") + "
" +
+ '
' + escapeHtml(industry) + " · " + escapeHtml(displayCompactDate(meta.trade_date) || "--") + " 收盘
" +
"
" +
- spark +
- '
' + escapeHtml(meta.notice || "数据来源：本地行情") + "
";
+ '
' +
+ '' +
+ '' +
+ '' + escapeHtml(chartCaptionHtml("intraday")) + "" +
+ "
" +
+ '
' + chartHtml + "
" +
+ '
点按图面可读数值 · 数据来源：本地行情
';
}
- function sparklineHtml(prices) {
- const closes = (prices || []).map(function (bar) { return number(bar.close); }).filter(function (v) { return v > 0; });
- if (closes.length < 2) return "";
- const min = Math.min.apply(null, closes);
- const max = Math.max.apply(null, closes);
- const range = max - min || 1;
- const width = 320;
- const height = 96;
- const step = width / (closes.length - 1);
- const points = closes.map(function (value, i) {
- const x = Math.round(i * step);
- const y = Math.round(height - (value - min) / range * height);
- return x + "," + y;
+ /* ---------------------------------------------------------------- charts */
+
+ function emptyChart(message) {
+ return '
' + escapeHtml(message || "数据暂不可用") + "
";
+ }
+
+ function svgAxisText(x, y, anchor, cls, content) {
+ return '
' + escapeHtml(content) + "";
+ }
+
+ function dateMMDD(value) {
+ const s = String(value || "");
+ return s.length >= 10 ? s.slice(5, 10) : s;
+ }
+
+ function movingAverage(values, period) {
+ const out = [];
+ for (let i = 0; i < values.length; i += 1) {
+ if (i < period - 1) { out.push(null); continue; }
+ let sum = 0;
+ for (let j = i - period + 1; j <= i; j += 1) sum += values[j];
+ out.push(sum / period);
+ }
+ return out;
+ }
+
+ function maPath(ma, xf, yf, cls) {
+ const pts = [];
+ for (let i = 0; i < ma.length; i += 1) {
+ if (ma[i] == null) continue;
+ pts.push(xf(i).toFixed(1) + " " + yf(ma[i]).toFixed(1));
+ }
+ return pts.length > 1 ? '
' : "";
+ }
+
+ function intradayChart(payload) {
+ const W = 360, H = 240, padL = 8, padR = 52, padT = 10, padB = 22;
+ const pw = W - padL - padR;
+ const ph = H - padT - padB;
+ const points = payload.intraday || [];
+ const meta = payload.meta || {};
+ const prevClose = number(meta.intraday_previous_close) || (points.length ? number(points[0].close) : 0);
+
+ if (!points.length || prevClose <= 0) {
+ return emptyChart(meta.intraday_notice || "分时数据暂不可用");
+ }
+
+ let maxPct = 2;
+ points.forEach(function (p) {
+ const cp = number(p.close);
+ const ap = number(p.average);
+ if (cp > 0) maxPct = Math.max(maxPct, Math.abs((cp - prevClose) / prevClose * 100));
+ if (ap > 0) maxPct = Math.max(maxPct, Math.abs((ap - prevClose) / prevClose * 100));
+ });
+ maxPct = Math.max(0.01, Math.ceil(maxPct * 100) / 100);
+
+ function x(i) {
+ return padL + (points.length <= 1 ? pw / 2 : i / (points.length - 1) * pw);
+ }
+ function y(close) {
+ const pct = (close - prevClose) / prevClose * 100;
+ return padT + (maxPct - pct) / (2 * maxPct) * ph;
+ }
+
+ const pricePath = points.map(function (p, i) {
+ return (i ? "L" : "M") + x(i).toFixed(1) + " " + y(number(p.close)).toFixed(1);
}).join(" ");
- const up = closes[closes.length - 1] >= closes[0];
- return '
";
+
+ const avgPts = [];
+ points.forEach(function (p, i) {
+ const a = number(p.average);
+ if (a <= 0) return;
+ avgPts.push((avgPts.length ? "L" : "M") + x(i).toFixed(1) + " " + y(a).toFixed(1));
+ });
+ const avgPath = avgPts.join(" ");
+
+ const y0 = y(prevClose).toFixed(1);
+ const right = W - 4;
+
+ return '
";
+ }
+
+ function dailyChart(payload) {
+ const W = 360, H = 240, padL = 8, padR = 52, padT = 10, padB = 22;
+ const pw = W - padL - padR;
+ const ph = H - padT - padB;
+ const prices = (payload.prices || []).slice(-48);
+
+ if (prices.length < 2) return emptyChart("日线数据暂不可用");
+
+ const closes = prices.map(function (b) { return number(b.close); });
+ const highs = prices.map(function (b) { return number(b.high); });
+ const lows = prices.map(function (b) { return number(b.low); });
+ let max = Math.max.apply(null, highs);
+ let min = Math.min.apply(null, lows);
+ if (max - min <= 0) { max += 1; min -= 1; }
+ const padRange = (max - min) * 0.08;
+ max += padRange;
+ min -= padRange;
+
+ function x(i) { return padL + (i + 0.5) / prices.length * pw; }
+ function y(v) { return padT + (max - v) / (max - min) * ph; }
+
+ const candleW = Math.max(2, Math.min(7, pw / prices.length * 0.7));
+ const candles = prices.map(function (b, i) {
+ const up = number(b.close) >= number(b.open);
+ const cls = "m-chart-candle" + (up ? " is-up" : " is-down");
+ const cx = x(i).toFixed(1);
+ const bodyTop = y(Math.max(number(b.open), number(b.close))).toFixed(1);
+ const bodyH = Math.max(1, Math.abs(y(number(b.open)) - y(number(b.close)))).toFixed(1);
+ const bx = (x(i) - candleW / 2).toFixed(1);
+ return '
' +
+ '
';
+ }).join("");
+
+ const ma5 = movingAverage(closes, 5);
+ const ma10 = movingAverage(closes, 10);
+
+ const firstDate = prices[0].trade_date;
+ const midDate = prices[Math.floor(prices.length / 2)].trade_date;
+ const lastDate = prices[prices.length - 1].trade_date;
+ const right = W - 4;
+
+ return '
' +
+ 'MA5' +
+ 'MA10' +
+ "
" +
+ '
";
}
/* ---------------------------------------------------------------- events */
@@ -808,20 +1155,24 @@
const retry = event.target.closest("[data-action=retry]");
if (retry) { load(); return; }
+ const sortHead = event.target.closest("[data-sort-key]");
+ if (sortHead) { toggleSort(sortHead.dataset.sortKey); return; }
+
+ const watchBtn = event.target.closest("[data-action=watch]");
+ if (watchBtn) { toggleWatch(); return; }
+
+ const chartTab = event.target.closest("[data-chart-tab]");
+ if (chartTab) { switchChartTab(chartTab.dataset.chartTab); return; }
+
const sourceTab = event.target.closest("[data-action=source]");
if (sourceTab) {
state.popularitySource = sourceTab.dataset.source || "combined";
- const cfg = pageConfig(state.key);
- if (cfg) {
- const rows = prepareRows(state.key);
- const scroll = document.getElementById("m-table-scroll");
- if (scroll) scroll.innerHTML = rows.length ? buildTable(columnsFor(cfg), rows) : emptyHtml();
- document.querySelectorAll(".m-source-tab").forEach(function (tab) {
- const active = tab.dataset.source === state.popularitySource;
- tab.classList.toggle("active", active);
- tab.setAttribute("aria-selected", String(active));
- });
- }
+ renderTableBody();
+ document.querySelectorAll(".m-source-tab").forEach(function (tab) {
+ const active = tab.dataset.source === state.popularitySource;
+ tab.classList.toggle("active", active);
+ tab.setAttribute("aria-selected", String(active));
+ });
return;
}