From fe039ed1269b5c319dfc4c4b5424f3376d65ad0b Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Wed, 14 Jan 2026 09:31:22 +0800
Subject: [PATCH] =?UTF-8?q?revert(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6):=20=E7=B2=BE=E7=AE=80=E4=BB=A3=E7=A0=81=EF=BC=8C?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4=E4=B8=8D=E7=94=A8=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/css/common-channel.scss |  47 ---------
 components-diy/diy-channel-header.vue  |  41 -------
 components-diy/diy-channel.vue         | 141 -------------------------
 components-diy/diy-group.vue           |   7 +-
 docs/WECHAT_CHANNEL_INTEGRATION.md     | 140 ++++++------------------
 5 files changed, 36 insertions(+), 340 deletions(-)
 delete mode 100644 components-diy/diy-channel-header.vue
 delete mode 100644 components-diy/diy-channel.vue

diff --git a/components-diy/css/common-channel.scss b/components-diy/css/common-channel.scss
index 8ccece8..8a1cad6 100644
--- a/components-diy/css/common-channel.scss
+++ b/components-diy/css/common-channel.scss
@@ -7,15 +7,12 @@
 	--channel-play-btn-small-size: 60rpx;
 	--channel-play-btn-icon-size: 40rpx;
 	--channel-play-btn-icon-small-size: 30rpx;
-	--channel-avatar-size: 60rpx;
-	--channel-arrow-size: 24rpx;
 	--channel-border-radius: 12rpx;
 	--channel-stats-padding: 10rpx;
 	--channel-info-wrap-padding: 10rpx 0;
 	
 	// 字体变量
 	--channel-name-font-size: 28rpx;
-	--channel-follow-font-size: 24rpx;
 	--video-title-font-size: 28rpx;
 	--video-title-small-font-size: 24rpx;
 	--video-stats-font-size: 24rpx;
@@ -23,7 +20,6 @@
 	
 	// 颜色变量
 	--channel-name-color: #333;
-	--channel-follow-color: #07c160;
 	--video-title-color: #333;
 	--video-title-small-color: #666;
 	--video-stats-color: #999;
@@ -33,9 +29,6 @@
 	--channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 	
 	// 间距变量
-	--channel-header-padding: 16rpx;
-	--channel-avatar-margin-right: 12rpx;
-	--channel-arrow-margin-left: 8rpx;
 	--channel-name-margin-bottom: 4rpx;
 	--video-title-margin-bottom: 8rpx;
 }
@@ -47,7 +40,6 @@
 		--channel-play-btn-small-size: 50rpx;
 		--channel-play-btn-icon-size: 35rpx;
 		--channel-play-btn-icon-small-size: 25rpx;
-		--channel-avatar-size: 50rpx;
 		--channel-name-font-size: 24rpx;
 		--video-title-font-size: 24rpx;
 	}
@@ -59,7 +51,6 @@
 		--channel-play-btn-small-size: 70rpx;
 		--channel-play-btn-icon-size: 45rpx;
 		--channel-play-btn-icon-small-size: 35rpx;
-		--channel-avatar-size: 70rpx;
 		--channel-name-font-size: 32rpx;
 		--video-title-font-size: 32rpx;
 	}
@@ -149,42 +140,4 @@
 	color: var(--video-stats-color);
 }
 
-// 频道头部
-.channel-header {
-	display: flex;
-	align-items: center;
-	padding: var(--channel-header-padding);
-	border-bottom: 1rpx solid var(--channel-border-color);
 
-	.channel-avatar {
-		width: var(--channel-avatar-size);
-		height: var(--channel-avatar-size);
-		border-radius: 50%;
-		margin-right: var(--channel-avatar-margin-right);
-	}
-
-	.channel-info {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-
-		.channel-name {
-			font-size: var(--channel-name-font-size);
-			font-weight: 500;
-			color: var(--channel-name-color);
-			margin-bottom: var(--channel-name-margin-bottom);
-		}
-
-		.channel-follow {
-			font-size: var(--channel-follow-font-size);
-			color: var(--channel-follow-color);
-		}
-	}
-
-	.channel-arrow {
-		width: var(--channel-arrow-size);
-		height: var(--channel-arrow-size);
-		margin-left: var(--channel-arrow-margin-left);
-	}
-}
diff --git a/components-diy/diy-channel-header.vue b/components-diy/diy-channel-header.vue
deleted file mode 100644
index e77d71b..0000000
--- a/components-diy/diy-channel-header.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-	<view class="channel-header" @tap="handlerClick">
-		<image class="channel-avatar" :src="$util.img(value.avatarUrl)" mode="aspectFill"></image>
-		<view class="channel-info">
-			<view class="channel-name">{{ value.channelName }}</view>
-			<view class="channel-follow" v-if="value.showFollow">关注</view>
-		</view>
-		<image class="channel-arrow" v-if="arrowIcon" :src="$util.img(arrowIcon)" mode="aspectFill"></image>
-	</view>
-</template>
-
-<script>
-import DiyMinx from './minx.js'
-
-import { wechatChannelConfig } from './js/wechat-channel.js'
-
-export default {
-	name: 'diy-channel-header',
-	props: {
-		value: {
-			type: Object,
-			required: true
-		}
-	},
-	mixins: [DiyMinx],
-	computed: {
-		arrowIcon() {
-			return wechatChannelConfig.icon.channelArrow
-		}
-	},
-	methods: {
-		handlerClick() {
-			this.$emit('header-tap', this.value);
-		}
-	}
-};
-</script>
-
-<style scoped lang="scss">
-@import './css/common-channel.scss';
-</style>
\ No newline at end of file
diff --git a/components-diy/diy-channel.vue b/components-diy/diy-channel.vue
deleted file mode 100644
index d47877c..0000000
--- a/components-diy/diy-channel.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-	<view class="diy-wechat-channel" :style="channelWarpCss">
-		<!-- 视频号头部，显示视频号名称、头像等信息 -->
-		<diy-channel-header :value="value" @header-tap="handlerClick" />
-		<!-- 视频号视频，显示视频封面、标题等信息 -->
-		<diy-channel-video :value="value" @video-play="playVideo" />
-	</view>
-</template>
-
-
-<script>
-/**
- * 微信视频号组件
- * 用于展示单个微信视频号的完整信息，包括头部信息和视频内容
- * 支持点击头部进入视频号主页，点击视频播放视频
- */
-import DiyMinx from './minx.js'
-import { wechatChannelUtil } from './js/wechat-channel.js'
-
-export default {
-	name: 'diy-channel',
-	props: {
-		/**
-		 * 视频号数据对象
-		 * @type {Object}
-		 * @required
-		 * @property {string} channelName - 视频号名称
-		 * @property {string} avatarUrl - 视频号头像URL
-		 * @property {string} videoTitle - 视频标题
-		 * @property {string} coverUrl - 视频封面URL
-		 * @property {string} feedId - 视频号内容ID，用于播放视频
-		 * @property {number} viewCount - 视频观看次数
-		 * @property {boolean} showFollow - 是否显示关注按钮
-		 * @property {string} componentAngle - 组件圆角类型，可选值：round
-		 * @property {number} topAroundRadius - 顶部圆角半径
-		 * @property {number} bottomAroundRadius - 底部圆角半径
-		 * @property {boolean} embedMode - 是否启用嵌入式播放
-		 * @property {boolean} showViewCount - 是否显示观看次数
-		 * @property {string} finderUserName - 视频号ID
-		 * @property {string} feedToken - 视频token，用于嵌入式播放
-		 */
-		value: {
-			type: Object,
-			required: true
-		}
-	},
-	data() {
-		return {};
-	},
-	created() { 
-		// 组件创建时的初始化逻辑
-	},
-	mixins: [DiyMinx],
-	watch: {
-		/**
-		 * 组件刷新监听
-		 * 当组件需要刷新时触发
-		 * @param {*} nval - 新值
-		 */
-		componentRefresh: function (nval) { }
-	},
-	computed: {
-		/**
-		 * 组件容器样式
-		 * 根据配置动态生成样式字符串，主要处理圆角样式
-		 * @returns {string} 样式字符串
-		 */
-		channelWarpCss: function () {
-			var obj = '';
-			if (this.value.componentAngle == 'round') {
-				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
-				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
-				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
-				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
-			}
-			return obj;
-		}
-	},
-	methods: {
-		/**
-		 * 处理头部点击事件
-		 * 触发 channel-tap 事件，用于跳转到视频号主页
-		 */
-		async handlerClick() {
-			await this.__$emitEvent({
-				eventName: 'channel-tap', 
-				data: this.value, 
-				promiseCallback: (event, handler, awaitedResult) => {
-					if (!awaitedResult) return;
-				}
-			})
-		},
-		/**
-		 * 处理视频播放事件
-		 * 触发 video-play 事件，并在微信小程序中调用视频播放接口
-		 */
-		async playVideo() {
-			await this.__$emitEvent({
-				eventName: 'video-play', 
-				data: this.value, 
-				promiseCallback: async (event, handler, awaitedResult) => {
-					if (!awaitedResult) return;
-					try {
-						// #ifdef MP-WEIXIN
-						await wechatChannelUtil.playVideo(this.value);
-						// #endif
-					} catch (err) {
-						console.error('打开视频号失败', err);
-					}
-				}
-			})
-		}
-	}
-};
-</script>
-
-<style scoped lang="scss">
-@import './css/common-channel.scss';
-
-.diy-wechat-channel {
-	width: 100%;
-	background-color: #fff;
-	border-radius: 12rpx;
-	overflow: hidden;
-	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
-}
-
-.channel-video {
-	position: relative;
-}
-
-.video-cover {
-	width: 100%;
-	height: 320rpx;
-	object-fit: cover;
-}
-
-.video-info {
-	padding: 16rpx;
-}
-</style>
\ No newline at end of file
diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index dd88285..6de5241 100644
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -251,12 +251,7 @@
 				<diy-icon :value="item"></diy-icon>
 			</template>
 
-			<template v-if="item.componentName == 'Channel'">
-				<!-- 视频号 -->
-				<diy-channel :value="item"></diy-channel>
-			</template>
-
-			<template v-if="item.componentName == 'ChannelList'">
+			<template v-if="['ChannelList', 'WechatChannel'].includes(item.componentName)">
 				<!-- 视频号列表 -->
 				<diy-channel-list :value="item"></diy-channel-list>
 			</template>
diff --git a/docs/WECHAT_CHANNEL_INTEGRATION.md b/docs/WECHAT_CHANNEL_INTEGRATION.md
index 2426372..bb19a67 100644
--- a/docs/WECHAT_CHANNEL_INTEGRATION.md
+++ b/docs/WECHAT_CHANNEL_INTEGRATION.md
@@ -102,29 +102,7 @@
 
 ## 3. 组件使用
 
-### 3.1 视频号头部组件 (diy-channel-header.vue)
-
-#### 基本用法
-
-```vue
-<diy-channel-header :value="headerData" @header-tap="handlerHeaderClick" />
-```
-
-#### 属性说明
-
-| 属性名 | 类型 | 默认值 | 说明 |
-|--------|------|--------|------|
-| channelName | String | "" | 视频号名称 |
-| avatarUrl | String | "" | 视频号头像URL |
-| showFollow | Boolean | false | 是否显示关注按钮 |
-
-#### 事件说明
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| header-tap | 点击头部区域时触发 | 视频号数据对象 |
-
-### 3.2 视频号视频卡片组件 (diy-channel-video.vue)
+### 3.1 视频号视频卡片组件 (diy-channel-video.vue)
 
 #### 基本用法
 
@@ -136,13 +114,15 @@
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| value | Object | {} | 视频数据对象 |
+| value | Object | 必填 | 视频数据对象 |
 | listMode | Boolean | false | 是否为列表模式 |
 | videoHeight | Number | 220 | 视频高度（仅适用于嵌入式播放） |
 | titleLineClamp | Number | 1 | 标题显示行数 |
 | showPlayBtn | Boolean | true | 是否显示播放按钮 |
+| aspectRatio | String | '16:9' | 视频比例，可选值：'16:9', '3:4' |
 | coverStyle | Object | {} | 视频封面图样式 |
 | playBtnStyle | Object | {} | 播放按钮样式 |
+| autoPlay | Boolean | false | 是否自动播放（仅适用于嵌入式播放） |
 
 #### value对象属性说明
 
@@ -163,45 +143,7 @@
 |--------|------|------|
 | video-play | 点击视频播放时触发 | 视频数据对象 |
 
-### 3.3 单个视频号组件 (diy-channel.vue)
-
-#### 基本用法
-
-```vue
-<diy-channel :value="channelData" />
-```
-
-#### 属性说明
-
-| 属性名 | 类型 | 默认值 | 说明 |
-|--------|------|--------|------|
-| channelName | String | "" | 视频号名称 |
-| avatarUrl | String | "" | 视频号头像URL |
-| videoTitle | String | "" | 视频标题 |
-| coverUrl | String | "" | 视频封面URL |
-| feedId | String | "" | 视频号内容ID，用于播放视频 |
-| viewCount | Number | 0 | 视频观看次数 |
-| showFollow | Boolean | false | 是否显示关注按钮 |
-| componentAngle | String | "" | 组件圆角类型，可选值：round |
-| topAroundRadius | Number | 0 | 顶部圆角半径 |
-| bottomAroundRadius | Number | 0 | 底部圆角半径 |
-| embedMode | Boolean | false | 是否启用嵌入式播放 |
-| showViewCount | Boolean | false | 是否显示观看次数 |
-| finderUserName | String | "" | 视频号ID，用于嵌入式播放 |
-| feedToken | String | "" | 视频token，用于嵌入式播放 |
-| titleLineClamp | Number | 1 | 标题显示行数 |
-| showPlayBtn | Boolean | true | 是否显示播放按钮 |
-| coverStyle | Object | {} | 视频封面图样式 |
-| playBtnStyle | Object | {} | 播放按钮样式 |
-
-#### 事件说明
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 |
-| video-play | 点击视频播放时触发 | 视频号数据对象 |
-
-### 3.4 视频号列表组件 (diy-channel-list.vue)
+### 3.2 视频号列表组件 (diy-channel-list.vue)
 
 #### 基本用法
 
@@ -213,28 +155,30 @@
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| list | Array | [] | 视频号列表数据 |
-| rowCount | Number | 2 | 每行显示的视频号数量 |
-| showStyle | String | "fixed" | 显示样式，可选值：fixed, singleSlide |
-| mode | String | "" | 显示模式 |
-| font | Object | {} | 字体样式配置 |
-| componentBgColor | String | "#fff" | 组件背景颜色 |
-| componentAngle | String | "" | 组件圆角类型，可选值：round |
-| topAroundRadius | Number | 0 | 顶部圆角半径 |
-| bottomAroundRadius | Number | 0 | 底部圆角半径 |
-| ornament | Object | {} | 装饰样式配置 |
-| titleLineClamp | Number | 1 | 标题显示行数 |
-| showPlayBtn | Boolean | true | 是否显示播放按钮 |
-| coverStyle | Object | {} | 视频封面图样式 |
-| playBtnStyle | Object | {} | 播放按钮样式 |
-| imageSize | Number | 0 | 图片尺寸（仅在特定模式下使用） |
-| pageCount | Number | 1 | 每页显示的视频数量 |
-| carousel | Object | {} | 轮播配置 |
-| carousel.type | String | "" | 轮播类型，可选值：default, hide |
-| carousel.autoplay | Boolean | false | 是否自动播放 |
-| carousel.interval | Number | 3000 | 自动播放间隔，单位毫秒 |
-| carousel.duration | Number | 500 | 切换动画时长，单位毫秒 |
-| carousel.circular | Boolean | false | 是否循环播放 |
+| value | Object | 必填 | 组件配置数据 |
+| value.list | Array | [] | 视频号列表数据 |
+| value.rowCount | Number | 2 | 每行显示的视频号数量 |
+| value.showStyle | String | "fixed" | 显示样式，可选值：fixed, singleSlide |
+| value.mode | String | "" | 显示模式 |
+| value.font | Object | {} | 字体样式配置 |
+| value.componentBgColor | String | "#fff" | 组件背景颜色 |
+| value.componentAngle | String | "" | 组件圆角类型，可选值：round |
+| value.topAroundRadius | Number | 0 | 顶部圆角半径 |
+| value.bottomAroundRadius | Number | 0 | 底部圆角半径 |
+| value.ornament | Object | {} | 装饰样式配置 |
+| value.titleLineClamp | Number | 1 | 标题显示行数 |
+| value.showPlayBtn | Boolean | true | 是否显示播放按钮 |
+| value.aspectRatio | String | '16:9' | 视频比例，可选值：'16:9', '3:4' |
+| value.coverStyle | Object | {} | 视频封面图样式 |
+| value.playBtnStyle | Object | {} | 播放按钮样式 |
+| value.imageSize | Number | 0 | 图片尺寸（仅在特定模式下使用） |
+| value.pageCount | Number | 1 | 每页显示的视频数量 |
+| value.carousel | Object | {} | 轮播配置 |
+| value.carousel.type | String | "" | 轮播类型，可选值：default, hide |
+| value.carousel.autoplay | Boolean | false | 是否自动播放 |
+| value.carousel.interval | Number | 3000 | 自动播放间隔，单位毫秒 |
+| value.carousel.duration | Number | 500 | 切换动画时长，单位毫秒 |
+| value.carousel.circular | Boolean | false | 是否循环播放 |
 
 #### list数组项说明
 
@@ -428,6 +372,7 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
 - 可通过组件的 `componentAngle`、`topAroundRadius`、`bottomAroundRadius` 等属性调整组件样式
 - 可通过 `componentBgColor` 属性调整组件背景颜色
 - 可通过 `font` 属性调整字体样式
+- 可通过 `aspectRatio` 属性调整视频比例，支持 '16:9' 和 '3:4' 两种比例
 
 ### 6.6 环境兼容性问题
 
@@ -489,24 +434,7 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
 
 ## 7. 示例代码
 
-### 7.1 视频号头部组件示例
-
-```javascript
-// 视频号头部数据
-const headerData = {
-    channelName: "示例视频号",
-    avatarUrl: "https://example.com/avatar.jpg",
-    showFollow: true
-};
-
-// 头部点击事件处理
-function handlerHeaderClick(data) {
-    console.log("头部被点击", data);
-    // 可以在这里处理跳转到视频号主页等逻辑
-}
-```
-
-### 7.2 视频号视频卡片组件示例
+### 7.1 视频号视频卡片组件示例
 
 ```javascript
 // 视频卡片数据
@@ -529,7 +457,7 @@ function handlerVideoPlay(data) {
 }
 ```
 
-### 7.3 单个视频号示例
+### 7.2 单个视频号示例
 
 ```javascript
 // 单个视频号数据
@@ -550,6 +478,7 @@ const channelData = {
     feedToken: "example_feed_token",
     titleLineClamp: 2,
     showPlayBtn: true,
+    aspectRatio: "16:9",
     coverStyle: {
         width: "100%",
         height: "0",
@@ -564,7 +493,7 @@ const channelData = {
 };
 ```
 
-### 7.4 视频号列表示例
+### 7.3 视频号列表示例
 
 ```javascript
 // 视频号列表数据
@@ -608,6 +537,7 @@ const channelListData = {
     ornament: {},
     titleLineClamp: 2,
     showPlayBtn: true,
+    aspectRatio: "16:9",
     coverStyle: {
         width: "100%",
         height: "0",