chore: 统一代码风格并配置ESLint和Prettier
配置ESLint和Prettier规则 添加前端和后端的忽略文件 统一代码格式和缩进 修复代码风格问题
This commit is contained in:
zhang1106
+361
-147
@@ -1,7 +1,49 @@
|
||||
import React, { useState, Suspense, lazy } from 'react';
|
||||
import { Layout, Menu, theme, Button, Dropdown, Avatar, message, Space, Divider, ConfigProvider as AntdConfigProvider } from 'antd';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined, SettingOutlined, ApiOutlined, PartitionOutlined, CodepenOutlined } from '@ant-design/icons';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Layout,
|
||||
Menu,
|
||||
theme,
|
||||
Button,
|
||||
Dropdown,
|
||||
Avatar,
|
||||
message,
|
||||
Space,
|
||||
Divider,
|
||||
ConfigProvider as AntdConfigProvider,
|
||||
} from 'antd';
|
||||
import {
|
||||
BarChartOutlined,
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
EyeOutlined,
|
||||
BuildOutlined,
|
||||
HomeOutlined,
|
||||
ShoppingCartOutlined,
|
||||
InboxOutlined,
|
||||
ImportOutlined,
|
||||
FileTextOutlined,
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
HistoryOutlined,
|
||||
AuditOutlined,
|
||||
ToolOutlined,
|
||||
ScheduleOutlined,
|
||||
SettingOutlined,
|
||||
ApiOutlined,
|
||||
PartitionOutlined,
|
||||
CodepenOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Link,
|
||||
Navigate,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
} from 'react-router-dom';
|
||||
import { useAuth } from './context/AuthContext';
|
||||
import { ConfigProvider, useConfig } from './context/ConfigContext';
|
||||
import { Scene3DProvider } from './context/Scene3DContext';
|
||||
@@ -31,30 +73,34 @@ const PortManagement = lazy(() => import('./pages/PortManagement'));
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const PageLoading = () => (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5',
|
||||
gap: '16px'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
<span style={{ color: '#8c8c8c', fontSize: '14px' }}>正在加载页面...</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AuthLoading = () => (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5',
|
||||
gap: '16px'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
<span style={{ color: '#8c8c8c', fontSize: '14px' }}>正在加载认证状态...</span>
|
||||
</div>
|
||||
@@ -89,7 +135,7 @@ const AppLayout = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const designTokens = useDesignTokens();
|
||||
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
message.success('已退出登录');
|
||||
@@ -101,9 +147,21 @@ const AppLayout = ({ children }) => {
|
||||
if (path === '/') return 'dashboard';
|
||||
if (path.startsWith('/visualization-3d')) return 'visualization-3d';
|
||||
if (path.startsWith('/rooms') || path.startsWith('/racks')) return 'room-management';
|
||||
if (path.startsWith('/devices') || path.startsWith('/fields') || path.startsWith('/cables') || path.startsWith('/ports')) return 'asset-management';
|
||||
if (
|
||||
path.startsWith('/devices') ||
|
||||
path.startsWith('/fields') ||
|
||||
path.startsWith('/cables') ||
|
||||
path.startsWith('/ports')
|
||||
)
|
||||
return 'asset-management';
|
||||
if (path.startsWith('/consumables')) return 'consumables-management';
|
||||
if (path.startsWith('/users') || path.startsWith('/login-history') || path.startsWith('/operation-logs') || path.startsWith('/settings')) return 'system-management';
|
||||
if (
|
||||
path.startsWith('/users') ||
|
||||
path.startsWith('/login-history') ||
|
||||
path.startsWith('/operation-logs') ||
|
||||
path.startsWith('/settings')
|
||||
)
|
||||
return 'system-management';
|
||||
if (path.startsWith('/tickets')) return 'ticket-management';
|
||||
return 'dashboard';
|
||||
};
|
||||
@@ -218,28 +276,28 @@ const AppLayout = ({ children }) => {
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'system-management',
|
||||
icon: <UserOutlined style={{ fontSize: '18px' }} />,
|
||||
label: '系统管理',
|
||||
children: [
|
||||
{
|
||||
key: 'users',
|
||||
icon: <UserOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/users">用户管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'system-settings',
|
||||
icon: <SettingOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/settings">系统设置</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
key: 'system-management',
|
||||
icon: <UserOutlined style={{ fontSize: '18px' }} />,
|
||||
label: '系统管理',
|
||||
children: [
|
||||
{
|
||||
key: 'users',
|
||||
icon: <UserOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/users">用户管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'system-settings',
|
||||
icon: <SettingOutlined style={{ fontSize: '16px' }} />,
|
||||
label: <Link to="/settings">系统设置</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
width={240}
|
||||
<Sider
|
||||
width={240}
|
||||
collapsedWidth={72}
|
||||
collapsed={collapsed}
|
||||
style={{
|
||||
@@ -252,56 +310,66 @@ const AppLayout = ({ children }) => {
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
zIndex: 100
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
padding: collapsed ? '16px 0' : '16px 20px',
|
||||
borderBottom: `1px solid ${designTokens.colors.sidebar.border}`,
|
||||
minHeight: '64px',
|
||||
background: designTokens.colors.sidebar.bg
|
||||
}}>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
padding: collapsed ? '16px 0' : '16px 20px',
|
||||
borderBottom: `1px solid ${designTokens.colors.sidebar.border}`,
|
||||
minHeight: '64px',
|
||||
background: designTokens.colors.sidebar.bg,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={{ fontSize: '18px', color: '#ffffff' }} />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div>
|
||||
<div style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: designTokens.colors.primary.main,
|
||||
lineHeight: 1.2
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: designTokens.colors.primary.main,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{config.site_name || 'IDC管理'}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: designTokens.colors.sidebar.text,
|
||||
marginTop: '2px'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
color: designTokens.colors.sidebar.text,
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
数据中心管理平台
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: collapsed ? '12px 0' : '12px 8px',
|
||||
overflowY: 'auto',
|
||||
flex: 1
|
||||
}}>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: collapsed ? '12px 0' : '12px 8px',
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[getSelectedKey()]}
|
||||
@@ -309,16 +377,18 @@ const AppLayout = ({ children }) => {
|
||||
style={{
|
||||
background: 'transparent',
|
||||
borderRight: 0,
|
||||
fontSize: '14px'
|
||||
fontSize: '14px',
|
||||
}}
|
||||
items={menuItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: '12px',
|
||||
borderTop: `1px solid ${designTokens.colors.sidebar.border}`
|
||||
}}>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderTop: `1px solid ${designTokens.colors.sidebar.border}`,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
@@ -332,76 +402,92 @@ const AppLayout = ({ children }) => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
gap: '8px'
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
{!collapsed && <span style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>收起菜单</span>}
|
||||
{!collapsed && (
|
||||
<span style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
|
||||
收起菜单
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</Sider>
|
||||
|
||||
<Layout style={{
|
||||
marginLeft: collapsed ? 72 : 240,
|
||||
transition: 'margin-left 0.2s ease'
|
||||
}}>
|
||||
<Header style={{
|
||||
padding: '0 24px',
|
||||
height: 64,
|
||||
background: designTokens.colors.background.primary,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 99,
|
||||
overflow: 'visible'
|
||||
}}>
|
||||
|
||||
<Layout
|
||||
style={{
|
||||
marginLeft: collapsed ? 72 : 240,
|
||||
transition: 'margin-left 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
style={{
|
||||
padding: '0 24px',
|
||||
height: 64,
|
||||
background: designTokens.colors.background.primary,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
boxShadow: designTokens.shadows.small,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 99,
|
||||
overflow: 'visible',
|
||||
}}
|
||||
>
|
||||
{user && (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
height: '100%'
|
||||
}}>
|
||||
<div style={{
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '4px 12px',
|
||||
background: designTokens.colors.background.secondary,
|
||||
borderRadius: designTokens.borderRadius.medium,
|
||||
height: '40px',
|
||||
boxSizing: 'border-box'
|
||||
}}>
|
||||
<Avatar
|
||||
style={{
|
||||
gap: '12px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '4px 12px',
|
||||
background: designTokens.colors.background.secondary,
|
||||
borderRadius: designTokens.borderRadius.medium,
|
||||
height: '40px',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
style={{
|
||||
backgroundColor: designTokens.colors.primary.main,
|
||||
cursor: 'pointer',
|
||||
width: 32,
|
||||
height: 32,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
icon={<UserOutlined style={{ fontSize: '14px' }} />}
|
||||
/>
|
||||
<span style={{
|
||||
color: designTokens.colors.text.primary,
|
||||
fontSize: 14,
|
||||
fontWeight: 500
|
||||
}}>{user.username}</span>
|
||||
<span
|
||||
style={{
|
||||
color: designTokens.colors.text.primary,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{user.username}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<LogoutOutlined />}
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
height: 'auto',
|
||||
borderRadius: designTokens.borderRadius.small,
|
||||
fontSize: 13
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
退出
|
||||
@@ -414,7 +500,7 @@ const AppLayout = ({ children }) => {
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 'calc(100vh - 64px)',
|
||||
background: designTokens.colors.background.secondary
|
||||
background: designTokens.colors.background.secondary,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
@@ -433,24 +519,152 @@ const ThemeConfig = () => {
|
||||
<Suspense fallback={<PageLoading />}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
|
||||
<Route path="/devices" element={<PrivateRoute><DeviceManagement /></PrivateRoute>} />
|
||||
<Route path="/racks" element={<PrivateRoute><RackManagement /></PrivateRoute>} />
|
||||
<Route path="/rooms" element={<PrivateRoute><RoomManagement /></PrivateRoute>} />
|
||||
<Route path="/fields" element={<PrivateRoute><DeviceFieldManagement /></PrivateRoute>} />
|
||||
<Route path="/visualization-3d" element={<PrivateRoute><Scene3DProvider><Rack3DVisualization /></Scene3DProvider></PrivateRoute>} />
|
||||
<Route path="/consumables" element={<PrivateRoute><ConsumableManagement /></PrivateRoute>} />
|
||||
<Route path="/consumables-categories" element={<PrivateRoute><CategoryManagement /></PrivateRoute>} />
|
||||
<Route path="/consumables-stats" element={<PrivateRoute><ConsumableStatistics /></PrivateRoute>} />
|
||||
<Route path="/consumables-logs" element={<PrivateRoute><ConsumableLogs /></PrivateRoute>} />
|
||||
<Route path="/users" element={<PrivateRoute><UserManagement /></PrivateRoute>} />
|
||||
<Route path="/tickets" element={<PrivateRoute><TicketManagement /></PrivateRoute>} />
|
||||
<Route path="/ticket-categories" element={<PrivateRoute><TicketCategoryManagement /></PrivateRoute>} />
|
||||
<Route path="/ticket-statistics" element={<PrivateRoute><TicketStatistics /></PrivateRoute>} />
|
||||
<Route path="/ticket-fields" element={<PrivateRoute><TicketFieldManagement /></PrivateRoute>} />
|
||||
<Route path="/settings" element={<PrivateRoute><SystemSettings /></PrivateRoute>} />
|
||||
<Route path="/cables" element={<PrivateRoute><CableManagement /></PrivateRoute>} />
|
||||
<Route path="/ports" element={<PrivateRoute><PortManagement /></PrivateRoute>} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Dashboard />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/devices"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<DeviceManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/racks"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<RackManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/rooms"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<RoomManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/fields"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<DeviceFieldManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/visualization-3d"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Scene3DProvider>
|
||||
<Rack3DVisualization />
|
||||
</Scene3DProvider>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ConsumableManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-categories"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<CategoryManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-stats"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ConsumableStatistics />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-logs"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ConsumableLogs />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/users"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<UserManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/tickets"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<TicketManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/ticket-categories"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<TicketCategoryManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/ticket-statistics"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<TicketStatistics />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/ticket-fields"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<TicketFieldManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<SystemSettings />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/cables"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<CableManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/ports"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<PortManagement />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
@@ -467,4 +681,4 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user