719 lines
19 KiB
Vue
719 lines
19 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onBeforeUnmount, reactive, ref } from 'vue';
|
||
import { ArrowDown, Delete, Document, Loading, Picture, QuestionFilled, Upload } from '@element-plus/icons-vue';
|
||
import { deleteFile, downloadFile, uploadFile } from '@/service/api/file';
|
||
|
||
defineOptions({ name: 'BusinessAttachmentUploader' });
|
||
|
||
interface Props {
|
||
/** 上传目录，传给后端 directory 字段 */
|
||
directory?: string;
|
||
/** 数量上限，默认 20（与后端 AttachmentValidator 一致） */
|
||
max?: number;
|
||
/** 单文件大小上限 MB（前端兜底；最终由 /system/file/upload 拦截） */
|
||
maxFileSizeMB?: number;
|
||
disabled?: boolean;
|
||
/**
|
||
* 平铺模式：所有附件直接逐项渲染，不再做"首项 + 折叠浮层"。
|
||
* 用于本身已经在 popover / 详情卡片里展示，避免嵌套浮层。
|
||
*/
|
||
flat?: boolean;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
directory: undefined,
|
||
max: 20,
|
||
maxFileSizeMB: 50,
|
||
disabled: false,
|
||
flat: false
|
||
});
|
||
|
||
const model = defineModel<Api.Project.AttachmentItem[]>({ default: () => [] });
|
||
|
||
/** 给用户看的简短分类（hint 行展示） */
|
||
const ALLOWED_EXTENSIONS_HINT = '支持 PDF、Word、Excel、PPT、TXT/MD/CSV、图片、ZIP/RAR/7Z、MP3/MP4';
|
||
|
||
// 与后端 AttachmentValidator 白/黑名单保持一致（5.16）
|
||
const ALLOWED_EXTENSIONS = new Set([
|
||
'pdf',
|
||
'doc',
|
||
'docx',
|
||
'xls',
|
||
'xlsx',
|
||
'ppt',
|
||
'pptx',
|
||
'txt',
|
||
'md',
|
||
'csv',
|
||
'jpg',
|
||
'jpeg',
|
||
'png',
|
||
'gif',
|
||
'webp',
|
||
'bmp',
|
||
'zip',
|
||
'rar',
|
||
'7z',
|
||
'mp4',
|
||
'mp3'
|
||
]);
|
||
|
||
const FORBIDDEN_EXTENSIONS = new Set([
|
||
'exe',
|
||
'bat',
|
||
'cmd',
|
||
'sh',
|
||
'ps1',
|
||
'msi',
|
||
'dll',
|
||
'jar',
|
||
'war',
|
||
'php',
|
||
'jsp',
|
||
'asp',
|
||
'aspx',
|
||
'py',
|
||
'rb',
|
||
'pl',
|
||
'com',
|
||
'scr',
|
||
'vbs',
|
||
'js'
|
||
]);
|
||
|
||
interface PendingItem {
|
||
id: string;
|
||
name: string;
|
||
}
|
||
|
||
const pending = ref<PendingItem[]>([]);
|
||
const inputRef = ref<HTMLInputElement>();
|
||
const isUnmounting = ref(false);
|
||
|
||
/**
|
||
* 会话级清理账本：
|
||
* - originalIds: 弹层打开时已存在的 fileId（编辑模式下来自 rowData.attachments）。
|
||
* 当前未在 commit/rollback 中直接读取（清理逻辑靠 addedIds 自己判定）；
|
||
* 保留是为了让会话模型完整、便于后续扩展（如"撤销删除""仅删原有附件"等差异行为）。
|
||
* - addedIds: 本次会话内上传成功的 fileId
|
||
* - pendingDeleteIds: 用户在 UI 上点过"删除"的 fileId（含 original 和 added 两类）
|
||
* - committed: commit() 调用后置 true，阻止后续 rollback 误删
|
||
*
|
||
* UI 显示 = model（已减去 pendingDelete 项）
|
||
* 真删时机：commit() 删 pendingDelete；rollback() 删 addedIds（除非 committed）
|
||
*/
|
||
interface UploadSession {
|
||
originalIds: Set<string>;
|
||
addedIds: Set<string>;
|
||
pendingDeleteIds: Set<string>;
|
||
committed: boolean;
|
||
}
|
||
|
||
const session = reactive<UploadSession>({
|
||
originalIds: new Set<string>(),
|
||
addedIds: new Set<string>(),
|
||
pendingDeleteIds: new Set<string>(),
|
||
committed: false
|
||
});
|
||
|
||
const totalCount = computed(() => model.value.length + pending.value.length);
|
||
const isFull = computed(() => totalCount.value >= props.max);
|
||
const hasUploading = computed(() => pending.value.length > 0);
|
||
|
||
const acceptExtensionsList = computed(() => Array.from(ALLOWED_EXTENSIONS).join(', '));
|
||
|
||
/**
|
||
* 列表区拆成"直接展示"和"折叠浮层"两组：
|
||
* - flat：全部直接展示（适合本身已在 popover 里）
|
||
* - 默认：首项直接展示，>1 时其余进入悬浮浮层
|
||
*/
|
||
const displayedAttachments = computed(() => (props.flat ? model.value : model.value.slice(0, 1)));
|
||
const popoverAttachments = computed(() => (props.flat || model.value.length <= 1 ? [] : model.value.slice(1)));
|
||
|
||
const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg']);
|
||
|
||
function isImage(item: Api.Project.AttachmentItem) {
|
||
if (item.contentType?.startsWith('image/')) {
|
||
return true;
|
||
}
|
||
return IMAGE_EXTENSIONS.has(getExtension(item.name));
|
||
}
|
||
|
||
interface ImagePreviewState {
|
||
visible: boolean;
|
||
urls: string[];
|
||
}
|
||
|
||
const imagePreview = reactive<ImagePreviewState>({
|
||
visible: false,
|
||
urls: []
|
||
});
|
||
|
||
function getExtension(name: string) {
|
||
const idx = name.lastIndexOf('.');
|
||
return idx > 0 ? name.slice(idx + 1).toLowerCase() : '';
|
||
}
|
||
|
||
function validateFile(file: File): string | null {
|
||
if (!file.name) {
|
||
return '文件名为空';
|
||
}
|
||
if (file.name.length > 255) {
|
||
return '文件名超过 255 字符';
|
||
}
|
||
|
||
const ext = getExtension(file.name);
|
||
if (!ext) {
|
||
return '文件缺少扩展名';
|
||
}
|
||
if (FORBIDDEN_EXTENSIONS.has(ext)) {
|
||
return `不允许上传 .${ext} 文件`;
|
||
}
|
||
if (!ALLOWED_EXTENSIONS.has(ext)) {
|
||
return `暂不支持 .${ext} 文件`;
|
||
}
|
||
|
||
if (file.size > props.maxFileSizeMB * 1024 * 1024) {
|
||
return `单文件不能超过 ${props.maxFileSizeMB}MB`;
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
function triggerSelect() {
|
||
if (props.disabled || isFull.value) {
|
||
return;
|
||
}
|
||
inputRef.value?.click();
|
||
}
|
||
|
||
async function handleFileChange(event: Event) {
|
||
const input = event.target as HTMLInputElement;
|
||
const files = Array.from(input.files || []);
|
||
input.value = '';
|
||
|
||
if (files.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const remaining = props.max - totalCount.value;
|
||
if (files.length > remaining) {
|
||
window.$message?.warning(`最多还能上传 ${remaining} 个附件`);
|
||
return;
|
||
}
|
||
|
||
const validFiles: File[] = [];
|
||
files.forEach(file => {
|
||
const err = validateFile(file);
|
||
if (err) {
|
||
window.$message?.error(`${file.name}：${err}`);
|
||
return;
|
||
}
|
||
validFiles.push(file);
|
||
});
|
||
|
||
if (validFiles.length === 0) {
|
||
return;
|
||
}
|
||
|
||
await Promise.all(validFiles.map(uploadOne));
|
||
}
|
||
|
||
async function uploadOne(file: File) {
|
||
const tempId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||
pending.value = [...pending.value, { id: tempId, name: file.name }];
|
||
|
||
try {
|
||
const result = await uploadFile(file, props.directory);
|
||
if (result.error || !result.data) {
|
||
window.$message?.error(`${file.name}：上传失败`);
|
||
return;
|
||
}
|
||
|
||
const { id, url } = result.data;
|
||
|
||
// 组件已卸载（用户上传过程中关弹层）：onBeforeUnmount 已跑过且看不到这个 id，
|
||
// 这里立刻调删除，避免孤儿文件
|
||
if (isUnmounting.value) {
|
||
deleteFile(id).catch(() => {
|
||
// 已卸载场景下 console.warn 也访问不到 component scope，这里静默吞掉
|
||
});
|
||
return;
|
||
}
|
||
|
||
model.value = [
|
||
...model.value,
|
||
{
|
||
fileId: id,
|
||
url,
|
||
name: file.name,
|
||
size: file.size,
|
||
contentType: file.type || undefined
|
||
}
|
||
];
|
||
session.addedIds.add(id);
|
||
} finally {
|
||
pending.value = pending.value.filter(item => item.id !== tempId);
|
||
}
|
||
}
|
||
|
||
function handleRemove(item: Api.Project.AttachmentItem) {
|
||
removeAttachmentByFileId(item.fileId);
|
||
}
|
||
|
||
async function fetchAsBlobUrl(item: Api.Project.AttachmentItem) {
|
||
const { data, error } = await downloadFile(item.fileId);
|
||
if (error || !data) {
|
||
window.$message?.error(`${item.name}：加载失败`);
|
||
return null;
|
||
}
|
||
return URL.createObjectURL(data);
|
||
}
|
||
|
||
async function handleDownload(item: Api.Project.AttachmentItem) {
|
||
const blobUrl = await fetchAsBlobUrl(item);
|
||
if (!blobUrl) {
|
||
return;
|
||
}
|
||
|
||
const link = document.createElement('a');
|
||
link.href = blobUrl;
|
||
link.download = item.name;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
URL.revokeObjectURL(blobUrl);
|
||
}
|
||
|
||
async function handlePreviewImage(item: Api.Project.AttachmentItem) {
|
||
const blobUrl = await fetchAsBlobUrl(item);
|
||
if (!blobUrl) {
|
||
return;
|
||
}
|
||
imagePreview.urls = [blobUrl];
|
||
imagePreview.visible = true;
|
||
}
|
||
|
||
function handleClosePreview() {
|
||
imagePreview.urls.forEach(url => URL.revokeObjectURL(url));
|
||
imagePreview.urls = [];
|
||
imagePreview.visible = false;
|
||
}
|
||
|
||
/** 文件名点击的统一入口：图片走预览，其余走下载 */
|
||
function handleOpen(item: Api.Project.AttachmentItem) {
|
||
if (isImage(item)) {
|
||
handlePreviewImage(item);
|
||
} else {
|
||
handleDownload(item);
|
||
}
|
||
}
|
||
|
||
/** 把 model 里的某项移除（折叠浮层里也用，不依赖索引） */
|
||
function removeAttachmentByFileId(fileId: string) {
|
||
if (props.disabled) {
|
||
return;
|
||
}
|
||
const idx = model.value.findIndex(item => item.fileId === fileId);
|
||
if (idx === -1) {
|
||
return;
|
||
}
|
||
session.pendingDeleteIds.add(fileId);
|
||
model.value = model.value.filter((_, i) => i !== idx);
|
||
}
|
||
|
||
function formatSize(size?: number) {
|
||
if (!size && size !== 0) {
|
||
return '';
|
||
}
|
||
if (size < 1024) {
|
||
return `${size}B`;
|
||
}
|
||
if (size < 1024 * 1024) {
|
||
return `${(size / 1024).toFixed(1)}KB`;
|
||
}
|
||
if (size < 1024 * 1024 * 1024) {
|
||
return `${(size / 1024 / 1024).toFixed(1)}MB`;
|
||
}
|
||
return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`;
|
||
}
|
||
|
||
/**
|
||
* 删除一批 fileId。fire-and-forget：
|
||
* - 不阻塞 UI；任何失败仅 console.warn
|
||
* - 后端返回 1001003001（文件不存在）视为成功
|
||
*/
|
||
async function deleteMany(ids: string[]) {
|
||
if (ids.length === 0) {
|
||
return;
|
||
}
|
||
await Promise.allSettled(
|
||
ids.map(async id => {
|
||
const { error } = await deleteFile(id);
|
||
if (error) {
|
||
// eslint-disable-next-line no-console
|
||
console.warn('[BusinessAttachmentUploader] 删除失败（已忽略）', id, error);
|
||
}
|
||
})
|
||
);
|
||
}
|
||
|
||
/** 等关闭弹层时先等再清理。设上限 5s，避免极端网络下 commit/rollback 永久挂起。 */
|
||
async function waitForPending(maxWaitMs = 5000) {
|
||
const start = Date.now();
|
||
while (pending.value.length > 0) {
|
||
if (Date.now() - start >= maxWaitMs) {
|
||
// eslint-disable-next-line no-console
|
||
console.warn('[BusinessAttachmentUploader] 等待 pending 上传超时，继续后续清理');
|
||
return;
|
||
}
|
||
// polling: 需要在循环里 await，suppress 即可
|
||
// eslint-disable-next-line no-await-in-loop
|
||
await new Promise<void>(resolve => {
|
||
setTimeout(resolve, 50);
|
||
});
|
||
}
|
||
}
|
||
|
||
defineExpose({
|
||
/**
|
||
* 父组件在【打开弹层并填充 model 之后】调用。
|
||
* 把当前 model 视为 original，清空 added / pendingDelete，重置 committed。
|
||
*/
|
||
initSession() {
|
||
session.originalIds = new Set(model.value.map(item => item.fileId));
|
||
session.addedIds.clear();
|
||
session.pendingDeleteIds.clear();
|
||
session.committed = false;
|
||
},
|
||
|
||
/**
|
||
* 父组件在【业务保存成功后】调用。
|
||
* 真删 pendingDelete（含 original 和 added 两类）；置 committed 阻止后续 rollback。
|
||
*/
|
||
async commit() {
|
||
await waitForPending();
|
||
const ids = Array.from(session.pendingDeleteIds);
|
||
session.pendingDeleteIds.clear();
|
||
session.addedIds.clear();
|
||
session.committed = true;
|
||
await deleteMany(ids);
|
||
},
|
||
|
||
/**
|
||
* 父组件取消/关闭时调用；onBeforeUnmount 也会兜底调一次。
|
||
* 真删 addedIds（保留 original）；committed=true 时跳过。
|
||
*/
|
||
async rollback() {
|
||
if (session.committed) {
|
||
return;
|
||
}
|
||
await waitForPending();
|
||
const ids = Array.from(session.addedIds);
|
||
session.addedIds.clear();
|
||
session.pendingDeleteIds.clear();
|
||
session.committed = true;
|
||
await deleteMany(ids);
|
||
},
|
||
|
||
/** 父组件在提交前可读此值判断是否还有 pending 上传 */
|
||
get hasUploading() {
|
||
return hasUploading.value;
|
||
}
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
// 标记卸载中：让正在 flight 的 uploadOne 完成时知道要立刻删除自己
|
||
isUnmounting.value = true;
|
||
// 兜底：用户没显式 rollback 就直接关弹层 / 切路由 / unmount
|
||
// deleteMany 内部已 swallow 单项失败，这里不再 await，fire-and-forget
|
||
if (!session.committed) {
|
||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||
deleteMany(Array.from(session.addedIds));
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="business-attachment-uploader">
|
||
<div v-if="!disabled" class="business-attachment-uploader__trigger">
|
||
<ElButton :icon="Upload" :disabled="isFull" :loading="hasUploading" @click="triggerSelect">点击上传</ElButton>
|
||
<span class="business-attachment-uploader__hint">
|
||
最多 {{ max }} 个，已选 {{ totalCount }} 个；单文件 ≤ {{ maxFileSizeMB }}MB
|
||
<ElTooltip placement="top">
|
||
<template #content>
|
||
<div class="business-attachment-uploader__hint-tooltip">
|
||
<div>{{ ALLOWED_EXTENSIONS_HINT }}</div>
|
||
<div class="business-attachment-uploader__hint-tooltip-ext">允许扩展名：{{ acceptExtensionsList }}</div>
|
||
</div>
|
||
</template>
|
||
<ElIcon class="business-attachment-uploader__hint-icon"><QuestionFilled /></ElIcon>
|
||
</ElTooltip>
|
||
</span>
|
||
<input
|
||
ref="inputRef"
|
||
type="file"
|
||
multiple
|
||
class="business-attachment-uploader__input"
|
||
@change="handleFileChange"
|
||
/>
|
||
</div>
|
||
|
||
<div v-else-if="totalCount === 0" class="business-attachment-uploader__empty">暂无附件</div>
|
||
|
||
<ul v-if="totalCount > 0" class="business-attachment-uploader__list">
|
||
<!-- 直接展示：默认仅首项；flat 模式全部 -->
|
||
<li v-for="item in displayedAttachments" :key="`done-${item.fileId}`" class="business-attachment-uploader__item">
|
||
<ElIcon class="business-attachment-uploader__icon">
|
||
<Picture v-if="isImage(item)" />
|
||
<Document v-else />
|
||
</ElIcon>
|
||
<ElLink
|
||
type="primary"
|
||
:underline="false"
|
||
class="business-attachment-uploader__name"
|
||
:title="item.name"
|
||
@click="handleOpen(item)"
|
||
>
|
||
{{ item.name }}
|
||
</ElLink>
|
||
<span v-if="item.size" class="business-attachment-uploader__size">{{ formatSize(item.size) }}</span>
|
||
<ElLink type="primary" :underline="false" @click="handleDownload(item)">下载</ElLink>
|
||
<ElButton v-if="!disabled" link type="danger" :icon="Delete" @click="handleRemove(item)" />
|
||
</li>
|
||
|
||
<!-- 折叠提示：>1 个时显示，hover 弹完整列表（flat 模式下永不出现） -->
|
||
<li v-if="popoverAttachments.length > 0" class="business-attachment-uploader__more-row">
|
||
<ElPopover
|
||
trigger="hover"
|
||
placement="bottom-start"
|
||
:width="380"
|
||
:show-after="200"
|
||
popper-class="business-attachment-uploader__popover"
|
||
>
|
||
<template #reference>
|
||
<span class="business-attachment-uploader__more">
|
||
还有 {{ popoverAttachments.length }} 个附件
|
||
<ElIcon><ArrowDown /></ElIcon>
|
||
</span>
|
||
</template>
|
||
<ul class="business-attachment-uploader__popover-list">
|
||
<li
|
||
v-for="item in popoverAttachments"
|
||
:key="`popover-${item.fileId}`"
|
||
class="business-attachment-uploader__item"
|
||
>
|
||
<ElIcon class="business-attachment-uploader__icon">
|
||
<Picture v-if="isImage(item)" />
|
||
<Document v-else />
|
||
</ElIcon>
|
||
<ElLink
|
||
type="primary"
|
||
:underline="false"
|
||
class="business-attachment-uploader__name"
|
||
:title="item.name"
|
||
@click="handleOpen(item)"
|
||
>
|
||
{{ item.name }}
|
||
</ElLink>
|
||
<span v-if="item.size" class="business-attachment-uploader__size">{{ formatSize(item.size) }}</span>
|
||
<ElLink type="primary" :underline="false" @click="handleDownload(item)">下载</ElLink>
|
||
<ElButton v-if="!disabled" link type="danger" :icon="Delete" @click="handleRemove(item)" />
|
||
</li>
|
||
</ul>
|
||
</ElPopover>
|
||
</li>
|
||
|
||
<!-- pending 项不折叠：让用户能持续看到上传进度 -->
|
||
<li
|
||
v-for="item in pending"
|
||
:key="`pending-${item.id}`"
|
||
class="business-attachment-uploader__item business-attachment-uploader__item--pending"
|
||
>
|
||
<ElIcon class="business-attachment-uploader__icon is-loading"><Loading /></ElIcon>
|
||
<span class="business-attachment-uploader__name" :title="item.name">{{ item.name }}</span>
|
||
<span class="business-attachment-uploader__status">上传中…</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<ElImageViewer
|
||
v-if="imagePreview.visible"
|
||
:url-list="imagePreview.urls"
|
||
hide-on-click-modal
|
||
@close="handleClosePreview"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.business-attachment-uploader {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.business-attachment-uploader__trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.business-attachment-uploader__hint {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: rgb(100 116 139 / 88%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.business-attachment-uploader__hint-icon {
|
||
color: rgb(100 116 139 / 88%);
|
||
cursor: help;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.business-attachment-uploader__hint-tooltip {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
max-width: 320px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.business-attachment-uploader__hint-tooltip-ext {
|
||
word-break: break-all;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.business-attachment-uploader__empty {
|
||
color: rgb(100 116 139 / 88%);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.business-attachment-uploader__input {
|
||
display: none;
|
||
}
|
||
|
||
.business-attachment-uploader__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.business-attachment-uploader__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
border-radius: 4px;
|
||
background: var(--el-fill-color-blank);
|
||
font-size: 13px;
|
||
|
||
&--pending {
|
||
background: var(--el-fill-color-light);
|
||
color: rgb(100 116 139 / 88%);
|
||
}
|
||
}
|
||
|
||
.business-attachment-uploader__icon {
|
||
flex: 0 0 auto;
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.business-attachment-uploader__name {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
justify-content: flex-start;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.business-attachment-uploader__size {
|
||
flex: 0 0 auto;
|
||
color: rgb(100 116 139 / 88%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.business-attachment-uploader__status {
|
||
flex: 0 0 auto;
|
||
color: rgb(100 116 139 / 88%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.business-attachment-uploader__more-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.business-attachment-uploader__more {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
color: var(--el-color-primary);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
// 浮层非 scoped：popper 渲染到 body
|
||
.business-attachment-uploader__popover {
|
||
padding: 8px 4px !important;
|
||
|
||
.business-attachment-uploader__popover-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
max-height: 280px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.business-attachment-uploader__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 8px;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
background: var(--el-fill-color-light);
|
||
}
|
||
}
|
||
|
||
.business-attachment-uploader__icon {
|
||
flex: 0 0 auto;
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.business-attachment-uploader__name {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.business-attachment-uploader__size {
|
||
flex: 0 0 auto;
|
||
color: rgb(100 116 139 / 88%);
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|