From 1cbbd392a773a25281a1819f541d51f6eb847293 Mon Sep 17 00:00:00 2001
From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com>
Date: Tue, 24 Jun 2025 16:01:29 +0800
Subject: [PATCH] 盒型设计新增贴边

---
 src/components/Common/BoxDesign/createAirplaneBox.js | 327 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/Common/BoxDesignCompontent/svg.js     |  32 ++++++++++++++++++++------------
 2 files changed, 203 insertions(+), 156 deletions(-)

diff --git a/src/components/Common/BoxDesign/createAirplaneBox.js b/src/components/Common/BoxDesign/createAirplaneBox.js
index a2f1f26..31a034a 100644
--- a/src/components/Common/BoxDesign/createAirplaneBox.js
+++ b/src/components/Common/BoxDesign/createAirplaneBox.js
@@ -2,8 +2,9 @@
 // 创建飞机盒盒身
 const boxContent = (width, height, offsetX, offsetY) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX +
-    width} ${offsetY} L ${offsetX} ${offsetY} Z`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${
+    offsetX + width
+  } ${offsetY} L ${offsetX} ${offsetY} Z`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -14,8 +15,9 @@ const boxContent = (width, height, offsetX, offsetY) => {
 // 创建飞机盒上盒部件
 const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX -
-    outerWidth} ${offsetY + height} A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX - outerWidth} ${
+    offsetY + height
+  } A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -25,8 +27,9 @@ const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => {
 // 创建飞机左上部件
 const createBoxLeftTop = (width, height, offsetX, offsetY, isLeft) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX -
-    width} ${offsetY + 15} L ${offsetX - width} ${offsetY + height - 15}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width} ${
+    offsetY + 15
+  } L ${offsetX - width} ${offsetY + height - 15}
   A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + height - 5} L ${offsetX} ${offsetY + height}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
@@ -117,9 +120,9 @@ export const createTrapezoid = (height, offsetX, offsetY, size) => {
 // 左上盒舌 盒舌 x轴原点 y轴原点 高度 x轴方向偏移 y轴方向偏移 是否瞬时针 是否镜像 type0
 export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX +
-    width -
-    (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${
+    offsetX + width - (isMirror ? -(yz * 2) : yz * 2)
+  } ${offsetY - size}
     A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
@@ -130,9 +133,9 @@ export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise
 // 下边
 export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${offsetX +
-    width -
-    (isMirror ? -(yz * 2) : yz * 2)} ${offsetY - size}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${
+    offsetX + width - (isMirror ? -(yz * 2) : yz * 2)
+  } ${offsetY - size}
     A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
@@ -143,8 +146,9 @@ export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockw
 // 上盒舌类型1
 export const createTopTongueType1 = (width, offsetX, offsetY, size, xz, yz) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz}  ${offsetY + size} L${offsetX +
-    width}  ${offsetY} `;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz}  ${offsetY + size} L${
+    offsetX + width
+  }  ${offsetY} `;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -156,8 +160,9 @@ export const createDynamicTop = (width, height, deep, offsetX, offsetY, size) =>
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
   // 动态生成路径，基于输入参数
   const d = `M  ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + isSignNum} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} 
-  L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX +
-    width} ${offsetY - deep}
+  L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX + width} ${
+    offsetY - deep
+  }
   L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
@@ -203,12 +208,13 @@ export const createText = (offsetX, offsetY, size, textContent) => {
 export const createDoubleArrow = (height, offsetX, offsetY, scale) => {
   const Y = -3 * (scale ? scale : 1);
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY -
-    height / 2}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${
+    offsetY - height / 2
+  }
     L ${offsetX - Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY + height / 2 + Y} L
-    ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY +
-    height / 2 +
-    Y} L ${offsetX} ${offsetY + height / 2 + Y}`;
+    ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY + height / 2 + Y} L ${offsetX} ${
+    offsetY + height / 2 + Y
+  }`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "#F5AD6C");
   svg.setAttribute("stroke", "#F5AD6C");
@@ -220,11 +226,12 @@ export const createDoubleArrow = (height, offsetX, offsetY, scale) => {
 export const createHorizontalDoubleArrow = (width, offsetX, offsetY, scale) => {
   const Y = 3 * (scale ? scale : 1);
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${offsetX -
-    width / 2} ${offsetY}
-    L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${offsetX +
-    width / 2 -
-    Y} ${offsetY + Y} L ${offsetX + width / 2} ${offsetY}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${
+    offsetX - width / 2
+  } ${offsetY}
+    L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${
+    offsetX + width / 2 - Y
+  } ${offsetY + Y} L ${offsetX + width / 2} ${offsetY}
     L ${offsetX + width / 2 - Y} ${offsetY - Y} L ${offsetX + width / 2 - Y} ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "#F5AD6C");
@@ -437,7 +444,10 @@ export function createBoxs(slaveRowData) {
 export function createHeavenBox(slaveRowData) {
   const pathList = [];
   const { W, L, D, dF, dF1, dD1, dZBJJ } = slaveRowData;
-  const rectangles = [{ x: 0, y: 0, width: L, height: W }, { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 }];
+  const rectangles = [
+    { x: 0, y: 0, width: L, height: W },
+    { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 },
+  ];
   rectangles.forEach(x => {
     pathList.push(boxContent(x.width, x.height, x.x, x.y));
   });
@@ -513,8 +523,9 @@ export function createDiscBox(slaveRowData) {
 // 展示盒f1
 const createShowBoxF1 = (width, height, offsetX, offsetY, size) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${offsetY +
-    height} L ${offsetX} ${offsetY + height} Z`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${
+    offsetY + height
+  } L ${offsetX} ${offsetY + height} Z`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -546,7 +557,11 @@ const createShowBoxF2 = (width, height, offsetX, offsetY, size) => {
 export function createShowBox(slaveRowData) {
   const pathList = [];
   const { L, W, D, dD2, dF1, dF2 } = slaveRowData;
-  const rectangles = [{ x: 0, y: 0, width: D, height: W }, { x: D, y: 0, width: L, height: W }, { x: D + L, y: 0, width: dD2, height: W }];
+  const rectangles = [
+    { x: 0, y: 0, width: D, height: W },
+    { x: D, y: 0, width: L, height: W },
+    { x: D + L, y: 0, width: dD2, height: W },
+  ];
   rectangles.forEach(x => {
     pathList.push(boxContent(x.width, x.height, x.x, x.y));
   });
@@ -578,8 +593,9 @@ export function createShowBox(slaveRowData) {
 // 内衬槽
 const createInnerLiningGroove = (width, height, offsetX, offsetY) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${offsetY +
-    height} L ${offsetX - width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${
+    offsetY + height
+  } L ${offsetX - width} ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -610,8 +626,9 @@ export function createLiningBox(slaveRowData) {
 }
 const createDiagonalEdging = (width, height, offsetX, offsetY) => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${offsetX +
-    width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${
+    offsetX + width
+  } ${offsetY}`;
   svg.setAttribute("d", d);
   svg.setAttribute("fill", "transparent");
   svg.setAttribute("stroke", "#333");
@@ -671,14 +688,16 @@ export const createLineWeltTop = (width, height, offsetX, offsetY) => {
 
 // 上方盒舌等腰梯形
 export const createIsoscelesTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX +
-    width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${
+    offsetX + width
+  } ${offsetY}`;
   return createSvg(d);
 };
 // 盒舌梯形
 export const createTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${offsetX +
-    width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${
+    offsetX + width
+  } ${offsetY}`;
   return createSvg(d);
 };
 // 盒舌折叠
@@ -698,8 +717,9 @@ export const createFoldWeltTopLine = (width, height, offsetX, offsetY) => {
 export const createRoundedCornersWeltTop = (width, height, offsetX, offsetY) => {
   const isNegative = (width > 0 && height > 0) || (width < 0 && height < 0);
 
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX +
-    width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${
+    offsetX + width
+  } ${offsetY}`;
   return createSvg(d);
 };
 // 盒底组件 直角
@@ -707,29 +727,28 @@ export const createRightAngleBoxBottomComponent = (width, deep, size, offsetX, o
   const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}
   L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
   L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} 
-  L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX +
-    width +
-    deep +
-    width +
-    deep} ${offsetY}`;
+  L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${
+    offsetX + width + deep + width + deep
+  } ${offsetY}`;
   return createSvg(d);
 };
 // 盒底组件 5002
 export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX +
-    width * 0.8} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY}
-  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY +
-    size * 0.5} L ${offsetX + width + deep} ${offsetY}
-  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX +
-    width +
-    deep +
-    width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX +
-    width +
-    deep +
-    width * 0.8} ${offsetY + size}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${
+    offsetX + width * 0.8
+  } ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY}
+  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${
+    offsetY + size * 0.5
+  } L ${offsetX + width + deep} ${offsetY}
+  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${
+    offsetX + width + deep + width * 0.2
+  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${
+    offsetY + size
+  }
   L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} 
-  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY +
-    size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
+  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size} L ${
+    offsetX + width + deep + width + deep
+  } ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
   `;
   return createSvg(d);
 };
@@ -737,17 +756,17 @@ export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) =
 export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) => {
   const d = `M ${offsetX} ${offsetY} 
   L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size} L ${offsetX + width} ${offsetY}
-  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY +
-    size * 0.5}  L ${offsetX + width + deep} ${offsetY}
-  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${offsetX +
-    width +
-    deep +
-    width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX +
-    width +
-    deep +
-    width * 0.8} ${offsetY + size} ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
-  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY +
-    size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
+  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${
+    offsetY + size * 0.5
+  }  L ${offsetX + width + deep} ${offsetY}
+  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${
+    offsetX + width + deep + width * 0.2
+  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${
+    offsetY + size
+  } ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
+  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size} L ${
+    offsetX + width + deep + width + deep
+  } ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
 
   `;
   return createSvg(d);
@@ -755,20 +774,18 @@ export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) =
 // 盒底组件 5004
 export const createBoxBottomComponent3 = (width, deep, size, offsetX, offsetY) => {
   const d = `M ${offsetX} ${offsetY} 
-  L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY +
-    size * 0.5} L ${offsetX + width * 0.75} ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY}
+  L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY + size * 0.5} L ${
+    offsetX + width * 0.75
+  } ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY}
   L ${offsetX + width + deep * 0.1} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
-  L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${offsetX +
-    width +
-    deep +
-    width * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX +
-    width +
-    deep +
-    width * 0.95} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
-  L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${offsetX +
-    width * 2 +
-    deep +
-    deep} ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY}
+  L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${
+    offsetX + width + deep + width * 0.5
+  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX + width + deep + width * 0.95} ${
+    offsetY + size
+  } L ${offsetX + width + deep + width} ${offsetY}
+  L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${
+    offsetX + width * 2 + deep + deep
+  } ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY}
   `;
   return createSvg(d);
 };
@@ -778,9 +795,9 @@ export const createBoxBottomComponent4 = (width, deep, size, offsetX, offsetY) =
   L ${offsetX} ${offsetY + size} L ${offsetX + width * 0.3} ${offsetY + size} L ${offsetX + width} ${offsetY}
   L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.3} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
   L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.3} ${offsetY + size} L ${offsetX + width * 2 + deep} ${offsetY}
-  L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${offsetX +
-    width * 2 +
-    deep * 2} ${offsetY}
+  L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${
+    offsetX + width * 2 + deep * 2
+  } ${offsetY}
   `;
   return createSvg(d);
 }; // 盒底组件 5006
@@ -801,16 +818,12 @@ export const createBoxBottomComponent6 = (width, deep, size, offsetX, offsetY) =
   L ${offsetX + width + deep * 0.8}  ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.8} ${offsetY + size * 0.7}
   L ${offsetX + width + deep} ${offsetY}
   L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
-  L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX +
-    width +
-    deep +
-    width +
-    deep * 0.2} ${offsetY + size}
-  L ${offsetX + width + deep + width + deep * 0.8}  ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX +
-    width +
-    deep +
-    width +
-    deep * 0.8} ${offsetY + size * 0.7}
+  L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${
+    offsetX + width + deep + width + deep * 0.2
+  } ${offsetY + size}
+  L ${offsetX + width + deep + width + deep * 0.8}  ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${
+    offsetX + width + deep + width + deep * 0.8
+  } ${offsetY + size * 0.7}
   L ${offsetX + width + deep + width + deep} ${offsetY}
   `;
   return createSvg(d);
@@ -828,31 +841,35 @@ export const createBoxComponentNew1 = (width, deep, size, offsetX, offsetY) => {
 };
 // 部件2
 export const createBoxComponentNew2 = (width, deep, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX +
-    width * 0.6} ${offsetY + size} L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX + width * 0.6} ${
+    offsetY + size
+  } L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`;
   return createSvg(d);
 };
 // 部件3
 export const createBoxComponentNew3 = (width, deep, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX +
-    width * 0.2} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size}
-  L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${offsetY +
-    deep * 2 +
-    size} L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2}
-  L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY +
-    deep} ${offsetX + width} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${
+    offsetY + deep * 2 + size
+  } L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size}
+  L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${
+    offsetY + deep * 2 + size
+  } L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2}
+  L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${
+    offsetY + deep
+  } ${offsetX + width} ${offsetY}`;
   return createSvg(d);
 };
 // 部件4
 export const createBoxComponentNew4 = (width, deep, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY +
-    deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep}  L ${offsetX + width} ${offsetY} 
-  M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L  ${offsetX + width * 0.7} ${offsetY +
-    deep * 0.6}  L  ${offsetX + width * 0.7} ${offsetY + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY + deep * 0.8}
-  M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L  ${offsetX +
-    width * 0.7} ${offsetY + deep + deep * 0.6}  L  ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY +
-    deep +
-    deep * 0.8}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${
+    offsetY + deep
+  } L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep}  L ${offsetX + width} ${offsetY} 
+  M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L  ${offsetX + width * 0.7} ${
+    offsetY + deep * 0.6
+  }  L  ${offsetX + width * 0.7} ${offsetY + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY + deep * 0.8}
+  M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L  ${offsetX + width * 0.7} ${
+    offsetY + deep + deep * 0.6
+  }  L  ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8}
   `;
   return createSvg(d);
 };
@@ -884,47 +901,68 @@ export const createBoxComponentNew6 = (width, deep, size, offsetX, offsetY) => {
 };
 // 贴边1
 export const createWelt = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${offsetX +
-    size * 0.6} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX +
-    size * 0.6} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${
+    offsetX + size * 0.6
+  } ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX + size * 0.6} ${
+    offsetY + height
+  } L ${offsetX} ${offsetY + height}`;
   return createSvg(d);
 };
 // 贴边1
 export const createWelt1 = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY +
-    height * 0.9} L ${offsetX} ${offsetY + height}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX} ${
+    offsetY + height
+  }`;
   return createSvg(d);
 };
 // 贴边2
 export const createWelt2 = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${offsetY +
-    size} A  ${size * 0.5} ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX +
-    size * 0.5} ${offsetY + height + Math.abs(size)} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX +
-    size} ${offsetY} L ${offsetX + size} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${offsetY + size} A  ${
+    size * 0.5
+  } ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${
+    offsetY + height + Math.abs(size)
+  } A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${
+    offsetY + height
+  } L ${offsetX} ${offsetY + height}`;
   return createSvg(d);
 };
 export const createWelt2Right = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY - size} A ${size *
-    0.5} ${size} 0 0 0 ${offsetX} ${offsetY}  L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY +
-    height +
-    Math.abs(size)} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY +
-    height} L ${offsetX} ${offsetY + height}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${offsetY - size} A ${
+    size * 0.5
+  } ${size} 0 0 0 ${offsetX} ${offsetY}  L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${
+    offsetY + height + Math.abs(size)
+  } A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${
+    offsetY + height
+  } L ${offsetX} ${offsetY + height}`;
   return createSvg(d);
 };
 export const createWelt3 = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY +
-    size * 0.3} L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${
+    offsetY + size * 0.3
+  } L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`;
+  return createSvg(d);
+};
+export const createWelt4 = (height, size, offsetX, offsetY, dSFHS, dXFHS) => {
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - dSFHS} L ${offsetX + size} ${offsetY - dSFHS} L ${offsetX + size} ${offsetY + height+dXFHS}
+  L ${offsetX} ${offsetY + height+dXFHS} L ${offsetX} ${offsetY + height}`;
   return createSvg(d);
 };
 export const createWelt3Right = (height, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY -
-    size * 0.3} L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`;
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${
+    offsetY - size * 0.3
+  } L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`;
+  return createSvg(d);
+};
+export const createWelt4Right = (height, size, offsetX, offsetY, dSFHS, dXFHS) => {
+  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - dSFHS} L ${offsetX + size} ${offsetY - dSFHS} 
+  L ${offsetX + size} ${offsetY + height + dXFHS} L ${offsetX } ${offsetY + height + dXFHS} L ${offsetX} ${offsetY + height}`;
   return createSvg(d);
 };
 // 天地盒
 export const createFullTelescope = (width, height, deep, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY +
-    height} L ${offsetX} ${offsetY}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${
+    offsetY + height
+  } L ${offsetX} ${offsetY}
   L ${offsetX - deep} ${offsetY} L ${offsetX - deep} ${offsetY + height} L ${offsetX} ${offsetY + height}
   L ${offsetX} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height}
   L ${offsetX + width + deep} ${offsetY + height} L ${offsetX + width + deep} ${offsetY} L ${offsetX + width} ${offsetY}
@@ -969,14 +1007,15 @@ export const createBoxComponentNewFul3 = (width, deep, size, offsetX, offsetY) =
 };
 // 天地部件4
 export const createBoxComponentNewFul4 = (width, deep, size, offsetX, offsetY) => {
-  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${offsetY +
-    width} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width}  L ${offsetX} ${offsetY + width} 
-  M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${offsetY +
-    width * 0.7}  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.3}
-  M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L  ${offsetX +
-    deep +
-    deep * 0.6} ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY +
-    width * 0.3}
+  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${
+    offsetY + width
+  } L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width}  L ${offsetX} ${offsetY + width} 
+  M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${
+    offsetY + width * 0.7
+  }  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.3}
+  M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L  ${
+    offsetX + deep + deep * 0.6
+  } ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3}
   `;
   return createSvg(d);
 };
@@ -993,10 +1032,10 @@ export const createBoxComponentNewFul6 = (width, deep, size, offsetX, offsetY) =
   const d = `M ${offsetX} ${offsetY}  L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width * 0.3}
   L ${offsetX + deep + size * 0.5} ${offsetY + width * 0.3} L ${offsetX + deep + size * 0.5} ${offsetY + width * 0.7}
   L ${offsetX + deep} ${offsetY + width * 0.7} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY}
-  L ${offsetX+ deep + size} ${offsetY } L ${offsetX + deep + size} ${offsetY + width * 0.1} 
-  L ${offsetX + deep + size * 0.8} ${offsetY + width * 0.1} L ${offsetX  + deep + size} ${offsetY+ width * 0.2}
-  L ${offsetX  + deep + size} ${offsetY+ width * 0.8} L ${offsetX  + deep + size * 0.8} ${offsetY+ width * 0.9} 
+  L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} 
+  L ${offsetX + deep + size * 0.8} ${offsetY + width * 0.1} L ${offsetX + deep + size} ${offsetY + width * 0.2}
+  L ${offsetX + deep + size} ${offsetY + width * 0.8} L ${offsetX + deep + size * 0.8} ${offsetY + width * 0.9} 
   L ${offsetX + deep + size} ${offsetY + width * 0.9}L ${offsetX + deep + size} ${offsetY + width}L ${offsetX} ${offsetY + width}
   `;
   return createSvg(d);
-};
\ No newline at end of file
+};
diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js
index 5a00a65..df010d4 100644
--- a/src/components/Common/BoxDesignCompontent/svg.js
+++ b/src/components/Common/BoxDesignCompontent/svg.js
@@ -35,7 +35,9 @@ import {
   createWelt2,
   createWelt2Right,
   createWelt3,
+  createWelt4,
   createWelt3Right,
+  createWelt4Right,
   createText,
   createDoubleArrow,
   createHorizontalDoubleArrow,
@@ -122,7 +124,7 @@ const SvgBox = props => {
     let viewBoxHeight = Number(boxHeight) + max;
     if (Number(svgType) === 1) {
       // 四面盒身
-      viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2;
+      viewBoxWidth = Number(boxLength) * 2 + Number(boxWidth) * 2 + dZTBW + dYTBW;
     } else if (Number(svgType) === 2) {
       viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW;
     } else if (Number(svgType) === 3) {
@@ -269,7 +271,7 @@ const SvgBox = props => {
       } else {
         leftSize = zbtb?.value;
       }
-      svg.setAttribute("viewBox", `${-(leftSize * scale) || 0} ${-ySvg} ${viewBoxWidth} ${viewBoxHeight}`);
+      svg.setAttribute("viewBox", `${-(leftSize * scale) || 0} ${-ySvg} ${viewBoxWidth + 2} ${viewBoxHeight + 2}`);
       svg.setAttribute("width", `${viewBoxWidth}px`);
       svg.setAttribute("height", `${viewBoxHeight}px`);
       svgContainerRef.current.style.width = `${viewBoxWidth}px`;
@@ -364,12 +366,12 @@ const SvgBox = props => {
       }
 
       // 左边贴边
-      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
+      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dZTBW) {
         pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW));
       }
       // 右边贴边
-      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0));
+      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0, dSFHS * scale, dXFHS * scale));
       if (ybtb?.type && dYTBW) {
         pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW));
       }
@@ -528,12 +530,12 @@ const SvgBox = props => {
         pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS));
       }
       // 左边贴边
-      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
+      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dZTBW) {
         pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
       }
       // 右边贴边
-      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0));
+      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dYTBW) {
         pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
       }
@@ -673,12 +675,12 @@ const SvgBox = props => {
         pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS));
       }
       // 左边贴边
-      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
+      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dZTBW) {
         pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
       }
       // 右边贴边
-      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0));
+      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dYTBW) {
         pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
       }
@@ -899,12 +901,12 @@ const SvgBox = props => {
       }
 
       // 左边贴边
-      pathList.push(createTrapezoidLeft(zbtb?.type, scaledWidth, -dZTBW * scale, 0, 0));
+      pathList.push(createTrapezoidLeft(zbtb?.type, scaledWidth, -dZTBW * scale, 0, 0, dSFHS * scale, dXFHS * scale));
       if (zbtb?.type && dZTBW) {
         pathList.push(createText(-dZTBW * 0.4, scaledWidth / 2, 10 * scales, dZTBW));
       }
       // 右边贴边
-      pathList.push(createTrapezoidRight(ybtb?.type, scaledWidth, dYTBW * scale, scaledHeight * 2 + scaledDeep * 2, 0));
+      pathList.push(createTrapezoidRight(ybtb?.type, scaledWidth, dYTBW * scale, scaledHeight * 2 + scaledDeep * 2, 0, dSFHS * scale, dXFHS * scale));
       if (ybtb?.type && dYTBW) {
         pathList.push(createText(scaledHeight * 2 + scaledDeep * 2 + dYTBW * 0.4, scaledWidth / 2, 10 * scales, dYTBW));
       }
@@ -1364,7 +1366,7 @@ const SvgBox = props => {
   };
 
   // 左边贴位
-  const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => {
+  const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY, dSFHS, dXFHS) => {
     if (!size) return createNoneProject();
     let data = {};
     switch (trapezoidLeftType) {
@@ -1380,6 +1382,9 @@ const SvgBox = props => {
       case "8004":
         data = createWelt3(height, size, offsetX, offsetY);
         break;
+      case "8005":
+        data = createWelt4(height, size, offsetX, offsetY, dSFHS, dXFHS);
+        break;
       default:
         data = createNoneProject();
         break;
@@ -1387,7 +1392,7 @@ const SvgBox = props => {
     return data;
   };
   // 右边贴位
-  const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => {
+  const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY,dSFHS,dXFHS) => {
     if (!size) return createNoneProject();
     let data = {};
     switch (trapezoidLeftType) {
@@ -1403,6 +1408,9 @@ const SvgBox = props => {
       case "9004":
         data = createWelt3Right(height, size, offsetX, offsetY);
         break;
+      case "9005":
+        data = createWelt4Right(height, size, offsetX, offsetY,dSFHS,dXFHS);
+        break;
       default:
         data = createNoneProject();
         break;
--
libgit2 0.22.2