306 lines
11 KiB
TypeScript
306 lines
11 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { Alert, Button, Card, Form, Input, Result, Select, Space, Spin, Typography, message } from 'antd'
|
||
import { initApi } from '@/lib/api'
|
||
import { useAuthStore } from '@/store/auth'
|
||
import type { InitCheckResult, InitDBPayload } from '@/types/system'
|
||
|
||
const dbTypeOptions: Array<{ label: string; value: InitDBPayload['dbType'] }> = [
|
||
{ label: 'MySQL', value: 'mysql' },
|
||
{ label: 'PostgreSQL', value: 'pgsql' },
|
||
{ label: 'SQLite', value: 'sqlite' },
|
||
{ label: 'MSSQL', value: 'mssql' },
|
||
]
|
||
|
||
type InitState = 'checking' | 'required' | 'ready'
|
||
|
||
const dbDefaults: Record<InitDBPayload['dbType'], Partial<InitDBPayload>> = {
|
||
mysql: {
|
||
host: '127.0.0.1',
|
||
port: '3306',
|
||
},
|
||
pgsql: {
|
||
host: '127.0.0.1',
|
||
port: '5432',
|
||
template: 'template1',
|
||
},
|
||
sqlite: {
|
||
dbPath: 'db',
|
||
},
|
||
mssql: {
|
||
host: '127.0.0.1',
|
||
port: '1433',
|
||
},
|
||
}
|
||
|
||
function applyDbDefaults(currentValues: InitDBPayload, nextDbType: InitDBPayload['dbType']): InitDBPayload {
|
||
return {
|
||
...currentValues,
|
||
...dbDefaults[nextDbType],
|
||
dbType: nextDbType,
|
||
}
|
||
}
|
||
|
||
export function InitPage() {
|
||
const navigate = useNavigate()
|
||
const token = useAuthStore((state) => state.token)
|
||
const [form] = Form.useForm<InitDBPayload>()
|
||
const [state, setState] = useState<InitState>('checking')
|
||
const [checkingError, setCheckingError] = useState<string | null>(null)
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const dbType = Form.useWatch('dbType', form) ?? 'mysql'
|
||
|
||
const checkInitialization = async () => {
|
||
try {
|
||
const response = await initApi.checkDB()
|
||
const data: InitCheckResult = response.data
|
||
|
||
if (data.needInit) {
|
||
setState('required')
|
||
} else {
|
||
setState('ready')
|
||
}
|
||
setCheckingError(null)
|
||
} catch (error) {
|
||
const messageText = error instanceof Error ? error.message : '初始化状态检测失败'
|
||
setCheckingError(messageText)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
void checkInitialization()
|
||
}, [])
|
||
|
||
const helperText = useMemo(() => {
|
||
switch (dbType) {
|
||
case 'mysql':
|
||
return '将创建数据库并写回 MySQL 连接配置。'
|
||
case 'pgsql':
|
||
return '默认使用 PostgreSQL 公共库建库，可按需指定 template。'
|
||
case 'sqlite':
|
||
return '将创建本地 SQLite 数据库文件，并写回 sqlite 配置。'
|
||
case 'mssql':
|
||
return '将按当前连接信息接入 MSSQL，并写回 mssql 配置。'
|
||
default:
|
||
return ''
|
||
}
|
||
}, [dbType])
|
||
|
||
const onDbTypeChange = (nextDbType: InitDBPayload['dbType']) => {
|
||
const currentValues = form.getFieldsValue()
|
||
form.setFieldsValue(applyDbDefaults(currentValues, nextDbType))
|
||
}
|
||
|
||
const submit = async () => {
|
||
const values = await form.validateFields()
|
||
setSubmitting(true)
|
||
try {
|
||
await initApi.initDB(values)
|
||
message.success('初始化完成，请使用 admin 账户登录')
|
||
navigate('/login', { replace: true })
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
if (state === 'checking') {
|
||
return (
|
||
<div className="login-shell">
|
||
<section className="login-hero">
|
||
<span className="capsule">Project Bootstrap</span>
|
||
<div style={{ maxWidth: 620, marginTop: 72 }}>
|
||
<Typography.Title style={{ color: 'rgba(255,255,255,0.96)', fontSize: 52, marginBottom: 18 }}>
|
||
正在检测
|
||
<br />
|
||
项目初始化状态
|
||
</Typography.Title>
|
||
<Typography.Paragraph style={{ color: 'rgba(255,255,255,0.78)', fontSize: 18, lineHeight: 1.8 }}>
|
||
初始化页只在数据库尚未建立、配置尚未回写时使用。检测完成后会自动切换到对应状态。
|
||
</Typography.Paragraph>
|
||
</div>
|
||
</section>
|
||
<section className="login-form-wrap">
|
||
<Card className="glass-panel login-card" bordered={false}>
|
||
<div className="fullscreen-status" style={{ minHeight: 360 }}>
|
||
<Spin size="large" />
|
||
<span>正在检测初始化状态...</span>
|
||
{checkingError ? (
|
||
<Alert
|
||
type="warning"
|
||
showIcon
|
||
message="检测失败"
|
||
description={checkingError}
|
||
action={
|
||
<Button size="small" onClick={() => void checkInitialization()}>
|
||
重试
|
||
</Button>
|
||
}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</Card>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (state === 'ready') {
|
||
return (
|
||
<div className="login-shell">
|
||
<section className="login-hero">
|
||
<span className="capsule">Project Bootstrap</span>
|
||
<div style={{ maxWidth: 620, marginTop: 72 }}>
|
||
<Typography.Title style={{ color: 'rgba(255,255,255,0.96)', fontSize: 52, marginBottom: 18 }}>
|
||
项目已经完成
|
||
<br />
|
||
首次初始化
|
||
</Typography.Title>
|
||
<Typography.Paragraph style={{ color: 'rgba(255,255,255,0.78)', fontSize: 18, lineHeight: 1.8 }}>
|
||
当前服务已经具备数据库连接和基础管理员账号，不需要再次执行初始化。
|
||
</Typography.Paragraph>
|
||
</div>
|
||
</section>
|
||
<section className="login-form-wrap">
|
||
<Card className="glass-panel login-card" bordered={false}>
|
||
<Result
|
||
status="success"
|
||
title="无需再次初始化"
|
||
subTitle="如果需要调整系统配置，请登录后台后在系统配置页修改。"
|
||
extra={[
|
||
<Button key="login" type="primary" onClick={() => navigate(token ? '/' : '/login', { replace: true })}>
|
||
{token ? '进入后台' : '前往登录'}
|
||
</Button>,
|
||
<Button key="check" onClick={() => void checkInitialization()}>
|
||
重新检测
|
||
</Button>,
|
||
]}
|
||
/>
|
||
</Card>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="login-shell">
|
||
<section className="login-hero">
|
||
<span className="capsule">Project Bootstrap</span>
|
||
<div style={{ maxWidth: 620, marginTop: 72 }}>
|
||
<Typography.Title style={{ color: 'rgba(255,255,255,0.96)', fontSize: 52, marginBottom: 18 }}>
|
||
首次启动先完成
|
||
<br />
|
||
项目初始化
|
||
</Typography.Title>
|
||
<Typography.Paragraph style={{ color: 'rgba(255,255,255,0.78)', fontSize: 18, lineHeight: 1.8 }}>
|
||
这里负责创建主业务数据库、写回当前服务配置，并生成默认管理员账号。初始化完成后，再进入后台登录。
|
||
</Typography.Paragraph>
|
||
</div>
|
||
</section>
|
||
<section className="login-form-wrap">
|
||
<Card className="glass-panel login-card" bordered={false}>
|
||
<Typography.Title level={2} style={{ marginBottom: 8 }}>
|
||
初始化项目
|
||
</Typography.Title>
|
||
<Typography.Paragraph className="text-muted" style={{ marginBottom: 20 }}>
|
||
默认管理员账号固定为 `admin`，密码使用下面填写的管理员密码。
|
||
</Typography.Paragraph>
|
||
{checkingError ? (
|
||
<Alert
|
||
type="warning"
|
||
showIcon
|
||
message="状态检测存在异常"
|
||
description={checkingError}
|
||
style={{ marginBottom: 16 }}
|
||
/>
|
||
) : null}
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
initialValues={{
|
||
adminPassword: '',
|
||
dbType: 'mysql',
|
||
host: '127.0.0.1',
|
||
port: '3306',
|
||
dbName: 'go_web_template',
|
||
userName: 'root',
|
||
dbPath: 'db',
|
||
template: 'template1',
|
||
}}
|
||
onFinish={submit}
|
||
>
|
||
<Form.Item name="dbType" label="数据库类型" rules={[{ required: true, message: '请选择数据库类型' }]}>
|
||
<Select options={dbTypeOptions} onChange={onDbTypeChange} />
|
||
</Form.Item>
|
||
<Typography.Paragraph className="text-muted" style={{ marginTop: -8, marginBottom: 16 }}>
|
||
{helperText}
|
||
</Typography.Paragraph>
|
||
<div className="init-form-grid">
|
||
{dbType === 'sqlite' ? (
|
||
<Form.Item
|
||
name="dbPath"
|
||
label="数据库目录"
|
||
rules={[{ required: true, message: '请输入 SQLite 数据库目录' }]}
|
||
>
|
||
<Input placeholder="例如 db" />
|
||
</Form.Item>
|
||
) : (
|
||
<>
|
||
<Form.Item name="host" label="数据库地址" rules={[{ required: true, message: '请输入数据库地址' }]}>
|
||
<Input placeholder="例如 127.0.0.1" />
|
||
</Form.Item>
|
||
<Form.Item name="port" label="数据库端口" rules={[{ required: true, message: '请输入数据库端口' }]}>
|
||
<Input placeholder="例如 3306" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="userName"
|
||
label="数据库用户名"
|
||
rules={[{ required: true, message: '请输入数据库用户名' }]}
|
||
>
|
||
<Input placeholder="例如 root" />
|
||
</Form.Item>
|
||
<Form.Item name="password" label="数据库密码">
|
||
<Input.Password placeholder="请输入数据库密码" />
|
||
</Form.Item>
|
||
</>
|
||
)}
|
||
<Form.Item name="dbName" label="数据库名" rules={[{ required: true, message: '请输入数据库名' }]}>
|
||
<Input placeholder={dbType === 'sqlite' ? '例如 go_web_template' : '例如 go_web_template'} />
|
||
</Form.Item>
|
||
{dbType === 'pgsql' ? (
|
||
<Form.Item name="template" label="建库模板">
|
||
<Input placeholder="默认 template1" />
|
||
</Form.Item>
|
||
) : (
|
||
<div />
|
||
)}
|
||
<Form.Item
|
||
name="adminPassword"
|
||
label="管理员密码"
|
||
rules={[
|
||
{ required: true, message: '请输入管理员密码' },
|
||
{ min: 6, message: '管理员密码至少 6 位' },
|
||
]}
|
||
>
|
||
<Input.Password placeholder="初始化后 admin 账户使用此密码登录" />
|
||
</Form.Item>
|
||
</div>
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: 20 }}
|
||
message="初始化完成后，后端会立即持有数据库连接，并将连接配置写回当前配置文件。"
|
||
/>
|
||
<Space wrap>
|
||
<Button type="primary" htmlType="submit" loading={submitting}>
|
||
开始初始化
|
||
</Button>
|
||
<Button onClick={() => void checkInitialization()}>重新检测</Button>
|
||
<Button onClick={() => navigate('/login', { replace: true })}>返回登录页</Button>
|
||
</Space>
|
||
</Form>
|
||
</Card>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|