完善化成字段名称展示与窄屏验收

yeg

2026-09-07 e99f5e04c2090c9e5b8b2a87fd20c0873e1eda04

完善化成字段名称展示与窄屏验收

字段设置使用中文指标名称，验证模板跨来源应用以及窄屏滚动后的单位和排序操作。修正单选控件的浏览器测试定位。

 src/components/FormationFieldControls.vue

@@ -16,6 +16,7 @@
const saving = ref(false)
const error = ref('')
const identity = (field: FormationField) => `${field.scope}|${field.key}`
const fieldName = (field: FormationField) => defaultFormationFields.find(value => value.key === field.key)?.displayName || field.key
function openSettings() {
  const available: FormationField[] = props.items.flatMap(item => item.businessFields.map(field => ({ key: field.fieldName, displayName: field.fieldName,
    unit: '', kind: 'battery' as const, scope: 'detail' as const, fieldDefinitionId: field.fieldDefinitionId })))
@@ -79,7 +80,7 @@
  <div class="field-controls"><el-button @click="openSettings"><el-icon><Setting /></el-icon>字段设置</el-button><el-button @click="openTemplates"><el-icon><DocumentCopy /></el-icon>选择字段模板</el-button></div>
  <el-dialog v-model="settingsVisible" title="字段设置" width="min(850px, calc(100vw - 28px))">
    <div class="field-settings-table"><table><thead><tr><th>选择</th><th>字段</th><th>范围</th><th>展示名称</th><th>单位</th><th>顺序</th></tr></thead><tbody>
      <tr v-for="(field, index) in draft" :key="identity(field)"><td><el-checkbox v-model="field.enabled" :aria-label="`选择${field.key}`" /></td><td>{{ field.key }}</td>
      <tr v-for="(field, index) in draft" :key="identity(field)"><td><el-checkbox v-model="field.enabled" :aria-label="`选择${fieldName(field)}`" /></td><td>{{ fieldName(field) }}</td>
        <td><el-select v-if="field.kind === 'manual'" v-model="field.scope" aria-label="字段范围"><el-option label="详情" value="detail" /><el-option label="循环" value="cycle" /></el-select><span v-else>{{ field.scope === 'detail' ? '详情' : '循环' }}</span></td>
        <td><el-input v-model="field.displayName" aria-label="展示名称" maxlength="100" /></td><td><el-input v-model="field.unit" aria-label="单位" maxlength="30" :disabled="field.kind === 'metric'" /></td>
        <td class="move-buttons"><el-tooltip content="上移"><el-button aria-label="上移" :disabled="index === 0" @click="move(index, -1)"><el-icon><ArrowUp /></el-icon></el-button></el-tooltip><el-tooltip content="下移"><el-button aria-label="下移" :disabled="index === draft.length - 1" @click="move(index, 1)"><el-icon><ArrowDown /></el-icon></el-button></el-tooltip></td>

 tests/e2e/formation-matrix.spec.ts

@@ -178,7 +178,7 @@
  await page.getByRole('combobox', { name: '化成来源', exact: true }).press('Escape')
  await expect(page.locator('.cycle-card')).toHaveCount(5)
  await page.getByRole('button', { name: '选择字段模板', exact: true }).click()
  await templateDialog.getByRole('radio', { name: '页面结构', exact: true }).check()
  await templateDialog.locator('label.el-radio').filter({ hasText: '页面结构' }).click()
  await templateDialog.getByRole('button', { name: '应用模板', exact: true }).click()
  await expect(page.getByRole('textbox', { name: '化成测试乙 同名电池 F/N', exact: true })).toHaveValue('')
  await expect(page.getByRole('textbox', { name: '化成测试乙 同名电池 Z展示名', exact: true })).toBeVisible()
@@ -188,6 +188,12 @@
    await page.getByRole('button', { name: '字段设置', exact: true }).click()
    await expect(fieldDialog).toBeVisible()
    await page.screenshot({ path: `tests/e2e/.artifacts/formation-fields-${width}.png`, animations: 'disabled' })
    if (width === 390) {
      await fieldDialog.locator('.field-settings-table').evaluate(element => { element.scrollLeft = element.scrollWidth })
      await expect(fieldDialog.getByRole('textbox', { name: '单位', exact: true }).first()).toBeInViewport()
      await expect(fieldDialog.getByRole('button', { name: '下移', exact: true }).first()).toBeInViewport()
      await page.screenshot({ path: 'tests/e2e/.artifacts/formation-fields-390-scrolled.png', animations: 'disabled' })
    }
    await fieldDialog.getByRole('button', { name: '取消', exact: true }).click()
  }
  expect(errors).toEqual([])