417 lines
22 KiB
JavaScript
417 lines
22 KiB
JavaScript
window.XiaobaiPageModules.register("dragon_tiger", ["dragonView"], {
|
||
bind: bindDragonTigerEvents,
|
||
enter: ["loadDragonTiger"],
|
||
});
|
||
|
||
function selectDragonViewMode(mode) {
|
||
state.dragonViewMode = mode === "profiles" ? "profiles" : "daily";
|
||
document.querySelectorAll("[data-dragon-view-mode]").forEach((button) => {
|
||
const active = button.dataset.dragonViewMode === state.dragonViewMode;
|
||
button.classList.toggle("active", active);
|
||
button.setAttribute("aria-pressed", String(active));
|
||
});
|
||
if (state.dragonViewMode === "profiles") {
|
||
document.querySelector("#dragonDailyContent").hidden = true;
|
||
document.querySelector("#dragonEmptyState").hidden = true;
|
||
document.querySelector("#dragonProfilesContent").hidden = false;
|
||
if (state.hotMoneyProfiles) renderHotMoneyProfiles();
|
||
else loadHotMoneyProfiles();
|
||
} else {
|
||
document.querySelector("#dragonProfilesContent").hidden = true;
|
||
if (state.dragonTiger) renderDragonTiger();
|
||
else loadDragonTiger();
|
||
}
|
||
}
|
||
|
||
async function loadHotMoneyProfiles(force = false) {
|
||
if (!force && state.hotMoneyProfiles) {
|
||
renderHotMoneyProfiles();
|
||
return;
|
||
}
|
||
setStatus("正在加载游资档案");
|
||
try {
|
||
const query = new URLSearchParams();
|
||
if (force) query.set("force", "1");
|
||
const suffix = query.size ? `?${query}` : "";
|
||
state.hotMoneyProfiles = await apiRequest(`/api/dragon-tiger/profiles${suffix}`);
|
||
renderHotMoneyProfiles();
|
||
const count = number(state.hotMoneyProfiles.summary?.profile_count);
|
||
setStatus(`游资档案已加载 · 共 ${count} 位`);
|
||
} catch (error) {
|
||
showToast(error.message || "游资档案加载失败");
|
||
setStatus("游资档案加载失败");
|
||
}
|
||
}
|
||
|
||
function renderHotMoneyProfiles() {
|
||
const payload = state.hotMoneyProfiles;
|
||
if (!payload) return;
|
||
const profiles = payload.profiles || [];
|
||
const summary = payload.summary || {};
|
||
const query = state.hotMoneyProfileQuery;
|
||
const visible = profiles.filter((profile) => {
|
||
if (!query) return true;
|
||
return [profile.name, profile.description, ...(profile.organizations || [])]
|
||
.join(" ")
|
||
.toLocaleLowerCase("zh-CN")
|
||
.includes(query);
|
||
});
|
||
if (!visible.some((profile) => profile.id === state.selectedHotMoneyProfileId)) {
|
||
state.selectedHotMoneyProfileId = visible[0]?.id || "";
|
||
}
|
||
const selected = visible.find((profile) => profile.id === state.selectedHotMoneyProfileId) || null;
|
||
|
||
setText("dragonDateLabel", `收录 ${number(summary.profile_count)} 位`);
|
||
setText("hotMoneyProfileResultCount", query ? `${visible.length} / ${profiles.length} 位` : `${profiles.length} 位`);
|
||
document.querySelector("#hotMoneyProfileSummary").innerHTML = [
|
||
["收录游资", number(summary.profile_count)],
|
||
["已有简介", number(summary.described_count)],
|
||
["关联席位", number(summary.organization_count)],
|
||
].map(([label, value]) => `<span><small>${label}</small><strong>${value}</strong></span>`).join("");
|
||
|
||
const list = document.querySelector("#hotMoneyProfileList");
|
||
list.innerHTML = visible.length ? visible.map((profile, index) => `
|
||
<button class="hot-money-profile-row-v2 ${profile.id === state.selectedHotMoneyProfileId ? "selected" : ""}"
|
||
type="button" role="option" aria-selected="${profile.id === state.selectedHotMoneyProfileId}"
|
||
data-hot-money-profile="${escapeHtml(profile.id)}">
|
||
<span class="hot-money-profile-index-v2">${String(index + 1).padStart(2, "0")}</span>
|
||
<span class="hot-money-profile-monogram-v2">${escapeHtml(profile.name.slice(0, 2))}</span>
|
||
<span class="hot-money-profile-row-copy-v2">
|
||
<strong>${escapeHtml(profile.name)}</strong>
|
||
<small>${escapeHtml(profile.description || "暂未收录简介")}</small>
|
||
</span>
|
||
<span class="hot-money-profile-seat-count-v2">${number(profile.organization_count)} 席</span>
|
||
</button>`).join("") : `
|
||
<div class="hot-money-profile-list-empty-v2">
|
||
<i data-lucide="search-x" aria-hidden="true"></i>
|
||
<span>${profiles.length ? "没有符合条件的游资档案" : "游资名录暂不可用"}</span>
|
||
</div>`;
|
||
|
||
const detail = document.querySelector("#hotMoneyProfileDetail");
|
||
if (!selected) {
|
||
detail.innerHTML = `
|
||
<div class="hot-money-profile-empty-v2">
|
||
<i data-lucide="contact" aria-hidden="true"></i>
|
||
<strong>${profiles.length ? "选择一位游资查看档案" : "暂无可展示的游资档案"}</strong>
|
||
</div>`;
|
||
} else {
|
||
const organizations = selected.organizations || [];
|
||
detail.innerHTML = `
|
||
<header class="hot-money-profile-detail-head-v2">
|
||
<span class="hot-money-profile-avatar-v2">${escapeHtml(selected.name.slice(0, 2))}</span>
|
||
<div>
|
||
<small>游资档案</small>
|
||
<h3>${escapeHtml(selected.name)}</h3>
|
||
<span>${organizations.length ? `关联 ${organizations.length} 个公开席位` : "暂无关联席位"}</span>
|
||
</div>
|
||
</header>
|
||
<section class="hot-money-profile-section-v2">
|
||
<h4>人物简介</h4>
|
||
<p class="${selected.description ? "" : "is-empty"}">${escapeHtml(selected.description || "名录暂未收录该游资的公开简介。")}</p>
|
||
</section>
|
||
<section class="hot-money-profile-section-v2 hot-money-profile-org-section-v2">
|
||
<div class="hot-money-profile-section-title-v2">
|
||
<h4>关联营业部</h4>
|
||
<span>${organizations.length} 个</span>
|
||
</div>
|
||
<div class="hot-money-profile-organizations-v2">
|
||
${organizations.length ? organizations.map((organization) => `
|
||
<span><i data-lucide="building-2" aria-hidden="true"></i>${escapeHtml(organization)}</span>
|
||
`).join("") : '<p class="is-empty">名录暂未收录关联营业部。</p>'}
|
||
</div>
|
||
</section>
|
||
${payload.meta?.notice ? `<p class="hot-money-profile-notice-v2">${escapeHtml(payload.meta.notice)}</p>` : ""}`;
|
||
}
|
||
refreshIcons();
|
||
}
|
||
|
||
async function loadDragonTiger(force = false) {
|
||
const requestedDate = elements.tradeDate.value;
|
||
if (
|
||
!force
|
||
&& ["success", "empty", "partial", "unavailable"].includes(state.dragonTiger?.meta?.status)
|
||
&& (state.dragonTiger?.meta?.requested_date || state.dragonTiger?.meta?.trade_date) === requestedDate
|
||
) {
|
||
renderDragonTiger();
|
||
return;
|
||
}
|
||
setStatus("正在加载龙虎榜");
|
||
try {
|
||
const query = new URLSearchParams({ trade_date: requestedDate });
|
||
if (force) query.set("force", "1");
|
||
const payload = await apiRequest(`/api/dragon-tiger?${query}`);
|
||
state.dragonTiger = payload;
|
||
renderDragonTiger();
|
||
const statusLabel = payload.meta.status === "error"
|
||
? "龙虎榜数据暂不可用"
|
||
: payload.meta.status === "empty"
|
||
? "当日暂无公开游资明细"
|
||
: payload.meta.status === "partial"
|
||
? "当日有龙虎榜，暂无命名游资明细"
|
||
: payload.meta.status === "unavailable" ? "龙虎榜数据暂不可用" : "龙虎榜明细";
|
||
setStatus(`${statusLabel} · 龙虎榜已加载`);
|
||
} catch (error) {
|
||
showToast(error.message || "龙虎榜加载失败");
|
||
setStatus("龙虎榜加载失败");
|
||
}
|
||
}
|
||
|
||
function renderDragonTiger() {
|
||
const payload = state.dragonTiger;
|
||
if (!payload) return;
|
||
const summary = payload.summary || {};
|
||
if (state.dragonViewMode === "daily") setText("dragonDateLabel", `数据日期 ${payload.meta.trade_date}`);
|
||
const status = payload.meta?.status || "empty";
|
||
const hasRecognizedTraders = (payload.traders || []).some((item) => item.identity_type === "trader" && item.recognized !== false);
|
||
const showEmptyState = !hasRecognizedTraders
|
||
&& !(payload.unclassified_seats || []).length
|
||
&& ["empty", "error", "unavailable"].includes(status);
|
||
const dailyVisible = state.dragonViewMode === "daily";
|
||
document.querySelector("#dragonProfilesContent").hidden = dailyVisible;
|
||
document.querySelector("#dragonEmptyState").hidden = !dailyVisible || !showEmptyState;
|
||
document.querySelector("#dragonDailyContent").hidden = !dailyVisible || showEmptyState;
|
||
if (showEmptyState) {
|
||
const unavailable = ["error", "unavailable"].includes(status);
|
||
setText("dragonEmptyTitle", unavailable ? "龙虎榜数据暂不可用" : `${payload.meta?.trade_date || "该交易日"} 暂无龙虎榜明细`);
|
||
setText("dragonEmptyDescription", unavailable
|
||
? "当前数据暂未完成更新，可稍后重新检查或查看前一交易日。"
|
||
: "龙虎榜明细通常在交易日盘后陆续披露，可稍后刷新或查看前一交易日。");
|
||
}
|
||
document.querySelector("#dragonSummary").innerHTML = [
|
||
["上榜游资", `${number(summary.trader_count)} 位`, ""],
|
||
["操作明细", `${number(summary.operation_count)} 条`, ""],
|
||
["席位净买入", formatMoneyMillion(summary.seat_net_buy_million), changeClass(summary.seat_net_buy_million)],
|
||
["活跃股票", `${number(summary.active_stock_count)} 只`, ""],
|
||
].map(([label, value, className]) => `<div class="dragon-metric"><span>${label}</span><strong class="${className}">${value}</strong></div>`).join("");
|
||
|
||
renderDragonTraderList();
|
||
renderUnclassifiedSeats();
|
||
}
|
||
|
||
function renderDragonTraderList() {
|
||
const payload = state.dragonTiger;
|
||
if (!payload) return;
|
||
let traders = [...(payload.traders || [])].filter((item) => item.identity_type === "trader" && item.recognized !== false);
|
||
if (state.dragonFilter === "buy") traders = traders.filter((item) => number(item.net_buy_million) > 0);
|
||
if (state.dragonFilter === "sell") traders = traders.filter((item) => number(item.net_buy_million) < 0);
|
||
if (state.dragonFilter === "unclassified") traders = [];
|
||
if (state.dragonQuery) {
|
||
traders = traders.filter((item) => {
|
||
const searchable = [
|
||
item.name,
|
||
...(item.operations || []).flatMap((operation) => [operation.code, operation.name, operation.seat_name]),
|
||
].join(" ").toLowerCase();
|
||
return searchable.includes(state.dragonQuery);
|
||
});
|
||
}
|
||
|
||
const container = document.querySelector("#dragonTraderList");
|
||
let emptyMessage = "没有符合当前条件的游资操作";
|
||
if (!Array.isArray(payload.traders)) emptyMessage = "龙虎榜数据格式暂不可用，请稍后重试";
|
||
else if (["error", "unavailable"].includes(payload.meta?.status)) emptyMessage = "龙虎榜数据暂不可用，请稍后重试";
|
||
else if (payload.meta?.status === "empty") emptyMessage = "该交易日暂无游资每日明细";
|
||
else if (payload.meta?.status === "partial") emptyMessage = `当日有 ${number(payload.summary?.official_stock_count)} 只股票上榜，但暂无可识别的游资明细`;
|
||
if (!traders.some((item) => item.id === state.selectedDragonTraderId)) {
|
||
state.selectedDragonTraderId = traders[0]?.id || "";
|
||
}
|
||
const cardMarkup = traders.map((trader, index) => {
|
||
const description = trader.description || `${number(trader.stock_count)} 只股票，${number(trader.operation_count)} 笔操作`;
|
||
return `
|
||
<article class="dragon-trader-card dealing ${trader.id === state.selectedDragonTraderId ? "selected" : ""}" data-dragon-card="${escapeHtml(trader.id)}" aria-hidden="true" style="--deal-delay:${Math.min(index * 38, 650)}ms">
|
||
<span class="dragon-card-rank">${String(index + 1).padStart(2, "0")}</span>
|
||
<span class="dragon-card-monogram">${escapeHtml(trader.name.slice(0, 2))}</span>
|
||
<span class="dragon-card-copy"><strong>${escapeHtml(trader.name)}</strong><q title="${escapeHtml(description)}">${escapeHtml(description)}</q></span>
|
||
<span class="dragon-card-stats"><small>${number(trader.stock_count)} 股 · ${number(trader.operation_count)} 笔</small><b class="${changeClass(trader.net_buy_million)}">${formatMoneyMillion(trader.net_buy_million)}</b></span>
|
||
</article>`;
|
||
}).join("");
|
||
const hitZoneMarkup = traders.map((trader) => `
|
||
<button type="button" class="dragon-card-hit-zone" data-dragon-trader="${escapeHtml(trader.id)}" aria-label="查看 ${escapeHtml(trader.name)} 当日操作" aria-pressed="${trader.id === state.selectedDragonTraderId}"></button>
|
||
`).join("");
|
||
container.innerHTML = traders.length
|
||
? `${cardMarkup}<div class="dragon-card-hit-layer">${hitZoneMarkup}</div>`
|
||
: emptyStateHtml(state.dragonFilter === "unclassified" ? "待归类席位请在下方管理" : emptyMessage, { className: "dragon-empty" });
|
||
container.querySelectorAll("[data-dragon-card]").forEach((card) => {
|
||
card.addEventListener("animationend", () => card.classList.remove("dealing"), { once: true });
|
||
});
|
||
container.querySelectorAll("[data-dragon-trader]").forEach((hitZone) => {
|
||
const setHovered = (hovered) => {
|
||
container.querySelector(`[data-dragon-card="${CSS.escape(hitZone.dataset.dragonTrader)}"]`)?.classList.toggle("hovered", hovered);
|
||
};
|
||
hitZone.addEventListener("pointerenter", () => setHovered(true));
|
||
hitZone.addEventListener("pointerleave", () => setHovered(false));
|
||
hitZone.addEventListener("focus", () => setHovered(true));
|
||
hitZone.addEventListener("blur", () => setHovered(false));
|
||
hitZone.addEventListener("click", () => {
|
||
state.selectedDragonTraderId = hitZone.dataset.dragonTrader;
|
||
container.querySelectorAll("[data-dragon-card]").forEach((card) => {
|
||
card.classList.toggle("selected", card.dataset.dragonCard === state.selectedDragonTraderId);
|
||
});
|
||
container.querySelectorAll("[data-dragon-trader]").forEach((item) => {
|
||
item.setAttribute("aria-pressed", String(item.dataset.dragonTrader === state.selectedDragonTraderId));
|
||
});
|
||
renderDragonTraderDetail(traders.find((item) => item.id === state.selectedDragonTraderId));
|
||
});
|
||
});
|
||
requestAnimationFrame(() => layoutDragonCards(container));
|
||
renderDragonTraderDetail(traders.find((item) => item.id === state.selectedDragonTraderId));
|
||
}
|
||
|
||
function layoutDragonCards(container = document.querySelector("#dragonTraderList")) {
|
||
if (!container) return;
|
||
const cards = [...container.querySelectorAll(".dragon-trader-card")];
|
||
const hitZones = [...container.querySelectorAll(".dragon-card-hit-zone")];
|
||
if (!cards.length) return;
|
||
const compact = window.innerWidth <= 720;
|
||
const cardWidth = compact ? 148 : 176;
|
||
const available = Math.max(cardWidth, container.clientWidth - (compact ? 30 : 72));
|
||
const spread = Math.min(available - cardWidth, compact ? 310 : 1050);
|
||
const step = cards.length > 1 ? Math.min(cardWidth + 14, spread / (cards.length - 1)) : 0;
|
||
const center = (cards.length - 1) / 2;
|
||
container.style.setProperty("--dragon-card-width", `${cardWidth}px`);
|
||
cards.forEach((card, index) => {
|
||
const x = (index - center) * step;
|
||
card.style.setProperty("--card-x", `${x.toFixed(2)}px`);
|
||
card.style.setProperty("--card-rotation", "0deg");
|
||
card.style.setProperty("--card-y", "0px");
|
||
card.style.zIndex = String(index + 1);
|
||
const hitZone = hitZones[index];
|
||
if (hitZone) {
|
||
const zoneWidth = index === cards.length - 1 ? cardWidth : Math.max(18, step);
|
||
hitZone.style.left = `calc(50% + ${(x - cardWidth / 2).toFixed(2)}px)`;
|
||
hitZone.style.width = `${zoneWidth.toFixed(2)}px`;
|
||
}
|
||
});
|
||
}
|
||
|
||
function renderDragonTraderDetail(trader) {
|
||
const container = document.querySelector("#dragonTraderDetail");
|
||
if (!trader) {
|
||
container.hidden = true;
|
||
renderEmptyState(container, "选择一位游资查看操作明细", { className: "dragon-empty" });
|
||
return;
|
||
}
|
||
container.hidden = false;
|
||
container.innerHTML = `
|
||
<header class="dragon-detail-header">
|
||
<div><span>当日操作明细</span><h3>${escapeHtml(trader.name)}</h3><p>${escapeHtml(trader.description || "按当日公开龙虎榜席位汇总")}</p></div>
|
||
<dl><div><dt>买入</dt><dd class="up">${formatMoneyMillion(trader.buy_million)}</dd></div><div><dt>卖出</dt><dd class="down">${formatMoneyMillion(trader.sell_million)}</dd></div><div><dt>净额</dt><dd class="${changeClass(trader.net_buy_million)}">${formatMoneyMillion(trader.net_buy_million)}</dd></div></dl>
|
||
</header>
|
||
<div class="trader-operations table-frame tbl-wrap">
|
||
<table class="data-table tbl dragon-operation-table">
|
||
<colgroup><col class="dragon-col-index"><col class="dragon-col-stock"><col class="dragon-col-direction"><col class="dragon-col-number"><col class="dragon-col-number"><col class="dragon-col-number"><col class="dragon-col-number"><col class="dragon-col-seat"><col class="dragon-col-reason"></colgroup>
|
||
<thead><tr><th class="row-number num">序号</th><th>股票</th><th>方向</th><th class="number num">涨幅（%）</th><th class="number num">买入（百万）</th><th class="number num">卖出（百万）</th><th class="number num">净额（百万）</th><th>关联席位</th><th class="reason-column">标签 / 上榜原因</th></tr></thead>
|
||
<tbody>${(trader.operations || []).map((operation, index) => `
|
||
<tr data-code="${escapeHtml(operation.code)}">
|
||
<td class="row-number num">${index + 1}</td>
|
||
<td><strong class="sname">${escapeHtml(operation.name)}</strong><span class="scode">${escapeHtml(operation.code)}</span></td>
|
||
<td><span class="direction-label ${changeClass(operation.net_buy_million)}">${escapeHtml(operation.direction)}</span></td>
|
||
<td class="number num ${operation.change == null ? "" : changeClass(operation.change)}">${operation.change == null ? "" : signed(operation.change)}</td>
|
||
<td class="number num">${operation.buy_million == null ? "" : formatNumber(operation.buy_million, 2)}</td>
|
||
<td class="number num">${operation.sell_million == null ? "" : formatNumber(operation.sell_million, 2)}</td>
|
||
<td class="number num ${operation.net_buy_million == null ? "" : changeClass(operation.net_buy_million)}">${operation.net_buy_million == null ? "" : signed(operation.net_buy_million)}</td>
|
||
<td class="seat-cell" title="${escapeHtml(operation.seat_name)}">${escapeHtml(operation.seat_name)}</td>
|
||
<td class="reason-column" title="${escapeHtml([operation.tag, operation.reason].filter((item) => item && item !== "--").join(" · "))}">${escapeHtml(operation.tag && operation.tag !== "--" ? operation.tag : operation.reason && operation.reason !== "--" ? operation.reason : "")}</td>
|
||
</tr>`).join("")}</tbody>
|
||
</table>
|
||
</div>`;
|
||
bindStockRows(container);
|
||
markAutoSortableHeaders(container);
|
||
}
|
||
|
||
function renderUnclassifiedSeats() {
|
||
const seats = state.dragonTiger?.unclassified_seats || [];
|
||
const canManage = state.user?.role === "admin";
|
||
document.querySelector("#dragonUnclassifiedSection").hidden = !canManage || seats.length === 0;
|
||
document.querySelector("#dragonUnclassifiedFilter").hidden = !canManage || seats.length === 0;
|
||
if (!seats.length && state.dragonFilter === "unclassified") {
|
||
state.dragonFilter = "all";
|
||
document.querySelectorAll("[data-dragon-filter]").forEach((button) => {
|
||
button.classList.toggle("active", button.dataset.dragonFilter === "all");
|
||
});
|
||
renderDragonTraderList();
|
||
}
|
||
setText("unclassifiedCount", `${seats.length} 个`);
|
||
const list = document.querySelector("#unclassifiedSeatList");
|
||
list.innerHTML = seats.map((seat, index) => `
|
||
<form class="unclassified-seat-row" data-unclassified-index="${index}">
|
||
<span class="unclassified-seat-name" title="${escapeHtml(seat.seat_name)}">${escapeHtml(seat.seat_name)}</span>
|
||
<span class="unclassified-seat-stats">${number(seat.operation_count)} 笔 · ${number(seat.stock_count)} 股</span>
|
||
<strong class="${changeClass(seat.net_buy_million)}">${formatMoneyMillion(seat.net_buy_million)}</strong>
|
||
<input type="text" maxlength="50" placeholder="输入游资名" aria-label="${escapeHtml(seat.seat_name)}的游资名" required>
|
||
<button class="button" type="submit">归类</button>
|
||
</form>
|
||
`).join("") || emptyStateHtml("当前席位均已归类");
|
||
list.querySelectorAll(".unclassified-seat-row").forEach((form) => {
|
||
form.addEventListener("submit", saveSeatAlias);
|
||
});
|
||
}
|
||
|
||
function dragonIdentityLabel(type) {
|
||
return { trader: "游资", institution: "机构", channel: "通道", unclassified: "待归类" }[type] || "席位";
|
||
}
|
||
|
||
async function saveSeatAlias(event) {
|
||
event.preventDefault();
|
||
const form = event.currentTarget;
|
||
const seat = state.dragonTiger?.unclassified_seats?.[number(form.dataset.unclassifiedIndex)];
|
||
const alias = form.querySelector("input").value.trim();
|
||
if (!seat || !alias) {
|
||
showToast("请输入游资名");
|
||
return;
|
||
}
|
||
const button = form.querySelector("button");
|
||
button.disabled = true;
|
||
try {
|
||
await apiRequest("/api/seat-aliases", "POST", { seat_name: seat.seat_name, alias });
|
||
state.dragonTiger = null;
|
||
await loadDragonTiger();
|
||
showToast(`已将席位归类为 ${alias}`);
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
|
||
function bindDragonTigerEvents() {
|
||
document.querySelector("#dragonRefreshButton").addEventListener("click", () => {
|
||
if (state.dragonViewMode === "profiles") loadHotMoneyProfiles(true);
|
||
else loadDragonTiger(true);
|
||
});
|
||
document.querySelector("#dragonEmptyRefreshButton").addEventListener("click", () => loadDragonTiger(true));
|
||
document.querySelector("#dragonPreviousButton").addEventListener("click", () => shiftDate(-1));
|
||
document.querySelector("#dragonExportButton").addEventListener("click", () => {
|
||
if (state.dragonViewMode === "profiles") exportHotMoneyProfiles();
|
||
else exportDragonTiger();
|
||
});
|
||
document.querySelectorAll("[data-dragon-view-mode]").forEach((button) => {
|
||
button.addEventListener("click", () => selectDragonViewMode(button.dataset.dragonViewMode));
|
||
});
|
||
document.querySelector("#dragonSearch").addEventListener("input", (event) => {
|
||
state.dragonQuery = event.target.value.trim().toLowerCase();
|
||
renderDragonTraderList();
|
||
});
|
||
document.querySelectorAll("[data-dragon-filter]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
state.dragonFilter = button.dataset.dragonFilter;
|
||
document.querySelectorAll("[data-dragon-filter]").forEach((item) => {
|
||
item.classList.toggle("active", item === button);
|
||
});
|
||
renderDragonTraderList();
|
||
});
|
||
});
|
||
document.querySelector("#hotMoneyProfileSearch").addEventListener("input", (event) => {
|
||
state.hotMoneyProfileQuery = event.target.value.trim().toLocaleLowerCase("zh-CN");
|
||
renderHotMoneyProfiles();
|
||
});
|
||
document.querySelector("#hotMoneyProfileList").addEventListener("click", (event) => {
|
||
const button = event.target.closest("[data-hot-money-profile]");
|
||
if (!button) return;
|
||
state.selectedHotMoneyProfileId = button.dataset.hotMoneyProfile;
|
||
renderHotMoneyProfiles();
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
if (state.activeView === "dragonView") layoutDragonCards();
|
||
});
|
||
}
|