refactor(article-component): 新增多维度CSS变量支持，对齐后端默认配置

新增标签胶囊、摘要文字、阅读区、查看更多、标题字号等多组CSS变量，将组件样式控制权交给外部配置，同时将默认值对齐后端design.js的nestedDefaults。重构列表项间距、分割线颜色等硬编码样式为变量驱动，统一组件样式管理逻辑。

components-diy/diy-article.vue

@@ -144,6 +144,19 @@ export default {
 			const r = (val, fb) => this._num(val, fb);
 			const isRootRound = v.componentAngle === 'round';
 			const isItemRound = v.elementAngle === 'round';
+			// 标签胶囊 3 色(默认值与后端 design.js nestedDefaults 对齐)
+			const tag = v.tagStyle || {};
+			// 摘要文字色(默认值与后端 design.js nestedDefaults 对齐)
+			const abs = v.abstractStyle || {};
+			// 查看更多(字号 + 图标大小)
+			const vm = v.viewMore || {};
+			// 阅读区(文字色 + 图标大小)
+			const rw = v.readWrapStyle || {};
+			// 标题字号(每风格独立 1/2/3/4)
+			const tfs1 = r(v.titleFontSize1, 30);
+			const tfs2 = r(v.titleFontSize2, 30);
+			const tfs3 = r(v.titleFontSize3, 24);
+			const tfs4 = r(v.titleFontSize4, 28);
 			return this.$util.objToStyle({
 				'background-color': v.componentBgColor || 'transparent',
 				// CSS 变量(向下传递给所有子元素,通过 var() 读取)
@@ -152,7 +165,30 @@ export default {
 				'--article-top-around-radius': isRootRound ? `${r(v.topAroundRadius, 0) * 2}rpx` : '0rpx',
 				'--article-bottom-around-radius': isRootRound ? `${r(v.bottomAroundRadius, 0) * 2}rpx` : '0rpx',
 				'--article-top-element-around-radius': isItemRound ? `${r(v.topElementAroundRadius, 0) * 2}rpx` : '0rpx',
-				'--article-bottom-element-around-radius': isItemRound ? `${r(v.bottomElementAroundRadius, 0) * 2}rpx` : '0rpx'
+				'--article-bottom-element-around-radius': isItemRound ? `${r(v.bottomElementAroundRadius, 0) * 2}rpx` : '0rpx',
+				// 标签胶囊 3 色
+				'--article-tag-bg-color': tag.bgColor || '#f0f9ff',
+				'--article-tag-text-color': tag.textColor || '#1e6bb8',
+				'--article-tag-border-color': tag.borderColor || '#b3d8ff',
+				// 摘要文字色
+				'--article-abstract-color': abs.textColor || '#888888',
+				// 阅读区文字色
+				'--article-meta-color': rw.color || '#999ca7',
+				// 阅读区图标大小(rpx)
+				'--article-meta-icon-size': r(rw.iconSize, 24) + 'rpx',
+				// 查看更多字号(rpx)
+				'--article-view-more-font-size': (typeof vm.fontSize === 'number' ? vm.fontSize : r(vm.fontSize, 26)) + 'rpx',
+				// 查看更多图标大小(rpx)
+				'--article-view-more-icon-size': r(vm.iconSize, 24) + 'rpx',
+				// 列表项间距(rpx)
+				'--article-item-gap': r(v.itemGap, 24) + 'rpx',
+				// 分割线颜色(主要用于 style-4)
+				'--article-divider-color': v.dividerColor || '#eeeeee',
+				// 标题字号 4 风格独立
+				'--article-title-fs-1': tfs1 + 'rpx',
+				'--article-title-fs-2': tfs2 + 'rpx',
+				'--article-title-fs-3': tfs3 + 'rpx',
+				'--article-title-fs-4': tfs4 + 'rpx'
 			});
 		},
 		// 单项容器样式:背景 + 装饰(box-shadow / border)
@@ -197,9 +233,14 @@ export default {
 			return Object.assign({ support: true, control: true }, this.value.tagStyle || {});
 		},
 		viewMore() {
-			return Object.assign({ support: true, control: false, text: '查看更多', color: '#999999' },
+			return Object.assign({ support: true, control: false, text: '查看更多', color: '#999999', iconSize: 24 },
 				this.value.viewMore || {});
 		},
+		// 阅读区样式(文字色 + 图标大小)
+		readWrapStyle() {
+			return Object.assign({ color: '#999ca7', iconSize: 24 },
+				this.value.readWrapStyle || {});
+		},
 		// ========== 滚动配置(同时兼容老数据 swiperConfig 和新字段 scrollMode) ==========
 		// 老数据 swiperConfig 字段:{ vertical, autoplay, circular, interval, duration, displayMultipleItems, swiperHeight }
 		// 新数据 scrollMode 字段:'none' | 'vertical'(默认 vertical,与老行为一致)
@@ -314,13 +355,27 @@ export default {
 /* 与 ns-newform 对齐: 在 .article-wrap 上通过内联 style 写入 CSS 变量,
    子元素通过 var() 读取。CSS 变量在 H5 / 微信小程序 WXSS / 鸿蒙元服务均支持继承。 */
 .article-wrap {
-	/* CSS 变量默认值兜底(老数据 / 静态预览场景下用以下值) */
+	/* CSS 变量默认值兜底(老数据 / 静态预览场景下用以下值;默认值与后端 design.js nestedDefaults 对齐) */
 	--article-component-bg-color: transparent;
 	--article-element-bg-color: transparent;
 	--article-top-around-radius: 0rpx;
 	--article-bottom-around-radius: 0rpx;
 	--article-top-element-around-radius: 0rpx;
 	--article-bottom-element-around-radius: 0rpx;
+	--article-tag-bg-color: #f0f9ff;
+	--article-tag-text-color: #1e6bb8;
+	--article-tag-border-color: #b3d8ff;
+	--article-abstract-color: #888888;
+	--article-meta-color: #999ca7;
+	--article-meta-icon-size: 24rpx;
+	--article-view-more-font-size: 26rpx;
+	--article-view-more-icon-size: 24rpx;
+	--article-item-gap: 24rpx;
+	--article-divider-color: #eeeeee;
+	--article-title-fs-1: 30rpx;
+	--article-title-fs-2: 30rpx;
+	--article-title-fs-3: 24rpx;
+	--article-title-fs-4: 28rpx;
 
 	/* 根容器圆角:由 --article-top/bottom-around-radius 驱动 */
 	border-top-left-radius: var(--article-top-around-radius, 0);
@@ -347,7 +402,7 @@ export default {
 		}
 
 		.item {
-			margin-bottom: 24rpx;
+			margin-bottom: var(--article-item-gap, 24rpx);
 			/* 背景 / 圆角通过 CSS 变量从 .article-wrap 继承(由 warpWrapStyle 注入) */
 			background-color: var(--article-element-bg-color, transparent);
 			border-top-left-radius: var(--article-top-element-around-radius, 0);
@@ -370,9 +425,10 @@ export default {
 
 			.tag {
 				display: inline-block;
-				background: #f0f9ff;
-				color: #1e6bb8;
-				border: 2rpx solid #b3d8ff;
+				/* 3 色由 CSS 变量驱动(来自 warpWrapStyle 注入;老数据走默认值) */
+				background: var(--article-tag-bg-color, #f0f9ff);
+				color: var(--article-tag-text-color, #1e6bb8);
+				border: 2rpx solid var(--article-tag-border-color, #b3d8ff);
 				border-radius: 20rpx;
 				padding: 2rpx 14rpx;
 				margin: 0 8rpx 8rpx 0;
@@ -382,7 +438,8 @@ export default {
 
 		.read-wrap {
 			display: flex;
-			color: #999ca7;
+			/* 文字色由 CSS 变量驱动(来自 warpWrapStyle 注入;老数据走默认值) */
+			color: var(--article-meta-color, #999ca7);
 			align-items: center;
 			margin-top: 10rpx;
 			line-height: 1;
@@ -407,7 +464,8 @@ export default {
 				margin-left: 16rpx;
 
 				.iconfont {
-					font-size: 24rpx;
+					/* 图标大小由 CSS 变量驱动 */
+					font-size: var(--article-meta-icon-size, 24rpx);
 					margin-right: 6rpx;
 				}
 			}
@@ -420,11 +478,12 @@ export default {
 		.view-more {
 			text-align: center;
 			padding: 20rpx 0;
-			font-size: 26rpx;
-			color: #999;
+			/* 字号由 CSS 变量驱动;颜色由 viewMoreStyle 注入(支持点击重置) */
+			font-size: var(--article-view-more-font-size, 26rpx);
 
 			.iconfont {
-				font-size: 24rpx;
+				/* 图标大小由 CSS 变量驱动 */
+				font-size: var(--article-view-more-icon-size, 24rpx);
 				margin-left: 8rpx;
 				vertical-align: middle;
 			}
@@ -467,12 +526,14 @@ export default {
 						display: -webkit-box;
 						-webkit-line-clamp: 2;
 						-webkit-box-orient: vertical;
-						font-size: 30rpx;
+						/* 标题字号由 CSS 变量驱动(每风格独立) */
+						font-size: var(--article-title-fs-1, 30rpx);
 						line-height: 1.4;
 					}
 
 					.desc {
-						color: #888;
+						/* 颜色由 CSS 变量驱动(来自 warpWrapStyle 注入;老数据走默认值) */
+						color: var(--article-abstract-color, #888888);
 						font-size: 24rpx;
 						overflow: hidden;
 						text-overflow: ellipsis;
@@ -506,7 +567,8 @@ export default {
 
 					.title {
 						font-weight: bold;
-						font-size: 30rpx;
+						/* 标题字号由 CSS 变量驱动(每风格独立) */
+						font-size: var(--article-title-fs-2, 30rpx);
 						line-height: 1.4;
 						margin-bottom: 10rpx;
 						overflow: hidden;
@@ -517,7 +579,8 @@ export default {
 					}
 
 					.desc {
-						color: #888;
+						/* 颜色由 CSS 变量驱动(来自 warpWrapStyle 注入;老数据走默认值) */
+						color: var(--article-abstract-color, #888888);
 						font-size: 24rpx;
 						overflow: hidden;
 						text-overflow: ellipsis;
@@ -563,7 +626,8 @@ export default {
 					padding: 10rpx 14rpx;
 
 					.title {
-						font-size: 24rpx;
+						/* 标题字号由 CSS 变量驱动(每风格独立) */
+						font-size: var(--article-title-fs-3, 24rpx);
 						font-weight: bold;
 						line-height: 1.3;
 						overflow: hidden;
@@ -590,7 +654,8 @@ export default {
 			.item {
 				padding: 20rpx;
 				margin-bottom: 0;
-				border-bottom: 2rpx dashed #eee;
+				/* 分割线颜色由 CSS 变量驱动 */
+				border-bottom: 2rpx dashed var(--article-divider-color, #eeeeee);
 
 				&:last-of-type {
 					border-bottom: 0;
@@ -598,7 +663,8 @@ export default {
 
 				.info-wrap {
 					.title {
-						font-size: 28rpx;
+						/* 标题字号由 CSS 变量驱动(每风格独立) */
+						font-size: var(--article-title-fs-4, 28rpx);
 						font-weight: bold;
 						line-height: 1.4;
 						overflow: hidden;