feat: 界面调整

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

src/views/rules/Index.vue

@@ -1,38 +1,47 @@
 <script>
-import { deleteRule, getRuleList } from '@/api/rules/index'
-import EditPromptRule from './components/edit-prompt-rule/Index.vue'
-import EditSplitRule from './components/edit-split-rule/Index.vue'
-import AddRules from './components/add-rules/index.vue'
-import Info from './components/info/index.vue'
-import { h } from 'vue'
+import { deleteRule, getRuleList } from "@/api/rules/index";
+import EditPromptRule from "./components/edit-prompt-rule/Index.vue";
+import EditSplitRule from "./components/edit-split-rule/Index.vue";
+import AddRules from "./components/add-rules/index.vue";
+import Info from "./components/info/index.vue";
+import { h } from "vue";
 
 export default {
-  name: 'rules',
+  name: "rules",
   data() {
     return {
       columns: [],
       tableConfig: {
         columns: [
-          { prop: 'ruleName', key: '规则名称' },
-          { prop: 'ruleType', key: '规则类型' },
-          { prop: 'createdDate', key: '创建时间' },
+          { prop: "ruleName", key: "规则名称" },
+          { prop: "ruleType", key: "规则类型" },
+          { prop: "createdDate", key: "创建时间" },
           {
-            key: '操作',
+            key: "操作",
             render: (h, params) => {
-              return h('div', [
-                h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleInfoVisiable(params.row) } }, '查看详情'),
-                h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleEdit(params.row) } }, '修改'),
-                h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleDelete(params.row) } }, '删除')
-              ])
+              return h("div", [
+                h("el-button", {
+                  props: { type: "text", size: "mini" },
+                  on: { click: () => this.handleInfoVisiable(params.row) }
+                }, "查看详情"),
+                h("el-button", {
+                  props: { type: "text", size: "mini" },
+                  on: { click: () => this.handleEdit(params.row) }
+                }, "修改"),
+                h("el-button", {
+                  props: { type: "text", size: "mini" },
+                  on: { click: () => this.handleDelete(params.row, params.index) }
+                }, "删除")
+              ]);
             }
           }
         ]
       },
       // 弹窗配置
       dialogOptions: {
-        title: '',
+        title: "",
         visible: false,
-        width: '50%',
+        width: "50%",
         currentComponent: void 0,
         currentRow: void 0
       },
@@ -44,17 +53,17 @@ export default {
       form: {
         query: true,
         pickerOptions: void 0,
-        ruleType: '',
-        ruleName: '',
+        ruleType: "",
+        ruleName: "",
         createdDate: []
       }
-    }
+    };
   },
   provide() {
     return {
       dialogOptions: this.dialogOptions,
       tableData: this.tableData
-    }
+    };
   },
   components: {
     EditPromptRule,
@@ -65,129 +74,131 @@ export default {
   computed: {
     // 当前的分页数据
     currentTableDate() {
-      let filteredData
+      let filteredData;
       // 过滤 table 列表,如果 form 相关项是空的，就不过滤
       if (this.form.query) {
         // 过滤 ruleType
         const map = {
-          1: '提示词规则',
-          2: '知识拆分规则'
-        }
+          1: "提示词规则",
+          2: "知识拆分规则"
+        };
         filteredData = this.tableData.filter(item => {
-          if (!this.form.ruleType) return true
-          return map[item.ruleType] === this.form.ruleType
-        })
+          if (!this.form.ruleType) return true;
+          return map[item.ruleType] === this.form.ruleType;
+        });
 
         // 过滤 ruleName
         filteredData = filteredData.filter(item => {
-          if (!this.form.ruleName) return true
-          return item.ruleName === this.form.ruleName
-        })
+          if (!this.form.ruleName) return true;
+          return item.ruleName === this.form.ruleName;
+        });
 
         // 过滤 createdDate
         filteredData = filteredData.filter(item => {
-          if (!this.form.createdDate.length) return true
-          return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1]
-        })
+          if (!this.form.createdDate.length) return true;
+          return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1];
+        });
       } else {
-        filteredData = this.tableData
+        filteredData = this.tableData;
       }
 
       // TODO: 分页数据
-      const start = (this.currentPage - 1) * 10
-      const end = this.currentPage * 10
+      const start = (this.currentPage - 1) * 10;
+      const end = this.currentPage * 10;
 
-      return filteredData.slice(start, end)
+      return filteredData.slice(start, end);
     },
     getTableData() {
       // 需要处理 规则类型， 因为规则类型都是数字，需要转换成中文
       return this.currentTableDate.map(item => ({
         ...item,
-        ruleType: item.ruleType === 1 ? '提示词规则' : '知识拆分规则'
-      }))
+        ruleType: item.ruleType === 1 ? "提示词规则" : "知识拆分规则"
+      }));
     },
     // 查询表单的 ruleTypeOptions
     ruleTypeOptions() {
       const map = {
-        1: '提示词规则',
-        2: '知识拆分规则'
-      }
+        1: "提示词规则",
+        2: "知识拆分规则"
+      };
       // 去重所有 ruleType， 然后映射成 option
-      const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type])
-      return res
+      const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type]);
+      return res;
     },
     // 查询表单的 ruleNameOptions
     ruleNameOptions() {
-      const res = [...new Set(this.tableData.map(item => item.ruleName))]
-      return res
+      const res = [...new Set(this.tableData.map(item => item.ruleName))];
+      return res;
     }
   },
   watch: {
     form: {
-      handler() {},
+      handler() {
+      },
       deep: true
     }
   },
   beforeMount() {
     getRuleList().then(res => {
-      const { content } = res.content
+      const { content } = res.content;
 
-      this.tableData = content.list
-    })
+      this.tableData = content.list;
+    });
   },
   methods: {
     handleCurrentChange(val) {
-      this.currentPage = val
+      this.currentPage = val;
     },
     // 处理查看规则详情
     handleInfoVisiable(row) {
-      this.dialogOptions.title = '查看规则详情'
-      this.dialogOptions.currentComponent = 'Info'
-      this.dialogOptions.visible = true
-      this.dialogOptions.currentRow = row
+      this.dialogOptions.title = "查看规则详情";
+      this.dialogOptions.currentComponent = "Info";
+      this.dialogOptions.visible = true;
+      this.dialogOptions.currentRow = row;
     },
     // 处理修改规则
     handleEdit(row, index) {
-      this.dialogOptions.title = '修改规则'
-      this.dialogOptions.currentComponent = row.ruleType === '知识拆分规则' ? 'EditPromptRule' : 'EditSplitRule'
-      this.dialogOptions.visible = true
-      this.dialogOptions.currentRow = row
+      this.dialogOptions.title = "修改规则";
+      this.dialogOptions.currentComponent = row.ruleType === "知识拆分规则" ? "EditPromptRule" : "EditSplitRule";
+      this.dialogOptions.visible = true;
+      this.dialogOptions.currentRow = row;
     },
     // 处理删除规则
     handleDelete(row, index) {
       deleteRule([row.id])
         .then(() => {
-          this.tableData.splice(index, 1)
+          // 删除当前行
+          this.tableData.splice(index, 1);
         })
         .catch(err => {
           this.$notify.error({
-            title: '删除失败',
-            message: h('i', { style: 'color: teal' }, '删除时出现错误，稍后再试' + err)
-          })
-        })
+            title: "删除失败",
+            message: h("i", { style: "color: teal" }, "删除时出现错误，稍后再试" + err)
+          });
+        });
     },
     // 处理查询
     handleQuery() {
-      this.form.query = true
+      this.form.query = true;
     },
     // 处理重置
     handleReset() {
       this.form = {
         query: true,
         pickerOptions: void 0,
-        ruleType: '',
-        ruleName: '',
+        ruleType: "",
+        ruleName: "",
         createdDate: []
-      }
+      };
     },
     // 处理新增
     handleAdd() {
-      this.dialogOptions.title = '新增规则'
-      this.dialogOptions.visible = true
-      this.dialogOptions.currentComponent = "AddRules"
+      this.dialogOptions.title = "新增规则";
+      this.dialogOptions.visible = true;
+      this.dialogOptions.currentComponent = "AddRules";
     }
   }
-}
+};
 </script>
 
 <template>
@@ -206,7 +217,7 @@ export default {
             <el-col :span="8">
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
-                  <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"> </el-option>
+                  <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -214,22 +225,16 @@ export default {
             <el-col :span="8">
               <el-form-item label="规则名称">
                 <el-select v-model="form.ruleName" placeholder="请选择规则名称">
-                  <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"> </el-option>
+                  <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- 创建时间 -->
             <el-col :span="8">
               <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="form.createdDate"
-                  type="daterange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :picker-options="form.pickerOptions"
-                >
+                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
+                                start-placeholder="开始日期" end-placeholder="结束日期"
+                                :picker-options="form.pickerOptions">
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -252,14 +257,8 @@ export default {
       <!-- 分页 -->
       <el-row>
         <el-col :span="24" class="flex" style="justify-content: right;">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :hide-on-single-page="true"
-            :total="tableData.length"
-          >
+          <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
+                         :current-page="currentPage" :hide-on-single-page="true" :total="tableData.length">
           </el-pagination>
         </el-col>
       </el-row>
@@ -267,14 +266,8 @@ export default {
     <!-- 规则详情弹窗 -->
     <el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title">
       <!-- diglog 弹窗内容组件 -->
-      <component
-        class="container"
-        v-if="dialogOptions.visible"
-        :is="dialogOptions.currentComponent"
-        :data="tableData"
-                 :columns="columns"
-        :currentRow="dialogOptions.currentRow"
-      />
+      <component class="container" v-if="dialogOptions.visible" :is="dialogOptions.currentComponent" :data="tableData"
+                 :columns="columns" :currentRow="dialogOptions.currentRow" />
     </el-drawer>
   </div>
 </template>

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

@@ -1,51 +1,50 @@
 <script>
-import { getRuleDetail } from '@/api/rules/index'
-import { addPromptRule, updatePromptRule } from '@/api/rules/index'
+import { addPromptRule, getRuleDetail, updatePromptRule } from "@/api/rules/index";
 
 export default {
-  name: 'EditPromptRule',
+  name: "EditPromptRule",
   data() {
     return {
       // 规则名称、属性、属性描述、关键词、题词示例、提示词
       form: {
-        id: '',
-        ruleName: '',
-        createdDate: '',
+        id: "",
+        ruleName: "",
+        createdDate: "",
         ruleType: 2,
         ruleList: []
       }
-    }
+    };
   },
   props: {
     type: {
       type: String,
-      default: 'edit'
+      default: "edit"
     }
   },
-  inject: ['dialogOptions', 'tableData'],
+  inject: ["dialogOptions", "tableData"],
   methods: {
     handleAdd() {
       const payload = {
-        attribute: '',
-        attributeDesc: '',
-        keyword: '',
-        example: '',
-        prompt: ''
-      }
+        attribute: "",
+        attributeDesc: "",
+        keyword: "",
+        example: "",
+        prompt: ""
+      };
 
-      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();
       }
     },
     save() {
-      console.log('save this form ', this.form)
+      console.log("save this form ", this.form);
 
       // 判断是新增还是更新，新增调用 addPromptRule，更新调用 updatePromptRule
-      if (this.type === 'add') {
+      if (this.type === "add") {
         // 配置对应表单
         // 添加时，需要删除 id
         delete this.form.id;
@@ -56,48 +55,47 @@ export default {
 
         addPromptRule(this.form)
           .then(() => {
-            console.log('add prompt rule success')
-            this.dialogOptions.visible = false
+            this.dialogOptions.visible = false;
             // 可以添加成功提示
-            this.$message && this.$message.success('保存成功')
+            this.$message && this.$message.success("保存成功");
 
             // 向 tableData 最上面添加数据
-            this.tableData.unshift(this.form)
+            this.tableData.unshift(this.form);
           })
           .catch(err => {
-            console.error(`add prompt rule failed: ${err}`)
+            console.error(`add prompt rule failed: ${err}`);
             // 可以添加错误提示
-            this.$message && this.$message.error('保存失败')
-          })
+            this.$message && this.$message.error("保存失败");
+          });
       } else {
         updatePromptRule(this.form)
           .then(() => {
-            console.log('update prompt rule success')
-            this.dialogOptions.visible = false
+            console.log("update prompt rule success");
+            this.dialogOptions.visible = false;
             // 可以添加成功提示
-            this.$message && this.$message.success('保存成功')
+            this.$message && this.$message.success("保存成功");
           })
           .catch(err => {
-            console.error(`update prompt rule failed: ${err}`)
+            console.error(`update prompt rule failed: ${err}`);
             // 可以添加错误提示
-            this.$message && this.$message.error('保存失败')
-          })
+            this.$message && this.$message.error("保存失败");
+          });
       }
     }
   },
   beforeMount() {
     // 如果是新增，不去请求接口
-    if (this.type === 'add') {
-      return
+    if (this.type === "add") {
+      return;
     }
     // 获取当前行数据
-    const { currentRow } = this.dialogOptions
+    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 = {
@@ -106,13 +104,13 @@ export default {
           ruleName: content.ruleName,
           createdDate: content.createdDate,
           ruleList: Array.isArray(content.ruleList) ? content.ruleList : []
-        }
+        };
       })
       .catch(err => {
-        console.error('获取规则详情失败:', err)
-      })
+        console.error("获取规则详情失败:", err);
+      });
   }
-}
+};
 </script>
 
 <template>
@@ -121,7 +119,10 @@ 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.attribute"></el-input>
         </el-form-item>
@@ -142,7 +143,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 mt10" style="justify-content: space-between;">
       <div>
         <el-button type="primary" @click="handleAdd">+ 新增题词</el-button>
         <el-button type="info" @click="handleDelete">- 删除题词</el-button>
@@ -154,4 +155,3 @@ export default {
     </div>
   </div>
 </template>
-

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>