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

refactor(web): 重构全站界面与事件日志，优化功能与样式

Browse Source 
1. 重构并统一票务、IC卡的事件日志格式化展示逻辑，替换原有零散的格式化函数，提升事件展示的一致性与可读性
2. 为AI助手面板新增折叠按钮与折叠逻辑，支持收起/展开面板，优化界面空间利用率
3. 移除多个页面的冗余介绍、提醒区块，精简页面结构
4. 修复IC卡购卡页面的充值选项按钮布局问题，将button元素改为div适配样式规范
5. 新增移动端卡片布局的横向滚动适配，优化小屏设备上的卡片展示与浏览体验
6. 更新后台管理页面的导航样式、文案与统计数据展示，新增车票、凭证的统计卡片
7. 统一全站品牌文案与页面格式，修复部分页面的DOCTYPE多余空格问题
8. 简化车票订单页面的地图加载逻辑，修复原有的冗余代码与加载异常问题
This commit is contained in:
Henry_Du
2026-07-05 14:55:12 +08:00
parent ef9926dc58
commit 95893a5431
19 changed files with 483 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+51 -80
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 充满未知和不稳定的票务系统！ -->
@@ -20,7 +20,7 @@
<div class="jr-topbar-inner">
<a href="https://ticket.fse-media.group" class="jr-top-link" id="adminTopLink">
<i class="fas fa-train"></i>
<span>FSE 铁路运输后台系统</span>
<span>FSE铁路票务系统控制台</span>
</a>
</div>
</header>
@@ -30,8 +30,8 @@
<a href="https://ticket.fse-media.group" class="jr-brand" id="adminBrandLink">
<img src="/FSE-ticket.png" alt="FSE Railway" class="jr-brand-logo" />
<div class="jr-brand-copy">
<strong>FSE 铁路运输</strong>
<span>后台控制台</span>
<strong>FarSight-T.N.E铁路运输</strong>
<span>控制台</span>
</div>
</a>
<nav class="jr-nav" aria-label="站点导航">
@@ -50,7 +50,7 @@
<div class="jr-admin-sidebar-head">
<span class="jr-kicker">OPERATIONS CONSOLE</span>
<div class="brand">FSE铁路票务系统控制台</div>
<p class="jr-admin-sidebar-copy">后台管理页统一使用 JR 风格的门户视觉，集中处理票务、线路、资源和运营日志。</p>
<p class="jr-admin-sidebar-copy">集中处理票务、线路、资源和运营日志。</p>
</div>
<div class="nav">
<a href="https://ticket.fse-media.group" id="homeLink" class="nav-item" style="text-decoration: none;">
@@ -68,16 +68,16 @@
<span class="nav-icon"><i class="fas fa-ticket-alt"></i></span> 车票记录
</div>
<div class="nav-item" :class="{active: currentView === 'vouchers'}" @click="currentView = 'vouchers'">
<span class="nav-icon"><i class="fas fa-receipt"></i></span> 凭证管理
<span class="nav-icon"><i class="fas fa-receipt"></i></span> 凭证记录
</div>
<div class="nav-item" :class="{active: currentView === 'iccards'}" @click="currentView = 'iccards'">
<span class="nav-icon"><i class="fas fa-credit-card"></i></span> IC 卡管理
<span class="nav-icon"><i class="fas fa-credit-card"></i></span> IC卡管理
</div>
<div class="nav-item" :class="{active: currentView === 'assets'}" @click="currentView = 'assets'">
<span class="nav-icon"><i class="fas fa-route"></i></span> 线路图
</div>
<div class="nav-item" :class="{active: currentView === 'settings'}" @click="currentView = 'settings'">
<span class="nav-icon"><i class="fas fa-cog"></i></span> 优惠设置
<span class="nav-icon"><i class="fas fa-cog"></i></span> 系统设置
</div>
<div class="nav-item" :class="{active: currentView === 'logs'}" @click="currentView = 'logs'">
<span class="nav-icon"><i class="fas fa-list"></i></span> 日志
@@ -92,7 +92,7 @@
<div class="flex" style="gap: 12px;">
<button class="icon-btn mobile-only" @click="sidebarOpen = !sidebarOpen" title="菜单"><i class="fas fa-bars"></i></button>
<div>
<span class="jr-kicker">JR STYLE ADMIN</span>
<span class="jr-kicker">OPERATIONS CONSOLE</span>
<h3 style="margin: 0;">{{ viewTitle }}</h3>
</div>
</div>
@@ -114,43 +114,10 @@
</div>
<div class="content">
<section class="jr-page-intro jr-admin-intro">
<span class="jr-kicker">CENTRAL MANAGEMENT</span>
<span class="jr-kicker">OPERATIONS CONSOLE</span>
<h1>铁路票务后台控制台</h1>
<p>参照公开页的信息层级组织后台入口，把线路、售票、资源和日志管理统一放入同一套铁路门户式界面。</p>
</section>
<section class="jr-home-alert jr-admin-alert">
<div class="jr-alert-title">
<i class="fas fa-circle-info"></i>
<span>控制台概览</span>
</div>
<p>当前模块：{{ viewTitle }}，已加载 {{ lines.length }} 条线路、{{ stations.length }} 个站点。需要做批量调整时，可先在左侧切换模块再进入对应卡片操作区。</p>
</section>
<section class="jr-admin-overview-grid">
<article class="jr-admin-overview-card">
<span class="jr-admin-overview-label">当前模块</span>
<strong class="jr-admin-overview-value">{{ viewTitle }}</strong>
<p class="jr-admin-overview-note">{{ currentViewSummary }}</p>
</article>
<article class="jr-admin-overview-card">
<span class="jr-admin-overview-label">线路与站点</span>
<strong class="jr-admin-overview-value">{{ lines.length }} / {{ stations.length }}</strong>
<p class="jr-admin-overview-note">后台操作统一建立在线路、站点与票价的核心数据之上。</p>
</article>
<article class="jr-admin-overview-card">
<span class="jr-admin-overview-label">同步状态</span>
<strong class="jr-admin-overview-value">{{ isViewBusy ? '正在更新' : '数据已就绪' }}</strong>
<p class="jr-admin-overview-note">切换模块时只拉取当前视图需要的数据，减少等待与无效刷新。</p>
</article>
<article class="jr-admin-overview-card is-actions">
<span class="jr-admin-overview-label">快捷操作</span>
<div class="jr-admin-overview-actions">
<button class="btn" @click="currentView = 'management'"><i class="fas fa-network-wired"></i> 线路管理</button>
<button class="btn" @click="currentView = 'iccards'"><i class="fas fa-credit-card"></i> IC 卡务</button>
<button class="btn" @click="currentView = 'logs'"><i class="fas fa-list"></i> 查看日志</button>
<button class="btn primary" @click="refreshData" :disabled="isViewBusy"><i class="fas fa-rotate-right"></i> 立即同步</button>
</div>
</article>
</section>
<!-- 仪表盘-->
<div v-if="currentView === 'dashboard'">
<div class="grid">
@@ -457,6 +424,24 @@
<!-- 凭证管理 -->
<div v-if="currentView === 'vouchers'">
<div class="grid">
<div class="card">
<div class="stat-label">凭证总数</div>
<div class="stat-value">{{ orderStats.total }}</div>
</div>
<div class="card">
<div class="stat-label">待使用</div>
<div class="stat-value">{{ orderStats.valid }}</div>
</div>
<div class="card">
<div class="stat-label">已使用</div>
<div class="stat-value">{{ orderStats.used }}</div>
</div>
<div class="card">
<div class="stat-label">已过期</div>
<div class="stat-value">{{ orderStats.expired }}</div>
</div>
</div>
<div class="card">
<div class="flex between mb-4">
<h4>凭证列表</h4>
@@ -467,11 +452,11 @@
<table class="ticket-table">
<thead>
<tr>
<th>凭证</th>
<th>凭证</th>
<th>线路</th>
<th>车型</th>
<th>票价</th>
<th>状态</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
@@ -503,17 +488,7 @@
</div>
<div v-if="currentView === 'iccards'">
<section class="jr-admin-section-toolbar">
<div class="jr-admin-section-toolbar-copy">
<span class="jr-admin-overview-label">IC CARD DESK</span>
<strong>{{ currentViewSummary }}</strong>
<p>把检索、充值、状态维护和事件核对集中在同一工作流里，减少在列表和详情之间来回跳转的成本。</p>
</div>
<div class="jr-admin-overview-actions">
<button class="btn" @click="fetchIcCards(false)" :disabled="isViewBusy"><i class="fas fa-list"></i> 刷新列表</button>
<button class="btn primary" @click="loadIcCard(icSelectedId)" :disabled="!icSelectedId || isViewBusy"><i class="fas fa-id-card"></i> 刷新详情</button>
</div>
</section>
<div class="grid">
<div class="card">
<div class="stat-label">IC 卡总数</div>
@@ -535,18 +510,7 @@
<div class="management-container ic-admin-layout">
<div class="management-sidebar">
<div class="card jr-admin-note-card">
<div class="flex between mb-4">
<h4>操作说明</h4>
<span class="badge">只读入口</span>
</div>
<p class="jr-admin-card-note">本模块不提供后台快速建卡，卡片发放流程保持在线上购卡或既有开卡流程中完成，后台仅负责检索、维护、充值与记录核对。</p>
<div class="jr-admin-note-list">
<div>1. 先检索卡号、订单号或持卡人。</div>
<div>2. 在详情面板修改状态并保存。</div>
<div>3. 需要补款时直接使用充值入口。</div>
</div>
</div>
<div class="card jr-admin-list-card" style="margin-bottom:0; display:flex; flex-direction:column; min-height: 520px;">
<div class="flex between mb-4">
<div>
@@ -588,11 +552,10 @@
<div class="flex between mb-4">
<div>
<h4>卡片详情</h4>
<div class="jr-admin-list-meta">在同一面板直接处理状态维护、充值和记录核对。</div>
</div>
<div class="flex" style="gap:8px;">
<button class="btn" @click="loadIcCard(icSelectedId)" :disabled="!icSelectedCard || isViewBusy"><i class="fas fa-rotate-right"></i> 刷新</button>
<button class="btn" @click="topupIcCard" :disabled="!icSelectedCard || isViewBusy"><i class="fas fa-wallet"></i> 充值</button>
<button class="btn danger" @click="deleteIcCard" :disabled="!icSelectedCard"><i class="fas fa-trash"></i> 删除卡</button>
<button class="btn primary" @click="saveIcCard" :disabled="!icSelectedCard"><i class="fas fa-save"></i> 保存</button>
</div>
@@ -620,11 +583,7 @@
<strong>{{ icSelectedEvents.length }}</strong>
<small>用于追踪开卡与状态变更。</small>
</div>
<div class="jr-admin-summary-item">
<span>订单来源</span>
<strong>{{ cardOrderCode(icSelectedCard) }}</strong>
<small>自动识别线上订单或现场办卡。</small>
</div>
</div>
<div class="ic-detail-grid">
<label class="ic-field">
@@ -684,6 +643,20 @@
<!-- 车票记录 -->
<div v-if="currentView === 'tickets'">
<div class="grid">
<div class="card">
<div class="stat-label">车票总数</div>
<div class="stat-value">{{ ticketStats.total }}</div>
</div>
<div class="card">
<div class="stat-label">有效</div>
<div class="stat-value">{{ ticketStats.valid }}</div>
</div>
<div class="card">
<div class="stat-label">已使用</div>
<div class="stat-value">{{ ticketStats.used }}</div>
</div>
</div>
<div class="card mb-4">
<div class="flex between mb-4">
<h4>车票记录</h4>
@@ -786,11 +759,9 @@
<div class="timeline-content">
<div class="flex between">
<span style="font-weight: 600;">{{ formatTicketEvent(ev) }}</span>
<span class="text-muted" style="font-size: 0.8rem;">{{ formatTime(ev['时间戳'] || ev.ts) }}</span>
</div>
<div class="text-muted" style="font-size: 0.9rem;">
<div>{{ formatTicketEventLocation(ev) }}</div>
<div v-if="formatTicketEventExtra(ev)" style="margin-top: 4px;">{{ formatTicketEventExtra(ev) }}</div>
<div class="text-muted" style="font-size: 0.9rem; margin-top: 4px;">
{{ formatTicketEventUnified(ev) }}
</div>
</div>
</div>