From 630b0bf9ba6dba20a08b9042b9a11bc860e323d4 Mon Sep 17 00:00:00 2001
From: longdayi <13477510+longdayilongdayi@user.noreply.gitee.com>
Date: Sat, 25 Jan 2025 23:29:11 +0800
Subject: [PATCH] 01252329

---
 .../web/src/app/main/letter/progress/page.tsx | 198 +++++++++---------
 1 file changed, 103 insertions(+), 95 deletions(-)

diff --git a/apps/web/src/app/main/letter/progress/page.tsx b/apps/web/src/app/main/letter/progress/page.tsx
index eef95c6..274b5c9 100644
--- a/apps/web/src/app/main/letter/progress/page.tsx
+++ b/apps/web/src/app/main/letter/progress/page.tsx
@@ -1,125 +1,133 @@
-import { useState } from "react";
-import { Input, Button, Card, Steps, Tag, Spin, message } from "antd";
+import { useEffect, useState } from "react";
+import { Input, Button, Card, Steps, Tag, Spin, message, Empty } from "antd";
 import { SearchOutlined, SafetyCertificateOutlined } from "@ant-design/icons";
 import ProgressHeader from "./ProgressHeader";
 import { api } from "@nice/client";
 import { LetterBadge } from "@web/src/components/models/post/LetterBadge";
 import dayjs from "dayjs";
+import { LetterCard } from "@web/src/components/models/post/LetterCard";
+import { postDetailSelect } from "@nice/common";
 
 
-const { Step } = Steps;
 
 export default function LetterProgressPage() {
-	const [letterId, setLetterId] = useState<string | undefined>();
-	const { data } = api.post.findFirst.useQuery({
+	const [letterId, setLetterId] = useState<string>();
+	const { data, isFetching, error } = api.post.findFirst.useQuery({
 		where: {
 			id: letterId
-		}
+		},
+		select: postDetailSelect
 	}, { enabled: Boolean(letterId) })
 
+	useEffect(() => {
+		if (error) {
+			message.error('查询失败，请检查信件编码是否正确');
+		}
+	}, [error]);
+
 
 	return (
 		<div
-			className="min-h-screen shadow-elegant border-2 border-white  rounded-xl    bg-gradient-to-b from-slate-100 to-slate-50 "
-			style={{ fontFamily: "Arial, sans-serif" }}>
+			className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-gradient-to-b from-slate-100 to-slate-50">
 			<ProgressHeader></ProgressHeader>
-			{/* Main Content */}
-			<main className="container mx-auto p-6">
-				<div className="space-y-4">
-					<div className="flex gap-4">
-						<Input
-							prefix={
-								<SearchOutlined className=" text-secondary-300" />
-							}
-							size="large"
-							value={letterId}
-							onChange={(e) => setLetterId(e.target.value)}
-							placeholder="请输入信件编码查询处理状态"
-							className="border border-gray-300"
-						/>
-					</div>
+			<main className="container mx-auto p-6 flex flex-col gap-4">
+				<div className="flex gap-4">
+					<Input
+						prefix={
+							<SearchOutlined className=" text-secondary-300" />
+						}
+						size="large"
+						value={letterId}
+						onChange={(e) => setLetterId(e.target.value)}
+						placeholder="请输入信件编码查询处理状态"
 
+					/>
 				</div>
 
 				{/* Results Section */}
-				{data && (
-					<Card>
-						<div className="space-y-6">
-							{/* Header */}
-							<div className="flex items-center justify-between border-b pb-4">
-								<h2 className="text-xl font-semibold text-[#003366]">
-									处理进度
-								</h2>
-								<LetterBadge type="state" value={data?.state}></LetterBadge>
-							</div>
+				<Spin spinning={isFetching} tip="查询中...">
+					{data ? (
+						<>
+							<div className="space-y-6 p-4 rounded-xl bg-white">
+								{/* Header */}
+								<div className="flex items-center justify-between border-b pb-4 space-y-2">
+									<h2 className="text-xl font-semibold text-primary">
+										信件处理进度追踪
+									</h2>
+									<LetterBadge type="state" value={data?.state} className="text-sm" />
+								</div>
 
-							{/* Details Grid */}
-							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-								<div>
-									<p className="text-sm text-gray-600">
-										Ticket ID
-									</p>
-									<p className="font-medium text-[#003366]">
-										{data.id}
-									</p>
+								{/* Details Grid */}
+								<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+									<div>
+										<p className="text-sm text-gray-600">
+											信件编号
+										</p>
+										<p className="font-medium text-[#003366]">
+											{data.id}
+										</p>
+									</div>
+									<div>
+										<p className="text-sm text-gray-600">
+											提交日期
+										</p>
+										<p className="font-medium text-[#003366]">
+											{dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+										</p>
+									</div>
+									<div>
+										<p className="text-sm text-gray-600">
+											最后更新
+										</p>
+										<p className="font-medium text-[#003366]">
+											{dayjs(data.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
+										</p>
+									</div>
+									<div>
+										<p className="text-sm text-gray-600">
+											标题
+										</p>
+										<p className="font-medium text-[#003366]">
+											{data.title}
+										</p>
+									</div>
 								</div>
-								<div>
-									<p className="text-sm text-gray-600">
-										提交日期
-									</p>
-									<p className="font-medium text-[#003366]">
-										{dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss')}
-									</p>
-								</div>
-								<div>
-									<p className="text-sm text-gray-600">
-										最后更新
-									</p>
-									<p className="font-medium text-[#003366]">
-										{dayjs(data.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
-									</p>
-								</div>
-								<div>
-									<p className="text-sm text-gray-600">
-										标题
-									</p>
-									<p className="font-medium text-[#003366]">
-										{data.title}
-									</p>
-								</div>
-							</div>
 
-							{/* Progress Timeline */}
-							<div className="mt-8">
-								<Steps
-									current={
-										data.state === "pending"
-											? 0
-											: data.state === "processing"
-												? 1
-												: 2
-									}
-									className="usa-progress">
-									<Step
-										title="Submitted"
-										description="Ticket received"
-										icon={<SafetyCertificateOutlined />}
+								{/* Progress Timeline */}
+								<div className="mt-8">
+									<Steps
+										current={['pending', 'processing', 'completed'].indexOf(data.state)}
+
+										items={[
+											{
+												title: '已提交',
+												description: '信件已成功接收',
+												icon: <SafetyCertificateOutlined />,
+											},
+											{
+												title: '处理中',
+												description: '正在审核处理',
+												icon: <SafetyCertificateOutlined />,
+											},
+											{
+												title: '已办结',
+												description: '信件处理完成',
+												icon: <SafetyCertificateOutlined />,
+											},
+										]}
 									/>
-									<Step
-										title="In Progress"
-										description="Under review"
-										icon={<SafetyCertificateOutlined />}
-									/>
-									<Step
-										title="Resolved"
-										description="Ticket completed"
-										icon={<SafetyCertificateOutlined />}
-									/>
-								</Steps>
+								</div>
 							</div>
+							<LetterCard letter={data as any} /></>
+					) : !isFetching && letterId && (
+						<div className=" p-6">
+
+							<Empty
+								description={`未找到编码为 ${letterId} 的信件`}
+							></Empty>
 						</div>
-					</Card>
-				)}
+					)}
+				</Spin>
 			</main>
 		</div>
 	);