feat(frontend): T1.3 月报管理页 — 投资人端列表 + 提交/删除
- 月报列表页：表格展示、状态标签、分页 - 操作：提交月报（draft→submitted）、删除月报 - API 客户端：reports.ts 封装 CRUD + submit - 前端构建 12 路由成功
This commit is contained in:
selfrelease
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { FileText, Plus, Trash2, Send } from "lucide-react";
|
||||
import { listReports, submitReport, deleteReport, STATUS_LABELS, STATUS_COLORS, type MonthlyReport } from "@/lib/reports";
|
||||
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
|
||||
/**
|
||||
* 投资人端 — 月报管理页。
|
||||
*/
|
||||
export default function ReportsPage() {
|
||||
const [reports, setReports] = useState<MonthlyReport[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 20;
|
||||
|
||||
const loadReports = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const resp = await listReports({ page, page_size: pageSize });
|
||||
if (resp.data) {
|
||||
setReports(resp.data.items);
|
||||
setTotal(resp.data.total);
|
||||
}
|
||||
} catch {
|
||||
setReports([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
loadReports();
|
||||
}, [loadReports]);
|
||||
|
||||
async function handleSubmit(id: string) {
|
||||
try {
|
||||
await submitReport(id);
|
||||
loadReports();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "提交失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
if (!confirm("确认删除该月报？")) return;
|
||||
try {
|
||||
await deleteReport(id);
|
||||
loadReports();
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : "删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">月报管理</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">共 {total} 份月报</p>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 rounded-md bg-[var(--investor-primary)] px-4 py-2 text-sm font-medium text-white hover:opacity-90">
|
||||
<Plus size={16} aria-hidden="true" />
|
||||
创建月报
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : reports.length === 0 ? (
|
||||
<EmptyState title="暂无月报" description="点击右上角创建月报" />
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-lg border bg-white shadow-sm">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">期间</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">状态</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">内容摘要</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">提交时间</th>
|
||||
<th className="px-4 py-3 text-right font-medium text-muted-foreground">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{reports.map((report) => (
|
||||
<tr key={report.id} className="hover:bg-muted/30">
|
||||
<td className="px-4 py-3 font-medium">
|
||||
{report.period_year}年{report.period_month}月
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`rounded-full px-2 py-0.5 text-xs ${STATUS_COLORS[report.status] || ""}`}>
|
||||
{STATUS_LABELS[report.status] || report.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="max-w-xs truncate px-4 py-3 text-muted-foreground">
|
||||
{report.raw_content || report.ai_summary || "暂无内容"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">
|
||||
{report.submitted_at
|
||||
? new Date(report.submitted_at).toLocaleDateString("zh-CN")
|
||||
: "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex justify-end gap-2">
|
||||
{report.status === "draft" && (
|
||||
<button
|
||||
onClick={() => handleSubmit(report.id)}
|
||||
className="rounded p-1.5 text-blue-600 hover:bg-blue-50"
|
||||
aria-label="提交"
|
||||
>
|
||||
<Send size={16} aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDelete(report.id)}
|
||||
className="rounded p-1.5 text-[var(--destructive)] hover:bg-rose-50"
|
||||
aria-label="删除"
|
||||
>
|
||||
<Trash2 size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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