feat: 规则管理功能优化与问题修复

1. 修复了规则修改功能中组件显示错误问题
  - 更新handleEdit函数中的条件判断逻辑，使其根据字符串类型的ruleType正确判断应显示哪个编辑组件
  - 解决了无论规则类型如何都显示同一个组件的问题

2. 新增规则添加功能
  - 添加add-rules组件，支持新增规则功能

3. 优化规则详情查看功能
   - 完善Info组件，提升用户体验

4. 更新API配置
   - 将API地址更新为生产环境地址

src/views/rules/components/edit-split-rule/Index.vue

@@ -1,80 +1,117 @@
 <script>
-import { getRuleDetail } from '@/api/rules/index'
-import { updateSplitRule } from '@/api/rules/index'
+import { addSplitRule, getRuleDetail, updateSplitRule } from "@/api/rules/index";
 
 export default {
-  name: 'sEditSplitRule',
+  name: "EditSplitRule",
   data() {
     return {
       // 表单数据有：规则名称、样式、提示词、备注
       form: {
-        id: '',
-        ruleName: '',
-        ruleType: '',
+        id: "",
+        ruleName: "",
+        ruleType: 1,
         ruleList: []
       }
+    };
+  },
+  props: {
+    type: {
+      type: String,
+      default: "edit"
     }
   },
-  inject: ['diglogOptions'],
+  inject: ["dialogOptions", "tableData"],
   beforeMount() {
+    // 如果是新增，不去请求接口
+    if (this.type === "add") {
+      return;
+    }
     // 获取当前行数据
-    const { currentRow } = this.diglogOptions
+    const { currentRow } = this.dialogOptions;
 
     // 获取规则详情
     getRuleDetail(currentRow.id)
       .then(res => {
-        const { content } = res.content
-        console.log('origin query request', content)
+        const { content } = res.content;
+        console.log("origin query request", content);
         // 一次性设置表单数据，确保响应式更新
         this.form = {
           id: content.id,
           ruleName: content.ruleName,
           ruleType: content.ruleType,
           ruleList: Array.isArray(content.ruleList) ? content.ruleList : []
-        }
+        };
       })
       .catch(err => {
-        console.error('获取规则详情失败:', err)
-      })
+        console.error("获取规则详情失败:", err);
+      });
   },
 
   methods: {
     handleAdd() {
       // TODO: 新增数据到后端
       const payload = {
-        titleLevel: '',
-        ruleRegex: '',
-        description: ''
-      }
+        titleLevel: "",
+        ruleRegex: "",
+        description: ""
+      };
 
       // 使用数组方法添加元素，确保响应式更新
-      this.form.ruleList.push(payload)
+      this.form.ruleList.push(payload);
     },
     handleDelete() {
       // TODO: 删除数据到后端
       if (this.form.ruleList.length > 0) {
-        this.form.ruleList.pop()
+        this.form.ruleList.pop();
       }
     },
     handleSave() {
       // 使用正确的API保存数据到后端
-      console.log(`this.form`, this.form)
+      console.log(`this.form`, this.form);
 
-      updateSplitRule(this.form)
-        .then(() => {
-          console.log('update split rule success')
-          this.diglogOptions.visible = false
-          // 可以添加成功提示
-          this.$message && this.$message.success('保存成功')
-        })
-        .catch(err => {
-          console.error(`update split rule failed: ${err}`)
-          // 可以添加错误提示
-          this.$message && this.$message.error('保存失败')
-        })
+      // 判断是新增还是更新，新增调用 addSplitRule，更新调用 updateSplitRule
+      if (this.type === "add") {
+
+        // 配置对应表单
+        // 添加时，需要删除 id
+        delete this.form.id;
+        // 更新ruleType
+        this.form.ruleType = 1;
+
+        addSplitRule(this.form)
+          .then((res) => {
+            this.dialogOptions.visible = false;
+
+            // if (res.code >= 300) return;
+
+            // 可以添加成功提示
+            this.$message && this.$message.success("保存成功");
+            // 向 tableData 最上面添加数据
+            this.tableData.unshift(this.form)
+          })
+          .catch(err => {
+            console.error(`add split rule failed: ${err}`);
+            // 可以添加错误提示
+            this.$message && this.$message.error("保存失败");
+          });
+      } else {
+        updateSplitRule(this.form)
+          .then(() => {
+            console.log("update split rule success");
+            this.dialogOptions.visible = false;
+            // 可以添加成功提示
+            this.$message && this.$message.success("保存成功");
+          })
+          .catch(err => {
+            console.error(`update split rule failed: ${err}`);
+            // 可以添加错误提示
+            this.$message && this.$message.error("保存失败");
+          });
+      }
     }
+
   }
-}
+};
 </script>
 
 <template>
@@ -102,7 +139,7 @@ export default {
         <el-button type="info" @click="handleDelete">- 删除拆分</el-button>
       </div>
       <div>
-        <el-button @click="diglogOptions.visible = false">取 消</el-button>
+        <el-button @click="dialogOptions.visible = false">取 消</el-button>
         <el-button type="primary" @click="handleSave">确 定</el-button>
       </div>
     </div>