feat: support static Vue attrs and HTML attrs (whitelist)

hackycy · hackycy · commit 8f04d96ad63f · 2026-05-11T16:49:50.000+08:00
diff --git a/packages/i18n-migrate-cli/README.md b/packages/i18n-migrate-cli/README.md
@@ -208,7 +208,7 @@ tmigrate stats src/modules/order
 - **译文来源**：glossary / machine / manual 的来源分布。
 - **重点文件 Top 5**：只列待补译、待校对或废弃条目最多的文件，避免大项目刷屏。
 - **孤儿/损坏 Top 5**：只展示最需要清理或修复的异常 map 文件。
-- **下一步**：根据当前队列给出补译、校对、回写、清理等建议。
+- **建议**：根据当前队列给出补译、校对、回写、清理等建议。
 
 说明：统计口径是 map 条目数，不是源码中的文本出现次数。
 
diff --git a/packages/i18n-migrate-cli/src/__tests__/replacer.test.ts b/packages/i18n-migrate-cli/src/__tests__/replacer.test.ts
@@ -132,6 +132,50 @@ describe('replacer syntax-aware writeback', () => {
     ])).toContain('<template v-if="fileMax > 1">with maximum uploads of {{ fileMax }}</template>')
   })
 
+  it('extracts static Vue tab attributes while ignoring dynamic bindings', () => {
+    const content = [
+      '<template>',
+      '  <ATabs>',
+      '    <ATabPane key="1" tab="消费记录" />',
+      '    <ATabPane key="2" tab="积分明细" />',
+      '    <ATabPane key="3" :tab="dynamicTab" />',
+      '  </ATabs>',
+      '</template>',
+    ].join('\n')
+    const extractor = new Extractor(config)
+    const segments = extractor.extract(content, 'src/DetailDrawer.vue')
+
+    expect(segments.map(segment => segment.text)).toEqual(['消费记录', '积分明细'])
+    const next = replace(content, 'src/DetailDrawer.vue', [
+      ['消费记录', 'Consumption Records'],
+      ['积分明细', 'Points Details'],
+      ['dynamicTab', 'Should not replace'],
+    ])
+    expect(next).toContain('tab="Consumption Records"')
+    expect(next).toContain('tab="Points Details"')
+    expect(next).toContain(':tab="dynamicTab"')
+  })
+
+  it('extracts static Vue component props generically without HTML attr whitelist', () => {
+    const content = [
+      '<template>',
+      '  <CustomWidget panel-title="账户安全" emptyText="暂无数据" data-test="测试ID" class="中文类名" :panel-title="dynamicTitle" />',
+      '</template>',
+    ].join('\n')
+    const extractor = new Extractor(config)
+    const segments = extractor.extract(content, 'src/CustomWidget.vue')
+
+    expect(segments.map(segment => segment.text)).toEqual(['账户安全', '暂无数据'])
+    const next = replace(content, 'src/CustomWidget.vue', [
+      ['账户安全', 'Account Security'],
+      ['暂无数据', 'No Data'],
+      ['dynamicTitle', 'Should not replace'],
+    ])
+    expect(next).toContain('panel-title="Account Security"')
+    expect(next).toContain('emptyText="No Data"')
+    expect(next).toContain(':panel-title="dynamicTitle"')
+  })
+
   it('extracts and replaces column titles in Vue TSX script setup blocks', () => {
     const content = [
       '<template><BasicTable /></template>',
@@ -186,6 +230,14 @@ describe('replacer syntax-aware writeback', () => {
     ])).toContain('data-test="fileMax > 1">Maximum uploads {{ fileMax }} images</template>')
   })
 
+  it('extracts common static HTML attrs including tab', () => {
+    const content = '<tab-pane tab="消费记录" :tab="dynamicTab" title="详情"></tab-pane>'
+    const extractor = new Extractor(config)
+    const segments = extractor.extract(content, 'src/template.html')
+
+    expect(segments.map(segment => segment.text)).toEqual(['消费记录', '详情'])
+  })
+
   it('quotes unsafe yaml translations and preserves quoted yaml scalars', () => {
     expect(replace('title: 账号安全\n', 'src/messages.yaml', [
       ['账号安全', 'Account: secure #1'],
diff --git a/packages/i18n-migrate-cli/src/parsers/html.ts b/packages/i18n-migrate-cli/src/parsers/html.ts
@@ -2,6 +2,8 @@ import type { FileParser, TextContext, TextSegment, TranslationEntry } from '../
 import type { RangeSegment } from './range'
 import { dedupeSegments, finalizeSegments, leadingSpaces, lineColumn, replaceTranslations } from './range'
 
+export const TRANSLATABLE_ATTR_NAMES = new Set(['title', 'alt', 'placeholder', 'aria-label', 'label', 'tab'])
+
 export const htmlParser: FileParser = {
   supportedExtensions: ['.html'],
   extract: (content: string, filePath: string): TextSegment[] => finalizeSegments(extractHtmlSegments(content, filePath), filePath),
@@ -45,13 +47,12 @@ function extractHtmlText(content: string, filePath: string, offset: number, cont
 }
 
 export function extractHtmlAttrSegments(content: string, filePath: string, offset: number): RangeSegment[] {
-  const attrNames = new Set(['title', 'alt', 'placeholder', 'aria-label', 'label'])
   const segments: RangeSegment[] = []
   const attrRe = /\s([\w-]+)=["'][^"']*["']/g
   for (const match of content.matchAll(attrRe)) {
     const name = match[1]
     const rawAttr = match[0]
-    if (!name || !attrNames.has(name))
+    if (!name || !TRANSLATABLE_ATTR_NAMES.has(name))
       continue
     const quoteIndex = rawAttr.search(/["']/)
     const raw = rawAttr.slice(quoteIndex + 1, -1)
diff --git a/packages/i18n-migrate-cli/src/parsers/vue.ts b/packages/i18n-migrate-cli/src/parsers/vue.ts
@@ -2,7 +2,6 @@ import type { FileParser, TextSegment, TranslationEntry } from '../types'
 import type { RangeSegment } from './range'
 import { parse as parseVue } from '@vue/compiler-sfc'
 import { extractStyleSegments } from './css'
-import { extractHtmlAttrSegments } from './html'
 import { dedupeSegments, finalizeSegments, leadingSpaces, lineColumn, replaceTranslations } from './range'
 import { extractScriptSegments } from './script'
 
@@ -21,9 +20,8 @@ export function extractVueSegments(content: string, filePath: string): RangeSegm
   const segments: RangeSegment[] = []
 
   if (descriptor.template) {
-    const offset = descriptor.template.loc.start.offset
     segments.push(...extractVueTemplateTextSegments(descriptor.template.ast, content, filePath))
-    segments.push(...extractHtmlAttrSegments(descriptor.template.content, filePath, offset))
+    segments.push(...extractVueTemplateAttrSegments(descriptor.template.ast, content, filePath))
   }
 
   for (const block of [descriptor.script, descriptor.scriptSetup]) {
@@ -64,6 +62,59 @@ interface VueTemplateNode {
     source: string
   }
   children?: unknown[]
+  props?: unknown[]
+}
+
+interface VueTemplateAttr {
+  type: number
+  name?: string
+  value?: {
+    content?: string
+    loc?: {
+      start: { offset: number }
+      end: { offset: number }
+      source: string
+    }
+  }
+}
+
+function extractVueTemplateAttrSegments(ast: unknown, content: string, filePath: string): RangeSegment[] {
+  const segments: RangeSegment[] = []
+
+  collectVueTemplateAttrSegments(ast, content, segments)
+  return dedupeSegments(segments, filePath)
+}
+
+function collectVueTemplateAttrSegments(
+  node: unknown,
+  content: string,
+  segments: RangeSegment[],
+): void {
+  if (!isVueTemplateNode(node))
+    return
+
+  for (const prop of node.props ?? []) {
+    if (!isVueStaticAttr(prop) || !prop.name || shouldSkipVueStaticAttr(prop.name) || !prop.value?.content || !prop.value.loc)
+      continue
+
+    const raw = prop.value.loc.source
+    const quoteOffset = isQuoted(raw) ? 1 : 0
+    const start = prop.value.loc.start.offset + quoteOffset
+    const end = prop.value.loc.end.offset - quoteOffset
+    const position = lineColumn(content, start)
+    segments.push({
+      text: prop.value.content,
+      start,
+      end,
+      line: position.line,
+      column: position.column,
+      context: 'html-attr',
+      nodeType: 'VueStaticAttribute',
+    })
+  }
+
+  for (const child of node.children ?? [])
+    collectVueTemplateAttrSegments(child, content, segments)
 }
 
 function extractVueTemplateTextSegments(ast: unknown, content: string, filePath: string): RangeSegment[] {
@@ -151,3 +202,21 @@ function isInlineTemplateTextNode(node: unknown): node is VueTemplateNode {
 function isVueTemplateNode(value: unknown): value is VueTemplateNode {
   return Boolean(value && typeof value === 'object' && 'type' in value)
 }
+
+function isVueStaticAttr(value: unknown): value is VueTemplateAttr {
+  return Boolean(value && typeof value === 'object' && (value as { type?: unknown }).type === 6)
+}
+
+function isQuoted(value: string): boolean {
+  return (value.startsWith('"') && value.endsWith('"')) || (value.startsWith('\'') && value.endsWith('\''))
+}
+
+function shouldSkipVueStaticAttr(name: string): boolean {
+  return name === 'class'
+    || name === 'style'
+    || name === 'id'
+    || name === 'key'
+    || name === 'ref'
+    || name.startsWith('data-')
+    || name.startsWith('aria-')
+}
diff --git a/packages/i18n-migrate-cli/src/stats.ts b/packages/i18n-migrate-cli/src/stats.ts
@@ -131,7 +131,7 @@ export function formatMapStatsReport(report: MapStatsReport): string {
   }
 
   lines.push('')
-  lines.push(pc.cyan('下一步'))
+  lines.push(pc.cyan('建议'))
   if (report.current.untranslatedEntries > 0)
     lines.push(`- 先补齐 ${formatCount(report.current.untranslatedEntries)} 条待翻译文本。`)
   if (report.current.pendingReviewEntries > 0)
diff --git a/playground/src/i18n-migrate-scene/DetailTabs.vue b/playground/src/i18n-migrate-scene/DetailTabs.vue
@@ -0,0 +1,14 @@
+<template>
+  <ATabs v-model:activeKey="activeKey">
+    <ATabPane key="1" tab="消费记录" />
+    <ATabPane key="2" tab="积分明细" />
+    <ATabPane key="3" :tab="dynamicTab" />
+    <CustomPane panel-title="账户安全" emptyText="暂无数据" :panel-title="dynamicTitle" />
+  </ATabs>
+</template>
+
+<script setup lang="ts">
+const activeKey = '1'
+const dynamicTab = '动态标签'
+const dynamicTitle = '动态标题'
+</script>

Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@ export function formatMapStatsReport(report: MapStatsReport): string {`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`lines.push('')`
`134`		`- lines.push(pc.cyan('下一步'))`
	`134`	`+ lines.push(pc.cyan('建议'))`
`135`	`135`	`if (report.current.untranslatedEntries > 0)`
`136`	`136`	lines.push(`- 先补齐 ${formatCount(report.current.untranslatedEntries)} 条待翻译文本。`)
`137`	`137`	`if (report.current.pendingReviewEntries > 0)`