From 994b4443199180561358335067775d2764a71646 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 27 Apr 2025 18:16:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20antd=20?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=8F=90=E5=88=B0=E7=9A=84=E4=B8=80=E4=BA=9B=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/infra/demo/demo01/index.ts        |  6 +-
 apps/web-antd/src/utils/date.ts               |  2 +-
 .../views/infra/demo/general/demo01/index.vue | 67 +++++++++++--------
 .../demo/general/demo01/modules/form.vue      | 13 ++--
 4 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/apps/web-antd/src/api/infra/demo/demo01/index.ts b/apps/web-antd/src/api/infra/demo/demo01/index.ts
index b03a2aef..5a940a61 100644
--- a/apps/web-antd/src/api/infra/demo/demo01/index.ts
+++ b/apps/web-antd/src/api/infra/demo/demo01/index.ts
@@ -1,3 +1,5 @@
+import type { Dayjs } from 'dayjs';
+
 import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
@@ -7,8 +9,8 @@ export namespace Demo01ContactApi {
   export interface Demo01Contact {
     id: number; // 编号
     name?: string; // 名字
-    sex?: number; // 性别
-    birthday?: Date; // 出生年
+    sex?: boolean; // 性别
+    birthday?: Dayjs | string; // 出生年
     description?: string; // 简介
     avatar: string; // 头像
   }
diff --git a/apps/web-antd/src/utils/date.ts b/apps/web-antd/src/utils/date.ts
index 2c899a9f..537fb9e7 100644
--- a/apps/web-antd/src/utils/date.ts
+++ b/apps/web-antd/src/utils/date.ts
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 // TODO @芋艿：后续整理下 迁移至 packages/core/base/shared/src/utils/date.ts,后续删除 使用 @vben/utils 的 getRangePickerDefaultProps
 
 /** 时间段选择器拓展  */
-export function getRangePickerDefaultProps() {
+export function getRangePickerDefaultProps(): any {
   return {
     showTime: {
       format: 'HH:mm:ss',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
index d5136a88..bab52a84 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { VxeTableInstance } from 'vxe-table';
+
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { h, onMounted, reactive, ref } from 'vue';
+import { h, nextTick, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, RefreshCw, Search } from '@vben/icons';
+import { Download, Plus } from '@vben/icons';
 import { cloneDeep, formatDateTime } from '@vben/utils';
 
 import {
@@ -25,6 +27,7 @@ import {
 } from '#/api/infra/demo/demo01';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
+import { TableToolbar } from '#/components/table-toolbar';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
@@ -118,9 +121,20 @@ async function onExport() {
   }
 }
 
+/** 隐藏搜索栏 */
+const hiddenSearchBar = ref(false);
+const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
+const tableRef = ref<VxeTableInstance>();
 /** 初始化 */
-onMounted(() => {
-  getList();
+onMounted(async () => {
+  await getList();
+  await nextTick();
+  // 挂载 $toolbar 工具栏
+  const $table = tableRef.value;
+  const tableToolbar = tableToolbarRef.value;
+  if ($table && tableToolbar) {
+    await $table.connect(tableToolbar.getToolbarRef()!);
+  }
 });
 </script>
 
@@ -128,15 +142,10 @@ onMounted(() => {
   <Page auto-content-height>
     <FormModal @success="getList" />
 
-    <ContentWrap>
+    <ContentWrap v-if="!hiddenSearchBar">
       <!-- 搜索工作栏 -->
       <!-- TODO @puhui999：貌似 -mb-15px 没效果？可能和 ContentWrap 有关系？ -->
-      <Form
-        class="-mb-15px"
-        :model="queryParams"
-        ref="queryFormRef"
-        layout="inline"
-      >
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
         <Form.Item label="名字" name="name">
           <!-- TODO @puhui999：貌似不一定 240？看着和 schema 还是不太一样 -->
           <Input
@@ -144,7 +153,7 @@ onMounted(() => {
             placeholder="请输入名字"
             allow-clear
             @press-enter="handleQuery"
-            class="!w-240px"
+            class="w-full"
           />
         </Form.Item>
         <Form.Item label="性别" name="sex">
@@ -152,7 +161,7 @@ onMounted(() => {
             v-model:value="queryParams.sex"
             placeholder="请选择性别"
             allow-clear
-            class="!w-240px"
+            class="w-full"
           >
             <Select.Option
               v-for="dict in getDictOptions(
@@ -166,23 +175,30 @@ onMounted(() => {
           </Select>
         </Form.Item>
         <Form.Item label="创建时间" name="createTime">
-          <!-- TODO @puhui999：这里有个红色的告警，看看有办法处理哇？ -->
           <RangePicker
             v-model:value="queryParams.createTime"
             v-bind="getRangePickerDefaultProps()"
-            class="!w-220px"
+            class="w-full"
           />
         </Form.Item>
         <Form.Item>
           <!-- TODO @puhui999：搜索和重置；貌似样子和位置不太一样，有木有办法一致 -->
           <!-- TODO @puhui999：收齐、展开，好弄哇？ -->
-          <Button class="ml-2" @click="handleQuery" :icon="h(Search)">
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" type="primary">
             搜索
           </Button>
-          <Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">
-            重置
-          </Button>
-          <!-- TODO @puhui999：有办法放到 VxeTable 哪里么？ -->
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="你好">
+      <template #extra>
+        <TableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
           <Button
             class="ml-2"
             :icon="h(Plus)"
@@ -202,14 +218,9 @@ onMounted(() => {
           >
             {{ $t('ui.actionTitle.export') }}
           </Button>
-        </Form.Item>
-      </Form>
-    </ContentWrap>
-
-    <!-- 列表 -->
-    <!-- TODO @puhui999：title 要不还是假起来？ -->
-    <ContentWrap>
-      <VxeTable :data="list" show-overflow :loading="loading">
+        </TableToolbar>
+      </template>
+      <VxeTable ref="tableRef" :data="list" show-overflow :loading="loading">
         <VxeColumn field="id" title="编号" align="center" />
         <VxeColumn field="name" title="名字" align="center" />
         <VxeColumn field="sex" title="性别" align="center">
diff --git a/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue b/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
index a0862b01..2064f551 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
@@ -26,11 +26,9 @@ import { ImageUpload } from '#/components/upload';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
-const emit = defineEmits(['success']); // TODO @puhui999：emit 和下面空一行？
+const emit = defineEmits(['success']);
+
 const formRef = ref();
-// TODO @puhui999：labelCol、wrapperCol 直接写？不用单独定义变量，
-const labelCol = { span: 5 };
-const wrapperCol = { span: 13 };
 const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
   id: undefined,
   name: undefined,
@@ -90,8 +88,7 @@ const [Modal, modalApi] = useVbenModal({
       resetForm();
       return;
     }
-
-    // 加载数据 TODO @puhui999：这里不用空行
+    // 加载数据
     let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
     if (!data) {
       return;
@@ -115,8 +112,8 @@ const [Modal, modalApi] = useVbenModal({
       ref="formRef"
       :model="formData"
       :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
     >
       <Form.Item label="名字" name="name">
         <Input v-model:value="formData.name" placeholder="请输入名字" />