From 6895c35827e8934a377ca13b799c5f00bd82a8a4 Mon Sep 17 00:00:00 2001
From: "du.meimei" <du.meimei@ebiz-digits.com>
Date: Fri, 11 Apr 2025 18:14:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(knowledge):=20=E6=96=B0=E5=A2=9E=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E6=8B=86=E5=88=86=E8=A7=84=E5=88=99=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了自动拆分和自定义拆分两种方式
- 实现了拆分规则的添加、编辑和删除- 增加了拆分结果预览功能
- 优化了用户界面和交互设计
---
 src/api/generatedApi/index.js                 |  48 +++
 .../detail/components/split/AddRule.vue       | 285 +++++++++++++----
 .../components/split/CustomSplitDialog.vue    |  49 +--
 .../split/{SplitConfig.vue => Index.vue}      |   0
 .../detail/components/words/AddRule.vue       | 294 +++++++++++++-----
 .../detail/components/words/CustomWords.vue   |  29 +-
 src/views/knowledge/detail/create.vue         |   8 +-
 7 files changed, 542 insertions(+), 171 deletions(-)
 rename src/views/knowledge/detail/components/split/{SplitConfig.vue => Index.vue} (100%)

diff --git a/src/api/generatedApi/index.js b/src/api/generatedApi/index.js
index 0cd4457..7b1121b 100644
--- a/src/api/generatedApi/index.js
+++ b/src/api/generatedApi/index.js
@@ -66,3 +66,51 @@ export function minerUMarkDownUpdate(data) {
     data
   })
 }
+// 规则分页
+export function getRulesPage(data) {
+  return request({
+    url: getUrl(`/rules/page`),
+    method: 'post',
+    data
+  })
+}
+// 拆分规则-新增
+export function addRuleSplit(data) {
+  return request({
+    url: getUrl(`/ruleDocSplitEx/create`),
+    method: 'post',
+    data
+  })
+}
+// 拆分规则-详情
+export function getRuleDetail(id) {
+  return request({
+    url: getUrl(`/rulesEx/query?id=${id}`),
+    method: 'get'
+  })
+}
+// 拆分规则-编辑
+export function updateRuleSplit(data) {
+  return request({
+    url: getUrl(`/ruleDocSplitEx/update`),
+    method: 'post',
+    data
+  })
+}
+
+// 题词-新增
+export function addRuleExtract(data) {
+  return request({
+    url: getUrl(`/ruleAttributeExtractEx/create`),
+    method: 'post',
+    data
+  })
+}
+// 拆分规则-编辑
+export function updateRuleExtractSplit(data) {
+  return request({
+    url: getUrl(`/ruleAttributeExtractEx/update`),
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/knowledge/detail/components/split/AddRule.vue b/src/views/knowledge/detail/components/split/AddRule.vue
index 0017dd8..17f727c 100644
--- a/src/views/knowledge/detail/components/split/AddRule.vue
+++ b/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>
diff --git a/src/views/knowledge/detail/components/split/CustomSplitDialog.vue b/src/views/knowledge/detail/components/split/CustomSplitDialog.vue
index 05d6c30..897859a 100644
--- a/src/views/knowledge/detail/components/split/CustomSplitDialog.vue
+++ b/src/views/knowledge/detail/components/split/CustomSplitDialog.vue
@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="知识拆分规则">
-            <el-input v-model="form.field1" size="medium" placeholder="请输入知识拆分规则"></el-input>
+            <el-input v-model="form.ruleName" size="medium" placeholder="请输入知识拆分规则"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -16,7 +16,7 @@
     </el-form>
     <r-table :columns="columns" :data="tableData" :deletion="false"></r-table>
     <!-- 添加 AddRule 组件 -->
-    <add-rule ref="addRule"></add-rule>
+    <add-rule ref="addRule" @getDataList="getDataList"></add-rule>
 
     <!-- 添加预览弹窗 -->
     <el-dialog
@@ -36,34 +36,42 @@
 </template>
 
 <script>
-import AddRule from './AddRule.vue'; // 导入 AddRule 组件
+import AddRule from './AddRule.vue' // 导入 AddRule 组件
+import { getRulesPage } from '@/api/generatedApi/index'
 
 export default {
   name: 'CustomSplitDialog',
   components: {
     AddRule // 注册 AddRule 组件
   },
-  props: {
-  },
+  props: {},
   data() {
     return {
       visible: false,
       form: {
-        // 表单数据
+        ruleName: ''
       },
-      tableData: [
-        // 表格数据示例
-        { id: 1, name: 'Item 1', selected: false },
-        { id: 2, name: 'Item 2', selected: false },
-        { id: 3, name: 'Item 3', selected: false }
-      ],
+      tableData: [],
       addRuleVisible: false, // 控制 AddRule 组件的显示状态
       previewDialogVisible: false // 控制预览弹窗的显示状态
     }
   },
   methods: {
-    init(){
-      this.visible = true;
+    init() {
+      this.visible = true
+      this.getDataList()
+    },
+    getDataList() {
+      console.log('getRulesPage');
+      // 1-文档拆分规则  2-文档题词规则
+      let params = {
+        ruleType: 1,
+        ...this.form
+      }
+      getRulesPage(params).then(res => {
+        console.log(res.content.content.list);
+        this.tableData = res.content.content.list
+      })
     },
     close(){
       this.visible = false;
@@ -75,7 +83,7 @@ export default {
     },
     handleEdit(row) {
       // 修改逻辑
-      console.log('Edit', row)
+      this.$refs.addRule.init(row.id)
     },
     closeDialog() {
       this.$emit('update:visible', false)
@@ -98,22 +106,17 @@ export default {
         {
           type: 'selection',
           prop: 'knowledgeName',
-          width: '50',
+          width: '100',
           align: 'center'
         },
         {
           key: '知识拆分规则名称',
-          prop: 'knowledgeName',
-          align: 'center'
-        },
-        {
-          key: '规则内容',
-          prop: 'knowledgeName',
+          prop: 'ruleName',
           align: 'center'
         },
         {
           key: '备注',
-          prop: 'knowledgeDesc',
+          prop: 'description',
           align: 'center'
         },
         {
diff --git a/src/views/knowledge/detail/components/split/SplitConfig.vue b/src/views/knowledge/detail/components/split/Index.vue
similarity index 100%
rename from src/views/knowledge/detail/components/split/SplitConfig.vue
rename to src/views/knowledge/detail/components/split/Index.vue
diff --git a/src/views/knowledge/detail/components/words/AddRule.vue b/src/views/knowledge/detail/components/words/AddRule.vue
index 88af210..81f7524 100644
--- a/src/views/knowledge/detail/components/words/AddRule.vue
+++ b/src/views/knowledge/detail/components/words/AddRule.vue
@@ -1,132 +1,284 @@
 <template>
   <div>
     <!-- 添加预处理结果预览对话框 -->
-    <el-drawer
-      title="添加知识拆分规则"
-      :visible.sync="dialogVisible"
-      size="50%">
+    <el-drawer :title="currentId ? '编辑知识拆分规则' : '新增知识拆分规则'" :visible.sync="dialogVisible" 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 + '.attribute'">
+              <el-input v-model="rule.attribute" placeholder="请输入属性"></el-input>
             </el-form-item>
-            <el-form-item label="属性描述" :prop="'rules.' + index + '.style'">
-              <el-input v-model="rule.style" placeholder="请输入属性描述"></el-input>
+            <el-form-item label="属性描述" :prop="'ruleList.' + index + '.attributeDesc'">
+              <el-input v-model="rule.attributeDesc" placeholder="请输入属性描述"></el-input>
             </el-form-item>
-            <el-form-item label="关键词" :prop="'rules.' + index + '.style'">
-              <el-input v-model="rule.style" placeholder="请输入关键词"></el-input>
+            <el-form-item label="关键词" :prop="'ruleList.' + index + '.keyword'">
+              <el-input v-model="rule.keyword" placeholder="请输入关键词"></el-input>
             </el-form-item>
-            <el-form-item label="题词示例" :prop="'rules.' + index + '.style'">
-              <el-input v-model="rule.style" placeholder="请输入题词示例"></el-input>
+            <el-form-item label="题词示例" :prop="'ruleList.' + index + '.example'">
+              <el-input v-model="rule.example" 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 label="提示词" :prop="'ruleList.' + index + '.prompt'">
+              <el-input v-model="rule.prompt" 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 { addRuleExtract, getRuleDetail, updateRuleExtractSplit } from '@/api/generatedApi'
+
 export default {
   name: 'AddRule',
   data() {
     return {
       dialogVisible: false,
+      currentId: null, // 当前编辑的规则ID
       form: {
-        rules: [
+        ruleName: '',
+        ruleType: 2,
+        ruleList: [
           {
-            ruleName: '',
-            style: '',
-            promptWord: '',
-            remark: ''
+            attribute: '',
+            attributeDesc: '',
+            keyword: '',
+            example: '',
+            prompt: ''
           }
         ]
       },
+      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' }
         ],
-        rules: {
-          required: true,
-          type: 'array',
-          fields: {
-            style: [
-              { required: true, message: '请选择样式', trigger: 'change' }
-            ],
-            promptWord: [
-              { required: true, message: '请输入提示词', trigger: 'blur' }
-            ]
-          }
-        }
+        'ruleList.0.attribute': [{ required: true, message: '请输入属性' }],
+        'ruleList.0.attributeDesc': [{ required: true, message: '请输入属性描述' }],
+        'ruleList.0.keyword': [{ required: true, message: '请输入关键词' }],
+        'ruleList.0.example': [{ required: true, message: '请输入题词示例' }],
+        'ruleList.0.prompt': [{ required: true, message: '请输入提示词' }]
       }
-    };
+    }
   },
   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}.attribute`] = [{ required: true, message: '请输入属性', trigger: 'change' }]
+      rules[`ruleList.${index}.attributeDesc`] = [{ required: true, message: '请输入属性描述', trigger: 'blur' }]
+      rules[`ruleList.${index}.keyword`] = [{ required: true, message: '请输入关键词', trigger: 'change' }]
+      rules[`ruleList.${index}.example`] = [{ required: true, message: '请输入题词示例', trigger: 'blur' }]
+      rules[`ruleList.${index}.prompt`] = [{ required: true, message: '请输入提示词', trigger: 'change' }]
+      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}.attribute`]
+      delete newRules[`ruleList.${index}.attributeDesc`]
+      delete newRules[`ruleList.${index}.keyword`]
+      delete newRules[`ruleList.${index}.example`]
+      delete newRules[`ruleList.${index}.prompt`]
+      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 ? updateRuleExtractSplit : addRuleExtract
+          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>
diff --git a/src/views/knowledge/detail/components/words/CustomWords.vue b/src/views/knowledge/detail/components/words/CustomWords.vue
index 05d6c30..dd821da 100644
--- a/src/views/knowledge/detail/components/words/CustomWords.vue
+++ b/src/views/knowledge/detail/components/words/CustomWords.vue
@@ -36,7 +36,8 @@
 </template>
 
 <script>
-import AddRule from './AddRule.vue'; // 导入 AddRule 组件
+import AddRule from './AddRule.vue' // 导入 AddRule 组件
+import { getRulesPage } from '@/api/generatedApi/index'
 
 export default {
   name: 'CustomSplitDialog',
@@ -64,6 +65,19 @@ export default {
   methods: {
     init(){
       this.visible = true;
+      this.getDataList()
+    },
+    getDataList() {
+      console.log('getRulesPage');
+      // 1-文档拆分规则  2-文档题词规则
+      let params = {
+        ruleType: 2,
+        ...this.form
+      }
+      getRulesPage(params).then(res => {
+        console.log(res.content.content.list);
+        this.tableData = res.content.content.list
+      })
     },
     close(){
       this.visible = false;
@@ -75,7 +89,7 @@ export default {
     },
     handleEdit(row) {
       // 修改逻辑
-      console.log('Edit', row)
+      this.$refs.addRule.init(row.id)
     },
     closeDialog() {
       this.$emit('update:visible', false)
@@ -98,22 +112,17 @@ export default {
         {
           type: 'selection',
           prop: 'knowledgeName',
-          width: '50',
+          width: '100',
           align: 'center'
         },
         {
           key: '知识拆分规则名称',
-          prop: 'knowledgeName',
-          align: 'center'
-        },
-        {
-          key: '规则内容',
-          prop: 'knowledgeName',
+          prop: 'ruleName',
           align: 'center'
         },
         {
           key: '备注',
-          prop: 'knowledgeDesc',
+          prop: 'description',
           align: 'center'
         },
         {
diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue
index 610ed26..82ac702 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>
+          <words v-if="active === 2"></words>
         </div>
       </div>
 
@@ -35,7 +36,9 @@
 </template>
 <script>
 import StepPreprocessing from './components/preprocessing.vue'
-import SplitConfig from '@/views/knowledge/detail/components/split/SplitConfig.vue'
+import SplitConfig from '@/views/knowledge/detail/components/split/Index.vue'
+import Words from '@/views/knowledge/detail/components/words/Index.vue'
+// import StepC
 export default {
   name: 'create',
   data() {
@@ -48,7 +51,8 @@ export default {
   watch: {},
   components: {
     SplitConfig,
-    StepPreprocessing
+    StepPreprocessing,
+    Words
   },
   filters: {},
   methods: {