From 2fd63679837f49b4ceff703468a5d03d4b5e39d4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 6 May 2025 22:32:09 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E9=80=9A=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table-toolbar/table-toolbar.vue           |   2 +
 .../src/views/infra/demo/demo01/index.vue     | 299 +++++++++++++-----
 .../views/infra/demo/demo01/modules/form.vue  | 106 +++++--
 .../views/infra/demo/general/demo01/index.vue |   3 +
 .../effects/hooks/src/use-content-maximize.ts |   3 +
 5 files changed, 301 insertions(+), 112 deletions(-)

diff --git a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue b/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
index 099d3a8c..d385bed2 100644
--- a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
+++ b/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
@@ -1,3 +1,4 @@
+<!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
 <script setup lang="ts">
 import type { VxeToolbarInstance } from 'vxe-table';
 
@@ -36,6 +37,7 @@ defineExpose({
   <VxeToolbar ref="toolbarRef" custom>
     <template #toolPrefix>
       <slot></slot>
+      <!-- TODO @puhui999：貌似 icon 没和 vxe 对上。可以考虑用 /Users/yunai/Java/yudao-ui-admin-vben-v5/packages/icons/src/iconify  -->
       <Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar">
         <Search :size="15" />
       </Button>
diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue
index d0bab777..19750a1c 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/index.vue
@@ -1,39 +1,86 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableInstance } from 'vxe-table';
+
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { h } from 'vue';
+import { h, nextTick, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { cloneDeep, formatDateTime } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Pagination,
+  RangePicker,
+  Select,
+} from 'ant-design-vue';
+import { VxeColumn, VxeTable } from 'vxe-table';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo01Contact,
   exportDemo01Contact,
   getDemo01ContactPage,
 } 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';
+import { downloadByData } from '#/utils/download';
 
-import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
+import Demo01ContactForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo01ContactApi.Demo01Contact[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo01ContactPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields();
+  handleQuery();
+};
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
+  connectedComponent: Demo01ContactForm,
   destroyOnClose: true,
 });
 
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
 /** 创建示例联系人 */
 function onCreate() {
   formModalApi.setData({}).open();
@@ -57,7 +104,7 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
     });
-    onRefresh();
+    await getList();
   } catch {
     hideLoading();
   }
@@ -65,84 +112,166 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
 
 /** 导出表格 */
 async function onExport() {
-  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo01Contact(queryParams);
+    downloadByData(data, '示例联系人.xls');
+  } finally {
+    exportLoading.value = false;
   }
 }
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(onActionClick),
-    height: 'auto',
-    pagerConfig: {
-      enabled: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getDemo01ContactPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-  } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
+/** 隐藏搜索栏 */
+const hiddenSearchBar = ref(false);
+const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
+const tableRef = ref<VxeTableInstance>();
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+  await nextTick();
+  // 挂载 toolbar 工具栏
+  const table = tableRef.value;
+  const tableToolbar = tableToolbarRef.value;
+  if (table && tableToolbar) {
+    await table.connect(tableToolbar.getToolbarRef()!);
+  }
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="getList" />
 
-    <Grid table-title="示例联系人列表">
-      <template #toolbar-tools>
-        <Button
-          :icon="h(Plus)"
-          type="primary"
-          @click="onCreate"
-          v-access:code="['infra:demo01-contact:create']"
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model:value="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <!-- TODO @puhui999：貌似性别的宽度不对；并且选择后，会变哈； -->
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model:value="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <!-- TODO @puhui999：要不咱还是把 getIntDictOptions 还是搞出来？总归方便点~ -->
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <RangePicker
+            v-model:value="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" type="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="示例联系人">
+      <!-- TODO @puhui999：暗黑模式下，会有个黑底 -->
+      <template #extra>
+        <TableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
         >
-          {{ $t('ui.actionTitle.create', ['示例联系人']) }}
-        </Button>
-        <Button
-          :icon="h(Download)"
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['infra:demo01-contact:export']"
-        >
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+          <Button
+            class="ml-2"
+            :icon="h(Plus)"
+            type="primary"
+            @click="onCreate"
+            v-access:code="['infra:demo01-contact:create']"
+          >
+            {{ $t('ui.actionTitle.create', ['示例联系人']) }}
+          </Button>
+          <Button
+            :icon="h(Download)"
+            type="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="onExport"
+            v-access:code="['infra:demo01-contact:export']"
+          >
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+        </TableToolbar>
       </template>
-    </Grid>
+      <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">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生年" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="avatar" title="头像" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              type="link"
+              @click="onEdit(row as any)"
+              v-access:code="['infra:demo01-contact:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              type="link"
+              class="ml-2"
+              @click="onDelete(row as any)"
+              v-access:code="['infra:demo01-contact:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
index 5d01994b..0ff682f4 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
@@ -1,52 +1,73 @@
 <script lang="ts" setup>
+import type { Rule } from 'ant-design-vue/es/form';
+
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import {
+  DatePicker,
+  Form,
+  Input,
+  message,
+  Radio,
+  RadioGroup,
+} from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
 import {
   createDemo01Contact,
   getDemo01Contact,
   updateDemo01Contact,
 } from '#/api/infra/demo/demo01';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { ImageUpload } from '#/components/upload';
 import { $t } from '#/locales';
-
-import { useFormSchema } from '../data';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 const emit = defineEmits(['success']);
-const formData = ref<Demo01ContactApi.Demo01Contact>();
+
+const formRef = ref();
+const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+  avatar: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['示例联系人'])
     : $t('ui.actionTitle.create', ['示例联系人']);
 });
 
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
-  },
-  layout: 'horizontal',
-  schema: useFormSchema(),
-  showDefaultActions: false,
-});
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+    avatar: undefined,
+  };
+  formRef.value?.resetFields();
+};
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
+    await formRef.value?.validate();
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as Demo01ContactApi.Demo01Contact;
+    const data = formData.value as Demo01ContactApi.Demo01Contact;
     try {
       await (formData.value?.id
         ? updateDemo01Contact(data)
@@ -64,10 +85,9 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      resetForm();
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
     if (!data) {
@@ -81,15 +101,47 @@ const [Modal, modalApi] = useVbenModal({
         modalApi.unlock();
       }
     }
-    // 设置到 values
     formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
 
 <template>
   <Modal :title="getTitle">
-    <Form class="mx-4" />
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model:value="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生年" name="birthday">
+        <DatePicker
+          v-model:value="formData.birthday"
+          value-format="x"
+          placeholder="选择出生年"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+      <Form.Item label="头像" name="avatar">
+        <ImageUpload v-model:value="formData.avatar" />
+      </Form.Item>
+    </Form>
   </Modal>
 </template>
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 2ae8cb9f..19750a1c 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
@@ -154,6 +154,7 @@ onMounted(async () => {
             class="w-full"
           />
         </Form.Item>
+        <!-- TODO @puhui999：貌似性别的宽度不对；并且选择后，会变哈； -->
         <Form.Item label="性别" name="sex">
           <Select
             v-model:value="queryParams.sex"
@@ -161,6 +162,7 @@ onMounted(async () => {
             allow-clear
             class="w-full"
           >
+            <!-- TODO @puhui999：要不咱还是把 getIntDictOptions 还是搞出来？总归方便点~ -->
             <Select.Option
               v-for="dict in getDictOptions(
                 DICT_TYPE.SYSTEM_USER_SEX,
@@ -191,6 +193,7 @@ onMounted(async () => {
 
     <!-- 列表 -->
     <ContentWrap title="示例联系人">
+      <!-- TODO @puhui999：暗黑模式下，会有个黑底 -->
       <template #extra>
         <TableToolbar
           ref="tableToolbarRef"
diff --git a/packages/effects/hooks/src/use-content-maximize.ts b/packages/effects/hooks/src/use-content-maximize.ts
index 142a254f..a580d6e2 100644
--- a/packages/effects/hooks/src/use-content-maximize.ts
+++ b/packages/effects/hooks/src/use-content-maximize.ts
@@ -18,6 +18,9 @@ export function useContentMaximize() {
     });
   }
 
+  /**
+   * 切换最大化和隐藏 tabbar
+   */
   function toggleMaximizeAndTabbarHidden() {
     const isMaximize = contentIsMaximize.value;
     updatePreferences({