title: [ISSUE-0011] 商家详情 Drawer 视觉平淡 description: "美化下详情页面" tags: [issue, ui] created: 2026-05-26 updated: 2026-05-26 type: issue status: fixed severity: minor

[ISSUE-0011] 商家详情 Drawer 视觉平淡¶

相关源码：src/sections/page/merchant-detail-drawer.tsx

用户感知的现象¶

"美化下详情页面"

商家详情 Drawer 信息密度低、视觉平淡： - 头部商家信息 + 4 个 section（联系方式 / 网络存在 / 位置 / 元数据）平铺 - 缺乏视觉层次 - 没有用商家 logo / 评分 highlights

修复方案¶

待设计。方向： - 顶部 Hero 区：大头像 + 评分大字号 + 分类标签 - Section 用 Card 风格分隔（边距 + 浅色背景） - 联系方式加图标 + 点击复制 - 位置加迷你地图缩略图（用 Google Static Maps API 或链接图标即可） - 网络存在用社媒图标网格 - 加渐变 / 阴影 / 圆角强化层次

改动文件¶

文件	改了什么
`src/sections/page/merchant-detail-drawer.tsx`	完整重写。Hero 渐变背景 + 大头像（72px）+ RatingStars 自定义星条 + 质量分 LinearProgress；Section 改 SectionCard（圆角浅底）；社媒图标 36×36 圆角填充网格；位置加国旗 emoji；复制/打开按钮始终显示（drawer 里 hover 体验差）

关键设计变化¶

Hero 区：渐变背景 + 关闭按钮浮在右上 + 状态 chip + 质量分进度条
RatingStars：自定义星条（实星/半星/空星），比纯数字 chip 更直观
SectionCard：每段信息独立浅底 + 圆角，视觉层次清晰
复制/跳转按钮始终可见：drawer 不是 table，没必要 hover 才显示
社媒图标：filled 风格圆角方块（36×36 + alpha 背景），hover 浮起，比之前的 outlined 更视觉

验证方式¶

打开任意商家详情 → 视觉应该明显比 v0.10.17 更精致。

如何避免再犯¶

Drawer / Dialog 不是"功能容器"，是产品门面之一，需要设计感
信息分组用 Card 分隔，比裸列表更清晰