From f87c7d963e8003f5a26c3f81e0bf7573296a15e9 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 10 Jan 2026 16:12:36 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6):=20=E6=9B=B4=E6=96=B0=E8=A7=86=E9=A2=91=E5=8F=B7?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-channel-header.vue |   6 +-
 components-diy/diy-channel-list.vue   | 182 +++++++++-----------------
 components-diy/diy-channel-video.vue  | 139 ++++++++++++++++++--
 components-diy/diy-channel.vue        |   2 -
 4 files changed, 190 insertions(+), 139 deletions(-)

diff --git a/components-diy/diy-channel-header.vue b/components-diy/diy-channel-header.vue
index d2c2c66..e77d71b 100644
--- a/components-diy/diy-channel-header.vue
+++ b/components-diy/diy-channel-header.vue
@@ -12,9 +12,8 @@
 <script>
 import DiyMinx from './minx.js'
 
-// #ifdef MP-WEIXIN
 import { wechatChannelConfig } from './js/wechat-channel.js'
-// #endif
+
 export default {
 	name: 'diy-channel-header',
 	props: {
@@ -26,10 +25,7 @@ export default {
 	mixins: [DiyMinx],
 	computed: {
 		arrowIcon() {
-			// #ifdef MP-WEIXIN
 			return wechatChannelConfig.icon.channelArrow
-			// #endif
-			return ''
 		}
 	},
 	methods: {
diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue
index f4b2498..d92584f 100644
--- a/components-diy/diy-channel-list.vue
+++ b/components-diy/diy-channel-list.vue
@@ -1,10 +1,15 @@
 <template>
-	<view :style="componentStyle">
+	<view :style="[componentStyle, { '--row-count': value.rowCount }]">
 		<!-- 固定布局模式 -->
 		<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
 			style="padding:20rpx;">
 			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
-				<diy-channel-video :value="item" @video-play="playVideo(item)" />
+				<diy-channel-video 
+					:value="item" 
+					@video-play="playVideo(item)" 
+					:list-mode="true"
+					:video-height="value.rowCount === 3 ? 180 : 240"
+				/>
 			</view>
 		</view>
 
@@ -12,9 +17,13 @@
 		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
 			:scroll-x="value.showStyle == 'singleSlide'">
 			<view class="uni-scroll-view-content">
-				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"
-					:style="{ width: (100 / value.rowCount + '%') + ';' }">
-					<diy-channel-video :value="item" @video-play="playVideo(item)" />
+				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
+					<diy-channel-video 
+						:value="item" 
+						@video-play="playVideo(item)"
+						:list-mode="true"
+						:video-height="value.rowCount === 3 ? 180 : 240"
+					/>
 				</view>
 			</view>
 		</scroll-view>
@@ -24,9 +33,7 @@
 <script>
 
 import DiyMinx from './minx.js'
-// #ifdef MP-WEIXIN
 import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
-// #endif
 export default {
 	name: 'diy-channel-list',
 	props: {
@@ -54,17 +61,19 @@ export default {
 	computed: {
 		componentStyle() {
 			let style = '';
-			style += 'background-color:' + this.value.componentBgColor + ';';
-
-			if (this.value.componentAngle == 'round') {
-				style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
-				style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
-				style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
-				style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
+			if (this.value?.componentBgColor) {
+				style += 'background-color:' + this.value?.componentBgColor + ';';
 			}
 
-			style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
-			style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
+			if (this.value?.componentAngle == 'round') {
+				style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
+				style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
+				style += 'border-bottom-left-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
+				style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
+			}
+
+			style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
+			style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';
 
 			return style;
 		},
@@ -72,20 +81,20 @@ export default {
 		swiperHeight() {
 			let height = 0;
 
-			if (this.value.mode == 'graphic') {
-				height = (49 + this.value.imageSize) * this.value.pageCount;
-			} else if (this.value.mode == 'img') {
-				height = (22 + this.value.imageSize) * this.value.pageCount;
-			} else if (this.value.mode == 'text') {
-				height = 43 * this.value.pageCount;
+			if (this.value?.mode == 'graphic') {
+				height = (49 + this.value?.imageSize) * this.value?.pageCount;
+			} else if (this.value?.mode == 'img') {
+				height = (22 + this.value?.imageSize) * this.value?.pageCount;
+			} else if (this.value?.mode == 'text') {
+				height = 43 * this.value?.pageCount;
 			}
 
 			return 'height:' + (2 * height) + 'rpx';
 		},
 
 		isIndicatorDots() {
-			return this.value.carousel.type != 'hide' &&
-				1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
+			return this.value?.carousel?.type != 'hide' &&
+				1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
 		}
 	},
 	methods: {
@@ -125,89 +134,27 @@ export default {
 <style lang="scss" scoped>
 @import './css/common-channel.scss';
 
+// 优化列表布局样式
 .channel-list {
 	&.row1-of3 {
 		display: flex;
 		flex-wrap: wrap;
+		gap: 16rpx;
 
 		.channel-item {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			margin-top: 20rpx;
-			width: calc(33.3333333% - 14rpx);
+			flex: 0 0 calc(33.3333333% - 10rpx);
 			box-sizing: border-box;
-
-			&:nth-child(3n + 3) {
-				width: calc(33.33% - 15rpx);
-			}
-
-			&:nth-of-type(1),
-			&:nth-of-type(2),
-			&:nth-of-type(3) {
-				margin-top: 0;
-			}
-
-			&:nth-child(3n) {
-				width: calc(33.3333333% - 15rpx);
-			}
-
-			&:nth-child(3n-1) {
-				margin-left: 20rpx;
-				margin-right: 20rpx;
-			}
-
-			.channel-img-wrap {
-				position: relative;
-				overflow: hidden;
-				height: 220rpx;
-				border-radius: 10rpx;
-			}
-
-			.channel-img {
-				width: 100%;
-				height: 100%;
-			}
-
-			.channel-play-btn {
-				@extend .channel-play-btn.small;
-			}
 		}
 	}
 
 	&.row1-of2 {
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: space-between;
+		gap: 16rpx;
 
 		.channel-item {
-			position: relative;
-			margin-top: 20rpx;
-			width: calc(50% - 10rpx);
-			display: flex;
-			flex-direction: column;
+			flex: 0 0 calc(50% - 8rpx);
 			box-sizing: border-box;
-
-			&:nth-child(2n) {
-				margin-right: 0 !important;
-			}
-
-			&:nth-of-type(1),
-			&:nth-of-type(2) {
-				margin-top: 0;
-			}
-
-			.channel-img-wrap {
-				position: relative;
-				overflow: hidden;
-				height: 340rpx;
-				border-radius: 10rpx;
-			}
-
-			.channel-img {
-				width: 100%;
-				height: 100%;
-			}
 		}
 	}
 }
@@ -220,13 +167,14 @@ export default {
 		.uni-scroll-view-content {
 			display: flex;
 			flex-wrap: wrap;
-			justify-content: space-between;
+			gap: 16rpx;
 		}
 	}
 
 	&.singleSlide {
 		.uni-scroll-view-content {
 			display: flex;
+			gap: 16rpx;
 		}
 
 		.channel-nav-item {
@@ -237,38 +185,36 @@ export default {
 	.channel-nav-item {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		padding: 14rpx 0;
 		box-sizing: border-box;
+		width: calc(100% / var(--row-count, 3) - 12rpx);
+	}
+}
 
-		.channel-img {
-			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: 200rpx;
-			border-radius: 10rpx;
-			overflow: hidden;
+// 响应式调整
+@media (max-width: 375px) {
+	.channel-list {
+		&.row1-of3 {
+			gap: 12rpx;
 
-			image {
-				width: 100%;
-				height: 100%;
-			}
-
-			.channel-play-btn {
-				@extend .channel-play-btn.small;
+			.channel-item {
+				flex: 0 0 calc(33.3333333% - 8rpx);
 			}
 		}
 
-		.channel-text {
-			padding-top: 12rpx;
-			line-height: 1.5;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 100%;
-			text-align: center;
+		&.row1-of2 {
+			gap: 12rpx;
+
+			.channel-item {
+				flex: 0 0 calc(50% - 6rpx);
+			}
+		}
+	}
+
+	.channel-nav {
+		padding: 12rpx;
+
+		.channel-nav-item {
+			width: calc(100% / var(--row-count, 3) - 8rpx);
 		}
 	}
 }
diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue
index a482149..0b37712 100644
--- a/components-diy/diy-channel-video.vue
+++ b/components-diy/diy-channel-video.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="channel-video">
+	<view class="channel-video" :class="{ 'list-mode': listMode }">
 		<!-- 嵌入式视频播放 -->
 		<native-component v-if="canUseEmbedMode">
 			// #ifdef MP-WEIXIN
@@ -7,23 +7,25 @@
 				:feed-id="value.feedId" 
 				:finder-user-name="value.finderUserName" 
 				:feed-token="value.feedToken" 
-				style="width: 100%; height: 320rpx;">
+				:style="embedVideoStyle">
 			</channel-video>
 			// #endif
 		</native-component>
 		
 		<!-- 跳转式视频播放 -->
-		<view v-else @tap="playVideo">
-			<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
-			<view class="channel-play-btn">
-				<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
-			</view>
-			<view class="channel-stats">
-				<text>{{ value.viewCount }}次观看</text>
+		<view v-else @tap="playVideo" class="video-container">
+			<view class="video-cover-wrap">
+				<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
+				<view class="channel-play-btn">
+					<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
+				</view>
+				<view class="video-stats-overlay" v-if="value.showViewCount">
+					{{ value.viewCount }}次观看
+				</view>
 			</view>
 			<view class="video-info">
 				<view class="video-title">{{ value.videoTitle }}</view>
-				<view class="video-stats">{{ value.viewCount }}次观看</view>
+				<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
 			</view>
 		</view>
 	</view>
@@ -31,9 +33,7 @@
 
 <script>
 
-// #ifdef MP-WEIXIN
 import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
-// #endif
 
 export default {
 	name: 'diy-channel-video',
@@ -41,12 +41,20 @@ export default {
 		value: {
 			type: Object,
 			required: true
+		},
+		listMode: {
+			type: Boolean,
+			default: false
+		},
+		videoHeight: {
+			type: Number,
+			default: 220
 		}
 	},
 	computed: {
 		canUseEmbedMode() {
 			// #ifdef MP-WEIXIN
-			return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported();
+			return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
 			// #endif
 			return false
 		},
@@ -55,6 +63,12 @@ export default {
 			return wechatChannelConfig.icon.playIcon
 			// #endif
 			return ''
+		},
+		embedVideoStyle() {
+			return {
+				width: '100%',
+				height: `${this.listMode ? 180 : 320}rpx`
+			};
 		}
 	},
 	methods: {
@@ -70,15 +84,112 @@ export default {
 
 .channel-video {
 	position: relative;
+	background-color: #fff;
+	border-radius: 12rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+	transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+	&:hover {
+		transform: translateY(-2rpx);
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+	}
+
+	&.list-mode {
+		border-radius: 8rpx;
+		box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.06);
+
+		.video-info {
+			padding: 12rpx;
+
+			.video-title {
+				font-size: 24rpx;
+				margin-bottom: 4rpx;
+			}
+		}
+	}
+}
+
+.video-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.video-cover-wrap {
+	position: relative;
+	width: 100%;
+	height: 320rpx;
+
+	.channel-video.list-mode & {
+		height: 180rpx;
+	}
 }
 
 .video-cover {
 	width: 100%;
-	height: 320rpx;
+	height: 100%;
 	object-fit: cover;
+	border-radius: 12rpx 12rpx 0 0;
+
+	.channel-video.list-mode & {
+		border-radius: 8rpx 8rpx 0 0;
+	}
+}
+
+.video-stats-overlay {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+	padding: 8rpx 12rpx;
+	color: #fff;
+	font-size: 20rpx;
+	text-align: right;
 }
 
 .video-info {
 	padding: 16rpx;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.video-title {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #333;
+	margin-bottom: 8rpx;
+	line-height: 1.4;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
+	.channel-video.list-mode & {
+		-webkit-line-clamp: 2;
+		font-size: 24rpx;
+		margin-bottom: 4rpx;
+	}
+}
+
+.video-stats {
+	font-size: 22rpx;
+	color: #999;
+	margin-top: 4rpx;
+}
+
+// 确保播放按钮在列表模式下更小
+.channel-video.list-mode .channel-play-btn {
+	width: 50rpx;
+	height: 50rpx;
+
+	.play-icon {
+		width: 25rpx;
+		height: 25rpx;
+	}
 }
 </style>
\ No newline at end of file
diff --git a/components-diy/diy-channel.vue b/components-diy/diy-channel.vue
index 1f0bfe6..b9180cf 100644
--- a/components-diy/diy-channel.vue
+++ b/components-diy/diy-channel.vue
@@ -10,9 +10,7 @@
 // 微信视频号组件
 import DiyMinx from './minx.js'
 
-// #ifdef MP-WEIXIN
 import { wechatChannelUtil } from './js/wechat-channel.js'
-// #endif
 
 export default {
 	name: 'diy-channel',