feat(shop): 新增首页专区管理功能

- 在商品模型中添加所属专区字段 sectionIds，支持逗号分隔字符串
- 商品编辑界面增加所属专区多选下拉框，联动专区数据
- 新增首页专区相关接口，包括分页查询、增删改查及权限校验等
- 实现首页专区列表页面，支持专区的增删改查及状态切换
- 新增专区白名单用户管理弹窗，支持多选用户设置白名单
- 实现专区商品列表抽屉，支持分页查看专区内商品
- 首页专区编辑弹窗支持标题、副标题、banner等多字段编辑及上传功能
- 完善专区管理界面交互和表格展示，支持搜索和状态筛选功能

src/api/shop/shopGoods/model/index.ts

@@ -151,6 +151,8 @@ export interface ShopGoods {
   activityType?: number;
   // 配送方式：0送上门 1限自提
   deliveryMode?: number;
+  // 所属专区（逗号分隔的 sectionId 字符串，对应 shop_goods.section_ids 列）
+  sectionIds?: string;
 }
 
 export interface BathSet {

src/api/shop/shopZone/index.ts

@@ -0,0 +1,156 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type {
+  HomeSection,
+  HomeSectionParam,
+  SectionPermission,
+  SectionGoods,
+  SectionUser
+} from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询首页专区
+ */
+export async function pageHomeSections(params: HomeSectionParam) {
+  const res = await request.get<ApiResult<PageResult<HomeSection>>>(
+    MODULES_API_URL + '/shop/shop-home-section/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询首页专区列表
+ */
+export async function listHomeSections(params?: HomeSectionParam) {
+  const res = await request.get<ApiResult<HomeSection[]>>(
+    MODULES_API_URL + '/shop/shop-home-section',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询首页专区
+ */
+export async function getHomeSection(id: number) {
+  const res = await request.get<ApiResult<HomeSection>>(
+    MODULES_API_URL + '/shop/shop-home-section/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加首页专区
+ */
+export async function addHomeSection(data: HomeSection) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-home-section',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改首页专区
+ */
+export async function updateHomeSection(data: HomeSection) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-home-section',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除首页专区
+ */
+export async function removeHomeSection(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-home-section/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询专区白名单用户
+ */
+export async function listSectionUsers(id: number) {
+  const res = await request.get<ApiResult<SectionUser[]>>(
+    MODULES_API_URL + '/shop/shop-home-section/' + id + '/users'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 保存专区白名单用户（覆盖式）
+ */
+export async function setSectionUsers(id: number, userIds: number[]) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/shop-home-section/' + id + '/users',
+    userIds
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询专区商品分页
+ */
+export async function listSectionGoods(
+  id: number,
+  params?: { page?: number; limit?: number }
+) {
+  const res = await request.get<ApiResult<PageResult<SectionGoods>>>(
+    MODULES_API_URL + '/shop/shop-home-section/' + id + '/goods',
+    {
+      params: { page: 1, limit: 10, ...params }
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 校验专区访问权限
+ */
+export async function checkSectionPermission(sectionIds: number[]) {
+  const res = await request.post<ApiResult<SectionPermission[]>>(
+    MODULES_API_URL + '/shop/shop-home-section/check-permission',
+    { sectionIds }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/shop/shopZone/model/index.ts

@@ -0,0 +1,88 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 首页专区
+ */
+export interface HomeSection {
+  // 专区ID
+  sectionId?: number;
+  // 租户id
+  tenantId?: number;
+  // 专区标题
+  title?: string;
+  // 专区副标题
+  subtitle?: string;
+  // banner 图片URL
+  banner?: string;
+  // 关联分类ID（逗号分隔字符串，可选）
+  categoryIds?: string;
+  // 样式类型 0默认
+  styleType?: number;
+  // 是否受限专区 0否 1是
+  restricted?: number;
+  // 排序号（数字越小越靠前）
+  sortNumber?: number;
+  // 状态 0正常 1禁用
+  status?: number;
+  // 生效开始时间
+  startTime?: string;
+  // 生效结束时间
+  endTime?: string;
+  // 用户ID
+  userId?: number;
+  // 是否删除 0否 1是
+  deleted?: number;
+  // 创建时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+}
+
+/**
+ * 首页专区搜索条件
+ */
+export interface HomeSectionParam extends PageParam {
+  // 专区标题（模糊）
+  title?: string;
+  // 状态 0正常 1禁用
+  status?: number;
+  // 是否受限专区 0/1
+  restricted?: number;
+  // 排序号
+  sortNumber?: number;
+}
+
+/**
+ * 专区权限校验结果
+ */
+export interface SectionPermission {
+  // 专区ID
+  sectionId?: number;
+  // 是否受限专区
+  restricted?: boolean;
+  // 当前用户是否允许访问
+  allowed?: boolean;
+}
+
+/**
+ * 专区商品（只读展示，字段按需取用）
+ */
+export interface SectionGoods {
+  goodsId?: number;
+  name?: string;
+  image?: string;
+  price?: string;
+  salePrice?: string;
+  stock?: number;
+  status?: number;
+  [key: string]: any;
+}
+
+/**
+ * 专区白名单用户
+ */
+export interface SectionUser {
+  id?: number;
+  sectionId?: number;
+  userId?: number;
+}

src/views/shop/shopGoods/components/shopGoodsEdit.vue

@@ -48,6 +48,17 @@
               @change="onCategoryIds"
             />
           </a-form-item>
+          <a-form-item label="所属专区" name="sectionIds">
+            <a-select
+              v-model:value="sectionIdList"
+              mode="multiple"
+              :max-tag-count="3"
+              :options="zoneOptions"
+              style="width: 320px"
+              placeholder="请选择所属专区（可多选）"
+              allow-clear
+            />
+          </a-form-item>
           <a-form-item label="商品编码" name="code">
             <a-input
               allow-clear
@@ -709,6 +720,7 @@ import {ShopExpressTemplate} from '@/api/shop/shopExpressTemplate/model';
 import {listShopExpressTemplate} from '@/api/shop/shopExpressTemplate';
 import {listShopCommissionRole} from '@/api/shop/shopCommissionRole';
 import {listShopGoodsRoleCommission} from '@/api/shop/shopGoodsRoleCommission';
+import {listHomeSections} from '@/api/shop/shopZone';
 
 // 是否是修改
 const isUpdate = ref(false);
@@ -859,6 +871,9 @@ const skuList = ref<ShopGoodsSku[]>([]);
 const files = ref<ItemType[]>([]);
 const goodsSpec = ref<ShopGoodsSpec>();
 const category = ref<string[]>([]);
+// 所属专区（多选）
+const sectionIdList = ref<number[]>([]);
+const zoneOptions = ref<{ label: string; value: number }[]>([]);
 
 // 批量设置
 const batchPrice = ref<number | undefined>(undefined);
@@ -1803,6 +1818,10 @@ const save = () => {
 
       const formData: any = {
         ...form,
+        // 所属专区：数字数组 -> 逗号分隔字符串
+        sectionIds: sectionIdList.value.length
+          ? sectionIdList.value.join(',')
+          : '',
         content: content.value,
         category: JSON.stringify(category.value),
         files: JSON.stringify(files.value),
@@ -1966,8 +1985,20 @@ watch(
   async (visible) => {
     if (visible) {
       await getExpressTemplateList();
+      // 加载所属专区选项
+      listHomeSections({})
+        .then((list) => {
+          zoneOptions.value = (list || []).map((z) => ({
+            label: z.title || '',
+            value: z.sectionId as number
+          }));
+        })
+        .catch(() => {
+          zoneOptions.value = [];
+        });
 
       images.value = [];
+      sectionIdList.value = [];
       category.value = [];
       files.value = [];
       videos.value = [];
@@ -1976,6 +2007,13 @@ watch(
       ensureTagItem.value = '';
       if (props.data) {
         assignObject(form, props.data);
+        // 所属专区：逗号分隔字符串 -> 数字数组
+        sectionIdList.value = form.sectionIds
+          ? form.sectionIds
+              .split(',')
+              .map((s) => Number(s.trim()))
+              .filter((n) => !Number.isNaN(n))
+          : [];
         if (form.commissionType === undefined || form.commissionType === null) {
           form.commissionType = 10;
         }

src/views/special/zone/components/UserSelectModal.vue

@@ -0,0 +1,161 @@
+<!-- 白名单用户多选弹窗 -->
+<template>
+  <ele-modal
+    :width="820"
+    :visible="visible"
+    :maskClosable="false"
+    title="设置专区白名单用户"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="confirm"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="userId"
+      :datasource="datasource"
+      :columns="columns"
+      :row-selection="rowSelection"
+      :pagination="true"
+      :page-size="10"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-input-search
+            allow-clear
+            v-model:value="searchText"
+            placeholder="姓名/手机号/昵称"
+            style="width: 220px"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
+      </template>
+    </ele-pro-table>
+    <div class="mt-2 ele-text-secondary">
+      已选 {{ rowSelection.selectedRowKeys.length }} 人
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { pageUsers } from '@/api/system/user';
+  import { EleProTable } from 'ele-admin-pro';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 专区ID
+    sectionId?: number;
+    // 已选用户ID
+    selectedUserIds?: number[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'confirm', userIds: number[]): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref<string>('');
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+      width: 80
+    },
+    {
+      title: '姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'mobile',
+      key: 'mobile',
+      align: 'center'
+    },
+    {
+      title: '昵称',
+      dataIndex: 'nickname',
+      key: 'nickname',
+      align: 'center'
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'organizationName',
+      key: 'organizationName',
+      align: 'center'
+    }
+  ]);
+
+  // 多选配置
+  const rowSelection = reactive({
+    type: 'checkbox' as const,
+    selectedRowKeys: [] as number[],
+    onChange: (keys: (string | number)[]) => {
+      rowSelection.selectedRowKeys = keys.map((k) => Number(k));
+    }
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    return pageUsers({
+      isStaff: true,
+      keywords: searchText.value,
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = () => {
+    tableRef?.value?.reload({ page: 1 });
+  };
+
+  /* 确认保存 */
+  const confirm = () => {
+    emit('confirm', [...rowSelection.selectedRowKeys]);
+    updateVisible(false);
+  };
+
+  // 打开弹窗时初始化已选
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        rowSelection.selectedRowKeys = props.selectedUserIds
+          ? [...props.selectedUserIds]
+          : [];
+        if (tableRef.value) {
+          // 等待表格挂载后刷新
+          setTimeout(() => reload(), 0);
+        }
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less"></style>

src/views/special/zone/components/zoneEdit.vue

@@ -0,0 +1,251 @@
+<!-- 首页专区编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="640"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑专区' : '添加专区'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ flex: '90px' }"
+      :wrapper-col="{ flex: '1' }"
+    >
+      <a-form-item label="专区标题" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入专区标题"
+          v-model:value="form.title"
+          style="width: 100%"
+        />
+      </a-form-item>
+      <a-form-item label="副标题" name="subtitle">
+        <a-input
+          allow-clear
+          placeholder="可选，专区副标题"
+          v-model:value="form.subtitle"
+          style="width: 100%"
+        />
+      </a-form-item>
+      <a-form-item label="banner图" name="banner">
+        <a-upload
+          :before-upload="handleBannerUpload"
+          :show-upload-list="false"
+          accept="image/*"
+        >
+          <a-button v-if="!form.banner">
+            <template #icon><UploadOutlined /></template>
+            上传 banner
+          </a-button>
+          <div v-else class="flex items-center gap-2">
+            <img :src="form.banner" style="width: 120px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #d9d9d9;" />
+            <a-button type="text" danger size="small" @click.stop="form.banner = undefined">删除</a-button>
+          </div>
+        </a-upload>
+      </a-form-item>
+      <a-form-item label="关联分类" name="categoryIds">
+        <a-input
+          allow-clear
+          placeholder="可选，分类ID逗号分隔，如：1,2,3"
+          v-model:value="form.categoryIds"
+          style="width: 100%"
+        />
+      </a-form-item>
+      <a-form-item label="样式类型" name="styleType">
+        <a-input-number
+          :min="0"
+          :max="99"
+          style="width: 100%"
+          placeholder="默认0"
+          v-model:value="form.styleType"
+        />
+      </a-form-item>
+      <a-form-item label="是否受限" name="restricted">
+        <a-switch
+          size="small"
+          v-model:checked="form.restricted"
+          :checked-value="1"
+          :un-checked-value="0"
+          checked-children="受限专区"
+          un-checked-children="普通专区"
+        />
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          style="width: 100%"
+          placeholder="数值越小越靠前"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-switch
+          size="small"
+          v-model:checked="form.status"
+          :checked-value="0"
+          :un-checked-value="1"
+          checked-children="正常"
+          un-checked-children="禁用"
+        />
+      </a-form-item>
+      <a-form-item label="生效开始" name="startTime">
+        <a-date-picker
+          show-time
+          style="width: 100%"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="可选，专区生效开始时间"
+          :value="form.startTime || undefined"
+          @update:value="(val: any) => (form.startTime = val || undefined)"
+        />
+      </a-form-item>
+      <a-form-item label="生效结束" name="endTime">
+        <a-date-picker
+          show-time
+          style="width: 100%"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="可选，专区生效结束时间"
+          :value="form.endTime || undefined"
+          @update:value="(val: any) => (form.endTime = val || undefined)"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { addHomeSection, updateHomeSection } from '@/api/shop/shopZone';
+  import { uploadFile } from '@/api/system/file';
+  import type { HomeSection } from '@/api/shop/shopZone/model';
+  import type { FormInstance } from 'ant-design-vue/es/form';
+
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    visible: boolean;
+    data?: HomeSection | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const loading = ref(false);
+  const formRef = ref<FormInstance | null>(null);
+
+  const form = reactive<HomeSection>({
+    sectionId: undefined,
+    tenantId: undefined,
+    title: undefined,
+    subtitle: undefined,
+    banner: undefined,
+    categoryIds: undefined,
+    styleType: 0,
+    restricted: 0,
+    sortNumber: 100,
+    status: 0,
+    startTime: undefined,
+    endTime: undefined,
+    userId: undefined,
+    deleted: 0,
+    createTime: undefined,
+    updateTime: undefined
+  });
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules: Record<string, any> = {
+    title: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入专区标题',
+        trigger: 'blur'
+      }
+    ]
+  };
+
+  const save = () => {
+    if (!formRef.value) return;
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateHomeSection : addHomeSection;
+        saveOrUpdate({ ...form })
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  // banner 上传
+  const handleBannerUpload = async (file: File) => {
+    const isImage = file.type?.startsWith('image/');
+    if (!isImage) {
+      message.error('只能上传图片文件');
+      return false;
+    }
+    try {
+      const res = await uploadFile(file);
+      if (res?.path) {
+        form.banner = res.path;
+      }
+    } catch (e: any) {
+      message.error(e.message || '上传失败');
+    }
+    return false; // 阻止默认上传
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          isUpdate.value = true;
+        } else {
+          Object.assign(form, {
+            sectionId: undefined,
+            tenantId: undefined,
+            title: undefined,
+            subtitle: undefined,
+            banner: undefined,
+            categoryIds: undefined,
+            styleType: 0,
+            restricted: 0,
+            sortNumber: 100,
+            status: 0,
+            startTime: undefined,
+            endTime: undefined
+          });
+          isUpdate.value = false;
+        }
+      } else {
+        formRef.value?.resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/special/zone/index.vue

@@ -0,0 +1,380 @@
+<!-- 首页专区管理 -->
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="sectionId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <a-space :size="10" style="flex-wrap: wrap">
+              <a-input-search
+                v-model:value="where.title"
+                placeholder="搜索专区标题"
+                allow-clear
+                style="width: 200px"
+                @search="() => reload()"
+                @pressEnter="() => reload()"
+              />
+              <a-select
+                v-model:value="where.status"
+                placeholder="状态"
+                allow-clear
+                style="width: 120px"
+                @change="() => reload()"
+              >
+                <a-select-option :value="0">正常</a-select-option>
+                <a-select-option :value="1">禁用</a-select-option>
+              </a-select>
+              <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+                <template #icon><PlusOutlined /></template>
+                <span>添加专区</span>
+              </a-button>
+            </a-space>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'banner'">
+              <img
+                v-if="record.banner"
+                :src="getCompressedImageUrl(record.banner, { width: 96, quality: 85 })"
+                style="max-width: 80px; height: 32px; object-fit: cover; border-radius: 4px;"
+              />
+              <span v-else>-</span>
+            </template>
+            <template v-if="column.key === 'restricted'">
+              <a-tag :color="record.restricted === 1 ? 'red' : 'default'">
+                {{ record.restricted === 1 ? '受限专区' : '普通专区' }}
+              </a-tag>
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-switch
+                :checked="record.status === 0"
+                checked-children="正常"
+                un-checked-children="禁用"
+                size="small"
+                @change="(val: boolean) => toggleStatus(record, val)"
+              />
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">编辑</a>
+                <a-divider type="vertical" />
+                <a @click="openUsers(record)">白名单</a>
+                <a-divider type="vertical" />
+                <a @click="openGoods(record)">商品</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此专区吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+    </div>
+
+    <!-- 编辑弹窗 -->
+    <ZoneEdit v-model:visible="showEdit" :data="current" @done="reload" />
+
+    <!-- 白名单用户选择弹窗 -->
+    <UserSelectModal
+      v-model:visible="showUser"
+      :sectionId="currentSectionId"
+      :selectedUserIds="currentUserIds"
+      @confirm="onSaveUsers"
+    />
+
+    <!-- 专区商品抽屉 -->
+    <a-drawer
+      :width="800"
+      :visible="showGoods"
+      title="专区商品"
+      :maskClosable="false"
+      @update:visible="(v: boolean) => (showGoods = v)"
+    >
+      <a-empty v-if="goodsLoading" description="加载中..." />
+      <template v-else>
+        <a-table
+          row-key="goodsId"
+          :dataSource="goodsList"
+          :columns="goodsColumns"
+          :pagination="{
+            total: goodsTotal,
+            current: goodsPage,
+            pageSize: 10,
+            onChange: (page: number) => {
+              goodsPage = page;
+              loadGoods(currentSectionId);
+            }
+          }"
+          :scroll="{ y: 480 }"
+        >
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.key === 'image'">
+              <img
+                v-if="text"
+                :src="text"
+                style="width: 48px; height: 48px; object-fit: cover; border-radius: 4px;"
+              />
+              <span v-else>-</span>
+            </template>
+          </template>
+        </a-table>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import ZoneEdit from './components/zoneEdit.vue';
+  import UserSelectModal from './components/UserSelectModal.vue';
+  import { getCompressedImageUrl } from '@/utils/image';
+  import {
+    pageHomeSections,
+    removeHomeSection,
+    updateHomeSection,
+    listSectionUsers,
+    setSectionUsers,
+    listSectionGoods
+  } from '@/api/shop/shopZone';
+  import type {
+    HomeSection,
+    HomeSectionParam
+  } from '@/api/shop/shopZone/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 当前编辑数据
+  const current = ref<HomeSection | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 白名单弹窗
+  const showUser = ref(false);
+  const currentSectionId = ref<number>(0);
+  const currentUserIds = ref<number[]>([]);
+
+  // 商品抽屉
+  const showGoods = ref(false);
+  const goodsLoading = ref(false);
+  const goodsList = ref<any[]>([]);
+  const goodsTotal = ref(0);
+  const goodsPage = ref(1);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    return pageHomeSections({
+      ...where,
+      ...orders,
+      page,
+      limit
+    }).then((res) => {
+      return { list: res?.list || [], count: res?.count || 0 };
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'sectionId',
+      key: 'sectionId',
+      align: 'center',
+      width: 70
+    },
+    {
+      title: '专区标题',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'left',
+      minWidth: 160
+    },
+    {
+      title: 'banner',
+      dataIndex: 'banner',
+      key: 'banner',
+      align: 'center',
+      width: 110
+    },
+    {
+      title: '是否受限',
+      dataIndex: 'restricted',
+      key: 'restricted',
+      align: 'center',
+      width: 110
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+      width: 80,
+      sorter: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 90
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      sorter: true,
+      customRender: ({ text }: any) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '操作',
+        key: 'action',
+        width: 220,
+        fixed: 'right',
+        align: 'center',
+        hideInSetting: true
+      }
+  ] as unknown as ColumnItem[]);
+
+  // 商品表格列
+  const goodsColumns = [
+    { title: 'ID', dataIndex: 'goodsId', key: 'goodsId', align: 'center', width: 70 },
+    { title: '商品名称', dataIndex: 'name', key: 'name', align: 'left' },
+    {
+      title: '图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+      width: 90
+    },
+    { title: '商城价', dataIndex: 'price', key: 'price', align: 'center', width: 100 },
+    { title: '库存', dataIndex: 'stock', key: 'stock', align: 'center', width: 90 }
+  ] as any[];
+
+  /* 搜索条件 */
+  const where = ref<HomeSectionParam>({
+    title: '',
+    status: undefined,
+    restricted: undefined,
+    sortNumber: undefined
+  });
+
+  /* 搜索 */
+  const reload = (w?: HomeSectionParam) => {
+    if (w) {
+      where.value = { ...where.value, ...w };
+    }
+    tableRef?.value?.reload({ where: where.value });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: HomeSection) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 切换状态 */
+  const toggleStatus = (row: HomeSection, val: boolean) => {
+    const newStatus = val ? 0 : 1;
+    updateHomeSection({ ...row, status: newStatus })
+      .then((msg) => {
+        message.success(msg);
+        row.status = newStatus;
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 删除单个 */
+  const remove = (row: HomeSection) => {
+    const hide = message.loading('请求中..', 0);
+    removeHomeSection(row.sectionId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 打开白名单弹窗 */
+  const openUsers = (row: HomeSection) => {
+    currentSectionId.value = row.sectionId || 0;
+    listSectionUsers(row.sectionId || 0)
+      .then((list) => {
+        currentUserIds.value = (list || []).map((u) => u.userId || 0).filter(Boolean);
+        showUser.value = true;
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 保存白名单 */
+  const onSaveUsers = (userIds: number[]) => {
+    setSectionUsers(currentSectionId.value, userIds)
+      .then((msg) => {
+        message.success(msg || '白名单已保存');
+        showUser.value = false;
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 打开商品抽屉 */
+  const openGoods = (row: HomeSection) => {
+    currentSectionId.value = row.sectionId || 0;
+    goodsPage.value = 1;
+    showGoods.value = true;
+    loadGoods(row.sectionId || 0);
+  };
+
+  const loadGoods = (sectionId: number) => {
+    goodsLoading.value = true;
+    listSectionGoods(sectionId, { page: goodsPage.value, limit: 10 })
+      .then((res) => {
+        goodsList.value = res?.list || [];
+        goodsTotal.value = res?.count || 0;
+      })
+      .catch((e) => {
+        message.error(e.message);
+      })
+      .finally(() => {
+        goodsLoading.value = false;
+      });
+  };
+
+  /* 行属性：双击编辑 */
+  const customRow = (record: HomeSection) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>