From dea337b632a223f7f6272b21db85873a3d0209cd Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Thu, 23 Jul 2026 09:18:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=B7=A5=E8=89=BA=E7=94=BB=E5=B8=83scFlow?=
 =?UTF-8?q?=E6=9B=B4=E5=90=8DxtFlow;=E5=B7=A5=E8=89=BA=E5=8C=85=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E5=B8=B8=E9=A9=BB=E7=94=BB=E5=B8=83=E4=B8=BA=E7=BB=88?=
 =?UTF-8?q?=E7=82=B9=E8=8A=82=E7=82=B9=E5=8F=AF=E7=9B=B4=E6=8E=A5=E8=BF=9E?=
 =?UTF-8?q?=E7=BA=BF;=E8=8A=82=E7=82=B9=E6=8C=89=E7=89=A9=E6=96=99?=
 =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E7=B1=BB=E5=9E=8B=E7=9D=80=E8=89=B2;fix:?=
 =?UTF-8?q?=E6=8B=96=E7=BA=BF=E6=96=B0=E5=A2=9EsetData=E8=A6=86=E7=9B=96pa?=
 =?UTF-8?q?rams=5Fjson=E8=87=B4=E6=8E=92=E4=B8=80=E6=AC=A1=E6=A3=92?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=8A=A5=E9=94=99;perf:vue-flow=E5=88=86?=
 =?UTF-8?q?=E5=8C=85prefetch=E9=A2=84=E5=8F=96+=E6=9F=A5=E7=9C=8B=E5=99=A8?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E9=87=8D=E5=A4=8D=E5=B8=83=E5=B1=80;style:ro?=
 =?UTF-8?q?ute=5Fshow=E6=9F=A5=E7=9C=8B=E9=A1=B5=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=8C=96=E7=B4=A7=E5=87=91=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/flow/MaterialNode.vue          |   2 +-
 src/components/scFlowViewer.vue               | 147 ----------
 .../{scFlowEditor.vue => xtFlowEditor.vue}    |  51 +++-
 src/components/xtFlowViewer.vue               | 261 ++++++++++++++++++
 src/views/mtm/route.vue                       |   6 +-
 src/views/mtm/route_form.vue                  |  10 +-
 src/views/mtm/route_show.vue                  | 225 ++++++++++-----
 src/views/mtm/routepack_form.vue              |  10 +-
 8 files changed, 477 insertions(+), 235 deletions(-)
 delete mode 100644 src/components/scFlowViewer.vue
 rename src/components/{scFlowEditor.vue => xtFlowEditor.vue} (90%)
 create mode 100644 src/components/xtFlowViewer.vue

diff --git a/src/components/flow/MaterialNode.vue b/src/components/flow/MaterialNode.vue
index ca8d3cbf..1edf847d 100644
--- a/src/components/flow/MaterialNode.vue
+++ b/src/components/flow/MaterialNode.vue
@@ -10,7 +10,7 @@
 <script>
 import { Handle, Position } from "@vue-flow/core";
 
-// 物料节点卡片：scFlowEditor（编辑）与 scFlowViewer（查看）共用，保证两端视觉一致
+// 物料节点卡片：xtFlowEditor（编辑）与 xtFlowViewer（查看）共用，保证两端视觉一致
 export default {
 	name: "MaterialNode",
 	components: { Handle },
diff --git a/src/components/scFlowViewer.vue b/src/components/scFlowViewer.vue
deleted file mode 100644
index afd6913d..00000000
--- a/src/components/scFlowViewer.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-	<div class="sc-flow-viewer">
-		<VueFlow
-			:id="flowId"
-			:min-zoom="0.2"
-			:max-zoom="2"
-			:nodes-draggable="false"
-			:nodes-connectable="false"
-			:elements-selectable="false"
-			@nodes-initialized="onNodesInit"
-		>
-			<template #node-material="{ data }">
-				<material-node :data="data" />
-			</template>
-			<Background :gap="18" pattern-color="#e6e9ef" />
-			<Controls :show-interactive="false" />
-		</VueFlow>
-	</div>
-</template>
-
-<script>
-import { VueFlow, useVueFlow } from "@vue-flow/core";
-import { Background } from "@vue-flow/background";
-import { Controls } from "@vue-flow/controls";
-import MaterialNode from "./flow/MaterialNode.vue";
-import { layoutGraph } from "./flow/dagreLayout";
-import "@vue-flow/core/dist/style.css";
-import "@vue-flow/core/dist/theme-default.css";
-import "@vue-flow/controls/dist/style.css";
-
-// 每个实例分配唯一 flowId，避免 Vue Flow 全局 store 按固定 id 缓存导致多实例互相覆盖
-let viewerSeq = 0;
-
-/**
- * 工艺路线只读流程图（Vue Flow 版），与 scFlowEditor 共用节点样式与布局。
- * props 与 scDegra 对齐：nodes [{id,label}]、edges [{id,source,target,label}]
- */
-export default {
-	name: "scFlowViewer",
-	components: { VueFlow, Background, Controls, MaterialNode },
-	props: {
-		nodes: { type: Array, default: () => [] },
-		edges: { type: Array, default: () => [] },
-		rankdir: { type: String, default: "TB" },
-	},
-	setup() {
-		const flowId = "sc-flow-viewer-" + ++viewerSeq;
-		const { fitView, setNodes, setEdges } = useVueFlow(flowId);
-		return { flowId, fitView, setNodes, setEdges };
-	},
-	watch: {
-		nodes() {
-			this.rebuild();
-		},
-		edges() {
-			this.rebuild();
-		},
-	},
-	mounted() {
-		this.rebuild();
-	},
-	methods: {
-		/** nodes/edges -> Vue Flow 图；节点类型按出入度推断（无入边=原料，无出边=成品） */
-		rebuild() {
-			const sourceIds = new Set();
-			const targetIds = new Set();
-			const rawEdges = (this.edges || [])
-				.filter((e) => e.source != null && e.target != null)
-				.map((e) => {
-					const sid = String(e.source);
-					const tid = String(e.target);
-					sourceIds.add(sid);
-					targetIds.add(tid);
-					return {
-						id: e.id != null ? String(e.id) : sid + "-" + tid,
-						source: sid,
-						target: tid,
-						label: e.label || "",
-						type: "smoothstep",
-						markerEnd: "arrowclosed",
-						style: { stroke: "#409eff", strokeWidth: 2 },
-						labelStyle: { fill: "#5b6370", fontSize: "12px", fontWeight: 500 },
-						labelBgStyle: { fill: "#ffffff", stroke: "#e4e7ed", strokeWidth: 1 },
-						labelBgPadding: [7, 4],
-						labelBgBorderRadius: 6,
-					};
-				});
-			const vNodes = (this.nodes || [])
-				.filter((n) => n.id != null && n.label)
-				.map((n) => {
-					const id = String(n.id);
-					const isSrc = sourceIds.has(id);
-					const isTgt = targetIds.has(id);
-					let kind = "mid";
-					if (isTgt && !isSrc) kind = "final";
-					else if (isSrc && !isTgt) kind = "raw";
-					return { id, type: "material", data: { label: n.label, kind }, position: { x: 0, y: 0 } };
-				});
-			const nodeIds = new Set(vNodes.map((n) => n.id));
-			const vEdges = rawEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
-
-			this.setEdges([]);
-			this.setNodes(layoutGraph(vNodes, vEdges, { rankdir: this.rankdir }));
-			this.setEdges(vEdges);
-			this.doFit();
-		},
-		onNodesInit() {
-			this.doFit();
-		},
-		doFit() {
-			this.$nextTick(() => {
-				try {
-					this.fitView({ padding: 0.2, maxZoom: 1, duration: 200 });
-				} catch (e) {
-					/* noop */
-				}
-			});
-		},
-	},
-};
-</script>
-
-<style scoped>
-.sc-flow-viewer {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-height: 320px;
-	border: 1px solid #eef1f6;
-	border-radius: 8px;
-	overflow: hidden;
-	background: #fbfcfe;
-}
-/* 只读视图：隐藏连接点 */
-.sc-flow-viewer :deep(.vue-flow__handle) {
-	opacity: 0;
-	pointer-events: none;
-}
-</style>
-
-<style>
-.sc-flow-viewer .vue-flow__controls {
-	box-shadow: 0 2px 10px rgba(31, 45, 61, 0.12);
-	border-radius: 6px;
-	overflow: hidden;
-}
-</style>
diff --git a/src/components/scFlowEditor.vue b/src/components/xtFlowEditor.vue
similarity index 90%
rename from src/components/scFlowEditor.vue
rename to src/components/xtFlowEditor.vue
index 2c9a8afc..4c871628 100644
--- a/src/components/scFlowEditor.vue
+++ b/src/components/xtFlowEditor.vue
@@ -15,7 +15,7 @@
 			</div>
 		</div>
 		<div class="flow-tip" v-if="!readonly">
-			从左侧拖入原料作为起点 → 从节点圆点拉线到空白处生成下一道工序；单击线条编辑，右键线条删工序 / 右键节点移除物料
+			从左侧拖入原料作为起点 → 节点间拉线新建工序，拉到空白处自动生成半成品，连到产品节点收尾；单击线条编辑，右键线条删工序 / 右键节点移除物料
 		</div>
 		<div class="flow-tip flow-tip--ro" v-else>当前状态不可编辑（仅创建中的工艺可编辑）</div>
 
@@ -72,7 +72,7 @@
 					@edge-context-menu="onEdgeContextMenu"
 					@node-context-menu="onNodeContextMenu"
 				>
-					<!-- 自定义物料节点（与 scFlowViewer 共用） -->
+					<!-- 自定义物料节点（与 xtFlowViewer 共用） -->
 					<template #node-material="{ data }">
 						<material-node :data="data" />
 					</template>
@@ -114,11 +114,14 @@ import "@vue-flow/controls/dist/style.css";
 let flowSeq = 0;
 
 export default {
-	name: "scFlowEditor",
+	name: "xtFlowEditor",
 	components: { VueFlow, Background, Controls, routeForm, MaterialNode },
 	props: {
 		// 工艺包 id
 		routepack: { type: String, default: "" },
+		// 工艺包产品：常驻画布作为终点节点，可从其他节点拉线连入
+		productId: { type: [String, Number], default: "" },
+		productName: { type: String, default: "" },
 		// 是否只读（非“创建中”状态）
 		readonly: { type: Boolean, default: false },
 	},
@@ -163,6 +166,9 @@ export default {
 		routepack() {
 			this.reload();
 		},
+		productId() {
+			if (this.routepack) this.reload();
+		},
 	},
 	mounted() {
 		this.loadMaterials();
@@ -198,7 +204,15 @@ export default {
 				});
 		},
 
-		/** 节点类型：起点原料 / 终点成品 / 中间半成品 */
+		/** 物料真实类型 → 节点配色：10成品 30原料 其余半成品 */
+		kindOfType(t) {
+			const s = String(t);
+			if (s === "10") return "final";
+			if (s === "30") return "raw";
+			return "mid";
+		},
+
+		/** 拓扑推断兜底（后端未返回物料类型时用）：起点原料 / 终点成品 / 中间半成品 */
 		kindOf(id, targetIds) {
 			const isSrc = this.routes.some((r) => String(r.material_in) === id);
 			const isTgt = targetIds.has(id);
@@ -210,6 +224,7 @@ export default {
 		/** 由 routes 构建 物料节点 + 工序边，并用 dagre 自动布局；合并未落库的种子节点 */
 		buildGraph() {
 			const matMap = {};
+			const matKind = {};
 			const targetIds = new Set();
 			const edges = [];
 
@@ -219,6 +234,8 @@ export default {
 				const tid = String(r.material_out);
 				if (!matMap[sid]) matMap[sid] = r.material_in_name || sid;
 				if (!matMap[tid]) matMap[tid] = r.material_out_name || tid;
+				if (r.material_in_type != null) matKind[sid] = this.kindOfType(r.material_in_type);
+				if (r.material_out_type != null) matKind[tid] = this.kindOfType(r.material_out_type);
 				targetIds.add(tid);
 
 				const locked = !!r.from_route;
@@ -245,12 +262,24 @@ export default {
 			const routeNodes = Object.keys(matMap).map((id) => ({
 				id,
 				type: "material",
-				data: { label: matMap[id], kind: this.kindOf(id, targetIds) },
+				data: { label: matMap[id], kind: matKind[id] || this.kindOf(id, targetIds) },
 				position: { x: 0, y: 0 },
 			}));
 
+			// 工艺包产品常驻画布作为终点节点（尚未被任何工序引用时也显示）
+			const pid = this.productId ? String(this.productId) : "";
+			if (pid && !matMap[pid]) {
+				routeNodes.push({
+					id: pid,
+					type: "material",
+					data: { label: this.productName || "产品", kind: "final" },
+					position: { x: 0, y: 0 },
+				});
+			}
+
 			// 已落库的物料从种子集合中剔除，其余种子保留在画布上
 			const routeNodeIds = new Set(Object.keys(matMap));
+			if (pid) routeNodeIds.add(pid);
 			this.seedNodes = this.seedNodes.filter((s) => !routeNodeIds.has(s.id));
 
 			this.edges = edges;
@@ -293,14 +322,14 @@ export default {
 		/* ============ 左侧面板拖拽入画布 ============ */
 		onDragStart(evt, mat) {
 			evt.dataTransfer.setData(
-				"application/scflow",
-				JSON.stringify({ id: mat.id, name: mat.full_name })
+				"application/xtflow",
+				JSON.stringify({ id: mat.id, name: mat.full_name, type: this.matType })
 			);
 			evt.dataTransfer.effectAllowed = "move";
 		},
 		onDrop(evt) {
 			if (this.readonly) return;
-			const raw = evt.dataTransfer.getData("application/scflow");
+			const raw = evt.dataTransfer.getData("application/xtflow");
 			if (!raw) return;
 			let mat;
 			try {
@@ -332,7 +361,7 @@ export default {
 			const node = {
 				id,
 				type: "material",
-				data: { label: mat.name, kind: "raw" },
+				data: { label: mat.name, kind: this.kindOfType(mat.type) },
 				position,
 			};
 			this.seedNodes.push(node);
@@ -423,6 +452,10 @@ export default {
 			if (this.readonly) return;
 			const node = evt.node || evt;
 			const nid = node.id;
+			if (this.productId && nid === String(this.productId)) {
+				this.$message.warning("产品节点为工艺终点，不可移除");
+				return;
+			}
 			const inUse = this.routes.some(
 				(r) => String(r.material_in) === nid || String(r.material_out) === nid
 			);
diff --git a/src/components/xtFlowViewer.vue b/src/components/xtFlowViewer.vue
new file mode 100644
index 00000000..15119b9a
--- /dev/null
+++ b/src/components/xtFlowViewer.vue
@@ -0,0 +1,261 @@
+<template>
+	<div class="xt-flow-viewer">
+		<!-- 顶部工具栏：与 xtFlowEditor 视觉一致 -->
+		<div class="flow-toolbar">
+			<div class="flow-toolbar__left">
+				<el-button icon="el-icon-full-screen" size="small" round @click="doFit">适应画布</el-button>
+			</div>
+			<div class="flow-legend">
+				<span class="lg lg--raw">原料</span>
+				<span class="lg lg--mid">半成品</span>
+				<span class="lg lg--final">成品</span>
+			</div>
+		</div>
+		<div class="flow-canvas">
+			<VueFlow
+				:id="flowId"
+				:min-zoom="0.2"
+				:max-zoom="2"
+				:nodes-draggable="false"
+				:nodes-connectable="false"
+				:elements-selectable="false"
+				@nodes-initialized="onNodesInit"
+			>
+				<template #node-material="{ data }">
+					<material-node :data="data" />
+				</template>
+				<Background :gap="18" pattern-color="#e6e9ef" />
+				<Controls :show-interactive="false" />
+			</VueFlow>
+			<div v-if="isEmpty" class="flow-empty">
+				<i class="el-icon-warning-outline flow-empty__icon"></i>
+				<div>暂无工艺图数据</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { VueFlow, useVueFlow } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import MaterialNode from "./flow/MaterialNode.vue";
+import { layoutGraph } from "./flow/dagreLayout";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import "@vue-flow/controls/dist/style.css";
+
+// 每个实例分配唯一 flowId，避免 Vue Flow 全局 store 按固定 id 缓存导致多实例互相覆盖
+let viewerSeq = 0;
+
+/**
+ * 工艺路线只读流程图（Vue Flow 版），与 xtFlowEditor 共用节点样式与布局。
+ * props 与 scDegra 对齐：nodes [{id,label}]、edges [{id,source,target,label}]
+ */
+export default {
+	name: "xtFlowViewer",
+	components: { VueFlow, Background, Controls, MaterialNode },
+	props: {
+		nodes: { type: Array, default: () => [] },
+		edges: { type: Array, default: () => [] },
+		rankdir: { type: String, default: "TB" },
+	},
+	setup() {
+		const flowId = "xt-flow-viewer-" + ++viewerSeq;
+		const { fitView, setNodes, setEdges } = useVueFlow(flowId);
+		return { flowId, fitView, setNodes, setEdges };
+	},
+	data() {
+		return {
+			// 首次 fit 不带动画，避免打开时视图跳动
+			hasFitted: false,
+			rebuildPending: false,
+		};
+	},
+	computed: {
+		isEmpty() {
+			return !(this.nodes || []).length;
+		},
+	},
+	watch: {
+		nodes() {
+			this.scheduleRebuild();
+		},
+		edges() {
+			this.scheduleRebuild();
+		},
+	},
+	mounted() {
+		this.rebuild();
+	},
+	methods: {
+		/** nodes/edges 通常被先后赋值，用微任务合并成一次 rebuild，避免双次 dagre 布局 */
+		scheduleRebuild() {
+			if (this.rebuildPending) return;
+			this.rebuildPending = true;
+			Promise.resolve().then(() => {
+				this.rebuildPending = false;
+				this.rebuild();
+			});
+		},
+		/** nodes/edges -> Vue Flow 图；节点类型按出入度推断（无入边=原料，无出边=成品） */
+		rebuild() {
+			const sourceIds = new Set();
+			const targetIds = new Set();
+			const rawEdges = (this.edges || [])
+				.filter((e) => e.source != null && e.target != null)
+				.map((e) => {
+					const sid = String(e.source);
+					const tid = String(e.target);
+					sourceIds.add(sid);
+					targetIds.add(tid);
+					return {
+						id: e.id != null ? String(e.id) : sid + "-" + tid,
+						source: sid,
+						target: tid,
+						label: e.label || "",
+						type: "smoothstep",
+						markerEnd: "arrowclosed",
+						style: { stroke: "#409eff", strokeWidth: 2 },
+						labelStyle: { fill: "#5b6370", fontSize: "12px", fontWeight: 500 },
+						labelBgStyle: { fill: "#ffffff", stroke: "#e4e7ed", strokeWidth: 1 },
+						labelBgPadding: [7, 4],
+						labelBgBorderRadius: 6,
+					};
+				});
+			const vNodes = (this.nodes || [])
+				.filter((n) => n.id != null && n.label)
+				.map((n) => {
+					const id = String(n.id);
+					const isSrc = sourceIds.has(id);
+					const isTgt = targetIds.has(id);
+					let kind = "mid";
+					if (isTgt && !isSrc) kind = "final";
+					else if (isSrc && !isTgt) kind = "raw";
+					return { id, type: "material", data: { label: n.label, kind }, position: { x: 0, y: 0 } };
+				});
+			const nodeIds = new Set(vNodes.map((n) => n.id));
+			const vEdges = rawEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
+
+			this.setEdges([]);
+			this.setNodes(layoutGraph(vNodes, vEdges, { rankdir: this.rankdir }));
+			this.setEdges(vEdges);
+			// 首次挂载交给 nodes-initialized（尺寸测量完成）再 fit；数据更新时尺寸已就绪，直接 fit
+			if (this.hasFitted) this.doFit();
+		},
+		onNodesInit() {
+			this.doFit();
+		},
+		doFit() {
+			this.$nextTick(() => {
+				try {
+					this.fitView({ padding: 0.2, maxZoom: 1, duration: this.hasFitted ? 200 : 0 });
+					this.hasFitted = true;
+				} catch (e) {
+					/* noop */
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.xt-flow-viewer {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	min-height: 320px;
+	gap: 6px;
+}
+.flow-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 4px 8px;
+	background: #f7f9fc;
+	border: 1px solid #eef1f6;
+	border-radius: 8px;
+	flex-wrap: wrap;
+}
+.flow-toolbar__left {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+.flow-legend {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+.lg {
+	position: relative;
+	padding-left: 16px;
+	font-size: 12px;
+	color: #606266;
+}
+.lg::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 10px;
+	height: 10px;
+	border-radius: 3px;
+	border: 1px solid;
+}
+.lg--raw::before {
+	background: #fdf6ec;
+	border-color: #e6a23c;
+}
+.lg--mid::before {
+	background: #ecf5ff;
+	border-color: #409eff;
+}
+.lg--final::before {
+	background: #f0f9eb;
+	border-color: #67c23a;
+}
+.flow-canvas {
+	position: relative;
+	flex: 1;
+	min-height: 280px;
+	border: 1px solid #eef1f6;
+	border-radius: 8px;
+	overflow: hidden;
+	background: #fbfcfe;
+}
+.flow-empty {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: #a8abb2;
+	font-size: 13px;
+	text-align: center;
+	pointer-events: none;
+}
+.flow-empty__icon {
+	font-size: 34px;
+	color: #c8ccd4;
+	display: block;
+	margin-bottom: 10px;
+}
+/* 只读视图：隐藏连接点 */
+.xt-flow-viewer :deep(.vue-flow__handle) {
+	opacity: 0;
+	pointer-events: none;
+}
+</style>
+
+<style>
+.xt-flow-viewer .vue-flow__controls {
+	box-shadow: 0 2px 10px rgba(31, 45, 61, 0.12);
+	border-radius: 6px;
+	overflow: hidden;
+}
+</style>
diff --git a/src/views/mtm/route.vue b/src/views/mtm/route.vue
index f733e2bd..fdb2f33d 100644
--- a/src/views/mtm/route.vue
+++ b/src/views/mtm/route.vue
@@ -17,7 +17,7 @@
                             </div>
                         </el-header>
                         <el-main class="nopadding">
-                            <scFlowViewer :nodes="nodes" :edges="edges"></scFlowViewer>
+                            <xtFlowViewer :nodes="nodes" :edges="edges"></xtFlowViewer>
                         </el-main>
                     </el-container>
                 </el-aside>
@@ -125,7 +125,7 @@
 <script>
 import { defineAsyncComponent } from "vue";
 // 异步加载：Vue Flow 单独分包
-const scFlowViewer = defineAsyncComponent(() => import("@/components/scFlowViewer.vue"));
+const xtFlowViewer = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowViewer.vue"));
 const defaultForm = {
     process: null,
     sort: 1,
@@ -135,7 +135,7 @@ const defaultForm = {
 };
 export default {
     name: "route",
-    components: { scFlowViewer },
+    components: { xtFlowViewer },
     data() {
         return {
             apiObj: null,
diff --git a/src/views/mtm/route_form.vue b/src/views/mtm/route_form.vue
index 5b769367..e9ec70ec 100644
--- a/src/views/mtm/route_form.vue
+++ b/src/views/mtm/route_form.vue
@@ -485,16 +485,18 @@ export default {
 			Object.assign(that.form, data);
 			that.routeId = data.id;
 			that.addTemplate.route = data.id;
-			that.params_json=that.form.params_json;
+			// 画布拖线新增(prefill)或后端数据无params_json时保留默认值,避免undefined导致模板取值报错
+			if (that.form.params_json) {
+				that.params_json = Object.assign({}, that.params_json, that.form.params_json);
+			}
 			if((this.project_code=='bxerp'||this.project_code=='tcerp')&&this.form.material_out_tracking==null){
 				this.form.material_out_tracking = 20;
 			}
-			if(data.process_name=='捆棒'){
-				that.params_json2=that.form.params_json;
+			if(data.process_name=='捆棒'&&that.form.params_json){
+				that.params_json2 = Object.assign({}, that.params_json2, that.form.params_json);
 			}
 			if(data.process_name=='排一次棒'){
 				that.fileIds= [];
-				that.params_json=that.form.params_json;
 				if(that.params_json.fileurl&&that.params_json.fileurl!=="[]"){
 					let fileurl =  JSON.parse(that.params_json.fileurl);
 					fileurl.forEach((item)=>{
diff --git a/src/views/mtm/route_show.vue b/src/views/mtm/route_show.vue
index a4af187e..95663b62 100644
--- a/src/views/mtm/route_show.vue
+++ b/src/views/mtm/route_show.vue
@@ -1,70 +1,69 @@
 <template>
-	<el-container v-loading="loading">
+	<el-container class="rs-page" v-loading="loading">
+		<el-main class="nopadding rs-main">
+			<!-- 基本信息条 -->
+			<div class="rs-card rs-head">
+				<div class="rs-card__title">基本信息</div>
+				<div class="rs-head__items">
+					<div class="rs-head__item">
+						<span class="rs-lbl">工艺名称</span>
+						<span class="rs-val">{{ form.name || "-" }}</span>
+					</div>
+					<div class="rs-head__item">
+						<span class="rs-lbl">物料名称</span>
+						<span class="rs-val">{{ form.material_name || "-" }}</span>
+					</div>
+				</div>
+			</div>
 
-		<el-main class="nopadding" style="padding-right: 1px;">
-			<el-container>
-				<el-header style="height: 80px;display: block;padding:0">
-					<el-card shadow="hover">
-						<el-descriptions :column="3" title="基本信息">
-							<el-descriptions-item label="工艺名称:">{{
-								form.name
-							}}</el-descriptions-item>
-							<el-descriptions-item label="物料名称:">{{
-								form.material_name
-							}}</el-descriptions-item>
-						</el-descriptions>
-					</el-card>
-				</el-header>
-				<el-main>
-					<el-container>
-						<el-aside style="width: 50%;overflow: hidden;display: flex;flex-direction: column;">
-							<div
-								style="font-weight: 600;color: #303133;font-size: 16px;padding: 10px 0;">
-								工艺路线流程图</div>
-							<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" :tab-position="'top'"
-								@tab-click="tabshandleClick">
-								<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
-							</el-tabs>
-							<scFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges"
-								style="flex: 1;min-height: 0;">
-							</scFlowViewer>
-						</el-aside>
-						<el-main class="padding: 1px">
-							<scTable ref="tables" :data="tableData" row-key="id" hidePagination hideDo stripe border>
-								<el-table-column label="排序" prop="sort" width="50">
-								</el-table-column>
-								<el-table-column label="工序" prop="process_name">
-								</el-table-column>
-								<el-table-column label="输入" prop="material_in_name">
-								</el-table-column>
-								<el-table-column label="输出" prop="material_out_name">
-								</el-table-column>
-								<el-table-column label="追踪方式">
-									<template #default="scope">
-										<span>{{ tracking_[scope.row.material_out_tracking] }}</span>
-									</template>
-								</el-table-column>
-								<el-table-column label="出材率" prop="out_rate">
-								</el-table-column>
-								<el-table-column label="切分融合数量" prop="div_number">
-								</el-table-column>
-								<el-table-column label="工时" prop="hour_work">
-								</el-table-column>
-								<el-table-column label="批次校验" v-if="project_code !== 'bxerp'">
-									<template #default="scope">
-										<el-tag v-if="scope.row.batch_bind" type="success">是</el-tag>
-									</template>
-								</el-table-column>
-							</scTable>
-						</el-main>
-					</el-container>
+			<div class="rs-body">
+				<!-- 流程图卡 -->
+				<div class="rs-card rs-flow">
+					<div class="rs-card__title">工艺路线流程图</div>
+					<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" class="rs-tabs"
+						@tab-click="tabshandleClick">
+						<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
+					</el-tabs>
+					<xtFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges" class="rs-flow__canvas"
+						style="min-height: 0">
+					</xtFlowViewer>
+				</div>
 
-				</el-main>
-
-
-			</el-container>
+				<!-- 工序表格卡 -->
+				<div class="rs-card rs-steps">
+					<div class="rs-card__title">工序步骤</div>
+					<div class="rs-steps__table">
+						<scTable ref="tables" :data="tableData" row-key="id" hidePagination hideDo stripe border>
+							<el-table-column label="排序" prop="sort" width="50">
+							</el-table-column>
+							<el-table-column label="工序" prop="process_name">
+							</el-table-column>
+							<el-table-column label="输入" prop="material_in_name">
+							</el-table-column>
+							<el-table-column label="输出" prop="material_out_name">
+							</el-table-column>
+							<el-table-column label="追踪方式" width="80">
+								<template #default="scope">
+									<span>{{ tracking_[scope.row.material_out_tracking] }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="出材率" prop="out_rate" width="70">
+							</el-table-column>
+							<el-table-column label="切分融合数量" prop="div_number" width="80">
+							</el-table-column>
+							<el-table-column label="工时" prop="hour_work" width="60">
+							</el-table-column>
+							<el-table-column label="批次校验" width="80" v-if="project_code !== 'bxerp'">
+								<template #default="scope">
+									<el-tag v-if="scope.row.batch_bind" type="success">是</el-tag>
+								</template>
+							</el-table-column>
+						</scTable>
+					</div>
+				</div>
+			</div>
 		</el-main>
-		<el-aside width="20%" v-if="form.ticket">
+		<el-aside width="20%" v-if="form.ticket" class="rs-aside">
 			<ticketd :ticket_="form.ticket_"></ticketd>
 		</el-aside>
 	</el-container>
@@ -73,10 +72,10 @@
 import { defineAsyncComponent } from "vue";
 import ticketd from '@/views/wf/ticketd.vue'
 // 异步加载：Vue Flow 单独分包，仅打开详情时才下载
-const scFlowViewer = defineAsyncComponent(() => import("@/components/scFlowViewer.vue"));
+const xtFlowViewer = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowViewer.vue"));
 export default {
 	emits: ["success", "closed"],
-	components: { ticketd, scFlowViewer },
+	components: { ticketd, xtFlowViewer },
 	props: {
 		t_id: { type: String, default: null },
 	},
@@ -181,7 +180,99 @@ export default {
 </script>
 
 <style scoped>
-.el-transfer {
-	--el-transfer-panel-width: 345px !important;
+/* 页面底色：浅灰承托白卡 */
+.rs-page {
+	height: 100%;
+	background: #f5f7fa;
+}
+.rs-main {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 10px;
+	overflow: hidden;
+}
+/* 统一卡片语言 */
+.rs-card {
+	background: #fff;
+	border: 1px solid #ebeef5;
+	border-radius: 10px;
+	box-shadow: 0 1px 2px rgba(31, 45, 61, 0.04);
+	padding: 12px 14px;
+}
+.rs-card__title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 15px;
+	font-weight: 600;
+	color: #303133;
+	margin-bottom: 10px;
+}
+.rs-card__title::before {
+	content: "";
+	width: 3px;
+	height: 14px;
+	border-radius: 2px;
+	background: var(--el-color-primary, #409eff);
+}
+/* 基本信息条：单行轻量 */
+.rs-head {
+	flex-shrink: 0;
+	padding-bottom: 10px;
+}
+.rs-head .rs-card__title {
+	margin-bottom: 8px;
+}
+.rs-head__items {
+	display: flex;
+	gap: 48px;
+	flex-wrap: wrap;
+}
+.rs-lbl {
+	color: #909399;
+	font-size: 13px;
+	margin-right: 10px;
+}
+.rs-val {
+	color: #303133;
+	font-size: 13px;
+	font-weight: 500;
+}
+/* 主体：流程图 + 工序表 两卡并排 */
+.rs-body {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	gap: 10px;
+}
+.rs-flow {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.rs-flow__canvas {
+	flex: 1;
+	min-height: 0;
+}
+.rs-tabs :deep(.el-tabs__header) {
+	margin: 0 0 8px;
+}
+.rs-steps {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+.rs-steps__table {
+	flex: 1;
+	min-height: 0;
+}
+/* 右侧工单/审批面板：与主体同底色，间距交给 ticketd 自身的内边距 */
+.rs-aside {
+	background: #f5f7fa;
+	padding: 0;
 }
 </style>
diff --git a/src/views/mtm/routepack_form.vue b/src/views/mtm/routepack_form.vue
index 8c9d9936..0ea87702 100644
--- a/src/views/mtm/routepack_form.vue
+++ b/src/views/mtm/routepack_form.vue
@@ -94,12 +94,14 @@
 			<el-main class="nopadding" v-if="active === 1">
 				<el-container>
 					<el-aside class="nopadding" style="width: 55%;overflow: hidden;padding-right: 6px;">
-						<scFlowEditor
+						<xtFlowEditor
 							ref="flowEditor"
 							:routepack="routepack"
+							:product-id="form.material || ''"
+							:product-name="form.material_name || ''"
 							:readonly="!!(form.state && form.state !== 10)"
 							@changed="handleEditorChanged"
-						></scFlowEditor>
+						></xtFlowEditor>
 					</el-aside>
 					<el-main class="nopadding" style="width: 45%;overflow: auto;">
 						<el-container>
@@ -195,10 +197,10 @@ import { defineAsyncComponent } from "vue";
 import saveDialog from "./route_form.vue";
 import ticketd_b from "@/views/wf/ticketd_b.vue";
 // 异步加载：Vue Flow + dagre 单独分包，仅打开工艺编辑器时才下载，首屏零影响
-const scFlowEditor = defineAsyncComponent(() => import("@/components/scFlowEditor.vue"));
+const xtFlowEditor = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowEditor.vue"));
 export default {
 	name: "routepack_form",
-	components: { saveDialog, ticketd_b, scFlowEditor },
+	components: { saveDialog, ticketd_b, xtFlowEditor },
 	data() {
 		return {
 			active: 0,