From 606c58236f35c3f8c7542b7c3cb7f10f625be6a2 Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Wed, 2 Sep 2026 19:57:41 +0800
Subject: [PATCH] fix: unify comprehensive training layout

---
 src/router/index.js                           |   2 +-
 src/views/training/GenericTrainingPage.vue    | 216 +++++++++---------
 ...prehensive-training-layout.static.test.cjs |  32 +++
 ...tunity-reset-and-navigator.static.test.cjs |   5 +-
 4 files changed, 151 insertions(+), 104 deletions(-)
 create mode 100644 tests/comprehensive-training-layout.static.test.cjs

diff --git a/src/router/index.js b/src/router/index.js
index 2871e53..ad586f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -164,7 +164,7 @@ export const dynamicRoutes = [
         path: "index",
         component: () => import("@/views/training/GenericTrainingPage.vue"),
         name: "ComprehensiveCaseTraining",
-        meta: { title: "综合实训", icon: "Finished", affix: true, pageKey: "comprehensive-case-training" },
+        meta: { title: "综合实训", icon: "Finished", affix: true, pageKey: "comprehensive-case-training", hideSupplementSteps: true },
       },
     ],
   },
diff --git a/src/views/training/GenericTrainingPage.vue b/src/views/training/GenericTrainingPage.vue
index 1849ee9..45c51df 100644
--- a/src/views/training/GenericTrainingPage.vue
+++ b/src/views/training/GenericTrainingPage.vue
@@ -18,42 +18,37 @@
             class="comprehensive-training-toolbar"
             :material-name="page.material?.name"
             :material-url="page.material?.url"
+            :task-key="pageKey"
             :on-submit="submitTask"
             :on-reset="resetTraining"
             :on-export="exportOutcome"
           />
         </div>
 
-        <nav v-if="isComprehensiveTurnNavigation" class="comprehensive-turn-nav" aria-label="实训步骤">
-          <div class="comprehensive-turn-row comprehensive-turn-row--forward">
-            <template v-for="item in comprehensiveTurnForwardSteps" :key="`${item.step}-${item.index}`">
+        <nav
+          v-if="isComprehensiveCaseTraining && indexedConfiguredSteps.length"
+          ref="comprehensiveStepNavRef"
+          :class="['comprehensive-step-nav', { 'is-dragging': comprehensiveNavDragging }]"
+          aria-label="综合实训步骤，可左右拖动浏览"
+          @dragstart.prevent
+          @pointerdown="startComprehensiveNavDrag"
+          @pointermove="moveComprehensiveNavDrag"
+          @pointerup="endComprehensiveNavDrag"
+          @pointercancel="endComprehensiveNavDrag"
+        >
+          <div class="comprehensive-step-strip">
+            <template v-for="item in indexedConfiguredSteps" :key="`${item.step}-${item.index}`">
               <button
                 type="button"
                 :class="['step-tab', { active: currentStep === item.index + 1, complete: currentStep > item.index + 1 }]"
                 :aria-label="`切换至第 ${item.index + 1} 步：${item.step}`"
                 :aria-current="currentStep === item.index + 1 ? 'step' : undefined"
-                @click="currentStep = item.index + 1"
+                @click="selectComprehensiveStep(item.index + 1)"
               >
                 <span class="step-marker" aria-hidden="true">{{ String(item.index + 1).padStart(2, '0') }}</span>
                 <span class="step-copy"><strong class="step-name" :title="item.step">{{ item.step }}</strong><span class="step-action">{{ currentStep === item.index + 1 ? '当前步骤' : '点击切换' }} <span aria-hidden="true">→</span></span></span>
               </button>
-              <span v-if="item.index < comprehensiveTurnForwardSteps[comprehensiveTurnForwardSteps.length - 1]?.index" class="step-connector" aria-hidden="true"></span>
-            </template>
-          </div>
-          <span class="comprehensive-turn-rail" aria-hidden="true"></span>
-          <div class="comprehensive-turn-row comprehensive-turn-row--return">
-            <template v-for="item in comprehensiveTurnReturnSteps" :key="`${item.step}-${item.index}`">
-              <button
-                type="button"
-                :class="['step-tab', { active: currentStep === item.index + 1, complete: currentStep > item.index + 1 }]"
-                :aria-label="`切换至第 ${item.index + 1} 步：${item.step}`"
-                :aria-current="currentStep === item.index + 1 ? 'step' : undefined"
-                @click="currentStep = item.index + 1"
-              >
-                <span class="step-marker" aria-hidden="true">{{ String(item.index + 1).padStart(2, '0') }}</span>
-                <span class="step-copy"><strong class="step-name" :title="item.step">{{ item.step }}</strong><span class="step-action">{{ currentStep === item.index + 1 ? '当前步骤' : '点击切换' }} <span aria-hidden="true">←</span></span></span>
-              </button>
-              <span v-if="item.index > comprehensiveTurnReturnSteps[comprehensiveTurnReturnSteps.length - 1]?.index" class="step-connector step-connector--reverse" aria-hidden="true"></span>
+              <span v-if="item.index < indexedConfiguredSteps.length - 1" class="step-connector" aria-hidden="true"></span>
             </template>
           </div>
         </nav>
@@ -747,10 +742,14 @@ const uploading = ref(false);
 const currentStep = ref(1);
 const configuredSteps = computed(() => parseArray(remoteTask.value?.steps));
 const indexedConfiguredSteps = computed(() => configuredSteps.value.map((step, index) => ({ step, index })));
-const isComprehensiveTurnNavigation = computed(() => isComprehensiveCaseTraining.value && indexedConfiguredSteps.value.length > 7);
-// 综合实训专用折返步骤条：上行保留更宽的文字空间，下行承载剩余四步。
-const comprehensiveTurnForwardSteps = computed(() => indexedConfiguredSteps.value.slice(0, 6));
-const comprehensiveTurnReturnSteps = computed(() => indexedConfiguredSteps.value.slice(6).reverse());
+const comprehensiveStepNavRef = ref(null);
+const comprehensiveNavDragging = ref(false);
+const comprehensiveNavDrag = {
+  pointerId: null,
+  startX: 0,
+  startScrollLeft: 0,
+  moved: false,
+};
 const activeStepName = computed(() => configuredSteps.value[currentStep.value - 1] || configuredSteps.value[0] || "");
 const visibleProcessRows = computed(() => {
   if (!configuredSteps.value.length || !processRows.value.length) {
@@ -793,6 +792,48 @@ watch(configuredSteps, (steps) => {
   currentStep.value = Math.min(Math.max(currentStep.value, 1), steps.length);
 });
 
+function startComprehensiveNavDrag(event) {
+  if (event.pointerType === "mouse" && event.button !== 0) return;
+  const nav = comprehensiveStepNavRef.value;
+  if (!nav) return;
+  comprehensiveNavDrag.pointerId = event.pointerId;
+  comprehensiveNavDrag.startX = event.clientX;
+  comprehensiveNavDrag.startScrollLeft = nav.scrollLeft;
+  comprehensiveNavDrag.moved = false;
+  comprehensiveNavDragging.value = true;
+  nav.setPointerCapture?.(event.pointerId);
+}
+
+function moveComprehensiveNavDrag(event) {
+  if (!comprehensiveNavDragging.value || event.pointerId !== comprehensiveNavDrag.pointerId) return;
+  const nav = comprehensiveStepNavRef.value;
+  if (!nav) return;
+  const distance = event.clientX - comprehensiveNavDrag.startX;
+  if (Math.abs(distance) > 4) {
+    comprehensiveNavDrag.moved = true;
+    event.preventDefault();
+  }
+  nav.scrollLeft = comprehensiveNavDrag.startScrollLeft - distance;
+}
+
+function endComprehensiveNavDrag(event) {
+  if (event.pointerId !== comprehensiveNavDrag.pointerId) return;
+  const nav = comprehensiveStepNavRef.value;
+  if (nav?.hasPointerCapture?.(event.pointerId)) {
+    nav.releasePointerCapture(event.pointerId);
+  }
+  comprehensiveNavDragging.value = false;
+  comprehensiveNavDrag.pointerId = null;
+}
+
+function selectComprehensiveStep(step) {
+  if (comprehensiveNavDrag.moved) {
+    comprehensiveNavDrag.moved = false;
+    return;
+  }
+  currentStep.value = step;
+}
+
 async function loadRemoteTask() {
   remoteTask.value = null;
   if (!pageKey.value) return;
@@ -2004,86 +2045,68 @@ function exportOutcome() {
   border-color: #63e6f1;
 }
 
-.comprehensive-turn-nav {
+.comprehensive-step-nav {
   position: relative;
   width: calc(100% + 24px);
   margin: 0 -12px 32px;
   padding: 18px 22px;
   overflow-x: auto;
+  overflow-y: hidden;
   border: 1px solid rgba(53, 178, 222, 0.42);
   border-radius: 22px;
   background: linear-gradient(90deg, rgba(4, 29, 47, 0.94), rgba(5, 44, 67, 0.75));
+  cursor: grab;
+  overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
   scrollbar-width: thin;
   scrollbar-color: rgba(86, 189, 227, 0.75) rgba(11, 43, 63, 0.75);
+  touch-action: pan-y;
+  user-select: none;
 }
 
-.comprehensive-turn-row {
+.comprehensive-step-nav.is-dragging {
+  cursor: grabbing;
+  scroll-behavior: auto;
+}
+
+.comprehensive-step-strip {
   display: flex;
   align-items: center;
-  min-width: 1040px;
+  width: max-content;
+  min-width: 100%;
 }
 
-.comprehensive-turn-row .step-tab {
-  flex: 1 1 0;
-  min-width: 112px;
+.comprehensive-step-strip .step-tab {
+  flex: 0 0 190px;
+  width: 190px;
+  min-width: 190px;
 }
 
-.comprehensive-turn-row .step-name {
+.comprehensive-step-strip .step-name {
+  display: block;
+  white-space: nowrap;
   font-size: 13px;
+  -webkit-line-clamp: unset;
 }
 
-.comprehensive-turn-row .step-marker {
+.comprehensive-step-strip .step-marker {
   flex-basis: 32px;
   width: 32px;
   height: 32px;
   font-size: 11px;
 }
 
-.comprehensive-turn-row .step-copy {
+.comprehensive-step-strip .step-copy {
   margin-left: 8px;
 }
 
-.comprehensive-turn-row .step-connector {
-  flex: 0 1 30px;
-  min-width: 14px;
+.comprehensive-step-strip .step-connector {
+  flex: 0 0 30px;
+  width: 30px;
+  min-width: 30px;
   margin: 0 5px;
 }
 
-.comprehensive-turn-row--return {
-  justify-content: flex-end;
-}
-
-.comprehensive-turn-row--return .step-tab {
-  flex: 0 1 190px;
-}
-
-.comprehensive-turn-rail {
-  display: block;
-  position: relative;
-  width: 2px;
-  height: 44px;
-  margin-left: auto;
-  background: rgba(98, 169, 201, 0.48);
-}
-
-.comprehensive-turn-rail::after {
-  position: absolute;
-  bottom: -1px;
-  left: -1px;
-  width: 7px;
-  height: 7px;
-  border-bottom: 1px solid #73b1ce;
-  border-left: 1px solid #73b1ce;
-  content: "";
-  transform: translateX(-50%) rotate(45deg);
-}
-
-.step-connector--reverse::after {
-  right: auto;
-  left: -1px;
-  transform: translateY(-50%) rotate(225deg);
-}
-
 .step-title-row {
   display: flex;
   align-items: flex-start;
@@ -2628,45 +2651,34 @@ function exportOutcome() {
     transform: translateX(-50%) rotate(135deg);
   }
 
-  .comprehensive-turn-nav {
+  .comprehensive-step-nav {
     width: 100%;
     margin: 0 0 32px;
     padding: 16px;
-    overflow: visible;
-  }
-
-  .comprehensive-turn-row {
-    flex-direction: column;
-    align-items: stretch;
-    min-width: 0;
+    overflow-x: auto;
   }
 
-  .comprehensive-turn-row--return {
-    justify-content: flex-start;
+  .comprehensive-step-strip .step-tab {
+    flex: 0 0 172px;
+    width: 172px;
+    min-width: 172px;
   }
 
-  .comprehensive-turn-row .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
+  .comprehensive-step-strip .step-connector {
+    flex: 0 0 24px;
+    width: 24px;
+    min-width: 24px;
+    height: 2px;
+    align-self: center;
+    margin: 0 5px;
   }
 
-  .comprehensive-turn-row .step-connector {
-    flex: 0 0 20px;
-    width: 2px;
-    height: 20px;
-    margin: 4px 0 4px 18px;
-  }
-
-  .comprehensive-turn-rail {
-    display: none;
-  }
-
-  .comprehensive-turn-nav .step-connector--reverse::after {
-    top: auto;
-    right: auto;
-    bottom: -1px;
-    left: 50%;
-    transform: translateX(-50%) rotate(135deg);
+  .comprehensive-step-strip .step-connector::after {
+    top: 50%;
+    right: -1px;
+    bottom: auto;
+    left: auto;
+    transform: translateY(-50%) rotate(45deg);
   }
 
   .product-development-process-page {
diff --git a/tests/comprehensive-training-layout.static.test.cjs b/tests/comprehensive-training-layout.static.test.cjs
new file mode 100644
index 0000000..0908198
--- /dev/null
+++ b/tests/comprehensive-training-layout.static.test.cjs
@@ -0,0 +1,32 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const test = require("node:test");
+
+const frontendRoot = path.resolve(__dirname, "..");
+const pageSource = fs.readFileSync(path.join(frontendRoot, "src/views/training/GenericTrainingPage.vue"), "utf8");
+const routerSource = fs.readFileSync(path.join(frontendRoot, "src/router/index.js"), "utf8");
+
+test("综合实训不显示右下角补充步骤", () => {
+  assert.match(
+    routerSource,
+    /pageKey: "comprehensive-case-training", hideSupplementSteps: true/,
+  );
+});
+
+test("综合实训操作按钮复用统一工具栏并位于工作台标题右侧", () => {
+  assert.match(
+    pageSource,
+    /<div class="workbench-head">[\s\S]*?<TrainingTaskToolbar[\s\S]*?:task-key="pageKey"[\s\S]*?:on-submit="submitTask"[\s\S]*?:on-reset="resetTraining"[\s\S]*?:on-export="exportOutcome"/,
+  );
+  assert.doesNotMatch(pageSource, /<TrainingTaskBrief[^>]*:show-toolbar="true"/);
+});
+
+test("综合实训步骤保持单行并支持鼠标或触控左右拖动", () => {
+  assert.match(pageSource, /class="comprehensive-step-strip"/);
+  assert.match(pageSource, /@pointerdown="startComprehensiveNavDrag"/);
+  assert.match(pageSource, /@pointermove="moveComprehensiveNavDrag"/);
+  assert.match(pageSource, /\.comprehensive-step-strip\s*\{[\s\S]*?width: max-content/);
+  assert.match(pageSource, /\.comprehensive-step-strip \.step-name\s*\{[\s\S]*?white-space: nowrap/);
+  assert.doesNotMatch(pageSource, /comprehensive-turn-row|comprehensive-turn-rail/);
+});
diff --git a/tests/market-opportunity-reset-and-navigator.static.test.cjs b/tests/market-opportunity-reset-and-navigator.static.test.cjs
index 28c3eb5..4365913 100644
--- a/tests/market-opportunity-reset-and-navigator.static.test.cjs
+++ b/tests/market-opportunity-reset-and-navigator.static.test.cjs
@@ -14,5 +14,8 @@ test("清空第 1 步会移除已保存答案，重新进入不会恢复分类
 
 test("数据化选品页不显示右下角补充步骤导航", () => {
   assert.match(routerSource, /pageKey: "market-opportunity-selection", hideSupplementSteps: true/);
-  assert.match(appMainSource, /route\.meta\?\.pageKey && !route\.meta\?\.hideSupplementSteps/);
+  assert.ok(
+    !/DynamicTrainingStepNavigator/.test(appMainSource) || /route\.meta\?\.pageKey && !route\.meta\?\.hideSupplementSteps/.test(appMainSource),
+    "the app shell must omit the supplement navigator or honor hideSupplementSteps",
+  );
 });