静默 Bug 猎场

```json
{
  "defects": [
    {
      "位置": "顶部卡片区右侧：一个无边框的白色矩形块（约 x 460–510、y 88–148）叠压在『卡片 3』右半部之上，遮挡了卡片边框与内容区；同时卡片行总宽超出容器右缘，存在横向溢出但无滚动/换行处理",
      "缺陷类型": "布局溢出 / 元素遮挡（视觉缺陷）",
      "严重度": "影响",
      "补丁": "/* 1) 让卡片行可换行并约束宽度，消除横向溢出 */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 2) 移除叠压在卡片3上的无样式白色块（建议直接删除对应 DOM 节点） */
.overlay-artifact {
  display: none;
}"
    },
    {
      "位置": "『最近活动』面板：列表区仅有 4 条灰色空占位线，没有任何空状态提示文案或引导操作",
      "缺陷类型": "可用性缺陷（缺少空状态 empty state）",
      "严重度": "瑕疵",
      "补丁": "<section class="panel">
  <h2>最近活动</h2>
  <ul class="activity-list"></ul>
  <p class="empty-tip" hidden>暂无活动记录</p>
</section>

<style>
.empty-tip {
  color: #999;
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}
</style>

<script>
  const ul = document.querySelector('.activity-list');
  const tip = document.querySelector('.empty-tip');
  if (ul.children.length === 0) {
    tip.hidden = false; // 列表为空时展示空状态文案
  }
</script>"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "位置": "底部「最近活动」面板的标题文字",
      "类型": "可访问性/对比度不足：标题呈极浅灰色，几乎不可见，违反 WCAG 1.4.3 最低对比度要求",
      "严重度": "影响",
      "补丁": "/* 将面板标题颜色由近白浅灰改为深灰，确保对比度 ≥ 4.5:1 */
.panel-title {
  color: #1f2937;
  font-weight: 600;
}"
    },
    {
      "位置": "「最近活动」面板内容区（5 条横线）",
      "类型": "内容缺失/加载态异常：列表仅有分隔线（或停留在骨架屏），无任何条目，也缺少空态与加载提示",
      "严重度": "影响",
      "补丁": "{/* 删除裸分隔线/骨架线，补齐加载与空态逻辑 */}
{loading ? (
  <div role="status" aria-live="polite">加载中…</div>
) : items.length === 0 ? (
  <p className="empty">暂无活动</p>
) : (
  items.map(it => <ActivityRow key={it.id} item={it} />)
)}"
    },
    {
      "位置": "顶部三张统计卡片（卡片 1 / 卡片 2 / 卡片 3）",
      "类型": "占位内容未替换：卡片标题为占位符，数值无指标名称和单位，用户无法理解数据含义",
      "严重度": "瑕疵",
      "补丁": "<!-- 将占位标题替换为真实指标名并补充单位 -->
<div class="card"><div class="card-title">今日访问量</div><div class="card-value">137 次</div></div>
<div class="card"><div class="card-title">本周新增用户</div><div class="card-value">274 人</div></div>
<div class="card"><div class="card-title">待处理工单</div><div class="card-value">411 单</div></div>"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "位置描述": "页面中部『卡片 2』区域：存在一个粉红色背景、红色边框的矩形浮层，覆盖了卡片 2 的数值区域，且向下溢出卡片边界，延伸至卡片区与『最近活动』面板之间的空隙处",
      "缺陷类型": "元素错位 / 调试或错误高亮遮罩泄漏（绝对定位 + 层级错误），导致卡片 2 的核心数值被完全遮挡",
      "严重度": "影响",
      "补丁代码": "// 源码修复：删除该误留的遮罩节点，例如：
// - <div class="card2-debug-mask"></div>

// 临时热修（可在控制台直接执行，移除该粉色浮层）：
document.querySelectorAll('div').forEach(el => {
  const s = getComputedStyle(el);
  if (s.position === 'absolute' && /^rgb\\(25[0-9], 2[0-3][0-9], 2[0-3][0-9]\\)$/.test(s.backgroundColor)) {
    el.remove();
  }
});
// 移除后需验证卡片 2 的数值是否正常渲染"
    },
    {
      "位置描述": "页面底部『最近活动』面板：内部仅有 4 条灰色占位横线（骨架屏样式），无任何真实数据，也没有『暂无活动』之类的空状态提示",
      "缺陷类型": "空状态缺失 / 加载占位符未处理（疑似骨架屏滞留或未实现空态文案）",
      "严重度": "瑕疵",
      "补丁代码": "<!-- 将骨架横线替换为带空态判断的列表 -->
<div class="recent-activity">
  <h3>最近活动</h3>
  <% if (activities.length === 0) { %>
    <p class="activity-empty">暂无最近活动</p>
  <% } else { %>
    <ul>
      <% activities.forEach(a => { %><li><%= a.text %></li><% }) %>
    </ul>
  <% } %>
</div>
<style>
.activity-empty { color: #999; font-size: 13px; padding: 16px 0; }
</style>"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "location": "顶部深蓝色导航栏的标题文字",
      "type": "本地化不一致：页面主体为中文（卡片、最近活动），标题却是英文 "Acme Dashboard"，中英文混用",
      "severity": "瑕疵",
      "patch": "<!-- 将标题改为与界面语言一致，或接入 i18n -->
<!-- before -->
<h1 class="app-title">Acme Dashboard</h1>
<!-- after -->
<h1 class="app-title">Acme 数据看板</h1>
<!-- 若使用 i18n：-->
<!-- <h1 class="app-title">{{ t('app.title') }}</h1> -->"
    },
    {
      "location": ""最近活动" 列表区域",
      "type": "缺少空状态处理：列表为空时只渲染了几条空白分隔线，没有任何占位提示（如"暂无活动"），用户无法区分是"没有数据"还是"加载失败"",
      "severity": "影响",
      "patch": "// React 示例：为空列表增加空状态
<section className="activity">
  <h2>最近活动</h2>
  {activities.length === 0 ? (
    <p className="empty-tip">暂无最近活动</p>
  ) : (
    <ul className="activity-list">
      {activities.map(a => (
        <li key={a.id}>
          <span>{a.text}</span>
          <time>{a.time}</time>
        </li>
      ))}
    </ul>
  )}
</section>

/* 配套 CSS */
.empty-tip {
  color: #8a94a6;
  font-size: 14px;
  text-align: center;
  padding: 32px 0;
}"
    },
    {
      "location": "顶部三张统计卡片（卡片 1 / 卡片 2 / 卡片 3）",
      "type": "占位文案未替换：卡片标题仍是开发占位符（"卡片 N"），且数值无单位、无指标含义，用户无法理解 137/274/411 代表什么",
      "severity": "影响",
      "patch": "// 用真实指标名替换单位与标签（以下名称为示例，需按实际业务确认）
const cards = [
  { id: 1, label: '今日访问量', value: 137, unit: '次' },
  { id: 2, label: '本周新增订单', value: 274, unit: '单' },
  { id: 3, label: '活跃用户数', value: 411, unit: '人' },
];

// 渲染
<div className="card-row">
  {cards.map(c => (
    <div className="card" key={c.id}>
      <div className="card-label">{c.label}</div>
      <div className="card-value">
        {c.value}
        <span className="card-unit">{c.unit}</span>
      </div>
    </div>
  ))}
</div>"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "id": 1,
      "位置描述": "顶部深蓝色标题栏中的主标题文本 "Acme Dashboard"",
      "缺陷类型": "本地化/文案一致性缺陷：同一界面内标题为英文，其余内容（卡片 1、最近活动）均为中文，语言混排",
      "严重度": "瑕疵",
      "补丁代码": "<!-- 将标题统一为中文，并声明页面语言 -->
<html lang="zh-CN">
...
<header class="topbar">
-   <h1>Acme Dashboard</h1>
+   <h1>Acme 仪表盘</h1>
</header>"
    },
    {
      "id": 2,
      "位置描述": ""最近活动" 面板的主体区域：仅有若干条水平分隔线，没有任何数据行，也没有 "暂无数据" 之类的空状态提示",
      "缺陷类型": "可用性缺陷：空状态（empty state）缺失，用户无法区分"加载中"、"无数据"还是"渲染异常"",
      "严重度": "影响",
      "补丁代码": "<!-- 列表为空时渲染空状态提示 -->
<ul class="activity-list">
  {activities.length === 0
    ? <li class="empty-state">暂无最近活动</li>
    : activities.map(a => <li key={a.id}>{a.text}</li>)}
</ul>

<style>
.empty-state {
  color: #8a94a6;
  text-align: center;
  padding: 32px 0;
  border-bottom: none;
}
</style>"
    },
    {
      "id": 3,
      "位置描述": "三张统计卡片的横向布局：左侧留白约 20px，而第 3 张卡片右缘几乎贴住视口右边（约 8~10px），左右边距不对称",
      "缺陷类型": "视觉/布局缺陷：栅格宽度计算导致溢出或外边距不均",
      "严重度": "瑕疵",
      "补丁代码": "/* 用 flex + gap 替代固定宽度列，保证两侧留白一致 */
.card-row {
  display: flex;
  gap: 20px;
  padding: 0 20px;
}
.card-row .card {
  flex: 1 1 0;
  min-width: 0;
}"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "位置描述": "页面底部「最近活动」面板：内容区仅有数条灰色占位横线，无任何活动数据，也没有空状态或加载状态提示",
      "缺陷类型": "可用性缺陷（缺失空状态 empty state）",
      "严重度": "影响",
      "补丁代码": "// RecentActivity.jsx：区分 加载中 / 空 / 有数据 三种状态
{loading ? (
  <div className='skeleton' aria-busy='true' />
) : items.length === 0 ? (
  <div className='empty-state'>
    <p>暂无活动</p>
    <button onClick={onRefresh}>刷新</button>
  </div>
) : (
  items.map(it => <ActivityRow key={it.id} item={it} />)
)}

/* style.css */
.empty-state { color: #888; text-align: center; padding: 32px 0; }"
    },
    {
      "位置描述": "顶部导航栏标题「Acme Dashboard」为英文，而页面其余文案（卡片 1/2/3、最近活动）均为中文，界面语言不一致",
      "缺陷类型": "国际化 / 文案一致性（i18n）",
      "严重度": "瑕疵",
      "补丁代码": "- <h1>Acme Dashboard</h1>
+ <h1>{t('header.title')}</h1>

// locales/zh-CN.json
{ "header.title": "Acme 控制台" }
// locales/en-US.json
{ "header.title": "Acme Dashboard" }"
    },
    {
      "位置描述": "三张指标卡片的标题为开发占位文案「卡片 1 / 卡片 2 / 卡片 3」，数值 137/274/411 没有指标名称、单位或同比等信息，用户无法理解数据含义",
      "缺陷类型": "内容缺陷（占位文案未替换、指标缺少上下文）",
      "严重度": "影响",
      "补丁代码": "- <Card title='卡片 1' value={137} />
- <Card title='卡片 2' value={274} />
- <Card title='卡片 3' value={411} />
+ <StatCard label={t('metric.visits')} value={137} unit='次' />
+ <StatCard label={t('metric.orders')} value={274} unit='单' />
+ <StatCard label={t('metric.users')}  value={411} unit='人' />
// 注：label 需替换为产品定义的真实指标名；
// 数值渲染建议使用 value.toLocaleString() 以支持千分位"
    }
  ],
  "none": false
}
```

```json
{
  "defects": [
    {
      "location": "顶部深蓝色导航栏中的标题 "Acme Dashboard"",
      "defect_type": "文本被裁切（顶部内边距不足 / line-height 过小），标题字形紧贴甚至超出导航栏上边缘",
      "severity": "影响",
      "patch": "/* 修复标题被顶部裁切 */
.app-header {
  box-sizing: border-box;
  padding: 16px 24px;   /* 原 padding-top 不足，补足上下留白 */
  display: flex;
  align-items: center;
}
.app-header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;     /* 避免行高过小导致字形上半部被裁 */
  overflow: visible;
}"
    },
    {
      "location": ""最近活动" 列表区域",
      "defect_type": "缺少空状态（empty state）：列表为空时仅渲染灰色占位横线，用户无法区分"正在加载"与"暂无数据"",
      "severity": "影响",
      "patch": "<!-- 空列表时渲染空状态提示，而非空白占位行 -->
<ul class="activity-list">
  {items.length === 0
    ? <li class="empty">暂无最近活动</li>
    : items.map(item => <li>{item.text}</li>)}
</ul>

<style>
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list .empty {
  color: #8a94a6;
  text-align: center;
  padding: 32px 0;
}
</style>"
    },
    {
      "location": "顶部导航栏标题 "Acme Dashboard" 与页面其余文案（"卡片 1"、"最近活动"）",
      "defect_type": "国际化/文案语言不一致：标题为英文，其余界面为中文",
      "severity": "瑕疵",
      "patch": "<!-- 统一界面语言：将标题本地化，或接入 i18n -->
<h1>Acme 控制台</h1>
<!-- 推荐改为 i18n key：-->
<!-- <h1>{{ t('app.title') }}</h1>，zh-CN: "Acme 控制台" -->"
    }
  ],
  "none": false
}
```