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

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

apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button, Descriptions, Image, Spin } from 'ant-design-vue';
+
+import MIcon from '#/components/icon/icon.vue';
+import type { FileGalleryDetail } from '#/api/core/file-gallery';
+import { getFileGalleryDetail } from '#/api/core/file-gallery';
+
+defineOptions({ name: 'FileDetailDrawer' });
+
+const loading = ref(false);
+const detail = ref<FileGalleryDetail | null>(null);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  class: 'w-[520px]',
+  showConfirmButton: false,
+  showCancelButton: false,
+  destroyOnClose: true,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      void loadDetail();
+    } else {
+      detail.value = null;
+    }
+  },
+});
+
+function downloadFile() {
+  if (!detail.value?.url) {
+    return;
+  }
+
+  const link = document.createElement('a');
+  link.href = detail.value.url;
+  link.download =
+    detail.value.file_name || detail.value.original_name || 'file';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+async function loadDetail() {
+  const data = drawerApi.getData<{ id?: number }>();
+  if (!data?.id) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const res = await getFileGalleryDetail(data.id);
+    detail.value = ((res as any)?.data ?? res) as FileGalleryDetail;
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({
+  drawerApi,
+});
+</script>
+
+<template>
+  <Drawer title="文件详情">
+    <Spin :spinning="loading">
+      <template v-if="detail">
+        <div class="preview-wrap">
+          <Image v-if="detail.type === 0" :src="detail.url" :width="220" />
+          <video
+            v-else-if="detail.type === 1"
+            class="media-player"
+            controls
+            :src="detail.url"
+          />
+          <audio
+            v-else-if="detail.type === 2"
+            class="media-player audio"
+            controls
+            :src="detail.url"
+          />
+          <div v-else-if="detail.type === 5" class="fallback-preview">
+            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
+            <Button type="primary" @click="downloadFile">下载 PDF</Button>
+          </div>
+          <div v-else class="fallback-preview">
+            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">下载/打开文件</a>
+          </div>
+        </div>
+        <Descriptions bordered :column="1" size="small" class="mt-4">
+          <Descriptions.Item label="文件名">{{ detail.file_name || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="分类">
+            <span class="type-row">
+              <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="14" />
+              {{ detail.type_text || '-' }}
+            </span>
+          </Descriptions.Item>
+          <Descriptions.Item label="大小">{{ detail.file_size_text || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="来源">{{ detail.source_text || detail.source }}</Descriptions.Item>
+          <Descriptions.Item label="上传时间">{{ detail.created_at || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="原始名">{{ detail.original_name || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="OSS路径">{{ detail.object_key || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="访问地址">
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">{{ detail.url }}</a>
+          </Descriptions.Item>
+        </Descriptions>
+      </template>
+    </Spin>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+.preview-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.media-player {
+  width: 100%;
+  max-width: 100%;
+  border-radius: 8px;
+  background: #000;
+}
+
+.media-player.audio {
+  height: 48px;
+  background: transparent;
+}
+
+.fallback-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+}
+
+.type-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>

apps/web-antd/src/views/system/file-gallery/index.vue

@@ -1,35 +1,72 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
-import { Button, Card, Empty, Modal, Pagination, Spin, message } from 'ant-design-vue';
+import { EditOutlined, FolderOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Card,
+  Empty,
+  Input,
+  Modal,
+  Pagination,
+  Spin,
+  Tabs,
+  message,
+} from 'ant-design-vue';
 
+import type { ContextMenuItem } from '#/components/context-menu';
+import { showContextMenu } from '#/components/context-menu';
+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 {
+  batchArchiveFiles,
   deleteFileGalleryItem,
   getFileGalleryList,
+  moveFileGalleryType,
+  renameFileGalleryItem,
   syncFileGalleryFromOss,
 } from '#/api/core/file-gallery';
 
-defineOptions({ name: 'FileGallery' });
+import FileDetailDrawer from './components/file-detail-drawer.vue';
+
+defineOptions({ name: 'FileManagement' });
 
 const loading = ref(false);
+const archiving = ref(false);
 const syncing = ref(false);
+const renameOpen = ref(false);
+const renameValue = ref('');
+const renameTarget = ref<FileGalleryItem | null>(null);
 const items = ref<FileGalleryItem[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(24);
+const pageSizeOptions = ['12', '24', '48', '96'];
+
+const {
+  activeType,
+  keyword,
+  tabs,
+  setActiveType,
+  buildListParams,
+  fileTypes,
+  typesLoading,
+} = useFileGalleryFilter('file-management-active-type');
+
+const [DetailDrawer, detailDrawerApi] = useVbenDrawer({
+  connectedComponent: FileDetailDrawer,
+});
+
+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;
@@ -43,13 +80,29 @@ async function handleSync() {
   try {
     const res = await syncFileGalleryFromOss();
     const data = (res as any)?.data ?? res;
-    message.success(`同步完成：扫描 ${data?.scanned ?? 0} 个，新增 ${data?.added ?? 0} 张，跳过 ${data?.skipped ?? 0} 张`);
+    message.success(
+      `同步完成：扫描 ${data?.scanned ?? 0} 个，新增 ${data?.synced ?? 0} 个，跳过 ${data?.skipped ?? 0} 个`,
+    );
     await load();
   } finally {
     syncing.value = false;
   }
 }
 
+async function handleArchive() {
+  archiving.value = true;
+  try {
+    const res = await batchArchiveFiles();
+    const data = (res as any)?.data ?? res;
+    message.success(
+      `归档完成：修正分类 ${data?.reclassified ?? 0} 个，补全文件名 ${data?.file_name_filled ?? 0} 个`,
+    );
+    await load();
+  } finally {
+    archiving.value = false;
+  }
+}
+
 function handleDelete(item: FileGalleryItem) {
   Modal.confirm({
     title: '确认删除',
@@ -65,56 +118,208 @@ function handleDelete(item: FileGalleryItem) {
   });
 }
 
-function onPageChange(p: number) {
-  page.value = p;
-  load();
+function openDetail(item: FileGalleryItem) {
+  detailDrawerApi.setData({ id: item.id });
+  detailDrawerApi.open();
 }
 
-load();
+function handleRename(item: FileGalleryItem) {
+  renameTarget.value = item;
+  renameValue.value = item.file_name || item.original_name || '';
+  renameOpen.value = true;
+}
+
+async function submitRename() {
+  const name = renameValue.value.trim();
+  if (!name) {
+    message.warning('文件名不能为空');
+    return;
+  }
+  if (!renameTarget.value) {
+    return;
+  }
+  await renameFileGalleryItem(renameTarget.value.id, name);
+  message.success('重命名成功');
+  renameOpen.value = false;
+  renameTarget.value = null;
+  await load();
+}
+
+async function handleMoveType(item: FileGalleryItem, type: number) {
+  await moveFileGalleryType(item.id, type);
+  message.success('分类已更新');
+  await load();
+}
+
+function buildContextMenus(item: FileGalleryItem): ContextMenuItem[] {
+  const moveChildren: ContextMenuItem[] = fileTypes.value.map((typeItem) => ({
+    key: `move-${typeItem.value}`,
+    label: typeItem.name,
+    iconName: typeItem.icon,
+    disabled: item.type === typeItem.value,
+    handler: () => handleMoveType(item, typeItem.value),
+  }));
+
+  return [
+    {
+      key: 'rename',
+      label: '重命名',
+      icon: EditOutlined,
+      handler: () => handleRename(item),
+    },
+    {
+      key: 'move',
+      label: '移动分类',
+      icon: FolderOutlined,
+      children: moveChildren,
+    },
+  ];
+}
+
+function onContextMenu(e: MouseEvent, item: FileGalleryItem) {
+  showContextMenu(e, buildContextMenus(item), item);
+}
+
+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 onPageChange(p: number, size?: number) {
+  page.value = p;
+  if (size) {
+    pageSize.value = size;
+  }
+  void load();
+}
+
+function onShowSizeChange(_current: number, size: number) {
+  page.value = 1;
+  pageSize.value = size;
+  void load();
+}
+
+function itemIcon(item: FileGalleryItem) {
+  return item.type_icon || resolveTypeIcon(item.type, fileTypes.value);
+}
+
+watch(typesLoading, (val) => {
+  if (!val) {
+    void load();
+  }
+});
 </script>
 
 <template>
-  <Page auto-content-height title="图库管理">
+  <Page auto-content-height title="文件管理">
     <Card>
+      <Tabs :active-key="String(activeType)" @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="14" />
+              {{ tab.label }}
+            </span>
+          </template>
+        </Tabs.TabPane>
+      </Tabs>
+
       <div class="toolbar">
-        <Button type="primary" :loading="syncing" @click="handleSync">同步 OSS 图片</Button>
+        <Input.Search
+          v-model:value="keyword"
+          allow-clear
+          placeholder="按文件名搜索"
+          style="width: 260px"
+          @search="onSearch"
+          @change="(e) => onSearch(e.target.value ?? '')"
+        />
+        <Button :loading="syncing" @click="handleSync">从 OSS 同步</Button>
+        <Button type="primary" :loading="archiving" @click="handleArchive">一键归档</Button>
         <Button :loading="loading" @click="load">刷新</Button>
       </div>
 
       <Spin :spinning="loading">
         <div v-if="items.length" class="gallery-grid">
-          <div v-for="item in items" :key="item.id" class="gallery-card">
-            <img :src="item.url" alt="" class="gallery-thumb" />
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="gallery-card"
+            @click="openDetail(item)"
+            @contextmenu.prevent="onContextMenu($event, item)"
+          >
+            <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="36" />
+              <span class="file-name">{{ item.file_name || item.original_name || '未命名' }}</span>
+            </div>
             <div class="gallery-meta">
-              <div>{{ item.file_size_text || '-' }}</div>
+              <div class="file-title">
+                <MIcon :icon="itemIcon(item)" size="12" class="meta-icon" />
+                {{ item.file_name || item.original_name || '-' }}
+              </div>
+              <div>{{ item.type_text || '-' }} · {{ item.file_size_text || '-' }}</div>
               <div>{{ item.created_at || '-' }}</div>
             </div>
-            <Button danger size="small" block @click="handleDelete(item)">删除</Button>
+            <Button danger size="small" block @click.stop="handleDelete(item)">删除</Button>
           </div>
         </div>
-        <Empty v-else description="暂无图片，可点击「同步 OSS 图片」导入" />
+        <Empty v-else description="暂无文件，可点击「从 OSS 同步」导入" />
       </Spin>
 
-      <div v-if="total > pageSize" class="gallery-pagination">
+      <div v-if="total > 0" class="gallery-pagination">
         <Pagination
           :current="page"
           :page-size="pageSize"
+          :page-size-options="pageSizeOptions"
           :total="total"
           show-size-changer
+          :show-total="(t) => `共 ${t} 条`"
           @change="onPageChange"
+          @show-size-change="onShowSizeChange"
         />
       </div>
     </Card>
+
+    <DetailDrawer />
+
+    <Modal
+      v-model:open="renameOpen"
+      title="重命名"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="submitRename"
+    >
+      <Input v-model:value="renameValue" placeholder="请输入文件名" />
+    </Modal>
   </Page>
 </template>
 
 <style scoped lang="scss">
 @use '#/components/form/components/picker-card-theme.scss' as theme;
 
+.tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .toolbar {
   display: flex;
   gap: 12px;
   margin-bottom: 16px;
+  flex-wrap: wrap;
 }
 
 .gallery-grid {
@@ -131,6 +336,7 @@ load();
   border: 1px solid #e5e6eb;
   border-radius: 8px;
   background: #fff;
+  cursor: pointer;
 }
 
 .gallery-thumb {
@@ -141,10 +347,50 @@ load();
   background: #f5f5f5;
 }
 
+.gallery-file-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 120px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #4e5969;
+  padding: 8px;
+
+  .file-name {
+    font-size: 12px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 1.3;
+    max-height: 32px;
+    overflow: hidden;
+  }
+}
+
 .gallery-meta {
   font-size: 12px;
   color: #86909c;
   text-align: center;
+
+  .file-title {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: #1d2129;
+    font-weight: 500;
+    margin-bottom: 4px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .meta-icon {
+    flex-shrink: 0;
+  }
 }
 
 .gallery-pagination {
@@ -158,12 +404,17 @@ load();
     @include theme.picker-card-dark-props;
   }
 
-  .gallery-thumb {
+  .gallery-thumb,
+  .gallery-file-icon {
     background: #374151;
   }
 
   .gallery-meta {
     @include theme.picker-text-secondary-dark;
+
+    .file-title {
+      color: #e5e7eb;
+    }
   }
 }
 </style>

apps/web-antd/src/views/system/file-type/index.vue

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Switch, Table, message } from 'ant-design-vue';
+
+import MIcon from '#/components/icon/icon.vue';
+import type { FileTypeRecord } from '#/api/core/file-type';
+import {
+  createFileType,
+  deleteFileType,
+  getFileTypeList,
+  updateFileType,
+} from '#/api/core/file-type';
+
+defineOptions({ name: 'FileType' });
+
+const loading = ref(false);
+const items = ref<FileTypeRecord[]>([]);
+const modalOpen = ref(false);
+const isUpdate = ref(false);
+const form = ref<Partial<FileTypeRecord>>({
+  name: '',
+  icon: '',
+  value: 0,
+  suffix: '',
+  sort: 0,
+  status: 1,
+});
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 70 },
+  { title: '图标', key: 'icon', width: 80 },
+  { title: '名称', dataIndex: 'name' },
+  { title: '值', dataIndex: 'value', width: 70 },
+  { title: '后缀', dataIndex: 'suffix' },
+  { title: '排序', dataIndex: 'sort', width: 80 },
+  { title: '状态', key: 'status', width: 90 },
+  { title: '操作', key: 'action', width: 140 },
+];
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await getFileTypeList();
+    const data = (res as any)?.data ?? res;
+    items.value = Array.isArray(data) ? data : [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  isUpdate.value = false;
+  form.value = { name: '', icon: '', value: 0, suffix: '', sort: 0, status: 1 };
+  modalOpen.value = true;
+}
+
+function openEdit(row: FileTypeRecord) {
+  isUpdate.value = true;
+  form.value = { ...row };
+  modalOpen.value = true;
+}
+
+async function submitForm() {
+  if (!form.value.name?.trim() || !form.value.suffix?.trim()) {
+    message.warning('请填写名称和后缀');
+    return;
+  }
+  if (isUpdate.value && form.value.id) {
+    await updateFileType({
+      id: form.value.id,
+      name: form.value.name,
+      icon: form.value.icon,
+      suffix: form.value.suffix,
+      sort: form.value.sort,
+      status: form.value.status,
+    });
+    message.success('更新成功');
+  } else {
+    await createFileType(form.value);
+    message.success('创建成功');
+  }
+  modalOpen.value = false;
+  await load();
+}
+
+function handleDelete(row: FileTypeRecord) {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定删除分类「${row.name}」吗？`,
+    okType: 'danger',
+    async onOk() {
+      await deleteFileType(row.id);
+      message.success('删除成功');
+      await load();
+    },
+  });
+}
+
+void load();
+</script>
+
+<template>
+  <Page auto-content-height title="文件分类管理">
+    <Card>
+      <div class="toolbar">
+        <Button type="primary" @click="openCreate">新增分类</Button>
+        <Button :loading="loading" @click="load">刷新</Button>
+      </div>
+
+      <Table
+        :columns="columns"
+        :data-source="items"
+        :loading="loading"
+        :pagination="false"
+        row-key="id"
+        size="small"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'icon'">
+            <MIcon v-if="record.icon" :icon="record.icon" size="18" />
+            <span v-else>-</span>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            {{ record.status === 1 ? '启用' : '禁用' }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Space>
+              <Button type="link" size="small" @click="openEdit(record)">编辑</Button>
+              <Button danger type="link" size="small" @click="handleDelete(record)">删除</Button>
+            </Space>
+          </template>
+        </template>
+      </Table>
+    </Card>
+
+    <Modal
+      v-model:open="modalOpen"
+      :title="isUpdate ? '编辑分类' : '新增分类'"
+      ok-text="保存"
+      cancel-text="取消"
+      @ok="submitForm"
+    >
+      <Form layout="vertical" class="mt-2">
+        <Form.Item label="名称" required>
+          <Input v-model:value="form.name" placeholder="如：图片" />
+        </Form.Item>
+        <Form.Item label="图标 (Iconify)">
+          <Input v-model:value="form.icon" placeholder="ant-design:file-image-outlined" />
+          <div v-if="form.icon" class="icon-preview">
+            <MIcon :icon="form.icon" size="20" />
+          </div>
+        </Form.Item>
+        <Form.Item v-if="!isUpdate" label="分类值 (对应 xk_file.type)" required>
+          <InputNumber v-model:value="form.value" :min="0" :max="99" class="w-full" />
+        </Form.Item>
+        <Form.Item v-else label="分类值">
+          <Input :value="String(form.value)" disabled />
+        </Form.Item>
+        <Form.Item label="后缀（逗号分隔）" required>
+          <Input v-model:value="form.suffix" placeholder="jpg,png,gif" />
+        </Form.Item>
+        <Form.Item label="排序">
+          <InputNumber v-model:value="form.sort" :min="0" class="w-full" />
+        </Form.Item>
+        <Form.Item label="状态">
+          <Switch
+            :checked="form.status === 1"
+            checked-children="启用"
+            un-checked-children="禁用"
+            @change="(v) => (form.status = v ? 1 : 0)"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  </Page>
+</template>
+
+<style scoped lang="scss">
+.toolbar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.icon-preview {
+  margin-top: 8px;
+}
+</style>