修复查询条件标题和控件重叠问题

- 添加search-content容器使用flex-direction: column布局
- 确保查询条件标题和查询控件之间有适当的间距
- 查询条件标题和查询控件现在不再重叠

vue-frontend/src/components/RoleManagement.vue

@@ -4,10 +4,11 @@
     
     <!-- 查询条件 -->
     <div class="search-section">
-      <h3>查询条件</h3>
-      <el-form :model="queryForm" class="search-form">
-        <!-- 第一行（默认显示，3个控件 + 按钮） -->
-        <div class="search-row">
+      <div class="search-content">
+        <h3>查询条件</h3>
+        <el-form :model="queryForm" class="search-form">
+          <!-- 第一行（默认显示，3个控件 + 按钮） -->
+          <div class="search-row">
           <el-form-item label="角色名称">
             <el-input
               v-model="queryForm.roleName"
@@ -25,6 +26,7 @@
         </div>
       </el-form>
     </div>
+    </div>
     
     <!-- 操作按钮 -->
     <div class="action-section">
@@ -719,12 +721,15 @@ export default {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.search-content {
+  display: flex;
+  flex-direction: column;
+}
+
 .search-section h3 {
   margin: 0 0 12px 0;
   font-size: 15px;
   color: #606266;
-  display: block;
-  clear: both;
 }
 
 .search-form {
@@ -748,7 +753,7 @@ export default {
 .search-actions {
   display: flex;
   gap: 8px;
-  margin-left: 12px;
+  margin-left: auto;
 }
 
 .action-section {