feat:新增规则页面

src/views/knowledge/detail/components/SplitConfig.vue

@@ -3,34 +3,28 @@
     文件拆分规则
     <ul>
       <!-- 自动拆分 -->
-      <li class="flex">
+      <li class="flex" v-for="(item, index) in splitOptions" :key="index" @click="handleClick(index)">
         <div>
-          <i class="el-icon-setting" size="50"></i>
+          <i :class="item.icon" size="50"></i>
         </div>
         <div>
-          <h3>自动拆分</h3>
+          <h3>{{ item.title }}</h3>
-          使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。<br>
+          {{ item.description }}<br>
-          提示：首次使用时建议先用自动拆分测试效果，再决定是否调整。
+          <span v-if="item.tip">{{ item.tip }}</span>
-        </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>
+    <custom-split-dialog
+      v-if="dialogVisible"
+      :visible="dialogVisible"
+      :form="form"
+      :table-data="tableData">
+    </custom-split-dialog>
   </div>
 </template>
 <script>
-import CustomSplitDialog from './CustomSplitDialog.vue';
+import CustomSplitDialog from './split/CustomSplitDialog.vue';
 
 export default {
   name: 'splitConfig',
@@ -48,6 +42,20 @@ export default {
         { id: 1, name: 'Item 1', selected: false },
         { id: 2, name: 'Item 2', selected: false },
         { id: 3, name: 'Item 3', selected: false }
+      ],
+      splitOptions: [
+        {
+          icon: 'el-icon-setting',
+          title: '自动拆分',
+          description: '使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。',
+          tip: '提示：首次使用时建议先用自动拆分测试效果，再决定是否调整。'
+        },
+        {
+          icon: 'el-icon-medal',
+          title: '自定义拆分',
+          description: '使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。',
+          tip: ''
+        }
       ]
     }
   },
@@ -57,6 +65,9 @@ export default {
   methods: {
     designSplit() {
       this.dialogVisible = true;
+    },
+    handleClick(index) {
+      console.log('Clicked index:', index);
     }
   },
   created() {},

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

@@ -4,27 +4,33 @@
     <el-dialog
       title="添加知识拆分规则"
       :visible.sync="dialogVisible"
-      width="80%"
+      width="650px">
-      :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>
+          <span>支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</span>
           <el-button type="primary" size="mini" @click="queryExistingRules">查询并导入现有规则</el-button>
         </el-form-item>
-        <el-form-item label="样式：" prop="style">
+        <el-form-item label="属性：" prop="style">
-          <el-input v-model="form.ruleName" placeholder="请输入标题级别"></el-input>
+          <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-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 type="primary" size="medium" @click="addSplitRule">+ 新增拆分规则</el-button>
-        <el-button @click="deleteSplitRule">- 删除拆分规则</el-button>
+        <el-button size="medium" @click="deleteSplitRule">- 删除拆分规则</el-button>
       </div>
     </el-dialog>
   </div>
@@ -33,9 +39,14 @@
 <script>
 export default {
   name: 'AddRule',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      required: true
+    },
+  },
   data() {
     return {
-      dialogVisible: false,
       form: {
         ruleName: '',
         style: '',

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="自定义拆分" :visible.sync="visible" width="80%">
+  <div v-if="visible">
     <el-form :model="form" label-width="100px">
       <!-- 表单内容 -->
       <el-row>
@@ -15,25 +15,34 @@
       <!-- 其他表单项 -->
     </el-form>
     <r-table :columns="columns" :data="list" :deletion="false"></r-table>
-    <!--    <el-table :data="tableData" style="width: 100%">-->
+    <!-- 添加 AddRule 组件 -->
-    <!--      <el-table-column label="操作">-->
+    <add-rule :dialogVisible.sync="addRuleVisible"></add-rule>
-    <!--        <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-dialog
-      <el-button type="primary" @click="closeDialog">确 定</el-button>
+      title="拆分结果预览"
-    </span>
+      :visible.sync="previewDialogVisible"
-  </el-dialog>
+      width="60%">
+      <div class="preview-content">
+        <!-- 预览内容区域 -->
+        这里是预览的内容
+      </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>
+import AddRule from './AddRule.vue'; // 导入 AddRule 组件
+
 export default {
   name: 'CustomSplitDialog',
+  components: {
+    AddRule // 注册 AddRule 组件
+  },
   props: {
     visible: {
       type: Boolean,
@@ -50,13 +59,16 @@ export default {
   },
   data() {
     return {
-      list: [{}]
+      list: [{}],
+      addRuleVisible: false, // 控制 AddRule 组件的显示状态
+      previewDialogVisible: false // 控制预览弹窗的显示状态
     }
   },
   methods: {
     handlePreview(row) {
       // 预览逻辑
-      console.log('Preview', row)
+      console.log('Preview', row);
+      this.previewDialogVisible = true; // 显示预览弹窗
     },
     handleEdit(row) {
       // 修改逻辑
@@ -65,8 +77,15 @@ export default {
     closeDialog() {
       this.$emit('update:visible', false)
     },
-    addRule(){
+    addRule() {
-
+      this.addRuleVisible = true; // 显示 AddRule 组件
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
     }
   },
   computed: {
@@ -113,6 +132,9 @@ export default {
                   props: {
                     type: 'primary',
                     size: 'medium'
+                  },
+                  on: {
+                    click: () => this.handleEdit(params.row)
                   }
                 },
                 '修改'
@@ -124,6 +146,9 @@ export default {
                   props: {
                     type: 'primary',
                     size: 'medium'
+                  },
+                  on: {
+                    click: () => this.handlePreview(params.row)
                   }
                 },
                 '预览'

src/views/knowledge/detail/components/words/Index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div class="container">
+    </div>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>