feat: 完成TikTok短剧管理后台基础功能开发

本次提交搭建了完整的后台管理系统,包含:
1.  登录认证与权限校验体系
2.  工作台、短剧、用户、角色、人员、日志等全业务模块
3.  响应式布局与通用样式组件
4.  菜单动态过滤与路由权限控制
5.  移除了README中冗余的权限管理菜单项
This commit is contained in:
2026-07-01 15:24:13 +08:00
parent 6722752d5e
commit 51e26025c6
27 changed files with 1364 additions and 1282 deletions

68
src/Login/index.tsx Normal file
View 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;