style: 优化filter里的field布局

packages/app/src/components/filter-button-group/index.tsx

@@ -19,7 +19,7 @@ const LDFilterButtonGroup: FC<Props> = function({
 }) {
   return (
     <>
-      <Space className="width-full">
+      <Space className="width-full" wrap>
         <Button
           loading={isSearching}
           type="primary"

packages/app/src/components/filter-fields/Date.tsx

@@ -2,6 +2,7 @@ import {DatePicker} from 'antd';
 import {FC} from 'react';
 import type {Dayjs} from 'dayjs';
 import type {RangeValue} from '@hooks';
+import Label from './Label';
 
 type Props = {
   label: string;
@@ -20,9 +21,7 @@ const LDFilterDate: FC<Props> = function({
 }) {
   return (
     <div className="ld-filter-field">
-      <label htmlFor={`filter_${name}`} className="ld-filter-field-label">
-        {label}
-      </label>
+      <Label name={name}>{label}</Label>
       <div className="ld-filter-field-wrapper">
         <DatePicker.RangePicker
           showTime={enableTime ? {format: 'HH:mm'} : false}

packages/app/src/components/filter-fields/Input.tsx

@@ -1,5 +1,6 @@
 import {Input} from 'antd';
 import {ChangeEvent, FC} from 'react';
+import Label from './Label';
 
 type Props = {
   label: string;
@@ -22,9 +23,7 @@ const LDFilterInput: FC<Props> = function({
 
   return (
     <div className="ld-filter-field">
-      <label htmlFor={`filter_${name}`} className="ld-filter-field-label">
-        {label}
-      </label>
+      <Label name={name}>{label}</Label>
       <div className="ld-filter-field-wrapper">
         <Input
           id={`filter_${name}`}

packages/app/src/components/filter-fields/Label.tsx

@@ -0,0 +1,15 @@
+import {FC, PropsWithChildren} from 'react';
+
+type Props = PropsWithChildren<{
+  name: string,
+}>;
+
+const FilterFieldLabel: FC<Props> = function({name, children}) {
+  return (
+    <label htmlFor={`filter_${name}`} className="ld-filter-field-label">
+      {children}
+    </label>
+  );
+};
+
+export default FilterFieldLabel;

packages/app/src/components/filter-fields/Select.tsx

@@ -1,6 +1,7 @@
 import {Select as SelectOri} from 'antd';
 import {FC} from 'react';
 import {useSelectFilterOptions} from '@hooks';
+import Label from './Label';
 
 type Props = {
   label: string;
@@ -32,9 +33,7 @@ const LDFilterSelect: FC<Props> = function({
 
   return (
     <div className="ld-filter-field">
-      <label htmlFor={`filter_${name}`} className="ld-filter-field-label">
-        {label}
-      </label>
+      <Label name={name}>{label}</Label>
       <div className="ld-filter-field-wrapper">
         <SelectOri
           allowClear={!hideClear}

packages/app/src/components/filter-fields/index.css

@@ -1,6 +1,6 @@
 .ld-filter-field-label {
   display: block;
-  width: 78px;
+  min-width: 5em;
   height: 100%;
   line-height: 2.2;
 }
@@ -11,6 +11,7 @@
 
 .ld-filter-field {
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   width: 100%;
@@ -28,3 +29,22 @@
     width: calc(25% - 16px * 3 / 4);
   }
 }
+
+@media screen and (width <= 1300px) {
+  .ld-filter-field {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .ld-filter-field-wrapper {
+    flex: unset;
+    width: 100%;
+  }
+
+  .ld-filter-field-label {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}