From c1d4a68e269f6ec0a0fed2db9ea92347889c4c9f Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 15 Jun 2026 10:52:58 +0800
Subject: [PATCH] refactor(diy-article): replace iconfont with uni-icons
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 替换阅读数、点赞数和查看更多按钮的自定义图标为uni-icons组件，统一图标使用方式
2. 新增metaColor计算属性同步阅读区文字色，确保图标颜色与文本保持一致
3. 修复全局样式干扰导致的阅读数/点赞数字号和颜色不一致问题
4. 调整查看更多默认配置与后端对齐，修正control默认值为true
---
 components-diy/diy-article.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/components-diy/diy-article.vue b/components-diy/diy-article.vue
index 3241482..69b76cb 100644
--- a/components-diy/diy-article.vue
+++ b/components-diy/diy-article.vue
@@ -36,11 +36,11 @@
 											<text class="category-name">{{ item.category_name }}</text>
 										</block>
 										<view class="num" v-if="readNumStyle.support && readNumStyle.control">
-											<text class="iconfont iconchakan"></text>
+											<uni-icons type="eye" size="12" :color="metaColor" />
 											<text>{{ item.read_num || 0 }}</text>
 										</view>
 										<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
-											<text class="iconfont icondianzan"></text>
+											<uni-icons type="star" size="12" :color="metaColor" />
 											<text>{{ item.dianzan_num || 0 }}</text>
 										</view>
 										<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
@@ -74,11 +74,11 @@
 									<text class="category-name">{{ item.category_name }}</text>
 								</block>
 								<view class="num" v-if="readNumStyle.support && readNumStyle.control">
-									<text class="iconfont iconchakan"></text>
+									<uni-icons type="eye" size="12" :color="metaColor" />
 									<text>{{ item.read_num || 0 }}</text>
 								</view>
 								<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
-									<text class="iconfont icondianzan"></text>
+									<uni-icons type="star" size="12" :color="metaColor" />
 									<text>{{ item.dianzan_num || 0 }}</text>
 								</view>
 								<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
@@ -89,7 +89,7 @@
 					<view class="view-more" v-if="viewMore.support && viewMore.control && list.length > 0"
 						:style="viewMoreStyle" @tap.stop="toListPage">
 						<text>{{ viewMore.text || '查看更多' }}</text>
-						<text class="iconfont icondiy-right-arrow"></text>
+						<uni-icons type="arrowright" size="12" :color="viewMore.color" />
 					</view>
 				</template>
 				<view v-if="list.length === 0 && !loading" class="empty-placeholder">
@@ -225,6 +225,10 @@ export default {
 				color: (this.viewMore && this.viewMore.color) || '#999999'
 			});
 		},
+		// 阅读区文字色(供 <uni-icons> 复用,确保 icon 颜色随 readWrapStyle.color 联动)
+		metaColor() {
+			return (this.value && this.value.readWrapStyle && this.value.readWrapStyle.color) || '#999ca7';
+		},
 		// ========== 字段显示配置(带默认值,避免老数据缺字段时报错) ==========
 		abstractStyle() {
 			return Object.assign({ support: true, control: true, fontSize: 24 }, this.value.abstractStyle || {});
@@ -239,7 +243,8 @@ export default {
 			return Object.assign({ support: true, control: true, fontSize: 22 }, this.value.tagStyle || {});
 		},
 		viewMore() {
-			return Object.assign({ support: true, control: false, text: '查看更多', color: '#999999', iconSize: 24 },
+			// control 默认 true 与后端 design.js + diy_view.php 对齐(老数据没 viewMore 时也走显示)
+			return Object.assign({ support: true, control: true, text: '查看更多', color: '#999999', iconSize: 24 },
 				this.value.viewMore || {});
 		},
 		// 阅读区样式(文字色 + 图标大小 + 文字大小)
@@ -474,6 +479,12 @@ export default {
 			}
 
 			.num {
+				/* 显式继承 .read-wrap 的 color / font-size:避免 main.scss 里
+				   view { color: $color-title; font-size: $font-size-base; } 的全局规则截胡
+				   (.num 是 <view> 但不是 .read-wrap,特异性 view < .read-wrap 不再生效),
+				   导致阅读数 / 点赞数 与 category-name / date 颜色和字号不一致 */
+				color: inherit;
+				font-size: inherit;
 				display: inline-flex;
 				align-items: center;
 				margin-left: 16rpx;
@@ -496,7 +507,7 @@ export default {
 			/* 字号由 CSS 变量驱动;颜色由 viewMoreStyle 注入(支持点击重置) */
 			font-size: var(--article-view-more-font-size, 26rpx);
 
-			.iconfont {
+			.uni-icons {
 				/* 图标大小由 CSS 变量驱动 */
 				font-size: var(--article-view-more-icon-size, 24rpx);
 				margin-left: 8rpx;