refactor: establish standalone application boundary
This commit is contained in:
leefer
+2305
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,74 @@
|
||||
<section id="auctionView" class="workspace-view page redesigned-auction-view">
|
||||
<header class="auction-page-head-v2 auc-head">
|
||||
<div class="auction-title-cluster">
|
||||
<div class="auction-title-line"><h2>集合竞价中心</h2><span id="auctionDateLabel">--</span></div>
|
||||
<div id="auctionPhaseNotice" class="auction-phase-notice-v2" data-phase="archive" role="status" aria-live="polite">
|
||||
<span class="auction-phase-marker" aria-hidden="true"></span>
|
||||
<strong id="auctionPhaseTitle">竞价状态</strong>
|
||||
<span id="auctionPhaseDetail">正在确认当前竞价阶段</span>
|
||||
<time id="auctionPhaseTime">--</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auction-header-actions-v2">
|
||||
<button id="auctionRefreshButton" class="auction-refresh-button" type="button" hidden><i data-lucide="refresh-cw"></i>刷新竞价</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="auction-workspace-v2 auc-grid">
|
||||
<section class="auction-primary-card card" aria-labelledby="auctionWorkspaceTitle">
|
||||
<div class="visually-hidden"><h3 id="auctionWorkspaceTitle">重点异动</h3><span id="auctionWorkspaceSubtitle">优先查看市场核心与显著预期差</span></div>
|
||||
<div class="auction-tabs-v2 tabs" role="tablist" aria-label="竞价数据集">
|
||||
<button class="active" type="button" role="tab" aria-selected="true" data-auction-dataset="focus">重点异动 <strong id="auctionFocusCount">0</strong></button>
|
||||
<button type="button" role="tab" aria-selected="false" data-auction-dataset="watchlist">我的自选 <strong id="auctionWatchlistCount">0</strong></button>
|
||||
<button type="button" role="tab" aria-selected="false" data-auction-dataset="all">全部候选 <strong id="auctionAllCount">0</strong></button>
|
||||
<button type="button" role="tab" aria-selected="false" data-auction-dataset="onePrice">竞价一字 <strong id="auctionOnePriceCount">0</strong></button>
|
||||
<div id="auctionSummary" class="auction-summary-v2" aria-live="polite"></div>
|
||||
</div>
|
||||
<div id="auctionExpectationFilterbar" class="auction-tools-v2 tbl-tools">
|
||||
<div id="auctionExpectationControls" class="auction-expectation-v2">
|
||||
<span>预期筛选</span>
|
||||
<div class="auction-filter-segments seg" role="group" aria-label="竞价预期差筛选">
|
||||
<button class="active" type="button" data-auction-filter="all">全部</button>
|
||||
<button type="button" data-auction-filter="above">超预期</button>
|
||||
<button type="button" data-auction-filter="matched">符合预期</button>
|
||||
<button type="button" data-auction-filter="below">低于预期</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auction-tool-actions">
|
||||
<label class="auction-search-v2 search"><i data-lucide="search" aria-hidden="true"></i><span class="visually-hidden">搜索竞价候选</span><input id="auctionSearch" type="search" placeholder="代码、名称或行业"></label>
|
||||
<button id="auctionExportButton" class="auction-export-button" type="button">导出 CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auction-table-frame-v2 tbl-wrap">
|
||||
<table id="auctionTable" class="data-table tbl auction-table-v2">
|
||||
<thead><tr id="auctionTableHead"></tr></thead>
|
||||
<tbody id="auctionTableBody"></tbody>
|
||||
</table>
|
||||
<div id="auctionEmpty" class="empty-state" hidden>没有符合条件的竞价候选</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="auction-side-v2" aria-label="竞价旁证">
|
||||
<section class="auction-side-card auction-theme-card card" aria-labelledby="auctionThemeTitle">
|
||||
<header class="auction-card-head-v2 card-h">
|
||||
<div><h3 id="auctionThemeTitle">题材承接</h3><span>昨日强势方向</span></div>
|
||||
<span id="auctionThemeBaseline" class="auction-card-tag">--</span>
|
||||
</header>
|
||||
<div id="auctionThemeCarry" class="auction-theme-list-v2"></div>
|
||||
<div class="auction-new-theme-v2"><strong>今日新线索</strong><div id="auctionNewThemes" class="auction-theme-chips-v2"></div></div>
|
||||
</section>
|
||||
|
||||
<section class="auction-side-card auction-volume-card card" aria-labelledby="auctionAmountTitle">
|
||||
<header class="auction-card-head-v2 card-h">
|
||||
<div><h3 id="auctionAmountTitle">竞价成交额对比</h3></div>
|
||||
<span class="auction-card-tag">近 10 个交易日</span>
|
||||
</header>
|
||||
<div class="auction-volume-body">
|
||||
<div class="auction-volume-summary"><strong id="auctionAmountValue" class="auction-amount-value-v2">--</strong><div id="auctionAmountCompare" class="auction-amount-compare-v2"></div></div>
|
||||
<div id="auctionAmountTrend" class="auction-amount-trend-v2" aria-label="近十个交易日集合竞价成交额"></div>
|
||||
</div>
|
||||
<div class="auction-volume-legend"><span><i></i>历史交易日</span><span><i class="current"></i>当日</span><span><i class="average"></i>5 日均值</span></div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,9 +1,9 @@
|
||||
window.XiaobaiPageModules.register("auction", ["auctionView"], {
|
||||
bind: bindAuctionEvents,
|
||||
enter: ["loadAuction"],
|
||||
leave: ["clearAuction"],
|
||||
});
|
||||
|
||||
/* PRESERVATION-SOURCE-BEGIN app.js:2217-2481 */
|
||||
async function loadAuctionCenter(force = false) {
|
||||
if (state.auctionLoading) return;
|
||||
state.auctionLoading = true;
|
||||
@@ -269,4 +269,45 @@ function exportAuctionRows() {
|
||||
]);
|
||||
}
|
||||
|
||||
/* PRESERVATION-SOURCE-END app.js:2217-2481 */
|
||||
|
||||
function bindAuctionEvents() {
|
||||
document.querySelector("#auctionRefreshButton").addEventListener("click", () => loadAuctionCenter(true));
|
||||
document.querySelector("#auctionExportButton").addEventListener("click", exportAuctionRows);
|
||||
document.querySelector("#auctionSearch").addEventListener("input", (event) => {
|
||||
state.auctionQuery = event.target.value.trim().toLocaleLowerCase("zh-CN");
|
||||
renderAuctionTable();
|
||||
});
|
||||
document.querySelectorAll("[data-auction-dataset]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
state.auctionDataset = button.dataset.auctionDataset || "focus";
|
||||
state.auctionFilter = "all";
|
||||
state.auctionSortKey = state.auctionDataset === "onePrice" ? "amount_million" : "attention_score";
|
||||
state.auctionSortDirection = "desc";
|
||||
document.querySelectorAll("[data-auction-dataset]").forEach((item) => {
|
||||
const active = item === button;
|
||||
item.classList.toggle("active", active);
|
||||
item.setAttribute("aria-selected", String(active));
|
||||
});
|
||||
document.querySelectorAll("[data-auction-filter]").forEach((item) => item.classList.toggle("active", item.dataset.auctionFilter === "all"));
|
||||
renderAuctionTable();
|
||||
});
|
||||
});
|
||||
document.querySelectorAll("[data-auction-filter]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
state.auctionFilter = button.dataset.auctionFilter || "all";
|
||||
document.querySelectorAll("[data-auction-filter]").forEach((item) => item.classList.toggle("active", item === button));
|
||||
renderAuctionTable();
|
||||
});
|
||||
});
|
||||
document.querySelector("#auctionTable").addEventListener("click", (event) => {
|
||||
const header = event.target.closest("th[data-auction-sort]");
|
||||
if (!header) return;
|
||||
const key = header.dataset.auctionSort;
|
||||
if (state.auctionSortKey === key) state.auctionSortDirection = state.auctionSortDirection === "asc" ? "desc" : "asc";
|
||||
else {
|
||||
state.auctionSortKey = key;
|
||||
state.auctionSortDirection = "desc";
|
||||
}
|
||||
renderAuctionTable();
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user