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>
 
     <!-- ─── 继承来源选择弹窗 ─── -->