-
欢迎来到管理后台
+
欢迎来到 Atlas Console
+
{loading ? (
-
加载中...
- ) : (
-
-
-
📊 数据统计
-
{stats.totalUsers.toLocaleString()}
-
总用户数
-
-
-
📦 订单
-
{stats.todayOrders.toLocaleString()}
-
今日订单
-
-
-
💰 收入
-
¥{stats.todayRevenue.toLocaleString()}
-
今日收入
-
+
+
+ ) : (
+
+
+
+ }
+ styles={{ value: { color: '#3f8600' } }}
+ />
+
+
+
+
+ }
+ styles={{ value: { color: '#1890ff' } }}
+ />
+
+
+
+
+ }
+ precision={2}
+ suffix="元"
+ />
+
+
+
)}
)
}
const styles = {
- cards: {
- display: 'grid',
- gridTemplateColumns: 'repeat(3, 1fr)',
- gap: '24px',
- marginTop: '24px',
+ title: {
+ marginBottom: '24px',
},
- card: {
- backgroundColor: '#fff',
- padding: '24px',
- borderRadius: '8px',
- boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
- },
- number: {
- fontSize: '32px',
- fontWeight: 'bold',
- color: '#1890ff',
- margin: '16px 0',
+ loading: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ minHeight: '200px',
},
}
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
index 93d3ef9..f80a73c 100644
--- a/src/pages/Layout.jsx
+++ b/src/pages/Layout.jsx
@@ -1,11 +1,25 @@
import { useState } from 'react'
import { Outlet, NavLink, useNavigate } from 'react-router-dom'
-import { authApi } from '../api/modules/auth'
+import { Layout as AntLayout, Menu, Button, theme } from 'antd'
+import {
+ HomeOutlined,
+ AppstoreOutlined,
+ SettingOutlined,
+ MenuFoldOutlined,
+ MenuUnfoldOutlined,
+ LogoutOutlined,
+} from '@ant-design/icons'
+import authApi from '../api/modules/auth'
import api from '../api'
+const { Header, Sider, Content } = AntLayout
+
function Layout({ onLogout }) {
const [collapsed, setCollapsed] = useState(false)
const navigate = useNavigate()
+ const {
+ token: { colorBgContainer, borderRadiusLG },
+ } = theme.useToken()
const handleLogout = async () => {
try {
@@ -19,131 +33,114 @@ function Layout({ onLogout }) {
}
}
+ const menuItems = [
+ {
+ key: '/',
+ icon:
,
+ label:
首页,
+ },
+ {
+ key: '/menu1',
+ icon:
,
+ label:
菜单1,
+ },
+ {
+ key: '/menu2',
+ icon:
,
+ label:
菜单2,
+ },
+ ]
+
return (
-
- {/* 侧边栏 */}
-
+
+
- {collapsed ? 'A' : 'Atlas'}
+ {collapsed ? 'A' : 'Atlas Console'}
-
-
-
-
- {/* 主内容区 */}
-
- {/* 顶部栏 */}
-
- Atlas Console
-
-
-
- {/* 内容区 */}
-
-
-
+
+
+
)
}
const styles = {
- container: {
- display: 'flex',
- height: '100vh',
- },
- sidebar: {
- backgroundColor: '#001529',
- color: '#fff',
- display: 'flex',
- flexDirection: 'column',
- transition: 'width 0.3s',
- },
logo: {
height: '64px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- fontSize: '20px',
- fontWeight: 'bold',
- borderBottom: '1px solid #ffffff20',
- },
- nav: {
- flex: 1,
- padding: '16px 0',
- },
- navItem: {
- display: 'flex',
- alignItems: 'center',
- gap: '12px',
- padding: '12px 24px',
- color: '#ffffff80',
- textDecoration: 'none',
- transition: 'all 0.2s',
- },
- active: {
- backgroundColor: '#1890ff',
- color: '#fff',
- },
- icon: {
fontSize: '18px',
- },
- collapseBtn: {
- padding: '12px',
- backgroundColor: '#ffffff10',
- border: 'none',
+ fontWeight: 'bold',
color: '#fff',
- cursor: 'pointer',
+ borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
},
- main: {
- flex: 1,
- display: 'flex',
- flexDirection: 'column',
- overflow: 'hidden',
+ menu: {
+ borderRight: 'none',
},
- header: {
- height: '64px',
- backgroundColor: '#fff',
+ header: (colorBgContainer) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
- padding: '0 24px',
- boxShadow: '0 1px 4px rgba(0,0,0,0.1)',
- },
- headerTitle: {
+ padding: '0 16px',
+ background: colorBgContainer,
+ borderBottom: '1px solid #f0f0f0',
+ }),
+ trigger: {
fontSize: '18px',
- fontWeight: 'bold',
- color: '#333',
+ padding: '0 12px',
},
- logoutBtn: {
- padding: '8px 16px',
- backgroundColor: '#ff4d4f',
- color: '#fff',
- border: 'none',
- borderRadius: '4px',
- cursor: 'pointer',
+ headerRight: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '16px',
},
- content: {
- flex: 1,
+ userInfo: {
+ color: '#666',
+ },
+ content: (colorBgContainer, borderRadiusLG) => ({
+ margin: '24px',
padding: '24px',
- overflow: 'auto',
- backgroundColor: '#f5f5f5',
- },
+ minHeight: '280px',
+ background: colorBgContainer,
+ borderRadius: borderRadiusLG,
+ }),
}
export default Layout
\ No newline at end of file
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index d24c7a7..b249548 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,36 +1,30 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import { authApi } from '../api/modules/auth'
+import { Form, Input, Button, message } from 'antd'
+import { UserOutlined, LockOutlined } from '@ant-design/icons'
+import authApi from '../api/modules/auth'
import api from '../api'
function Login({ onLogin }) {
const navigate = useNavigate()
- const [username, setUsername] = useState('')
- const [password, setPassword] = useState('')
- const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
- const handleSubmit = async (e) => {
- e.preventDefault()
- console.log('Login clicked', { username, password })
- setError('')
+ const handleSubmit = async (values) => {
setLoading(true)
-
try {
- // 调用登录 API（使用 Mock 或真实接口）
- const response = await authApi.login(username, password)
- console.log('Login response:', response)
+ const response = await authApi.login(values.username, values.password)
if (response.code === 0) {
api.setToken(response.data.token)
+ message.success('登录成功')
onLogin()
navigate('/')
} else {
- setError(response.message || '登录失败')
+ message.error(response.message || '登录失败')
}
} catch (err) {
console.error('Login error:', err)
- setError(err.message || '用户名或密码错误')
+ message.error(err.message || '用户名或密码错误')
} finally {
setLoading(false)
}
@@ -39,29 +33,47 @@ function Login({ onLogin }) {
return (
-
登录
-
+
Atlas Console
+
登录您的账户
+
+
+
测试账号: admin / admin123
@@ -73,45 +85,26 @@ const styles = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
- height: '100vh',
- backgroundColor: '#f5f5f5',
+ minHeight: '100vh',
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
},
card: {
backgroundColor: '#fff',
padding: '40px',
borderRadius: '8px',
- boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
- width: '320px',
+ boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+ width: '360px',
},
title: {
textAlign: 'center',
- marginBottom: '24px',
+ marginBottom: '8px',
color: '#333',
},
- form: {
- display: 'flex',
- flexDirection: 'column',
- gap: '16px',
- },
- input: {
- padding: '12px',
- border: '1px solid #ddd',
- borderRadius: '4px',
- fontSize: '14px',
- },
- button: {
- padding: '12px',
- backgroundColor: '#1890ff',
- color: '#fff',
- border: 'none',
- borderRadius: '4px',
- fontSize: '16px',
- cursor: 'pointer',
- },
- error: {
- color: '#ff4d4f',
- fontSize: '14px',
+ subtitle: {
textAlign: 'center',
+ marginBottom: '24px',
+ color: '#666',
+ fontSize: '14px',
},
hint: {
marginTop: '16px',
diff --git a/src/pages/Menu1.jsx b/src/pages/Menu1.jsx
index 59f9e0c..eefce25 100644
--- a/src/pages/Menu1.jsx
+++ b/src/pages/Menu1.jsx
@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react'
-import { projectApi } from '../api/modules/project'
+import { Table, Tag, Progress, Card } from 'antd'
+import projectApi from '../api/modules/project'
function Menu1() {
const [projects, setProjects] = useState([])
@@ -24,98 +25,61 @@ function Menu1() {
const getStatusColor = (status) => {
switch (status) {
- case '已完成': return '#52c41a'
- case '进行中': return '#1890ff'
- default: return '#d9d9d9'
+ case '已完成': return 'success'
+ case '进行中': return 'processing'
+ default: return 'default'
}
}
+ const columns = [
+ {
+ title: 'ID',
+ dataIndex: 'id',
+ key: 'id',
+ width: 80,
+ },
+ {
+ title: '项目名称',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ render: (status) => (
+
{status}
+ ),
+ },
+ {
+ title: '进度',
+ dataIndex: 'progress',
+ key: 'progress',
+ render: (progress) => (
+
+ ),
+ },
+ ]
+
return (
-
菜单1 - 项目管理
- {loading ? (
-
加载中...
- ) : (
-
-
- {projects.map(item => (
-
-
{item.id}
-
{item.name}
-
-
- {item.status}
-
-
-
-
- ))}
-
- )}
+
项目管理
+
+
+
)
}
const styles = {
- table: {
- marginTop: '24px',
- backgroundColor: '#fff',
- borderRadius: '8px',
- overflow: 'hidden',
- boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
- },
- header: {
- display: 'flex',
- backgroundColor: '#fafafa',
- padding: '16px',
- fontWeight: 'bold',
- borderBottom: '1px solid #f0f0f0',
- },
- row: {
- display: 'flex',
- padding: '16px',
- borderBottom: '1px solid #f0f0f0',
- },
- cell: {
- display: 'flex',
- alignItems: 'center',
- },
- badge: {
- padding: '4px 12px',
- borderRadius: '4px',
- color: '#fff',
- fontSize: '12px',
- },
- progressBg: {
- flex: 1,
- height: '8px',
- backgroundColor: '#f0f0f0',
- borderRadius: '4px',
- marginRight: '8px',
- },
- progressBar: {
- height: '100%',
- backgroundColor: '#1890ff',
- borderRadius: '4px',
- transition: 'width 0.3s',
- },
- progressText: {
- fontSize: '12px',
- color: '#666',
- width: '40px',
+ title: {
+ marginBottom: '24px',
},
}
diff --git a/src/pages/Menu2.jsx b/src/pages/Menu2.jsx
index b552e32..4e39a38 100644
--- a/src/pages/Menu2.jsx
+++ b/src/pages/Menu2.jsx
@@ -1,196 +1,138 @@
-import { useState, useEffect } from 'react'
-import { settingsApi } from '../api/modules/settings'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { Card, Form, Input, Switch, Button, message } from 'antd'
+import settingsApi from '../api/modules/settings'
function Menu2() {
const [settings, setSettings] = useState([])
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
- const [message, setMessage] = useState('')
+ const [form] = Form.useForm()
+ const formRef = useRef(form)
- useEffect(() => {
- fetchSettings()
- }, [])
-
- const fetchSettings = async () => {
+ const fetchSettings = useCallback(async () => {
try {
const response = await settingsApi.getList()
if (response.code === 0) {
setSettings(response.data)
+ // 转换为表单格式
+ const formData = {}
+ response.data.forEach(item => {
+ formData[item.key] = item.value
+ })
+ formRef.current.setFieldsValue(formData)
}
} catch (error) {
console.error('Failed to fetch settings:', error)
} finally {
setLoading(false)
}
- }
+ }, [])
+
+ useEffect(() => {
+ fetchSettings()
+ }, [fetchSettings])
const handleSave = async () => {
- setSaving(true)
- setMessage('')
try {
- const response = await settingsApi.save(settings)
+ const values = form.getFieldsValue()
+ // 转换回设置格式
+ const updatedSettings = settings.map(item => ({
+ ...item,
+ value: values[item.key]
+ }))
+
+ setSaving(true)
+ const response = await settingsApi.save(updatedSettings)
if (response.code === 0) {
- setMessage('保存成功')
- setTimeout(() => setMessage(''), 3000)
+ message.success('保存成功')
}
} catch (error) {
- setMessage('保存失败: ' + error.message)
+ message.error('保存失败: ' + error.message)
} finally {
setSaving(false)
}
}
- const updateSetting = (key, value) => {
- setSettings(settings.map(s =>
- s.key === key ? { ...s, value } : s
- ))
+ const renderField = (item) => {
+ if (item.type === 'switch') {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ )
}
return (
-
菜单2 - 系统设置
- {loading ? (
-
加载中...
- ) : (
-
+
系统设置
+
+
+
+
- )}
+
)
}
const styles = {
- card: {
- marginTop: '24px',
- backgroundColor: '#fff',
- padding: '24px',
- borderRadius: '8px',
- boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+ title: {
+ marginBottom: '24px',
+ },
+ form: {
+ maxWidth: 600,
},
row: {
display: 'flex',
alignItems: 'center',
- padding: '16px 0',
- borderBottom: '1px solid #f0f0f0',
+ marginBottom: '8px',
},
label: {
width: '150px',
- fontWeight: 'bold',
+ fontWeight: '500',
color: '#333',
},
- value: {
+ formItem: {
+ marginBottom: '0',
flex: 1,
},
- input: {
- width: '100%',
- maxWidth: '400px',
- padding: '8px 12px',
- border: '1px solid #d9d9d9',
- borderRadius: '4px',
- fontSize: '14px',
- },
- switch: {
- position: 'relative',
- display: 'inline-block',
- width: '44px',
- height: '22px',
- },
- switchInput: {
- opacity: 0,
- width: 0,
- height: 0,
- },
- slider: {
- position: 'absolute',
- cursor: 'pointer',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- backgroundColor: '#ccc',
- transition: '0.3s',
- borderRadius: '22px',
- },
- sliderBefore: {
- position: 'absolute',
- content: '""',
- height: '18px',
- width: '18px',
- left: '2px',
- bottom: '2px',
- backgroundColor: 'white',
- transition: '0.3s',
- borderRadius: '50%',
- },
actions: {
marginTop: '24px',
- display: 'flex',
- alignItems: 'center',
- gap: '16px',
- },
- saveBtn: {
- padding: '10px 24px',
- backgroundColor: '#1890ff',
- color: '#fff',
- border: 'none',
- borderRadius: '4px',
- cursor: 'pointer',
- fontSize: '14px',
- },
- successMsg: {
- color: '#52c41a',
- fontSize: '14px',
- },
- errorMsg: {
- color: '#ff4d4f',
- fontSize: '14px',
+ paddingTop: '24px',
+ borderTop: '1px solid #f0f0f0',
},
}