1. 右键菜单通用组件封装

2. 文件管理优化功能（后续需要新增分组、个人收藏）
3. 优化订单页面、诊所管理页面的布局，更加集中，减少表长度
4. 新增诊所的时候业务员支持气泡卡片点击选择，不用再输入业务码
5. 接口日志筛选优化

apps/web-antd/src/components/context-menu/global-context-menu.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { ContextMenuItem } from './types';
+import MIcon from '#/components/icon/icon.vue';
+import {
+  contextMenuState,
+  getSubmenuPosition,
+  hideContextMenu,
+  MENU_ITEM_HEIGHT,
+  MENU_WIDTH,
+  showSubmenu,
+  submenuState,
+} from './use-context-menu';
+
+defineOptions({ name: 'GlobalContextMenu' });
+
+function onItemEnter(item: ContextMenuItem, e: MouseEvent) {
+  if (!item.children?.length || item.disabled) {
+    showSubmenu('', [], 0, 0);
+    return;
+  }
+
+  const target = e.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const pos = getSubmenuPosition(rect, item.children.length);
+  showSubmenu(item.key, item.children, pos.left, pos.top);
+}
+
+function handleClick(item: ContextMenuItem) {
+  if (item.disabled || item.children?.length) {
+    return;
+  }
+  item.handler?.(contextMenuState.payload);
+  hideContextMenu();
+}
+
+function handleSubmenuClick(item: ContextMenuItem) {
+  if (item.disabled) {
+    return;
+  }
+  item.handler?.(contextMenuState.payload);
+  hideContextMenu();
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="contextMenuState.visible"
+      class="global-context-menu"
+      :style="{ left: `${contextMenuState.x}px`, top: `${contextMenuState.y}px`, width: `${MENU_WIDTH}px` }"
+      @contextmenu.prevent
+    >
+      <div
+        v-for="item in contextMenuState.items"
+        :key="item.key"
+        class="context-menu-item"
+        :class="{ disabled: item.disabled, 'has-children': !!item.children?.length }"
+        @click.stop="handleClick(item)"
+        @mouseenter="onItemEnter(item, $event)"
+      >
+        <span class="item-icon">
+          <component :is="item.icon" v-if="item.icon" />
+          <MIcon v-else-if="item.iconName" :icon="item.iconName" size="14" />
+        </span>
+        <span class="item-label">{{ item.label }}</span>
+        <span v-if="item.children?.length" class="item-arrow">›</span>
+      </div>
+    </div>
+
+    <div
+      v-if="contextMenuState.visible && submenuState.activeKey && submenuState.items.length"
+      class="global-context-menu submenu"
+      :style="{ left: `${submenuState.left}px`, top: `${submenuState.top}px`, width: `${MENU_WIDTH}px` }"
+      @contextmenu.prevent
+    >
+      <div
+        v-for="child in submenuState.items"
+        :key="child.key"
+        class="context-menu-item"
+        :class="{ disabled: child.disabled }"
+        @click.stop="handleSubmenuClick(child)"
+      >
+        <span class="item-icon">
+          <component :is="child.icon" v-if="child.icon" />
+          <MIcon v-else-if="child.iconName" :icon="child.iconName" size="14" />
+        </span>
+        <span class="item-label">{{ child.label }}</span>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.global-context-menu {
+  position: fixed;
+  z-index: 9999;
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: #1d2129;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover:not(.disabled) {
+    background: #f2f7ff;
+    color: #165dff;
+  }
+
+  &.disabled {
+    color: #c9cdd4;
+    cursor: not-allowed;
+  }
+
+  &.has-children {
+    padding-right: 8px;
+  }
+}
+
+.item-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-arrow {
+  color: #86909c;
+  font-size: 14px;
+}
+
+.dark {
+  .global-context-menu {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .context-menu-item {
+    color: #e5e7eb;
+
+    &:hover:not(.disabled) {
+      background: #374151;
+      color: #93c5fd;
+    }
+  }
+}
+</style>

apps/web-antd/src/components/context-menu/index.ts

@@ -0,0 +1,3 @@
+export type { ContextMenuItem } from './types';
+export { showContextMenu, hideContextMenu } from './use-context-menu';
+export { default as GlobalContextMenu } from './global-context-menu.vue';

apps/web-antd/src/components/context-menu/types.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+
+export interface ContextMenuItem {
+  key: string;
+  label: string;
+  icon?: Component;
+  iconName?: string;
+  disabled?: boolean;
+  handler?: (payload?: any) => void;
+  children?: ContextMenuItem[];
+}
+
+export interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  payload: any;
+}

apps/web-antd/src/components/context-menu/use-context-menu.ts

@@ -0,0 +1,110 @@
+import { reactive } from 'vue';
+
+import type { ContextMenuItem, ContextMenuState } from './types';
+
+const MENU_WIDTH = 180;
+const MENU_ITEM_HEIGHT = 36;
+const SUBMENU_GAP = 4;
+
+let listenersBound = false;
+
+export const contextMenuState = reactive<ContextMenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  items: [],
+  payload: null,
+});
+
+export const submenuState = reactive({
+  activeKey: null as string | null,
+  items: [] as ContextMenuItem[],
+  left: 0,
+  top: 0,
+});
+
+function bindGlobalListeners() {
+  if (listenersBound) {
+    return;
+  }
+  listenersBound = true;
+
+  const hide = () => hideContextMenu();
+
+  document.addEventListener('click', hide, true);
+  document.addEventListener('scroll', hide, true);
+  window.addEventListener('resize', hide);
+}
+
+export function resetSubmenu() {
+  submenuState.activeKey = null;
+  submenuState.items = [];
+  submenuState.left = 0;
+  submenuState.top = 0;
+}
+
+export function showSubmenu(key: string, items: ContextMenuItem[], left: number, top: number) {
+  submenuState.activeKey = key;
+  submenuState.items = items;
+  submenuState.left = left;
+  submenuState.top = top;
+}
+
+export function showContextMenu(
+  e: MouseEvent,
+  items: ContextMenuItem[],
+  payload?: any,
+) {
+  e.preventDefault();
+  hideContextMenu();
+
+  const estimatedHeight = estimateMenuHeight(items);
+  let x = e.clientX;
+  let y = e.clientY;
+
+  if (x + MENU_WIDTH > window.innerWidth) {
+    x = Math.max(8, window.innerWidth - MENU_WIDTH - 8);
+  }
+  if (y + estimatedHeight > window.innerHeight) {
+    y = Math.max(8, window.innerHeight - estimatedHeight - 8);
+  }
+
+  contextMenuState.x = x;
+  contextMenuState.y = y;
+  contextMenuState.items = items;
+  contextMenuState.payload = payload ?? null;
+  contextMenuState.visible = true;
+
+  bindGlobalListeners();
+}
+
+export function hideContextMenu() {
+  contextMenuState.visible = false;
+  contextMenuState.items = [];
+  contextMenuState.payload = null;
+  resetSubmenu();
+}
+
+export function estimateMenuHeight(items: ContextMenuItem[]): number {
+  return items.length * MENU_ITEM_HEIGHT + 8;
+}
+
+export function getSubmenuPosition(
+  parentRect: DOMRect,
+  childCount: number,
+): { left: number; top: number } {
+  const submenuHeight = childCount * MENU_ITEM_HEIGHT + 8;
+  let left = parentRect.right + SUBMENU_GAP;
+  let top = parentRect.top;
+
+  if (left + MENU_WIDTH > window.innerWidth) {
+    left = parentRect.left - MENU_WIDTH - SUBMENU_GAP;
+  }
+  if (top + submenuHeight > window.innerHeight) {
+    top = Math.max(8, window.innerHeight - submenuHeight - 8);
+  }
+
+  return { left, top };
+}
+
+export { MENU_WIDTH, MENU_ITEM_HEIGHT };

apps/web-antd/src/components/form/components/gallery-pick-link.vue

@@ -36,7 +36,7 @@ function onSelect(urls: string[]) {
 
 <template>
   <div class="gallery-pick-link-wrap">
-    <a class="gallery-pick-link" :class="{ disabled }" @click.prevent="openGallery">从图库选择</a>
+    <a class="gallery-pick-link" :class="{ disabled }" @click.prevent="openGallery">从文件库选择</a>
     <ImageGalleryPicker
       v-model:open="galleryOpen"
       :multiple="multiple"

apps/web-antd/src/components/form/components/image-gallery-picker.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-import { Empty, Modal, Pagination, Spin } from 'ant-design-vue';
+import { Empty, Input, Modal, Pagination, Spin, Tabs } from 'ant-design-vue';
 
+import MIcon from '#/components/icon/icon.vue';
+import { useFileGalleryFilter } from '#/composables/use-file-gallery-filter';
+import { resolveTypeIcon } from '#/composables/use-file-type-icon';
 import type { FileGalleryItem } from '#/api/core/file-gallery';
 import { getFileGalleryList } from '#/api/core/file-gallery';
 
@@ -28,17 +31,25 @@ const items = ref<FileGalleryItem[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(24);
+const pageSizeOptions = ['12', '24', '48'];
 const selected = ref<string[]>([]);
 
+const {
+  activeType,
+  keyword,
+  tabs,
+  setActiveType,
+  buildListParams,
+  fileTypes,
+  typesLoading,
+} = useFileGalleryFilter('file-picker-active-type');
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
 async function load() {
   loading.value = true;
   try {
-    const res = await getFileGalleryList({
-      page: page.value,
-      page_size: pageSize.value,
-      pid: 0,
-      type: 0,
-    });
+    const res = await getFileGalleryList(buildListParams(page.value, pageSize.value));
     const data = (res as any)?.data ?? res;
     items.value = data?.items ?? [];
     total.value = data?.total ?? 0;
@@ -53,11 +64,19 @@ watch(
     if (val) {
       selected.value = [];
       page.value = 1;
-      load();
+      if (!typesLoading.value) {
+        void load();
+      }
     }
   },
 );
 
+watch(typesLoading, (val) => {
+  if (!val && props.open) {
+    void load();
+  }
+});
+
 function toggleSelect(url: string) {
   if (props.multiple) {
     const idx = selected.value.indexOf(url);
@@ -90,21 +109,73 @@ function handleCancel() {
   emit('update:open', false);
 }
 
-function onPageChange(p: number) {
+function onPageChange(p: number, size?: number) {
   page.value = p;
-  load();
+  if (size) {
+    pageSize.value = size;
+  }
+  void load();
+}
+
+function onShowSizeChange(_current: number, size: number) {
+  page.value = 1;
+  pageSize.value = size;
+  void load();
+}
+
+function onTabChange(key: string | number) {
+  setActiveType(Number(key));
+  page.value = 1;
+  void load();
+}
+
+function onSearch(value: string) {
+  keyword.value = value;
+  page.value = 1;
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+  searchTimer = setTimeout(() => {
+    void load();
+  }, 300);
+}
+
+function itemIcon(item: FileGalleryItem) {
+  return item.type_icon || resolveTypeIcon(item.type, fileTypes.value);
 }
 </script>
 
 <template>
   <Modal
     :open="open"
-    title="从图库选择"
+    title="从文件库选择"
     width="820px"
     :ok-button-props="{ disabled: !selected.length }"
     @ok="handleOk"
     @cancel="handleCancel"
   >
+    <Tabs :active-key="String(activeType)" size="small" @change="onTabChange">
+      <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
+        <template #tab>
+          <span class="tab-label">
+            <MIcon v-if="tab.icon" :icon="tab.icon" size="12" />
+            {{ tab.label }}
+          </span>
+        </template>
+      </Tabs.TabPane>
+    </Tabs>
+
+    <div class="picker-toolbar">
+      <Input.Search
+        v-model:value="keyword"
+        allow-clear
+        placeholder="按文件名搜索"
+        size="small"
+        @search="onSearch"
+        @change="(e) => onSearch(e.target.value ?? '')"
+      />
+    </div>
+
     <Spin :spinning="loading">
       <div v-if="items.length" class="gallery-grid">
         <div
@@ -114,22 +185,33 @@ function onPageChange(p: number) {
           :class="{ active: isSelected(item.url) }"
           @click="toggleSelect(item.url)"
         >
-          <img :src="item.url" alt="" class="gallery-thumb" />
+          <img v-if="item.type === 0" :src="item.url" alt="" class="gallery-thumb" />
+          <div v-else class="gallery-file-icon">
+            <MIcon :icon="itemIcon(item)" size="28" />
+            <span class="file-name">{{ item.file_name || item.original_name || '未命名' }}</span>
+          </div>
           <div class="gallery-meta">
+            <div class="file-title">
+              <MIcon :icon="itemIcon(item)" size="11" class="meta-icon" />
+              {{ item.file_name || item.original_name || '-' }}
+            </div>
             <div>{{ item.file_size_text || '-' }}</div>
-            <div>{{ item.created_at || '-' }}</div>
           </div>
         </div>
       </div>
-      <Empty v-else description="图库暂无图片" />
-      <div v-if="total > pageSize" class="gallery-pagination">
+      <Empty v-else description="暂无文件" />
+      <div v-if="total > 0" class="gallery-pagination">
         <Pagination
           :current="page"
           :page-size="pageSize"
+          :page-size-options="pageSizeOptions"
           :total="total"
           size="small"
           show-less-items
+          show-size-changer
+          :show-total="(t) => `共 ${t} 条`"
           @change="onPageChange"
+          @show-size-change="onShowSizeChange"
         />
       </div>
     </Spin>
@@ -139,6 +221,16 @@ function onPageChange(p: number) {
 <style scoped lang="scss">
 @use './picker-card-theme.scss' as picker;
 
+.tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.picker-toolbar {
+  margin-bottom: 12px;
+}
+
 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
@@ -167,9 +259,42 @@ function onPageChange(p: number) {
   background: #f5f5f5;
 }
 
+.gallery-file-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 88px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #4e5969;
+  padding: 6px;
+
+  .file-name {
+    font-size: 11px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 1.2;
+    max-height: 28px;
+    overflow: hidden;
+  }
+}
+
 .gallery-meta {
   font-size: 11px;
   color: #86909c;
+
+  .file-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #1d2129;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .gallery-pagination {
@@ -189,12 +314,17 @@ function onPageChange(p: number) {
     }
   }
 
-  .gallery-thumb {
+  .gallery-thumb,
+  .gallery-file-icon {
     background: #374151;
   }
 
   .gallery-meta {
     @include picker.picker-text-secondary-dark;
+
+    .file-title {
+      color: #e5e7eb;
+    }
   }
 }
 </style>