111
This commit is contained in:
wdvipa
377
src/components/InstallPage.tsx
Normal file
377
src/components/InstallPage.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Typography,
|
||||
Alert,
|
||||
Space,
|
||||
Steps,
|
||||
Row,
|
||||
Col,
|
||||
message
|
||||
} from 'antd'
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
CheckCircleOutlined,
|
||||
SettingOutlined,
|
||||
SafetyOutlined
|
||||
} from '@ant-design/icons'
|
||||
import apiClient from '../services/apiClient'
|
||||
|
||||
const { Title, Text, Paragraph } = Typography
|
||||
const { Step } = Steps
|
||||
|
||||
interface InstallPageProps {
|
||||
onInstallComplete: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统安装页面组件
|
||||
* 用于首次运行时设置管理员账号和密码
|
||||
*/
|
||||
const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [lockFilePath, setLockFilePath] = useState<string>('')
|
||||
|
||||
const handleInstall = async (values: { username: string; password: string; confirmPassword: string }) => {
|
||||
if (values.password !== values.confirmPassword) {
|
||||
setError('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const result = await apiClient.post<any>('/api/auth/initialize', {
|
||||
username: values.username,
|
||||
password: values.password
|
||||
})
|
||||
|
||||
if (result.success) {
|
||||
setCurrentStep(2)
|
||||
message.success('系统初始化成功！')
|
||||
|
||||
// 获取初始化信息以显示锁文件路径
|
||||
try {
|
||||
const checkResult = await apiClient.get<any>('/api/auth/check-initialization')
|
||||
if (checkResult.success && checkResult.lockFilePath) {
|
||||
setLockFilePath(checkResult.lockFilePath)
|
||||
}
|
||||
} catch (infoError) {
|
||||
console.warn('获取初始化信息失败:', infoError)
|
||||
}
|
||||
|
||||
// 延迟跳转到登录页面
|
||||
setTimeout(() => {
|
||||
onInstallComplete()
|
||||
}, 3000)
|
||||
} else {
|
||||
setError(result.message || '初始化失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error.message || '初始化失败，请稍后重试')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const validateUsername = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入用户名'))
|
||||
}
|
||||
if (value.length < 3) {
|
||||
return Promise.reject(new Error('用户名至少需要3个字符'))
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
|
||||
return Promise.reject(new Error('用户名只能包含字母、数字、下划线和横线'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const validatePassword = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入密码'))
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return Promise.reject(new Error('密码至少需要6个字符'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: '欢迎',
|
||||
icon: <SettingOutlined />,
|
||||
description: '系统初始化向导'
|
||||
},
|
||||
{
|
||||
title: '设置账号',
|
||||
icon: <UserOutlined />,
|
||||
description: '创建管理员账号'
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
icon: <CheckCircleOutlined />,
|
||||
description: '初始化完成'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: '500px',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
|
||||
border: 'none'
|
||||
}}
|
||||
styles={{ body: { padding: '40px' } }}
|
||||
>
|
||||
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
|
||||
<div style={{
|
||||
fontSize: '48px',
|
||||
marginBottom: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
🚀
|
||||
</div>
|
||||
<Title level={2} style={{ margin: 0, color: '#1a1a1a' }}>
|
||||
远程控制系统
|
||||
</Title>
|
||||
<Text style={{ color: '#666', fontSize: '16px' }}>
|
||||
系统初始化向导
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Steps
|
||||
current={currentStep}
|
||||
style={{ marginBottom: '32px' }}
|
||||
size="small"
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step
|
||||
key={index}
|
||||
title={step.title}
|
||||
description={step.description}
|
||||
icon={step.icon}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
|
||||
{currentStep === 0 && (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Alert
|
||||
message="欢迎使用远程控制系统"
|
||||
description={
|
||||
<div>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
这是您首次运行本系统，需要进行初始化设置。
|
||||
</Paragraph>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
请为系统创建一个管理员账号，该账号将用于登录和管理系统。
|
||||
</Paragraph>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<SafetyOutlined style={{ color: '#52c41a' }} />
|
||||
<Text>安全的密码保护</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<UserOutlined style={{ color: '#1890ff' }} />
|
||||
<Text>个性化用户名</Text>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px', textAlign: 'left' }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setCurrentStep(1)}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
height: '48px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
开始设置
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 1 && (
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleInstall}
|
||||
size="large"
|
||||
>
|
||||
<Alert
|
||||
message="创建管理员账号"
|
||||
description="请设置您的管理员用户名和密码，建议使用强密码以确保系统安全。"
|
||||
type="warning"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px' }}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<Alert
|
||||
message={error}
|
||||
type="error"
|
||||
closable
|
||||
onClose={() => setError(null)}
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="管理员用户名"
|
||||
rules={[{ validator: validateUsername }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="请输入管理员用户名"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[{ validator: validatePassword }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="请输入密码（至少6个字符）"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
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="请再次输入密码"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16} style={{ marginTop: '32px' }}>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
onClick={() => setCurrentStep(0)}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
size="large"
|
||||
loading={loading}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
{loading ? '初始化中...' : '完成设置'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '64px', marginBottom: '24px' }}>
|
||||
✅
|
||||
</div>
|
||||
<Alert
|
||||
message="初始化完成！"
|
||||
description={
|
||||
<div>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
系统已成功初始化，管理员账号创建完成。
|
||||
</Paragraph>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
即将跳转到登录页面，请使用刚才设置的账号密码登录系统。
|
||||
</Paragraph>
|
||||
{lockFilePath && (
|
||||
<div style={{
|
||||
background: '#f6f6f6',
|
||||
padding: '12px',
|
||||
borderRadius: '6px',
|
||||
marginTop: '16px',
|
||||
textAlign: 'left'
|
||||
}}>
|
||||
<Text strong style={{ color: '#666' }}>💡 重要提示：</Text>
|
||||
<br />
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
系统已创建初始化锁文件，防止重复初始化。
|
||||
</Text>
|
||||
<br />
|
||||
<Text code style={{ fontSize: '11px', wordBreak: 'break-all' }}>
|
||||
{lockFilePath}
|
||||
</Text>
|
||||
<br />
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
如需重新初始化，请先删除此文件。
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
type="success"
|
||||
showIcon
|
||||
style={{ textAlign: 'left' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstallPage
|
||||
Reference in New Issue
Block a user