cfc/cfc-frontend/scripts/convert-tianpan-px.js

#!/usr/bin/env node
/**
 * tianpan 家族 px→rpx 转换（×2，375px 设计基准）
 * 转换范围：<style> 块内 CSS 声明（font-size, padding, margin, width, height, border-radius,
 *           box-shadow offset, border-width, gap 等）
 * 不转换：canvas 元素尺寸（<canvas width=... height=...>），canvas 绘图 JS（ctx.font="14px"）
 */
const fs = require('fs')
const path = require('path')

const ROOT = path.resolve(__dirname, '..')
const TIANPAN_DIR = path.join(ROOT, 'pages', 'tianpan')
const FILES = [
  'index.vue',
  'relation-detail.vue',
  'member-detail.vue',
  'traditional.vue',
  'daily-fortune.vue',
  'annual-energy.vue',
  'related-items.vue',
]

// 匹配：属性值中的 px（在 <style> 块内，排除 canvas 元素和 ctx.font 等 JS）
// 策略：用正则替换 <style> 块内的 \d+px → \d*2rpx
const PX_RE = /(\d+)\s*px/g

function convertPxToRpx(text) {
  // 替换 px 为单位转换（注意：保留 canvas 宽高属性、保留 JS 内的 px）
  // 通过只匹配 <style>...</style> 内容来隔离
  const styleStart = text.search(/<style/)
  if (styleStart === -1) return text

  let result = ''
  let pos = 0
  const styleRegex = /(<style)([^>]*)>([\s\S]*?)(<\/style>)/gi
  let m
  let matchCount = 0
  while ((m = styleRegex.exec(text)) !== null) {
    // 跳过 canvas 内部（canvas 标签不在 style 块里）
    const body = m[3]
    const converted = body.replace(PX_RE, (_match, num) => {
      matchCount++
      const px = parseInt(num, 10)
      return `${px * 2}rpx`
    })
    if (converted !== body) {
      result += text.slice(pos, m.index) + m[1] + m[2] + '>' + converted + '</style>'
      pos = styleRegex.lastIndex
    }
  }
  result += text.slice(pos)
  return { newSrc: result, count: matchCount }
}

function main() {
  let totalConverted = 0
  const log = []
  for (const file of FILES) {
    const filePath = path.join(TIANPAN_DIR, file)
    if (!fs.existsSync(filePath)) {
      console.warn(`跳过不存在文件: ${file}`)
      continue
    }
    const src = fs.readFileSync(filePath, 'utf8')
    const { newSrc, count } = convertPxToRpx(src)
    if (count > 0) {
      fs.writeFileSync(filePath, newSrc, 'utf8')
      totalConverted += count
      log.push(`${count.toString().padStart(3)}  ${file}`)
    }
  }
  console.log(`\n=== tianpan px→rpx 完成 ===`)
  console.log(`转换次数: ${totalConverted}`)
  console.log('')
  log.sort((a, b) => parseInt(b.split(' ')[0]) - parseInt(a.split(' ')[0]))
  for (const line of log) console.log(line)
}

main()