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

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

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

@@ -1,85 +1,103 @@
 <template>
   <div>
     <!-- 添加预处理结果预览对话框 -->
-    <el-dialog
+    <el-drawer
       title="添加知识拆分规则"
       :visible.sync="dialogVisible"
-      width="650px">
-      <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>
-          <span>支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</span>
-          <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="style">
-          <el-input v-model="form.ruleName" placeholder="请输入属性描述"></el-input>
-        </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="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>
-
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" size="medium" @click="addSplitRule">+ 新增拆分规则</el-button>
-        <el-button size="medium" @click="deleteSplitRule">- 删除拆分规则</el-button>
+      size="50%">
+      <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-item>
+            <el-form-item label="提示词" :prop="'rules.' + index + '.promptWord'">
+              <el-input type="textarea" v-model="rule.promptWord" 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>
+            <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>
+            </div>
+          </div>
+        </el-form>
       </div>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
 <script>
 export default {
   name: 'AddRule',
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      required: true
-    },
-  },
   data() {
     return {
+      dialogVisible: false,
       form: {
-        ruleName: '',
-        style: '',
-        promptWord: '',
-        remark: ''
+        rules: [
+          {
+            ruleName: '',
+            style: '',
+            promptWord: '',
+            remark: ''
+          }
+        ]
       },
       rules: {
         ruleName: [
           { required: true, message: '请输入规则名称', trigger: 'blur' }
         ],
-        style: [
-          { required: true, message: '请选择样式', trigger: 'change' }
-        ],
-        promptWord: [
-          { 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;
+    },
     queryExistingRules() {
       // 查询并导入现有规则的逻辑
     },
+    // 复制
+    copyRule(){
+
+    },
+    // 新增
     addSplitRule() {
-      this.$refs.ruleForm.validate((valid) => {
-        if (valid) {
-          // 新增拆分规则的逻辑
-        } else {
-          console.log('表单验证失败');
-          return false;
-        }
+      this.form.rules.push({
+        ruleName: '',
+        style: '',
+        promptWord: '',
+        remark: ''
       });
     },
+    removeRule(index) {
+      this.form.rules.splice(index, 1);
+    },
     deleteSplitRule() {
       // 删除拆分规则的逻辑
       console.log('删除拆分规则');
@@ -96,5 +114,13 @@ export default {
 </script>
 
 <style scoped lang='scss'>
-
+.content{
+  padding: 20px;
+  .tips{
+    font-size: 14px ;
+    color: #999;
+    margin-left: 120px;
+    margin-bottom: 20px;
+  }
+}
 </style>