style: 紧凑售后故障分类布局

src/views/product/after-sales-service.vue

@@ -433,4 +433,26 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ currentStep:
 .step-tab.active { background: linear-gradient(115deg, rgba(4, 109, 155, 0.78), rgba(5, 62, 102, 0.64)); }
 .step-connector { position: relative; overflow: visible; }
 .step-connector::after { position: absolute; top: 50%; right: -1px; width: 6px; height: 6px; border-top: 1px solid #73b1ce; border-right: 1px solid #73b1ce; content: ""; transform: translateY(-50%) rotate(45deg); }
+
+/* 第 1 步参照产品需求说明书的横向拖拽卡片，避免待分类区占用过多高度。 */
+.classification-workspace {
+  grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr);
+  gap: 16px;
+}
+.fault-lane { min-height: 228px; padding: 14px; }
+.fault-lane > p { min-height: 0; margin: 8px 0; }
+.lane-drop-zone { gap: 8px; }
+.unassigned-panel { padding: 14px; }
+.unassigned-panel > p { min-height: 0; margin: 9px 0 12px; color: #c3e0ec; }
+.unassigned-list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 2px; }
+.fault-card {
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+  padding: 9px 10px;
+}
+.fault-card p { grid-column: 2; margin: 0; color: #e8f7ff; }
+.fault-select-label { grid-column: 2; justify-content: flex-start; white-space: nowrap; }
+.fault-select-label span { white-space: nowrap; }
+.fault-select-label select { width: 126px; max-width: none; flex: 0 0 126px; }
 </style>

tests/after-sales-classification-layout.static.test.cjs

@@ -0,0 +1,19 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const test = require("node:test");
+
+const source = fs.readFileSync(path.join(__dirname, "../src/views/product/after-sales-service.vue"), "utf8");
+
+test("实训任务14待分类区使用紧凑的横向故障卡", () => {
+  assert.match(source, /\.classification-workspace\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s+minmax\(260px,\s*\.45fr\);[^}]*gap:\s*16px;/);
+  assert.match(source, /\.unassigned-list\s*\{[^}]*gap:\s*8px;[^}]*max-height:\s*560px;[^}]*overflow-y:\s*auto;/);
+  assert.match(source, /\.fault-card\s*\{[^}]*grid-template-columns:\s*18px\s+minmax\(0,\s*1fr\);[^}]*align-items:\s*start;[^}]*gap:\s*8px;[^}]*padding:\s*9px\s+10px;/);
+});
+
+test("实训任务14分类标签保持完整，故障文字具有清晰对比度", () => {
+  assert.match(source, /\.fault-card p\s*\{[^}]*grid-column:\s*2;[^}]*color:\s*#e8f7ff;/);
+  assert.match(source, /\.fault-select-label\s*\{[^}]*grid-column:\s*2;[^}]*justify-content:\s*flex-start;/);
+  assert.match(source, /\.fault-select-label span\s*\{\s*white-space:\s*nowrap;/);
+  assert.match(source, /\.unassigned-panel\s*>\s*p\s*\{[^}]*color:\s*#c3e0ec;/);
+});