Просмотр исходного кода

refactor(mind-detail): B-1f articles 令牌化——34 处硬编码色收敛(零观感变化)

- 25 处全局映射 + 9 处局部(文章类型标签四色 7 + 旧品牌蓝 2)
- 旧蓝处置(C-2 预案):#5B9BD5×2 + rgba(91,155,213,0.1) 原值令牌化为
  $c-brand-legacy/-tint 并标注「C-2 待翻转:品牌交互用法,预案翻品牌橙」,
  B 批纪律保零观感,翻转移交 C-2 角色分流
- 修复 equiv-regression.js 行首锚定提取:articles.vue 脚本区含 JS 正则
  字符串 /<style[\s\S]*?<\/style>/gi,旧正则首个匹配从伪标签吞到文末;
  改 ^[ \t]*<style m 标志匹配,真实 style 块不受脚本区干扰
- 验证:等价回归 PASS(编译产物逐字节相同)、零残留 hex(声明行除外)
liaoxg 6 дней назад
Родитель
Сommit
ee0ba25f09
2 измененных файлов с 53 добавлено и 37 удалено
  1. 49 35
      cfc-frontend/pages/mind-detail/articles.vue
  2. 4 2
      cfc-frontend/scripts/equiv-regression.js

+ 49 - 35
cfc-frontend/pages/mind-detail/articles.vue

@@ -271,26 +271,40 @@ onShow: function() {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+// 文章类型标签四色(类型语义,本页专有;article 浅底已提全局 $tint-info-soft)
+$c-type-article-ink:  #2b7fc4;   // 文章(蓝)
+$c-type-knowledge-bg: #e8f8ee;   // 知识(绿浅底)
+$c-type-knowledge-ink:#2a9055;   // 知识(绿)
+$c-type-course-bg:    #fef3e2;   // 课程(橙浅底)
+$c-type-course-ink:   #c47a2b;   // 课程(橙)
+$c-type-tip-bg:       #f3e8fd;   // 贴士(紫浅底)
+$c-type-tip-ink:      #7b2bc4;   // 贴士(紫)
+// C-2 待翻转:旧品牌蓝残留(filter-chip.active 底色 / article-category 前景 + 浅底)。
+// B 批纪律保原值令牌化,翻转移交 C-2 角色分流(此处为品牌交互用法,预案翻品牌橙)
+$c-brand-legacy:      #5B9BD5;
+$c-brand-legacy-tint: rgba(91,155,213,0.1);
+
 .container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
 }
 
 /* 筛选条 */
 .filter-section {
-  background: #fff;
+  background: $app-surface;
   padding: 16rpx 0 12rpx;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid $facade-fill-3;
 }
 .dimension-scroll,
 .category-scroll {
   white-space: nowrap;
 }
 .dimension-scroll {
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
   padding-bottom: 12rpx;
 }
 .filter-chips {
@@ -302,14 +316,14 @@ onShow: function() {
   display: inline-block;
   padding: 8rpx 24rpx;
   font-size: 24rpx;
-  color: #666;
-  background: #f0f0f0;
+  color: $facade-text-body;
+  background: $facade-fill;
   border-radius: 30rpx;
   flex-shrink: 0;
 }
 .filter-chip.active {
-  background: #5B9BD5;
-  color: #fff;
+  background: $c-brand-legacy;
+  color: $app-surface;
 }
 .filter-chip:first-child {
   margin-left: 4rpx;
@@ -332,28 +346,28 @@ onShow: function() {
   font-size: 18rpx;
   padding: 2rpx 10rpx;
   border-radius: 6rpx;
-  background: #f0f0f0;
-  color: #666;
+  background: $facade-fill;
+  color: $facade-text-body;
 }
 .type-tag.type-article {
-  background: #e8f4fd;
-  color: #2b7fc4;
+  background: $tint-info-soft;
+  color: $c-type-article-ink;
 }
 .type-tag.type-knowledge {
-  background: #e8f8ee;
-  color: #2a9055;
+  background: $c-type-knowledge-bg;
+  color: $c-type-knowledge-ink;
 }
 .type-tag.type-course {
-  background: #fef3e2;
-  color: #c47a2b;
+  background: $c-type-course-bg;
+  color: $c-type-course-ink;
 }
 .type-tag.type-tip {
-  background: #f3e8fd;
-  color: #7b2bc4;
+  background: $c-type-tip-bg;
+  color: $c-type-tip-ink;
 }
 .difficulty-tag {
   font-size: 18rpx;
-  color: #f59e0b;
+  color: $dim-wealth;
 }
 
 /* 文章列表 */
@@ -370,7 +384,7 @@ onShow: function() {
 }
 .loading-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-icon {
   font-size: 100rpx;
@@ -378,13 +392,13 @@ onShow: function() {
 }
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .article-grid {
   padding: 20rpx 24rpx;
 }
 .article-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   margin-bottom: 20rpx;
@@ -393,7 +407,7 @@ onShow: function() {
 .article-cover {
   width: 100%;
   height: 280rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
 }
 .article-body {
   padding: 20rpx;
@@ -405,28 +419,28 @@ onShow: function() {
 }
 .article-category {
   font-size: 20rpx;
-  color: #5B9BD5;
-  background: rgba(91,155,213,0.1);
+  color: $c-brand-legacy;
+  background: $c-brand-legacy-tint;
   padding: 2rpx 12rpx;
   border-radius: 8rpx;
   margin-right: 12rpx;
 }
 .article-date {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .article-title {
   display: block;
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 8rpx;
   line-height: 1.4;
 }
 .article-summary {
   display: block;
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.5;
   margin-bottom: 12rpx;
   overflow: hidden;
@@ -442,11 +456,11 @@ onShow: function() {
 }
 .article-author {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .article-read-count {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .loading-more,
 .no-more {
@@ -455,21 +469,21 @@ onShow: function() {
 }
 .no-more-text {
   font-size: 24rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 
 /* 未登录提示 */
 .login-hint-bar {
   text-align: center;
   padding: 20rpx;
-  background: #fef9e7;
-  border-top: 1rpx solid #f0e6c0;
+  background: $hint-cream-bg;
+  border-top: 1rpx solid $hint-cream-border;
   margin: 20rpx 24rpx 0;
   border-radius: 12rpx;
 }
 .login-hint-text {
   font-size: 24rpx;
-  color: #b8860b;
+  color: $hint-gold-ink;
 }
 
 /* 底部占位 */

+ 4 - 2
cfc-frontend/scripts/equiv-regression.js

@@ -24,9 +24,11 @@ const TMP = path.join(ROOT, '.tmp_equiv')
 fs.mkdirSync(TMP, { recursive: true })
 
 function extractStyle(src) {
-  const m = src.match(/<style[^>]*>([\s\S]*?)<\/style>/)
+  // 行首锚定(m 标志):避开脚本区 JS 字符串里的伪 style 标签
+  // (如 .replace(/<style[\s\S]*?<\/style>/gi, ' '),其 <style 不在行首)
+  const m = src.match(/^[ \t]*<style[^>]*>[\s\S]*?<\/style>/m)
   if (!m) throw new Error('未找到 style 块: ' + PAGE)
-  return m[1]
+  return m[0].replace(/^[ \t]*<style[^>]*>/, '').replace(/<\/style>$/, '')
 }
 
 const uniScss = fs.readFileSync(path.join(ROOT, 'uni.scss'), 'utf8')