From c5541fbbf53cd3617fb9babc8e388b269e2f8a41 Mon Sep 17 00:00:00 2001 From: kkfluous Date: Thu, 30 Apr 2026 14:16:26 +0800 Subject: [PATCH] =?UTF-8?q?style(feedback):=20=E9=80=89=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E6=94=B9=E7=94=A8=20Lucide=20=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=20+=20=E5=85=8B=E5=88=B6=E7=99=BD=E5=8D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 之前用 emoji + 整卡渐变背景，颜色饱和度高、和系统其他模块的视觉 语言不一致，看起来有点像玩具。 新视觉： - 替换 emoji 为 Lucide 图标：Lightbulb / Bug / Palette / NotebookPen 与项目其他模块（Truck/Route/Zap）保持一致 - 卡片白底 + 1px 浅边框，hover 阴影；选中态用 ring 替代填色 - 图标放在彩色圆角小容器里（amber/rose/violet/blue），强度更克制 - 标题升级到 13px，副标题统一 11px slate-400 medium - 入场级联动画 + 微交互（hover y=-1，→ 按钮位移） 文案微调：「想反馈点什么？」+ 副标题「选一个最贴近的类型」 Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/FeedbackFab.tsx | 72 ++++++++++++++++++++++++---------- 1 file changed, 51 insertions(+), 21 deletions(-) diff --git a/src/components/FeedbackFab.tsx b/src/components/FeedbackFab.tsx index b3eb92f..4b2df2d 100644 --- a/src/components/FeedbackFab.tsx +++ b/src/components/FeedbackFab.tsx @@ -1,6 +1,10 @@ import { useEffect, useRef, useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; -import { MessageCircleHeart, X, ChevronRight, ChevronLeft, Check, Sparkles, ImagePlus, Loader2, Inbox } from 'lucide-react'; +import { + MessageCircleHeart, X, ChevronRight, ChevronLeft, Check, Sparkles, + ImagePlus, Loader2, Inbox, Lightbulb, Bug, Palette, NotebookPen, + type LucideIcon, +} from 'lucide-react'; import { fetchJson } from '../auth/api-client'; import FeedbackHistoryDrawer from './FeedbackHistoryDrawer'; @@ -37,11 +41,25 @@ function readAsDataUrl(file: File): Promise { type FeedbackType = 'dimension' | 'bug' | 'ux' | 'other'; -const TYPE_OPTIONS: { key: FeedbackType; emoji: string; label: string; sub: string; color: string }[] = [ - { key: 'dimension', emoji: '💡', label: '想看新的统计维度', sub: '比如按 XX 维度分组', color: 'from-amber-50 to-orange-50 border-amber-100' }, - { key: 'bug', emoji: '🐛', label: '报告一个 bug', sub: '哪里看着不对劲', color: 'from-rose-50 to-red-50 border-rose-100' }, - { key: 'ux', emoji: '🎨', label: '界面 / 体验建议', sub: '哪里能更顺手', color: 'from-violet-50 to-fuchsia-50 border-violet-100' }, - { key: 'other', emoji: '📝', label: '其他想法', sub: '欢迎随便聊聊', color: 'from-slate-50 to-blue-50 border-slate-100' }, +interface TypeOption { + key: FeedbackType; + icon: LucideIcon; + label: string; + sub: string; + iconBg: string; + iconFg: string; + ring: string; +} + +const TYPE_OPTIONS: TypeOption[] = [ + { key: 'dimension', icon: Lightbulb, label: '想看新的统计维度', sub: '比如按 XX 维度切片', + iconBg: 'bg-amber-50', iconFg: 'text-amber-500', ring: 'ring-amber-200' }, + { key: 'bug', icon: Bug, label: '报告一个 Bug', sub: '哪里看着不对劲', + iconBg: 'bg-rose-50', iconFg: 'text-rose-500', ring: 'ring-rose-200' }, + { key: 'ux', icon: Palette, label: '界面 / 体验建议', sub: '哪里能更顺手', + iconBg: 'bg-violet-50', iconFg: 'text-violet-500', ring: 'ring-violet-200' }, + { key: 'other', icon: NotebookPen, label: '其他想法', sub: '欢迎随便聊聊', + iconBg: 'bg-blue-50', iconFg: 'text-blue-500', ring: 'ring-blue-200' }, ]; const MODULE_LABELS: Record = { @@ -286,22 +304,34 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) { {step === 1 && ( -

想反馈什么呢？

+

想反馈点什么？

+

选一个最贴近的类型

- {TYPE_OPTIONS.map(opt => ( - - ))} + {TYPE_OPTIONS.map((opt, i) => { + const Icon = opt.icon; + const selected = type === opt.key; + return ( + { setType(opt.key); setStep(2); }} + className={`text-left p-3.5 rounded-2xl border bg-white transition-all flex items-center gap-3 group ${selected ? `ring-2 ${opt.ring} border-transparent shadow-sm` : 'border-slate-100 hover:border-slate-200 hover:shadow-sm'}`} + > +
+ +
+
+
{opt.label}
+
{opt.sub}
+
+ + + ); + })}
)}