feat(feedback): 截图上传 + 我的反馈历史 + 后台管理页
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
后端 - 接入阿里云 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>
This commit is contained in:
kkfluous
330
src/modules/admin/FeedbackAdminPage.tsx
Normal file
330
src/modules/admin/FeedbackAdminPage.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { Inbox, RotateCcw, X, Send, CheckCircle2, AlertCircle, Image as ImageIcon, Loader2 } from 'lucide-react';
|
||||
import { fetchJson } from '../../auth/api-client';
|
||||
|
||||
interface FeedbackItem {
|
||||
id: number;
|
||||
type: 'dimension' | 'bug' | 'ux' | 'other';
|
||||
module: string | null;
|
||||
content: string;
|
||||
contact: string | null;
|
||||
screenshots: string[] | string | null;
|
||||
user_id: string | null;
|
||||
user_name: string | null;
|
||||
status: 'open' | 'in_progress' | 'done' | 'rejected';
|
||||
reply_content: string | null;
|
||||
reply_user: string | null;
|
||||
reply_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const TYPE_LABEL: Record<string, string> = {
|
||||
dimension: '💡 新维度',
|
||||
bug: '🐛 Bug',
|
||||
ux: '🎨 体验',
|
||||
other: '📝 其他',
|
||||
};
|
||||
|
||||
const STATUS_OPTIONS: { key: FeedbackItem['status']; label: string; cls: string }[] = [
|
||||
{ key: 'open', label: '待处理', cls: 'bg-slate-100 text-slate-500 border-slate-200' },
|
||||
{ key: 'in_progress', label: '处理中', cls: 'bg-amber-100 text-amber-600 border-amber-200' },
|
||||
{ key: 'done', label: '已完成', cls: 'bg-emerald-100 text-emerald-600 border-emerald-200' },
|
||||
{ key: 'rejected', label: '已忽略', cls: 'bg-rose-100 text-rose-500 border-rose-200' },
|
||||
];
|
||||
|
||||
const MODULE_LABELS: Record<string, string> = {
|
||||
assets: '资产管理',
|
||||
mileage: '里程管理',
|
||||
energy: '能源管理',
|
||||
scheduling: '智能调度',
|
||||
ele: '充电导入',
|
||||
};
|
||||
|
||||
function parseScreenshots(s: FeedbackItem['screenshots']): string[] {
|
||||
if (!s) return [];
|
||||
if (Array.isArray(s)) return s;
|
||||
try { return JSON.parse(String(s)); } catch { return []; }
|
||||
}
|
||||
|
||||
async function patchItem(id: number, data: { status?: string; reply?: string }): Promise<void> {
|
||||
const token = sessionStorage.getItem('bi_jwt');
|
||||
const res = await fetch(`/api/feedback/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok || !json.ok) throw new Error(json.message || `更新失败 (${res.status})`);
|
||||
}
|
||||
|
||||
export default function FeedbackAdminPage() {
|
||||
const [items, setItems] = useState<FeedbackItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [statusFilter, setStatusFilter] = useState<'' | FeedbackItem['status']>('');
|
||||
const [active, setActive] = useState<FeedbackItem | null>(null);
|
||||
const [replyDraft, setReplyDraft] = useState('');
|
||||
const [replyStatus, setReplyStatus] = useState<FeedbackItem['status']>('done');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [hint, setHint] = useState<string | null>(null);
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
params.set('limit', '200');
|
||||
const d = await fetchJson<{ items: FeedbackItem[] }>(`/api/feedback/list?${params.toString()}`);
|
||||
setItems(d.items);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [statusFilter]);
|
||||
|
||||
useEffect(() => { reload(); }, [reload]);
|
||||
|
||||
const open = (it: FeedbackItem) => {
|
||||
setActive(it);
|
||||
setReplyDraft(it.reply_content || '');
|
||||
setReplyStatus(it.status === 'open' ? 'done' : it.status);
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!active) return;
|
||||
setSaving(true);
|
||||
setHint(null);
|
||||
try {
|
||||
await patchItem(active.id, { status: replyStatus, reply: replyDraft });
|
||||
setHint('已保存');
|
||||
setActive(null);
|
||||
await reload();
|
||||
} catch (e) {
|
||||
setHint(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setTimeout(() => setHint(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const setStatusOnly = async (it: FeedbackItem, status: FeedbackItem['status']) => {
|
||||
try {
|
||||
await patchItem(it.id, { status });
|
||||
await reload();
|
||||
} catch (e) {
|
||||
setHint(e instanceof Error ? e.message : String(e));
|
||||
setTimeout(() => setHint(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const counters = items.reduce<Record<string, number>>((m, it) => {
|
||||
m[it.status] = (m[it.status] || 0) + 1;
|
||||
return m;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F9FB] p-4 md:p-8">
|
||||
<div className="max-w-5xl mx-auto space-y-4">
|
||||
<header className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center">
|
||||
<Inbox size={18} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-black text-slate-900 leading-tight">用户反馈管理</h1>
|
||||
<p className="text-[11px] font-bold text-slate-400">查看、回复、跟进用户提交的建议</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={reload} className="p-2 text-slate-400 hover:text-blue-500" title="刷新">
|
||||
<RotateCcw size={16} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* 状态过滤 */}
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-2 flex items-center gap-1 overflow-x-auto">
|
||||
<button
|
||||
onClick={() => setStatusFilter('')}
|
||||
className={`px-3 py-1.5 rounded-lg text-[11px] font-bold whitespace-nowrap ${statusFilter === '' ? 'bg-blue-50 text-blue-600' : 'text-slate-500 hover:bg-slate-50'}`}
|
||||
>全部 {items.length}</button>
|
||||
{STATUS_OPTIONS.map(o => (
|
||||
<button
|
||||
key={o.key}
|
||||
onClick={() => setStatusFilter(statusFilter === o.key ? '' : o.key)}
|
||||
className={`px-3 py-1.5 rounded-lg text-[11px] font-bold whitespace-nowrap ${statusFilter === o.key ? `${o.cls} border` : 'text-slate-500 hover:bg-slate-50'}`}
|
||||
>
|
||||
{o.label} {counters[o.key] ?? 0}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-rose-50 border border-rose-100 rounded-xl p-3 flex items-center gap-2 text-[12px] font-bold text-rose-600">
|
||||
<AlertCircle size={14} /> {error}
|
||||
</div>
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{hint && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
className="bg-emerald-50 border border-emerald-100 rounded-xl p-3 flex items-center gap-2 text-[12px] font-bold text-emerald-600"
|
||||
>
|
||||
<CheckCircle2 size={14} /> {hint}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 列表 */}
|
||||
<div className="space-y-2">
|
||||
{loading && items.length === 0 ? (
|
||||
<div className="bg-white rounded-2xl p-10 text-center text-slate-300 text-[12px] font-bold">加载中…</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="bg-white rounded-2xl p-10 text-center text-slate-300 text-[12px] font-bold">还没有反馈</div>
|
||||
) : items.map(it => {
|
||||
const shots = parseScreenshots(it.screenshots);
|
||||
const statusOpt = STATUS_OPTIONS.find(o => o.key === it.status);
|
||||
return (
|
||||
<div
|
||||
key={it.id}
|
||||
className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 cursor-pointer hover:border-blue-200 transition-colors"
|
||||
onClick={() => open(it)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-wrap mb-1.5">
|
||||
<span className="text-[11px] font-bold text-slate-500">{TYPE_LABEL[it.type] || it.type}</span>
|
||||
{it.module && <span className="text-[10px] text-slate-400 font-bold">{MODULE_LABELS[it.module] || it.module}</span>}
|
||||
<span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${statusOpt?.cls || 'bg-slate-50 text-slate-400 border-slate-200'}`}>
|
||||
{statusOpt?.label || it.status}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 ml-auto">
|
||||
{(it.user_name || it.user_id || '匿名')} · {(it.created_at || '').replace('T', ' ').slice(0, 16)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[12px] text-slate-700 leading-relaxed line-clamp-2 break-words">{it.content}</div>
|
||||
{(shots.length > 0 || it.contact) && (
|
||||
<div className="flex items-center gap-3 mt-2 text-[10px] text-slate-400 font-bold">
|
||||
{shots.length > 0 && <span className="flex items-center gap-0.5"><ImageIcon size={11} />{shots.length} 张</span>}
|
||||
{it.contact && <span>📞 {it.contact}</span>}
|
||||
</div>
|
||||
)}
|
||||
{it.reply_content && (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-lg px-2.5 py-1.5 mt-2 text-[11px] text-slate-600 line-clamp-1">
|
||||
回复: {it.reply_content}
|
||||
</div>
|
||||
)}
|
||||
{it.status === 'open' && (
|
||||
<div className="flex gap-1 mt-2 pt-2 border-t border-slate-50" onClick={(e) => e.stopPropagation()}>
|
||||
<button onClick={() => setStatusOnly(it, 'in_progress')} className="flex-1 px-2 py-1 rounded text-[10px] font-bold bg-amber-50 text-amber-600 hover:bg-amber-100">标记处理中</button>
|
||||
<button onClick={() => setStatusOnly(it, 'rejected')} className="px-2 py-1 rounded text-[10px] font-bold bg-rose-50 text-rose-500 hover:bg-rose-100">忽略</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 详情 / 回复弹窗 */}
|
||||
<AnimatePresence>
|
||||
{active && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[80] bg-slate-900/40 backdrop-blur-sm flex items-end md:items-center justify-center"
|
||||
onClick={() => setActive(null)}
|
||||
>
|
||||
<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-xl md:rounded-3xl rounded-t-3xl shadow-2xl max-h-[92vh] overflow-hidden flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-center pt-2.5 pb-1">
|
||||
<div className="w-10 h-1 rounded-full bg-slate-300" />
|
||||
</div>
|
||||
<div className="px-4 pb-3 border-b border-slate-100 flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-black text-slate-800 leading-tight">反馈详情 #{active.id}</div>
|
||||
<div className="text-[10px] text-slate-400 font-bold">
|
||||
{active.user_name || active.user_id || '匿名'} · {(active.created_at || '').replace('T', ' ').slice(0, 16)}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setActive(null)} className="p-1.5 text-slate-400 hover:text-slate-700">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
|
||||
<div className="bg-slate-50 rounded-xl p-3 space-y-2">
|
||||
<div className="flex items-center gap-1.5 flex-wrap text-[10px] font-bold">
|
||||
<span className="text-slate-500">{TYPE_LABEL[active.type] || active.type}</span>
|
||||
{active.module && <span className="text-slate-400">板块: {MODULE_LABELS[active.module] || active.module}</span>}
|
||||
{active.contact && <span className="text-slate-400">联系: {active.contact}</span>}
|
||||
</div>
|
||||
<div className="text-[12px] text-slate-700 leading-relaxed whitespace-pre-wrap break-words">{active.content}</div>
|
||||
{parseScreenshots(active.screenshots).length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{parseScreenshots(active.screenshots).map((u, i) => (
|
||||
<a key={i} href={u} target="_blank" rel="noreferrer" className="block w-20 h-20 rounded-lg overflow-hidden border border-slate-200">
|
||||
<img src={u} alt="" className="w-full h-full object-cover" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase mb-1.5">状态</p>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{STATUS_OPTIONS.map(o => (
|
||||
<button
|
||||
key={o.key}
|
||||
onClick={() => setReplyStatus(o.key)}
|
||||
className={`px-3 py-1 rounded-full text-[11px] font-bold border ${replyStatus === o.key ? o.cls : 'bg-white text-slate-500 border-slate-200 hover:border-slate-300'}`}
|
||||
>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase mb-1.5">回复内容</p>
|
||||
<textarea
|
||||
value={replyDraft}
|
||||
onChange={(e) => setReplyDraft(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={2000}
|
||||
placeholder="给用户的回复（用户在「我的反馈」里能看到）"
|
||||
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">{replyDraft.length} / 2000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-3 border-t border-slate-100 flex items-center gap-2">
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
onClick={() => setActive(null)}
|
||||
className="px-3 py-2 rounded-xl text-[12px] font-bold text-slate-500 hover:bg-slate-50"
|
||||
>取消</button>
|
||||
<button
|
||||
onClick={save}
|
||||
disabled={saving}
|
||||
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"
|
||||
>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Send size={13} />}
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user