gao-customer-h5/src/components/mediaSelector/MediaSelector.vue

<template>
	<div v-bind="$attrs" class="media-selector">
		<div class="t-form__label" :class="{ required }">
			<slot name="title">
				<span v-text="title" />
			</slot>
		</div>
		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
			<div class="items">
				<div v-if="!displayMediaList.length" class="empty" v-text="emptyText" />
				<media-selector-item
					v-for="(item, index) in displayMediaList"
					:key="`${item.url}-${item.attachType}-${index}`"
					:item="item"
					:removable="hasRemovablePhotos"
					:show-remove="showRemove === true"
					:show-type-label="showTypeLabel === true"
					@preview="openMediaViewer(index)"
					@remove="removePhoto(index)"
				/>
			</div>
			<media-selector-add
				v-if="showAdd"
				:add-actions="props.addActions ?? []"
				:add-text="props.addText ?? '选择'"
				:busy="isBusy"
				:upload-enabled="!!props.upload"
				@add="handleAdd"
				@action="handleAddAction"
				@capture-photo="handleCapturePhoto"
				@capture-video="handleCaptureVideo"
				@file-change="handleFileChange"
			/>
		</div>
	</div>
	<media-selector-viewer
		v-model:visible="photoViewerVisible"
		:images="photoViewerImages"
		:items="photoViewerItems"
		:show-actions="showViewerActions === true"
		:submitting="isSubmitting"
		@change-type="changePhotoType"
		@remove="removePhotoBySourceIndex"
	/>
</template>

<script setup lang="ts">
import MediaSelectorAdd from "./MediaSelectorAdd.vue";
import MediaSelectorItem from "./MediaSelectorItem.vue";
import MediaSelectorViewer from "./MediaSelectorViewer.vue";
import type { MediaSelectorAddAction, MediaSelectorViewerItem } from "./types";
import { getMediaPreviewURL, normalizePhotoItem } from "./utils";
import type { PhotoItem } from "@/types/Photo.ts";
import { Message } from "@/utils/message.ts";

defineOptions({
	inheritAttrs: false
});

interface Props {
	addActions?: readonly MediaSelectorAddAction[];
	addText?: string;
	editMode?: boolean;
	emptyText?: string;
	fallbackImage?: string;
	loading?: boolean;
	modelValue: string[];
	photoItems?: readonly PhotoItem[];
	required?: boolean;
	upload?: (fileList: File[]) => Promise<PhotoItem[]>;
	showViewerActions?: boolean;
	showAdd?: boolean;
	showRemove?: boolean;
	showTypeLabel?: boolean;
	submit?: (photoItems: PhotoItem[]) => Promise<void>;
	title?: string;
}

const props = withDefaults(defineProps<Props>(), {
	addActions: () => [],
	title: "媒体列表",
	addText: "选择",
	editMode: false,
	emptyText: "暂无照片",
	loading: false,
	required: false,
	showAdd: true,
	showRemove: true,
	showTypeLabel: true,
	showViewerActions: true
});

type Emits = {
	add: [];
	action: [value: MediaSelectorAddAction];
	"capture-photo": [];
	"capture-video": [];
	"update:modelValue": [value: string[]];
	"update:photoItems": [value: PhotoItem[]];
};

const emit = defineEmits<Emits>();

function handleAddAction(action: MediaSelectorAddAction): void {
	emit("action", action);
}

function handleAdd(): void {
	emit("add");
}

function handleCapturePhoto(): void {
	emit("capture-photo");
}

function handleCaptureVideo(): void {
	emit("capture-video");
}

const photoViewerVisible = ref(false);
const photoViewerImages = ref<string[]>([]);
const photoViewerItems = ref<MediaSelectorViewerItem[]>([]);
const isSubmitting = ref(false);
const isUploading = ref(false);
const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);

const displayMediaList = computed<PhotoItem[]>(() => {
	if (props.photoItems?.length) {
		return props.photoItems.map(normalizePhotoItem);
	}
	if (props.modelValue.length) {
		return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
	}

	return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
});
const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);

async function handleFileChange(event: Event): Promise<void> {
	const input = event.target as HTMLInputElement;
	const fileList = Array.from(input.files || []);
	if (!fileList.length || !props.upload) {
		return;
	}

	isUploading.value = true;
	try {
		const uploadedPhotoItems = await props.upload(fileList);
		if (!uploadedPhotoItems.length) {
			return;
		}
		const nextPhotoItems = [...displayMediaList.value, ...uploadedPhotoItems.map((item, index) => ({
			...item,
			mimeType: item.mimeType || item.attachment?.mimeType || fileList[index]?.type
		}))];
		emit("update:photoItems", nextPhotoItems);
		emit("update:modelValue", nextPhotoItems.map(item => item.url));
	} catch {
		Message.error("媒体上传失败");
	} finally {
		isUploading.value = false;
		input.value = "";
	}
}

async function removePhoto(index: number): Promise<void> {
	if (index < 0 || displayMediaList.value.length <= index) {
		return;
	}

	await applyPhotoItems(displayMediaList.value.filter((_, itemIndex) => itemIndex !== index));
}

function openMediaViewer(index: number): void {
	openPhotoViewer(index);
}

function openPhotoViewer(index: number): void {
	const viewerItems = displayMediaList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
	const imageIndex = viewerItems.findIndex(({ sourceIndex }) => sourceIndex === index);
	if (imageIndex < 0) {
		return;
	}
	const rotatedItems = [...viewerItems.slice(imageIndex), ...viewerItems.slice(0, imageIndex)];
	photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
	photoViewerImages.value = photoViewerItems.value.map(getMediaPreviewURL);
	photoViewerVisible.value = true;
}

async function changePhotoType(sourceIndex: number, attachType: string): Promise<void> {
	const currentItem = displayMediaList.value[sourceIndex];
	if (!currentItem || currentItem.attachType === attachType) {
		return;
	}

	const nextPhotoItems = displayMediaList.value.map((item, index) => index === sourceIndex ? {
		...item,
		attachType
	} : item);
	await applyPhotoItems(nextPhotoItems);
}

async function removePhotoBySourceIndex(sourceIndex: number): Promise<void> {
	if (!displayMediaList.value[sourceIndex]) {
		return;
	}

	await applyPhotoItems(displayMediaList.value.filter((_, index) => index !== sourceIndex));
}

async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
	if (isSubmitting.value) {
		return;
	}

	if (!props.editMode && !props.submit) {
		Message.warning("展示模式未配置媒体保存方法");
		return;
	}

	if (!props.editMode) {
		isSubmitting.value = true;
		try {
			await props.submit!(nextPhotoItems);
		} catch {
			Message.error("媒体修改失败");
			return;
		} finally {
			isSubmitting.value = false;
		}
	}

	emit("update:photoItems", nextPhotoItems);
	emit("update:modelValue", nextPhotoItems.map(item => item.url));
	photoViewerVisible.value = false;
}
</script>

<style scoped lang="less">
.media-selector {
	gap: .375rem;
	width: 100%;
	display: grid;

	.photo-shell {
		display: grid;
		gap: .75rem;
		grid-template-columns: minmax(0, 1fr) 5.5rem;
		align-items: start;

		&.without-add {
			grid-template-columns: minmax(0, 1fr);
		}

		.items {
			gap: .75rem;
			width: 100%;
			height: 100%;
			min-width: 0;
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin;

			.empty {
				width: 100%;
				color: #52607a;
				display: flex;
				padding: 1rem 0;
				align-items: center;
				justify-content: center;
				background: #f8fbff;
				border-radius: 1rem;
			}

		}
	}

	.t-form__label {
		&.required::before {
			color: var(--td-error-color, #e34d59);
			content: "*";
			margin-right: .25rem;
		}
	}

}

:global(html.theme-dark) {
	.media-selector .empty {
		color: #e2e8f0;
		background: rgba(15, 23, 42, .72);
		}
}
</style>