cfc/cfc-frontend/scripts/analyze-hex-distribution.js

#!/usr/bin/env node
/**
 * 统计全站剩余硬编码色值分布（按 <style> 块内），找出高频可令牌化色值
 * 用法: node scripts/analyze-hex-distribution.js
 */
const fs = require('fs')
const path = require('path')

const ROOT = path.resolve(__dirname, '..')
const EXCLUDE_DIRS = new Set(['node_modules', 'dist', 'unpackage', '.git', 'docs'])

function walk(dir, out = []) {
  for (const name of fs.readdirSync(dir)) {
    if (EXCLUDE_DIRS.has(name)) continue
    const p = path.join(dir, name)
    const st = fs.statSync(p)
    if (st.isDirectory()) walk(p, out)
    else if (name.endsWith('.vue')) out.push(p)
  }
  return out
}

const files = walk(ROOT)
const counts = {}    // hex → count
const fileMap = {}   // hex → Set(fileRel)

const HEX_IN_STYLE = /#[0-9a-fA-F]{3,8}\b/g

for (const f of files) {
  const src = fs.readFileSync(f, 'utf8')
  // 只统计 style 块内
  const styleBlocks = [...src.matchAll(/(<style[^>]*>)([\s\S]*?)(<\/style>)/gi)]
  const rel = path.relative(ROOT, f).split(path.sep).join('/')
  for (const m of styleBlocks) {
    const body = m[2]
    for (const hexMatch of body.match(HEX_IN_STYLE) || []) {
      const upper = hexMatch.toUpperCase()
      if (!counts[upper]) { counts[upper] = 0; fileMap[upper] = new Set() }
      counts[upper]++
      fileMap[upper].add(rel)
    }
  }
}

const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1])
console.log('=== <style> 块内 TOP 60 硬编码色 ===')
for (const [hex, count] of sorted.slice(0, 60)) {
  const filesN = fileMap[hex].size
  const sample = [...fileMap[hex]].slice(0, 3).join(', ')
  console.log(`${String(count).padStart(5)}  ${hex}  (${filesN}文件)  e.g. ${sample}`)
}