refactor journal-detail-popup

miniprogram/components/journal-detail-panel/index.ts

@@ -1,109 +0,0 @@
-// components/journal-detail-panel/index.ts
-
-interface JournalInfo {
-	id: number;
-	date: string;
-	time: string;
-	lat?: number;
-	lng?: number;
-	location?: string;
-	idea?: string;
-	items: Array<{
-		type: number;
-		thumbURL: string;
-		sourceURL: string;
-		mongoId: string;
-	}>;
-}
-
-interface JournalDetailPanelData {
-	currentJournalIndex: number;
-}
-
-Component({
-	properties: {
-		visible: {
-			type: Boolean,
-			value: false
-		},
-		title: {
-			type: String,
-			value: ""
-		},
-		journals: {
-			type: Array,
-			value: []
-		},
-		mode: {
-			type: String,
-			value: "DATE"
-		}
-	},
-	data: <JournalDetailPanelData>{
-		currentJournalIndex: 0,
-	},
-
-	observers: {
-		'journals, visible'(journals: JournalInfo[], visible: boolean) {
-			if (visible && journals && journals.length > 0) {
-				// 显示时重置索引和 margin
-				this.setData({
-					currentJournalIndex: 0,
-				});
-			}
-		}
-	},
-
-	methods: {
-		/** 关闭详情 */
-		closeDetail() {
-			this.triggerEvent("close");
-		},
-		/** swiper 切换事件 */
-		onSwiperChange(e: WechatMiniprogram.SwiperChange) {
-			this.setData({
-				currentJournalIndex: e.detail.current
-			});
-		},
-		openLocation(e: WechatMiniprogram.BaseEvent) {
-			const { journalIndex } = e.currentTarget.dataset;
-			if (!journalIndex && this.properties.mode !== "LOCATION") {
-				return;
-			}
-			const journals = this.properties.journals as JournalInfo[];
-			const journal = journals[journalIndex || 0];
-			if (journal.lat && journal.lng) {
-				wx.openLocation({
-					latitude: journal.lat,
-					longitude: journal.lng,
-				});
-			}
-		},
-
-		/** 预览媒体 */
-		previewMedia(e: WechatMiniprogram.BaseEvent) {
-			const journals = this.properties.journals as JournalInfo[];
-			if (!journals || journals.length === 0) {
-				return;
-			}
-			const { itemIndex } = e.currentTarget.dataset;
-			const items = journals[this.data.currentJournalIndex].items;
-			const total = items.length;
-			
-			const startIndex = Math.max(0, itemIndex - 25);
-			const endIndex = Math.min(total, startIndex + 50);
-			const newCurrentIndex = itemIndex - startIndex;
-
-			const sources = items.slice(startIndex, endIndex).map((item) => {
-				return {
-					url: item.sourceURL,
-					type: item.type === 0 ? "image" : "video"
-				}
-			}) as any;
-			wx.previewMedia({
-				current: newCurrentIndex,
-				sources
-			})
-		}
-	}
-});

miniprogram/components/journal-detail-popup/index.less

@@ -12,12 +12,12 @@
 		overflow: hidden;
 		flex-direction: column;
 
-		.header {
+		> .header {
 			display: flex;
 			padding: 32rpx 32rpx 0 32rpx;
 			flex-shrink: 0;
-			margin-bottom: 24rpx;
 			align-items: flex-start;
+			margin-bottom: 24rpx;
 			justify-content: space-between;
 
 			.info {
@@ -30,13 +30,19 @@
 					font-size: 32rpx;
 					font-weight: 600;
 					align-items: center;
-					margin-bottom: 8rpx;
 
 					.icon {
 						color: var(--theme-wx);
 						font-size: 48rpx;
 						margin-right: 8rpx;
 					}
+
+					.text {
+						width: calc(100% - 90rpx);
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
 				}
 			}
 
@@ -50,9 +56,9 @@
 					color: var(--theme-wx);
 					padding: 4rpx 12rpx;
 					font-size: 24rpx;
-					font-weight: 600;
+					font-weight: bold;
-					border-radius: 12rpx;
 					background: var(--theme-bg-journal);
+					border-radius: 12rpx;
 				}
 			}
 		}
@@ -69,14 +75,24 @@
 					display: flex;
 					flex-direction: column;
 
-					.journal-header {
+					.header {
 						gap: 16rpx;
 						display: flex;
 						padding: 0 32rpx;
-						flex-wrap: wrap;
 						flex-shrink: 0;
+						align-items: center;
 						margin-bottom: 16rpx;
-						align-items: baseline;
+
+						.portfolio {
+							color: #FFF;
+							width: 52rpx;
+							padding: 4rpx 8rpx;
+							font-size: 24rpx;
+							background: var(--theme-wx);
+							text-align: center;
+							font-weight: bold;
+							border-radius: 8rpx;
+						}
 
 						.location {
 							gap: 8rpx;
@@ -95,14 +111,9 @@
 							}
 						}
 
-						.date {
+						.datetime {
-							flex: 1;
 							font-size: 28rpx;
-							font-weight: 600;
+							font-weight: bold;
-						}
-
-						.time {
-							font-size: 24rpx;
 						}
 					}
 

miniprogram/components/journal-detail-popup/index.ts

@@ -0,0 +1,146 @@
+// components/journal-detail-panel/index.ts
+import { Journal } from "../../types/Journal";
+import config from "../../config/index";
+import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
+import { MediaItem, MediaItemType } from "../../types/UI";
+import Time from "../../utils/Time";
+
+interface JournalDetailPanelData {
+	journals: Journal[];
+	currentJournalIndex: number;
+}
+
+Component({
+	properties: {
+		visible: {
+			type: Boolean,
+			value: false
+		},
+		ids: {
+			type: Array,
+			value: []
+		},
+		mode: {
+			type: String,
+			value: "DATE"
+		}
+	},
+	data: <JournalDetailPanelData>{
+		journals: [],
+		currentJournalIndex: 0,
+	},
+	observers: {
+		async 'ids, visible'(ids: number[], visible: boolean) {
+			if (visible && ids && 0 < ids.length) {
+				wx.showLoading({ title: "加载中...", mask: true });
+				try {
+					const journals: Journal[] = await new Promise((resolve, reject) => {
+						wx.request({
+							url: `${config.url}/journal/list/ids`,
+							method: "POST",
+							header: {
+								Key: wx.getStorageSync("key")
+							},
+							data: ids,
+							success: (resp: any) => {
+								if (resp.data.code === 20000) {
+									resolve(resp.data.data);
+								} else {
+									reject(new Error(resp.data.message || "加载失败"));
+								}
+							},
+							fail: reject
+						});
+					}) || [];
+					journals.forEach(journal => {
+						journal.date = Time.toPassedDate(journal.createdAt);
+						journal.time = Time.toTime(journal.createdAt);
+						journal.datetime  = Time.toPassedDateTime(journal.createdAt);
+
+						const thumbItems = journal.items?.filter((item) => item.attachType === MediaAttachType.THUMB);
+						if (!thumbItems) {
+							return;
+						}
+						const mediaItems: MediaItem[] = thumbItems.map((thumbItem) => {
+							const ext = thumbItem.ext = JSON.parse(thumbItem.ext!.toString()) as MediaAttachExt;
+							const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
+							const sourceURL = `${config.url}/attachment/read/${ext.sourceMongoId}`;
+							return {
+								type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
+								thumbURL,
+								sourceURL,
+								size: thumbItem.size || 0,
+								attachmentId: thumbItem.id
+							} as MediaItem;
+						});
+						journal.mediaItems = mediaItems;
+					})
+					this.setData({
+						journals,
+						currentJournalIndex: 0,
+					});
+					wx.hideLoading();
+				} catch (err: any) {
+					wx.hideLoading();
+					wx.showToast({
+						title: err.message || "加载失败",
+						icon: "error"
+					});
+				}
+			}
+		}
+	},
+
+	methods: {
+		/** 关闭详情 */
+		closeDetail() {
+			this.triggerEvent("close");
+		},
+		/** swiper 切换事件 */
+		onSwiperChange(e: WechatMiniprogram.SwiperChange) {
+			this.setData({
+				currentJournalIndex: e.detail.current
+			});
+		},
+		/** 打开位置 */
+		openLocation(e: WechatMiniprogram.BaseEvent) {
+			const { journalIndex } = e.currentTarget.dataset;
+			if (!journalIndex && this.properties.mode !== "LOCATION") {
+				return;
+			}
+			const journals = this.properties.journals as Journal[];
+			const journal = journals[journalIndex || 0];
+			if (journal.lat && journal.lng) {
+				wx.openLocation({
+					latitude: journal.lat,
+					longitude: journal.lng,
+				});
+			}
+		},
+		/** 预览媒体 */
+		previewMedia(e: WechatMiniprogram.BaseEvent) {
+			const journals = this.properties.journals as Journal[];
+			if (!journals || journals.length === 0) {
+				return;
+			}
+			const { itemIndex } = e.currentTarget.dataset;
+			const items = journals[this.data.currentJournalIndex].mediaItems!;
+			const total = items.length;
+			
+			const startIndex = Math.max(0, itemIndex - 25);
+			const endIndex = Math.min(total, startIndex + 50);
+			const newCurrentIndex = itemIndex - startIndex;
+
+			const sources = items.slice(startIndex, endIndex).map((item) => {
+				return {
+					url: item.sourceURL,
+					type: item.type === 0 ? "image" : "video"
+				}
+			}) as any;
+			wx.previewMedia({
+				current: newCurrentIndex,
+				sources
+			})
+		}
+	}
+});

miniprogram/components/journal-detail-popup/index.wxml

@@ -9,10 +9,11 @@
 		<view class="detail-content">
 			<view class="header">
 				<view class="info">
-					<view wx:if="{{title}}" class="title" catchtap="openLocation">
+					<view wx:if="{{mode === 'LOCATION'}}" class="title" catchtap="openLocation">
 						<t-icon wx:if="{{mode === 'LOCATION'}}" class="icon" name="location-filled" />
-						<text>{{title}}</text>
+						<text class="text">{{journals[currentJournalIndex].location}}</text>
 					</view>
+					<text wx:if="{{mode === 'DATE'}}" class="title">{{journals[currentJournalIndex].datetime}}</text>
 				</view>
 				<view class="actions">
 					<view wx:if="{{journals.length > 1}}" class="indicator">
@@ -25,7 +26,8 @@
 				<block wx:for="{{journals}}" wx:key="id">
 					<swiper-item class="swiper-item-wrapper">
 						<view class="journal-item">
-							<view class="journal-header">
+							<view class="header">
+								<view wx:if="{{item.type === 'PORTFOLIO'}}" class="portfolio">专拍</view>
 								<view
 									wx:if="{{item.location && mode === 'DATE'}}"
 									class="location"
@@ -35,13 +37,13 @@
 									<t-icon class="icon" name="location-filled" />
 									<text class="text">{{item.location}}</text>
 								</view>
-								<view wx:if="{{mode === 'LOCATION'}}" class="date">{{item.date}}</view>
+								<view wx:if="{{mode === 'LOCATION'}}" class="datetime">{{item.datetime}}</view>
 							</view>
 							<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
-							<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
+							<scroll-view wx:if="{{item.mediaItems && item.mediaItems.length > 0}}" scroll-y class="items-scroll">
 								<view class="items">
 									<view class="wrapper">
-										<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
+										<block wx:for="{{item.mediaItems}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
 											<image
 												class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
 												src="{{media.thumbURL}}"

miniprogram/pages/main/journal-date/index.json

@@ -1,8 +1,8 @@
 {
 	"usingComponents": {
-		"t-navbar": "tdesign-miniprogram/navbar/navbar",
 		"calendar": "/components/calendar/index",
-		"journal-detail-panel": "/components/journal-detail-panel/index"
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"journal-detail-popup": "/components/journal-detail-popup/index"
 	},
 	"navigationStyle": "custom"
 }

miniprogram/pages/main/journal-date/index.ts

@@ -1,49 +1,28 @@
 // pages/main/journal-date/index.ts
 import config from "../../../config/index";
-import Time from "../../../utils/Time";
 import { Journal, JournalPageType } from "../../../types/Journal";
-import { MediaAttachType } from "../../../types/Attachment";
+import Time from "../../../utils/Time";
-
-interface JournalInfo {
-	id: number;
-	date: string;
-	time: string;
-	lat?: number;
-	lng?: number;
-	location?: string;
-	idea?: string;
-	items: Array<{
-		type: number;
-		thumbURL: string;
-		sourceURL: string;
-		mongoId: string;
-	}>;
-}
-
-interface SelectedDateInfo {
-	displayDate: string;
-	journals: JournalInfo[];
-}
 
 interface JournalDateData {
-	journalMap: Record<string, number[]>; // 存储每个日期的日记 id 列表
+	// 存储每个日期的日记 id 列表
-	selectedDate: SelectedDateInfo | null;
 	isLoading: boolean;
-	popupVisible: boolean; // popup 显示状态
+	journalMap: Record<string, number[]>;
+
+	popupIds: number[];
+	popupVisible: boolean;
 }
 
 Page({
 	data: <JournalDateData>{
-		journalMap: {},
-		selectedDate: null,
 		isLoading: true,
-		popupVisible: false
+		journalMap: {},
-	},
 
+		popupIds: [],
+		popupVisible: false,
+	},
 	async onLoad() {
 		await this.loadJournals();
 	},
-
 	/** 加载所有日记 */
 	async loadJournals() {
 		this.setData({ isLoading: true });
@@ -70,24 +49,19 @@ Page({
 					fail: reject
 				});
 			}) || [];
-
 			// 按日期分组，只存储 id
 			const journalMap: Record<string, number[]> = {};
 			list.forEach((journal: any) => {
-				const date = new Date(journal.createdAt);
+				const dateKey = Time.toDate(journal.createdAt);
-				const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-
 				if (!journalMap[dateKey]) {
 					journalMap[dateKey] = [];
 				}
 				journalMap[dateKey].push(journal.id);
 			});
-
 			// 按 id 倒序排序每天的日记
 			Object.keys(journalMap).forEach(dateKey => {
 				journalMap[dateKey].sort((a, b) => b - a);
 			});
-
 			this.setData({
 				journalMap,
 				isLoading: false
@@ -100,12 +74,10 @@ Page({
 			this.setData({ isLoading: false });
 		}
 	},
-
 	/** 日期选择事件（来自 calendar 组件） */
 	onDateSelect(e: WechatMiniprogram.CustomEvent) {
-		const { date, year, month, day } = e.detail;
+		const { date } = e.detail;
 		const journalIds = this.data.journalMap[date];
-
 		if (!journalIds || journalIds.length === 0) {
 			wx.showToast({
 				title: "该日期无日记",
@@ -113,81 +85,22 @@ Page({
 			});
 			return;
 		}
-
 		// 调用接口获取详情
-		this.loadJournalsByIds(journalIds, `${year} 年 ${month} 月 ${day} 日`);
+		this.loadJournalsByIds(journalIds);
 	},
 	/** 根据 id 列表加载日记详情 */
-	async loadJournalsByIds(ids: number[], displayDate: string) {
+	async loadJournalsByIds(ids: number[]) {
-		wx.showLoading({ title: "加载中...", mask: true });
+		this.setData({
-		try {
+			popupIds: ids,
-			const list: Journal[] = await new Promise((resolve, reject) => {
+			popupVisible: true
-				wx.request({
+		});
-					url: `${config.url}/journal/list/ids`,
+		wx.hideLoading();
-					method: "POST",
-					header: {
-						Key: wx.getStorageSync("key")
-					},
-					data: ids,
-					success: (resp: any) => {
-						if (resp.data.code === 20000) {
-							resolve(resp.data.data);
-						} else {
-							reject(new Error(resp.data.message || "加载失败"));
-						}
-					},
-					fail: reject
-				});
-			}) || [];
-
-			// 转换为 JournalInfo 格式
-			const journals: JournalInfo[] = list.sort((a, b) => a.createdAt! - b.createdAt!).map((journal: any) => {
-				const date = new Date(journal.createdAt);
-				return {
-					id: journal.id,
-					date: Time.toPassedDateTime(journal.createdAt),
-					time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
-					lat: journal.lat,
-					lng: journal.lng,
-					location: journal.location,
-					idea: journal.idea,
-					items: journal.items
-						.filter((item: any) => item.attachType === MediaAttachType.THUMB)
-						.map((item: any) => {
-							const ext = JSON.parse(item.ext);
-							return {
-								type: ext.isVideo ? 1 : 0,
-								thumbURL: `${config.url}/attachment/read/${item.mongoId}`,
-								sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
-								mongoId: item.mongoId,
-							};
-						})
-				};
-			});
-
-			this.setData({
-				selectedDate: {
-					displayDate,
-					journals
-				},
-				popupVisible: true // 显示 popup
-			});
-
-			wx.hideLoading();
-		} catch (err: any) {
-			wx.hideLoading();
-			wx.showToast({
-				title: err.message || "加载失败",
-				icon: "error"
-			});
-		}
 	},
-
 	/** 关闭详情 */
 	closeDetail() {
 		this.setData({
 			popupVisible: false,
-			selectedDate: null
+			popupIds: []
 		});
 	}
 });

miniprogram/pages/main/journal-date/index.wxml

@@ -9,10 +9,9 @@
 	</view>
 </view>
 <!-- 详情面板 -->
-<journal-detail-panel
+<journal-detail-popup
 	visible="{{popupVisible}}"
-	title="{{selectedDate.displayDate}}"
+	ids="{{popupIds}}"
-	journals="{{selectedDate.journals}}"
 	mode="DATE"
 	bind:close="closeDetail"
 />

miniprogram/pages/main/journal-map/index.json

@@ -1,7 +1,7 @@
 {
 	"usingComponents": {
 		"t-navbar": "tdesign-miniprogram/navbar/navbar",
-		"journal-detail-panel": "/components/journal-detail-panel/index"
+		"journal-detail-popup": "/components/journal-detail-popup/index"
 	},
 	"navigationStyle": "custom"
 }

miniprogram/pages/main/journal-map/index.ts

@@ -2,7 +2,6 @@
 import config from "../../../config/index";
 import Time from "../../../utils/Time";
 import { Journal, JournalPageType } from "../../../types/Journal";
-import { MediaAttachType } from "../../../types/Attachment";
 import Toolkit from "../../../utils/Toolkit";
 
 interface MapMarker {
@@ -18,20 +17,6 @@ interface MapMarker {
 	};
 }
 
-interface JournalInfo {
-	id: number;
-	date: string;
-	time: string;
-	location?: string;
-	idea?: string;
-	items: Array<{
-		type: number;
-		thumbURL: string;
-		sourceURL: string;
-		mongoId: string;
-	}>;
-}
-
 interface LocationMarker {
 	locationKey: string; // 位置键 "lat,lng"
 	lat: number;
@@ -43,11 +28,6 @@ interface LocationMarker {
 	previewThumb?: string; // 预览缩略图
 }
 
-interface SelectedLocationInfo {
-	location?: string;
-	journals: JournalInfo[];
-}
-
 interface JournalMapData {
 	centerLat: number;
 	centerLng: number;
@@ -56,9 +36,8 @@ interface JournalMapData {
 	locations: LocationMarker[]; // 位置标记列表
 	customCalloutMarkerIds: string[]; // 改为 string[] 以支持 locationKey
 	includePoints: Array<{ latitude: number; longitude: number }>; // 缩放视野以包含所有点
-	selectedLocation: SelectedLocationInfo | null; // 选中的位置信息
+	popupIds: number[];
-	showDetail: boolean; // 是否显示详情（控制 DOM 存在）
+	popupVisible: boolean;
-	detailVisible: boolean; // 详情是否可见（控制动画）
 	isLoading: boolean;
 }
 
@@ -72,8 +51,8 @@ Page({
 		customCalloutMarkerIds: [],
 		includePoints: [],
 		selectedLocation: null,
-		showDetail: false,
+		popupIds: [],
-		detailVisible: false,
+		popupVisible: false,
 		isLoading: true,
 	},
 	async onLoad() {
@@ -105,10 +84,8 @@ Page({
 					fail: reject
 				});
 			}) || [];
-
 			// 过滤有位置信息的记录，并按位置分组
 			const locationMap = new Map<string, LocationMarker>();
-
 			list.filter((journal: any) => journal.lat && journal.lng).forEach((journal: any) => {
 				// 保留 6 位小数作为位置键，约等于 0.1 米精度
 				const lat = Number(journal.lat.toFixed(6));
@@ -116,7 +93,6 @@ Page({
 				const locationKey = `${lat},${lng}`;
 
 				if (!locationMap.has(locationKey)) {
-					// 获取第一个有缩略图的日记
 					const thumbItem = journal.items.find((item: any) => item.attachType === "THUMB");
 					locationMap.set(locationKey, {
 						locationKey,
@@ -129,7 +105,6 @@ Page({
 						previewThumb: thumbItem ? `${config.url}/attachment/read/${thumbItem.mongoId}` : undefined
 					});
 				}
-
 				const marker = locationMap.get(locationKey)!;
 				marker.journalIds.push(journal.id);
 				marker.count++;
@@ -141,9 +116,7 @@ Page({
 					}
 				}
 			});
-
 			const locations = Array.from(locationMap.values());
-
 			if (locations.length === 0) {
 				wx.showToast({
 					title: "暂无位置记录",
@@ -152,7 +125,6 @@ Page({
 				this.setData({ isLoading: false });
 				return;
 			}
-
 			// 生成地图标记
 			const markers: MapMarker[] = locations.map((location, index) => ({
 				id: index,
@@ -162,11 +134,11 @@ Page({
 				height: 30,
 				customCallout: {
 					anchorY: -2,
-					anchorX: 0,
+					// 随机错位避免近距离重叠
+					anchorX: Toolkit.random(-10, 10),
 					display: "ALWAYS"
 				}
 			}));
-
 			// 所有标记的 locationKey 列表
 			const customCalloutMarkerIds = locations.map(l => l.locationKey);
 			// 计算中心点（所有标记的平均位置）
@@ -177,7 +149,6 @@ Page({
 				latitude: l.lat,
 				longitude: l.lng
 			}));
-
 			this.setData({
 				locations,
 				markers,
@@ -208,81 +179,18 @@ Page({
 	/** 加载位置详情（该位置的所有日记） */
 	async loadLocationDetail(markerId: number) {
 		const location = this.data.locations[markerId];
-		if (!location) return;
+		if (!location) {
-
+			return;
-		wx.showLoading({ title: "加载中...", mask: true });
-		try {
-			// 根据 journalIds 加载日记详情
-			const list: Journal[] = await new Promise((resolve, reject) => {
-				wx.request({
-					url: `${config.url}/journal/list/ids`,
-					method: "POST",
-					header: {
-						Key: wx.getStorageSync("key")
-					},
-					data: location.journalIds,
-					success: (resp: any) => {
-						if (resp.data.code === 20000) {
-							resolve(resp.data.data);
-						} else {
-							reject(new Error(resp.data.message || "加载失败"));
-						}
-					},
-					fail: reject
-				});
-			}) || [];
-
-			// 转换为 JournalInfo 格式
-			const journals: JournalInfo[] = list.map((journal: any) => {
-				const date = new Date(journal.createdAt);
-				return {
-					id: journal.id,
-					date: Time.toPassedDateTime(journal.createdAt),
-					time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
-					lat: journal.lat,
-					lng: journal.lng,
-					location: journal.location,
-					idea: journal.idea,
-					items: journal.items
-						.filter((item: any) => item.attachType === MediaAttachType.THUMB)
-						.map((item: any) => {
-							const ext = JSON.parse(item.ext);
-							return {
-								type: ext.isVideo ? 1 : 0,
-								thumbURL: `${config.url}/attachment/read/${item.mongoId}`,
-								sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
-								mongoId: item.mongoId,
-							};
-						})
-				};
-			});
-
-			// 先显示元素，再触发动画
-			this.setData({
-				selectedLocation: {
-					location: location.location,
-					journals
-				},
-				showDetail: true
-			});
-			wx.nextTick(() => {
-				this.setData({ detailVisible: true });
-			});
-			wx.hideLoading();
-		} catch (err: any) {
-			wx.hideLoading();
-			wx.showToast({
-				title: err.message || "加载失败",
-				icon: "error"
-			});
 		}
+		this.setData({
+			popupIds: location.journalIds,
+			popupVisible: true
+		});
 	},
 	/** 关闭详情 */
 	async closeDetail() {
-		this.setData({ detailVisible: false });
-		await Toolkit.sleep(350);
 		this.setData({
-			showDetail: false,
+			popupVisible: false,
 			selectedLocation: null
 		});
 	},

miniprogram/pages/main/journal-map/index.wxml

@@ -37,10 +37,9 @@
 	</view>
 </view>
 <!-- 详情面板 -->
-<journal-detail-panel
+<journal-detail-popup
-	visible="{{showDetail && detailVisible}}"
+	visible="{{popupVisible}}"
-	title="{{selectedLocation.location}}"
+	ids="{{popupIds}}"
-	journals="{{selectedLocation.journals}}"
 	mode="LOCATION"
 	bind:close="closeDetail"
 />

miniprogram/types/Journal.ts

@@ -1,5 +1,6 @@
 import { Attachment } from "./Attachment";
 import { Model, QueryPage } from "./Model";
+import { MediaItem } from "./UI";
 
 /** 日记 */
 export type Journal = {
@@ -22,8 +23,22 @@ export type Journal = {
 	/** 天气 */
 	weatcher?: string;
 
+	// ---------- 以下为 VO 字段 ----------
+
+	/** 日期 */
+	date?: string;
+
+	/** 时间 */
+	time?: string;
+
+	/** 时间 */
+	datetime?: string;
+
 	/** 附件（照片、视频等） */
 	items?: Attachment[];
+
+	/** 媒体项（由附件转） */
+	mediaItems?: MediaItem[];
 } & Model;
 
 /** 日记类型 */

miniprogram/types/UI.ts

@@ -2,6 +2,8 @@
 /** 系统媒体项目 */
 export type MediaItem = {
 
+	journalId?: number;
+
 	/** 类型 */
 	type: MediaItemType;