refactor: modularize application domains

src/components/FeedbackFab.tsx

@@ -1,24 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import {
-  MessageCircleHeart, X, ChevronRight, ChevronLeft, Check, Sparkles,
-  ImagePlus, Loader2, Inbox, Lightbulb, Bug, Palette, NotebookPen, Settings2,
-  type LucideIcon,
-} from 'lucide-react';
 import { fetchJson } from '../auth/api-client';
 import { useAuth } from '../auth/useAuth';
 import { canManageFeedback } from '../shared/auth/roles';
 import FeedbackHistoryDrawer from './FeedbackHistoryDrawer';
-import RotatingFooterHint from './RotatingFooterHint';
+import FeedbackLauncher from './feedback/FeedbackLauncher';
+import FeedbackModal from './feedback/FeedbackModal';
+import type { FeedbackStep, FeedbackType, UploadedImg } from './feedback/types';
 
 const MAX_SCREENSHOTS = 6;
 const MAX_IMG_SIZE_MB = 5;
 
-interface UploadedImg {
-  url: string;
-  thumbDataUrl: string;
-}
-
 async function uploadImage(file: File): Promise<string> {
   const fd = new FormData();
   fd.append('file', file);
@@ -42,38 +33,6 @@ function readAsDataUrl(file: File): Promise<string> {
   });
 }
 
-type FeedbackType = 'dimension' | 'bug' | 'ux' | 'other';
-
-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<string, string> = {
-  assets: '资产管理',
-  mileage: '里程管理',
-  energy: '能源管理',
-  scheduling: '智能调度',
-  ele: '充电导入',
-  '': '通用',
-};
-
 function detectModule(): string {
   const hash = (window.location.hash || '').slice(1);
   const path = window.location.pathname;
@@ -94,7 +53,7 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
   const [open, setOpen] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [step, setStep] = useState<1 | 2 | 3>(1); // 1=选类型, 2=写内容, 3=成功页
+  const [step, setStep] = useState<FeedbackStep>(1);
   const [type, setType] = useState<FeedbackType | null>(null);
   const [mod, setMod] = useState<string>('');
   const [content, setContent] = useState('');
@@ -128,14 +87,12 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
     }
   };
 
-  // Open: detect current module
   useEffect(() => {
     if (open && step === 1) {
       setMod(moduleProp ?? detectModule());
     }
   }, [open, step, moduleProp]);
 
-  // Lock scroll when open
   useEffect(() => {
     if (!open) return;
     const prev = document.body.style.overflow;
@@ -153,7 +110,7 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
 
   const close = () => {
     setOpen(false);
-    setTimeout(reset, 300); // 等动画完
+    setTimeout(reset, 300);
   };
 
   const submit = async () => {
@@ -193,319 +150,48 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
     }
   };
 
-  const back = () => setStep((Math.max(1, step - 1)) as typeof step);
+  const back = () => setStep((Math.max(1, step - 1)) as FeedbackStep);
 
   const canNext = step === 1 ? !!type : step === 2 ? content.trim().length > 0 : true;
   const progress = step >= 3 ? 100 : (step / 2) * 100;
 
   return (
     <>
-      {/* Floating Action Button */}
-      <div className="fixed bottom-20 right-4 md:bottom-6 md:right-6 z-[60]">
-        <motion.button
-          initial={{ scale: 0, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{ delay: 0.4, type: 'spring', stiffness: 300, damping: 20 }}
-          whileHover={{ scale: 1.08 }}
-          whileTap={{ scale: 0.92 }}
-          onClick={() => setMenuOpen(m => !m)}
-          className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 text-white shadow-lg shadow-blue-200 flex items-center justify-center group"
-          aria-label="反馈"
-          title="提建议 / 我的反馈"
-        >
-          <MessageCircleHeart size={20} className="drop-shadow group-hover:scale-110 transition-transform" />
-          <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-amber-300 ring-2 ring-white animate-pulse" />
-        </motion.button>
-
-        <AnimatePresence>
-          {menuOpen && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 8 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 8 }}
-              transition={{ duration: 0.15 }}
-              className="absolute bottom-14 right-0 bg-white rounded-2xl shadow-xl border border-slate-100 p-1.5 min-w-[148px] flex flex-col gap-0.5"
-            >
-              <button
-                onClick={() => { setMenuOpen(false); setOpen(true); }}
-                className="flex items-center gap-2 px-3 py-2 text-[12px] font-bold text-slate-700 rounded-lg hover:bg-blue-50 hover:text-blue-600 text-left"
-              >
-                <Sparkles size={14} className="text-blue-500" /> 提个建议
-              </button>
-              <button
-                onClick={() => { setMenuOpen(false); setHistoryOpen(true); }}
-                className="flex items-center gap-2 px-3 py-2 text-[12px] font-bold text-slate-700 rounded-lg hover:bg-emerald-50 hover:text-emerald-600 text-left"
-              >
-                <Inbox size={14} className="text-emerald-500" /> 我的反馈
-              </button>
-              {isAdmin && (
-                <>
-                  <div className="h-px bg-slate-100 my-0.5" />
-                  <a
-                    href="#/admin/feedback"
-                    onClick={() => setMenuOpen(false)}
-                    className="flex items-center gap-2 px-3 py-2 text-[12px] font-bold text-slate-700 rounded-lg hover:bg-violet-50 hover:text-violet-600"
-                  >
-                    <Settings2 size={14} className="text-violet-500" /> 反馈管理
-                  </a>
-                </>
-              )}
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* 点击外面关菜单 */}
-        {menuOpen && (
-          <div
-            className="fixed inset-0 z-[-1]"
-            onClick={() => setMenuOpen(false)}
-          />
-        )}
-      </div>
+      <FeedbackLauncher
+        isAdmin={isAdmin}
+        menuOpen={menuOpen}
+        onCloseMenu={() => setMenuOpen(false)}
+        onOpenFeedback={() => { setMenuOpen(false); setOpen(true); }}
+        onOpenHistory={() => { setMenuOpen(false); setHistoryOpen(true); }}
+        onToggleMenu={() => setMenuOpen(current => !current)}
+      />
 
       <FeedbackHistoryDrawer open={historyOpen} onClose={() => setHistoryOpen(false)} />
 
-      {/* Modal */}
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[90] bg-slate-900/40 backdrop-blur-sm flex items-end md:items-center justify-center"
-            // 不允许点击背景关闭：避免用户输入到一半误触遮罩丢失内容
-          >
-            <motion.div
-              initial={{ y: '100%', opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              exit={{ y: '100%', opacity: 0 }}
-              transition={{ y: { type: 'spring', damping: 28, stiffness: 320 }, opacity: { duration: 0.18 } }}
-              className="bg-white w-full md:max-w-md md:rounded-3xl rounded-t-3xl shadow-2xl max-h-[92vh] overflow-hidden flex flex-col"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {/* Drag handle */}
-              <div className="flex justify-center pt-2.5 pb-1">
-                <div className="w-10 h-1 rounded-full bg-slate-300" />
-              </div>
-
-              {/* Header + progress */}
-              <div className="px-4 pb-3 border-b border-slate-100">
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center">
-                      <Sparkles size={14} className="text-white" />
-                    </div>
-                    <div>
-                      <div className="text-sm font-black text-slate-800 leading-tight">
-                        {step === 3 ? '收到啦~' : '提个建议'}
-                      </div>
-                      <div className="text-[10px] text-slate-400 font-bold">
-                        {step === 1 && '第一步 / 共 2 步'}
-                        {step === 2 && '第二步 / 共 2 步'}
-                        {step === 3 && '感谢你的反馈'}
-                      </div>
-                    </div>
-                  </div>
-                  <button onClick={close} className="p-1.5 -mr-1 text-slate-400 hover:text-slate-700">
-                    <X size={18} />
-                  </button>
-                </div>
-                <div className="h-1 bg-slate-100 rounded-full overflow-hidden">
-                  <motion.div
-                    initial={false}
-                    animate={{ width: `${progress}%` }}
-                    transition={{ type: 'spring', damping: 28, stiffness: 280 }}
-                    className="h-full bg-gradient-to-r from-blue-500 to-cyan-400 rounded-full"
-                  />
-                </div>
-              </div>
-
-              {/* Body */}
-              <div className="flex-1 overflow-y-auto px-4 py-4">
-                <AnimatePresence mode="wait">
-                  {step === 1 && (
-                    <motion.div key="s1" initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }} transition={{ duration: 0.2 }}>
-                      <p className="text-[13px] font-bold text-slate-700 mb-1.5">想反馈点什么？</p>
-                      <RotatingFooterHint className="justify-start mb-4" />
-                      <div className="grid grid-cols-1 gap-2">
-                        {TYPE_OPTIONS.map((opt, i) => {
-                          const Icon = opt.icon;
-                          const selected = type === opt.key;
-                          return (
-                            <motion.button
-                              key={opt.key}
-                              initial={{ opacity: 0, y: 6 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              transition={{ delay: i * 0.04, duration: 0.2 }}
-                              whileHover={{ y: -1 }}
-                              whileTap={{ scale: 0.99 }}
-                              onClick={() => { 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'}`}
-                            >
-                              <div className={`w-10 h-10 rounded-xl ${opt.iconBg} flex items-center justify-center flex-shrink-0`}>
-                                <Icon size={18} className={opt.iconFg} strokeWidth={2.2} />
-                              </div>
-                              <div className="flex-1 min-w-0">
-                                <div className="text-[13px] font-bold text-slate-800 leading-tight">{opt.label}</div>
-                                <div className="text-[11px] text-slate-400 font-medium mt-0.5">{opt.sub}</div>
-                              </div>
-                              <ChevronRight size={15} className="text-slate-300 flex-shrink-0 group-hover:text-slate-500 group-hover:translate-x-0.5 transition-all" />
-                            </motion.button>
-                          );
-                        })}
-                      </div>
-                    </motion.div>
-                  )}
-
-                  {step === 2 && (
-                    <motion.div key="s2" initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }} transition={{ duration: 0.2 }} className="space-y-3">
-                      <div>
-                        <p className="text-[12px] font-bold text-slate-600 mb-2">说说具体内容</p>
-                        <textarea
-                          ref={taRef}
-                          value={content}
-                          onChange={(e) => setContent(e.target.value)}
-                          onPaste={(e) => {
-                            const items = e.clipboardData?.items;
-                            if (!items) return;
-                            const imgs: File[] = [];
-                            for (let i = 0; i < items.length; i++) {
-                              const it = items[i];
-                              if (it.kind === 'file' && it.type.startsWith('image/')) {
-                                const f = it.getAsFile();
-                                if (f) imgs.push(f);
-                              }
-                            }
-                            if (imgs.length > 0) {
-                              e.preventDefault();
-                              addFiles(imgs);
-                            }
-                          }}
-                          autoFocus
-                          rows={5}
-                          maxLength={1000}
-                          placeholder={
-                            type === 'dimension' ? '比如：希望按客户/区域/日期范围 等等切片看里程数据…'
-                            : type === 'bug'    ? '比如：氢能页面 04-28 嘉燃经开站显示 153.81，但…（可粘贴截图）'
-                            : type === 'ux'     ? '比如：能不能把外部 tab 默认收起，加载快一点…'
-                                                : '随便聊聊你的想法'
-                          }
-                          className="w-full bg-slate-50 border-none rounded-xl p-3 text-[12px] text-slate-700 outline-none focus:ring-2 focus:ring-blue-500/20 resize-none"
-                        />
-                        <div className="text-right text-[10px] text-slate-300 font-bold mt-1">{content.length} / 1000</div>
-                      </div>
-
-                      {/* 截图上传 */}
-                      <div>
-                        <div className="flex items-center justify-between mb-1.5">
-                          <p className="text-[10px] font-bold text-slate-400 uppercase">截图（可选）</p>
-                          <span className="text-[10px] text-slate-300 font-bold">{shots.length}/{MAX_SCREENSHOTS}，可粘贴</span>
-                        </div>
-                        <input
-                          ref={fileRef}
-                          type="file"
-                          accept="image/*"
-                          multiple
-                          className="hidden"
-                          onChange={(e) => { if (e.target.files) addFiles(e.target.files); e.target.value = ''; }}
-                        />
-                        <div className="flex flex-wrap gap-1.5">
-                          {shots.map((s, i) => (
-                            <div key={i} className="relative w-16 h-16 rounded-lg overflow-hidden border border-slate-200 bg-slate-50">
-                              <img src={s.thumbDataUrl} alt="" className="w-full h-full object-cover" />
-                              <button
-                                onClick={() => setShots(prev => prev.filter((_, idx) => idx !== i))}
-                                className="absolute top-0.5 right-0.5 w-4 h-4 rounded-full bg-slate-900/70 text-white flex items-center justify-center hover:bg-slate-900"
-                              >
-                                <X size={10} />
-                              </button>
-                            </div>
-                          ))}
-                          {shots.length < MAX_SCREENSHOTS && (
-                            <button
-                              onClick={() => fileRef.current?.click()}
-                              disabled={uploading}
-                              className="w-16 h-16 rounded-lg border border-dashed border-slate-300 bg-slate-50 hover:bg-slate-100 flex flex-col items-center justify-center gap-0.5 text-slate-400"
-                            >
-                              {uploading ? <Loader2 size={16} className="animate-spin" /> : <ImagePlus size={16} />}
-                              <span className="text-[9px] font-bold">{uploading ? '上传中' : '加截图'}</span>
-                            </button>
-                          )}
-                        </div>
-                      </div>
-
-                      <div>
-                        <p className="text-[10px] font-bold text-slate-400 uppercase mb-1.5">所在板块</p>
-                        <div className="flex gap-1 flex-wrap">
-                          {Object.entries(MODULE_LABELS).map(([k, label]) => (
-                            <button
-                              key={k}
-                              onClick={() => setMod(k)}
-                              className={`px-2.5 py-1 rounded-full text-[10px] font-bold border transition-all ${mod === k ? 'bg-blue-50 border-blue-200 text-blue-600' : 'bg-white border-slate-200 text-slate-500 hover:border-slate-300'}`}
-                            >
-                              {label}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-
-                      {error && <div className="text-[11px] text-rose-500 font-bold">{error}</div>}
-                    </motion.div>
-                  )}
-
-                  {step === 3 && (
-                    <motion.div key="s3" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.3 }} className="text-center py-6">
-                      <motion.div
-                        initial={{ scale: 0, rotate: -180 }}
-                        animate={{ scale: 1, rotate: 0 }}
-                        transition={{ type: 'spring', damping: 12, stiffness: 200, delay: 0.1 }}
-                        className="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-400 mx-auto flex items-center justify-center mb-3"
-                      >
-                        <Check size={28} strokeWidth={3} className="text-white" />
-                      </motion.div>
-                      <div className="text-base font-black text-slate-800 mb-1">谢谢你的反馈 ❤️</div>
-                      <div className="text-[12px] text-slate-500 font-bold leading-relaxed">产品同学会认真看每一条<br />有进展可以在「我的反馈」里查看</div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-
-              {/* Footer */}
-              {step < 3 && (
-                <div className="px-4 py-3 border-t border-slate-100 flex items-center gap-2">
-                  {step > 1 && (
-                    <button
-                      onClick={back}
-                      className="px-3 py-2 rounded-xl text-[12px] font-bold text-slate-500 hover:bg-slate-50 flex items-center gap-1"
-                    >
-                      <ChevronLeft size={14} /> 上一步
-                    </button>
-                  )}
-                  <div className="flex-1" />
-                  <button
-                    onClick={next}
-                    disabled={!canNext || submitting}
-                    className="px-4 py-2 rounded-xl text-[12px] font-bold bg-blue-600 text-white shadow shadow-blue-100 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none flex items-center gap-1"
-                  >
-                    {submitting ? '提交中…' : step === 2 ? '提交' : '下一步'}
-                    {!submitting && step !== 2 && <ChevronRight size={14} />}
-                  </button>
-                </div>
-              )}
-              {step === 3 && (
-                <div className="px-4 py-3 border-t border-slate-100">
-                  <button
-                    onClick={close}
-                    className="w-full py-2.5 rounded-xl text-[12px] font-bold bg-blue-600 text-white shadow shadow-blue-100"
-                  >
-                    完成
-                  </button>
-                </div>
-              )}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <FeedbackModal
+        canNext={canNext}
+        content={content}
+        error={error}
+        fileRef={fileRef}
+        maxScreenshots={MAX_SCREENSHOTS}
+        module={mod}
+        open={open}
+        progress={progress}
+        screenshots={shots}
+        step={step}
+        submitting={submitting}
+        textareaRef={taRef}
+        type={type}
+        uploading={uploading}
+        onAddFiles={addFiles}
+        onBack={back}
+        onChangeContent={setContent}
+        onChangeModule={setMod}
+        onClose={close}
+        onNext={next}
+        onRemoveScreenshot={(index) => setShots(prev => prev.filter((_, current) => current !== index))}
+        onSelectType={(selectedType) => { setType(selectedType); setStep(2); }}
+      />
     </>
   );
 }