feat: 新增 ele infra 文件管理模块

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

@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, 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 [
+    {
+      fieldName: 'file',
+      label: '文件上传',
+      component: 'Upload',
+      componentProps: {
+        placeholder: '请选择要上传的文件',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'path',
+      label: '文件路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件路径',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '文件类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = InfraFileApi.File>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      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 @芋艿：后续优化下
+        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));
+        const size = cellValue / 1024 ** index;
+        const formattedSize = size.toFixed(2);
+        return `${formattedSize} ${unitArr[index]}`;
+      },
+    },
+    {
+      field: 'type',
+      title: '文件类型',
+      minWidth: 120,
+    },
+    {
+      field: 'file-content',
+      title: '文件内容',
+      minWidth: 120,
+      slots: {
+        default: 'file-content',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      align: 'center',
+      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

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { InfraFileApi } from '#/api/infra/file';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Upload } from '@vben/icons';
+import { openWindow } from '@vben/utils';
+
+import { useClipboard } from '@vueuse/core';
+import { ElButton, ElImage, ElLoading, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteFile, getFilePage } from '#/api/infra/file';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 上传文件 */
+function onUpload() {
+  formModalApi.setData(null).open();
+}
+
+/** 复制链接到剪贴板 */
+const { copy } = useClipboard({ legacy: true });
+async function onCopyUrl(row: InfraFileApi.File) {
+  if (!row.url) {
+    ElMessage.error('文件 URL 为空');
+    return;
+  }
+
+  try {
+    await copy(row.url);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+
+/** 打开 URL */
+function openUrl(url?: string) {
+  if (url) {
+    openWindow(url);
+  }
+}
+
+/** 删除文件 */
+async function onDelete(row: InfraFileApi.File) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name || row.path]),
+    fullscreen: true,
+  });
+  try {
+    await deleteFile(row.id as number);
+    loadingInstance.close();
+    ElMessage.success(
+      $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
+    );
+    onRefresh();
+  } catch {
+    loadingInstance.close();
+  }
+}
+
+/** 表格操作按钮的回调函数 */
+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),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFilePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileApi.File>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="文件列表">
+      <template #toolbar-tools>
+        <ElButton type="primary" @click="onUpload">
+          <Upload class="size-5" />
+          上传图片
+        </ElButton>
+      </template>
+      <template #file-content="{ row }">
+        <ElImage v-if="row.type && row.type.includes('image')" :src="row.url" />
+        <ElButton
+          v-else-if="row.type && row.type.includes('pdf')"
+          type="primary"
+          link
+          @click="() => openUrl(row.url)"
+        >
+          预览
+        </ElButton>
+        <ElButton v-else type="primary" link @click="() => openUrl(row.url)">
+          下载
+        </ElButton>
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { useUpload } from '#/components/upload/use-upload';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    hideLabel: true,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await useUpload().httpRequest(data.file);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: UploadRawFile) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+</script>
+
+<template>
+  <Modal title="上传图片">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <!-- 上传区域 -->
+          <ElUpload
+            class="upload-demo"
+            drag
+            :auto-upload="false"
+            :limit="1"
+            accept=".jpg,.png,.gif,.webp"
+            :before-upload="beforeUpload"
+            list-type="picture-card"
+          >
+            <div class="el-upload__text">
+              <p>
+                <i class="el-icon-upload text-2xl"></i>
+              </p>
+              <p>点击或拖拽文件到此区域上传</p>
+              <p class="text-sm text-gray-500">
+                支持 .jpg、.png、.gif、.webp 格式图片文件
+              </p>
+            </div>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+  </Modal>
+</template>

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

@@ -0,0 +1,347 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { useAccess } from '@vben/access';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (formValues) => !formValues.id,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+    // DB / Local / FTP / SFTP
+    {
+      fieldName: 'config.basePath',
+      label: '基础路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入基础路径',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 10 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.host',
+      label: '主机地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入主机地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.port',
+      label: '主机端口',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        controlsPosition: 'right',
+        placeholder: '请输入主机端口',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.password',
+      label: '密码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.mode',
+      label: '连接模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '主动模式', value: 'Active' },
+          { label: '被动模式', value: 'Passive' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 11,
+      },
+    },
+    // S3
+    {
+      fieldName: 'config.endpoint',
+      label: '节点地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入节点地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.bucket',
+      label: '存储 bucket',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 bucket',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessKey',
+      label: 'accessKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessKey',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessSecret',
+      label: 'accessSecret',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessSecret',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.enablePathStyleAccess',
+      label: '是否 Path Style',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '启用', value: true },
+          { label: '禁用', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+      defaultValue: false,
+    },
+    // 通用
+    {
+      fieldName: 'config.domain',
+      label: '自定义域名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入自定义域名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => !!formValues.storage,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = InfraFileConfigApi.FileConfig>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 100,
+    },
+    {
+      field: 'name',
+      title: '配置名',
+      minWidth: 120,
+    },
+    {
+      field: 'storage',
+      title: '存储器',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    {
+      field: 'master',
+      title: '主配置',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '文件配置',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'edit',
+            show: hasAccessByCodes(['infra:file-config:update']),
+          },
+          {
+            code: 'delete',
+            show: hasAccessByCodes(['infra:file-config:delete']),
+          },
+          {
+            code: 'master',
+            text: '主配置',
+            disabled: (row: any) => row.master,
+            show: (_row: any) => hasAccessByCodes(['infra:file-config:update']),
+          },
+          {
+            code: 'test',
+            text: '测试',
+          },
+        ],
+      },
+    },
+  ];
+}

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

@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+import { openWindow } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFileConfig,
+  getFileConfigPage,
+  testFileConfig,
+  updateFileConfigMaster,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建文件配置 */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑文件配置 */
+function onEdit(row: InfraFileConfigApi.FileConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 设为主配置 */
+async function onMaster(row: InfraFileConfigApi.FileConfig) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.updating', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await updateFileConfigMaster(row.id as number);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    onRefresh();
+  } catch {
+    loadingInstance.close();
+  }
+}
+
+/** 测试文件配置 */
+async function onTest(row: InfraFileConfigApi.FileConfig) {
+  const loadingInstance = ElLoading.service({
+    text: '测试上传中...',
+    fullscreen: true,
+  });
+  try {
+    const response = await testFileConfig(row.id as number);
+    loadingInstance.close();
+    // 确认是否访问该文件
+    confirm({
+      title: '测试上传成功',
+      content: '是否要访问该文件？',
+      confirmText: '访问',
+      cancelText: '取消',
+    }).then(() => {
+      openWindow(response);
+    });
+  } catch {
+    loadingInstance.close();
+  }
+}
+
+/** 删除文件配置 */
+async function onDelete(row: InfraFileConfigApi.FileConfig) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+    fullscreen: true,
+  });
+  try {
+    await deleteFileConfig(row.id as number);
+    loadingInstance.close();
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    onRefresh();
+  } catch {
+    loadingInstance.close();
+  }
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<InfraFileConfigApi.FileConfig>) {
+  switch (code) {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'master': {
+      onMaster(row);
+      break;
+    }
+    case 'test': {
+      onTest(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFileConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="文件配置列表">
+      <template #toolbar-tools>
+        <ElButton
+          type="primary"
+          @click="onCreate"
+          v-access:code="['infra:file-config:create']"
+        >
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['文件配置']) }}
+        </ElButton>
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createFileConfig,
+  getFileConfig,
+  updateFileConfig,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraFileConfigApi.FileConfig>();
+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 [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraFileConfigApi.FileConfig;
+    try {
+      await (formData.value?.id
+        ? updateFileConfig(data)
+        : createFileConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraFileConfigApi.FileConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFileConfig(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>