add EventDetail and PointRuleDetail

src/pages/event/EventDetail.vue

@@ -0,0 +1,292 @@
+<template>
+	<div
+		v-can="permissionCodes.event.read"
+		class="registration-event-detail"
+	>
+		<section v-if="event" class="event-header">
+			<div class="color" :style="{ background: event.color || defaultColor }" />
+			<div class="header-content">
+				<div class="title-row">
+					<h2 v-text="event.name || '未命名事件'" />
+					<t-tag :theme="getStatusTheme(event.status)" variant="light-outline" :content="getStatusText(event.status)" />
+				</div>
+				<div class="description" v-text="Text.display(event.description)" />
+			</div>
+		</section>
+
+		<t-cell-group v-if="event" title="基本信息" theme="card">
+			<t-cell title="所属门店" :note="storeName" />
+			<t-cell title="事件颜色">
+				<template #note>
+					<div class="color-note">
+						<span class="color-dot" :style="{ background: event.color || defaultColor }" />
+						<span v-text="(event.color || defaultColor).toLowerCase()" />
+					</div>
+				</template>
+			</t-cell>
+			<t-cell title="说明" :note="Text.display(event.description)" />
+			<t-cell title="可登记角色">
+				<template #note>
+					<div v-if="event.roleCodeList?.length" class="tag-list">
+						<t-tag
+							v-for="roleCode in event.roleCodeList"
+							:key="roleCode"
+							theme="primary"
+							variant="light-outline"
+							:content="getRoleName(roleCode)"
+						/>
+					</div>
+					<span v-else>未配置</span>
+				</template>
+			</t-cell>
+		</t-cell-group>
+
+		<t-cell-group v-if="event" title="登记配置" theme="card">
+			<t-cell title="数值类型" :note="getValueTypeText(event.valueType)" />
+			<t-cell v-if="event.valueType === 'NUMBER'" title="数值单位" :note="getValueUnitText(event.valueUnit)" />
+			<t-cell v-if="event.valueType === 'NUMBER'" title="登记必填数值" :note="event.requireValue ? '是' : '否'" />
+			<t-cell title="需要拍照" :note="event.requirePhoto ? '是' : '否'" />
+			<t-cell title="次数约束" :note="getLimitText(event)" />
+		</t-cell-group>
+
+		<t-cell-group v-if="event" title="生效时间" theme="card">
+			<t-cell title="起始时间" :note="formatDate(event.beginAt)" />
+			<t-cell title="终止时间" :note="formatDate(event.endAt)" />
+			<t-cell title="创建时间" :note="formatDate(event.createdAt, '未知时间')" />
+			<t-cell title="更新时间" :note="formatDate(event.updatedAt, '未知时间')" />
+		</t-cell-group>
+
+		<t-empty v-else :description="isLoading ? '正在加载登记事件' : '登记事件不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type ModuleCode, type Role, RoleAPI, Time, useUserStore, Text } from "timi-web";
+import EventAPI from "@/api/EventAPI";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { EventItem, EventLimitType, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
+import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import { Message } from "@/utils/message";
+
+defineOptions({
+	name: "EventDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const currentStoreStore = useCurrentStoreStore();
+const moduleCode: ModuleCode = "GAO";
+const defaultColor = "#2f88ff";
+
+// ---------- 权限与门店 ----------
+
+const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.event.update));
+const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const storeName = computed(() => {
+	const storeId = event.value?.storeId;
+	if (!storeId) {
+		return "未绑定门店";
+	}
+	const store = currentStoreStore.storeList.find(item => item.id === storeId)
+		|| (currentStoreStore.loginStore?.id === storeId ? currentStoreStore.loginStore : undefined);
+	return store?.name || store?.code || storeId;
+});
+
+// ---------- 事件资料 ----------
+
+const event = ref<EventItem>();
+const roleOptions = ref<Role[]>([]);
+const isLoading = ref(false);
+
+async function loadStoreScope(): Promise<void> {
+	if (isGlobalManager.value) {
+		await currentStoreStore.loadStoreList();
+		return;
+	}
+	await currentStoreStore.loadLoginStore();
+}
+
+async function loadRoleOptions(): Promise<void> {
+	try {
+		roleOptions.value = await RoleAPI.manageableList(moduleCode);
+	} catch (error) {
+		console.warn("登记事件角色加载失败", error);
+		roleOptions.value = [];
+	}
+}
+
+async function loadEvent(): Promise<void> {
+	const eventId = String(route.params.id || "");
+	if (!eventId) {
+		event.value = undefined;
+		return;
+	}
+
+	event.value = undefined;
+	isLoading.value = true;
+	try {
+		await loadStoreScope();
+		const [eventResult] = await Promise.all([
+			EventAPI.detail(eventId),
+			loadRoleOptions()
+		]);
+		event.value = eventResult;
+	} catch (error) {
+		event.value = undefined;
+		console.warn("登记事件详情加载失败", error);
+		Message.error("登记事件加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+// ---------- 展示 ----------
+
+function getStatusText(status?: EventStatus): string {
+	return ({
+		DRAFT: "草稿",
+		ACTIVE: "可登记",
+		INACTIVE: "不可登记",
+		DELETED: "已删除"
+	} as Record<string, string>)[status || "ACTIVE"] || "可登记";
+}
+
+function getStatusTheme(status?: EventStatus): "default" | "primary" | "danger" {
+	if (!status || status === "ACTIVE") {
+		return "primary";
+	}
+	if (status === "DELETED") {
+		return "danger";
+	}
+	return "default";
+}
+
+function getValueTypeText(valueType?: EventValueType): string {
+	return valueType === "NUMBER" ? "携带数值" : "不携带数值";
+}
+
+function getValueUnitText(valueUnit?: EventValueUnit | null): string {
+	return valueUnit === "CENT" ? "金额（元）" : valueUnit === "COUNT" ? "次数" : "未配置单位";
+}
+
+function getLimitText(value: EventItem): string {
+	const limitValue = value.limitValue && 0 < value.limitValue ? Math.floor(value.limitValue) : 1;
+	const textMap: Record<EventLimitType, string> = {
+		NONE: "不限",
+		DAILY_HALF_DAY: `上午和下午各 ${limitValue} 次`,
+		INTERVAL_HOUR: `每隔 ${limitValue} 小时`,
+		NATURAL_DAY: `每天 ${limitValue} 次`,
+		NATURAL_MONTH: `每月 ${limitValue} 次`,
+		TOTAL_LIMIT: `事件总计 ${limitValue} 次`,
+		CUSTOMER_TOTAL_LIMIT: `单客户总计 ${limitValue} 次`
+	};
+	return textMap[value.limitType || "NONE"];
+}
+
+function getRoleName(code: string): string {
+	const role = roleOptions.value.find(item => item.code === code);
+	return role?.name || code;
+}
+
+function formatDate(timestamp?: number, emptyText = "不限"): string {
+	return timestamp === undefined || timestamp === null ? emptyText : Time.toDateTime(timestamp);
+}
+
+// ---------- 导航 ----------
+
+async function toEdit(): Promise<void> {
+	const eventId = String(route.params.id || "");
+	if (!canUpdate.value || !eventId) {
+		return;
+	}
+	await router.push({
+		name: "EventEdit",
+		params: { id: eventId },
+		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
+	});
+}
+
+watch(() => route.params.id, async () => {
+	await loadEvent();
+}, { immediate: true });
+
+onMounted(() => {
+	navBarStore.clearRight();
+	if (canUpdate.value) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.registration-event-detail {
+	gap: 1rem;
+	min-height: 100vh;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.event-header {
+		gap: .75rem;
+		margin: 0 1rem;
+		padding: 1rem;
+		display: flex;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.4rem;
+
+		.color {
+			width: 3.5rem;
+			height: 3.5rem;
+			flex: 0 0 auto;
+			border-radius: .7rem;
+		}
+
+		.header-content {
+			min-width: 0;
+			flex: 1;
+		}
+
+		.title-row {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			h2 {
+				margin: 0;
+				font-size: 1.125rem;
+			}
+		}
+
+		.description {
+			margin-top: .5rem;
+			color: var(--td-text-color-secondary);
+			line-height: 1.5;
+			word-break: break-all;
+		}
+	}
+
+	.color-note,
+	.tag-list {
+		gap: .4rem;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+	}
+
+	.color-dot {
+		width: 1rem;
+		height: 1rem;
+		border-radius: 50%;
+	}
+}
+</style>

src/pages/event/EventList.vue

@@ -14,8 +14,8 @@
 					class="item"
 					v-for="item in visibleEventList"
 					:key="item.id"
-					:arrow="canUpdateEventItem"
-					:hover="canUpdateEventItem"
+					:arrow="!!item.id"
+					:hover="!!item.id"
 					@click="toEventItem(item)"
 				>
 					<template #title>
@@ -147,14 +147,11 @@ const activeStatusTag: StatusTag = { text: "可登记", theme: "primary" };
 const notEffectiveStatusTag: StatusTag = { text: "未生效", theme: "default" };
 const expiredStatusTag: StatusTag = { text: "已过期", theme: "danger" };
 
-function toEventItem(item: EventItem): void {
-	if (!canUpdateEventItem.value) {
-		return;
-	}
+async function toEventItem(item: EventItem): Promise<void> {
 	if (!item.id) {
 		return;
 	}
-	router.push(`/management/registration-events/${item.id}/edit`);
+	await router.push(`/management/registration-events/${item.id}`);
 }
 
 // ---------- 展示文案 ----------

src/pages/point/PointLedgerDetail.vue

@@ -32,7 +32,7 @@
 					<t-cell title="事件名称" :note="triggerEvent.name || '未命名事件'" />
 					<t-cell title="事件类型" :note="getEventValueTypeText(triggerEvent)" />
 					<t-cell title="事件说明" :note="Text.display(triggerEvent.description)" />
-					<t-cell title="查看事件详情" :arrow="canUpdateEvent" :hover="canUpdateEvent" @click="toEventEdit" />
+					<t-cell title="查看事件详情" :arrow="canReadEvent" :hover="canReadEvent" @click="toEventDetail" />
 				</template>
 				<div v-else class="empty" v-text="getEventEmptyText()" />
 			</t-cell-group>
@@ -66,7 +66,7 @@
 					<t-cell title="规则优先级" :note="getPointText(hitRule.priority)" />
 					<t-cell title="命中后停止匹配" :note="hitRule.exclusive ? '是' : '否'" />
 					<t-cell title="规则备注" :note="Text.display(hitRule.remark)" />
-					<t-cell title="查看规则详情" :arrow="canUpdateRule" :hover="canUpdateRule" @click="toPointRuleEdit" />
+					<t-cell title="查看规则详情" :arrow="canReadRule" :hover="canReadRule" @click="toPointRuleDetail" />
 				</template>
 				<div v-else class="empty" v-text="getRuleEmptyText()" />
 			</t-cell-group>
@@ -103,8 +103,6 @@ const canReadCustomer = computed(() => userStore.hasPermissions(permissionCodes.
 const canReadEvent = computed(() => userStore.hasPermissions(permissionCodes.event.read));
 const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
 const canReadRule = computed(() => userStore.hasPermissions(permissionCodes.pointRule.read));
-const canUpdateEvent = computed(() => userStore.hasPermissions(permissionCodes.event.update));
-const canUpdateRule = computed(() => userStore.hasPermissions(permissionCodes.pointRule.update));
 
 // ---------- 流水与关联数据 ----------
 
@@ -356,12 +354,12 @@ async function toCustomerDetail(): Promise<void> {
 	}
 }
 
-async function toEventEdit(): Promise<void> {
-	if (!canUpdateEvent.value || !triggerEvent.value?.id) {
+async function toEventDetail(): Promise<void> {
+	if (!canReadEvent.value || !triggerEvent.value?.id) {
 		return;
 	}
 	await router.push({
-		name: "EventEdit",
+		name: "EventDetail",
 		params: { id: triggerEvent.value.id },
 		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
 	});
@@ -378,12 +376,12 @@ async function toEventRecordDetail(): Promise<void> {
 	});
 }
 
-async function toPointRuleEdit(): Promise<void> {
-	if (!canUpdateRule.value || !hitRule.value?.id) {
+async function toPointRuleDetail(): Promise<void> {
+	if (!canReadRule.value || !hitRule.value?.id) {
 		return;
 	}
 	await router.push({
-		name: "PointRuleEdit",
+		name: "PointRuleDetail",
 		params: { id: hitRule.value.id },
 		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
 	});

src/pages/point/PointRuleDetail.vue

@@ -0,0 +1,360 @@
+<template>
+	<div v-can="permissionCodes.pointRule.read" class="point-rule-detail">
+		<section v-if="rule" class="rule-header">
+			<div class="point-icon" :class="{ consume: isConsumeRule }">
+				<t-icon name="money" size="1.75rem" />
+			</div>
+			<div class="header-content">
+				<div class="title-row">
+					<h2 v-text="rule.name || '未命名规则'" />
+					<t-tag :theme="getStatusTheme(rule.status)" variant="light-outline" :content="getStatusText(rule.status)" />
+				</div>
+				<div class="point-value" v-text="rulePointText" />
+			</div>
+		</section>
+
+		<t-cell-group v-if="rule" title="基本信息" theme="card">
+			<t-cell title="所属门店" :note="storeName" />
+			<t-cell
+				title="登记事件"
+				:note="event?.name || rule.eventId || '未绑定事件'"
+				:arrow="canReadEvent && !!event?.id"
+				:hover="canReadEvent && !!event?.id"
+				@click="toEventDetail"
+			/>
+			<t-cell title="规则名称" :note="rule.name || '未命名规则'" />
+			<t-cell title="规则状态">
+				<template #note>
+					<t-tag :theme="getStatusTheme(rule.status)" variant="light-outline" :content="getStatusText(rule.status)" />
+				</template>
+			</t-cell>
+			<t-cell title="规则备注" :note="Text.display(rule.remark)" />
+		</t-cell-group>
+
+		<t-cell-group v-if="rule" title="积分配置" theme="card">
+			<t-cell title="触发类型" :note="getTriggerText(rule.triggerType)" />
+			<t-cell title="积分值模式" :note="getModeText(rule.pointMode)" />
+			<t-cell v-if="rule.pointMode === 'FIXED'" title="固定积分" :note="formatPointValue(rule.pointValue)" />
+			<t-cell v-if="rule.pointMode === 'SOURCE_VALUE'" title="自定义积分范围" :note="sourceValueRangeText" />
+			<t-cell v-if="rule.triggerType === 'AFTER_COUNT_EVERY_TIME'" title="触发阈值" :note="getThresholdText(rule)" />
+			<t-cell v-if="rule.triggerType === 'FIRST_TIME'" title="匹配范围" note="每个客户的首次登记" />
+			<t-cell v-if="rule.conditionJson?.window" title="累计窗口" :note="getWindowText(rule)" />
+			<t-cell v-if="rule.conditionJson?.sourceEventId" title="来源事件">
+				<template #note>
+					<span v-text="sourceEvent?.name || rule.conditionJson.sourceEventId" />
+				</template>
+			</t-cell>
+		</t-cell-group>
+
+		<t-cell-group v-if="tierTextList.length" title="积分分档" theme="card">
+			<t-cell v-for="(text, index) in tierTextList" :key="index" :title="`第 ${index + 1} 档`" :note="text" />
+		</t-cell-group>
+
+		<t-cell-group v-if="rule" title="其他配置" theme="card">
+			<t-cell title="规则优先级" :note="formatNumber(rule.priority)" />
+			<t-cell title="命中后停止匹配" :note="rule.exclusive ? '是' : '否'" />
+			<t-cell title="生效开始" :note="formatDate(rule.beginAt)" />
+			<t-cell title="生效结束" :note="formatDate(rule.endAt)" />
+			<t-cell title="创建时间" :note="formatDate(rule.createdAt, '未知时间')" />
+			<t-cell title="更新时间" :note="formatDate(rule.updatedAt, '未知时间')" />
+		</t-cell-group>
+
+		<t-empty v-else :description="isLoading ? '正在加载积分规则' : '积分规则不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Text, Time, useUserStore } from "timi-web";
+import EventAPI from "@/api/EventAPI";
+import PointAPI from "@/api/PointAPI";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { EventItem } from "@/types/EventItem";
+import type { PointRule, PointRuleStatus, PointRuleMode, PointRuleTriggerType } from "@/types/Point";
+import { formatEventNumberValue } from "@/utils/eventValue";
+import { Message } from "@/utils/message";
+import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+
+defineOptions({
+	name: "PointRuleDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const currentStoreStore = useCurrentStoreStore();
+
+// ---------- 权限与门店 ----------
+
+const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.update));
+const canReadEvent = computed(() => userStore.hasPermissions(permissionCodes.event.read));
+const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const storeName = computed(() => {
+	const storeId = rule.value?.storeId;
+	if (!storeId) {
+		return "未绑定门店";
+	}
+	const store = currentStoreStore.storeList.find(item => item.id === storeId)
+		|| (currentStoreStore.loginStore?.id === storeId ? currentStoreStore.loginStore : undefined);
+	return store?.name || store?.code || storeId;
+});
+
+// ---------- 规则资料 ----------
+
+const rule = ref<PointRule>();
+const event = ref<EventItem>();
+const sourceEvent = ref<EventItem>();
+const isLoading = ref(false);
+
+const condition = computed(() => rule.value?.conditionJson);
+const isConsumeRule = computed(() => (rule.value?.pointValue ?? 0) < 0);
+const rulePointText = computed(() => {
+	if (rule.value?.pointMode === "TIER") {
+		return condition.value?.tiers?.length ? `${condition.value.tiers.length} 档积分` : "分档积分";
+	}
+	if (rule.value?.pointMode === "SOURCE_VALUE") {
+		return "按登记时填写的积分变化";
+	}
+	return formatPointValue(rule.value?.pointValue);
+});
+const sourceValueRangeText = computed(() => {
+	const minText = condition.value?.min === undefined ? "不限" : formatPointValue(condition.value.min);
+	const maxText = condition.value?.max === undefined ? "不限" : formatPointValue(condition.value.max);
+	return `最小值：${minText}；最大值：${maxText}`;
+});
+const tierTextList = computed(() => (condition.value?.tiers || []).map(tier => {
+	const minText = formatEventNumberValue(sourceEvent.value, tier.min);
+	const maxText = tier.max === undefined || tier.max === null ? "以上" : formatEventNumberValue(sourceEvent.value, tier.max);
+	return `${minText}～${maxText}：${formatPointValue(tier.pointValue)}`;
+}));
+
+async function loadStoreScope(): Promise<void> {
+	if (isGlobalManager.value) {
+		await currentStoreStore.loadStoreList();
+		return;
+	}
+	await currentStoreStore.loadLoginStore();
+}
+
+async function loadOptionalEvent(eventId: string, message: string): Promise<EventItem | undefined> {
+	try {
+		return await EventAPI.detail(eventId);
+	} catch (error) {
+		console.warn(message, error);
+		return undefined;
+	}
+}
+
+async function loadRule(): Promise<void> {
+	const ruleId = String(route.params.id || "");
+	if (!ruleId) {
+		rule.value = undefined;
+		event.value = undefined;
+		sourceEvent.value = undefined;
+		return;
+	}
+
+	rule.value = undefined;
+	event.value = undefined;
+	sourceEvent.value = undefined;
+	isLoading.value = true;
+	try {
+		await loadStoreScope();
+		rule.value = await PointAPI.ruleDetail(ruleId);
+		if (!canReadEvent.value || !rule.value) {
+			return;
+		}
+
+		const eventId = rule.value.eventId || "";
+		const sourceEventId = rule.value.conditionJson?.sourceEventId || "";
+		const [eventResult, sourceEventResult] = await Promise.all([
+			eventId ? loadOptionalEvent(eventId, "积分规则登记事件加载失败") : Promise.resolve(undefined),
+			sourceEventId && sourceEventId !== eventId
+				? loadOptionalEvent(sourceEventId, "积分规则来源事件加载失败")
+				: Promise.resolve(undefined)
+		]);
+		event.value = eventResult;
+		sourceEvent.value = sourceEventResult || (sourceEventId === eventId ? eventResult : undefined);
+	} catch (error) {
+		rule.value = undefined;
+		event.value = undefined;
+		sourceEvent.value = undefined;
+		console.warn("积分规则详情加载失败", error);
+		Message.error("积分规则加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+// ---------- 展示 ----------
+
+function getStatusText(status?: PointRuleStatus): string {
+	return ({
+		DRAFT: "草稿",
+		ACTIVE: "启用",
+		INACTIVE: "停用",
+		DELETED: "已删除"
+	} as Record<string, string>)[status || ""] || "未知";
+}
+
+function getStatusTheme(status?: PointRuleStatus): "default" | "success" | "warning" | "danger" {
+	if (status === "ACTIVE") {
+		return "success";
+	}
+	if (status === "INACTIVE") {
+		return "warning";
+	}
+	if (status === "DELETED") {
+		return "danger";
+	}
+	return "default";
+}
+
+function getTriggerText(triggerType?: PointRuleTriggerType): string {
+	return ({
+		EVERY_TIME: "每次登记",
+		FIRST_TIME: "首次登记",
+		AFTER_COUNT_EVERY_TIME: "达到阈值后每次登记",
+		SOURCE_VALUE: "登记时自定义积分",
+		CUSTOMER_EVENT_VALUE_TIER: "按来源事件累计分档"
+	} as Record<string, string>)[triggerType || ""] || "未知触发类型";
+}
+
+function getModeText(pointMode?: PointRuleMode): string {
+	return ({
+		FIXED: "固定积分",
+		SOURCE_VALUE: "使用登记时填写的积分",
+		TIER: "分档积分"
+	} as Record<string, string>)[pointMode || ""] || "未知积分模式";
+}
+
+function formatPointValue(value?: number | null): string {
+	if (value === undefined || value === null) {
+		return "未配置";
+	}
+	if (value === 0) {
+		return "不产生积分流水";
+	}
+	return `${0 < value ? "发放" : "消耗"} ${Math.abs(value)} 分`;
+}
+
+function getThresholdText(value: PointRule): string {
+	const threshold = value.conditionJson?.threshold;
+	return threshold === undefined || threshold === null ? "未配置" : `${threshold} 次`;
+}
+
+function getWindowText(value: PointRule): string {
+	const window = value.conditionJson?.window;
+	if (!window) {
+		return "未配置";
+	}
+	return `${window.amount} ${window.unit === "YEAR" ? "年" : window.unit}`;
+}
+
+function formatNumber(value?: number): string {
+	return value === undefined || value === null ? "未配置" : String(value);
+}
+
+function formatDate(timestamp?: number, emptyText = "不限"): string {
+	return timestamp === undefined || timestamp === null ? emptyText : Time.toDateTime(timestamp);
+}
+
+// ---------- 导航 ----------
+
+async function toEdit(): Promise<void> {
+	const ruleId = String(route.params.id || "");
+	if (!canUpdate.value || !ruleId) {
+		return;
+	}
+	await router.push({
+		name: "PointRuleEdit",
+		params: { id: ruleId },
+		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
+	});
+}
+
+async function toEventDetail(): Promise<void> {
+	if (!canReadEvent.value || !event.value?.id) {
+		return;
+	}
+	await router.push({
+		name: "EventDetail",
+		params: { id: event.value.id },
+		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
+	});
+}
+
+watch(() => route.params.id, async () => {
+	await loadRule();
+}, { immediate: true });
+
+onMounted(() => {
+	navBarStore.clearRight();
+	if (canUpdate.value) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.point-rule-detail {
+	gap: 1rem;
+	min-height: 100vh;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.rule-header {
+		gap: .75rem;
+		margin: 0 1rem;
+		padding: 1rem;
+		display: flex;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.4rem;
+
+		.point-icon {
+			width: 3.5rem;
+			height: 3.5rem;
+			color: var(--td-success-color);
+			flex: 0 0 auto;
+			display: grid;
+			place-items: center;
+			background: rgba(34, 197, 94, .12);
+			border-radius: .7rem;
+
+			&.consume {
+				color: var(--td-error-color);
+				background: rgba(239, 68, 68, .12);
+			}
+		}
+
+		.header-content {
+			min-width: 0;
+			flex: 1;
+		}
+
+		.title-row {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			h2 {
+				margin: 0;
+				font-size: 1.125rem;
+			}
+		}
+
+		.point-value {
+			margin-top: .5rem;
+			color: var(--td-text-color-secondary);
+		}
+	}
+}
+</style>

src/pages/point/PointRuleList.vue

@@ -22,9 +22,9 @@
 					v-for="item in pageResult.list"
 					:key="item.id"
 					class="item"
-					:arrow="canUpdate"
-					:hover="canUpdate"
-					@click="toEdit(item)"
+					:arrow="!!item.id"
+					:hover="!!item.id"
+					@click="toDetail(item)"
 				>
 					<template #left-icon>
 						<div class="point" :class="{ 'consume': item.pointValue && item.pointValue < 0 }">
@@ -273,11 +273,11 @@ async function toSort(): Promise<void> {
 	await router.push("/management/points/rules/sort");
 }
 
-async function toEdit(rule: PointRule): Promise<void> {
-	if (!canUpdate.value || !rule.id) {
+async function toDetail(rule: PointRule): Promise<void> {
+	if (!rule.id) {
 		return;
 	}
-	await router.push(`/management/points/rules/${rule.id}/edit`);
+	await router.push(`/management/points/rules/${rule.id}`);
 }
 
 async function preparePage(): Promise<void> {

src/router/routes/pointRoutes.ts

@@ -4,6 +4,7 @@ import PointAccountList from "@/pages/point/PointAccountList.vue";
 import PointAdjust from "@/pages/point/PointAdjust.vue";
 import PointLedgerDetail from "@/pages/point/PointLedgerDetail.vue";
 import PointLedgerList from "@/pages/point/PointLedgerList.vue";
+import PointRuleDetail from "@/pages/point/PointRuleDetail.vue";
 import PointRuleEdit from "@/pages/point/PointRuleEdit.vue";
 import PointRuleList from "@/pages/point/PointRuleList.vue";
 import PointRuleSort from "@/pages/point/PointRuleSort.vue";
@@ -121,12 +122,26 @@ const pointRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/points/rules/:id",
+		name: "PointRuleDetail",
+		component: PointRuleDetail,
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "积分规则详情",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/points/rules/:id/edit",
 		name: "PointRuleEdit",
 		component: PointRuleEdit,
 		meta: {
-			depth: 4,
+			depth: 5,
 			navBarVisible: true,
 			navBarCanBack: true,
 			navBarTitle: "编辑积分规则",

src/router/routes/registrationRoutes.ts

@@ -1,4 +1,5 @@
 import type { RouteRecordRaw } from "vue-router";
+import EventDetail from "@/pages/event/EventDetail.vue";
 import EventEdit from "@/pages/event/EventEdit.vue";
 import eventList from "@/pages/event/EventList.vue";
 import EventSort from "@/pages/event/EventSort.vue";
@@ -50,12 +51,26 @@ const registrationRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/registration-events/:id",
+		name: "EventDetail",
+		component: EventDetail,
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "登记事件详情",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/registration-events/:id/edit",
 		name: "EventEdit",
 		component: EventEdit,
 		meta: {
-			depth: 4,
+			depth: 5,
 			navBarVisible: true,
 			navBarCanBack: true,
 			navBarTitle: "编辑登记事件",