You've already forked DataMate
fix ui bugs (#51)
* fix: adjust upload step handling and improve error display in configuration step
This commit is contained in:
@@ -47,7 +47,6 @@ export default function OperatorPluginCreate() {
|
|||||||
const handleFileUpload = async (files: FileList) => {
|
const handleFileUpload = async (files: FileList) => {
|
||||||
setIsUploading(true);
|
setIsUploading(true);
|
||||||
setParseError(null);
|
setParseError(null);
|
||||||
setUploadStep("parsing");
|
|
||||||
try {
|
try {
|
||||||
const fileName = files[0].name;
|
const fileName = files[0].name;
|
||||||
await handleUpload({
|
await handleUpload({
|
||||||
@@ -67,6 +66,7 @@ export default function OperatorPluginCreate() {
|
|||||||
// 解析文件过程
|
// 解析文件过程
|
||||||
const res = await uploadOperatorUsingPost({ fileName });
|
const res = await uploadOperatorUsingPost({ fileName });
|
||||||
setParsedInfo({ ...parsedInfo, ...res.data, fileName });
|
setParsedInfo({ ...parsedInfo, ...res.data, fileName });
|
||||||
|
setUploadStep("parsing");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setParseError("文件解析失败," + err.data.message);
|
setParseError("文件解析失败," + err.data.message);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -92,6 +92,7 @@ export default function OperatorPluginCreate() {
|
|||||||
// 编辑模式,加载已有算子信息逻辑待实现
|
// 编辑模式,加载已有算子信息逻辑待实现
|
||||||
const { data } = await queryOperatorByIdUsingGet(operatorId);
|
const { data } = await queryOperatorByIdUsingGet(operatorId);
|
||||||
setParsedInfo(data);
|
setParsedInfo(data);
|
||||||
|
setUploadStep("configure");
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -8,26 +8,28 @@ export default function ConfigureStep({
|
|||||||
setParsedInfo,
|
setParsedInfo,
|
||||||
}) {
|
}) {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
form.setFieldsValue(parsedInfo);
|
form.setFieldsValue(parsedInfo);
|
||||||
}, [parsedInfo]);
|
}, [parsedInfo]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* 解析结果 */}
|
{/* 解析结果 */}
|
||||||
{parseError && (
|
{parseError && (
|
||||||
<Alert
|
<div className="mb-4">
|
||||||
message="解析过程中发现问题"
|
<Alert
|
||||||
description={parseError}
|
message="解析过程中发现问题"
|
||||||
type="error"
|
description={parseError}
|
||||||
showIcon
|
type="error"
|
||||||
/>
|
showIcon
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{parsedInfo && (
|
{!parseError && parsedInfo && (
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
initialValues={parsedInfo}
|
initialValues={parsedInfo}
|
||||||
onValuesChange={(_, allValues) => {
|
onValuesChange={(_, allValues) => {
|
||||||
@@ -76,7 +78,7 @@ export default function ConfigureStep({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mt-8">高级配置</h3>
|
{/* <h3 className="text-lg font-semibold text-gray-900 mt-8">高级配置</h3> */}
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -97,8 +97,8 @@ export function ListView({ operators = [], pagination, operations }) {
|
|||||||
>
|
>
|
||||||
<List.Item.Meta
|
<List.Item.Meta
|
||||||
avatar={
|
avatar={
|
||||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
|
<div className="w-12 h-12 bg-gradient-to-br from-sky-300 to-blue-500 rounded-lg flex items-center justify-center">
|
||||||
{operator?.icon}
|
<div className="w-8 h-8 text-white">{operator?.icon}</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
title={
|
title={
|
||||||
|
|||||||
Reference in New Issue
Block a user