OrgTJWater/pipeline-lifetime
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve responsive admin experience

Browse Source
This commit is contained in:
jiang
2026-08-04 16:47:14 +08:00
parent c71b1351d6
commit 631a362501
20 changed files with 522 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/home.html
+11 -11
View File
@@ -9,14 +9,14 @@
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">管道健康状态与剩余寿命评估</h1>
<p class="mt-2 max-w-3xl text-sm leading-6 text-textSub">上传标准数据文件，系统将生成管道的剩余寿命分析图、健康等级摘要、剩余寿命判断和电子表格预测报告。</p>
</div>
<a href="{{ url_for('main.download_template') }}" class="ui-btn ui-btn-secondary text-primary" data-download-action data-download-pending="下载中...">
<a href="{{ url_for('main.download_template') }}" class="ui-btn ui-btn-secondary w-full text-primary sm:w-fit" data-download-action data-download-pending="下载中...">
<span class="material-symbols-outlined text-lg">download</span>
下载数据模板
</a>
</div>
<div id="mainGrid" class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
<section id="uploadPanel" class="order-1 flex h-[460px] flex-col rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-1">
<section id="uploadPanel" class="order-1 flex flex-col rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:h-[460px] lg:col-start-1 lg:row-start-1">
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="text-xl font-extrabold">上传分析文件</h2>
@@ -30,7 +30,7 @@
<form id="predictForm" action="{{ url_for('main.predict') }}" method="post" enctype="multipart/form-data" novalidate class="flex flex-1 flex-col gap-5">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<label id="dropZone" class="flex min-h-0 flex-1 cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-outline bg-slate-50 px-5 py-8 text-center transition hover:border-primary hover:bg-blue-50/50">
<label id="dropZone" class="flex min-h-[260px] flex-1 cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-outline bg-slate-50 px-5 py-8 text-center transition hover:border-primary hover:bg-blue-50/50 lg:min-h-0">
<input id="fileInput" name="file" type="file" accept=".csv,.xls,.xlsx" class="absolute h-px w-px opacity-0">
<span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-white text-primary shadow-panel">
<span class="material-symbols-outlined text-3xl">cloud_upload</span>
@@ -42,7 +42,7 @@
<div class="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<p class="text-xs text-textSub">预测结果会在本页生成摘要，并可进入结果页查看完整报告。</p>
<button id="submitBtn" class="ui-btn ui-btn-primary min-w-[150px]" type="submit">
<button id="submitBtn" class="ui-btn ui-btn-primary w-full sm:w-fit sm:min-w-[150px]" type="submit">
<span id="submitText">分析并预测</span>
<span id="submitIcon" class="material-symbols-outlined text-lg">analytics</span>
</button>
@@ -50,7 +50,7 @@
</form>
</section>
<section id="inlineResult" class="order-3 h-[520px] overflow-hidden rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-2">
<section id="inlineResult" class="order-3 min-h-[420px] overflow-hidden rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:h-[520px] lg:col-start-1 lg:row-start-2">
<div id="resultPlaceholder" class="flex h-full min-h-0 flex-col">
<div>
<h2 class="text-xl font-extrabold">最新预测结果</h2>
@@ -69,12 +69,12 @@
<h2 class="text-xl font-extrabold">最新预测结果</h2>
<p class="mt-1 text-sm text-textSub">已生成图表与电子表格结果文件。</p>
</div>
<div class="flex flex-wrap gap-2">
<a id="resultPageBtn" href="{{ url_for('main.result_page') }}" class="ui-btn ui-btn-sm ui-btn-secondary">
<div class="grid gap-2 sm:flex sm:flex-wrap">
<a id="resultPageBtn" href="{{ url_for('main.result_page') }}" class="ui-btn ui-btn-sm ui-btn-secondary w-full sm:w-auto">
<span class="material-symbols-outlined text-lg">monitoring</span>
查看结果页
</a>
<a id="excelBtn" href="#" class="ui-btn ui-btn-sm ui-btn-primary" data-download-action data-download-pending="下载中...">
<a id="excelBtn" href="#" class="ui-btn ui-btn-sm ui-btn-primary w-full sm:w-auto" data-download-action data-download-pending="下载中...">
<span class="material-symbols-outlined text-lg">download</span>
下载结果表
</a>
@@ -84,7 +84,7 @@
<div class="min-h-0 flex-1 overflow-hidden">
<div class="flex h-full min-h-0 flex-col rounded-md border border-line bg-slate-50 p-3">
<div class="mb-2 shrink-0 text-xs font-bold text-textSub">管道的剩余寿命分析图</div>
<div class="min-h-0 flex-1 overflow-hidden rounded bg-white">
<div class="min-h-[260px] flex-1 overflow-hidden rounded bg-white lg:min-h-0">
<img id="resultImage" src="" alt="预测图" class="h-full w-full object-contain">
</div>
</div>
@@ -92,7 +92,7 @@
</div>
</section>
<section id="requirementsPanel" class="order-2 h-[460px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-1">
<section id="requirementsPanel" class="order-2 rounded-lg border border-line bg-white p-5 shadow-panel lg:h-[460px] lg:col-start-2 lg:row-start-1">
<h2 class="flex items-center gap-2 text-lg font-extrabold">
<span class="material-symbols-outlined text-primary">rule</span>
数据要求
@@ -118,7 +118,7 @@
</div>
</section>
<section class="order-4 h-[520px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-2">
<section class="order-4 rounded-lg border border-line bg-white p-5 shadow-panel lg:h-[520px] lg:col-start-2 lg:row-start-2">
<h2 class="flex items-center gap-2 text-lg font-extrabold">
<span class="material-symbols-outlined text-primary">quick_reference</span>
快速入口