q792602257/DataMate
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(KnowledgeItemEditor): 重构知识项编辑器组件结构

Browse Source 
- 提取创建模式判断逻辑为独立变量 isCreateMode
- 使用条件渲染替代原有的 data?.id 判断
- 将表单字段按照创建和编辑模式进行分组重构
- 优化文件上传和替换功能的显示逻辑
- 改进代码可读性和维护性
This commit is contained in:
Jerry Yan
2026-01-29 14:37:05 +08:00
parent f77fd99c31
commit 0dba604cd3
1 changed files with 91 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
View File

@@ -51,7 +51,8 @@ export default function KnowledgeItemEditor({
const isFileItem = const isFileItem =
data?.contentType === KnowledgeContentType.FILE || data?.contentType === KnowledgeContentType.FILE ||
data?.sourceType === KnowledgeSourceType.FILE_UPLOAD; data?.sourceType === KnowledgeSourceType.FILE_UPLOAD;
const contentTypeLabel = !data?.id const isCreateMode = !data?.id;
const contentTypeLabel = isCreateMode
? "文件" ? "文件"
: data?.contentType === KnowledgeContentType.MARKDOWN : data?.contentType === KnowledgeContentType.MARKDOWN
? "Markdown" ? "Markdown"
@@ -294,22 +295,7 @@ export default function KnowledgeItemEditor({
okButtonProps={{ disabled: readOnly }} okButtonProps={{ disabled: readOnly }}
> >
<Form form={form} layout="vertical" disabled={readOnly}> <Form form={form} layout="vertical" disabled={readOnly}>
<div className="grid grid-cols-2 gap-4"> {isCreateMode && (
<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 && (
<Form.Item label="上传文件" required> <Form.Item label="上传文件" required>
<Upload <Upload
beforeUpload={handleFileBeforeUpload} beforeUpload={handleFileBeforeUpload}
@@ -326,76 +312,95 @@ export default function KnowledgeItemEditor({
</div> </div>
</Form.Item> </Form.Item>
)} )}
{data?.id && isFileItem && ( {!isCreateMode && (
<Form.Item label="文件"> <>
<div className="flex items-center gap-2"> <div className="grid grid-cols-2 gap-4">
<span className="truncate" title={data.sourceFileId || data.title}> <Form.Item
{data.sourceFileId || data.title || "-"} label="标题"
</span> name="title"
<Button size="small" onClick={handleDownloadFile} disabled={readOnly}> rules={[{ required: !isMultiFile, message: "请输入标题" }]}
下载 >
</Button> <Input
placeholder={isMultiFile ? "多文件将按文件名自动生成" : "请输入标题"}
disabled={readOnly || (!data?.id && isMultiFile)}
/>
</Form.Item>
<Form.Item label="状态" name="status">
<Select options={knowledgeStatusOptions} />
</Form.Item>
</div> </div>
</Form.Item> {data?.id && isFileItem && (
)} <Form.Item label="文件">
{data?.id && isFileItem && !readOnly && ( <div className="flex items-center gap-2">
<Form.Item label="替换文件"> <span className="truncate" title={data.sourceFileId || data.title}>
<Upload {data.sourceFileId || data.title || "-"}
beforeUpload={handleReplaceFileBeforeUpload} </span>
fileList={replaceFileList} <Button size="small" onClick={handleDownloadFile} disabled={readOnly}>
onRemove={handleReplaceFileRemove} 下载
showUploadList={{ showPreviewIcon: false }} </Button>
maxCount={1} </div>
> </Form.Item>
<Button icon={<UploadOutlined />}>选择文件</Button> )}
</Upload> {data?.id && isFileItem && !readOnly && (
<div className="text-xs text-gray-500 mt-1">仅支持单文件，替换后标题自动更新</div> <Form.Item label="替换文件">
</Form.Item> <Upload
)} beforeUpload={handleReplaceFileBeforeUpload}
<div className="grid grid-cols-2 gap-4"> fileList={replaceFileList}
<Form.Item label="内容类型"> onRemove={handleReplaceFileRemove}
<Input value={contentTypeLabel} disabled /> showUploadList={{ showPreviewIcon: false }}
</Form.Item> maxCount={1}
<Form.Item label="敏感级别" name="sensitivity"> >
<Input placeholder="请输入敏感级别" /> <Button icon={<UploadOutlined />}>选择文件</Button>
</Form.Item> </Upload>
</div> <div className="text-xs text-gray-500 mt-1">仅支持单文件，替换后标题自动更新</div>
<div className="grid grid-cols-2 gap-4"> </Form.Item>
<Form.Item label="领域" name="domain"> )}
<Input placeholder="请输入领域" /> <div className="grid grid-cols-2 gap-4">
</Form.Item> <Form.Item label="内容类型">
<Form.Item label="业务线" name="businessLine"> <Input value={contentTypeLabel} disabled />
<Input placeholder="请输入业务线" /> </Form.Item>
</Form.Item> <Form.Item label="敏感级别" name="sensitivity">
</div> <Input placeholder="请输入敏感级别" />
<div className="grid grid-cols-2 gap-4"> </Form.Item>
<Form.Item label="负责人" name="owner"> </div>
<Input placeholder="请输入负责人" /> <div className="grid grid-cols-2 gap-4">
</Form.Item> <Form.Item label="领域" name="domain">
<Form.Item label="标签" name="tags"> <Input placeholder="请输入领域" />
<Select </Form.Item>
mode="tags" <Form.Item label="业务线" name="businessLine">
options={tagOptions} <Input placeholder="请输入业务线" />
placeholder="请选择或输入标签" </Form.Item>
/> </div>
</Form.Item> <div className="grid grid-cols-2 gap-4">
</div> <Form.Item label="负责人" name="owner">
<div className="grid grid-cols-2 gap-4"> <Input placeholder="请输入负责人" />
<Form.Item label="有效期开始" name="validFrom"> </Form.Item>
<DatePicker className="w-full" /> <Form.Item label="标签" name="tags">
</Form.Item> <Select
<Form.Item label="有效期结束" name="validTo"> mode="tags"
<DatePicker className="w-full" /> options={tagOptions}
</Form.Item> placeholder="请选择或输入标签"
</div> />
<Form.Item label="扩展元数据" name="metadata"> </Form.Item>
<Input.TextArea placeholder="请输入元数据（JSON）" rows={3} /> </div>
</Form.Item> <div className="grid grid-cols-2 gap-4">
{data?.sourceType && ( <Form.Item label="有效期开始" name="validFrom">
<div className="grid grid-cols-2 gap-4 text-sm text-gray-500"> <DatePicker className="w-full" />
<div>来源类型：{data.sourceType}</div> </Form.Item>
<div>来源文件：{data.sourceFileId || "-"}</div> <Form.Item label="有效期结束" name="validTo">
</div> <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> </Form>
</Modal> </Modal>