You've already forked DataMate
refactor(KnowledgeItemEditor): 重构知识项编辑器组件结构
- 提取创建模式判断逻辑为独立变量 isCreateMode - 使用条件渲染替代原有的 data?.id 判断 - 将表单字段按照创建和编辑模式进行分组重构 - 优化文件上传和替换功能的显示逻辑 - 改进代码可读性和维护性
This commit is contained in:
@@ -51,7 +51,8 @@ export default function KnowledgeItemEditor({
|
||||
const isFileItem =
|
||||
data?.contentType === KnowledgeContentType.FILE ||
|
||||
data?.sourceType === KnowledgeSourceType.FILE_UPLOAD;
|
||||
const contentTypeLabel = !data?.id
|
||||
const isCreateMode = !data?.id;
|
||||
const contentTypeLabel = isCreateMode
|
||||
? "文件"
|
||||
: data?.contentType === KnowledgeContentType.MARKDOWN
|
||||
? "Markdown"
|
||||
@@ -294,22 +295,7 @@ export default function KnowledgeItemEditor({
|
||||
okButtonProps={{ disabled: readOnly }}
|
||||
>
|
||||
<Form form={form} layout="vertical" disabled={readOnly}>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item
|
||||
label="标题"
|
||||
name="title"
|
||||
rules={[{ required: !isMultiFile, message: "请输入标题" }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={isMultiFile ? "多文件将按文件名自动生成" : "请输入标题"}
|
||||
disabled={readOnly || (!data?.id && isMultiFile)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select options={knowledgeStatusOptions} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
{!data?.id && (
|
||||
{isCreateMode && (
|
||||
<Form.Item label="上传文件" required>
|
||||
<Upload
|
||||
beforeUpload={handleFileBeforeUpload}
|
||||
@@ -326,76 +312,95 @@ export default function KnowledgeItemEditor({
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
{data?.id && isFileItem && (
|
||||
<Form.Item label="文件">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate" title={data.sourceFileId || data.title}>
|
||||
{data.sourceFileId || data.title || "-"}
|
||||
</span>
|
||||
<Button size="small" onClick={handleDownloadFile} disabled={readOnly}>
|
||||
下载
|
||||
</Button>
|
||||
{!isCreateMode && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item
|
||||
label="标题"
|
||||
name="title"
|
||||
rules={[{ required: !isMultiFile, message: "请输入标题" }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={isMultiFile ? "多文件将按文件名自动生成" : "请输入标题"}
|
||||
disabled={readOnly || (!data?.id && isMultiFile)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select options={knowledgeStatusOptions} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
{data?.id && isFileItem && !readOnly && (
|
||||
<Form.Item label="替换文件">
|
||||
<Upload
|
||||
beforeUpload={handleReplaceFileBeforeUpload}
|
||||
fileList={replaceFileList}
|
||||
onRemove={handleReplaceFileRemove}
|
||||
showUploadList={{ showPreviewIcon: false }}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>选择文件</Button>
|
||||
</Upload>
|
||||
<div className="text-xs text-gray-500 mt-1">仅支持单文件，替换后标题自动更新</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="内容类型">
|
||||
<Input value={contentTypeLabel} disabled />
|
||||
</Form.Item>
|
||||
<Form.Item label="敏感级别" name="sensitivity">
|
||||
<Input placeholder="请输入敏感级别" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="领域" name="domain">
|
||||
<Input placeholder="请输入领域" />
|
||||
</Form.Item>
|
||||
<Form.Item label="业务线" name="businessLine">
|
||||
<Input placeholder="请输入业务线" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="负责人" name="owner">
|
||||
<Input placeholder="请输入负责人" />
|
||||
</Form.Item>
|
||||
<Form.Item label="标签" name="tags">
|
||||
<Select
|
||||
mode="tags"
|
||||
options={tagOptions}
|
||||
placeholder="请选择或输入标签"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="有效期开始" name="validFrom">
|
||||
<DatePicker className="w-full" />
|
||||
</Form.Item>
|
||||
<Form.Item label="有效期结束" name="validTo">
|
||||
<DatePicker className="w-full" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item label="扩展元数据" name="metadata">
|
||||
<Input.TextArea placeholder="请输入元数据（JSON）" rows={3} />
|
||||
</Form.Item>
|
||||
{data?.sourceType && (
|
||||
<div className="grid grid-cols-2 gap-4 text-sm text-gray-500">
|
||||
<div>来源类型：{data.sourceType}</div>
|
||||
<div>来源文件：{data.sourceFileId || "-"}</div>
|
||||
</div>
|
||||
{data?.id && isFileItem && (
|
||||
<Form.Item label="文件">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate" title={data.sourceFileId || data.title}>
|
||||
{data.sourceFileId || data.title || "-"}
|
||||
</span>
|
||||
<Button size="small" onClick={handleDownloadFile} disabled={readOnly}>
|
||||
下载
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
{data?.id && isFileItem && !readOnly && (
|
||||
<Form.Item label="替换文件">
|
||||
<Upload
|
||||
beforeUpload={handleReplaceFileBeforeUpload}
|
||||
fileList={replaceFileList}
|
||||
onRemove={handleReplaceFileRemove}
|
||||
showUploadList={{ showPreviewIcon: false }}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>选择文件</Button>
|
||||
</Upload>
|
||||
<div className="text-xs text-gray-500 mt-1">仅支持单文件，替换后标题自动更新</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="内容类型">
|
||||
<Input value={contentTypeLabel} disabled />
|
||||
</Form.Item>
|
||||
<Form.Item label="敏感级别" name="sensitivity">
|
||||
<Input placeholder="请输入敏感级别" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="领域" name="domain">
|
||||
<Input placeholder="请输入领域" />
|
||||
</Form.Item>
|
||||
<Form.Item label="业务线" name="businessLine">
|
||||
<Input placeholder="请输入业务线" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="负责人" name="owner">
|
||||
<Input placeholder="请输入负责人" />
|
||||
</Form.Item>
|
||||
<Form.Item label="标签" name="tags">
|
||||
<Select
|
||||
mode="tags"
|
||||
options={tagOptions}
|
||||
placeholder="请选择或输入标签"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Form.Item label="有效期开始" name="validFrom">
|
||||
<DatePicker className="w-full" />
|
||||
</Form.Item>
|
||||
<Form.Item label="有效期结束" name="validTo">
|
||||
<DatePicker className="w-full" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item label="扩展元数据" name="metadata">
|
||||
<Input.TextArea placeholder="请输入元数据（JSON）" rows={3} />
|
||||
</Form.Item>
|
||||
{data?.sourceType && (
|
||||
<div className="grid grid-cols-2 gap-4 text-sm text-gray-500">
|
||||
<div>来源类型：{data.sourceType}</div>
|
||||
<div>来源文件：{data.sourceFileId || "-"}</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user