fix: 优化搜索栏样式占用空间

src/views/role-management/components/EditForm.vue

@@ -107,8 +107,10 @@ const formRules = ref<FormRules>({
 
 // 监听可见性变化
 watch(() => props.visible, (newVisible) => {
-  currentSelected.value = null
-  resetForm()
+  if(!newVisible){
+    currentSelected.value = null
+    resetForm()
+  }
 })
 
 

src/views/role-management/components/SearchForm.vue

@@ -53,19 +53,11 @@ function handleClear() {
 </script>
 
 <template>
-  <FaSearchBar :showToggle="false">
-    <ElForm ref="formRef" :model="searchParams" inline label-width="80px">
-      <ElRow :gutter="16">
-        <!-- 基础搜索 -->
-        <ElCol :span="24">
-          <ElFormItem label="名称" prop="nameOrTags" label-width="120">
-            <ElInput v-model="searchParams.nameOrTags" placeholder="请输入" clearable
+  <ElForm  :inline="true"  ref="formRef" :model="searchParams" label-width="80px">
+      <ElFormItem label="名称" prop="nameOrTags" label-width="120">
+          <ElInput v-model="searchParams.nameOrTags" placeholder="请输入" clearable
               @clear="handleClear" />
           </ElFormItem>
-          <!-- <ElFormItem label="tags" prop="nameOrTags" label-width="120">
-            <ElInput v-model="searchParams.nameOrTags" placeholder="请输入" clearable
-              @clear="handleClear" />
-          </ElFormItem> -->
           <ElFormItem>
             <ElButton type="primary" :icon="Search" :loading="loading" @click="handleSearch">
               查询
@@ -74,8 +66,5 @@ function handleClear() {
               重置
             </ElButton>
           </ElFormItem>
-        </ElCol>
-      </ElRow>
     </ElForm>
-  </FaSearchBar>
 </template>

src/views/role-management/index.vue

@@ -146,11 +146,9 @@ onMounted(async () => {
 
 <template>
   <div class="absolute-container">
-    <FaPageMain>
-      <ElCard shadow="never">
-        <SearchForm v-model="searchParams" :loading="loading" @search="handleSearch" @reset="handleReset" />
-      </ElCard>
-    </FaPageMain>
+    <div class="p-4 pb-0 bg-white">
+      <SearchForm v-model="searchParams" :loading="loading" @search="handleSearch" @reset="handleReset" />
+    </div>
 
     <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
       <div class="pb-4">

src/views/voice-management/components/SearchForm.vue

@@ -54,29 +54,25 @@ function handleClear() {
 </script>
 
 <template>
-  <FaSearchBar :showToggle="false">
-    <ElForm ref="formRef" :model="searchParams" inline label-width="80px">
-      <ElRow :gutter="16">
-        <!-- 基础搜索 -->
-        <ElCol :span="24">
-          <ElFormItem label="名称" prop="name" label-width="120">
+  <ElForm ref="formRef" :model="searchParams" inline label-width="80px">
+      <ElFormItem label="名称" prop="name" label-width="120" >
             <ElInput v-model="searchParams.name" placeholder="请输入" clearable @clear="handleClear" />
           </ElFormItem>
-          <ElFormItem label="性别" prop="gender" label-width="120">
+          <ElFormItem label="性别" prop="gender" label-width="120" >
             <ElSelect v-model="searchParams.gender" style="width: 120px;">
               <ElOption :value="-1" label="全部">全部</ElOption>
               <ElOption :value="1" label="女">女</ElOption>
               <ElOption :value="2" label="男">男</ElOption>
             </ElSelect>
           </ElFormItem>
-          <ElFormItem label="类型" prop="type" label-width="120">
+          <ElFormItem label="类型" prop="type" label-width="120" >
             <ElSelect v-model="searchParams.type" style="width: 120px;">
               <ElOption :value="1" label="系统">系统</ElOption>
               <ElOption :value="2" label="系统克隆">系统克隆</ElOption>
               <ElOption :value="3" label="用户">用户</ElOption>
             </ElSelect>
           </ElFormItem>
-          <ElFormItem>
+          <ElFormItem >
             <ElButton type="primary" :icon="Search" :loading="loading" @click="handleSearch">
               查询
             </ElButton>
@@ -84,8 +80,5 @@ function handleClear() {
               重置
             </ElButton>
           </ElFormItem>
-        </ElCol>
-      </ElRow>
     </ElForm>
-  </FaSearchBar>
 </template>

src/views/voice-management/index.vue

@@ -181,11 +181,9 @@ onMounted(async () => {
 
 <template>
   <div class="absolute-container">
-    <FaPageMain class="mb-0">
-      <ElCard shadow="never">
-        <SearchForm v-model="searchParams" @search="handleSearch" @reset="handleReset"></SearchForm>
-      </ElCard>
-    </FaPageMain>
+    <div class="p-4 pb-0 bg-white">
+      <SearchForm v-model="searchParams" @search="handleSearch" @reset="handleReset"></SearchForm>
+    </div>
     <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
       <div class="pb-4">
         <ElSpace>