feat:优化了订单、诊所搜索组件、药品这些交互

apps/web-antd/src/views/system/delivery-warehouse-order/components/modal.vue

@@ -51,7 +51,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 <template>
-  <Modal :title="`订单：【 ${orderNo} 】发货`" class="w-[30%]">
+  <Modal :title="`订单：【 ${orderNo} 】发货`" class="w-[80%] md:w-[50%] lg:w-[30%]">
     <Form />
   </Modal>
 </template>

apps/web-antd/src/views/system/delivery-warehouse-order/index.vue

@@ -122,9 +122,9 @@ function openDetail(row: Record<string, any>, scrollToLogistics = false) {
     onShip:
       Number(row?.warehouse_is_send ?? 0) === 0 || Number(row?.status) === 1
         ? () => {
-            detailModalApi.close();
-            wareSend(row);
-          }
+          detailModalApi.close();
+          wareSend(row);
+        }
         : undefined,
   });
   detailModalApi.open();
@@ -139,7 +139,7 @@ function productRows(row: Record<string, any>) {
 function qtyText(p: Record<string, any>) {
   const n = p.number ?? '-';
   if (p.dosage != null && p.dosage !== '' && Number(p.dosage) !== 1) {
-    return `${n}×${p.dosage}`;
+    return `${n}`;
   }
   return String(n);
 }
@@ -156,159 +156,139 @@ onMounted(() => {
 </script>
 
 <template>
-  <Page auto-content-height title="我的订单">
-    <FormModal />
-    <DetailModal />
-    <div class="flex flex-col gap-4">
-      <Tabs
-        :active-key="statusTab"
-        type="card"
-        @change="handleTabChange"
-      >
-        <Tabs.TabPane key="1" tab="待发货" />
-        <Tabs.TabPane key="2" tab="待收货" />
-        <Tabs.TabPane key="7" tab="确认收货" />
-      </Tabs>
+  <Page auto-content-height class="bg-[#f7f8fa] dark:bg-[#0a0a0a] transition-colors duration-300" title="我的订单">
+    <FormModal/>
+    <DetailModal/>
 
-      <div class="flex flex-wrap items-center gap-3">
-        <Input
-          v-model:value="orderNo"
-          allow-clear
-          class="w-64"
-          placeholder="输入订单号"
-          @press-enter="handleSearch"
-        />
-        <Button type="primary" @click="handleSearch">查询</Button>
-        <span class="text-sm text-[hsl(var(--muted-foreground))]">
-          当前：{{ tabLabel }}
-        </span>
+    <div class="flex flex-col gap-6 p-2 md:p-4">
+      <!-- 顶部操作栏 -->
+      <div class="flex flex-col gap-4 rounded-2xl bg-white dark:bg-[#141414] px-6 py-4 shadow-sm dark:shadow-none dark:border dark:border-[#303030] md:flex-row md:items-center md:justify-between transition-colors duration-300">
+        <Tabs :active-key="statusTab" :tab-bar-style="{ margin: 0, border: 'none' }" @change="handleTabChange" size="large">
+          <Tabs.TabPane key="1" tab="待发货"/>
+          <Tabs.TabPane key="2" tab="待收货"/>
+          <Tabs.TabPane key="7" tab="确认收货"/>
+        </Tabs>
+
+        <Input.Search @search="handleSearch" allow-clear class="w-full md:w-80" enter-button placeholder="请输入订单号快捷查询" size="large" v-model:value="orderNo"/>
       </div>
 
       <Spin :spinning="loading">
         <div
           v-if="list.length"
-          class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
+          class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
         >
-          <Card
-            v-for="row in list"
-            :key="row.id"
-            class="overflow-hidden"
-            size="small"
-          >
-            <template #title>
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="font-medium">{{ row.order_no || '—' }}</span>
-                <Tag :color="statusMeta[row.status]?.color || 'default'">
-                  {{ statusMeta[row.status]?.text || row.status }}
-                </Tag>
-              </div>
-            </template>
-            <template #extra>
-              <span class="text-xs text-[hsl(var(--muted-foreground))]">
-                {{ row.created_at || '' }}
-              </span>
-            </template>
+          <Card :body-style="{ padding: 0 }" :key="row.id" class="overflow-hidden rounded-2xl border-transparent dark:border-[#303030] bg-white dark:bg-[#141414] shadow-sm dark:shadow-none transition-all hover:-translate-y-1 hover:shadow-md dark:hover:border-gray-500" v-for="row in list">
 
-            <div class="space-y-2 text-sm">
-              <div>
-                <span class="text-[hsl(var(--muted-foreground))]">收件人：</span>
-                {{ row.express_name || '—' }}
-                <span class="ml-2">{{ row.express_mobile || '' }}</span>
+            <!-- 卡片 Header -->
+            <div class="flex items-center justify-between border-b border-gray-100 dark:border-[#2a2a2a] px-5 py-4 transition-colors duration-300">
+              <div class="flex items-center gap-2">
+                <span class="text-sm text-gray-500 dark:text-gray-400">订单号</span>
+                <span class="text-base font-semibold text-gray-800 dark:text-gray-200">{{ row.order_no || '—' }}</span>
               </div>
-              <div>
-                <span class="text-[hsl(var(--muted-foreground))]">地址：</span>
-                {{ addressText(row) }}
-              </div>
-              <div>
-                <div class="mb-1 text-[hsl(var(--muted-foreground))]">
-                  本仓商品：
-                </div>
+              <Tag :color="statusMeta[row.status]?.color || 'default'" class="m-0 rounded-full border-none px-3 py-1 font-medium shadow-sm dark:shadow-none">
+                {{ statusMeta[row.status]?.text || row.status }}
+              </Tag>
+            </div>
+
+            <!-- 商品展示区 -->
+            <div class="bg-gray-50/60 dark:bg-[#1a1a1a] px-5 py-4 transition-colors duration-300">
+              <div v-if="productRows(row).length" class="flex flex-col gap-4">
                 <div
-                  v-if="productRows(row).length"
-                  class="flex flex-col gap-2"
+                  v-for="p in productRows(row)"
+                  :key="p.id"
+                  class="flex items-start gap-3"
                 >
-                  <div
-                    v-for="p in productRows(row)"
-                    :key="p.id"
-                    class="flex items-center gap-2"
-                  >
-                    <Image
-                      :src="p.drug?.image || p.drug_image || ''"
-                      :width="40"
-                      :height="40"
-                      class="shrink-0 rounded object-cover"
-                      fallback="/img/empty.png"
-                    />
-                    <div class="min-w-0 flex-1 text-xs">
-                      <div class="truncate font-medium">
-                        {{ p.drug_name || p.drug?.drug_name || '-' }}
-                      </div>
-                      <div class="text-[hsl(var(--muted-foreground))]">
-                        规格：{{ p.drug?.specification || '-' }}
-                        · 数量：{{ qtyText(p) }}
-                      </div>
+                  <Image :height="68" :src="p.drug?.image || p.drug_image || ''" :width="68" class="shrink-0 rounded-xl border border-gray-100 dark:border-transparent bg-white dark:bg-[#2a2a2a] object-cover p-1 shadow-sm dark:shadow-none" fallback="/img/empty.png"/>
+                  <div class="min-w-0 flex-1 pt-1">
+                    <div class="line-clamp-2 text-sm font-medium text-gray-800 dark:text-gray-200 transition-colors hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer">
+                      {{ p.drug_name || p.drug?.drug_name || '-' }}
+                    </div>
+                    <div class="mt-2 flex items-center justify-between">
+                      <span class="rounded bg-white dark:bg-[#2a2a2a] px-2 py-0.5 text-xs text-gray-500 dark:text-gray-400 shadow-sm dark:shadow-none border border-gray-100 dark:border-transparent">
+                        {{ p.drug?.specification || '默认规格' }}
+                      </span>
+                      <span class="text-base font-bold text-gray-800 dark:text-gray-200">x{{ qtyText(p) }}</span>
                     </div>
                   </div>
                 </div>
-                <span v-else>—</span>
               </div>
-              <div>
-                <span class="text-[hsl(var(--muted-foreground))]">物流：</span>
+              <div v-else class="text-sm text-gray-400 dark:text-gray-600 py-2">— 该订单暂无商品明细 —</div>
+            </div>
+
+            <!-- 配送信息区 -->
+            <div class="px-5 py-4 text-sm space-y-3 transition-colors duration-300">
+              <div class="flex items-start">
+                <span class="w-16 shrink-0 text-gray-400 dark:text-gray-500">收件人</span>
+                <div class="flex-1 text-gray-800 dark:text-gray-200">
+                  <span class="font-medium mr-2">{{ row.express_name || '—' }}</span>
+                  <span class="text-gray-500 dark:text-gray-400">{{ row.express_mobile || '' }}</span>
+                  <div class="mt-1 text-gray-500 dark:text-gray-400 line-clamp-2">{{ addressText(row) }}</div>
+                </div>
+              </div>
+              <div class="flex items-center">
+                <span class="w-16 shrink-0 text-gray-400 dark:text-gray-500">物流</span>
                 <span
-                  :class="
-                    row.logistics_summary === '未发货'
-                      ? 'text-[hsl(var(--muted-foreground))]'
-                      : ''
-                  "
+                  class="flex-1 truncate"
+                  :class="row.logistics_summary === '未发货' ? 'text-gray-400 dark:text-gray-500' : 'text-blue-500 dark:text-blue-400 cursor-pointer hover:underline'"
                 >
                   {{ row.logistics_summary || '未发货' }}
                 </span>
               </div>
             </div>
 
-            <template #actions>
+            <!-- 底部操作区 (已修复 v-if 报错问题) -->
+            <div class="flex items-center justify-between border-t border-gray-50 dark:border-[#2a2a2a] px-5 py-3 transition-colors duration-300">
+              <span class="text-xs text-gray-400 dark:text-gray-500">{{ row.created_at || '' }}</span>
               <Space>
-                <Button size="small" type="link" @click="openDetail(row, false)">
-                  详情
+                <Button @click="openDetail(row, false)" shape="round" size="middle">
+                  订单详情
                 </Button>
+                <!-- 修复了此处的 v-if 闭合错误 -->
                 <Button
-                  v-if="
-                    Number(row.is_send) === 1 ||
-                    Number(row.status) >= 2 ||
-                    !!row.waybill_no
-                  "
-                  size="small"
-                  type="link"
+                  v-if="Number(row.is_send) === 1 || Number(row.status) >= 2 || !!row.waybill_no"
+                  shape="round"
+                  size="middle"
                   @click="openDetail(row, true)"
                 >
-                  物流
+                  查看物流
                 </Button>
                 <Button
                   v-if="Number(row.warehouse_is_send ?? 0) === 0"
-                  size="small"
-                  type="link"
+                  class="shadow-md shadow-blue-500/20 dark:shadow-none"
+                  shape="round"
+                  size="middle"
+                  type="primary"
                   @click="wareSend(row)"
                 >
-                  发货
+                  立即发货
                 </Button>
               </Space>
-            </template>
+            </div>
           </Card>
         </div>
-        <Empty v-else class="py-16" :description="`${tabLabel}暂无订单`" />
+
+        <Empty :description="`当前暂无${tabLabel}订单`" :image="Empty.PRESENTED_IMAGE_SIMPLE" class="my-20" v-else/>
       </Spin>
 
-      <div v-if="pager.total > 0" class="flex justify-end">
-        <Pagination
-          v-model:current="pager.currentPage"
-          v-model:page-size="pager.pageSize"
-          :total="pager.total"
-          show-size-changer
-          :page-size-options="['12', '24', '48']"
-          @change="loadList"
-          @show-size-change="loadList"
-        />
+      <!-- 分页区域 -->
+      <div v-if="pager.total > 0" class="flex justify-end pb-8">
+        <Pagination :page-size-options="['12', '24', '48']" :total="pager.total" @change="loadList" @show-size-change="loadList" show-quick-jumper show-size-changer v-model:current="pager.currentPage" v-model:page-size="pager.pageSize"/>
       </div>
     </div>
   </Page>
 </template>
+
+<style scoped>
+:deep(.ant-tabs-nav::before) {
+  border-bottom: none !important;
+}
+:deep(.ant-tabs-tab) {
+  @apply dark:text-gray-400;
+}
+:deep(.ant-tabs-tab-active) {
+  @apply dark:!text-blue-400;
+}
+:deep(.ant-card-body) {
+  @apply dark:bg-[#141414];
+}
+</style>

apps/web-antd/src/views/system/doctor-input/config/form.ts

@@ -2,7 +2,6 @@ import type { VbenFormProps } from '#/adapter/form';
 
 import { getDepartOptionApi } from '#/views/doctor/doctor/api';
 import { getDoctorTitleOptionApi } from '#/views/doctor/pharmacist/api';
-import { getStoreOption } from '#/views/system/store/api';
 
 export const modalFormProps: VbenFormProps = {
   wrapperClass: 'grid-cols-12',
@@ -25,21 +24,12 @@ export const modalFormProps: VbenFormProps = {
       },
     },
     {
-      component: 'ApiSelect',
+      component: 'StoreMultiSearch',
       componentProps: {
-        allowClear: true,
-        filterOption: (input: string, option: any) =>
-          option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-        showSearch: true,
-        afterFetch: (data: { id: number; name: string }[]) =>
-          data.map((item: any) => ({
-            label: item.name,
-            value: item.id,
-          })),
-        api: getStoreOption,
-        placeholder: '请选择诊所',
-        mode: 'multiple',
+        placeholder: '输入诊所名称或拼音首拼',
+        storeType: 0,
       },
+      defaultValue: [],
       fieldName: 'stores',
       formItemClass: 'col-span-12',
       label: '关联诊所',

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

@@ -7,24 +7,15 @@ export const formOptions: VbenFormProps = {
   collapsed: false,
   schema: [
     {
-      // 药店名称搜索字段
-      component: 'VbenInput',
+      // 药店多选：仅搜 type=1，名称/首拼合一
+      component: 'StoreMultiSearch',
       componentProps: {
-        placeholder: '输入名称',
+        placeholder: '输入名称或拼音首拼',
+        storeType: 1,
       },
-      defaultValue: '',
-      fieldName: 'name',
-      label: '药店名称', // 已从"诊所名称"改为"药店名称"
-    },
-    {
-      // 药店首字母搜索字段
-      component: 'VbenInput',
-      componentProps: {
-        placeholder: '输入名称',
-      },
-      defaultValue: '',
-      fieldName: 'shouzimu',
-      label: '药店首字母', // 已从"诊所首字母"改为"药店首字母"
+      defaultValue: [],
+      fieldName: 'store_ids',
+      label: '药店',
     },
     {
       // 联系人手机号搜索字段
@@ -36,7 +27,6 @@ export const formOptions: VbenFormProps = {
       fieldName: 'mobile',
       label: '联系人手机号',
     },
-    // 注意：已移除类型筛选字段，因为药店管理页面固定显示type=1的数据
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,

apps/web-antd/src/views/system/pharmacy/index.vue

@@ -37,6 +37,7 @@ import StoreConfigTogglesCell from '#/views/system/store/components/cells/StoreC
 import BindConsultationModal from '#/views/system/store/components/BindConsultationModal.vue';
 import DrugPriceModal from '#/views/system/store/components/DrugPriceModal.vue';
 import StoreExternalFieldModal from '#/views/system/store/components/StoreExternalFieldModal.vue';
+import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
 import BankCardReportModal from '#/views/system/store-bank-card/components/BankCardReportModal.vue';
 import BankCardStatusModal from '#/views/system/store-bank-card/components/BankCardStatusModal.vue';
 import BankCardStoreEditModal from '#/views/system/store-bank-card/components/BankCardStoreEditModal.vue';
@@ -97,6 +98,16 @@ const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
   connectedComponent: QrCodePreview,
 });
 
+const [StoreCardModalComp, StoreCardModalApi] = useVbenModal({
+  connectedComponent: StoreCardModal,
+});
+
+function openStoreCard(row: Record<string, any>) {
+  if (!row?.id) return;
+  StoreCardModalApi.setData({ storeId: Number(row.id) });
+  StoreCardModalApi.open();
+}
+
 // 打开二维码预览弹窗
 const openQrCodeModal = (url, title, address) => {
   QrCodePreviewApi.setData({
@@ -376,6 +387,7 @@ const batchSyncDrugPrice = () => {
     <BankCardReportModalComponent />
     <BankCardStatusModalComponent />
     <BankCardStoreEditModalComponent />
+    <StoreCardModalComp />
     <QrCodePreviewModal />
     <DrugPriceModalComponent />
     <BindConsultationModalComponent />
@@ -436,6 +448,7 @@ const batchSyncDrugPrice = () => {
           variant="pharmacy"
           :on-copy="copyText"
           :on-edit-external-field="showStoreExternalFieldModal"
+          :on-open-store="openStoreCard"
         />
       </template>
       <template #store_config_1="{ row }">

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

@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 <template>
-  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台`" class="w-[30%]">
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台`" class="w-[80%] md:w-[50%] lg:w-[30%]">
     <Form />
   </Modal>
 </template>

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

@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 <template>
-  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}角色`" class="w-[30%]">
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}角色`" class="w-[80%] md:w-[50%] lg:w-[30%]">
     <Form />
   </Modal>
 </template>

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

@@ -56,6 +56,19 @@ export async function getStoreOption(data: any) {
   return requestClient.get<any>(`${prefix}option`, { params: data });
 }
 
+/**
+ * 门店关键词搜索（名称/拼音首拼），供多选搜索气泡列表
+ */
+export async function searchStoreOption(params: {
+  keyword: string;
+  type?: 0 | 1;
+  limit?: number;
+}) {
+  return requestClient.get<{
+    items: { id: number; name: string; type: number; shouzimu: string }[];
+  }>(`${prefix}search-option`, { params });
+}
+
 /**
  * 获取诊所详情
  * @param id
@@ -64,6 +77,26 @@ export async function getStoreInfo(id: number) {
   return requestClient.get<any>(`${prefix}detail`, { params: { id } });
 }
 
+/**
+ * 门店详情卡片（概览 + 统计 + 医生团队）
+ */
+export async function getStoreCardApi(params: {
+  id: number;
+  search_time?: [string, string];
+}) {
+  return requestClient.get<any>(`${prefix}card`, { params });
+}
+
+/**
+ * 门店详情卡片统计刷新
+ */
+export async function getStoreCardStatsApi(params: {
+  id: number;
+  search_time?: [string, string];
+}) {
+  return requestClient.get<any>(`${prefix}card-stats`, { params });
+}
+
 /**
  * 新增诊所
  * @param data

apps/web-antd/src/views/system/store/components/DrugPriceModal.vue

@@ -87,7 +87,7 @@ const rowImageSrc = (row: DrugItem) => {
 </script>
 
 <template>
-  <Modal title="修改药品价格" class="w-[80%]">
+  <Modal title="修改药品价格" class="w-[80%] md:w-[50%] lg:w-[30%]">
     <div>
       <Tabs v-model:activeKey="activeTab">
         <TabPane

apps/web-antd/src/views/system/store/components/cells/StoreBasicInfoCell.vue

@@ -12,6 +12,8 @@ defineProps<{
     field: 'erp_id' | 'mes_id',
     label: string,
   ) => void;
+  /** 点击门店名称打开详情卡片 */
+  onOpenStore?: (row: Record<string, any>) => void;
 }>();
 
 function getClinicTypeText(clinicType: number) {
@@ -23,7 +25,15 @@ function getClinicTypeText(clinicType: number) {
 
 <template>
   <div class="store-basic-info">
-    <div class="store-basic-info__name">{{ row.name || '-' }}</div>
+    <Button
+      v-if="onOpenStore"
+      type="link"
+      class="store-basic-info__name !h-auto !px-0 !py-0 text-left"
+      @click="onOpenStore(row)"
+    >
+      {{ row.name || '-' }}
+    </Button>
+    <div v-else class="store-basic-info__name">{{ row.name || '-' }}</div>
     <div class="store-basic-info__grid">
       <div class="info-item">
         <span class="info-item__label">ID</span>

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

@@ -7,24 +7,15 @@ export const formOptions: VbenFormProps = {
   collapsed: false,
   schema: [
     {
-      // 诊所名称搜索字段
-      component: 'VbenInput',
+      // 诊所多选：仅搜 type=0，名称/首拼合一
+      component: 'StoreMultiSearch',
       componentProps: {
-        placeholder: '输入名称',
+        placeholder: '输入名称或拼音首拼',
+        storeType: 0,
       },
-      defaultValue: '',
-      fieldName: 'name',
-      label: '诊所名称',
-    },
-    {
-      // 诊所首字母搜索字段
-      component: 'VbenInput',
-      componentProps: {
-        placeholder: '输入名称',
-      },
-      defaultValue: '',
-      fieldName: 'shouzimu',
-      label: '诊所首字母',
+      defaultValue: [],
+      fieldName: 'store_ids',
+      label: '诊所',
     },
     {
       // 联系人手机号搜索字段
@@ -36,16 +27,6 @@ export const formOptions: VbenFormProps = {
       fieldName: 'mobile',
       label: '联系人手机号',
     },
-    // 注意：已移除类型筛选字段，因为诊所管理页面固定显示type=0的数据
-    // {
-    //   component: 'RangePicker',
-    //   componentProps: {
-    //     format: 'YYYY-MM-DD', // 确保格式与你需要的一致
-    //   },
-    //   // defaultValue: [dayjs().startOf('month'), dayjs()],
-    //   fieldName: 'search_time',
-    //   label: '时间范围',
-    // },
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,

apps/web-antd/src/views/system/store/index.vue

@@ -39,6 +39,7 @@ import BindConsultationModal from './components/BindConsultationModal.vue';
 import BindSpecialPrescriptionDoctorModal from './components/BindSpecialPrescriptionDoctorModal.vue';
 import StoreExternalFieldModal from './components/StoreExternalFieldModal.vue';
 import SalespersonCommissionDrawer from './components/SalespersonCommissionDrawer.vue';
+import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
 import BankCardReportModal from '#/views/system/store-bank-card/components/BankCardReportModal.vue';
 import BankCardStatusModal from '#/views/system/store-bank-card/components/BankCardStatusModal.vue';
 import BankCardStoreEditModal from '#/views/system/store-bank-card/components/BankCardStoreEditModal.vue';
@@ -89,6 +90,17 @@ const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
   connectedComponent: QrCodePreview,
 });
 
+const [StoreCardModalComp, StoreCardModalApi] = useVbenModal({
+  connectedComponent: StoreCardModal,
+});
+
+/** 打开门店详情卡片 */
+function openStoreCard(row: Record<string, any>) {
+  if (!row?.id) return;
+  StoreCardModalApi.setData({ storeId: Number(row.id) });
+  StoreCardModalApi.open();
+}
+
 const openQrCodeModal = (url, title, address) => {
   QrCodePreviewApi.setData({
     // 表单值
@@ -403,6 +415,7 @@ const handleSwitchClinicType = (row: any) => {
     <BankCardReportModalComponent />
     <BankCardStatusModalComponent />
     <BankCardStoreEditModalComponent />
+    <StoreCardModalComp />
     <QrCodePreviewModal />
     <DrugPriceModalComponent />
     <BindConsultationModalComponent />
@@ -466,6 +479,7 @@ const handleSwitchClinicType = (row: any) => {
           variant="clinic"
           :on-copy="copyText"
           :on-edit-external-field="showStoreExternalFieldModal"
+          :on-open-store="openStoreCard"
         />
       </template>
       <template #store_config_1="{ row }">

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

@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 <template>
-  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}供应商`" class="w-[30%]">
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}供应商`" class="w-[80%] md:w-[50%] lg:w-[30%]">
     <Form />
   </Modal>
 </template>