fix media item sort

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

@@ -131,17 +131,19 @@
 						height: 100%;
 
 						.items {
+							gap: 8rpx;
+							display: flex;
 							padding: 0 32rpx 128rpx 32rpx;
-							
-							.wrapper {
-								column-gap: 8rpx;
-								column-count: 3;
-								padding-bottom: 128rpx;
+							align-items: flex-start;
+
+							.column {
+								flex: 1;
+								display: flex;
+								flex-direction: column;
 
 								.item {
 									overflow: hidden;
 									background: var(--theme-bg-card);
-									break-inside: avoid;
 									margin-bottom: 8rpx;
 
 									&.thumbnail {

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

@@ -1,7 +1,8 @@
 // components/journal-detail-panel/index.ts
 import { Journal } from "../../types/Journal";
 import config from "../../config/index";
-import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
+import Toolkit from "../../utils/Toolkit";
+import { ImageMetadata, MediaAttachExt, MediaAttachType } from "../../types/Attachment";
 import { MediaItem, MediaItemType } from "../../types/UI";
 import Time from "../../utils/Time";
 
@@ -61,7 +62,8 @@ Component({
 						if (!thumbItems) {
 							return;
 						}
-						const mediaItems: MediaItem[] = thumbItems.map((thumbItem) => {
+						const mediaItems: MediaItem[] = thumbItems.map((thumbItem, index) => {
+							const metadata = thumbItem.metadata as ImageMetadata;
 							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}`;
@@ -70,10 +72,21 @@ Component({
 								thumbURL,
 								sourceURL,
 								size: thumbItem.size || 0,
-								attachmentId: thumbItem.id
+								attachmentId: thumbItem.id,
+								width: metadata.width,
+								height: metadata.height,
+								originalIndex: index
 							} as MediaItem;
 						});
 						journal.mediaItems = mediaItems;
+						// 为每个 journal 添加分列后的 mediaItems
+						(journal as any).columnedMediaItems = Toolkit.splitItemsIntoColumns(mediaItems, 3, (item) => {
+							// 计算相对高度：如果有宽高信息，使用宽高比；否则假设为正方形
+							if (item.width && item.height && 0 < item.width) {
+								return item.height / item.width;
+							}
+							return 1; // 默认正方形
+						});
 					})
 					this.setData({
 						journals,
@@ -119,14 +132,15 @@ Component({
 		},
 		/** 预览媒体 */
 		previewMedia(e: WechatMiniprogram.BaseEvent) {
-			const journals = this.properties.journals as Journal[];
+			const journals = this.data.journals;
 			if (!journals || journals.length === 0) {
 				return;
 			}
 			const { itemIndex } = e.currentTarget.dataset;
-			const items = journals[this.data.currentJournalIndex].mediaItems!;
+			const journal = journals[this.data.currentJournalIndex];
+			const items = journal.mediaItems!;
 			const total = items.length;
-			
+
 			const startIndex = Math.max(0, itemIndex - 25);
 			const endIndex = Math.min(total, startIndex + 50);
 			const newCurrentIndex = itemIndex - startIndex;
@@ -134,7 +148,7 @@ Component({
 			const sources = items.slice(startIndex, endIndex).map((item) => {
 				return {
 					url: item.sourceURL,
-					type: item.type === 0 ? "image" : "video"
+					type: item.type === MediaItemType.IMAGE ? "image" : "video"
 				}
 			}) as any;
 			wx.previewMedia({

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

@@ -40,16 +40,16 @@
 								<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.mediaItems && item.mediaItems.length > 0}}" scroll-y class="items-scroll">
+							<scroll-view wx:if="{{item.columnedMediaItems && item.columnedMediaItems.length > 0}}" scroll-y class="items-scroll">
 								<view class="items">
-									<view class="wrapper">
-										<block wx:for="{{item.mediaItems}}" wx:key="mongoId" wx:for-item="media" wx:for-index="itemIndex">
+									<view wx:for="{{item.columnedMediaItems}}" wx:for-item="column" wx:for-index="columnIndex" wx:key="columnIndex" class="column">
+										<block wx:for="{{column}}" wx:key="attachmentId" wx:for-item="media" wx:for-index="itemIndex">
 											<image
 												class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
 												src="{{media.thumbURL}}"
 												mode="widthFix"
 												catchtap="previewMedia"
-												data-item-index="{{itemIndex}}"
+												data-item-index="{{media.originalIndex}}"
 											/>
 										</block>
 									</view>