384 lines
10 KiB
JavaScript
384 lines
10 KiB
JavaScript
|
import { computed, reactive, ref, watch } from 'vue'
|
|||
|
|
|
|||
|
|
function createForm(initialState) {
|
|||
|
|
return {
|
|||
|
|
company_name: initialState?.company?.name || '',
|
|||
|
|
company_code: initialState?.company?.code || '',
|
|||
|
|
admin_email: initialState?.company?.admin_email || '',
|
|||
|
|
admin_username: '',
|
|||
|
|
admin_password: '',
|
|||
|
|
admin_password_confirm: '',
|
|||
|
|
web_host: initialState?.web?.host || '127.0.0.1',
|
|||
|
|
web_port: initialState?.web?.port || 5173,
|
|||
|
|
server_host: initialState?.server?.host || '127.0.0.1',
|
|||
|
|
server_port: initialState?.server?.port || 8000,
|
|||
|
|
postgres_host: initialState?.database?.host || '127.0.0.1',
|
|||
|
|
postgres_port: initialState?.database?.port || 5432,
|
|||
|
|
postgres_db: initialState?.database?.name || 'x_financial',
|
|||
|
|
postgres_user: initialState?.database?.username || 'postgres',
|
|||
|
|
postgres_password: '',
|
|||
|
|
redis_url: initialState?.redis?.url || ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildPayload(form) {
|
|||
|
|
return {
|
|||
|
|
company_name: form.company_name.trim(),
|
|||
|
|
company_code: form.company_code.trim(),
|
|||
|
|
admin_email: form.admin_email.trim(),
|
|||
|
|
admin_username: form.admin_username.trim(),
|
|||
|
|
admin_password: String(form.admin_password || ''),
|
|||
|
|
admin_password_confirm: String(form.admin_password_confirm || ''),
|
|||
|
|
web_host: form.web_host.trim(),
|
|||
|
|
web_port: Number(form.web_port),
|
|||
|
|
server_host: form.server_host.trim(),
|
|||
|
|
server_port: Number(form.server_port),
|
|||
|
|
postgres_host: form.postgres_host.trim(),
|
|||
|
|
postgres_port: Number(form.postgres_port),
|
|||
|
|
postgres_db: form.postgres_db.trim(),
|
|||
|
|
postgres_user: form.postgres_user.trim(),
|
|||
|
|
postgres_password: String(form.postgres_password || ''),
|
|||
|
|
redis_url: form.redis_url.trim()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildRuntimeFingerprint(form) {
|
|||
|
|
return JSON.stringify({
|
|||
|
|
web_host: form.web_host.trim(),
|
|||
|
|
web_port: String(form.web_port).trim(),
|
|||
|
|
server_host: form.server_host.trim(),
|
|||
|
|
server_port: String(form.server_port).trim()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildDatabaseFingerprint(form) {
|
|||
|
|
return JSON.stringify({
|
|||
|
|
postgres_host: form.postgres_host.trim(),
|
|||
|
|
postgres_port: String(form.postgres_port).trim(),
|
|||
|
|
postgres_db: form.postgres_db.trim(),
|
|||
|
|
postgres_user: form.postgres_user.trim(),
|
|||
|
|
postgres_password: String(form.postgres_password || ''),
|
|||
|
|
redis_url: form.redis_url.trim()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isEmail(value) {
|
|||
|
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(String(value || '').trim())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function useSetupView(props, emit) {
|
|||
|
|
const form = reactive(createForm(props.initialState))
|
|||
|
|
const activeSection = ref('company')
|
|||
|
|
let syncingFromProps = false
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.initialState,
|
|||
|
|
(state) => {
|
|||
|
|
syncingFromProps = true
|
|||
|
|
Object.assign(form, createForm(state))
|
|||
|
|
queueMicrotask(() => {
|
|||
|
|
syncingFromProps = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
{ deep: true }
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => buildRuntimeFingerprint(form),
|
|||
|
|
(_value, oldValue) => {
|
|||
|
|
if (oldValue !== undefined && !syncingFromProps) {
|
|||
|
|
emit('runtime-dirty')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => buildDatabaseFingerprint(form),
|
|||
|
|
(_value, oldValue) => {
|
|||
|
|
if (oldValue !== undefined && !syncingFromProps) {
|
|||
|
|
emit('database-dirty')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const companyReady = computed(() => form.company_name.trim().length >= 2)
|
|||
|
|
const adminReady = computed(() => {
|
|||
|
|
return Boolean(
|
|||
|
|
isEmail(form.admin_email) &&
|
|||
|
|
form.admin_username.trim().length >= 4 &&
|
|||
|
|
String(form.admin_password || '').length >= 5 &&
|
|||
|
|
form.admin_password === form.admin_password_confirm
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
const runtimeInputsReady = computed(() => {
|
|||
|
|
return Boolean(
|
|||
|
|
form.web_host.trim() &&
|
|||
|
|
String(form.web_port).trim() &&
|
|||
|
|
form.server_host.trim() &&
|
|||
|
|
String(form.server_port).trim()
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
const databaseInputsReady = computed(() => {
|
|||
|
|
return Boolean(
|
|||
|
|
form.postgres_host.trim() &&
|
|||
|
|
String(form.postgres_port).trim() &&
|
|||
|
|
form.postgres_db.trim() &&
|
|||
|
|
form.postgres_user.trim() &&
|
|||
|
|
String(form.postgres_password || '').length > 0
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const runtimeReady = computed(() => runtimeInputsReady.value && props.runtimeTestPassed)
|
|||
|
|
const databaseReady = computed(() => databaseInputsReady.value && props.databaseTestPassed)
|
|||
|
|
const finalReady = computed(() => companyReady.value && adminReady.value && runtimeReady.value && databaseReady.value)
|
|||
|
|
|
|||
|
|
const sections = computed(() => [
|
|||
|
|
{
|
|||
|
|
id: 'company',
|
|||
|
|
index: '01',
|
|||
|
|
title: '企业信息',
|
|||
|
|
desc: '填写企业名称与识别编码。',
|
|||
|
|
complete: companyReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'admin',
|
|||
|
|
index: '02',
|
|||
|
|
title: '管理员安全',
|
|||
|
|
desc: '配置管理员邮箱、账号与密码。',
|
|||
|
|
complete: adminReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'runtime',
|
|||
|
|
index: '03',
|
|||
|
|
title: '运行端口',
|
|||
|
|
desc: '单独检测 Web 与后端端口占用。',
|
|||
|
|
complete: runtimeReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'database',
|
|||
|
|
index: '04',
|
|||
|
|
title: '数据库',
|
|||
|
|
desc: '检测 PostgreSQL 连接，Redis 暂时可选。',
|
|||
|
|
complete: databaseReady.value
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const activeStep = computed(() => sections.value.find((section) => section.id === activeSection.value) || sections.value[0])
|
|||
|
|
const completionCount = computed(() => sections.value.filter((section) => section.complete).length)
|
|||
|
|
|
|||
|
|
const runtimeEndpoints = computed(() => [
|
|||
|
|
{
|
|||
|
|
label: 'Web',
|
|||
|
|
value: `${form.web_host}:${form.web_port}`
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Server',
|
|||
|
|
value: `${form.server_host}:${form.server_port}`
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const summaryItems = computed(() => [
|
|||
|
|
{
|
|||
|
|
label: '企业信息',
|
|||
|
|
detail: form.company_name.trim() || '未完成',
|
|||
|
|
complete: companyReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '管理员安全',
|
|||
|
|
detail: form.admin_username.trim() || form.admin_email.trim() || '未完成',
|
|||
|
|
complete: adminReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '运行端口',
|
|||
|
|
detail: `${form.web_host}:${form.web_port} / ${form.server_host}:${form.server_port}`,
|
|||
|
|
complete: runtimeReady.value
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '数据库',
|
|||
|
|
detail: `${form.postgres_host}:${form.postgres_port}/${form.postgres_db}`,
|
|||
|
|
complete: databaseReady.value
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const currentTestMessage = computed(() => {
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
return props.runtimeTestMessage
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
return props.databaseTestMessage
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const currentTestPassed = computed(() => {
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
return props.runtimeTestPassed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
return props.databaseTestPassed
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showTestAction = computed(() => ['runtime', 'database'].includes(activeSection.value))
|
|||
|
|
const testButtonLabel = computed(() => {
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
return props.runtimeTesting ? '检测中...' : '检测端口占用'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
return props.databaseTesting ? '检测中...' : '检测数据库连接'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return ''
|
|||
|
|
})
|
|||
|
|
const testButtonIcon = computed(() => {
|
|||
|
|
if ((activeSection.value === 'runtime' && props.runtimeTesting) || (activeSection.value === 'database' && props.databaseTesting)) {
|
|||
|
|
return 'pi pi-spin pi-spinner'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return activeSection.value === 'runtime' ? 'pi pi-server' : 'pi pi-database'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const canRuntimeTest = computed(() => Boolean(runtimeInputsReady.value && !props.submitting && !props.runtimeTesting && !props.databaseTesting))
|
|||
|
|
const canDatabaseTest = computed(() => Boolean(databaseInputsReady.value && !props.submitting && !props.runtimeTesting && !props.databaseTesting))
|
|||
|
|
const canTest = computed(() => {
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
return canRuntimeTest.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
return canDatabaseTest.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const submitHint = computed(() => {
|
|||
|
|
if (activeSection.value === 'admin') {
|
|||
|
|
if (!form.admin_email.trim() && !form.admin_username.trim() && !String(form.admin_password || '').length) {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!form.admin_email.trim()) {
|
|||
|
|
return '请填写管理员邮箱。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!isEmail(form.admin_email)) {
|
|||
|
|
return '管理员邮箱格式不正确。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (form.admin_username.trim() && form.admin_username.trim().length < 4) {
|
|||
|
|
return '管理员账号至少 4 位。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (String(form.admin_password || '').length > 0 && String(form.admin_password || '').length < 5) {
|
|||
|
|
return '管理员密码当前至少 5 位。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
String(form.admin_password_confirm || '').length > 0 &&
|
|||
|
|
form.admin_password !== form.admin_password_confirm
|
|||
|
|
) {
|
|||
|
|
return '两次输入的管理员密码不一致。'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
if (!runtimeInputsReady.value) {
|
|||
|
|
return '请先填写 Web 与 Server 的主机和端口。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!props.runtimeTestPassed) {
|
|||
|
|
return '请先完成端口占用检测。'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
if (!databaseInputsReady.value) {
|
|||
|
|
return '请先填写 PostgreSQL 连接信息。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!props.databaseTestPassed) {
|
|||
|
|
return '请先完成数据库连接检测。'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'company') {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!companyReady.value) {
|
|||
|
|
return '请先完成企业信息。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!adminReady.value) {
|
|||
|
|
return '请先完成管理员安全配置。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!runtimeReady.value) {
|
|||
|
|
return '请先完成运行端口检测。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!databaseReady.value) {
|
|||
|
|
return '请先完成数据库连接检测。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function goToSection(id) {
|
|||
|
|
activeSection.value = id
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function submitForm() {
|
|||
|
|
if (!finalReady.value || props.submitting) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
emit('submit', buildPayload(form))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testSetup() {
|
|||
|
|
if (!canTest.value) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payload = buildPayload(form)
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'runtime') {
|
|||
|
|
emit('runtime-test', payload)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (activeSection.value === 'database') {
|
|||
|
|
emit('database-test', payload)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
activeSection,
|
|||
|
|
activeStep,
|
|||
|
|
canSubmit: finalReady,
|
|||
|
|
canTest,
|
|||
|
|
completionCount,
|
|||
|
|
currentTestMessage,
|
|||
|
|
currentTestPassed,
|
|||
|
|
form,
|
|||
|
|
goToSection,
|
|||
|
|
runtimeEndpoints,
|
|||
|
|
sections,
|
|||
|
|
showTestAction,
|
|||
|
|
submitForm,
|
|||
|
|
submitHint,
|
|||
|
|
summaryItems,
|
|||
|
|
testButtonIcon,
|
|||
|
|
testButtonLabel,
|
|||
|
|
testSetup
|
|||
|
|
}
|
|||
|
|
}
|