update registration event editor

src/pages/management/CustomerEdit.vue

@@ -46,6 +46,7 @@
 				<photo-field
 					v-model="formModel.photoURL"
 					alt-text="客户照片"
+					:loading="photoUploading"
 					:preview="false"
 					@add="selectPhoto"
 					@clear="resetPhotoState"
@@ -177,6 +178,7 @@ const selectorVisible = ref(false);
 const referrerCustomerId = ref("");
 const photoInputRef = ref<HTMLInputElement>();
 const photoTempFileId = ref("");
+const photoUploading = ref(false);
 const scannerVisible = ref(false);
 const scannerTarget = ref<ScanTarget>("code");
 const scanStatus = ref("点击扫码开始识别。");
@@ -321,15 +323,20 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	if (!file) {
 		return;
 	}
-	const compressedFile = await compressUploadImage(file);
-	const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
-	if (!tempFile?.id) {
-		showToast("客户照片上传失败", "warning");
-		return;
+	photoUploading.value = true;
+	try {
+		const compressedFile = await compressUploadImage(file);
+		const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
+		if (!tempFile?.id) {
+			showToast("客户照片上传失败", "warning");
+			return;
+		}
+		photoTempFileId.value = tempFile.id;
+		formModel.photoURL = AttachmentAPI.getTempReadURL(tempFile.id);
+	} finally {
+		photoUploading.value = false;
+		input.value = "";
 	}
-	photoTempFileId.value = tempFile.id;
-	formModel.photoURL = AttachmentAPI.getTempReadURL(tempFile.id);
-	input.value = "";
 }
 
 // ---------- 介绍人 ----------

src/pages/management/ManagementDataCharts.vue

@@ -78,6 +78,11 @@ const monthRecords = ref<RegistrationEventRecord[]>([]);
 const loading = ref(false);
 const calendarLoading = ref(false);
 const monthCursor = ref(getMonthStart(new Date()));
+const genderColorMap = {
+	MALE: "#2563eb",
+	FEMALE: "#db2777",
+	UNKNOWN: "#64748b"
+} as const;
 const beginDate = getDateStart(addDays(new Date(), -6));
 const endDate = getDateEnd(new Date());
 const dateTextList = buildDateTextList(beginDate, endDate);
@@ -305,6 +310,9 @@ function buildRecordTrendOption(): EChartsOption {
 function buildEventStructureOption(): EChartsOption {
 	return {
 		...buildBaseOption(),
+		legend: {
+			show: false
+		},
 		xAxis: {
 			type: "category",
 			data: registrationEventList.value.map(item => item.name || "未命名事件"),
@@ -345,9 +353,24 @@ function buildGenderStatOption(): EChartsOption {
 			name: "客户数量",
 			type: "bar",
 			data: [
-				getGenderCount("MALE"),
-				getGenderCount("FEMALE"),
-				getGenderCount("UNKNOWN")
+				{
+					value: getGenderCount("MALE"),
+					itemStyle: {
+						color: genderColorMap.MALE
+					}
+				},
+				{
+					value: getGenderCount("FEMALE"),
+					itemStyle: {
+						color: genderColorMap.FEMALE
+					}
+				},
+				{
+					value: getGenderCount("UNKNOWN"),
+					itemStyle: {
+						color: genderColorMap.UNKNOWN
+					}
+				}
 			]
 		}]
 	};

src/pages/management/ManagementProfile.vue

@@ -7,6 +7,7 @@
 					add-text="更换"
 					alt-text="用户头像"
 					size="compact"
+					:loading="avatarUploading"
 					:preview="false"
 					:show-remove="false"
 					@add="changeAvatar"
@@ -63,6 +64,7 @@ const router = useRouter();
 const userStore = useUserStore();
 const avatarInputRef = ref<HTMLInputElement>();
 const avatarTempFileId = ref("");
+const avatarUploading = ref(false);
 const isSaving = ref(false);
 
 const formModel = reactive({
@@ -108,19 +110,24 @@ async function handleAvatarSelected(event: Event): Promise<void> {
 	if (!file) {
 		return;
 	}
-	const compressedFile = await compressUploadImage(file);
-	const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
-	if (!tempFile?.id) {
-		Toast({
-			theme: "error",
-			direction: "row",
-			message: "头像上传失败"
-		});
-		return;
+	avatarUploading.value = true;
+	try {
+		const compressedFile = await compressUploadImage(file);
+		const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
+		if (!tempFile?.id) {
+			Toast({
+				theme: "error",
+				direction: "row",
+				message: "头像上传失败"
+			});
+			return;
+		}
+		avatarTempFileId.value = tempFile.id;
+		formModel.avatar = AttachmentAPI.getTempReadURL(tempFile.id);
+	} finally {
+		avatarUploading.value = false;
+		input.value = "";
 	}
-	avatarTempFileId.value = tempFile.id;
-	formModel.avatar = AttachmentAPI.getTempReadURL(tempFile.id);
-	input.value = "";
 }
 
 async function goPassword(): Promise<void> {

src/pages/management/RegistrationEventEdit.vue

@@ -8,10 +8,17 @@
 				<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="事件说明" autosize borderless />
 			</t-form-item>
 			<t-form-item label="颜色">
-				<label class="color-picker">
-					<input v-model="formModel.color" type="color">
-					<span v-text="formModel.color" />
-				</label>
+				<t-button
+					size="extra-small"
+					variant="outline"
+					class="color-trigger"
+					@click="openColorPicker"
+				>
+					<div class="content">
+						<span class="swatch" :style="{ background: formModel.color }" />
+						<span v-text="formModel.color" />
+					</div>
+				</t-button>
 			</t-form-item>
 			<t-form-item label="状态">
 				<t-radio-group v-model="formModel.status" class="inline-options" variant="default-filled">
@@ -19,10 +26,10 @@
 					<t-radio :block="false" borderless value="INACTIVE">无效</t-radio>
 				</t-radio-group>
 			</t-form-item>
-			<t-form-item label="启用">
+			<t-form-item label="启用" content-align="right">
 				<t-switch v-model="formModel.enabled" />
 			</t-form-item>
-			<t-form-item label="拍照">
+			<t-form-item label="需要拍照" content-align="right">
 				<t-switch v-model="formModel.requirePhoto" />
 			</t-form-item>
 			<t-form-item label="排序">
@@ -62,12 +69,50 @@
 				</t-checkbox>
 			</t-checkbox-group>
 		</section>
-		<t-button v-can="savePermissionCode" class="save" theme="primary" @click="saveRegistrationEvent">保存</t-button>
+		<div class="bottom-actions">
+			<t-button
+				v-if="!isCreateMode"
+				v-can="deletePermissionCode"
+				class="delete bg-white"
+				theme="danger"
+				variant="outline"
+				:loading="removing"
+				:disabled="saving || removing"
+				@click="confirmRemoveRegistrationEvent"
+			>
+				删除事件
+			</t-button>
+			<t-button
+				v-can="savePermissionCode"
+				class="save"
+				theme="primary"
+				:loading="saving"
+				:disabled="removing"
+				@click="saveRegistrationEvent"
+			>
+				保存
+			</t-button>
+		</div>
 	</div>
+	<t-popup v-model="colorPickerVisible" placement="bottom">
+		<div class="color-popup">
+			<div class="header">
+				<t-button variant="text" size="small" @click="cancelColorPicker">取消</t-button>
+				<span class="title" v-text="'颜色选择'" />
+				<t-button theme="primary" variant="text" size="small" @click="confirmColorPicker">确定</t-button>
+			</div>
+			<t-color-picker
+				v-model="colorDraft"
+				format="HEX8"
+				type="multiple"
+				:swatch-colors="colorSwatchList"
+			/>
+		</div>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
-import { Toast } from "tdesign-mobile-vue";
+import { DialogPlugin, Toast } from "tdesign-mobile-vue";
 import type { Role } from "timi-web";
 import RegistrationEventAPI from "@/api/RegistrationEventAPI";
 import GaoUserAPI from "@/api/GaoUserAPI";
@@ -88,11 +133,30 @@ const router = useRouter();
 const routeId = computed(() => String(route.params.id || ""));
 const isCreateMode = computed(() => !routeId.value);
 const savePermissionCode = computed(() => isCreateMode.value ? gaoPermissionCodes.registrationEvent.create : gaoPermissionCodes.registrationEvent.update);
+const deletePermissionCode = gaoPermissionCodes.registrationEvent.delete;
 const pageAccess = computed(() => ({
-	value: [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read, savePermissionCode.value],
+	value: isCreateMode.value
+		? [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read, savePermissionCode.value]
+		: [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read, { value: [savePermissionCode.value, deletePermissionCode], mode: "or" as const }],
 	mode: "and" as const
 }));
 const roleOptions = ref<Role[]>([]);
+const colorPickerVisible = ref(false);
+const colorDraft = ref("#2f88ff");
+const saving = ref(false);
+const removing = ref(false);
+const colorSwatchList = [
+	"#2f88ff",
+	"#0ea5e9",
+	"#10b981",
+	"#22c55e",
+	"#f59e0b",
+	"#f97316",
+	"#ef4444",
+	"#ec4899",
+	"#8b5cf6",
+	"#64748b"
+];
 const limitOptions: LimitOption[] = [
 	{ label: "不限", value: "NONE" },
 	{ label: "上午/下午各一次", value: "DAILY_HALF_DAY" },
@@ -116,6 +180,21 @@ const formModel = reactive({
 });
 const limitValuePlaceholder = computed(() => formModel.limitType === "INTERVAL_HOUR" ? "请输入间隔小时数" : "请输入累计上限次数");
 
+function openColorPicker(): void {
+	colorDraft.value = formModel.color;
+	colorPickerVisible.value = true;
+}
+
+function cancelColorPicker(): void {
+	colorPickerVisible.value = false;
+	colorDraft.value = formModel.color;
+}
+
+function confirmColorPicker(): void {
+	formModel.color = colorDraft.value;
+	colorPickerVisible.value = false;
+}
+
 function isValueLimitType(value: RegistrationLimitType): boolean {
 	return value === "INTERVAL_HOUR" || value === "TOTAL_LIMIT";
 }
@@ -162,6 +241,7 @@ async function saveRegistrationEvent(): Promise<void> {
 		return;
 	}
 
+	saving.value = true;
 	try {
 		const payload = buildPayload();
 		if (isCreateMode.value) {
@@ -173,6 +253,47 @@ async function saveRegistrationEvent(): Promise<void> {
 		await router.replace("/management/registration-events");
 	} catch {
 		showToast("登记事件保存失败", "error");
+	} finally {
+		saving.value = false;
+	}
+}
+
+async function confirmRemoveRegistrationEvent(): Promise<void> {
+	const id = formModel.id || routeId.value;
+	if (!id || removing.value) {
+		return;
+	}
+
+	const eventName = formModel.name.trim() || "未命名事件";
+	const dialog = DialogPlugin.confirm({
+		title: "删除登记事件",
+		content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await removeRegistrationEvent(id);
+		}
+	});
+}
+
+async function removeRegistrationEvent(id: string): Promise<void> {
+	if (removing.value) {
+		return;
+	}
+
+	removing.value = true;
+	try {
+		await RegistrationEventAPI.remove(id);
+		showToast("登记事件已删除");
+		await router.replace("/management/registration-events");
+	} catch {
+		showToast("登记事件删除失败", "error");
+	} finally {
+		removing.value = false;
 	}
 }
 
@@ -204,6 +325,7 @@ async function fillForm(): Promise<void> {
 		sortText: String(current.sort ?? 0),
 		roleCodeList: [...(current.roleCodeList || [])]
 	});
+	colorDraft.value = formModel.color;
 }
 
 onMounted(async () => {
@@ -227,22 +349,30 @@ onMounted(async () => {
 		width: 100%;
 	}
 
-	.color-picker {
+	.color-trigger {
+		--td-button-extra-small-padding-horizontal: 2px;
+
 		gap: .75rem;
 		display: flex;
 		align-items: center;
+		padding-right: .875rem;
+		justify-content: flex-start;
 
-		input {
-			padding: 0;
-			width: 2rem;
-			height: 2rem;
-			border: 0;
-			background: transparent;
-		}
+		.content {
+			gap: .5rem;
+			display: flex;
 
-		span {
-			color: #52607a;
-			font-size: .875rem;
+			.swatch {
+				width: 1.5rem;
+				height: 1.5rem;
+				display: block;
+				border-radius: .25rem;
+			}
+
+			span {
+				color: #52607a;
+				font-size: .875rem;
+			}
 		}
 	}
 
@@ -289,21 +419,57 @@ onMounted(async () => {
 		}
 	}
 
-	.save {
+	.bottom-actions {
+		gap: .75rem;
 		left: 1rem;
 		right: 1rem;
+		display: flex;
 		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
 		position: fixed;
+
+		.delete {
+			flex: 1;
+		}
+
+		.save {
+			flex: 2;
+		}
+	}
+}
+
+.color-popup {
+	padding: .75rem 0 1.25rem;
+	background: #fff;
+	border-radius: 1rem 1rem 0 0;
+
+	.header {
+		display: flex;
+		padding: 0 1rem;
+		align-items: center;
+		justify-content: space-between;
+
+		span {
+			font-size: 1rem;
+			font-weight: 700;
+		}
 	}
 }
 
 :global(html.theme-dark) {
 	.registration-event-edit {
-		.color-picker span,
+		.color-trigger span,
 		.roles .title .hint {
 			color: #94a3b8;
 		}
 
+		.color-trigger .swatch {
+			box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .24);
+		}
+
+		.color-popup {
+			background: #0f172a;
+		}
+
 		.roles .group .item {
 			color: #e2e8f0;
 			background: rgba(15, 23, 42, .72);

src/pages/management/RegistrationEventList.vue

@@ -1,66 +1,44 @@
 <template>
 	<div v-can="{ value: [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read], mode: 'and' }" class="registration-event-list">
-		<article
-			class="item"
-			v-for="item in registrationEventList"
-			:key="item.id"
-		>
-			<div class="main">
-				<span class="color" :style="{ background: item.color || defaultColor }" />
-				<div class="content">
-					<div class="title">
-						<strong v-text="item.name || '未命名事件'" />
+		<t-cell-group theme="card">
+			<t-cell
+				class="item"
+				v-for="item in registrationEventList"
+				:key="item.id"
+				:arrow="canUpdateRegistrationEvent"
+				:hover="canUpdateRegistrationEvent"
+				@click="handleRegistrationEventClick(item)"
+			>
+				<template #title>
+					<div class="header">
+						<div class="color" :style="{ background: item.color || defaultColor }" />
+						<div class="title" v-text="item.name || '未命名事件'" />
 						<t-tag
-							size="small"
-							theme="primary"
-							:variant="isRegistrationEventActive(item) ? 'light' : 'outline'"
+							class="status"
+							:theme="isRegistrationEventActive(item) ? 'primary' : 'default'"
+							variant="outline"
 							:content="getStatusText(item)"
 						/>
+						<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
 					</div>
-					<p v-if="item.description" v-text="item.description" />
-					<div class="meta">
-						<span v-text="getLimitText(item)" />
-						<span v-if="item.requirePhoto">需拍照</span>
-						<span v-text="`${item.roleCodeList?.length || 0} 个角色`" />
+				</template>
+				<template #description>
+					<div class="description">
+						<div class="line">
+							<span>可登记角色</span>
+							<t-tag
+								v-for="roleCode in item.roleCodeList"
+								:key="roleCode"
+								theme="primary"
+								variant="light-outline"
+								:content="getRoleName(roleCode)"
+							/>
+						</div>
+						<div class="line" v-text="getLimitText(item)" />
 					</div>
-				</div>
-			</div>
-			<div class="roles">
-				<t-tag
-					v-for="roleCode in item.roleCodeList"
-					:key="roleCode"
-					theme="primary"
-					variant="light-outline"
-					:content="getRoleName(roleCode)"
-				/>
-			</div>
-			<div class="actions">
-				<t-button
-					v-can="gaoPermissionCodes.registrationEvent.update"
-					theme="primary"
-					variant="outline"
-					size="small"
-					@click="editRegistrationEvent(item)"
-					content="编辑"
-				>
-					<template #icon>
-						<t-icon name="edit-1" size="small" />
-					</template>
-				</t-button>
-				<t-button
-					v-can="gaoPermissionCodes.registrationEvent.delete"
-					theme="danger"
-					variant="outline"
-					size="small"
-					@click="removeRegistrationEvent(item)"
-					content="删除"
-				>
-					<template #icon>
-						<t-icon name="delete" size="small" />
-					</template>
-				</t-button>
-			</div>
-		</article>
+				</template>
+			</t-cell>
+		</t-cell-group>
 		<div v-if="!registrationEventList.length" class="empty-block">暂无登记事件</div>
 		<t-button v-can="gaoPermissionCodes.registrationEvent.create" class="create" theme="primary" @click="createRegistrationEvent">
 			<template #icon>
@@ -73,7 +51,7 @@
 
 <script setup lang="ts">
 import { Toast } from "tdesign-mobile-vue";
-import type { Role } from "timi-web";
+import { useUserStore, type Role } from "timi-web";
 import RegistrationEventAPI from "@/api/RegistrationEventAPI";
 import GaoUserAPI from "@/api/GaoUserAPI";
 import type { RegistrationEvent, RegistrationLimitType } from "@/types/RegistrationEvent";
@@ -84,9 +62,11 @@ defineOptions({
 });
 
 const router = useRouter();
+const userStore = useUserStore();
 const defaultColor = "#2f88ff";
 const registrationEventList = ref<RegistrationEvent[]>([]);
 const roleOptions = ref<Role[]>([]);
+const canUpdateRegistrationEvent = computed(() => userStore.hasPermissions(gaoPermissionCodes.registrationEvent.update));
 
 function createRegistrationEvent(): void {
 	router.push("/management/registration-events/create");
@@ -100,26 +80,12 @@ function editRegistrationEvent(item: RegistrationEvent): void {
 	router.push(`/management/registration-events/${item.id}/edit`);
 }
 
-async function removeRegistrationEvent(item: RegistrationEvent): Promise<void> {
-	if (!item.id) {
+function handleRegistrationEventClick(item: RegistrationEvent): void {
+	if (!canUpdateRegistrationEvent.value) {
 		return;
 	}
 
-	try {
-		await RegistrationEventAPI.remove(item.id);
-		Toast({
-			theme: "success",
-			direction: "row",
-			message: "登记事件已删除"
-		});
-		await loadData();
-	} catch {
-		Toast({
-			theme: "error",
-			direction: "row",
-			message: "登记事件删除失败"
-		});
-	}
+	editRegistrationEvent(item);
 }
 
 function isRegistrationEventActive(item: RegistrationEvent): boolean {
@@ -180,83 +146,31 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .registration-event-list {
-	gap: .875rem;
-	padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
-	display: flex;
-	flex-direction: column;
+	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
 
 	.item {
-		gap: .75rem;
-		padding: 1rem;
-		display: grid;
-		border: 1px solid rgba(148, 163, 184, .16);
-		background: rgba(255, 255, 255, .96);
-		box-shadow: var(--td-shadow-1);
-		border-radius: .75rem;
 
-		.main {
-			gap: .75rem;
+		.header {
+			gap: .5rem;
+			width: 100%;
 			display: flex;
-			min-width: 0;
-			align-items: flex-start;
+			margin-top: .25rem;
 
 			.color {
-				width: .875rem;
-				height: .875rem;
-				flex: 0 0 auto;
-				margin-top: .25rem;
-				border-radius: 50%;
-			}
-
-			.content {
-				flex: 1;
-				min-width: 0;
-
-				.title {
-					gap: .5rem;
-					display: flex;
-					min-width: 0;
-					align-items: center;
-
-					strong {
-						overflow: hidden;
-						font-size: 1rem;
-						font-weight: 700;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-
-				p {
-					margin: .375rem 0 0 0;
-					color: #52607a;
-					font-size: .875rem;
-				}
-
-				.meta {
-					gap: .5rem;
-					display: flex;
-					margin-top: .5rem;
-					flex-wrap: wrap;
-
-					span {
-						color: #52607a;
-						font-size: .75rem;
-					}
-				}
+				width: 1.5rem;
+				height: 1.5rem;
+				border-radius: .4rem;
 			}
 		}
 
-		.roles {
-			gap: .375rem;
-			display: flex;
-			flex-wrap: wrap;
-		}
+		.description {
+			margin-top: .5rem;
 
-		.actions {
-			gap: .5rem;
-			display: flex;
-			justify-content: flex-end;
+			.line {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
 		}
 	}
 

src/pages/management/RegistrationEventRecordEdit.vue

@@ -67,7 +67,7 @@
 			</t-form-item>
 
 			<div class="photo-part">
-				<photo-scroller v-model="photoList" @add="capturePhoto" />
+				<photo-scroller v-model="photoList" :loading="photoUploading" @add="capturePhoto" />
 			</div>
 		</t-form>
 		<t-cell-group
@@ -161,6 +161,7 @@ const registeredAtPickerVisible = ref(false);
 const note = ref("");
 const recordPhotoInputRef = ref<HTMLInputElement>();
 const photoItemList = ref<EditablePhoto[]>([]);
+const photoUploading = ref(false);
 const scannerVisible = ref(false);
 const scanStatus = ref("点击扫码开始识别。");
 const saving = ref(false);
@@ -366,18 +367,23 @@ async function handleRecordPhotoSelected(event: Event): Promise<void> {
 	if (!fileList.length) {
 		return;
 	}
-	const compressedFileList = await compressUploadImageList(fileList);
-	const tempFileList = await AttachmentAPI.uploadTemp(compressedFileList);
-	for (const item of tempFileList) {
-		if (!item.id) {
-			continue;
+	photoUploading.value = true;
+	try {
+		const compressedFileList = await compressUploadImageList(fileList);
+		const tempFileList = await AttachmentAPI.uploadTemp(compressedFileList);
+		for (const item of tempFileList) {
+			if (!item.id) {
+				continue;
+			}
+			photoItemList.value.push({
+				tempFileId: item.id,
+				url: AttachmentAPI.getTempReadURL(item.id)
+			});
 		}
-		photoItemList.value.push({
-			tempFileId: item.id,
-			url: AttachmentAPI.getTempReadURL(item.id)
-		});
+	} finally {
+		photoUploading.value = false;
+		input.value = "";
 	}
-	input.value = "";
 }
 
 // ---------- 提交 ----------