完成智慧法务前端调整20250522，还有登录和主页需要完善

2025-05-27 23:48:28 +08:00
parent 742a789244
commit 690d369f57
30 changed files with 1557 additions and 292 deletions
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
+import { type MetaFunction, type ActionFunctionArgs, redirect, json, type LoaderFunctionArgs } from "@remix-run/node";
+import styles from "~/styles/pages/login.css?url";
+import { createUserSession, getUserSession, getSession } from "~/root";
+
+export const links = () => [
+  { rel: "stylesheet", href: styles }
+];
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "中国烟草AI合同及卷宗审核系统 - 登录" },
+    { name: "description", content: "中国烟草AI合同及卷宗审核系统登录页面" },
+  ];
+};
+
+// 处理表单提交的action
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const username = formData.get("username") as string;
+  const password = formData.get("password") as string;
+  
+  // 简单的登录验证，实际应用中应该进行真正的身份验证
+  if (!username || !password) {
+    return json({ error: "用户名和密码不能为空" });
+  }
+  
+  // 在实际应用中，这里应该是对用户名和密码的验证逻辑
+  // 简化起见，我们直接视为登录成功
+  
+  // 获取session中存储的重定向URL，如果没有则默认到/home
+  const session = await getSession(request);
+  const redirectTo = session.get("redirectTo") || "/home";
+  
+  // 创建登录会话并重定向
+  return createUserSession(true, redirectTo);
+}
+
+// 加载器，获取当前会话状态
+export async function loader({ request }: LoaderFunctionArgs) {
+  const { isAuthenticated } = await getUserSession(request);
+  
+  // 如果已登录，重定向到首页
+  if (isAuthenticated) {
+    return redirect("/home");
+  }
+  
+  return Response.json({ isAuthenticated });
+}
+
+export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const actionData = useActionData<typeof action>();
+  const navigation = useNavigation();
+  
+  // 判断是否正在提交表单
+  const isSubmitting = navigation.state === "submitting";
+
+  return (
+    <div className="login-page">
+      <div className="login-container">
+        <div className="login-header">
+          <img src="/logo.png" alt="中国烟草" className="login-logo" />
+          <h1 className="login-title">中国烟草AI合同及卷宗审核系统</h1>
+        </div>
+        
+        <div className="login-form-container">
+          <h2 className="login-subtitle">用户登录</h2>
+          <Form method="post" className="login-form">
+            {actionData?.error && (
+              <div className="error-message">{actionData.error}</div>
+            )}
+            
+            <div className="form-group">
+              <label htmlFor="username">用户名</label>
+              <input
+                type="text"
+                id="username"
+                name="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="form-input"
+                placeholder="请输入用户名"
+                required
+              />
+            </div>
+            
+            <div className="form-group">
+              <label htmlFor="password">密码</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="form-input"
+                placeholder="请输入密码"
+                required
+              />
+            </div>
+            
+            <button 
+              type="submit" 
+              className="login-button"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "登录中..." : "登录"}
+            </button>
+          </Form>
+        </div>
+        
+        <div className="login-footer">
+          <p>© 2024 中国烟草 版权所有</p>
+        </div>
+      </div>
+    </div>
+  );
+}