用 grid 实现意见反馈类型选择网格，关键在于结构清晰、点击反馈明确、响应式适配：小屏3列、中大屏4–5列，采用 repeat(auto-fit, minmax(280px, 1fr)) 自动布局，配合 gap: 1rem 和直接子元素约束；每项含图标与文字，统一圆角、内边距、浅灰底色，选中态强化边框与背景；单选逻辑简洁，通过 state 控制选中态，禁用项用视觉灰度+tooltip；窄屏适配字体13px、内边距10px、图标18px，并限制文本溢出；需确保 resize 时列数动态重算。
用 Grid 实现意见反馈类型选择网格，关键在结构清晰、点击反馈明确、适配不同屏幕，同时保持操作轻量。它不是单纯排版，而是把“类型”变成可感知、可响应的交互单元。
列数按屏幕自动调整
小屏竖屏为主，3 列足够；中大屏空间充裕，可扩展到 4 或 5 列。不靠媒体查询硬切，推荐用：
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) —— 每项最小 280px（保障文字+图标可读），超出部分均分，空列自动收起
- 搭配 gap: 1rem 控制项间距，用 rem 单位更稳，高 DPR 屏也不糊
- 确保反馈项是 Grid 容器的直接子元素，别套多余 div，否则 auto-fit 失效
每项统一视觉+状态反馈
用户需要一眼看出“这是个可点的选项”，且点击后有明确变化：
- 卡片用 border-radius: 8px + padding: 12px + 轻灰底色（如
#f9f9f9） - 选中态加 border: 2px solid #007aff 和背景色微调（如
#e6f0ff），避免纯色块冲击 - 图标用 width: 20px; height: 20px; margin-right: 8px;，文字 font-size: 14px; line-height: 1.4
- 所有项设 justify-self: center; align-self: start;，保证图标文字垂直对齐一致
点击与状态管理要简洁
反馈类型本质是单选，逻辑越简单越不容易出错：
- 每个选项绑定 onClick={() => setSelectedType(id)}，用一个 state 记录当前选中 ID
- 渲染时比对 selectedType === item.id，动态加 class 控制样式
- 避免用 disabled 或 pointer-events: none，保留可点击感；禁用场景改用视觉灰度（opacity: 0.6）+ tooltip 提示
- 如果支持“无偏好”或“其他”，单独设为最后一项，底部留白区隔
窄屏下内容不挤压
手机端容易因字体、内边距过大导致文字换行或溢出：
- 小屏时字体降到 13px，内边距减为 padding: 10px
- 图标尺寸同步缩至 18px，保持比例协调
- 用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防长文本撑开卡片
- 测试真机：横屏切回竖屏时，Grid 是否重新计算列数（需监听 resize 或 useBreakpoint）
