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

apps/web-antd/src/components/form/components/express-company-select.vue

@@ -13,11 +13,11 @@ defineOptions({
 });
 
 const props = defineProps<{
-  value?: string;
   disabled?: boolean;
   placeholder?: string;
   /** 运单号：变化时按前缀自动匹配快递公司（用户手动改选后不再覆盖） */
   trackingNo?: string;
+  value?: string;
 }>();
 
 const emits = defineEmits<{
@@ -27,9 +27,9 @@ const emits = defineEmits<{
 const mValue = useVModel(props, 'value', emits, { passive: true });
 
 type ExpressCompanyOption = {
+  code: string;
   id: number;
   name: string;
-  code: string;
 };
 
 const open = ref(false);
@@ -40,7 +40,10 @@ const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
 /** 用户是否已手动选择/清空；为 true 时不再按单号自动覆盖 */
 const userPicked = ref(false);
 
-function filterExpressCompanyOptions(keyword: string, list: ExpressCompanyOption[]) {
+function filterExpressCompanyOptions(
+  keyword: string,
+  list: ExpressCompanyOption[],
+) {
   const q = keyword.trim().toLowerCase();
   if (!q) return list;
   return list.filter((item) => {
@@ -61,7 +64,7 @@ const selectedOption = computed(() =>
 const displayText = computed(() => {
   const item = selectedOption.value;
   if (!item) return '';
-  return item.code ? `${item.name || '-'}（${item.code}）` : (item.name || '-');
+  return item.code ? `${item.name || '-'}（${item.code}）` : item.name || '-';
 });
 
 /**
@@ -69,7 +72,7 @@ const displayText = computed(() => {
  * 规则：尚未手动改选，或当前选中仍与规则结果一致时才覆盖
  */
 function tryAutoMatchByTrackingNo() {
-  if (!options.value.length) return;
+  if (options.value.length === 0) return;
   const matched = matchExpressByTrackingNo(props.trackingNo, options.value);
   if (!matched?.code) return;
   const matchedCode = matched.code;
@@ -110,7 +113,7 @@ function onOpenChange(next: boolean) {
   open.value = next;
   if (next) {
     searchKeyword.value = '';
-    if (!options.value.length) {
+    if (options.value.length === 0) {
       loadOptions();
     }
     nextTick(() => searchInputRef.value?.focus?.());
@@ -140,9 +143,9 @@ onMounted(() => {
 <template>
   <Popover
     :open="open"
-    trigger="click"
-    placement="bottomLeft"
     overlay-class-name="express-company-select-popover"
+    placement="bottomLeft"
+    trigger="click"
     @open-change="onOpenChange"
   >
     <template #content>
@@ -151,17 +154,17 @@ onMounted(() => {
           ref="searchInputRef"
           v-model:value="searchKeyword"
           allow-clear
-          placeholder="搜索公司名称或编码"
           class="express-search"
+          placeholder="搜索公司名称或编码"
         />
         <Spin :spinning="loading">
-          <div v-if="filteredOptions.length" class="express-list">
+          <div v-if="filteredOptions.length > 0" class="express-list">
             <button
               v-for="item in filteredOptions"
               :key="item.id"
-              type="button"
-              class="express-item"
               :class="{ active: item.code === mValue }"
+              class="express-item"
+              type="button"
               @click="selectOption(item)"
             >
               <div class="express-meta">
@@ -170,20 +173,20 @@ onMounted(() => {
               </div>
             </button>
           </div>
-          <Empty v-else description="无匹配快递公司" class="express-empty" />
+          <Empty v-else class="express-empty" description="无匹配快递公司" />
         </Spin>
       </div>
     </template>
     <div
+      :class="{ disabled, placeholder: !displayText }"
       class="express-trigger"
-      :class="{ disabled: disabled, placeholder: !displayText }"
     >
       <Input
-        :value="displayText"
-        readonly
         :disabled="disabled"
         :placeholder="placeholder || '请选择快递公司'"
+        :value="displayText"
         class="express-trigger-input"
+        readonly
       >
         <template v-if="displayText && !disabled" #suffix>
           <span class="clear-btn" @click="clearSelection">×</span>
@@ -196,6 +199,8 @@ onMounted(() => {
 <style scoped>
 .express-trigger {
   width: 100%;
+  /* min-width: fit-content; */
+  min-width: 250px;
   cursor: pointer;
 }
 .express-trigger.disabled {

apps/web-antd/src/components/form/components/store-multi-search.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts">
+/**
+ * 门店多选搜索组件
+ * - 普通输入框输入，下方气泡卡片展示匹配结果（名称 / 拼音首拼）
+ * - 选中后在输入框下方用可关闭 Tag 展示「名称【id】」
+ * - 搜索结果默认高亮第一项，Enter 可直接选中
+ * - 样式使用主题 CSS 变量，自动适配暗色
+ */
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { LoadingOutlined, SearchOutlined } from '@ant-design/icons-vue';
+import { useDebounceFn, useVModel } from '@vueuse/core';
+import { Empty, Input, Spin, Tag } from 'ant-design-vue';
+
+import { searchStoreOption } from '#/views/system/store/api';
+
+defineOptions({
+  name: 'StoreMultiSearch',
+  inheritAttrs: false,
+});
+
+export type StoreSearchItem = {
+  id: number;
+  name: string;
+  type?: number;
+  shouzimu?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    /** 已选门店 ID 列表 */
+    value?: number[];
+    /** 限定类型：0诊所 1药店；不传则诊所+药店都可搜 */
+    storeType?: 0 | 1;
+    placeholder?: string;
+    disabled?: boolean;
+    /**
+     * 外部已选门店详情（打开绑定弹窗时回填名称用）
+     * 仅用于 Tag 展示，不改变 value
+     */
+    initialItems?: StoreSearchItem[];
+  }>(),
+  {
+    value: () => [],
+    storeType: undefined,
+    placeholder: '输入名称或拼音首拼搜索',
+    disabled: false,
+    initialItems: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  'update:value': [value: number[]];
+}>();
+
+const mValue = useVModel(props, 'value', emits, {
+  passive: true,
+  defaultValue: [],
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+const searchKeyword = ref('');
+const loading = ref(false);
+const showDropdown = ref(false);
+const highlightIndex = ref(-1);
+const options = ref<StoreSearchItem[]>([]);
+/** 已选门店详情（用于 Tag 展示名称） */
+const selectedMap = ref<Record<number, StoreSearchItem>>({});
+
+const selectedIds = computed(() =>
+  Array.isArray(mValue.value) ? mValue.value.map(Number) : [],
+);
+
+const selectedItems = computed(() =>
+  selectedIds.value.map((id) => {
+    const cached = selectedMap.value[id];
+    return cached || { id, name: `门店${id}` };
+  }),
+);
+
+/** 下拉中过滤掉已选 */
+const visibleOptions = computed(() =>
+  options.value.filter((item) => !selectedIds.value.includes(item.id)),
+);
+
+/**
+ * 将初始/回填门店写入 selectedMap，便于 Tag 显示真实名称
+ */
+function mergeInitialItems(items: StoreSearchItem[]) {
+  if (!items?.length) return;
+  const next = { ...selectedMap.value };
+  for (const item of items) {
+    if (item?.id) {
+      next[item.id] = item;
+    }
+  }
+  selectedMap.value = next;
+}
+
+/**
+ * 请求后端门店搜索；有结果时默认高亮第一项
+ */
+async function fetchOptions() {
+  const keyword = searchKeyword.value.trim();
+  if (!keyword) {
+    options.value = [];
+    showDropdown.value = false;
+    highlightIndex.value = -1;
+    return;
+  }
+  loading.value = true;
+  showDropdown.value = true;
+  try {
+    const res = await searchStoreOption({
+      keyword,
+      ...(props.storeType === 0 || props.storeType === 1
+        ? { type: props.storeType }
+        : {}),
+      limit: 20,
+    });
+    options.value = res?.items ?? [];
+    // 默认高亮第一项，Enter 可直接选中
+    highlightIndex.value = options.value.length > 0 ? 0 : -1;
+  } catch {
+    options.value = [];
+    highlightIndex.value = -1;
+  } finally {
+    loading.value = false;
+  }
+}
+
+const debouncedFetch = useDebounceFn(fetchOptions, 300);
+
+function handleInput() {
+  debouncedFetch();
+}
+
+function handleFocus() {
+  if (visibleOptions.value.length > 0) {
+    showDropdown.value = true;
+    if (highlightIndex.value < 0) {
+      highlightIndex.value = 0;
+    }
+  }
+}
+
+/**
+ * 选中一项：追加到 value，缓存名称，清空输入继续搜
+ */
+function selectOption(item: StoreSearchItem) {
+  if (selectedIds.value.includes(item.id)) return;
+  selectedMap.value = { ...selectedMap.value, [item.id]: item };
+  mValue.value = [...selectedIds.value, item.id];
+  searchKeyword.value = '';
+  options.value = [];
+  showDropdown.value = false;
+  highlightIndex.value = -1;
+}
+
+/**
+ * 取消某个已选门店
+ */
+function removeSelected(id: number) {
+  mValue.value = selectedIds.value.filter((x) => x !== id);
+  const next = { ...selectedMap.value };
+  delete next[id];
+  selectedMap.value = next;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!showDropdown.value || visibleOptions.value.length === 0) return;
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      highlightIndex.value = Math.min(
+        Math.max(highlightIndex.value, 0) + 1,
+        visibleOptions.value.length - 1,
+      );
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      highlightIndex.value = Math.max(highlightIndex.value - 1, 0);
+      break;
+    case 'Enter':
+      e.preventDefault();
+      {
+        const idx = highlightIndex.value >= 0 ? highlightIndex.value : 0;
+        const item = visibleOptions.value[idx];
+        if (item) selectOption(item);
+      }
+      break;
+    case 'Escape':
+      showDropdown.value = false;
+      highlightIndex.value = -1;
+      break;
+  }
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
+    showDropdown.value = false;
+    highlightIndex.value = -1;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  mergeInitialItems(props.initialItems || []);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+watch(
+  () => props.storeType,
+  () => {
+    options.value = [];
+    showDropdown.value = false;
+    searchKeyword.value = '';
+    highlightIndex.value = -1;
+  },
+);
+
+watch(
+  () => props.initialItems,
+  (items) => mergeInitialItems(items || []),
+  { deep: true },
+);
+</script>
+
+<template>
+  <div ref="containerRef" class="store-multi-search">
+    <Input
+      v-model:value="searchKeyword"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      allow-clear
+      @input="handleInput"
+      @focus="handleFocus"
+      @keydown="handleKeydown"
+    >
+      <template #prefix>
+        <LoadingOutlined v-if="loading" class="text-muted-foreground" />
+        <SearchOutlined v-else class="text-muted-foreground" />
+      </template>
+    </Input>
+
+    <!-- 气泡建议列表 -->
+    <div v-if="showDropdown" class="store-multi-search__dropdown">
+      <Spin :spinning="loading">
+        <Empty
+          v-if="!loading && visibleOptions.length === 0"
+          :image="Empty.PRESENTED_IMAGE_SIMPLE"
+          description="暂无匹配门店"
+          class="py-3"
+        />
+        <div
+          v-for="(item, index) in visibleOptions"
+          :key="item.id"
+          class="store-multi-search__option"
+          :class="{ 'is-active': index === highlightIndex }"
+          @mousedown.prevent="selectOption(item)"
+        >
+          <div class="store-multi-search__option-name">
+            {{ item.name }}【{{ item.id }}】
+          </div>
+          <div v-if="item.shouzimu" class="store-multi-search__option-sub">
+            首拼：{{ item.shouzimu }}
+          </div>
+        </div>
+      </Spin>
+    </div>
+
+    <!-- 已选 Tag -->
+    <div v-if="selectedItems.length > 0" class="store-multi-search__tags">
+      <Tag
+        v-for="item in selectedItems"
+        :key="item.id"
+        closable
+        color="blue"
+        @close="() => removeSelected(item.id)"
+      >
+        {{ item.name }}【{{ item.id }}】
+      </Tag>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* 只用框架主题变量，随亮暗/主题色自动适配 */
+.store-multi-search {
+  position: relative;
+  width: 100%;
+}
+
+.store-multi-search__dropdown {
+  position: absolute;
+  z-index: 1050;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px;
+  border-radius: 8px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.store-multi-search__option {
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:hover,
+  &.is-active {
+    background: hsl(var(--accent-hover));
+  }
+}
+
+.store-multi-search__option-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  line-height: 1.4;
+}
+
+.store-multi-search__option-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.store-multi-search__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+</style>

apps/web-antd/src/components/form/types/index.d.ts

@@ -5,4 +5,5 @@ export type CustomComponentType =
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'IconPicker'
+  | 'StoreMultiSearch'
   | 'WarehouseAdminDrugSearch';

apps/web-antd/src/components/store-card/StoreCardModal.vue

@@ -0,0 +1,511 @@
+<script lang="ts" setup>
+/**
+ * 门店详情弹窗（诊所/药店）
+ * 布局对齐医生档案：顶部统计 + 左侧竖向 Tabs
+ */
+import type { Dayjs } from 'dayjs';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import dayjs from 'dayjs';
+import {
+  Avatar,
+  Button,
+  DatePicker,
+  Descriptions,
+  Empty,
+  Image,
+  Select,
+  Spin,
+  Table,
+  Tabs,
+  Tag,
+  message,
+} from 'ant-design-vue';
+
+import DoctorCardModal from '#/views/doctor/doctor/components/DoctorCardModal.vue';
+import { getStoreBankCardReportDetail } from '#/views/system/store-bank-card/api';
+import {
+  getStoreCardApi,
+  getStoreCardStatsApi,
+  getStoreDrugsByTypeApi,
+  openQrCodeApi,
+} from '#/views/system/store/api';
+import { getSalespersonList } from '#/views/system/store/api/salesperson';
+import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
+
+const RangePicker = DatePicker.RangePicker;
+
+const storeId = ref(0);
+const loading = ref(false);
+const activeTab = ref('basic');
+const cardData = ref<any>(null);
+const searchTime = ref<[Dayjs, Dayjs]>([
+  dayjs().startOf('month'),
+  dayjs(),
+]);
+
+const bankLoading = ref(false);
+const bankDetail = ref<any>(null);
+
+const drugType = ref(2);
+const drugLoading = ref(false);
+const drugList = ref<any[]>([]);
+
+const promoterLoading = ref(false);
+const promoterList = ref<any[]>([]);
+
+const generatingQr = ref(false);
+
+const store = computed(() => cardData.value?.store ?? {});
+const stats = computed(() => cardData.value?.stats_summary ?? {});
+const doctorList = computed(() => cardData.value?.doctor_list ?? []);
+const isClinic = computed(() => Number(store.value?.type) === 0);
+const isPharmacy = computed(() => Number(store.value?.type) === 1);
+const modalTitle = computed(() => {
+  const name = store.value?.name;
+  if (!name) return '门店详情';
+  return isPharmacy.value ? `药店详情 · ${name}` : `诊所详情 · ${name}`;
+});
+
+const drugTypeOptions = [
+  { label: '中药', value: 1 },
+  { label: '西药', value: 2 },
+  { label: '保健食品', value: 3 },
+  { label: '产品服务包', value: 5 },
+  { label: '非药品', value: 6 },
+  { label: '医疗器械', value: 7 },
+];
+
+const drugColumns = [
+  { title: '药品名称', dataIndex: 'drug_name', key: 'drug_name', ellipsis: true },
+  { title: '规格', dataIndex: 'specification', key: 'specification', width: 140 },
+  { title: '售价', dataIndex: 'price', key: 'price', width: 100 },
+  { title: '进价', dataIndex: 'buy_price', key: 'buy_price', width: 100 },
+];
+
+const promoterColumns = [
+  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+  { title: '姓名', dataIndex: 'name', key: 'name' },
+  { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
+  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
+];
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-[900px] xl:w-[1100px]',
+  fullscreenButton: true,
+  footer: false,
+  draggable: true,
+  closeOnClickModal: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<Record<string, any>>() || {};
+    storeId.value = Number(data.storeId || data.id || 0);
+    activeTab.value = 'basic';
+    searchTime.value = [dayjs().startOf('month'), dayjs()];
+    bankDetail.value = null;
+    drugList.value = [];
+    promoterList.value = [];
+    if (storeId.value) {
+      loadCard();
+    }
+  },
+});
+
+const [DoctorModal, DoctorModalApi] = useVbenModal({
+  connectedComponent: DoctorCardModal,
+});
+
+function searchTimeParam(): [string, string] {
+  return [
+    searchTime.value[0].format('YYYY-MM-DD 00:00:00'),
+    searchTime.value[1].format('YYYY-MM-DD 23:59:59'),
+  ];
+}
+
+/** 加载门店卡片概览 */
+async function loadCard() {
+  if (!storeId.value) return;
+  loading.value = true;
+  try {
+    const res = await getStoreCardApi({
+      id: storeId.value,
+      search_time: searchTimeParam(),
+    });
+    cardData.value = res;
+    if (isPharmacy.value) {
+      drugType.value = 2;
+    }
+  } catch (e: any) {
+    message.error(e?.message || '加载门店详情失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 仅刷新统计 */
+async function refreshStats() {
+  if (!storeId.value) return;
+  try {
+    const res = await getStoreCardStatsApi({
+      id: storeId.value,
+      search_time: searchTimeParam(),
+    });
+    if (cardData.value) {
+      cardData.value = {
+        ...cardData.value,
+        stats_summary: res.stats_summary,
+        search_time: res.search_time,
+      };
+    }
+  } catch (e: any) {
+    message.error(e?.message || '刷新统计失败');
+  }
+}
+
+async function loadBank() {
+  if (!storeId.value || bankDetail.value) return;
+  bankLoading.value = true;
+  try {
+    bankDetail.value = await getStoreBankCardReportDetail(storeId.value);
+  } catch {
+    bankDetail.value = null;
+  } finally {
+    bankLoading.value = false;
+  }
+}
+
+async function loadDrugs() {
+  if (!storeId.value) return;
+  drugLoading.value = true;
+  try {
+    const res = await getStoreDrugsByTypeApi(storeId.value, drugType.value);
+    const list = Array.isArray(res) ? res : res?.items || res?.list || [];
+    drugList.value = (list || []).map((item: any) => {
+      const drug = item.drug || {};
+      return {
+        id: item.id,
+        drug_name: drug.drug_name || item.drug_name || '-',
+        specification: drug.specification || item.specification || '-',
+        price: item.price ?? '-',
+        buy_price: item.buy_price ?? '-',
+      };
+    });
+  } catch {
+    drugList.value = [];
+  } finally {
+    drugLoading.value = false;
+  }
+}
+
+async function loadPromoters() {
+  if (!storeId.value || promoterList.value.length > 0) return;
+  promoterLoading.value = true;
+  try {
+    const res = await getSalespersonList({
+      store_id: storeId.value,
+      page: 1,
+      pageSize: 100,
+    });
+    const list = res?.items || res?.list?.items || res || [];
+    promoterList.value = Array.isArray(list) ? list : [];
+  } catch {
+    promoterList.value = [];
+  } finally {
+    promoterLoading.value = false;
+  }
+}
+
+function onTabChange(key: string | number) {
+  activeTab.value = String(key);
+  if (key === 'bank') loadBank();
+  if (key === 'drugs') loadDrugs();
+  if (key === 'promoters') loadPromoters();
+}
+
+function openDoctor(suId: number) {
+  DoctorModalApi.setData({ su_id: suId, hideStoresTab: true, readonly: true });
+  DoctorModalApi.open();
+}
+
+async function ensureQrCode() {
+  if (cardData.value?.qr_code || store.value?.qr_code) return;
+  generatingQr.value = true;
+  try {
+    await openQrCodeApi(storeId.value);
+    await loadCard();
+    message.success('二维码已生成');
+  } catch (e: any) {
+    message.error(e?.message || '生成二维码失败');
+  } finally {
+    generatingQr.value = false;
+  }
+}
+
+function clinicTypeText(v: number) {
+  if (v === 1) return '西医诊所';
+  if (v === 2) return '中医诊所';
+  return '未设置';
+}
+</script>
+
+<template>
+  <Modal :title="modalTitle">
+    <Spin :spinning="loading">
+      <div v-if="cardData" class="mb-4 flex flex-wrap items-center justify-between gap-3 px-1">
+        <div class="text-sm text-muted-foreground">统计时间范围</div>
+        <RangePicker
+          v-model:value="searchTime"
+          format="YYYY-MM-DD"
+          @change="refreshStats"
+        />
+      </div>
+
+      <!-- 顶部统计 -->
+      <div
+        v-if="cardData"
+        class="mb-6 grid grid-cols-1 gap-4 px-1 md:grid-cols-3"
+      >
+        <div
+          class="relative flex flex-col overflow-hidden rounded-xl border border-blue-100 bg-blue-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-blue-800/50 dark:bg-blue-900/20"
+        >
+          <span class="text-sm font-semibold text-blue-600/80 dark:text-blue-300/80">
+            销售额
+          </span>
+          <div class="mt-2 text-2xl font-bold text-blue-900 dark:text-blue-100">
+            <span class="text-lg">¥</span>
+            {{ Number(stats.sales_amount ?? 0).toFixed(2) }}
+          </div>
+        </div>
+        <div
+          class="relative flex flex-col overflow-hidden rounded-xl border border-emerald-100 bg-emerald-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-emerald-800/50 dark:bg-emerald-900/20"
+        >
+          <span class="text-sm font-semibold text-emerald-600/80 dark:text-emerald-300/80">
+            利润
+          </span>
+          <div class="mt-2 text-2xl font-bold text-emerald-900 dark:text-emerald-100">
+            <span class="text-lg">¥</span>
+            {{ Number(stats.profit ?? 0).toFixed(2) }}
+          </div>
+        </div>
+        <div
+          class="relative flex flex-col overflow-hidden rounded-xl border border-purple-100 bg-purple-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-purple-800/50 dark:bg-purple-900/20"
+        >
+          <span class="text-sm font-semibold text-purple-600/80 dark:text-purple-300/80">
+            处方量
+          </span>
+          <div class="mt-2 text-2xl font-bold text-purple-900 dark:text-purple-100">
+            {{ stats.prescription_count ?? 0 }}
+            <span class="text-xs font-normal text-purple-700/60 dark:text-purple-300/60">
+              张
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <Tabs
+        :active-key="activeTab"
+        tab-position="left"
+        class="custom-vertical-tabs min-h-[480px]"
+        @change="onTabChange"
+      >
+        <Tabs.TabPane key="basic" tab="门店基本信息">
+          <div class="pl-4">
+            <Descriptions bordered :column="2" size="small">
+              <Descriptions.Item label="名称">
+                {{ store.name || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="ID">{{ store.id }}</Descriptions.Item>
+              <Descriptions.Item label="类型">
+                {{ isPharmacy ? '药店' : '诊所' }}
+              </Descriptions.Item>
+              <Descriptions.Item v-if="isClinic" label="诊所类型">
+                {{ clinicTypeText(Number(store.clinic_type)) }}
+              </Descriptions.Item>
+              <Descriptions.Item label="联系人">
+                {{ store.contact || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="手机号">
+                {{ store.mobile || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="地址" :span="2">
+                {{ store.position || store.address || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="ERP ID">
+                {{ store.erp_id || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="MES ID">
+                {{ store.mes_id || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="银行卡报备">
+                {{ store.bank_card_report_status_text || '-' }}
+              </Descriptions.Item>
+              <Descriptions.Item label="业务员">
+                {{ store.new_admin?.nick_name || '-' }}
+              </Descriptions.Item>
+            </Descriptions>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="bank" tab="银行卡">
+          <div class="pl-4">
+            <Spin :spinning="bankLoading">
+              <template v-if="bankDetail">
+                <Descriptions bordered :column="2" size="small">
+                  <Descriptions.Item label="户名">
+                    {{ bankDetail.bank_user_name || bankDetail.account_name || store.bank_user_name || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="卡号">
+                    {{ bankDetail.bank_card || bankDetail.card_no || store.bank_card || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="开户行">
+                    {{ bankDetail.bank_name || store.bank_name || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="联行号">
+                    {{ bankDetail.bank_no || store.bank_no || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="报备状态">
+                    {{ bankDetail.report_status_text || store.bank_card_report_status_text || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="账户类型">
+                    {{ bankDetail.bank_account_type ?? store.bank_account_type ?? '-' }}
+                  </Descriptions.Item>
+                </Descriptions>
+              </template>
+              <Empty v-else description="暂无银行卡报备信息，展示门店预留信息">
+                <Descriptions bordered :column="2" size="small" class="mt-4 text-left">
+                  <Descriptions.Item label="户名">
+                    {{ store.bank_user_name || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="卡号">
+                    {{ store.bank_card || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="开户行">
+                    {{ store.bank_name || '-' }}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="联行号">
+                    {{ store.bank_no || '-' }}
+                  </Descriptions.Item>
+                </Descriptions>
+              </Empty>
+            </Spin>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane v-if="isClinic" key="doctors" tab="诊所医生团队">
+          <div class="pl-4">
+            <Empty v-if="doctorList.length === 0" description="暂无医生" />
+            <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="item in doctorList"
+                :key="item.su_id"
+                class="flex items-center gap-3 rounded-lg border border-gray-100 p-3 dark:border-slate-700"
+              >
+                <Avatar :src="resolveAvatarUrl(item.doctor?.avatar)" :size="48" />
+                <div class="min-w-0 flex-1">
+                  <Button type="link" class="!px-0" @click="openDoctor(item.doctor?.su_id || item.su_id)">
+                    {{ item.doctor?.name || '未知医生' }}
+                  </Button>
+                  <div class="text-xs text-muted-foreground">
+                    {{ item.doctor?.mobile || '-' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane v-if="isPharmacy" key="drugs" tab="药店药品">
+          <div class="pl-4">
+            <div class="mb-3 flex items-center gap-2">
+              <span class="text-sm text-muted-foreground">药品类型</span>
+              <Select
+                v-model:value="drugType"
+                :options="drugTypeOptions"
+                style="width: 160px"
+                @change="loadDrugs"
+              />
+            </div>
+            <Table
+              :columns="drugColumns"
+              :data-source="drugList"
+              :loading="drugLoading"
+              :pagination="false"
+              row-key="id"
+              size="small"
+              :scroll="{ y: 360 }"
+            />
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="qr" tab="门店二维码">
+          <div class="flex flex-col items-center gap-4 py-6 pl-4">
+            <template v-if="cardData?.qr_code || store.qr_code">
+              <Image
+                :src="cardData?.qr_code || store.qr_code"
+                :width="200"
+                :preview="true"
+              />
+              <div class="text-sm text-muted-foreground">
+                {{ store.name }} 门店二维码
+              </div>
+            </template>
+            <template v-else>
+              <Empty description="尚未生成二维码" />
+              <Button type="primary" :loading="generatingQr" @click="ensureQrCode">
+                生成二维码
+              </Button>
+            </template>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="promoters" tab="门店推广员">
+          <div class="pl-4">
+            <Table
+              :columns="promoterColumns"
+              :data-source="promoterList"
+              :loading="promoterLoading"
+              :pagination="false"
+              row-key="id"
+              size="small"
+              :scroll="{ y: 360 }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'name'">
+                  {{ record.name || record.nick_name || '-' }}
+                </template>
+                <template v-if="column.key === 'status'">
+                  <Tag>{{ record.status ?? '-' }}</Tag>
+                </template>
+              </template>
+            </Table>
+          </div>
+        </Tabs.TabPane>
+      </Tabs>
+    </Spin>
+  </Modal>
+  <DoctorModal />
+</template>
+
+<style scoped>
+:deep(.custom-vertical-tabs .ant-tabs-nav) {
+  width: 140px;
+}
+:deep(.custom-vertical-tabs .ant-tabs-tab) {
+  padding: 12px 16px;
+  margin-bottom: 4px;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+:deep(.custom-vertical-tabs .ant-tabs-tab-active) {
+  background-color: var(
+    --ant-primary-color-active-deprecated-f-12,
+    rgba(22, 119, 255, 0.08)
+  );
+}
+</style>