wip: 开发list组件

 <script lang="ts" setup>
   import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { Button, List, Tooltip } from 'ant-design-vue';
+  import { Button, List, Space, Tooltip } from 'ant-design-vue';
   import { reactive } from 'vue';
   import { ref } from 'vue';
+  import { BasicForm, useForm } from '../../Form';
+  import { basicListProps } from './props';
+  import { ExtractPropTypes } from 'vue';
+  defineProps<ExtractPropTypes<typeof basicListProps>>();
+
+  const [registerForm] = useForm({
+    schemas: [
+      {
+        field: '123',
+        label: 'test',
+        component: 'Input',
+      },
+    ],
+    labelWidth: 100,
+    layout: 'inline',
+    baseColProps: { span: 8 },
+    showAdvancedButton: true,
+    compact: true,
+  });
 
   const listElRef = ref<Nullable<ComponentElRef>>(null);
 
-  const pagination = reactive({});
+  const pagination = reactive({ size: 'small' });
 
   const loading = ref(false);
 
@@ -16,31 +35,48 @@
 </script>
 
 <template>
-  <section class="bg-light-50 my-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
-    <List
-      ref="listElRef"
-      :dataSource="dataSource"
-      :pagination="pagination"
-      :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
-      :loading="loading"
-    >
-      <template #header>
-        <section class="flex justify-between gap-4 min-h-12 items-center">
-          <div class="text-lg font-semibold">
-            <span>任务列表</span>
-          </div>
-          <Tooltip title="刷新">
-            <Button type="primary" @click="getDataSource">
-              <ReloadOutlined :spin="loading" />
-            </Button>
-          </Tooltip>
-        </section>
-      </template>
-      <template #renderItem="{ item }">
-        <List.Item :key="item.id">
-          <slot name="item" :item="item"></slot>
-        </List.Item>
-      </template>
-    </List>
+  <section class="basic-list-container">
+    <section class="mb-4 bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
+      <List
+        ref="listElRef"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex px-5 justify-between gap-4 min-h-12 items-center">
+            <div class="text-lg font-semibold">
+              <span>任务列表</span>
+            </div>
+            <Space>
+              <slot name="toolbar"></slot>
+              <Tooltip title="刷新">
+                <Button type="primary" @click="getDataSource">
+                  <ReloadOutlined :spin="loading" />
+                </Button>
+              </Tooltip>
+            </Space>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <slot name="item" :item="item"></slot>
+          </List.Item>
+        </template>
+      </List>
+    </section>
   </section>
 </template>
+
+<style lang="less" scoped>
+  .basic-list-container {
+    :deep(.ant-list-header) {
+      padding-top: 0;
+      padding-bottom: 8px;
+    }
+  }
+</style>

+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps, FetchParams } from '../types/table';
+import { unref, computed } from 'vue';
+import type { FormProps } from '/@/components/Form';
+import { isFunction } from '/@/utils/is';
+
+export function useTableForm(
+  propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
+  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  getLoading: ComputedRef<boolean | undefined>
+) {
+  const getFormProps = computed((): Partial<FormProps> => {
+    const { formConfig } = unref(propsRef);
+    const { submitButtonOptions } = formConfig || {};
+    return {
+      showAdvancedButton: true,
+      ...formConfig,
+      submitButtonOptions: { loading: unref(getLoading), ...submitButtonOptions },
+      compact: true,
+    };
+  });
+
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
+    const keys = Object.keys(slots);
+    return keys
+      .map((item) => (item.startsWith('form-') ? item : null))
+      .filter((item) => !!item) as string[];
+  });
+
+  function replaceFormSlotKey(key: string) {
+    if (!key) return '';
+    return key?.replace?.(/form\-/, '') ?? '';
+  }
+
+  function handleSearchInfoChange(info: Recordable) {
+    const { handleSearchInfoFn } = unref(propsRef);
+    if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
+      info = handleSearchInfoFn(info) || info;
+    }
+    fetch({ searchInfo: info, page: 1 });
+  }
+
+  return {
+    getFormProps,
+    replaceFormSlotKey,
+    getFormSlotKeys,
+    handleSearchInfoChange,
+  };
+}

-import { ComponentPropsOptions } from 'vue';
+import { FormProps } from '../../Form';
 
-export const props = {
+export const basicListProps = {
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+  searchInfo: {
+    type: Object as PropType<Recordable>,
+  },
+  formConfig: {
+    type: Object as PropType<Partial<FormProps>>,
+    default: null,
+  },
   title: {
     type: String,
   },
-} as ComponentPropsOptions;
+  titleHelpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  autoCreateKey: {
+    type: Boolean,
+    default: true,
+  },
+  api: {
+    type: Function as PropType<Fn<any, Promise<any>>>,
+  },
+  beforeFetch: {
+    type: Function as PropType<Fn>,
+  },
+  afterFetch: {
+    type: Function as PropType<Fn>,
+  },
+  handleSearchInfoFn: {
+    type: Function as PropType<Fn>,
+  },
+};

+import { FormProps } from 'ant-design-vue/es/form/Form';
+
+export interface BasicListProps {
+  /**
+   * @description 立即执行
+   */
+  immediate?: boolean;
+
+  /**
+   * @description 额外的请求参数
+   */
+  searchInfo?: Recordable;
+
+  /**
+   * @description 搜索表单
+   */
+  formConfig?: Partial<FormProps>;
+
+  /**
+   * @description 列表名
+   */
+  title?: string;
+
+  /**
+   * @description 列表标题帮助信息
+   */
+  titleHelpMessage?: string | string[];
+
+  /**
+   * @description 自动创建key
+   */
+  autoCreateKey?: boolean;
+
+  /**
+   * @description 请求接口
+   * @param args
+   * @returns
+   */
+  api?: (...args: any) => Promise<any>;
+
+  /**
+   * @description 请求前对参数处理
+   */
+  beforeFetch?: Fn;
+
+  /**
+   * @description 请求后对结果处理
+   */
+  afterFetch?: Fn;
+
+  /**
+   * @description 请求前处理搜索参数
+   */
+  handleSearchInfoFn?: Fn;
+}