feat: 界面调整

1. 代码 format
2. 增加 el-card 标题

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

@@ -87,7 +87,7 @@ export default {
             // 可以添加成功提示
             this.$message && this.$message.success("保存成功");
             // 向 tableData 最上面添加数据
-            this.tableData.unshift(this.form)
+            this.tableData.unshift(this.form);
           })
           .catch(err => {
             console.error(`add split rule failed: ${err}`);
@@ -120,7 +120,11 @@ export default {
       <el-form-item label="规则名称">
         <el-input v-model="form.ruleName"></el-input>
       </el-form-item>
-      <el-card v-for="(item, index) in form.ruleList" :key="index">
+      <el-card v-for="(item, index) in form.ruleList" :key="index" class="mt10">
+        <template #header>
+          <span>拆分规则 {{ index + 1 }}</span>
+        </template>
+
         <el-form-item label="样式">
           <el-input v-model="item.titleLevel"></el-input>
         </el-form-item>
@@ -132,7 +136,7 @@ export default {
         </el-form-item>
       </el-card>
     </el-form>
-    <div slot="footer" class="dialog-footer flex" style="justify-content: space-between;">
+    <div slot="footer" class="dialog-footer flex mt15" style="justify-content: space-between;">
       <!-- 只有当点击保存的时候才能和服务端通信新增和删除 -->
       <div>
         <el-button type="primary" @click="handleAdd">+ 新增拆分</el-button>