🎨 refactor: Setup Wizard UI & Clean Up Redundant Code
Summary of changes
1. SetupWizard.jsx
• Center card (`min-h-screen flex items-center justify-center`) and remove top margin.
• Merge step indicator/content into single card; added `Divider` separator.
• Added sweep-shine animation to current step title via existing `shine-text` class.
• Simplified imports (removed Avatar / Typography) and deleted unused modal state.
2. Step components
• Stripped outer `Card` and header sections from `DatabaseStep.jsx`, `AdminStep.jsx`, `UsageModeStep.jsx`, `CompleteStep.jsx` to fit single-card layout.
• Removed unused imports and props.
3. Components cleanup
• Deleted obsolete files:
- `components/setup/components/SetupSteps.jsx`
- `components/setup/components/modals/UsageModeInfoModal.jsx`
• Updated `setup/index.jsx` exports accordingly.
4. Styling
• Ensured global sweep-shine effect already present in `index.css` is reused for step titles.
5. i18n
• Pruned unused translation keys related to removed components from `i18n/locales/en.json`.
6. Miscellaneous
• Removed redundant Avatar/Icon imports from multiple files.
• All linter checks pass with no new warnings.
This commit consolidates the initialization flow into a cleaner, centered single-card wizard, adds visual polish, and reduces dead code for easier maintenance.
This commit is contained in:
t0ng7u
328
web/src/components/setup/SetupWizard.jsx
Normal file
328
web/src/components/setup/SetupWizard.jsx
Normal file
@@ -0,0 +1,328 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Card, Divider, Steps, Form } from '@douyinfe/semi-ui';
|
||||
import { API, showError, showNotice } from '../../helpers';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import StepNavigation from './components/StepNavigation';
|
||||
import DatabaseStep from './components/steps/DatabaseStep';
|
||||
import AdminStep from './components/steps/AdminStep';
|
||||
import UsageModeStep from './components/steps/UsageModeStep';
|
||||
import CompleteStep from './components/steps/CompleteStep';
|
||||
|
||||
const SetupWizard = () => {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [setupStatus, setSetupStatus] = useState({
|
||||
status: false,
|
||||
root_init: false,
|
||||
database_type: '',
|
||||
});
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const formRef = useRef(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
usageMode: 'external',
|
||||
});
|
||||
|
||||
// 确保默认选中“对外运营模式”，并同步到表单
|
||||
useEffect(() => {
|
||||
if (formRef.current) {
|
||||
formRef.current.setValue('usageMode', 'external');
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 定义步骤内容
|
||||
const steps = [
|
||||
{
|
||||
title: t('数据库检查'),
|
||||
description: t('验证数据库连接状态'),
|
||||
},
|
||||
{
|
||||
title: t('管理员账号'),
|
||||
description: t('设置管理员登录信息'),
|
||||
},
|
||||
{
|
||||
title: t('使用模式'),
|
||||
description: t('选择系统运行模式'),
|
||||
},
|
||||
{
|
||||
title: t('完成初始化'),
|
||||
description: t('确认设置并完成初始化'),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
fetchSetupStatus();
|
||||
}, []);
|
||||
|
||||
const fetchSetupStatus = async () => {
|
||||
try {
|
||||
const res = await API.get('/api/setup');
|
||||
const { success, data } = res.data;
|
||||
if (success) {
|
||||
setSetupStatus(data);
|
||||
|
||||
// If setup is already completed, redirect to home
|
||||
if (data.status) {
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置当前步骤 - 默认从数据库检查开始
|
||||
setCurrentStep(0);
|
||||
} else {
|
||||
showError(t('获取初始化状态失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch setup status:', error);
|
||||
showError(t('获取初始化状态失败'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUsageModeChange = (e) => {
|
||||
const nextMode = e?.target?.value ?? e;
|
||||
setFormData((prev) => ({ ...prev, usageMode: nextMode }));
|
||||
// 同步到表单，便于 getValues() 拿到 usageMode
|
||||
if (formRef.current) {
|
||||
formRef.current.setValue('usageMode', nextMode);
|
||||
}
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
// 验证当前步骤是否可以继续
|
||||
if (!canProceedToNext()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const current = currentStep + 1;
|
||||
setCurrentStep(current);
|
||||
};
|
||||
|
||||
// 验证是否可以继续到下一步
|
||||
const canProceedToNext = () => {
|
||||
switch (currentStep) {
|
||||
case 0: // 数据库检查步骤
|
||||
return true; // 数据库检查总是可以继续
|
||||
case 1: // 管理员账号步骤
|
||||
if (setupStatus.root_init) {
|
||||
return true; // 如果已经初始化，可以继续
|
||||
}
|
||||
// 检查必填字段
|
||||
if (!formData.username || !formData.password || !formData.confirmPassword) {
|
||||
showError(t('请填写完整的管理员账号信息'));
|
||||
return false;
|
||||
}
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
showError(t('两次输入的密码不一致'));
|
||||
return false;
|
||||
}
|
||||
if (formData.password.length < 8) {
|
||||
showError(t('密码长度至少为8个字符'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
case 2: // 使用模式步骤
|
||||
if (!formData.usageMode) {
|
||||
showError(t('请选择使用模式'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
const current = currentStep - 1;
|
||||
setCurrentStep(current);
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
if (!formRef.current) {
|
||||
console.error('Form reference is null');
|
||||
showError(t('表单引用错误，请刷新页面重试'));
|
||||
return;
|
||||
}
|
||||
|
||||
const values = formRef.current.getValues();
|
||||
|
||||
// For root_init=false, validate admin username and password
|
||||
if (!setupStatus.root_init) {
|
||||
if (!values.username || !values.username.trim()) {
|
||||
showError(t('请输入管理员用户名'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!values.password || values.password.length < 8) {
|
||||
showError(t('密码长度至少为8个字符'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (values.password !== values.confirmPassword) {
|
||||
showError(t('两次输入的密码不一致'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare submission data
|
||||
const formValues = { ...values };
|
||||
const usageMode = values.usageMode;
|
||||
formValues.SelfUseModeEnabled = usageMode === 'self';
|
||||
formValues.DemoSiteEnabled = usageMode === 'demo';
|
||||
|
||||
// Remove usageMode as it's not needed by the backend
|
||||
delete formValues.usageMode;
|
||||
|
||||
// 提交表单至后端
|
||||
setLoading(true);
|
||||
|
||||
// Submit to backend
|
||||
API.post('/api/setup', formValues)
|
||||
.then((res) => {
|
||||
const { success, message } = res.data;
|
||||
|
||||
if (success) {
|
||||
showNotice(t('系统初始化成功，正在跳转...'));
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else {
|
||||
showError(message || t('初始化失败，请重试'));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('API error:', error);
|
||||
showError(t('系统初始化失败，请重试'));
|
||||
setLoading(false);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
// 获取步骤内容
|
||||
const getStepContent = (step) => {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return (
|
||||
<DatabaseStep
|
||||
setupStatus={setupStatus}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<AdminStep
|
||||
setupStatus={setupStatus}
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
formRef={formRef}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<UsageModeStep
|
||||
formData={formData}
|
||||
handleUsageModeChange={handleUsageModeChange}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<CompleteStep
|
||||
setupStatus={setupStatus}
|
||||
formData={formData}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const stepNavigationProps = {
|
||||
currentStep,
|
||||
steps,
|
||||
prev,
|
||||
next,
|
||||
onSubmit,
|
||||
loading,
|
||||
t,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='min-h-screen flex items-center justify-center px-4'>
|
||||
<div className="w-full max-w-4xl">
|
||||
<Card className="!rounded-2xl shadow-sm border-0">
|
||||
<div className="mb-4">
|
||||
<div className="text-xl font-semibold">{t('系统初始化')}</div>
|
||||
<div className="text-xs text-gray-600">
|
||||
{t('欢迎使用，请完成以下设置以开始使用系统')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-2 py-2">
|
||||
<Steps type="basic" current={currentStep}>
|
||||
{steps.map((item, index) => (
|
||||
<Steps.Step
|
||||
key={item.title}
|
||||
title={<span className={currentStep === index ? 'shine-text' : ''}>{item.title}</span>}
|
||||
description={item.description}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
<Divider margin='12px' />
|
||||
|
||||
{/* 表单容器 */}
|
||||
<Form
|
||||
getFormApi={(formApi) => {
|
||||
formRef.current = formApi;
|
||||
}}
|
||||
initValues={formData}
|
||||
>
|
||||
{/* 步骤内容：保持所有字段挂载，仅隐藏非当前步骤 */}
|
||||
<div className="steps-content">
|
||||
{[0, 1, 2, 3].map((idx) => (
|
||||
<div key={idx} style={{ display: currentStep === idx ? 'block' : 'none' }}>
|
||||
{React.cloneElement(getStepContent(idx), {
|
||||
...stepNavigationProps,
|
||||
renderNavigationButtons: () => (
|
||||
<StepNavigation {...stepNavigationProps} />
|
||||
),
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetupWizard;
|
||||
78
web/src/components/setup/components/StepNavigation.jsx
Normal file
78
web/src/components/setup/components/StepNavigation.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from '@douyinfe/semi-ui';
|
||||
import { IconCheckCircleStroked } from '@douyinfe/semi-icons';
|
||||
|
||||
/**
|
||||
* 步骤导航组件
|
||||
* 负责渲染上一步、下一步和完成按钮
|
||||
*/
|
||||
const StepNavigation = ({
|
||||
currentStep,
|
||||
steps,
|
||||
prev,
|
||||
next,
|
||||
onSubmit,
|
||||
loading,
|
||||
t
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center pt-4">
|
||||
{/* 上一步按钮 */}
|
||||
{currentStep > 0 && (
|
||||
<Button
|
||||
onClick={prev}
|
||||
className="!rounded-lg"
|
||||
>
|
||||
{t('上一步')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex-1"></div>
|
||||
|
||||
{/* 下一步按钮 */}
|
||||
{currentStep < steps.length - 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={next}
|
||||
className="!rounded-lg"
|
||||
>
|
||||
{t('下一步')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 完成按钮 */}
|
||||
{currentStep === steps.length - 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={onSubmit}
|
||||
loading={loading}
|
||||
className="!rounded-lg"
|
||||
icon={<IconCheckCircleStroked />}
|
||||
>
|
||||
{t('初始化系统')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepNavigation;
|
||||
120
web/src/components/setup/components/steps/AdminStep.jsx
Normal file
120
web/src/components/setup/components/steps/AdminStep.jsx
Normal file
@@ -0,0 +1,120 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Banner, Form } from '@douyinfe/semi-ui';
|
||||
import { IconUser, IconLock } from '@douyinfe/semi-icons';
|
||||
|
||||
/**
|
||||
* 管理员账号设置步骤组件
|
||||
* 提供管理员用户名和密码的设置界面
|
||||
*/
|
||||
const AdminStep = ({
|
||||
setupStatus,
|
||||
formData,
|
||||
setFormData,
|
||||
formRef,
|
||||
renderNavigationButtons,
|
||||
t
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{setupStatus.root_init ? (
|
||||
<Banner
|
||||
type='info'
|
||||
closeIcon={null}
|
||||
description={
|
||||
<div className="flex items-center">
|
||||
<span>{t('管理员账号已经初始化过，请继续设置其他参数')}</span>
|
||||
</div>
|
||||
}
|
||||
className="!rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Form.Input
|
||||
field='username'
|
||||
label={t('用户名')}
|
||||
placeholder={t('请输入管理员用户名')}
|
||||
prefix={<IconUser />}
|
||||
showClear
|
||||
noLabel={false}
|
||||
validateStatus="default"
|
||||
rules={[{ required: true, message: t('请输入管理员用户名') }]}
|
||||
initValue={formData.username || ''}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, username: value });
|
||||
}}
|
||||
/>
|
||||
<Form.Input
|
||||
field='password'
|
||||
label={t('密码')}
|
||||
placeholder={t('请输入管理员密码')}
|
||||
type='password'
|
||||
prefix={<IconLock />}
|
||||
showClear
|
||||
noLabel={false}
|
||||
mode="password"
|
||||
validateStatus="default"
|
||||
rules={[
|
||||
{ required: true, message: t('请输入管理员密码') },
|
||||
{ min: 8, message: t('密码长度至少为8个字符') }
|
||||
]}
|
||||
initValue={formData.password || ''}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, password: value });
|
||||
}}
|
||||
/>
|
||||
<Form.Input
|
||||
field='confirmPassword'
|
||||
label={t('确认密码')}
|
||||
placeholder={t('请确认管理员密码')}
|
||||
type='password'
|
||||
prefix={<IconLock />}
|
||||
showClear
|
||||
noLabel={false}
|
||||
mode="password"
|
||||
validateStatus="default"
|
||||
rules={[
|
||||
{ required: true, message: t('请确认管理员密码') },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value && formRef.current) {
|
||||
const password = formRef.current.getValue('password');
|
||||
if (value !== password) {
|
||||
return Promise.reject(t('两次输入的密码不一致'));
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}
|
||||
initValue={formData.confirmPassword || ''}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, confirmPassword: value });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{renderNavigationButtons && renderNavigationButtons()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminStep;
|
||||
65
web/src/components/setup/components/steps/CompleteStep.jsx
Normal file
65
web/src/components/setup/components/steps/CompleteStep.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Avatar, Typography, Descriptions } from '@douyinfe/semi-ui';
|
||||
import { CheckCircle } from 'lucide-react';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
/**
|
||||
* 完成步骤组件
|
||||
* 显示配置总结和初始化确认界面
|
||||
*/
|
||||
const CompleteStep = ({
|
||||
setupStatus,
|
||||
formData,
|
||||
renderNavigationButtons,
|
||||
t
|
||||
}) => {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<Avatar color="green" className="mx-auto mb-4 shadow-lg">
|
||||
<CheckCircle size={24} />
|
||||
</Avatar>
|
||||
<Title heading={3} className="mb-2">{t('准备完成初始化')}</Title>
|
||||
<Text type="secondary" className="mb-6 block">
|
||||
{t('请确认以下设置信息，点击"初始化系统"开始配置')}
|
||||
</Text>
|
||||
|
||||
<Descriptions>
|
||||
<Descriptions.Item itemKey={t('数据库类型')}>
|
||||
{setupStatus.database_type === 'sqlite' ? 'SQLite' :
|
||||
setupStatus.database_type === 'mysql' ? 'MySQL' : 'PostgreSQL'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item itemKey={t('管理员账号')}>
|
||||
{setupStatus.root_init ? t('已初始化') : (formData.username || t('未设置'))}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item itemKey={t('使用模式')}>
|
||||
{formData.usageMode === 'external' ? t('对外运营模式') :
|
||||
formData.usageMode === 'self' ? t('自用模式') : t('演示站点模式')}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
{renderNavigationButtons && renderNavigationButtons()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompleteStep;
|
||||
102
web/src/components/setup/components/steps/DatabaseStep.jsx
Normal file
102
web/src/components/setup/components/steps/DatabaseStep.jsx
Normal file
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Banner } from '@douyinfe/semi-ui';
|
||||
|
||||
/**
|
||||
* 数据库检查步骤组件
|
||||
* 显示当前数据库类型和相关警告信息
|
||||
*/
|
||||
const DatabaseStep = ({ setupStatus, renderNavigationButtons, t }) => {
|
||||
return (
|
||||
<>
|
||||
{/* 数据库警告 */}
|
||||
{setupStatus.database_type === 'sqlite' && (
|
||||
<Banner
|
||||
type='warning'
|
||||
closeIcon={null}
|
||||
title={t('数据库警告')}
|
||||
description={
|
||||
<div>
|
||||
<p>
|
||||
{t(
|
||||
'您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！',
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1">
|
||||
<strong>{t(
|
||||
'建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。',
|
||||
)}</strong>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
className="!rounded-lg"
|
||||
fullMode={false}
|
||||
bordered
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* MySQL数据库提示 */}
|
||||
{setupStatus.database_type === 'mysql' && (
|
||||
<Banner
|
||||
type='success'
|
||||
closeIcon={null}
|
||||
title={t('数据库信息')}
|
||||
description={
|
||||
<div>
|
||||
<p>
|
||||
{t(
|
||||
'您正在使用 MySQL 数据库。MySQL 是一个可靠的关系型数据库管理系统，适合生产环境使用。',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
className="!rounded-lg"
|
||||
fullMode={false}
|
||||
bordered
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* PostgreSQL数据库提示 */}
|
||||
{setupStatus.database_type === 'postgres' && (
|
||||
<Banner
|
||||
type='success'
|
||||
closeIcon={null}
|
||||
title={t('数据库信息')}
|
||||
description={
|
||||
<div>
|
||||
<p>
|
||||
{t(
|
||||
'您正在使用 PostgreSQL 数据库。PostgreSQL 是一个功能强大的开源关系型数据库系统，提供了出色的可靠性和数据完整性，适合生产环境使用。',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
className="!rounded-lg"
|
||||
fullMode={false}
|
||||
bordered
|
||||
/>
|
||||
)}
|
||||
{renderNavigationButtons && renderNavigationButtons()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseStep;
|
||||
71
web/src/components/setup/components/steps/UsageModeStep.jsx
Normal file
71
web/src/components/setup/components/steps/UsageModeStep.jsx
Normal file
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { RadioGroup, Radio } from '@douyinfe/semi-ui';
|
||||
|
||||
/**
|
||||
* 使用模式选择步骤组件
|
||||
* 提供系统使用模式的选择界面
|
||||
*/
|
||||
const UsageModeStep = ({
|
||||
formData,
|
||||
handleUsageModeChange,
|
||||
renderNavigationButtons,
|
||||
t
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<RadioGroup
|
||||
value={formData.usageMode}
|
||||
onChange={handleUsageModeChange}
|
||||
type='card'
|
||||
direction='horizontal'
|
||||
className="mt-4"
|
||||
aria-label="使用模式选择"
|
||||
name="usage-mode-selection"
|
||||
>
|
||||
<Radio
|
||||
value='external'
|
||||
extra={t('适用于为多个用户提供服务的场景')}
|
||||
style={{ width: '30%', minWidth: 200 }}
|
||||
>
|
||||
{t('对外运营模式')}
|
||||
</Radio>
|
||||
<Radio
|
||||
value='self'
|
||||
extra={t('适用于个人使用的场景，不需要设置模型价格')}
|
||||
style={{ width: '30%', minWidth: 200 }}
|
||||
>
|
||||
{t('自用模式')}
|
||||
</Radio>
|
||||
<Radio
|
||||
value='demo'
|
||||
extra={t('适用于展示系统功能的场景，提供基础功能演示')}
|
||||
style={{ width: '30%', minWidth: 200 }}
|
||||
>
|
||||
{t('演示站点模式')}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
{renderNavigationButtons && renderNavigationButtons()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsageModeStep;
|
||||
29
web/src/components/setup/index.jsx
Normal file
29
web/src/components/setup/index.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
// 主要组件导出
|
||||
export { default as SetupWizard } from './SetupWizard';
|
||||
|
||||
export { default as StepNavigation } from './components/StepNavigation';
|
||||
|
||||
// 步骤组件导出
|
||||
export { default as DatabaseStep } from './components/steps/DatabaseStep';
|
||||
export { default as AdminStep } from './components/steps/AdminStep';
|
||||
export { default as UsageModeStep } from './components/steps/UsageModeStep';
|
||||
export { default as CompleteStep } from './components/steps/CompleteStep';
|
||||
@@ -54,7 +54,7 @@ const InvitationCard = ({
|
||||
{/* 收益展示区域 */}
|
||||
<div className='space-y-4'>
|
||||
{/* 主要收益卡片 - 待使用收益 */}
|
||||
<Card className='!rounded-xl with-pastel-balls'>
|
||||
<Card className='!rounded-xl'>
|
||||
<div className='flex justify-between items-center mb-3'>
|
||||
<div className="flex items-center">
|
||||
<TrendingUp size={16} className="mr-2 text-slate-600 dark:text-slate-300" />
|
||||
|
||||
Reference in New Issue
Block a user