style: 优化用户管理搜索栏样式

continew-org · Oct 13, 2024 · 84ad0d5 · 84ad0d5
1 parent 1382346
commit 84ad0d5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/src/components/GiForm/src/GiForm.vue b/src/components/GiForm/src/GiForm.vue
@@ -190,7 +190,7 @@
         </a-col>
       </template>
       <a-col v-if="!options.btns?.hide" :span="options.btns?.span || 12" v-bind="options.btns?.col">
-        <a-space wrap :size="[8, 16]">
+        <a-space wrap :size="[8, 16]" style="flex-wrap: nowrap">
           <slot name="suffix">
             <a-button type="primary" @click="emit('search')">
               <template #icon><icon-search /></template>

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
@@ -101,7 +101,7 @@ import UserResetPwdModal from './UserResetPwdModal.vue'
 import { type UserQuery, type UserResp, deleteUser, exportUser, listUser } from '@/apis/system'
 import type { Columns, Options } from '@/components/GiForm'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
-import { useBreakpointIndex, useDownload, useTable } from '@/hooks'
+import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import getAvatar from '@/utils/avatar'
 import has from '@/utils/has'
@@ -122,14 +122,9 @@ const {
 
 const options: Options = reactive({
   form: { layout: 'inline' },
-  col: { xs: 24, sm: 24, md: 5, lg: 5, xl: 5, xxl: 5 },
-  btns: { col: { xs: 24, sm: 24, md: 7, lg: 7, xl: 7, xxl: 7 } },
-  fold: { enable: true, index: 2, defaultCollapsed: true }
-})
-
-useBreakpointIndex((index) => {
-  // 自适应折叠，让折叠后始终一行显示
-  options.fold && (options.fold.index = index)
+  col: { xs: 24, sm: 24, md: 5, lg: 4, xl: 4, xxl: 4 },
+  btns: { col: { xs: 24, sm: 24, md: 7, lg: 8, xl: 6, xxl: 6 } },
+  fold: { enable: true, index: 1, defaultCollapsed: true }
 })
 
 const queryFormColumns: Columns = reactive([
@@ -140,7 +135,7 @@ const queryFormColumns: Columns = reactive([
       hideLabel: true
     },
     props: {
-      placeholder: '请输入用户名/昵称/描述',
+      placeholder: '用户名/昵称/描述',
       allowClear: true
     }
   },
@@ -162,7 +157,7 @@ const queryFormColumns: Columns = reactive([
     item: {
       hideLabel: true
     },
-    col: { xs: 24, sm: 24, md: 10, lg: 10, xl: 10, xxl: 10 }
+    col: { xs: 24, sm: 24, md: 10, lg: 9.5, xl: 9, xxl: 8 }
   }
 ])