From d6aa03d3a78f8b6fbd2754bf3f4199392c6ef4c1 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 28 Jun 2026 11:20:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BC=98=E5=8C=96=E7=A5=A8?=
 =?UTF-8?q?=E5=8A=A1=E4=B8=8EIC=E5=8D=A1=E6=9F=A5=E8=AF=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=8A=9F=E8=83=BD=E4=B8=8EUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新静态资源版本以清理浏览器缓存
- 新增查询概览模块与搜索辅助提示文字
- 添加XSS内容转义防护，优化列表项选中样式
- 重构IC卡查询页面布局，拆分详情与事件记录区域
- 优化移动端响应式展示效果
---
 web/ic-card-search.html | 108 +++++++++++++++++++++++++++------
 web/ic-card-search.js   |  55 +++++++++++------
 web/style.css           | 128 +++++++++++++++++++++++++++++++++++++++-
 web/ticket-search.html  |  32 +++++++---
 web/ticket-search.js    |  40 +++++++++++--
 5 files changed, 314 insertions(+), 49 deletions(-)
diff --git a/web/ic-card-search.html b/web/ic-card-search.html
index 05f268b..5561875 100644
--- a/web/ic-card-search.html
+++ b/web/ic-card-search.html
@@ -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>
-
diff --git a/web/ic-card-search.js b/web/ic-card-search.js
index 28e6514..97a138c 100644
--- a/web/ic-card-search.js
+++ b/web/ic-card-search.js
@@ -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)));
     }
 })();
diff --git a/web/style.css b/web/style.css
index c007319..2799abe 100644
--- a/web/style.css
+++ b/web/style.css
@@ -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;
diff --git a/web/ticket-search.html b/web/ticket-search.html
index b39107c..12acdc9 100644
--- a/web/ticket-search.html
+++ b/web/ticket-search.html
@@ -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>
-
diff --git a/web/ticket-search.js b/web/ticket-search.js
index 5aeef7b..abe1e72 100644
--- a/web/ticket-search.js
+++ b/web/ticket-search.js
@@ -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>';
