1. 推广员功能增强

apps/web-antd/src/components/form/components/api-log-user-picker.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts">
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+
+
+import { useDebounceFn, useVModel } from '@vueuse/core';
+
+import { Avatar, Empty, Input, Popover, Spin, Tabs, Tag } from 'ant-design-vue';
+
+
+
+import { searchApiLogUsers } from '#/views/log/api-log/api';
+
+
+
+defineOptions({
+
+  name: 'ApiLogUserPicker',
+
+  inheritAttrs: false,
+
+});
+
+
+
+export type ApiLogUserFilter = {
+
+  id: number;
+
+  user_type: 'admin' | 'patient' | 'doctor';
+
+  platform_type: 0 | 1 | 2;
+
+  name: string;
+
+  role_label: string;
+
+  avatar?: string;
+
+};
+
+
+
+type ApiLogUserOption = ApiLogUserFilter;
+
+
+
+type UserTab = 'admin' | 'patient' | 'doctor';
+
+
+
+const props = defineProps<{
+
+  value?: ApiLogUserFilter;
+
+  disabled?: boolean;
+
+  onPlatformTypeChange?: (platformType: 0 | 1 | 2) => void;
+
+}>();
+
+
+
+const emits = defineEmits<{
+
+  'update:value': [value: ApiLogUserFilter | undefined];
+
+}>();
+
+
+
+const mValue = useVModel(props, 'value', emits, { passive: true });
+
+
+
+const open = ref(false);
+
+const loading = ref(false);
+
+const searchKeyword = ref('');
+
+const activeTab = ref<UserTab>('admin');
+
+const options = ref<ApiLogUserOption[]>([]);
+
+const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
+
+
+
+const TAB_ITEMS = [
+
+  { key: 'admin', label: '后台用户' },
+
+  { key: 'patient', label: '患者端用户' },
+
+  { key: 'doctor', label: '医生端用户' },
+
+] as const;
+
+
+
+const searchPlaceholder = computed(() => {
+
+  if (activeTab.value === 'admin') return '搜索手机号或昵称';
+
+  if (activeTab.value === 'patient') return '搜索用户名字';
+
+  return '搜索名字或手机号';
+
+});
+
+
+
+async function fetchOptions() {
+
+  const keyword = searchKeyword.value.trim();
+
+  if (!keyword) {
+
+    options.value = [];
+
+    return;
+
+  }
+
+
+
+  loading.value = true;
+
+  try {
+
+    const result = await searchApiLogUsers({
+
+      user_type: activeTab.value,
+
+      keyword,
+
+      pageSize: 24,
+
+    });
+
+    options.value = result?.items ?? [];
+
+  } finally {
+
+    loading.value = false;
+
+  }
+
+}
+
+
+
+const debouncedFetch = useDebounceFn(fetchOptions, 300);
+
+
+
+watch([searchKeyword, activeTab], () => {
+
+  debouncedFetch();
+
+});
+
+
+
+function selectOption(item: ApiLogUserOption) {
+
+  mValue.value = {
+
+    id: item.id,
+
+    user_type: item.user_type,
+
+    platform_type: item.platform_type,
+
+    name: item.name,
+
+    role_label: item.role_label,
+
+    avatar: item.avatar,
+
+  };
+
+  props.onPlatformTypeChange?.(item.platform_type);
+
+  open.value = false;
+
+  searchKeyword.value = '';
+
+  options.value = [];
+
+}
+
+
+
+function clearSelection(e: Event) {
+
+  e.stopPropagation();
+
+  mValue.value = undefined;
+
+}
+
+
+
+function onOpenChange(next: boolean) {
+
+  if (props.disabled) return;
+
+  open.value = next;
+
+  if (next) {
+
+    searchKeyword.value = '';
+
+    options.value = [];
+
+    nextTick(() => searchInputRef.value?.focus?.());
+
+  }
+
+}
+
+
+
+watch(
+
+  () => props.disabled,
+
+  (disabled) => {
+
+    if (disabled) open.value = false;
+
+  },
+
+);
+
+</script>
+
+
+
+<template>
+
+  <Popover
+
+    :open="open"
+
+    trigger="click"
+
+    placement="bottomLeft"
+
+    overlay-class-name="api-log-user-picker-popover"
+
+    @open-change="onOpenChange"
+
+  >
+
+    <template #content>
+
+      <div class="api-log-user-panel">
+
+        <Tabs v-model:active-key="activeTab" size="small" class="api-log-user-tabs">
+
+          <Tabs.TabPane
+
+            v-for="tab in TAB_ITEMS"
+
+            :key="tab.key"
+
+            :tab="tab.label"
+
+          />
+
+        </Tabs>
+
+        <Input
+
+          ref="searchInputRef"
+
+          v-model:value="searchKeyword"
+
+          allow-clear
+
+          :placeholder="searchPlaceholder"
+
+          class="api-log-user-search"
+
+        />
+
+        <Spin :spinning="loading">
+
+          <div v-if="options.length" class="api-log-user-grid">
+
+            <button
+
+              v-for="item in options"
+
+              :key="`${item.user_type}-${item.id}`"
+
+              type="button"
+
+              class="api-log-user-card"
+
+              :class="{
+
+                active:
+
+                  mValue?.id === item.id && mValue?.user_type === item.user_type,
+
+              }"
+
+              @click="selectOption(item)"
+
+            >
+
+              <Avatar :src="item.avatar" :size="30">
+
+                {{ (item.name || '?').charAt(0) }}
+
+              </Avatar>
+
+              <div class="api-log-user-card-id">#{{ item.id }}</div>
+
+              <div class="api-log-user-card-name" :title="item.name">
+
+                {{ item.name }}
+
+              </div>
+
+              <Tag class="api-log-user-card-role" :bordered="false">
+
+                {{ item.role_label }}
+
+              </Tag>
+
+            </button>
+
+          </div>
+
+          <Empty
+
+            v-else
+
+            :description="searchKeyword.trim() ? '无匹配用户' : '请输入关键词搜索'"
+

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

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Empty, Input, Popover, Spin } from 'ant-design-vue';
+
+import { getExpressCompaniesOption } from '#/views/business/express/express-company/api';
+
+defineOptions({
+  name: 'ExpressCompanySelect',
+  inheritAttrs: false,
+});
+
+const props = defineProps<{
+  value?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}>();
+
+const emits = defineEmits<{
+  'update:value': [value: string | undefined];
+}>();
+
+const mValue = useVModel(props, 'value', emits, { passive: true });
+
+type ExpressCompanyOption = {
+  id: number;
+  name: string;
+  code: string;
+};
+
+const open = ref(false);
+const loading = ref(false);
+const searchKeyword = ref('');
+const options = ref<ExpressCompanyOption[]>([]);
+const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
+
+function filterExpressCompanyOptions(keyword: string, list: ExpressCompanyOption[]) {
+  const q = keyword.trim().toLowerCase();
+  if (!q) return list;
+  return list.filter((item) => {
+    const name = (item.name || '').toLowerCase();
+    const code = (item.code || '').toLowerCase();
+    return name.includes(q) || code.includes(q);
+  });
+}
+
+const filteredOptions = computed(() =>
+  filterExpressCompanyOptions(searchKeyword.value, options.value),
+);
+
+const selectedOption = computed(() =>
+  options.value.find((item) => item.code === mValue.value),
+);
+
+const displayText = computed(() => {
+  const item = selectedOption.value;
+  if (!item) return '';
+  return item.code ? `${item.name || '-'}（${item.code}）` : (item.name || '-');
+});
+
+async function loadOptions() {
+  loading.value = true;
+  try {
+    const res = await getExpressCompaniesOption({});
+    options.value = Array.isArray(res) ? res : [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function selectOption(item: ExpressCompanyOption) {
+  mValue.value = item.code;
+  open.value = false;
+  searchKeyword.value = '';
+}
+
+function clearSelection(e: Event) {
+  e.stopPropagation();
+  mValue.value = undefined;
+}
+
+function onOpenChange(next: boolean) {
+  if (props.disabled) return;
+  open.value = next;
+  if (next) {
+    searchKeyword.value = '';
+    if (!options.value.length) {
+      loadOptions();
+    }
+    nextTick(() => searchInputRef.value?.focus?.());
+  }
+}
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (disabled) open.value = false;
+  },
+);
+
+onMounted(() => {
+  loadOptions();
+});
+</script>
+
+<template>
+  <Popover
+    :open="open"
+    trigger="click"
+    placement="bottomLeft"
+    overlay-class-name="express-company-select-popover"
+    @open-change="onOpenChange"
+  >
+    <template #content>
+      <div class="express-panel">
+        <Input
+          ref="searchInputRef"
+          v-model:value="searchKeyword"
+          allow-clear
+          placeholder="搜索公司名称或编码"
+          class="express-search"
+        />
+        <Spin :spinning="loading">
+          <div v-if="filteredOptions.length" class="express-list">
+            <button
+              v-for="item in filteredOptions"
+              :key="item.id"
+              type="button"
+              class="express-item"
+              :class="{ active: item.code === mValue }"
+              @click="selectOption(item)"
+            >
+              <div class="express-meta">
+                <div class="express-name">{{ item.name || '-' }}</div>
+                <div class="express-sub">{{ item.code }}</div>
+              </div>
+            </button>
+          </div>
+          <Empty v-else description="无匹配快递公司" class="express-empty" />
+        </Spin>
+      </div>
+    </template>
+    <div
+      class="express-trigger"
+      :class="{ disabled: disabled, placeholder: !displayText }"
+    >
+      <Input
+        :value="displayText"
+        readonly
+        :disabled="disabled"
+        :placeholder="placeholder || '请选择快递公司'"
+        class="express-trigger-input"
+      >
+        <template v-if="displayText && !disabled" #suffix>
+          <span class="clear-btn" @click="clearSelection">×</span>
+        </template>
+      </Input>
+    </div>
+  </Popover>
+</template>
+
+<style scoped>
+.express-trigger {
+  width: 100%;
+  cursor: pointer;
+}
+.express-trigger.disabled {
+  cursor: not-allowed;
+}
+.express-trigger-input {
+  pointer-events: none;
+}
+.express-trigger:not(.disabled) :deep(.ant-input) {
+  cursor: pointer;
+}
+.clear-btn {
+  pointer-events: auto;
+  cursor: pointer;
+  color: #86909c;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 4px;
+}
+.express-panel {
+  width: 360px;
+  max-width: 80vw;
+}
+.express-search {
+  margin-bottom: 8px;
+}
+.express-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+.express-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.express-item:hover,
+.express-item.active {
+  background: #f2f3f5;
+}
+.express-meta {
+  min-width: 0;
+  flex: 1;
+}
+.express-name {
+  font-size: 14px;
+  color: #1d2129;
+}
+.express-sub {
+  font-size: 12px;
+  color: #86909c;
+}
+.express-empty {
+  margin: 12px 0;
+}
+</style>
+
+<style>
+.express-company-select-popover .ant-popover-inner {
+  padding: 12px;
+}
+</style>

apps/web-antd/src/components/form/components/picker-card-theme.scss

@@ -0,0 +1,143 @@
+// Shared picker layout mixins — property-only dark variants, no global class selectors.
+
+@mixin picker-card-base {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 6px;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  text-align: center;
+  min-width: 0;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+
+  &:hover,
+  &.active {
+    border-color: #165dff;
+    background: #f2f7ff;
+  }
+}
+
+@mixin picker-card-name {
+  width: 100%;
+  font-size: 12px;
+  color: #1d2129;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin picker-card-sub {
+  font-size: 11px;
+  color: #86909c;
+  line-height: 1.2;
+}
+
+@mixin picker-selected-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  background: #fafafa;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+
+  &:hover {
+    border-color: #165dff;
+    background: #f2f7ff;
+  }
+}
+
+@mixin picker-trigger-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  color: #86909c;
+  font-size: 14px;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+
+  &:hover {
+    border-color: #165dff;
+    color: #165dff;
+  }
+}
+
+@mixin picker-clear-btn {
+  pointer-events: auto;
+  cursor: pointer;
+  color: #86909c;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 4px;
+  flex-shrink: 0;
+
+  &:hover {
+    color: #1d2129;
+  }
+}
+
+@mixin picker-card-dark-props {
+  background: #1f2937;
+  border-color: #374151;
+
+  &:hover,
+  &.active {
+    background: #374151;
+    border-color: #60a5fa;
+  }
+}
+
+@mixin picker-selected-card-dark-props {
+  background: #1f2937;
+  border-color: #374151;
+
+  &:hover {
+    background: #374151;
+    border-color: #60a5fa;
+  }
+}
+
+@mixin picker-text-primary-dark {
+  color: #f3f4f6;
+}
+
+@mixin picker-text-secondary-dark {
+  color: #9ca3af;
+}
+
+@mixin picker-placeholder-dark-props {
+  border-color: #4b5563;
+  color: #9ca3af;
+
+  &:hover {
+    border-color: #60a5fa;
+    color: #60a5fa;
+  }
+}
+
+@mixin picker-clear-dark-props {
+  color: #9ca3af;
+
+  &:hover {
+    color: #f3f4f6;
+  }
+}

apps/web-antd/src/components/form/components/promoter-picker.vue

@@ -2,9 +2,11 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Avatar, Empty, Input, Popover, Spin } from 'ant-design-vue';
+import { Avatar, Empty, Input, Popover, Spin, Tag } from 'ant-design-vue';
 
+import PromoterInfoCard from '#/components/promoter/PromoterInfoCard.vue';
 import { getPromoterOptions } from '#/views/system/store-input/api';
+import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
 
 defineOptions({
   name: 'PromoterPicker',
@@ -27,6 +29,7 @@ type PromoterOption = {
   nick_name: string;
   avatar: string;
   code: string;
+  phone: string;
   role_id: number;
   role_name: string;
 };
@@ -35,7 +38,6 @@ const open = ref(false);
 const loading = ref(false);
 const searchKeyword = ref('');
 const options = ref<PromoterOption[]>([]);
-const triggerRef = ref<HTMLElement | null>(null);
 const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
 
 function filterPromoterOptions(keyword: string, list: PromoterOption[]) {
@@ -44,8 +46,14 @@ function filterPromoterOptions(keyword: string, list: PromoterOption[]) {
   return list.filter((item) => {
     const name = (item.nick_name || '').toLowerCase();
     const code = (item.code || '').toLowerCase();
+    const phone = (item.phone || '').toLowerCase();
     const role = (item.role_name || '').toLowerCase();
-    return name.includes(q) || code.includes(q) || role.includes(q);
+    return (
+      name.includes(q) ||
+      code.includes(q) ||
+      phone.includes(q) ||
+      role.includes(q)
+    );
   });
 }
 
@@ -57,12 +65,6 @@ const selectedOption = computed(() =>
   options.value.find((item) => item.code === mValue.value),
 );
 
-const displayText = computed(() => {
-  const item = selectedOption.value;
-  if (!item) return '';
-  return `${item.nick_name || '-'} · ${item.code} · ${item.role_name || ''}`;
-});
-
 async function loadOptions() {
   loading.value = true;
   try {
@@ -81,8 +83,7 @@ function selectOption(item: PromoterOption) {
   searchKeyword.value = '';
 }
 
-function clearSelection(e: Event) {
-  e.stopPropagation();
+function clearSelection() {
   mValue.value = undefined;
 }
 
@@ -124,120 +125,144 @@ onMounted(() => {
           ref="searchInputRef"
           v-model:value="searchKeyword"
           allow-clear
-          placeholder="搜索业务员姓名"
+          placeholder="搜索业务员姓名、业务码、手机号"
           class="promoter-search"
         />
         <Spin :spinning="loading">
-          <div v-if="filteredOptions.length" class="promoter-list">
+          <div v-if="filteredOptions.length" class="promoter-grid">
             <button
               v-for="item in filteredOptions"
               :key="item.id"
               type="button"
-              class="promoter-item"
+              class="promoter-card"
               :class="{ active: item.code === mValue }"
               @click="selectOption(item)"
             >
-              <Avatar :src="item.avatar" :size="32">
+              <Avatar :src="resolveAvatarUrl(item.avatar)" :size="30">
                 {{ (item.nick_name || '?').charAt(0) }}
               </Avatar>
-              <div class="promoter-meta">
-                <div class="promoter-name">{{ item.nick_name || '-' }}</div>
-                <div class="promoter-sub">{{ item.code }} · {{ item.role_name }}</div>
+              <div class="promoter-card-name" :title="item.nick_name">
+                {{ item.nick_name || '-' }}
               </div>
+              <div class="promoter-card-sub">{{ item.code }}</div>
+              <div v-if="item.phone" class="promoter-card-phone">{{ item.phone }}</div>
+              <Tag class="promoter-card-role" :bordered="false">
+                {{ item.role_name || '业务员' }}
+              </Tag>
             </button>
           </div>
           <Empty v-else description="无匹配业务员" class="promoter-empty" />
         </Spin>
       </div>
     </template>
-    <div
-      ref="triggerRef"
-      class="promoter-trigger"
-      :class="{ disabled: disabled, placeholder: !displayText }"
-    >
-      <Input
-        :value="displayText"
-        readonly
+    <div class="promoter-trigger" :class="{ disabled: disabled }">
+      <PromoterInfoCard
+        v-if="selectedOption"
+        :admin="selectedOption"
+        size="trigger"
+        :show-clear="!disabled"
         :disabled="disabled"
-        placeholder="请选择业务员"
-        class="promoter-trigger-input"
-      >
-        <template v-if="displayText && !disabled" #suffix>
-          <span class="clear-btn" @click="clearSelection">×</span>
-        </template>
-      </Input>
+        :clickable="false"
+        @clear="clearSelection"
+      />
+      <div v-else class="promoter-trigger-placeholder">请选择业务员</div>
     </div>
   </Popover>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@use './picker-card-theme.scss' as theme;
+
 .promoter-trigger {
   width: 100%;
-  cursor: pointer;
 }
+
 .promoter-trigger.disabled {
   cursor: not-allowed;
+  opacity: 0.65;
 }
-.promoter-trigger-input {
-  pointer-events: none;
-}
-.promoter-trigger:not(.disabled) :deep(.ant-input) {
+
+.promoter-trigger:not(.disabled) {
   cursor: pointer;
 }
-.clear-btn {
-  pointer-events: auto;
-  cursor: pointer;
-  color: #86909c;
-  font-size: 16px;
-  line-height: 1;
-  padding: 0 4px;
+
+.promoter-trigger-placeholder {
+  @include theme.picker-trigger-placeholder;
 }
-.promoter-panel {
-  width: 360px;
-  max-width: 80vw;
-}
-.promoter-search {
-  margin-bottom: 8px;
-}
-.promoter-list {
-  max-height: 280px;
-  overflow-y: auto;
-}
-.promoter-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  border-radius: 6px;
-}
-.promoter-item:hover,
-.promoter-item.active {
-  background: #f2f3f5;
-}
-.promoter-meta {
-  min-width: 0;
-  flex: 1;
-}
-.promoter-name {
-  font-size: 14px;
-  color: #1d2129;
-}
-.promoter-sub {
-  font-size: 12px;
-  color: #86909c;
-}
-.promoter-empty {
-  margin: 12px 0;
+
+.dark {
+  .promoter-trigger-placeholder {
+    @include theme.picker-placeholder-dark-props;
+  }
 }
 </style>
 
-<style>
-.promoter-picker-popover .ant-popover-inner {
-  padding: 12px;
+<style lang="scss">
+@use './picker-card-theme.scss' as theme;
+
+.promoter-picker-popover {
+  .ant-popover-inner {
+    padding: 12px;
+  }
+
+  .promoter-panel {
+    width: 540px;
+    max-width: 86vw;
+  }
+
+  .promoter-search {
+    margin-bottom: 10px;
+  }
+
+  .promoter-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
+    gap: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 2px;
+  }
+
+  .promoter-card {
+    @include theme.picker-card-base;
+  }
+
+  .promoter-card-name {
+    @include theme.picker-card-name;
+  }
+
+  .promoter-card-sub,
+  .promoter-card-phone {
+    @include theme.picker-card-sub;
+  }
+
+  .promoter-card-role {
+    margin: 0;
+    font-size: 11px;
+    line-height: 18px;
+    padding: 0 6px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .promoter-empty {
+    margin: 16px 0;
+  }
+}
+
+.dark .promoter-picker-popover {
+  .promoter-card {
+    @include theme.picker-card-dark-props;
+  }
+
+  .promoter-card-name {
+    @include theme.picker-text-primary-dark;
+  }
+
+  .promoter-card-sub,
+  .promoter-card-phone {
+    @include theme.picker-text-secondary-dark;
+  }
 }
 </style>

apps/web-antd/src/components/promoter/PromoterDetailModal.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Avatar, Descriptions, Spin } from 'ant-design-vue';
+
+import { getPromoterDetailApi } from '#/views/system/store-input/api';
+import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
+
+type PromoterDetail = {
+  id: number;
+  nick_name: string;
+  avatar: string;
+  code: string;
+  phone: string;
+  role_name: string;
+  clinic_input_count: number;
+  pharmacy_input_count: number;
+};
+
+const loading = ref(false);
+const detail = ref<PromoterDetail | null>(null);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '业务员详情',
+  class: 'w-[480px]',
+  footer: false,
+  onOpenChange(isOpen) {
+    if (!isOpen) {
+      detail.value = null;
+      return;
+    }
+    const data = modalApi.getData<{ id?: number; code?: string }>();
+    loadDetail(data?.id, data?.code);
+  },
+});
+
+async function loadDetail(id?: number, code?: string) {
+  loading.value = true;
+  try {
+    detail.value = await getPromoterDetailApi({ id, code });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Modal>
+    <Spin :spinning="loading">
+      <div v-if="detail" class="promoter-detail">
+        <div class="promoter-detail__header">
+          <Avatar
+            v-if="resolveAvatarUrl(detail.avatar)"
+            :src="resolveAvatarUrl(detail.avatar)"
+            :size="64"
+          />
+          <Avatar v-else :size="64">{{ (detail.nick_name || '?').charAt(0) }}</Avatar>
+          <div class="promoter-detail__title">{{ detail.nick_name || '-' }}</div>
+          <div class="promoter-detail__role">{{ detail.role_name || '业务员' }}</div>
+        </div>
+        <Descriptions bordered :column="1" size="small" class="promoter-detail__desc">
+          <Descriptions.Item label="推广码">{{ detail.code || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="手机号">{{ detail.phone || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="录入诊所">
+            {{ detail.clinic_input_count ?? 0 }} 家
+          </Descriptions.Item>
+          <Descriptions.Item label="录入药店">
+            {{ detail.pharmacy_input_count ?? 0 }} 家
+          </Descriptions.Item>
+        </Descriptions>
+      </div>
+    </Spin>
+  </Modal>
+</template>
+
+<style scoped>
+.promoter-detail__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.promoter-detail__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1d2129;
+}
+
+.promoter-detail__role {
+  font-size: 13px;
+  color: #86909c;
+}
+
+.promoter-detail__desc {
+  margin-top: 8px;
+}
+
+.dark .promoter-detail__title {
+  color: #f3f4f6;
+}
+
+.dark .promoter-detail__role {
+  color: #9ca3af;
+}
+</style>

apps/web-antd/src/components/promoter/PromoterInfoCard.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Avatar } from 'ant-design-vue';
+
+import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
+
+import PromoterDetailModal from './PromoterDetailModal.vue';
+
+export type PromoterAdminLike = {
+  id?: number;
+  nick_name?: string;
+  avatar?: string;
+  phone?: string;
+  code?: string;
+  role_name?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    admin?: PromoterAdminLike | null;
+    size?: 'compact' | 'trigger';
+    clickable?: boolean;
+    showClear?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    admin: null,
+    size: 'compact',
+    clickable: true,
+    showClear: false,
+    disabled: false,
+  },
+);
+
+const emits = defineEmits<{
+  clear: [];
+}>();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: PromoterDetailModal,
+});
+
+const displayName = computed(
+  () => props.admin?.nick_name?.trim() || props.admin?.phone?.trim() || '-',
+);
+
+const avatarUrl = computed(() => resolveAvatarUrl(props.admin?.avatar));
+
+const canOpenDetail = computed(
+  () =>
+    props.clickable &&
+    !props.disabled &&
+    !!(props.admin?.id || props.admin?.code),
+);
+
+function openDetail() {
+  if (!canOpenDetail.value) return;
+  detailModalApi.setData({
+    id: props.admin?.id,
+    code: props.admin?.code,
+  });
+  detailModalApi.open();
+}
+
+function onClear(e: Event) {
+  e.stopPropagation();
+  emits('clear');
+}
+</script>
+
+<template>
+  <div>
+    <DetailModal />
+    <div
+      v-if="admin"
+      class="promoter-info-card"
+      :class="[
+        `promoter-info-card--${size}`,
+        {
+          'promoter-info-card--clickable': canOpenDetail,
+          'promoter-info-card--disabled': disabled,
+        },
+      ]"
+      @click="openDetail"
+    >
+      <Avatar v-if="avatarUrl" :src="avatarUrl" :size="size === 'trigger' ? 36 : 28" />
+      <Avatar v-else :size="size === 'trigger' ? 36 : 28">
+        {{ displayName.charAt(0) }}
+      </Avatar>
+      <div class="promoter-info-card__meta">
+        <div class="promoter-info-card__name">{{ displayName }}</div>
+        <div v-if="size === 'trigger' && admin.code" class="promoter-info-card__sub">
+          业务码：{{ admin.code }}
+        </div>
+        <div v-else-if="admin.phone" class="promoter-info-card__sub">
+          {{ admin.phone }}
+        </div>
+      </div>
+      <span
+        v-if="showClear && !disabled"
+        class="promoter-info-card__clear"
+        @click="onClear"
+      >
+        ×
+      </span>
+    </div>
+    <span v-else class="promoter-info-card__empty">-</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.promoter-info-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.promoter-info-card--compact {
+  padding: 2px 0;
+}
+
+.promoter-info-card--trigger {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  background: #fafafa;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+}
+
+.promoter-info-card--clickable.promoter-info-card--trigger {
+  cursor: pointer;
+}
+
+.promoter-info-card--clickable.promoter-info-card--trigger:hover {
+  border-color: #165dff;
+  background: #f2f7ff;
+}
+
+.promoter-info-card--clickable.promoter-info-card--compact {
+  cursor: pointer;
+}
+
+.promoter-info-card--clickable.promoter-info-card--compact:hover {
+  opacity: 0.85;
+}
+
+.promoter-info-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.promoter-info-card__meta {
+  min-width: 0;
+  flex: 1;
+}
+
+.promoter-info-card__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d2129;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.promoter-info-card--compact .promoter-info-card__name {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.promoter-info-card__sub {
+  font-size: 12px;
+  color: #86909c;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.promoter-info-card--compact .promoter-info-card__sub {
+  font-size: 11px;
+}
+
+.promoter-info-card__clear {
+  flex-shrink: 0;
+  cursor: pointer;
+  color: #86909c;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 4px;
+}
+
+.promoter-info-card__clear:hover {
+  color: #1d2129;
+}
+
+.promoter-info-card__empty {
+  color: #86909c;
+}
+
+.dark {
+  .promoter-info-card--trigger {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .promoter-info-card--clickable.promoter-info-card--trigger:hover {
+    background: #374151;
+    border-color: #60a5fa;
+  }
+
+  .promoter-info-card__name {
+    color: #f3f4f6;
+  }
+
+  .promoter-info-card__sub,
+  .promoter-info-card__empty {
+    color: #9ca3af;
+  }
+
+  .promoter-info-card__clear {
+    color: #9ca3af;
+  }
+
+  .promoter-info-card__clear:hover {
+    color: #f3f4f6;
+  }
+}
+</style>