refactor(knowledge): 优化知识拆分和题词规则对话框样式

- 调整对话框宽度为30%
-移除表单内联样式- 统一输入框大小为medium
- 优化标题样式和布局
- 调整部分样式以提升用户体验

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

@@ -8,7 +8,7 @@
           : '新增知识拆分规则'
       "
       :visible.sync="dialogVisible"
-      size="40%"
+      size="30%"
       :before-close="handleClose"
     >
       <div class="content">
@@ -17,7 +17,6 @@
           :model="form"
           :rules="rules"
           label-position="top"
-          inline
         >
           <div class="section-title">基本信息</div>
           <el-row
@@ -35,9 +34,11 @@
                 style="width: 100%;"
               >
                 <el-input
+                  size="medium"
                   :disabled="isPreview"
                   v-model="form.ruleName"
                   placeholder="请输入规则名称"
+                  style="width: 100%"
                 />
               </el-form-item>
             </el-col>
@@ -46,7 +47,9 @@
             <el-col span="24" :class="isPreview ? 'full-width-item' : ''">
               <el-form-item label="规则名称" prop="ruleName">
                 <el-input
+                  style="width: 100%"
                   :disabled="isPreview"
+                  size="medium"
                   v-model="form.ruleName"
                   placeholder="请输入规则名称"
                 />
@@ -58,6 +61,7 @@
                 @change="queryExistingRules"
                 filterable
                 clearable
+                size="medium"
                 placeholder="查询并导入现有规则"
               >
                 <el-option
@@ -74,6 +78,7 @@
             <el-input
               :disabled="isPreview"
               v-model="form.description"
+              size="medium"
               placeholder="请输入规则备注"
               type="textarea"
             />
@@ -114,6 +119,7 @@
                 :disabled="isPreview"
                 v-model="rule.titleLevel"
                 placeholder="请选择标题级别"
+                size="medium"
               >
                 <el-option
                   v-for="item in options"
@@ -131,6 +137,7 @@
               <el-input
                 :disabled="isPreview"
                 type="textarea"
+                size="medium"
                 v-model="rule.ruleRegex"
                 placeholder="请输入规则表达式"
               ></el-input>
@@ -143,6 +150,7 @@
               <el-input
                 :disabled="isPreview"
                 type="textarea"
+                size="medium"
                 v-model="rule.description"
                 placeholder="请输入规则备注"
               ></el-input>
@@ -389,6 +397,23 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .delete-btn {
+    color: #f78989;
+  }
+
+  .copy-btn {
+    color: #70b936;
+    font-size: 14px;
+  }
+}
 .content {
   font-family: PingFangSC, PingFang SC;
   overflow: hidden;
@@ -398,8 +423,8 @@ export default {
 
     .section-title {
       margin-top: 20px;
-      font-size: 16px;
-      font-weight: 500;
+      font-size: 15px;
+      font-weight: 600;
       color: #303133;
       display: flex;
       justify-content: space-between;

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

@@ -2,76 +2,178 @@
   <div>
     <!-- 添加预处理结果预览对话框 -->
     <el-drawer
-      :title="currentId ? (isPreview ? '预览' : '编辑') + '知识题词规则' : '新增知识题词规则'"
+      :title="
+        currentId
+          ? (isPreview ? '预览' : '编辑') + '知识题词规则'
+          : '新增知识题词规则'
+      "
       :visible.sync="dialogVisible"
-      size="40%"
+      size="30%"
       :before-close="handleClose"
     >
       <div class="content">
-        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+        <el-form
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          label-position="top"
+        >
           <div class="form-section">
-            <div class="section-title">基本信息</div>
-            <el-row :gutter="20">
-              <el-col :span="isPreview ? 24 : 12">
+            <div class="section-title" style="margin-top: 0">基本信息</div>
+            <el-row :gutter="20" class="flex " style="align-items: end;">
+              <el-col :span="isPreview ? 24 : 24">
                 <el-form-item label="规则名称" prop="ruleName">
-                  <el-input :disabled="isPreview" v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
+                  <el-input
+                    size="medium"
+                    :disabled="isPreview"
+                    v-model="form.ruleName"
+                    placeholder="请输入规则名称"
+                  ></el-input>
                 </el-form-item>
               </el-col>
-              <el-col v-if="!isPreview" :span="12">
-                <el-select v-model="searchValue" @change="queryExistingRules" filterable clearable placeholder="查询并导入现有规则">
-                  <el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName" :value="item.id"> </el-option>
+              <el-col
+                v-if="!isPreview"
+                :span="14"
+                style="padding-bottom: 24px;"
+              >
+                <el-select
+                  v-model="searchValue"
+                  @change="queryExistingRules"
+                  filterable
+                  clearable
+                  size="medium"
+                  placeholder="查询并导入现有规则"
+                >
+                  <el-option
+                    v-for="item in ruleList"
+                    :key="item.id"
+                    :label="item.ruleName"
+                    :value="item.id"
+                  >
+                  </el-option>
                 </el-select>
               </el-col>
             </el-row>
-            <p v-if="!isPreview" class="tips">支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</p>
+            <p v-if="!isPreview" class="tips">
+              支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头
+            </p>
             <el-form-item label="备注" prop="description">
-              <el-input :disabled="isPreview" v-model="form.description" placeholder="请输入规则备注" type="textarea" />
+              <el-input
+                :disabled="isPreview"
+                size="medium"
+                v-model="form.description"
+                placeholder="请输入规则备注"
+                type="textarea"
+              />
             </el-form-item>
           </div>
 
-          <div class="form-section" v-for="(rule, index) in form.ruleList" :key="index">
+          <div
+            class="form-section"
+            v-for="(rule, index) in form.ruleList"
+            :key="index"
+          >
             <div class="section-title">
               拆分规则 {{ index + 1 }}
               <div>
-                <el-button v-if="!isPreview && form.ruleList.length > 1" type="text" class="delete-btn" @click="removeRule(index)">
+                <el-button
+                  v-if="!isPreview && form.ruleList.length > 1"
+                  type="text"
+                  class="delete-btn"
+                  @click="removeRule(index)"
+                >
                   <i class="el-icon-delete"></i> 删除
                 </el-button>
-                <el-button v-if="!isPreview" type="text" class="copy-btn" @click="addValidationRules(index)">
+                <el-button
+                  v-if="!isPreview"
+                  type="text"
+                  class="copy-btn"
+                  @click="addValidationRules(index)"
+                >
                   <i class="el-icon-copy-document"></i> 复制
                 </el-button>
               </div>
             </div>
-            <el-form-item label="属性" :prop="'ruleList.' + index + '.attribute'">
-              <el-input v-model="rule.attribute" placeholder="请输入属性" :disabled="isPreview"></el-input>
+            <el-form-item
+              label="属性"
+              :prop="'ruleList.' + index + '.attribute'"
+            >
+              <el-input
+                v-model="rule.attribute"
+                size="medium"
+                placeholder="请输入属性"
+                :disabled="isPreview"
+              ></el-input>
             </el-form-item>
-            <el-form-item label="属性描述" :prop="'ruleList.' + index + '.attributeDesc'">
-              <el-input v-model="rule.attributeDesc" placeholder="请输入属性描述" :disabled="isPreview"></el-input>
+            <el-form-item
+              label="属性描述"
+              :prop="'ruleList.' + index + '.attributeDesc'"
+            >
+              <el-input
+                v-model="rule.attributeDesc"
+                placeholder="请输入属性描述"
+                size="medium"
+                :disabled="isPreview"
+              ></el-input>
             </el-form-item>
-            <el-form-item label="关键词" :prop="'ruleList.' + index + '.keyword'">
-              <el-input v-model="rule.keyword" placeholder="请输入关键词" :disabled="isPreview"></el-input>
+            <el-form-item
+              label="关键词"
+              :prop="'ruleList.' + index + '.keyword'"
+            >
+              <el-input
+                v-model="rule.keyword"
+                placeholder="请输入关键词"
+                size="medium"
+                :disabled="isPreview"
+              ></el-input>
             </el-form-item>
-            <el-form-item label="题词示例" :prop="'ruleList.' + index + '.example'">
-              <el-input v-model="rule.example" placeholder="请输入题词示例" :disabled="isPreview"></el-input>
+            <el-form-item
+              label="题词示例"
+              :prop="'ruleList.' + index + '.example'"
+            >
+              <el-input
+                v-model="rule.example"
+                placeholder="请输入题词示例"
+                :disabled="isPreview"
+              ></el-input>
             </el-form-item>
-            <el-form-item label="提示词" :prop="'ruleList.' + index + '.prompt'">
-              <el-input v-model="rule.prompt" placeholder="请输入提示词" :disabled="isPreview"></el-input>
+            <el-form-item
+              label="提示词"
+              :prop="'ruleList.' + index + '.prompt'"
+            >
+              <el-input
+                v-model="rule.prompt"
+                size="medium"
+                placeholder="请输入提示词"
+                :disabled="isPreview"
+              ></el-input>
             </el-form-item>
           </div>
           <div class="add-rule-btn" v-if="!isPreview">
-            <el-button type="primary" size="medium" @click="addSplitRule"> <i class="el-icon-plus"></i> 新增题词规则 </el-button>
+            <el-button type="primary" size="medium" @click="addSplitRule">
+              <i class="el-icon-plus"></i> 新增题词规则
+            </el-button>
           </div>
         </el-form>
       </div>
       <div class="drawer-footer" v-if="!isPreview">
         <el-button size="medium" @click="handleClose">取 消</el-button>
-        <el-button type="primary" size="medium" @click="handleSubmit">保 存</el-button>
+        <el-button type="primary" size="medium" @click="handleSubmit"
+          >保 存</el-button
+        >
       </div>
     </el-drawer>
   </div>
 </template>
 
 <script>
-import { addRuleExtract, getRuleDetail, updateRuleExtractSplit, getRulesList } from '@/api/generatedApi'
+import {
+  addRuleExtract,
+  getRuleDetail,
+  updateRuleExtractSplit,
+  getRulesList
+} from '@/api/generatedApi'
 
 export default {
   name: 'AddRule',
@@ -125,10 +227,16 @@ export default {
         ruleName: [
           { required: true, message: '请输入规则名称', trigger: 'blur' },
           { max: 50, message: '长度不能超过50个字符', trigger: 'blur' },
-          { pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/, message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头', trigger: 'blur' }
+          {
+            pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/,
+            message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头',
+            trigger: 'blur'
+          }
         ],
         'ruleList.0.attribute': [{ required: true, message: '请输入属性' }],
-        'ruleList.0.attributeDesc': [{ 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: '请输入提示词' }]
@@ -177,7 +285,13 @@ export default {
         if (!this.currentId) {
           this.form.ruleList.forEach(item => {
             Object.keys(item).forEach(key => {
-              if (key !== 'attribute' && key !== 'attributeDesc' && key !== 'keyword' && key !== 'example' && key !== 'prompt') {
+              if (
+                key !== 'attribute' &&
+                key !== 'attributeDesc' &&
+                key !== 'keyword' &&
+                key !== 'example' &&
+                key !== 'prompt'
+              ) {
                 delete item[key]
               }
             })
@@ -198,11 +312,21 @@ export default {
     // 动态添加验证规则
     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' }]
+      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 }
     },
     // 复制
@@ -231,11 +355,21 @@ export default {
       }
       // 重新生成验证规则
       this.form.ruleList.forEach((_, newIndex) => {
-        newRules[`ruleList.${newIndex}.attribute`] = [{ required: true, message: '请输入属性', trigger: 'change' }]
-        newRules[`ruleList.${newIndex}.attributeDesc`] = [{ required: true, message: '请输入属性描述', trigger: 'blur' }]
-        newRules[`ruleList.${newIndex}.keyword`] = [{ required: true, message: '请输入关键词', trigger: 'change' }]
-        newRules[`ruleList.${newIndex}.example`] = [{ required: true, message: '请输入题词示例', trigger: 'blur' }]
-        newRules[`ruleList.${newIndex}.prompt`] = [{ required: true, message: '请输入提示词', trigger: 'change' }]
+        newRules[`ruleList.${newIndex}.attribute`] = [
+          { required: true, message: '请输入属性', trigger: 'change' }
+        ]
+        newRules[`ruleList.${newIndex}.attributeDesc`] = [
+          { required: true, message: '请输入属性描述', trigger: 'blur' }
+        ]
+        newRules[`ruleList.${newIndex}.keyword`] = [
+          { required: true, message: '请输入关键词', trigger: 'change' }
+        ]
+        newRules[`ruleList.${newIndex}.example`] = [
+          { required: true, message: '请输入题词示例', trigger: 'blur' }
+        ]
+        newRules[`ruleList.${newIndex}.prompt`] = [
+          { required: true, message: '请输入提示词', trigger: 'change' }
+        ]
       })
       this.rules = newRules
     },
@@ -255,7 +389,9 @@ export default {
               this.$emit('getDataList')
             })
             .catch(err => {
-              this.$message.error((this.currentId ? '修改' : '新增') + '失败：' + err.message)
+              this.$message.error(
+                (this.currentId ? '修改' : '新增') + '失败：' + err.message
+              )
             })
         } else {
           this.$message.error('请填写完整所有必填项')
@@ -274,20 +410,13 @@ export default {
 
 <style scoped lang="scss">
 .content {
-  padding: 20px;
-  height: calc(100vh - 120px);
+  font-family: PingFangSC, PingFang SC;
   overflow-y: auto;
-
   .form-section {
-    margin-bottom: 24px;
-    padding: 16px;
-    background: #f8f9fa;
     border-radius: 4px;
-
     .section-title {
-      font-size: 16px;
-      font-weight: 500;
-      margin-bottom: 16px;
+      font-size: 15px;
+      font-weight: 600;
       color: #303133;
       display: flex;
       justify-content: space-between;
@@ -313,9 +442,9 @@ export default {
   }
 
   .tips {
-    font-size: 14px;
+    margin-top: 10px;
+    font-size: 12px;
     color: #999;
-    margin-left: 100px;
     margin-bottom: 20px;
   }
 
@@ -325,7 +454,7 @@ export default {
 
   .add-rule-btn {
     text-align: center;
-    margin-top: 20px;
+    margin-bottom: 60px;
   }
 }