feat: improve responsive admin experience

This commit is contained in:
2026-08-04 16:47:14 +08:00
parent c71b1351d6
commit 631a362501
20 changed files with 522 additions and 801 deletions
+6 -6
View File
@@ -10,13 +10,13 @@
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">预测历史</h1>
<p class="mt-2 text-sm text-textSub">查看已上传文件和对应预测报告。</p>
</div>
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary">
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary w-full sm:w-fit">
<span class="material-symbols-outlined text-lg">upload_file</span>
新建分析
</a>
</div>
<section class="flex h-[900px] min-w-0 flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
<section class="flex min-w-0 flex-col rounded-lg border border-line bg-white shadow-panel lg:h-[900px] lg:overflow-hidden">
<div class="border-b border-line px-5 py-4">
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-lg font-extrabold">上传记录</h2>
@@ -25,9 +25,9 @@
{% endif %}
</div>
</div>
<div class="min-h-0 min-w-0 flex-1 divide-y divide-line overflow-y-auto">
<div class="min-w-0 flex-1 md:divide-y md:divide-line lg:min-h-0 lg:overflow-y-auto">
{% for record in records %}
<div class="grid min-h-[76px] min-w-0 gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
<article class="m-3 grid min-w-0 gap-3 rounded-lg border border-line bg-slate-50 p-4 md:m-0 md:min-h-[76px] md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:rounded-none md:border-0 md:bg-transparent md:px-4 md:py-3">
<div class="min-w-0 overflow-hidden">
<div class="truncate text-sm font-bold">{{ record.original_filename }}</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-textSub">
@@ -46,9 +46,9 @@
预测结果
</a>
</div>
</div>
</article>
{% else %}
<div class="flex h-full min-h-[520px] flex-col items-center justify-center p-10 text-center">
<div class="flex min-h-[360px] flex-col items-center justify-center p-10 text-center lg:h-full lg:min-h-[520px]">
<span class="material-symbols-outlined text-5xl text-primary">history</span>
<h2 class="mt-4 text-xl font-extrabold">还没有历史记录</h2>
<p class="mt-2 text-sm text-textSub">上传数据并完成预测后,记录会显示在这里。</p>