From 045a8af46f09eef810f2409a9e12a67f09f6478f Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Tue, 19 May 2026 22:23:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E9=80=89=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/src/components/sys-origin-select.vue     | 138 +--
 apps/src/views/_shared/admin-config-table.vue | 137 ++-
 .../operate/components/gift-batch-drawer.vue  |  19 +-
 .../operate/components/gift-form-modal.vue    | 444 ++++++---
 apps/src/views/operate/gift-config.vue        | 860 ++++++++++++++++--
 5 files changed, 1257 insertions(+), 341 deletions(-)

diff --git a/apps/src/components/sys-origin-select.vue b/apps/src/components/sys-origin-select.vue
index c110f0b..6f5afff 100644
--- a/apps/src/components/sys-origin-select.vue
+++ b/apps/src/components/sys-origin-select.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
-import { computed, h, useAttrs } from 'vue';
+import { computed, watch } from 'vue';
 
 import { useAccessStore } from '@vben/stores';
 
-import { Select } from 'antdv-next';
-
 import {
   SYS_ORIGIN_OPTIONS,
-  getDisplayableSysOriginOptions,
   getDisplayableSysOrigins,
-  isHiddenSysOrigin,
 } from '#/views/system/shared';
 
-import SysOriginIcon from './sys-origin-icon.vue';
-
 defineOptions({
   inheritAttrs: false,
   name: 'SysOriginSelect',
@@ -38,129 +32,43 @@ const emit = defineEmits<{
   (event: 'update:value', value: SelectValue): void;
 }>();
 
-const attrs = useAttrs();
 const accessStore = useAccessStore();
 
 const fallbackOptions = computed(() => {
   const options = getDisplayableSysOrigins(accessStore.accessCodes || []);
-  return (options.length > 0 ? options : getDisplayableSysOriginOptions(SYS_ORIGIN_OPTIONS)) as AppOriginOption[];
+  return (options.length > 0 ? options : SYS_ORIGIN_OPTIONS) as AppOriginOption[];
 });
 
-const normalizedOptions = computed(() =>
-  getDisplayableSysOriginOptions(props.options?.length ? props.options : fallbackOptions.value).map(
-    (item) => {
-      const value = String(item.value ?? '');
-      const label = String(item.label ?? ('name' in item ? item.name : '') ?? value);
-      return {
-        ...item,
-        icon: String(item.icon || value).toLowerCase(),
-        label: label || value,
-        value,
-      };
-    },
-  ),
+const rawOptions = computed(() =>
+  props.options?.length ? props.options : fallbackOptions.value,
 );
 
-const optionMap = computed(
-  () => new Map(normalizedOptions.value.map((item) => [String(item.value), item])),
+const hiddenDefaultValue = computed(() =>
+  String(rawOptions.value[0]?.value ?? SYS_ORIGIN_OPTIONS[0]?.value ?? 'LIKEI'),
 );
 
-const displayValue = computed<SelectValue>(() => {
-  if (Array.isArray(props.value)) {
-    return props.value.filter((item) => !isHiddenSysOrigin(item));
-  }
-  return isHiddenSysOrigin(props.value) ? undefined : props.value;
-});
-
-const selectAttrs = computed(() => {
-  const nextAttrs = { ...attrs } as Record<string, any>;
-  delete nextAttrs.options;
-  delete nextAttrs.value;
-  delete nextAttrs.onChange;
-  delete nextAttrs['onUpdate:value'];
-  delete nextAttrs.labelRender;
-  delete nextAttrs.optionRender;
-  delete nextAttrs.optionLabelProp;
-  delete nextAttrs.optionFilterProp;
-  return nextAttrs;
-});
-
-function renderContent(option?: Record<string, any> | null) {
-  if (!option || isHiddenSysOrigin(option.value ?? option.label ?? option.name)) {
-    return null;
-  }
-  const label = String(option.label || option.name || option.value || '-');
-  const code = String(option.icon || option.value || label);
-  return h('span', { class: 'sys-origin-select__content' }, [
-    h(SysOriginIcon, {
-      code,
-      label,
-      size: 18,
-    }),
-    h('span', { class: 'sys-origin-select__text' }, label),
-  ]);
-}
-
-function resolveOption(option?: Record<string, any> | null): null | Record<string, any> {
-  if (!option) {
-    return null;
-  }
-  const nextOption = option.option || option.data || option.originOption || option.item;
-  if (nextOption && nextOption !== option) {
-    return resolveOption(nextOption);
-  }
-  if (option.value !== undefined) {
-    return optionMap.value.get(String(option.value)) || option;
-  }
-  return option;
-}
-
-function renderOption(option: Record<string, any>) {
-  return renderContent(resolveOption(option));
-}
-
-function renderLabel(item: Record<string, any>) {
-  if (isHiddenSysOrigin(item?.value ?? item?.label)) {
-    return null;
-  }
-  return renderContent(
-    resolveOption(item) || {
-      icon: item?.value,
-      label: item?.label || item?.value || '',
-      value: item?.value || '',
-    },
-  );
-}
-
-function handleChange(value: SelectValue, option: any) {
-  emit('update:value', value);
-  emit('change', value, option);
-}
+watch(
+  () => [props.value, hiddenDefaultValue.value] as const,
+  ([value, defaultValue]) => {
+    if (Array.isArray(value) || value !== undefined && value !== null && value !== '') {
+      return;
+    }
+    if (!defaultValue) {
+      return;
+    }
+    emit('update:value', defaultValue);
+    emit('change', defaultValue, rawOptions.value[0] || null);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <Select
-    v-bind="selectAttrs"
-    :value="displayValue"
-    :options="normalizedOptions"
-    option-filter-prop="label"
-    option-label-prop="label"
-    :label-render="renderLabel"
-    :option-render="renderOption"
-    @change="handleChange"
-  />
+  <span class="sys-origin-select--hidden" aria-hidden="true" />
 </template>
 
 <style scoped>
-.sys-origin-select__content {
-  align-items: center;
-  display: inline-flex;
-  gap: 8px;
-  min-width: 0;
-}
-
-.sys-origin-select__text {
-  line-height: 1;
-  white-space: nowrap;
+.sys-origin-select--hidden {
+  display: none !important;
 }
 </style>
diff --git a/apps/src/views/_shared/admin-config-table.vue b/apps/src/views/_shared/admin-config-table.vue
index cc78c22..4ad1342 100644
--- a/apps/src/views/_shared/admin-config-table.vue
+++ b/apps/src/views/_shared/admin-config-table.vue
@@ -1,5 +1,13 @@
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+} from 'vue';
 
 import { Pagination, Table } from 'antdv-next';
 
@@ -11,32 +19,59 @@ const props = withDefaults(
     columns: Array<Record<string, any>>;
     current: number;
     dataSource: Array<Record<string, any>>;
+    hasMore?: boolean;
+    infinite?: boolean;
     loading?: boolean;
+    loadMoreText?: string;
     pageSize: number;
     plain?: boolean;
     rowKey?: string;
+    rowSelection?: Record<string, any>;
     scrollX?: number | string;
+    showPager?: boolean;
     showSizeChanger?: boolean;
+    summaryText?: string;
     total: number;
   }>(),
   {
     autoHeight: false,
+    hasMore: false,
+    infinite: false,
+    loadMoreText: '下滑加载下一页',
     loading: false,
     plain: false,
     rowKey: 'id',
     scrollX: 1000,
+    showPager: true,
     showSizeChanger: true,
   },
 );
 
 const emit = defineEmits<{
+  loadMore: [];
   pageChange: [page: number, pageSize: number];
 }>();
 
+const RenderNode = defineComponent({
+  name: 'AdminConfigTableRenderNode',
+  props: {
+    node: {
+      default: null,
+      required: false,
+    },
+  },
+  setup(props) {
+    return () => props.node as any;
+  },
+});
+
 const tableAreaRef = ref<HTMLDivElement | null>(null);
 const pagerRef = ref<HTMLDivElement | null>(null);
+const summaryRef = ref<HTMLDivElement | null>(null);
 const tableScrollY = ref(320);
 let tableResizeObserver: null | ResizeObserver = null;
+let tableBodyElement: HTMLElement | null = null;
+let loadMoreLocked = false;
 
 const tableScroll = computed(() => {
   const scroll: Record<string, any> = { x: props.scrollX };
@@ -46,6 +81,19 @@ const tableScroll = computed(() => {
   return scroll;
 });
 
+const infiniteStatusText = computed(() => {
+  if (!props.infinite) {
+    return '';
+  }
+  if (props.loading && props.dataSource.length > 0) {
+    return '加载中...';
+  }
+  if (props.hasMore) {
+    return props.loadMoreText;
+  }
+  return props.dataSource.length > 0 ? '已加载全部' : '';
+});
+
 function stringifyCellValue(value: any) {
   if (value === undefined || value === null || value === '') {
     return '-';
@@ -68,6 +116,10 @@ function getColumnValue(record: Record<string, any>, column: Record<string, any>
   return record?.[String(dataIndex)];
 }
 
+function isVNodeLike(value: any) {
+  return Boolean(value && typeof value === 'object' && value.__v_isVNode);
+}
+
 function updateTableScrollY() {
   if (!props.autoHeight) {
     return;
@@ -85,9 +137,45 @@ function updateTableScrollY() {
   );
 }
 
+function emitLoadMore() {
+  if (loadMoreLocked) {
+    return;
+  }
+  loadMoreLocked = true;
+  emit('loadMore');
+  window.setTimeout(() => {
+    loadMoreLocked = false;
+  }, 300);
+}
+
+function handleTableBodyScroll(event: Event) {
+  if (!props.infinite || props.loading || !props.hasMore) {
+    return;
+  }
+  const target = event.currentTarget as HTMLElement;
+  const distanceToBottom =
+    target.scrollHeight - target.scrollTop - target.clientHeight;
+  if (distanceToBottom <= 80) {
+    emitLoadMore();
+  }
+}
+
+function bindTableBodyScroll() {
+  const nextBody = props.infinite
+    ? (tableAreaRef.value?.querySelector('.ant-table-body') as HTMLElement | null)
+    : null;
+  if (nextBody === tableBodyElement) {
+    return;
+  }
+  tableBodyElement?.removeEventListener('scroll', handleTableBodyScroll);
+  tableBodyElement = nextBody;
+  tableBodyElement?.addEventListener('scroll', handleTableBodyScroll);
+}
+
 async function refreshTableScroll() {
   await nextTick();
   updateTableScrollY();
+  bindTableBodyScroll();
 }
 
 onMounted(async () => {
@@ -104,10 +192,18 @@ onMounted(async () => {
   if (pagerRef.value) {
     tableResizeObserver.observe(pagerRef.value);
   }
+  if (summaryRef.value) {
+    tableResizeObserver.observe(summaryRef.value);
+  }
   window.addEventListener('resize', updateTableScrollY);
 });
 
+onUpdated(() => {
+  void refreshTableScroll();
+});
+
 onBeforeUnmount(() => {
+  tableBodyElement?.removeEventListener('scroll', handleTableBodyScroll);
   tableResizeObserver?.disconnect();
   window.removeEventListener('resize', updateTableScrollY);
 });
@@ -118,6 +214,10 @@ onBeforeUnmount(() => {
     class="admin-config-table-card"
     :class="{ 'admin-config-table-card--plain': plain }"
   >
+    <div v-if="summaryText" ref="summaryRef" class="admin-config-table-summary">
+      {{ summaryText }}
+    </div>
+
     <div ref="tableAreaRef" class="admin-config-table-area">
       <Table
         class="admin-config-table"
@@ -126,22 +226,32 @@ onBeforeUnmount(() => {
         :loading="loading"
         :pagination="false"
         :row-key="rowKey"
+        :row-selection="rowSelection"
         :scroll="tableScroll"
       >
         <template #headerCell="slotProps">
-          <slot name="headerCell" v-bind="slotProps">
+          <RenderNode
+            v-if="isVNodeLike(slotProps.column?.title)"
+            :node="slotProps.column.title"
+          />
+          <slot v-else name="headerCell" v-bind="slotProps">
             {{ slotProps.column.title }}
           </slot>
         </template>
         <template #bodyCell="slotProps">
-          <slot name="bodyCell" v-bind="slotProps">
+          <RenderNode v-if="isVNodeLike(slotProps.text)" :node="slotProps.text" />
+          <slot v-else name="bodyCell" v-bind="slotProps">
             {{ stringifyCellValue(getColumnValue(slotProps.record, slotProps.column)) }}
           </slot>
         </template>
       </Table>
     </div>
 
-    <div ref="pagerRef" class="admin-config-table-pager">
+    <div v-if="infiniteStatusText" class="admin-config-table-load-status">
+      {{ infiniteStatusText }}
+    </div>
+
+    <div v-if="showPager" ref="pagerRef" class="admin-config-table-pager">
       <Pagination
         :current="current"
         :page-size="pageSize"
@@ -178,6 +288,15 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 
+.admin-config-table-summary {
+  border-bottom: 1px solid rgb(237 240 244);
+  color: rgb(71 84 103);
+  flex: 0 0 auto;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 8px 12px;
+}
+
 .admin-config-table {
   height: 100%;
   width: 100%;
@@ -258,6 +377,16 @@ onBeforeUnmount(() => {
   background: rgb(250 252 255);
 }
 
+.admin-config-table-load-status {
+  border-top: 1px solid rgb(237 240 244);
+  color: rgb(100 116 139);
+  flex: 0 0 auto;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 8px 12px;
+  text-align: center;
+}
+
 .admin-config-table-pager {
   border-top: 1px solid rgb(237 240 244);
   display: flex;
diff --git a/apps/src/views/operate/components/gift-batch-drawer.vue b/apps/src/views/operate/components/gift-batch-drawer.vue
index fe46f9e..aee960f 100644
--- a/apps/src/views/operate/components/gift-batch-drawer.vue
+++ b/apps/src/views/operate/components/gift-batch-drawer.vue
@@ -21,7 +21,10 @@ import { getAccessImgUrl, simpleUploadFile } from '#/api/legacy/oss';
 import { regionConfigTable } from '#/api/legacy/system';
 import { normalizeResourceCode } from '#/views/_shared/resource-code';
 
-import { GIFT_CONFIG_TAB_OPTIONS } from '../constants';
+import {
+  GIFT_CONFIG_TAB_OPTIONS,
+  GIFT_SPECIAL_OPTIONS,
+} from '../constants';
 
 type AssetKind = 'cover' | 'source';
 type RowStatus = 'error' | 'ready' | 'saved' | 'saving' | 'uploading';
@@ -72,9 +75,12 @@ const emit = defineEmits<{
   success: [];
 }>();
 
+const DEFAULT_GIFT_SPECIAL_LIST = ['MUSIC', 'ANIMATION'];
+
 const batchForm = reactive({
   giftTab: 'ORDINARY',
   regionList: [] as Array<number | string>,
+  specialList: [...DEFAULT_GIFT_SPECIAL_LIST],
   sysOrigin: '',
 });
 
@@ -97,6 +103,13 @@ const giftTabOptions = GIFT_CONFIG_TAB_OPTIONS.map((item) => ({
   label: item.name,
   value: item.value as any,
 }));
+const defaultSpecialText = computed(() =>
+  GIFT_SPECIAL_OPTIONS.filter((item) =>
+    DEFAULT_GIFT_SPECIAL_LIST.includes(item.value),
+  )
+    .map((item) => item.name)
+    .join(' + '),
+);
 const regionOptions = computed(() =>
   regions.value.map((item) => ({
     label: String(item.regionName || item.name || item.id || '-'),
@@ -176,6 +189,7 @@ function resetBatch() {
     String(props.initialSysOrigin || props.sysOriginOptions[0]?.value || 'LIKEI');
   batchForm.giftTab = 'ORDINARY';
   batchForm.regionList = [];
+  batchForm.specialList = [...DEFAULT_GIFT_SPECIAL_LIST];
   rows.value = [];
   selectedRowKeys.value = [];
   activeRowKey.value = '';
@@ -669,7 +683,7 @@ function buildPayload(row: BatchGiftRow) {
     giftTab: batchForm.giftTab,
     regionList: [...batchForm.regionList],
     sort: Number(row.sort || 0),
-    specialList: [],
+    specialList: [...batchForm.specialList],
     standardId: '',
     sysOrigin: batchForm.sysOrigin,
     type: 'GOLD',
@@ -759,6 +773,7 @@ async function submitBatch() {
           />
         </div>
         <div class="common-meta">收费类型：金币</div>
+        <div class="common-meta">特效：{{ defaultSpecialText }}</div>
       </div>
 
       <div class="batch-workspace">
diff --git a/apps/src/views/operate/components/gift-form-modal.vue b/apps/src/views/operate/components/gift-form-modal.vue
index 9076952..8759317 100644
--- a/apps/src/views/operate/components/gift-form-modal.vue
+++ b/apps/src/views/operate/components/gift-form-modal.vue
@@ -14,7 +14,6 @@ import {
   Space,
   Spin,
   Switch,
-  TextArea,
 } from 'antdv-next';
 
 import {
@@ -313,151 +312,157 @@ async function handleSubmit() {
     :open="open"
     :title="title"
     destroy-on-close
-    width="980"
+    root-class="gift-form-drawer-root"
+    width="1120"
+    :styles="{
+      body: { padding: '0', overflow: 'hidden' },
+      footer: { padding: '10px 16px' },
+    }"
     @close="emit('close')"
   >
-    <Spin :spinning="loading">
-      <Form layout="vertical">
-        <div class="grid">
-          <FormItem label="平台">
-            <Input :value="form.sysOrigin" disabled />
-          </FormItem>
-          <FormItem label="区域">
-            <Space direction="vertical" style="width: 100%">
-              <Button size="small" @click="toggleAllRegions">
-                {{ form.regionList.length === regions.length ? '取消全选' : '全选' }}
+    <Spin :spinning="loading" wrapper-class-name="gift-editor-spin">
+      <div class="gift-editor">
+        <aside class="media-panel">
+          <div class="media-block">
+            <div class="media-head">
+              <span>封面</span>
+              <span class="required-mark">必填</span>
+            </div>
+            <Image
+              v-if="previewCover"
+              :src="previewCover"
+              class="preview-image"
+            />
+            <div v-else class="preview-image preview-image--empty">未上传</div>
+            <div class="media-actions">
+              <Button :loading="coverUploading" size="small" @click="openCoverUpload">
+                上传封面
+              </Button>
+              <Button
+                v-if="form.giftPhoto"
+                danger
+                size="small"
+                @click="form.giftPhoto = ''"
+              >
+                清空
               </Button>
-              <Select
-                v-model:value="form.regionList"
-                :options="regionOptions"
-                mode="multiple"
-                option-label-prop="label"
-                placeholder="请选择区域"
-                show-search
-                style="width: 100%"
-              />
-            </Space>
-          </FormItem>
-        </div>
-
-        <div class="grid">
-          <FormItem label="名称">
-            <Input v-model:value="form.giftName" />
-          </FormItem>
-          <FormItem label="Code">
-            <Input v-model:value="form.giftCode" />
-          </FormItem>
-        </div>
-
-        <div class="grid">
-          <FormItem label="金币">
-            <Input v-model:value="form.giftCandy" :disabled="form.type === 'FREE'" />
-          </FormItem>
-          <FormItem label="积分">
-            <Input v-model:value="form.giftIntegral" :disabled="form.type === 'FREE'" />
-          </FormItem>
-        </div>
-
-        <div class="grid">
-          <FormItem label="礼物类型">
-            <Select
-              v-model:value="form.giftTab"
-              :options="giftTabOptions"
-              option-label-prop="label"
-              placeholder="请选择礼物类型"
-            />
-          </FormItem>
-          <FormItem label="收费类型">
-            <Select
-              v-model:value="form.type"
-              :options="chargeTypeOptions"
-              option-label-prop="label"
-              placeholder="请选择收费类型"
-            />
-          </FormItem>
-        </div>
-
-        <div class="grid">
-          <FormItem label="特效">
-            <Select
-              v-model:value="form.specialList"
-              :options="specialOptions"
-              mode="multiple"
-              option-label-prop="label"
-              placeholder="请选择特效"
-            />
-          </FormItem>
-          <FormItem label="排序">
-            <Input v-model:value="form.sort" />
-          </FormItem>
-        </div>
-
-        <div class="grid">
-          <FormItem label="封面">
-            <div class="upload-field">
-              <Image
-                v-if="previewCover"
-                :src="previewCover"
-                class="preview-image"
-              />
-              <div v-else class="preview-image preview-image--empty">未上传</div>
-              <Space>
-                <Button :loading="coverUploading" @click="openCoverUpload">上传封面</Button>
-                <Button v-if="form.giftPhoto" danger @click="form.giftPhoto = ''">清空</Button>
-              </Space>
             </div>
-          </FormItem>
-          <FormItem label="资源">
-            <div class="upload-field">
-              <div class="source-value">{{ previewSource || '未上传' }}</div>
-              <Space>
-                <Button :loading="sourceUploading" @click="openSourceUpload">上传资源</Button>
-                <Button
-                  v-if="form.giftSourceUrl"
-                  danger
-                  @click="form.giftSourceUrl = ''"
-                >
-                  清空
-                </Button>
-              </Space>
+          </div>
+
+          <div class="media-block">
+            <div class="media-head">
+              <span>资源</span>
+              <span class="optional-mark">可选</span>
             </div>
-          </FormItem>
-        </div>
+            <div class="source-value">{{ previewSource || '未上传' }}</div>
+            <div class="media-actions">
+              <Button :loading="sourceUploading" size="small" @click="openSourceUpload">
+                上传资源
+              </Button>
+              <Button
+                v-if="form.giftSourceUrl"
+                danger
+                size="small"
+                @click="form.giftSourceUrl = ''"
+              >
+                清空
+              </Button>
+            </div>
+          </div>
+        </aside>
 
-        <div class="grid">
-          <FormItem label="有效期">
-            <DatePicker
-              v-model:value="form.expiredTime"
-              style="width: 100%"
-              value-format="x"
-            />
-          </FormItem>
-          <FormItem v-if="form.giftTab === 'EXCLUSIVE'" label="归属人账号">
-            <Input v-model:value="form.account" />
-          </FormItem>
-        </div>
+        <main class="editor-panel">
+          <Form class="editor-form" layout="vertical">
+            <div class="section-title">基础信息</div>
+            <div class="form-grid">
+              <FormItem label="礼物类型">
+                <Select
+                  v-model:value="form.giftTab"
+                  :options="giftTabOptions"
+                  option-label-prop="label"
+                  placeholder="请选择礼物类型"
+                />
+              </FormItem>
+              <FormItem label="收费类型">
+                <Select
+                  v-model:value="form.type"
+                  :options="chargeTypeOptions"
+                  option-label-prop="label"
+                  placeholder="请选择收费类型"
+                />
+              </FormItem>
+              <FormItem label="排序">
+                <Input v-model:value="form.sort" />
+              </FormItem>
+              <FormItem class="span-2" label="名称">
+                <Input v-model:value="form.giftName" />
+              </FormItem>
+              <FormItem label="Code">
+                <Input v-model:value="form.giftCode" />
+              </FormItem>
+              <FormItem label="有效期">
+                <DatePicker
+                  v-model:value="form.expiredTime"
+                  style="width: 100%"
+                  value-format="x"
+                />
+              </FormItem>
+              <FormItem label="金币">
+                <Input v-model:value="form.giftCandy" :disabled="form.type === 'FREE'" />
+              </FormItem>
+              <FormItem label="积分">
+                <Input v-model:value="form.giftIntegral" :disabled="form.type === 'FREE'" />
+              </FormItem>
+            </div>
 
-        <div class="grid" v-if="isLuckyOrMagic">
-          <FormItem label="幸运规格">
-            <Select
-              v-model:value="form.standardId"
-              :options="standardSelectOptions"
-              option-label-prop="label"
-              placeholder="请选择幸运规格"
-            />
-          </FormItem>
-        </div>
-
-        <div class="grid" v-if="form.giftTab === 'CP'">
-          <FormItem label="是否告白礼物">
-            <Switch v-model:checked="form.explanationGift" />
-          </FormItem>
-        </div>
-
-        <FormItem label="备注">
-          <TextArea :value="previewSource" :rows="2" disabled />
-        </FormItem>
-      </Form>
+            <div class="section-title section-title--spaced">范围与效果</div>
+            <div class="form-grid">
+              <FormItem class="span-3" label="区域">
+                <div class="inline-field">
+                  <Select
+                    v-model:value="form.regionList"
+                    :max-tag-count="4"
+                    :options="regionOptions"
+                    class="compact-multiple-select"
+                    mode="multiple"
+                    option-label-prop="label"
+                    placeholder="请选择区域"
+                    show-search
+                  />
+                  <Button size="small" @click="toggleAllRegions">
+                    {{ form.regionList.length === regions.length ? '取消全选' : '全选' }}
+                  </Button>
+                </div>
+              </FormItem>
+              <FormItem class="span-3" label="特效">
+                <Select
+                  v-model:value="form.specialList"
+                  :max-tag-count="4"
+                  :options="specialOptions"
+                  class="compact-multiple-select"
+                  mode="multiple"
+                  option-label-prop="label"
+                  placeholder="请选择特效"
+                />
+              </FormItem>
+              <FormItem v-if="form.giftTab === 'EXCLUSIVE'" label="归属人账号">
+                <Input v-model:value="form.account" />
+              </FormItem>
+              <FormItem v-if="isLuckyOrMagic" label="幸运规格">
+                <Select
+                  v-model:value="form.standardId"
+                  :options="standardSelectOptions"
+                  option-label-prop="label"
+                  placeholder="请选择幸运规格"
+                />
+              </FormItem>
+              <FormItem v-if="form.giftTab === 'CP'" label="告白礼物">
+                <Switch v-model:checked="form.explanationGift" />
+              </FormItem>
+            </div>
+          </Form>
+        </main>
+      </div>
     </Spin>
 
     <input
@@ -476,7 +481,7 @@ async function handleSubmit() {
     />
 
     <template #footer>
-      <Space>
+      <Space class="drawer-footer-actions">
         <Button @click="emit('close')">取消</Button>
         <Button :loading="saving" type="primary" @click="handleSubmit">
           保存
@@ -487,22 +492,72 @@ async function handleSubmit() {
 </template>
 
 <style scoped>
-.grid {
+.gift-editor {
+  background: #f6f8fb;
   display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  grid-template-columns: 260px minmax(0, 1fr);
+  height: calc(100vh - 106px);
+  min-height: 0;
+  padding: 12px;
 }
 
-.upload-field {
+.media-panel,
+.editor-panel {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  min-height: 0;
+}
+
+.media-panel {
   display: grid;
-  gap: 10px;
+  align-content: start;
+  gap: 12px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.media-block {
+  display: grid;
+  gap: 8px;
+}
+
+.media-head {
+  align-items: center;
+  color: #111827;
+  display: flex;
+  font-size: 13px;
+  font-weight: 600;
+  justify-content: space-between;
+}
+
+.required-mark,
+.optional-mark {
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  padding: 0 8px;
+}
+
+.required-mark {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.optional-mark {
+  background: #f1f5f9;
+  color: #64748b;
 }
 
 .preview-image {
-  border-radius: 16px;
-  height: 120px;
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  border-radius: 8px;
+  height: 180px;
   object-fit: cover;
-  width: 120px;
+  width: 100%;
 }
 
 .preview-image--empty,
@@ -510,17 +565,104 @@ async function handleSubmit() {
   align-items: center;
   background: #f8fafc;
   border: 1px dashed #cbd5e1;
-  border-radius: 12px;
+  border-radius: 8px;
   color: #94a3b8;
   display: flex;
+  font-size: 12px;
   min-height: 72px;
-  padding: 12px;
+  padding: 10px;
   word-break: break-all;
 }
 
+.media-actions,
+.drawer-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.editor-panel {
+  overflow: auto;
+  padding: 14px 16px;
+}
+
+.editor-form :deep(.ant-form-item) {
+  margin-bottom: 10px;
+}
+
+.editor-form :deep(.ant-form-item-label) {
+  padding-bottom: 4px;
+}
+
+.editor-form :deep(.ant-form-item-label > label) {
+  color: #475569;
+  font-size: 12px;
+  height: 18px;
+}
+
+.editor-form :deep(.ant-input),
+.editor-form :deep(.ant-picker),
+.editor-form :deep(.ant-select-selector) {
+  border-radius: 6px;
+}
+
+.section-title {
+  color: #111827;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.section-title--spaced {
+  border-top: 1px solid #eef2f7;
+  margin-top: 4px;
+  padding-top: 12px;
+}
+
+.form-grid {
+  display: grid;
+  column-gap: 12px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.span-2 {
+  grid-column: span 2;
+}
+
+.span-3 {
+  grid-column: 1 / -1;
+}
+
+.inline-field {
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.compact-multiple-select :deep(.ant-select-selection-overflow) {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.compact-multiple-select :deep(.ant-select-selection-item) {
+  max-width: 140px;
+}
+
 @media (max-width: 900px) {
-  .grid {
+  .gift-editor {
     grid-template-columns: minmax(0, 1fr);
+    height: auto;
+    overflow: auto;
+  }
+
+  .form-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .span-2,
+  .span-3 {
+    grid-column: auto;
   }
 }
 </style>
diff --git a/apps/src/views/operate/gift-config.vue b/apps/src/views/operate/gift-config.vue
index 4f8d53b..dd6d6e1 100644
--- a/apps/src/views/operate/gift-config.vue
+++ b/apps/src/views/operate/gift-config.vue
@@ -2,17 +2,24 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
+import {
+  RotateCw,
+  Search as SearchIcon,
+} from '@vben/icons';
 import { useAccessStore } from '@vben/stores';
 
 import {
   Button,
   Card,
+  Checkbox,
   DatePicker,
   Image,
   Input,
+  InputNumber,
   message,
   Modal,
   Pagination,
+  Popover,
   Select,
   Space,
   Switch,
@@ -20,6 +27,7 @@ import {
   TabPane,
   Tabs,
   Tag,
+  Tooltip,
 } from 'antdv-next';
 
 import {
@@ -29,6 +37,7 @@ import {
   listGiftBySysOrigin,
   pushPairCpGiveGiftId,
   switchDelStatus,
+  updateGift,
   updateGiftSort,
 } from '#/api/legacy/gift';
 import { getAccessImgUrl } from '#/api/legacy/oss';
@@ -38,27 +47,33 @@ import {
   getWeekStarGroupPage,
   regionConfigTable,
 } from '#/api/legacy/system';
-import AccountInput from '#/components/account-input.vue';
 import AdminConfigTable from '#/views/_shared/admin-config-table.vue';
 import { formatDate, getAllowedSysOrigins } from '#/views/system/shared';
 
 import GiftBatchDrawer from './components/gift-batch-drawer.vue';
 import GiftFormModal from './components/gift-form-modal.vue';
-import { GIFT_CONFIG_TAB_OPTIONS } from './constants';
+import {
+  GIFT_CONFIG_TAB_OPTIONS,
+  GIFT_SPECIAL_OPTIONS,
+} from './constants';
 
 defineOptions({ name: 'OperateGiftConfig' });
 
-const SORT_OPTIONS = [
-  { label: '创建时间降序', value: 'CREATE_TIME_DESC' },
-  { label: '金额降序', value: 'AMOUNT_DESC' },
-  { label: '权重降序', value: 'SORT_DESC' },
-];
-
 const SHELF_OPTIONS = [
   { label: '下架', value: true },
   { label: '上架', value: false },
 ];
 
+const GIFT_CHARGE_TYPE_OPTIONS = [
+  { label: '金币', value: 'GOLD' },
+  { label: '钻石', value: 'DIAMOND' },
+  { disabled: true, label: '免费', value: 'FREE' },
+];
+
+const GIFT_TAB_LABEL_MAP = new Map(
+  GIFT_CONFIG_TAB_OPTIONS.map((item) => [String(item.value), item.name]),
+);
+
 const accessStore = useAccessStore();
 const sysOriginOptions = computed(() => {
   const options = getAllowedSysOrigins(accessStore.accessCodes || []);
@@ -76,6 +91,7 @@ const editingGiftSortId = ref('');
 const editingGiftSortValue = ref('');
 const savingGiftSortId = ref('');
 const giftSortInputRefs = new Map<string, any>();
+const settingFilterOpen = reactive<Record<string, boolean>>({});
 const settingQuery = reactive({
   cursor: 1,
   del: false as boolean | undefined,
@@ -95,6 +111,28 @@ const settingQuery = reactive({
 const giftFormOpen = ref(false);
 const giftBatchOpen = ref(false);
 const activeGiftRow = ref<null | Record<string, any>>(null);
+const selectedGiftRowKeys = ref<Array<number | string>>([]);
+const selectedGiftRowMap = ref<Record<string, Record<string, any>>>({});
+const batchEditOpen = ref(false);
+const batchEditSaving = ref(false);
+const batchEditFields = reactive({
+  del: false,
+  giftCandy: false,
+  giftIntegral: false,
+  giftTab: false,
+  specialList: false,
+  sort: false,
+  type: false,
+});
+const batchEditForm = reactive({
+  del: false as boolean,
+  giftCandy: null as null | number,
+  giftIntegral: null as null | number,
+  giftTab: 'ORDINARY',
+  specialList: [] as string[],
+  sort: null as null | number,
+  type: 'GOLD',
+});
 const addRegionOpen = ref(false);
 const addRegionSaving = ref(false);
 const addRegionForm = reactive({
@@ -143,7 +181,8 @@ const settingColumns = [
   { dataIndex: 'giftCandy', key: 'giftCandy', title: '金币', width: 100 },
   { dataIndex: 'giftIntegral', key: 'giftIntegral', title: '积分', width: 100 },
   { dataIndex: 'regionNameStr', key: 'regionNameStr', title: '区域', width: 180 },
-  { dataIndex: 'typeName', key: 'typeName', title: '类型', width: 120 },
+  { dataIndex: 'giftTab', key: 'giftTab', title: '礼物类型', width: 120 },
+  { dataIndex: 'typeName', key: 'typeName', title: '收费类型', width: 120 },
   { dataIndex: 'sort', key: 'sort', title: '排序权重', width: 100 },
   { align: 'center' as const, className: 'switch-column', dataIndex: 'del', fixed: 'right' as const, key: 'del', title: '上/下架', width: 84 },
   { dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
@@ -151,12 +190,72 @@ const settingColumns = [
   { align: 'center' as const, className: 'action-column', dataIndex: 'actions', fixed: 'right' as const, key: 'actions', title: '操作', width: 84 },
 ];
 
+const settingFilterableColumnKeys = new Set([
+  'createTime',
+  'del',
+  'giftCandy',
+  'giftName',
+  'giftTab',
+  'regionNameStr',
+  'sort',
+  'typeName',
+]);
+
 const regionOptions = computed(() =>
   regions.value.map((item) => ({
     label: String(item.regionName || item.name || item.id || '-'),
     value: item.id as any,
   })),
 );
+const giftTabOptions = GIFT_CONFIG_TAB_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value as any,
+}));
+const giftChargeTypeOptions = GIFT_CHARGE_TYPE_OPTIONS.map((item) => ({
+  label: item.label,
+  value: item.value as any,
+}));
+const giftSpecialOptions = GIFT_SPECIAL_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value as any,
+}));
+
+const settingPageCount = computed(() =>
+  Math.max(1, Math.ceil(settingTotal.value / settingQuery.limit)),
+);
+const settingHasMore = computed(() => settingList.value.length < settingTotal.value);
+const settingSummaryText = computed(
+  () =>
+    `共 ${settingTotal.value} 条 / ${settingPageCount.value} 页，已加载 ${settingList.value.length} 条`,
+);
+const selectedGiftCount = computed(() => selectedGiftRowKeys.value.length);
+const selectedGiftRows = computed(() =>
+  selectedGiftRowKeys.value
+    .map((key) => selectedGiftRowMap.value[String(key)])
+    .filter(Boolean),
+);
+const settingRowSelection = computed(() => ({
+  preserveSelectedRowKeys: true,
+  selectedRowKeys: selectedGiftRowKeys.value,
+  onChange: (keys: Array<number | string>, rows: Array<Record<string, any>>) => {
+    const previousMap = selectedGiftRowMap.value;
+    const nextMap: Record<string, Record<string, any>> = {};
+    keys.forEach((key) => {
+      const stringKey = String(key);
+      if (previousMap[stringKey]) {
+        nextMap[stringKey] = previousMap[stringKey];
+      }
+    });
+    rows.forEach((row) => {
+      const stringKey = String(row.id || '');
+      if (stringKey) {
+        nextMap[stringKey] = row;
+      }
+    });
+    selectedGiftRowKeys.value = keys;
+    selectedGiftRowMap.value = nextMap;
+  },
+}));
 
 const weekStarColumns = [
   { dataIndex: 'id', key: 'id', title: '编号', width: 120 },
@@ -197,17 +296,35 @@ async function loadRegions(sysOrigin: string) {
   regions.value = (await regionConfigTable({ sysOrigin })) || [];
 }
 
-async function loadSetting(reset = false) {
+function clearGiftSelection() {
+  selectedGiftRowKeys.value = [];
+  selectedGiftRowMap.value = {};
+}
+
+async function loadSetting(reset = false, append = false) {
   if (!settingQuery.sysOrigin) {
     return;
   }
   if (reset) {
     settingQuery.cursor = 1;
+    clearGiftSelection();
   }
   settingLoading.value = true;
   try {
     const result = await giftTable({ ...settingQuery });
-    settingList.value = result.records || [];
+    const records = result.records || [];
+    if (append) {
+      const recordMap = new Map<string, Record<string, any>>();
+      settingList.value.forEach((item) => {
+        recordMap.set(String(item.id || ''), item);
+      });
+      records.forEach((item: Record<string, any>) => {
+        recordMap.set(String(item.id || ''), item);
+      });
+      settingList.value = [...recordMap.values()];
+    } else {
+      settingList.value = records;
+    }
     settingTotal.value = result.total || 0;
   } finally {
     settingLoading.value = false;
@@ -243,10 +360,16 @@ async function loadCp() {
   }
 }
 
-function handleSettingPageChange(page: number, pageSize: number) {
-  settingQuery.cursor = page;
-  settingQuery.limit = pageSize;
-  void loadSetting();
+async function loadNextSettingPage() {
+  if (settingLoading.value || !settingHasMore.value) {
+    return;
+  }
+  const nextPage = settingQuery.cursor + 1;
+  if (nextPage > settingPageCount.value) {
+    return;
+  }
+  settingQuery.cursor = nextPage;
+  await loadSetting(false, true);
 }
 
 function handleWeekStarPageChange(page: number, pageSize: number) {
@@ -258,7 +381,7 @@ function handleWeekStarPageChange(page: number, pageSize: number) {
 async function handleSwitch(record: Record<string, any>) {
   await switchDelStatus(record.id, record.del);
   message.success('操作成功');
-  await loadSetting(false);
+  await loadSetting(true);
 }
 
 function setGiftSortInputRef(id: number | string, element: any) {
@@ -351,6 +474,284 @@ function getColumnValue(record: Record<string, any>, column: Record<string, any>
   return record?.[String(dataIndex)];
 }
 
+function isSettingFilterableColumn(key: unknown) {
+  return settingFilterableColumnKeys.has(String(key));
+}
+
+function setSettingFilterOpen(key: unknown, open: boolean) {
+  settingFilterOpen[String(key)] = open;
+}
+
+function hasSettingColumnFilter(key: unknown) {
+  switch (String(key)) {
+    case 'createTime': {
+      return Boolean(settingQuery.startCreateDate || settingQuery.endCreateDate);
+    }
+    case 'del': {
+      return settingQuery.del !== undefined;
+    }
+    case 'giftCandy': {
+      return settingQuery.sortType === 'AMOUNT_DESC';
+    }
+    case 'giftName': {
+      return settingQuery.giftName.trim() !== '';
+    }
+    case 'giftTab': {
+      return Boolean(settingQuery.giftTab);
+    }
+    case 'regionNameStr': {
+      return Boolean(settingQuery.region);
+    }
+    case 'sort': {
+      return settingQuery.sortType === 'SORT_DESC';
+    }
+    case 'typeName': {
+      return Boolean(settingQuery.type);
+    }
+    default: {
+      return false;
+    }
+  }
+}
+
+function resetSettingColumnFilter(key: unknown) {
+  switch (String(key)) {
+    case 'createTime': {
+      settingRangeDate.value = null;
+      settingQuery.startCreateDate = '';
+      settingQuery.endCreateDate = '';
+      break;
+    }
+    case 'del': {
+      settingQuery.del = undefined;
+      break;
+    }
+    case 'giftCandy': {
+      settingQuery.sortType = 'CREATE_TIME_DESC';
+      break;
+    }
+    case 'giftName': {
+      settingQuery.giftName = '';
+      break;
+    }
+    case 'giftTab': {
+      settingQuery.giftTab = '';
+      break;
+    }
+    case 'regionNameStr': {
+      settingQuery.region = '';
+      break;
+    }
+    case 'sort': {
+      settingQuery.sortType = 'CREATE_TIME_DESC';
+      break;
+    }
+    case 'typeName': {
+      settingQuery.type = '';
+      break;
+    }
+  }
+}
+
+function applySettingColumnFilter(key: unknown) {
+  settingFilterOpen[String(key)] = false;
+  void loadSetting(true);
+}
+
+function clearSettingColumnFilter(key: unknown) {
+  resetSettingColumnFilter(key);
+  applySettingColumnFilter(key);
+}
+
+function resetAllSettingColumnFilters() {
+  settingQuery.del = undefined;
+  settingQuery.endCreateDate = '';
+  settingQuery.giftId = '';
+  settingQuery.giftName = '';
+  settingQuery.giftTab = '';
+  settingQuery.region = '';
+  settingQuery.sortType = 'CREATE_TIME_DESC';
+  settingQuery.startCreateDate = '';
+  settingQuery.type = '';
+  settingQuery.userId = '';
+  settingRangeDate.value = null;
+  void loadSetting(true);
+}
+
+function applySettingSort(sortType: string, key: unknown) {
+  settingQuery.sortType = sortType;
+  applySettingColumnFilter(key);
+}
+
+function getGiftTabName(value: any) {
+  const stringValue = String(value || '');
+  return GIFT_TAB_LABEL_MAP.get(stringValue) || stringifyCellValue(value);
+}
+
+function normalizeMultiValue(value: any) {
+  if (Array.isArray(value)) {
+    return value.filter((item) => item !== '' && item !== null && item !== undefined);
+  }
+  if (value === '' || value === null || value === undefined) {
+    return [];
+  }
+  return String(value)
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function resetBatchEditForm() {
+  Object.assign(batchEditFields, {
+    del: false,
+    giftCandy: false,
+    giftIntegral: false,
+    giftTab: false,
+    specialList: false,
+    sort: false,
+    type: false,
+  });
+  Object.assign(batchEditForm, {
+    del: false,
+    giftCandy: null,
+    giftIntegral: null,
+    giftTab: 'ORDINARY',
+    specialList: [],
+    sort: null,
+    type: 'GOLD',
+  });
+}
+
+function openBatchEditModal() {
+  if (selectedGiftCount.value <= 0) {
+    message.warning('请先选择礼物');
+    return;
+  }
+  resetBatchEditForm();
+  batchEditOpen.value = true;
+}
+
+function hasBatchEditField() {
+  return Object.values(batchEditFields).some(Boolean);
+}
+
+function validateBatchEditForm() {
+  if (!hasBatchEditField()) {
+    message.warning('请选择要修改的字段');
+    return false;
+  }
+  if (batchEditFields.giftTab && !batchEditForm.giftTab) {
+    message.warning('请选择礼物类型');
+    return false;
+  }
+  if (batchEditFields.type && !batchEditForm.type) {
+    message.warning('请选择收费类型');
+    return false;
+  }
+  if (batchEditFields.specialList && batchEditForm.specialList.length === 0) {
+    message.warning('请选择特效');
+    return false;
+  }
+  if (
+    batchEditFields.giftCandy &&
+    (batchEditForm.giftCandy === null || batchEditForm.giftCandy < 0)
+  ) {
+    message.warning('请输入正确的金币');
+    return false;
+  }
+  if (
+    batchEditFields.giftIntegral &&
+    (batchEditForm.giftIntegral === null || batchEditForm.giftIntegral < 0)
+  ) {
+    message.warning('请输入正确的积分');
+    return false;
+  }
+  if (
+    batchEditFields.sort &&
+    (batchEditForm.sort === null || !Number.isInteger(Number(batchEditForm.sort)))
+  ) {
+    message.warning('排序必须是整数');
+    return false;
+  }
+  return true;
+}
+
+function buildGiftBatchEditPayload(row: Record<string, any>) {
+  const nextType = batchEditFields.type ? batchEditForm.type : row.type;
+  return {
+    ...row,
+    giftCandy:
+      nextType === 'FREE'
+        ? ''
+        : batchEditFields.giftCandy
+          ? batchEditForm.giftCandy
+          : row.giftCandy,
+    giftIntegral:
+      nextType === 'FREE'
+        ? ''
+        : batchEditFields.giftIntegral
+          ? batchEditForm.giftIntegral
+          : row.giftIntegral,
+    giftTab: batchEditFields.giftTab ? batchEditForm.giftTab : row.giftTab,
+    regionList: normalizeMultiValue(row.regions || row.regionList),
+    sort: batchEditFields.sort ? batchEditForm.sort : row.sort,
+    specialList: batchEditFields.specialList
+      ? [...batchEditForm.specialList]
+      : normalizeMultiValue(row.special || row.specialList),
+    type: nextType,
+  };
+}
+
+async function handleBatchEditSubmit() {
+  if (!validateBatchEditForm()) {
+    return;
+  }
+  const rows = selectedGiftRows.value as Array<Record<string, any>>;
+  if (rows.length === 0) {
+    message.warning('请先选择礼物');
+    return;
+  }
+  const shouldUpdateConfig =
+    batchEditFields.giftTab ||
+    batchEditFields.type ||
+    batchEditFields.giftCandy ||
+    batchEditFields.giftIntegral ||
+    batchEditFields.specialList ||
+    batchEditFields.sort;
+  batchEditSaving.value = true;
+  let successCount = 0;
+  let failedCount = 0;
+  try {
+    for (const row of rows) {
+      try {
+        if (shouldUpdateConfig) {
+          await updateGift(buildGiftBatchEditPayload(row));
+        }
+        if (
+          batchEditFields.del &&
+          String(row.del) !== String(batchEditForm.del)
+        ) {
+          await switchDelStatus(row.id, batchEditForm.del);
+        }
+        successCount += 1;
+      } catch (error) {
+        console.error(error);
+        failedCount += 1;
+      }
+    }
+    if (failedCount > 0) {
+      message.error(`已修改 ${successCount} 个，${failedCount} 个失败`);
+      return;
+    }
+    message.success(`已修改 ${successCount} 个礼物`);
+    batchEditOpen.value = false;
+    clearGiftSelection();
+    await loadSetting(true);
+  } finally {
+    batchEditSaving.value = false;
+  }
+}
+
 function openGiftCreate() {
   activeGiftRow.value = null;
   giftFormOpen.value = true;
@@ -456,15 +857,15 @@ async function handleCpSave() {
 </script>
 
 <template>
-  <Page title="礼物管理">
-    <Card>
+  <Page auto-content-height content-class="gift-page-content" title="礼物管理">
+    <Card class="gift-page-card">
       <Tabs v-model:active-key="activeTab">
         <TabPane key="setting" tab="礼物配置" />
         <TabPane key="weekStar" tab="周星礼物配置" />
         <TabPane key="cp" tab="CP组合赠送礼物" />
       </Tabs>
 
-      <div v-if="activeTab === 'setting'">
+      <div v-if="activeTab === 'setting'" class="gift-setting-panel">
         <Space class="toolbar" wrap>
           <SysOriginSelect
             v-model:value="settingQuery.sysOrigin"
@@ -472,76 +873,177 @@ async function handleCpSave() {
             @change="loadRegions(settingQuery.sysOrigin); loadSetting(true)"
             :options="sysOriginOptions"
           />
-          <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
-            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)"
-          />
-          <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"
-            placeholder="礼物ID"
-            style="width: 160px"
-          />
-          <Input
-            v-model:value="settingQuery.giftName"
-            placeholder="礼物名称"
-            style="width: 180px"
-          />
-          <AccountInput
-            v-model:value="settingQuery.userId"
-            :sys-origin="settingQuery.sysOrigin"
-            placeholder="专属礼物归属人"
-            style="width: 240px"
-          />
-          <DatePicker.RangePicker
-            v-model:value="settingRangeDate"
-            show-time
-            style="width: 360px"
-            value-format="x"
-          />
-          <Button :loading="settingLoading" type="primary" @click="loadSetting(true)">
-            搜索
-          </Button>
           <Button type="primary" @click="openGiftCreate">
             新增礼物
           </Button>
           <Button type="primary" @click="giftBatchOpen = true">
             批量导入
           </Button>
+          <Button :disabled="selectedGiftCount === 0" @click="openBatchEditModal">
+            批量修改{{ selectedGiftCount > 0 ? `(${selectedGiftCount})` : '' }}
+          </Button>
           <Button danger @click="openAddRegionModal">
             添加全部礼物区域
           </Button>
         </Space>
 
         <AdminConfigTable
+          auto-height
+          class="gift-setting-table"
           :columns="settingColumns"
           :data-source="settingList"
+          :has-more="settingHasMore"
+          infinite
           :loading="settingLoading"
           :current="settingQuery.cursor"
           :page-size="settingQuery.limit"
           plain
           row-key="id"
-          :scroll-x="1560"
+          :row-selection="settingRowSelection"
+          :scroll-x="1680"
+          :show-pager="false"
+          :summary-text="settingSummaryText"
           :total="settingTotal"
-          @page-change="handleSettingPageChange"
+          @load-more="loadNextSettingPage"
         >
+          <template #headerCell="{ column }">
+            <template v-if="column.key === 'actions'">
+              <div class="column-title column-title--actions">
+                <span>{{ column.title }}</span>
+                <Tooltip title="重置筛选">
+                  <Button
+                    class="filter-reset-button"
+                    size="small"
+                    type="text"
+                    @click="resetAllSettingColumnFilters"
+                  >
+                    <RotateCw class="filter-icon-svg" />
+                  </Button>
+                </Tooltip>
+              </div>
+            </template>
+            <template v-else-if="isSettingFilterableColumn(column.key)">
+              <div class="column-title">
+                <Popover
+                  :open="Boolean(settingFilterOpen[String(column.key)])"
+                  overlay-class-name="gift-filter-popover"
+                  placement="bottomLeft"
+                  trigger="click"
+                  @open-change="(open: boolean) => setSettingFilterOpen(column.key, open)"
+                >
+                  <template #content>
+                    <div class="column-filter-panel">
+                      <template v-if="column.key === 'giftName'">
+                        <Input
+                          v-model:value="settingQuery.giftName"
+                          allow-clear
+                          autofocus
+                          placeholder="输入礼物名称"
+                          @press-enter="applySettingColumnFilter(column.key)"
+                        />
+                      </template>
+                      <template v-else-if="column.key === 'giftTab'">
+                        <Select
+                          v-model:value="settingQuery.giftTab"
+                          allow-clear
+                          :options="giftTabOptions"
+                          option-label-prop="label"
+                          placeholder="选择礼物类型"
+                        />
+                      </template>
+                      <template v-else-if="column.key === 'typeName'">
+                        <Select
+                          v-model:value="settingQuery.type"
+                          allow-clear
+                          :options="giftChargeTypeOptions"
+                          option-label-prop="label"
+                          placeholder="选择收费类型"
+                        />
+                      </template>
+                      <template v-else-if="column.key === 'del'">
+                        <Select
+                          v-model:value="settingQuery.del"
+                          allow-clear
+                          :options="SHELF_OPTIONS.map((item) => ({ label: `${item.label}`, value: item.value as any }))"
+                          option-label-prop="label"
+                          placeholder="选择上/下架"
+                        />
+                      </template>
+                      <template v-else-if="column.key === 'regionNameStr'">
+                        <Select
+                          v-model:value="settingQuery.region"
+                          allow-clear
+                          :options="regionOptions"
+                          option-label-prop="label"
+                          placeholder="选择区域"
+                          show-search
+                        />
+                      </template>
+                      <template v-else-if="column.key === 'createTime'">
+                        <DatePicker.RangePicker
+                          v-model:value="settingRangeDate"
+                          show-time
+                          style="width: 100%"
+                          value-format="x"
+                        />
+                        <Button
+                          block
+                          size="small"
+                          @click="applySettingSort('CREATE_TIME_DESC', column.key)"
+                        >
+                          创建时间降序
+                        </Button>
+                      </template>
+                      <template v-else-if="column.key === 'giftCandy'">
+                        <Button
+                          block
+                          size="small"
+                          @click="applySettingSort('AMOUNT_DESC', column.key)"
+                        >
+                          金额降序
+                        </Button>
+                      </template>
+                      <template v-else-if="column.key === 'sort'">
+                        <Button
+                          block
+                          size="small"
+                          @click="applySettingSort('SORT_DESC', column.key)"
+                        >
+                          权重降序
+                        </Button>
+                      </template>
+                      <div class="column-filter-actions">
+                        <Button size="small" @click="clearSettingColumnFilter(column.key)">
+                          清空
+                        </Button>
+                        <Button
+                          :loading="settingLoading"
+                          size="small"
+                          type="primary"
+                          @click="applySettingColumnFilter(column.key)"
+                        >
+                          查询
+                        </Button>
+                      </div>
+                    </div>
+                  </template>
+                  <Button
+                    class="column-filter-button"
+                    :class="{ 'column-filter-button--active': hasSettingColumnFilter(column.key) }"
+                    size="small"
+                    type="text"
+                    @click.stop
+                  >
+                    <SearchIcon class="filter-icon-svg" />
+                  </Button>
+                </Popover>
+                <span>{{ column.title }}</span>
+              </div>
+            </template>
+            <template v-else>
+              {{ column.title }}
+            </template>
+          </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'giftPhoto'">
               <div class="week-star-gift">
@@ -557,6 +1059,16 @@ async function handleCpSave() {
             <template v-else-if="column.key === 'createTime'">
               {{ formatDate(record.createTime) }}
             </template>
+            <template v-else-if="column.key === 'giftTab'">
+              {{ getGiftTabName(record.giftTab) }}
+            </template>
+            <template v-else-if="column.key === 'regionNameStr'">
+              <Tooltip :title="stringifyCellValue(record.regionNameStr)">
+                <span class="region-cell">
+                  {{ stringifyCellValue(record.regionNameStr) }}
+                </span>
+              </Tooltip>
+            </template>
             <template v-else-if="column.key === 'userBaseInfo'">
               {{ record.userBaseInfo?.actualAccount || record.userBaseInfo?.id || '-' }}
             </template>
@@ -700,6 +1212,85 @@ async function handleCpSave() {
       @success="loadSetting(true)"
     />
 
+    <Modal
+      :confirm-loading="batchEditSaving"
+      :open="batchEditOpen"
+      destroy-on-close
+      title="批量修改礼物"
+      @cancel="batchEditOpen = false"
+      @ok="handleBatchEditSubmit"
+    >
+      <div class="batch-edit-summary">
+        已选择 {{ selectedGiftCount }} 个礼物，只会修改勾选字段。
+      </div>
+      <div class="batch-edit-grid">
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.giftTab">礼物类型</Checkbox>
+          <Select
+            v-model:value="batchEditForm.giftTab"
+            :disabled="!batchEditFields.giftTab"
+            :options="GIFT_CONFIG_TAB_OPTIONS.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
+            option-label-prop="label"
+          />
+        </div>
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.type">收费类型</Checkbox>
+          <Select
+            v-model:value="batchEditForm.type"
+            :disabled="!batchEditFields.type"
+            :options="GIFT_CHARGE_TYPE_OPTIONS"
+            option-label-prop="label"
+          />
+        </div>
+        <div class="batch-edit-field batch-edit-field--wide">
+          <Checkbox v-model:checked="batchEditFields.specialList">特效</Checkbox>
+          <Select
+            v-model:value="batchEditForm.specialList"
+            :disabled="!batchEditFields.specialList"
+            :options="giftSpecialOptions"
+            mode="multiple"
+            option-label-prop="label"
+            placeholder="请选择特效"
+          />
+        </div>
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.giftCandy">金币</Checkbox>
+          <InputNumber
+            v-model:value="batchEditForm.giftCandy"
+            :disabled="!batchEditFields.giftCandy"
+            :min="0"
+            style="width: 100%"
+          />
+        </div>
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.giftIntegral">积分</Checkbox>
+          <InputNumber
+            v-model:value="batchEditForm.giftIntegral"
+            :disabled="!batchEditFields.giftIntegral"
+            :min="0"
+            style="width: 100%"
+          />
+        </div>
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.sort">排序权重</Checkbox>
+          <InputNumber
+            v-model:value="batchEditForm.sort"
+            :disabled="!batchEditFields.sort"
+            style="width: 100%"
+          />
+        </div>
+        <div class="batch-edit-field">
+          <Checkbox v-model:checked="batchEditFields.del">上/下架</Checkbox>
+          <Select
+            v-model:value="batchEditForm.del"
+            :disabled="!batchEditFields.del"
+            :options="SHELF_OPTIONS.map((item) => ({ label: `${item.label}`, value: item.value as any }))"
+            option-label-prop="label"
+          />
+        </div>
+      </div>
+    </Modal>
+
     <Modal
       :confirm-loading="addRegionSaving"
       :open="addRegionOpen"
@@ -762,7 +1353,108 @@ async function handleCpSave() {
 
 <style scoped>
 .toolbar {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+}
+
+.gift-page-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  height: 100%;
+}
+
+.gift-page-card :deep(.ant-card-body) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 16px;
+}
+
+.gift-page-card :deep(.ant-tabs-nav) {
+  margin: 0 0 8px;
+}
+
+.gift-setting-panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.gift-setting-table {
+  flex: 1 1 auto;
+  min-height: 360px;
+}
+
+.region-cell {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-title {
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.column-title--actions {
+  justify-content: center;
+  width: 100%;
+}
+
+.column-filter-button,
+.filter-reset-button {
+  align-items: center;
+  color: rgb(102 112 133);
+  display: inline-flex;
+  height: 22px;
+  justify-content: center;
+  padding: 0;
+  width: 22px;
+}
+
+.column-filter-button:hover,
+.filter-reset-button:hover {
+  background: rgb(242 244 247);
+  color: rgb(23 92 211);
+}
+
+.column-filter-button--active {
+  background: rgb(230 240 255);
+  color: rgb(22 119 255);
+}
+
+.filter-icon-svg {
+  height: 14px;
+  width: 14px;
+}
+
+.column-filter-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 220px;
+}
+
+.column-filter-panel :deep(.ant-input),
+.column-filter-panel :deep(.ant-input-number),
+.column-filter-panel :deep(.ant-select) {
+  width: 100%;
+}
+
+.column-filter-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+:global(.gift-filter-popover .ant-popover-inner-content) {
+  padding: 12px;
 }
 
 .pager {
@@ -817,4 +1509,34 @@ async function handleCpSave() {
   color: #dc2626;
   line-height: 22px;
 }
+
+.batch-edit-summary {
+  color: #475569;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.batch-edit-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.batch-edit-field {
+  display: grid;
+  gap: 6px;
+}
+
+.batch-edit-field--wide {
+  grid-column: 1 / -1;
+}
+
+:global(.gift-page-content) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden !important;
+  padding: 16px !important;
+}
 </style>