From 1000ace1d5746015165046838a2a07461cf90de6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=B2=85?= <907037276@qq.com>
Date: Mon, 31 Aug 2026 12:00:41 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=B4=A7=E5=87=91=E5=94=AE=E5=90=8E?=
 =?UTF-8?q?=E6=95=85=E9=9A=9C=E5=88=86=E7=B1=BB=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/after-sales-service.vue     | 22 +++++++++++++++++++
 ...ales-classification-layout.static.test.cjs | 19 ++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 tests/after-sales-classification-layout.static.test.cjs

diff --git a/src/views/product/after-sales-service.vue b/src/views/product/after-sales-service.vue
index 4cef275..6e027fd 100644
--- a/src/views/product/after-sales-service.vue
+++ b/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>
diff --git a/tests/after-sales-classification-layout.static.test.cjs b/tests/after-sales-classification-layout.static.test.cjs
new file mode 100644
index 0000000..986d218
--- /dev/null
+++ b/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;/);
+});