优化整体ui-1

web/src/pages/Login.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react'
-import { Form, Input, Button, Card, message } from 'antd'
-import { MessageOutlined } from '@ant-design/icons'
+import { Form, Input, Button, message } from 'antd'
+import {
+  MessageOutlined, UserOutlined, LockOutlined,
+  SafetyCertificateOutlined, CrownOutlined, ArrowRightOutlined,
+  CheckCircleFilled,
+} from '@ant-design/icons'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/stores/auth'
 
@@ -23,30 +27,148 @@ const Login = () => {
     }
   }
 
+  const fillCredentials = (u: string, p: string) => {
+    form.setFieldsValue({ username: u, password: p })
+  }
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-neutral-100 flex items-center justify-center p-4">
-      <Card className="w-full max-w-[400px] shadow-lg !rounded-xl" bordered={false}>
-        <div className="text-center mb-6">
-          <div className="w-12 h-12 rounded-xl bg-blue-500 flex items-center justify-center mx-auto mb-3">
-            <MessageOutlined className="text-white text-xl" />
+    <div className="min-h-screen relative flex flex-col justify-between bg-gradient-to-br from-slate-900 via-slate-950 to-indigo-950 p-4 sm:p-6 overflow-hidden select-none">
+      {/* 动态光晕与网格背景 */}
+      <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] rounded-full bg-blue-500/15 blur-[140px] pointer-events-none" />
+      <div className="absolute bottom-[-10%] right-[-10%] w-[700px] h-[700px] rounded-full bg-indigo-500/15 blur-[160px] pointer-events-none" />
+      <div className="absolute top-[30%] right-[10%] w-[400px] h-[400px] rounded-full bg-cyan-400/10 blur-[120px] pointer-events-none" />
+
+      {/* 顶部品牌微标 */}
+      <header className="relative z-10 w-full max-w-5xl mx-auto flex items-center justify-between py-2">
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-blue-500/30">
+            <MessageOutlined className="text-base" />
           </div>
-          <h1 className="text-xl font-bold text-neutral-800">客服云</h1>
-          <p className="text-sm text-neutral-400 mt-1">在线客服系统</p>
+          <span className="text-base font-bold text-white tracking-tight">Kefu Cloud</span>
         </div>
-        <Form form={form} layout="vertical" onFinish={onFinish} autoComplete="off">
-          <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
-            <Input placeholder="kefu_admin" size="large" />
-          </Form.Item>
-          <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
-            <Input.Password placeholder="kefu_admin123" size="large" />
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" htmlType="submit" block size="large" loading={loading}>
-              登录
-            </Button>
-          </Form.Item>
-        </Form>
-      </Card>
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white/10 text-slate-300 border border-white/10 backdrop-blur-md">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            系统服务正常
+          </span>
+        </div>
+      </header>
+
+      {/* 核心登录卡片 */}
+      <main className="relative z-10 flex-1 flex items-center justify-center my-6">
+        <div className="w-full max-w-[430px]">
+          <div className="relative rounded-3xl bg-slate-900/70 border border-slate-700/60 p-8 sm:p-9 shadow-2xl backdrop-blur-2xl">
+            {/* 顶端光效描边 */}
+            <div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-blue-500/60 to-transparent" />
+
+            {/* 卡片头部 */}
+            <div className="text-center mb-8">
+              <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-500 text-white shadow-xl shadow-blue-500/30 mb-4 border border-white/20">
+                <MessageOutlined className="text-2xl" />
+              </div>
+              <h1 className="text-2xl font-bold text-white tracking-tight m-0">欢迎登录客服云</h1>
+              <p className="text-xs text-slate-400 mt-2 m-0 font-normal">全渠道多租户智能客服工作台</p>
+            </div>
+
+            {/* 登录表单 */}
+            <Form form={form} layout="vertical" onFinish={onFinish} autoComplete="off" size="large">
+              <Form.Item
+                name="username"
+                rules={[{ required: true, message: '请输入用户名' }]}
+                className="!mb-4"
+              >
+                <div className="space-y-1.5">
+                  <label className="block text-xs font-semibold text-slate-300">账号 / 用户名</label>
+                  <Input
+                    prefix={<UserOutlined className="text-slate-400 mr-1.5 text-sm" />}
+                    placeholder="请输入登录账号"
+                    className="!h-11 !rounded-xl !bg-slate-800/80 !border-slate-700 !text-slate-100 placeholder:!text-slate-500 hover:!border-blue-500 focus:!border-blue-500 focus:!ring-2 focus:!ring-blue-500/20 transition-all text-sm"
+                  />
+                </div>
+              </Form.Item>
+
+              <Form.Item
+                name="password"
+                rules={[{ required: true, message: '请输入密码' }]}
+                className="!mb-6"
+              >
+                <div className="space-y-1.5">
+                  <label className="block text-xs font-semibold text-slate-300">密码</label>
+                  <Input.Password
+                    prefix={<LockOutlined className="text-slate-400 mr-1.5 text-sm" />}
+                    placeholder="请输入登录密码"
+                    className="!h-11 !rounded-xl !bg-slate-800/80 !border-slate-700 !text-slate-100 placeholder:!text-slate-500 hover:!border-blue-500 focus:!border-blue-500 focus:!ring-2 focus:!ring-blue-500/20 transition-all text-sm"
+                  />
+                </div>
+              </Form.Item>
+
+              <Form.Item className="!mb-5">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  block
+                  loading={loading}
+                  className="!h-11 !rounded-xl !bg-gradient-to-r !from-blue-600 !to-indigo-600 hover:!from-blue-500 hover:!to-indigo-500 !border-0 !text-sm !font-semibold shadow-lg shadow-blue-600/30 transition-all duration-200 cursor-pointer flex items-center justify-center gap-2"
+                >
+                  <span>立即登录</span>
+                  <ArrowRightOutlined className="text-xs" />
+                </Button>
+              </Form.Item>
+            </Form>
+
+            {/* 快捷体验账号 */}
+            <div className="pt-5 border-t border-slate-800/90">
+              <div className="flex items-center justify-between text-[11px] font-medium text-slate-400 mb-2.5">
+                <span>一键填入演示账号</span>
+                <span className="text-slate-500">点击自动填充</span>
+              </div>
+              <div className="grid grid-cols-2 gap-2.5">
+                <button
+                  type="button"
+                  onClick={() => fillCredentials('kefu_admin', 'kefu_admin123')}
+                  className="group relative flex items-center justify-between p-2.5 rounded-xl bg-slate-800/60 hover:bg-slate-800 border border-slate-700/70 hover:border-blue-500/60 text-left transition-all cursor-pointer shadow-2xs"
+                >
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-1.5 text-xs font-semibold text-slate-200 group-hover:text-blue-400 transition-colors">
+                      <CrownOutlined className="text-amber-400 text-xs" />
+                      <span>租户管理员</span>
+                    </div>
+                    <div className="text-[10px] text-slate-400 mt-0.5">kefu_admin</div>
+                  </div>
+                  <span className="text-[10px] text-slate-500 group-hover:text-slate-300 font-mono">填入</span>
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => fillCredentials('admin', 'admin123')}
+                  className="group relative flex items-center justify-between p-2.5 rounded-xl bg-slate-800/60 hover:bg-slate-800 border border-slate-700/70 hover:border-indigo-500/60 text-left transition-all cursor-pointer shadow-2xs"
+                >
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-1.5 text-xs font-semibold text-slate-200 group-hover:text-indigo-400 transition-colors">
+                      <SafetyCertificateOutlined className="text-blue-400 text-xs" />
+                      <span>平台管理员</span>
+                    </div>
+                    <div className="text-[10px] text-slate-400 mt-0.5">admin</div>
+                  </div>
+                  <span className="text-[10px] text-slate-500 group-hover:text-slate-300 font-mono">填入</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* 底部功能特性与版权 */}
+      <footer className="relative z-10 w-full max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-slate-500 py-2 border-t border-white/5">
+        <div className="flex items-center gap-4 text-[11px]">
+          <span className="inline-flex items-center gap-1"><CheckCircleFilled className="text-emerald-500 text-xs" /> 多租户数据隔离</span>
+          <span className="inline-flex items-center gap-1"><CheckCircleFilled className="text-emerald-500 text-xs" /> WebSocket 实时长连</span>
+          <span className="inline-flex items-center gap-1"><CheckCircleFilled className="text-emerald-500 text-xs" /> 全渠道客服集成</span>
+        </div>
+        <div className="text-[11px] text-slate-500">
+          &copy; {new Date().getFullYear()} Kefu Cloud. All Rights Reserved.
+        </div>
+      </footer>
     </div>
   )
 }