2026-03-31

角色管理页面【权限授权】对话框样式优化

src/views/modules/sys/role-add-or-update.vue

@@ -1,26 +1,32 @@
 <template>
-  <el-dialog class="sl-menu-item" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
+  <el-dialog class="sl-menu-item custom-role-dialog" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-row>
+      <div class="form-section">
+        <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item :label="buttons.roleName||'角色名称'" prop="roleName">
-            <el-input style="width: 100%" v-model="dataForm.roleName"></el-input>
+              <el-input style="width: 100%" v-model="dataForm.roleName" placeholder="请输入角色名称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item :label="buttons.remark||'备注'" prop="remark">
-            <el-input style="width: 100%" v-model="dataForm.remark" placeholder="备注"></el-input>
+              <el-input style="width: 100%" v-model="dataForm.remark" placeholder="请输入备注信息"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
-      <el-form-item size="mini" :label="buttons.authorize||'授权'">
+      </div>
+
+      <div class="auth-section">
+        <el-form-item size="mini" :label="buttons.authorize||'权限授权'">
           <el-row>
             <el-col :span="24">
               <el-input
-              placeholder="输入关键字进行过滤"
+                placeholder="输入菜单或按钮名称进行过滤"
                 v-model="filterText"
                 clearable
-              style="margin-bottom: 10px; width: 100%;">
+                prefix-icon="el-icon-search"
+                @keyup.enter.native.stop
+                class="filter-input">
               </el-input>
             </el-col>
           </el-row>
@@ -47,6 +53,7 @@
             </el-col>
           </el-row>
         </el-form-item>
+      </div>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">{{ buttons.close || '关闭' }}</el-button>
@@ -119,7 +126,7 @@ export default {
         if (node.children && node.children.length > 0) {
           let normalChildren = []
           for (let child of node.children) {
-            if (child.specificType === 'button' || child.type === 2) {
+            if (child.type === 2) {
               node.buttonList.push(child)
             } else {
               normalChildren.push(child)
@@ -273,22 +280,39 @@ export default {
 </script>
 <style lang="scss">
 
+.custom-role-dialog {
+  .el-dialog__body {
+    padding: 20px 30px;
+  }
+  .form-section {
+    margin-bottom: 10px;
+  }
+  .auth-section {
+    border-top: 1px solid #ebeef5;
+    padding-top: 20px;
+  }
+  .filter-input {
+    margin-bottom: 15px;
+  }
   .down-tree {
     height: 400px;
     display: block;
     overflow-y: auto;
-  border: 1px solid #dcdfe6;
+    border: 1px solid #ebeef5;
     border-radius: 4px;
     padding: 10px;
-  background-color: #fff;
+    background-color: #fafafa;
+  }
+  .el-tree {
+    background-color: transparent;
   }
-
   .custom-tree-node {
     .el-checkbox {
       margin-right: 15px;
     }
     .el-checkbox__label {
       padding-left: 5px;
+      color: #606266;
     }
   }
 
@@ -299,4 +323,8 @@ export default {
     padding-top: 4px;
     padding-bottom: 4px;
   }
+  .el-tree-node__content:hover {
+    background-color: #f0f7ff;
+  }
+}
 </style>