leaudit-platform-frontend/app/routes/_index.tsx

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, logout } from "~/root";

export const links = () => [
  { rel: "stylesheet", href: styles }
];

export const meta: MetaFunction = () => {
  return [
    { title: "中国烟草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;
}

// 验证用户登录状态
export async function loader({ request }: LoaderFunctionArgs) {
  const { isAuthenticated } = await getUserSession(request);
  
  if (!isAuthenticated) {
    return redirect("/login");
  }
  return null;
}

export default function Index() {
  const navigate = useNavigate();
  const [currentDateTime, setCurrentDateTime] = useState({
    date: '',
    time: ''
  });
  
  // 更新日期时间
  useEffect(() => {
    const updateDateTime = () => {
      const now = dayjs();
      // 格式化日期: YYYY/MM/DD
      setCurrentDateTime({
        date: now.format('YYYY/MM/DD'),
        time: now.format('HH:mm:ss')
      });
    };
    
    // 初始化时间
    updateDateTime();
    
    // 每秒更新一次
    const timerID = setInterval(updateDateTime, 1000);
    
    return () => clearInterval(timerID);
  }, []);
  
  // 处理模块点击
  const handleModuleClick = (path: string) => {
    // console.log("导航到路径:", path);
    navigate(path);
  };

  // 处理键盘事件
  const handleKeyDown = (path: string, e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleModuleClick(path);
    }
  };

  // 处理登出
  const handleLogout = () => {
    // 清除sessionStorage中的用户角色信息
    if (typeof window !== 'undefined') {
      sessionStorage.removeItem('userRole');
      // 可以根据需要清除其他会话数据
      sessionStorage.clear();
    }
    
    // 使用Form组件提交登出请求
    const form = document.getElementById('logout-form') as HTMLFormElement;
    if (form) {
      form.submit();
    }
  };

  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.svg" alt="中国烟草" className="logo" />
          <div className="flex flex-col">
            <span className="logo-text ">中国烟草</span>
            <span className="logo-text-en">CHINA TOBACCO</span>
          </div>
        </div>
        <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('/contract-template/search')}
            onKeyDown={(e) => handleKeyDown('/contract-template/search', 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>
  );
}