feat(frontend): T1.3 月报管理页 — 投资人端列表 + 提交/删除

- 月报列表页：表格展示、状态标签、分页 - 操作：提交月报（draft→submitted）、删除月报 - API 客户端：reports.ts 封装 CRUD + submit - 前端构建 12 路由成功
2026-07-18 22:01:35 +08:00
parent 263f474c90
commit 353a52a401
2 changed files with 257 additions and 0 deletions
@@ -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>
+  );
+}
@@ -0,0 +1,100 @@
+/** 月报相关类型和 API 函数。 */
+
+import { apiFetch, type ApiResponse } from "./api";
+
+/** 月报信息。 */
+export interface MonthlyReport {
+  id: string;
+  company_id: string;
+  period_year: number;
+  period_month: number;
+  status: string;
+  raw_content: string | null;
+  structured_data: Record<string, unknown> | null;
+  ai_summary: string | null;
+  ai_concerns: Record<string, unknown> | null;
+  submitted_by: string | null;
+  submitted_at: string | null;
+  reviewed_by: string | null;
+  reviewed_at: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+/** 月报列表响应。 */
+export interface ReportListResponse {
+  items: MonthlyReport[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+/** 创建月报参数。 */
+export interface ReportInput {
+  company_id: string;
+  period_year: number;
+  period_month: number;
+  raw_content?: string | null;
+}
+
+/** 状态标签映射。 */
+export const STATUS_LABELS: Record<string, string> = {
+  draft: "草稿",
+  submitted: "已提交",
+  ai_parsed: "AI 已解析",
+  reviewed: "已审阅",
+};
+
+/** 状态颜色映射。 */
+export const STATUS_COLORS: Record<string, string> = {
+  draft: "bg-muted text-muted-foreground",
+  submitted: "bg-blue-100 text-blue-700",
+  ai_parsed: "bg-purple-100 text-purple-700",
+  reviewed: "bg-emerald-100 text-emerald-700",
+};
+
+/**
+ * 获取月报列表。
+ */
+export async function listReports(params?: {
+  company_id?: string;
+  page?: number;
+  page_size?: number;
+}): Promise<ApiResponse<ReportListResponse>> {
+  const query = new URLSearchParams();
+  if (params?.company_id) query.set("company_id", params.company_id);
+  if (params?.page) query.set("page", String(params.page));
+  if (params?.page_size) query.set("page_size", String(params.page_size));
+  return apiFetch<ReportListResponse>(`/reports?${query.toString()}`);
+}
+
+/**
+ * 获取月报详情。
+ */
+export async function getReport(id: string): Promise<ApiResponse<MonthlyReport>> {
+  return apiFetch<MonthlyReport>(`/reports/${id}`);
+}
+
+/**
+ * 创建月报。
+ */
+export async function createReport(data: ReportInput): Promise<ApiResponse<MonthlyReport>> {
+  return apiFetch<MonthlyReport>("/reports", {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+}
+
+/**
+ * 提交月报。
+ */
+export async function submitReport(id: string): Promise<ApiResponse<MonthlyReport>> {
+  return apiFetch<MonthlyReport>(`/reports/${id}/submit`, { method: "POST" });
+}
+
+/**
+ * 删除月报。
+ */
+export async function deleteReport(id: string): Promise<ApiResponse<null>> {
+  return apiFetch<null>(`/reports/${id}`, { method: "DELETE" });
+}