From 0dba604cd385b42a8180e8d9c9c7b6477f12e162 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Thu, 29 Jan 2026 14:37:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(KnowledgeItemEditor):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E7=9F=A5=E8=AF=86=E9=A1=B9=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 提取创建模式判断逻辑为独立变量 isCreateMode
- 使用条件渲染替代原有的 data?.id 判断
- 将表单字段按照创建和编辑模式进行分组重构
- 优化文件上传和替换功能的显示逻辑
- 改进代码可读性和维护性
---
 .../components/KnowledgeItemEditor.tsx        | 177 +++++++++---------
 1 file changed, 91 insertions(+), 86 deletions(-)

diff --git a/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx b/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
index e4d4c1d..77a89ba 100644
--- a/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
+++ b/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
@@ -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>