fix: 接诊UI

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

@@ -5,6 +5,7 @@ import { useVbenDrawer } from '@vben/common-ui';
 
 import { Button, Descriptions, Image, Spin } from 'ant-design-vue';
 
+import FilePreviewModal from '#/components/file-preview/FilePreviewModal.vue';
 import MIcon from '#/components/icon/icon.vue';
 import { XgVideoPlayer } from '#/components/video-player';
 import type { FileGalleryDetail } from '#/api/core/file-gallery';
@@ -14,6 +15,8 @@ defineOptions({ name: 'FileDetailDrawer' });
 
 const loading = ref(false);
 const detail = ref<FileGalleryDetail | null>(null);
+const previewOpen = ref(false);
+const previewFiles = ref<string[]>([]);
 
 const [Drawer, drawerApi] = useVbenDrawer({
   class: 'w-[520px]',
@@ -45,6 +48,15 @@ function downloadFile() {
   document.body.removeChild(link);
 }
 
+/** 图片/PDF 走公共预览组件 */
+function openPreview() {
+  if (!detail.value?.url) {
+    return;
+  }
+  previewFiles.value = [detail.value.url];
+  previewOpen.value = true;
+}
+
 async function loadDetail() {
   const data = drawerApi.getData<{ id?: number }>();
   if (!data?.id) {
@@ -67,10 +79,11 @@ defineExpose({
 
 <template>
   <Drawer title="文件详情">
+    <FilePreviewModal v-model:open="previewOpen" :files="previewFiles" title="素材预览" />
     <Spin :spinning="loading">
       <template v-if="detail">
         <div class="preview-wrap">
-          <Image v-if="detail.type === 0" :src="detail.url" :width="220" />
+          <Image v-if="detail.type === 0" :src="detail.url" :width="220" :preview="true" />
           <XgVideoPlayer
             v-else-if="detail.type === 1"
             :src="detail.url"
@@ -84,7 +97,10 @@ defineExpose({
           />
           <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 class="btn-row">
+              <Button type="primary" @click="openPreview">预览 PDF</Button>
+              <Button @click="downloadFile">下载 PDF</Button>
+            </div>
           </div>
           <div v-else class="fallback-preview">
             <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
@@ -138,11 +154,22 @@ defineExpose({
   align-items: center;
   gap: 12px;
   padding: 24px;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.25);
+  color: hsl(var(--foreground));
+}
+
+.btn-row {
+  display: flex;
+  gap: 8px;
 }
 
 .type-row {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  color: hsl(var(--foreground));
 }
 </style>

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

@@ -357,8 +357,7 @@ watch(typesLoading, (val) => {
 </template>
 
 <style scoped lang="scss">
-@use '#/components/form/components/picker-card-theme.scss' as theme;
-
+/* 素材库卡片：用主题变量适配明/暗色，避免硬编码浅色底 */
 .tab-label {
   display: inline-flex;
   align-items: center;
@@ -387,9 +386,10 @@ watch(typesLoading, (val) => {
   flex-direction: column;
   gap: 8px;
   padding: 10px;
-  border: 1px solid #e5e6eb;
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: #fff;
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
   cursor: pointer;
 }
 
@@ -398,7 +398,7 @@ watch(typesLoading, (val) => {
   height: 120px;
   object-fit: cover;
   border-radius: 6px;
-  background: #f5f5f5;
+  background: hsl(var(--muted) / 0.45);
 }
 
 .gallery-file-icon {
@@ -409,8 +409,8 @@ watch(typesLoading, (val) => {
   gap: 8px;
   height: 120px;
   border-radius: 6px;
-  background: #f5f5f5;
-  color: #4e5969;
+  background: hsl(var(--muted) / 0.45);
+  color: hsl(var(--muted-foreground));
   padding: 8px;
 
   .file-name {
@@ -425,7 +425,7 @@ watch(typesLoading, (val) => {
 
 .gallery-meta {
   font-size: 12px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
   text-align: center;
 
   .file-title {
@@ -433,7 +433,7 @@ watch(typesLoading, (val) => {
     align-items: center;
     justify-content: center;
     gap: 4px;
-    color: #1d2129;
+    color: hsl(var(--foreground));
     font-weight: 500;
     margin-bottom: 4px;
     max-width: 100%;
@@ -452,23 +452,4 @@ watch(typesLoading, (val) => {
   display: flex;
   justify-content: center;
 }
-
-.dark {
-  .gallery-card {
-    @include theme.picker-card-dark-props;
-  }
-
-  .gallery-thumb,
-  .gallery-file-icon {
-    background: #374151;
-  }
-
-  .gallery-meta {
-    @include theme.picker-text-secondary-dark;
-
-    .file-title {
-      color: #e5e7eb;
-    }
-  }
-}
 </style>