377 lines
12 KiB
TypeScript
377 lines
12 KiB
TypeScript
|
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
|