title: [ISSUE-0021] 商家列表「已完善」状态 chip 参差不齐 description: "状态：已完善参差不齐，建议靠右" tags: [issue, ui] created: 2026-05-26 updated: 2026-05-26 type: issue status: fixed severity: minor

[ISSUE-0021] 商家列表「已完善」状态 chip 参差不齐¶

相关源码：src/sections/page/cell-renderers.tsx

用户感知的现象¶

"状态：已完善参差不齐，建议靠右"

商家列表「商家」列下方第二行显示「分类 ✅ 已完善」。但分类文字长度不一（"Plastic surgeon" / "Dentist" / "Sleep clinic" / "Urgent care center;Emerg..."），状态 chip 紧跟在分类后面，导致每行 chip 位置都不同 → 视觉杂乱。

根因分析¶

RenderName 当前布局：

<Stack direction="row" spacing={0.5}>
  <Typography noWrap>{category}</Typography>
  <Divider />
  <StatusChip status={scrape_status} />
</Stack>

<Stack direction="row"> 默认 flex-start 左对齐 → chip 跟在分类右侧，分类长度不同则 chip x 坐标不同。

修复方案¶

让分类 flex: 1 占满剩余空间，把 chip 推到行尾：

<Stack direction="row" alignItems="center" sx={{ minWidth: 0, gap: 0.5 }}>
  {category && (
    <Typography
      noWrap
      sx={{ flex: 1, minWidth: 0 }}   // ← 关键：flex:1 占余空间
      title={category}
    >
      {category}
    </Typography>
  )}
  {!category && <Box sx={{ flex: 1 }} />}  // 无分类时用空 Box 顶位
  <StatusChip status={scrape_status} />
</Stack>

顺便去掉 <Divider />（远距离不再需要分隔符），加 title 让超长分类悬停看全名。

改动文件¶

文件	改了什么
`src/sections/page/cell-renderers.tsx`	RenderName 的状态 chip 行改用 flex:1 spacer 推 chip 右对齐

验证方式¶

打开数据 → 商家列表
所有行的状态 chip（「已完善」/「挖掘中」/「挖掘失败」）应对齐在「商家」列的右边
没有 chip 的行（待挖掘 status=0）保持空，分类左对齐
超长分类应 ellipsis 截断，hover 显示完整文字

如何避免再犯¶

多元素一行混排，长度不一时默认要 flex 推靠：要么 spacer flex:1，要么 justify-content
写 cell renderer 时先想象「填满 100 行的视觉」：单行看似对齐，100 行一起看才能发现参差不齐
状态/标签类元素默认靠右：用户视线左→右，关键信息（名称、分类）在左，元数据（状态、时间）在右