feat: search form

apps/web-antd/src/views/monitor/logininfor/data.tsx

@@ -1,13 +1,48 @@
 import type { ColumnsType } from 'ant-design-vue/es/table';
 
+import type { FormSchemaGetter } from '#/adapter';
 import type { DescItem } from '#/components/description';
 
 import { DictEnum } from '@vben/constants';
 
 import { Tooltip } from 'ant-design-vue';
 
+import { getDictOptions } from '#/utils/dict';
 import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'ipaddr',
+    label: 'IP地址',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_COMMON_STATUS),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '登录状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'dateTime',
+    label: '登录日期',
+  },
+];
+
 export const columns: ColumnsType = [
   {
     align: 'center',

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -7,12 +7,13 @@ import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Space, Table } from 'ant-design-vue';
+import { Card, Space, Table } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
 import { loginInfoClean, loginInfoList } from '#/api/monitor/logininfo';
 import { confirmDeleteModal } from '#/utils/modal';
 
-import { columns } from './data';
+import { columns, querySchema } from './data';
 import loginInfoModal from './login-info-modal.vue';
 
 const [LoginInfoModal, modalApi] = useVbenModal({
@@ -39,10 +40,32 @@ function handleClear() {
     },
   });
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page content-class="flex flex-col gap-[6px]">
+    <Card>
+      <QueryForm />
+    </Card>
     <div class="flex justify-end">
       <a-button @click="handleClear">{{ $t('pages.common.clear') }}</a-button>
     </div>

apps/web-antd/src/views/monitor/online/data.ts

@@ -0,0 +1,20 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'ipaddr',
+    label: 'IP地址',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+];

apps/web-antd/src/views/monitor/online/index.vue

@@ -1,9 +1,36 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page>
+    <Card>
+      <QueryForm />
+    </Card>
+  </Page>
 </template>

apps/web-antd/src/views/monitor/operlog/data.ts

@@ -0,0 +1,55 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+import { DictEnum } from '@vben/constants';
+
+import { getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'title',
+    label: '系统模块',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'operName',
+    label: '操作人员',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_OPER_TYPE),
+      placeholder: '请选择',
+    },
+    fieldName: 'businessType',
+    label: '操作类型',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'operIp',
+    label: '操作IP',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_COMMON_STATUS),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '操作时间',
+  },
+];

apps/web-antd/src/views/monitor/operlog/index.vue

@@ -1,9 +1,36 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page>
+    <Card>
+      <QueryForm />
+    </Card>
+  </Page>
 </template>

apps/web-antd/src/views/system/client/data.tsx

@@ -5,6 +5,34 @@ import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'clientKey',
+    label: '客户端key',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'clientSecret',
+    label: '客户端密钥',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/client/index.vue

@@ -2,7 +2,12 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
 import clientDrawer from './client-drawer.vue';
+import { querySchema } from './data';
 
 const [ClientDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: clientDrawer,
@@ -12,10 +17,32 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page>
+    <Card>
+      <QueryForm />
+    </Card>
     <a-button type="primary" @click="handleAdd">
       {{ $t('pages.common.add') }}
     </a-button>

apps/web-antd/src/views/system/config/data.ts

@@ -1,9 +1,44 @@
 import type { FormSchemaGetter } from '#/adapter';
 
 import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'configName',
+    label: '参数名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'configKey',
+    label: '参数键名',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      placeholder: '请选择',
+    },
+    fieldName: 'configType',
+    label: '系统内置',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];
+
 export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/config/index.vue

@@ -9,13 +9,15 @@ import { onMounted, ref } from 'vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Space, Table } from 'ant-design-vue';
+import { Card, Space, Table } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
 import { configExport, configList } from '#/api/system/config';
 import { downloadExcel } from '#/utils/file/download';
 import { renderDict } from '#/utils/render';
 
 import configModal from './config-modal.vue';
+import { querySchema } from './data';
 
 const [ConfigModal, modalApi] = useVbenModal({
   connectedComponent: configModal,
@@ -80,11 +82,33 @@ const columns: ColumnsType = [
     title: '操作',
   },
 ];
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
-    <div class="mb-[16px] flex justify-end gap-[8px]">
+  <Page content-class="flex flex-col gap-3">
+    <Card>
+      <QueryForm />
+    </Card>
+    <div class="flex justify-end gap-[8px]">
       <a-button @click="downloadExcel(configExport, '参数配置', {})">
         {{ $t('pages.common.export') }}
       </a-button>

apps/web-antd/src/views/system/dept/data.ts

@@ -4,6 +4,27 @@ import { getPopupContainer } from '@vben/utils';
 import { type FormSchemaGetter, z } from '#/adapter';
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'deptName',
+    label: '部门名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '部门状态',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dept/index.vue

@@ -2,8 +2,11 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { Space } from 'ant-design-vue';
+import { Card } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import deptDrawer from './dept-drawer.vue';
 
 const [DeptDrawer, drawerApi] = useVbenDrawer({
@@ -19,17 +22,41 @@ function handleTest(id: number | string) {
   drawerApi.setData({ id });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
-    <Space>
-      <a-button type="primary" @click="handleAdd">
-        {{ $t('pages.common.add') }}
-      </a-button>
-      <a-button @click="handleTest(103)"> 新增 上级id=103 </a-button>
-      <a-button @click="handleTest(105)"> 新增 上级id=105 </a-button>
-    </Space>
+  <Page content-class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <div class="flex justify-end gap-2">
+        <a-button type="primary" @click="handleAdd">
+          {{ $t('pages.common.add') }}
+        </a-button>
+        <a-button @click="handleTest(103)"> 新增 上级id=103 </a-button>
+        <a-button @click="handleTest(105)"> 新增 上级id=105 </a-button>
+      </div>
+    </Card>
     <DeptDrawer />
   </Page>
 </template>

apps/web-antd/src/views/system/dict/data/data.ts

@@ -1,5 +1,27 @@
 import type { FormSchemaGetter } from '#/adapter';
 
+import { getPopupContainer } from '@vben/utils';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      placeholder: '请选择',
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictLabel',
+    label: '字典标签',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/data/index.vue

@@ -2,6 +2,11 @@
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import dictDataDrawer from './dict-data-drawer.vue';
 
 const [DictDataDrawer, drawerApi] = useVbenDrawer({
@@ -12,13 +17,37 @@ function handleAdd() {
   drawerApi.setData({ dictType: 'aa_bb_cc' });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+});
 </script>
 
 <template>
-  <div>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+  <div class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
+    </Card>
     <DictDataDrawer />
   </div>
 </template>

apps/web-antd/src/views/system/dict/index.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
-
 import DictDataPanel from './data/index.vue';
 import DictTypePanel from './type/index.vue';
 </script>
 
 <template>
   <Page content-class="flex flex-col gap-[16px] lg:flex-row">
-    <Card class="w-full">
-      <DictTypePanel />
-    </Card>
-    <Card class="w-full">
-      <DictDataPanel />
-    </Card>
+    <DictTypePanel class="flex-1" />
+    <DictDataPanel class="flex-1" />
   </Page>
 </template>

apps/web-antd/src/views/system/dict/type/data.ts

@@ -1,5 +1,24 @@
 import { type FormSchemaGetter, z } from '#/adapter';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictName',
+    label: '字典名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+];
+
 export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/type/index.vue

@@ -2,6 +2,11 @@
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import dictTypeModel from './dict-type-model.vue';
 
 defineOptions({ name: 'DictTypePanel' });
@@ -14,13 +19,37 @@ function handleAdd() {
   modalApi.setData({ update: false });
   modalApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+});
 </script>
 
 <template>
-  <div>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+  <div class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
+    </Card>
     <DictTypeModal />
   </div>
 </template>

apps/web-antd/src/views/system/menu/data.tsx

@@ -1,8 +1,40 @@
 import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
 
 import { type FormSchemaGetter, z } from '#/adapter';
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'menuName',
+    label: '菜单名称 ',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '菜单状态 ',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_SHOW_HIDE),
+      placeholder: '请选择',
+    },
+    fieldName: 'visible',
+    label: '显示状态',
+  },
+];
+
 // 菜单类型（M目录 C菜单 F按钮）
 export const menuTypeOptions = [
   { label: '目录', value: 'M' },

apps/web-antd/src/views/system/menu/index.vue

@@ -2,6 +2,11 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import menuDrawer from './menu-drawer.vue';
 
 const [MenuDrawer, drawerApi] = useVbenDrawer({
@@ -12,13 +17,39 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+  <Page content-class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <div class="flex justify-end">
+        <a-button type="primary" @click="handleAdd">
+          {{ $t('pages.common.add') }}
+        </a-button>
+      </div>
+    </Card>
     <MenuDrawer />
   </Page>
 </template>

apps/web-antd/src/views/system/notice/data.ts

@@ -1,9 +1,39 @@
 import type { FormSchemaGetter } from '#/adapter';
 
 import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'noticeTitle',
+    label: '公告标题',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'createBy',
+    label: '创建人',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NOTICE_TYPE),
+      placeholder: '请选择',
+    },
+    fieldName: 'noticeType',
+    label: '公告类型',
+  },
+];
+
 export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/notice/index.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { Page, useVbenModal } from '@vben/common-ui';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import noticeModal from './notice-modal.vue';
 
 const [NoticeModal, modalApi] = useVbenModal({
@@ -11,11 +16,39 @@ function handleAdd() {
   modalApi.setData({ update: false });
   modalApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
-    <a-button type="primary" @click="handleAdd">新增</a-button>
+  <Page content-class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <div class="flex justify-end">
+        <a-button type="primary" @click="handleAdd">
+          {{ $t('pages.common.add') }}
+        </a-button>
+      </div>
+    </Card>
     <NoticeModal />
   </Page>
 </template>

apps/web-antd/src/views/system/oss-config/data.tsx

@@ -9,6 +9,34 @@ const accessPolicyOptions = [
   { color: 'blue', label: '自定义', value: '2' },
 ];
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'configKey',
+    label: '配置名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'bucketName',
+    label: '桶名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '是否默认',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/oss-config/index.vue

@@ -2,6 +2,11 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import ossConfigDrawer from './oss-config-drawer.vue';
 
 const [OssConfigDrawer, drawerApi] = useVbenDrawer({
@@ -12,10 +17,32 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page>
+    <Card>
+      <QueryForm />
+    </Card>
     <a-button type="primary" @click="handleAdd">
       {{ $t('pages.common.add') }}
     </a-button>

apps/web-antd/src/views/system/oss/data.tsx

@@ -0,0 +1,41 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'fileName',
+    label: '文件名',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'originalName',
+    label: '原名',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'fileSuffix',
+    label: '拓展名',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'service',
+    label: '服务商',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];

apps/web-antd/src/views/system/oss/index.vue

@@ -3,11 +3,39 @@ import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
+
 const router = useRouter();
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page>
+    <Card>
+      <QueryForm />
+    </Card>
     <a-button @click="() => router.push('/system/oss-config')">配置</a-button>
   </Page>
 </template>

apps/web-antd/src/views/system/post/data.ts

@@ -4,6 +4,35 @@ import { getPopupContainer } from '@vben/utils';
 import { type FormSchemaGetter } from '#/adapter';
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'postCode',
+    label: '岗位编码',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'postName',
+    label: '岗位名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/post/index.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import postDrawer from './post-drawer.vue';
 
 const [PostDrawer, drawerApi] = useVbenDrawer({
@@ -11,11 +16,39 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
-    <a-button type="primary" @click="handleAdd">add</a-button>
+  <Page content-class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <div class="flex justify-end">
+        <a-button type="primary" @click="handleAdd">
+          {{ $t('pages.common.add') }}
+        </a-button>
+      </div>
+    </Card>
     <PostDrawer />
   </Page>
 </template>

apps/web-antd/src/views/system/tenant/data.tsx

@@ -4,6 +4,41 @@ import dayjs from 'dayjs';
 
 import { type FormSchemaGetter, z } from '#/adapter';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'tenantId',
+    label: '租户编号',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'companyName',
+    label: '租户名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'contactUserName',
+    label: '联系人',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'contactPhone',
+    label: '联系电话',
+  },
+];
+
 const defaultExpireTime = dayjs()
   .add(365, 'days')
   .startOf('day')

apps/web-antd/src/views/system/tenant/index.vue

@@ -2,6 +2,11 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import tenantDrawer from './tenant-drawer.vue';
 
 const [TenantDrawer, drawerApi] = useVbenDrawer({
@@ -12,10 +17,32 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   drawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page>
+    <Card>
+      <QueryForm />
+    </Card>
     <a-button
       type="primary"
       v-access:code="['system:tenant:add']"

apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -1,6 +1,6 @@
 import type { FormSchemaGetter } from '#/adapter';
 
-export const schema: FormSchemaGetter = () => [
+export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Input',
     componentProps: {

apps/web-antd/src/views/tool/gen/data.tsx

@@ -0,0 +1,35 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      placeholder: '请选择',
+    },
+    defaultValue: '',
+    fieldName: 'dataName',
+    label: '数据源',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'tableName',
+    label: '表名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'tableComment',
+    label: '表描述',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];

apps/web-antd/src/views/tool/gen/index.vue

@@ -7,12 +7,14 @@ import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { message, Popconfirm, Table } from 'ant-design-vue';
+import { Card, message, Popconfirm, Table } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
 import { batchGenCode, generatedList, genRemove, syncDb } from '#/api/tool/gen';
 import { downloadByData } from '#/utils/file/download';
 
 import codePreviewModal from './code-preview-modal.vue';
+import { querySchema } from './data';
 
 const [CodePreviewModal, previewModalApi] = useVbenModal({
   connectedComponent: codePreviewModal,
@@ -84,10 +86,32 @@ async function handleDelete(record: Recordable<any>) {
   await genRemove(record.tableId);
   // reload
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
-  <Page>
+  <Page content-class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
     <Table :columns="columns" :data-source="dataSource" e="middle">
       <template #bodyCell="{ record, column }">
         <template v-if="column.dataIndex === 'action'">