diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx index 650cf3c..241aa65 100644 --- a/web/src/pages/Login.tsx +++ b/web/src/pages/Login.tsx @@ -3,21 +3,69 @@ import { Form, Input, Button, message } from 'antd' import { MessageOutlined, UserOutlined, LockOutlined, SafetyCertificateOutlined, CrownOutlined, ArrowRightOutlined, - CheckCircleFilled, + CheckCircleFilled, CustomerServiceOutlined, } from '@ant-design/icons' import { useNavigate } from 'react-router-dom' import { useAuth } from '@/stores/auth' +type DemoRole = { + key: string + title: string + username: string + pass: string + icon: typeof CrownOutlined +} + +const demoRoles: DemoRole[] = [ + { key: 'tenant', title: '租户管理', username: 'kefu_admin', pass: 'kefu_admin123', icon: CrownOutlined }, + { key: 'admin', title: '平台管理', username: 'platform_admin', pass: 'kefu_admin123', icon: SafetyCertificateOutlined }, + { key: 'agent', title: '坐席人员', username: 'agent1', pass: 'kefu_admin123', icon: CustomerServiceOutlined }, +] + const Login = () => { const [form] = Form.useForm() const [loading, setLoading] = useState(false) + const [selectedRole, setSelectedRole] = useState('tenant') + + // 记住密码状态持久化 + const [remember, setRemember] = useState(() => { + return localStorage.getItem('kefu_remember_me') === 'true' + }) + + const [username, setUsername] = useState(() => { + const isRemembered = localStorage.getItem('kefu_remember_me') === 'true' + if (isRemembered) { + return localStorage.getItem('kefu_saved_username') || 'kefu_admin' + } + return 'kefu_admin' + }) + + const [password, setPassword] = useState(() => { + const isRemembered = localStorage.getItem('kefu_remember_me') === 'true' + if (isRemembered) { + return localStorage.getItem('kefu_saved_password') || 'kefu_admin123' + } + return 'kefu_admin123' + }) + const { login } = useAuth() const navigate = useNavigate() - const onFinish = async (values: { username: string; password: string }) => { + const onFinish = async (values: { username?: string; password?: string }) => { setLoading(true) + const u = (values.username || username).trim() + const p = (values.password || password).trim() try { - const user = await login(values.username, values.password) + const user = await login(u, p) + if (remember) { + localStorage.setItem('kefu_remember_me', 'true') + localStorage.setItem('kefu_saved_username', u) + localStorage.setItem('kefu_saved_password', p) + } else { + localStorage.removeItem('kefu_remember_me') + localStorage.removeItem('kefu_saved_username') + localStorage.removeItem('kefu_saved_password') + } message.success('登录成功') navigate(user.role === 'platform_admin' ? '/admin/dashboard' : '/agent/dashboard', { replace: true }) } catch { @@ -27,27 +75,31 @@ const Login = () => { } } - const fillCredentials = (u: string, p: string) => { - form.setFieldsValue({ username: u, password: p }) + const selectDemoRole = (role: DemoRole) => { + setSelectedRole(role.key) + setUsername(role.username) + setPassword(role.pass) + form.setFieldsValue({ username: role.username, password: role.pass }) } return ( -
- {/* 动态光晕与网格背景 */} -
-
-
+
+ {/* 科技感深邃渐变背景 */} +
+
+
+
- {/* 顶部品牌微标 */} -
+ {/* 顶栏品牌信息 */} +
-
+
Kefu Cloud
- + 系统服务正常 @@ -55,19 +107,48 @@ const Login = () => {
{/* 核心登录卡片 */} -
-
-
- {/* 顶端光效描边 */} -
+
+
+
+ {/* 顶端亮色发光描边 */} +
{/* 卡片头部 */} -
-
- +
+
+ +
+

登录客服云平台

+

全渠道多租户智能客服与运营管理

+
+ + {/* 顶部一键填入演示账号切换 Tab */} +
+
+ 快捷填入演示账号: + 点击自动填入 +
+
+ {demoRoles.map(role => { + const Icon = role.icon + const active = selectedRole === role.key + return ( + + ) + })}
-

欢迎登录客服云

-

全渠道多租户智能客服工作台

{/* 登录表单 */} @@ -80,9 +161,14 @@ const Login = () => {
{ + setUsername(e.target.value) + form.setFieldsValue({ username: e.target.value }) + }} prefix={} 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" + className="login-dark-input !h-11 !rounded-xl !text-slate-100 placeholder:!text-slate-500 transition-all text-sm" />
@@ -90,19 +176,40 @@ const Login = () => {
{ + setPassword(e.target.value) + form.setFieldsValue({ password: e.target.value }) + }} prefix={} 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" + className="login-dark-input !h-11 !rounded-xl !text-slate-100 placeholder:!text-slate-500 transition-all text-sm" />
- + {/* 记住密码勾选栏 */} +
+ + + 忘记密码请联系管理员 + +
+ + - - {/* 快捷体验账号 */} -
-
- 一键填入演示账号 - 点击自动填充 -
-
- - - -
-
{/* 底部功能特性与版权 */} -