feat(knowledge): 新增知识拆分规则功能

- 添加了自动拆分和自定义拆分两种方式
- 实现了拆分规则的添加、编辑和删除- 增加了拆分结果预览功能
- 优化了用户界面和交互设计

src/views/knowledge/detail/components/split/AddRule.vue

@@ -2,125 +2,280 @@
   <div>
     <!-- 添加预处理结果预览对话框 -->
     <el-drawer
-      title="添加知识拆分规则"
+      :title="currentId ? '编辑知识拆分规则' : '新增知识拆分规则'"
       :visible.sync="dialogVisible"
-      size="50%">
+      size="40%"
+      :before-close="handleClose">
       <div class="content">
-        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="规则名称" prop="ruleName">
-                <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="form.ruleName" placeholder="查询并导入现有规则"></el-select>
-            </el-col>
-          </el-row>
-          <p class="tips">支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</p>
-          <div v-for="(rule, index) in form.rules" :key="index">
-            <el-form-item label="样式" :prop="'rules.' + index + '.style'">
-              <el-input v-model="rule.style" placeholder="请输入样式"></el-input>
+        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+          <div class="form-section">
+            <div class="section-title">基本信息</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="规则名称" prop="ruleName">
+                  <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-select v-model="form.ruleName" placeholder="查询并导入现有规则" class="w100">
+                  <el-option label="选项1" value="1"></el-option>
+                  <el-option label="选项2" value="2"></el-option>
+                </el-select>
+              </el-col>
+            </el-row>
+            <p class="tips">支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</p>
+          </div>
+
+          <div class="form-section" v-for="(rule, index) in form.ruleList" :key="index">
+            <div class="section-title">
+              拆分规则 {{index + 1}}
+              <el-button
+                v-if="form.ruleList.length > 1"
+                type="text"
+                class="delete-btn"
+                @click="removeRule(index)">
+                <i class="el-icon-delete"></i> 删除
+              </el-button>
+            </div>
+            <el-form-item label="样式" :prop="'ruleList.' + index + '.titleLevel'">
+              <el-select v-model="rule.titleLevel" placeholder="请选择标题级别" >
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
             </el-form-item>
-            <el-form-item label="提示词" :prop="'rules.' + index + '.promptWord'">
-              <el-input type="textarea" v-model="rule.promptWord" placeholder="请输入提示词"></el-input>
+            <el-form-item label="关键词" :prop="'ruleList.' + index + '.ruleRegex'">
+              <el-input type="textarea" v-model="rule.ruleRegex" placeholder="请输入规则表达式"></el-input>
             </el-form-item>
-            <el-form-item label="备注" :prop="'rules.' + index + '.remark'">
-              <el-input type="textarea" v-model="rule.remark" placeholder="请输入规则备注"></el-input>
+            <el-form-item label="备注" :prop="'ruleList.' + index + '.description'">
+              <el-input type="textarea" v-model="rule.description" placeholder="请输入规则备注"></el-input>
             </el-form-item>
             <div class="text-right mb20">
-              <el-button type="primary" size="medium" @click="copyRule">复制拆分规则</el-button>
-              <el-button type="primary" size="medium" @click="addSplitRule">+ 新增拆分规则</el-button>
-              <el-button v-if="form.rules.length > 1" type="danger" size="small" @click="removeRule(index)">删除规则</el-button>
+              <el-button type="primary" size="medium" @click="copyRule(index)">复制拆分规则</el-button>
             </div>
           </div>
+
+          <div class="add-rule-btn">
+            <el-button type="primary" size="medium" @click="addSplitRule">
+              <i class="el-icon-plus"></i> 新增拆分规则
+            </el-button>
+          </div>
         </el-form>
       </div>
+      <div class="drawer-footer">
+        <el-button size="medium" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="medium" @click="handleSubmit">保 存</el-button>
+      </div>
     </el-drawer>
   </div>
 </template>
 
 <script>
+import { addRuleSplit, getRuleDetail, updateRuleSplit } from '@/api/generatedApi'
+
 export default {
   name: 'AddRule',
   data() {
     return {
       dialogVisible: false,
+      currentId: null, // 当前编辑的规则ID
       form: {
-        rules: [
+        ruleName: '',
+        ruleType: 1,
+        ruleList: [
           {
-            ruleName: '',
-            style: '',
-            promptWord: '',
-            remark: ''
+            titleLevel: '',
+            ruleRegex: '',
+            description: ''
           }
         ]
       },
+      options: [
+        {
+          value: 1,
+          label: '一级标题'
+        },
+        {
+          value: 2,
+          label: '二级标题'
+        },
+        {
+          value: 3,
+          label: '三级标题'
+        },
+        {
+          value: 4,
+          label: '四级标题'
+        },
+        {
+          value: 5,
+          label: '五级标题'
+        },
+        {
+          value: 6,
+          label: '六级标题'
+        }
+      ],
       rules: {
         ruleName: [
-          { required: true, message: '请输入规则名称', trigger: 'blur' }
+          { required: true, message: '请输入规则名称', trigger: 'blur' },
+          { max: 50, message: '长度不能超过50个字符', trigger: 'blur' },
+          { pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/, message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头', trigger: 'blur' }
+        ],
+        'ruleList.0.titleLevel': [{ required: true, message: '请选择标题级别' }],
+        'ruleList.0.ruleRegex': [{ required: true, message: '请输入关键词', trigger: 'blur' }
         ],
-        rules: {
-          required: true,
-          type: 'array',
-          fields: {
-            style: [
-              { required: true, message: '请选择样式', trigger: 'change' }
-            ],
-            promptWord: [
-              { required: true, message: '请输入提示词', trigger: 'blur' }
-            ]
-          }
-        }
       }
-    };
+    }
   },
   methods: {
-    init() {
-      this.dialogVisible = true;
+    init(id) {
+      this.dialogVisible = true
+      this.currentId = id
+      // 如果有id，则获取详情
+      if (id) {
+        this.getDetail(id)
+      } else {
+        // 重置表单
+        this.$nextTick(() => {
+          this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
+        })
+      }
+    },
+    // 获取详情
+    getDetail(id) {
+      getRuleDetail(id).then(res => {
+        this.form = res.content.content
+        // 为每个规则项添加验证规则
+        this.form.ruleList.forEach((_, index) => {
+          this.addValidationRules(index)
+        })
+      })
     },
     queryExistingRules() {
       // 查询并导入现有规则的逻辑
     },
+    // 动态添加验证规则
+    addValidationRules(index) {
+      const rules = this.rules
+      rules[`ruleList.${index}.titleLevel`] = [{ required: true, message: '请选择样式', trigger: 'change' }]
+      rules[`ruleList.${index}.ruleRegex`] = [{ required: true, message: '请输入关键词', trigger: 'blur' }]
+      this.rules = { ...rules }
+    },
     // 复制
-    copyRule(){
-
+    copyRule(index) {
+      const currentRule = this.form.ruleList[index]
+      this.form.ruleList.push({
+        ...currentRule
+      })
+      this.addValidationRules(this.form.ruleList.length - 1)
     },
     // 新增
     addSplitRule() {
-      this.form.rules.push({
+      this.form.ruleList.push({
         ruleName: '',
-        style: '',
-        promptWord: '',
-        remark: ''
-      });
+        titleLevel: '',
+        ruleRegex: '',
+        description: ''
+      })
+      this.addValidationRules(this.form.ruleList.length - 1)
     },
     removeRule(index) {
-      this.form.rules.splice(index, 1);
+      this.form.ruleList.splice(index, 1)
+      // 重新生成验证规则
+      const newRules = { ...this.rules }
+      delete newRules[`ruleList.${index}.titleLevel`]
+      delete newRules[`ruleList.${index}.ruleRegex`]
+      this.rules = newRules
     },
     deleteSplitRule() {
       // 删除拆分规则的逻辑
-      console.log('删除拆分规则');
+      console.log('删除拆分规则')
     },
-    handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
-          done();
-        })
-        .catch(_ => {});
+    handleSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          // 表单验证通过，根据是否有id调用新增还是编辑接口
+          const api = this.currentId ? updateRuleSplit : addRuleSplit
+          const params = {
+            ...this.form,
+            id: this.currentId // 编辑时带上id
+          }
+          api(params)
+            .then(() => {
+              this.$message.success(this.currentId ? '修改成功' : '新增成功')
+              this.dialogVisible = false
+              this.$emit('getDataList')
+            })
+            .catch(err => {
+              this.$message.error((this.currentId ? '修改' : '新增') + '失败：' + err.message)
+            })
+        } else {
+          this.$message.error('请填写完整所有必填项')
+          return false
+        }
+      })
+    },
+    handleClose() {
+      this.dialogVisible = false
     }
   }
 }
 </script>
 
-<style scoped lang='scss'>
-.content{
+<style scoped lang="scss">
+.content {
   padding: 20px;
-  .tips{
-    font-size: 14px ;
+  min-height: 500px;
+
+  .form-section {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 4px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 16px;
+      color: #303133;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .delete-btn {
+        color: #F56C6C;
+        font-size: 14px;
+
+        &:hover {
+          color: #F78989;
+        }
+      }
+    }
+  }
+
+  .tips {
+    font-size: 14px;
     color: #999;
-    margin-left: 120px;
+    margin-left: 100px;
     margin-bottom: 20px;
   }
+
+  .w100 {
+    width: 300px;
+  }
+
+  .add-rule-btn {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+
+.drawer-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 20px;
+  text-align: right;
+  background: #fff;
 }
 </style>