1549 lines
40 KiB
Vue
1549 lines
40 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, reactive, ref, watch } from 'vue';
|
||
|
||
import {
|
||
Button,
|
||
Drawer,
|
||
Empty,
|
||
Image,
|
||
Input,
|
||
InputNumber,
|
||
message,
|
||
Progress,
|
||
Select,
|
||
Space,
|
||
Switch,
|
||
Table,
|
||
Tag,
|
||
} from 'antdv-next';
|
||
|
||
import {
|
||
getAccessImgUrl,
|
||
OSS_FILE_BUCKETS,
|
||
simpleUploadFile,
|
||
} from '#/api/legacy/oss';
|
||
import { addPropsSource } from '#/api/legacy/props';
|
||
import { normalizeResourceCode } from '#/views/_shared/resource-code';
|
||
|
||
import {
|
||
BADGE_DISPLAY_TYPE_OPTIONS,
|
||
getPropsTypeName,
|
||
PROPS_RESOURCE_CONFIG_TYPES,
|
||
} from '../shared';
|
||
|
||
type AssetKind = 'cover' | 'expand' | 'source';
|
||
type RowStatus = 'error' | 'ready' | 'saved' | 'saving' | 'uploading';
|
||
type StructuredAssetKind = 'cover' | 'source';
|
||
|
||
interface BatchRow {
|
||
adminFree: boolean;
|
||
amount: number;
|
||
amountTouched: boolean;
|
||
code: string;
|
||
cover: string;
|
||
coverError: string;
|
||
coverFileName: string;
|
||
coverUploading: boolean;
|
||
errors: string[];
|
||
expand: string;
|
||
expandError: string;
|
||
expandFileName: string;
|
||
expandUploading: boolean;
|
||
key: string;
|
||
name: string;
|
||
saved: boolean;
|
||
saving: boolean;
|
||
sourceError: string;
|
||
sourceFileName: string;
|
||
sourceUploading: boolean;
|
||
sourceUrl: string;
|
||
status: RowStatus;
|
||
type: string;
|
||
typeTouched: boolean;
|
||
}
|
||
|
||
interface FindRowOptions {
|
||
adminFree?: boolean;
|
||
amount?: number | string;
|
||
amountTouched?: boolean;
|
||
code?: string;
|
||
type?: string;
|
||
typeTouched?: boolean;
|
||
}
|
||
|
||
interface StructuredResourceFile {
|
||
amount: number;
|
||
assetKind: StructuredAssetKind;
|
||
code: string;
|
||
name: string;
|
||
type: string;
|
||
}
|
||
|
||
interface UploadTask {
|
||
file: File;
|
||
fileName: string;
|
||
kind: AssetKind;
|
||
row: BatchRow;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
initialSysOrigin?: number | string;
|
||
initialType?: number | string;
|
||
open: boolean;
|
||
sysOriginOptions: Array<{ label: string; value: string }>;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
close: [];
|
||
success: [];
|
||
}>();
|
||
|
||
const batchForm = reactive({
|
||
adminFree: false,
|
||
amount: 0,
|
||
badgeDisplayType: 'SHORT',
|
||
sysOrigin: '',
|
||
type: '',
|
||
});
|
||
|
||
const rows = ref<BatchRow[]>([]);
|
||
const activeRowKey = ref('');
|
||
const dragging = ref(false);
|
||
const folderInputRef = ref<HTMLInputElement>();
|
||
const fileInputRef = ref<HTMLInputElement>();
|
||
const selectedRowKeys = ref<string[]>([]);
|
||
const sequence = ref(0);
|
||
const showOnlyErrors = ref(false);
|
||
const submitting = ref(false);
|
||
const droppedFilePathMap = new WeakMap<File, string>();
|
||
const uploadQueue: UploadTask[] = [];
|
||
const MAX_UPLOAD_CONCURRENCY = 2;
|
||
let activeUploadCount = 0;
|
||
|
||
const propsTypeOptions = PROPS_RESOURCE_CONFIG_TYPES.map((item) => ({
|
||
label: item.name,
|
||
value: item.value as any,
|
||
}));
|
||
const badgeDisplayTypeOptions = BADGE_DISPLAY_TYPE_OPTIONS.map((item) => ({
|
||
label: item.name,
|
||
value: item.value as any,
|
||
}));
|
||
|
||
const STRUCTURED_RESOURCE_TYPE_MAP: Record<string, string> = {
|
||
勋章: 'BADGE',
|
||
坐骑: 'RIDE',
|
||
头像框: 'AVATAR_FRAME',
|
||
};
|
||
const STRUCTURED_ASSET_KIND_MAP: Record<string, StructuredAssetKind> = {
|
||
animation: 'source',
|
||
cover: 'cover',
|
||
};
|
||
|
||
function isAmountRequiredByType(type: string) {
|
||
return !['CUSTOMIZE', 'FRAGMENTS'].includes(type);
|
||
}
|
||
|
||
function isSourceRequiredByType(type: string) {
|
||
return !['BADGE', 'CUSTOMIZE', 'FRAGMENTS'].includes(type);
|
||
}
|
||
|
||
function showExpandUploadByType(type: string) {
|
||
return type === 'CHAT_BUBBLE';
|
||
}
|
||
|
||
const isAmountRequired = computed(() => isAmountRequiredByType(batchForm.type));
|
||
const showExpandUpload = computed(() => showExpandUploadByType(batchForm.type));
|
||
const hasExpandColumn = computed(
|
||
() =>
|
||
showExpandUpload.value
|
||
|| rows.value.some((row) => showExpandUploadByType(getRowType(row))),
|
||
);
|
||
|
||
const columns = computed(() => {
|
||
const baseColumns = [
|
||
{ dataIndex: 'cover', key: 'cover', title: '封面', width: 116 },
|
||
{ dataIndex: 'sourceUrl', key: 'sourceUrl', title: '资源', width: 180 },
|
||
];
|
||
if (hasExpandColumn.value) {
|
||
baseColumns.push({
|
||
dataIndex: 'expand',
|
||
key: 'expand',
|
||
title: 'Android资源',
|
||
width: 180,
|
||
});
|
||
}
|
||
return [
|
||
...baseColumns,
|
||
{ dataIndex: 'type', key: 'type', title: '类型', width: 132 },
|
||
{ dataIndex: 'name', key: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'code', key: 'code', title: '编码', width: 180 },
|
||
{ dataIndex: 'amount', key: 'amount', title: '底价', width: 116 },
|
||
{ dataIndex: 'adminFree', key: 'adminFree', title: 'Admin Free', width: 116 },
|
||
{ dataIndex: 'status', key: 'status', title: '状态', width: 120 },
|
||
{ dataIndex: 'actions', key: 'actions', title: '操作', width: 92 },
|
||
];
|
||
});
|
||
|
||
const visibleRows = computed(() =>
|
||
showOnlyErrors.value
|
||
? rows.value.filter((row) => row.errors.length > 0)
|
||
: rows.value,
|
||
);
|
||
|
||
const activeRow = computed(() => {
|
||
if (activeRowKey.value) {
|
||
const matched = rows.value.find((row) => row.key === activeRowKey.value);
|
||
if (matched) {
|
||
return matched;
|
||
}
|
||
}
|
||
return rows.value[0] || null;
|
||
});
|
||
|
||
const uploadAssetTotal = computed(() => {
|
||
return rows.value.reduce((total, row) => {
|
||
return total
|
||
+ (row.coverFileName ? 1 : 0)
|
||
+ (row.sourceFileName ? 1 : 0)
|
||
+ (row.expandFileName ? 1 : 0);
|
||
}, 0);
|
||
});
|
||
|
||
const uploadAssetFinished = computed(() => {
|
||
return rows.value.reduce((total, row) => {
|
||
return total
|
||
+ (row.coverFileName && !row.coverUploading ? 1 : 0)
|
||
+ (row.sourceFileName && !row.sourceUploading ? 1 : 0)
|
||
+ (row.expandFileName && !row.expandUploading ? 1 : 0);
|
||
}, 0);
|
||
});
|
||
|
||
const uploadPercent = computed(() => {
|
||
if (uploadAssetTotal.value === 0) {
|
||
return 0;
|
||
}
|
||
return Math.round((uploadAssetFinished.value / uploadAssetTotal.value) * 100);
|
||
});
|
||
|
||
const errorCount = computed(() =>
|
||
rows.value.filter((row) => row.errors.length > 0).length,
|
||
);
|
||
const readyRows = computed(() =>
|
||
rows.value.filter((row) => isRowSubmittable(row)),
|
||
);
|
||
const submitTargetCount = computed(() => readyRows.value.length);
|
||
|
||
const rowSelection = computed(() => ({
|
||
selectedRowKeys: selectedRowKeys.value,
|
||
onChange: (keys: Array<number | string>) => {
|
||
selectedRowKeys.value = keys.map(String);
|
||
},
|
||
}));
|
||
|
||
function resetBatch() {
|
||
batchForm.sysOrigin =
|
||
String(props.initialSysOrigin || props.sysOriginOptions[0]?.value || 'LIKEI');
|
||
batchForm.type =
|
||
String(props.initialType || PROPS_RESOURCE_CONFIG_TYPES[0]?.value || 'AVATAR_FRAME');
|
||
batchForm.amount = 0;
|
||
batchForm.adminFree = false;
|
||
batchForm.badgeDisplayType = 'SHORT';
|
||
rows.value = [];
|
||
selectedRowKeys.value = [];
|
||
activeRowKey.value = '';
|
||
showOnlyErrors.value = false;
|
||
sequence.value = 0;
|
||
uploadQueue.length = 0;
|
||
}
|
||
|
||
watch(
|
||
() => props.open,
|
||
(open) => {
|
||
if (open) {
|
||
resetBatch();
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
watch(
|
||
() => batchForm.amount,
|
||
() => {
|
||
rows.value.forEach((row) => {
|
||
if (!row.amountTouched) {
|
||
row.amount = normalizeAmount(batchForm.amount);
|
||
}
|
||
});
|
||
refreshAllRows();
|
||
},
|
||
);
|
||
|
||
watch(
|
||
() => [batchForm.type, batchForm.sysOrigin, batchForm.badgeDisplayType],
|
||
() => {
|
||
rows.value.forEach((row) => {
|
||
if (!row.typeTouched) {
|
||
row.type = batchForm.type;
|
||
}
|
||
});
|
||
refreshAllRows();
|
||
},
|
||
);
|
||
|
||
function normalizeAmount(value: unknown) {
|
||
const amount = Number(value ?? 0);
|
||
return Number.isFinite(amount) && amount >= 0 ? amount : 0;
|
||
}
|
||
|
||
function normalizeCode(value: string) {
|
||
return normalizeResourceCode(value);
|
||
}
|
||
|
||
function getPathFileName(path: string) {
|
||
const segments = path.split('/');
|
||
return segments[segments.length - 1] || path;
|
||
}
|
||
|
||
function getFilePath(file: File) {
|
||
return (
|
||
droppedFilePathMap.get(file)
|
||
|| (file as any).webkitRelativePath
|
||
|| file.name
|
||
);
|
||
}
|
||
|
||
function isImageFile(file: File) {
|
||
return (
|
||
file.type.startsWith('image/')
|
||
|| /\.(apng|avif|gif|jpe?g|png|svg|webp)$/i.test(file.name)
|
||
);
|
||
}
|
||
|
||
function isResourceFile(file: File) {
|
||
return /\.(mp4|pag|svga|zip)$/i.test(file.name);
|
||
}
|
||
|
||
function parseStructuredResourceFile(file: File): null | StructuredResourceFile {
|
||
if (!isImageFile(file) && !isResourceFile(file)) {
|
||
return null;
|
||
}
|
||
const fileName = getPathFileName(getFilePath(file));
|
||
const baseName = fileName.replace(/\.[^.]+$/, '').trim();
|
||
const parts = baseName
|
||
.split('_')
|
||
.map((part) => part.trim())
|
||
.filter(Boolean);
|
||
const type = STRUCTURED_RESOURCE_TYPE_MAP[parts[0] || ''];
|
||
const assetKind =
|
||
STRUCTURED_ASSET_KIND_MAP[String(parts[parts.length - 1] || '').toLowerCase()];
|
||
if (!type || !assetKind) {
|
||
return null;
|
||
}
|
||
if (assetKind === 'cover' && !isImageFile(file)) {
|
||
return null;
|
||
}
|
||
if (type === 'BADGE') {
|
||
const name = parts.slice(1, -1).join('_').trim();
|
||
if (!name) {
|
||
return null;
|
||
}
|
||
return {
|
||
amount: 0,
|
||
assetKind,
|
||
code: normalizeCode(name),
|
||
name,
|
||
type,
|
||
};
|
||
}
|
||
if (parts.length < 5) {
|
||
return null;
|
||
}
|
||
const amount = Number(parts[parts.length - 3]);
|
||
const duration = String(parts[parts.length - 2] || '');
|
||
const name = parts.slice(1, -3).join('_').trim();
|
||
if (!name || !/^\d+天$/.test(duration) || !Number.isFinite(amount) || amount < 0) {
|
||
return null;
|
||
}
|
||
return {
|
||
amount: normalizeAmount(amount),
|
||
assetKind,
|
||
code: normalizeCode(name),
|
||
name,
|
||
type,
|
||
};
|
||
}
|
||
|
||
function getRowType(row: BatchRow) {
|
||
return String(row.type || batchForm.type || '');
|
||
}
|
||
|
||
function findOrCreateRow(baseName: string, options: FindRowOptions = {}) {
|
||
const name = baseName.trim() || 'resource';
|
||
const type = String(options.type || batchForm.type || '');
|
||
const code = options.code || normalizeCode(name);
|
||
const matched = rows.value.find(
|
||
(row) =>
|
||
getRowType(row) === type
|
||
&& (String(row.code || '') === code || String(row.name || '') === name),
|
||
);
|
||
if (matched) {
|
||
if (options.adminFree !== undefined) {
|
||
matched.adminFree = options.adminFree;
|
||
}
|
||
if (options.amount !== undefined) {
|
||
matched.amount = normalizeAmount(options.amount);
|
||
matched.amountTouched = options.amountTouched ?? true;
|
||
}
|
||
if (options.code) {
|
||
matched.code = options.code;
|
||
}
|
||
if (options.type) {
|
||
matched.type = options.type;
|
||
matched.typeTouched = options.typeTouched ?? true;
|
||
}
|
||
matched.saved = false;
|
||
return matched;
|
||
}
|
||
const row: BatchRow = {
|
||
adminFree: options.adminFree ?? batchForm.adminFree,
|
||
amount:
|
||
options.amount === undefined
|
||
? normalizeAmount(batchForm.amount)
|
||
: normalizeAmount(options.amount),
|
||
amountTouched: options.amountTouched ?? false,
|
||
code,
|
||
cover: '',
|
||
coverError: '',
|
||
coverFileName: '',
|
||
coverUploading: false,
|
||
errors: [],
|
||
expand: '',
|
||
expandError: '',
|
||
expandFileName: '',
|
||
expandUploading: false,
|
||
key: `batch-${Date.now()}-${sequence.value++}`,
|
||
name,
|
||
saved: false,
|
||
saving: false,
|
||
sourceError: '',
|
||
sourceFileName: '',
|
||
sourceUploading: false,
|
||
sourceUrl: '',
|
||
status: 'error',
|
||
type,
|
||
typeTouched: options.typeTouched ?? false,
|
||
};
|
||
rows.value.push(row);
|
||
if (!activeRowKey.value) {
|
||
activeRowKey.value = row.key;
|
||
}
|
||
return row;
|
||
}
|
||
|
||
function getUploadBucket(kind: AssetKind, file: File) {
|
||
if (kind === 'cover' || kind === 'expand' || isImageFile(file)) {
|
||
return OSS_FILE_BUCKETS.svgaCover;
|
||
}
|
||
return OSS_FILE_BUCKETS.svgasource;
|
||
}
|
||
|
||
function setRowAsset(row: BatchRow, kind: AssetKind, file: File) {
|
||
const fileName = getPathFileName(getFilePath(file));
|
||
if (kind === 'cover') {
|
||
row.cover = '';
|
||
row.coverError = '';
|
||
row.coverFileName = fileName;
|
||
row.coverUploading = true;
|
||
} else if (kind === 'source') {
|
||
row.sourceUrl = '';
|
||
row.sourceError = '';
|
||
row.sourceFileName = fileName;
|
||
row.sourceUploading = true;
|
||
} else {
|
||
row.expand = '';
|
||
row.expandError = '';
|
||
row.expandFileName = fileName;
|
||
row.expandUploading = true;
|
||
}
|
||
row.saved = false;
|
||
refreshAllRows();
|
||
enqueueUpload({ file, fileName, kind, row });
|
||
}
|
||
|
||
function enqueueUpload(task: UploadTask) {
|
||
uploadQueue.push(task);
|
||
runUploadQueue();
|
||
}
|
||
|
||
function runUploadQueue() {
|
||
while (activeUploadCount < MAX_UPLOAD_CONCURRENCY && uploadQueue.length > 0) {
|
||
const task = uploadQueue.shift();
|
||
if (!task) {
|
||
return;
|
||
}
|
||
activeUploadCount += 1;
|
||
void uploadAsset(task.row, task.kind, task.file, task.fileName).finally(() => {
|
||
activeUploadCount -= 1;
|
||
runUploadQueue();
|
||
});
|
||
}
|
||
}
|
||
|
||
async function uploadAsset(
|
||
row: BatchRow,
|
||
kind: AssetKind,
|
||
file: File,
|
||
fileName: string,
|
||
) {
|
||
try {
|
||
const result = await simpleUploadFile(file, getUploadBucket(kind, file));
|
||
const url = getAccessImgUrl(result.name);
|
||
if (kind === 'cover' && row.coverFileName === fileName) {
|
||
row.cover = url;
|
||
} else if (kind === 'source' && row.sourceFileName === fileName) {
|
||
row.sourceUrl = url;
|
||
} else if (kind === 'expand' && row.expandFileName === fileName) {
|
||
row.expand = url;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
if (kind === 'cover' && row.coverFileName === fileName) {
|
||
row.coverError = '封面上传失败';
|
||
} else if (kind === 'source' && row.sourceFileName === fileName) {
|
||
row.sourceError = '资源上传失败';
|
||
} else if (kind === 'expand' && row.expandFileName === fileName) {
|
||
row.expandError = 'Android资源上传失败';
|
||
}
|
||
} finally {
|
||
if (kind === 'cover' && row.coverFileName === fileName) {
|
||
row.coverUploading = false;
|
||
} else if (kind === 'source' && row.sourceFileName === fileName) {
|
||
row.sourceUploading = false;
|
||
} else if (kind === 'expand' && row.expandFileName === fileName) {
|
||
row.expandUploading = false;
|
||
}
|
||
refreshAllRows();
|
||
}
|
||
}
|
||
|
||
function processFiles(files: File[]) {
|
||
let accepted = 0;
|
||
let ignored = 0;
|
||
files.forEach((file) => {
|
||
const structuredFile = parseStructuredResourceFile(file);
|
||
if (!structuredFile) {
|
||
ignored += 1;
|
||
return;
|
||
}
|
||
const row = findOrCreateRow(structuredFile.name, {
|
||
adminFree: false,
|
||
amount: structuredFile.amount,
|
||
amountTouched: true,
|
||
code: structuredFile.code,
|
||
type: structuredFile.type,
|
||
typeTouched: true,
|
||
});
|
||
setRowAsset(row, structuredFile.assetKind, file);
|
||
accepted += 1;
|
||
});
|
||
if (accepted === 0 && files.length > 0) {
|
||
message.warning('未识别到符合命名规则的资源文件');
|
||
return;
|
||
}
|
||
if (accepted > 0) {
|
||
message.success(
|
||
ignored > 0
|
||
? `已导入 ${accepted} 个文件，忽略 ${ignored} 个非规则文件`
|
||
: `已导入 ${accepted} 个文件`,
|
||
);
|
||
}
|
||
}
|
||
|
||
function handleFileInput(event: Event) {
|
||
const target = event.target as HTMLInputElement;
|
||
const files = target.files ? [...target.files] : [];
|
||
processFiles(files);
|
||
target.value = '';
|
||
}
|
||
|
||
async function handleDrop(event: DragEvent) {
|
||
dragging.value = false;
|
||
const files = await collectDroppedFiles(event.dataTransfer);
|
||
processFiles(files);
|
||
}
|
||
|
||
async function collectDroppedFiles(dataTransfer?: DataTransfer | null) {
|
||
if (!dataTransfer) {
|
||
return [];
|
||
}
|
||
const items = [...(dataTransfer.items || [])];
|
||
const entries = items
|
||
.map((item) => (item as any).webkitGetAsEntry?.())
|
||
.filter(Boolean);
|
||
if (entries.length === 0) {
|
||
return [...(dataTransfer.files || [])];
|
||
}
|
||
const files: File[] = [];
|
||
await Promise.all(entries.map((entry) => readEntry(entry, files)));
|
||
return files;
|
||
}
|
||
|
||
async function readEntry(entry: any, result: File[], parentPath = ''): Promise<void> {
|
||
const currentPath = `${parentPath}${entry.name}`;
|
||
if (entry.isFile) {
|
||
await new Promise<void>((resolve) => {
|
||
entry.file((file: File) => {
|
||
droppedFilePathMap.set(file, currentPath);
|
||
result.push(file);
|
||
resolve();
|
||
}, resolve);
|
||
});
|
||
return;
|
||
}
|
||
if (!entry.isDirectory) {
|
||
return;
|
||
}
|
||
const reader = entry.createReader();
|
||
while (true) {
|
||
const entries = await new Promise<any[]>((resolve, reject) => {
|
||
reader.readEntries(resolve, reject);
|
||
});
|
||
if (entries.length === 0) {
|
||
break;
|
||
}
|
||
await Promise.all(
|
||
entries.map((child) => readEntry(child, result, `${currentPath}/`)),
|
||
);
|
||
}
|
||
}
|
||
|
||
function getDuplicateMap(field: 'code' | 'name') {
|
||
const map = new Map<string, number>();
|
||
rows.value.forEach((row) => {
|
||
const value = String(row[field] || '').trim();
|
||
if (!value) {
|
||
return;
|
||
}
|
||
map.set(value, (map.get(value) || 0) + 1);
|
||
});
|
||
return map;
|
||
}
|
||
|
||
function getRowErrors(
|
||
row: BatchRow,
|
||
duplicateCodes = getDuplicateMap('code'),
|
||
duplicateNames = getDuplicateMap('name'),
|
||
) {
|
||
const errors: string[] = [];
|
||
if (!batchForm.sysOrigin) {
|
||
errors.push('请选择系统');
|
||
}
|
||
const rowType = getRowType(row);
|
||
if (!rowType) {
|
||
errors.push('请选择类型');
|
||
}
|
||
if (!String(row.name || '').trim()) {
|
||
errors.push('缺少名称');
|
||
}
|
||
if (!String(row.code || '').trim()) {
|
||
errors.push('缺少编码');
|
||
}
|
||
if (String(row.code || '').trim() && (duplicateCodes.get(String(row.code).trim()) || 0) > 1) {
|
||
errors.push('本批次编码重复');
|
||
}
|
||
if (String(row.name || '').trim() && (duplicateNames.get(String(row.name).trim()) || 0) > 1) {
|
||
errors.push('本批次名称重复');
|
||
}
|
||
if (row.coverError) {
|
||
errors.push(row.coverError);
|
||
}
|
||
if (row.sourceError) {
|
||
errors.push(row.sourceError);
|
||
}
|
||
if (row.expandError) {
|
||
errors.push(row.expandError);
|
||
}
|
||
if (!row.cover && !row.coverUploading) {
|
||
errors.push('缺少封面');
|
||
}
|
||
if (isSourceRequiredByType(rowType) && !row.sourceUrl && !row.sourceUploading) {
|
||
errors.push('缺少资源');
|
||
}
|
||
if (showExpandUploadByType(rowType) && !row.expand && !row.expandUploading) {
|
||
errors.push('缺少 Android 资源');
|
||
}
|
||
if (
|
||
isAmountRequiredByType(rowType)
|
||
&& (!Number.isFinite(Number(row.amount)) || Number(row.amount) < 0)
|
||
) {
|
||
errors.push('底价不正确');
|
||
}
|
||
return errors;
|
||
}
|
||
|
||
function refreshRow(
|
||
row: BatchRow,
|
||
duplicateCodes = getDuplicateMap('code'),
|
||
duplicateNames = getDuplicateMap('name'),
|
||
) {
|
||
row.errors = getRowErrors(row, duplicateCodes, duplicateNames);
|
||
if (row.saving) {
|
||
row.status = 'saving';
|
||
} else if (row.coverUploading || row.sourceUploading || row.expandUploading) {
|
||
row.status = 'uploading';
|
||
} else if (row.saved) {
|
||
row.status = 'saved';
|
||
} else if (row.errors.length > 0) {
|
||
row.status = 'error';
|
||
} else {
|
||
row.status = 'ready';
|
||
}
|
||
}
|
||
|
||
function refreshAllRows() {
|
||
const duplicateCodes = getDuplicateMap('code');
|
||
const duplicateNames = getDuplicateMap('name');
|
||
rows.value.forEach((row) => refreshRow(row, duplicateCodes, duplicateNames));
|
||
}
|
||
|
||
function isRowSubmittable(row: BatchRow) {
|
||
refreshRow(row);
|
||
return row.status === 'ready' && !row.saved;
|
||
}
|
||
|
||
function markAmountTouched(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
row.amountTouched = true;
|
||
row.saved = false;
|
||
refreshAllRows();
|
||
}
|
||
|
||
function markTypeTouched(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
row.typeTouched = true;
|
||
row.saved = false;
|
||
refreshAllRows();
|
||
}
|
||
|
||
function markRowEdited(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
row.saved = false;
|
||
refreshAllRows();
|
||
}
|
||
|
||
function getTargetRows() {
|
||
if (selectedRowKeys.value.length > 0) {
|
||
const selected = new Set(selectedRowKeys.value);
|
||
return rows.value.filter((row) => selected.has(row.key));
|
||
}
|
||
return visibleRows.value;
|
||
}
|
||
|
||
function applyDefaultAmount() {
|
||
const targetRows = getTargetRows();
|
||
targetRows.forEach((row) => {
|
||
row.amount = normalizeAmount(batchForm.amount);
|
||
row.amountTouched = true;
|
||
row.saved = false;
|
||
});
|
||
refreshAllRows();
|
||
}
|
||
|
||
function applyDefaultAdminFree() {
|
||
const targetRows = getTargetRows();
|
||
targetRows.forEach((row) => {
|
||
row.adminFree = batchForm.adminFree;
|
||
row.saved = false;
|
||
});
|
||
refreshAllRows();
|
||
}
|
||
|
||
function deleteRow(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
rows.value = rows.value.filter((item) => item.key !== row.key);
|
||
selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== row.key);
|
||
if (activeRowKey.value === row.key) {
|
||
activeRowKey.value = rows.value[0]?.key || '';
|
||
}
|
||
refreshAllRows();
|
||
}
|
||
|
||
function deleteSelectedRows() {
|
||
if (selectedRowKeys.value.length === 0) {
|
||
message.warning('请先选择资源');
|
||
return;
|
||
}
|
||
const selected = new Set(selectedRowKeys.value);
|
||
rows.value = rows.value.filter((row) => !selected.has(row.key));
|
||
selectedRowKeys.value = [];
|
||
if (!rows.value.some((row) => row.key === activeRowKey.value)) {
|
||
activeRowKey.value = rows.value[0]?.key || '';
|
||
}
|
||
refreshAllRows();
|
||
}
|
||
|
||
function clearRows() {
|
||
rows.value = [];
|
||
selectedRowKeys.value = [];
|
||
activeRowKey.value = '';
|
||
}
|
||
|
||
function parseBoolean(value: string) {
|
||
return /^(1|true|yes|y|是|开启|打开|free)$/i.test(value.trim());
|
||
}
|
||
|
||
function importRowsFromText(text: string) {
|
||
const lines = text
|
||
.split(/\r?\n/)
|
||
.map((line) => line.trim())
|
||
.filter(Boolean);
|
||
let imported = 0;
|
||
lines.forEach((line) => {
|
||
const cells = line.split(/\t|,/).map((cell) => cell.trim());
|
||
if (cells.length === 0 || !cells[0]) {
|
||
return;
|
||
}
|
||
const row = findOrCreateRow(cells[0]);
|
||
row.name = cells[0];
|
||
row.code = cells[1] || normalizeCode(cells[0]);
|
||
if (cells[2] !== undefined && cells[2] !== '') {
|
||
row.amount = normalizeAmount(cells[2]);
|
||
row.amountTouched = true;
|
||
}
|
||
if (cells[3] !== undefined && cells[3] !== '') {
|
||
row.adminFree = parseBoolean(cells[3]);
|
||
}
|
||
row.saved = false;
|
||
imported += 1;
|
||
});
|
||
refreshAllRows();
|
||
if (imported > 0) {
|
||
message.success(`已导入 ${imported} 行数据`);
|
||
} else {
|
||
message.warning('未识别到可导入的数据');
|
||
}
|
||
}
|
||
|
||
async function importClipboard() {
|
||
try {
|
||
const text = await navigator.clipboard.readText();
|
||
importRowsFromText(text);
|
||
} catch {
|
||
message.warning('请复制 Excel 数据后，在表格区域粘贴');
|
||
}
|
||
}
|
||
|
||
function handlePaste(event: ClipboardEvent) {
|
||
const target = event.target as HTMLElement;
|
||
if (['INPUT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable) {
|
||
return;
|
||
}
|
||
const text = event.clipboardData?.getData('text/plain') || '';
|
||
if (!text.trim()) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
importRowsFromText(text);
|
||
}
|
||
|
||
function buildBadgeExpand() {
|
||
return JSON.stringify({
|
||
badgeDisplayType: batchForm.badgeDisplayType || 'SHORT',
|
||
});
|
||
}
|
||
|
||
function buildPayload(row: BatchRow) {
|
||
const rowType = getRowType(row);
|
||
return {
|
||
adminFree: row.adminFree,
|
||
amount: isAmountRequiredByType(rowType) ? normalizeAmount(row.amount) : 0,
|
||
code: String(row.code || '').trim(),
|
||
cover: row.cover,
|
||
expand: rowType === 'BADGE' ? buildBadgeExpand() : row.expand,
|
||
id: '',
|
||
name: String(row.name || '').trim(),
|
||
sourceUrl: row.sourceUrl,
|
||
sysOrigin: batchForm.sysOrigin,
|
||
type: rowType,
|
||
};
|
||
}
|
||
|
||
async function submitBatch() {
|
||
refreshAllRows();
|
||
if (rows.value.some((row) => row.status === 'uploading')) {
|
||
message.warning('还有文件正在上传，请稍后提交');
|
||
return;
|
||
}
|
||
const targetRows = rows.value.filter((row) => row.status === 'ready');
|
||
if (targetRows.length === 0) {
|
||
message.warning('暂无可提交资源');
|
||
return;
|
||
}
|
||
submitting.value = true;
|
||
let successCount = 0;
|
||
let failedCount = 0;
|
||
for (const row of targetRows) {
|
||
row.saving = true;
|
||
refreshRow(row);
|
||
try {
|
||
await addPropsSource(buildPayload(row));
|
||
row.saved = true;
|
||
row.errors = [];
|
||
successCount += 1;
|
||
} catch (error) {
|
||
console.error(error);
|
||
row.saved = false;
|
||
row.errors = ['保存失败'];
|
||
failedCount += 1;
|
||
} finally {
|
||
row.saving = false;
|
||
refreshRow(row);
|
||
}
|
||
}
|
||
submitting.value = false;
|
||
if (failedCount === 0) {
|
||
message.success(`已提交 ${successCount} 个资源`);
|
||
emit('success');
|
||
emit('close');
|
||
return;
|
||
}
|
||
message.error(`已提交 ${successCount} 个资源，${failedCount} 个失败`);
|
||
}
|
||
|
||
function getStatusText(status: RowStatus) {
|
||
const map: Record<RowStatus, string> = {
|
||
error: '待处理',
|
||
ready: '可提交',
|
||
saved: '已保存',
|
||
saving: '保存中',
|
||
uploading: '上传中',
|
||
};
|
||
return map[status];
|
||
}
|
||
|
||
function getStatusColor(status: RowStatus) {
|
||
const map: Record<RowStatus, string> = {
|
||
error: 'error',
|
||
ready: 'success',
|
||
saved: 'default',
|
||
saving: 'processing',
|
||
uploading: 'processing',
|
||
};
|
||
return map[status];
|
||
}
|
||
|
||
function setActiveRow(row: BatchRow) {
|
||
activeRowKey.value = row.key;
|
||
}
|
||
|
||
function getRowClassName(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
if (row.key === activeRowKey.value) {
|
||
return row.errors.length > 0
|
||
? 'batch-row batch-row--active batch-row--error'
|
||
: 'batch-row batch-row--active';
|
||
}
|
||
return row.errors.length > 0 ? 'batch-row batch-row--error' : 'batch-row';
|
||
}
|
||
|
||
function customRow(record: Record<string, any>) {
|
||
const row = record as BatchRow;
|
||
return {
|
||
onClick: () => setActiveRow(row),
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Drawer
|
||
destroy-on-hidden
|
||
:open="open"
|
||
root-class="resource-batch-drawer-root"
|
||
size="100vw"
|
||
:styles="{
|
||
body: { padding: '0', overflow: 'hidden' },
|
||
footer: { padding: '0' },
|
||
}"
|
||
title="批量导入资源"
|
||
@close="emit('close')"
|
||
>
|
||
<div class="batch-drawer" tabindex="0" @paste="handlePaste">
|
||
<div class="batch-common">
|
||
<div class="common-field">
|
||
<span class="common-label">系统</span>
|
||
<SysOriginSelect
|
||
v-model:value="batchForm.sysOrigin"
|
||
:options="sysOriginOptions"
|
||
/>
|
||
</div>
|
||
<div class="common-field">
|
||
<span class="common-label">类型</span>
|
||
<Select
|
||
v-model:value="batchForm.type"
|
||
option-label-prop="label"
|
||
:options="propsTypeOptions"
|
||
/>
|
||
</div>
|
||
<div v-if="batchForm.type === 'BADGE'" class="common-field">
|
||
<span class="common-label">展示形态</span>
|
||
<Select
|
||
v-model:value="batchForm.badgeDisplayType"
|
||
option-label-prop="label"
|
||
:options="badgeDisplayTypeOptions"
|
||
/>
|
||
</div>
|
||
<div v-if="isAmountRequired" class="common-field common-field--short">
|
||
<span class="common-label">默认底价</span>
|
||
<InputNumber
|
||
v-model:value="batchForm.amount"
|
||
:min="0"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div class="common-switch">
|
||
<span class="common-label">Admin Free</span>
|
||
<Switch
|
||
v-model:checked="batchForm.adminFree"
|
||
checked-children="是"
|
||
un-checked-children="否"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="batch-workspace">
|
||
<aside class="import-panel">
|
||
<input
|
||
ref="fileInputRef"
|
||
accept="image/*,.svga,.pag,.mp4,.zip"
|
||
class="hidden-input"
|
||
multiple
|
||
type="file"
|
||
@change="handleFileInput"
|
||
/>
|
||
<input
|
||
ref="folderInputRef"
|
||
accept="image/*,.svga,.pag,.mp4,.zip"
|
||
class="hidden-input"
|
||
multiple
|
||
type="file"
|
||
webkitdirectory
|
||
@change="handleFileInput"
|
||
/>
|
||
<div
|
||
class="dropzone"
|
||
:class="{ 'dropzone--active': dragging }"
|
||
@click="fileInputRef?.click()"
|
||
@dragenter.prevent="dragging = true"
|
||
@dragleave.prevent="dragging = false"
|
||
@dragover.prevent="dragging = true"
|
||
@drop.prevent="handleDrop"
|
||
>
|
||
<div class="dropzone-title">拖拽文件到这里</div>
|
||
<div class="dropzone-desc">选择文件夹后按命名规则自动配对</div>
|
||
<Space wrap>
|
||
<Button type="primary" @click.stop="fileInputRef?.click()">
|
||
选择文件
|
||
</Button>
|
||
<Button @click.stop="folderInputRef?.click()">选择文件夹</Button>
|
||
</Space>
|
||
</div>
|
||
|
||
<div class="import-rules">
|
||
<div class="side-title">识别规则</div>
|
||
<div class="rule-item">坐骑_物品名_价格_1天_cover/animation</div>
|
||
<div class="rule-item">头像框_物品名_价格_1天_cover/animation</div>
|
||
<div class="rule-item">勋章_物品名_cover/animation</div>
|
||
<div class="rule-item">cover 写入封面，animation 写入动态图资源</div>
|
||
</div>
|
||
|
||
<div class="import-progress">
|
||
<div class="progress-head">
|
||
<span>导入进度</span>
|
||
<span>{{ uploadAssetFinished }}/{{ uploadAssetTotal }}</span>
|
||
</div>
|
||
<Progress :percent="uploadPercent" size="small" />
|
||
<div class="progress-meta">
|
||
已识别 {{ rows.length }} 个，错误 {{ errorCount }} 个
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="table-panel">
|
||
<div class="table-toolbar">
|
||
<Space wrap>
|
||
<Button @click="importClipboard">粘贴 Excel</Button>
|
||
<Button
|
||
:disabled="rows.length === 0"
|
||
@click="showOnlyErrors = !showOnlyErrors"
|
||
>
|
||
{{ showOnlyErrors ? '查看全部' : '只看错误' }}
|
||
</Button>
|
||
<Button
|
||
:disabled="rows.length === 0"
|
||
@click="applyDefaultAmount"
|
||
>
|
||
批量设置底价
|
||
</Button>
|
||
<Button
|
||
:disabled="rows.length === 0"
|
||
@click="applyDefaultAdminFree"
|
||
>
|
||
批量设置 Admin Free
|
||
</Button>
|
||
<Button
|
||
danger
|
||
:disabled="selectedRowKeys.length === 0"
|
||
@click="deleteSelectedRows"
|
||
>
|
||
删除选中
|
||
</Button>
|
||
</Space>
|
||
<span class="selection-text">
|
||
已选 {{ selectedRowKeys.length }} 项
|
||
</span>
|
||
</div>
|
||
|
||
<Table
|
||
bordered
|
||
:columns="columns"
|
||
:custom-row="customRow"
|
||
:data-source="visibleRows"
|
||
:pagination="false"
|
||
:row-class-name="getRowClassName"
|
||
row-key="key"
|
||
:row-selection="rowSelection"
|
||
:scroll="{ x: 1120, y: 'calc(100vh - 360px)' }"
|
||
size="small"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'cover'">
|
||
<div class="asset-cell">
|
||
<Image
|
||
v-if="record.cover"
|
||
class="asset-cover"
|
||
:src="record.cover"
|
||
/>
|
||
<div v-else class="asset-empty">
|
||
{{ record.coverUploading ? '上传中' : '缺少封面' }}
|
||
</div>
|
||
<div class="file-name">{{ record.coverFileName || '-' }}</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="column.key === 'sourceUrl'">
|
||
<div class="file-cell">
|
||
<Tag :color="record.sourceUrl ? 'success' : 'default'">
|
||
{{ record.sourceUploading ? '上传中' : record.sourceUrl ? '已上传' : '未上传' }}
|
||
</Tag>
|
||
<div class="file-name">{{ record.sourceFileName || '-' }}</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="column.key === 'expand'">
|
||
<div class="file-cell">
|
||
<Tag :color="record.expand ? 'success' : 'default'">
|
||
{{ record.expandUploading ? '上传中' : record.expand ? '已上传' : '未上传' }}
|
||
</Tag>
|
||
<div class="file-name">{{ record.expandFileName || '-' }}</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="column.key === 'type'">
|
||
<Select
|
||
v-model:value="record.type"
|
||
option-label-prop="label"
|
||
:options="propsTypeOptions"
|
||
size="small"
|
||
style="width: 118px"
|
||
@change="markTypeTouched(record)"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'name'">
|
||
<Input
|
||
v-model:value="record.name"
|
||
size="small"
|
||
@blur="markRowEdited(record)"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'code'">
|
||
<Input
|
||
v-model:value="record.code"
|
||
size="small"
|
||
@blur="markRowEdited(record)"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'amount'">
|
||
<InputNumber
|
||
v-model:value="record.amount"
|
||
:disabled="!isAmountRequiredByType(record.type)"
|
||
:min="0"
|
||
size="small"
|
||
style="width: 96px"
|
||
@change="markAmountTouched(record)"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'adminFree'">
|
||
<Switch
|
||
v-model:checked="record.adminFree"
|
||
checked-children="是"
|
||
un-checked-children="否"
|
||
@change="markRowEdited(record)"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'status'">
|
||
<Tag :color="getStatusColor(record.status)">
|
||
{{ getStatusText(record.status) }}
|
||
</Tag>
|
||
</template>
|
||
<template v-else-if="column.key === 'actions'">
|
||
<Button danger size="small" type="link" @click.stop="deleteRow(record)">
|
||
删除
|
||
</Button>
|
||
</template>
|
||
</template>
|
||
</Table>
|
||
</main>
|
||
|
||
<aside class="preview-panel">
|
||
<template v-if="activeRow">
|
||
<div class="side-title">资源预览</div>
|
||
<div class="preview-cover">
|
||
<Image
|
||
v-if="activeRow.cover"
|
||
class="preview-image"
|
||
:src="activeRow.cover"
|
||
/>
|
||
<div v-else class="preview-empty">未上传封面</div>
|
||
</div>
|
||
<div class="preview-name">{{ activeRow.name || '-' }}</div>
|
||
<div class="preview-meta">
|
||
类型：{{ getPropsTypeName(getRowType(activeRow)) }}
|
||
</div>
|
||
<div class="preview-meta">编码：{{ activeRow.code || '-' }}</div>
|
||
<div class="preview-meta">封面：{{ activeRow.coverFileName || '-' }}</div>
|
||
<div class="preview-meta">资源：{{ activeRow.sourceFileName || '-' }}</div>
|
||
<div v-if="showExpandUploadByType(getRowType(activeRow))" class="preview-meta">
|
||
Android：{{ activeRow.expandFileName || '-' }}
|
||
</div>
|
||
<div class="side-title side-title--spaced">校验结果</div>
|
||
<div v-if="activeRow.errors.length === 0" class="success-text">
|
||
可提交
|
||
</div>
|
||
<div v-else class="error-list">
|
||
<Tag
|
||
v-for="error in activeRow.errors"
|
||
:key="error"
|
||
color="error"
|
||
>
|
||
{{ error }}
|
||
</Tag>
|
||
</div>
|
||
</template>
|
||
<Empty v-else description="暂无资源" />
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="batch-footer">
|
||
<div class="footer-stats">
|
||
<span>已识别 {{ rows.length }} 个</span>
|
||
<span>错误 {{ errorCount }} 个</span>
|
||
<span>可提交 {{ submitTargetCount }} 个</span>
|
||
</div>
|
||
<Space>
|
||
<Button :disabled="rows.length === 0 || submitting" @click="clearRows">
|
||
清空
|
||
</Button>
|
||
<Button :disabled="submitting" @click="emit('close')">取消</Button>
|
||
<Button
|
||
:disabled="submitTargetCount === 0"
|
||
:loading="submitting"
|
||
type="primary"
|
||
@click="submitBatch"
|
||
>
|
||
提交 {{ submitTargetCount }} 个
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
</template>
|
||
</Drawer>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.batch-drawer {
|
||
background: #f5f7fb;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - 55px);
|
||
min-width: 0;
|
||
outline: none;
|
||
}
|
||
|
||
.batch-common {
|
||
align-items: flex-end;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
padding: 14px 20px;
|
||
}
|
||
|
||
.common-field {
|
||
display: grid;
|
||
gap: 6px;
|
||
min-width: 180px;
|
||
}
|
||
|
||
.common-field--short {
|
||
min-width: 140px;
|
||
}
|
||
|
||
.common-label {
|
||
color: #475569;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.common-switch {
|
||
align-items: center;
|
||
display: flex;
|
||
gap: 10px;
|
||
min-height: 32px;
|
||
}
|
||
|
||
.batch-workspace {
|
||
display: grid;
|
||
flex: 1;
|
||
gap: 12px;
|
||
grid-template-columns: 260px minmax(620px, 1fr) 300px;
|
||
min-height: 0;
|
||
padding: 12px;
|
||
}
|
||
|
||
.import-panel,
|
||
.preview-panel,
|
||
.table-panel {
|
||
background: #fff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.import-panel,
|
||
.preview-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
overflow: auto;
|
||
padding: 14px;
|
||
}
|
||
|
||
.table-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hidden-input {
|
||
display: none;
|
||
}
|
||
|
||
.dropzone {
|
||
align-items: center;
|
||
background: #f8fafc;
|
||
border: 1px dashed #94a3b8;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
min-height: 180px;
|
||
padding: 20px 14px;
|
||
text-align: center;
|
||
transition:
|
||
background 0.2s ease,
|
||
border-color 0.2s ease;
|
||
}
|
||
|
||
.dropzone:hover,
|
||
.dropzone--active {
|
||
background: #eef6ff;
|
||
border-color: #1677ff;
|
||
}
|
||
|
||
.dropzone-title {
|
||
color: #111827;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dropzone-desc {
|
||
color: #64748b;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.side-title {
|
||
color: #111827;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.side-title--spaced {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.import-rules {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.rule-item,
|
||
.progress-meta,
|
||
.preview-meta {
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.progress-head {
|
||
align-items: center;
|
||
color: #334155;
|
||
display: flex;
|
||
font-size: 13px;
|
||
justify-content: space-between;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.table-toolbar {
|
||
align-items: center;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: space-between;
|
||
padding: 12px;
|
||
}
|
||
|
||
.selection-text {
|
||
color: #64748b;
|
||
flex-shrink: 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.asset-cell,
|
||
.file-cell {
|
||
display: grid;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.asset-cover,
|
||
.asset-empty {
|
||
height: 52px;
|
||
width: 52px;
|
||
}
|
||
|
||
.asset-cover {
|
||
border-radius: 6px;
|
||
display: block;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.asset-cover :deep(.ant-image-img) {
|
||
height: 52px;
|
||
object-fit: contain;
|
||
width: 52px;
|
||
}
|
||
|
||
.asset-empty {
|
||
align-items: center;
|
||
background: #f8fafc;
|
||
border: 1px dashed #cbd5e1;
|
||
border-radius: 6px;
|
||
color: #94a3b8;
|
||
display: flex;
|
||
font-size: 12px;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.file-name {
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.preview-cover,
|
||
.preview-empty {
|
||
align-items: center;
|
||
background: #f8fafc;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
min-height: 180px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-empty {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.preview-image {
|
||
max-height: 220px;
|
||
object-fit: contain;
|
||
width: 100%;
|
||
}
|
||
|
||
.preview-name {
|
||
color: #111827;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.success-text {
|
||
color: #16a34a;
|
||
}
|
||
|
||
.error-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.batch-footer {
|
||
align-items: center;
|
||
background: #fff;
|
||
border-top: 1px solid #e5e7eb;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 20px;
|
||
}
|
||
|
||
.footer-stats {
|
||
color: #334155;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
:deep(.batch-row--error > td) {
|
||
background: #fff7f7;
|
||
}
|
||
|
||
:deep(.batch-row--active > td) {
|
||
background: #eef6ff;
|
||
}
|
||
|
||
@media (width <= 1180px) {
|
||
.batch-workspace {
|
||
grid-template-columns: 240px minmax(520px, 1fr);
|
||
}
|
||
|
||
.preview-panel {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|