feat(web): 实现登录页面并优化全局样式

- 新增登录页面组件，包含视频背景和登录表单
- 优化全局样式，移除不必要的CSS规则
- 添加公共路径白名单，提高系统可用性
- 修复暗黑模式下样式问题

web/pages/_app.tsx

@@ -14,6 +14,7 @@ import '../app/i18n';
 import '../nprogress.css';
 import '../styles/globals.css';
 // import TopProgressBar from '@/components/layout/top-progress-bar';
+const publicPaths = ['/login', '/register', '/404'];
 
 const antdDarkTheme: MappingAlgorithm = (seedToken, mapToken) => {
   return {
@@ -68,11 +69,18 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // 使用useRouter获取router对象
   const router = useRouter();
+  const [authChecked, setAuthChecked] = useState(false);
 
   // 登录检测
   const handleAuth = async () => {
+    debugger;
+    if (publicPaths.includes(router.pathname)) {
+      setAuthChecked(true); // 公共页面直接放行
+      setIsLogin(true);
+      return;
+    }
     // 检查是否在登录页面
-    const isLoginPage = router.pathname === '/login';
+    const isLoginPage = router.pathname === '/login'; 
     const isLoggedIn = !!localStorage.getItem(STORAGE_USERINFO_KEY);
     
     if (!isLoggedIn && !isLoginPage) {
@@ -103,11 +111,10 @@ function LayoutWrapper({ children }: { children: React.ReactNode }) {
     //   setIsLogin(true);
     // }
   };
-  const [authChecked, setAuthChecked] = useState(false);
   // 在组件挂载时调用handleAuth函数
   useEffect(() => {
     handleAuth();
-  }, [router]);
+  }, [router.pathname]);
   if (!authChecked) { // 增加加载状态
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }

web/pages/index.tsx

@@ -35,13 +35,13 @@ import moment from 'moment';
 const Playground: NextPage = () => {
   const router = useRouter();
 
-   // 检查登录状态
-   useEffect(() => {
-    const userInfo = localStorage.getItem(STORAGE_USERINFO_KEY);
-    if (!userInfo) {
-      router.push('/login');
-    }
-  }, []);
+  //  // 检查登录状态
+  //  useEffect(() => {
+  //   const userInfo = localStorage.getItem(STORAGE_USERINFO_KEY);
+  //   if (!userInfo) {
+  //     router.push('/login');
+  //   }
+  // }, []);
 
   const { t } = useTranslation();
   const { setAgent, setCurrentDialogInfo, model } = useContext(ChatContext);

web/pages/login.tsx

@@ -1,10 +1,9 @@
 // login.tsx 最简测试版本
 import { FC } from 'react';
-import { Button, Form, Input, Spin, notification } from 'antd';
+import { Button, Form, Input, Spin, notification ,Image} from 'antd';
 import { useRouter } from 'next/router';
 import { STORAGE_USERINFO_KEY, STORAGE_USERINFO_VALID_TIME_KEY } from '@/utils/constants/index';
 import { doLogin } from '@/client/api';
-import { Role, UserInfoResponse } from '@/types/userinfo';
 import { useRequest } from 'ahooks';
 
 const LoginPage: FC = () => {
@@ -40,26 +39,53 @@ const LoginPage: FC = () => {
   );
 
   return (
-    <div className="flex justify-center items-center h-screen">
-      <div className="w-96 p-6 bg-white rounded-lg shadow-lg">
-        <h1 className="text-2xl mb-4 text-center">系统登录</h1>
-        <Form onFinish={(values) => doLoginFn(values)}>
-          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
-            <Input placeholder="用户名" />
-          </Form.Item>
-          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
-            <Input.Password placeholder="密码" />
-          </Form.Item>
-          <Button
-            type="primary"
-            htmlType="submit"
-            block
-            icon={loading ? <Spin className="mr-2" /> : null}
-            disabled={loading}
-          >
-            {loading ? '登录中...' : '登录'}
-          </Button>
-        </Form>
+    <div className="relative h-screen w-screen overflow-hidden">
+      {/* 视频背景 */}
+      <video
+        autoPlay
+        loop
+        muted
+        className="absolute inset-0 h-full w-full object-cover"
+        style={{ zIndex: 0 }}
+      >
+        <source src="/0001-0096.mp4" type="video/mp4" />
+        您的浏览器不支持视频标签。
+      </video>
+
+      {/* 登录表单容器 */}
+      <div className="relative z-10 flex h-full items-center justify-end pr-24">
+        <div className="w-96 rounded-lg bg-white bg-opacity-90 p-6 shadow-lg backdrop-blur-sm">
+          
+          <Image
+            width={'100%'}
+            preview={false}
+            src="/LOGO_1.png"
+          />
+          <Form onFinish={(values) => doLoginFn(values)}>
+            {/* 保持原有表单项目不变 */}
+            <Form.Item
+              name="username"
+              rules={[{ required: true, message: '请输入用户名' }]}
+            >
+              <Input placeholder="用户名" />
+            </Form.Item>
+            <Form.Item
+              name="password"
+              rules={[{ required: true, message: '请输入密码' }]}
+            >
+              <Input.Password placeholder="密码" />
+            </Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              block
+              icon={loading ? <Spin className="mr-2" /> : null}
+              disabled={loading}
+            >
+              {loading ? '登录中...' : '登录'}
+            </Button>
+          </Form>
+        </div>
       </div>
     </div>
   );

web/styles/globals.css

@@ -13,26 +13,6 @@ body {
   -webkit-appearance: none;
 }
 
-/* 重置基础布局 */
-html, body, #__next {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-/* 修复antd表单样式 */
-.ant-form {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-/* 强制显示测试 */
-.red-test-box {
-  border: 2px solid red;
-  height: 100px;
-  width: 100px;
-}
-
 .light {
   color: #333;
   background-color: #f7f7f7;