TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增主页，优化评查点结果一致性的显示效果

Browse Source
This commit is contained in:
yorn
2025-05-28 17:37:23 +08:00
parent 690d369f57
commit 08fb737cbf
10 changed files with 2596 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/layout/Layout.tsx
+13 -3
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Sidebar } from './Sidebar';
// import { Header } from './Header';
import { Breadcrumb } from './Breadcrumb';
import { useMatches } from '@remix-run/react';
import { useMatches, useLocation } from '@remix-run/react';
interface LayoutProps {
children: React.ReactNode;
@@ -11,7 +11,7 @@ interface LayoutProps {
// 添加一个接口表示路由handle可能包含的属性
interface RouteHandle {
hideBreadcrumb?: boolean;
[key: string]: any;
[key: string]: unknown;
}
interface Match {
@@ -23,9 +23,14 @@ interface Match {
export function Layout({ children }: LayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const matches = useMatches() as Match[];
const location = useLocation();
// 检查当前路径是否应该隐藏侧边栏
const noLayoutPaths = ['/login', '/'];
const shouldHideSidebar = noLayoutPaths.includes(location.pathname);
// 检查当前路由是否应该隐藏默认面包屑
const shouldHideBreadcrumb = matches.some(match =>
const shouldHideBreadcrumb = shouldHideSidebar || matches.some(match =>
match.handle && match.handle.hideBreadcrumb === true
);
@@ -43,6 +48,11 @@ export function Layout({ children }: LayoutProps) {
localStorage.setItem('sidebarCollapsed', String(newState));
};
// 如果是无布局页面，只渲染内容
if (shouldHideSidebar) {
return <>{children}</>;
}
return (
<div className="layout-container">
<Sidebar
app/components/layout/Sidebar.tsx
+8 -1
View File
@@ -19,10 +19,17 @@ export function Sidebar({ onToggle, collapsed }: SidebarProps) {
const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
const menuItems: MenuItem[] = [
{
id: 'contract-search',
title: '智能搜索',
path: '/contract-search',
hideBreadcrumb: true,
icon: 'ri-search-line'
},
{
id: 'home',
title: '系统概览',
path: '/',
path: '/home',
icon: 'ri-home-line'
},
{
app/components/reviews/ReviewPointsList.tsx
+137 -2
View File
@@ -459,15 +459,24 @@ export function ReviewPointsList({
// 获取所有consistency规则中的fields
const allConsistencyFields: string[][] = [];
// 存储 sourceField 和 targetField 的映射关系
const pairsMapping: Record<string, string> = {};
consistencyRules.forEach(rule => {
if (rule.config?.fields) {
allConsistencyFields.push(rule.config.fields);
}else if (rule.config?.pairs) {
} else if (rule.config?.pairs) {
// 处理pairs情况，提取sourceField和targetField
const fields: string[] = [];
rule.config.pairs.forEach(pair => {
if (pair.sourceField) fields.push(pair.sourceField);
if (pair.targetField) fields.push(pair.targetField);
// 记录 sourceField 和 targetField 的映射关系
if (pair.sourceField && pair.targetField) {
pairsMapping[pair.sourceField] = pair.targetField;
}
});
if (fields.length > 0) {
allConsistencyFields.push(fields);
@@ -507,10 +516,136 @@ export function ReviewPointsList({
}
});
// 对每个分组内的条目按照 sourceField 和 targetField 的关系进行排序
Object.keys(groupedContent).forEach(groupKey => {
if (groupKey !== 'default' && groupedContent[groupKey].length > 1) {
// 创建一个新数组用于存储排序后的结果
const sortedEntries: Array<[string, { page?: number | string, value?: object }]> = [];
const entriesMap = new Map(groupedContent[groupKey]);
// 找出所有的源字段和目标字段对
const processed = new Set<string>();
// 构建一个字段之间的连接关系图，用于处理嵌套关系
const fieldChains: Array<string[]> = [];
// 遍历所有映射关系，构建字段链
const buildFieldChains = () => {
// 创建一个图结构，记录每个字段的后继字段
const graph: Record<string, string[]> = {};
// 根据映射关系建立图
Object.entries(pairsMapping).forEach(([source, target]) => {
if (!graph[source]) graph[source] = [];
graph[source].push(target);
// 确保目标字段在图中有一个空数组
if (!graph[target]) graph[target] = [];
});
// 查找所有在当前分组中的字段
const fieldsInGroup = new Set(Array.from(entriesMap.keys()));
// 找出入度为0的节点（即只作为sourceField而不是任何targetField的字段）
const startNodes: string[] = [];
for (const field of fieldsInGroup) {
// 检查该字段是否作为targetField存在
const isTarget = Object.values(pairsMapping).includes(field);
// 如果该字段是sourceField但不是targetField，则为起始节点
if (!isTarget && field in pairsMapping) {
startNodes.push(field);
}
}
// 从每个起始节点开始，使用DFS构建字段链
for (const startNode of startNodes) {
const chain: string[] = [];
const dfs = (node: string) => {
// 如果该节点不在当前分组中，则跳过
if (!fieldsInGroup.has(node)) return;
chain.push(node);
// 遍历所有后继节点
for (const nextNode of graph[node] || []) {
dfs(nextNode);
}
};
dfs(startNode);
// 如果链不为空，则添加到字段链列表中
if (chain.length > 0) {
fieldChains.push(chain);
}
}
// 处理环形依赖或没有入度为0的节点的情况
// 找出未被处理的字段
const processedInChains = new Set(fieldChains.flat());
const remainingFields = Array.from(fieldsInGroup).filter(f => !processedInChains.has(f));
// 将剩余字段按照pairsMapping的关系组织成链
while (remainingFields.length > 0) {
const field = remainingFields.shift()!;
// 如果该字段已经在某个链中，则跳过
if (processedInChains.has(field)) continue;
const chain: string[] = [field];
processedInChains.add(field);
// 向后查找链
let currentField = field;
while (currentField in pairsMapping) {
const nextField = pairsMapping[currentField];
// 如果下一个字段不在分组中或已处理，则中断
if (!fieldsInGroup.has(nextField) || processedInChains.has(nextField)) break;
chain.push(nextField);
processedInChains.add(nextField);
currentField = nextField;
// 从剩余字段中移除
const index = remainingFields.indexOf(nextField);
if (index !== -1) {
remainingFields.splice(index, 1);
}
}
if (chain.length > 0) {
fieldChains.push(chain);
}
}
};
buildFieldChains();
// 根据字段链构建排序后的结果
fieldChains.forEach(chain => {
chain.forEach(field => {
if (entriesMap.has(field) && !processed.has(field)) {
sortedEntries.push([field, entriesMap.get(field)!]);
processed.add(field);
}
});
});
// 添加剩余未处理的字段
for (const [key] of groupedContent[groupKey]) {
if (!processed.has(key)) {
sortedEntries.push([key, entriesMap.get(key)!]);
}
}
// 用排序后的结果替换原数组
groupedContent[groupKey] = sortedEntries;
}
});
return (
<>
{/* 渲染各个分组 */}
{Object.entries(groupedContent).map(([groupKey, entries], groupIndex) => {
{Object.entries(groupedContent).map(([groupKey, entries]) => {
if (entries.length === 0) return null;
// 非默认组添加边框
app/routes/_index.tsx
+133 -283
View File
@@ -1,324 +1,174 @@
// import React from 'react';
import { type MetaFunction, type LoaderFunctionArgs, redirect } 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 { useState, useEffect } from 'react';
import { useNavigate, Form } from '@remix-run/react';
import { type MetaFunction, type ActionFunctionArgs, LoaderFunctionArgs, redirect } from "@remix-run/node";
import styles from "~/styles/pages/home.css?url";
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" },
];
// import { getUserSession, logout } from "~/root";
export const links = () => [
{ rel: "stylesheet", href: homeStyles },
...fileTagLinks()
{ rel: "stylesheet", href: styles }
];
export const meta: MetaFunction = () => {
return [
{ title: "中国烟草AI合同及卷宗审核系统 - 首页" },
{ name: "description", content: "AI审核系统首页" }
{ name: "description", content: "中国烟草AI合同及卷宗审核系统首页" },
];
};
// API 响应的类型定义
// interface StatsData {
// totalFiles: number;
// reviewedFiles: number;
// pendingFiles: number;
// passRate: number;
// }
// 添加认证检查
export async function loader({ request }: LoaderFunctionArgs) {
// 检查用户登录状态
// const { isAuthenticated } = await getUserSession(request);
// 处理登出请求
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
const intent = formData.get("intent");
// 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 }
);
if (intent === "logout") {
// return logout(request);
}
return null;
}
// 验证用户登录状态
// export async function loader({ request }: LoaderFunctionArgs) {
// const { isAuthenticated } = await getUserSession(request);
// if (!isAuthenticated) {
// return redirect("/login");
// }
// return Response.json({ isAuthenticated });
// }
export default function Index() {
const { homeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
// 使用useState存储最近文档数据，初始值为loader加载的数据
const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
const navigate = useNavigate();
const [currentDateTime, setCurrentDateTime] = useState({
date: '',
time: ''
});
// 更新当前时间
// 更新日期时间
useEffect(() => {
// 使用dayjs格式化日期和时间
const updateDateTime = () => {
const now = dayjs();
// 格式化日期: YYYY/MM/DD
setCurrentDateTime({
date: now.format('YYYY年MM月DD日'),
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;
// 处理模块点击
const handleModuleClick = (path: string) => {
navigate(path);
};
// 处理键盘事件
const handleKeyDown = (path: string, e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' || e.key === ' ') {
handleModuleClick(path);
}
};
// 处理登出
const handleLogout = () => {
// 使用Form组件提交登出请求
const form = document.getElementById('logout-form') as HTMLFormElement;
if (form) {
form.submit();
}
};
}
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 className="home-page">
{/* 登出表单 - 隐藏 */}
<Form method="post" id="logout-form" className="hidden">
<input type="hidden" name="intent" value="logout" />
</Form>
{/* 头部 */}
<header className="header">
<div className="logo-container">
<img src="/logo.svg" alt="中国烟草" className="logo" />
<div className="flex flex-col">
<span className="logo-text ">中国烟草</span>
<span className="logo-text-en">CHINA TOBACCO</span>
</div>
</div>
)}
<i className={`${icon} stat-icon`}></i>
<div className="user-info">
<span className="datetime">{currentDateTime.date} {currentDateTime.time}</span>
<div className="user">
<img src="/avatar.png" alt="用户头像" className="avatar" />
<span className="username">系统管理员</span>
<button
onClick={handleLogout}
className="logout-button"
aria-label="登出"
>
<i className="ri-logout-box-line"></i>
</button>
</div>
</div>
</header>
{/* 主要内容 */}
<main className="index-main-content">
<h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
<div className="modules-container">
{/* 合同管理模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/documents')}
onKeyDown={(e) => handleKeyDown('/documents', e)}
role="button"
tabIndex={0}
aria-label="合同管理"
>
<i className="ri-file-list-2-fill text-[3rem] text-[#269b6c]"></i>
<span className="module-name">合同管理</span>
</div>
{/* 案卷智能评查模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/home')}
onKeyDown={(e) => handleKeyDown('/home', e)}
role="button"
tabIndex={0}
aria-label="案卷智能评查"
>
<i className="ri-folder-shared-fill text-[3rem] text-[#269b6c]"></i>
<span className="module-name">案卷智能评查</span>
</div>
{/* 智慧法务大模型模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/prompts')}
onKeyDown={(e) => handleKeyDown('/prompts', e)}
role="button"
tabIndex={0}
aria-label="智慧法务大模型"
>
<i className="ri-robot-2-fill text-[3rem] text-[#269b6c]"></i>
<span className="module-name">智慧法务大模型</span>
</div>
</div>
</main>
{/* 底部山水背景 */}
<footer className="footer">
<div className="mountains-bg"></div>
</footer>
</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>
);
}
}
app/routes/contract-search._index.tsx
+152
View File
@@ -0,0 +1,152 @@
// import { useState } from 'react';
// import styles from '~/styles/pages/contract-search.css?url';
// export const links = () => [
// { rel: 'stylesheet', href: styles }
// ];
// export default function ContractSearchIndex() {
// const [searchQuery, setSearchQuery] = useState('');
// const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
// setSearchQuery(e.target.value);
// // 自动调整高度
// e.target.style.height = 'auto';
// e.target.style.height = Math.max(80, e.target.scrollHeight) + 'px';
// };
// const handleSearch = () => {
// if (searchQuery.trim()) {
// console.log('搜索查询:', searchQuery);
// // 这里可以添加实际的搜索逻辑
// }
// };
// const handleCategoryClick = (categoryName: string) => {
// console.log('选择分类:', categoryName);
// // 这里可以添加跳转到相应分类的逻辑
// };
// const handleKeyDown = (e: React.KeyboardEvent, categoryName: string) => {
// if (e.key === 'Enter' || e.key === ' ') {
// e.preventDefault();
// handleCategoryClick(categoryName);
// }
// };
// return (
// <div className="content-area">
// <div className="search-hero">
// <h1 className="search-title">AI智能合同模板搜索</h1>
// <p className="search-subtitle">输入合同名称、用途或关键内容，快速找到最适合的模板</p>
// <div className="search-container">
// <div className="search-box">
// <textarea
// className="search-textarea"
// placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
// value={searchQuery}
// onChange={handleSearchInputChange}
// aria-label="搜索输入框"
// ></textarea>
// <div className="search-actions">
// <div className="search-tips">
// <i className="ri-lightbulb-line mr-1"></i>
// 支持自然语言描述，AI将为您匹配最相关的模板
// </div>
// <button
// className="search-btn"
// onClick={handleSearch}
// aria-label="开始搜索"
// >
// <i className="ri-search-line"></i>
// 智能搜索
// </button>
// </div>
// </div>
// </div>
// </div>
// <div className="quick-categories">
// <button
// className="category-card"
// onClick={() => handleCategoryClick('销售合同')}
// onKeyDown={(e) => handleKeyDown(e, '销售合同')}
// tabIndex={0}
// aria-label="销售合同分类"
// >
// <div className="category-icon">
// <i className="ri-handshake-line"></i>
// </div>
// <div className="category-title">销售合同</div>
// <div className="category-count">128个模板</div>
// </button>
// <button
// className="category-card"
// onClick={() => handleCategoryClick('采购合同')}
// onKeyDown={(e) => handleKeyDown(e, '采购合同')}
// tabIndex={0}
// aria-label="采购合同分类"
// >
// <div className="category-icon">
// <i className="ri-shopping-cart-line"></i>
// </div>
// <div className="category-title">采购合同</div>
// <div className="category-count">96个模板</div>
// </button>
// <button
// className="category-card"
// onClick={() => handleCategoryClick('物流运输')}
// onKeyDown={(e) => handleKeyDown(e, '物流运输')}
// tabIndex={0}
// aria-label="物流运输分类"
// >
// <div className="category-icon">
// <i className="ri-truck-line"></i>
// </div>
// <div className="category-title">物流运输</div>
// <div className="category-count">64个模板</div>
// </button>
// <button
// className="category-card"
// onClick={() => handleCategoryClick('人事劳务')}
// onKeyDown={(e) => handleKeyDown(e, '人事劳务')}
// tabIndex={0}
// aria-label="人事劳务分类"
// >
// <div className="category-icon">
// <i className="ri-user-settings-line"></i>
// </div>
// <div className="category-title">人事劳务</div>
// <div className="category-count">52个模板</div>
// </button>
// <button
// className="category-card"
// onClick={() => handleCategoryClick('租赁合同')}
// onKeyDown={(e) => handleKeyDown(e, '租赁合同')}
// tabIndex={0}
// aria-label="租赁合同分类"
// >
// <div className="category-icon">
// <i className="ri-building-line"></i>
// </div>
// <div className="category-title">租赁合同</div>
// <div className="category-count">38个模板</div>
// </button>
// <button
// className="category-card"
// onClick={() => handleCategoryClick('保密协议')}
// onKeyDown={(e) => handleKeyDown(e, '保密协议')}
// tabIndex={0}
// aria-label="保密协议分类"
// >
// <div className="category-icon">
// <i className="ri-shield-check-line"></i>
// </div>
// <div className="category-title">保密协议</div>
// <div className="category-count">24个模板</div>
// </button>
// </div>
// </div>
// );
// }
app/routes/contract-search.tsx
+23
View File
@@ -0,0 +1,23 @@
import { Outlet } from "@remix-run/react";
import { type MetaFunction } from "@remix-run/node";
export const meta: MetaFunction = () => {
return [
{ title: "智能搜索 - 中国烟草AI合同及卷宗审核系统" },
{
name: "contract-search",
content: "智能搜索模块，包括智能搜索功能"
}
];
};
export const handle = {
breadcrumb: "智能搜索"
};
/**
* 配置列表路由布局
*/
export default function ContractSearchLayout() {
return <Outlet />;
}
app/routes/home.tsx
+288 -144
View File
@@ -1,180 +1,324 @@
import { useState, useEffect } from 'react';
import { useNavigate, Form } from '@remix-run/react';
import { type MetaFunction, type ActionFunctionArgs, LoaderFunctionArgs, redirect, json } from "@remix-run/node";
import styles from "~/styles/pages/home.css?url";
import { getUserSession, logout } from "~/root";
// import React from 'react';
import { type MetaFunction, type LoaderFunctionArgs, redirect } 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: styles }
{ rel: "stylesheet", href: homeStyles },
...fileTagLinks()
];
export const meta: MetaFunction = () => {
return [
{ title: "中国烟草AI合同及卷宗审核系统 - 首页" },
{ name: "description", content: "中国烟草AI合同及卷宗审核系统首页" },
{ name: "description", content: "AI审核系统首页" }
];
};
// 处理登出请求
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
const intent = formData.get("intent");
if (intent === "logout") {
return logout(request);
}
return null;
}
// API 响应的类型定义
// interface StatsData {
// totalFiles: number;
// reviewedFiles: number;
// pendingFiles: number;
// passRate: number;
// }
// 验证用户登录状态
// 添加认证检查
export async function loader({ request }: LoaderFunctionArgs) {
const { isAuthenticated } = await getUserSession(request);
// 检查用户登录状态
// const { isAuthenticated } = await getUserSession(request);
if (!isAuthenticated) {
return redirect("/login");
// 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 }
);
}
return json({ isAuthenticated });
}
export default function Home() {
const navigate = useNavigate();
const [currentTime, setCurrentTime] = useState('');
const [currentDate, setCurrentDate] = useState('');
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 = new Date();
// 格式化日期: YYYY/MM/DD
const date = now.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\//g, '/');
// 格式化时间: HH:MM
const time = now.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
hour12: false
const now = dayjs();
setCurrentDateTime({
date: now.format('YYYY年MM月DD日'),
time: now.format('HH:mm:ss')
});
setCurrentDate(date);
setCurrentTime(time);
};
// 初始化时间
// 立即更新一次
updateDateTime();
// 每分钟更新一次
const interval = setInterval(updateDateTime, 60000);
// 设置计时器，每秒更新一次
const timerID = setInterval(updateDateTime, 1000);
return () => clearInterval(interval);
// 清理函数，组件卸载时清除计时器
return () => clearInterval(timerID);
}, []);
// 处理模块点击
const handleModuleClick = (path: string) => {
navigate(path);
};
// 处理键盘事件
const handleKeyDown = (path: string, e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' || e.key === ' ') {
handleModuleClick(path);
}
};
// 处理登出
const handleLogout = () => {
// 使用Form组件提交登出请求
const form = document.getElementById('logout-form') as HTMLFormElement;
if (form) {
form.submit();
}
};
// 修改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="home-page">
{/* 登出表单 - 隐藏 */}
<Form method="post" id="logout-form" className="hidden">
<input type="hidden" name="intent" value="logout" />
</Form>
{/* 头部 */}
<header className="header">
<div className="logo-container">
<img src="/logo.png" alt="中国烟草" className="logo" />
<span className="logo-text">中国烟草</span>
<span className="logo-text-en">CHINA TOBACCO</span>
<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>
<div className="user-info">
<span className="datetime">{currentDate} {currentTime}</span>
<div className="user">
<img src="/avatar.png" alt="用户头像" className="avatar" />
<span className="username">系统管理员</span>
<button
onClick={handleLogout}
className="logout-button"
aria-label="登出"
>
<i className="ri-logout-box-line"></i>
</button>
</div>
</div>
</header>
</Card>
{/* 主要内容 */}
<main className="main-content">
<h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>
<div className="modules-container">
{/* 合同管理模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/documents')}
onKeyDown={(e) => handleKeyDown('/documents', e)}
role="button"
tabIndex={0}
aria-label="合同管理"
>
<div className="module-icon contract-icon"></div>
<span className="module-name">合同管理</span>
</div>
{/* 案卷智能评查模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/')}
onKeyDown={(e) => handleKeyDown('/', e)}
role="button"
tabIndex={0}
aria-label="案卷智能评查"
>
<div className="module-icon review-icon"></div>
<span className="module-name">案卷智能评查</span>
</div>
{/* 智慧法务大模型模块 */}
<div
className="module-card"
onClick={() => handleModuleClick('/prompts')}
onKeyDown={(e) => handleKeyDown('/prompts', e)}
role="button"
tabIndex={0}
aria-label="智慧法务大模型"
>
<div className="module-icon ai-icon"></div>
<span className="module-name">智慧法务大模型</span>
</div>
{/* 快捷访问区域 */}
<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>
</main>
</Card>
{/* 底部山水背景 */}
<footer className="footer">
<div className="mountains-bg"></div>
</footer>
{/* 最近文档区域 */}
<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>
);
}
app/styles/pages/contract-search.css
+186
View File
@@ -0,0 +1,186 @@
/* 合同搜索页面样式 */
:root {
--primary-color: #00684a;
--primary-hover: #005a40;
--primary-light: rgba(0, 104, 74, 0.1);
--success-color: #52c41a;
--warning-color: #faad14;
--error-color: #ff4d4f;
--text-color: rgba(0, 0, 0, 0.85);
--text-secondary: rgba(0, 0, 0, 0.45);
--border-color: #f0f0f0;
--bg-gray: #f5f5f5;
--gradient-bg: linear-gradient(135deg, #f8fffe 0%, #f0f9ff 100%);
}
.content-area {
@apply flex-1 p-6 overflow-y-auto;
}
.search-hero {
@apply text-center py-16 bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl mb-8;
}
.search-title {
@apply text-3xl font-semibold text-gray-800 mb-3;
}
.search-subtitle {
@apply text-base text-gray-600 mb-10;
}
.search-container {
@apply max-w-xl mx-auto relative;
}
.search-box {
@apply bg-white border-2 border-gray-200 rounded-xl p-4 shadow-md transition-all;
}
.search-box:focus-within {
@apply border-green-600 shadow-lg;
}
.search-textarea {
@apply w-full min-h-[80px] border-none outline-none resize-vertical text-base leading-relaxed;
}
.search-actions {
@apply flex justify-between items-center mt-3 pt-3 border-t border-gray-100;
}
.search-tips {
@apply text-xs text-gray-500;
}
.search-btn {
@apply bg-green-700 text-white border-none rounded-lg py-2.5 px-6 text-sm font-medium cursor-pointer transition-all flex items-center gap-1.5;
}
.search-btn:hover {
@apply bg-green-800 transform -translate-y-0.5;
}
.quick-categories {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mt-10;
}
.category-card {
@apply bg-white rounded-xl p-5 text-center cursor-pointer transition-all border border-gray-100 shadow-sm;
}
.category-card:hover {
@apply transform -translate-y-0.5 shadow-md border-green-700;
}
.category-icon {
@apply w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3 text-green-700;
}
.category-title {
@apply text-base font-medium mb-1;
}
.category-count {
@apply text-xs text-gray-500;
}
.contract-search-container {
@apply w-full p-6 bg-white rounded-lg shadow-sm;
}
.search-header {
@apply mb-6;
}
.search-description {
@apply text-gray-600 text-sm;
}
.search-form {
@apply mb-6;
}
.search-form-row {
@apply flex flex-wrap items-center gap-4 mb-4;
}
.search-form-item {
@apply flex-grow min-w-[200px];
}
.search-form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
.search-form-input {
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
.search-form-select {
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
.search-form-date {
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
.search-buttons {
@apply flex justify-end gap-4 mt-6;
}
.search-button {
@apply px-4 py-2 rounded-md font-medium;
}
.search-button-primary {
@apply bg-blue-600 text-white hover:bg-blue-700;
}
.search-button-secondary {
@apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}
.search-results {
@apply mt-8;
}
.search-results-header {
@apply flex justify-between items-center mb-4;
}
.search-results-title {
@apply text-lg font-medium text-gray-800;
}
.search-results-count {
@apply text-gray-600;
}
.search-results-table {
@apply w-full border-collapse;
}
.search-results-table th {
@apply px-4 py-3 bg-gray-100 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
}
.search-results-table td {
@apply px-4 py-3 border-t border-gray-200 text-sm;
}
.search-results-actions {
@apply flex gap-2;
}
.search-results-action {
@apply text-blue-600 hover:text-blue-800 cursor-pointer;
}
.no-results {
@apply py-12 text-center text-gray-500;
}
.pagination-container {
@apply mt-6 flex justify-center;
}
app/styles/pages/home.css
+27 -25
View File
@@ -2,8 +2,9 @@
.home-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f0f7f4;
height: 100vh;
/* height: 100%; */
background-color: #ffffff;
}
/* 头部样式 */
@@ -11,7 +12,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem;
padding: 0.75rem 1rem;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@@ -22,19 +23,19 @@
}
.logo {
height: 36px;
margin-right: 0.75rem;
height: 60px;
margin-right: 0.15rem;
}
.logo-text {
font-size: 1.125rem;
font-weight: 600;
font-size: 1.8rem;
font-weight: 800;
color: #333;
margin-right: 0.5rem;
}
.logo-text-en {
font-size: 0.75rem;
margin-top: -0.2rem;
font-size: 0.85rem;
color: #666;
font-weight: 500;
text-transform: uppercase;
@@ -48,7 +49,7 @@
}
.datetime {
font-size: 0.875rem;
font-size:1rem;
color: #666;
}
@@ -72,13 +73,18 @@
}
/* 主要内容区域 */
.main-content {
.index-main-content {
border-radius: 0.5rem 0.5rem 0 0;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 1.5rem;
justify-content: center;
margin: 1rem;
padding-bottom: 0;
margin-bottom: 0;
background-color: #f0f7f4;
}
.welcome-text {
@@ -98,11 +104,10 @@
.module-card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
padding: 2rem 1.5rem;
background-color: white;
background: linear-gradient(to bottom, #ebebeb, #ffffff);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s;
@@ -111,19 +116,11 @@
.module-card:hover {
transform: translateY(-5px);
border: 1px solid #269b6c;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.module-icon {
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.contract-icon {
/* .contract-icon {
background-image: url('/images/contract-icon.svg');
}
@@ -133,9 +130,10 @@
.ai-icon {
background-image: url('/images/ai-icon.svg');
}
} */
.module-name {
margin-left: 1rem;
font-size: 1.125rem;
font-weight: 500;
color: #333;
@@ -144,8 +142,12 @@
/* 底部山水背景 */
.footer {
height: 200px;
margin: 1rem;
margin-top: 0;
overflow: hidden;
position: relative;
background-color: #f0f7f4;
border-radius: 0 0 0.5rem 0.5rem;
}
.mountains-bg {
html/合同模板页面.html
+1629
View File
File diff suppressed because it is too large Load Diff