From 30bc72da8ca2934c1b941f502695f6d1add835a7 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Mon, 21 Sep 2026 17:55:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=A7=E5=93=81=E8=A7=84?=
 =?UTF-8?q?=E5=88=92=E4=B8=8E=E8=AE=BE=E8=AE=A1=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?ui=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/after-sales-service.vue |  978 +++++++++++++++++--
 src/views/product/requirements-doc.vue    | 1081 ++++++++++++++++++++-
 src/views/product/structure.vue           |  987 ++++++++++++++++++-
 3 files changed, 2931 insertions(+), 115 deletions(-)

diff --git a/src/views/product/after-sales-service.vue b/src/views/product/after-sales-service.vue
index eed359c..8b7ffdc 100644
--- a/src/views/product/after-sales-service.vue
+++ b/src/views/product/after-sales-service.vue
@@ -1,30 +1,42 @@
 <template>
   <div class="after-sales-page student-training-shell">
-    <main class="training-core">
+    <main class="after-sales-core">
       <section class="task-header">
-        <div class="task-badge"><el-icon><Service /></el-icon> 产品规划与设计</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <span class="task-badge"><el-icon><Service /></el-icon> 核心实训 · 产品售后与服务设计</span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul><li v-for="goal in taskGoals" :key="goal">{{ goal }}</li></ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
+        </div>
+        <div class="after-sales-toolbar">
+          <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
+          <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
+        </div>
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
-      <section class="task-card">
+      <section class="after-sales-workbench">
         <div class="workbench-head">
           <div>
             <p class="section-eyebrow">After-sales diagnostic routing</p>
             <h2>售后故障类型分类</h2>
           </div>
-          <div class="workbench-actions">
-            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
-            <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
-          </div>
         </div>
 
         <nav class="step-indicator" aria-label="售后服务流程设计步骤">
           <template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
             <button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)">
               <span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy"><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span>
+              <span class="step-copy"><strong class="step-name" :title="step">{{ step }}</strong><span class="step-action">{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</span></span>
             </button>
             <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true"></span>
           </template>
@@ -54,7 +66,25 @@
                 </header>
                 <p>{{ category.description }}</p>
                 <div class="lane-drop-zone">
-                  <FaultCard v-for="fault in faultsByCategory(category.id)" :key="fault.id" :fault="fault" />
+                  <article
+                    v-for="fault in faultsByCategory(category.id)"
+                    :key="fault.id"
+                    class="fault-card"
+                    :class="{ dragging: dragFaultId === fault.id }"
+                    :draggable="!checking"
+                    @dragstart="onDragStart(fault.id)"
+                    @dragend="onDragEnd"
+                  >
+                    <span class="fault-handle" title="拖拽分类">⠿</span>
+                    <p>{{ fault.text }}</p>
+                    <label class="fault-select-label">
+                      <span>分类</span>
+                      <el-select :model-value="assignments[fault.id] || ''" :disabled="checking" size="small" class="fault-select" @update:model-value="(val) => setCategory(fault.id, val)">
+                        <el-option value="" label="待分类" />
+                        <el-option v-for="cat in CATEGORIES" :key="cat.id" :value="cat.id" :label="cat.name" />
+                      </el-select>
+                    </label>
+                  </article>
                   <span v-if="!faultsByCategory(category.id).length" class="drop-hint">将故障现象拖到这里</span>
                 </div>
               </article>
@@ -64,7 +94,25 @@
               <div class="unassigned-head"><span class="section-eyebrow">待分类故障现象</span><strong>{{ unassignedFaults.length }}</strong></div>
               <p>卡片初始顺序已打乱。可直接拖拽，也可用卡片内的下拉框辅助调整。</p>
               <div class="unassigned-list">
-                <FaultCard v-for="fault in unassignedFaults" :key="fault.id" :fault="fault" />
+                <article
+                  v-for="fault in unassignedFaults"
+                  :key="fault.id"
+                  class="fault-card"
+                  :class="{ dragging: dragFaultId === fault.id }"
+                  :draggable="!checking"
+                  @dragstart="onDragStart(fault.id)"
+                  @dragend="onDragEnd"
+                >
+                  <span class="fault-handle" title="拖拽分类">⠿</span>
+                  <p>{{ fault.text }}</p>
+                  <label class="fault-select-label">
+                    <span>分类</span>
+                    <el-select :model-value="assignments[fault.id] || ''" :disabled="checking" size="small" class="fault-select" @update:model-value="(val) => setCategory(fault.id, val)">
+                      <el-option value="" label="待分类" />
+                      <el-option v-for="cat in CATEGORIES" :key="cat.id" :value="cat.id" :label="cat.name" />
+                    </el-select>
+                  </label>
+                </article>
                 <span v-if="!unassignedFaults.length" class="unassigned-empty">全部故障现象已完成归类</span>
               </div>
             </aside>
@@ -83,7 +131,7 @@
             <div><p class="section-eyebrow">Step 02</p><h3>{{ trainingSteps[1] }}</h3></div>
             <span class="step-chip">方案设计与规则沉淀</span>
           </div>
-          <p class="step-desc">根据 4 类故障类型，设计标准化的分级处理流程。请结合案例资料中的售后政策和常见故障案例，完成处理流程表。斜体内容为填写示例，可使用“带入示例”快速复制后再按自己的方案修改。</p>
+          <p class="step-desc">根据 4 类故障类型，设计标准化的分级处理流程。请结合案例资料中的售后政策和常见故障案例，完成处理流程表。斜体内容为填写示例，可使用"带入示例"快速复制后再按自己的方案修改。</p>
 
           <div class="service-table-wrap">
             <table class="service-table">
@@ -148,7 +196,7 @@
 
           <section class="policy-section" aria-labelledby="policy-summary-title">
             <div class="policy-section-heading"><span>（二）</span><h4 id="policy-summary-title">填写电商详情页售后信息摘要</h4></div>
-            <p>将政策核心信息提炼为消费者友好的简明摘要，用于详情页“售后保障”模块展示。</p>
+            <p>将政策核心信息提炼为消费者友好的简明摘要，用于详情页"售后保障"模块展示。</p>
             <div class="service-table-wrap">
               <table class="service-table policy-summary-table">
                 <thead><tr><th>售后信息项</th><th>详情页展示内容</th></tr></thead>
@@ -192,11 +240,10 @@
 </template>
 
 <script setup>
-import { computed, defineComponent, getCurrentInstance, h, onMounted, ref } from "vue";
+import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, Download, RefreshLeft, Service } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { checkAfterSalesServiceStepOne, checkAfterSalesServiceStepTwo, checkAfterSalesServiceStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { getStudentTrainingPage } from "@/views/training/studentTrainingPages";
@@ -206,6 +253,7 @@ const TASK_KEY = "after-sales-service";
 const { proxy } = getCurrentInstance();
 const basePage = getStudentTrainingPage(TASK_KEY);
 const taskConfig = ref(null);
+const briefOpen = ref(false);
 const currentStep = ref(1);
 const checking = ref(false);
 const dragFaultId = ref("");
@@ -230,7 +278,7 @@ const FAULTS = [
   { id: "voice-wake-no-response", text: "用户使用语音唤醒，设备无反应，但手动开关灯正常" },
   { id: "voice-control-cannot-switch", text: "唤醒词识别正常，但语音控制设备开机和关机无法实现" },
   { id: "app-cannot-find-device", text: "配网时 APP 搜索不到设备" },
-  { id: "network-setup-timeout", text: "APP 添加设备时提示“配网超时”" },
+  { id: "network-setup-timeout", text: "APP 添加设备时提示「配网超时」" },
   { id: "remote-control-intermittent", text: "开关正常，但 APP 远程控制时好时坏" },
   { id: "frequent-disconnection", text: "配网成功但每隔几小时就断连" },
   { id: "indicator-no-response", text: "插电后指示灯不亮，完全无反应" },
@@ -294,23 +342,6 @@ const policyAnswers = ref(createEmptyPolicyAnswers());
 const unassignedFaults = computed(() => orderedFaults.value.filter((fault) => !assignments.value[fault.id]));
 const progressItems = computed(() => trainingSteps.value.map((text, index) => ({ text, status: index + 1 < currentStep.value ? "done" : index + 1 === currentStep.value ? "doing" : "" })));
 
-const FaultCard = defineComponent({
-  props: { fault: { type: Object, required: true } },
-  setup(props) {
-    return () => h("article", {
-      class: ["fault-card", { dragging: dragFaultId.value === props.fault.id }], draggable: !checking.value,
-      onDragstart: () => onDragStart(props.fault.id), onDragend: onDragEnd,
-    }, [
-      h("span", { class: "fault-handle", title: "拖拽分类" }, "⠿"),
-      h("p", props.fault.text),
-      h("label", { class: "fault-select-label" }, [h("span", "分类"), h("select", {
-        value: assignments.value[props.fault.id] || "", disabled: checking.value,
-        onChange: (event) => setCategory(props.fault.id, event.target.value),
-      }, [h("option", { value: "" }, "待分类"), ...CATEGORIES.map((category) => h("option", { value: category.id }, category.name))])]),
-    ]);
-  },
-});
-
 onMounted(async () => { await loadTaskConfig(); await loadSavedProgress(); });
 
 function shuffleFaults() { return [...FAULTS].sort(() => Math.random() - 0.5); }
@@ -429,33 +460,870 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ currentStep:
 </script>
 
 <style scoped lang="scss">
-.after-sales-page{display:grid;grid-template-columns:minmax(720px,1fr) 340px;gap:24px;min-height:calc(100vh - 76px);padding:24px;color:#1e3a5f;background:#ffffff}.training-core{min-width:0;padding:28px;border:1px solid #cfe2f5;border-radius:36px;background:#f0f6fd;box-shadow:inset 0 1px 0 rgba(30, 136, 229, 0.05),0 22px 48px rgba(0, 0, 0, 0.08)}.task-header{margin-bottom:24px}.task-badge,.step-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe2f5;border-radius:999px;color:#2c4a6a;background:#e3f2fd;font-size:12px;font-weight:700}.task-badge{min-height:28px;padding:4px 14px}.task-title{margin:12px 0 0;color:#1e3a5f;font-size:30px;font-weight:900;line-height:1.3}.task-card,.step-card{border:1px solid #cfe2f5;border-radius:26px;background:#f0f6fd}.task-card{margin-top:28px;padding:18px 22px 22px}.workbench-head{display:flex;justify-content:space-between;gap:18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #cfe2f5}.section-eyebrow{margin:0;color:#1e88e5;font-size:12px;font-weight:800;letter-spacing:.06em}.workbench-head h2,.step-title-row h3,.placeholder-card h3{margin:5px 0 0;color:#1e3a5f;font-size:24px;line-height:1.3}.workbench-actions,.task-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.workbench-actions{justify-content:flex-end}.outline-action,.btn-nav{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid #cfe2f5;border-radius:999px;color:#1e3a5f;background:#e3f2fd;font:inherit;font-size:14px;font-weight:800;cursor:pointer}.outline-action:hover,.btn-nav:hover:not(:disabled){border-color:#1e88e5;background:#bbdefb}button:disabled{cursor:not-allowed;opacity:.45}.btn-submit,.btn-primary{color:#ffffff;border-color:transparent;background:linear-gradient(135deg,#1e88e5,#1565c0)}.step-indicator{display:flex;align-items:center;margin:0 -12px 30px;padding:18px 22px;overflow-x:auto;border:1px solid #cfe2f5;border-radius:18px;background:#f0f6fd}.step-tab{display:flex;flex:1 0 145px;align-items:center;gap:10px;min-height:66px;padding:8px;border:1px solid #cfe2f5;border-radius:8px;color:#5a7a9a;background:#f0f6fd;font:inherit;text-align:left;cursor:pointer}.step-tab.active{border-color:#1e88e5;color:#ffffff;background:linear-gradient(135deg,#1e88e5,#1565c0)}.step-tab.complete{color:#2c4a6a}.step-marker{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-weight:900}.step-copy{display:grid;gap:3px}.step-copy small{font-size:11px;color:inherit}.step-connector{flex:0 0 24px;height:2px;background:#cfe2f5}.step-card{padding:24px}.step-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.step-chip{padding:7px 12px}.step-desc{margin:18px 0 24px;color:#2c4a6a;font-size:15px;line-height:1.8}.classification-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;align-items:start}.fault-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.fault-lane,.unassigned-panel{border:1px solid #cfe2f5;border-radius:17px;background:linear-gradient(145deg,#e3f2fd,#f0f6fd);transition:border-color .2s,box-shadow .2s,background .2s}.fault-lane{min-height:260px;padding:16px}.fault-lane--over,.unassigned-panel--over{border-color:#1e88e5;background:#bbdefb;box-shadow:0 0 0 3px rgba(30, 136, 229, 0.12)}.lane-head,.unassigned-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.lane-head>div{display:flex;align-items:center;gap:9px}.lane-index{display:grid;place-items:center;width:28px;height:28px;border:1px solid #1e88e5;border-radius:50%;color:#1e88e5;font-size:11px;font-weight:900}.lane-head h4{margin:0;color:#1e3a5f;font-size:16px}.lane-head>span{color:#1e88e5;font-size:12px;font-weight:800}.fault-lane>p,.unassigned-panel>p{min-height:40px;margin:10px 0;color:#2c4a6a;font-size:12px;line-height:1.65}.lane-drop-zone,.unassigned-list{display:grid;gap:10px}.drop-hint,.unassigned-empty{display:grid;place-items:center;min-height:104px;border:1px dashed #cfe2f5;border-radius:11px;color:#5a7a9a;font-size:12px;text-align:center}.unassigned-panel{position:sticky;top:18px;padding:18px}.unassigned-head strong{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#ffffff;background:#1e88e5;font-size:12px}.fault-card{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;padding:11px;border:1px solid #cfe2f5;border-radius:11px;background:#f0f6fd;cursor:grab;transition:.2s}.fault-card:hover,.fault-card.dragging{border-color:#1e88e5;box-shadow:0 8px 16px rgba(0, 0, 0, 0.06);transform:translateY(-1px)}.fault-handle{color:#1e88e5;font-size:18px;line-height:1}.fault-card p{grid-column:2;margin:0;color:#1e3a5f;font-size:13px;line-height:1.55}.fault-select-label{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#5a7a9a;font-size:11px}.fault-select-label select{max-width:142px;padding:4px 22px 4px 7px;border:1px solid #cfe2f5;border-radius:6px;color:#2c4a6a;background:#f0f6fd;font:inherit;font-size:11px}.result-message{margin:22px 0 0;padding:11px 14px;border:1px solid rgba(245, 124, 0, 0.5);border-radius:10px;color:#8a4b08;background:rgba(245, 124, 0, 0.1)}.result-message.success{border-color:#26a69a;color:#00695c;background:rgba(38, 166, 154, 0.12)}.task-actions{justify-content:flex-end;margin-top:24px}.placeholder-card{min-height:250px}.placeholder-card>p:not(.section-eyebrow){margin:18px 0;color:#2c4a6a;line-height:1.8}@media (max-width:1180px){.after-sales-page{grid-template-columns:1fr}.training-core{padding:22px}}@media (max-width:850px){.classification-workspace{grid-template-columns:1fr}.unassigned-panel{position:static}.fault-lanes{grid-template-columns:1fr}}@media (max-width:720px){.after-sales-page{padding:12px}.training-core{padding:16px;border-radius:20px}.task-card,.step-card{padding:16px}.workbench-head{flex-direction:column}.workbench-actions,.outline-action,.btn-nav{width:100%}.step-indicator{align-items:stretch;flex-direction:column;margin-right:0;margin-left:0}.step-tab{flex:0 0 auto;width:100%}.step-connector{flex:0 0 20px;width:2px;height:20px;margin-left:25px}.fault-lanes{grid-template-columns:1fr}.task-title{font-size:25px}}
-.service-table-wrap{overflow-x:auto;border:1px solid #cfe2f5;border-radius:16px;background:#f0f6fd}.service-table{width:100%;min-width:990px;border-collapse:collapse;table-layout:fixed}.service-table th,.service-table td{padding:14px;border-right:1px solid #cfe2f5;border-bottom:1px solid #cfe2f5;vertical-align:top}.service-table tr:last-child th,.service-table tr:last-child td{border-bottom:0}.service-table th:last-child,.service-table td:last-child{border-right:0}.service-table thead th{padding:13px 12px;color:#ffffff;background:linear-gradient(90deg,#1e88e5,#1565c0);font-size:14px;text-align:center}.service-table tbody th{width:15%;vertical-align:middle;color:#1e3a5f;background:#e3f2fd;font-size:14px;text-align:center}.service-table tbody td{width:28.33%;color:#2c4a6a;font-size:13px;line-height:1.7}.service-row-index{display:block;margin-bottom:7px;color:#1e88e5;font-size:11px;font-weight:900;letter-spacing:.1em}.service-table em{color:#5a7a9a;font-style:italic}.service-table textarea{display:block;box-sizing:border-box;width:100%;min-height:92px;padding:10px;border:1px solid #cfe2f5;border-radius:9px;outline:none;resize:vertical;color:#1e3a5f;background:#f0f6fd;font:inherit;font-size:13px;line-height:1.6;transition:border-color .2s,box-shadow .2s}.service-table textarea::placeholder{color:#5a7a9a}.service-table textarea:focus{border-color:#1e88e5;box-shadow:0 0 0 3px rgba(30, 136, 229, 0.12)}.example-button{margin-top:9px;padding:4px 9px;border:1px solid #1e88e5;border-radius:999px;color:#2c4a6a;background:#e3f2fd;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.example-button:hover{border-color:#1e88e5;background:#bbdefb}.example-copy{display:block;margin-top:8px;color:#5a7a9a;font-size:11px;line-height:1.55;white-space:pre-line}
-.policy-design-card{display:grid;gap:26px}.policy-design-card .step-title-row{margin-bottom:-8px}.policy-section{display:grid;gap:10px}.policy-section-heading{display:flex;align-items:center;gap:9px}.policy-section-heading span{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(30, 136, 229, 0.4);border-radius:8px;color:#1e88e5;font-size:12px;font-weight:900}.policy-section-heading h4{margin:0;color:#1e3a5f;font-size:18px}.policy-section>p{margin:0;color:#2c4a6a;font-size:13px;line-height:1.8}.policy-table{min-width:1040px}.policy-table tbody th{width:18%}.policy-table tbody td{width:41%}.policy-summary-table{min-width:760px}.policy-summary-table tbody th{width:20%}.policy-summary-table tbody td{width:80%}.policy-summary-table textarea{min-height:78px}
-.step-tab { min-width: 0; }
-.step-tab.active { background: linear-gradient(115deg, #1e88e5, #1565c0); }
-.step-connector { position: relative; overflow: visible; }
-.step-connector::after { position: absolute; top: 50%; right: -1px; width: 6px; height: 6px; border-top: 1px solid #1e88e5; border-right: 1px solid #1e88e5; content: ""; transform: translateY(-50%) rotate(45deg); }
-
-/* 第 1 步参照产品需求说明书的横向拖拽卡片，避免待分类区占用过多高度。 */
+/* ===== 页面级令牌（墨黑极简主题） ===== */
+.after-sales-page {
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  --student-layer-1: #374151;
+  --student-layer-2: #43a294;
+  --student-layer-3: #8b6fc0;
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  --student-fs-display: 17px;
+  --student-fs-h1: 15px;
+  --student-fs-h2: 14px;
+  --student-fs-h3: 13px;
+  --student-fs-body: 13px;
+  --student-fs-body-sm: 12px;
+  --student-fs-caption: 11px;
+  --student-fs-button: 13px;
+  --student-fs-button-lg: 13px;
+  --student-fs-data: 14px;
+
+  min-width: 0;
+  color: var(--student-text);
+  background: #ffffff;
+}
+
+/* 主核心容器：透明化，无蓝边无蓝底 */
+.after-sales-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===== task-header：独立白卡片 ===== */
+.task-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.task-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.task-title {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-display);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover { text-decoration: underline; }
+}
+
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
+}
+
+.after-sales-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  max-width: 100%;
+}
+
+/* ===== workbench：透明化 ===== */
+.after-sales-workbench {
+  display: grid;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.workbench-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  border-bottom: 0;
+}
+
+.section-eyebrow {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.workbench-head h2 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+/* ===== step-card：透明化 ===== */
+.step-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.step-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.step-chip {
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  padding: 3px 10px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.step-desc {
+  margin: 14px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+/* ===== 按钮四级层级 ===== */
+.outline-action,
+.btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease,
+              color 0.16s ease, transform 0.16s ease,
+              box-shadow 0.16s ease;
+}
+
+.outline-action:hover:not(:disabled),
+.btn-nav:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+}
+
+.btn-nav.btn-primary,
+.btn-nav.btn-submit {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.btn-nav.btn-primary:hover:not(:disabled),
+.btn-nav.btn-submit:hover:not(:disabled) {
+  border-color: var(--student-accent-deep);
+  background: var(--student-accent-deep);
+  color: #ffffff;
+  transform: translateY(-1px);
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
+}
+
+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+/* ===== Step 01：拖拽分类区 ===== */
 .classification-workspace {
-  grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
   gap: 16px;
+  align-items: start;
+}
+
+.fault-lanes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.fault-lane,
+.unassigned-panel {
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.fault-lane {
+  min-height: 228px;
+  padding: 14px;
+}
+
+.fault-lane--over,
+.unassigned-panel--over {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.08);
 }
-.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: #2c4a6a; }
-.unassigned-list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 2px; }
+
+.lane-head,
+.unassigned-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.lane-head > div {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.lane-index {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.lane-head h4 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.lane-head > span {
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.fault-lane > p,
+.unassigned-panel > p {
+  min-height: 0;
+  margin: 8px 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.lane-drop-zone,
+.unassigned-list {
+  display: grid;
+  gap: 8px;
+}
+
+.drop-hint,
+.unassigned-empty {
+  display: grid;
+  place-items: center;
+  min-height: 90px;
+  border: 1px dashed var(--student-panel-border);
+  border-radius: 10px;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  text-align: center;
+}
+
+.unassigned-panel {
+  position: sticky;
+  top: 18px;
+  padding: 14px;
+}
+
+.unassigned-head strong {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.unassigned-list {
+  max-height: 560px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+/* fault-card（由 defineComponent 渲染，scoped 选择器加 [data-v-xxx] 后仍能命中） */
 .fault-card {
+  display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
   align-items: start;
   gap: 8px;
   padding: 9px 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: grab;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.fault-card:hover,
+.fault-card.dragging {
+  border-color: var(--student-accent);
+  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.08);
+  transform: translateY(-1px);
+}
+
+.fault-handle {
+  color: var(--student-accent);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.fault-card p {
+  grid-column: 2;
+  margin: 0;
+  color: var(--student-text);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.fault-select-label {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.fault-select-label select {
+  width: 126px;
+  max-width: none;
+  flex: 0 0 126px;
+  padding: 4px 22px 4px 7px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  color: var(--student-text);
+  background: #ffffff;
+  font: inherit;
+  font-size: 11px;
+}
+
+/* ===== 结果反馈 ===== */
+.result-message {
+  margin: 16px 0 0;
+  padding: 10px 14px;
+  border: 1px solid rgba(180, 83, 9, 0.3);
+  border-radius: 10px;
+  color: #92400e;
+  background: rgba(245, 158, 11, 0.08);
+  font-size: 12px;
+}
+
+.result-message.success {
+  border-color: rgba(74, 157, 110, 0.35);
+  color: #065f46;
+  background: rgba(74, 157, 110, 0.08);
+}
+
+/* ===== 表格（Step 02 / Step 03） ===== */
+.service-table-wrap {
+  overflow-x: auto;
+}
+
+.service-table {
+  width: 100%;
+  min-width: 990px;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.service-table th,
+.service-table td {
+  padding: 12px 14px;
+  border-right: 1px solid var(--student-panel-border);
+  border-bottom: 1px solid var(--student-panel-border);
+  vertical-align: top;
+}
+
+.service-table tr:last-child th,
+.service-table tr:last-child td { border-bottom: 0; }
+.service-table th:last-child,
+.service-table td:last-child { border-right: 0; }
+
+.service-table thead th {
+  padding: 12px 14px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 800;
+  text-align: left;
+}
+
+.service-table tbody th {
+  width: 15%;
+  vertical-align: middle;
+  color: var(--student-text);
+  background: transparent;
+  font-size: var(--student-fs-body);
+  text-align: left;
+  font-weight: 700;
+}
+
+.service-table tbody td {
+  width: 28.33%;
+  color: var(--student-text);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+.service-row-index {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 1px 6px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 4px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.service-table em {
+  color: var(--student-text-secondary);
+  font-style: italic;
+  font-size: 12px;
+}
+
+.service-table textarea {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 80px;
+  padding: 8px 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  outline: none;
+  resize: vertical;
+  color: var(--student-text);
+  background: transparent;
+  font: inherit;
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+  transition: border-color 0.16s ease;
+}
+
+.service-table textarea::placeholder {
+  color: var(--student-text-secondary);
+}
+
+.service-table textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.2);
+  outline-offset: -2px;
+  border-color: var(--student-accent);
+}
+
+.example-button {
+  margin-top: 8px;
+  padding: 3px 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+
+.example-button:hover {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+
+.example-copy {
+  display: block;
+  margin-top: 6px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+
+/* ===== Step 03：政策设计 ===== */
+.policy-design-card {
+  display: grid;
+  gap: 20px;
+}
+
+.policy-section {
+  display: grid;
+  gap: 8px;
+}
+
+.policy-section-heading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.policy-section-heading span {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.policy-section-heading h4 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
+
+.policy-section > p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+.policy-table { min-width: 1040px; }
+.policy-table tbody th { width: 18%; }
+.policy-table tbody td { width: 41%; }
+.policy-summary-table { min-width: 760px; }
+.policy-summary-table tbody th { width: 20%; }
+.policy-summary-table tbody td { width: 80%; }
+.policy-summary-table textarea { min-height: 70px; }
+
+/* ===== placeholder-card ===== */
+.placeholder-card {
+  min-height: 200px;
+}
+
+.placeholder-card > p:not(.section-eyebrow) {
+  margin: 12px 0;
+  color: var(--student-text-secondary);
+  line-height: 1.6;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1180px) {
+  .after-sales-page { padding: 16px; }
+}
+
+@media (max-width: 850px) {
+  .classification-workspace { grid-template-columns: 1fr; }
+  .unassigned-panel { position: static; }
+  .fault-lanes { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 720px) {
+  .after-sales-page { padding: 12px; }
+  .task-header { flex-direction: column; align-items: flex-start; }
+  .after-sales-toolbar { width: 100%; justify-content: flex-start; }
+  .fault-lanes { grid-template-columns: 1fr; }
+}
+</style>
+
+<style lang="scss">
+/* ===== 画布白底 + 1.55 行高 ===== */
+#app .studentLayout .app-main:has(.after-sales-page) {
+  background: #ffffff !important;
+}
+#app .studentLayout .app-main:has(.after-sales-page) .after-sales-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== 步骤导航：按钮切换风（覆盖全局 !important 浅蓝胶囊） ===== */
+#app .studentLayout section.app-main:has(.after-sales-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  .step-connector { display: none !important; }
+
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    /* 编号小徽章：方形 22px */
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
+
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 0 !important;
+      min-width: 0 !important;
+    }
+
+    .step-name {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      line-height: 1.3 !important;
+      color: inherit !important;
+    }
+
+    .step-action { display: none !important; }
+
+    /* 未到达 hover */
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
+
+    /* 已完成 */
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
+
+    /* 当前步骤：墨黑实底 */
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
+}
+
+/* ===== 窄屏 900px：横向滑动 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.after-sales-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+  }
+  #app .studentLayout section.app-main:has(.after-sales-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
+
+/* ===== 顶部工具栏 el-button 换肤 ===== */
+.after-sales-page .training-task-toolbar,
+.after-sales-page .after-sales-toolbar { gap: 8px; }
+
+.after-sales-page .material-button.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  box-shadow: none;
+  text-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.after-sales-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
+}
+
+.after-sales-page .material-button.el-button:hover,
+.after-sales-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
+
+.after-sales-page .material-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
 }
-.fault-card p { grid-column: 2; margin: 0; color: #1e3a5f; }
-.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/src/views/product/requirements-doc.vue b/src/views/product/requirements-doc.vue
index 0029e58..5c4bced 100644
--- a/src/views/product/requirements-doc.vue
+++ b/src/views/product/requirements-doc.vue
@@ -1,23 +1,35 @@
 <template>
   <div class="requirements-doc-page student-training-shell">
-    <main class="training-core">
+    <main class="requirements-core">
       <section class="task-header">
-        <div class="task-badge"><el-icon><Document /></el-icon> 产品规划与设计</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <span class="task-badge"><el-icon><Document /></el-icon> 产品规划与设计</span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul><li v-for="goal in taskGoals" :key="goal">{{ goal }}</li></ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
+        </div>
+        <div class="requirements-toolbar">
+          <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
+          <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>{{ currentStep === 3 ? '预览产品需求说明书' : '导出实训成果' }}</button>
+        </div>
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
       <section class="task-card">
         <div class="workbench-head">
           <div>
             <p class="section-eyebrow">{{ currentStep === 3 ? 'PRD document delivery' : currentStep === 2 ? 'PRD detailed specification' : 'PRD module matching' }}</p>
             <h2>{{ currentStep === 3 ? '生成并提交产品需求文档' : currentStep === 2 ? '填写 PRD 七大模块详细信息' : '认识 PRD 的核心模块' }}</h2>
           </div>
-          <div class="workbench-actions">
-            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
-            <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>{{ currentStep === 3 ? '预览产品需求说明书' : '导出实训成果' }}</button>
-          </div>
         </div>
 
         <nav class="step-indicator" aria-label="产品需求文档撰写步骤">
@@ -28,7 +40,7 @@
               @click="switchStep(index + 1)"
             >
               <span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy"><strong>{{ step }}</strong><small>{{ stepStateText(index) }}</small></span>
+              <span class="step-copy"><strong>{{ step }}</strong></span>
             </button>
             <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true" />
           </template>
@@ -42,7 +54,7 @@
             </div>
             <span class="step-chip">拖拽匹配判题</span>
           </div>
-          <p class="step-desc">PRD 是产品开发的纲领性文件，通常包含文档说明、产品概述、用户需求与场景、核心功能需求、非功能需求、硬件规格与设计需求、测试需求、项目规划和需求变更管理等模块。请把右侧被打乱的“核心作用”卡片拖入左侧对应模块；全部匹配正确后才能进入第 2 步。</p>
+          <p class="step-desc">PRD 是产品开发的纲领性文件，通常包含文档说明、产品概述、用户需求与场景、核心功能需求、非功能需求、硬件规格与设计需求、测试需求、项目规划和需求变更管理等模块。请把右侧被打乱的"核心作用"卡片拖入左侧对应模块；全部匹配正确后才能进入第 2 步。</p>
 
           <div class="matching-tip" role="status">
             <el-icon><InfoFilled /></el-icon>
@@ -105,7 +117,7 @@
             <span class="step-chip">可编辑 PRD 架构表</span>
           </div>
           <p class="step-desc">PRD 的每一个模块都需要言之有物、数据支撑。请基于案例资料和前期实训成果，完成以下七大模块的详细信息。</p>
-          <div class="prd-note"><el-icon><InfoFilled /></el-icon><span>灰色文字为参考示例，可点击“填入示例”后再修改。导出表格会同时包含示例内容和你的填写内容。</span></div>
+          <div class="prd-note"><el-icon><InfoFilled /></el-icon><span>灰色文字为参考示例，可点击"填入示例"后再修改。导出表格会同时包含示例内容和你的填写内容。</span></div>
 
           <div class="prd-table-wrap">
             <table class="prd-detail-table">
@@ -208,7 +220,6 @@ import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowRight, Close, Delete, Document, Download, InfoFilled, RefreshLeft, UploadFilled, View } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { checkRequirementsDocumentStepOne, getStudentTrainingAnswer, previewRequirementsDocumentFile, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
@@ -225,11 +236,11 @@ const MODULES = [
 const PURPOSES = [
   { id: "functional-scope", text: "详细规定产品具体做什么，是开发与测试的直接依据。" },
   { id: "acceptance-criteria", text: "明确验收标准，避免测试与产品理解不一致。" },
-  { id: "quality-attributes", text: "定义产品的“质量属性”，决定产品好不好用、稳不稳定。" },
+  { id: "quality-attributes", text: "定义产品的「质量属性」，决定产品好不好用、稳不稳定。" },
   { id: "document-governance", text: "建立文档本身的权威性与可追溯性，确保所有人看到的是同一份有效版本。" },
   { id: "change-control", text: "确保每一次变更都经过评估、记录和通知。" },
   { id: "user-context", text: "从用户视角出发，让团队在开发时能代入真实使用情境。" },
-  { id: "product-boundary", text: "回答“为什么做”和“做成什么样”，赋予开发团队价值感，划定产品边界。" },
+  { id: "product-boundary", text: "回答「为什么做」和「做成什么样」，赋予开发团队价值感，划定产品边界。" },
   { id: "hardware-constraints", text: "明确硬件与软件的通信协议及设计约束。" },
   { id: "resource-plan", text: "将产品需求转化为时间与资源计划，用于管理预期。" },
 ];
@@ -282,6 +293,7 @@ const fallbackTask = {
 };
 
 const taskConfig = ref(null);
+const briefOpen = ref(false);
 const currentStep = ref(1);
 const assignments = ref({});
 const stepTwoContents = ref({});
@@ -521,18 +533,1029 @@ function goNextStep() { switchStep(2); }
 function exportOutcome() { if (currentStep.value === 2) { exportStepTwoTable(); } else if (currentStep.value === 3 && isDocumentReady.value) { showDocumentPreview.value = true; } else { proxy?.$modal?.msgInfo("请进入第 2 步导出 PRD 详细信息表。"); } }
 </script>
 
-<style scoped>
-.requirements-doc-page { min-height: 100vh; color: #2c4a6a; background: radial-gradient(circle at 15% -10%, rgba(30, 136, 229, 0.08), transparent 36%), #ffffff; }
-.training-core { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 60px; }
-.task-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.task-badge, .step-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #cfe2f5; border-radius: 999px; color: #1e88e5; background: #e3f2fd; font-size: var(--student-fs-body-sm); }.task-title { margin: 0; color: #1e3a5f; font-size: var(--student-fs-h1); letter-spacing: .02em; }
-.task-card { padding: 26px; border: 1px solid #cfe2f5; border-radius: 24px; background: #f0f6fd; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06); }.workbench-head, .step-title-row, .purpose-bank__head, .task-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.workbench-head h2, .step-title-row h3, .purpose-bank h4 { margin: 4px 0 0; color: #1e3a5f; }.section-eyebrow { margin: 0; color: #1e88e5; font-size: var(--student-fs-caption); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
-.workbench-actions, .task-actions { display: flex; flex-wrap: wrap; }.outline-action, .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 15px; border: 1px solid #cfe2f5; border-radius: 9px; color: #2c4a6a; background: #e3f2fd; cursor: pointer; transition: .2s ease; }.outline-action:hover, .btn-nav:hover:not(:disabled) { border-color: #1e88e5; background: #bbdefb; transform: translateY(-1px); }.btn-submit { border-color: #1e88e5; color: #ffffff; background: linear-gradient(135deg, #1e88e5, #42a5f5); }.btn-primary {color:#ffffff; border-color: #1565c0; background: linear-gradient(135deg, #1565c0, #42a5f5); }.btn-nav:disabled { cursor: not-allowed; opacity: .48; }
-.step-indicator { display: flex; align-items: stretch; margin: 26px 0; padding: 10px; overflow-x: auto; border: 1px solid #cfe2f5; border-radius: 18px; background: #f0f6fd; }.step-tab { display: flex; min-width: 185px; flex: 1; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; color: #5a7a9a; background: transparent; text-align: left; cursor: pointer; }.step-tab.active { color: #ffffff; background: linear-gradient(90deg, #1e88e5, #42a5f5); box-shadow: inset 0 0 0 1px rgba(30, 136, 229, 0.3); }.step-tab.complete .step-marker { border-color: #1e88e5; color: #1e88e5; }.step-marker { display: inline-grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border: 1px solid #1e88e5; border-radius: 50%; font-weight: 700; }.step-copy { display: grid; gap: 3px; }.step-copy small { font-size: var(--student-fs-caption); }.step-connector { width: 22px; min-width: 22px; align-self: center; height: 1px; background: #1e88e5; }
-.step-card { padding: 25px; border: 1px solid #cfe2f5; border-radius: 18px; background: #f0f6fd; }.step-desc { margin: 18px 0; color: #2c4a6a; line-height: 1.8; }.matching-tip, .prd-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; padding: 10px 13px; border-left: 3px solid #1e88e5; border-radius: 5px; color: #5a7a9a; background: #e3f2fd; font-size: var(--student-fs-body); line-height: 1.65; }
-.matching-workspace { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr); gap: 24px; align-items: start; }.module-list { display: grid; gap: 10px; }.module-row { display: grid; grid-template-columns: minmax(185px, .31fr) minmax(0, .69fr); min-height: 84px; overflow: hidden; border: 1px solid #cfe2f5; border-radius: 10px; background: #e3f2fd; transition: .18s ease; cursor: pointer; }.module-row--over { border-color: #1e88e5; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15); }.module-row--filled { border-color: rgba(30, 136, 229, 0.4); }.module-label { display: flex; align-items: center; gap: 12px; padding: 16px; border-right: 1px solid #cfe2f5; color: #1e3a5f; background: #e3f2fd; }.module-label span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #1e88e5; background: rgba(30, 136, 229, 0.1); font-size: var(--student-fs-caption); }.module-drop-zone { display: flex; align-items: center; padding: 10px 12px; }.drop-placeholder { color: #5a7a9a; font-size: var(--student-fs-body); }
-.purpose-bank { position: sticky; top: 22px; padding: 18px; border: 1px solid #cfe2f5; border-radius: 14px; background: linear-gradient(180deg, #e3f2fd, #f0f6fd); transition: .18s ease; }.purpose-bank--over { border-color: #f57c00; box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.12); }.purpose-bank__head strong { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #1e88e5; border-radius: 50%; color: #1e88e5; }.purpose-bank > p { margin: 12px 0 15px; color: #5a7a9a; font-size: var(--student-fs-body-sm); line-height: 1.65; }.purpose-card-list { display: grid; gap: 9px; max-height: 570px; overflow: auto; padding-right: 3px; }.purpose-card { display: flex; align-items: center; width: 100%; gap: 8px; padding: 11px 12px; border: 1px solid #cfe2f5; border-radius: 8px; color: #1e3a5f; background: #f0f6fd; text-align: left; line-height: 1.55; cursor: grab; transition: .18s ease; }.purpose-card:hover, .purpose-card.selected { border-color: #1e88e5; background: #bbdefb; }.purpose-card.dragging { opacity: .5; }.purpose-card--assigned { cursor: grab; }.purpose-card--assigned span { flex: 1; }.purpose-card--assigned button { display: inline-grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 50%; color: #5a7a9a; background: rgba(30, 136, 229, 0.12); cursor: pointer; }.purpose-card--assigned button:hover { color: #1e3a5f; background: #c62828; }.drag-grip { color: #1e88e5; letter-spacing: -3px; }.purpose-bank__empty { padding: 22px 8px; color: #5a7a9a; text-align: center; }.result-message { margin: 20px 0 0; padding: 11px 14px; border: 1px solid rgba(245, 124, 0, 0.4); border-radius: 8px; color: #8a4b08; background: rgba(245, 124, 0, 0.1); }.result-message.success { border-color: rgba(38, 166, 154, 0.5); color: #00695c; background: rgba(38, 166, 154, 0.1); }.task-actions { justify-content: flex-end; margin-top: 21px; }
-.prd-detail-card { overflow: hidden; }.prd-table-wrap { overflow: auto; border: 1px solid #cfe2f5; border-radius: 12px; }.prd-detail-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }.prd-detail-table th { padding: 13px; color: #ffffff; background: linear-gradient(90deg, #1565c0, #1e88e5); font-weight: 700; }.prd-detail-table td { padding: 12px; border-top: 1px solid #cfe2f5; border-right: 1px solid #cfe2f5; vertical-align: top; background: #e3f2fd; }.prd-detail-table th:not(:last-child) { border-right: 1px solid #cfe2f5; }.prd-detail-table td:last-child { border-right: 0; }.prd-detail-table th:nth-child(1), .module-number { width: 72px; text-align: center; }.prd-detail-table th:nth-child(2), .module-name { width: 155px; }.prd-detail-table th:nth-child(3), .submodule-name { width: 245px; }.module-number, .module-name, .submodule-name { color: #2c4a6a; vertical-align: middle !important; }.module-name { background: #e3f2fd !important; font-weight: 700; }.submodule-name { background: #e3f2fd !important; }.detail-editor-cell { min-width: 480px; }.example-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #5a7a9a; font-size: var(--student-fs-body-sm); line-height: 1.6; }.example-bar button { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #cfe2f5; border-radius: 6px; color: #1e88e5; background: #e3f2fd; cursor: pointer; }.example-bar button:hover { color: #ffffff; background: #1e88e5; }.detail-editor-cell textarea { display: block; width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box; padding: 10px; border: 1px solid #cfe2f5; border-radius: 8px; outline: none; color: #1e3a5f; background: #f0f6fd; font: inherit; line-height: 1.65; }.detail-editor-cell textarea:focus { border-color: #1e88e5; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12); }.detail-editor-cell textarea::placeholder { color: #5a7a9a; }.upcoming-card { text-align: center; }.upcoming-card h3 { margin: 8px 0; }.upcoming-card p:not(.section-eyebrow) { color: #5a7a9a; }
-.file-input-hidden { display: none; }.prd-upload-card { overflow: hidden; }.prd-delivery-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 22px; border: 1px solid #cfe2f5; border-radius: 16px; background: linear-gradient(135deg, #e3f2fd, #f0f6fd); }.prd-delivery-guide h3 { margin: 0 0 10px; font-size: var(--student-fs-h1); color: #1e3a5f; }.prd-delivery-guide ol { margin: 0; padding-left: 20px; color: #5a7a9a; line-height: 1.8; }.document-drop-zone { display: grid; min-height: 270px; place-content: center; justify-items: center; gap: 14px; padding: 30px; margin-top: 20px; border: 1px dashed #1e88e5; border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(30, 136, 229, 0.12), transparent 52%), #e3f2fd; text-align: center; transition: .2s ease; }.document-drop-zone:hover { border-color: #1e88e5; background-color: #bbdefb; transform: translateY(-2px); }.document-upload-icon { font-size: 42px; color: #1e88e5; }.document-drop-zone h3 { margin: 0; color: #1e3a5f; font-size: 21px; }.document-drop-zone p { max-width: 560px; margin: 0; color: #5a7a9a; line-height: 1.7; }.uploaded-document-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 20px; border: 1px solid #cfe2f5; border-radius: 16px; background: #e3f2fd; }.document-file-icon { flex: 0 0 auto; font-size: 32px; color: #1e88e5; }.uploaded-document-main { min-width: 0; flex: 1; }.uploaded-document-main h3 { overflow: hidden; margin: 0 0 5px; color: #1e3a5f; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.uploaded-document-main p { margin: 0; color: #5a7a9a; font-size: var(--student-fs-body-sm); }.uploaded-document-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; }.btn-danger { border: 1px solid rgba(211, 47, 47, 0.4); color: #d32f2f; background: rgba(211, 47, 47, 0.12); }.btn-danger:hover { border-color: #d32f2f; background: rgba(211, 47, 47, 0.2); color: #1e3a5f; }.prd-pdf-preview { height: min(68vh, 780px); overflow: hidden; border: 1px solid #cfe2f5; border-radius: 10px; background: #fff; }.prd-pdf-preview iframe { width: 100%; height: 100%; border: 0; }.prd-text-preview { max-height: min(68vh, 780px); overflow: auto; padding: 20px; border: 1px solid #cfe2f5; border-radius: 10px; color: #1e3a5f; background: #ffffff; font-family: var(--student-font-base); line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
-@media (max-width: 1020px) { .matching-workspace { grid-template-columns: 1fr; }.purpose-bank { position: static; }.purpose-card-list { max-height: 360px; }.workbench-head { align-items: flex-start; flex-direction: column; } }
-@media (max-width: 680px) { .training-core { width: min(100% - 24px, 1480px); padding-top: 16px; }.task-card, .step-card { padding: 15px; }.module-row { grid-template-columns: 1fr; }.module-label { border-right: 0; border-bottom: 1px solid #cfe2f5; }.task-header { align-items: flex-start; flex-direction: column; }.task-title { font-size: var(--student-fs-h2); }.step-indicator { margin: 18px 0; }.step-tab { min-width: 165px; }.workbench-actions, .task-actions { width: 100%; }.outline-action, .btn-nav { flex: 1; }.purpose-bank { padding: 14px; }.example-bar { flex-direction: column; } }
+<style lang="scss" scoped>
+/* ===== 页面级令牌（墨黑极简主题） ===== */
+.requirements-doc-page {
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  --student-layer-1: #374151;
+  --student-layer-2: #43a294;
+  --student-layer-3: #8b6fc0;
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  --student-fs-display: 17px;
+  --student-fs-h1: 15px;
+  --student-fs-h2: 14px;
+  --student-fs-h3: 13px;
+  --student-fs-body: 13px;
+  --student-fs-body-sm: 12px;
+  --student-fs-caption: 11px;
+  --student-fs-button: 13px;
+  --student-fs-button-lg: 13px;
+  --student-fs-data: 14px;
+
+  min-width: 0;
+  color: var(--student-text);
+  background: #ffffff;
+}
+
+/* 核心容器：只设 gap，无边框/背景/阴影 */
+.requirements-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-width: 0;
+  margin: 0 auto;
+  width: min(1480px, calc(100% - 48px));
+  padding: 20px 0 60px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===== 任务头：独立白卡片 ===== */
+.task-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.task-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.task-title {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-display);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover { text-decoration: underline; }
+}
+
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
+}
+
+.requirements-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ===== task-card / step-card 透明化 ===== */
+.task-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
+}
+
+.workbench-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.workbench-head h2 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.section-eyebrow {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.step-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.step-chip {
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  padding: 3px 10px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.step-desc {
+  margin: 14px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+.step-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
+}
+
+/* ===== 引导区：research-guide 同款（左 3px 墨黑边 + 浅灰底） ===== */
+.matching-tip,
+.prd-note,
+.prd-delivery-guide {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+.matching-tip,
+.prd-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  background: var(--student-accent-soft);
+  border-radius: 0 8px 8px 0;
+}
+
+.matching-tip .el-icon,
+.prd-note .el-icon {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  color: var(--student-accent);
+}
+
+/* ===== 匹配工作台 ===== */
+.matching-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1.22fr) minmax(350px, 0.78fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.module-list {
+  display: grid;
+  gap: 10px;
+}
+
+.module-row {
+  display: grid;
+  grid-template-columns: minmax(185px, 0.31fr) minmax(0, 0.69fr);
+  min-height: 84px;
+  overflow: hidden;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  background: #ffffff;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+  cursor: pointer;
+}
+
+.module-row--over {
+  border-color: var(--student-accent);
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
+}
+
+.module-row--filled {
+  border-color: rgba(31, 41, 55, 0.4);
+}
+
+.module-label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-right: 1px solid var(--student-panel-border);
+  color: var(--student-text);
+  background: var(--student-panel-bg);
+}
+
+.module-label span {
+  display: grid;
+  width: 27px;
+  height: 27px;
+  place-items: center;
+  border-radius: 50%;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: var(--student-fs-caption);
+  font-weight: 700;
+}
+
+.module-drop-zone {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.drop-placeholder {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+}
+
+/* 待匹配卡片库 */
+.purpose-bank {
+  position: sticky;
+  top: 22px;
+  padding: 18px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.purpose-bank--over {
+  border-color: var(--student-danger);
+  box-shadow: 0 0 0 3px rgba(217, 85, 76, 0.1);
+}
+
+.purpose-bank__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.purpose-bank__head h4 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
+
+.purpose-bank__head strong {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 50%;
+  color: var(--student-accent);
+  font-weight: 700;
+  background: var(--student-accent-soft);
+}
+
+.purpose-bank > p {
+  margin: 12px 0 15px;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.65;
+}
+
+.purpose-card-list {
+  display: grid;
+  gap: 9px;
+  max-height: 570px;
+  overflow: auto;
+  padding-right: 3px;
+}
+
+.purpose-card {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+  padding: 11px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  color: var(--student-text);
+  background: #ffffff;
+  text-align: left;
+  line-height: 1.55;
+  cursor: grab;
+  transition: border-color 0.18s ease, background 0.18s ease;
+}
+
+.purpose-card:hover,
+.purpose-card.selected {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+
+.purpose-card.dragging {
+  opacity: 0.5;
+}
+
+.purpose-card--assigned {
+  cursor: grab;
+}
+
+.purpose-card--assigned span {
+  flex: 1;
+}
+
+.purpose-card--assigned button {
+  display: inline-grid;
+  width: 26px;
+  height: 26px;
+  flex: 0 0 26px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  color: var(--student-text-secondary);
+  background: var(--student-accent-soft);
+  cursor: pointer;
+}
+
+.purpose-card--assigned button:hover {
+  color: #ffffff;
+  background: var(--student-danger);
+}
+
+.drag-grip {
+  color: var(--student-text-secondary);
+  letter-spacing: -3px;
+}
+
+.purpose-bank__empty {
+  padding: 22px 8px;
+  color: var(--student-text-secondary);
+  text-align: center;
+}
+
+.result-message {
+  margin: 10px 0 0;
+  padding: 10px 14px;
+  border: 1px solid rgba(180, 83, 9, 0.3);
+  border-radius: 8px;
+  color: #92400e;
+  background: rgba(180, 83, 9, 0.08);
+  font-size: var(--student-fs-body-sm);
+}
+
+.result-message.success {
+  border-color: rgba(74, 157, 110, 0.4);
+  color: #065f46;
+  background: rgba(74, 157, 110, 0.08);
+}
+
+/* ===== 按钮区 ===== */
+.task-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+/* ===== 表格 ===== */
+.prd-table-wrap {
+  overflow: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.prd-detail-table {
+  width: 100%;
+  min-width: 1000px;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.prd-detail-table th {
+  padding: 10px 12px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-weight: 800;
+  font-size: var(--student-fs-body-sm);
+  text-align: left;
+}
+
+.prd-detail-table td {
+  padding: 10px 12px;
+  border-top: 1px solid var(--student-panel-border);
+  border-right: 1px solid var(--student-panel-border);
+  vertical-align: top;
+  background: transparent;
+  color: var(--student-text);
+}
+
+.prd-detail-table th:not(:last-child) {
+  border-right: 1px solid var(--student-panel-border);
+}
+
+.prd-detail-table td:last-child {
+  border-right: 0;
+}
+
+.prd-detail-table th:nth-child(1),
+.module-number {
+  width: 72px;
+  text-align: center;
+}
+
+.prd-detail-table th:nth-child(2),
+.module-name {
+  width: 155px;
+}
+
+.prd-detail-table th:nth-child(3),
+.submodule-name {
+  width: 245px;
+}
+
+.module-number,
+.module-name,
+.submodule-name {
+  color: var(--student-text);
+  vertical-align: middle !important;
+  font-size: var(--student-fs-body-sm);
+}
+
+.module-name,
+.submodule-name {
+  background: var(--student-panel-bg) !important;
+  font-weight: 700;
+}
+
+.detail-editor-cell {
+  min-width: 480px;
+}
+
+.example-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.6;
+}
+
+.example-bar button {
+  flex: 0 0 auto;
+  padding: 4px 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: var(--student-fs-caption);
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.example-bar button:hover {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+}
+
+/* textarea 透明底 + outline focus */
+.detail-editor-cell textarea {
+  display: block;
+  width: 100%;
+  min-height: 92px;
+  resize: vertical;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  color: var(--student-text);
+  background: transparent;
+  font: inherit;
+  font-size: var(--student-fs-body);
+  line-height: 1.55;
+  transition: outline 0.16s ease;
+}
+
+.detail-editor-cell textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.2);
+  outline-offset: -2px;
+}
+
+.detail-editor-cell textarea::placeholder {
+  color: var(--student-text-secondary);
+}
+
+/* ===== 文档交付区 ===== */
+.prd-delivery-guide {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: center;
+  margin: 0;
+  padding: 14px 16px;
+  border-left: 3px solid var(--student-accent);
+  background: var(--student-accent-soft);
+  border-radius: 0 8px 8px 0;
+  font-size: var(--student-fs-body);
+}
+
+.prd-delivery-guide ol {
+  margin: 0;
+  padding-left: 20px;
+  color: var(--student-text-secondary);
+  line-height: 1.6;
+}
+
+.prd-delivery-guide span {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  text-align: right;
+}
+
+.file-input-hidden {
+  display: none;
+}
+
+.document-drop-zone {
+  display: grid;
+  min-height: 220px;
+  place-content: center;
+  justify-items: center;
+  gap: 10px;
+  padding: 24px;
+  margin-top: 14px;
+  border: 1.5px dashed var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+  text-align: center;
+  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
+  cursor: pointer;
+}
+
+.document-drop-zone:hover {
+  border-color: var(--student-accent);
+  background-color: var(--student-panel-bg);
+  transform: translateY(-1px);
+}
+
+.document-drop-zone__icon {
+  font-size: 36px;
+  color: var(--student-accent);
+}
+
+.document-drop-zone strong {
+  color: var(--student-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.document-drop-zone span {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+}
+
+.uploaded-document-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  margin-top: 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.uploaded-document-icon {
+  flex: 0 0 auto;
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 10px;
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  font-size: 22px;
+}
+
+.uploaded-document-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.uploaded-document-main strong {
+  display: block;
+  overflow: hidden;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uploaded-document-main span {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+}
+
+.uploaded-document-actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.upcoming-card {
+  text-align: center;
+  padding: 30px 20px;
+}
+
+.upcoming-card h3 {
+  margin: 8px 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+}
+
+.upcoming-card p:not(.section-eyebrow) {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+}
+
+/* ===== 预览弹窗 ===== */
+.prd-pdf-preview {
+  height: min(68vh, 780px);
+  overflow: hidden;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.prd-pdf-preview iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.prd-text-preview {
+  max-height: min(68vh, 780px);
+  overflow: auto;
+  padding: 20px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font-family: var(--student-font-base);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.prd-preview-empty {
+  padding: 40px;
+  text-align: center;
+  color: var(--student-text-secondary);
+}
+
+/* ===== scoped 内按钮基础（40px/10px/700 + 墨黑极简） ===== */
+.outline-action,
+.btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
+  text-shadow: none;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.outline-action:hover:not(:disabled),
+.btn-nav:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+}
+
+.btn-submit {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.btn-submit:hover:not(:disabled) {
+  background: var(--student-accent-deep);
+  border-color: var(--student-accent-deep);
+  color: #ffffff;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
+}
+
+.btn-primary {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--student-accent-deep);
+  border-color: var(--student-accent-deep);
+  color: #ffffff;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
+}
+
+.btn-danger {
+  border: 1px solid rgba(217, 85, 76, 0.4);
+  color: var(--student-danger);
+  background: #ffffff;
+}
+
+.btn-danger:hover:not(:disabled) {
+  border-color: var(--student-danger);
+  background: rgba(217, 85, 76, 0.08);
+  color: var(--student-danger);
+}
+
+.btn-nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1020px) {
+  .matching-workspace { grid-template-columns: 1fr; }
+  .purpose-bank { position: static; }
+  .purpose-card-list { max-height: 360px; }
+  .workbench-head { align-items: flex-start; flex-direction: column; }
+}
+
+@media (max-width: 680px) {
+  .requirements-core { width: min(100% - 24px, 1480px); padding-top: 16px; }
+  .task-header { flex-direction: column; align-items: flex-start; }
+  .requirements-toolbar { width: 100%; }
+  .prd-delivery-guide { grid-template-columns: 1fr; }
+  .prd-delivery-guide span { text-align: left; }
+  .module-row { grid-template-columns: 1fr; }
+  .module-label { border-right: 0; border-bottom: 1px solid var(--student-panel-border); }
+  .task-actions { width: 100%; }
+  .outline-action, .btn-nav { flex: 1; }
+  .purpose-bank { padding: 14px; }
+  .example-bar { flex-direction: column; }
+}
+</style>
+
+<style lang="scss">
+/* ===== 画布 + 行高 ===== */
+#app .studentLayout .app-main:has(.requirements-doc-page) {
+  background: #ffffff !important;
+}
+#app .studentLayout .app-main:has(.requirements-doc-page) .requirements-doc-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== 步骤导航：按钮切换风 ===== */
+#app .studentLayout section.app-main:has(.requirements-doc-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  .step-connector { display: none !important; }
+
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
+
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 2px !important;
+      min-width: 0 !important;
+    }
+
+    .step-copy small {
+      font-size: 11px !important;
+      color: #9ca3af !important;
+      font-weight: 400 !important;
+    }
+
+    /* 未到达项 hover */
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
+
+    /* 已完成 */
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
+
+    /* 当前步骤 */
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      .step-copy small { color: rgba(255, 255, 255, 0.65) !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
+}
+
+/* ===== 窄屏：横向滑动 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.requirements-doc-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+  }
+  #app .studentLayout section.app-main:has(.requirements-doc-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
+
+/* ===== 顶部工具栏 el-button 换肤 ===== */
+.requirements-doc-page .training-material-button.el-button,
+.requirements-doc-page .material-button.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  box-shadow: none;
+  text-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.requirements-doc-page .training-material-button.el-button .el-icon,
+.requirements-doc-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
+}
+
+.requirements-doc-page .training-material-button.el-button:hover,
+.requirements-doc-page .training-material-button.el-button:focus,
+.requirements-doc-page .material-button.el-button:hover,
+.requirements-doc-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
 </style>
diff --git a/src/views/product/structure.vue b/src/views/product/structure.vue
index 7521baa..2015471 100644
--- a/src/views/product/structure.vue
+++ b/src/views/product/structure.vue
@@ -1,36 +1,41 @@
 <template>
   <div class="architecture-page student-training-shell">
-    <main class="training-core">
+    <main class="architecture-core">
       <section class="task-header">
-        <div class="task-badge"><el-icon><Operation /></el-icon>产品规划与设计</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
-      </section>
-
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
-      <section class="task-card">
-        <div class="workbench-head">
-          <div>
-            <p class="section-eyebrow">智能硬件架构训练</p>
-            <h3>从底层到顶层完成模块化分层</h3>
-          </div>
-          <div class="workbench-actions">
-            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
-            <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
-          </div>
+        <div class="task-head-main">
+          <span class="task-badge"><el-icon><Operation /></el-icon> 核心实训 · 产品规划与设计</span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul><li v-for="goal in taskGoals" :key="goal">{{ goal }}</li></ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
+        </div>
+        <div class="architecture-toolbar">
+          <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
+          <button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
         </div>
+      </section>
 
+      <section class="architecture-workbench">
         <nav class="step-indicator" aria-label="产品架构设计步骤">
           <template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
             <button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)">
               <span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy"><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span>
+              <span class="step-copy"><strong class="step-name">{{ step }}</strong><span class="step-action">{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</span></span>
             </button>
             <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true"></span>
           </template>
         </nav>
 
-        <section v-if="currentStep === 1" class="step-card">
+        <section v-if="currentStep === 1" class="architecture-step-card">
           <div class="step-title-row"><div><p class="section-eyebrow">Step 01</p><h3>{{ trainingSteps[0] }}</h3></div><span class="step-chip">拖拽排序判题</span></div>
           <p class="step-desc">智能硬件产品通常采用模块化分层架构，从物理硬件到用户功能分为 4 层。请将卡片拖拽为<strong>从底层到顶层</strong>的正确顺序；排序正确后才能进入下一步。</p>
 
@@ -57,7 +62,7 @@
           </div>
         </section>
 
-        <section v-else-if="currentStep === 2" class="step-card">
+        <section v-else-if="currentStep === 2" class="architecture-step-card">
           <div class="step-title-row"><div><p class="section-eyebrow">Step 02</p><h3>{{ trainingSteps[1] }}</h3></div><span class="step-chip">操作链路排序</span></div>
           <p class="step-desc">产品运行时，用户操作产生的信号会经过硬件感知、驱动传递、算法处理和应用功能触发，最终再由硬件产生效果。请将以下动作按一次完整运行链路的正确顺序排列。</p>
 
@@ -84,7 +89,7 @@
           </div>
         </section>
 
-        <section v-else-if="currentStep === 3" class="step-card">
+        <section v-else-if="currentStep === 3" class="architecture-step-card">
           <div class="step-title-row"><div><p class="section-eyebrow">Step 03</p><h3>{{ trainingSteps[2] }}</h3></div><span class="step-chip">场景链路分析</span></div>
           <p class="step-desc">根据本实训案例资料，至少选择 3 个典型的工作场景，分析产品架构各层级在场景中的具体工作。每一行需完整填写，系统会将这些内容作为后续架构方案设计的依据。</p>
 
@@ -103,7 +108,7 @@
               <tbody>
                 <tr v-for="(row, index) in scenarioRows" :key="row.id">
                   <td class="scenario-index">{{ index + 1 }}</td>
-                  <td><el-input v-model="row.userScenario" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="index === 0 ? '例如：用户说“小美，开灯”' : '填写典型用户场景'" /></td>
+                  <td><el-input v-model="row.userScenario" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="index === 0 ? '例如：用户说「小美，开灯」' : '填写典型用户场景'" /></td>
                   <td><el-input v-model="row.hardwareSense" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="index === 0 ? '例如：麦克风阵列采集到声音信号' : '硬件感知到什么'" /></td>
                   <td><el-input v-model="row.driverTransmit" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="index === 0 ? '例如：音频采集驱动将声音转为数字信号' : '驱动层传递什么'" /></td>
                   <td><el-input v-model="row.algorithmProcess" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="index === 0 ? '例如：唤醒词检测与命令词匹配' : '算法层处理什么'" /></td>
@@ -122,7 +127,7 @@
           </div>
         </section>
 
-        <section v-else-if="currentStep === 4" class="step-card">
+        <section v-else-if="currentStep === 4" class="architecture-step-card">
           <div class="step-title-row"><div><p class="section-eyebrow">Step 04</p><h3>{{ trainingSteps[3] }}</h3></div><span class="step-chip">核心功能架构图</span></div>
           <p class="step-desc">根据案例资料，选取 3 个核心功能绘制四层架构的逻辑调用关系图。每张图应从应用功能层向下标注算法、驱动及硬件单元，并以箭头标注信号流向。</p>
           <section class="architecture-image-grid">
@@ -144,7 +149,7 @@
           <p v-if="stepFourCheckResult" class="result-message" :class="{ success: stepFourCheckResult.valid }">{{ stepFourCheckResult.message }}</p>
           <div class="task-actions"><button type="button" class="btn-nav" :disabled="uploadingArchitectureImage !== null || checking" @click="saveStepFour">保存进度</button><button type="button" class="btn-nav btn-submit" :disabled="uploadingArchitectureImage !== null || checking" @click="checkAndSaveStepFour">{{ checking ? '校验中…' : '校验并完成实训' }}</button></div>
         </section>
-        <section v-else class="step-card placeholder-card"><p class="section-eyebrow">Step {{ String(currentStep).padStart(2, '0') }}</p><h3>{{ trainingSteps[currentStep - 1] }}</h3></section>
+        <section v-else class="architecture-step-card placeholder-card"><p class="section-eyebrow">Step {{ String(currentStep).padStart(2, '0') }}</p><h3>{{ trainingSteps[currentStep - 1] }}</h3></section>
       </section>
     </main>
 
@@ -159,7 +164,6 @@ import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { SCENARIO_FIELDS, getCompletedScenarioCount, getRowsForScenarioValidation, getScenarioValidationMessage } from "./productArchitectureScenarioValidation.mjs";
 
 const { proxy } = getCurrentInstance();
@@ -184,10 +188,11 @@ const FLOW_ACTIONS = [
 const fallbackTask = {
   title: "产品架构设计", background: "智能硬件产品采用模块化分层架构。通过本实训理解各层职责和层间关系，为后续功能与技术方案设计建立基础。",
   goals: ["理解智能硬件的四层模块化架构", "区分各层的核心职责", "建立从物理硬件到用户功能的系统化思维"],
-  requirement: "将四层架构按“从底层到顶层”排序；判题通过后方可进入下一步。",
+  requirement: "将四层架构按「从底层到顶层」排序；判题通过后方可进入下一步。",
 };
 
 const taskConfig = ref(null);
+const briefOpen = ref(false);
 const currentStep = ref(1);
 const layerOrder = ref(shuffle(duplicateLayers()));
 const dragLayerId = ref("");
@@ -385,9 +390,929 @@ function switchStep(step) {
 function exportOutcome() { const blob = new Blob([JSON.stringify(buildAnswer(), null, 2)], { type: "application/json;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${taskTitle.value}-实训成果.json`; link.click(); URL.revokeObjectURL(url); }
 </script>
 
-<style scoped lang="scss">
-.architecture-page{display:grid;grid-template-columns:minmax(720px,1fr) 340px;gap:24px;min-height:calc(100vh - 76px);padding:24px;color:#1e3a5f;background:#ffffff}.training-core{min-width:0;padding:28px;border:1px solid #cfe2f5;border-radius:36px;background:#f0f6fd;box-shadow:inset 0 1px 0 rgba(30, 136, 229, 0.05),0 22px 48px rgba(0, 0, 0, 0.08)}.task-header{margin-bottom:24px}.task-badge,.step-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe2f5;border-radius:999px;color:#2c4a6a;background:#e3f2fd;font-size:12px;font-weight:700}.task-badge{min-height:28px;padding:4px 14px}.task-title{margin:12px 0 0;color:#1e3a5f;font-size:30px;font-weight:900}.task-card,.step-card{border:1px solid #cfe2f5;border-radius:26px;background:#f0f6fd}.task-card{margin-top:28px;padding:18px 22px 22px}.workbench-head{display:flex;justify-content:space-between;gap:18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #cfe2f5}.section-eyebrow{margin:0;color:#1e88e5;font-size:12px;font-weight:800}.workbench-head h3,.step-title-row h3,.placeholder-card h3{margin:5px 0 0;color:#1e3a5f;font-size:24px}.workbench-actions,.task-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.workbench-actions{justify-content:flex-end}.outline-action,.btn-nav,.move-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid #cfe2f5;border-radius:999px;color:#1e3a5f;background:#e3f2fd;font:inherit;font-size:14px;font-weight:800;cursor:pointer}.outline-action:hover,.btn-nav:hover:not(:disabled),.move-actions button:hover:not(:disabled){border-color:#1e88e5;background:#bbdefb}button:disabled{opacity:.45;cursor:not-allowed}.btn-submit,.btn-primary{color:#ffffff;background:linear-gradient(135deg,#1e88e5,#1565c0);border-color:transparent}.step-indicator{display:flex;align-items:center;margin:0 -12px 30px;padding:18px 22px;overflow-x:auto;border:1px solid #cfe2f5;border-radius:18px;background:#f0f6fd}.step-tab{display:flex;flex:1 0 145px;min-width:0;align-items:center;gap:10px;min-height:66px;padding:8px;border:1px solid #cfe2f5;border-radius:8px;color:#5a7a9a;background:#f0f6fd;font:inherit;text-align:left;cursor:pointer}.step-tab.active{border-color:#1e88e5;background:linear-gradient(115deg, #1e88e5, #1565c0);color:#ffffff}.step-tab.complete{color:#2c4a6a}.step-marker{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-weight:900}.step-copy{display:grid;gap:3px}.step-copy small{font-size:11px;color:inherit}.step-connector{position:relative;flex:0 0 24px;height:2px;overflow:visible;background:#cfe2f5}.step-connector::after{position:absolute;top:50%;right:-1px;width:6px;height:6px;border-top:1px solid #1e88e5;border-right:1px solid #1e88e5;content:"";transform:translateY(-50%) rotate(45deg)}.step-card{padding:24px}.step-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.step-chip{padding:7px 12px}.step-desc{margin:18px 0 24px;color:#2c4a6a;font-size:15px;line-height:1.8}.architecture-workspace{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;max-width:950px;margin:0 auto}.order-rail{display:flex;flex-direction:column;align-items:center;color:#1e88e5;font-size:12px;font-weight:800}.order-rail i{flex:1;width:2px;margin:9px 0;background:linear-gradient(#1e88e5,#1e88e5);position:relative}.order-rail i::before,.order-rail i::after{content:"";position:absolute;left:-4px;border:5px solid transparent}.order-rail i::before{top:-1px;border-bottom-color:#1e88e5}.order-rail i::after{bottom:-1px;border-top-color:#1e88e5}.layer-list{display:grid;gap:14px}.layer-card{display:grid;grid-template-columns:32px 22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 18px;border:1px solid #cfe2f5;border-radius:14px;background:linear-gradient(100deg,#e3f2fd,#e3f2fd);cursor:grab;transition:.2s}.layer-card:hover,.layer-card.dragging{border-color:#1e88e5;box-shadow:0 10px 22px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.layer-position{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1e88e5;color:#ffffff;font-weight:900}.drag-handle{color:#1e88e5;font-size:20px;letter-spacing:-5px;transform:rotate(90deg)}.layer-copy h4{margin:0 0 6px;color:#1e3a5f;font-size:19px}.layer-copy p{margin:0;color:#2c4a6a;font-size:14px;line-height:1.65}.move-actions{display:grid;gap:6px}.move-actions button{width:32px;min-height:28px;padding:0;border-radius:7px}.result-message{margin:22px 0 0;padding:11px 14px;border:1px solid rgba(245, 124, 0, 0.5);border-radius:10px;color:#8a4b08;background:rgba(245, 124, 0, 0.1)}.result-message.success{border-color:#26a69a;color:#00695c;background:rgba(38, 166, 154, 0.12)}.task-actions{justify-content:flex-end;margin-top:24px}.placeholder-card{min-height:290px}.placeholder-card p:not(.section-eyebrow){color:#2c4a6a;line-height:1.8}@media (max-width:1180px){.architecture-page{grid-template-columns:1fr}.training-core{padding:22px}}@media (max-width:720px){.architecture-page{padding:12px}.training-core{padding:16px;border-radius:20px}.task-card,.step-card{padding:16px}.workbench-head{flex-direction:column}.architecture-workspace{grid-template-columns:1fr}.order-rail{display:none}.layer-card{grid-template-columns:30px 17px minmax(0,1fr)}.move-actions{grid-column:3;grid-template-columns:repeat(2,32px)}.task-title{font-size:25px}}
-.flow-workspace{max-width:1000px;margin:0 auto}.flow-caption{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:#1e88e5;font-size:12px;font-weight:800}.flow-caption i{flex:1;height:1px;background:linear-gradient(90deg,#1e88e5,#1e88e5)}.flow-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.flow-card{display:grid;grid-template-columns:32px 22px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 18px;border:1px solid #cfe2f5;border-radius:14px;background:linear-gradient(100deg,#e3f2fd,#e3f2fd);cursor:grab;transition:.2s}.flow-card:hover,.flow-card.dragging{border-color:#1e88e5;box-shadow:0 10px 22px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}@media (max-width:720px){.flow-list{grid-template-columns:1fr}.flow-card{grid-template-columns:30px 17px minmax(0,1fr)}.flow-card .move-actions{grid-column:3;grid-template-columns:repeat(2,32px)}}
-.scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;color:#2c4a6a;font-weight:800}.scene-toolbar em{color:#1e88e5;font-style:normal;font-size:12px}.scene-toolbar__actions{display:flex;gap:8px}.scenario-table-wrap{overflow:auto;border:1px solid #cfe2f5;border-radius:14px;background:#f0f6fd}.scenario-table{width:100%;min-width:1400px;border-collapse:collapse;table-layout:fixed}.scenario-table th{padding:13px 8px;border-right:1px solid #cfe2f5;border-bottom:1px solid #cfe2f5;color:#2c4a6a;background:#bbdefb;font-size:14px;line-height:1.45}.scenario-table th small{color:#5a7a9a;font-size:12px}.scenario-table td{padding:9px;border-right:1px solid #cfe2f5;border-bottom:1px solid #cfe2f5;vertical-align:middle}.scenario-table th:first-child,.scenario-table td:first-child{width:52px}.scenario-table th:nth-child(2),.scenario-table td:nth-child(2){width:170px}.scenario-index{color:#1e88e5;font-weight:900;text-align:center}.scenario-table :deep(.el-textarea__inner){min-height:82px!important;border:0;border-radius:8px;color:#1e3a5f;background:#e3f2fd;box-shadow:none;line-height:1.55}.scenario-table :deep(.el-textarea__inner::placeholder){color:#5a7a9a}.scenario-table tr:last-child td{border-bottom:0}.scenario-table th:last-child,.scenario-table td:last-child{border-right:0}@media (max-width:720px){.scene-toolbar{align-items:flex-start;flex-direction:column}.scene-toolbar__actions{width:100%}.scene-toolbar__actions .btn-nav{flex:1}}
-.architecture-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.architecture-image-card{min-width:0;padding:16px;border:1px solid #cfe2f5;border-radius:16px;background:linear-gradient(145deg,#e3f2fd,#f0f6fd)}.architecture-image-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;color:#1e3a5f;font-weight:900}.architecture-image-card__head small{color:#1e88e5;font-size:12px}.architecture-image-trigger{display:grid;place-items:center;align-content:center;gap:7px;min-height:154px;border:1px dashed #1e88e5;border-radius:12px;color:#1e3a5f;background:#e3f2fd;cursor:pointer;text-align:center;transition:.2s}.architecture-image-trigger:hover{border-color:#1e88e5;background:#bbdefb}.architecture-image-trigger input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.architecture-image-trigger .el-icon{font-size:24px;color:#1e88e5}.architecture-image-trigger span{color:#2c4a6a;font-size:12px}.architecture-image-preview{margin:13px 0 0}.architecture-image-preview :deep(.el-image){display:block;width:100%;height:170px;overflow:hidden;border:1px solid #cfe2f5;border-radius:10px;background:#fff;cursor:zoom-in}.architecture-image-preview figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:9px;color:#5a7a9a;font-size:12px}.architecture-image-preview figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.architecture-image-preview button,.architecture-guide button{border:0;border-radius:7px;padding:5px 9px;color:#ffffff;background:#1e88e5;font:inherit;cursor:pointer}.architecture-guide{margin-top:24px;padding:18px 22px;border-left:3px solid #1e88e5;border-radius:0 14px 14px 0;color:#2c4a6a;background:#e3f2fd;line-height:1.75}.architecture-guide h4{margin:0 0 8px;color:#1e3a5f}.architecture-guide ol{margin:0 0 10px;padding-left:20px}.architecture-guide li{margin:5px 0}@media (max-width:1000px){.architecture-image-grid{grid-template-columns:1fr}}
+<style lang="scss" scoped>
+/* ===== 页面级令牌（墨黑极简主题） ===== */
+.architecture-page {
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  --student-layer-1: #374151;
+  --student-layer-2: #43a294;
+  --student-layer-3: #8b6fc0;
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  --student-fs-display: 17px;
+  --student-fs-h1: 15px;
+  --student-fs-h2: 14px;
+  --student-fs-h3: 13px;
+  --student-fs-body: 13px;
+  --student-fs-body-sm: 12px;
+  --student-fs-caption: 11px;
+  --student-fs-button: 13px;
+  --student-fs-button-lg: 13px;
+  --student-fs-data: 14px;
+
+  min-width: 0;
+  color: var(--student-text);
+  background: #ffffff;
+}
+
+.architecture-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===== task-header ===== */
+.task-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.task-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.task-title {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-display);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  &:hover { text-decoration: underline; }
+}
+
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
+}
+
+.architecture-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  max-width: 100%;
+}
+
+/* ===== workbench ===== */
+.architecture-workbench {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
+}
+
+.architecture-step-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
+}
+
+.step-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.step-chip {
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  padding: 3px 10px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.section-eyebrow {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.step-desc {
+  margin: 10px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+}
+
+/* ===== 排序工作区 ===== */
+.architecture-workspace {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  gap: 18px;
+  max-width: 950px;
+  margin: 0 auto;
+}
+
+.order-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.order-rail i {
+  flex: 1;
+  width: 2px;
+  margin: 9px 0;
+  background: var(--student-panel-border);
+  position: relative;
+}
+
+.order-rail i::before,
+.order-rail i::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  border: 5px solid transparent;
+}
+
+.order-rail i::before {
+  top: -1px;
+  border-bottom-color: var(--student-panel-border);
+}
+
+.order-rail i::after {
+  bottom: -1px;
+  border-top-color: var(--student-panel-border);
+}
+
+.layer-list {
+  display: grid;
+  gap: 14px;
+}
+
+.layer-card {
+  display: grid;
+  grid-template-columns: 32px 22px minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  padding: 17px 18px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
+  cursor: grab;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.layer-card:hover,
+.layer-card.dragging {
+  border-color: var(--student-accent);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.layer-position {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  font-weight: 700;
+}
+
+.drag-handle {
+  color: var(--student-text-secondary);
+  font-size: 20px;
+  letter-spacing: -5px;
+  transform: rotate(90deg);
+}
+
+.layer-copy h4 {
+  margin: 0 0 6px;
+  color: var(--student-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.layer-copy p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.move-actions {
+  display: grid;
+  gap: 6px;
+}
+
+.move-actions button {
+  width: 32px;
+  min-height: 28px;
+  padding: 0;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 7px;
+  background: #ffffff;
+  color: var(--student-text);
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+
+.move-actions button:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ===== flow workspace ===== */
+.flow-workspace {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.flow-caption {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 14px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.flow-caption i {
+  flex: 1;
+  height: 1px;
+  background: var(--student-panel-border);
+}
+
+.flow-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.flow-card {
+  display: grid;
+  grid-template-columns: 32px 22px minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  padding: 17px 18px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
+  cursor: grab;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.flow-card:hover,
+.flow-card.dragging {
+  border-color: var(--student-accent);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+/* ===== scene toolbar ===== */
+.scene-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+  color: var(--student-text);
+  font-weight: 700;
+  font-size: var(--student-fs-body);
+}
+
+.scene-toolbar em {
+  color: var(--student-text-secondary);
+  font-style: normal;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 400;
+}
+
+.scene-toolbar__actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ===== 表格 ===== */
+.scenario-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+}
+
+.scenario-table {
+  width: 100%;
+  min-width: 1400px;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.scenario-table th,
+.scenario-table td {
+  border: 1px solid var(--student-panel-border);
+}
+
+.scenario-table th {
+  padding: 10px 8px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 800;
+  text-align: left;
+  line-height: 1.45;
+}
+
+.scenario-table th small {
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.scenario-table td {
+  padding: 6px 8px;
+  vertical-align: top;
+}
+
+.scenario-table th:first-child,
+.scenario-table td:first-child {
+  width: 52px;
+}
+
+.scenario-table th:nth-child(2),
+.scenario-table td:nth-child(2) {
+  width: 170px;
+}
+
+.scenario-index {
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  text-align: center;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.scenario-table :deep(.el-textarea__inner) {
+  min-height: 72px !important;
+  border: 0;
+  border-radius: 0;
+  color: var(--student-text);
+  background: transparent;
+  box-shadow: none;
+  padding: 6px 8px;
+  font-size: var(--student-fs-body);
+  line-height: 1.55;
+  resize: vertical;
+}
+
+.scenario-table :deep(.el-textarea__inner:focus) {
+  outline: 2px solid rgba(31, 41, 55, 0.2);
+  outline-offset: -2px;
+}
+
+.scenario-table :deep(.el-textarea__inner::placeholder) {
+  color: var(--student-text-secondary);
+}
+
+.scenario-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.scenario-table th:last-child,
+.scenario-table td:last-child {
+  border-right: 0;
+}
+
+/* ===== 架构图上传 ===== */
+.architecture-image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.architecture-image-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.architecture-image-card__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 13px;
+  color: var(--student-text);
+  font-weight: 700;
+}
+
+.architecture-image-card__head small {
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.architecture-image-trigger {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 7px;
+  min-height: 154px;
+  border: 1px dashed var(--student-accent);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: var(--student-accent-soft);
+  cursor: pointer;
+  text-align: center;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+
+.architecture-image-trigger:hover {
+  border-color: var(--student-accent-deep);
+  background: #ffffff;
+}
+
+.architecture-image-trigger input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.architecture-image-trigger .el-icon {
+  font-size: 24px;
+  color: var(--student-accent);
+}
+
+.architecture-image-trigger span {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+}
+
+.architecture-image-preview {
+  margin: 13px 0 0;
+}
+
+.architecture-image-preview :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 170px;
+  overflow: hidden;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  background: #fff;
+  cursor: zoom-in;
+}
+
+.architecture-image-preview figcaption {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  margin-top: 9px;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+}
+
+.architecture-image-preview figcaption span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.architecture-image-preview button,
+.architecture-guide button {
+  border: 1px solid var(--student-accent);
+  border-radius: 6px;
+  padding: 4px 12px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font: inherit;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.16s ease;
+}
+
+.architecture-image-preview button {
+  border: 1px solid var(--student-panel-border);
+  background: #ffffff;
+  color: var(--student-text);
+}
+
+.architecture-image-preview button:hover {
+  border-color: var(--student-danger);
+  color: var(--student-danger);
+}
+
+.architecture-guide {
+  margin-top: 20px;
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  border-radius: 0 8px 8px 0;
+  color: var(--student-text-secondary);
+  background: var(--student-accent-soft);
+  font-size: var(--student-fs-body);
+  line-height: 1.7;
+}
+
+.architecture-guide h4 {
+  margin: 0 0 8px;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
+
+.architecture-guide ol {
+  margin: 0 0 10px;
+  padding-left: 20px;
+}
+
+.architecture-guide li {
+  margin: 4px 0;
+}
+
+/* ===== result ===== */
+.result-message {
+  margin: 16px 0 0;
+  padding: 10px 14px;
+  border: 1px solid #e8d5b0;
+  border-radius: 8px;
+  color: #8a4b08;
+  background: rgba(245, 124, 0, 0.08);
+  font-size: var(--student-fs-body);
+}
+
+.result-message.success {
+  border-color: #c2e0cf;
+  color: #2f6a4a;
+  background: rgba(74, 157, 110, 0.1);
+}
+
+/* ===== 按钮 ===== */
+.outline-action,
+.btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font: inherit;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
+  cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.outline-action:hover:not(:disabled),
+.btn-nav:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+}
+
+.btn-submit,
+.btn-primary {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.btn-submit:hover:not(:disabled),
+.btn-primary:hover:not(:disabled) {
+  border-color: var(--student-accent-deep);
+  background: var(--student-accent-deep);
+  color: #ffffff;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
+}
+
+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+/* ===== placeholder ===== */
+.placeholder-card {
+  min-height: 200px;
+  padding: 40px 20px;
+  text-align: center;
+  border: 1px dashed var(--student-panel-border);
+  border-radius: 10px;
+  background: var(--student-panel-bg);
+}
+
+.placeholder-card h3 {
+  margin: 8px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1000px) {
+  .architecture-image-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 840px) {
+  .flow-list { grid-template-columns: 1fr; }
+  .scene-toolbar { align-items: flex-start; flex-direction: column; }
+  .scene-toolbar__actions { width: 100%; }
+  .scene-toolbar__actions .btn-nav { flex: 1; }
+}
+
+@media (max-width: 720px) {
+  .architecture-page { padding: 12px; }
+  .architecture-workspace { grid-template-columns: 1fr; }
+  .order-rail { display: none; }
+  .layer-card { grid-template-columns: 30px 17px minmax(0, 1fr); }
+  .move-actions { grid-column: 3; grid-template-columns: repeat(2, 32px); justify-content: flex-end; }
+  .flow-card { grid-template-columns: 30px 17px minmax(0, 1fr); }
+  .flow-card .move-actions { grid-column: 3; grid-template-columns: repeat(2, 32px); }
+  .task-header { flex-direction: column; align-items: flex-start; }
+  .architecture-toolbar { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
+}
+</style>
+
+<style lang="scss">
+/* ===== 画布 + 行高 ===== */
+#app .studentLayout .app-main:has(.architecture-page) {
+  background: #ffffff !important;
+}
+#app .studentLayout .app-main:has(.architecture-page) .architecture-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== 步骤导航：按钮切换风 ===== */
+#app .studentLayout section.app-main:has(.architecture-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  .step-connector { display: none !important; }
+
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
+
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 0 !important;
+      min-width: 0 !important;
+    }
+
+    .step-name {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      line-height: 1.3 !important;
+      color: inherit !important;
+    }
+
+    .step-action { display: none !important; }
+
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
+
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
+
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
+}
+
+/* ===== 窄屏 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.architecture-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+  }
+  #app .studentLayout section.app-main:has(.architecture-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
+
+/* ===== 顶部工具栏按钮换肤 ===== */
+.architecture-page .material-button.el-button,
+.architecture-page .outline-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  box-shadow: none;
+  text-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.architecture-page .material-button.el-button .el-icon,
+.architecture-page .outline-action .el-icon {
+  font-size: 14px;
+  color: inherit;
+}
+
+.architecture-page .material-button.el-button:hover,
+.architecture-page .material-button.el-button:focus,
+.architecture-page .outline-action:hover:not(:disabled),
+.architecture-page .outline-action:focus:not(:disabled) {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
+
+.architecture-page .material-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
+}
 </style>