feat(feedback): 截图上传 + 我的反馈历史 + 后台管理页

后端
- 接入阿里云 OSS（ali-oss SDK），bucket=lnh2etest，目录 /dos/feedback/YYYY-MM-DD/
- POST /api/feedback/upload：单图 multipart 上传，限制 5MB，仅 png/jpeg/webp/gif
- bi_user_feedback 增加 screenshots(JSON)、reply_content/reply_user/reply_at、user_id 索引
  老表通过 try-catch 自动 ALTER 兼容
- POST /api/feedback/submit：增加 screenshots[] 字段
- GET /api/feedback/mine：当前用户自己的反馈历史
- PATCH /api/feedback/:id：更新状态 + 回复
- GET /api/feedback/list：增加 status 过滤

前端
- FeedbackFab 改为悬浮按钮 + 弹出菜单：「提个建议」/「我的反馈」
- 弹窗 Step 2 增加截图区：点击选择 / 多张 / 直接 Ctrl+V 粘贴
  缩略图预览 + 单张移除，最多 6 张，上传中转圈
- FeedbackHistoryDrawer 新组件：底部抽屉展示自己的反馈
  含状态徽章（待处理/处理中/已完成/已忽略）、截图缩略图、产品同学回复区
- 新增隐藏后台管理页 /admin/feedback（或 #/admin/feedback）
  状态分类计数 + 列表 + 详情弹窗（改状态 + 写回复，状态选项含徽章色）
  待处理项有快捷按钮（标记处理中 / 忽略）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/FeedbackFab.tsx

@@ -1,7 +1,39 @@
 import { useEffect, useRef, useState } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
-import { MessageCircleHeart, X, ChevronRight, ChevronLeft, Check, Sparkles } from 'lucide-react';
+import { MessageCircleHeart, X, ChevronRight, ChevronLeft, Check, Sparkles, ImagePlus, Loader2, Inbox } from 'lucide-react';
 import { fetchJson } from '../auth/api-client';
+import FeedbackHistoryDrawer from './FeedbackHistoryDrawer';
+
+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);
+  const token = sessionStorage.getItem('bi_jwt');
+  const res = await fetch('/api/feedback/upload', {
+    method: 'POST',
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+    body: fd,
+  });
+  const json = await res.json();
+  if (!res.ok || !json.ok) throw new Error(json.message || `上传失败 (${res.status})`);
+  return json.url as string;
+}
+
+function readAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result || ''));
+    r.onerror = reject;
+    r.readAsDataURL(file);
+  });
+}
 
 type FeedbackType = 'dimension' | 'bug' | 'ux' | 'other';
 
@@ -37,14 +69,42 @@ interface Props {
 
 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 | 4>(1);
   const [type, setType] = useState<FeedbackType | null>(null);
   const [mod, setMod] = useState<string>('');
   const [content, setContent] = useState('');
   const [contact, setContact] = useState('');
+  const [shots, setShots] = useState<UploadedImg[]>([]);
+  const [uploading, setUploading] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const taRef = useRef<HTMLTextAreaElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = async (files: FileList | File[]) => {
+    const list = Array.from(files).filter(f => f.type.startsWith('image/'));
+    if (list.length === 0) return;
+    setError(null);
+    setUploading(true);
+    try {
+      for (const f of list) {
+        if (shots.length >= MAX_SCREENSHOTS) break;
+        if (f.size > MAX_IMG_SIZE_MB * 1024 * 1024) {
+          setError(`「${f.name}」超过 ${MAX_IMG_SIZE_MB}MB`);
+          continue;
+        }
+        const thumbDataUrl = await readAsDataUrl(f);
+        const url = await uploadImage(f);
+        setShots(prev => prev.length >= MAX_SCREENSHOTS ? prev : [...prev, { url, thumbDataUrl }]);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setUploading(false);
+    }
+  };
 
   // Open: detect current module
   useEffect(() => {
@@ -66,6 +126,7 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
     setType(null);
     setContent('');
     setContact('');
+    setShots([]);
     setError(null);
   };
 
@@ -87,6 +148,7 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
           module: mod || null,
           content: content.trim(),
           contact: contact.trim() || null,
+          screenshots: shots.map(s => s.url),
           userAgent: navigator.userAgent.slice(0, 500),
         }),
       });
@@ -119,20 +181,57 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
   return (
     <>
       {/* Floating Action Button */}
-      <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={() => setOpen(true)}
-        className="fixed bottom-20 right-4 md:bottom-6 md:right-6 z-[60] 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>
+      <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>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* 点击外面关菜单 */}
+        {menuOpen && (
+          <div
+            className="fixed inset-0 z-[-1]"
+            onClick={() => setMenuOpen(false)}
+          />
+        )}
+      </div>
+
+      <FeedbackHistoryDrawer open={historyOpen} onClose={() => setHistoryOpen(false)} />
 
       {/* Modal */}
       <AnimatePresence>
@@ -223,12 +322,28 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
                           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 === 'bug'    ? '比如：氢能页面 04-28 嘉燃经开站显示 153.81，但…（可粘贴截图）'
                             : type === 'ux'     ? '比如：能不能把外部 tab 默认收起，加载快一点…'
                                                 : '随便聊聊你的想法'
                           }
@@ -236,6 +351,46 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
                         />
                         <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">
@@ -250,6 +405,8 @@ export default function FeedbackFab({ module: moduleProp }: Props = {}) {
                           ))}
                         </div>
                       </div>
+
+                      {error && <div className="text-[11px] text-rose-500 font-bold">{error}</div>}
                     </motion.div>
                   )}