From b0e2a98d2a9314e3da84538e0a707af8105020a0 Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Sat, 18 Jul 2026 12:25:44 +0800
Subject: [PATCH] fix: correct activity dialog overlay stacking

---
 src/components/ActivityDialog/index.vue     |  23 +++
 src/views/activity/game-king/index.vue      | 155 ++++++++++----------
 src/views/activity/gift-challenge/index.vue | 147 +++++++++----------
 3 files changed, 173 insertions(+), 152 deletions(-)
 create mode 100644 src/components/ActivityDialog/index.vue

diff --git a/src/components/ActivityDialog/index.vue b/src/components/ActivityDialog/index.vue
new file mode 100644
index 0000000..acfdacc
--- /dev/null
+++ b/src/components/ActivityDialog/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-dialog
+    v-bind="$attrs"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    v-on="$listeners"
+  >
+    <template v-if="$slots.title" slot="title">
+      <slot name="title" />
+    </template>
+    <slot />
+    <template v-if="$slots.footer" slot="footer">
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ActivityDialog',
+  inheritAttrs: false
+}
+</script>
diff --git a/src/views/activity/game-king/index.vue b/src/views/activity/game-king/index.vue
index 27f9268..cd2133f 100644
--- a/src/views/activity/game-king/index.vue
+++ b/src/views/activity/game-king/index.vue
@@ -87,7 +87,7 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog
+    <activity-dialog
       :title="form.id ? '编辑 Aslan 游戏王活动' : '新建 Aslan 游戏王活动'"
       :visible.sync="editorVisible"
       width="1180px"
@@ -307,9 +307,9 @@
         <el-button @click="editorVisible = false">取消</el-button>
         <el-button type="primary" :loading="saveLoading" @click="submitActivity">保存全部配置</el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 结算记录`"
       :visible.sync="settlementsVisible"
       width="1120px"
@@ -404,9 +404,9 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 抽奖发放记录`"
       :visible.sync="drawRecordsVisible"
       width="1120px"
@@ -499,9 +499,9 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 历史游戏流水补数`"
       :visible.sync="backfillVisible"
       width="620px"
@@ -554,7 +554,7 @@
           执行一批
         </el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
     <associated-resources
       v-if="resourceSelectorVisible"
@@ -567,6 +567,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import ActivityDialog from '@/components/ActivityDialog'
 import AssociatedResources from '@/components/data/AssociatedResources'
 import PropsRow from '@/components/data/PropsRow'
 import UploadImage from '@/components/upload-image'
@@ -595,7 +596,7 @@ const REQUIRED_RANK_RANGES = [
 
 export default {
   name: 'ActivityGameKing',
-  components: { AssociatedResources, PropsRow, UploadImage },
+  components: { ActivityDialog, AssociatedResources, PropsRow, UploadImage },
   data() {
     return {
       activities: [],
@@ -1149,88 +1150,86 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.aslan-game-king {
-  .filter-container {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 15px;
-  }
+.filter-container {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
 
-  .page-tip {
-    flex: 1;
-    margin-left: 15px;
-  }
+.page-tip {
+  flex: 1;
+  margin-left: 15px;
+}
 
-  .primary-text {
-    color: #303133;
-    font-weight: 600;
-  }
+.primary-text {
+  color: #303133;
+  font-weight: 600;
+}
 
-  .secondary-text,
-  .form-help {
-    color: #909399;
-    font-size: 12px;
-    line-height: 20px;
-  }
+.secondary-text,
+.form-help {
+  color: #909399;
+  font-size: 12px;
+  line-height: 20px;
+}
 
-  .event-tag {
-    margin: 2px 4px 2px 0;
-  }
+.event-tag {
+  margin: 2px 4px 2px 0;
+}
 
-  .settlement-status {
-    margin-top: 6px;
-    color: #606266;
-    font-size: 12px;
-  }
+.settlement-status {
+  margin-top: 6px;
+  color: #606266;
+  font-size: 12px;
+}
 
-  .editor-body {
-    max-height: 76vh;
-    overflow-y: auto;
-    padding: 0 8px 20px;
-  }
+.editor-body {
+  max-height: 76vh;
+  overflow-y: auto;
+  padding: 0 8px 20px;
+}
 
-  .section-title {
-    margin: 22px 0 14px;
-    padding-left: 10px;
-    border-left: 4px solid #409eff;
-    color: #303133;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 22px;
-  }
+.section-title {
+  margin: 22px 0 14px;
+  padding-left: 10px;
+  border-left: 4px solid #409eff;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
 
-  .config-table {
-    margin-top: 12px;
-  }
+.config-table {
+  margin-top: 12px;
+}
 
-  .weight-summary {
-    padding: 10px 5px;
-    color: #606266;
-    text-align: right;
-  }
+.weight-summary {
+  padding: 10px 5px;
+  color: #606266;
+  text-align: right;
+}
 
-  .readonly-prize-image {
-    width: 72px;
-    height: 72px;
-  }
+.readonly-prize-image {
+  width: 72px;
+  height: 72px;
+}
 
-  .dialog-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 15px;
-  }
+.dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
 
-  .backfill-form {
-    margin-top: 20px;
-  }
+.backfill-form {
+  margin-top: 20px;
+}
 
-  .delivery-item-table {
-    margin: 8px 0;
-  }
+.delivery-item-table {
+  margin: 8px 0;
+}
 
-  .danger-link {
-    color: #f56c6c;
-  }
+.danger-link {
+  color: #f56c6c;
 }
 </style>
diff --git a/src/views/activity/gift-challenge/index.vue b/src/views/activity/gift-challenge/index.vue
index a5e28f7..d9c2d8c 100644
--- a/src/views/activity/gift-challenge/index.vue
+++ b/src/views/activity/gift-challenge/index.vue
@@ -83,7 +83,7 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog
+    <activity-dialog
       :title="form.id ? '编辑 Aslan 礼物挑战' : '新建 Aslan 礼物挑战'"
       :visible.sync="editorVisible"
       width="1240px"
@@ -387,9 +387,9 @@
           保存全部配置
         </el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 排行榜`"
       :visible.sync="rankingVisible"
       width="930px"
@@ -423,9 +423,9 @@
           <template slot-scope="scope">{{ formatNumber(scope.row.score) }}</template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 结算记录`"
       :visible.sync="settlementsVisible"
       width="1240px"
@@ -518,7 +518,7 @@
         <el-table-column label="补发次数" width="90" align="center" prop="retryCount" />
         <el-table-column label="状态说明" min-width="180" show-overflow-tooltip prop="failureReason" />
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
     <associated-resources
       v-if="resourceSelectorVisible"
@@ -531,6 +531,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import ActivityDialog from '@/components/ActivityDialog'
 import AssociatedResources from '@/components/data/AssociatedResources'
 import PropsRow from '@/components/data/PropsRow'
 import {
@@ -553,7 +554,7 @@ const TASK_SEND_GIFT_GOLD = 'SEND_GIFT_GOLD'
 
 export default {
   name: 'ActivityGiftChallenge',
-  components: { AssociatedResources, PropsRow },
+  components: { ActivityDialog, AssociatedResources, PropsRow },
   data() {
     return {
       activities: [],
@@ -1199,88 +1200,86 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.aslan-gift-challenge {
-  .page-tip {
-    margin: 8px 0 18px;
-  }
+.page-tip {
+  margin: 8px 0 18px;
+}
 
-  .primary-text {
-    font-weight: 600;
-  }
+.primary-text {
+  font-weight: 600;
+}
 
-  .secondary-text,
-  .form-help {
-    margin-top: 4px;
-    color: #909399;
-    font-size: 12px;
-    line-height: 18px;
-  }
+.secondary-text,
+.form-help {
+  margin-top: 4px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+}
 
-  .editor-body {
-    max-height: 76vh;
-    padding-right: 8px;
-    overflow-y: auto;
-  }
+.editor-body {
+  max-height: 76vh;
+  padding-right: 8px;
+  overflow-y: auto;
+}
 
-  .section-title {
-    margin: 24px 0 14px;
-    padding-left: 10px;
-    border-left: 4px solid #409eff;
-    color: #303133;
-    font-size: 16px;
-    font-weight: 600;
-  }
+.section-title {
+  margin: 24px 0 14px;
+  padding-left: 10px;
+  border-left: 4px solid #409eff;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
 
-  .rank-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+.rank-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-  .config-table,
-  .settlement-table {
-    margin-top: 12px;
-  }
+.config-table,
+.settlement-table {
+  margin-top: 12px;
+}
 
-  .task-desc-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-    margin-top: 12px;
-  }
+.task-desc-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
 
-  .task-desc-item {
-    padding: 10px;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-  }
+.task-desc-item {
+  padding: 10px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
 
-  .task-desc-label {
-    margin-bottom: 8px;
-    color: #606266;
-    font-size: 13px;
-  }
+.task-desc-label {
+  margin-bottom: 8px;
+  color: #606266;
+  font-size: 13px;
+}
 
-  .dialog-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 14px;
-  }
+.dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
 
-  .delivery-item-table {
-    width: calc(100% - 30px);
-    margin: 4px 15px 12px;
-  }
+.delivery-item-table {
+  width: calc(100% - 30px);
+  margin: 4px 15px 12px;
+}
 
-  .danger-link {
-    color: #f56c6c;
-  }
+.danger-link {
+  color: #f56c6c;
 }
 
 @media (max-width: 1100px) {
-  .aslan-gift-challenge .task-desc-grid {
+  .task-desc-grid {
     grid-template-columns: 1fr;
   }
 }