refactor journal-detail-popup

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";
-
-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[];
-}
+import Time from "../../../utils/Time";
 
 interface JournalDateData {
-	journalMap: Record<string, number[]>; // 存储每个日期的日记 id 列表
-	selectedDate: SelectedDateInfo | null;
+	// 存储每个日期的日记 id 列表
 	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 = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-
+				const dateKey = Time.toDate(journal.createdAt);
 				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) {
-		wx.showLoading({ title: "加载中...", mask: true });
-		try {
-			const list: 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
-				});
-			}) || [];
-
-			// 转换为 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"
-			});
-		}
+	async loadJournalsByIds(ids: number[]) {
+		this.setData({
+			popupIds: ids,
+			popupVisible: true
+		});
+		wx.hideLoading();
 	},
-
 	/** 关闭详情 */
 	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}}"
-	journals="{{selectedDate.journals}}"
+	ids="{{popupIds}}"
 	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; // 选中的位置信息
-	showDetail: boolean; // 是否显示详情（控制 DOM 存在）
-	detailVisible: boolean; // 详情是否可见（控制动画）
+	popupIds: number[];
+	popupVisible: boolean;
 	isLoading: boolean;
 }
 
@@ -72,8 +51,8 @@ Page({
 		customCalloutMarkerIds: [],
 		includePoints: [],
 		selectedLocation: null,
-		showDetail: false,
-		detailVisible: false,
+		popupIds: [],
+		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;
-
-		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"
-			});
+		if (!location) {
+			return;
 		}
+		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
-	visible="{{showDetail && detailVisible}}"
-	title="{{selectedLocation.location}}"
-	journals="{{selectedLocation.journals}}"
+<journal-detail-popup
+	visible="{{popupVisible}}"
+	ids="{{popupIds}}"
 	mode="LOCATION"
 	bind:close="closeDetail"
 />