重构搜索工具栏样式，统一DomainView、TeamConfigView和UserView组件中的搜索功能布局，提升用户体验和界面一致性。

src/views/DomainView.vue

@@ -417,32 +417,36 @@ onMounted(() => {
     <!-- 主要内容 -->
     <div v-else>
       <!-- 操作栏 -->
-      <div class="operation-bar">
-        <div class="operation-left">
+      <div class="search-toolbar">
+        <div class="toolbar-left">
           <Button icon="pi pi-refresh" @click="refreshData" size="small" label="刷新" />
           <Button v-if="canCreate" icon="pi pi-plus" @click="onEdit()" label="添加" size="small" />
         </div>
-        <div class="operation-right">
-          <InputText
-            v-model="searchForm.domain"
-            placeholder="域名搜索"
-            size="small"
-            class="search-input"
-            @keyup.enter="handleSearch"
-          />
-          <Select
-            v-if="isAdmin"
-            v-model="searchForm.teamId"
-            :options="teamOptions"
-            optionLabel="label"
-            optionValue="value"
-            placeholder="选择团队"
-            size="small"
-            class="team-select"
-            clearable
-          />
-          <Button icon="pi pi-search" @click="handleSearch" label="搜索" size="small" severity="secondary" />
-          <Button icon="pi pi-refresh" @click="handleRefresh" label="重置" size="small" />
+        <div class="toolbar-right">
+          <div class="search-group">
+            <InputText
+              v-model="searchForm.domain"
+              placeholder="域名搜索"
+              size="small"
+              class="search-field"
+              @keyup.enter="handleSearch"
+            />
+            <Select
+              v-if="isAdmin"
+              v-model="searchForm.teamId"
+              :options="teamOptions"
+              optionLabel="label"
+              optionValue="value"
+              placeholder="选择团队"
+              size="small"
+              class="team-field"
+              clearable
+            />
+          </div>
+          <div class="action-group">
+            <Button icon="pi pi-search" @click="handleSearch" label="搜索" size="small" severity="secondary" />
+            <Button icon="pi pi-refresh" @click="handleRefresh" label="重置" size="small" />
+          </div>
         </div>
       </div>
 
@@ -792,47 +796,80 @@ onMounted(() => {
   background: rgba(239, 68, 68, 0.1) !important;
 }
 
-/* 操作栏样式 */
-.operation-bar {
+/* 搜索工具栏样式 */
+.search-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
 }
 
-.operation-left {
+.toolbar-left {
   display: flex;
   gap: 8px;
+  align-items: center;
 }
 
-.operation-left .p-button {
-  font-size: 12px;
-  padding: 4px 8px;
+.toolbar-left .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
 }
 
-.operation-right {
+.toolbar-right {
   display: flex;
-  gap: 6px;
+  gap: 12px;
+  align-items: center;
   flex-wrap: wrap;
+}
+
+.search-group {
+  display: flex;
+  gap: 8px;
   align-items: center;
 }
 
-.operation-right .p-button {
-  font-size: 12px;
-  padding: 4px 8px;
+.search-field {
+  width: 140px;
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  transition: all 0.2s ease;
 }
 
-.search-input {
-  width: 120px;
-  font-size: 12px;
-  padding: 4px 8px;
+.search-field:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
-.team-select {
-  width: 120px;
-  font-size: 12px;
+.team-field {
+  width: 160px;
+  font-size: 13px;
+}
+
+.team-field .p-select {
+  border-radius: 6px;
+}
+
+.action-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.action-group .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
 }
 
 /* 响应式设计 */
@@ -865,52 +902,54 @@ onMounted(() => {
     margin-top: 8px;
   }
 
-  /* 移动端操作栏适配 */
-  .operation-bar {
+  /* 移动端搜索工具栏适配 */
+  .search-toolbar {
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
     align-items: stretch;
+    padding: 12px;
   }
 
-  .operation-left {
+  .toolbar-left {
     justify-content: center;
     gap: 8px;
   }
 
-  .operation-left .p-button {
+  .toolbar-left .p-button {
     flex: 1;
-    max-width: 100px;
-    font-size: 12px;
-    padding: 6px 12px;
+    max-width: 120px;
+    font-size: 13px;
+    padding: 8px 12px;
   }
 
-  .operation-right {
-    justify-content: center;
+  .toolbar-right {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .search-group {
     flex-direction: column;
     gap: 8px;
   }
 
-  .search-input,
-  .team-select {
+  .search-field,
+  .team-field {
     width: 100%;
-    max-width: 280px;
     font-size: 14px;
-    padding: 8px 12px;
+    padding: 10px 12px;
   }
 
-  .operation-right .p-button {
-    width: 100%;
-    max-width: 280px;
-    font-size: 12px;
-    padding: 6px 12px;
+  .action-group {
+    justify-content: center;
+    gap: 8px;
   }
 
-  /* 移动端按钮组优化 */
-  .operation-right .p-button:nth-child(3),
-  .operation-right .p-button:nth-child(4) {
-    display: inline-flex;
-    width: calc(50% - 4px);
-    max-width: 136px;
+  .action-group .p-button {
+    flex: 1;
+    max-width: 140px;
+    font-size: 13px;
+    padding: 8px 12px;
   }
 }
 </style>

src/views/TeamConfigView.vue

@@ -522,44 +522,48 @@ onMounted(() => {
         showGridlines
       >
         <template #header>
-          <div class="flex flex-wrap items-center justify-between gap-2">
-            <div class="flex gap-2">
+          <div class="search-toolbar">
+            <div class="toolbar-left">
               <Button icon="pi pi-refresh" @click="refreshData" size="small" label="刷新" />
               <Button v-if="canCreate" icon="pi pi-plus" @click="onEdit()" label="添加" size="small" />
             </div>
-            <div class="flex gap-2">
-              <InputText
-                v-model="searchForm.name"
-                placeholder="配置名称"
-                size="small"
-                class="w-32"
-                @keyup.enter="handleSearch"
-              />
-              <Select
-                v-model="searchForm.type"
-                :options="configTypes"
-                optionLabel="label"
-                optionValue="value"
-                placeholder="配置类型"
-                size="small"
-                class="w-32"
-                clearable
-              />
-              <Select
-                v-if="isAdmin"
-                v-model="searchForm.teamId"
-                :options="teamOptions"
-                optionLabel="label"
-                optionValue="value"
-                placeholder="选择团队"
-                size="small"
-                class="w-32"
-                clearable
-                filter
-                filterPlaceholder="搜索团队"
-              />
-              <Button icon="pi pi-search" @click="handleSearch" label="搜索" size="small" severity="secondary" />
-              <Button icon="pi pi-refresh" @click="handleRefresh" label="重置" size="small" />
+            <div class="toolbar-right">
+              <div class="search-group">
+                <InputText
+                  v-model="searchForm.name"
+                  placeholder="配置名称"
+                  size="small"
+                  class="search-field"
+                  @keyup.enter="handleSearch"
+                />
+                <Select
+                  v-model="searchForm.type"
+                  :options="configTypes"
+                  optionLabel="label"
+                  optionValue="value"
+                  placeholder="配置类型"
+                  size="small"
+                  class="type-field"
+                  clearable
+                />
+                <Select
+                  v-if="isAdmin"
+                  v-model="searchForm.teamId"
+                  :options="teamOptions"
+                  optionLabel="label"
+                  optionValue="value"
+                  placeholder="选择团队"
+                  size="small"
+                  class="team-field"
+                  clearable
+                  filter
+                  filterPlaceholder="搜索团队"
+                />
+              </div>
+              <div class="action-group">
+                <Button icon="pi pi-search" @click="handleSearch" label="搜索" size="small" severity="secondary" />
+                <Button icon="pi pi-refresh" @click="handleRefresh" label="重置" size="small" />
+              </div>
             </div>
           </div>
         </template>
@@ -768,4 +772,143 @@ onMounted(() => {
   color: #7c3aed;
   font-weight: 500;
 }
+
+/* 搜索工具栏样式 */
+.search-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar-left .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.toolbar-right {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-field {
+  width: 140px;
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  transition: all 0.2s ease;
+}
+
+.search-field:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.type-field {
+  width: 140px;
+  font-size: 13px;
+}
+
+.type-field .p-select {
+  border-radius: 6px;
+}
+
+.team-field {
+  width: 160px;
+  font-size: 13px;
+}
+
+.team-field .p-select {
+  border-radius: 6px;
+}
+
+.action-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.action-group .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  /* 移动端搜索工具栏适配 */
+  .search-toolbar {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+    padding: 12px;
+  }
+
+  .toolbar-left {
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .toolbar-left .p-button {
+    flex: 1;
+    max-width: 120px;
+    font-size: 13px;
+    padding: 8px 12px;
+  }
+
+  .toolbar-right {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .search-group {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .search-field,
+  .type-field,
+  .team-field {
+    width: 100%;
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+
+  .action-group {
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .action-group .p-button {
+    flex: 1;
+    max-width: 140px;
+    font-size: 13px;
+    padding: 8px 12px;
+  }
+}
 </style>

src/views/UserView.vue

@@ -41,6 +41,12 @@ const handlePageChange = (event) => {
   fetchData()
 }
 
+const handleRefresh = () => {
+  search.value = ''
+  tableData.value.metadata.page = 0
+  fetchData()
+}
+
 const formatDate = (date) => {
   return useDateFormat(new Date(date), 'YYYY-MM-DD HH:mm:ss').value
 }
@@ -183,23 +189,32 @@ onMounted(() => {
       scrollable
     >
       <template #header>
-        <div class="flex flex-wrap items-center">
-          <Button icon="pi pi-refresh" @click="fetchData" label="刷新" size="small" />
-          <Button
-            icon="pi pi-plus"
-            @click="openNewUserDialog"
-            label="新增用户"
-            severity="success"
-            size="small"
-            class="ml-2"
-          />
-          <div class="flex-1"></div>
-          <IconField>
-            <InputIcon>
-              <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="search" placeholder="搜素" />
-          </IconField>
+        <div class="search-toolbar">
+          <div class="toolbar-left">
+            <Button icon="pi pi-refresh" @click="fetchData" size="small" label="刷新" />
+            <Button
+              icon="pi pi-plus"
+              @click="openNewUserDialog"
+              label="新增用户"
+              severity="success"
+              size="small"
+            />
+          </div>
+          <div class="toolbar-right">
+            <div class="search-group">
+              <InputText
+                v-model="search"
+                placeholder="搜索用户"
+                size="small"
+                class="search-field"
+                @keyup.enter="fetchData"
+              />
+            </div>
+            <div class="action-group">
+              <Button icon="pi pi-search" @click="fetchData" label="搜索" size="small" severity="secondary" />
+              <Button icon="pi pi-refresh" @click="handleRefresh" label="重置" size="small" />
+            </div>
+          </div>
         </div>
       </template>
       <Column field="id" header="ID"></Column>
@@ -329,3 +344,124 @@ onMounted(() => {
     </Dialog>
   </div>
 </template>
+
+<style scoped>
+/* 搜索工具栏样式 */
+.search-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar-left .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.toolbar-right {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-field {
+  width: 200px;
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  transition: all 0.2s ease;
+}
+
+.search-field:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.action-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.action-group .p-button {
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  /* 移动端搜索工具栏适配 */
+  .search-toolbar {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+    padding: 12px;
+  }
+
+  .toolbar-left {
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .toolbar-left .p-button {
+    flex: 1;
+    max-width: 120px;
+    font-size: 13px;
+    padding: 8px 12px;
+  }
+
+  .toolbar-right {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .search-group {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .search-field {
+    width: 100%;
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+
+  .action-group {
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .action-group .p-button {
+    flex: 1;
+    max-width: 140px;
+    font-size: 13px;
+    padding: 8px 12px;
+  }
+}
+</style>