From eb25cb89810a0a3ab84289ae6523dd6f0fa5817f Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Wed, 15 Jul 2026 16:32:26 +0800
Subject: [PATCH] fix: make rocket reward dialog usable

---
 src/views/rocket/config/index.vue      | 12 ++++++-
 tests/unit/views/rocket-config.spec.js | 45 ++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 tests/unit/views/rocket-config.spec.js

diff --git a/src/views/rocket/config/index.vue b/src/views/rocket/config/index.vue
index cac8f39..d531a8c 100644
--- a/src/views/rocket/config/index.vue
+++ b/src/views/rocket/config/index.vue
@@ -71,11 +71,15 @@
     <el-dialog
       :title="$t('pages.rocketConfig.editTitle', { level: formatLevel(form.level) })"
       :visible.sync="dialogVisible"
+      :modal-append-to-body="true"
+      :append-to-body="true"
       :close-on-click-modal="false"
       width="900px"
+      top="50px"
       @closed="resetForm"
     >
-      <el-form ref="configForm" :model="form" :rules="rules" label-width="130px">
+      <!-- 弹窗挂到 body 后保持表单独立滚动，避免遮罩盖住内容或奖励池被视口截断。 -->
+      <el-form ref="configForm" class="rocket-dialog-content" :model="form" :rules="rules" label-width="130px">
         <el-form-item :label="$t('pages.rocketConfig.level')">
           <el-input :value="formatLevel(form.level)" disabled />
         </el-form-item>
@@ -405,5 +409,11 @@ export default {
   .danger-text {
     color: #f56c6c;
   }
+
+  .rocket-dialog-content {
+    max-height: calc(100vh - 220px);
+    padding-right: 8px;
+    overflow-y: auto;
+  }
 }
 </style>
diff --git a/tests/unit/views/rocket-config.spec.js b/tests/unit/views/rocket-config.spec.js
new file mode 100644
index 0000000..51056dd
--- /dev/null
+++ b/tests/unit/views/rocket-config.spec.js
@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import RocketConfig from '@/views/rocket/config/index.vue'
+
+jest.mock('@/api/rocket-config', () => ({
+  listRocketConfigs: jest.fn(() => Promise.resolve({ body: [] })),
+  updateRocketConfig: jest.fn(() => Promise.resolve({}))
+}))
+
+describe('RocketConfig edit dialog', () => {
+  const originalSilent = Vue.config.silent
+
+  beforeAll(() => {
+    Vue.config.silent = true
+  })
+
+  afterAll(() => {
+    Vue.config.silent = originalSilent
+  })
+
+  const createWrapper = () => shallowMount(RocketConfig, {
+    mocks: {
+      $t: key => key,
+      $message: { warning: jest.fn() },
+      $opsMessage: { success: jest.fn() }
+    }
+  })
+
+  it('keeps the dialog above the mask and allows adding an empty reward', async() => {
+    const wrapper = createWrapper()
+    const dialog = wrapper.find('el-dialog')
+
+    expect(dialog.attributes('append-to-body')).toBe('true')
+    expect(dialog.attributes('modal-append-to-body')).toBe('true')
+
+    wrapper.vm.dialogVisible = true
+    wrapper.vm.addReward()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.dialogVisible).toBe(true)
+    expect(wrapper.vm.form.rewardConfig).toHaveLength(1)
+    expect(wrapper.vm.form.rewardConfig[0].type).toBe('GOLD')
+    expect(wrapper.find('.rocket-dialog-content').exists()).toBe(true)
+  })
+})