chore: 重写初始提交(清空历史,整理后全量提交)

2026-08-16 16:54:14 +08:00
commit 6c1a106bc1
1808 changed files with 238144 additions and 0 deletions
@@ -0,0 +1,219 @@
+<template>
+	<view class="card-panel">
+		<view class="card-panel-header">
+			<image :src="itemData?.avatar ?? '/static/logo.png'" class="dynamic-card-avatar" alt="用户头像" />
+			<view class="dynamic-card-user-info">
+				<text class="dynamic-card-username">{{ itemData.nickname }}</text>
+				<text class="dynamic-post-time">{{ formatTime(itemData.createTime) }}</text>
+			</view>
+		</view>
+		<view class="card-panel-body">
+			<text :class="['dynamic-text-content', { collapsed:  itemData.expanded==true }]">
+				{{ itemData.content }}
+			</text>
+			<text v-if="itemData.content.length > 100" class="expand-btn" @click="toggleExpand(itemData)">
+				{{ itemData.expanded  ==true ? '收起' : '展开全文' }}
+			</text>
+			<!-- 媒体内容 -->
+			<view v-if="itemData.media !=null && itemData.media.length>0" class="media-container">
+				<view v-for="(media, index) in itemData.media" :key="index" class="media-item">
+					<image :src="media.url" class="media-item-image" />
+					<view v-if="media.type === 'video'" class="video-indicator">
+						<uni-icons type="videocam" size="32"></uni-icons>
+					</view>
+				</view>
+			</view>
+			<!-- 位置标签 -->
+			<view v-if="itemData.location !=null" class="location-tag">
+				<uni-icons type="location" size="18"></uni-icons> <text
+					class="location-tag-text">{{ itemData.location }}</text>
+			</view>
+		</view>
+		<view class="card-panel-footer" style="justify-content: space-between;">
+			<view class="action-btn like-btn" :class="{ active: itemData.likede  }" @click="toggleLike(itemData)">
+				<uni-icons :type="itemData.likede ? 'heart-filled' : 'heart'" size="22"
+					:color="itemData.likede ? '#f74c31' : ''"></uni-icons>
+				<text class="action-text">{{ itemData.like }}</text>
+			</view>
+			<view class="action-btn comment-btn">
+				<uni-icons type="chatbubble" size="22"></uni-icons>
+				<text class="action-text">{{ itemData.comment }}</text>
+			</view>
+			<view class="action-btn share-btn">
+				<uni-icons type="redo" size="22"></uni-icons>
+				<text class="action-text">{{ itemData.share }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { type IMoment } from '@/types/moment.uts'
+
+	const props = defineProps<{
+		moment : IMoment
+	}>()
+
+	const itemData = computed(() : IMoment => {
+		return props.moment
+	})
+
+	onPageShow(() => {
+		console.log('page-props-composition onPageShow')
+		console.log(itemData)
+	})
+	// 切换展开/收起
+	const toggleExpand = (item : IMoment) => {
+		item.expanded = item.expanded != null && !item.expanded;
+	};
+
+	// 切换点赞状态
+	const toggleLike = (item : IMoment) => {
+		item.likede = !item.likede;
+		item.like += item.likede ? 1 : -1;
+	};
+
+	// 格式化时间
+	const formatTime = (timestamp : number) => {
+		const now = Date.now();
+		const diff = now - timestamp;
+		const minute = 60 * 1000;
+		const hour = 60 * minute;
+		const day = 24 * hour;
+
+		if (diff < hour) {
+			return `${Math.floor(diff / minute)}分钟前`;
+		} else if (diff < day) {
+			return `${Math.floor(diff / hour)}小时前`;
+		} else if (diff < 2 * day) {
+			return '昨天';
+		} else {
+			const date = new Date(timestamp);
+			return `${date.getMonth() + 1}月${date.getDate()}日`;
+		}
+	};
+</script>
+
+<style>
+	.dynamic-card-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		background-color: #f0f0f0;
+	}
+
+	.dynamic-card-user-info {
+		flex: 1;
+	}
+
+	.dynamic-card-username {
+		font-weight: 600;
+		font-size: 18px;
+		color: #333;
+	}
+
+	.dynamic-post-time {
+		font-size: 13px;
+		color: #999;
+		margin-top: 4px;
+	}
+
+	.dynamic-card-content {
+		padding: 16px;
+	}
+
+	.dynamic-text-content {
+		font-size: 16px;
+		line-height: 1.7;
+		color: #333;
+		margin-bottom: 16px;
+	}
+
+	/* .text-content.collapsed {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	} */
+
+	.expand-btn {
+		color: #576b95;
+		font-size: 14px;
+		margin-top: 8px;
+	}
+
+	.media-container {
+		display: flex;
+		flex-flow: row wrap;
+		overflow: hidden;
+	}
+
+	.media-item {
+		margin: 5rpx;
+		position: relative;
+		flex-basis: 210rpx;
+		height: 230rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+	}
+
+
+	.media-item-image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		transition: transform 0.3s ease;
+	}
+
+	.video-indicator {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.location-tag {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		align-self: flex-start;
+		background: #f0f8ff;
+		padding: 4px 10px;
+		border-radius: 20px;
+		margin-top: 8px;
+	}
+
+	.location-tag-text {
+		font-size: 13px;
+		color: #576b95;
+
+	}
+
+	.card-footer {
+		padding: 15rpx 25rpx;
+		border-top: 1px solid #f0f0f0;
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-around;
+	}
+
+	.action-btn {
+		display: flex;
+		align-items: center;
+		flex-flow: row nowrap;
+		transition: color 0.2s;
+	}
+
+	.action-text {
+
+		color: #666;
+		font-size: 24rpx;
+	}
+</style>