admin/uadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ayou
2025-08-20 00:42:01 +08:00
commit 06bb5439b4
73 changed files with 30196 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/.DS_Store vendored Normal file
View File

Binary file not shown.

38
frontend/src/App.css Normal file
View File

@ -0,0 +1,38 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
frontend/src/App.test.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

87
frontend/src/App.tsx Normal file
View File

@ -0,0 +1,87 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { AuthProvider, useAuth } from './hooks/useAuth';
import Layout from './components/Layout';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Users from './pages/Users';
import Roles from './pages/Roles';
import Permissions from './pages/Permissions';
import Menus from './pages/Menus';
import './App.css';
// 受保护的路由组件
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { user, loading } = useAuth();
if (loading) {
return <div>Loading...</div>;
}
if (!user) {
return <Navigate to="/login" replace />;
}
return <>{children}</>;
};
// 公共路由组件（已登录用户不能访问）
const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { user, loading } = useAuth();
if (loading) {
return <div>Loading...</div>;
}
if (user) {
return <Navigate to="/dashboard" replace />;
}
return <>{children}</>;
};
function App() {
return (
<ConfigProvider locale={zhCN}>
<AuthProvider>
<Router>
<Routes>
{/* 公共路由 */}
<Route path="/login" element={
<PublicRoute>
<Login />
</PublicRoute>
} />
<Route path="/register" element={
<PublicRoute>
<Register />
</PublicRoute>
} />
{/* 受保护的路由 */}
<Route path="/" element={
<ProtectedRoute>
<Layout />
</ProtectedRoute>
}>
<Route index element={<Navigate to="/dashboard" replace />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="users" element={<Users />} />
<Route path="roles" element={<Roles />} />
<Route path="permissions" element={<Permissions />} />
<Route path="menus" element={<Menus />} />
</Route>
{/* 404 重定向 */}
<Route path="*" element={<Navigate to="/dashboard" replace />} />
</Routes>
</Router>
</AuthProvider>
</ConfigProvider>
);
}
export default App;

175
frontend/src/components/Layout.tsx Normal file
View File

@ -0,0 +1,175 @@
import React, { useState } from 'react';
import {
Layout as AntLayout,
Menu,
Button,
Avatar,
Dropdown,
Typography,
Space,
MenuProps,
} from 'antd';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
UserOutlined,
TeamOutlined,
SafetyOutlined,
AppstoreOutlined,
LogoutOutlined,
SettingOutlined,
DashboardOutlined,
} from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
const { Header, Sider, Content } = AntLayout;
const { Title } = Typography;
const Layout: React.FC = () => {
const [collapsed, setCollapsed] = useState(false);
const { user, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const menuItems = [
{
key: '/dashboard',
icon: React.createElement(DashboardOutlined),
label: '仪表盘',
},
{
key: '/users',
icon: React.createElement(UserOutlined),
label: '用户管理',
},
{
key: '/roles',
icon: React.createElement(TeamOutlined),
label: '角色管理',
},
{
key: '/permissions',
icon: React.createElement(SafetyOutlined),
label: '权限管理',
},
{
key: '/menus',
icon: React.createElement(AppstoreOutlined),
label: '菜单管理',
},
];
const handleMenuClick = ({ key }: { key: string }) => {
navigate(key);
};
const handleLogout = () => {
logout();
navigate('/login');
};
const userMenuItems: MenuProps['items'] = [
{
key: 'profile',
icon: React.createElement(SettingOutlined),
label: '个人设置',
onClick: () => navigate('/profile'),
},
{
type: 'divider',
},
{
key: 'logout',
icon: React.createElement(LogoutOutlined),
label: '退出登录',
onClick: handleLogout,
},
];
return (
<AntLayout style={{ minHeight: '100vh' }}>
<Sider
trigger={null}
collapsible
collapsed={collapsed}
style={{
background: '#fff',
boxShadow: '2px 0 8px rgba(0,0,0,0.15)',
}}
>
<div
style={{
height: 64,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderBottom: '1px solid #f0f0f0',
}}
>
{!collapsed ? (
<Title level={3} style={{ margin: 0, color: '#1890ff' }}>
UAdmin
</Title>
) : (
<Title level={3} style={{ margin: 0, color: '#1890ff' }}>
U
</Title>
)}
</div>
<Menu
mode="inline"
selectedKeys={[location.pathname]}
items={menuItems}
onClick={handleMenuClick}
style={{ border: 'none' }}
/>
</Sider>
<AntLayout>
<Header
style={{
padding: '0 16px',
background: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
}}
>
<Button
type="text"
icon={collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined)}
onClick={() => setCollapsed(!collapsed)}
style={{
fontSize: '16px',
width: 64,
height: 64,
}}
/>
<Space>
<span>欢迎，{user?.username}</span>
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
<Avatar
style={{ backgroundColor: '#1890ff', cursor: 'pointer' }}
icon={React.createElement(UserOutlined)}
/>
</Dropdown>
</Space>
</Header>
<Content
style={{
margin: '16px',
padding: '24px',
background: '#fff',
borderRadius: '8px',
minHeight: 'calc(100vh - 112px)',
}}
>
<Outlet />
</Content>
</AntLayout>
</AntLayout>
);
};
export default Layout;

113
frontend/src/hooks/useAuth.ts Normal file
View File

@ -0,0 +1,113 @@
import React, { useState, useEffect, createContext, useContext, ReactNode } from 'react';
import { User, LoginRequest, RegisterRequest } from '../types';
import { apiService } from '../services/api';
import { message } from 'antd';
interface AuthContextType {
user: User | null;
token: string | null;
loading: boolean;
login: (data: LoginRequest) => Promise<boolean>;
register: (data: RegisterRequest) => Promise<boolean>;
logout: () => void;
isAuthenticated: boolean;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const useAuth = () => {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const [token, setToken] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// 从localStorage恢复认证状态
const savedToken = localStorage.getItem('token');
const savedUser = localStorage.getItem('user');
if (savedToken && savedUser) {
try {
setToken(savedToken);
setUser(JSON.parse(savedUser));
} catch (error) {
console.error('Failed to parse saved user data:', error);
localStorage.removeItem('token');
localStorage.removeItem('user');
}
}
setLoading(false);
}, []);
const login = async (data: LoginRequest): Promise<boolean> => {
try {
setLoading(true);
const response = await apiService.login(data);
setToken(response.token);
setUser(response.user);
// 保存到localStorage
localStorage.setItem('token', response.token);
localStorage.setItem('user', JSON.stringify(response.user));
message.success('登录成功');
return true;
} catch (error: any) {
console.error('Login failed:', error);
message.error(error.response?.data?.message || '登录失败');
return false;
} finally {
setLoading(false);
}
};
const register = async (data: RegisterRequest): Promise<boolean> => {
try {
setLoading(true);
await apiService.register(data);
message.success('注册成功，请登录');
return true;
} catch (error: any) {
console.error('Register failed:', error);
message.error(error.response?.data?.message || '注册失败');
return false;
} finally {
setLoading(false);
}
};
const logout = async () => {
try {
await apiService.logout();
} catch (error) {
console.error('Logout failed:', error);
} finally {
setUser(null);
setToken(null);
localStorage.removeItem('token');
localStorage.removeItem('user');
message.success('已退出登录');
}
};
const value: AuthContextType = {
user,
token,
loading,
login,
register,
logout,
isAuthenticated: !!token && !!user,
};
return React.createElement(AuthContext.Provider, { value }, children);
};

13
frontend/src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

19
frontend/src/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
frontend/src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

342
frontend/src/pages/Dashboard.tsx Normal file
View File

@ -0,0 +1,342 @@
import React, { useState, useEffect } from 'react';
import {
Card,
Row,
Col,
Statistic,
Table,
Tag,
Space,
Avatar,
List,
Typography,
Progress,
} from 'antd';
import {
UserOutlined,
TeamOutlined,
SafetyOutlined,
MenuOutlined,
TrophyOutlined,
ClockCircleOutlined,
} from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import type { ColumnsType } from 'antd/es/table';
const { Title, Text } = Typography;
interface DashboardStats {
totalUsers: number;
totalRoles: number;
totalPermissions: number;
totalMenus: number;
}
interface RecentActivity {
id: number;
action: string;
target: string;
user: string;
timestamp: string;
type: 'create' | 'update' | 'delete';
}
interface SystemInfo {
cpuUsage: number;
memoryUsage: number;
diskUsage: number;
uptime: string;
}
const Dashboard: React.FC = () => {
const { user } = useAuth();
const [stats, setStats] = useState<DashboardStats>({
totalUsers: 0,
totalRoles: 0,
totalPermissions: 0,
totalMenus: 0,
});
const [recentActivities, setRecentActivities] = useState<RecentActivity[]>([]);
const [systemInfo, setSystemInfo] = useState<SystemInfo>({
cpuUsage: 0,
memoryUsage: 0,
diskUsage: 0,
uptime: '0天',
});
const [loading, setLoading] = useState(false);
// 模拟数据加载
useEffect(() => {
const loadDashboardData = async () => {
setLoading(true);
try {
// 模拟API调用
await new Promise(resolve => setTimeout(resolve, 1000));
// 模拟统计数据
setStats({
totalUsers: 156,
totalRoles: 8,
totalPermissions: 24,
totalMenus: 12,
});
// 模拟最近活动
setRecentActivities([
{
id: 1,
action: '创建用户',
target: 'john_doe',
user: 'admin',
timestamp: '2024-01-15 10:30:00',
type: 'create',
},
{
id: 2,
action: '更新角色',
target: '管理员',
user: 'admin',
timestamp: '2024-01-15 09:45:00',
type: 'update',
},
{
id: 3,
action: '删除权限',
target: 'users:delete',
user: 'admin',
timestamp: '2024-01-15 09:15:00',
type: 'delete',
},
{
id: 4,
action: '创建菜单',
target: '系统设置',
user: 'admin',
timestamp: '2024-01-15 08:30:00',
type: 'create',
},
{
id: 5,
action: '更新用户',
target: 'jane_smith',
user: 'admin',
timestamp: '2024-01-14 16:20:00',
type: 'update',
},
]);
// 模拟系统信息
setSystemInfo({
cpuUsage: Math.floor(Math.random() * 100),
memoryUsage: Math.floor(Math.random() * 100),
diskUsage: Math.floor(Math.random() * 100),
uptime: '15天 8小时 32分钟',
});
} catch (error) {
console.error('加载仪表板数据失败:', error);
} finally {
setLoading(false);
}
};
loadDashboardData();
}, []);
const getActivityTypeColor = (type: RecentActivity['type']) => {
switch (type) {
case 'create':
return 'green';
case 'update':
return 'blue';
case 'delete':
return 'red';
default:
return 'default';
}
};
const getActivityTypeIcon = (type: RecentActivity['type']) => {
switch (type) {
case 'create':
return React.createElement(TrophyOutlined);
case 'update':
return React.createElement(ClockCircleOutlined);
case 'delete':
return React.createElement(ClockCircleOutlined);
default:
return React.createElement(ClockCircleOutlined);
}
};
const activityColumns: ColumnsType<RecentActivity> = [
{
title: '操作',
dataIndex: 'action',
key: 'action',
render: (action: string, record: RecentActivity) => (
<Space>
<Tag color={getActivityTypeColor(record.type)}>
{action}
</Tag>
</Space>
),
},
{
title: '目标',
dataIndex: 'target',
key: 'target',
render: (target: string) => (
<Text code>{target}</Text>
),
},
{
title: '操作人',
dataIndex: 'user',
key: 'user',
render: (user: string) => (
<Space>
<Avatar size="small" icon={React.createElement(UserOutlined)} />
{user}
</Space>
),
},
{
title: '时间',
dataIndex: 'timestamp',
key: 'timestamp',
},
];
return (
<div>
{/* 欢迎信息 */}
<Card style={{ marginBottom: 24 }}>
<Row align="middle">
<Col>
<Avatar size={64} icon={React.createElement(UserOutlined)} />
</Col>
<Col style={{ marginLeft: 16 }}>
<Title level={3} style={{ margin: 0 }}>
欢迎回来，{user?.username}！
</Title>
<Text type="secondary">
今天是 {new Date().toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
})}
</Text>
</Col>
</Row>
</Card>
{/* 统计卡片 */}
<Row gutter={16} style={{ marginBottom: 24 }}>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="用户总数"
value={stats.totalUsers}
prefix={React.createElement(UserOutlined)}
valueStyle={{ color: '#3f8600' }}
loading={loading}
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="角色总数"
value={stats.totalRoles}
prefix={React.createElement(TeamOutlined)}
valueStyle={{ color: '#cf1322' }}
loading={loading}
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="权限总数"
value={stats.totalPermissions}
prefix={React.createElement(SafetyOutlined)}
valueStyle={{ color: '#1890ff' }}
loading={loading}
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="菜单总数"
value={stats.totalMenus}
prefix={React.createElement(MenuOutlined)}
valueStyle={{ color: '#722ed1' }}
loading={loading}
/>
</Card>
</Col>
</Row>
<Row gutter={16}>
{/* 最近活动 */}
<Col xs={24} lg={16}>
<Card title="最近活动" style={{ height: 500 }}>
<Table
columns={activityColumns}
dataSource={recentActivities}
rowKey="id"
pagination={false}
size="small"
loading={loading}
/>
</Card>
</Col>
{/* 系统信息 */}
<Col xs={24} lg={8}>
<Card title="系统信息" style={{ height: 500 }}>
<Space direction="vertical" style={{ width: '100%' }} size="large">
<div>
<Text strong>CPU 使用率</Text>
<Progress
percent={systemInfo.cpuUsage}
status={systemInfo.cpuUsage > 80 ? 'exception' : 'active'}
strokeColor={systemInfo.cpuUsage > 80 ? '#ff4d4f' : '#52c41a'}
/>
</div>
<div>
<Text strong>内存使用率</Text>
<Progress
percent={systemInfo.memoryUsage}
status={systemInfo.memoryUsage > 80 ? 'exception' : 'active'}
strokeColor={systemInfo.memoryUsage > 80 ? '#ff4d4f' : '#1890ff'}
/>
</div>
<div>
<Text strong>磁盘使用率</Text>
<Progress
percent={systemInfo.diskUsage}
status={systemInfo.diskUsage > 80 ? 'exception' : 'active'}
strokeColor={systemInfo.diskUsage > 80 ? '#ff4d4f' : '#faad14'}
/>
</div>
<div>
<Text strong>系统运行时间</Text>
<div style={{ marginTop: 8 }}>
<Text code>{systemInfo.uptime}</Text>
</div>
</div>
</Space>
</Card>
</Col>
</Row>
</div>
);
};
export default Dashboard;

107
frontend/src/pages/Login.tsx Normal file
View File

@ -0,0 +1,107 @@
import React, { useState } from 'react';
import { Form, Input, Button, Card, Typography, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import { LoginRequest } from '../types';
import { useNavigate, Link } from 'react-router-dom';
const { Title } = Typography;
const Login: React.FC = () => {
const [loading, setLoading] = useState(false);
const { login } = useAuth();
const navigate = useNavigate();
const onFinish = async (values: LoginRequest) => {
setLoading(true);
try {
const success = await login(values);
if (success) {
navigate('/dashboard');
}
} catch (error) {
console.error('Login error:', error);
} finally {
setLoading(false);
}
};
return (
<div style={{
minHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}}>
<Card
style={{
width: 400,
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
borderRadius: '8px'
}}
>
<div style={{ textAlign: 'center', marginBottom: 24 }}>
<Title level={2} style={{ color: '#1890ff', marginBottom: 8 }}>
UAdmin
</Title>
<Typography.Text type="secondary">
用户权限管理系统
</Typography.Text>
</div>
<Form
name="login"
onFinish={onFinish}
autoComplete="off"
size="large"
>
<Form.Item
name="username"
rules={[
{ required: true, message: '请输入用户名!' },
{ min: 3, message: '用户名至少3个字符!' }
]}
>
<Input
prefix={<UserOutlined />}
placeholder="用户名"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{ required: true, message: '请输入密码!' },
{ min: 6, message: '密码至少6个字符!' }
]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="密码"
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
loading={loading}
style={{ width: '100%' }}
>
登录
</Button>
</Form.Item>
<div style={{ textAlign: 'center' }}>
<Typography.Text type="secondary">
还没有账号？ <Link to="/register">立即注册</Link>
</Typography.Text>
</div>
</Form>
</Card>
</div>
);
};
export default Login;

421
frontend/src/pages/Menus.tsx Normal file
View File

@ -0,0 +1,421 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Button,
Space,
Modal,
Form,
Input,
Select,
message,
Popconfirm,
Card,
Row,
Col,
Tag,
InputNumber,
TreeSelect,
} from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { Menu, CreateMenuRequest, UpdateMenuRequest, QueryParams } from '../types';
import { apiService } from '../services/api';
import type { ColumnsType } from 'antd/es/table';
const { Option } = Select;
const { TextArea } = Input;
interface TreeNode {
title: string;
value: number;
children?: TreeNode[];
}
const Menus: React.FC = () => {
const [menus, setMenus] = useState<Menu[]>([]);
const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [editingMenu, setEditingMenu] = useState<Menu | null>(null);
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchMenus = async (params?: QueryParams) => {
setLoading(true);
try {
const response = await apiService.getMenus({
page: pagination.current,
per_page: pagination.pageSize,
...params,
});
setMenus(response.data || []);
setPagination(prev => ({
...prev,
total: response.total,
current: response.page,
}));
} catch (error) {
message.error('获取菜单列表失败');
setMenus([]);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchMenus();
}, [pagination.current, pagination.pageSize]);
const handleSearch = (values: any) => {
setPagination(prev => ({ ...prev, current: 1 }));
fetchMenus(values);
};
const handleReset = () => {
searchForm.resetFields();
setPagination(prev => ({ ...prev, current: 1 }));
fetchMenus();
};
const handleCreate = () => {
setEditingMenu(null);
form.resetFields();
setModalVisible(true);
};
const handleEdit = (menu: Menu) => {
setEditingMenu(menu);
form.setFieldsValue({
name: menu.name,
path: menu.path,
icon: menu.icon,
parent_id: menu.parent_id,
sort_order: menu.sort_order,
status: menu.status,
});
setModalVisible(true);
};
const handleDelete = async (id: number) => {
try {
await apiService.deleteMenu(id);
message.success('删除成功');
fetchMenus();
} catch (error) {
message.error('删除失败');
}
};
const handleSubmit = async (values: CreateMenuRequest | UpdateMenuRequest) => {
try {
if (editingMenu) {
await apiService.updateMenu(editingMenu.id, values as UpdateMenuRequest);
message.success('更新成功');
} else {
await apiService.createMenu(values as CreateMenuRequest);
message.success('创建成功');
}
setModalVisible(false);
fetchMenus();
} catch (error) {
message.error(editingMenu ? '更新失败' : '创建失败');
}
};
// 构建树形结构数据
const buildTreeData = (menus: Menu[]): TreeNode[] => {
if (!menus || !Array.isArray(menus)) {
return [];
}
const menuMap = new Map<number, Menu>();
menus.forEach(menu => menuMap.set(menu.id, menu));
const buildTree = (parentId: number | null = null): TreeNode[] => {
return menus
.filter(menu => menu.parent_id === parentId)
.map(menu => ({
title: menu.name,
value: menu.id,
children: buildTree(menu.id),
}));
};
return buildTree();
};
const treeData = buildTreeData(menus);
const columns: ColumnsType<Menu> = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: '菜单名称',
dataIndex: 'name',
key: 'name',
},
{
title: '路径',
dataIndex: 'path',
key: 'path',
render: (path: string) => (
<code style={{ background: '#f5f5f5', padding: '2px 4px', borderRadius: '3px' }}>
{path}
</code>
),
},
{
title: '图标',
dataIndex: 'icon',
key: 'icon',
render: (icon: string) => icon ? (
<Tag color="blue">{icon}</Tag>
) : '-',
},
{
title: '父级菜单',
dataIndex: 'parent_id',
key: 'parent_id',
render: (parentId: number | null) => {
if (!parentId) return '-';
const parentMenu = menus.find(m => m.id === parentId);
return parentMenu ? parentMenu.name : '-';
},
},
{
title: '排序',
dataIndex: 'sort_order',
key: 'sort_order',
width: 80,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (status: string) => (
<Tag color={status === 'active' ? 'green' : 'red'}>
{status === 'active' ? '激活' : '禁用'}
</Tag>
),
},
{
title: '创建时间',
dataIndex: 'created_at',
key: 'created_at',
render: (date: string) => new Date(date).toLocaleString(),
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<Button
type="link"
icon={React.createElement(EditOutlined)}
onClick={() => handleEdit(record)}
>
编辑
</Button>
<Popconfirm
title="确定要删除这个菜单吗？"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
>
<Button
type="link"
danger
icon={React.createElement(DeleteOutlined)}
>
删除
</Button>
</Popconfirm>
</Space>
),
},
];
return (
<div>
<Card style={{ marginBottom: 16 }}>
<Form
form={searchForm}
layout="inline"
onFinish={handleSearch}
>
<Row gutter={16} style={{ width: '100%' }}>
<Col span={6}>
<Form.Item name="search" label="搜索">
<Input placeholder="菜单名称或路径" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="status" label="状态">
<Select placeholder="选择状态" allowClear>
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item>
<Space>
<Button
type="primary"
htmlType="submit"
icon={React.createElement(SearchOutlined)}
>
搜索
</Button>
<Button onClick={handleReset}>
重置
</Button>
<Button
type="primary"
icon={React.createElement(PlusOutlined)}
onClick={handleCreate}
>
新增菜单
</Button>
</Space>
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card>
<Table
columns={columns}
dataSource={menus}
rowKey="id"
loading={loading}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) =>
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
onChange: (page, pageSize) => {
setPagination(prev => ({
...prev,
current: page,
pageSize: pageSize || 10,
}));
},
}}
/>
</Card>
<Modal
title={editingMenu ? '编辑菜单' : '新增菜单'}
open={modalVisible}
onCancel={() => setModalVisible(false)}
footer={null}
width={600}
>
<Form
form={form}
layout="vertical"
onFinish={handleSubmit}
>
<Form.Item
name="name"
label="菜单名称"
rules={[
{ required: true, message: '请输入菜单名称' },
{ min: 2, message: '菜单名称至少2个字符' },
]}
>
<Input placeholder="请输入菜单名称" />
</Form.Item>
<Form.Item
name="path"
label="菜单路径"
rules={[
{ required: true, message: '请输入菜单路径' },
]}
>
<Input placeholder="请输入菜单路径，如：/users, /roles" />
</Form.Item>
<Form.Item
name="icon"
label="图标"
>
<Input placeholder="请输入图标名称，如：UserOutlined" />
</Form.Item>
<Form.Item
name="parent_id"
label="父级菜单"
>
<TreeSelect
placeholder="请选择父级菜单（可选）"
allowClear
treeData={treeData}
treeDefaultExpandAll
/>
</Form.Item>
<Form.Item
name="sort_order"
label="排序"
rules={[
{ required: true, message: '请输入排序值' },
]}
initialValue={0}
>
<InputNumber
min={0}
max={9999}
placeholder="请输入排序值"
style={{ width: '100%' }}
/>
</Form.Item>
{editingMenu && (
<Form.Item
name="status"
label="状态"
rules={[{ required: true, message: '请选择状态' }]}
>
<Select placeholder="请选择状态">
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
)}
<Form.Item style={{ textAlign: 'right', marginBottom: 0 }}>
<Space>
<Button onClick={() => setModalVisible(false)}>
取消
</Button>
<Button type="primary" htmlType="submit">
{editingMenu ? '更新' : '创建'}
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</div>
);
};
export default Menus;

311
frontend/src/pages/Permissions.tsx Normal file
View File

@ -0,0 +1,311 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Button,
Space,
Modal,
Form,
Input,
Select,
message,
Popconfirm,
Card,
Row,
Col,
Tag,
} from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { Permission, CreatePermissionRequest, UpdatePermissionRequest, QueryParams } from '../types';
import { apiService } from '../services/api';
import type { ColumnsType } from 'antd/es/table';
const { Option } = Select;
const { TextArea } = Input;
const Permissions: React.FC = () => {
const [permissions, setPermissions] = useState<Permission[]>([]);
const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [editingPermission, setEditingPermission] = useState<Permission | null>(null);
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchPermissions = async (params?: QueryParams) => {
setLoading(true);
try {
const response = await apiService.getPermissions({
page: pagination.current,
per_page: pagination.pageSize,
...params,
});
setPermissions(response.data || []);
setPagination(prev => ({
...prev,
total: response.total,
current: response.page,
}));
} catch (error) {
message.error('获取权限列表失败');
setPermissions([]); } finally {
setLoading(false);
}
};
useEffect(() => {
fetchPermissions();
}, [pagination.current, pagination.pageSize]);
const handleSearch = (values: any) => {
setPagination(prev => ({ ...prev, current: 1 }));
fetchPermissions(values);
};
const handleReset = () => {
searchForm.resetFields();
setPagination(prev => ({ ...prev, current: 1 }));
fetchPermissions();
};
const handleCreate = () => {
setEditingPermission(null);
form.resetFields();
setModalVisible(true);
};
const handleEdit = (permission: Permission) => {
setEditingPermission(permission);
form.setFieldsValue({
name: permission.name,
key: permission.key,
description: permission.description,
});
setModalVisible(true);
};
const handleDelete = async (id: number) => {
try {
await apiService.deletePermission(id);
message.success('删除成功');
fetchPermissions();
} catch (error) {
message.error('删除失败');
}
};
const handleSubmit = async (values: CreatePermissionRequest | UpdatePermissionRequest) => {
try {
if (editingPermission) {
await apiService.updatePermission(editingPermission.id, values as UpdatePermissionRequest);
message.success('更新成功');
} else {
await apiService.createPermission(values as CreatePermissionRequest);
message.success('创建成功');
}
setModalVisible(false);
fetchPermissions();
} catch (error) {
message.error(editingPermission ? '更新失败' : '创建失败');
}
};
const columns: ColumnsType<Permission> = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: '权限名称',
dataIndex: 'name',
key: 'name',
},
{
title: '权限标识',
dataIndex: 'key',
key: 'key',
render: (key: string) => (
<Tag color="blue">{key}</Tag>
),
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
{
title: '创建时间',
dataIndex: 'created_at',
key: 'created_at',
render: (date: string) => new Date(date).toLocaleString(),
},
{
title: '操作',
key: 'action_buttons',
render: (_, record) => (
<Space size="middle">
<Button
type="link"
icon={React.createElement(EditOutlined)}
onClick={() => handleEdit(record)}
>
编辑
</Button>
<Popconfirm
title="确定要删除这个权限吗？"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
>
<Button
type="link"
danger
icon={React.createElement(DeleteOutlined)}
>
删除
</Button>
</Popconfirm>
</Space>
),
},
];
return (
<div>
<Card style={{ marginBottom: 16 }}>
<Form
form={searchForm}
layout="inline"
onFinish={handleSearch}
>
<Row gutter={16} style={{ width: '100%' }}>
<Col span={6}>
<Form.Item name="search" label="搜索">
<Input placeholder="权限名称" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="key" label="权限标识">
<Input placeholder="权限标识" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item>
<Space>
<Button
type="primary"
htmlType="submit"
icon={React.createElement(SearchOutlined)}
>
搜索
</Button>
<Button onClick={handleReset}>
重置
</Button>
<Button
type="primary"
icon={React.createElement(PlusOutlined)}
onClick={handleCreate}
>
新增权限
</Button>
</Space>
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card>
<Table
columns={columns}
dataSource={permissions}
rowKey="id"
loading={loading}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) =>
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
onChange: (page, pageSize) => {
setPagination(prev => ({
...prev,
current: page,
pageSize: pageSize || 10,
}));
},
}}
/>
</Card>
<Modal
title={editingPermission ? '编辑权限' : '新增权限'}
open={modalVisible}
onCancel={() => setModalVisible(false)}
footer={null}
width={600}
>
<Form
form={form}
layout="vertical"
onFinish={handleSubmit}
>
<Form.Item
name="name"
label="权限名称"
rules={[
{ required: true, message: '请输入权限名称' },
{ min: 2, message: '权限名称至少2个字符' },
]}
>
<Input placeholder="请输入权限名称" />
</Form.Item>
<Form.Item
name="key"
label="权限标识"
rules={[
{ required: true, message: '请输入权限标识' },
]}
>
<Input placeholder="请输入权限标识，如：users:create, roles:read" />
</Form.Item>
<Form.Item
name="description"
label="描述"
>
<TextArea rows={4} placeholder="请输入权限描述" />
</Form.Item>
<Form.Item style={{ textAlign: 'right', marginBottom: 0 }}>
<Space>
<Button onClick={() => setModalVisible(false)}>
取消
</Button>
<Button type="primary" htmlType="submit">
{editingPermission ? '更新' : '创建'}
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</div>
);
};
export default Permissions;

143
frontend/src/pages/Register.tsx Normal file
View File

@ -0,0 +1,143 @@
import React, { useState } from 'react';
import { Form, Input, Button, Card, Typography, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import { RegisterRequest } from '../types';
import { useNavigate, Link } from 'react-router-dom';
const { Title } = Typography;
const Register: React.FC = () => {
const [loading, setLoading] = useState(false);
const { register } = useAuth();
const navigate = useNavigate();
const onFinish = async (values: RegisterRequest) => {
setLoading(true);
try {
const success = await register(values);
if (success) {
navigate('/login');
}
} catch (error) {
console.error('Register error:', error);
} finally {
setLoading(false);
}
};
return (
<div style={{
minHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}}>
<Card
style={{
width: 400,
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
borderRadius: '8px'
}}
>
<div style={{ textAlign: 'center', marginBottom: 24 }}>
<Title level={2} style={{ color: '#1890ff', marginBottom: 8 }}>
UAdmin
</Title>
<Typography.Text type="secondary">
用户权限管理系统 - 注册
</Typography.Text>
</div>
<Form
name="register"
onFinish={onFinish}
autoComplete="off"
size="large"
>
<Form.Item
name="username"
rules={[
{ required: true, message: '请输入用户名!' },
{ min: 3, message: '用户名至少3个字符!' },
{ max: 20, message: '用户名最多20个字符!' }
]}
>
<Input
prefix={<UserOutlined />}
placeholder="用户名"
/>
</Form.Item>
<Form.Item
name="email"
rules={[
{ required: true, message: '请输入邮箱!' },
{ type: 'email', message: '请输入有效的邮箱地址!' }
]}
>
<Input
prefix={<MailOutlined />}
placeholder="邮箱"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{ required: true, message: '请输入密码!' },
{ min: 6, message: '密码至少6个字符!' },
{ max: 20, message: '密码最多20个字符!' }
]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="密码"
/>
</Form.Item>
<Form.Item
name="confirmPassword"
dependencies={['password']}
rules={[
{ required: true, message: '请确认密码!' },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次输入的密码不一致!'));
},
}),
]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="确认密码"
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
loading={loading}
style={{ width: '100%' }}
>
注册
</Button>
</Form.Item>
<div style={{ textAlign: 'center' }}>
<Typography.Text type="secondary">
已有账号？ <Link to="/login">立即登录</Link>
</Typography.Text>
</div>
</Form>
</Card>
</div>
);
};
export default Register;

413
frontend/src/pages/Roles.tsx Normal file
View File

@ -0,0 +1,413 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Button,
Space,
Modal,
Form,
Input,
Select,
message,
Popconfirm,
Card,
Row,
Col,
Tag,
Transfer,
} from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { Role, Permission, CreateRoleRequest, UpdateRoleRequest, QueryParams } from '../types';
import { apiService } from '../services/api';
import type { ColumnsType } from 'antd/es/table';
import type { TransferDirection } from 'antd/es/transfer';
const { Option } = Select;
const { TextArea } = Input;
interface TransferItem {
key: string;
title: string;
description?: string;
}
const Roles: React.FC = () => {
const [roles, setRoles] = useState<Role[]>([]);
const [permissions, setPermissions] = useState<Permission[]>([]);
const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [permissionModalVisible, setPermissionModalVisible] = useState(false);
const [editingRole, setEditingRole] = useState<Role | null>(null);
const [selectedRole, setSelectedRole] = useState<Role | null>(null);
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const [targetKeys, setTargetKeys] = useState<string[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchRoles = async (params?: QueryParams) => {
setLoading(true);
try {
const response = await apiService.getRoles({
page: pagination.current,
per_page: pagination.pageSize,
...params,
});
setRoles(response.data || []);
setPagination(prev => ({
...prev,
total: response.total,
current: response.page,
}));
} catch (error) {
message.error('获取角色列表失败');
setRoles([]); } finally {
setLoading(false);
}
};
const fetchPermissions = async () => {
try {
const response = await apiService.getPermissions({ page: 1, per_page: 1000 });
setPermissions(response.data || []);
} catch (error) {
message.error('获取权限列表失败');
setPermissions([]); }
};
useEffect(() => {
fetchRoles();
fetchPermissions();
}, [pagination.current, pagination.pageSize]);
const handleSearch = (values: any) => {
setPagination(prev => ({ ...prev, current: 1 }));
fetchRoles(values);
};
const handleReset = () => {
searchForm.resetFields();
setPagination(prev => ({ ...prev, current: 1 }));
fetchRoles();
};
const handleCreate = () => {
setEditingRole(null);
form.resetFields();
setModalVisible(true);
};
const handleEdit = (role: Role) => {
setEditingRole(role);
form.setFieldsValue({
name: role.name,
description: role.description,
status: role.status,
});
setModalVisible(true);
};
const handleDelete = async (id: number) => {
try {
await apiService.deleteRole(id);
message.success('删除成功');
fetchRoles();
} catch (error) {
message.error('删除失败');
}
};
const handleSubmit = async (values: CreateRoleRequest | UpdateRoleRequest) => {
try {
if (editingRole) {
await apiService.updateRole(editingRole.id, values as UpdateRoleRequest);
message.success('更新成功');
} else {
await apiService.createRole(values as CreateRoleRequest);
message.success('创建成功');
}
setModalVisible(false);
fetchRoles();
} catch (error) {
message.error(editingRole ? '更新失败' : '创建失败');
}
};
const handleManagePermissions = (role: Role) => {
setSelectedRole(role);
const rolePermissionIds: string[] = [];
setTargetKeys(rolePermissionIds);
setPermissionModalVisible(true);
};
const handlePermissionChange = (newTargetKeys: React.Key[], direction: TransferDirection, moveKeys: React.Key[]) => {
setTargetKeys(newTargetKeys.map(key => key.toString()));
};
const handleSavePermissions = async () => {
if (!selectedRole) return;
try {
const permissionIds = targetKeys.map(key => parseInt(key));
// TODO: Implement assignRolePermissions API method
// await apiService.assignRolePermissions(selectedRole.id, permissionIds);
message.success('权限分配成功');
setPermissionModalVisible(false);
fetchRoles();
} catch (error) {
message.error('权限分配失败');
}
};
const transferData: TransferItem[] = permissions.map(permission => ({
key: permission.id.toString(),
title: permission.name,
description: permission.description,
}));
const columns: ColumnsType<Role> = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: '角色名称',
dataIndex: 'name',
key: 'name',
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
{
title: '权限数量',
key: 'permissions_count',
render: (_, record) => (
<Tag color="blue">
0 个权限
</Tag>
),
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (status: string) => (
<Tag color={status === 'active' ? 'green' : 'red'}>
{status === 'active' ? '激活' : '禁用'}
</Tag>
),
},
{
title: '创建时间',
dataIndex: 'created_at',
key: 'created_at',
render: (date: string) => new Date(date).toLocaleString(),
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<Button
type="link"
onClick={() => handleManagePermissions(record)}
>
权限管理
</Button>
<Button
type="link"
icon={React.createElement(EditOutlined)}
onClick={() => handleEdit(record)}
>
编辑
</Button>
<Popconfirm
title="确定要删除这个角色吗？"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
>
<Button
type="link"
danger
icon={React.createElement(DeleteOutlined)}
>
删除
</Button>
</Popconfirm>
</Space>
),
},
];
return (
<div>
<Card style={{ marginBottom: 16 }}>
<Form
form={searchForm}
layout="inline"
onFinish={handleSearch}
>
<Row gutter={16} style={{ width: '100%' }}>
<Col span={6}>
<Form.Item name="search" label="搜索">
<Input placeholder="角色名称" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="status" label="状态">
<Select placeholder="选择状态" allowClear>
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item>
<Space>
<Button
type="primary"
htmlType="submit"
icon={React.createElement(SearchOutlined)}
>
搜索
</Button>
<Button onClick={handleReset}>
重置
</Button>
<Button
type="primary"
icon={React.createElement(PlusOutlined)}
onClick={handleCreate}
>
新增角色
</Button>
</Space>
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card>
<Table
columns={columns}
dataSource={roles}
rowKey="id"
loading={loading}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) =>
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
onChange: (page, pageSize) => {
setPagination(prev => ({
...prev,
current: page,
pageSize: pageSize || 10,
}));
},
}}
/>
</Card>
{/* 角色编辑模态框 */}
<Modal
title={editingRole ? '编辑角色' : '新增角色'}
open={modalVisible}
onCancel={() => setModalVisible(false)}
footer={null}
width={600}
>
<Form
form={form}
layout="vertical"
onFinish={handleSubmit}
>
<Form.Item
name="name"
label="角色名称"
rules={[
{ required: true, message: '请输入角色名称' },
{ min: 2, message: '角色名称至少2个字符' },
]}
>
<Input placeholder="请输入角色名称" />
</Form.Item>
<Form.Item
name="description"
label="描述"
>
<TextArea rows={4} placeholder="请输入角色描述" />
</Form.Item>
{editingRole && (
<Form.Item
name="status"
label="状态"
rules={[{ required: true, message: '请选择状态' }]}
>
<Select placeholder="请选择状态">
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
)}
<Form.Item style={{ textAlign: 'right', marginBottom: 0 }}>
<Space>
<Button onClick={() => setModalVisible(false)}>
取消
</Button>
<Button type="primary" htmlType="submit">
{editingRole ? '更新' : '创建'}
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
{/* 权限管理模态框 */}
<Modal
title={`管理角色权限 - ${selectedRole?.name}`}
open={permissionModalVisible}
onCancel={() => setPermissionModalVisible(false)}
onOk={handleSavePermissions}
width={800}
okText="保存"
cancelText="取消"
>
<Transfer
dataSource={transferData}
titles={['可用权限', '已分配权限']}
targetKeys={targetKeys}
onChange={handlePermissionChange}
render={item => item.title}
showSearch
listStyle={{
width: 350,
height: 400,
}}
/>
</Modal>
</div>
);
};
export default Roles;

347
frontend/src/pages/Users.tsx Normal file
View File

@ -0,0 +1,347 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Button,
Space,
Modal,
Form,
Input,
Select,
message,
Popconfirm,
Card,
Row,
Col,
Tag,
} from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { User, CreateUserRequest, UpdateUserRequest, QueryParams } from '../types';
import { apiService } from '../services/api';
import type { ColumnsType } from 'antd/es/table';
const { Option } = Select;
const Users: React.FC = () => {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [editingUser, setEditingUser] = useState<User | null>(null);
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 0,
});
const fetchUsers = async (params?: QueryParams) => {
setLoading(true);
try {
const response = await apiService.getUsers({
page: pagination.current,
per_page: pagination.pageSize,
...params,
});
setUsers(response.data || []);
setPagination(prev => ({
...prev,
total: response.total,
current: response.page,
}));
} catch (error) {
message.error('获取用户列表失败');
setUsers([]); } finally {
setLoading(false);
}
};
useEffect(() => {
fetchUsers();
}, [pagination.current, pagination.pageSize]);
const handleSearch = (values: any) => {
setPagination(prev => ({ ...prev, current: 1 }));
fetchUsers(values);
};
const handleReset = () => {
searchForm.resetFields();
setPagination(prev => ({ ...prev, current: 1 }));
fetchUsers();
};
const handleCreate = () => {
setEditingUser(null);
form.resetFields();
setModalVisible(true);
};
const handleEdit = (user: User) => {
setEditingUser(user);
form.setFieldsValue({
username: user.username,
email: user.email,
phone: user.phone,
status: user.status,
});
setModalVisible(true);
};
const handleDelete = async (id: number) => {
try {
await apiService.deleteUser(id);
message.success('删除成功');
fetchUsers();
} catch (error) {
message.error('删除失败');
}
};
const handleSubmit = async (values: CreateUserRequest | UpdateUserRequest) => {
try {
if (editingUser) {
await apiService.updateUser(editingUser.id, values as UpdateUserRequest);
message.success('更新成功');
} else {
await apiService.createUser(values as CreateUserRequest);
message.success('创建成功');
}
setModalVisible(false);
fetchUsers();
} catch (error) {
message.error(editingUser ? '更新失败' : '创建失败');
}
};
const columns: ColumnsType<User> = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
},
{
title: '手机号',
dataIndex: 'phone',
key: 'phone',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (status: string) => (
<Tag color={status === 'active' ? 'green' : 'red'}>
{status === 'active' ? '激活' : '禁用'}
</Tag>
),
},
{
title: '创建时间',
dataIndex: 'created_at',
key: 'created_at',
render: (date: string) => new Date(date).toLocaleString(),
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<Button
type="link"
icon={React.createElement(EditOutlined)}
onClick={() => handleEdit(record)}
>
编辑
</Button>
<Popconfirm
title="确定要删除这个用户吗？"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
>
<Button
type="link"
danger
icon={React.createElement(DeleteOutlined)}
>
删除
</Button>
</Popconfirm>
</Space>
),
},
];
return (
<div>
<Card style={{ marginBottom: 16 }}>
<Form
form={searchForm}
layout="inline"
onFinish={handleSearch}
>
<Row gutter={16} style={{ width: '100%' }}>
<Col span={6}>
<Form.Item name="search" label="搜索">
<Input placeholder="用户名或邮箱" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="status" label="状态">
<Select placeholder="选择状态" allowClear>
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item>
<Space>
<Button
type="primary"
htmlType="submit"
icon={React.createElement(SearchOutlined)}
>
搜索
</Button>
<Button onClick={handleReset}>
重置
</Button>
<Button
type="primary"
icon={React.createElement(PlusOutlined)}
onClick={handleCreate}
>
新增用户
</Button>
</Space>
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card>
<Table
columns={columns}
dataSource={users}
rowKey="id"
loading={loading}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) =>
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
onChange: (page, pageSize) => {
setPagination(prev => ({
...prev,
current: page,
pageSize: pageSize || 10,
}));
},
}}
/>
</Card>
<Modal
title={editingUser ? '编辑用户' : '新增用户'}
open={modalVisible}
onCancel={() => setModalVisible(false)}
footer={null}
width={600}
>
<Form
form={form}
layout="vertical"
onFinish={handleSubmit}
>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ min: 3, message: '用户名至少3个字符' },
]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item
name="email"
label="邮箱"
rules={[
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '请输入有效的邮箱地址' },
]}
>
<Input placeholder="请输入邮箱" />
</Form.Item>
{!editingUser && (
<Form.Item
name="password"
label="密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少6个字符' },
]}
>
<Input.Password placeholder="请输入密码" />
</Form.Item>
)}
<Form.Item
name="phone"
label="手机号"
>
<Input placeholder="请输入手机号" />
</Form.Item>
{editingUser && (
<Form.Item
name="status"
label="状态"
rules={[{ required: true, message: '请选择状态' }]}
>
<Select placeholder="请选择状态">
<Option value="active">激活</Option>
<Option value="inactive">禁用</Option>
</Select>
</Form.Item>
)}
<Form.Item style={{ textAlign: 'right', marginBottom: 0 }}>
<Space>
<Button onClick={() => setModalVisible(false)}>
取消
</Button>
<Button type="primary" htmlType="submit">
{editingUser ? '更新' : '创建'}
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</div>
);
};
export default Users;

1
frontend/src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

15
frontend/src/reportWebVitals.ts Normal file
View File

@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

229
frontend/src/services/api.ts Normal file
View File

@ -0,0 +1,229 @@
import axios, { AxiosInstance, AxiosResponse } from 'axios';
import {
User,
Role,
Permission,
Menu,
CreateUserRequest,
UpdateUserRequest,
CreateRoleRequest,
UpdateRoleRequest,
CreatePermissionRequest,
UpdatePermissionRequest,
CreateMenuRequest,
UpdateMenuRequest,
LoginRequest,
LoginResponse,
RegisterRequest,
ApiResponse,
PaginatedResponse,
QueryParams,
} from '../types';
class ApiService {
private api: AxiosInstance;
constructor() {
this.api = axios.create({
baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
// 请求拦截器 - 添加认证token
this.api.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器 - 处理错误
this.api.interceptors.response.use(
(response: AxiosResponse) => {
return response;
},
(error) => {
if (error.response?.status === 401) {
// Token过期或无效，清除本地存储并跳转到登录页
localStorage.removeItem('token');
localStorage.removeItem('user');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
}
// 认证相关API
async login(data: LoginRequest): Promise<LoginResponse> {
const response = await this.api.post<ApiResponse<LoginResponse>>('/auth/login', data);
return response.data.data!;
}
async register(data: RegisterRequest): Promise<User> {
const response = await this.api.post<ApiResponse<User>>('/auth/register', data);
return response.data.data!;
}
async logout(): Promise<void> {
await this.api.post('/auth/logout');
}
// 用户管理API
async getUsers(params?: QueryParams): Promise<PaginatedResponse<User>> {
const response = await this.api.get('/users', { params });
const backendData = response.data.data;
// 转换后端数据结构到前端期望的结构
return {
data: backendData.items.map((user: any) => ({
...user,
status: user.status === 1 ? 'active' : 'inactive'
})),
total: backendData.total,
page: backendData.page,
per_page: backendData.page_size,
total_pages: Math.ceil(backendData.total / backendData.page_size)
};
}
async getUser(id: number): Promise<User> {
const response = await this.api.get<ApiResponse<User>>(`/users/${id}`);
return response.data.data!;
}
async createUser(data: CreateUserRequest): Promise<User> {
const response = await this.api.post<ApiResponse<User>>('/users', data);
return response.data.data!;
}
async updateUser(id: number, data: UpdateUserRequest): Promise<User> {
// 转换前端的字符串状态为后端期望的数字格式
const backendData = {
...data,
status: data.status ? (data.status === 'active' ? 1 : 0) : undefined
};
const response = await this.api.put<ApiResponse<User>>(`/users/${id}`, backendData);
return response.data.data!;
}
async deleteUser(id: number): Promise<void> {
await this.api.delete(`/users/${id}`);
}
// 角色管理API
async getRoles(params?: QueryParams): Promise<PaginatedResponse<Role>> {
const response = await this.api.get<ApiResponse<PaginatedResponse<Role>>>('/roles', { params });
return response.data.data!;
}
async getAllRoles(): Promise<Role[]> {
const response = await this.api.get<ApiResponse<Role[]>>('/roles/all');
return response.data.data!;
}
async getRole(id: number): Promise<Role> {
const response = await this.api.get<ApiResponse<Role>>(`/roles/${id}`);
return response.data.data!;
}
async createRole(data: CreateRoleRequest): Promise<Role> {
const response = await this.api.post<ApiResponse<Role>>('/roles', data);
return response.data.data!;
}
async updateRole(id: number, data: UpdateRoleRequest): Promise<Role> {
// 转换前端的字符串状态为后端期望的数字格式
const backendData = {
...data,
status: data.status ? (data.status === 'active' ? 1 : 0) : undefined
};
const response = await this.api.put<ApiResponse<Role>>(`/roles/${id}`, backendData);
return response.data.data!;
}
async deleteRole(id: number): Promise<void> {
await this.api.delete(`/roles/${id}`);
}
// 权限管理API
async getPermissions(params?: QueryParams): Promise<PaginatedResponse<Permission>> {
const response = await this.api.get<ApiResponse<PaginatedResponse<Permission>>>('/permissions', { params });
return response.data.data!;
}
async getAllPermissions(): Promise<Permission[]> {
const response = await this.api.get<ApiResponse<Permission[]>>('/permissions/all');
return response.data.data!;
}
async getPermission(id: number): Promise<Permission> {
const response = await this.api.get<ApiResponse<Permission>>(`/permissions/${id}`);
return response.data.data!;
}
async createPermission(data: CreatePermissionRequest): Promise<Permission> {
const response = await this.api.post<ApiResponse<Permission>>('/permissions', data);
return response.data.data!;
}
async updatePermission(id: number, data: UpdatePermissionRequest): Promise<Permission> {
// 转换前端的字符串状态为后端期望的数字格式
const backendData = {
...data,
status: data.status ? (data.status === 'active' ? 1 : 0) : undefined
};
const response = await this.api.put<ApiResponse<Permission>>(`/permissions/${id}`, backendData);
return response.data.data!;
}
async deletePermission(id: number): Promise<void> {
await this.api.delete(`/permissions/${id}`);
}
// 菜单管理API
async getMenus(params?: QueryParams): Promise<PaginatedResponse<Menu>> {
const response = await this.api.get<ApiResponse<PaginatedResponse<Menu>>>('/menus', { params });
return response.data.data!;
}
async getAllMenus(): Promise<Menu[]> {
const response = await this.api.get<ApiResponse<Menu[]>>('/menus/all');
return response.data.data!;
}
async getMenu(id: number): Promise<Menu> {
const response = await this.api.get<ApiResponse<Menu>>(`/menus/${id}`);
return response.data.data!;
}
async createMenu(data: CreateMenuRequest): Promise<Menu> {
const response = await this.api.post<ApiResponse<Menu>>('/menus', data);
return response.data.data!;
}
async updateMenu(id: number, data: UpdateMenuRequest): Promise<Menu> {
// 转换前端的字符串状态为后端期望的数字格式
const backendData = {
...data,
status: data.status ? (data.status === 'active' ? 1 : 0) : undefined
};
const response = await this.api.put<ApiResponse<Menu>>(`/menus/${id}`, backendData);
return response.data.data!;
}
async deleteMenu(id: number): Promise<void> {
await this.api.delete(`/menus/${id}`);
}
}
export const apiService = new ApiService();
export default apiService;

5
frontend/src/setupTests.ts Normal file
View File

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

143
frontend/src/types/index.ts Normal file
View File

@ -0,0 +1,143 @@
// 用户相关类型
export interface User {
id: number;
username: string;
email: string;
phone?: string;
status: 'active' | 'inactive';
created_at: string;
updated_at: string;
}
export interface CreateUserRequest {
username: string;
email: string;
password: string;
phone?: string;
}
export interface UpdateUserRequest {
username?: string;
email?: string;
phone?: string;
status?: 'active' | 'inactive';
}
// 角色相关类型
export interface Role {
id: number;
name: string;
description?: string;
status: 'active' | 'inactive';
created_at: string;
updated_at: string;
}
export interface CreateRoleRequest {
name: string;
description?: string;
}
export interface UpdateRoleRequest {
name?: string;
description?: string;
status?: 'active' | 'inactive';
}
// 权限相关类型
export interface Permission {
id: number;
name: string;
key: string;
description?: string;
status: 'active' | 'inactive';
created_at: string;
updated_at: string;
}
export interface CreatePermissionRequest {
name: string;
key: string;
description?: string;
}
export interface UpdatePermissionRequest {
name?: string;
key?: string;
description?: string;
status?: 'active' | 'inactive';
}
// 菜单相关类型
export interface Menu {
id: number;
name: string;
path: string;
icon?: string;
parent_id?: number;
sort_order: number;
status: 'active' | 'inactive';
created_at: string;
updated_at: string;
children?: Menu[];
}
export interface CreateMenuRequest {
name: string;
path: string;
icon?: string;
parent_id?: number;
sort_order: number;
}
export interface UpdateMenuRequest {
name?: string;
path?: string;
icon?: string;
parent_id?: number;
sort_order?: number;
status?: 'active' | 'inactive';
}
// 认证相关类型
export interface LoginRequest {
username: string;
password: string;
}
export interface LoginResponse {
token: string;
user: User;
}
export interface RegisterRequest {
username: string;
email: string;
password: string;
}
// API响应类型
export interface ApiResponse<T> {
success: boolean;
data?: T;
message?: string;
error?: string;
}
export interface PaginatedResponse<T> {
data: T[];
total: number;
page: number;
per_page: number;
total_pages: number;
}
// 表格查询参数
export interface QueryParams {
page?: number;
per_page?: number;
search?: string;
status?: string;
sort_by?: string;
sort_order?: 'asc' | 'desc';
}