邀请和礼物

apps/src/api/legacy/gift.ts

@@ -44,6 +44,10 @@ export async function switchDelStatus(
   return requestClient.get(`/sys/gift/config/switch/${id}/${status}`);
 }
 
+export async function addAllGiftRegion(data: Record<string, any>) {
+  return requestClient.post('/sys/gift/config/regions/add-all', data);
+}
+
 export async function countGiftAmount(params: Record<string, any>) {
   return requestClient.get<number>('/running-water-log/total-count', {
     params,

apps/src/views/operate/gift-config.vue

@@ -5,6 +5,25 @@ import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
 import {
+  Button,
+  Card,
+  DatePicker,
+  Image,
+  Input,
+  message,
+  Modal,
+  Pagination,
+  Select,
+  Space,
+  Switch,
+  Table,
+  TabPane,
+  Tabs,
+  Tag,
+} from 'antdv-next';
+
+import {
+  addAllGiftRegion,
   getPairCpGiveGiftId,
   giftTable,
   listGiftBySysOrigin,
@@ -22,28 +41,8 @@ import AccountInput from '#/components/account-input.vue';
 import { copyText } from '#/views/operate/shared';
 import { formatDate, getAllowedSysOrigins } from '#/views/system/shared';
 
-import {
-  Button,
-  Card,
-  DatePicker,
-  Image,
-  Input,
-  Modal,
-  Pagination,
-  Select,
-  Space,
-  Switch,
-  Table,
-  Tabs,
-  TabPane,
-  Tag,
-  message,
-} from 'antdv-next';
-
-import {
-  GIFT_CONFIG_TAB_OPTIONS,
-} from './constants';
 import GiftFormModal from './components/gift-form-modal.vue';
+import { GIFT_CONFIG_TAB_OPTIONS } from './constants';
 
 defineOptions({ name: 'OperateGiftConfig' });
 
@@ -88,7 +87,12 @@ const settingQuery = reactive({
 });
 
 const giftFormOpen = ref(false);
-const activeGiftRow = ref<Record<string, any> | null>(null);
+const activeGiftRow = ref<null | Record<string, any>>(null);
+const addRegionOpen = ref(false);
+const addRegionSaving = ref(false);
+const addRegionForm = reactive({
+  regionId: '',
+});
 
 const weekStarLoading = ref(false);
 const weekStarList = ref<Array<Record<string, any>>>([]);
@@ -141,6 +145,13 @@ const settingColumns = [
   { dataIndex: 'actions', key: 'actions', title: '操作', width: 180 },
 ];
 
+const regionOptions = computed(() =>
+  regions.value.map((item) => ({
+    label: String(item.regionName || item.name || item.id || '-'),
+    value: item.id as any,
+  })),
+);
+
 const weekStarColumns = [
   { dataIndex: 'id', key: 'id', title: '编号', width: 120 },
   { dataIndex: 'sysOrigin', key: 'sysOrigin', title: '归属系统', width: 120 },
@@ -262,6 +273,37 @@ function openGiftEdit(row: Record<string, any>) {
   giftFormOpen.value = true;
 }
 
+async function openAddRegionModal() {
+  if (!settingQuery.sysOrigin) {
+    message.warning('请先选择平台');
+    return;
+  }
+  if (regions.value.length <= 0) {
+    await loadRegions(settingQuery.sysOrigin);
+  }
+  addRegionForm.regionId = '';
+  addRegionOpen.value = true;
+}
+
+async function handleAddRegionSubmit() {
+  if (!settingQuery.sysOrigin || !addRegionForm.regionId) {
+    message.warning('请选择要追加的区域');
+    return;
+  }
+  addRegionSaving.value = true;
+  try {
+    await addAllGiftRegion({
+      regionId: addRegionForm.regionId,
+      sysOrigin: settingQuery.sysOrigin,
+    });
+    message.success('追加成功');
+    addRegionOpen.value = false;
+    await loadSetting(true);
+  } finally {
+    addRegionSaving.value = false;
+  }
+}
+
 async function openWeekStarModal() {
   weekStarForm.sysOrigin = weekStarQuery.sysOrigin;
   weekStarForm.giftOne = '';
@@ -328,7 +370,7 @@ async function handleCpSave() {
 <template>
   <Page title="礼物管理">
     <Card>
-      <Tabs v-model:activeKey="activeTab">
+      <Tabs v-model:active-key="activeTab">
         <TabPane key="setting" tab="礼物配置" />
         <TabPane key="weekStar" tab="周星礼物配置" />
         <TabPane key="cp" tab="CP组合赠送礼物" />
@@ -342,20 +384,27 @@ async function handleCpSave() {
             @change="loadRegions(settingQuery.sysOrigin); loadSetting(true)"
             :options="sysOriginOptions"
           />
-          <Select option-label-prop="label" v-model:value="settingQuery.giftTab" allow-clear style="width: 160px"
+          <Select
+            v-model:value="settingQuery.giftTab"
             :options="GIFT_CONFIG_TAB_OPTIONS.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
+            allow-clear
+            option-label-prop="label"
+            style="width: 160px"
           />
           <Select
-            option-label-prop="label"
             v-model:value="settingQuery.sortType"
+            :options="SORT_OPTIONS.map((item) => ({ label: `${item.label}`, value: item.value as any }))"
             allow-clear
+            option-label-prop="label"
             style="width: 160px"
             @change="loadSetting(true)"
-          
-            :options="SORT_OPTIONS.map((item) => ({ label: `${item.label}`, value: item.value as any }))"
           />
-          <Select option-label-prop="label" v-model:value="settingQuery.del" allow-clear style="width: 140px"
+          <Select
+            v-model:value="settingQuery.del"
             :options="SHELF_OPTIONS.map((item) => ({ label: `${item.label}`, value: item.value as any }))"
+            allow-clear
+            option-label-prop="label"
+            style="width: 140px"
           />
           <Input
             v-model:value="settingQuery.giftId"
@@ -385,6 +434,9 @@ async function handleCpSave() {
           <Button type="primary" @click="openGiftCreate">
             新增礼物
           </Button>
+          <Button danger @click="openAddRegionModal">
+            添加全部礼物区域
+          </Button>
         </Space>
 
         <Table
@@ -431,7 +483,7 @@ async function handleCpSave() {
             :total="settingTotal"
             show-size-changer
             @change="handleSettingPageChange"
-            @showSizeChange="handleSettingPageChange"
+            @show-size-change="handleSettingPageChange"
           />
         </div>
       </div>
@@ -503,7 +555,7 @@ async function handleCpSave() {
             :total="weekStarTotal"
             show-size-changer
             @change="handleWeekStarPageChange"
-            @showSizeChange="handleWeekStarPageChange"
+            @show-size-change="handleWeekStarPageChange"
           />
         </div>
       </div>
@@ -536,6 +588,29 @@ async function handleCpSave() {
       @success="loadSetting(true)"
     />
 
+    <Modal
+      :confirm-loading="addRegionSaving"
+      :open="addRegionOpen"
+      destroy-on-close
+      title="添加全部礼物区域"
+      @cancel="addRegionOpen = false"
+      @ok="handleAddRegionSubmit"
+    >
+      <Space direction="vertical" style="width: 100%">
+        <div class="transfer-warning">
+          确认后，会在当前平台所有礼物现有区域基础上追加所选区域，已有该区域的礼物不会重复添加。
+        </div>
+        <Select
+          v-model:value="addRegionForm.regionId"
+          :options="regionOptions"
+          option-label-prop="label"
+          placeholder="请选择要追加的区域"
+          show-search
+          style="width: 100%"
+        />
+      </Space>
+    </Modal>
+
     <Modal
       :confirm-loading="weekStarSaving"
       :open="weekStarOpen"
@@ -606,4 +681,9 @@ async function handleCpSave() {
 .cp-panel {
   min-height: 120px;
 }
+
+.transfer-warning {
+  color: #dc2626;
+  line-height: 22px;
+}
 </style>

apps/src/views/resident-activity/invite-config.vue

@@ -4,26 +4,27 @@ import { computed, reactive, ref, watch } from 'vue';
 import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
-import {
-  getResidentInviteConfig,
-  saveResidentInviteConfig,
-} from '#/api/legacy/resident-activity';
-import ActivityResourceGroupSelectDrawer from '#/views/props/components/activity-resource-group-select-drawer.vue';
-import { getAllowedSysOrigins } from '#/views/system/shared';
-
 import {
   Button,
   Card,
   Input,
   InputNumber,
+  message,
   Modal,
   Space,
   Spin,
   Switch,
   Tag,
-  message,
+  TextArea,
 } from 'antdv-next';
 
+import {
+  getResidentInviteConfig,
+  saveResidentInviteConfig,
+} from '#/api/legacy/resident-activity';
+import ActivityResourceGroupSelectDrawer from '#/views/props/components/activity-resource-group-select-drawer.vue';
+import { getAllowedSysOrigins } from '#/views/system/shared';
+
 defineOptions({ name: 'ResidentInviteConfigPage' });
 
 function createReward() {
@@ -80,7 +81,56 @@ const form = reactive<Record<string, any>>({
   timezone: 'Asia/Riyadh',
 });
 
-function normalizeReward(value: Record<string, any> | null | undefined) {
+const statusMeta = computed(() => (
+  form.enabled
+    ? { color: 'success', text: '已启用' }
+    : { color: 'default', text: '已关闭' }
+));
+
+const summaryCards = computed(() => [
+  {
+    label: '邀请方首邀奖励',
+    value: formatRewardSummary(form.inviterBindReward),
+  },
+  {
+    label: '被邀请方注册礼包',
+    value: formatRewardSummary(form.inviteeBindReward),
+  },
+  {
+    label: '被邀请人充值阶梯',
+    value: formatRuleSummary('inviteeRechargeRules'),
+  },
+  {
+    label: '邀请方任务阶梯',
+    value: [
+      `人数 ${formatRuleSummary('inviterValidCountRules')}`,
+      `充值 ${formatRuleSummary('inviterTotalRechargeRules')}`,
+    ].join(' / '),
+  },
+]);
+
+function formatRewardSummary(reward: Record<string, any>) {
+  const parts: string[] = [];
+  const goldAmount = Number(reward?.goldAmount || 0);
+  if (goldAmount > 0) {
+    parts.push(`${goldAmount} 金币`);
+  }
+  if (reward?.rewardGroupName) {
+    parts.push(String(reward.rewardGroupName));
+  }
+  return parts.length > 0 ? parts.join(' + ') : '未配置';
+}
+
+function formatRuleSummary(listKey: string) {
+  const list = (form[listKey] || []) as Array<Record<string, any>>;
+  if (list.length === 0) {
+    return '0 个阶梯';
+  }
+  const enabledCount = list.filter((item) => item.enabled !== false).length;
+  return `${enabledCount}/${list.length} 启用`;
+}
+
+function normalizeReward(value: null | Record<string, any> | undefined) {
   return {
     goldAmount: Number(value?.goldAmount || 0),
     id: value?.id ?? null,
@@ -100,7 +150,7 @@ function normalizeRuleList(list: Array<Record<string, any>> | null | undefined)
   }));
 }
 
-function normalizeConfig(result: Record<string, any> | null | undefined) {
+function normalizeConfig(result: null | Record<string, any> | undefined) {
   const value = result ?? {};
   form.sysOrigin = String(value.sysOrigin || form.sysOrigin || sysOriginOptions.value[0]?.value || '');
   form.enabled = Boolean(value.enabled);
@@ -249,113 +299,150 @@ const rewardSections = [
 </script>
 
 <template>
-  <Page title="邀请活动配置">
-    <Card>
-      <Space class="toolbar" wrap>
-        <div class="toolbar-item">
-          <div class="toolbar-label">系统</div>
-          <SysOriginSelect
-            v-model:value="form.sysOrigin"
-            style="width: 160px"
-            :options="sysOriginOptions"
-          />
+  <Page auto-content-height title="邀请活动配置">
+    <div class="invite-config-page">
+      <Card :bordered="false" class="overview-card">
+        <div class="toolbar">
+          <Space align="end" wrap>
+            <div class="toolbar-item">
+              <div class="field-label">系统</div>
+              <SysOriginSelect
+                v-model:value="form.sysOrigin"
+                :options="sysOriginOptions"
+                style="width: 180px"
+              />
+            </div>
+            <Tag :color="statusMeta.color">
+              {{ statusMeta.text }}
+            </Tag>
+          </Space>
+          <Button :loading="saving" type="primary" @click="handleSubmit">
+            保存配置
+          </Button>
         </div>
-        <Button :loading="saving" type="primary" @click="handleSubmit">
-          保存配置
-        </Button>
-      </Space>
+
+        <div class="summary-grid">
+          <div
+            v-for="item in summaryCards"
+            :key="item.label"
+            class="summary-item"
+          >
+            <div class="summary-label">{{ item.label }}</div>
+            <div class="summary-value" :title="item.value">{{ item.value }}</div>
+          </div>
+        </div>
+      </Card>
 
       <Spin :spinning="loading">
-        <div class="section-list">
-          <Card size="small" title="基础设置">
-            <div class="grid">
-              <div class="field">
-                <div class="label">活动开关</div>
+        <div class="content-grid">
+          <Card :bordered="false" class="config-card basic-card" title="基础设置">
+            <div class="form-grid">
+              <div class="field compact-field">
+                <div class="field-label">活动开关</div>
                 <Switch v-model:checked="form.enabled" />
               </div>
               <div class="field">
-                <div class="label">时区</div>
+                <div class="field-label">时区</div>
                 <Input v-model:value="form.timezone" />
               </div>
               <div class="field field-span-2">
-                <div class="label">下载地址</div>
+                <div class="field-label">下载地址</div>
                 <Input v-model:value="form.downloadUrl" />
               </div>
-              <div class="field field-span-2">
-                <div class="label">分享标题</div>
+              <div class="field">
+                <div class="field-label">分享标题</div>
                 <Input v-model:value="form.shareTitle" />
               </div>
-              <div class="field field-span-2">
-                <div class="label">分享描述</div>
-                <Input v-model:value="form.shareDesc" />
-              </div>
-              <div class="field field-span-2">
-                <div class="label">客服联系方式</div>
+              <div class="field">
+                <div class="field-label">客服联系方式</div>
                 <Input v-model:value="form.serviceContact" />
               </div>
-              <div class="field">
-                <div class="label">同 IP 只计一次</div>
-                <Switch v-model:checked="form.antiCheat.sameIpOnce" />
+              <div class="field field-span-2">
+                <div class="field-label">分享描述</div>
+                <TextArea
+                  v-model:value="form.shareDesc"
+                  :auto-size="{ minRows: 2, maxRows: 4 }"
+                />
               </div>
-              <div class="field">
-                <div class="label">同设备只计一次</div>
-                <Switch v-model:checked="form.antiCheat.sameDeviceOnce" />
-              </div>
-            </div>
-          </Card>
-
-          <Card size="small" title="邀请方首邀奖励">
-            <div class="reward-row">
-              <div class="field">
-                <div class="label">金币</div>
-                <InputNumber v-model:value="form.inviterBindReward.goldAmount" :min="0" style="width: 180px" />
-              </div>
-              <div class="field field-grow">
-                <div class="label">奖励组</div>
-                <div class="reward-group-box">
-                  <Tag v-if="form.inviterBindReward.rewardGroupName" color="blue">
-                    {{ form.inviterBindReward.rewardGroupName }}
-                  </Tag>
-                  <span v-else class="placeholder">未选择奖励组</span>
+              <div class="anti-cheat field-span-2">
+                <div class="switch-row">
+                  <span class="field-label">同 IP 只计一次</span>
+                  <Switch v-model:checked="form.antiCheat.sameIpOnce" />
+                </div>
+                <div class="switch-row">
+                  <span class="field-label">同设备只计一次</span>
+                  <Switch v-model:checked="form.antiCheat.sameDeviceOnce" />
                 </div>
               </div>
-              <Button @click="openRewardPicker('inviterBindReward')">选择奖励组</Button>
-              <Button @click="clearRewardGroup('inviterBindReward')">清空</Button>
             </div>
           </Card>
 
-          <Card size="small" title="被邀请方注册礼包">
-            <div class="reward-row">
-              <div class="field">
-                <div class="label">金币</div>
-                <InputNumber v-model:value="form.inviteeBindReward.goldAmount" :min="0" style="width: 180px" />
-              </div>
-              <div class="field field-grow">
-                <div class="label">奖励组</div>
-                <div class="reward-group-box">
-                  <Tag v-if="form.inviteeBindReward.rewardGroupName" color="blue">
-                    {{ form.inviteeBindReward.rewardGroupName }}
-                  </Tag>
-                  <span v-else class="placeholder">未选择奖励组</span>
+          <div class="reward-card-list">
+            <Card :bordered="false" class="config-card" title="邀请方首邀奖励">
+              <div class="reward-row">
+                <div class="field amount-field">
+                  <div class="field-label">金币</div>
+                  <InputNumber
+                    v-model:value="form.inviterBindReward.goldAmount"
+                    :min="0"
+                    style="width: 100%"
+                  />
                 </div>
+                <div class="field field-grow">
+                  <div class="field-label">奖励组</div>
+                  <div class="reward-group-box">
+                    <Tag v-if="form.inviterBindReward.rewardGroupName" color="blue">
+                      {{ form.inviterBindReward.rewardGroupName }}
+                    </Tag>
+                    <span v-else class="placeholder">未选择奖励组</span>
+                  </div>
+                </div>
+                <Space class="reward-actions" wrap>
+                  <Button @click="openRewardPicker('inviterBindReward')">选择奖励组</Button>
+                  <Button @click="clearRewardGroup('inviterBindReward')">清空</Button>
+                </Space>
               </div>
-              <Button @click="openRewardPicker('inviteeBindReward')">选择奖励组</Button>
-              <Button @click="clearRewardGroup('inviteeBindReward')">清空</Button>
-            </div>
-          </Card>
+            </Card>
 
+            <Card :bordered="false" class="config-card" title="被邀请方注册礼包">
+              <div class="reward-row">
+                <div class="field amount-field">
+                  <div class="field-label">金币</div>
+                  <InputNumber
+                    v-model:value="form.inviteeBindReward.goldAmount"
+                    :min="0"
+                    style="width: 100%"
+                  />
+                </div>
+                <div class="field field-grow">
+                  <div class="field-label">奖励组</div>
+                  <div class="reward-group-box">
+                    <Tag v-if="form.inviteeBindReward.rewardGroupName" color="blue">
+                      {{ form.inviteeBindReward.rewardGroupName }}
+                    </Tag>
+                    <span v-else class="placeholder">未选择奖励组</span>
+                  </div>
+                </div>
+                <Space class="reward-actions" wrap>
+                  <Button @click="openRewardPicker('inviteeBindReward')">选择奖励组</Button>
+                  <Button @click="clearRewardGroup('inviteeBindReward')">清空</Button>
+                </Space>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        <div class="rule-section-list">
           <Card
             v-for="section in rewardSections"
             :key="section.key"
-            size="small"
+            :bordered="false"
+            class="config-card"
             :title="section.title"
           >
-            <div class="section-head">
-              <div class="section-tip">
-                阶梯可配置为金币、奖励组或两者同时发放。
-              </div>
+            <template #extra>
               <Button type="dashed" @click="addRule(section.key)">新增阶梯</Button>
-            </div>
+            </template>
 
             <div v-if="(form[section.key] || []).length === 0" class="empty-box">
               暂无配置
@@ -366,16 +453,16 @@ const rewardSections = [
               :key="`${section.key}-${index}`"
               class="rule-item"
             >
-              <div class="field">
-                <div class="label">{{ section.thresholdLabel }}</div>
-                <InputNumber v-model:value="item.threshold" :min="1" style="width: 180px" />
+              <div class="field amount-field">
+                <div class="field-label">{{ section.thresholdLabel }}</div>
+                <InputNumber v-model:value="item.threshold" :min="1" style="width: 100%" />
               </div>
-              <div class="field">
-                <div class="label">金币</div>
-                <InputNumber v-model:value="item.goldAmount" :min="0" style="width: 180px" />
+              <div class="field amount-field">
+                <div class="field-label">金币</div>
+                <InputNumber v-model:value="item.goldAmount" :min="0" style="width: 100%" />
               </div>
               <div class="field field-grow">
-                <div class="label">奖励组</div>
+                <div class="field-label">奖励组</div>
                 <div class="reward-group-box">
                   <Tag v-if="item.rewardGroupName" color="blue">
                     {{ item.rewardGroupName }}
@@ -384,17 +471,19 @@ const rewardSections = [
                 </div>
               </div>
               <div class="field switch-field">
-                <div class="label">启用</div>
+                <div class="field-label">启用</div>
                 <Switch v-model:checked="item.enabled" />
               </div>
-              <Button @click="openRewardPicker(section.key, index)">选择奖励组</Button>
-              <Button @click="clearRewardGroup(section.key, index)">清空</Button>
-              <Button danger @click="removeRule(section.key, index)">删除</Button>
+              <Space class="rule-actions" wrap>
+                <Button @click="openRewardPicker(section.key, index)">选择奖励组</Button>
+                <Button @click="clearRewardGroup(section.key, index)">清空</Button>
+                <Button danger @click="removeRule(section.key, index)">删除</Button>
+              </Space>
             </div>
           </Card>
         </div>
       </Spin>
-    </Card>
+    </div>
 
     <ActivityResourceGroupSelectDrawer
       :open="groupPickerOpen"
@@ -406,7 +495,22 @@ const rewardSections = [
 </template>
 
 <style scoped>
+.invite-config-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.overview-card,
+.config-card {
+  border-radius: 8px;
+}
+
 .toolbar {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+  justify-content: space-between;
   margin-bottom: 16px;
 }
 
@@ -416,67 +520,150 @@ const rewardSections = [
   gap: 8px;
 }
 
-.toolbar-label,
-.label {
+.field-label {
   color: #475569;
+  font-size: 13px;
   font-weight: 600;
 }
 
-.section-list {
-  display: flex;
-  flex-direction: column;
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.summary-item {
+  min-width: 0;
+  padding: 12px;
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  border-radius: 6px;
+}
+
+.summary-label {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.summary-value {
+  margin-top: 6px;
+  overflow: hidden;
+  color: #0f172a;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
+  gap: 16px;
+  align-items: start;
+  margin-top: 16px;
+}
+
+.reward-card-list,
+.rule-section-list {
+  display: grid;
   gap: 16px;
 }
 
-.grid {
+.rule-section-list {
+  margin-top: 16px;
+}
+
+.form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
 }
 
 .field {
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
+.compact-field {
+  align-items: flex-start;
+}
+
 .field-span-2 {
   grid-column: span 2;
 }
 
-.reward-row,
-.rule-item {
-  display: flex;
-  flex-wrap: wrap;
+.anti-cheat {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
-  align-items: flex-end;
+}
+
+.switch-row {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  border-radius: 6px;
+  gap: 12px;
+}
+
+.reward-row {
+  display: grid;
+  grid-template-columns: 160px minmax(220px, 1fr) auto;
+  gap: 12px;
+  align-items: end;
+}
+
+.rule-item {
+  display: grid;
+  grid-template-columns: 160px 160px minmax(240px, 1fr) 88px auto;
+  gap: 12px;
+  align-items: end;
+  padding: 12px;
+  background: #fbfdff;
+  border: 1px solid #eef2f7;
+  border-radius: 6px;
+}
+
+.rule-item + .rule-item {
+  margin-top: 12px;
+}
+
+.amount-field {
+  width: 160px;
 }
 
 .field-grow {
-  flex: 1;
-  min-width: 240px;
+  min-width: 0;
 }
 
 .switch-field {
-  min-width: 88px;
+  width: 88px;
 }
 
 .reward-group-box {
   min-height: 32px;
   display: flex;
   align-items: center;
+  min-width: 0;
+  padding: 0 11px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
 }
 
 .placeholder {
   color: #94a3b8;
 }
 
-.section-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  gap: 12px;
+.reward-actions,
+.rule-actions {
+  justify-content: flex-end;
 }
 
 .empty-box {
@@ -484,7 +671,43 @@ const rewardSections = [
   padding: 12px 0;
 }
 
-.section-tip {
-  color: #64748b;
+@media (max-width: 1280px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .rule-item {
+    grid-template-columns: 160px 160px minmax(240px, 1fr);
+  }
+
+  .switch-field,
+  .rule-actions {
+    width: auto;
+    grid-column: span 1;
+  }
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .summary-grid,
+  .form-grid,
+  .anti-cheat,
+  .reward-row,
+  .rule-item {
+    grid-template-columns: 1fr;
+  }
+
+  .field-span-2 {
+    grid-column: span 1;
+  }
+
+  .amount-field,
+  .switch-field {
+    width: 100%;
+  }
 }
 </style>