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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/** 风险事件相关类型和 API 函数。 */
|
||||
|
||||
import { apiFetch, type ApiResponse } from "./api";
|
||||
|
||||
/** 风险事件。 */
|
||||
export interface RiskEvent {
|
||||
id: string;
|
||||
company_id: string;
|
||||
type: string;
|
||||
severity: string;
|
||||
status: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
evidence_json: Record<string, unknown> | null;
|
||||
suggested_action: string | null;
|
||||
assigned_to: string | null;
|
||||
due_at: string | null;
|
||||
identified_at: string;
|
||||
closed_at: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/** 风险列表响应。 */
|
||||
export interface RiskListResponse {
|
||||
items: RiskEvent[];
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
}
|
||||
|
||||
/** 状态标签。 */
|
||||
export const RISK_STATUS_LABELS: Record<string, string> = {
|
||||
open: "待处理",
|
||||
assigned: "已分配",
|
||||
in_progress: "处理中",
|
||||
resolved: "已解决",
|
||||
closed: "已关闭",
|
||||
};
|
||||
|
||||
/** 状态颜色。 */
|
||||
export const RISK_STATUS_COLORS: Record<string, string> = {
|
||||
open: "bg-rose-100 text-rose-700",
|
||||
assigned: "bg-amber-100 text-amber-700",
|
||||
in_progress: "bg-blue-100 text-blue-700",
|
||||
resolved: "bg-emerald-100 text-emerald-700",
|
||||
closed: "bg-muted text-muted-foreground",
|
||||
};
|
||||
|
||||
/** 严重程度标签。 */
|
||||
export const SEVERITY_LABELS: Record<string, string> = {
|
||||
low: "低",
|
||||
medium: "中",
|
||||
high: "高",
|
||||
critical: "严重",
|
||||
};
|
||||
|
||||
/** 严重程度颜色。 */
|
||||
export const SEVERITY_COLORS: Record<string, string> = {
|
||||
low: "text-emerald-600",
|
||||
medium: "text-amber-600",
|
||||
high: "text-orange-600",
|
||||
critical: "text-rose-600",
|
||||
};
|
||||
|
||||
/** 风险类型标签。 */
|
||||
export const RISK_TYPE_LABELS: Record<string, string> = {
|
||||
financial: "财务",
|
||||
operational: "经营",
|
||||
org: "组织",
|
||||
ai_specific: "AI 相关",
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取风险列表。
|
||||
*/
|
||||
export async function listRisks(params?: {
|
||||
company_id?: string;
|
||||
status?: string;
|
||||
severity?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}): Promise<ApiResponse<RiskListResponse>> {
|
||||
const query = new URLSearchParams();
|
||||
if (params?.company_id) query.set("company_id", params.company_id);
|
||||
if (params?.status) query.set("status", params.status);
|
||||
if (params?.severity) query.set("severity", params.severity);
|
||||
if (params?.page) query.set("page", String(params.page));
|
||||
if (params?.page_size) query.set("page_size", String(params.page_size));
|
||||
return apiFetch<RiskListResponse>(`/risks?${query.toString()}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新风险事件。
|
||||
*/
|
||||
export async function updateRisk(id: string, data: {
|
||||
status?: string;
|
||||
severity?: string;
|
||||
assigned_to?: string;
|
||||
}): Promise<ApiResponse<RiskEvent>> {
|
||||
return apiFetch<RiskEvent>(`/risks/${id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除风险事件。
|
||||
*/
|
||||
export async function deleteRisk(id: string): Promise<ApiResponse<null>> {
|
||||
return apiFetch<null>(`/risks/${id}`, { method: "DELETE" });
|
||||
}
|
||||
Reference in New Issue
Block a user