feat: improve the styles of the data list filter area on the mobile d…

…evices (#87)

同步 <halo-dev/halo#4587> 中的数据列表过滤器区域的样式改进。
```release-note
同步移动设备上数据列表过滤器区域的样式改进
```

console/src/views/HomeView.vue

@@ -242,9 +242,9 @@ const handleModalClose = () => {
  <template #header>
  <div class="block w-full bg-gray-50 px-4 py-3">
  <div
- class="relative flex flex-col items-start sm:flex-row sm:items-center"
+ class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
  >
- <div class="mr-4 hidden items-center sm:flex">
+ <div class="hidden items-center sm:flex">
  <input
  v-model="checkedAll"
  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -274,34 +274,32 @@ const handleModalClose = () => {
  </VButton>
  </VSpace>
  </div>
- <div class="mt-4 flex sm:mt-0">
- <VSpace spacing="lg">
- <FilterCleanButton
- v-if="selectedLinkedStatusItem != linkedStatusItems[0].value"
- @click="selectedLinkedStatusItem = linkedStatusItems[0].value"
- />
- <FilterDropdown
- v-model="selectedLinkedStatusItem"
- :label="$t('core.common.filters.labels.status')"
- :items="linkedStatusItems"
- />
+ <VSpace spacing="lg" class="flex-wrap">
+ <FilterCleanButton
+ v-if="selectedLinkedStatusItem != linkedStatusItems[0].value"
+ @click="selectedLinkedStatusItem = linkedStatusItems[0].value"
+ />
+ <FilterDropdown
+ v-model="selectedLinkedStatusItem"
+ :label="$t('core.common.filters.labels.status')"
+ :items="linkedStatusItems"
+ />
 
-  <div class="flex flex-row gap-2">
-  <div
-  class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-  @click="fetchObjects()"
-  >
-  <IconRefreshLine
-  v-tooltip="$t('core.common.buttons.refresh')"
-  :class="{
+ <div class="flex flex-row gap-2">
+ <div
+ class="group cursor-pointer rounded p-1 hover:bg-gray-200"
+ @click="fetchObjects()"
+ >
+ <IconRefreshLine
+ v-tooltip="$t('core.common.buttons.refresh')"
+ :class="{
  'animate-spin text-gray-900': isFetching,
  }"
- class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
- />
- </div>
+ class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
+ />
  </div>
- </VSpace>
- </div>
+ </div>
+ </VSpace>
  </div>
  </div>
  </template>