feat：【antd】【ele】统一 infra 和 system 的代码风格

apps/web-antd/src/views/infra/codegen/data.ts

@@ -366,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         allowClear: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -375,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         allowClear: true,
+        placeholder: '请输入表描述',
       },
     },
     {

apps/web-antd/src/views/infra/codegen/edit/index.vue

@@ -154,8 +154,8 @@ getDetail();
       </div>
 
       <div class="mt-4 flex justify-end space-x-2">
-        <Button v-show="currentStep > 0" @click="prevStep">上一步</Button>
+        <Button :disabled="currentStep === 0" @click="prevStep">上一步</Button>
-        <Button v-show="currentStep < steps.length - 1" @click="nextStep">
+        <Button :disabled="currentStep === steps.length - 1" @click="nextStep">
           下一步
         </Button>
         <Button type="primary" :loading="loading" @click="submitForm">

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

@@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -56,7 +56,7 @@ async function handleDelete(row: InfraConfigApi.Config) {
   try {
     await deleteConfig(row.id as number);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -73,7 +73,7 @@ async function handleDeleteBatch() {
     await deleteConfigList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="参数列表">
       <template #toolbar-tools>
         <TableAction

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

@@ -159,7 +159,7 @@ onMounted(async () => {
               onClick: handleExpand,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'primary',
               danger: true,
               icon: ACTION_ICON.DELETE,

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

@@ -292,9 +292,7 @@ export function useDataGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/**
+/** 字典数据表格列 */
- * 字典数据表格列
- */
 export function useDataGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  VxeGridListeners,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { ref } from 'vue';

apps/web-antd/src/views/system/notify/my/data.ts

@@ -21,8 +21,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
-        placeholder: '请选择是否已读',
         allowClear: true,
+        placeholder: '请选择是否已读',
       },
     },
     {

apps/web-antd/src/views/system/social/user/data.ts

@@ -8,9 +8,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { getRangePickerDefaultProps } from '#/utils';
-
 import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -126,9 +125,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
+      // TODO @芋艿：使用 antd 的 Image 组件
       content: (data: SystemSocialUserApi.SocialUser) => {
         if (data?.avatar) {
-          // TODO @芋艿：使用 antd 的 Image 组件
           return h('img', {
             src: data.avatar,
             style: 'width: 30px; height: 30px; cursor: pointer;',

apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/infra/build/index.vue

@@ -87,6 +87,7 @@ function showTemplate() {
   formData.value = makeTemplate();
 }
 
+/** 生成组件 */
 function makeTemplate() {
   const rule = designer.value.getRule();
   const opt = designer.value.getOption();

apps/web-ele/src/views/infra/codegen/data.ts

@@ -42,8 +42,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         clearable: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -51,8 +51,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         clearable: true,
+        placeholder: '请输入表描述',
       },
     },
   ];
@@ -366,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         clearable: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -375,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         clearable: true,
+        placeholder: '请输入表描述',
       },
     },
     {

apps/web-ele/src/views/infra/codegen/edit/index.vue

@@ -151,8 +151,13 @@ getDetail();
       </div>
 
       <div class="mt-4 flex justify-end space-x-2">
-        <ElButton v-show="currentStep > 0" @click="prevStep">上一步</ElButton>
+        <ElButton :disabled="currentStep === 0" @click="prevStep">
-        <ElButton v-show="currentStep < steps.length - 1" @click="nextStep">
+          上一步
+        </ElButton>
+        <ElButton
+          :disabled="currentStep === steps.length - 1"
+          @click="nextStep"
+        >
           下一步
         </ElButton>
         <ElButton type="primary" :loading="loading" @click="submitForm">

apps/web-ele/src/views/infra/codegen/index.vue

@@ -176,6 +176,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 获取数据源配置列表 */
+// TODO @芋艿：这种场景的最佳实践；
 async function initDataSourceConfig() {
   try {
     dataSourceConfigList.value = await getDataSourceConfigList();

apps/web-ele/src/views/infra/file/index.vue

@@ -150,21 +150,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       </template>
       <template #file-content="{ row }">
         <ElImage v-if="row.type && row.type.includes('image')" :src="row.url" />
-        <ElButton
+        <ElButton type="primary" link @click="() => openWindow(row.url!)">
-          v-else-if="row.type && row.type.includes('pdf')"
+          {{ row.type && row.type.includes('pdf') ? '预览' : '下载' }}
-          type="primary"
-          link
-          @click="() => openWindow(row.url!)"
-        >
-          预览
-        </ElButton>
-        <ElButton
-          v-else
-          type="primary"
-          link
-          @click="() => openWindow(row.url!)"
-        >
-          下载
         </ElButton>
       </template>
       <template #actions="{ row }">

apps/web-ele/src/views/infra/job/logger/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraJobLogApi } from '#/api/infra/job-log';
 
 import { ref } from 'vue';
@@ -17,9 +17,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/infra/job/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraJobApi } from '#/api/infra/job';
 
 import { ref } from 'vue';
@@ -18,9 +18,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/infra/job/modules/form.vue

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -157,7 +157,7 @@ onMounted(async () => {
               onClick: handleExpand,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'danger',
               icon: ACTION_ICON.DELETE,
               auth: ['system:dept:delete'],

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

@@ -151,9 +151,7 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
 // ============================== 字典数据 ==============================
 
 // TODO @芋艿：后续针对 antd，增加
-/**
+/** 颜色选项 */
- * 颜色选项
- */
 const colorOptions = [
   { value: '', label: '无' },
   { value: 'processing', label: '主要' },

apps/web-ele/src/views/system/dict/modules/type-grid.vue

@@ -55,7 +55,7 @@ async function handleDelete(row: SystemDictTypeApi.DictType) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDictType(row.id as number);
+    await deleteDictType(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {

apps/web-ele/src/views/system/loginlog/index.vue

@@ -3,11 +3,11 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemLoginLogApi } from '#/api/system/login-log';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';

apps/web-ele/src/views/system/loginlog/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemLoginLogApi } from '#/api/system/login-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/mail/log/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemMailLogApi } from '#/api/system/mail/log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 2,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/menu/data.ts

@@ -59,7 +59,6 @@ export function useFormSchema(): VbenFormSchema[] {
         },
         showSearch: true,
         treeDefaultExpandedKeys: [0],
-        allowClear: true,
       },
       rules: 'selectRequired',
       renderComponentContent() {
@@ -168,7 +167,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'AutoComplete',
       componentProps: {
         clearable: true,
-        allowClear: true,
         filterOption(input: string, option: { value: string }) {
           return option.value.toLowerCase().includes(input.toLowerCase());
         },

apps/web-ele/src/views/system/notify/message/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/notify/my/data.ts

@@ -30,8 +30,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '发送时间',
       component: 'RangePicker',
       componentProps: {
-        clearable: true,
         ...getRangePickerDefaultProps(),
+        clearable: true,
       },
     },
   ];

apps/web-ele/src/views/system/notify/my/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/operatelog/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/sms/log/data.ts

@@ -164,6 +164,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
       },
     },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       title: '操作',
       width: 80,

apps/web-ele/src/views/system/sms/log/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemSmsLogApi } from '#/api/system/sms/log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 2,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });

apps/web-ele/src/views/system/social/user/data.ts

@@ -8,9 +8,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { getRangePickerDefaultProps } from '#/utils';
-
 import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -126,6 +125,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
+      // TODO @芋艿：使用 antd 的 Image 组件
       content: (data: SystemSocialUserApi.SocialUser) => {
         if (data?.avatar) {
           return h('img', {

apps/web-ele/src/views/system/user/modules/form.vue

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-ele/src/views/system/user/modules/import-form.vue

@@ -59,7 +59,7 @@ async function handleDownload() {
 </script>
 
 <template>
-  <Modal title="导入用户">
+  <Modal title="导入用户" class="w-1/3">
     <Form class="mx-4">
       <template #file>
         <div class="w-full">