zhxiao1124
e160476ecf
1. 新增postcss、autoprefixer、tailwindcss依赖并初始化配置 2. 移除全局及页面级CSS文件，将样式替换为tailwind原子类 3. 重构API调用逻辑，拆分接口请求函数 4. 统一项目样式规范，优化布局与组件样式
68 lines
4.3 KiB
TypeScript
68 lines
4.3 KiB
TypeScript
import { useState } from 'react';
|
||
import { Button, Form, Input, Message } from '@arco-design/web-react';
|
||
import { IconLock, IconUser } from '@arco-design/web-react/icon';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { login } from '../api/auth';
|
||
import { API_BASE_URL, TOKEN_KEY } from '../api/client';
|
||
|
||
function LoginPage() {
|
||
const navigate = useNavigate();
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const onSubmit = async (values: { username: string; password: string }) => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await login(values);
|
||
localStorage.setItem(TOKEN_KEY, data.accessToken);
|
||
Message.success('登录成功');
|
||
navigate('/dashboard', { replace: true });
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="grid min-h-screen grid-cols-1 bg-[#f7f8fa] min-[901px]:grid-cols-[minmax(520px,0.95fr)_minmax(420px,1fr)]">
|
||
<div className="relative hidden flex-col justify-between overflow-hidden px-14 pb-12 pt-11 text-white after:pointer-events-none after:absolute after:inset-0 after:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0))] min-[901px]:flex bg-[linear-gradient(135deg,rgba(15,23,42,0.98)_0%,rgba(22,93,255,0.94)_54%,rgba(15,118,110,0.96)_100%),radial-gradient(circle_at_18%_18%,rgba(255,255,255,0.18),transparent_28%),radial-gradient(circle_at_82%_72%,rgba(255,255,255,0.12),transparent_32%)]">
|
||
<div className="relative z-[1] flex items-center gap-2.5 font-bold">
|
||
<span className="grid h-7 w-7 place-items-center rounded-md bg-brand text-sm text-white">CT</span>
|
||
<span>cth-tk-admin</span>
|
||
</div>
|
||
<div className="relative z-[1] max-w-[640px]">
|
||
<span className="mb-[18px] inline-flex rounded-full border border-white/20 px-3 py-1.5 text-[13px] text-white/80">TikTok 短剧运营后台</span>
|
||
<h1 className="mb-4 mt-0 text-[42px] leading-[1.16]">CTH TikTok 短剧管理后台</h1>
|
||
<p className="m-0 max-w-[560px] text-base leading-[1.8] text-white/75">集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限，帮助运营人员稳定管理短剧业务。</p>
|
||
</div>
|
||
<div className="relative z-[1] grid max-w-[640px] grid-cols-3 gap-3">
|
||
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">内容</strong><span className="text-white/70">短剧与剧集管理</span></div>
|
||
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">权限</strong><span className="text-white/70">角色化后台授权</span></div>
|
||
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">日志</strong><span className="text-white/70">请求与播放追踪</span></div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-center bg-[linear-gradient(180deg,rgba(255,255,255,0.86),rgba(247,248,250,0.94)),#f7f8fa] p-12">
|
||
<div className="w-full max-w-[420px] rounded-lg border border-line bg-white p-9 shadow-login">
|
||
<div className="mb-[30px] flex items-center gap-3.5">
|
||
<span className="grid h-11 w-11 place-items-center rounded-lg bg-brand font-bold text-white">CT</span>
|
||
<div>
|
||
<h2 className="mb-2 mt-0 text-2xl">后台登录</h2>
|
||
<p className="m-0 text-muted">使用管理员账号进入控制台。</p>
|
||
</div>
|
||
</div>
|
||
<Form layout="vertical" onSubmit={onSubmit} initialValues={{ username: 'admin', password: 'admin123' }}>
|
||
<Form.Item label="用户名" field="username" rules={[{ required: true }]}>
|
||
<Input prefix={<IconUser />} placeholder="admin" />
|
||
</Form.Item>
|
||
<Form.Item label="密码" field="password" rules={[{ required: true }]}>
|
||
<Input.Password prefix={<IconLock />} placeholder="admin123" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading} long>登录</Button>
|
||
</Form>
|
||
<div className="mt-[22px] border-t border-canvas pt-[18px] text-xs text-muted">API 服务：{API_BASE_URL}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default LoginPage;
|