timi/gaoYuJournal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix media item sort

Browse Source
This commit is contained in:
Timi
2025-12-11 19:21:41 +08:00
parent f837c4d4d9
commit c0a0242a02
10 changed files with 201 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
miniprogram/components/journal-detail-popup/index.less
View File

@ -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 {

28
miniprogram/components/journal-detail-popup/index.ts
View File

@ -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({

8
miniprogram/components/journal-detail-popup/index.wxml
View File

@ -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>

58
miniprogram/pages/main/journal/index.less
View File

@ -78,37 +78,43 @@
}
.items {
column-gap: .25rem;
column-count: 3;
gap: .25rem;
display: flex;
padding-bottom: 2rem;
align-items: flex-start;
.item {
overflow: hidden;
background: var(--theme-bg-card);
break-inside: avoid;
margin-bottom: .25rem;
.column {
flex: 1;
display: flex;
flex-direction: column;
&.thumbnail {
width: 100%;
display: block;
}
.item {
overflow: hidden;
background: var(--theme-bg-card);
margin-bottom: .25rem;
&.video {
height: auto;
position: relative;
&.thumbnail {
width: 100%;
display: block;
}
&::after {
content: "";
top: 50%;
left: 53%;
width: 0;
height: 0;
position: absolute;
transform: translate(-50%, -50%);
border-top: 16px solid transparent;
border-left: 24px solid var(--theme-video-play);
border-bottom: 16px solid transparent;
pointer-events: none;
&.video {
height: auto;
position: relative;
&::after {
content: "";
top: 50%;
left: 53%;
width: 0;
height: 0;
position: absolute;
transform: translate(-50%, -50%);
border-top: 16px solid transparent;
border-left: 24px solid var(--theme-video-play);
border-bottom: 16px solid transparent;
pointer-events: none;
}
}
}
}

86
miniprogram/pages/main/journal/index.ts
View File

@ -3,27 +3,11 @@
import Time from "../../../utils/Time";
import config from "../../../config/index"
import Events from "../../../utils/Events";
import { JournalPage, JournalPageType } from "../../../types/Journal";
import { OrderType } from "../../../types/Model";
export type Journal = {
date: string;
location?: string;
lat?: number;
lng?: number;
idea?: string;
items: JournalItem[]
}
export type JournalItem = {
type: JournalItemType;
mongoId: string;
}
export enum JournalItemType {
IMAGE,
VIDEO
}
import Toolkit from "../../../utils/Toolkit";
import { Journal, JournalPage, JournalPageType } from "../../../types/Journal";
import { OrderType, QueryPageResult } from "../../../types/Model";
import { ImageMetadata, MediaAttachExt } from "../../../types/Attachment";
import { MediaItem, MediaItemType } from "../../../types/UI";
interface JournalData {
page: JournalPage;
@ -174,30 +158,41 @@ Page({
},
data: this.data.page,
success: async (resp: any) => {
const list = resp.data.data.list;
const pageResult = resp.data.data as QueryPageResult<Journal>;
const list = pageResult.list;
if (!list || list.length === 0) {
this.setData({
isFinished: true
})
return;
}
const result = list.map((journal: any) => {
return {
date: Time.toPassedDateTime(journal.createdAt),
idea: journal.idea,
lat: journal.lat,
lng: journal.lng,
location: journal.location,
items: journal.items.filter((item: any) => item.attachType === "THUMB").map((item: any) => {
const ext = JSON.parse(item.ext);
return {
type: ext.isVideo ? JournalItemType.VIDEO : JournalItemType.IMAGE,
thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
mongoId: item.mongoId,
source: journal.items.find((source: any) => source.id === ext.sourceId)
}
})
}
list.forEach(journal => {
const mediaItems = journal.items!.filter((item) => item.attachType === "THUMB").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}`;
return {
type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
thumbURL,
sourceURL,
size: thumbItem.size || 0,
attachmentId: thumbItem.id,
width: metadata.width,
height: metadata.height,
originalIndex: index
} as MediaItem;
});
journal.date = Time.toDate(journal.createdAt);
journal.time = Time.toTime(journal.createdAt);
journal.datetime = Time.toPassedDateTime(journal.createdAt);
journal.mediaItems = mediaItems;
journal.columnedItems = Toolkit.splitItemsIntoColumns(mediaItems, 3, (item) => {
if (item.width && item.height && 0 < item.width) {
return item.height / item.width;
}
return 1;
})
})
this.setData({
page: {
@ -211,7 +206,7 @@ Page({
createdAt: OrderType.DESC
}
},
list: this.data.list.concat(result),
list: this.data.list.concat(list),
isFinished: list.length < this.data.page.size
});
},
@ -224,17 +219,18 @@ Page({
},
preview(e: WechatMiniprogram.BaseEvent) {
const { journalIndex, itemIndex } = e.currentTarget.dataset;
const items = this.data.list[journalIndex].items;
const journal = this.data.list[journalIndex];
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;
const sources = items.slice(startIndex, endIndex).map((item: any) => {
const sources = items.slice(startIndex, endIndex).map((item) => {
return {
url: `${config.url}/attachment/read/${item.source.mongoId}`,
type: item.type === 0 ? "image" : "video"
url: item.sourceURL,
type: item.type === MediaItemType.IMAGE ? "image" : "video"
}
}) as any;
wx.previewMedia({

24
miniprogram/pages/main/journal/index.wxml
View File

@ -37,17 +37,19 @@
<text class="text">{{journal.location}}</text>
</view>
</view>
<view wx:if="{{journal.items}}" class="items">
<block wx:for="{{journal.items}}" wx:for-item="item" wx:for-index="itemIndex" wx:key="date">
<image
class="item thumbnail {{item.type === 0 ? 'image' : 'video'}}"
src="{{item.thumbUrl}}"
mode="widthFix"
bindtap="preview"
data-item-index="{{itemIndex}}"
data-journal-index="{{journalIndex}}"
></image>
</block>
<view wx:if="{{journal.columnedItems}}" class="items">
<view wx:for="{{journal.columnedItems}}" wx:for-item="column" wx:for-index="columnIndex" wx:key="columnIndex" class="column">
<block wx:for="{{column}}" wx:for-item="item" wx:for-index="itemIndex" wx:key="attachmentId">
<image
class="item thumbnail {{item.type === 0 ? 'image' : 'video'}}"
src="{{item.thumbURL}}"
mode="widthFix"
bindtap="preview"
data-item-index="{{item.originalIndex}}"
data-journal-index="{{journalIndex}}"
></image>
</block>
</view>
</view>
</view>
<view wx:if="{{isFinished}}" class="start">已回到最初的起点</view>

20
miniprogram/types/Attachment.ts
View File

@ -15,6 +15,10 @@ export type Attachment = {
/** 文件名 */
name: string;
mimeType?: string;
metadata?: string | ImageMetadata;
/** 文件 MD5 */
md5: string;
@ -38,6 +42,16 @@ export enum MediaAttachType {
THUMB = "THUMB"
}
/** 图片附件元数据 */
export type ImageMetadata = {
/** 宽度 */
width: number;
/** 高度 */
height: number;
}
/** 媒体附件扩展数据 */
export type MediaAttachExt = {
@ -52,4 +66,10 @@ export type MediaAttachExt = {
/** true 为视频 */
isVideo: boolean;
/** 原图宽度（像素） */
width?: number;
/** 原图高度（像素） */
height?: number;
}

5
miniprogram/types/Journal.ts
View File

@ -31,11 +31,14 @@ export type Journal = {
/** 时间 */
time?: string;
/** 时间 */
/** 详细时间 */
datetime?: string;
/** 附件（照片、视频等） */
items?: Attachment[];
/** 分列后的 items，用于瀑布流展示 */
columnedItems?: MediaItem[][];
/** 媒体项（由附件转） */
mediaItems?: MediaItem[];

9
miniprogram/types/UI.ts
View File

@ -18,6 +18,15 @@ export type MediaItem = {
/** 附件 ID */
attachmentId: number;
/** 原图宽度 */
width?: number;
/** 原图高度 */
height?: number;
/** 原始索引（用于预览时定位） */
originalIndex?: number;
}
/** 微信媒体项目 */

50
miniprogram/utils/Toolkit.ts
View File

@ -220,10 +220,58 @@ export default class Toolkit {
public static symmetricDiff(arr1: any[], arr2: any[]) {
const set1 = new Set(arr1);
const set2 = new Set(arr2);
return [
...arr1.filter(item => !set2.has(item)),
...arr2.filter(item => !set1.has(item))
];
}
/**
* 将数组元素分配到指定数量的列中
*
* - 如果提供 getHeight 函数：使用贪心算法，每次将元素放到当前高度最小的列（适合瀑布流布局）
* - 如果不提供 getHeight：使用轮询方式分配（第 1、4、7... 个到列 1，第 2、5、8... 个到列 2）
*
* @param items 原始数组
* @param columnCount 列数，默认 3
* @param getHeight 可选的高度获取函数，用于计算每个元素的高度
* @returns 分列后的二维数组
*
* @example
* // 简单轮询分配
* splitItemsIntoColumns([1, 2, 3, 4, 5, 6], 3)
* // => [[1, 4], [2, 5], [3, 6]]
*
* @example
* // 基于高度的贪心分配
* const items = [{ h: 100 }, { h: 200 }, { h: 150 }]
* splitItemsIntoColumns(items, 2, item => item.h)
* // => [[ { h: 100 }, { h: 150 }], [{ h: 200 }]]
*/
public static splitItemsIntoColumns<T>(
items: T[],
columnCount = 3,
getHeight?: (item: T) => number
): T[][] {
const columns: T[][] = Array.from({ length: columnCount }, () => []);
if (!getHeight) {
// 降级为轮询分配
items.forEach((item, index) => {
columns[index % columnCount].push(item);
});
} else {
// 使用贪心算法：总是放到当前高度最小的列
const columnHeights = Array(columnCount).fill(0);
items.forEach((item) => {
// 找到高度最小的列
const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
columns[minHeightIndex].push(item);
columnHeights[minHeightIndex] += getHeight(item);
});
}
return columns;
}
}