From 80bda8c021e006888213f489946e101d3b7134e2 Mon Sep 17 00:00:00 2001
From: xiamuceer-j <xiamuceer@gmail.com>
Date: Fri, 6 Mar 2026 14:14:09 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E6=96=B0?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E5=B8=83=E5=B1=80=E4=B8=8E=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Login.tsx | 461 ++++++++++++++++++++++-------------
 1 file changed, 290 insertions(+), 171 deletions(-)

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 08ce433..d6573e5 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
-import { Button, Card, Space, Typography, message, Spin, Form, Input, Tabs } from 'antd';
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Col, Divider, Form, Input, Layout, Row, Space, Spin, Tag, Typography, message, theme } from 'antd';
+import { BookOutlined, LockOutlined, RobotOutlined, SafetyCertificateOutlined, TeamOutlined, ThunderboltOutlined, UserOutlined } from '@ant-design/icons';
 import { authApi } from '../services/api';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import AnnouncementModal from '../components/AnnouncementModal';
 
+import ThemeSwitch from '../components/ThemeSwitch';
+
 const { Title, Paragraph } = Typography;
 
 export default function Login() {
@@ -15,8 +17,11 @@ export default function Login() {
   const [localAuthEnabled, setLocalAuthEnabled] = useState(false);
   const [linuxdoEnabled, setLinuxdoEnabled] = useState(false);
   const [form] = Form.useForm();
+  const { token } = theme.useToken();
+  const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
+  const primaryButtonShadow = `0 8px 20px ${alphaColor(token.colorPrimary, 0.28)}`;
+  const hoverButtonShadow = `0 12px 28px ${alphaColor(token.colorPrimary, 0.36)}`;
   const [showAnnouncement, setShowAnnouncement] = useState(false);
-  const [activeLoginMethod, setActiveLoginMethod] = useState<'local' | 'linuxdo'>('local');
 
   // 检查是否已登录和获取认证配置
   useEffect(() => {
@@ -97,9 +102,9 @@ export default function Login() {
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: '100vh',
-        background: 'var(--color-bg-base)',
+        background: token.colorBgLayout,
       }}>
-        <Spin size="large" style={{ color: 'var(--color-primary)' }} />
+        <Spin size="large" style={{ color: token.colorPrimary }} />
       </div>
     );
   }
@@ -108,47 +113,52 @@ export default function Login() {
   const renderLocalLogin = () => (
     <Form
       form={form}
+      layout="vertical"
       onFinish={handleLocalLogin}
       size="large"
-      style={{ marginTop: '24px' }}
+      style={{ marginTop: '16px' }}
     >
       <Form.Item
         name="username"
-        rules={[{ required: true, message: '请输入用户名' }]}
+        label="管理账号"
+        rules={[{ required: true, message: '请输入管理账号' }]}
       >
         <Input
-          prefix={<UserOutlined style={{ color: '#999' }} />}
-          placeholder="用户名"
+          prefix={<UserOutlined style={{ color: token.colorTextTertiary }} />}
+          placeholder="请输入管理账号"
           autoComplete="username"
+          style={{ height: 46, borderRadius: 12 }}
         />
       </Form.Item>
       <Form.Item
         name="password"
-        rules={[{ required: true, message: '请输入密码' }]}
+        label="访问密钥"
+        rules={[{ required: true, message: '请输入访问密钥' }]}
       >
         <Input.Password
-          prefix={<LockOutlined style={{ color: '#999' }} />}
-          placeholder="密码"
+          prefix={<LockOutlined style={{ color: token.colorTextTertiary }} />}
+          placeholder="请输入访问密钥"
           autoComplete="current-password"
+          style={{ height: 46, borderRadius: 12 }}
         />
       </Form.Item>
-      <Form.Item style={{ marginBottom: 0 }}>
+      <Form.Item style={{ marginBottom: 0, marginTop: 8 }}>
         <Button
           type="primary"
           htmlType="submit"
           loading={loading}
           block
           style={{
-            height: 48,
+            height: 46,
             fontSize: 16,
             fontWeight: 600,
-            background: 'var(--color-primary)',
+            background: `linear-gradient(90deg, ${token.colorPrimary} 0%, ${alphaColor(token.colorPrimary, 0.86)} 100%)`,
             border: 'none',
             borderRadius: '12px',
-            boxShadow: 'var(--shadow-primary)',
+            boxShadow: primaryButtonShadow,
           }}
         >
-          登录
+          登录系统
         </Button>
       </Form.Item>
     </Form>
@@ -156,7 +166,7 @@ export default function Login() {
 
   // 渲染LinuxDO登录
   const renderLinuxDOLogin = () => (
-    <div style={{ padding: '24px 0 8px' }}>
+    <div>
       <Button
         type="primary"
         size="large"
@@ -176,25 +186,25 @@ export default function Login() {
         onClick={handleLinuxDOLogin}
         block
         style={{
-          height: 52,
+          height: 46,
           fontSize: 16,
           fontWeight: 600,
-          background: 'var(--color-primary)',
+          background: `linear-gradient(90deg, ${token.colorPrimary} 0%, ${alphaColor(token.colorPrimary, 0.86)} 100%)`,
           border: 'none',
           borderRadius: '12px',
-          boxShadow: 'var(--shadow-primary)',
+          boxShadow: primaryButtonShadow,
           transition: 'all 0.3s ease',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.transform = 'translateY(-2px)';
-          e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
+          e.currentTarget.style.boxShadow = hoverButtonShadow;
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.transform = 'translateY(0)';
-          e.currentTarget.style.boxShadow = 'var(--shadow-primary)';
+          e.currentTarget.style.boxShadow = primaryButtonShadow;
         }}
       >
-        使用 LinuxDO 登录
+        使用 LinuxDO OAuth 登录
       </Button>
     </div>
   );
@@ -216,11 +226,34 @@ export default function Login() {
     localStorage.setItem('announcement_hide_forever', 'true');
   };
 
-  const currentLoginMethod = localAuthEnabled && linuxdoEnabled
-    ? activeLoginMethod
-    : localAuthEnabled
-      ? 'local'
-      : 'linuxdo';
+  const loginTips = [
+    '本地登录默认账号：admin / admin123',
+    '首次 LinuxDO 登录会自动创建账号',
+    '系统采用多用户数据隔离机制，每位用户拥有独立的创作空间与配置。',
+  ];
+
+  const featureItems = [
+    {
+      icon: <RobotOutlined />,
+      title: '多 AI 模型协同',
+      description: '支持 OpenAI、Gemini、Claude 等主流模型，按场景灵活切换。',
+    },
+    {
+      icon: <ThunderboltOutlined />,
+      title: '智能向导驱动',
+      description: '自动生成大纲、角色与世界观，快速搭建完整故事骨架。',
+    },
+    {
+      icon: <TeamOutlined />,
+      title: '角色组织管理',
+      description: '人物关系、组织架构可视化管理，复杂设定也能清晰掌控。',
+    },
+    {
+      icon: <BookOutlined />,
+      title: '章节创作闭环',
+      description: '支持章节生成、编辑、重写与润色，持续提升内容质量。',
+    },
+  ];
 
   return (
     <>
@@ -230,155 +263,241 @@ export default function Login() {
         onDoNotShowToday={handleDoNotShowToday}
         onNeverShow={handleNeverShow}
       />
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '100vh',
-        background: 'var(--color-bg-base)',
-        padding: '20px',
-        position: 'relative',
-        overflow: 'hidden',
-      }}>
-        {/* 装饰性背景元素 */}
-        <div style={{
-          position: 'absolute',
-          top: '-10%',
-          right: '-5%',
-          width: '400px',
-          height: '400px',
-          background: 'var(--color-primary)',
-          opacity: 0.1,
-          borderRadius: '50%',
-          filter: 'blur(60px)',
-        }} />
-        <div style={{
-          position: 'absolute',
-          bottom: '-10%',
-          left: '-5%',
-          width: '350px',
-          height: '350px',
-          background: 'var(--color-success)',
-          opacity: 0.08,
-          borderRadius: '50%',
-          filter: 'blur(60px)',
-        }} />
-
-        <Card
+      <Layout style={{ minHeight: '100vh', background: token.colorBgLayout }}>
+        <div
           style={{
-            width: '100%',
-            maxWidth: 420,
-            background: 'var(--color-bg-container)',
-            backdropFilter: 'blur(20px)',
-            WebkitBackdropFilter: 'blur(20px)',
-            boxShadow: 'var(--shadow-card)',
-            border: '1px solid var(--color-border)',
-            borderRadius: '16px',
-            position: 'relative',
-            zIndex: 1,
-          }}
-          bodyStyle={{
-            padding: '40px 32px',
+            position: 'fixed',
+            top: 20,
+            right: 20,
+            zIndex: 10,
+            padding: '8px 10px',
+            borderRadius: 12,
+            background: alphaColor(token.colorBgContainer, 0.9),
+            border: `1px solid ${token.colorBorderSecondary}`,
+            backdropFilter: 'blur(6px)',
           }}
         >
-          <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center' }}>
-            {/* Logo区域 */}
-            <div style={{ marginBottom: '8px' }}>
-              <div style={{
-                width: '72px',
-                height: '72px',
-                margin: '0 auto 20px',
-                background: 'var(--color-primary)',
-                borderRadius: '20px',
+          <ThemeSwitch size="small" />
+        </div>
+        <Row style={{ minHeight: '100vh' }}>
+          <Col xs={0} lg={11}>
+            <section
+              style={{
+                height: '100%',
+                padding: '44px 64px 88px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                position: 'relative',
+                overflow: 'hidden',
+                backgroundColor: alphaColor(token.colorBgContainer, 0.78),
+                backgroundImage: `linear-gradient(${alphaColor(token.colorTextSecondary, 0.06)} 1px, transparent 1px), linear-gradient(90deg, ${alphaColor(token.colorTextSecondary, 0.06)} 1px, transparent 1px)`,
+                backgroundSize: '68px 68px',
+              }}
+            >
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `radial-gradient(circle at 25% 20%, ${alphaColor(token.colorPrimary, 0.12)} 0%, transparent 50%)`,
+                  pointerEvents: 'none',
+                }}
+              />
+
+              <div
+                style={{
+                  position: 'relative',
+                  zIndex: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  gap: 34,
+                  width: '100%',
+                  // flex: 1,
+                }}
+              >
+                <Space align="center" size={14}>
+                  <div
+                    style={{
+                      width: 46,
+                      height: 46,
+                      borderRadius: 14,
+                      background: `linear-gradient(135deg, ${token.colorPrimary} 0%, ${alphaColor(token.colorPrimary, 0.7)} 100%)`,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      boxShadow: primaryButtonShadow,
+                    }}
+                  >
+                    <img
+                      src="/logo.svg"
+                      alt="MuMuAINovel"
+                      style={{ width: 26, height: 26, filter: 'brightness(0) invert(1)' }}
+                    />
+                  </div>
+                  <Title level={3} style={{ margin: 0, color: token.colorText }}>
+                    MuMuAINovel
+                  </Title>
+                </Space>
+
+                <Space direction="vertical" size={32} style={{ width: '100%' }}>
+                  <div style={{ maxWidth: 'min(860px, 100%)' }}>
+                    <Title
+                      level={1}
+                      style={{
+                        marginBottom: 22,
+                        color: token.colorText,
+                        lineHeight: 1.12,
+                        fontWeight: 800,
+                        fontSize: 'clamp(52px, 3vw, 78px)',
+                      }}
+                    >
+                      基于 AI 的
+                      <br />
+                      <span
+                        style={{
+                          backgroundImage: `linear-gradient(90deg, ${token.colorPrimary} 0%, #d946ef 100%)`,
+                          WebkitBackgroundClip: 'text',
+                          backgroundClip: 'text',
+                          WebkitTextFillColor: 'transparent',
+                          color: token.colorPrimary,
+                        }}
+                      >
+                        智能小说创作助手
+                      </span>
+                    </Title>
+                    <Paragraph
+                      style={{
+                        fontSize: 'clamp(18px, 1vw, 22px)',
+                        lineHeight: 1.85,
+                        color: token.colorTextSecondary,
+                        marginBottom: 0,
+                        maxWidth: 800,
+                      }}
+                    >
+                      从灵感到成稿，围绕「多模型协同、创作流程自动化、角色关系管理、章节精修」构建一体化创作工作台。
+                    </Paragraph>
+                  </div>
+
+                  <Row gutter={[20, 20]} style={{ width: '100%', maxWidth: 'min(920px, 100%)' }}>
+                    {featureItems.map((item) => (
+                      <Col span={12} key={item.title}>
+                        <Card
+                          size="small"
+                          bordered={false}
+                          style={{
+                            height: '100%',
+                            minHeight: 120,
+                            borderRadius: 16,
+                            background: alphaColor(token.colorBgContainer, 0.9),
+                          }}
+                          bodyStyle={{ padding: 16 }}
+                        >
+                          <Space direction="vertical" size={8}>
+                            <Space size={10} style={{ color: token.colorPrimary, fontWeight: 700, fontSize: 15 }}>
+                              {item.icon}
+                              <span>{item.title}</span>
+                            </Space>
+                            <Paragraph style={{ marginBottom: 0, color: token.colorTextSecondary, fontSize: 14, lineHeight: 1.65 }}>
+                              {item.description}
+                            </Paragraph>
+                          </Space>
+                        </Card>
+                      </Col>
+                    ))}
+                  </Row>
+                </Space>
+
+                <Space size={[10, 14]} wrap style={{ maxWidth: 'min(860px, 100%)' }}>
+                  <Tag color="blue">OpenAI</Tag>
+                  <Tag color="geekblue">Gemini</Tag>
+                  <Tag color="purple">Claude</Tag>
+                  <Tag color="cyan">LinuxDO OAuth</Tag>
+                  <Tag color="green">Docker Compose</Tag>
+                  <Tag color="gold">PostgreSQL</Tag>
+                </Space>
+              </div>
+
+              <Paragraph
+                style={{
+                  marginBottom: 0,
+                  fontSize: 12,
+                  color: token.colorTextTertiary,
+                  position: 'relative',
+                  zIndex: 1,
+                  letterSpacing: 0.4,
+                }}
+              >
+                © 2026 MuMuAINovel · GPLv3 License
+              </Paragraph>
+            </section>
+          </Col>
+
+          <Col xs={24} lg={13}>
+            <section
+              style={{
+                minHeight: '100vh',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                boxShadow: 'var(--shadow-primary)',
-              }}>
-                <img
-                  src="/logo.svg"
-                  alt="Logo"
-                  style={{
-                    width: '48px',
-                    height: '48px',
-                    filter: 'brightness(0) invert(1)',
-                  }}
-                />
+                padding: '48px min(7vw, 72px)',
+                background: token.colorBgLayout,
+              }}
+            >
+              <div style={{ width: '100%', maxWidth: 480 }}>
+                <Space direction="vertical" size={4}>
+                  <Title level={2} style={{ marginBottom: 0, fontWeight: 700, color: token.colorText }}>
+                    欢迎回来
+                  </Title>
+                  <Paragraph style={{ marginBottom: 0, color: token.colorTextSecondary }}>
+                    登录 MuMuAINovel，继续你的小说创作项目。
+                  </Paragraph>
+                </Space>
+
+                <div style={{ marginTop: 22 }}>
+                  {localAuthEnabled ? renderLocalLogin() : null}
+
+                  {linuxdoEnabled && localAuthEnabled ? (
+                    <>
+                      <Divider style={{ margin: '18px 0 16px' }}>或</Divider>
+                      {renderLinuxDOLogin()}
+                    </>
+                  ) : null}
+
+                  {!localAuthEnabled && linuxdoEnabled ? renderLinuxDOLogin() : null}
+
+                  {!localAuthEnabled && !linuxdoEnabled ? (
+                    <Alert
+                      type="warning"
+                      showIcon
+                      message="当前未启用可用登录方式"
+                      description="请联系管理员在系统配置中启用本地登录或 LinuxDO OAuth 登录。"
+                    />
+                  ) : null}
+
+                  <Divider style={{ margin: '20px 0 14px' }} />
+                  <Alert
+                    type="info"
+                    showIcon
+                    icon={<SafetyCertificateOutlined />}
+                    style={{ background: alphaColor(token.colorPrimary, 0.06), borderRadius: 12 }}
+                    message="登录说明"
+                    description={(
+                      <ul style={{ margin: 0, paddingLeft: 18 }}>
+                        {loginTips.map((tip) => (
+                          <li key={tip} style={{ marginBottom: 4 }}>
+                            {tip}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  />
+                </div>
               </div>
-              <Title level={2} style={{
-                marginBottom: 8,
-                color: 'var(--color-primary)',
-                fontWeight: 700,
-              }}>
-                AI小说创作助手
-              </Title>
-              <Paragraph style={{
-                color: 'var(--color-text-secondary)',
-                fontSize: '14px',
-                marginBottom: 0,
-              }}>
-                {localAuthEnabled && linuxdoEnabled ? '选择登录方式' :
-                  localAuthEnabled ? '使用账户密码登录' :
-                    '使用 LinuxDO 账号登录'}
-              </Paragraph>
-            </div>
-
-            {/* 登录方式 */}
-            {localAuthEnabled && linuxdoEnabled ? (
-              <Tabs
-                activeKey={activeLoginMethod}
-                onChange={(key) => setActiveLoginMethod(key as 'local' | 'linuxdo')}
-                centered
-                items={[
-                  {
-                    key: 'local',
-                    label: '账户密码',
-                    children: renderLocalLogin(),
-                  },
-                  {
-                    key: 'linuxdo',
-                    label: 'LinuxDO',
-                    children: renderLinuxDOLogin(),
-                  },
-                ]}
-              />
-            ) : localAuthEnabled ? (
-              renderLocalLogin()
-            ) : (
-              renderLinuxDOLogin()
-            )}
-
-            {/* 提示信息 */}
-            <div style={{
-              padding: '16px',
-              background: 'rgba(77, 128, 136, 0.08)',
-              borderRadius: '12px',
-              border: '1px solid var(--color-border)',
-            }}>
-              <Paragraph style={{
-                fontSize: 13,
-                color: 'var(--color-text-secondary)',
-                marginBottom: 0,
-                lineHeight: 1.6,
-              }}>
-                {currentLoginMethod === 'linuxdo' ? (
-                  <>
-                    🎉 首次登录将自动创建账号
-                    <br />
-                    🔒 每个用户拥有独立的数据空间
-                  </>
-                ) : (
-                  <>
-                    🧪 默认账号：admin / admin123
-                    <br />
-                    🔒 每个用户拥有独立的数据空间
-                  </>
-                )}
-              </Paragraph>
-            </div>
-          </Space>
-        </Card>
-      </div>
+            </section>
+          </Col>
+        </Row>
+      </Layout>
     </>
   );
 }
\ No newline at end of file