From f9d144159a8e2cfdfaac20d8376cbe17e27c10e8 Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Mon, 15 Jun 2026 08:28:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(article-component):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=A4=9A=E7=BB=B4=E5=BA=A6CSS=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E6=94=AF=E6=8C=81=EF=BC=8C=E5=AF=B9=E9=BD=90=E5=90=8E=E7=AB=AF?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增标签胶囊、摘要文字、阅读区、查看更多、标题字号等多组CSS变量，将组件样式控制权交给外部配置，同时将默认值对齐后端design.js的nestedDefaults。重构列表项间距、分割线颜色等硬编码样式为变量驱动，统一组件样式管理逻辑。 --- components-diy/diy-article.vue | 104 +++++++++++++++++++++++++++------ 1 file changed, 85 insertions(+), 19 deletions(-) diff --git a/components-diy/diy-article.vue b/components-diy/diy-article.vue index ed587b9..d55dedf 100644 --- a/components-diy/diy-article.vue +++ b/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;