fix: 首页药店分区入口、平台资质管理

apps/web-antd/src/views/system/home-zones/api/index.ts

@@ -0,0 +1,60 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'home-zone/';
+
+/**
+ * 分页查询专区列表
+ * @param data
+ */
+export async function getHomeZonesList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取专区下拉列表
+ * @param data
+ */
+export async function getHomeZonesOption(data?: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取专区详情
+ * @param id
+ */
+export async function getHomeZonesInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增专区
+ * @param data
+ */
+export async function createHomeZones(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑专区
+ * @param data
+ */
+export async function updateHomeZones(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除专区
+ * @param data
+ */
+export async function deleteHomeZones(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}
+
+/**
+ * 更新专区排序
+ * @param data
+ */
+export async function updateHomeZonesSortOrder(data: { ids: (string | number)[] }) {
+  return requestClient.post<any>(`${prefix}update-sort-order`, data);
+}
+

apps/web-antd/src/views/system/home-zones/components/modal.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createHomeZones,
+  updateHomeZones,
+} from '../api';
+import { modalFormProps } from '../config/form';
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        // 处理 store_id，如果为空字符串则设为 null
+        if (values.store_id === '' || values.store_id === undefined) {
+          values.store_id = null;
+        }
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateHomeZones : createHomeZones;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values && update) {
+        // 编辑时，确保所有字段都有值
+        isUpdate.value = true;
+        const formData: any = {
+          id: values.id || '',
+          title: values.title || '',
+          type: values.type || '',
+          icon: values.icon || '',
+          description: values.description || '',
+          sort_order: values.sort_order ?? 0,
+          status: values.status ?? 1,
+          store_id: values.store_id ?? null,
+        };
+        formApi.setValues(formData);
+      } else {
+        // 新增时重置表单并设置默认值
+        isUpdate.value = false;
+        formApi.resetFields();
+        formApi.setValues({
+          id: '',
+          title: '',
+          type: undefined,
+          icon: '',
+          description: '',
+          sort_order: 0,
+          status: 1,
+          store_id: null,
+        });
+      }
+    } else {
+      // 关闭时重置表单
+      formApi.resetFields();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}首页专区`" class="w-[60%]">
+    <Form />
+  </Modal>
+</template>
+

apps/web-antd/src/views/system/home-zones/components/sort-modal.vue

@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { ref, onBeforeUnmount } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { Icon } from '#/components/icon';
+
+import { message } from 'ant-design-vue';
+
+import { updateHomeZonesSortOrder, getHomeZonesList, getHomeZonesOption } from '../api';
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const ids = sortableList.value.map((item) => item.id);
+    if (!ids.length) {
+      message.warning('没有可排序的数据');
+      return;
+    }
+    modalApi.setState({ loading: true, confirmLoading: true });
+    updateHomeZonesSortOrder({ ids })
+      .then(() => {
+        message.success('排序更新成功');
+        const gridApi = modalApi.getData()?.gridApi;
+        if (gridApi) {
+          gridApi.reload();
+        }
+        modalApi.close();
+      })
+      .catch(() => {
+        message.error('排序更新失败');
+      })
+      .finally(() => {
+        modalApi.setState({ loading: false, confirmLoading: false });
+      });
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      loadZonesList();
+    } else {
+      sortableList.value = [];
+    }
+  },
+});
+
+const sortableList = ref<any[]>([]);
+
+const loadZonesList = async () => {
+  try {
+    // 先尝试使用list接口获取所有数据
+    const res = await getHomeZonesList({
+      page: 1,
+      pageSize: 1000, // 获取所有数据用于排序
+    });
+
+    // 尝试多种可能的数据路径
+    let data = [];
+    if (Array.isArray(res?.items)) {
+      data = res.items;
+    }
+
+    // 如果list接口没有数据，尝试使用option接口
+    if (data.length === 0) {
+      try {
+        const optionRes = await getHomeZonesOption();
+        if (Array.isArray(optionRes?.data?.data)) {
+          data = optionRes.data.data;
+        } else if (Array.isArray(optionRes?.data?.result)) {
+          data = optionRes.data.result;
+        } else if (Array.isArray(optionRes?.data)) {
+          data = optionRes.data;
+        }
+      } catch (optionError) {
+        console.error('option接口调用失败:', optionError);
+      }
+    }
+
+    // 调试：如果还是没有数据，输出调试信息
+    if (data.length === 0) {
+      console.log('API响应数据:', res);
+      message.warning('暂无数据可排序');
+    }
+
+    // 按 sort_order 排序
+    sortableList.value = [...data].sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
+  } catch (error) {
+    console.error('加载数据失败:', error);
+    message.error('加载数据失败');
+  }
+};
+
+// 拖拽相关
+const draggedIndex = ref(-1);
+const dragOverIndex = ref(-1);
+
+const onDragStart = (event: DragEvent, index: number) => {
+  draggedIndex.value = index;
+  dragOverIndex.value = -1;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+// 使用 dragenter 来更新目标索引，避免反复闪烁
+const onDragEnter = (index: number) => {
+  if (draggedIndex.value !== -1 && draggedIndex.value !== index) {
+    dragOverIndex.value = index;
+  }
+};
+
+// dragover 必须阻止默认行为以允许 drop
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+};
+
+const onDrop = (event: DragEvent, targetIndex: number) => {
+  event.preventDefault();
+  // 如果没有拖拽或目标是自己，直接重置
+  if (draggedIndex.value === -1 || draggedIndex.value === targetIndex) {
+    draggedIndex.value = -1;
+    dragOverIndex.value = -1;
+    return;
+  }
+
+  const list = [...sortableList.value];
+  const itemToMove = list[draggedIndex.value];
+
+  // 从原位置移除
+  list.splice(draggedIndex.value, 1);
+
+  // 计算插入位置：如果从前往后拖，由于原位置被删除了，目标索引会自动前移，所以不需要特殊处理
+  // 但如果直接使用 targetIndex，在 draggedIndex < targetIndex 的情况下，插入位置会是 targetIndex - 1 (逻辑上)
+  // 这里的逻辑：我们希望它出现在 targetIndex 指定的元素位置（即代替它，把它挤下去）
+  // 简单的 splice 逻辑如下：
+  // 如果移除的元素在目标之前，目标元素的索引会减1，所以我们需要插入到修正后的位置？
+  // 实际上，Vue的列表渲染中，如果我们在 targetIndex 处插入，它会变成新的 targetIndex 元素。
+  // 由于我们是"插入到目标之前"(placeholder显示在前面)，所以直接用 targetIndex 稍微调整即可。
+
+  // 修正目标索引逻辑：
+  // 既然视觉上是插入到 targetIndex 的"前面" (Placeholder位置)，
+  // 如果 draggedIndex < targetIndex，移除 draggedIndex 后，原本的 targetIndex 会变成 targetIndex - 1。
+  // 此时我们应该插入到 targetIndex - 1 的位置。
+  // 如果 draggedIndex > targetIndex，移除后 targetIndex 不变，直接插入。
+
+  let finalIndex = targetIndex;
+  if (draggedIndex.value < targetIndex) {
+    finalIndex = targetIndex - 1;
+  }
+
+  list.splice(finalIndex, 0, itemToMove);
+
+  sortableList.value = list;
+  draggedIndex.value = -1;
+  dragOverIndex.value = -1;
+};
+
+const onDragEnd = () => {
+  draggedIndex.value = -1;
+  dragOverIndex.value = -1;
+};
+
+const getTypeLabel = (type: string) => {
+  const map: Record<string, string> = {
+    otc: 'OTC专区',
+    prescription: '处方药专区',
+    health_food: '保健食品专区',
+    service_package: '产品服务包专区',
+  };
+  return map[type] || type || '-';
+};
+</script>
+
+<template>
+  <Modal title="拖拽排序" class="w-[600px]">
+    <div class="py-5">
+      <div class="mb-5 rounded-md bg-blue-50 px-4 py-3 dark:bg-blue-900/20 border-l-4 border-blue-500 dark:border-blue-400">
+        <p class="m-0 text-sm text-gray-600 dark:text-gray-300">提示：拖拽列表项可调整排序，数字越小越靠前</p>
+      </div>
+      <div class="max-h-[500px] overflow-y-auto">
+        <template v-for="(item, index) in sortableList" :key="item.id">
+          <!-- 占位符卡片：显示在拖拽目标位置 -->
+          <div
+            v-if="dragOverIndex === index && draggedIndex !== -1 && draggedIndex !== index"
+            class="mb-3 rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/50 dark:bg-blue-900/30 dark:border-blue-400 transition-all"
+            @dragenter="onDragEnter(index)"
+            @dragover="onDragOver"
+            @drop="onDrop($event, index)"
+          >
+            <div class="flex items-center gap-4 p-4 opacity-60 pointer-events-none">
+              <div class="flex h-8 w-8 items-center justify-center text-blue-500 dark:text-blue-400">
+                <Icon icon="ant-design:menu-outlined" class="text-xl" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="mb-1.5 text-base font-medium text-blue-700 dark:text-blue-300">
+                  {{ sortableList[draggedIndex]?.title || '拖拽项' }}
+                </div>
+                <div class="flex items-center gap-4 text-sm text-blue-600 dark:text-blue-400">
+                  <span class="rounded px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-800/50 dark:text-blue-300">
+                    {{ getTypeLabel(sortableList[draggedIndex]?.type) }}
+                  </span>
+                  <span>释放以插入此处</span>
+                </div>
+              </div>
+              <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-200 text-sm font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-300">
+                {{ index + 1 }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 列表项 -->
+          <div
+            :class="[
+              'mb-3 rounded-lg border transition-all duration-300 ease-in-out',
+              {
+                // 正在拖拽的项：半透明
+                'opacity-30': draggedIndex === index,
+                // 普通状态
+                'cursor-move border-gray-200 bg-white hover:border-blue-500 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400 dark:hover:shadow-lg': draggedIndex === -1 || (draggedIndex !== index && dragOverIndex !== index),
+                // 拖拽悬停目标上方：向下移动
+                'translate-y-2 border-gray-300 dark:border-gray-600': dragOverIndex === index && draggedIndex !== -1 && draggedIndex !== index && draggedIndex < index,
+                // 拖拽悬停目标下方：向上移动
+                '-translate-y-2 border-gray-300 dark:border-gray-600': dragOverIndex === index && draggedIndex !== -1 && draggedIndex !== index && draggedIndex > index,
+              }
+            ]"
+            draggable="true"
+            @dragstart="onDragStart($event, index)"
+            @dragenter="onDragEnter(index)"
+            @dragover="onDragOver"
+            @drop="onDrop($event, index)"
+            @dragend="onDragEnd"
+          >
+            <div class="flex items-center gap-4 p-4 pointer-events-none">
+              <!-- 添加 pointer-events-none 到内部容器，确保拖拽事件只由外层div触发，防止子元素干扰 -->
+              <div class="flex h-8 w-8 items-center justify-center text-gray-500 dark:text-gray-400 transition-colors pointer-events-auto">
+                <!-- 图标区域重新开启指针事件，以便可以选中（如果有需要），或者保持none -->
+                <Icon icon="ant-design:menu-outlined" class="text-xl" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="mb-1.5 text-base font-medium text-gray-900 dark:text-gray-100">{{ item.title }}</div>
+                <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
+                  <span class="rounded px-2 py-0.5 bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">{{ getTypeLabel(item.type) }}</span>
+                  <span class="text-gray-600 dark:text-gray-300">当前排序：{{ item.sort_order || 0 }}</span>
+                </div>
+              </div>
+              <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                {{ index + 1 }}
+              </div>
+            </div>
+          </div>
+        </template>
+        <div v-if="sortableList.length === 0" class="py-10 text-center text-sm text-gray-500 dark:text-gray-400">
+          暂无数据
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/system/home-zones/config/form.ts

@@ -0,0 +1,108 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12',
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入专区标题，如"OTC专区"',
+      },
+      fieldName: 'title',
+      label: '标题',
+      rules: 'required',
+      defaultValue: '',
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '请选择专区类型',
+        options: [
+          { label: 'OTC专区', value: 'otc' },
+          { label: '处方药专区', value: 'prescription' },
+          { label: '保健食品专区', value: 'health_food' },
+          { label: '产品服务包专区', value: 'service_package' },
+        ],
+      },
+      fieldName: 'type',
+      label: '类型',
+      rules: 'required',
+      defaultValue: undefined,
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'icon',
+      label: '图标',
+      defaultValue: '',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入专区描述（可选）',
+        type: 'textarea',
+        rows: 3,
+        showCount: true,
+        maxlength: 200,
+      },
+      fieldName: 'description',
+      label: '描述',
+      defaultValue: '',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序顺序',
+        min: 0,
+        max: 9999,
+      },
+      fieldName: 'sort_order',
+      label: '排序',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+      fieldName: 'status',
+      label: '状态',
+      formItemClass: 'col-span-6',
+      defaultValue: 1,
+    },
+    {
+      component: 'VbenInputNumber',
+      componentProps: {
+        placeholder: '门店ID（留空表示平台通用）',
+        min: 0,
+      },
+      fieldName: 'store_id',
+      label: '门店ID',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/home-zones/config/search.ts

@@ -0,0 +1,47 @@
+import type { VbenFormProps } from '@vben/common-ui';
+
+export const formOptions: VbenFormProps = {
+  layout: 'inline',
+  showResetButton: true,
+  showSubmitButton: true,
+  schemas: [
+    {
+      fieldName: 'title',
+      component: 'Input',
+      label: '标题',
+      componentProps: {
+        placeholder: '请输入标题关键字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      component: 'Select',
+      label: '类型',
+      componentProps: {
+        placeholder: '请选择类型',
+        allowClear: true,
+        options: [
+          { label: 'OTC专区', value: 'otc' },
+          { label: '处方药专区', value: 'prescription' },
+          { label: '保健食品专区', value: 'health_food' },
+          { label: '产品服务包专区', value: 'service_package' },
+        ],
+      },
+    },
+    {
+      fieldName: 'status',
+      component: 'Select',
+      label: '状态',
+      componentProps: {
+        placeholder: '请选择状态',
+        allowClear: true,
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+    },
+  ],
+};
+

apps/web-antd/src/views/system/home-zones/config/table.ts

@@ -0,0 +1,105 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getHomeZonesList } from '../api';
+
+interface RowType {
+  id: number;
+  title: string;
+  type: string;
+  icon: string;
+  description: string;
+  sort_order: number;
+  status: number;
+  status_txt: string;
+  store_id: number | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+    isHover: true,
+    isCurrent: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 80 },
+    { field: 'title', align: 'left', title: '标题', minWidth: 160 },
+    {
+      field: 'type',
+      align: 'left',
+      title: '类型',
+      width: 140,
+      formatter: ({ cellValue }) => {
+        const map: Record<string, string> = {
+          otc: 'OTC专区',
+          prescription: '处方药专区',
+          health_food: '保健食品专区',
+          service_package: '产品服务包专区',
+        };
+        return map[cellValue] || cellValue || '-';
+      },
+    },
+    {
+      field: 'icon',
+      align: 'left',
+      title: '图标',
+      width: 160,
+      slots: { default: 'icon' },
+    },
+    {
+      field: 'description',
+      align: 'left',
+      title: '描述',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+    },
+    { field: 'sort_order', align: 'left', title: '排序', width: 100 },
+    {
+      field: 'status_txt',
+      align: 'left',
+      title: '状态',
+      width: 100,
+    },
+    { field: 'created_at', title: '创建时间', width: 180 },
+    { type: 'html', title: '操作', slots: { default: 'action' }, width: 160 },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getHomeZonesList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  border: false,
+  toolbarConfig: {
+    search: true,
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};
+

apps/web-antd/src/views/system/home-zones/index.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import {
+  deleteHomeZones,
+} from './api';
+import HomeZoneModal from './components/modal.vue';
+import SortModal from './components/sort-modal.vue';
+import { formOptions as searchFormOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: searchFormOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [HomeZoneFormModal, homeZoneFormModalApi] = useVbenModal({
+  connectedComponent: HomeZoneModal,
+});
+
+const [SortModalComponent, sortModalApi] = useVbenModal({
+  connectedComponent: SortModal,
+});
+
+const showHomeZoneModal = (data = {}, isUpdate = false) => {
+  homeZoneFormModalApi.setData({
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  homeZoneFormModalApi.open();
+};
+
+const showSortModal = () => {
+  sortModalApi.setData({
+    gridApi,
+  });
+  sortModalApi.open();
+};
+
+const deleteZonesApi = (row: any) => {
+  let ids: (string | number)[] = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item: any) => item.id);
+  }
+  deleteHomeZones({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="首页专区管理">
+    <!-- 专区编辑弹窗 -->
+    <HomeZoneFormModal />
+    <!-- 排序弹窗 -->
+    <SortModalComponent />
+
+    <div class="p-4">
+      <TableAction
+        :actions="[
+          {
+            label: '新增专区',
+            type: 'primary',
+            icon: 'ant-design:plus-outlined',
+            onClick: () => showHomeZoneModal({}, false),
+          },
+          {
+            label: '排序',
+            icon: 'ant-design:sort-ascending-outlined',
+            onClick: showSortModal,
+          },
+        ]"
+      />
+
+      <Grid>
+        <template #icon="{ row }">
+          <Image
+            v-if="row.icon"
+            :width="60"
+            :height="60"
+            :src="row.icon"
+            :fallback="'/static/mine/avatar_1.png'"
+          />
+        </template>
+
+        <template #toolbar-buttons>
+          <Button
+            v-if="hasTopTableDropDownActions"
+            danger
+            type="primary"
+            @click="deleteZonesApi()"
+          >
+            删除
+          </Button>
+        </template>
+
+        <template #action="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                onClick: () => showHomeZoneModal(row, true),
+              },
+              {
+                label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '确定要删除该专区吗？',
+                  onConfirm: () => deleteZonesApi(row.id),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </div>
+  </Page>
+</template>
+

apps/web-antd/src/views/system/platform-info/api/index.ts

@@ -0,0 +1,18 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'platform-info/';
+/**
+ * 获取平台信息详情
+ * @param data
+ */
+export async function getPlatformInfoDetail(data: any) {
+  return requestClient.get<any>(`${prefix}detail`, { params: data });
+}
+
+/**
+ * 更新平台信息
+ * @param data
+ */
+export async function updatePlatformInfo(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}

apps/web-antd/src/views/system/platform-info/api/qualifications.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'platform-qualifications/';
+/**
+ * 分页查询资质列表
+ * @param data
+ */
+export async function getPlatformQualificationsList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 获取资质下拉列表
+ * @param data
+ */
+export async function getPlatformQualificationsOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取资质详情
+ * @param id
+ */
+export async function getPlatformQualificationsInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增资质
+ * @param data
+ */
+export async function createPlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑资质
+ * @param data
+ */
+export async function updatePlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除资质
+ * @param data
+ */
+export async function deletePlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/platform-info/components/modal.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getPlatformInfoDetail, updatePlatformInfo } from '#/views/system/platform-info/api';
+import { modalFormProps } from '#/views/system/platform-info/config/form';
+
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        updatePlatformInfo(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      // 加载平台信息
+      const platformId = modalApi.getData()?.platform_id || 1;
+      // 先设置默认值，确保所有字段都有值
+      const defaultFormData = {
+        id: '',
+        platform_id: platformId,
+        contact_phone: '',
+        contact_email: '',
+        contact_address: '',
+        complaint_phone: '',
+        complaint_email: '',
+        complaint_address: '',
+      };
+      formApi.setValues(defaultFormData);
+      
+      getPlatformInfoDetail({ platform_id: platformId })
+        .then((res: any) => {
+          const data = res.data?.data || res.data?.result || {};
+          // 将嵌套的数据结构展开为扁平结构，确保所有字段都有值
+          const formData: any = {
+            id: data.id || '',
+            platform_id: platformId,
+            contact_phone: data.contact?.phone || '',
+            contact_email: data.contact?.email || '',
+            contact_address: data.contact?.address || '',
+            complaint_phone: data.complaint?.phone || '',
+            complaint_email: data.complaint?.email || '',
+            complaint_address: data.complaint?.address || '',
+          };
+          formApi.setValues(formData);
+        })
+        .catch(() => {
+          // 如果加载失败，使用默认值（已经在上面设置了）
+        });
+    } else {
+      // 关闭时重置表单
+      formApi.resetFields();
+    }
+  },
+});
+</script>
+<template>
+  <Modal title="平台信息管理" class="w-[60%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/platform-info/components/qualifications-modal.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPlatformQualifications,
+  updatePlatformQualifications,
+} from '../api/qualifications';
+import { modalFormProps } from '../config/qualifications-form';
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        // 处理 store_id，如果为空字符串则设为 null
+        if (values.store_id === '' || values.store_id === undefined) {
+          values.store_id = null;
+        }
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updatePlatformQualifications : createPlatformQualifications;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values && update) {
+        // 编辑时，确保所有字段都有值
+        isUpdate.value = true;
+        const formData: any = {
+          id: values.id || '',
+          drug_license_image: values.drug_license_image || '',
+          business_license_image: values.business_license_image || '',
+          medical_device_license_image: values.medical_device_license_image || '',
+          food_license_image: values.food_license_image || '',
+          pharmacist_certificate_image: values.pharmacist_certificate_image || '',
+          sort_order: values.sort_order ?? 0,
+          status: values.status ?? 1,
+          store_id: values.store_id ?? null,
+        };
+        formApi.setValues(formData);
+      } else {
+        // 新增时重置表单并设置默认值
+        isUpdate.value = false;
+        formApi.resetFields();
+        formApi.setValues({
+          id: '',
+          drug_license_image: '',
+          business_license_image: '',
+          medical_device_license_image: '',
+          food_license_image: '',
+          pharmacist_certificate_image: '',
+          sort_order: 0,
+          status: 1,
+          store_id: null,
+        });
+      }
+    } else {
+      // 关闭时重置表单
+      formApi.resetFields();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台资质`" class="w-[60%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/platform-info/config/form.ts

@@ -0,0 +1,129 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'platform_id',
+      label: '平台ID',
+      formItemClass: 'col-span-6',
+      defaultValue: 1,
+      dependencies: {
+        show: false,
+        triggerFields: ['platform_id'],
+      },
+    },
+    {
+      component: 'Divider',
+      fieldName: '',
+      label: '联系方式',
+      formItemClass: 'col-span-12',
+      hideLabel: true,
+      renderComponentContent: () => {
+        return {
+          default: () => {
+            return '联系方式';
+          },
+        };
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入联系电话',
+      },
+      fieldName: 'contact_phone',
+      label: '联系电话',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入联系邮箱',
+      },
+      fieldName: 'contact_email',
+      label: '联系邮箱',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入联系地址',
+        rows: 2,
+      },
+      fieldName: 'contact_address',
+      label: '联系地址',
+      formItemClass: 'col-span-12',
+      defaultValue: '',
+    },
+    {
+      component: 'Divider',
+      fieldName: '',
+      label: '投诉举报方式',
+      formItemClass: 'col-span-12',
+      hideLabel: true,
+      renderComponentContent: () => {
+        return {
+          default: () => {
+            return '投诉举报方式';
+          },
+        };
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入投诉电话',
+      },
+      fieldName: 'complaint_phone',
+      label: '投诉电话',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入投诉邮箱',
+      },
+      fieldName: 'complaint_email',
+      label: '投诉邮箱',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入投诉地址',
+        rows: 2,
+      },
+      fieldName: 'complaint_address',
+      label: '投诉地址',
+      formItemClass: 'col-span-12',
+      defaultValue: '',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/platform-info/config/qualifications-form.ts

@@ -0,0 +1,106 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'drug_license_image',
+      label: '药品经营许可证',
+      formItemClass: 'col-span-4',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'business_license_image',
+      label: '营业执照',
+      formItemClass: 'col-span-4',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'medical_device_license_image',
+      label: '医疗器械经营许可证',
+      formItemClass: 'col-span-4',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'food_license_image',
+      label: '食品经营许可证',
+      formItemClass: 'col-span-4',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'pharmacist_certificate_image',
+      label: '药师资格证',
+      formItemClass: 'col-span-4',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序顺序',
+        min: 0,
+      },
+      // dependencies: {
+      //   show: false,
+      //   triggerFields: ['id'],
+      // },
+      fieldName: 'sort_order',
+      label: '排序顺序',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+      fieldName: 'status',
+      label: '状态',
+      formItemClass: 'col-span-6',
+      defaultValue: 1,
+    },
+    {
+      component: 'VbenInputNumber',
+      componentProps: {
+        placeholder: '门店ID（留空表示平台通用）',
+        min: 0,
+      },
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+      fieldName: 'store_id',
+      label: '门店ID',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/platform-info/config/qualifications-search.ts

@@ -0,0 +1,30 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '选择状态',
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+      defaultValue: '',
+      fieldName: 'status',
+      label: '状态',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/platform-info/config/qualifications-table.ts

@@ -0,0 +1,113 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getPlatformQualificationsList } from '../api/qualifications';
+
+interface RowType {
+  id: string;
+  drug_license_image: string;
+  business_license_image: string;
+  medical_device_license_image: string;
+  food_license_image: string;
+  pharmacist_certificate_image: string;
+  store_id: number | null;
+  sort_order: number;
+  status: number;
+  status_txt: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    {
+      field: 'drug_license_image',
+      align: 'left',
+      title: '药品经营许可证',
+      slots: { default: 'drug_license_image' },
+      width: 150,
+    },
+    {
+      field: 'business_license_image',
+      align: 'left',
+      title: '营业执照',
+      slots: { default: 'business_license_image' },
+      width: 150,
+    },
+    {
+      field: 'medical_device_license_image',
+      align: 'left',
+      title: '医疗器械经营许可证',
+      slots: { default: 'medical_device_license_image' },
+      width: 180,
+    },
+    {
+      field: 'food_license_image',
+      align: 'left',
+      title: '食品经营许可证',
+      slots: { default: 'food_license_image' },
+      width: 150,
+    },
+    {
+      field: 'pharmacist_certificate_image',
+      align: 'left',
+      title: '药师资格证',
+      slots: { default: 'pharmacist_certificate_image' },
+      width: 150,
+    },
+    { field: 'store_id', align: 'left', title: '门店ID', width: 120 },
+    { field: 'sort_order', align: 'left', title: '排序', width: 100 },
+    {
+      field: 'status_txt',
+      align: 'left',
+      title: '状态',
+      width: 100,
+    },
+    { field: 'created_at', title: '创建时间', width: 180 },
+    { type: 'html', title: '操作', slots: { default: 'action' }, width: 150 },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getPlatformQualificationsList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/system/platform-info/index.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message, Tabs, TabPane } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deletePlatformQualifications } from './api/qualifications';
+import FormModalDemo from './components/modal.vue';
+import QualificationsModalDemo from './components/qualifications-modal.vue';
+import { formOptions as qualificationsFormOptions } from './config/qualifications-search';
+import { gridOptions as qualificationsGridOptions } from './config/qualifications-table';
+
+// 平台信息相关
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showPlatformInfoModal = () => {
+  formModalApi.setData({
+    platform_id: 1, // 默认平台ID
+    gridApi: null,
+  });
+  formModalApi.open();
+};
+
+// 平台资质相关
+const activeTab = ref('qualifications');
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = qualificationsGridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = qualificationsGridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [QualificationsGrid, qualificationsGridApi] = useVbenVxeGrid({
+  formOptions: qualificationsFormOptions,
+  gridOptions: qualificationsGridOptions,
+  gridEvents,
+});
+
+const [QualificationsFormModal, qualificationsFormModalApi] = useVbenModal({
+  connectedComponent: QualificationsModalDemo,
+});
+
+const showQualificationsModal = (data = {}, isUpdate = false) => {
+  qualificationsFormModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi: qualificationsGridApi,
+  });
+  qualificationsFormModalApi.open();
+};
+
+const deleteQualificationsApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = qualificationsGridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deletePlatformQualifications({ ids }).then(() => {
+    message.success('删除成功!');
+    qualificationsGridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="平台信息管理">
+    <!-- 平台信息编辑弹窗 -->
+    <FormModal />
+    <!-- 平台资质编辑弹窗 -->
+    <QualificationsFormModal />
+
+    <Tabs v-model:active-key="activeTab" type="card">
+<!--      &lt;!&ndash; Tab 1: 平台信息 &ndash;&gt;-->
+<!--      <TabPane key="info" tab="平台信息">-->
+<!--        <div class="p-4">-->
+<!--          <TableAction-->
+<!--            :actions="[-->
+<!--              {-->
+<!--                label: '编辑平台信息',-->
+<!--                type: 'primary',-->
+<!--                icon: 'ant-design:edit-outlined',-->
+<!--                onClick: showPlatformInfoModal,-->
+<!--              },-->
+<!--            ]"-->
+<!--          />-->
+<!--          <div class="mt-4 text-gray-500">-->
+<!--            <p>点击"编辑平台信息"按钮可以配置平台的联系方式和投诉举报方式。</p>-->
+<!--            <p class="mt-2">这些信息将在小程序端显示给用户。</p>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </TabPane>-->
+
+      <!-- Tab 2: 平台资质管理 -->
+      <TabPane key="qualifications" tab="平台资质管理">
+        <QualificationsGrid>
+          <template #toolbar-buttons>
+            <TableAction
+              :actions="[
+                {
+                  label: '新增',
+                  type: 'primary',
+                  icon: 'ant-design:plus-outlined',
+                  onClick: showQualificationsModal.bind(null),
+                },
+              ]"
+              :drop-down-actions="[
+                {
+                  label: '删除',
+                  icon: 'ant-design:delete-outlined',
+                  ifShow: hasTopTableDropDownActions,
+                  popConfirm: {
+                    title: '确定删除吗？',
+                    confirm: deleteQualificationsApi.bind(null, false),
+                  },
+                },
+              ]"
+            >
+              <template #more>
+                <Button style="margin-left: 16px">
+                  批量操作
+                  <Icon icon="ant-design:down-outlined" />
+                </Button>
+              </template>
+            </TableAction>
+          </template>
+          <template #drug_license_image="{ row }">
+            <Image
+              v-if="row.drug_license_image"
+              :src="row.drug_license_image"
+              height="30"
+              width="30"
+              :preview="{ src: row.drug_license_image }"
+              style="cursor: pointer;"
+            />
+            <span v-else>暂无</span>
+          </template>
+          <template #business_license_image="{ row }">
+            <Image
+              v-if="row.business_license_image"
+              :src="row.business_license_image"
+              height="30"
+              width="30"
+              :preview="{ src: row.business_license_image }"
+              style="cursor: pointer;"
+            />
+            <span v-else>暂无</span>
+          </template>
+          <template #medical_device_license_image="{ row }">
+            <Image
+              v-if="row.medical_device_license_image"
+              :src="row.medical_device_license_image"
+              height="30"
+              width="30"
+              :preview="{ src: row.medical_device_license_image }"
+              style="cursor: pointer;"
+            />
+            <span v-else>暂无</span>
+          </template>
+          <template #food_license_image="{ row }">
+            <Image
+              v-if="row.food_license_image"
+              :src="row.food_license_image"
+              height="30"
+              width="30"
+              :preview="{ src: row.food_license_image }"
+              style="cursor: pointer;"
+            />
+            <span v-else>暂无</span>
+          </template>
+          <template #pharmacist_certificate_image="{ row }">
+            <Image
+              v-if="row.pharmacist_certificate_image"
+              :src="row.pharmacist_certificate_image"
+              height="30"
+              width="30"
+              :preview="{ src: row.pharmacist_certificate_image }"
+              style="cursor: pointer;"
+            />
+            <span v-else>暂无</span>
+          </template>
+          <template #toolbar-tools></template>
+          <template #action="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: '编辑',
+                  type: 'link',
+                  icon: 'uil:edit',
+                  size: 'small',
+                  onClick: showQualificationsModal.bind(null, row, true),
+                },
+                {
+                  label: '删除',
+                  type: 'link',
+                  icon: 'ant-design:delete-outlined',
+                  size: 'small',
+                  popConfirm: {
+                    title: '确定删除吗？',
+                    confirm: deleteQualificationsApi.bind(null, row.id),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </QualificationsGrid>
+      </TabPane>
+    </Tabs>
+  </Page>
+</template>

apps/web-antd/src/views/system/platform-qualifications/api/index.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'platform-qualifications/';
+/**
+ * 分页查询资质列表
+ * @param data
+ */
+export async function getPlatformQualificationsList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 获取资质下拉列表
+ * @param data
+ */
+export async function getPlatformQualificationsOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取资质详情
+ * @param id
+ */
+export async function getPlatformQualificationsInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增资质
+ * @param data
+ */
+export async function createPlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑资质
+ * @param data
+ */
+export async function updatePlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除资质
+ * @param data
+ */
+export async function deletePlatformQualifications(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/platform-qualifications/components/modal.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPlatformQualifications,
+  updatePlatformQualifications,
+} from '#/views/system/platform-qualifications/api';
+import { modalFormProps } from '#/views/system/platform-qualifications/config/form';
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        // 处理 store_id，如果为空字符串则设为 null
+        if (values.store_id === '' || values.store_id === undefined) {
+          values.store_id = null;
+        }
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updatePlatformQualifications : createPlatformQualifications;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values && update) {
+        // 编辑时，确保所有字段都有值
+        isUpdate.value = true;
+        const formData: any = {
+          id: values.id || '',
+          name: values.name || '',
+          type: values.type,
+          image: values.image || '',
+          sort_order: values.sort_order ?? 0,
+          status: values.status ?? 1,
+          store_id: values.store_id ?? null,
+        };
+        formApi.setValues(formData);
+      } else {
+        // 新增时重置表单并设置默认值
+        isUpdate.value = false;
+        formApi.resetFields();
+        formApi.setValues({
+          id: '',
+          name: '',
+          type: undefined,
+          image: '',
+          sort_order: 0,
+          status: 1,
+          store_id: null,
+        });
+      }
+    } else {
+      // 关闭时重置表单
+      formApi.resetFields();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台资质`" class="w-[60%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/platform-qualifications/config/form.ts

@@ -0,0 +1,97 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      defaultValue: '',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入资质名称',
+      },
+      fieldName: 'name',
+      label: '资质名称',
+      rules: 'required',
+      defaultValue: '',
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '请选择资质类型',
+        options: [
+          { label: '药品经营许可证', value: 1 },
+          { label: '营业执照', value: 2 },
+          { label: '医疗器械经营许可证', value: 3 },
+          { label: '食品经营许可证', value: 4 },
+          { label: '药师资格证', value: 5 },
+        ],
+      },
+      fieldName: 'type',
+      label: '资质类型',
+      rules: 'required',
+      defaultValue: undefined,
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'image',
+      label: '资质图片',
+      defaultValue: '',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序顺序',
+        min: 0,
+      },
+      fieldName: 'sort_order',
+      label: '排序顺序',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+      fieldName: 'status',
+      label: '状态',
+      formItemClass: 'col-span-6',
+      defaultValue: 1,
+    },
+    {
+      component: 'VbenInputNumber',
+      componentProps: {
+        placeholder: '门店ID（留空表示平台通用）',
+        min: 0,
+      },
+      fieldName: 'store_id',
+      label: '门店ID',
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/platform-qualifications/config/search.ts

@@ -0,0 +1,55 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入资质名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '资质名称',
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '选择资质类型',
+        options: [
+          { label: '药品经营许可证', value: 1 },
+          { label: '营业执照', value: 2 },
+          { label: '医疗器械经营许可证', value: 3 },
+          { label: '食品经营许可证', value: 4 },
+          { label: '药师资格证', value: 5 },
+        ],
+      },
+      defaultValue: '',
+      fieldName: 'type',
+      label: '资质类型',
+    },
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        placeholder: '选择状态',
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+      defaultValue: '',
+      fieldName: 'status',
+      label: '状态',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/platform-qualifications/config/table.ts

@@ -0,0 +1,92 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getPlatformQualificationsList } from '#/views/system/platform-qualifications/api';
+
+interface RowType {
+  id: string;
+  name: string;
+  image: string;
+  type: number;
+  type_txt: string;
+  store_id: number | null;
+  sort_order: number;
+  status: number;
+  status_txt: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'name', align: 'left', title: '资质名称' },
+    {
+      field: 'type_txt',
+      align: 'left',
+      title: '资质类型',
+      width: 150,
+    },
+    {
+      field: 'image',
+      align: 'left',
+      title: '资质图片',
+      slots: { default: 'image' },
+      width: 130,
+    },
+    { field: 'store_id', align: 'left', title: '门店ID', width: 120 },
+    { field: 'sort_order', align: 'left', title: '排序', width: 100 },
+    {
+      field: 'status_txt',
+      align: 'left',
+      title: '状态',
+      width: 100,
+    },
+    { field: 'created_at', title: '创建时间', width: 180 },
+    { type: 'html', title: '操作', slots: { default: 'action' }, width: 150 },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getPlatformQualificationsList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/system/platform-qualifications/index.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deletePlatformQualifications } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deletePlatformQualifications({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="平台资质管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            // {
+            //   label: '新增',
+            //   type: 'primary',
+            //   icon: 'ant-design:plus-outlined',
+            //   onClick: showModal.bind(null),
+            // },
+          ]"
+          :drop-down-actions="[
+            // {
+            //   label: '删除',
+            //   icon: 'ant-design:delete-outlined',
+            //   ifShow: hasTopTableDropDownActions,
+            //   popConfirm: {
+            //     title: '确定删除吗？',
+            //     confirm: deleteApi.bind(null, false),
+            //   },
+            // },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #image="{ row }">
+        <Image v-if="row.image" :src="row.image" height="30" width="30" />
+        <span v-else>暂无图片</span>
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

菜单配置_平台资质和平台信息管理.sql

@@ -0,0 +1,32 @@
+-- 平台资质管理菜单配置
+-- 格式：菜单名称 | icon | 路由名称 | 路径 | 视图路径 | 其他字段...
+INSERT INTO `xk_menu` (`name`, `icon`, `component`, `path`, `view_path`, `pid`, `type`, `status`, `sort_order`, `created_at`, `updated_at`) VALUES
+('平台资质管理', 'ant-design:file-protect-filled', 'SystemPlatformQualifications', '/system/platform-qualifications', 'views/system/platform-qualifications/index', 1, 0, 1, 26, UNIX_TIMESTAMP(), UNIX_TIMESTAMP());
+
+-- 平台信息管理菜单配置
+INSERT INTO `xk_menu` (`name`, `icon`, `component`, `path`, `view_path`, `pid`, `type`, `status`, `sort_order`, `created_at`, `updated_at`) VALUES
+('平台信息管理', 'ant-design:info-circle-filled', 'SystemPlatformInfo', '/system/platform-info', 'views/system/platform-info/index', 1, 0, 1, 27, UNIX_TIMESTAMP(), UNIX_TIMESTAMP());
+
+-- 说明：
+-- 1. 平台资质管理使用图标：ant-design:file-protect-filled（文件保护图标，适合资质证明）
+-- 2. 平台信息管理使用图标：ant-design:info-circle-filled（信息圆圈图标，适合平台信息）
+-- 3. 路由名称对应前端路由配置中的 name 字段
+-- 4. 路径对应前端路由配置中的 path 字段
+-- 5. 视图路径对应组件文件路径（相对于 views 目录）
+-- 6. pid: 1 表示属于系统管理菜单（基础管理）的子菜单
+-- 7. type: 0 表示菜单类型
+-- 8. status: 1 表示启用
+-- 9. sort_order: 26 和 27 表示排序顺序（在菜单管理之后）
+
+-- 如果使用其他图标，可以考虑：
+-- 平台资质管理：
+--   - ant-design:file-text-filled（文件图标）
+--   - ant-design:certificate（证书图标）
+--   - ant-design:audit-outlined（审核图标）
+--   - ant-design:file-done-outlined（文件完成图标）
+--
+-- 平台信息管理：
+--   - ant-design:setting-filled（设置图标）
+--   - ant-design:contacts-filled（联系人图标）
+--   - ant-design:global-outlined（全球图标）
+--   - ant-design:customer-service-filled（客服图标）