Henry_Du/FSE-Ticket.sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 优化票务与IC卡查询页面的功能与UI

Browse Source 
- 更新静态资源版本以清理浏览器缓存
- 新增查询概览模块与搜索辅助提示文字
- 添加XSS内容转义防护，优化列表项选中样式
- 重构IC卡查询页面布局，拆分详情与事件记录区域
- 优化移动端响应式展示效果
This commit is contained in:
HenryDu8133
2026-06-28 11:20:57 +08:00
parent 042720d812
commit d6aa03d3a7
5 changed files with 314 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/ic-card-search.html
+91 -17
View File
@@ -7,7 +7,7 @@
<title>IC 卡查询</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=13">
<link rel="stylesheet" href="/style.css?v=14">
</head>
<body class="public-search jr-public-page">
@@ -49,6 +49,23 @@
<h1>按卡号或凭证码查询 IC 卡状态</h1>
<p>支持检索 IC 卡当前状态、余额和最近操作记录；输入线上购卡生成的凭证码，也能反查对应卡片。</p>
</section>
<section class="jr-query-overview jr-grid-three" aria-label="IC 卡查询摘要">
<article class="jr-query-stat">
<span class="jr-query-stat-label">检索方式</span>
<strong>卡号 / 凭证码</strong>
<p>支持凭证码反查对应卡片，也支持直接输入卡号查看当前状态与余额。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">结果浏览</span>
<strong>列表与详情并排</strong>
<p>左侧浏览卡片列表，右侧查看卡片详情、状态提示和最近操作记录。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">移动端</span>
<strong>触达区更大</strong>
<p>手机端自动切换为单列阅读，卡片点击区域与按钮尺寸都更适合触屏操作。</p>
</article>
</section>
<section class="jr-panel-card" style="margin-bottom:24px;">
<div class="jr-panel-headline">
<h2>检索条件</h2>
@@ -62,28 +79,86 @@
查询 IC 卡
</button>
</div>
<p class="jr-search-helper">留空可浏览全部 IC 卡；输入卡号或凭证码后，可直接定位到对应卡片详情。</p>
</section>
<section class="jr-grid-two">
<section class="jr-search-results">
<article class="jr-panel-card">
<div class="jr-panel-headline">
<h3>卡片概览</h3>
<span class="jr-panel-note">Card Overview</span>
<h3>结果列表</h3>
<span class="jr-panel-note">Card Results</span>
</div>
<div id="summaryBox" class="jr-center-empty">
<p>请输入卡号或凭证码开始查询。</p>
</div>
</article>
<article class="jr-panel-card">
<div class="jr-panel-headline">
<h3>事件记录</h3>
<span class="jr-panel-note">Recent Events</span>
</div>
<div id="eventBox" class="jr-history-list">
<div id="summaryBox" class="jr-scroll-box">
<div class="jr-center-empty" style="min-height:180px;">
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
<p>请输入卡号或凭证码开始查询。</p>
</div>
</div>
</article>
<section class="jr-detail-stack">
<article class="jr-panel-card">
<div class="jr-panel-headline">
<h3>卡片详情</h3>
<span class="jr-panel-note">Card Overview</span>
</div>
<div id="detailBox">
<div class="jr-center-empty" style="min-height:180px;">
<p>从左侧选择一张 IC 卡以查看详情。</p>
</div>
</div>
</article>
<article class="jr-panel-card">
<div class="jr-panel-headline">
<h3>事件记录</h3>
<span class="jr-panel-note">Recent Events</span>
</div>
<div id="eventBox" class="jr-history-list">
<div class="jr-center-empty" style="min-height:180px;">
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
</div>
</div>
</article>
<div class="jr-grid-two">
<article class="jr-panel-card jr-guide-card">
<div class="jr-panel-headline">
<h3>状态说明</h3>
<span class="jr-panel-note">Card Status</span>
</div>
<div class="jr-guide-list">
<div class="jr-guide-item">
<strong>正常</strong>
<span>卡片已启用，可在检票设备直接刷卡进出站。</span>
</div>
<div class="jr-guide-item">
<strong>待领卡</strong>
<span>请持购卡凭证码前往站内售票机完成领卡后再使用。</span>
</div>
<div class="jr-guide-item">
<strong>不可用</strong>
<span>卡片已停用、挂失或退款，建议联系站务进行处理。</span>
</div>
</div>
</article>
<article class="jr-panel-card jr-guide-card">
<div class="jr-panel-headline">
<h3>查询提示</h3>
<span class="jr-panel-note">Search Guide</span>
</div>
<div class="jr-guide-list">
<div class="jr-guide-item">
<strong>留空查询</strong>
<span>不输入关键字时，会按建卡时间倒序展示全部 IC 卡记录。</span>
</div>
<div class="jr-guide-item">
<strong>凭证反查</strong>
<span>购卡后若未领卡，可直接使用凭证码快速定位对应卡片。</span>
</div>
<div class="jr-guide-item">
<strong>手机查看</strong>
<span>移动端会把结果列表、详情和事件记录按顺序折叠为单列阅读。</span>
</div>
</div>
</article>
</div>
</section>
</section>
<footer class="site-footer jr-footer-space">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025450093号</a>
@@ -92,7 +167,7 @@
</main>
</div>
<script src="/custom-dialog.js?v=12"></script>
<script src="/ic-card-search.js?v=2"></script>
<script src="/ic-card-search.js?v=3"></script>
<script src="/public-status.js?v=13"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
@@ -120,4 +195,3 @@
</body>
</html>
web/ic-card-search.js
+38 -17
View File
@@ -3,6 +3,7 @@
const inputEl = $('#queryInput');
const queryBtn = $('#queryBtn');
const summaryBoxEl = $('#summaryBox');
const detailBoxEl = $('#detailBox');
const eventBoxEl = $('#eventBox');
const state = {
cards: [],
@@ -59,6 +60,9 @@
const buildCardPreview = (card) => {
const shownCardId = card.display_card_id || card.card_id || '---';
const detailHref = window.location.hostname.includes('fse-media.group')
? `https://ticket.fse-media.group/ic/${encodeURIComponent(card.card_id || shownCardId)}`
: `/ic/${encodeURIComponent(card.card_id || shownCardId)}`;
return `
<div class="jr-ticket-preview">
<div class="jr-ticket-row-head">
@@ -73,6 +77,12 @@
<div class="jr-meta-item"><span>凭证码</span><strong>${escapeHtml(card.voucher_code || card.code || card.order_code || '---')}</strong></div>
<div class="jr-meta-item"><span>购卡时间</span><strong>${escapeHtml(formatTime(card.created_ts))}</strong></div>
</div>
<div class="jr-action-row">
<a href="${detailHref}" class="btn jr-secondary-btn" target="_blank" rel="noopener noreferrer">
<i class="fas fa-id-card"></i>
打开卡片页
</a>
</div>
</div>
`;
};
@@ -92,23 +102,22 @@
`).join('');
};
const renderDetailPrompt = (message) => {
detailBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`;
};
const renderEventPrompt = (message) => {
eventBoxEl.innerHTML = `<div class="jr-center-empty" style="min-height:180px;"><p>${escapeHtml(message)}</p></div>`;
};
const renderSelectedCard = (card, events) => {
if (!card) {
renderDetailPrompt('请选择左侧卡片查看详情。');
renderEventPrompt('请选择左侧卡片查看详情与事件记录。');
return;
}
eventBoxEl.innerHTML = `
${buildCardPreview(card)}
<div class="jr-panel-headline" style="margin:20px 0 14px;">
<h3>事件记录</h3>
<span class="jr-panel-note">Recent Events</span>
</div>
<div class="jr-history-list">${buildEventsHtml(events)}</div>
`;
detailBoxEl.innerHTML = buildCardPreview(card);
eventBoxEl.innerHTML = buildEventsHtml(events);
};
const renderCardList = () => {
@@ -125,13 +134,13 @@
const voucherCode = card.voucher_code || card.code || card.order_code || '---';
const isSelected = lookupKey && state.selectedQuery === lookupKey;
return `
<div class="jr-ticket-row" data-card-query="${escapeHtml(lookupKey)}" style="${isSelected ? 'background:#f7faf7;border-left:4px solid #0b6b3a;padding-left:12px;padding-right:12px;' : ''}">
<div class="jr-ticket-row${isSelected ? ' is-active' : ''}" data-card-query="${escapeHtml(lookupKey)}">
<div class="jr-ticket-row-head">
<span class="jr-ticket-id mono">${escapeHtml(shownCardId)}</span>
<span class="jr-status-pill ${getStatusClass(card.status)}">${escapeHtml(card.status_label || card.status || '未知')}</span>
</div>
<div class="jr-ticket-route">${escapeHtml(card.holder_name || '未登记持卡人')}</div>
<div class="text-muted" style="margin-top:6px; font-size:0.9rem;">
<div class="jr-list-meta">
余额 ${escapeHtml(card.balance ?? 0)} · 凭证码 ${escapeHtml(voucherCode)}
</div>
</div>
@@ -143,7 +152,7 @@
const q = item.getAttribute('data-card-query');
if (q) {
loadCardDetail(q).catch((error) => {
renderEventPrompt(error.message || String(error));
renderQueryError(error.message || String(error));
});
}
});
@@ -152,7 +161,8 @@
const loadCardDetail = async (q, options = {}) => {
const { updateUrl = true } = options;
eventBoxEl.innerHTML = '<div class="jr-center-empty" style="min-height:180px;"><p>正在加载卡片详情...</p></div>';
renderDetailPrompt('正在加载卡片详情...');
renderEventPrompt('正在加载事件记录...');
const data = await api.query(q);
const card = data.card || null;
const events = data.events || [];
@@ -174,13 +184,15 @@
const loadAllCards = async () => {
summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = '<p>正在加载全部 IC 卡...</p>';
renderEventPrompt('正在准备卡片详情...');
renderDetailPrompt('正在准备卡片详情...');
renderEventPrompt('正在准备事件记录...');
const data = await api.query('');
state.cards = Array.isArray(data.cards) ? data.cards : [];
state.selectedQuery = '';
renderCardList();
if (!state.cards.length) {
renderDetailPrompt('当前暂无 IC 卡记录。');
renderEventPrompt('当前暂无 IC 卡记录。');
const newUrl = `${window.location.origin}${window.location.pathname}`;
window.history.replaceState({ path: newUrl }, '', newUrl);
@@ -200,21 +212,30 @@
}
summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = '<p>正在查询 IC 卡...</p>';
renderDetailPrompt('正在查询卡片详情...');
renderEventPrompt('正在查询事件记录...');
state.cards = [];
await loadCardDetail(q);
};
queryBtn.addEventListener('click', () => doQuery().catch((error) => renderEventPrompt(error.message || String(error))));
const renderQueryError = (message) => {
summaryBoxEl.className = 'jr-center-empty';
summaryBoxEl.innerHTML = `<p>${escapeHtml(message)}</p>`;
renderDetailPrompt(message);
renderEventPrompt(message);
};
queryBtn.addEventListener('click', () => doQuery().catch((error) => renderQueryError(error.message || String(error))));
inputEl.addEventListener('keydown', (event) => {
if (event.key === 'Enter') doQuery().catch((error) => renderEventPrompt(error.message || String(error)));
if (event.key === 'Enter') doQuery().catch((error) => renderQueryError(error.message || String(error)));
});
const params = new URLSearchParams(location.search);
const q = params.get('q');
if (q) {
inputEl.value = q;
doQuery().catch((error) => renderEventPrompt(error.message || String(error)));
doQuery().catch((error) => renderQueryError(error.message || String(error)));
} else {
loadAllCards().catch((error) => renderEventPrompt(error.message || String(error)));
loadAllCards().catch((error) => renderQueryError(error.message || String(error)));
}
})();
web/style.css
+126 -2
View File
@@ -2590,6 +2590,39 @@ body.jr-public-page {
font-size: 0.86rem;
}
.jr-query-overview {
margin-bottom: 24px;
}
.jr-query-stat {
padding: 18px 20px;
background: linear-gradient(180deg, #f7faf7 0, #ffffff 100%);
border: 1px solid #d7e0d3;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}
.jr-query-stat-label {
display: inline-block;
margin-bottom: 8px;
color: #6a786d;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.jr-query-stat strong {
display: block;
color: #163024;
font-size: 1.08rem;
font-weight: 800;
}
.jr-query-stat p {
margin: 10px 0 0;
color: #647266;
line-height: 1.7;
}
.jr-grid-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2693,6 +2726,13 @@ body.jr-public-page {
align-items: stretch;
}
.jr-search-helper {
margin: 12px 0 0;
color: #66756a;
line-height: 1.7;
font-size: 0.92rem;
}
.jr-search-input,
body.jr-public-page .jr-search-input {
width: 100%;
@@ -2752,16 +2792,22 @@ body.jr-public-page .jr-search-button:hover {
}
.jr-ticket-row {
padding: 18px 0;
padding: 18px 14px;
border-bottom: 1px solid #e4ece2;
border-left: 4px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jr-ticket-row:hover {
background: #f7faf7;
}
.jr-ticket-row.is-active {
background: linear-gradient(180deg, #f4f8f4 0, #ffffff 100%);
border-left-color: #0b6b3a;
}
.jr-ticket-row:last-child {
border-bottom: none;
}
@@ -2779,6 +2825,13 @@ body.jr-public-page .jr-search-button:hover {
line-height: 1.7;
}
.jr-list-meta {
margin-top: 8px;
color: #728077;
font-size: 0.88rem;
line-height: 1.6;
}
.jr-ticket-id {
color: #1b3022;
font-weight: 800;
@@ -2920,6 +2973,12 @@ body.jr-public-page .jr-search-button:hover {
gap: 10px;
}
.jr-detail-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.jr-popular-item {
display: flex;
align-items: center;
@@ -3173,6 +3232,35 @@ body.jr-public-page .jr-secondary-btn:hover {
line-height: 1.7;
}
.jr-guide-card {
min-height: 100%;
}
.jr-guide-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.jr-guide-item {
padding: 14px 16px;
background: #f7faf7;
border: 1px solid #dfe8dd;
}
.jr-guide-item strong {
display: block;
color: #173225;
font-size: 0.98rem;
}
.jr-guide-item span {
display: block;
margin-top: 6px;
color: #647266;
line-height: 1.7;
}
body.jr-ticket-board-page,
body.jr-ticket-board-page #app,
body.jr-ticket-board-page .jr-public-shell {
@@ -3584,6 +3672,37 @@ body.jr-ticket-board-page .jr-board-card:last-child {
min-width: 0;
}
.jr-page-intro h1 {
font-size: clamp(1.75rem, 7vw, 2.35rem);
}
.jr-panel-headline {
flex-direction: column;
align-items: flex-start;
}
.jr-query-stat,
.jr-ticket-preview,
.jr-history-item,
.jr-popular-item,
.jr-guide-item {
padding-left: 16px;
padding-right: 16px;
}
.jr-ticket-row {
padding: 16px 12px;
}
.jr-scroll-box {
min-height: 260px;
max-height: none;
}
.jr-center-empty {
min-height: 180px;
}
.jr-order-info-grid {
grid-template-columns: 1fr;
}
@@ -3610,6 +3729,11 @@ body.jr-ticket-board-page .jr-board-card:last-child {
letter-spacing: 0.08em;
}
.jr-action-row .btn,
.jr-action-row button {
width: 100%;
}
.jr-home-alert {
flex-direction: column;
align-items: flex-start;
web/ticket-search.html
+25 -7
View File
@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="zh-CN">
<head>
@@ -7,7 +7,7 @@
<title>票务查询</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=13" />
<link rel="stylesheet" href="/style.css?v=14" />
</head>
<body class="public-search jr-public-page">
@@ -49,13 +49,31 @@
<section class="jr-page-intro">
<span class="jr-kicker">TICKET SEARCH</span>
<h1>按票号、站点或日期快速查询票据</h1>
<p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p>
<p>输入完整票号、起终点、日期或关键词，左侧浏览结果，右侧查看票据详情与最近流转记录。</p>
</section>
<section class="jr-query-overview jr-grid-three" aria-label="车票查询摘要">
<article class="jr-query-stat">
<span class="jr-query-stat-label">检索方式</span>
<strong>票号 / 站点 / 日期</strong>
<p>支持完整票号与站点关键词联合查询，适合快速反查近期票据。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">结果浏览</span>
<strong>列表与详情并排</strong>
<p>左侧先筛选票据，右侧立即查看电子票概览与最近流转记录。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">移动端</span>
<strong>单列阅读更顺手</strong>
<p>手机端自动切为单列，查询、结果与详情会按操作顺序依次展开。</p>
</article>
</section>
<section class="jr-panel-card" style="margin-bottom:24px;">
<div class="jr-panel-headline">
<h2>检索条件</h2>
<span class="jr-panel-note">Ticket ID / Station / Date</span>
<span class="jr-panel-note">Ticket ID / Station / Date</span>
</div>
<div class="jr-search-form">
<input id="q" class="jr-search-input" type="text"
@@ -63,6 +81,7 @@
<button id="searchBtn" class="btn primary jr-search-button"><i class="fas fa-search"></i>
立即搜索</button>
</div>
<p class="jr-search-helper">可直接输入完整票号，也可输入起点、终点或日期关键字进行模糊检索。</p>
</section>
<section class="jr-search-results">
@@ -78,7 +97,7 @@
</div>
</article>
<section id="detail-section">
<section id="detail-section" class="jr-detail-stack">
<article class="jr-panel-card" style="margin-bottom:20px;">
<div class="jr-panel-headline">
<h3>车票详情</h3>
@@ -118,7 +137,7 @@
</div>
<script src="/custom-dialog.js?v=12"></script>
<script src="/ticket-search.js?v=11"></script>
<script src="/ticket-search.js?v=12"></script>
<script src="/public-status.js?v=13"></script>
<script src="/ai-assistant.js?v=6"></script>
<script>
@@ -146,4 +165,3 @@
</body>
</html>
web/ticket-search.js
+34 -6
View File
@@ -4,6 +4,10 @@
const detailEl = $('#detail');
const qEl = $('#q');
const btn = $('#searchBtn');
const state = {
items: [],
selectedId: ''
};
const api = {
searchTickets: async (q) => {
@@ -52,6 +56,13 @@
return type;
};
const escapeHtml = (value) => String(value == null ? '' : value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
const getTicketId = (obj) => (obj && (obj.ticket_id || obj["车票编号"] || obj.id)) || '';
const isValidStatus = (status) => {
@@ -111,6 +122,7 @@
};
function renderList(items) {
state.items = items;
listEl.innerHTML = '';
if (items.length === 0) {
listEl.innerHTML = '<div class="jr-center-empty"><p>未找到匹配结果。</p></div>';
@@ -119,22 +131,35 @@
items.forEach(it => {
const id = it.ticket_id || it["车票编号"] || '';
const row = document.createElement('div');
row.className = 'jr-ticket-row';
const statusText = formatStatusText(it.status || it["状态"] || '');
const isSelected = state.selectedId === id;
row.className = `jr-ticket-row${isSelected ? ' is-active' : ''}`;
const overview = it.overview || it["概览"] || null;
const startName = overview ? (overview.start_name || overview["起点"]) : (it.start_name || it["起点"] || '---');
const terminalName = overview ? (overview.terminal_name || overview["终点"]) : (it.terminal_name || it["终点"] || '---');
const updateTime = formatTime(
(overview && (overview.last_update_ts || overview["上次更新时间"])) ||
it.last_update_ts ||
it["上次更新时间"] ||
''
);
row.innerHTML = `
<div class="jr-ticket-row-head">
<span class="jr-ticket-id mono">${id}</span>
<i class="fas fa-chevron-right text-muted"></i>
<span class="jr-ticket-id mono">${escapeHtml(id)}</span>
<span class="jr-status-pill ${isValidStatus(statusText) ? 'jr-status-valid' : (statusText === '已使用' ? 'jr-status-used' : 'jr-status-expired')}">${escapeHtml(statusText)}</span>
</div>
<div class="jr-ticket-route">
${startName} → ${terminalName}
${escapeHtml(startName)} → ${escapeHtml(terminalName)}
</div>
<div class="jr-list-meta">最近更新 ${escapeHtml(updateTime)}</div>
`;
row.onclick = () => loadDetail(id);
row.onclick = () => {
state.selectedId = id;
renderList(state.items);
loadDetail(id);
};
listEl.appendChild(row);
});
}
@@ -208,6 +233,8 @@
}
async function loadDetail(id) {
state.selectedId = id;
renderList(state.items);
detailEl.innerHTML = '<div class="jr-center-empty"><p>正在加载详情...</p></div>';
try {
const d = await api.ticketDetail(id);
@@ -229,6 +256,7 @@
listEl.innerHTML = '<div class="jr-center-empty"><p>正在搜索...</p></div>';
try {
const d = await api.searchTickets(q);
state.selectedId = state.selectedId && d.some((item) => getTicketId(item) === state.selectedId) ? state.selectedId : '';
renderList(d);
} catch (e) {
listEl.innerHTML = '<div class="jr-center-empty"><p>搜索失败。</p></div>';