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

app/routes/_index.tsx

@@ -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>
-  );
-}
+}