diff --git a/apps/src/views/_shared/admin-config-table.vue b/apps/src/views/_shared/admin-config-table.vue
new file mode 100644
index 0000000..cc78c22
--- /dev/null
+++ b/apps/src/views/_shared/admin-config-table.vue
@@ -0,0 +1,268 @@
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { Pagination, Table } from 'antdv-next';
+
+defineOptions({ name: 'AdminConfigTable' });
+
+const props = withDefaults(
+  defineProps<{
+    autoHeight?: boolean;
+    columns: Array<Record<string, any>>;
+    current: number;
+    dataSource: Array<Record<string, any>>;
+    loading?: boolean;
+    pageSize: number;
+    plain?: boolean;
+    rowKey?: string;
+    scrollX?: number | string;
+    showSizeChanger?: boolean;
+    total: number;
+  }>(),
+  {
+    autoHeight: false,
+    loading: false,
+    plain: false,
+    rowKey: 'id',
+    scrollX: 1000,
+    showSizeChanger: true,
+  },
+);
+
+const emit = defineEmits<{
+  pageChange: [page: number, pageSize: number];
+}>();
+
+const tableAreaRef = ref<HTMLDivElement | null>(null);
+const pagerRef = ref<HTMLDivElement | null>(null);
+const tableScrollY = ref(320);
+let tableResizeObserver: null | ResizeObserver = null;
+
+const tableScroll = computed(() => {
+  const scroll: Record<string, any> = { x: props.scrollX };
+  if (props.autoHeight) {
+    scroll.y = tableScrollY.value;
+  }
+  return scroll;
+});
+
+function stringifyCellValue(value: any) {
+  if (value === undefined || value === null || value === '') {
+    return '-';
+  }
+  return String(value);
+}
+
+function getColumnValue(record: Record<string, any>, column: Record<string, any>) {
+  const dataIndex = column?.dataIndex;
+  if (Array.isArray(dataIndex)) {
+    let value = record;
+    for (const key of dataIndex) {
+      value = value?.[String(key)];
+    }
+    return value;
+  }
+  if (dataIndex === undefined || dataIndex === null) {
+    return undefined;
+  }
+  return record?.[String(dataIndex)];
+}
+
+function updateTableScrollY() {
+  if (!props.autoHeight) {
+    return;
+  }
+  const area = tableAreaRef.value;
+  if (!area) {
+    return;
+  }
+  const headerHeight =
+    area.querySelector('.ant-table-thead')?.getBoundingClientRect().height || 48;
+  const scrollbarReserve = 8;
+  tableScrollY.value = Math.max(
+    160,
+    Math.floor(area.clientHeight - headerHeight - scrollbarReserve),
+  );
+}
+
+async function refreshTableScroll() {
+  await nextTick();
+  updateTableScrollY();
+}
+
+onMounted(async () => {
+  await refreshTableScroll();
+  if (!props.autoHeight || typeof ResizeObserver === 'undefined') {
+    return;
+  }
+  tableResizeObserver = new ResizeObserver(() => {
+    void refreshTableScroll();
+  });
+  if (tableAreaRef.value) {
+    tableResizeObserver.observe(tableAreaRef.value);
+  }
+  if (pagerRef.value) {
+    tableResizeObserver.observe(pagerRef.value);
+  }
+  window.addEventListener('resize', updateTableScrollY);
+});
+
+onBeforeUnmount(() => {
+  tableResizeObserver?.disconnect();
+  window.removeEventListener('resize', updateTableScrollY);
+});
+</script>
+
+<template>
+  <div
+    class="admin-config-table-card"
+    :class="{ 'admin-config-table-card--plain': plain }"
+  >
+    <div ref="tableAreaRef" class="admin-config-table-area">
+      <Table
+        class="admin-config-table"
+        :columns="columns"
+        :data-source="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :row-key="rowKey"
+        :scroll="tableScroll"
+      >
+        <template #headerCell="slotProps">
+          <slot name="headerCell" v-bind="slotProps">
+            {{ slotProps.column.title }}
+          </slot>
+        </template>
+        <template #bodyCell="slotProps">
+          <slot name="bodyCell" v-bind="slotProps">
+            {{ stringifyCellValue(getColumnValue(slotProps.record, slotProps.column)) }}
+          </slot>
+        </template>
+      </Table>
+    </div>
+
+    <div ref="pagerRef" class="admin-config-table-pager">
+      <Pagination
+        :current="current"
+        :page-size="pageSize"
+        :total="total"
+        :show-size-changer="showSizeChanger"
+        @change="(page: number, size: number) => emit('pageChange', page, size)"
+        @show-size-change="(page: number, size: number) => emit('pageChange', page, size)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.admin-config-table-card {
+  background: #fff;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 8px;
+  box-shadow: none;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.admin-config-table-card--plain {
+  border: 0;
+  border-radius: 0;
+}
+
+.admin-config-table-area {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.admin-config-table {
+  height: 100%;
+  width: 100%;
+}
+
+.admin-config-table :deep(.ant-table) {
+  color: rgb(52 64 84);
+  font-size: var(--density-table-body-font-size);
+}
+
+.admin-config-table :deep(.ant-spin-nested-loading),
+.admin-config-table :deep(.ant-spin-container) {
+  height: 100%;
+  min-height: 0;
+}
+
+.admin-config-table :deep(.ant-spin-container) {
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-config-table :deep(.ant-table) {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.admin-config-table :deep(.ant-table-container) {
+  min-height: 0;
+}
+
+.admin-config-table :deep(.ant-table-thead > tr > th) {
+  background: #fafafa;
+  border-bottom-color: rgb(237 240 244);
+  color: rgb(71 84 103);
+  font-size: var(--density-table-header-font-size);
+  font-weight: 500;
+  height: var(--density-table-header-height);
+  line-height: 1.35;
+  padding: 8px var(--density-table-cell-padding-x);
+}
+
+.admin-config-table :deep(.ant-table-thead > tr > th::before) {
+  background-color: rgb(237 240 244) !important;
+}
+
+.admin-config-table :deep(.ant-table-tbody > tr > td) {
+  border-bottom-color: rgb(237 240 244);
+  height: var(--density-table-row-height);
+  line-height: 1.35;
+  padding: 3px var(--density-table-cell-padding-x);
+}
+
+.admin-config-table :deep(.ant-table-body) {
+  overflow-y: auto !important;
+}
+
+.admin-config-table :deep(.switch-column) {
+  padding-left: var(--density-table-fixed-cell-padding-x) !important;
+  padding-right: var(--density-table-fixed-cell-padding-x) !important;
+}
+
+.admin-config-table :deep(.action-column) {
+  padding-left: var(--density-table-fixed-cell-padding-x) !important;
+  padding-right: var(--density-table-fixed-cell-padding-x) !important;
+}
+
+.admin-config-table :deep(.ant-table-tbody > tr:hover > td) {
+  background: rgb(250 252 255);
+}
+
+.admin-config-table :deep(.ant-table-cell-fix-left),
+.admin-config-table :deep(.ant-table-cell-fix-right) {
+  background: #fff;
+}
+
+.admin-config-table :deep(.ant-table-tbody > tr:hover > .ant-table-cell-fix-left),
+.admin-config-table :deep(.ant-table-tbody > tr:hover > .ant-table-cell-fix-right) {
+  background: rgb(250 252 255);
+}
+
+.admin-config-table-pager {
+  border-top: 1px solid rgb(237 240 244);
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  padding: 10px 12px;
+}
+</style>
diff --git a/apps/src/views/_shared/resource-code.ts b/apps/src/views/_shared/resource-code.ts
new file mode 100644
index 0000000..06c6440
--- /dev/null
+++ b/apps/src/views/_shared/resource-code.ts
@@ -0,0 +1,104 @@
+const RESOURCE_NAME_TRANSLATION_ENTRIES = ([
+  ['头像框', 'avatar frame'],
+  ['座驾', 'ride'],
+  ['坐骑', 'mount'],
+  ['勋章', 'badge'],
+  ['徽章', 'badge'],
+  ['管理员', 'admin'],
+  ['圣诞', 'christmas'],
+  ['新年', 'new year'],
+  ['情人节', 'valentine'],
+  ['万圣节', 'halloween'],
+  ['锦鲤', 'koi'],
+  ['熊猫', 'panda'],
+  ['独角兽', 'unicorn'],
+  ['天使', 'angel'],
+  ['恶魔', 'devil'],
+  ['皇冠', 'crown'],
+  ['国王', 'king'],
+  ['女王', 'queen'],
+  ['玫瑰', 'rose'],
+  ['星光', 'starlight'],
+  ['星星', 'star'],
+  ['月亮', 'moon'],
+  ['太阳', 'sun'],
+  ['彩虹', 'rainbow'],
+  ['火焰', 'flame'],
+  ['冰雪', 'snow'],
+  ['蓝色', 'blue'],
+  ['红色', 'red'],
+  ['紫色', 'purple'],
+  ['粉色', 'pink'],
+  ['金色', 'gold'],
+  ['银色', 'silver'],
+  ['黑色', 'black'],
+  ['白色', 'white'],
+  ['绿色', 'green'],
+  ['黄色', 'yellow'],
+  ['钻石', 'diamond'],
+  ['水晶', 'crystal'],
+  ['幸运', 'lucky'],
+  ['浪漫', 'romantic'],
+  ['荣耀', 'glory'],
+  ['守护', 'guard'],
+  ['贵族', 'noble'],
+  ['梦幻', 'dream'],
+  ['闪耀', 'shining'],
+  ['限定', 'limited'],
+  ['豪华', 'deluxe'],
+  ['高级', 'premium'],
+  ['经典', 'classic'],
+  ['热气球', 'hot air balloon'],
+  ['跑车', 'sports car'],
+  ['飞船', 'spaceship'],
+  ['游艇', 'yacht'],
+  ['摩托', 'motorcycle'],
+  ['龙', 'dragon'],
+  ['凤', 'phoenix'],
+  ['虎', 'tiger'],
+  ['兔', 'rabbit'],
+  ['猫', 'cat'],
+  ['狗', 'dog'],
+  ['鱼', 'fish'],
+] as Array<[string, string]>).toSorted(
+  (current, next) => next[0].length - current[0].length,
+);
+
+export function normalizeResourceBaseName(value: string) {
+  const name = value
+    .replace(/\.[^.]+$/, '')
+    .replace(/([_-]?(cover|covers|source|resource|resources|ios|android|expand))$/i, '')
+    .replace(/([_-]?(封面|资源))$/i, '')
+    .trim();
+  return name || value.replace(/\.[^.]+$/, '') || 'resource';
+}
+
+export function normalizeResourceCode(value: string) {
+  const baseName = normalizeResourceBaseName(value);
+  const translated = translateResourceName(baseName);
+  return slugifyResourceCode(translated) || slugifyResourceCode(baseName) || 'resource';
+}
+
+function translateResourceName(value: string) {
+  let result = value.trim();
+  RESOURCE_NAME_TRANSLATION_ENTRIES.forEach(([source, target]) => {
+    result = result.replaceAll(source, ` ${target} `);
+  });
+  return [...result]
+    .map((char) => {
+      if (/[\u4E00-\u9FFF]/.test(char)) {
+        return ` u${char.codePointAt(0)?.toString(16) || ''} `;
+      }
+      return char;
+    })
+    .join('');
+}
+
+function slugifyResourceCode(value: string) {
+  return value
+    .normalize('NFKC')
+    .replaceAll(/[^\d A-Za-z]+/g, ' ')
+    .trim()
+    .replaceAll(/\s+/g, '_')
+    .toLowerCase();
+}
diff --git a/apps/src/views/operate/components/gift-batch-drawer.vue b/apps/src/views/operate/components/gift-batch-drawer.vue
new file mode 100644
index 0000000..c8bdc39
--- /dev/null
+++ b/apps/src/views/operate/components/gift-batch-drawer.vue
@@ -0,0 +1,1239 @@
+<script lang="ts" setup>
+import { computed, reactive, ref, watch } from 'vue';
+
+import {
+  Button,
+  Drawer,
+  Empty,
+  Image,
+  Input,
+  InputNumber,
+  message,
+  Progress,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from 'antdv-next';
+import dayjs from 'dayjs';
+
+import { addGift } from '#/api/legacy/gift';
+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';
+
+type AssetKind = 'cover' | 'source';
+type RowStatus = 'error' | 'ready' | 'saved' | 'saving' | 'uploading';
+
+interface BatchGiftRow {
+  code: string;
+  cover: string;
+  coverError: string;
+  coverFileName: string;
+  coverUploading: boolean;
+  errors: string[];
+  giftCandy: number;
+  giftIntegral: number;
+  key: string;
+  name: string;
+  saved: boolean;
+  saving: boolean;
+  sort: number;
+  sourceError: string;
+  sourceFileName: string;
+  sourceUploading: boolean;
+  sourceUrl: string;
+  status: RowStatus;
+}
+
+interface ParsedGiftFile {
+  amount: number;
+  assetKind: AssetKind;
+  code: string;
+  name: string;
+}
+
+const props = defineProps<{
+  initialSysOrigin?: number | string;
+  open: boolean;
+  sysOriginOptions: Array<{ label: string; value: string }>;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  success: [];
+}>();
+
+const batchForm = reactive({
+  giftTab: 'ORDINARY',
+  regionList: [] as Array<number | string>,
+  sysOrigin: '',
+  validDays: 7,
+});
+
+const rows = ref<BatchGiftRow[]>([]);
+const activeRowKey = ref('');
+const dragging = ref(false);
+const folderInputRef = ref<HTMLInputElement>();
+const fileInputRef = ref<HTMLInputElement>();
+const regions = ref<Array<Record<string, any>>>([]);
+const selectedRowKeys = ref<string[]>([]);
+const sequence = ref(0);
+const showOnlyErrors = ref(false);
+const submitting = ref(false);
+const droppedFilePathMap = new WeakMap<File, string>();
+
+const giftTabOptions = GIFT_CONFIG_TAB_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value as any,
+}));
+const regionOptions = computed(() =>
+  regions.value.map((item) => ({
+    label: String(item.regionName || item.name || item.id || '-'),
+    value: item.id as any,
+  })),
+);
+
+const columns = [
+  { dataIndex: 'cover', key: 'cover', title: '封面', width: 116 },
+  { dataIndex: 'sourceUrl', key: 'sourceUrl', title: '资源', width: 180 },
+  { dataIndex: 'name', key: 'name', title: '名称', width: 180 },
+  { dataIndex: 'code', key: 'code', title: '编码', width: 180 },
+  { dataIndex: 'giftCandy', key: 'giftCandy', title: '金币', width: 116 },
+  { dataIndex: 'giftIntegral', key: 'giftIntegral', title: '积分', width: 116 },
+  { dataIndex: 'sort', key: 'sort', title: '排序', width: 96 },
+  { dataIndex: 'status', key: 'status', title: '状态', width: 120 },
+  { dataIndex: 'actions', key: 'actions', title: '操作', width: 92 },
+];
+
+const visibleRows = computed(() =>
+  showOnlyErrors.value
+    ? rows.value.filter((row) => row.errors.length > 0)
+    : rows.value,
+);
+
+const activeRow = computed(() => {
+  if (activeRowKey.value) {
+    const matched = rows.value.find((row) => row.key === activeRowKey.value);
+    if (matched) {
+      return matched;
+    }
+  }
+  return rows.value[0] || null;
+});
+
+const uploadAssetTotal = computed(() =>
+  rows.value.reduce(
+    (total, row) =>
+      total + (row.coverFileName ? 1 : 0) + (row.sourceFileName ? 1 : 0),
+    0,
+  ),
+);
+
+const uploadAssetFinished = computed(() =>
+  rows.value.reduce(
+    (total, row) =>
+      total
+      + (row.coverFileName && !row.coverUploading ? 1 : 0)
+      + (row.sourceFileName && !row.sourceUploading ? 1 : 0),
+    0,
+  ),
+);
+
+const uploadPercent = computed(() => {
+  if (uploadAssetTotal.value === 0) {
+    return 0;
+  }
+  return Math.round((uploadAssetFinished.value / uploadAssetTotal.value) * 100);
+});
+
+const errorCount = computed(() =>
+  rows.value.filter((row) => row.errors.length > 0).length,
+);
+const submitTargetCount = computed(
+  () => rows.value.filter((row) => isRowSubmittable(row)).length,
+);
+
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedRowKeys.value,
+  onChange: (keys: Array<number | string>) => {
+    selectedRowKeys.value = keys.map(String);
+  },
+}));
+
+function resetBatch() {
+  batchForm.sysOrigin =
+    String(props.initialSysOrigin || props.sysOriginOptions[0]?.value || 'LIKEI');
+  batchForm.giftTab = 'ORDINARY';
+  batchForm.validDays = 7;
+  batchForm.regionList = [];
+  rows.value = [];
+  selectedRowKeys.value = [];
+  activeRowKey.value = '';
+  showOnlyErrors.value = false;
+  sequence.value = 0;
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) {
+      return;
+    }
+    resetBatch();
+    void loadRegions();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => batchForm.sysOrigin,
+  () => {
+    if (props.open) {
+      void loadRegions();
+    }
+  },
+);
+
+watch(
+  () => [batchForm.sysOrigin, batchForm.regionList.length],
+  () => {
+    refreshAllRows();
+  },
+);
+
+async function loadRegions() {
+  if (!batchForm.sysOrigin) {
+    regions.value = [];
+    batchForm.regionList = [];
+    return;
+  }
+  regions.value = (await regionConfigTable({ sysOrigin: batchForm.sysOrigin })) || [];
+  batchForm.regionList = regions.value.map((item) => item.id);
+  refreshAllRows();
+}
+
+function normalizeAmount(value: unknown) {
+  const amount = Number(value ?? 0);
+  return Number.isFinite(amount) && amount >= 0 ? amount : 0;
+}
+
+function getPathFileName(path: string) {
+  const segments = path.split('/');
+  return segments[segments.length - 1] || path;
+}
+
+function getFilePath(file: File) {
+  return (
+    droppedFilePathMap.get(file)
+    || (file as any).webkitRelativePath
+    || file.name
+  );
+}
+
+function isImageFile(file: File) {
+  return (
+    file.type.startsWith('image/')
+    || /\.(apng|avif|gif|jpe?g|png|svg|webp)$/i.test(file.name)
+  );
+}
+
+function isSourceFile(file: File) {
+  return /\.(mp4|pag|svga|zip)$/i.test(file.name);
+}
+
+function parseGiftFile(file: File): null | ParsedGiftFile {
+  const fileName = getPathFileName(getFilePath(file));
+  const baseName = fileName.replace(/\.[^.]+$/, '').trim();
+  const parts = baseName
+    .split('_')
+    .map((part) => part.trim())
+    .filter(Boolean);
+  if (parts[0] !== '礼物') {
+    return null;
+  }
+  const assetToken = String(parts[parts.length - 1] || '').toLowerCase();
+  let assetKind: '' | AssetKind = '';
+  if (assetToken === 'cover') {
+    assetKind = 'cover';
+  } else if (assetToken === 'animation') {
+    assetKind = 'source';
+  }
+  if (!assetKind) {
+    return null;
+  }
+  if (assetKind === 'cover' && !isImageFile(file)) {
+    return null;
+  }
+  if (assetKind === 'source' && !isSourceFile(file)) {
+    return null;
+  }
+  const nameParts = parts.slice(1, -1);
+  const maybeDuration = String(nameParts[nameParts.length - 1] || '');
+  if (/^\d+天$/.test(maybeDuration)) {
+    nameParts.pop();
+  }
+  let amount = 0;
+  const maybeAmount = String(nameParts[nameParts.length - 1] || '');
+  if (/^\d+(\.\d+)?$/.test(maybeAmount)) {
+    amount = normalizeAmount(nameParts.pop());
+  }
+  const name = nameParts.join('_').trim();
+  if (!name) {
+    return null;
+  }
+  return {
+    amount,
+    assetKind,
+    code: normalizeResourceCode(name),
+    name,
+  };
+}
+
+function findOrCreateRow(parsed: ParsedGiftFile) {
+  const matched = rows.value.find(
+    (row) => row.code === parsed.code || row.name === parsed.name,
+  );
+  if (matched) {
+    matched.giftCandy = parsed.amount;
+    matched.giftIntegral = parsed.amount;
+    matched.saved = false;
+    return matched;
+  }
+  const amount = normalizeAmount(parsed.amount);
+  const row: BatchGiftRow = {
+    code: parsed.code,
+    cover: '',
+    coverError: '',
+    coverFileName: '',
+    coverUploading: false,
+    errors: [],
+    giftCandy: amount,
+    giftIntegral: amount,
+    key: `gift-batch-${Date.now()}-${sequence.value++}`,
+    name: parsed.name,
+    saved: false,
+    saving: false,
+    sort: rows.value.length + 1,
+    sourceError: '',
+    sourceFileName: '',
+    sourceUploading: false,
+    sourceUrl: '',
+    status: 'error',
+  };
+  rows.value.push(row);
+  if (!activeRowKey.value) {
+    activeRowKey.value = row.key;
+  }
+  return row;
+}
+
+function setRowAsset(row: BatchGiftRow, kind: AssetKind, file: File) {
+  const fileName = getPathFileName(getFilePath(file));
+  if (kind === 'cover') {
+    row.cover = '';
+    row.coverError = '';
+    row.coverFileName = fileName;
+    row.coverUploading = true;
+  } else {
+    row.sourceUrl = '';
+    row.sourceError = '';
+    row.sourceFileName = fileName;
+    row.sourceUploading = true;
+  }
+  row.saved = false;
+  refreshAllRows();
+  void uploadAsset(row, kind, file, fileName);
+}
+
+async function uploadAsset(
+  row: BatchGiftRow,
+  kind: AssetKind,
+  file: File,
+  fileName: string,
+) {
+  try {
+    const result = await simpleUploadFile(file, 'gifts');
+    if (kind === 'cover' && row.coverFileName === fileName) {
+      row.cover = result.name;
+    } else if (kind === 'source' && row.sourceFileName === fileName) {
+      row.sourceUrl = result.name;
+    }
+  } catch (error) {
+    console.error(error);
+    if (kind === 'cover' && row.coverFileName === fileName) {
+      row.coverError = '封面上传失败';
+    } else if (kind === 'source' && row.sourceFileName === fileName) {
+      row.sourceError = '资源上传失败';
+    }
+  } finally {
+    if (kind === 'cover' && row.coverFileName === fileName) {
+      row.coverUploading = false;
+    } else if (kind === 'source' && row.sourceFileName === fileName) {
+      row.sourceUploading = false;
+    }
+    refreshAllRows();
+  }
+}
+
+function processFiles(files: File[]) {
+  let accepted = 0;
+  let ignored = 0;
+  files.forEach((file) => {
+    const parsed = parseGiftFile(file);
+    if (!parsed) {
+      ignored += 1;
+      return;
+    }
+    const row = findOrCreateRow(parsed);
+    setRowAsset(row, parsed.assetKind, file);
+    accepted += 1;
+  });
+  if (accepted === 0 && files.length > 0) {
+    message.warning('未识别到符合 礼物_ 命名规则的文件');
+    return;
+  }
+  if (accepted > 0) {
+    message.success(
+      ignored > 0
+        ? `已导入 ${accepted} 个文件，忽略 ${ignored} 个非规则文件`
+        : `已导入 ${accepted} 个文件`,
+    );
+  }
+}
+
+function handleFileInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = target.files ? [...target.files] : [];
+  processFiles(files);
+  target.value = '';
+}
+
+async function handleDrop(event: DragEvent) {
+  dragging.value = false;
+  const files = await collectDroppedFiles(event.dataTransfer);
+  processFiles(files);
+}
+
+async function collectDroppedFiles(dataTransfer?: DataTransfer | null) {
+  if (!dataTransfer) {
+    return [];
+  }
+  const items = [...(dataTransfer.items || [])];
+  const entries = items
+    .map((item) => (item as any).webkitGetAsEntry?.())
+    .filter(Boolean);
+  if (entries.length === 0) {
+    return [...(dataTransfer.files || [])];
+  }
+  const files: File[] = [];
+  await Promise.all(entries.map((entry) => readEntry(entry, files)));
+  return files;
+}
+
+async function readEntry(entry: any, result: File[], parentPath = ''): Promise<void> {
+  const currentPath = `${parentPath}${entry.name}`;
+  if (entry.isFile) {
+    await new Promise<void>((resolve) => {
+      entry.file((file: File) => {
+        droppedFilePathMap.set(file, currentPath);
+        result.push(file);
+        resolve();
+      }, resolve);
+    });
+    return;
+  }
+  if (!entry.isDirectory) {
+    return;
+  }
+  const reader = entry.createReader();
+  while (true) {
+    const entries = await new Promise<any[]>((resolve, reject) => {
+      reader.readEntries(resolve, reject);
+    });
+    if (entries.length === 0) {
+      break;
+    }
+    await Promise.all(
+      entries.map((child) => readEntry(child, result, `${currentPath}/`)),
+    );
+  }
+}
+
+function getDuplicateMap(field: 'code' | 'name') {
+  const map = new Map<string, number>();
+  rows.value.forEach((row) => {
+    const value = String(row[field] || '').trim();
+    if (!value) {
+      return;
+    }
+    map.set(value, (map.get(value) || 0) + 1);
+  });
+  return map;
+}
+
+function getRowErrors(
+  row: BatchGiftRow,
+  duplicateCodes = getDuplicateMap('code'),
+  duplicateNames = getDuplicateMap('name'),
+) {
+  const errors: string[] = [];
+  if (!batchForm.sysOrigin) {
+    errors.push('请选择平台');
+  }
+  if (batchForm.regionList.length === 0) {
+    errors.push('请选择区域');
+  }
+  if (!String(row.name || '').trim()) {
+    errors.push('缺少名称');
+  }
+  if (!String(row.code || '').trim()) {
+    errors.push('缺少编码');
+  }
+  if ((duplicateCodes.get(String(row.code).trim()) || 0) > 1) {
+    errors.push('本批次编码重复');
+  }
+  if ((duplicateNames.get(String(row.name).trim()) || 0) > 1) {
+    errors.push('本批次名称重复');
+  }
+  if (row.coverError) {
+    errors.push(row.coverError);
+  }
+  if (row.sourceError) {
+    errors.push(row.sourceError);
+  }
+  if (!row.cover && !row.coverUploading) {
+    errors.push('缺少封面');
+  }
+  if (!Number.isFinite(Number(row.giftCandy)) || Number(row.giftCandy) < 0) {
+    errors.push('金币不正确');
+  }
+  if (!Number.isFinite(Number(row.giftIntegral)) || Number(row.giftIntegral) < 0) {
+    errors.push('积分不正确');
+  }
+  if (!Number.isFinite(Number(row.sort))) {
+    errors.push('排序不正确');
+  }
+  return errors;
+}
+
+function refreshRow(
+  row: BatchGiftRow,
+  duplicateCodes = getDuplicateMap('code'),
+  duplicateNames = getDuplicateMap('name'),
+) {
+  row.errors = getRowErrors(row, duplicateCodes, duplicateNames);
+  if (row.saving) {
+    row.status = 'saving';
+  } else if (row.coverUploading || row.sourceUploading) {
+    row.status = 'uploading';
+  } else if (row.saved) {
+    row.status = 'saved';
+  } else if (row.errors.length > 0) {
+    row.status = 'error';
+  } else {
+    row.status = 'ready';
+  }
+}
+
+function refreshAllRows() {
+  const duplicateCodes = getDuplicateMap('code');
+  const duplicateNames = getDuplicateMap('name');
+  rows.value.forEach((row) => refreshRow(row, duplicateCodes, duplicateNames));
+}
+
+function isRowSubmittable(row: BatchGiftRow) {
+  refreshRow(row);
+  return row.status === 'ready' && !row.saved;
+}
+
+function markRowEdited(record: Record<string, any>) {
+  const row = record as BatchGiftRow;
+  row.saved = false;
+  refreshAllRows();
+}
+
+function deleteRow(record: Record<string, any>) {
+  const row = record as BatchGiftRow;
+  rows.value = rows.value.filter((item) => item.key !== row.key);
+  selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== row.key);
+  if (activeRowKey.value === row.key) {
+    activeRowKey.value = rows.value[0]?.key || '';
+  }
+  refreshAllRows();
+}
+
+function deleteSelectedRows() {
+  if (selectedRowKeys.value.length === 0) {
+    message.warning('请先选择礼物');
+    return;
+  }
+  const selected = new Set(selectedRowKeys.value);
+  rows.value = rows.value.filter((row) => !selected.has(row.key));
+  selectedRowKeys.value = [];
+  if (!rows.value.some((row) => row.key === activeRowKey.value)) {
+    activeRowKey.value = rows.value[0]?.key || '';
+  }
+  refreshAllRows();
+}
+
+function clearRows() {
+  rows.value = [];
+  selectedRowKeys.value = [];
+  activeRowKey.value = '';
+}
+
+function getStatusText(status: RowStatus) {
+  const map: Record<RowStatus, string> = {
+    error: '待处理',
+    ready: '可提交',
+    saved: '已保存',
+    saving: '保存中',
+    uploading: '上传中',
+  };
+  return map[status];
+}
+
+function getStatusColor(status: RowStatus) {
+  const map: Record<RowStatus, string> = {
+    error: 'error',
+    ready: 'success',
+    saved: 'default',
+    saving: 'processing',
+    uploading: 'processing',
+  };
+  return map[status];
+}
+
+function setActiveRow(row: BatchGiftRow) {
+  activeRowKey.value = row.key;
+}
+
+function getRowClassName(record: Record<string, any>) {
+  const row = record as BatchGiftRow;
+  if (row.key === activeRowKey.value) {
+    return row.errors.length > 0
+      ? 'batch-row batch-row--active batch-row--error'
+      : 'batch-row batch-row--active';
+  }
+  return row.errors.length > 0 ? 'batch-row batch-row--error' : 'batch-row';
+}
+
+function customRow(record: Record<string, any>) {
+  const row = record as BatchGiftRow;
+  return {
+    onClick: () => setActiveRow(row),
+  };
+}
+
+function buildPayload(row: BatchGiftRow) {
+  return {
+    account: '',
+    explanationGift: false,
+    expiredTime: String(dayjs().add(batchForm.validDays, 'day').valueOf()),
+    giftCandy: Number(row.giftCandy || 0),
+    giftCode: String(row.code || '').trim(),
+    giftIntegral: Number(row.giftIntegral || 0),
+    giftName: String(row.name || '').trim(),
+    giftPhoto: row.cover,
+    giftSourceUrl: row.sourceUrl,
+    giftTab: batchForm.giftTab,
+    regionList: [...batchForm.regionList],
+    sort: Number(row.sort || 0),
+    specialList: [],
+    standardId: '',
+    sysOrigin: batchForm.sysOrigin,
+    type: 'GOLD',
+  };
+}
+
+async function submitBatch() {
+  refreshAllRows();
+  if (rows.value.some((row) => row.status === 'uploading')) {
+    message.warning('还有文件正在上传，请稍后提交');
+    return;
+  }
+  const targetRows = rows.value.filter((row) => row.status === 'ready');
+  if (targetRows.length === 0) {
+    message.warning('暂无可提交礼物');
+    return;
+  }
+  submitting.value = true;
+  let successCount = 0;
+  let failedCount = 0;
+  for (const row of targetRows) {
+    row.saving = true;
+    refreshRow(row);
+    try {
+      await addGift(buildPayload(row));
+      row.saved = true;
+      row.errors = [];
+      successCount += 1;
+    } catch (error) {
+      console.error(error);
+      row.saved = false;
+      row.errors = ['保存失败'];
+      failedCount += 1;
+    } finally {
+      row.saving = false;
+      refreshRow(row);
+    }
+  }
+  submitting.value = false;
+  if (failedCount === 0) {
+    message.success(`已提交 ${successCount} 个礼物`);
+    emit('success');
+    emit('close');
+    return;
+  }
+  message.error(`已提交 ${successCount} 个礼物，${failedCount} 个失败`);
+}
+</script>
+
+<template>
+  <Drawer
+    destroy-on-hidden
+    :open="open"
+    root-class="gift-batch-drawer-root"
+    size="100vw"
+    :styles="{
+      body: { padding: '0', overflow: 'hidden' },
+      footer: { padding: '0' },
+    }"
+    title="批量导入礼物"
+    @close="emit('close')"
+  >
+    <div class="batch-drawer">
+      <div class="batch-common">
+        <div class="common-field">
+          <span class="common-label">平台</span>
+          <SysOriginSelect
+            v-model:value="batchForm.sysOrigin"
+            :options="sysOriginOptions"
+          />
+        </div>
+        <div class="common-field">
+          <span class="common-label">礼物类型</span>
+          <Select
+            v-model:value="batchForm.giftTab"
+            option-label-prop="label"
+            :options="giftTabOptions"
+          />
+        </div>
+        <div class="common-field common-field--wide">
+          <span class="common-label">区域</span>
+          <Select
+            v-model:value="batchForm.regionList"
+            mode="multiple"
+            option-label-prop="label"
+            :options="regionOptions"
+          />
+        </div>
+        <div class="common-field common-field--short">
+          <span class="common-label">有效期</span>
+          <InputNumber
+            v-model:value="batchForm.validDays"
+            :min="1"
+            addon-after="天"
+            style="width: 100%"
+          />
+        </div>
+        <div class="common-meta">收费类型：金币</div>
+      </div>
+
+      <div class="batch-workspace">
+        <aside class="import-panel">
+          <input
+            ref="fileInputRef"
+            accept="image/*,.svga,.pag,.mp4,.zip"
+            class="hidden-input"
+            multiple
+            type="file"
+            @change="handleFileInput"
+          />
+          <input
+            ref="folderInputRef"
+            accept="image/*,.svga,.pag,.mp4,.zip"
+            class="hidden-input"
+            multiple
+            type="file"
+            webkitdirectory
+            @change="handleFileInput"
+          />
+          <div
+            class="dropzone"
+            :class="{ 'dropzone--active': dragging }"
+            @click="fileInputRef?.click()"
+            @dragenter.prevent="dragging = true"
+            @dragleave.prevent="dragging = false"
+            @dragover.prevent="dragging = true"
+            @drop.prevent="handleDrop"
+          >
+            <div class="dropzone-title">拖拽文件到这里</div>
+            <div class="dropzone-desc">只解析 礼物_ 开头的文件</div>
+            <Space wrap>
+              <Button type="primary" @click.stop="fileInputRef?.click()">
+                选择文件
+              </Button>
+              <Button @click.stop="folderInputRef?.click()">选择文件夹</Button>
+            </Space>
+          </div>
+
+          <div class="import-rules">
+            <div class="side-title">识别规则</div>
+            <div class="rule-item">礼物_物品名_价格_cover/animation</div>
+            <div class="rule-item">礼物_物品名_价格_1天_cover/animation</div>
+            <div class="rule-item">cover 写入封面，animation 写入资源</div>
+            <div class="rule-item">默认金币，有效期 7 天</div>
+          </div>
+
+          <div class="import-progress">
+            <div class="progress-head">
+              <span>导入进度</span>
+              <span>{{ uploadAssetFinished }}/{{ uploadAssetTotal }}</span>
+            </div>
+            <Progress :percent="uploadPercent" size="small" />
+            <div class="progress-meta">
+              已识别 {{ rows.length }} 个，错误 {{ errorCount }} 个
+            </div>
+          </div>
+        </aside>
+
+        <main class="table-panel">
+          <div class="table-toolbar">
+            <Space wrap>
+              <Button
+                :disabled="rows.length === 0"
+                @click="showOnlyErrors = !showOnlyErrors"
+              >
+                {{ showOnlyErrors ? '查看全部' : '只看错误' }}
+              </Button>
+              <Button
+                danger
+                :disabled="selectedRowKeys.length === 0"
+                @click="deleteSelectedRows"
+              >
+                删除选中
+              </Button>
+            </Space>
+            <span class="selection-text">
+              已选 {{ selectedRowKeys.length }} 项
+            </span>
+          </div>
+
+          <Table
+            bordered
+            :columns="columns"
+            :custom-row="customRow"
+            :data-source="visibleRows"
+            :pagination="false"
+            :row-class-name="getRowClassName"
+            row-key="key"
+            :row-selection="rowSelection"
+            :scroll="{ x: 1120, y: 'calc(100vh - 360px)' }"
+            size="small"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'cover'">
+                <div class="asset-cell">
+                  <Image
+                    v-if="record.cover"
+                    class="asset-cover"
+                    :src="getAccessImgUrl(record.cover)"
+                  />
+                  <div v-else class="asset-empty">
+                    {{ record.coverUploading ? '上传中' : '缺少封面' }}
+                  </div>
+                  <div class="file-name">{{ record.coverFileName || '-' }}</div>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'sourceUrl'">
+                <div class="file-cell">
+                  <Tag :color="record.sourceUrl ? 'success' : 'default'">
+                    {{ record.sourceUploading ? '上传中' : record.sourceUrl ? '已上传' : '未上传' }}
+                  </Tag>
+                  <div class="file-name">{{ record.sourceFileName || '-' }}</div>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'name'">
+                <Input
+                  v-model:value="record.name"
+                  size="small"
+                  @blur="markRowEdited(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'code'">
+                <Input
+                  v-model:value="record.code"
+                  size="small"
+                  @blur="markRowEdited(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'giftCandy'">
+                <InputNumber
+                  v-model:value="record.giftCandy"
+                  :min="0"
+                  size="small"
+                  style="width: 96px"
+                  @change="markRowEdited(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'giftIntegral'">
+                <InputNumber
+                  v-model:value="record.giftIntegral"
+                  :min="0"
+                  size="small"
+                  style="width: 96px"
+                  @change="markRowEdited(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'sort'">
+                <InputNumber
+                  v-model:value="record.sort"
+                  size="small"
+                  style="width: 76px"
+                  @change="markRowEdited(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'status'">
+                <Tag :color="getStatusColor(record.status)">
+                  {{ getStatusText(record.status) }}
+                </Tag>
+              </template>
+              <template v-else-if="column.key === 'actions'">
+                <Button danger size="small" type="link" @click.stop="deleteRow(record)">
+                  删除
+                </Button>
+              </template>
+            </template>
+          </Table>
+        </main>
+
+        <aside class="preview-panel">
+          <template v-if="activeRow">
+            <div class="side-title">礼物预览</div>
+            <div class="preview-cover">
+              <Image
+                v-if="activeRow.cover"
+                class="preview-image"
+                :src="getAccessImgUrl(activeRow.cover)"
+              />
+              <div v-else class="preview-empty">未上传封面</div>
+            </div>
+            <div class="preview-name">{{ activeRow.name || '-' }}</div>
+            <div class="preview-meta">编码：{{ activeRow.code || '-' }}</div>
+            <div class="preview-meta">封面：{{ activeRow.coverFileName || '-' }}</div>
+            <div class="preview-meta">资源：{{ activeRow.sourceFileName || '-' }}</div>
+            <div class="side-title side-title--spaced">校验结果</div>
+            <div v-if="activeRow.errors.length === 0" class="success-text">
+              可提交
+            </div>
+            <div v-else class="error-list">
+              <Tag
+                v-for="error in activeRow.errors"
+                :key="error"
+                color="error"
+              >
+                {{ error }}
+              </Tag>
+            </div>
+          </template>
+          <Empty v-else description="暂无礼物" />
+        </aside>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="batch-footer">
+        <div class="footer-stats">
+          <span>已识别 {{ rows.length }} 个</span>
+          <span>错误 {{ errorCount }} 个</span>
+          <span>可提交 {{ submitTargetCount }} 个</span>
+        </div>
+        <Space>
+          <Button :disabled="rows.length === 0 || submitting" @click="clearRows">
+            清空
+          </Button>
+          <Button :disabled="submitting" @click="emit('close')">取消</Button>
+          <Button
+            :disabled="submitTargetCount === 0"
+            :loading="submitting"
+            type="primary"
+            @click="submitBatch"
+          >
+            提交 {{ submitTargetCount }} 个
+          </Button>
+        </Space>
+      </div>
+    </template>
+  </Drawer>
+</template>
+
+<style scoped>
+.batch-drawer {
+  background: #f5f7fb;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 55px);
+  min-width: 0;
+}
+
+.batch-common {
+  align-items: flex-end;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 14px 20px;
+}
+
+.common-field {
+  display: grid;
+  gap: 6px;
+  min-width: 180px;
+}
+
+.common-field--short {
+  min-width: 120px;
+}
+
+.common-field--wide {
+  min-width: 320px;
+}
+
+.common-label,
+.common-meta {
+  color: #475569;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.common-meta {
+  min-height: 32px;
+  padding-top: 7px;
+}
+
+.batch-workspace {
+  display: grid;
+  flex: 1;
+  gap: 12px;
+  grid-template-columns: 260px minmax(620px, 1fr) 300px;
+  min-height: 0;
+  padding: 12px;
+}
+
+.import-panel,
+.preview-panel,
+.table-panel {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  min-height: 0;
+}
+
+.import-panel,
+.preview-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow: auto;
+  padding: 14px;
+}
+
+.table-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.dropzone {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px dashed #94a3b8;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 180px;
+  padding: 20px 14px;
+  text-align: center;
+}
+
+.dropzone:hover,
+.dropzone--active {
+  background: #eef6ff;
+  border-color: #1677ff;
+}
+
+.dropzone-title {
+  color: #111827;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.dropzone-desc {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.side-title {
+  color: #111827;
+  font-weight: 600;
+}
+
+.side-title--spaced {
+  margin-top: 6px;
+}
+
+.import-rules {
+  display: grid;
+  gap: 8px;
+}
+
+.rule-item,
+.progress-meta,
+.preview-meta {
+  color: #64748b;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.progress-head {
+  align-items: center;
+  color: #334155;
+  display: flex;
+  font-size: 13px;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.table-toolbar {
+  align-items: center;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.selection-text {
+  color: #64748b;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.asset-cell,
+.file-cell {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.asset-cover,
+.asset-empty {
+  height: 52px;
+  width: 52px;
+}
+
+.asset-empty {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 6px;
+  color: #94a3b8;
+  display: flex;
+  font-size: 12px;
+  justify-content: center;
+  text-align: center;
+}
+
+.file-name {
+  color: #64748b;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-cover,
+.preview-empty {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  min-height: 180px;
+  overflow: hidden;
+}
+
+.preview-empty {
+  color: #94a3b8;
+}
+
+.preview-image {
+  max-height: 220px;
+  object-fit: contain;
+  width: 100%;
+}
+
+.preview-name {
+  color: #111827;
+  font-size: 16px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.success-text {
+  color: #16a34a;
+}
+
+.error-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.batch-footer {
+  align-items: center;
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 20px;
+}
+
+.footer-stats {
+  color: #334155;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 13px;
+}
+
+:deep(.batch-row--error > td) {
+  background: #fff7f7;
+}
+
+:deep(.batch-row--active > td) {
+  background: #eef6ff;
+}
+
+@media (width <= 1180px) {
+  .batch-workspace {
+    grid-template-columns: 240px minmax(520px, 1fr);
+  }
+
+  .preview-panel {
+    display: none;
+  }
+}
+</style>
diff --git a/apps/src/views/operate/gift-config.vue b/apps/src/views/operate/gift-config.vue
index 3c71236..51c9697 100644
--- a/apps/src/views/operate/gift-config.vue
+++ b/apps/src/views/operate/gift-config.vue
@@ -38,9 +38,10 @@ import {
   regionConfigTable,
 } from '#/api/legacy/system';
 import AccountInput from '#/components/account-input.vue';
-import { copyText } from '#/views/operate/shared';
+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';
 
@@ -87,6 +88,7 @@ const settingQuery = reactive({
 });
 
 const giftFormOpen = ref(false);
+const giftBatchOpen = ref(false);
 const activeGiftRow = ref<null | Record<string, any>>(null);
 const addRegionOpen = ref(false);
 const addRegionSaving = ref(false);
@@ -130,7 +132,6 @@ const cpForm = reactive({
 });
 
 const settingColumns = [
-  { dataIndex: 'id', key: 'id', title: 'ID', width: 120 },
   { dataIndex: 'giftCode', key: 'giftCode', title: 'Code', width: 160 },
   { dataIndex: 'giftPhoto', key: 'giftPhoto', title: '封面', width: 100 },
   { dataIndex: 'giftName', key: 'giftName', title: '名称', width: 160 },
@@ -139,10 +140,10 @@ const settingColumns = [
   { dataIndex: 'regionNameStr', key: 'regionNameStr', title: '区域', width: 180 },
   { dataIndex: 'typeName', key: 'typeName', title: '类型', width: 120 },
   { dataIndex: 'sort', key: 'sort', title: '排序权重', width: 100 },
-  { dataIndex: 'del', key: 'del', 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 },
   { dataIndex: 'userBaseInfo', key: 'userBaseInfo', title: '专属礼物归属人', width: 180 },
-  { dataIndex: 'actions', key: 'actions', title: '操作', width: 180 },
+  { align: 'center' as const, className: 'action-column', dataIndex: 'actions', fixed: 'right' as const, key: 'actions', title: '操作', width: 84 },
 ];
 
 const regionOptions = computed(() =>
@@ -249,20 +250,34 @@ function handleWeekStarPageChange(page: number, pageSize: number) {
   void loadWeekStar();
 }
 
-async function handleCopy(url?: string) {
-  if (!url) {
-    return;
-  }
-  await copyText(getAccessImgUrl(url));
-  message.success('复制成功');
-}
-
 async function handleSwitch(record: Record<string, any>) {
   await switchDelStatus(record.id, record.del);
   message.success('操作成功');
   await loadSetting(false);
 }
 
+function stringifyCellValue(value: any) {
+  if (value === undefined || value === null || value === '') {
+    return '-';
+  }
+  return String(value);
+}
+
+function getColumnValue(record: Record<string, any>, column: Record<string, any>) {
+  const dataIndex = column?.dataIndex;
+  if (Array.isArray(dataIndex)) {
+    let value = record;
+    for (const key of dataIndex) {
+      value = value?.[String(key)];
+    }
+    return value;
+  }
+  if (dataIndex === undefined || dataIndex === null) {
+    return undefined;
+  }
+  return record?.[String(dataIndex)];
+}
+
 function openGiftCreate() {
   activeGiftRow.value = null;
   giftFormOpen.value = true;
@@ -434,26 +449,30 @@ async function handleCpSave() {
           <Button type="primary" @click="openGiftCreate">
             新增礼物
           </Button>
+          <Button type="primary" @click="giftBatchOpen = true">
+            批量导入
+          </Button>
           <Button danger @click="openAddRegionModal">
             添加全部礼物区域
           </Button>
         </Space>
 
-        <Table
+        <AdminConfigTable
           :columns="settingColumns"
           :data-source="settingList"
           :loading="settingLoading"
-          :pagination="false"
+          :current="settingQuery.cursor"
+          :page-size="settingQuery.limit"
+          plain
           row-key="id"
-          :scroll="{ x: 1680 }"
+          :scroll-x="1560"
+          :total="settingTotal"
+          @page-change="handleSettingPageChange"
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'giftPhoto'">
               <div class="week-star-gift">
                 <Image :src="getAccessImgUrl(record.giftPhoto)" class="gift-image" />
-                <Button size="small" type="link" @click="handleCopy(record.giftPhoto)">
-                  复制
-                </Button>
               </div>
             </template>
             <template v-else-if="column.key === 'del'">
@@ -473,19 +492,11 @@ async function handleCpSave() {
                 编辑
               </Button>
             </template>
+            <template v-else>
+              {{ stringifyCellValue(getColumnValue(record, column)) }}
+            </template>
           </template>
-        </Table>
-
-        <div class="pager">
-          <Pagination
-            :current="settingQuery.cursor"
-            :page-size="settingQuery.limit"
-            :total="settingTotal"
-            show-size-changer
-            @change="handleSettingPageChange"
-            @show-size-change="handleSettingPageChange"
-          />
-        </div>
+        </AdminConfigTable>
       </div>
 
       <div v-else-if="activeTab === 'weekStar'">
@@ -588,6 +599,14 @@ async function handleCpSave() {
       @success="loadSetting(true)"
     />
 
+    <GiftBatchDrawer
+      :initial-sys-origin="settingQuery.sysOrigin"
+      :open="giftBatchOpen"
+      :sys-origin-options="sysOriginOptions"
+      @close="giftBatchOpen = false"
+      @success="loadSetting(true)"
+    />
+
     <Modal
       :confirm-loading="addRegionSaving"
       :open="addRegionOpen"
diff --git a/apps/src/views/props/components/resource-batch-drawer.vue b/apps/src/views/props/components/resource-batch-drawer.vue
index 8ce8173..a07e16a 100644
--- a/apps/src/views/props/components/resource-batch-drawer.vue
+++ b/apps/src/views/props/components/resource-batch-drawer.vue
@@ -23,6 +23,7 @@ import {
   simpleUploadFile,
 } from '#/api/legacy/oss';
 import { addPropsSource } from '#/api/legacy/props';
+import { normalizeResourceCode } from '#/views/_shared/resource-code';
 
 import {
   BADGE_DISPLAY_TYPE_OPTIONS,
@@ -127,71 +128,6 @@ const STRUCTURED_ASSET_KIND_MAP: Record<string, StructuredAssetKind> = {
   animation: 'source',
   cover: 'cover',
 };
-const RESOURCE_NAME_TRANSLATION_ENTRIES = ([
-  ['头像框', 'avatar frame'],
-  ['座驾', 'ride'],
-  ['坐骑', 'mount'],
-  ['勋章', 'badge'],
-  ['徽章', 'badge'],
-  ['管理员', 'admin'],
-  ['圣诞', 'christmas'],
-  ['新年', 'new year'],
-  ['情人节', 'valentine'],
-  ['万圣节', 'halloween'],
-  ['锦鲤', 'koi'],
-  ['熊猫', 'panda'],
-  ['独角兽', 'unicorn'],
-  ['天使', 'angel'],
-  ['恶魔', 'devil'],
-  ['皇冠', 'crown'],
-  ['国王', 'king'],
-  ['女王', 'queen'],
-  ['玫瑰', 'rose'],
-  ['星光', 'starlight'],
-  ['星星', 'star'],
-  ['月亮', 'moon'],
-  ['太阳', 'sun'],
-  ['彩虹', 'rainbow'],
-  ['火焰', 'flame'],
-  ['冰雪', 'snow'],
-  ['蓝色', 'blue'],
-  ['红色', 'red'],
-  ['紫色', 'purple'],
-  ['粉色', 'pink'],
-  ['金色', 'gold'],
-  ['银色', 'silver'],
-  ['黑色', 'black'],
-  ['白色', 'white'],
-  ['绿色', 'green'],
-  ['黄色', 'yellow'],
-  ['钻石', 'diamond'],
-  ['水晶', 'crystal'],
-  ['幸运', 'lucky'],
-  ['浪漫', 'romantic'],
-  ['荣耀', 'glory'],
-  ['守护', 'guard'],
-  ['贵族', 'noble'],
-  ['梦幻', 'dream'],
-  ['闪耀', 'shining'],
-  ['限定', 'limited'],
-  ['豪华', 'deluxe'],
-  ['高级', 'premium'],
-  ['经典', 'classic'],
-  ['热气球', 'hot air balloon'],
-  ['跑车', 'sports car'],
-  ['飞船', 'spaceship'],
-  ['游艇', 'yacht'],
-  ['摩托', 'motorcycle'],
-  ['龙', 'dragon'],
-  ['凤', 'phoenix'],
-  ['虎', 'tiger'],
-  ['兔', 'rabbit'],
-  ['猫', 'cat'],
-  ['狗', 'dog'],
-  ['鱼', 'fish'],
-] as Array<[string, string]>).toSorted(
-  (current, next) => next[0].length - current[0].length,
-);
 
 function isAmountRequiredByType(type: string) {
   return !['CUSTOMIZE', 'FRAGMENTS'].includes(type);
@@ -348,43 +284,8 @@ function normalizeAmount(value: unknown) {
   return Number.isFinite(amount) && amount >= 0 ? amount : 0;
 }
 
-function normalizeBaseName(value: string) {
-  const name = value
-    .replace(/\.[^.]+$/, '')
-    .replace(/([_-]?(cover|covers|source|resource|resources|ios|android|expand))$/i, '')
-    .replace(/([_-]?(封面|资源))$/i, '')
-    .trim();
-  return name || value.replace(/\.[^.]+$/, '') || 'resource';
-}
-
 function normalizeCode(value: string) {
-  const baseName = normalizeBaseName(value);
-  const translated = translateResourceName(baseName);
-  return slugifyResourceCode(translated) || slugifyResourceCode(baseName) || 'resource';
-}
-
-function translateResourceName(value: string) {
-  let result = value.trim();
-  RESOURCE_NAME_TRANSLATION_ENTRIES.forEach(([source, target]) => {
-    result = result.replaceAll(source, ` ${target} `);
-  });
-  return [...result]
-    .map((char) => {
-      if (/[\u4E00-\u9FFF]/.test(char)) {
-        return ` u${char.codePointAt(0)?.toString(16) || ''} `;
-      }
-      return char;
-    })
-    .join('');
-}
-
-function slugifyResourceCode(value: string) {
-  return value
-    .normalize('NFKC')
-    .replaceAll(/[^\d A-Za-z]+/g, ' ')
-    .trim()
-    .replaceAll(/\s+/g, '_')
-    .toLowerCase();
+  return normalizeResourceCode(value);
 }
 
 function getPathFileName(path: string) {
diff --git a/apps/src/views/props/resource-config.vue b/apps/src/views/props/resource-config.vue
index 2d00854..40694ea 100644
--- a/apps/src/views/props/resource-config.vue
+++ b/apps/src/views/props/resource-config.vue
@@ -2,8 +2,6 @@
 import {
   computed,
   nextTick,
-  onBeforeUnmount,
-  onMounted,
   reactive,
   ref,
 } from 'vue';
@@ -19,16 +17,13 @@ import { useAccessStore } from '@vben/stores';
 
 import {
   Button,
-  Card,
   Empty,
   Input,
   InputNumber,
   message,
-  Pagination,
   Popover,
   Select,
   Switch,
-  Table,
   Tooltip,
 } from 'antdv-next';
 
@@ -39,6 +34,7 @@ import {
   pagePropsSource,
   updatePropsSource,
 } from '#/api/legacy/props';
+import AdminConfigTable from '#/views/_shared/admin-config-table.vue';
 import { getAllowedSysOrigins } from '#/views/system/shared';
 
 import ResourceBatchDrawer from './components/resource-batch-drawer.vue';
@@ -80,20 +76,15 @@ const amountSavingId = ref<null | string>(null);
 const amountDraft = ref<null | number>(null);
 const filterOpen = reactive<Record<string, boolean>>({});
 const pageActionOpen = ref(false);
-const tableAreaRef = ref<HTMLDivElement | null>(null);
-const pagerRef = ref<HTMLDivElement | null>(null);
-const tableScrollY = ref(320);
 const amountFormatter = new Intl.NumberFormat('zh-CN', {
   maximumFractionDigits: 2,
 });
-const tableScroll = computed(() => ({ x: 1000, y: tableScrollY.value }));
 const adminFreeOptions = [
   { label: '是', value: true as any },
   { label: '否', value: false as any },
 ];
 const DEFAULT_STORE_CURRENCY_TYPES = 'GOLD';
 const DEFAULT_STORE_VALID_DAYS = '7';
-let tableResizeObserver: null | ResizeObserver = null;
 
 const query = reactive({
   cursor: 1,
@@ -139,6 +130,21 @@ function stringifyCellValue(value: any) {
   return String(value);
 }
 
+function getColumnValue(record: Record<string, any>, column: Record<string, any>) {
+  const dataIndex = column?.dataIndex;
+  if (Array.isArray(dataIndex)) {
+    let value = record;
+    for (const key of dataIndex) {
+      value = value?.[String(key)];
+    }
+    return value;
+  }
+  if (dataIndex === undefined || dataIndex === null) {
+    return undefined;
+  }
+  return record?.[String(dataIndex)];
+}
+
 function isFilterableColumn(key: unknown) {
   return filterableColumnKeys.has(String(key));
 }
@@ -264,7 +270,6 @@ async function loadData(reset = false) {
     total.value = result.total || 0;
   } finally {
     loading.value = false;
-    void refreshTableScroll();
   }
 }
 
@@ -289,25 +294,6 @@ async function attachStoreCommodities(records: Array<Record<string, any>>) {
   }));
 }
 
-function updateTableScrollY() {
-  const area = tableAreaRef.value;
-  if (!area) {
-    return;
-  }
-  const headerHeight =
-    area.querySelector('.ant-table-thead')?.getBoundingClientRect().height || 48;
-  const scrollbarReserve = 8;
-  tableScrollY.value = Math.max(
-    160,
-    Math.floor(area.clientHeight - headerHeight - scrollbarReserve),
-  );
-}
-
-async function refreshTableScroll() {
-  await nextTick();
-  updateTableScrollY();
-}
-
 function handlePageChange(page: number, pageSize: number) {
   query.cursor = page;
   query.limit = pageSize;
@@ -499,28 +485,6 @@ function openEdit(record: Record<string, any>) {
   formOpen.value = true;
 }
 
-onMounted(async () => {
-  await nextTick();
-  void refreshTableScroll();
-  if (typeof ResizeObserver !== 'undefined') {
-    tableResizeObserver = new ResizeObserver(() => {
-      void refreshTableScroll();
-    });
-    if (tableAreaRef.value) {
-      tableResizeObserver.observe(tableAreaRef.value);
-    }
-    if (pagerRef.value) {
-      tableResizeObserver.observe(pagerRef.value);
-    }
-  }
-  window.addEventListener('resize', updateTableScrollY);
-});
-
-onBeforeUnmount(() => {
-  tableResizeObserver?.disconnect();
-  window.removeEventListener('resize', updateTableScrollY);
-});
-
 loadData(true);
 </script>
 
@@ -539,17 +503,18 @@ loadData(true);
       @success="loadData()"
     />
 
-    <Card v-if="canQuery" class="resource-card">
-      <div ref="tableAreaRef" class="resource-table-area">
-        <Table
-          class="resource-table"
-          :columns="columns"
-          :data-source="list"
-          :loading="loading"
-          :pagination="false"
-          row-key="id"
-          :scroll="tableScroll"
-        >
+    <AdminConfigTable
+      v-if="canQuery"
+      auto-height
+      :columns="columns"
+      :current="query.cursor"
+      :data-source="list"
+      :loading="loading"
+      :page-size="query.limit"
+      :scroll-x="1000"
+      :total="total"
+      @page-change="handlePageChange"
+    >
           <template #headerCell="{ column }">
             <template v-if="column.key === 'actions'">
               <div class="column-title column-title--actions">
@@ -786,24 +751,14 @@ loadData(true);
               </Tooltip>
             </div>
           </template>
+          <template v-else>
+            {{ stringifyCellValue(getColumnValue(record, column)) }}
           </template>
-        </Table>
-      </div>
-
-      <div ref="pagerRef" class="pager">
-        <Pagination
-          :current="query.cursor"
-          :page-size="query.limit"
-          :total="total"
-          show-size-changer
-          @change="handlePageChange"
-          @show-size-change="handlePageChange"
-        />
-      </div>
-    </Card>
-    <Card v-else class="resource-card">
+          </template>
+    </AdminConfigTable>
+    <div v-else class="resource-permission-empty">
       <Empty description="暂无查看权限" />
-    </Card>
+    </div>
 
     <ResourceBatchDrawer
       :initial-sys-origin="query.sysOrigin"
@@ -828,14 +783,6 @@ loadData(true);
   min-height: 0;
 }
 
-.pager {
-  border-top: 1px solid rgb(237 240 244);
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: flex-end;
-  padding: 10px 12px;
-}
-
 .column-title {
   align-items: center;
   display: inline-flex;
@@ -935,110 +882,15 @@ loadData(true);
   color: rgb(22 119 255);
 }
 
-.resource-card {
+.resource-permission-empty {
+  align-items: center;
+  background: #fff;
   border: 1px solid rgb(229 231 235);
   border-radius: 8px;
-  box-shadow: none;
   display: flex;
   flex: 1 1 auto;
-  flex-direction: column;
-  height: 100%;
+  justify-content: center;
   min-height: 0;
-  overflow: hidden;
-}
-
-.resource-card :deep(.ant-card-body) {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-  padding: 0;
-}
-
-.resource-table-area {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.resource-table :deep(.ant-table) {
-  color: rgb(52 64 84);
-  font-size: var(--density-table-body-font-size);
-}
-
-.resource-table {
-  height: 100%;
-  width: 100%;
-}
-
-.resource-table :deep(.ant-spin-nested-loading),
-.resource-table :deep(.ant-spin-container) {
-  height: 100%;
-  min-height: 0;
-}
-
-.resource-table :deep(.ant-spin-container) {
-  display: flex;
-  flex-direction: column;
-}
-
-.resource-table :deep(.ant-table) {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.resource-table :deep(.ant-table-container) {
-  min-height: 0;
-}
-
-.resource-table :deep(.ant-table-thead > tr > th) {
-  background: #fafafa;
-  border-bottom-color: rgb(237 240 244);
-  color: rgb(71 84 103);
-  font-size: var(--density-table-header-font-size);
-  font-weight: 500;
-  line-height: 1.35;
-  height: var(--density-table-header-height);
-  padding: 8px var(--density-table-cell-padding-x);
-}
-
-.resource-table :deep(.ant-table-thead > tr > th::before) {
-  background-color: rgb(237 240 244) !important;
-}
-
-.resource-table :deep(.ant-table-tbody > tr > td) {
-  border-bottom-color: rgb(237 240 244);
-  height: var(--density-table-row-height);
-  line-height: 1.35;
-  padding: 3px var(--density-table-cell-padding-x);
-}
-
-.resource-table :deep(.ant-table-body) {
-  overflow-y: auto !important;
-}
-
-.resource-table :deep(.switch-column) {
-  padding-left: var(--density-table-fixed-cell-padding-x) !important;
-  padding-right: var(--density-table-fixed-cell-padding-x) !important;
-}
-
-.resource-table :deep(.action-column) {
-  padding-left: var(--density-table-fixed-cell-padding-x) !important;
-  padding-right: var(--density-table-fixed-cell-padding-x) !important;
-}
-
-.resource-table :deep(.ant-table-tbody > tr:hover > td) {
-  background: rgb(250 252 255);
-}
-
-.resource-table :deep(.ant-table-cell-fix-left),
-.resource-table :deep(.ant-table-cell-fix-right) {
-  background: #fff;
-}
-
-.resource-table :deep(.ant-table-tbody > tr:hover > .ant-table-cell-fix-left),
-.resource-table :deep(.ant-table-tbody > tr:hover > .ant-table-cell-fix-right) {
-  background: rgb(250 252 255);
 }
 
 .compact-switch {
diff --git a/apps/src/views/resident-activity/room-turnover-reward.vue b/apps/src/views/resident-activity/room-turnover-reward.vue
index 7779684..fde10e8 100644
--- a/apps/src/views/resident-activity/room-turnover-reward.vue
+++ b/apps/src/views/resident-activity/room-turnover-reward.vue
@@ -75,6 +75,7 @@ const roomDetailsOpen = ref(false);
 const activeRoomId = ref<number | string>('');
 
 const form = reactive<Record<string, any>>({
+  autoRewardEnabled: true,
   configured: false,
   enabled: false,
   id: 0,
@@ -140,6 +141,7 @@ const enabledLevelCount = computed(() =>
 
 function normalizeConfig(result: Record<string, any> | null | undefined) {
   const value = result || {};
+  form.autoRewardEnabled = value.autoRewardEnabled !== false;
   form.configured = Boolean(value.configured);
   form.enabled = Boolean(value.enabled);
   form.id = value.id || 0;
@@ -282,6 +284,7 @@ async function submitForm() {
   saving.value = true;
   try {
     await saveRoomTurnoverRewardConfig({
+      autoRewardEnabled: Boolean(form.autoRewardEnabled),
       enabled: Boolean(form.enabled),
       id: form.id || 0,
       levelConfigs: (form.levelConfigs || []).map((item: Record<string, any>) => ({
@@ -386,6 +389,9 @@ watch(
         <Tag :color="form.enabled ? 'success' : 'default'">
           {{ form.enabled ? '已启用' : '已关闭' }}
         </Tag>
+        <Tag :color="form.autoRewardEnabled ? 'success' : 'warning'">
+          {{ form.autoRewardEnabled ? '自动发放' : '手动领取' }}
+        </Tag>
         <Tag color="processing">按达到的最高档发放一次</Tag>
         <Button :loading="loading" @click="reloadAll">刷新</Button>
       </div>
@@ -394,6 +400,8 @@ watch(
         <Space align="center" wrap>
           <span class="field-label">启用</span>
           <Switch v-model:checked="form.enabled" />
+          <span class="field-label">自动发放</span>
+          <Switch v-model:checked="form.autoRewardEnabled" />
           <span class="field-label">结算时区</span>
           <Input v-model:value="form.timezone" style="width: 180px" />
           <span class="sub-text">更新时间：{{ form.updateTime || '-' }}</span>
diff --git a/apps/src/views/resident-activity/voice-room-rocket.vue b/apps/src/views/resident-activity/voice-room-rocket.vue
index 9fe9db5..4b4826e 100644
--- a/apps/src/views/resident-activity/voice-room-rocket.vue
+++ b/apps/src/views/resident-activity/voice-room-rocket.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
@@ -9,16 +9,16 @@ import {
   Card,
   Input,
   InputNumber,
+  message,
   Select,
   Space,
   Spin,
   Switch,
   Table,
-  Tabs,
   TabPane,
+  Tabs,
   Tag,
   TextArea,
-  message,
 } from 'antdv-next';
 
 import {
@@ -37,6 +37,30 @@ defineOptions({ name: 'ResidentVoiceRoomRocketPage' });
 
 const RIYADH_TIMEZONE = 'Asia/Riyadh';
 const DEFAULT_MAX_LEVEL = 6;
+const RULE_TEXT_LOCALES = [
+  { label: 'English', value: 'en' },
+  { label: '中文', value: 'zh-CN' },
+];
+const RULE_TEXT_FONT_SIZE_OPTIONS = [
+  { label: '12px', value: '12px' },
+  { label: '14px', value: '14px' },
+  { label: '16px', value: '16px' },
+  { label: '18px', value: '18px' },
+  { label: '20px', value: '20px' },
+  { label: '24px', value: '24px' },
+  { label: '28px', value: '28px' },
+  { label: '32px', value: '32px' },
+];
+const RULE_TEXT_COLOR_OPTIONS = [
+  { label: '默认黑', value: '#111827' },
+  { label: '灰色', value: '#6b7280' },
+  { label: '红色', value: '#ef4444' },
+  { label: '橙色', value: '#f97316' },
+  { label: '黄色', value: '#eab308' },
+  { label: '绿色', value: '#22c55e' },
+  { label: '蓝色', value: '#3b82f6' },
+  { label: '紫色', value: '#8b5cf6' },
+];
 
 type LevelRow = {
   enabled: boolean;
@@ -54,15 +78,15 @@ type RewardRow = {
   enabled: boolean;
   expireDays?: null | number;
   id?: number | string;
-  localKey: string;
   level: number;
+  localKey: string;
   rewardAmount: number;
+  rewardCopies: number;
   rewardCover: string;
   rewardItemId?: null | number | string;
   rewardName: string;
   rewardScene: string;
   rewardType: string;
-  rewardCopies: number;
   sort: number;
   weight: number;
 };
@@ -109,19 +133,28 @@ const configForm = reactive({
   maxLevel: DEFAULT_MAX_LEVEL,
   rankingTopLimit: 100,
   rewardRecordKeepDays: 35,
-  ruleTextText: '{}',
+  ruleTextMap: Object.fromEntries(
+    RULE_TEXT_LOCALES.map((item) => [item.value, '']),
+  ) as Record<string, string>,
   timezone: RIYADH_TIMEZONE,
   updateTime: '',
 });
 
 const levelRows = ref<LevelRow[]>([]);
 const rewardRows = ref<RewardRow[]>([]);
+const ruleTextLocale = ref(RULE_TEXT_LOCALES[0]?.value || 'zh-CN');
+const ruleTextExtra = ref<Record<string, unknown>>({});
+const ruleEditorRef = ref<HTMLElement | null>(null);
+const ruleTextColor = ref(RULE_TEXT_COLOR_OPTIONS[0]?.value || '#111827');
+const ruleTextFontSize = ref(RULE_TEXT_FONT_SIZE_OPTIONS[2]?.value || '16px');
+const ruleTextSavedRange = ref<null | Range>(null);
 
 const resourcePickerOpen = ref(false);
 const resourcePickerTitle = ref('选择资源');
 const resourcePickerDefaultType = ref('ALL_PROPS');
 const resourcePickerFixedType = ref(false);
 const resourcePickerTarget = ref<
+  | null
   | {
       field: LevelResourceField;
       kind: 'level';
@@ -131,7 +164,6 @@ const resourcePickerTarget = ref<
       kind: 'reward';
       row: Record<string, any>;
     }
-  | null
 >(null);
 
 const sceneOptions = [
@@ -232,6 +264,199 @@ function stringifyJSON(value: unknown) {
   return JSON.stringify(value, null, 2);
 }
 
+function trimEditorHTML(value: string) {
+  const html = String(value || '').trim();
+  return html === '<br>' || html === '<div><br></div>' ? '' : html;
+}
+
+function extractRuleTextHTML(value: unknown) {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const record = value as Record<string, unknown>;
+    const html = record.html ?? record.content ?? record.value;
+    return typeof html === 'string' ? html : JSON.stringify(value, null, 2);
+  }
+  return '';
+}
+
+function renderRuleTextEditor() {
+  void nextTick(() => {
+    const editor = ruleEditorRef.value;
+    if (!editor) {
+      return;
+    }
+    const html = configForm.ruleTextMap[ruleTextLocale.value] || '';
+    if (editor.innerHTML !== html) {
+      editor.innerHTML = html;
+    }
+  });
+}
+
+function normalizeRuleText(value: unknown) {
+  const nextMap = Object.fromEntries(
+    RULE_TEXT_LOCALES.map((item) => [item.value, '']),
+  ) as Record<string, string>;
+  const extra: Record<string, unknown> = {};
+
+  if (typeof value === 'string') {
+    nextMap['zh-CN'] = value;
+  } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const localeSet = new Set(RULE_TEXT_LOCALES.map((item) => item.value));
+    Object.entries(value as Record<string, unknown>).forEach(([key, item]) => {
+      if (localeSet.has(key)) {
+        nextMap[key] = extractRuleTextHTML(item);
+      } else {
+        extra[key] = item;
+      }
+    });
+  }
+
+  configForm.ruleTextMap = nextMap;
+  ruleTextExtra.value = extra;
+  renderRuleTextEditor();
+}
+
+function sanitizeRuleTextHTML(value: string) {
+  const html = trimEditorHTML(value);
+  if (!html || typeof document === 'undefined') {
+    return html;
+  }
+
+  const container = document.createElement('div');
+  container.innerHTML = html;
+  container
+    .querySelectorAll('script, style, iframe, object, embed, link, meta')
+    .forEach((node) => node.remove());
+  container.querySelectorAll('*').forEach((node) => {
+    [...node.attributes].forEach((attr) => {
+      const name = attr.name.toLowerCase();
+      const attributeValue = attr.value.trim().toLowerCase();
+      if (name.startsWith('on') || attributeValue.startsWith('javascript:')) {
+        node.removeAttribute(attr.name);
+      }
+    });
+  });
+  return trimEditorHTML(container.innerHTML);
+}
+
+function syncRuleTextFromEditor(locale = ruleTextLocale.value) {
+  const editor = ruleEditorRef.value;
+  if (!editor || !locale) {
+    return;
+  }
+  configForm.ruleTextMap[locale] = sanitizeRuleTextHTML(editor.innerHTML);
+}
+
+function saveRuleTextSelection() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const editor = ruleEditorRef.value;
+  const selection = window.getSelection();
+  if (!editor || !selection || selection.rangeCount === 0) {
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  if (editor.contains(range.commonAncestorContainer)) {
+    ruleTextSavedRange.value = range.cloneRange();
+  }
+}
+
+function restoreRuleTextSelection() {
+  const editor = ruleEditorRef.value;
+  if (!editor || typeof window === 'undefined') {
+    return;
+  }
+  editor.focus();
+  const selection = window.getSelection();
+  const range = ruleTextSavedRange.value;
+  if (!selection || !range || !editor.contains(range.commonAncestorContainer)) {
+    return;
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function normalizeGeneratedFontTags(fontSize?: string) {
+  const editor = ruleEditorRef.value;
+  if (!editor) {
+    return;
+  }
+  editor.querySelectorAll('font').forEach((node) => {
+    const span = document.createElement('span');
+    const color = node.getAttribute('color');
+    span.innerHTML = node.innerHTML;
+    if (color) {
+      span.style.color = color;
+    }
+    if (fontSize && node.getAttribute('size')) {
+      span.style.fontSize = fontSize;
+    }
+    node.replaceWith(span);
+  });
+}
+
+function applyRuleTextCommand(command: string, value?: string) {
+  restoreRuleTextSelection();
+  document.execCommand(command, false, value);
+  normalizeGeneratedFontTags();
+  syncRuleTextFromEditor();
+  saveRuleTextSelection();
+}
+
+function clearRuleTextFormat() {
+  applyRuleTextCommand('removeFormat');
+}
+
+function applyRuleTextFontSize(value: string) {
+  ruleTextFontSize.value = value;
+  restoreRuleTextSelection();
+  document.execCommand('fontSize', false, '7');
+  normalizeGeneratedFontTags(value);
+  syncRuleTextFromEditor();
+  saveRuleTextSelection();
+}
+
+function applyRuleTextColor(value: string) {
+  ruleTextColor.value = value;
+  restoreRuleTextSelection();
+  document.execCommand('foreColor', false, value);
+  normalizeGeneratedFontTags();
+  syncRuleTextFromEditor();
+  saveRuleTextSelection();
+}
+
+function handleRuleTextFontSizeChange(value: string) {
+  applyRuleTextFontSize(value);
+}
+
+function handleRuleTextColorInput(event: Event) {
+  const target = event.target as HTMLInputElement | null;
+  if (target?.value) {
+    applyRuleTextColor(target.value);
+  }
+}
+
+function handleRuleTextPaste() {
+  window.setTimeout(() => syncRuleTextFromEditor());
+}
+
+function buildRuleTextPayload() {
+  syncRuleTextFromEditor();
+  const payload: Record<string, unknown> = { ...ruleTextExtra.value };
+  RULE_TEXT_LOCALES.forEach((item) => {
+    const html = sanitizeRuleTextHTML(configForm.ruleTextMap[item.value] || '');
+    if (html) {
+      payload[item.value] = html;
+    } else {
+      delete payload[item.value];
+    }
+  });
+  return payload;
+}
+
 function parseJSONText(value: string, label: string) {
   const raw = String(value || '').trim();
   if (!raw) {
@@ -263,7 +488,7 @@ function toOptionalString(value: unknown) {
   return text || undefined;
 }
 
-function normalizeConfig(value: Record<string, any> | null | undefined) {
+function normalizeConfig(value: null | Record<string, any> | undefined) {
   const next = value || {};
   configForm.broadcastDurationSeconds = toNumber(
     next.broadcastDurationSeconds,
@@ -280,7 +505,7 @@ function normalizeConfig(value: Record<string, any> | null | undefined) {
   configForm.maxLevel = toNumber(next.maxLevel, DEFAULT_MAX_LEVEL);
   configForm.rankingTopLimit = toNumber(next.rankingTopLimit, 100);
   configForm.rewardRecordKeepDays = toNumber(next.rewardRecordKeepDays, 35);
-  configForm.ruleTextText = stringifyJSON(next.ruleText);
+  normalizeRuleText(next.ruleText);
   configForm.timezone = RIYADH_TIMEZONE;
   configForm.updateTime = String(next.updateTime || '');
 }
@@ -495,10 +720,7 @@ async function saveConfig() {
   if (energyRuleJson === undefined) {
     return;
   }
-  const ruleText = parseJSONText(configForm.ruleTextText, '规则说明');
-  if (ruleText === undefined) {
-    return;
-  }
+  const ruleText = buildRuleTextPayload();
   configSaving.value = true;
   try {
     const result = await saveVoiceRoomRocketConfig({
@@ -554,7 +776,7 @@ function addRewardRow(scene = 'TOP1', rewardType = 'GOLD') {
     rewardAmount: isNone ? 0 : 1,
     rewardCover: '',
     rewardItemId: null,
-    rewardName: isNone ? '轮空' : rewardType === 'GOLD' ? '金币' : '',
+    rewardName: isNone ? '轮空' : (rewardType === 'GOLD' ? '金币' : ''),
     rewardScene: scene,
     rewardType,
     rewardCopies: 1,
@@ -692,6 +914,11 @@ watch(
 watch(rewardLevel, () => {
   void loadRewards();
 });
+
+watch(ruleTextLocale, (_next, previous) => {
+  syncRuleTextFromEditor(previous);
+  renderRuleTextEditor();
+});
 </script>
 
 <template>
@@ -786,14 +1013,98 @@ watch(rewardLevel, () => {
                     class="field-control"
                   />
                 </label>
-                <label class="field-row field-wide">
-                  <span>规则说明 JSON</span>
-                  <TextArea
-                    v-model:value="configForm.ruleTextText"
-                    :rows="4"
-                    class="field-control"
-                  />
-                </label>
+                <div class="field-row field-wide">
+                  <span>规则说明富文本</span>
+                  <div class="rule-editor-panel">
+                    <div class="rule-editor-toolbar" @mousedown="saveRuleTextSelection">
+                      <Space wrap>
+                        <Select
+                          v-model:value="ruleTextLocale"
+                          :options="RULE_TEXT_LOCALES"
+                          class="rule-editor-locale"
+                        />
+                        <Select
+                          v-model:value="ruleTextFontSize"
+                          :options="RULE_TEXT_FONT_SIZE_OPTIONS"
+                          class="rule-editor-size"
+                          @change="handleRuleTextFontSizeChange"
+                        />
+                        <div class="rule-editor-colors">
+                          <button
+                            v-for="item in RULE_TEXT_COLOR_OPTIONS"
+                            :key="item.value"
+                            :aria-label="item.label"
+                            :class="{
+                              'rule-color-swatch--active': ruleTextColor === item.value,
+                            }"
+                            :style="{ backgroundColor: item.value }"
+                            class="rule-color-swatch"
+                            type="button"
+                            @mousedown.prevent="applyRuleTextColor(item.value)"
+                          ></button>
+                          <input
+                            :value="ruleTextColor"
+                            aria-label="自定义字体颜色"
+                            class="rule-color-picker"
+                            type="color"
+                            @input="handleRuleTextColorInput"
+                            @mousedown="saveRuleTextSelection"
+                          />
+                        </div>
+                      </Space>
+                      <Space wrap>
+                        <Button
+                          size="small"
+                          @mousedown.prevent="applyRuleTextCommand('bold')"
+                        >
+                          <strong>B</strong>
+                        </Button>
+                        <Button
+                          size="small"
+                          @mousedown.prevent="applyRuleTextCommand('italic')"
+                        >
+                          <em>I</em>
+                        </Button>
+                        <Button
+                          size="small"
+                          @mousedown.prevent="applyRuleTextCommand('underline')"
+                        >
+                          <u>U</u>
+                        </Button>
+                        <Button
+                          size="small"
+                          @mousedown.prevent="
+                            applyRuleTextCommand('insertUnorderedList')
+                          "
+                        >
+                          无序列表
+                        </Button>
+                        <Button
+                          size="small"
+                          @mousedown.prevent="
+                            applyRuleTextCommand('insertOrderedList')
+                          "
+                        >
+                          有序列表
+                        </Button>
+                        <Button size="small" @mousedown.prevent="clearRuleTextFormat">
+                          清除格式
+                        </Button>
+                      </Space>
+                    </div>
+                    <div
+                      ref="ruleEditorRef"
+                      class="rule-editor"
+                      contenteditable="true"
+                      data-placeholder="请输入规则说明"
+                      @blur="syncRuleTextFromEditor()"
+                      @keyup="saveRuleTextSelection"
+                      @input="syncRuleTextFromEditor()"
+                      @mouseup="saveRuleTextSelection"
+                      @paste="handleRuleTextPaste"
+                    ></div>
+                  </div>
+                </div>
               </div>
 
               <div class="actions">
@@ -1152,6 +1463,76 @@ watch(rewardLevel, () => {
   width: 100%;
 }
 
+.rule-editor-panel {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.rule-editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.rule-editor-locale {
+  width: 120px;
+}
+
+.rule-editor-size {
+  width: 96px;
+}
+
+.rule-editor-colors {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.rule-color-swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.rule-color-swatch--active {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgb(22 119 255 / 16%);
+}
+
+.rule-color-picker {
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.rule-editor {
+  min-height: 180px;
+  max-height: 360px;
+  padding: 12px;
+  overflow: auto;
+  color: #111827;
+  outline: none;
+}
+
+.rule-editor:empty::before {
+  color: #bfbfbf;
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
 .actions {
   display: flex;
   justify-content: flex-end;