功能：飞手列表

src/components/SearchBox/index.tsx

+import React from 'react';
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  App,
+  Button,
+  Form,
+  Input,
+  InputProps,
+  Select,
+  SelectProps,
+  Space,
+} from 'antd';
+import styled from 'styled-components';
+
+// 搜索类型
+export type SearchColumns = {
+  type: 'Input' | 'Select';
+  label?: string;
+  name: string;
+  placeholder: string;
+  maxlength?: number;
+  width?: number;
+  disable?: boolean;
+  required?: boolean;
+  options?: {
+    value?: any;
+    label?: string;
+    children?: { value?: any; label?: string; children?: any }[];
+  }[];
+  onSelect?: (e: SelectProps['onSelect']) => void;
+  onChange?: (e: InputProps['onChange']) => void;
+};
+// 组件传参
+type PropsType = {
+  columns?: SearchColumns[];
+  onSearch?: (e: any) => void;
+  preFixChild?: React.ReactNode;
+  sufFixChild?: React.ReactNode;
+  children?: React.ReactNode;
+  isReset?: boolean;
+  isSearch?: boolean;
+  initialValues?: any;
+  // onRef?: any;
+};
+
+const SearchBoxView: React.FC<PropsType> = ({
+  columns,
+  initialValues,
+  onSearch,
+  isReset = true,
+  isSearch = true,
+  sufFixChild,
+}) => {
+  // app
+  const { message } = App.useApp();
+  // 表单钩子
+  const [formRef] = Form.useForm();
+  // 提交数据
+  const handleSubmit = async () => {
+    const values = await formRef.validateFields().catch((e) => {
+      const item = e.errorFields?.[0];
+      message.warning(item?.errors?.[0]);
+    });
+    if (!values) return;
+    onSearch?.(values);
+  };
+  return (
+    <SearchBoxWrap>
+      <Form
+        form={formRef}
+        name="formRef"
+        // labelCol={{ span: 8 }}
+        // wrapperCol={{ span: 16 }}
+        style={{ width: '100%' }}
+        initialValues={initialValues}
+        layout={'inline'}
+        // onFinish={handleFinish}
+        autoComplete="off"
+        // onChange={handleChange}
+      >
+        {columns?.map((i, j) => (
+          <Form.Item
+            label={i?.label}
+            name={i?.name}
+            key={j}
+            rules={[
+              {
+                required: i?.required || false,
+                message: i?.label ? `请输入${i?.label}` : i?.placeholder,
+              },
+            ]}
+          >
+            {i?.type === 'Input' && (
+              <Input
+                placeholder={i?.placeholder}
+                maxLength={i?.maxlength || 20}
+                style={{ width: i?.width || '200px' }}
+                disabled={i?.disable}
+                allowClear
+              />
+            )}
+            {i?.type === 'Select' && (
+              <Select
+                placeholder={i?.placeholder}
+                style={{ width: i?.width || '200px' }}
+                disabled={i?.disable}
+                onSelect={i?.onSelect}
+                options={i?.options || []}
+                allowClear
+              />
+            )}
+          </Form.Item>
+        ))}
+        <Form.Item>
+          <Space>
+            {isSearch && (
+              <Button
+                type="primary"
+                icon={<SearchOutlined />}
+                onClick={handleSubmit}
+              >
+                搜索
+              </Button>
+            )}
+            {isReset && (
+              <Button type="default" icon={<ReloadOutlined />}>
+                重置
+              </Button>
+            )}
+          </Space>
+        </Form.Item>
+      </Form>
+      {sufFixChild && <div className="suf-fix-child">{sufFixChild}</div>}
+    </SearchBoxWrap>
+  );
+};
+
+export default SearchBoxView;
+// 样式
+const SearchBoxWrap = styled.div`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+`;

src/components/home-comp/home-tab/comp/tabView05.tsx

 import React, { useEffect, useState } from 'react';
 import { RightOutlined } from '@ant-design/icons';
-import { Pagination, Rate } from 'antd';
+import { Button, Pagination, Rate } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType, InterReqType } from '@/api/interface';
 import { AppListPilotType } from '@/api/interface/home';
+import SearchBoxView, { SearchColumns } from '@/components/SearchBox';
 
 // 列表类型
 type ListType = InterListType<AppListPilotType>;
@@ -12,12 +14,14 @@ type ListType = InterListType<AppListPilotType>;
 type ReqType = InterReqType<AppListPilotType>;
 
 const TabView05 = () => {
+  // 路由钩子
+  const router = useRouter();
   // 飞手列表
   const [flyerList, setFlyerList] = useState<ListType>([]);
   // 分页数据
   const [pagination, setPagination] = useState({
     pageNo: 1,
-    pageSize: 8,
+    pageSize: 6,
     totalPage: 0,
     totalCount: 0,
   });
@@ -42,12 +46,56 @@ const TabView05 = () => {
       // console.log('列表数据 --->', list, pageNo, totalPage);
     }
   };
+  // 跳转列表
+  const handleMore = async () => {
+    await router.push('/flyer');
+  };
   // 组件挂载
   useEffect(() => {
     getFlyerList().then();
   }, []);
+  // 搜索列数据
+  const searchColumns: SearchColumns[] = [
+    {
+      type: 'Input',
+      // label: '飞手姓名',
+      name: 'userName',
+      placeholder: '请输入飞手姓名',
+      maxlength: 20,
+      width: 120,
+    },
+    {
+      type: 'Select',
+      // label: '任务能力',
+      name: 'auditStatus',
+      placeholder: '请选择任务能力',
+      width: 120,
+      options: [
+        {
+          value: 1,
+          label: '空闲',
+        },
+        {
+          value: 2,
+          label: '忙碌',
+        },
+      ],
+    },
+  ];
   return (
     <TabViewWrap className={'animate__animated animate__fast animate__fadeIn'}>
+      {/* 搜索组件 */}
+      <SearchBoxView
+        columns={searchColumns}
+        sufFixChild={
+          <div className="flex" onClick={handleMore}>
+            <Button type={'link'} className="px-0">
+              更多
+            </Button>
+            <RightOutlined className="text-primary" />
+          </div>
+        }
+      />
       <div className="tab-title flex-between">
         <div className="title-name">飞手约单</div>
       </div>
@@ -133,10 +181,12 @@ const TabViewWrap = styled.div`
     position: relative;
     width: 100%;
     flex-wrap: wrap;
+    margin-top: 0.5rem;
     .list-item {
       position: relative;
       box-sizing: border-box;
-      width: 14.13rem;
+      width: calc(50% - 1rem);
+      //width: 14.13rem;
       min-height: 5.54rem;
       background: #ffffff;
       border-radius: 0.25rem;
@@ -162,6 +212,7 @@ const TabViewWrap = styled.div`
         }
         .head-content {
           position: relative;
+          width: calc(100% - 4rem);
           .content-title {
             align-items: baseline;
             margin-bottom: 0.2rem;
@@ -186,6 +237,7 @@ const TabViewWrap = styled.div`
           .content-tag {
             flex-wrap: wrap;
             margin-bottom: 0.33rem;
+            min-height: 0.79rem;
             .tag-item {
               min-width: 2.42rem;
               height: 0.79rem;
@@ -204,7 +256,8 @@ const TabViewWrap = styled.div`
             content: '';
             bottom: 0;
             left: 0;
-            width: 8.21rem;
+            width: 100%;
+            //width: 8.21rem;
             height: 0.02rem;
             background: #dedede;
           }

src/pages/flyer/index.tsx

+import React from 'react';
+import styled from 'styled-components';
+import LayoutView from '@/components/layout';
+
+const FlyerPageView = () => {
+  return (
+    <LayoutView>
+      <FlyerPageWrap>
+        <div>FlyerPageWrap</div>
+      </FlyerPageWrap>
+    </LayoutView>
+  );
+};
+
+export default FlyerPageView;
+// 样式
+const FlyerPageWrap = styled.div``;

tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
         999: '#999',
         aaa: '#aaa',
         tag: '#001D85',
+        primary: '#ff552d',
       },
     },
   },