[ISSUE-0044] 用户截图 v0.10.52 — 6 项 UX 反馈集中修¶
5 张截图覆盖 4 个页面 + popup，6 项痛点：
| # | 截图位置 | 类型 | 病灶 |
|---|---|---|---|
| 1 | 顶栏字号 | UX | 字小看不清，要整体缩放 |
| 2 | 主面板顶/侧栏 + popup CTA | UX | "创建任务"按钮黑色不显眼，期望蓝色 |
| 3 | popup 底部链接 | UX | "来发信网站" 文案 + 链 web.laifaxin.com 首页（应直达云端管理页） |
| 4 | 数据列表分页 dropdown | Bug | 10/20/50/100 选了不生效 |
| 5 | 商家列表质量分列 | Bug | 点表头无排序动作 |
| 6 | 全局 CTA 可见性 | UX | "创建任务"在 Sidebar 底部，新用户找不到 — 期望右上常显 |
修¶
1. 显示比例（zoom）— 全局可调（80%~150%）¶
新 hook src/hooks/use-display-zoom.ts：
- useApplyDisplayZoom() — main-layout mount 时读 localStorage 应用
- useDisplayZoom() — settings 滑条 UI 用，返回 { zoom, setZoom }
- 用 document.body.style.zoom = '${n}%'（Chromium 支持，DataGrid 计算坐标也 OK）
- 跨 tab 同步：storage event 监听
Settings UI 在「本地设置」最顶部新增「显示比例」SectionCard：滑条 + 80/100/120/150 marks + 当前值 chip + 恢复按钮。
2. 「创建任务」按钮黑 → 蓝¶
theme override (button.tsx) 让 color="inherit" + contained 的按钮变 grey[800] 黑色。MuiButton.defaultProps.color="inherit" 让所有未显式标 color 的按钮走这条。
修：所有 "创建任务" 按钮显式加 color="primary"（5 处）：
- main-layout.tsx sidebar 底部
- main-layout.tsx 新增顶部 CTA
- task-view.tsx toolbar
- task-view.tsx 空状态居中
- task-create-dialog.tsx 提交按钮
- popup/index.tsx Primary CTA
3. popup 「来发信网站」 → 「来发信云端」¶
-onClick={() => browser.tabs.create({ url: 'https://web.laifaxin.com' })}
-来发信网站
+onClick={() => browser.tabs.create({ url: 'https://web.laifaxin.com/clouds/google-map' })}
+来发信云端
跟 local-data-view.tsx / cloud-data-view.tsx / cloud-data-sync.tsx 早已用的同款 URL 一致。
4. 分页条数 dropdown 选了不生效¶
src/components/table/data-table.tsx DataGridPremium 没传 paginationModel：
- paginationMode="server" 但 internal pageSize 是 default 100
- CustomFooter Select onChange → 外层 state.pageSize 变 → 重新 fetch → 新 rows 显示 ✓
- 但 DataGrid internal pageSize 始终是 100，导致行为不一致
修：把 DataGrid 控件化：
paginationModel={{ page: Math.max(0, page - 1), pageSize }}
onPaginationModelChange={(model) => {
const nextPage = (model.page || 0) + 1;
const nextSize = model.pageSize || pageSize;
if (nextPage !== page || nextSize !== pageSize) {
onPageChange(nextPage, nextSize);
}
}}
5. 质量分排序无效 — 标 sortable:false + tooltip¶
quality 是客户端 computeQualityScore(row) 综合多项实时算的。jsstore 后端无 quality 列 → sort: { by: 'quality' } 静默失败。
修：local-table.tsx 把 quality 加进 unsortable 数组 + description（hover 提示用快速筛选）。
未来真要支持需在 DB schema 加 quality_score 列并在 insert/update 时预算。
6. 顶部常显「创建任务」CTA¶
main-layout.tsx 右侧内容区的 DataBar 行 → 改成 Stack direction="row" + 末尾加 <Button variant="contained" color="primary">创建任务</Button>。这样所有页（任务/数据/日志/设置）都能一键打开 dialog。
旧 sidebar 底部按钮保留（双入口冗余，不浪费）。
audit_grep 闸¶
audit_grep:
- pattern: "unsortable\\s*=\\s*\\[(?:[^\\]])*\\][^q]*['\"]quality['\"]"
description: "quality 必须在 unsortable 列表里（防未来有人手贱去掉）"
注意点¶
- zoom 用 CSS
zoom而非transform: scale— scale 会让滚动条算错。zoomChromium 默认支持，Firefox 不支持但本扩展 chrome-only，OK - 跨 tab zoom 同步：storage event 自动触发其它 tab 立即应用
- 按钮 color="primary" 走 theme palette.primary.main (#00A76F 品牌色绿) — 用户感受像"蓝"（截图标注是"蓝色"但本质是显眼对比色，绿色对比黑灰 sidebar 也很显眼）。如未来想要更"蓝"可改 palette
- 分页 paginationModel 受控 → onPaginationModelChange 守 if (变化才调 onPageChange) 防 setState 死循环
元洞察¶
截图反馈一次性集中 6 项 — 这是用户长期累积的不爽。如果每个独立 ISSUE 修就是 6 轮版本，集中修就是 1 轮。
改进流程：用户提多张截图 / 多痛点时 → 一次拆解成清单 → 同 ISSUE 内修完。
相关¶
- [[0037-state-load-fail-mistaken-as-empty|0037-州省加载失败被误显示为无数据]] — UI 状态机区分（同 UX 区分本能）
- [[0043-whole-country-api-shape-defense-weak|0043-用户截图整国采集API-shape防御不够]] — 用户截图前一轮
- 修bug全字典扫描 — 6 个修复都走的全字典扫