feat: 初步完成评查详情页面的work文档和pdf文档的加载的页面三栏设计的重构。

2026-04-21 15:08:14 +08:00
parent 4e19672b38
commit a3fd2c7fed
13 changed files with 1781 additions and 332 deletions
@@ -0,0 +1,71 @@
+/**
+ * 右栏 · 文件信息选项卡
+ * 以简洁的 key-value 网格展示文件基本属性和评查信息
+ */
+
+interface FileInfoData {
+  fileName: string;
+  contractNumber: string;
+  fileSize: string;
+  fileFormat: string;
+  pageCount: number;
+  uploadTime: string;
+  uploadUser: string;
+  fileType: string;
+}
+
+interface ReviewInfoData {
+  reviewTime: string;
+  reviewModel: string;
+  ruleGroup: string;
+  result: string;
+  issueCount: number;
+}
+
+interface FileInfoPanelProps {
+  fileInfo: FileInfoData;
+  reviewInfo: ReviewInfoData;
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="grid grid-cols-[80px,1fr] gap-2 text-[12.5px] py-1.5 border-b border-slate-100 last:border-b-0">
+      <span className="text-slate-400">{label}</span>
+      <span className="text-slate-700 break-all">{value || '—'}</span>
+    </div>
+  );
+}
+
+export function FileInfoPanel({ fileInfo, reviewInfo }: FileInfoPanelProps) {
+  return (
+    <div className="p-4 space-y-4">
+      {/* 文件基本信息 */}
+      <section>
+        <div className="text-[11px] font-medium text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
+          <i className="ri-file-info-line text-blue-500 text-[12px]" /> 文件基本信息
+        </div>
+        <div className="bg-slate-50/60 border border-slate-200 rounded-md p-3">
+          <Row label="文件名称" value={fileInfo.fileName} />
+          <Row label={fileInfo.fileType !== '1' ? '卷宗编号' : '合同编号'} value={fileInfo.contractNumber} />
+          <Row label="文件大小" value={fileInfo.fileSize} />
+          <Row label="文件格式" value={fileInfo.fileFormat} />
+          <Row label="页数" value={`${fileInfo.pageCount} 页`} />
+          <Row label="上传时间" value={fileInfo.uploadTime} />
+        </div>
+      </section>
+
+      {/* 评查信息 */}
+      <section>
+        <div className="text-[11px] font-medium text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
+          <i className="ri-search-eye-line text-purple-500 text-[12px]" /> 评查信息
+        </div>
+        <div className="bg-slate-50/60 border border-slate-200 rounded-md p-3">
+          <Row label="评查时间" value={reviewInfo.reviewTime} />
+          <Row label="评查模型" value={reviewInfo.reviewModel} />
+          <Row label="规则组" value={reviewInfo.ruleGroup} />
+          <Row label="问题数量" value={`${reviewInfo.issueCount} 个`} />
+        </div>
+      </section>
+    </div>
+  );
+}