perf: 【ANTD】优化一些 todo 提到的问题

apps/web-antd/src/adapter/style.css

@@ -1,4 +1,4 @@
-/* 来自 @vben/plugins/vxe-table style.css TODO @puhui999：可以写下目的哈； */
+/* 来自 @vben/plugins/vxe-table style.css，覆盖 vxe-table 原有的样式定义，使用 vben 的样式主题 */
 :root {
   --vxe-ui-font-color: hsl(var(--foreground));
   --vxe-ui-font-primary-color: hsl(var(--primary));

apps/web-antd/src/api/infra/demo/demo01/index.ts

@@ -46,8 +46,7 @@ export function deleteDemo01Contact(id: number) {
   return requestClient.delete(`/infra/demo01-contact/delete?id=${id}`);
 }
 
-// 批量删除示例联系人
+/** 批量删除示例联系人 */
-// TODO @puhui999：注释风格哈。
 export function deleteDemo01ContactByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo01-contact/delete-batch?ids=${ids.join(',')}`,

apps/web-antd/src/api/infra/demo/demo03/erp/index.ts

@@ -61,7 +61,7 @@ export function deleteDemo03Student(id: number) {
   return requestClient.delete(`/infra/demo03-student-erp/delete?id=${id}`);
 }
 
-// 批量删除学生
+/** 批量删除学生 */
 export function deleteDemo03StudentByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo03-student-erp/delete-batch?ids=${ids.join(',')}`,
@@ -108,7 +108,7 @@ export function deleteDemo03Course(id: number) {
   );
 }
 
-// 批量删除学生课程
+/** 批量删除学生课程 */
 export function deleteDemo03CourseByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo03-student-erp/demo03-course/delete-batch?ids=${ids.join(',')}`,
@@ -154,7 +154,7 @@ export function deleteDemo03Grade(id: number) {
   );
 }
 
-// 批量删除学生班级
+/** 批量删除学生班级 */
 export function deleteDemo03GradeByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo03-student-erp/demo03-grade/delete-batch?ids=${ids.join(',')}`,

apps/web-antd/src/api/infra/demo/demo03/inner/index.ts

@@ -63,7 +63,7 @@ export function deleteDemo03Student(id: number) {
   return requestClient.delete(`/infra/demo03-student-inner/delete?id=${id}`);
 }
 
-// 批量删除学生
+/** 批量删除学生 */
 export function deleteDemo03StudentByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo03-student-inner/delete-batch?ids=${ids.join(',')}`,

apps/web-antd/src/api/infra/demo/demo03/normal/index.ts

@@ -63,7 +63,7 @@ export function deleteDemo03Student(id: number) {
   return requestClient.delete(`/infra/demo03-student-normal/delete?id=${id}`);
 }
 
-// 批量删除学生
+/** 批量删除学生 */
 export function deleteDemo03StudentByIds(ids: number[]) {
   return requestClient.delete(
     `/infra/demo03-student-normal/delete-batch?ids=${ids.join(',')}`,

apps/web-antd/src/hooks/use-table-toolbar.ts

@@ -3,7 +3,10 @@ import type { TableToolbar } from '#/components/table-toolbar';
 
 import { ref, watch } from 'vue';
 
-// TODO @puhui999：这里的注释、目的写下；
+/**
+ * vxe 原生工具栏挂载封装
+ * 解决每个组件使用 vxe-table 组件时都需要写一遍的问题
+ */
 export function useTableToolbar() {
   const hiddenSearchBar = ref(false); // 隐藏搜索栏
   const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
@@ -15,7 +18,7 @@ export function useTableToolbar() {
     const table = tableRef.value;
     const tableToolbar = tableToolbarRef.value;
     if (table && tableToolbar) {
-      // TODO @puhui999：通过 nexttick 可以解决么？
+      // TODO @puhui999：通过 nexttick 可以解决么？试过不得行🤣刚好列表组件出现后延迟一秒挂载很稳
       setTimeout(async () => {
         const toolbar = tableToolbar.getToolbarRef();
         if (!toolbar) {
@@ -29,10 +32,9 @@ export function useTableToolbar() {
 
   watch(
     () => tableRef.value,
-    (val) => {
+    async (val) => {
       if (!val || isBound.value) return;
-      // TODO @puhui999：这里要处理下 promise 的告警么？
+      await bindTableToolbar();
-      bindTableToolbar();
     },
     { immediate: true },
   );

apps/web-antd/src/utils/dict.ts

@@ -1,4 +1,3 @@
-import type { DefaultOptionType } from 'ant-design-vue/es/select';
 // TODO @芋艿：后续再优化
 // TODO @芋艿：可以共享么？
 
@@ -14,11 +13,11 @@ import { useDictStore } from '#/store';
 type ColorType = 'error' | 'info' | 'success' | 'warning';
 
 export interface DictDataType {
-  dictType: string;
+  dictType?: string;
   label: string;
   value: boolean | number | string;
-  colorType: ColorType;
+  colorType?: ColorType;
-  cssClass: string;
+  cssClass?: string;
 }
 
 export interface NumberDictDataType extends DictDataType {
@@ -62,14 +61,13 @@ function getDictObj(dictType: string, value: any) {
  * @param valueType 字典值类型，默认 string 类型
  * @returns 字典数组
  */
-// TODO @puhui999：貌似可以定义一个类型？不使用 any[]
 function getDictOptions(
   dictType: string,
   valueType: 'boolean' | 'number' | 'string' = 'string',
-): any[] {
+): DictDataType[] {
   const dictStore = useDictStore();
   const dictOpts = dictStore.getDictOptions(dictType);
-  const dictOptions: DefaultOptionType = [];
+  const dictOptions: DictDataType[] = [];
   if (dictOpts.length > 0) {
     let dictValue: boolean | number | string = '';
     dictOpts.forEach((d) => {

apps/web-antd/src/views/infra/demo/demo01/data.ts

@@ -151,8 +151,6 @@ export function useGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      // TODO @puhui999：headerAlign 要使用 headerAlign: 'center' 么？看着现在分成了 align 和 headerAlign 两种
-      headerAlign: 'center',
       showOverflow: false,
       cellRender: {
         attrs: {

apps/web-antd/src/views/infra/demo/demo01/index.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { computed, h, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -61,16 +61,6 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
   }
 }
 
-// TODO @puhui999：:1）/** 批量删除示例联系人 */ 是不是放在 deleteIds 上面；2）showDeleteBatchBtn 是不是直接 disabled 哪里判断哈；
-const deleteIds = ref<number[]>([]); // 待删除示例联系人 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
-function setDeleteIds({
-  records,
-}: {
-  records: Demo01ContactApi.Demo01Contact[];
-}) {
-  deleteIds.value = records.map((item) => item.id);
-}
 /** 批量删除示例联系人 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -87,6 +77,15 @@ async function onDeleteBatch() {
   }
 }
 
+const deleteIds = ref<number[]>([]); // 待删除示例联系人 ID
+function setDeleteIds({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+
 /** 导出表格 */
 async function onExport() {
   const data = await exportDemo01Contact(await gridApi.formApi.getValues());
@@ -175,7 +174,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           type="primary"
           danger
           class="ml-2"
-          :disabled="showDeleteBatchBtn"
+          :disabled="isEmpty(deleteIds)"
           @click="onDeleteBatch"
           v-access:code="['infra:demo01-contact:delete']"
         >

apps/web-antd/src/views/infra/demo/demo02/data.ts

@@ -121,7 +121,6 @@ export function useGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
       showOverflow: false,
       cellRender: {
         attrs: {

apps/web-antd/src/views/infra/demo/demo03/erp/data.ts

@@ -150,7 +150,6 @@ export function useGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
       showOverflow: false,
       cellRender: {
         attrs: {
@@ -288,7 +287,7 @@ export function useDemo03CourseGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
+
       showOverflow: false,
       cellRender: {
         attrs: {
@@ -426,7 +425,7 @@ export function useDemo03GradeGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
+
       showOverflow: false,
       cellRender: {
         attrs: {

apps/web-antd/src/views/infra/demo/demo03/erp/index.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { computed, h, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -67,8 +67,6 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
   }
 }
 
-const deleteIds = ref<number[]>([]); // 待删除学生 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
 /** 批量删除学生 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -85,6 +83,15 @@ async function onDeleteBatch() {
   }
 }
 
+const deleteIds = ref<number[]>([]); // 待删除学生 ID
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+
 /** 导出表格 */
 async function onExport() {
   const data = await exportDemo03Student(await gridApi.formApi.getValues());
@@ -143,20 +150,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
       selectDemo03Student.value = row;
     },
-    checkboxAll: ({
+    checkboxAll: setDeleteIds,
-      records,
+    checkboxChange: setDeleteIds,
-    }: {
-      records: Demo03StudentApi.Demo03Student[];
-    }) => {
-      deleteIds.value = records.map((item) => item.id);
-    },
-    checkboxChange: ({
-      records,
-    }: {
-      records: Demo03StudentApi.Demo03Student[];
-    }) => {
-      deleteIds.value = records.map((item) => item.id);
-    },
   },
 });
 </script>
@@ -190,7 +185,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             type="primary"
             danger
             class="ml-2"
-            :disabled="showDeleteBatchBtn"
+            :disabled="isEmpty(deleteIds)"
             @click="onDeleteBatch"
             v-access:code="['infra:demo03-student:delete']"
           >

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { computed, h, nextTick, ref, watch } from 'vue';
+import { h, nextTick, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
@@ -66,15 +66,6 @@ async function onDelete(row: Demo03StudentApi.Demo03Course) {
   }
 }
 
-const deleteIds = ref<number[]>([]); // 待删除学生课程 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
-function setDeleteIds({
-  records,
-}: {
-  records: Demo03StudentApi.Demo03Course[];
-}) {
-  deleteIds.value = records.map((item) => item.id);
-}
 /** 批量删除学生课程 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -91,6 +82,15 @@ async function onDeleteBatch() {
   }
 }
 
+const deleteIds = ref<number[]>([]); // 待删除学生课程 ID
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -184,7 +184,7 @@ watch(
         type="primary"
         danger
         class="ml-2"
-        :disabled="showDeleteBatchBtn"
+        :disabled="isEmpty(deleteIds)"
         @click="onDeleteBatch"
         v-access:code="['infra:demo03-student:delete']"
       >

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { computed, h, nextTick, ref, watch } from 'vue';
+import { h, nextTick, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
@@ -66,15 +66,6 @@ async function onDelete(row: Demo03StudentApi.Demo03Grade) {
   }
 }
 
-const deleteIds = ref<number[]>([]); // 待删除学生班级 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
-function setDeleteIds({
-  records,
-}: {
-  records: Demo03StudentApi.Demo03Grade[];
-}) {
-  deleteIds.value = records.map((item) => item.id);
-}
 /** 批量删除学生班级 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -91,6 +82,15 @@ async function onDeleteBatch() {
   }
 }
 
+const deleteIds = ref<number[]>([]); // 待删除学生班级 ID
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -184,7 +184,7 @@ watch(
         type="primary"
         danger
         class="ml-2"
-        :disabled="showDeleteBatchBtn"
+        :disabled="isEmpty(deleteIds)"
         @click="onDeleteBatch"
         v-access:code="['infra:demo03-student:delete']"
       >

apps/web-antd/src/views/infra/demo/demo03/inner/data.ts

@@ -151,7 +151,6 @@ export function useGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
       showOverflow: false,
       cellRender: {
         attrs: {
@@ -200,7 +199,7 @@ export function useDemo03CourseGridEditColumns(
       minWidth: 60,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
+
       showOverflow: false,
       cellRender: {
         attrs: {

apps/web-antd/src/views/infra/demo/demo03/inner/index.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
-import { computed, h, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -66,15 +66,6 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
   }
 }
 
-const deleteIds = ref<number[]>([]); // 待删除学生 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
-function setDeleteIds({
-  records,
-}: {
-  records: Demo03StudentApi.Demo03Student[];
-}) {
-  deleteIds.value = records.map((item) => item.id);
-}
 /** 批量删除学生 */
 async function onDeleteBatch() {
   const hideLoading = message.loading({
@@ -91,6 +82,15 @@ async function onDeleteBatch() {
   }
 }
 
+const deleteIds = ref<number[]>([]); // 待删除学生 ID
+function setDeleteIds({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  deleteIds.value = records.map((item) => item.id);
+}
+
 /** 导出表格 */
 async function onExport() {
   const data = await exportDemo03Student(await gridApi.formApi.getValues());
@@ -190,7 +190,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           type="primary"
           danger
           class="ml-2"
-          :disabled="showDeleteBatchBtn"
+          :disabled="isEmpty(deleteIds)"
           @click="onDeleteBatch"
           v-access:code="['infra:demo03-student:delete']"
         >

apps/web-antd/src/views/infra/demo/demo03/normal/data.ts

@@ -150,7 +150,6 @@ export function useGridColumns(
       minWidth: 200,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
       showOverflow: false,
       cellRender: {
         attrs: {
@@ -199,7 +198,7 @@ export function useDemo03CourseGridEditColumns(
       minWidth: 60,
       align: 'center',
       fixed: 'right',
-      headerAlign: 'center',
+
       showOverflow: false,
       cellRender: {
         attrs: {

apps/web-antd/src/views/infra/demo/demo03/normal/index.vue

@@ -5,7 +5,7 @@ import type {
 } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { computed, h, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -62,7 +62,6 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
 }
 
 const deleteIds = ref<number[]>([]); // 待删除学生 ID
-const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
 function setDeleteIds({
   records,
 }: {
@@ -174,7 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           type="primary"
           danger
           class="ml-2"
-          :disabled="showDeleteBatchBtn"
+          :disabled="isEmpty(deleteIds)"
           @click="onDeleteBatch"
           v-access:code="['infra:demo03-student:delete']"
         >

apps/web-antd/src/views/system/social/user/index.vue

@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemSocialUserApi } from '#/api/system/social/user';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSocialUserPage } from '#/api/system/social/user';

apps/web-ele/src/utils/dict.ts

@@ -14,11 +14,11 @@ import { useDictStore } from '#/store';
 type ColorType = 'error' | 'info' | 'success' | 'warning';
 
 export interface DictDataType {
-  dictType: string;
+  dictType?: string;
   label: string;
   value: boolean | number | string;
-  colorType: ColorType;
+  colorType?: ColorType;
-  cssClass: string;
+  cssClass?: string;
 }
 
 export interface NumberDictDataType extends DictDataType {
@@ -62,11 +62,10 @@ function getDictObj(dictType: string, value: any) {
  * @param valueType 字典值类型，默认 string 类型
  * @returns 字典数组
  */
-// TODO @puhui999：貌似可以定义一个类型？不使用 any[]
 function getDictOptions(
   dictType: string,
   valueType: 'boolean' | 'number' | 'string' = 'string',
-): any[] {
+): DictDataType[] {
   const dictStore = useDictStore();
   const dictOpts = dictStore.getDictOptions(dictType);
   const dictOptions: DefaultOptionType = [];