feat: 完成TikTok短剧管理后台基础功能开发
本次提交搭建了完整的后台管理系统,包含: 1. 登录认证与权限校验体系 2. 工作台、短剧、用户、角色、人员、日志等全业务模块 3. 响应式布局与通用样式组件 4. 菜单动态过滤与路由权限控制 5. 移除了README中冗余的权限管理菜单项
This commit is contained in:
68
src/Login/index.tsx
Normal file
68
src/Login/index.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
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 type { ApiResponse } from '../api/types';
|
||||
import { API_BASE_URL, TOKEN_KEY, api } from '../api/client';
|
||||
import './index.css';
|
||||
|
||||
function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onSubmit = async (values: { username: string; password: string }) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.post<ApiResponse<{ accessToken: string }>>('/api/admin/v1/auth/login', values);
|
||||
localStorage.setItem(TOKEN_KEY, response.data.data.accessToken);
|
||||
Message.success('登录成功');
|
||||
navigate('/dashboard', { replace: true });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className="login-visual">
|
||||
<div className="login-logo">
|
||||
<span className="logo-mark">CT</span>
|
||||
<span>cth-tk-admin</span>
|
||||
</div>
|
||||
<div className="login-brand">
|
||||
<span className="login-eyebrow">TikTok 短剧运营后台</span>
|
||||
<h1>CTH TikTok 短剧管理后台</h1>
|
||||
<p>集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限,帮助运营人员稳定管理短剧业务。</p>
|
||||
</div>
|
||||
<div className="login-metrics">
|
||||
<div className="login-metric"><strong>内容</strong><span>短剧与剧集管理</span></div>
|
||||
<div className="login-metric"><strong>权限</strong><span>角色化后台授权</span></div>
|
||||
<div className="login-metric"><strong>日志</strong><span>请求与播放追踪</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-panel">
|
||||
<div className="login-card">
|
||||
<div className="login-card-header">
|
||||
<span className="login-card-mark">CT</span>
|
||||
<div>
|
||||
<h2>后台登录</h2>
|
||||
<p className="subtitle">使用管理员账号进入控制台。</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="login-card-footer">API 服务:{API_BASE_URL}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginPage;
|
||||
Reference in New Issue
Block a user