ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/upload/uploader.vue

@@ -0,0 +1,876 @@
+<script setup lang="ts">
+import {
+    type ClassificationLevel,
+    createAxiosWithoutCache,
+    type FileInfo,
+    Jari,
+    type UploadInitParams,
+    useFilesApi,
+    useLoading,
+    useLoginUser
+} from "@jari-ace/app-bolts";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { ArrowDown, Document, Download, Upload, WarningFilled, Picture, VideoPlay, Headset } from "@element-plus/icons-vue";
+import {
+    useSystemClassificationLevelMap,
+    useSystemClassificationLevels
+} from "../../hooks/useClassificationLevels";
+import Ace = Jari.Ace;
+import "@uppy/core/css/style.min.css";
+import "@uppy/dashboard/css/style.min.css";
+import "@uppy/audio/css/style.min.css";
+import "@uppy/screen-capture/css/style.min.css";
+import "@uppy/webcam/css/style.min.css";
+import "@uppy/image-editor/css/style.min.css";
+import Uppy, { type Meta, type UppyFile } from "@uppy/core";
+import Tus from "@uppy/tus";
+import Webcam from "@uppy/webcam";
+import ScreenCapture from "@uppy/screen-capture";
+import Audio from "@uppy/audio";
+import zhCN from "./uploader-locale-zh-cn";
+import Dashboard from "@uppy/dashboard";
+import ImageEditor from "@uppy/image-editor";
+import prettyBytes from "pretty-bytes";
+import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
+import {
+    ElMessageBox,
+    ElTable,
+    ElTableColumn,
+    ElButton,
+    ElDropdown,
+    ElDropdownItem,
+    ElDropdownMenu,
+    ElIcon,
+    ElTag,
+    ElTooltip,
+    ElPopover
+} from "element-plus";
+import type { AceFile } from "./types";
+import { fa } from "element-plus/es/locales.mjs";
+
+const props = withDefaults(defineProps<{
+    /**
+     * 应用名
+     */
+    serviceName: string,
+    /**
+     * 附件配置key
+     */
+    configKey: string,
+    /**
+     * 附件令牌
+     */
+    attachToken?: string,
+    /**
+     * 数据密集
+     */
+    classificationLevel?: number,
+    /**
+     * 文件列表高度
+     */
+    height?: string | number,
+    /**
+     * 文件列表最大高度
+     */
+    maxHeight?: string | number,
+    /**
+     * 是否允许上传, 为空表示采用应用里的附件设置
+     */
+    allowUpload?: boolean,
+    /**
+     * 是否允许下载，为空表示采用应用里的附件设置
+     */
+    allowDownload?: boolean,
+    /**
+     * 是否允许删除，为空表示采用应用里的附件设置
+     */
+    allowDelete?: boolean,
+    /**
+     * 是否允许预览，为空表示采用应用里的附件设置
+     */
+    allowPreview?: boolean,
+    /**
+     * 布局方式: list-列表布局(默认), inline-行内布局
+     */
+    layout?: 'list' | 'inline'
+}>(), {
+    layout: 'list'
+});
+const attachId = defineModel<string>({
+    required: false
+});
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const api = useFilesApi(axios);
+const files = ref<FileInfo[]>([]);
+const classificationLevels = ref<ClassificationLevel[]>([]);
+const allowedClassificationLevels = ref<ClassificationLevel[]>([]);
+const classificationLevelMap = ref<Map<number, string>>();
+const highestClassificationLevel = ref<number>();
+const user = ref<Ace.User>();
+const selectedFileClassificationLevel = ref(50);
+const curAttachToken = ref<string>();
+const uploadInitParams = ref<UploadInitParams>();
+const isNewForm = ref(false);
+const uploadingProgress = ref(100);
+const pdfViewerVisible = ref(false);
+const pdfSrc = ref("");
+const previewableFileExts = [".doc", ".docx", ".xls", ".xlsx", ".wps", ".et",
+    ".csv", ".txt", ".rtf", ".odt", ".ods", ".mht", ".ppt", ".pptx", ".odp", ".pdf", ".xps", "."];
+const emits = defineEmits<{
+    /**
+     * 附件ID变更事件
+     */
+    change: [attachId: string],
+    /**
+     * 添加单个文件事件
+     */
+    fileAdded: [AceFile],
+    /**
+     * 添加多个文件事件
+     */
+    filesAdded: [AceFile[]],
+    /**
+     * 删除单个文件事件
+     */
+    fileRemoved: [AceFile],
+    /**
+     * 开始上传事件
+     */
+    upload: [uploadID: string, files: AceFile[]],
+    /**
+     * 全体进度事件
+     */
+    progress: [progress: number],
+    /**
+     * 单文件进度事件
+     */
+    uploadProgress: [file: AceFile],
+    /**
+     * 文件上传暂停事件
+     */
+    uploadPause: [file: AceFile, isPaused: boolean],
+    /**
+     * 文件上传成功事件
+     */
+    uploadSuccess: [file: AceFile],
+    /**
+     * 全部上传完成事件
+     */
+    complete: [successful: AceFile[], failed: AceFile[]],
+    /**
+     * 全体上传失败事件
+     */
+    error: [error: Error]
+    /**
+     * 单个文件上传失败事件
+     */
+    uploadError: [file: AceFile, error: Error]
+    /**
+     * 下载完成事件
+     */
+    downloaded: [file: FileInfo]
+    /**
+     * 打包下载完成事件
+     */
+    zipDownloaded: [file: FileInfo[]]
+}>();
+let uppy: Uppy | undefined;
+curAttachToken.value = props.attachToken;
+
+onMounted(async () => {
+    await updateAllowedClassificationLevels();
+    if (props.attachToken) {
+        await initLoad();
+    } else {
+        await initNew();
+    }
+});
+
+onUnmounted(() => {
+    if (uppy) uppy.destroy();
+    uppy = undefined;
+});
+
+async function updateAllowedClassificationLevels() {
+    user.value = useLoginUser();
+    const cl = Math.max(props.classificationLevel ?? 50, user.value?.classifiedLevel ?? 50);
+    classificationLevels.value = await useSystemClassificationLevels();
+    classificationLevelMap.value = await useSystemClassificationLevelMap();
+    allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
+    highestClassificationLevel.value = Math.min(...allowedClassificationLevels.value.map(l=>l.value))
+    console.log(`附件控件密级调试:
+    表单密级:`, props.classificationLevel, `
+    用户密级:`, user.value?.classifiedLevel, `
+    表单/用户密级比较后取最低密级:`, cl, `
+    系统密级:`, classificationLevels.value, `
+    最终可选密级:`, allowedClassificationLevels.value
+    );
+}
+
+async function loadFileInfos() {
+    if (!curAttachToken.value) {
+        files.value = [];
+    }
+    files.value = await api.getFileList(curAttachToken.value!);
+}
+
+function createUppyInstance() {
+    if (uppy) {
+        uppy.destroy();
+    }
+    const cfg = uploadInitParams.value!.fileConfig;
+    uppy = new Uppy({
+        autoProceed: true,
+        locale: zhCN
+    }).on("progress", progress => {
+        if (progress == 100) {
+            loadFileInfos();
+        }
+        uploadingProgress.value = progress;
+    });
+    uppy.use(Tus, {
+        endpoint: new URL("/ace-file-service/uploads", location.origin).toString(),
+        withCredentials: true,
+        retryDelays: undefined,
+        chunkSize: !uploadInitParams.value?.chunkSize || uploadInitParams.value?.chunkSize
+            == 0 ? Infinity : uploadInitParams.value?.chunkSize,
+        parallelUploads: 1,
+        headers: {
+            aceAttachId: attachId.value!,
+            aceNewForm: isNewForm.value ? "yes" : "no"
+        },
+        metadata: {
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        },
+        metadataForPartialUploads: {
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        }
+    });
+    if (cfg.enableWebcam) {
+        uppy.use(Webcam, {
+            // Webcam 的相关配置
+            modes: cfg.allowedWebcamModes?.map(m => {
+                switch (m) {
+                    case "VIDEO_AUDIO":
+                        return "video-audio";
+                    case "VIDEO_ONLY":
+                        return "video-only";
+                    case "PICTURE":
+                        return "picture";
+                }
+            }),
+            mirror: false
+        });
+    }
+    if (cfg.enableAudio) {
+        uppy.use(Audio);
+    }
+    if (cfg.enableScreenCapture) {
+        uppy.use(ScreenCapture);
+    }
+    let selectionType: "files" | "folders" | "both" | undefined;
+    if (cfg.disableFileUpload) {
+        if (cfg.disableDirUpload) {
+            selectionType = undefined;
+        } else {
+            selectionType = "folders";
+        }
+    } else {
+        if (cfg.disableDirUpload) {
+            selectionType = "files";
+        } else {
+            selectionType = "both";
+        }
+    }
+    uppy.use(Dashboard, {
+        inline: false,
+        note: cfg.uploadNote,
+        proudlyDisplayPoweredByUppy: false,
+        fileManagerSelectionType: selectionType,
+        singleFileFullScreen: false,
+        disableLocalFiles: cfg.disableFileUpload ?? false,
+        closeAfterFinish: true,
+        closeModalOnClickOutside: true
+    }).use(ImageEditor);
+
+    uppy.on('file-added', file => {
+        emits('fileAdded', file)
+    }).on('files-added', files => {
+        emits('filesAdded', files)
+    }).on('file-removed', file => {
+        emits('fileRemoved', file)
+    }).on('upload', (uploadID, files) => {
+        emits('upload', uploadID, files);
+    }).on('progress', progress => {
+        emits('progress', progress)
+    }).on('upload-progress', file => {
+        emits('uploadProgress', file)
+    }).on('upload-pause', (file, isPaused) => {
+        emits("uploadPause", file, isPaused)
+    }).on('upload-success', file => {
+        emits('uploadSuccess', file)
+    }).on('complete', (result) => {
+        emits('complete', result.successful, result.failed)
+    }).on('error', (error) => {
+        emits('error', error)
+    }).on('upload-error', (file, error) => {
+        emits('uploadError', file, error)
+    })
+}
+
+async function onUploadBtnClick() {
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        uppy?.setMeta({
+            attachId: attachId.value!,
+            configKey: props.configKey,
+            appServiceName: props.serviceName,
+            classifiedLevel: selectedFileClassificationLevel.value.toString()
+        });
+        const dashboard = uppy?.getPlugin("Dashboard") as any;
+        if (dashboard) {
+            dashboard.setOptions({
+                note: (
+                    cfg.uploadNote ? cfg.uploadNote : ""
+                )
+                    + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+            });
+        }
+        dashboard?.openModal();
+    } else {
+        ElMessageBox.alert("无法找到附件配置" + props.configKey, "错误");
+    }
+}
+
+function handleClassificationLevelSelCmd(level: number) {
+    selectedFileClassificationLevel.value = level;
+    uppy?.setMeta({
+        attachId: attachId.value!,
+        configKey: props.configKey,
+        appServiceName: props.serviceName,
+        classifiedLevel: selectedFileClassificationLevel.value.toString()
+    });
+    const dashboard = uppy?.getPlugin("Dashboard") as any;
+    if (dashboard) {
+        const cfg = uploadInitParams.value?.fileConfig;
+        if (cfg) {
+            dashboard.setOptions({
+                note: (
+                    cfg.uploadNote ? cfg.uploadNote : ""
+                )
+                    + `(正在上传${classificationLevelMap.value?.get(selectedFileClassificationLevel.value)}文件)`
+            });
+        }
+        dashboard?.openModal();
+    }
+}
+
+async function initLoad() {
+    uploadInitParams.value = await api.initLoad(props.serviceName, props.configKey, props.attachToken!);
+    files.value = uploadInitParams.value.files;
+    attachId.value = uploadInitParams.value?.attachId;
+    curAttachToken.value = uploadInitParams.value?.attachId;
+    isNewForm.value = false;
+    await nextTick();
+    createUppyInstance();
+}
+
+async function initNew() {
+    uploadInitParams.value = await api.initNew(props.serviceName, props.configKey);
+    files.value = uploadInitParams.value.files;
+    attachId.value = uploadInitParams.value?.attachId;
+    curAttachToken.value = uploadInitParams.value?.attachToken;
+    isNewForm.value = true;
+    emits('change', attachId.value);
+    await nextTick();
+    createUppyInstance();
+}
+
+async function delUploadedFile(file: FileInfo) {
+    await api.deleteFile(file.token || file.id);
+    files.value = files.value.filter(f => f.id !== file.id);
+}
+
+function previewFile(fileToken: string) {
+    pdfSrc.value = new URL("uploads/preview/" + fileToken, location.origin).toString()
+    pdfViewerVisible.value = true;
+}
+
+async function downloadFile(fileToken: string) {
+    await api.downloadFile(fileToken);
+    var file = files.value.filter(f => fileToken === f.token)
+    if (file && file.length > 0)
+        emits('downloaded', file[0]);
+}
+
+function viewUppyDashboard() {
+    const dashboard = uppy?.getPlugin("Dashboard") as any;
+    if (dashboard) {
+        dashboard.openModal();
+    }
+}
+
+async function downloadAll() {
+    if (!curAttachToken.value) {
+        return;
+    }
+    await api.downloadZipFile(curAttachToken.value);
+    emits('zipDownloaded', files.value);
+}
+
+function checkAllowUpload() {
+    console.log('ja-uploader 上传权限调试：')
+    console.log('props.allowUpload = ', props.allowUpload)
+    if (props.allowUpload === false) return false;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        console.log('cfg.uploadAuthCode = ', cfg.uploadAuthCode)
+        if (cfg.uploadAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.uploadAuthCode);
+            }
+            console.log('hasRole = ', hasRole)
+            console.log('final upload auth: ', !cfg.disallowUpload && hasRole)
+            return !cfg.disallowUpload && hasRole;
+        }
+        return !cfg.disallowUpload;
+    }
+    console.log('file cfg ' + props.configKey + ' does not exists')
+    return !!props.allowUpload;
+}
+
+function checkAllowDownload() {
+    console.log('ja-uploader 下载权限调试：')
+    console.log('props.allowDownload = ', props.allowDownload)
+    if (props.allowDownload === false) return false;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        console.log('cfg.uploadAuthCode = ', cfg.uploadAuthCode)
+        if (cfg.downloadAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.downloadAuthCode);
+            }
+            console.log('hasRole = ', hasRole)
+            console.log('final download auth: ', !cfg.disallowDownload && hasRole)
+            return !cfg.disallowDownload && hasRole;
+        }
+        return !cfg.disallowDownload;
+    }
+    return !!props.allowDownload;
+}
+
+function checkAllowDelete() {
+    console.log('ja-uploader 删除权限调试：')
+    console.log('props.allowDelete = ', props.allowDelete)
+    if (props.allowDelete === false) return false;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        let hasRole = true;
+        console.log('cfg.deleteAuthCode = ', cfg.deleteAuthCode)
+        if (cfg.deleteAuthCode) {
+            const login = useLoginUser();
+            if (login) {
+                hasRole = login.hasRole(cfg.deleteAuthCode);
+            }
+            console.log('hasRole = ', hasRole)
+            console.log('final delete auth: ', !cfg.disallowDelete && hasRole)
+            return !cfg.disallowDelete && hasRole;
+        }
+        return !cfg.disallowDelete;
+    }
+    return !!props.allowDelete;
+}
+
+function checkAllowPreview(file: FileInfo) {
+    console.log('ja-uploader 预览权限调试：')
+    console.log('props.allowPreview = ', props.allowPreview)
+    if (props.allowPreview === false) return false;
+    const cfg = uploadInitParams.value?.fileConfig;
+    if (cfg) {
+        if (cfg.disablePreview) {
+            return false;
+        }
+        console.log("file name: ", file.fileName)
+        console.log("可预览类型：", previewableFileExts)
+        return previewableFileExts.some(ext => file.fileName.endsWith(ext));
+    }
+    return props.allowPreview;
+}
+
+watch(() => props.attachToken, () => {
+    if (props.attachToken) {
+        initLoad();
+    } else {
+        initNew();
+    }
+});
+
+watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
+
+function getFileIcon(fileName: string) {
+    if (!fileName) return Document;
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    switch (ext) {
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'webp':
+        case 'svg':
+            return Picture;
+        case 'mp4':
+        case 'mkv':
+        case 'avi':
+        case 'mov':
+        case 'wmv':
+        case 'webm':
+            return VideoPlay;
+        case 'mp3':
+        case 'wav':
+        case 'ogg':
+        case 'flac':
+        case 'm4a':
+            return Headset;
+        default:
+            return Document;
+    }
+}
+
+</script>
+
+<template>
+    <div class="ja-uploader">
+        <div class="ja-uploader-tools">
+            <el-button plain type="success" :icon="Upload" @click="onUploadBtnClick" :loading="loading"
+                :disabled="loading" size="small" v-if="allowedClassificationLevels.length <= 1 && checkAllowUpload()">
+                上传{{ uploadInitParams?.fileConfig.enableClassifiedLevel ? "(非密)" : "" }}
+            </el-button>
+            <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload()" :loading="loading"
+                :disabled="loading || files?.length === 0" size="small">
+                全部下载
+            </el-button>
+            <el-dropdown v-if="allowedClassificationLevels.length > 1 && checkAllowUpload()"
+                @command="handleClassificationLevelSelCmd" size="small">
+                <el-button type="success" size="small">
+                    上传
+                    <el-icon class="el-icon--right">
+                        <arrow-down />
+                    </el-icon>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item v-for="cl in allowedClassificationLevels" :key="cl.value"
+                            :command="cl.value">{{ cl.label }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <div class="container" @click="viewUppyDashboard" v-if="uploadingProgress < 100 && uploadingProgress > 0">
+                <p>
+                    <span class="loader-shimmer">正在上传，已完成{{ uploadingProgress }}%...</span>
+                </p>
+            </div>
+            
+            <div v-if="layout === 'inline'" class="inline-files">
+                 <div v-for="file in files" :key="file.id" class="inline-file-item">
+                    <el-popover placement="top" :width="300" trigger="hover">
+                        <template #reference>
+                            <div class="inline-file-icon-wrapper">
+                                <el-icon class="file-icon" size="20"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                            </div>
+                        </template>
+                        <div class="file-popover-content">
+                            <div class="popover-row">
+                                <span class="label">文件名：</span>
+                                <span class="value">{{ file.fileName }}</span>
+                            </div>
+                             <div class="popover-row">
+                                <span class="label">大小：</span>
+                                <span class="value">{{ prettyBytes(file.fileSize) }}</span>
+                            </div>
+                             <div class="popover-row">
+                                <span class="label">密级：</span>
+                                <span class="value">
+                                     <el-tag size="small"
+                                        :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
+                                        {{ classificationLevelMap?.get(file.classifiedLevel) }}
+                                    </el-tag>
+                                </span>
+                            </div>
+                            <div class="popover-actions">
+                                 <el-button link type="primary" @click="previewFile(file.token)"
+                                    v-if="checkAllowPreview(file)">预览
+                                </el-button>
+                                <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                                </el-button>
+                                <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
+                                </el-button>
+                            </div>
+                        </div>
+                    </el-popover>
+                 </div>
+            </div>
+        </div>
+        <div v-if="layout === 'list'" class="file-list" :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
+            <div v-if="files.length === 0" class="empty-text">暂无文件</div>
+            <div v-for="file in files" :key="file.id" class="file-item">
+                <div class="file-main">
+                    <el-icon class="file-icon"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                    <span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
+                </div>
+                <div class="file-info-right">
+                    <span class="file-size">{{ prettyBytes(file.fileSize) }}</span>
+                    <div class="file-tag">
+                        <el-tag size="small"
+                            :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
+                            {{ classificationLevelMap?.get(file.classifiedLevel) }}
+                        </el-tag>
+                        <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel" content="文件密级已高于当前许可范围，请立即删除">
+                            <el-icon color="#F56C6C" class="warning-icon">
+                                <warning-filled/>
+                            </el-icon>
+                        </el-tooltip>
+                    </div>
+                    <div class="file-actions">
+                        <el-button link type="primary" @click="previewFile(file.token)"
+                            v-if="checkAllowPreview(file)">预览
+                        </el-button>
+                        <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                        </el-button>
+                        <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <pdf-viewer-modal :src="pdfSrc" v-model="pdfViewerVisible"></pdf-viewer-modal>
+</template>
+
+<style lang="scss" scoped>
+.uppy-Dashboard--modal {
+    z-index: 9999 !important;
+}
+
+.uppy-Root {
+    z-index: 9999;
+}
+
+.ja-uploader {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &-tools {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .inline-files {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-left: 8px;
+        
+        .inline-file-item {
+            .inline-file-icon-wrapper {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 4px;
+                border-radius: 4px;
+                color: var(--el-text-color-regular);
+                
+                &:hover {
+                    background-color: var(--el-fill-color-light);
+                    color: var(--el-color-primary);
+                }
+            }
+        }
+    }
+
+    .container {
+        padding: 0 0 0 8px;
+        cursor: pointer;
+    }
+
+    .loader-shimmer {
+        display: inline-block;
+        margin-left: 8px;
+        padding: 0 12px;
+        background-color: #e0f5f0;
+        color: #888;
+        border-radius: 4px;
+        font-size: 0.9em;
+        font-weight: 500;
+        position: relative;
+        overflow: hidden;
+        /* 隐藏闪光效果的溢出 */
+        vertical-align: middle;
+    }
+
+    .loader-shimmer::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        /* 从左侧外部开始 */
+        width: 50%;
+        /* 闪光宽度 */
+        height: 100%;
+
+        /* 闪光效果：透明 -> 亮白色 -> 透明 */
+        background: linear-gradient(90deg,
+                transparent,
+                rgba(255, 255, 255, 0.8),
+                transparent);
+
+        /* 动画: 1.5秒, 缓入缓出, 无限循环 */
+        animation: shimmer 1.5s ease-in-out infinite;
+    }
+
+    @keyframes shimmer {
+        0% {
+            left: -100%;
+        }
+
+        100% {
+            left: 150%;
+            /* 移动到右侧外部 */
+        }
+    }
+}
+
+.file-popover-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 14px;
+    
+    .popover-row {
+        display: flex;
+        align-items: flex-start;
+        
+        .label {
+            color: var(--el-text-color-secondary);
+            width: 60px;
+            flex-shrink: 0;
+        }
+        
+        .value {
+            color: var(--el-text-color-primary);
+            word-break: break-all;
+        }
+    }
+    
+    .popover-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 8px;
+        border-top: 1px solid var(--el-border-color-lighter);
+        padding-top: 8px;
+    }
+}
+
+.file-list {
+    overflow-y: auto;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 4px;
+    
+    .empty-text {
+        text-align: center;
+        padding: 20px;
+        color: var(--el-text-color-secondary);
+        font-size: 14px;
+    }
+
+    .file-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+        font-size: 14px;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            background-color: var(--el-fill-color-light);
+        }
+
+        .file-main {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            overflow: hidden;
+            margin-right: 16px;
+
+            .file-icon {
+                margin-right: 8px;
+                color: var(--el-text-color-secondary);
+                font-size: 16px;
+            }
+
+            .file-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                color: var(--el-text-color-regular);
+            }
+        }
+
+        .file-info-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+
+            .file-size {
+                color: var(--el-text-color-secondary);
+                min-width: 60px;
+                text-align: right;
+            }
+
+            .file-tag {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                
+                .warning-icon {
+                    margin-left: 4px;
+                    cursor: help;
+                }
+            }
+
+            .file-actions {
+                display: flex;
+                gap: 8px;
+                
+                .el-button {
+                    padding: 0;
+                    height: auto;
+                }
+            }
+        }
+    }
+}
+</style>