merge: 紧凑KANO需求列表

src/views/demand/consumer-behavior.vue

@@ -1430,7 +1430,8 @@ function downloadSurveyReportTemplate() {
 }
 
 .kano-table-wrap {
-  overflow-x: auto;
+  max-height: 420px;
+  overflow: auto;
   border: 1px solid rgba(0, 180, 255, 0.24);
   border-radius: 18px;
   background: rgba(1, 14, 26, 0.72);
@@ -1444,13 +1445,16 @@ function downloadSurveyReportTemplate() {
 
   th,
   td {
-    padding: 10px 12px;
+    padding: 8px 12px;
     border-right: 1px solid rgba(77, 167, 220, 0.26);
     border-bottom: 1px solid rgba(77, 167, 220, 0.26);
     vertical-align: middle;
   }
 
   th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     color: #ecfbff;
     background: linear-gradient(100deg, #158fc4, #08739f);
     font-size: 16px;
@@ -1474,7 +1478,7 @@ function downloadSurveyReportTemplate() {
 }
 
 .kano-textarea {
-  min-height: 58px;
+  min-height: 44px;
 }
 
 .kano-select-cell {
@@ -1486,7 +1490,7 @@ function downloadSurveyReportTemplate() {
 }
 
 .kano-select :deep(.el-select__wrapper) {
-  min-height: 42px;
+  min-height: 38px;
   border: 1px solid rgba(67, 134, 166, 0.8);
   border-radius: 10px;
   box-shadow: none;

tests/consumer-behavior-training-eight-navigation.static.test.cjs

@@ -18,3 +18,10 @@ test("查看实训8通过应用路由在当前会话内打开目标用户画像"
 test("查看实训8按钮在说明区右侧采用紧凑尺寸", () => {
   assert.match(source, /\.training-eight-action \{\s*grid-column: 2;\s*grid-row: 1;\s*justify-self: end;\s*min-width: 124px;\s*height: 38px;/);
 });
+
+test("KANO需求列表在紧凑可视区内滚动并固定表头", () => {
+  assert.match(source, /\.kano-table-wrap \{\s*max-height: 420px;\s*overflow: auto;/);
+  assert.match(source, /th \{\s*position: sticky;\s*top: 0;\s*z-index: 1;/);
+  assert.match(source, /\.kano-textarea \{\s*min-height: 44px;/);
+  assert.match(source, /\.kano-select :deep\(\.el-select__wrapper\) \{\s*min-height: 38px;/);
+});