From bec821f76bb2a43fb89e6993ac7bd1425d922fbb Mon Sep 17 00:00:00 2001
From: "du.meimei" <du.meimei@ebiz-digits.com>
Date: Thu, 10 Apr 2025 18:51:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=9F=A5=E8=AF=86=E5=BA=93=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/components/CustomSplitDialog.vue   | 142 ++++++++++++++++++
 .../detail/components/SplitConfig.vue         |  94 ++++++++++++
 .../detail/components/knowledgeForm.vue       |  26 ++--
 .../detail/components/preprocessing.vue       |  85 ++++++++++-
 .../detail/components/split/AddRule.vue       |  89 +++++++++++
 src/views/knowledge/detail/create.vue         |   4 +
 6 files changed, 425 insertions(+), 15 deletions(-)
 create mode 100644 src/views/knowledge/detail/components/CustomSplitDialog.vue
 create mode 100644 src/views/knowledge/detail/components/SplitConfig.vue
 create mode 100644 src/views/knowledge/detail/components/split/AddRule.vue

diff --git a/src/views/knowledge/detail/components/CustomSplitDialog.vue b/src/views/knowledge/detail/components/CustomSplitDialog.vue
new file mode 100644
index 0000000..2b47364
--- /dev/null
+++ b/src/views/knowledge/detail/components/CustomSplitDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-dialog title="自定义拆分" :visible.sync="visible" width="80%">
+    <el-form :model="form" label-width="100px">
+      <!-- 表单内容 -->
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="知识名称">
+            <el-input v-model="form.field1" size="medium" placeholder="知识名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
+        </el-col>
+      </el-row>
+      <!-- 其他表单项 -->
+    </el-form>
+    <r-table :columns="columns" :data="list" :deletion="false"></r-table>
+    <!--    <el-table :data="tableData" style="width: 100%">-->
+    <!--      <el-table-column label="操作">-->
+    <!--        <template slot-scope="scope">-->
+    <!--          <el-button size="mini" @click="handlePreview(scope.row)">预览</el-button>-->
+    <!--          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>-->
+    <!--        </template>-->
+    <!--      </el-table-column>-->
+    <!--    </el-table>-->
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">取 消</el-button>
+      <el-button type="primary" @click="closeDialog">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'CustomSplitDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    form: {
+      type: Object,
+      required: true
+    },
+    tableData: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      list: [{}]
+    }
+  },
+  methods: {
+    handlePreview(row) {
+      // 预览逻辑
+      console.log('Preview', row)
+    },
+    handleEdit(row) {
+      // 修改逻辑
+      console.log('Edit', row)
+    },
+    closeDialog() {
+      this.$emit('update:visible', false)
+    },
+    addRule(){
+
+    }
+  },
+  computed: {
+    columns() {
+      return [
+        {
+          type: 'selection',
+          prop: 'knowledgeName',
+          width: '200px',
+          align: 'center',
+          render: (h, params) => {
+            return h('div', [h('span', params.row.knowledgeName)])
+          }
+        },
+        {
+          key: '知识拆分规则名称',
+          prop: 'knowledgeName',
+          width: '200px',
+          align: 'center',
+          render: (h, params) => {
+            return h('div', [h('span', params.row.knowledgeName)])
+          }
+        },
+        {
+          key: '规则内容',
+          prop: 'knowledgeName',
+          width: '200px',
+          align: 'center'
+        },
+        {
+          key: '备注',
+          prop: 'knowledgeDesc'
+        },
+        {
+          key: '操作',
+          prop: 'knowledgeDesc',
+          width: '200px',
+          render: (h, params) => {
+            return h('span', {}, [
+              h(
+                'el-button',
+                {
+                  class: 'floatSpan',
+                  props: {
+                    type: 'primary',
+                    size: 'medium'
+                  }
+                },
+                '修改'
+              ),
+              h(
+                'el-button',
+                {
+                  class: 'floatSpan',
+                  props: {
+                    type: 'primary',
+                    size: 'medium'
+                  }
+                },
+                '预览'
+              )
+            ])
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// 样式可以根据需要调整
+</style>
diff --git a/src/views/knowledge/detail/components/SplitConfig.vue b/src/views/knowledge/detail/components/SplitConfig.vue
new file mode 100644
index 0000000..5a0869d
--- /dev/null
+++ b/src/views/knowledge/detail/components/SplitConfig.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="splitConfig mt20">
+    文件拆分规则
+    <ul>
+      <!-- 自动拆分 -->
+      <li class="flex">
+        <div>
+          <i class="el-icon-setting" size="50"></i>
+        </div>
+        <div>
+          <h3>自动拆分</h3>
+          使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。<br>
+          提示：首次使用时建议先用自动拆分测试效果，再决定是否调整。
+        </div>
+      </li>
+
+      <!-- 自定义拆分 -->
+      <li class="flex" @click="designSplit">
+        <div>
+          <i class="el-icon-medal" size="50"></i>
+        </div>
+        <div>
+          <h3>自定义拆分</h3>
+          使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。
+        </div>
+      </li>
+    </ul>
+    <!-- 弹窗组件 -->
+    <custom-split-dialog :visible.sync="dialogVisible" :form="form" :table-data="tableData"></custom-split-dialog>
+  </div>
+</template>
+<script>
+import CustomSplitDialog from './CustomSplitDialog.vue';
+
+export default {
+  name: 'splitConfig',
+  components: {
+    CustomSplitDialog
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        // 表单数据
+      },
+      tableData: [
+        // 表格数据示例
+        { id: 1, name: 'Item 1', selected: false },
+        { id: 2, name: 'Item 2', selected: false },
+        { id: 3, name: 'Item 3', selected: false }
+      ]
+    }
+  },
+  props: {},
+  watch: {},
+  filters: {},
+  methods: {
+    designSplit() {
+      this.dialogVisible = true;
+    }
+  },
+  created() {},
+  mounted() {},
+  computed: {}
+}
+</script>
+<style scoped lang='scss'>
+.splitConfig {
+  ul {
+    list-style-type: none;
+    padding: 0;
+
+    li {
+      margin-bottom: 20px;
+      border: 1px solid #d9d9d9;
+      padding: 15px;
+      border-radius: 6px;
+      list-style-type: none;
+
+      h3 {
+        margin-bottom: 15px;
+        font-size: 18px;
+        color: #333;
+      }
+
+      p {
+        margin: 10px 0;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/knowledge/detail/components/knowledgeForm.vue b/src/views/knowledge/detail/components/knowledgeForm.vue
index 61c192b..53b20f3 100644
--- a/src/views/knowledge/detail/components/knowledgeForm.vue
+++ b/src/views/knowledge/detail/components/knowledgeForm.vue
@@ -26,7 +26,7 @@
 
         <el-col :span='24' class='text-center'>
           <el-button type='primary' size='medium' @click='save'>创建</el-button>
-          <el-button size='medium'>取消 </el-button>
+          <el-button size='medium' @click='$router.go(-1)'>取消 </el-button>
         </el-col>
 
 
@@ -67,27 +67,27 @@ export default {
   filters: {},
   methods: {
     save(){
-
-// 配置进度条参数
-//       NProgress.configure({
-//         showSpinner: false,  // 隐藏转圈圈
-//       })
+      // 配置进度条参数
+      // NProgress.configure({
+      //   showSpinner: false,  // 隐藏转圈圈
+      // })
 
       // setTimeout(()=>{
       //
       //   NProgress.done();
       // },5000)
 
-      let loadingDom = document.getElementById('knowledgeFormDrawer').querySelector('.el-drawer')
+      // let loadingDom = document.getElementById('knowledgeFormDrawer').querySelector('.el-drawer')
 
+      // console.log(loadingDom)
+      // let loading = renderLoading.service({
+      //   target:loadingDom,
+      // })
 
-      console.log(loadingDom)
-      let loading = renderLoading.service({
-        target:loadingDom,
-      })
-
-      loading.close()
+      // loading.close()
 
+      // 添加保存成功的提示
+      this.$message.success('保存成功');
     },
   },
   created() {
diff --git a/src/views/knowledge/detail/components/preprocessing.vue b/src/views/knowledge/detail/components/preprocessing.vue
index b5d30e8..9c90074 100644
--- a/src/views/knowledge/detail/components/preprocessing.vue
+++ b/src/views/knowledge/detail/components/preprocessing.vue
@@ -13,7 +13,9 @@
       </el-form-item>
       <!-- 文件上传-->
       <el-form-item label='' required prop='file'>
-        <el-upload drag :action='actionUrl' :headers='headers' class='upload-demo'>
+        <el-upload drag :action='actionUrl' :headers='headers'
+                   class='upload-demo' :on-success="handleUploadSuccess"
+                   :before-upload="handleBeforeUpload">
          <el-empty>
            <template #description>
              <p>点击或将文件拖拽到这里上传</p>
@@ -40,6 +42,32 @@
         </el-form-item>
       </div>
     </el-form>
+
+    <!-- 添加预处理结果预览对话框 -->
+    <el-dialog
+      title="预处理结果预览"
+      :visible.sync="previewDialogVisible"
+      width="80%"
+      :before-close="handleClose">
+      <div class="preview-container">
+        <div class="preview-left">
+          <div class="preview-title">原文件</div>
+          <div class="preview-content">
+            <!-- 原文件内容区域 -->
+          </div>
+        </div>
+        <div class="preview-right">
+          <div class="preview-title">Markdown</div>
+          <div class="preview-content">
+            <!-- Markdown内容区域 -->
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" type="primary" @click="previewDialogVisible = false">保存并处理</el-button>
+        <el-button size="medium" @click="previewDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -54,7 +82,8 @@ export default {
         fileList:[],
         preprocessing:'1',
         ocr:'1',
-      }
+      },
+      previewDialogVisible: false // 添加对话框显示控制变量
     }
   },
   props: {},
@@ -84,7 +113,26 @@ export default {
     emitForm() {
       this.$emit('getForm', this.$refs.processForm,this.form)
     },
+    handleUploadSuccess(response, file, fileList) {
+      // 显示预处理结果预览对话框
+      this.previewDialogVisible = true;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleBeforeUpload(file) {
+      // 这里可以添加文件上传前的处理逻辑
+      console.log('开始上传文件:', file);
+      this.previewDialogVisible = true;
+      // 可以在这里进行文件类型、大小等验证
 
+      // 返回 true 继续上传，返回 false 停止上传
+      return true;
+    }
   },
   created() {
   },
@@ -121,4 +169,37 @@ export default {
 }
 #preprocessing-container {
 }
+
+.preview-container {
+  display: flex;
+  height: 500px;
+  border: 1px solid #dcdfe6;
+
+  .preview-left, .preview-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #dcdfe6;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .preview-title {
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #dcdfe6;
+    font-weight: bold;
+  }
+
+  .preview-content {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+  }
+}
+.dialog-footer{
+  text-align: center;
+}
 </style>
diff --git a/src/views/knowledge/detail/components/split/AddRule.vue b/src/views/knowledge/detail/components/split/AddRule.vue
new file mode 100644
index 0000000..ca308d5
--- /dev/null
+++ b/src/views/knowledge/detail/components/split/AddRule.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <!-- 添加预处理结果预览对话框 -->
+    <el-dialog
+      title="添加知识拆分规则"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :before-close="handleClose">
+      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="规则名称：" prop="ruleName">
+          <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
+          <el-button type="primary" size="mini" @click="queryExistingRules">查询并导入现有规则</el-button>
+        </el-form-item>
+        <el-form-item label="样式：" prop="style">
+          <el-input v-model="form.ruleName" placeholder="请输入标题级别"></el-input>
+        </el-form-item>
+        <el-form-item label="提示词：" prop="promptWord">
+          <el-input type="textarea" v-model="form.promptWord" placeholder="请输入规则表达式"></el-input>
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input type="textarea" v-model="form.remark" placeholder="请输入规则备注"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addSplitRule">+ 新增拆分规则</el-button>
+        <el-button @click="deleteSplitRule">- 删除拆分规则</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddRule',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        ruleName: '',
+        style: '',
+        promptWord: '',
+        remark: ''
+      },
+      rules: {
+        ruleName: [
+          { required: true, message: '请输入规则名称', trigger: 'blur' }
+        ],
+        style: [
+          { required: true, message: '请选择样式', trigger: 'change' }
+        ],
+        promptWord: [
+          { required: true, message: '请输入提示词', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    queryExistingRules() {
+      // 查询并导入现有规则的逻辑
+    },
+    addSplitRule() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          // 新增拆分规则的逻辑
+        } else {
+          console.log('表单验证失败');
+          return false;
+        }
+      });
+    },
+    deleteSplitRule() {
+      // 删除拆分规则的逻辑
+      console.log('删除拆分规则');
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+
+</style>
diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue
index 1fdf576..d2126b3 100644
--- a/src/views/knowledge/detail/create.vue
+++ b/src/views/knowledge/detail/create.vue
@@ -14,6 +14,7 @@
 
         <div class='components'>
           <step-preprocessing v-if='active===0' @getForm='getForm'></step-preprocessing>
+          <split-config v-if='active===1'></split-config>
         </div>
 
       </div>
@@ -30,6 +31,8 @@
 </template>
 <script>
 import StepPreprocessing from './components/preprocessing.vue'
+import SplitConfig from "@/views/knowledge/detail/components/SplitConfig.vue";
+// import StepC
 export default {
   name: 'create',
   data() {
@@ -40,6 +43,7 @@ export default {
   props: {},
   watch: {},
   components: {
+    SplitConfig,
     StepPreprocessing
   },
   filters: {},