From 7a9df83d71e952b09a0808efc005842622569a30 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 25 Apr 2025 23:29:46 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90INFRA=E3=80=91=E6=A0=87?=
 =?UTF-8?q?=E5=87=86=E7=9A=84=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/bootstrap.ts                |  2 +-
 .../components/content-wrap/content-wrap.vue  |  5 ++
 apps/web-antd/src/utils/dict.ts               |  2 +
 .../views/infra/demo/general/demo01/index.vue | 74 +++++++++++++++----
 .../demo/general/demo01/modules/form.vue      | 57 ++++++++++----
 .../views/system/notify/my/modules/detail.vue | 28 +++++--
 pnpm-lock.yaml                                |  6 +-
 7 files changed, 133 insertions(+), 41 deletions(-)

diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
index c90d9f269..9fdb8abf6 100644
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -7,7 +7,7 @@ import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';
-import 'vxe-table/styles/cssvar.scss';
+import 'vxe-table/styles/cssvar.scss'; // TODO @puhui999：这个必须导入哇？我看 use-vxe-grid.vue 已经导入了
 
 import { useTitle } from '@vueuse/core';
 
diff --git a/apps/web-antd/src/components/content-wrap/content-wrap.vue b/apps/web-antd/src/components/content-wrap/content-wrap.vue
index 026d7d23f..306e0fa6d 100644
--- a/apps/web-antd/src/components/content-wrap/content-wrap.vue
+++ b/apps/web-antd/src/components/content-wrap/content-wrap.vue
@@ -1,3 +1,7 @@
+<!--
+  参考自 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/ContentWrap/src/ContentWrap.vue
+  保证和 yudao-ui-admin-vue3 功能的一致性
+-->
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue';
 
@@ -15,6 +19,7 @@ withDefaults(
     title: '',
   },
 );
+// TODO @puhui999：这个功能，和 vue3 貌似没对全哇？
 </script>
 
 <template>
diff --git a/apps/web-antd/src/utils/dict.ts b/apps/web-antd/src/utils/dict.ts
index 968974b6c..ded8ea473 100644
--- a/apps/web-antd/src/utils/dict.ts
+++ b/apps/web-antd/src/utils/dict.ts
@@ -59,8 +59,10 @@ function getDictObj(dictType: string, value: any) {
  * 获取字典数组 用于select radio 等
  *
  * @param dictType 字典类型
+ * @param valueType 字典值类型，默认 string 类型
  * @returns 字典数组
  */
+// TODO @puhui999：貌似可以定义一个类型？不使用 any[]
 function getDictOptions(
   dictType: string,
   valueType: 'boolean' | 'number' | 'string' = 'string',
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 01a8b5fab..d5136a881 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,21 +1,36 @@
 <script lang="ts" setup>
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { ContentWrap } from '#/components/content-wrap';
-import { DictTag } from '#/components/dict-tag';
-import Demo01ContactForm from './modules/form.vue';
+import { h, onMounted, reactive, ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus, RefreshCw, Search } from '@vben/icons';
-import { Button, Form, Input, message, Pagination, RangePicker, Select } from 'ant-design-vue';
+import { cloneDeep, formatDateTime } from '@vben/utils';
+
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Pagination,
+  RangePicker,
+  Select,
+} from 'ant-design-vue';
 import { VxeColumn, VxeTable } from 'vxe-table';
 
-import { deleteDemo01Contact, exportDemo01Contact, getDemo01ContactPage } from '#/api/infra/demo/demo01';
+import {
+  deleteDemo01Contact,
+  exportDemo01Contact,
+  getDemo01ContactPage,
+} from '#/api/infra/demo/demo01';
+import { ContentWrap } from '#/components/content-wrap';
+import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 import { downloadByData } from '#/utils/download';
-import { h, onMounted, reactive, ref } from 'vue';
-import {cloneDeep, formatDateTime} from '@vben/utils';
+
+import Demo01ContactForm from './modules/form.vue';
 
 const loading = ref(true); // 列表的加载中
 const list = ref<Demo01ContactApi.Demo01Contact[]>([]); // 列表的数据
@@ -34,9 +49,9 @@ const exportLoading = ref(false); // 导出的加载中
 const getList = async () => {
   loading.value = true;
   try {
-    const params = cloneDeep(queryParams) as any
+    const params = cloneDeep(queryParams) as any;
     if (params.createTime && Array.isArray(params.createTime)) {
-      params.createTime = (params.createTime as string[]).join(',')
+      params.createTime = (params.createTime as string[]).join(',');
     }
     const data = await getDemo01ContactPage(params);
     list.value = data.list;
@@ -115,8 +130,15 @@ onMounted(() => {
 
     <ContentWrap>
       <!-- 搜索工作栏 -->
-      <Form class="-mb-15px" :model="queryParams" ref="queryFormRef" layout="inline">
+      <!-- TODO @puhui999：貌似 -mb-15px 没效果？可能和 ContentWrap 有关系？ -->
+      <Form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        layout="inline"
+      >
         <Form.Item label="名字" name="name">
+          <!-- TODO @puhui999：貌似不一定 240？看着和 schema 还是不太一样 -->
           <Input
             v-model:value="queryParams.name"
             placeholder="请输入名字"
@@ -126,9 +148,17 @@ onMounted(() => {
           />
         </Form.Item>
         <Form.Item label="性别" name="sex">
-          <Select v-model:value="queryParams.sex" placeholder="请选择性别" allow-clear class="!w-240px">
+          <Select
+            v-model:value="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="!w-240px"
+          >
             <Select.Option
-              v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
@@ -136,11 +166,23 @@ onMounted(() => {
           </Select>
         </Form.Item>
         <Form.Item label="创建时间" name="createTime">
-          <RangePicker v-model:value="queryParams.createTime" v-bind="getRangePickerDefaultProps()" class="!w-220px" />
+          <!-- TODO @puhui999：这里有个红色的告警，看看有办法处理哇？ -->
+          <RangePicker
+            v-model:value="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="!w-220px"
+          />
         </Form.Item>
         <Form.Item>
-          <Button class="ml-2" @click="handleQuery" :icon="h(Search)">搜索</Button>
-          <Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">重置</Button>
+          <!-- TODO @puhui999：搜索和重置；貌似样子和位置不太一样，有木有办法一致 -->
+          <!-- TODO @puhui999：收齐、展开，好弄哇？ -->
+          <Button class="ml-2" @click="handleQuery" :icon="h(Search)">
+            搜索
+          </Button>
+          <Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">
+            重置
+          </Button>
+          <!-- TODO @puhui999：有办法放到 VxeTable 哪里么？ -->
           <Button
             class="ml-2"
             :icon="h(Plus)"
@@ -165,6 +207,7 @@ onMounted(() => {
     </ContentWrap>
 
     <!-- 列表 -->
+    <!-- TODO @puhui999：title 要不还是假起来？ -->
     <ContentWrap>
       <VxeTable :data="list" show-overflow :loading="loading">
         <VxeColumn field="id" title="编号" align="center" />
@@ -210,6 +253,7 @@ onMounted(() => {
       </VxeTable>
       <!-- 分页 -->
       <div class="mt-2 flex justify-end">
+        <!-- TODO @puhui999：这个分页，看着不太一致 -->
         <Pagination
           :total="total"
           v-model:current="queryParams.pageNo"
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 8f95c8044..a0862b012 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
@@ -1,19 +1,34 @@
 <script lang="ts" setup>
-import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 import type { Rule } from 'ant-design-vue/es/form';
 
-import { Tinymce as RichTextarea } from '#/components/tinymce';
-import { ImageUpload } from '#/components/upload';
-import { useVbenModal } from '@vben/common-ui';
-import { DatePicker, Form, Input, message, Radio, RadioGroup } from 'ant-design-vue';
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { createDemo01Contact, getDemo01Contact, updateDemo01Contact } from '#/api/infra/demo/demo01';
-import { $t } from '#/locales';
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 import { computed, ref } from 'vue';
 
-const emit = defineEmits(['success']);
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  DatePicker,
+  Form,
+  Input,
+  message,
+  Radio,
+  RadioGroup,
+} from 'ant-design-vue';
+
+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 { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+const emit = defineEmits(['success']); // TODO @puhui999：emit 和下面空一行？
 const formRef = ref();
+// TODO @puhui999：labelCol、wrapperCol 直接写？不用单独定义变量，
 const labelCol = { span: 5 };
 const wrapperCol = { span: 13 };
 const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
@@ -31,7 +46,9 @@ const rules: Record<string, Rule[]> = {
   description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
 };
 const getTitle = computed(() => {
-  return formData.value?.id ? $t('ui.actionTitle.edit', ['示例联系人']) : $t('ui.actionTitle.create', ['示例联系人']);
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例联系人'])
+    : $t('ui.actionTitle.create', ['示例联系人']);
 });
 
 /** 重置表单 */
@@ -54,7 +71,9 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     const data = formData.value as Demo01ContactApi.Demo01Contact;
     try {
-      await (formData.value?.id ? updateDemo01Contact(data) : createDemo01Contact(data));
+      await (formData.value?.id
+        ? updateDemo01Contact(data)
+        : createDemo01Contact(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -72,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
-    // 加载数据
+    // 加载数据 TODO @puhui999：这里不用空行
     let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
     if (!data) {
       return;
@@ -92,7 +111,13 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle">
-    <Form ref="formRef" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
       <Form.Item label="名字" name="name">
         <Input v-model:value="formData.name" placeholder="请输入名字" />
       </Form.Item>
@@ -108,7 +133,11 @@ const [Modal, modalApi] = useVbenModal({
         </RadioGroup>
       </Form.Item>
       <Form.Item label="出生年" name="birthday">
-        <DatePicker v-model:value="formData.birthday" value-format="x" placeholder="选择出生年" />
+        <DatePicker
+          v-model:value="formData.birthday"
+          value-format="x"
+          placeholder="选择出生年"
+        />
       </Form.Item>
       <Form.Item label="简介" name="description">
         <RichTextarea v-model="formData.description" height="500px" />
diff --git a/apps/web-antd/src/views/system/notify/my/modules/detail.vue b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
index 2c5275c35..a2d94fd7a 100644
--- a/apps/web-antd/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
-import { useDescription } from '#/components/description';
-import { DictTag } from '#/components/dict-tag';
-import { useVbenModal } from '@vben/common-ui';
-
-import { DICT_TYPE } from '#/utils/dict';
 import { h, ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils/dict';
+
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Description, descApi] = useDescription({
@@ -32,12 +32,20 @@ const [Description, descApi] = useDescription({
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data) => h(DictTag, { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, value: data?.templateType }),
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          value: data?.templateType,
+        }),
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data) => h(DictTag, { type: DICT_TYPE.INFRA_BOOLEAN_STRING, value: data?.readStatus }),
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: data?.readStatus,
+        }),
     },
     {
       field: 'readTime',
@@ -74,7 +82,11 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="消息详情" :show-cancel-button="false" :show-confirm-button="false">
+  <Modal
+    title="消息详情"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
     <Description />
   </Modal>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e2375cd1..0f698b3f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -755,13 +755,13 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.0(vue@3.5.13(typescript@5.8.3))
+      vxe-table:
+        specifier: 'catalog:'
+        version: 4.13.7(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@types/crypto-js':
         specifier: 'catalog:'
         version: 4.2.2
-      '@types/lodash.clonedeep':
-        specifier: 'catalog:'
-        version: 4.5.9
 
   apps/web-ele:
     dependencies: