From 51a9715b2a9a2c51b7877634d188036d43124599 Mon Sep 17 00:00:00 2001
From: wangyu <823267011@qq.com>
Date: Mon, 29 Jun 2026 16:10:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(quality):=20=E6=81=A2=E5=A4=8D=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E9=92=A2=E5=8D=B7=E5=88=97=E8=A1=A8+=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=BC=82=E5=B8=B8=E7=AE=A1=E7=90=86=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=9D=E7=95=99=E7=BB=A7=E6=89=BF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/Quality.vue | 46 +++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/Quality.vue b/frontend/src/views/Quality.vue
index 89d2a54..ba2fd82 100644
--- a/frontend/src/views/Quality.vue
+++ b/frontend/src/views/Quality.vue
@@ -90,24 +90,38 @@
 
     <!-- ═══════════════════════════════════════ 异常管理 Tab ═══════════════════════════════════════ -->
     <template v-if="activeTab === 'abnormal'">
-      <!-- 顶部：选择钢卷 -->
-      <div class="card">
-        <div class="card-body" style="padding:10px 14px;">
-          <div class="flex-row" style="gap:12px;flex-wrap:wrap;">
-            <span class="kv-label">钢卷</span>
-            <select v-model="selectedCoilNo" class="kv-input" style="width:240px;" @change="onCoilChange">
-              <option value="">请选择钢卷</option>
-              <option v-for="c in coils" :key="c.id" :value="c.coil_no">{{ c.coil_no }} · {{ c.steel_grade || '—' }}</option>
-            </select>
-            <input v-model="coilQuery.coil_no" class="kv-input" style="width:160px;" placeholder="搜索卷号" @keyup.enter="fetchCoils" />
-            <button class="btn btn-outline" @click="fetchCoils">刷新列表</button>
+      <div class="abn-layout">
+        <!-- 左侧：钢卷列表 -->
+        <div class="abn-sidebar">
+          <div class="sidebar-header">
+            钢卷列表
+            <span class="add-btn" title="刷新" @click="fetchCoils">⟳</span>
+          </div>
+          <div class="sidebar-search">
+            <input v-model="coilQuery.coil_no" class="kv-input" placeholder="搜索卷号..." style="width:100%;" @keyup.enter="fetchCoils" />
+          </div>
+          <div class="cl-list">
+            <div
+              v-for="c in coils"
+              :key="c.id"
+              :class="['cl-item', { active: selectedCoil && selectedCoil.id === c.id }]"
+              @click="selectCoil(c)"
+            >
+              <div class="cl-name">{{ c.coil_no }}</div>
+              <div class="cl-meta">
+                <span class="td-muted" style="font-size:10px;">{{ c.steel_grade || '—' }}</span>
+                <span class="td-muted" style="font-size:10px;">{{ c.spec_thickness ? c.spec_thickness + '×' + (c.spec_width || '?') : '' }}</span>
+              </div>
+            </div>
+            <div v-if="!coils.length" class="cl-empty">暂无钢卷</div>
           </div>
         </div>
-      </div>
 
-      <div v-if="!selectedCoil" class="card"><div class="card-body"><div class="empty-tip">请选择钢卷</div></div></div>
+        <!-- 右侧：异常管理面板 -->
+        <div class="abn-main">
+          <div v-if="!selectedCoil" class="empty-tip">请选择钢卷</div>
 
-      <template v-else>
+          <template v-else>
             <!-- 钢卷信息 -->
             <div class="card">
               <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
@@ -221,7 +235,9 @@
                 </table>
               </div>
             </div>
-      </template>
+          </template>
+        </div>
+      </div>
     </template>
 
     <!-- ─── 继承来源选择弹窗 ─── -->