feat: T1.5 风险工作台 — 后端 CRUD + 前端风险列表
- 后端：risks 路由（列表/详情/创建/更新/删除）+ 状态流转 - 前端：风险工作台页（卡片列表、状态筛选、内联状态切换、删除） - 测试：6 个风险 CRUD 测试（总计 43 tests passed） - 前端构建 13 路由成功
This commit is contained in:
selfrelease
@@ -0,0 +1,186 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { AlertTriangle, Trash2, Filter } from "lucide-react";
|
||||
import {
|
||||
listRisks,
|
||||
updateRisk,
|
||||
deleteRisk,
|
||||
RISK_STATUS_LABELS,
|
||||
RISK_STATUS_COLORS,
|
||||
SEVERITY_LABELS,
|
||||
SEVERITY_COLORS,
|
||||
RISK_TYPE_LABELS,
|
||||
type RiskEvent,
|
||||
} from "@/lib/risks";
|
||||
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
|
||||
/**
|
||||
* 投资人端 — 风险工作台。
|
||||
*/
|
||||
export default function RisksPage() {
|
||||
const [risks, setRisks] = useState<RiskEvent[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 20;
|
||||
|
||||
const loadRisks = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const resp = await listRisks({
|
||||
page,
|
||||
page_size: pageSize,
|
||||
status: statusFilter || undefined,
|
||||
});
|
||||
if (resp.data) {
|
||||
setRisks(resp.data.items);
|
||||
setTotal(resp.data.total);
|
||||
}
|
||||
} catch {
|
||||
setRisks([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [page, statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
loadRisks();
|
||||
}, [loadRisks]);
|
||||
|
||||
async function handleStatusChange(id: string, newStatus: string) {
|
||||
try {
|
||||
await updateRisk(id, { status: newStatus });
|
||||
loadRisks();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "更新失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
if (!confirm("确认删除该风险事件？")) return;
|
||||
try {
|
||||
await deleteRisk(id);
|
||||
loadRisks();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">风险工作台</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">共 {total} 条风险事件</p>
|
||||
</div>
|
||||
|
||||
{/* 状态筛选 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter size={16} className="text-muted-foreground" aria-hidden="true" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="rounded-md border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--investor-primary)]"
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
{Object.entries(RISK_STATUS_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : risks.length === 0 ? (
|
||||
<EmptyState title="暂无风险事件" description="系统将自动检测并展示风险预警" />
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{risks.map((risk) => (
|
||||
<div
|
||||
key={risk.id}
|
||||
className="rounded-lg border bg-white p-4 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle
|
||||
size={18}
|
||||
className={SEVERITY_COLORS[risk.severity] || "text-muted-foreground"}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 className="font-semibold text-foreground">{risk.title}</h3>
|
||||
<span className={`rounded-full px-2 py-0.5 text-xs ${RISK_STATUS_COLORS[risk.status] || ""}`}>
|
||||
{RISK_STATUS_LABELS[risk.status] || risk.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex gap-3 text-xs text-muted-foreground">
|
||||
<span>{RISK_TYPE_LABELS[risk.type] || risk.type}</span>
|
||||
<span className={SEVERITY_COLORS[risk.severity]}>
|
||||
严重度: {SEVERITY_LABELS[risk.severity] || risk.severity}
|
||||
</span>
|
||||
<span>{new Date(risk.identified_at).toLocaleDateString("zh-CN")}</span>
|
||||
</div>
|
||||
{risk.description && (
|
||||
<p className="mt-2 text-sm text-muted-foreground">{risk.description}</p>
|
||||
)}
|
||||
{risk.suggested_action && (
|
||||
<p className="mt-1 text-sm text-blue-600">
|
||||
建议：{risk.suggested_action}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={risk.status}
|
||||
onChange={(e) => handleStatusChange(risk.id, e.target.value)}
|
||||
className="rounded-md border bg-background px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--investor-primary)]"
|
||||
>
|
||||
{Object.entries(RISK_STATUS_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => handleDelete(risk.id)}
|
||||
className="rounded p-1.5 text-[var(--destructive)] hover:bg-rose-50"
|
||||
aria-label="删除"
|
||||
>
|
||||
<Trash2 size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{total > pageSize && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
第 {page} 页 / 共 {Math.ceil(total / pageSize)} 页
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={page >= Math.ceil(total / pageSize)}
|
||||
className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user