2569718930@qq.com
517 lines
21 KiB
TypeScript
517 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { Bug, CheckCircle2, Coins, MessageSquare, RefreshCcw } from "lucide-react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { opsApi } from "@/lib/ops-api";
|
|
import type { UserFeedbackEntry, UserFeedbackPayload } from "@/types/ops";
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ key: "", label: "全部" },
|
|
{ key: "open", label: "新建" },
|
|
{ key: "triaged", label: "已确认" },
|
|
{ key: "investigating", label: "处理中" },
|
|
{ key: "resolved", label: "已解决" },
|
|
{ key: "closed", label: "关闭" },
|
|
] as const;
|
|
|
|
const STATUS_UPDATE_OPTIONS = STATUS_OPTIONS.filter((item) => item.key);
|
|
|
|
const REWARD_POINT_OPTIONS = [
|
|
{ value: 100, label: "100 分", title: "轻量提醒" },
|
|
{ value: 300, label: "300 分", title: "可复现 Bug" },
|
|
{ value: 500, label: "500 分", title: "有效数据问题" },
|
|
{ value: 1000, label: "1000 分", title: "高影响问题" },
|
|
{ value: 1500, label: "1500 分", title: "重大事故" },
|
|
] as const;
|
|
|
|
const REWARD_GUIDELINES = [
|
|
{ points: "0", title: "无效/重复", detail: "重复反馈、无法复现、非问题" },
|
|
{ points: "100", title: "轻量提醒", detail: "文案、体验、小范围提示" },
|
|
{ points: "300", title: "可复现 Bug", detail: "加载失败、操作异常、局部影响" },
|
|
{ points: "500", title: "有效数据问题", detail: "城市数据、图表、关键变量异常" },
|
|
{ points: "1000", title: "高影响问题", detail: "支付、账号、订阅、核心终端异常" },
|
|
{ points: "1500", title: "重大事故", detail: "大面积不可用或严重业务损失，谨慎使用" },
|
|
] as const;
|
|
|
|
function compactDate(value?: string) {
|
|
if (!value) return "—";
|
|
return value.slice(0, 19).replace("T", " ");
|
|
}
|
|
|
|
function categoryLabel(value?: string) {
|
|
const key = String(value || "").toLowerCase();
|
|
if (key === "bug") return "Bug";
|
|
if (key === "data") return "数据";
|
|
if (key === "idea") return "建议";
|
|
if (key === "payment") return "支付";
|
|
if (key === "account") return "账号";
|
|
return "其他";
|
|
}
|
|
|
|
function statusLabel(value?: string) {
|
|
const key = String(value || "open").toLowerCase();
|
|
if (key === "open") return "新建";
|
|
if (key === "triaged") return "已确认";
|
|
if (key === "investigating") return "处理中";
|
|
if (key === "resolved") return "已解决";
|
|
if (key === "closed") return "关闭";
|
|
return key;
|
|
}
|
|
|
|
function statusTone(value?: string) {
|
|
const key = String(value || "open").toLowerCase();
|
|
if (key === "open") return "border-red-200 bg-red-50 text-red-700";
|
|
if (key === "triaged") return "border-amber-200 bg-amber-50 text-amber-700";
|
|
if (key === "investigating") return "border-blue-200 bg-blue-50 text-blue-700";
|
|
if (key === "resolved") return "border-emerald-200 bg-emerald-50 text-emerald-700";
|
|
return "border-slate-200 bg-slate-50 text-slate-600";
|
|
}
|
|
|
|
function contextSummary(context?: Record<string, unknown>) {
|
|
if (!context) return "—";
|
|
const city = String(context.city || context.display_city || "").trim();
|
|
const slot = context.slot_index != null ? `slot ${context.slot_index}` : "";
|
|
const source = String(context.source || "").trim();
|
|
const pieces = [city, slot, source].filter(Boolean);
|
|
return pieces.length ? pieces.join(" · ") : "terminal";
|
|
}
|
|
|
|
function objectRecord(value: unknown): Record<string, unknown> | null {
|
|
return value && typeof value === "object" && !Array.isArray(value)
|
|
? value as Record<string, unknown>
|
|
: null;
|
|
}
|
|
|
|
function finiteNumber(value: unknown) {
|
|
const number = Number(value);
|
|
return Number.isFinite(number) ? number : null;
|
|
}
|
|
|
|
function formatSeconds(value: unknown) {
|
|
const number = finiteNumber(value);
|
|
return number === null ? null : `${number}s`;
|
|
}
|
|
|
|
function latencyTone(value: unknown) {
|
|
const number = finiteNumber(value);
|
|
if (number === null) return "border-slate-200 bg-slate-50 text-slate-600";
|
|
if (number >= 300) return "border-red-200 bg-red-50 text-red-700";
|
|
if (number >= 60) return "border-amber-200 bg-amber-50 text-amber-700";
|
|
return "border-emerald-200 bg-emerald-50 text-emerald-700";
|
|
}
|
|
|
|
function feedbackFreshnessBadges(context?: Record<string, unknown>) {
|
|
const freshness = objectRecord(context?.freshness);
|
|
const detailBatchDiagnostics = objectRecord(context?.detail_batch_diagnostics);
|
|
const badges: Array<{ key: string; label: string; tone: string }> = [];
|
|
|
|
const livePath = String(freshness?.live_path || context?.live_path || "").trim();
|
|
const liveAge = formatSeconds(freshness?.live_age_sec ?? context?.live_age_sec);
|
|
if (livePath) {
|
|
badges.push({
|
|
key: "live",
|
|
label: liveAge ? `实时 ${livePath} ${liveAge}` : `实时 ${livePath}`,
|
|
tone: latencyTone(freshness?.live_age_sec ?? context?.live_age_sec),
|
|
});
|
|
}
|
|
|
|
const detailStatus = String(freshness?.detail_status || context?.detail_status || "").trim();
|
|
const detailSource = String(freshness?.detail_source || context?.detail_source || "").trim();
|
|
if (detailStatus) {
|
|
badges.push({
|
|
key: "detail",
|
|
label: detailSource ? `详情 ${detailStatus}/${detailSource}` : `详情 ${detailStatus}`,
|
|
tone: ["degraded", "stale_cache"].includes(detailStatus)
|
|
? "border-amber-200 bg-amber-50 text-amber-700"
|
|
: "border-slate-200 bg-slate-50 text-slate-600",
|
|
});
|
|
}
|
|
|
|
const sseServerToClientLatency = formatSeconds(freshness?.sse_server_to_client_latency_sec);
|
|
if (sseServerToClientLatency) {
|
|
badges.push({
|
|
key: "sse-server",
|
|
label: `SSE ${sseServerToClientLatency}`,
|
|
tone: latencyTone(freshness?.sse_server_to_client_latency_sec),
|
|
});
|
|
}
|
|
|
|
const sseCollectorToClientLatency = formatSeconds(freshness?.sse_collector_to_client_latency_sec);
|
|
if (sseCollectorToClientLatency) {
|
|
badges.push({
|
|
key: "sse-collector",
|
|
label: `采集到前端 ${sseCollectorToClientLatency}`,
|
|
tone: latencyTone(freshness?.sse_collector_to_client_latency_sec),
|
|
});
|
|
}
|
|
|
|
const sseSourceToCollectorLatency = formatSeconds(freshness?.sse_source_to_collector_latency_sec);
|
|
if (sseSourceToCollectorLatency) {
|
|
badges.push({
|
|
key: "sse-source",
|
|
label: `源到采集 ${sseSourceToCollectorLatency}`,
|
|
tone: latencyTone(freshness?.sse_source_to_collector_latency_sec),
|
|
});
|
|
}
|
|
|
|
const partialReason = String(detailBatchDiagnostics?.partial_reason || "").trim();
|
|
const responseSource = String(detailBatchDiagnostics?.response_source || "").trim();
|
|
if (partialReason || responseSource) {
|
|
badges.push({
|
|
key: "batch",
|
|
label: responseSource
|
|
? `批量 ${partialReason || "ok"} · ${responseSource}`
|
|
: `批量 ${partialReason}`,
|
|
tone: partialReason
|
|
? "border-amber-200 bg-amber-50 text-amber-700"
|
|
: "border-slate-200 bg-slate-50 text-slate-600",
|
|
});
|
|
}
|
|
|
|
const missingCount = finiteNumber(detailBatchDiagnostics?.missing_count);
|
|
const errorCount = finiteNumber(detailBatchDiagnostics?.error_count);
|
|
if (missingCount || errorCount) {
|
|
badges.push({
|
|
key: "batch-counts",
|
|
label: `缺失 ${missingCount || 0} · 错误 ${errorCount || 0}`,
|
|
tone: "border-red-200 bg-red-50 text-red-700",
|
|
});
|
|
}
|
|
|
|
return badges;
|
|
}
|
|
|
|
export function FeedbackPageClient() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadError, setLoadError] = useState("");
|
|
const [actionError, setActionError] = useState("");
|
|
const [filter, setFilter] = useState("");
|
|
const [payload, setPayload] = useState<UserFeedbackPayload | null>(null);
|
|
const [updatingId, setUpdatingId] = useState<number | null>(null);
|
|
const [rewardingId, setRewardingId] = useState<number | null>(null);
|
|
const [rewardPointsById, setRewardPointsById] = useState<Record<number, string>>({});
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
setLoadError("");
|
|
try {
|
|
const data = (await opsApi.feedback(120, filter)) as UserFeedbackPayload;
|
|
setPayload(data);
|
|
} catch (err) {
|
|
setLoadError(String(err).slice(0, 220));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [filter]);
|
|
|
|
const rows = payload?.feedback || [];
|
|
const counts = payload?.status_counts || {};
|
|
const openCount = Number(counts.open || 0);
|
|
const activeCount = Number(counts.open || 0) + Number(counts.triaged || 0) + Number(counts.investigating || 0);
|
|
|
|
const categoryCounts = useMemo(() => {
|
|
const acc: Record<string, number> = {};
|
|
rows.forEach((row) => {
|
|
const key = String(row.category || "other");
|
|
acc[key] = (acc[key] || 0) + 1;
|
|
});
|
|
return acc;
|
|
}, [rows]);
|
|
|
|
const changeStatus = async (row: UserFeedbackEntry, next: string) => {
|
|
const current = String(row.status || "open").toLowerCase();
|
|
if (!next || next === current) return;
|
|
setUpdatingId(row.id);
|
|
try {
|
|
await opsApi.updateFeedbackStatus(row.id, next);
|
|
await load();
|
|
} finally {
|
|
setUpdatingId(null);
|
|
}
|
|
};
|
|
|
|
const updateRewardPoints = (rowId: number, points: string) => {
|
|
setRewardPointsById((prev) => ({
|
|
...prev,
|
|
[rowId]: points,
|
|
}));
|
|
};
|
|
|
|
const handleRewardGrant = async (row: UserFeedbackEntry) => {
|
|
const selectedPoints = rewardPointsById[row.id] || String(REWARD_POINT_OPTIONS[1].value);
|
|
const points = Number.parseInt(selectedPoints, 10);
|
|
if (!row.user_email) {
|
|
setActionError("这条反馈没有绑定用户邮箱，不能从反馈页直接发放积分。");
|
|
return;
|
|
}
|
|
if (!Number.isFinite(points) || points <= 0) {
|
|
setActionError("请输入有效的奖励积分。");
|
|
return;
|
|
}
|
|
setRewardingId(row.id);
|
|
setActionError("");
|
|
try {
|
|
await opsApi.grantFeedbackReward(row.id, points);
|
|
setRewardPointsById((prev) => {
|
|
const next = { ...prev };
|
|
delete next[row.id];
|
|
return next;
|
|
});
|
|
await load();
|
|
} catch (err) {
|
|
setActionError(String(err).slice(0, 220));
|
|
} finally {
|
|
setRewardingId(null);
|
|
}
|
|
};
|
|
|
|
if (loading && !payload) {
|
|
return <div className="text-slate-400 animate-pulse">加载中...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-white">用户反馈</h1>
|
|
<Button variant="outline" size="sm" onClick={load} className="gap-1.5">
|
|
<RefreshCcw className="h-3.5 w-3.5" /> 刷新
|
|
</Button>
|
|
</div>
|
|
|
|
{loadError && (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
加载失败：{loadError}
|
|
</div>
|
|
)}
|
|
|
|
{actionError && (
|
|
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
|
|
奖励发放失败：{actionError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
|
<Card>
|
|
<CardContent className="flex items-center gap-3 p-4">
|
|
<Bug className="h-5 w-5 text-red-500" />
|
|
<div>
|
|
<div className="text-xs text-slate-500">新反馈</div>
|
|
<div className="text-2xl font-black text-slate-950">{openCount}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="flex items-center gap-3 p-4">
|
|
<MessageSquare className="h-5 w-5 text-blue-500" />
|
|
<div>
|
|
<div className="text-xs text-slate-500">处理中</div>
|
|
<div className="text-2xl font-black text-slate-950">{activeCount}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="flex items-center gap-3 p-4">
|
|
<CheckCircle2 className="h-5 w-5 text-emerald-500" />
|
|
<div>
|
|
<div className="text-xs text-slate-500">已解决</div>
|
|
<div className="text-2xl font-black text-slate-950">{Number(counts.resolved || 0)}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="text-xs text-slate-500">当前列表</div>
|
|
<div className="mt-1 text-2xl font-black text-slate-950">{rows.length}</div>
|
|
<div className="mt-1 text-xs text-slate-500">
|
|
Bug {categoryCounts.bug || 0} · 数据 {categoryCounts.data || 0} · 建议 {categoryCounts.idea || 0}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle>积分奖励标准</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-2 md:grid-cols-3 xl:grid-cols-6">
|
|
{REWARD_GUIDELINES.map((item) => (
|
|
<div
|
|
key={item.points}
|
|
className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
|
|
>
|
|
<div className="font-mono text-sm font-black text-blue-700">
|
|
{item.points} 分
|
|
</div>
|
|
<div className="mt-1 text-xs font-bold text-slate-900">
|
|
{item.title}
|
|
</div>
|
|
<div className="mt-1 text-[11px] leading-4 text-slate-500">
|
|
{item.detail}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="mt-2 text-xs text-slate-500">
|
|
先确认反馈是否有效；未复现的问题可先标为已确认/处理中，奖励发放后会自动记录到用户账户页。
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between gap-3">
|
|
<CardTitle>反馈收件箱</CardTitle>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{STATUS_OPTIONS.map((item) => (
|
|
<button
|
|
key={item.key || "all"}
|
|
type="button"
|
|
onClick={() => setFilter(item.key)}
|
|
className={
|
|
"rounded border px-2.5 py-1 text-xs font-bold transition " +
|
|
(filter === item.key
|
|
? "border-blue-300 bg-blue-50 text-blue-700"
|
|
: "border-slate-200 bg-white text-slate-500 hover:bg-slate-50")
|
|
}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{rows.length === 0 ? (
|
|
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500">
|
|
暂无反馈。
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200 text-left text-slate-500">
|
|
<th className="py-2 pr-4 font-bold">状态</th>
|
|
<th className="py-2 pr-4 font-bold">类型</th>
|
|
<th className="py-2 pr-4 font-bold">内容</th>
|
|
<th className="py-2 pr-4 font-bold">上下文</th>
|
|
<th className="py-2 pr-4 font-bold">用户</th>
|
|
<th className="py-2 pr-4 font-bold">时间</th>
|
|
<th className="py-2 pr-4 font-bold">奖励</th>
|
|
<th className="py-2 pr-4 font-bold">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row) => {
|
|
const selectedPoints = rewardPointsById[row.id] || String(REWARD_POINT_OPTIONS[1].value);
|
|
const rewardPoints = Number(row.reward_points || 0);
|
|
const rewardStatus = String(row.reward_status || "").toLowerCase();
|
|
const hasReward = rewardStatus === "granted" && rewardPoints > 0;
|
|
const freshnessBadges = feedbackFreshnessBadges(row.context);
|
|
return (
|
|
<tr key={row.id} className="border-b border-slate-100 align-top">
|
|
<td className="py-3 pr-4">
|
|
<span className={`inline-flex rounded-md border px-2 py-1 text-xs font-bold ${statusTone(row.status)}`}>
|
|
{statusLabel(row.status)}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 pr-4 text-slate-500">{categoryLabel(row.category)}</td>
|
|
<td className="max-w-xl py-3 pr-4">
|
|
<div className="font-semibold leading-5 text-slate-900">{row.message || "—"}</div>
|
|
{row.contact && <div className="mt-1 text-xs text-slate-500">联系：{row.contact}</div>}
|
|
</td>
|
|
<td className="py-3 pr-4">
|
|
<div className="font-mono text-xs text-blue-700">{contextSummary(row.context)}</div>
|
|
{Boolean(row.context?.detail_error) && (
|
|
<div className="mt-1 max-w-xs text-xs text-amber-700">
|
|
{String(row.context?.detail_error || "").slice(0, 120)}
|
|
</div>
|
|
)}
|
|
{freshnessBadges.length > 0 && (
|
|
<div className="mt-2 flex max-w-xs flex-wrap gap-1.5">
|
|
{freshnessBadges.map((item) => (
|
|
<span
|
|
key={item.key}
|
|
className={`rounded border px-1.5 py-0.5 text-[10px] font-bold ${item.tone}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="py-3 pr-4 font-mono text-xs text-slate-500">
|
|
{row.user_email || row.user_id || "—"}
|
|
</td>
|
|
<td className="whitespace-nowrap py-3 pr-4 text-xs text-slate-500">{compactDate(row.created_at)}</td>
|
|
<td className="min-w-[170px] py-3 pr-4">
|
|
{hasReward ? (
|
|
<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs">
|
|
<div className="font-black text-emerald-700">
|
|
已发放 +{rewardPoints.toLocaleString()} 分
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
<select
|
|
value={selectedPoints}
|
|
onChange={(event) => updateRewardPoints(row.id, event.target.value)}
|
|
disabled={rewardingId === row.id || !row.user_email}
|
|
className="h-8 w-full rounded border border-slate-200 bg-white px-2 text-xs font-bold text-slate-700 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:opacity-60"
|
|
aria-label="奖励积分"
|
|
>
|
|
{REWARD_POINT_OPTIONS.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label} · {item.title}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleRewardGrant(row)}
|
|
disabled={rewardingId === row.id || !row.user_email}
|
|
className="h-8 gap-1.5"
|
|
>
|
|
<Coins className="h-3.5 w-3.5" />
|
|
发放奖励
|
|
</Button>
|
|
{!row.user_email && (
|
|
<div className="text-[11px] text-amber-700">无用户邮箱，无法直接发放。</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="py-3 pr-4">
|
|
<select
|
|
value={String(row.status || "open").toLowerCase()}
|
|
onChange={(event) => changeStatus(row, event.target.value)}
|
|
disabled={updatingId === row.id}
|
|
className="h-8 min-w-[108px] rounded border border-slate-200 bg-white px-2 text-xs font-bold text-slate-600 outline-none transition hover:bg-slate-50 focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:cursor-wait disabled:opacity-60"
|
|
aria-label="更新反馈状态"
|
|
>
|
|
{STATUS_UPDATE_OPTIONS.map((item) => (
|
|
<option key={item.key} value={item.key}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|