init project

2026-08-01 18:01:23 +08:00
parent 286fa1ba56
commit 11c48bf00c
107 changed files with 19350 additions and 1 deletions
@@ -0,0 +1,206 @@
+<template>
+	<div class="photo-section">
+		<div class="t-form__label" v-text="title" />
+		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
+			<div class="photo-row">
+				<div v-if="!displayPhotoList.length" class="photo-empty" v-text="emptyText" />
+				<div
+					v-for="(item, index) in displayPhotoList"
+					:key="`${item}-${index}`"
+					class="photo-item"
+				>
+					<t-button variant="text" class="photo-preview-trigger" @click="openPhotoViewer(index)">
+						<t-image :src="item" alt="登记照片" fit="cover" class="photo-image" />
+					</t-button>
+					<t-button
+						v-if="showRemove && modelValue.length"
+						theme="danger"
+						class="remove"
+						shape="circle"
+						size="extra-small"
+						@click="removePhoto(index)"
+					>
+						<t-icon name="close" size="1rem" />
+					</t-button>
+				</div>
+			</div>
+			<t-button
+				v-if="showAdd"
+				theme="primary"
+				variant="dashed"
+				class="add"
+				@click="$emit('add')"
+			>
+				<span v-text="addText" />
+			</t-button>
+		</div>
+		<t-image-viewer
+			v-model:visible="photoViewerVisible"
+			:images="photoViewerImages"
+			show-index
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	addText?: string;
+	emptyText?: string;
+	fallbackImage?: string;
+	modelValue: string[];
+	showAdd?: boolean;
+	showRemove?: boolean;
+	title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: "照片列表",
+	addText: "拍照",
+	emptyText: "暂无照片",
+	showAdd: true,
+	showRemove: true
+});
+
+const emit = defineEmits<{
+	add: [];
+	"update:modelValue": [value: string[]];
+}>();
+
+const photoViewerVisible = ref(false);
+const photoViewerImages = ref<string[]>([]);
+const displayPhotoList = computed(() => {
+	if (props.modelValue.length) {
+		return props.modelValue;
+	}
+
+	return props.fallbackImage ? [props.fallbackImage] : [];
+});
+
+function removePhoto(index: number): void {
+	if (index < 0 || props.modelValue.length <= index) {
+		return;
+	}
+
+	const nextValue = props.modelValue.filter((_, itemIndex) => itemIndex !== index);
+	emit("update:modelValue", nextValue);
+}
+
+function openPhotoViewer(index: number): void {
+	photoViewerImages.value = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
+	photoViewerVisible.value = true;
+}
+</script>
+
+<style scoped lang="less">
+.photo-section {
+	display: grid;
+	gap: .375rem;
+
+	.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);
+		}
+	}
+
+	.photo-row {
+		gap: .75rem;
+		width: 100%;
+		height: 100%;
+		min-width: 0;
+		display: flex;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+	}
+
+	.add {
+		--td-button-border-radius: .875rem;
+
+		flex: 0 0 5.5rem;
+		width: 5.5rem;
+		height: 5.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.photo-item {
+		width: 5.5rem;
+		height: 5.5rem;
+		flex: 0 0 5.5rem;
+		position: relative;
+		overflow: hidden;
+		border-radius: 1rem;
+	}
+
+	.photo-preview-trigger {
+		padding: 0;
+		border: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+		cursor: pointer;
+		background: transparent;
+		border-radius: 1rem;
+	}
+
+	.photo-image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		border-radius: 1rem;
+	}
+
+	.remove {
+		top: .375rem;
+		right: .375rem;
+		position: absolute;
+
+		:deep(.t-button__content) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.photo-empty {
+		width: 100%;
+		color: #52607a;
+		display: flex;
+		padding: 1rem 0;
+		align-items: center;
+		justify-content: center;
+		background: #f8fbff;
+		border-radius: 1rem;
+	}
+}
+
+:global(html.theme-dark) {
+	.photo-section {
+		.field-title,
+		.photo-empty {
+			color: #94a3b8;
+		}
+
+		.photo-empty {
+			color: #e2e8f0;
+			background: rgba(15, 23, 42, .72);
+			border-color: rgba(148, 163, 184, .16);
+		}
+
+		.add {
+			background: rgba(37, 99, 235, .16);
+			border-color: rgba(96, 165, 250, .28);
+
+			span {
+				color: #93c5fd;
+			}
+		}
+	}
+}
+</style>