reactor：【infra 基础设施】file 进一步统一代码风格

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

@@ -27,7 +27,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入文件路径',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -36,7 +36,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入文件类型',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -45,7 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
@@ -58,22 +58,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '文件名',
+      minWidth: 150,
     },
     {
       field: 'path',
       title: '文件路径',
+      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'url',
       title: 'URL',
+      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'size',
       title: '文件大小',
+      minWidth: 80,
       formatter: ({ cellValue }) => {
-        // TODO @芋艿：后续优化下
+        // TODO @xingyu：【优先级：中】要不要搞到一个方法里？
         if (!cellValue) return '0 B';
         const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         const index = Math.floor(Math.log(cellValue) / Math.log(1024));
@@ -85,15 +89,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '文件类型',
+      minWidth: 120,
     },
     {
       field: 'file-content',
       title: '文件内容',
-      slots: { default: 'file-content' },
+      minWidth: 120,
+      slots: {
+        default: 'file-content',
+      },
     },
     {
       field: 'createTime',
       title: '上传时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {

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

@@ -4,7 +4,7 @@ import type { InfraFileApi } from '#/api/infra/file';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty, openWindow } from '@vben/utils';
 
 import { useClipboard } from '@vueuse/core';
@@ -23,7 +23,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -53,14 +53,30 @@ async function handleDelete(row: InfraFileApi.File) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name || row.path]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteFile(row.id as number);
     message.success(
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
-    onRefresh();
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除文件 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteFileList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -75,23 +91,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 批量删除文件 */
-async function handleDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteFileList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -129,24 +128,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="文件列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '上传图片',
+              label: '上传文件',
               type: 'primary',
               icon: ACTION_ICON.UPLOAD,
-              auth: ['infra:file:create'],
               onClick: handleUpload,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'primary',
               danger: true,
-              disabled: isEmpty(checkedIds),
               icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
               auth: ['infra:file:delete'],
               onClick: handleDeleteBatch,
             },
@@ -172,8 +170,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              auth: ['infra:file:delete'],
               icon: ACTION_ICON.DELETE,
+              auth: ['infra:file:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),

apps/web-antd/src/views/infra/file/modules/form.vue

@@ -50,7 +50,6 @@ const [Modal, modalApi] = useVbenModal({
 
 /** 上传前 */
 function beforeUpload(file: FileType) {
-  // TODO @puhui999：研究下，看看怎么类似 antd 可以前端直传哈；通过配置切换；
   formApi.setFieldValue('file', file);
   return false;
 }
@@ -62,7 +61,6 @@ function beforeUpload(file: FileType) {
       <template #file>
         <div class="w-full">
           <!-- 上传区域 -->
-          <!-- TODO @puhui999：1）上传图片，用不了；2）底部有点遮挡 -->
           <Upload.Dragger
             name="file"
             :max-count="1"

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

@@ -1,13 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraFileApi } from '#/api/infra/file';
-
-import { useAccess } from '@vben/access';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 表单的字段 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -57,9 +52,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = InfraFileApi.File>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -84,7 +77,7 @@ export function useGridColumns<T = InfraFileApi.File>(
       title: '文件大小',
       minWidth: 80,
       formatter: ({ cellValue }) => {
-        // TODO @芋艿：后续优化下
+        // TODO @xingyu：【优先级：中】要不要搞到一个方法里？
         if (!cellValue) return '0 B';
         const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         const index = Math.floor(Math.log(cellValue) / Math.log(1024));
@@ -113,29 +106,10 @@ export function useGridColumns<T = InfraFileApi.File>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
       width: 160,
       fixed: 'right',
-      align: 'center',
+      slots: { default: 'actions' },
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '文件',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'copyUrl',
-            text: '复制链接',
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:file:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { InfraFileApi } from '#/api/infra/file';
 
 import { ref } from 'vue';
@@ -26,18 +23,18 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 上传文件 */
-function onUpload() {
+function handleUpload() {
   formModalApi.setData(null).open();
 }
 
 /** 复制链接到剪贴板 */
 const { copy } = useClipboard({ legacy: true });
-async function onCopyUrl(row: InfraFileApi.File) {
+async function handleCopyUrl(row: InfraFileApi.File) {
   if (!row.url) {
     ElMessage.error('文件 URL 为空');
     return;
@@ -51,15 +48,8 @@ async function onCopyUrl(row: InfraFileApi.File) {
   }
 }
 
-/** 打开 URL */
-function openUrl(url?: string) {
-  if (url) {
-    openWindow(url);
-  }
-}
-
 /** 删除文件 */
-async function onDelete(row: InfraFileApi.File) {
+async function handleDelete(row: InfraFileApi.File) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name || row.path]),
   });
@@ -68,19 +58,26 @@ async function onDelete(row: InfraFileApi.File) {
     ElMessage.success(
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
 }
 
 /** 批量删除文件 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
-  await confirm('确定要批量删除该文件吗？');
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
-  await deleteFileList(checkedIds.value);
+  const loadingInstance = ElLoading.service({
-  checkedIds.value = [];
+    text: $t('ui.actionMessage.deletingBatch'),
-  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  });
-  onRefresh();
+  try {
+    await deleteFileList(checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const checkedIds = ref<number[]>([]);
@@ -92,26 +89,12 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<InfraFileApi.File>) {
-  switch (code) {
-    case 'copyUrl': {
-      onCopyUrl(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -127,6 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -142,16 +126,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="文件列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '上传图片',
+              label: '上传文件',
               type: 'primary',
               icon: ACTION_ICON.UPLOAD,
-              onClick: onUpload,
+              onClick: handleUpload,
             },
             {
               label: $t('ui.actionTitle.deleteBatch'),
@@ -159,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               disabled: isEmpty(checkedIds),
               auth: ['infra:file:delete'],
-              onClick: onDeleteBatch,
+              onClick: handleDeleteBatch,
             },
           ]"
         />
@@ -170,14 +154,43 @@ const [Grid, gridApi] = useVbenVxeGrid({
           v-else-if="row.type && row.type.includes('pdf')"
           type="primary"
           link
-          @click="() => openUrl(row.url)"
+          @click="() => openWindow(row.url!)"
         >
           预览
         </ElButton>
-        <ElButton v-else type="primary" link @click="() => openUrl(row.url)">
+        <ElButton
+          v-else
+          type="primary"
+          link
+          @click="() => openWindow(row.url!)"
+        >
           下载
         </ElButton>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '复制链接',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.COPY,
+              onClick: handleCopyUrl.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:file:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>

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

@@ -50,6 +50,7 @@ const [Modal, modalApi] = useVbenModal({
 
 /** 上传前 */
 function beforeUpload(file: UploadRawFile) {
+  // TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
   formApi.setFieldValue('file', file);
   return false;
 }