From 2252bcb8af2f65919af8eef5d22f9b6ec57e30cf Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Wed, 11 Nov 2026 09:35:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(seller):=20=E4=BF=AE=E5=A4=8D=E6=96=B0?=
 =?UTF-8?q?=E7=89=88=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=B8=83=E5=B1=80=E4=B8=8B?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=BA=E5=AF=B8=E5=BC=B9=E7=AA=97=E6=9C=AA=E6=8C=89?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=8C=BA=E5=B1=85=E4=B8=AD=E4=B8=94=E8=A2=AB?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E9=81=AE=E6=8C=A1=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#IKUDFL)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 seller/src/styles/element.scss               | 37 ++++++++++++++++++++
 seller/src/views/Main.vue                    |  2 ++
 seller/src/views/order/order/orderDetail.vue |  2 +-
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/seller/src/styles/element.scss b/seller/src/styles/element.scss
index 56f235b4f..509c3f2d4 100644
--- a/seller/src/styles/element.scss
+++ b/seller/src/styles/element.scss
@@ -144,3 +144,40 @@
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c0c4cc' stroke-width='2' stroke-linejoin='round'><path d='M8 36l8-20h32l8 20v12a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V36z'/><path d='M8 36h16a8 8 0 0 0 16 0h16'/></svg>");
   }
 }
+
+
+/*
+ * 商家端固定左侧 300px 菜单布局下的 Dialog 弹窗居中与边界保护 (Issue #IKUDFL)
+ * 1. 扣除左侧 300px 菜单宽度，将弹窗容器限定在右侧内容工作区内，使得弹窗自然以工作区为中心水平居中，不再全屏居中；
+ * 2. 弹窗最大宽度限制在 calc(100% - 40px)，在中低分辨率（如 1440px/1600px）下左右预留各 20px 边距，避免大尺寸弹窗（如 1200px）溢出或贴紧菜单；
+ * 3. 兼容未挂载至 body 的弹窗，当内容区内弹窗展开时提升 .single-page-con 层级，避免被菜单(z-index: 21)遮挡。
+ */
+body.seller-has-sidebar,
+.main {
+  .el-overlay-dialog {
+    left: 300px;
+    width: calc(100vw - 300px);
+    box-sizing: border-box;
+  }
+
+  .el-overlay-dialog .el-dialog {
+    max-width: calc(100% - 40px);
+    box-sizing: border-box;
+  }
+}
+
+/* 移动端/极窄屏兜底：若宽度小于等于 768px 则恢复全屏居中 */
+@media (max-width: 768px) {
+  body.seller-has-sidebar,
+  .main {
+    .el-overlay-dialog {
+      left: 0;
+      width: 100vw;
+    }
+  }
+}
+
+/* 未使用 append-to-body 挂载的局部弹窗，在打开时提升内容区层叠上下文，避免被菜单栏或顶栏压盖 */
+.single-page-con:has(.el-overlay:not([style*="display: none"])) {
+  z-index: 2000;
+}
diff --git a/seller/src/views/Main.vue b/seller/src/views/Main.vue
index 2af63aaa1..f1dd42233 100644
--- a/seller/src/views/Main.vue
+++ b/seller/src/views/Main.vue
@@ -317,12 +317,14 @@ watch(() => appStore.tagsList, () => {
 appStore.setOpenedList();
 
 onMounted(() => {
+  document.body.classList.add("seller-has-sidebar");
   init();
   resize();
   window.addEventListener("resize", resize);
 });
 
 onBeforeUnmount(() => {
+  document.body.classList.remove("seller-has-sidebar");
   window.removeEventListener("resize", resize);
 });
 </script>
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index 55d83ba54..ff661b091 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -559,7 +559,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="fulfillModal" title="订单发货" width="1200px">
+    <el-dialog v-model="fulfillModal" title="订单发货" width="1200px" append-to-body>
       <div v-if="showFulfillModeSelector" class="fulfill-mode-selector">
         <el-radio-group v-model="fulfillForm.fulfillmentMode">
           <el-radio v-if="allowOperation.fulfillWhole" label="WHOLE">整单发货</el-radio>