325 lines
11 KiB
TypeScript
325 lines
11 KiB
TypeScript
// import React from 'react';
|
|
import { type MetaFunction } from "@remix-run/node";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { Card } from "~/components/ui/Card";
|
|
import { Button } from "~/components/ui/Button";
|
|
import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
|
|
// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
|
|
import { Tag } from "~/components/ui/Tag";
|
|
import homeStyles from "~/styles/pages/sys_overview.css?url";
|
|
import { getDocuments, type DocumentUI } from "~/api/files/documents";
|
|
import { useState, useEffect } from "react";
|
|
import { getHomeData } from "~/api/home/home";
|
|
import dayjs from 'dayjs';
|
|
// import { getUserSession } from "~/root";
|
|
|
|
// 文件处理状态选项
|
|
const fileProcessingStatusOptions = [
|
|
{ value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
|
|
{ value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
|
|
{ value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
|
|
{ value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
|
|
{ value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
|
|
];
|
|
|
|
export const links = () => [
|
|
{ rel: "stylesheet", href: homeStyles },
|
|
...fileTagLinks()
|
|
];
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "中国烟草AI合同及卷宗审核系统 - 首页" },
|
|
{ name: "description", content: "AI审核系统首页" }
|
|
];
|
|
};
|
|
|
|
// API 响应的类型定义
|
|
// interface StatsData {
|
|
// totalFiles: number;
|
|
// reviewedFiles: number;
|
|
// pendingFiles: number;
|
|
// passRate: number;
|
|
// }
|
|
|
|
// 添加认证检查
|
|
export async function loader() {
|
|
// 检查用户登录状态
|
|
// const { isAuthenticated } = await getUserSession(request);
|
|
|
|
// if (!isAuthenticated) {
|
|
// return redirect("/login");
|
|
// }
|
|
|
|
try {
|
|
const documentSearchParams = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
order: 'updated_at.desc'
|
|
};
|
|
|
|
// 获取最近文档数据
|
|
const responseDocuments = await getDocuments(documentSearchParams);
|
|
if (responseDocuments.error) {
|
|
console.error('获取最近文档数据失败', responseDocuments.error);
|
|
return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
|
|
}
|
|
const recentFiles = responseDocuments.data?.documents || [];
|
|
// console.log("recentFiles-------",recentFiles);
|
|
|
|
|
|
const homeData = await getHomeData();
|
|
// console.log("homeData-------",homeData);
|
|
|
|
|
|
return Response.json({ homeData, recentFiles });
|
|
} catch (error) {
|
|
// 错误处理
|
|
console.error('Failed to fetch dashboard data:', error);
|
|
return Response.json(
|
|
{ error: '获取数据失败，请稍后重试' },
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function Home() {
|
|
const { homeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
|
|
// 使用useState存储最近文档数据，初始值为loader加载的数据
|
|
const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
|
|
const [currentDateTime, setCurrentDateTime] = useState({
|
|
date: '',
|
|
time: ''
|
|
});
|
|
|
|
// 更新当前时间
|
|
useEffect(() => {
|
|
// 使用dayjs格式化日期和时间
|
|
const updateDateTime = () => {
|
|
const now = dayjs();
|
|
setCurrentDateTime({
|
|
date: now.format('YYYY年MM月DD日'),
|
|
time: now.format('HH:mm:ss')
|
|
});
|
|
};
|
|
|
|
// 立即更新一次
|
|
updateDateTime();
|
|
|
|
// 设置计时器，每秒更新一次
|
|
const timerID = setInterval(updateDateTime, 1000);
|
|
|
|
// 清理函数，组件卸载时清除计时器
|
|
return () => clearInterval(timerID);
|
|
}, []);
|
|
|
|
// 修改useEffect定时器，每10秒自动获取最近文档数据
|
|
// 按照定时器更新最近文档
|
|
useEffect(() => {
|
|
// 定义一个函数用于获取最新的文档数据
|
|
const fetchLatestDocuments = async () => {
|
|
try {
|
|
const documentSearchParams = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
order: 'updated_at.desc'
|
|
};
|
|
|
|
// console.log('定时获取最新文档数据...');
|
|
const responseDocuments = await getDocuments(documentSearchParams);
|
|
|
|
if (responseDocuments.error) {
|
|
console.error('获取最近文档数据失败', responseDocuments.error);
|
|
return;
|
|
}
|
|
|
|
// 获取新的文档数据
|
|
const newRecentFiles = responseDocuments.data?.documents || [];
|
|
|
|
// 检查数据是否有变化
|
|
if (JSON.stringify(newRecentFiles) !== JSON.stringify(recentFiles)) {
|
|
// console.log('文档数据已更新，直接更新状态');
|
|
// 直接更新状态，不需要刷新页面
|
|
setRecentFiles(newRecentFiles);
|
|
}
|
|
} catch (error) {
|
|
console.error('自动获取文档数据失败:', error);
|
|
}
|
|
};
|
|
|
|
// 设置10秒的定时器
|
|
const timerID = setInterval(fetchLatestDocuments, 10000);
|
|
|
|
// 组件卸载时清除定时器
|
|
return () => {
|
|
// console.log('清除文档数据自动更新定时器');
|
|
clearInterval(timerID);
|
|
};
|
|
}, []); // 不再依赖recentFiles，避免循环依赖
|
|
|
|
return (
|
|
<div className="dashboard-container">
|
|
{/* 页面头部 */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-medium">系统概览</h2>
|
|
<div className="text-sm text-gray-500 flex flex-row items-center justify-between">
|
|
<div className="flex items-center">
|
|
<span id="current-date">{currentDateTime.date}</span>
|
|
<span className="mx-2">|</span>
|
|
<span id="current-time">{currentDateTime.time}</span>
|
|
</div>
|
|
<div className="user-profile p-4 border-b border-gray-100 flex items-center">
|
|
<div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
|
|
<span>管</span>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm font-medium">系统管理员</p>
|
|
<p className="text-xs text-gray-500">超级管理员</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 统计卡片区域 */}
|
|
<Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
|
|
<div className="stat-grid ">
|
|
<StatCard
|
|
title="今日待审文件"
|
|
value={homeData.todayPendingFiles}
|
|
icon="ri-inbox-line"
|
|
/>
|
|
<StatCard
|
|
title="本月已审核文件"
|
|
value={homeData.monthlyReviewedFiles}
|
|
icon="ri-file-search-line"
|
|
trend={{ value: homeData.monthlyReviewGrowth.value, isUp: homeData.monthlyReviewGrowth.isUp }}
|
|
/>
|
|
<StatCard
|
|
title="本月审核通过率"
|
|
value={homeData.monthlyPassRate}
|
|
icon="ri-percent-line"
|
|
trend={{ value: homeData.passRateGrowth.value, isUp: homeData.passRateGrowth.isUp }}
|
|
/>
|
|
<StatCard
|
|
title="本月问题检出数"
|
|
value={homeData.issuesDetected}
|
|
icon="ri-error-warning-line"
|
|
trend={{ value: homeData.issuesGrowth.value, isUp: homeData.issuesGrowth.isUp }}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 快捷访问区域 */}
|
|
<Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
|
|
<div className="shortcut-grid">
|
|
<ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
|
|
<ShortcutItem icon="ri-file-list-3-line" label="文档列表" to="/documents" />
|
|
<ShortcutItem icon="ri-list-check-3" label="评查点列表" to="/rules" />
|
|
<ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
|
|
{/* <ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" /> */}
|
|
<ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
|
|
{/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
|
|
<ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 最近文档区域 */}
|
|
<Card
|
|
title="最近文档"
|
|
icon="ri-file-list-3-line"
|
|
extra={<Button to="/documents" size="small">查看全部</Button>}
|
|
className="mt-6"
|
|
>
|
|
<div className="doc-list">
|
|
{recentFiles.map((file: DocumentUI) => (
|
|
<div key={file.id} className="doc-item">
|
|
<div className="doc-info">
|
|
<FileTag
|
|
extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'}
|
|
showIcon={true}
|
|
showText={false}
|
|
showBackground={false}
|
|
size="lg"
|
|
className="mr-2"
|
|
/>
|
|
<div>
|
|
<div className="doc-name">{file.name}</div>
|
|
<div className="doc-meta">
|
|
<Tag size="sm" className="mr-2">
|
|
{file.typeName}
|
|
</Tag>
|
|
<span className="text-gray-500">·</span>
|
|
<span className="ml-2 text-gray-500">{file.updatedAt}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="doc-status">
|
|
{(() => {
|
|
const fileStatus = file.fileStatus || "-";
|
|
const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) ||
|
|
fileProcessingStatusOptions[0];
|
|
const isSpinning = fileStatus !== "Processed";
|
|
return (
|
|
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
|
|
<i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
|
|
<span>{status.label}</span>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 统计卡片组件
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
icon: string;
|
|
trend?: {
|
|
value: number;
|
|
isUp: boolean;
|
|
};
|
|
}
|
|
|
|
function StatCard({ title, value, icon, trend }: StatCardProps) {
|
|
return (
|
|
<div className="stat-card">
|
|
<div className="stat-title">{title}</div>
|
|
<div className="stat-value">{value}</div>
|
|
{trend && (
|
|
<div className={`stat-trend ${trend.isUp ? 'trend-up' : 'trend-down'}`}>
|
|
<i className={`mr-1 ${trend.isUp ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}`}></i>
|
|
<span>{trend.value}%</span>
|
|
<span className="ml-1 text-gray-500">较上月</span>
|
|
</div>
|
|
)}
|
|
<i className={`${icon} stat-icon`}></i>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 快捷方式组件
|
|
interface ShortcutItemProps {
|
|
icon: string;
|
|
label: string;
|
|
to: string;
|
|
}
|
|
|
|
function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
|
|
return (
|
|
<Button
|
|
to={to}
|
|
type="default"
|
|
className="shortcut-item"
|
|
>
|
|
<i className={`${icon} shortcut-icon text-2xl`}></i>
|
|
<span className="shortcut-label">{label}</span>
|
|
</Button>
|
|
);
|
|
}
|