feat(hub): fix archive quotes inline expand and mobile archive layout

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-11 20:50:58 +08:00
parent cf1265763c
commit bb8bb3ae34
3 changed files with 129 additions and 76 deletions
+73 -22
View File
@@ -5532,49 +5532,61 @@ body.funds-fullscreen-open {
}
.archive-quotes-list {
flex: 1 1 auto;
min-height: 160px;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.archive-quote-block {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: var(--inset-surface);
overflow: hidden;
}
.archive-quote-block.is-open {
border-color: var(--accent);
}
.archive-quote-item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: var(--inset-surface);
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.archive-quote-item:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft));
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.archive-quote-item.is-selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--inset-surface));
}
.archive-quote-open-hint {
font-size: 0.7rem;
color: var(--accent);
white-space: nowrap;
}
.archive-quote-detail {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 10px;
padding: 0 10px 10px;
border-top: 1px solid var(--border-soft);
min-height: 140px;
max-height: 42vh;
}
.archive-quote-detail .archive-quote-full {
flex: 1 1 auto;
min-height: 96px;
max-height: 34vh;
overflow: auto;
min-height: 120px;
max-height: none;
overflow: visible;
}
.archive-quote-date {
font-weight: 600;
@@ -5648,6 +5660,15 @@ body.funds-fullscreen-open {
color: var(--muted);
font-size: 0.82rem;
}
.archive-overview-panel {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.archive-overview-panel > .archive-panel-head {
display: none;
}
.archive-stats-bar {
padding: 0;
border-radius: 8px;
@@ -5926,19 +5947,49 @@ body.funds-fullscreen-open {
font-size: 0.85rem;
}
@media (max-width: 900px) {
.archive-layout {
grid-template-columns: 1fr;
#page-archive .page-desc {
display: none;
}
#page-archive .archive-toolbar-desktop,
#page-archive .archive-panel-desktop {
display: none !important;
}
#page-archive .archive-toolbar {
margin-bottom: 10px;
}
#page-archive .archive-layout {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.archive-quotes-panel {
min-height: 360px;
#page-archive .archive-quotes-panel {
order: 1;
flex: 0 0 auto;
min-height: 0;
max-height: none;
overflow: visible;
}
.archive-quotes-list {
#page-archive .archive-main-panel {
order: 2;
flex: 0 0 auto;
min-height: 0;
gap: 0;
}
#page-archive .archive-overview-panel {
width: 100%;
}
#page-archive .archive-overview-panel > .archive-panel-head {
display: flex;
}
#page-archive .archive-quotes-list {
min-height: 120px;
max-height: 42vh;
}
.archive-quote-detail {
max-height: 36vh;
#page-archive .archive-stats-table th,
#page-archive .archive-stats-table td {
padding: 6px 8px;
font-size: 0.74rem;
}
}
+40 -36
View File
@@ -26,10 +26,6 @@
const elQuoteDate = document.getElementById("archive-quote-date");
const elQuoteContent = document.getElementById("archive-quote-content");
const elQuoteSubmit = document.getElementById("archive-quote-submit");
const elQuoteDetail = document.getElementById("archive-quote-detail");
const elQuoteDetailFull = document.getElementById("archive-quote-detail-full");
const elQuoteEditBtn = document.getElementById("archive-quote-edit-btn");
const elQuoteDelBtn = document.getElementById("archive-quote-del-btn");
const elChartSection = document.getElementById("archive-chart-section");
const elChartTitle = document.getElementById("archive-chart-title");
const elTfTabs = document.getElementById("archive-tf-tabs");
@@ -520,24 +516,13 @@
}
function selectQuote(id) {
if (editingQuoteId != null && String(id) !== String(editingQuoteId)) {
const nextId = String(id);
const same = selectedQuoteId != null && String(selectedQuoteId) === nextId;
if (editingQuoteId != null && String(editingQuoteId) !== nextId) {
resetQuoteForm();
}
selectedQuoteId = id;
selectedQuoteId = same ? null : id;
renderQuotes();
renderQuoteDetail();
}
function renderQuoteDetail() {
if (!elQuoteDetail) return;
const q = findQuote(selectedQuoteId);
if (!q) {
elQuoteDetail.hidden = true;
if (elQuoteDetailFull) elQuoteDetailFull.textContent = "";
return;
}
elQuoteDetail.hidden = false;
if (elQuoteDetailFull) elQuoteDetailFull.textContent = q.content || "(空)";
}
function renderQuotes() {
@@ -547,13 +532,15 @@
}
if (!quotes.length) {
elQuotesList.innerHTML = '<p class="archive-empty">暂无复盘语录,可在上方添加。</p>';
if (elQuoteDetail) elQuoteDetail.hidden = true;
return;
}
elQuotesList.innerHTML = quotes
.map(function (q) {
const selected = String(q.id) === String(selectedQuoteId);
return (
'<div class="archive-quote-block' +
(selected ? " is-open" : "") +
'">' +
'<button type="button" class="archive-quote-item' +
(selected ? " is-selected" : "") +
'" data-id="' +
@@ -565,7 +552,23 @@
'<span class="archive-quote-preview">' +
esc(quotePreview(q.content)) +
"</span>" +
"</button>"
(selected ? "" : '<span class="archive-quote-open-hint">查看</span>') +
"</button>" +
(selected
? '<div class="archive-quote-detail">' +
'<div class="archive-quote-full">' +
esc(q.content || "(空)") +
"</div>" +
'<div class="archive-quote-actions">' +
'<button type="button" class="ghost archive-quote-edit-btn" data-id="' +
q.id +
'">修改</button>' +
'<button type="button" class="archive-del-btn archive-quote-del-btn" data-id="' +
q.id +
'">删除</button>' +
"</div></div>"
: "") +
"</div>"
);
})
.join("");
@@ -575,17 +578,27 @@
selectQuote(btn.getAttribute("data-id"));
});
});
renderQuoteDetail();
elQuotesList.querySelectorAll(".archive-quote-edit-btn").forEach(function (btn) {
btn.addEventListener("click", function (ev) {
ev.stopPropagation();
selectedQuoteId = btn.getAttribute("data-id");
startEditQuote();
});
});
elQuotesList.querySelectorAll(".archive-quote-del-btn").forEach(function (btn) {
btn.addEventListener("click", function (ev) {
ev.stopPropagation();
void deleteQuote(btn.getAttribute("data-id"));
});
});
}
async function loadQuotes() {
const r = await apiFetch("/api/archive/quotes");
const j = await r.json();
quotes = j.quotes || [];
if (!quotes.length) {
if (!findQuote(selectedQuoteId)) {
selectedQuoteId = null;
} else if (!findQuote(selectedQuoteId)) {
selectedQuoteId = quotes[0].id;
}
renderQuotes();
}
@@ -610,8 +623,7 @@
return;
}
resetQuoteForm();
selectedQuoteId =
j.quote && j.quote.id != null ? j.quote.id : selectedQuoteId;
selectedQuoteId = null;
await loadQuotes();
setStatus("语录已添加");
}
@@ -627,9 +639,8 @@
setStatus(j.detail || "保存失败");
return;
}
const savedId = id;
resetQuoteForm();
selectedQuoteId = savedId;
selectedQuoteId = null;
await loadQuotes();
setStatus("语录已保存");
}
@@ -1382,13 +1393,6 @@
});
}
if (elQuoteForm) elQuoteForm.addEventListener("submit", submitQuoteForm);
if (elQuoteEditBtn) elQuoteEditBtn.addEventListener("click", startEditQuote);
if (elQuoteDelBtn) {
elQuoteDelBtn.addEventListener("click", function () {
if (!selectedQuoteId) return;
void deleteQuote(selectedQuoteId);
});
}
if (elTfTabs) {
elTfTabs.addEventListener("click", function (ev) {
const btn = ev.target.closest(".archive-tf-btn");
+16 -18
View File
@@ -15,7 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260612-archive-quotes-v2" />
<link rel="stylesheet" href="/assets/app.css?v=20260612-archive-mobile" />
<link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
</head>
<body>
@@ -263,9 +263,9 @@
<p class="page-desc">复盘语录 · 当日交易记录 · 按需查看 K 线</p>
</div>
<div class="archive-toolbar toolbar">
<label class="chk-label"><input type="checkbox" id="archive-filter-profit" /> 盈利单</label>
<label class="chk-label"><input type="checkbox" id="archive-filter-loss" /> 亏损单</label>
<label class="chk-label"><input type="checkbox" id="archive-filter-sick" /> 犯病</label>
<label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-profit" /> 盈利单</label>
<label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-loss" /> 亏损单</label>
<label class="chk-label archive-toolbar-desktop"><input type="checkbox" id="archive-filter-sick" /> 犯病</label>
<div class="archive-period-bar archive-field">
<span>日期</span>
<div class="archive-period-tabs" id="archive-period-tabs" role="tablist">
@@ -281,12 +281,12 @@
<input id="archive-date-to" type="date" title="结束日" />
</span>
</div>
<button type="button" id="archive-btn-chart-toggle" class="ghost">图表</button>
<label class="archive-field archive-search-field">
<button type="button" id="archive-btn-chart-toggle" class="ghost archive-toolbar-desktop">图表</button>
<label class="archive-field archive-search-field archive-toolbar-desktop">
<span>搜索</span>
<input id="archive-search" type="search" placeholder="合约 / 交易所 / 备注" autocomplete="off" />
</label>
<label class="archive-field">
<label class="archive-field archive-toolbar-desktop">
<span>交易所</span>
<select id="archive-exchange"><option value="">全部</option></select>
</label>
@@ -306,17 +306,15 @@
<button type="submit" id="archive-quote-submit" class="primary">添加语录</button>
</form>
<div id="archive-quotes-list" class="archive-quotes-list"></div>
<div id="archive-quote-detail" class="archive-quote-detail" hidden>
<div id="archive-quote-detail-full" class="archive-quote-full"></div>
<div class="archive-quote-actions">
<button type="button" id="archive-quote-edit-btn" class="ghost">修改</button>
<button type="button" id="archive-quote-del-btn" class="archive-del-btn">删除</button>
</div>
</div>
</aside>
<main class="archive-main-panel">
<div id="archive-stats" class="archive-stats-bar"></div>
<details id="archive-chart-section" class="archive-acc-section archive-chart-section">
<section class="archive-overview-panel">
<div class="archive-panel-head">
<h2>数据总览</h2>
</div>
<div id="archive-stats" class="archive-stats-bar"></div>
</section>
<details id="archive-chart-section" class="archive-acc-section archive-chart-section archive-panel-desktop">
<summary class="archive-acc-summary">K 线图表 <span id="archive-chart-title" class="archive-acc-sub"></span></summary>
<div class="archive-chart-toolbar toolbar">
<div class="archive-tf-tabs" id="archive-tf-tabs" role="tablist">
@@ -344,7 +342,7 @@
<button type="button" id="archive-mark-auto" class="archive-mark-auto is-on" title="开启:该币种全部交易均标注开/平;关闭:仅当前选中一笔">自动</button>
</div>
</details>
<details id="archive-trades-section" class="archive-acc-section archive-trades-section" open>
<details id="archive-trades-section" class="archive-acc-section archive-trades-section archive-panel-desktop" open>
<summary class="archive-acc-summary">交易记录</summary>
<div id="archive-trades" class="archive-trades"></div>
</details>
@@ -591,7 +589,7 @@
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart_draw.js?v=20260609-market-day-split"></script>
<script src="/assets/chart.js?v=20260609-market-day-split"></script>
<script src="/assets/archive.js?v=20260612-archive-quotes-v2"></script>
<script src="/assets/archive.js?v=20260612-archive-quotes-v3"></script>
<script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
<script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
<script src="/assets/ai_review_render.js?v=3"></script>