!56 feat: 新增 【文件配置】管理页面 && 优化修复一些BUG

Merge pull request !56 from chenminjie/dev-v5_cmj

apps/web-antd/src/api/infra/file-config/index.ts

@@ -0,0 +1,63 @@
+import { type PageParam, requestClient } from '#/api/request';
+
+export namespace FileConfigApi {
+  export interface FileClientConfig {
+    basePath: string;
+    host?: string;
+    port?: number;
+    username?: string;
+    password?: string;
+    mode?: string;
+    endpoint?: string;
+    bucket?: string;
+    accessKey?: string;
+    accessSecret?: string;
+    domain: string;
+  }
+
+  export interface FileConfigVO {
+    id: number;
+    name: string;
+    storage?: number;
+    master: boolean;
+    visible: boolean;
+    config: FileClientConfig;
+    remark: string;
+    createTime: Date;
+  }
+}
+
+// 查询文件配置列表
+export function getFileConfigPage(params: PageParam) {
+  return requestClient.get('/infra/file-config/page', { params });
+}
+
+// 查询文件配置详情
+export function getFileConfig(id: number) {
+  return requestClient.get(`/infra/file-config/get?id=${id}`);
+}
+
+// 更新文件配置为主配置
+export function updateFileConfigMaster(id: number) {
+  return requestClient.put(`/infra/file-config/update-master?id=${id}`);
+}
+
+// 新增文件配置
+export function createFileConfig(data: FileConfigApi.FileConfigVO) {
+  return requestClient.post('/infra/file-config/create', data);
+}
+
+// 修改文件配置
+export function updateFileConfig(data: FileConfigApi.FileConfigVO) {
+  return requestClient.put('/infra/file-config/update', data);
+}
+
+// 删除文件配置
+export function deleteFileConfig(id: number) {
+  return requestClient.delete(`/infra/file-config/delete?id=${id}`);
+}
+
+// 测试文件配置
+export function testFileConfig(id: number) {
+  return requestClient.get(`/infra/file-config/test?id=${id}`);
+}

apps/web-antd/src/components/action-buttons/action-buttons.vue

@@ -130,6 +130,7 @@ const handleMenuClick = (e: any) => {
       <template v-for="(action, index) in getActions" :key="index">
         <Popconfirm
           v-if="action.popConfirm"
+          :disabled="action.disabled"
           v-bind="getPopConfirmProps(action.popConfirm)"
         >
           <template v-if="action.popConfirm.icon" #icon>

apps/web-antd/src/components/form/components/api-checkbox-group.vue

@@ -119,6 +119,16 @@ watch(
   },
   { deep: true },
 );
+
+// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
+watch(
+  () => props.value,
+  () => {
+    if (props.numberToString && Array.isArray(mValue.value)) {
+      mValue.value = mValue.value.map((item) => `${item}`);
+    }
+  },
+);
 </script>
 
 <template>

apps/web-antd/src/components/form/components/api-radio-group.vue

@@ -123,6 +123,19 @@ watch(
   },
   { deep: true },
 );
+
+// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
+watch(
+  () => props.value,
+  () => {
+    if (props.numberToString && typeof mValue.value === 'number') {
+      mValue.value = `${mValue.value}`;
+    }
+    if (props.numberToString && Array.isArray(mValue.value)) {
+      mValue.value = mValue.value.map((item) => `${item}`);
+    }
+  },
+);
 </script>
 
 <template>

apps/web-antd/src/components/form/components/api-select.vue

@@ -125,6 +125,19 @@ watch(
   },
   { deep: true },
 );
+
+// 监听 value 的变化，确保 mValue 的类型与 options 中的 value 类型一致
+watch(
+  () => props.value,
+  () => {
+    if (props.numberToString && typeof mValue.value === 'number') {
+      mValue.value = `${mValue.value}`;
+    }
+    if (props.numberToString && Array.isArray(mValue.value)) {
+      mValue.value = mValue.value.map((item) => `${item}`);
+    }
+  },
+);
 </script>
 
 <template>

apps/web-antd/src/views/infra/file-config/components/edit-form.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import {
+  createFileConfig,
+  getFileConfig,
+  updateFileConfig,
+} from '#/api/infra/file-config';
+
+import { editFormSchema } from '../file-config.data';
+
+defineOptions({ name: 'FileConfigEditForm' });
+
+const isUpdate = ref(false);
+
+// 使用表单组件
+const [Form, formApi] = useVbenForm({
+  schema: editFormSchema,
+  showDefaultActions: false,
+  handleSubmit: onSubmit,
+});
+
+// 使用弹窗组件
+const [Modal, modalApi] = useVbenModal({
+  onCancel: async () => {
+    modalApi.close();
+    await formApi.resetForm();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { id } = modalApi.getData<Record<string, any>>();
+
+      isUpdate.value = !isEmpty(id);
+      if (id) {
+        const values = await getFileConfig(id);
+        formApi.setValues(values);
+      }
+      modalApi.setState({
+        title: `${isUpdate.value ? '编辑' : '新增'} 文件配置`,
+      });
+    }
+  },
+});
+
+async function onSubmit(values: Record<string, any>) {
+  await (isUpdate.value
+    ? updateFileConfig(values as any)
+    : createFileConfig(values as any));
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>

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

@@ -0,0 +1,276 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { FileConfigApi } from '#/api/infra/file-config';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { type VbenFormProps, z } from '#/adapter/form';
+import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils/dict';
+
+/**
+ * 文件配置 表格查询表单配置
+ */
+export const formSchema: VbenFormProps['schema'] = [
+  {
+    fieldName: 'name',
+    label: '配置名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    fieldName: 'storage',
+    label: '储存器',
+    component: 'ApiDict',
+    componentProps: {
+      code: DICT_TYPE.INFRA_FILE_STORAGE,
+      class: 'w-full',
+      placeholder: '请选择储存器',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'DatePicker',
+  },
+];
+
+/**
+ * 文件配置 表格配置
+ */
+export const tableColumns: VxeGridProps<FileConfigApi.FileConfigVO>['columns'] =
+  [
+    {
+      fixed: 'left',
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      fixed: 'left',
+      type: 'seq',
+      width: 50,
+    },
+    { field: 'name', title: '配置名称' },
+    {
+      field: 'storage',
+      title: '储存器',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
+      },
+    },
+    { field: 'remark', title: '备注' },
+    {
+      field: 'master',
+      title: '主配置',
+      slots: {
+        default: ({ row }) => {
+          return h(
+            Tag,
+            {
+              color: row.master ? 'success' : 'default',
+            },
+            { default: () => (row.master ? '是' : '否') },
+          );
+        },
+      },
+    },
+    { field: 'createTime', title: '创建时间', formatter: 'formatDateTime' },
+    {
+      field: 'action',
+      fixed: 'right',
+      width: '180px',
+      slots: { default: 'action' },
+      title: $t('page.action.action'),
+    },
+  ];
+
+/**
+ * 文件配置 编辑表单配置
+ */
+export const editFormSchema: VbenFormProps['schema'] = [
+  {
+    component: 'Input',
+    fieldName: 'id',
+    label: 'id',
+    dependencies: {
+      triggerFields: [''],
+      show: () => false,
+    },
+  },
+  {
+    fieldName: 'name',
+    label: '配置名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入配置名称',
+    },
+    rules: z.string().min(1, '请输入配置名称'),
+  },
+  {
+    fieldName: 'remark',
+    label: '备注',
+    component: 'Input',
+  },
+  {
+    fieldName: 'storage',
+    label: '储存器',
+    component: 'ApiDict',
+    componentProps: {
+      code: DICT_TYPE.INFRA_FILE_STORAGE,
+      class: 'w-full',
+      placeholder: '请选择储存器',
+      numberToString: true,
+    },
+    rules: z.string().min(1, '请选择储存器').or(z.number()),
+    defaultValue: '1',
+  },
+  {
+    fieldName: 'config.basePath',
+    label: '基础路径',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入基础路径',
+    },
+    rules: z.string().min(1, '请输入基础路径'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => {
+        return [10, 11, 12].includes(values.storage);
+      },
+    },
+  },
+  {
+    fieldName: 'config.host',
+    label: '主机地址',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入主机地址',
+    },
+    rules: z.string().min(1, '请输入主机地址'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => [11, 12].includes(values.storage),
+    },
+  },
+  {
+    fieldName: 'config.port',
+    label: '主机端口',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入主机端口',
+    },
+    rules: z.string().min(1, '请输入主机端口'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => [11, 12].includes(values.storage),
+    },
+  },
+  {
+    fieldName: 'config.username',
+    label: '用户名',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入用户名',
+    },
+    rules: z.string().min(1, '请输入用户名'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => [11, 12].includes(values.storage),
+    },
+  },
+  {
+    fieldName: 'config.password',
+    label: '密码',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入密码',
+    },
+    rules: z.string().min(1, '请输入密码'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => [11, 12].includes(values.storage),
+    },
+  },
+  {
+    fieldName: 'config.mode',
+    label: '连接模式',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '主动模式', value: 'active' },
+        { label: '被动模式', value: 'passive' },
+      ],
+      class: 'w-full',
+      placeholder: '请选择连接模式',
+    },
+    rules: z.string().min(1, '请选择连接模式'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => values.storage === 11,
+    },
+  },
+  {
+    fieldName: 'config.endpoint',
+    label: '端点/节点地址',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入端点/节点地址',
+    },
+    rules: z.string().min(1, '请输入端点/节点地址'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => values.storage === 20,
+    },
+  },
+  {
+    fieldName: 'config.bucket',
+    label: '桶名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入桶名称',
+    },
+    rules: z.string().min(1, '请输入桶名称'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => values.storage === 20,
+    },
+  },
+  {
+    fieldName: 'config.accessKey',
+    label: 'accessKey',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入访问密钥',
+    },
+    rules: z.string().min(1, '请输入访问密钥'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => values.storage === 20,
+    },
+  },
+  {
+    fieldName: 'config.accessSecret',
+    label: 'accessSecret',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入访问密钥',
+    },
+    rules: z.string().min(1, '请输入访问密钥'),
+    dependencies: {
+      triggerFields: ['storage'],
+      if: (values: Record<string, any>) => values.storage === 20,
+    },
+  },
+  {
+    fieldName: 'config.domain',
+    label: '自定义域名',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入自定义域名',
+    },
+  },
+];

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

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '#/adapter/form';
+
+import { defineAsyncComponent, h, reactive } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Image, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import {
+  deleteFileConfig,
+  getFileConfigPage,
+  testFileConfig,
+  updateFileConfigMaster,
+} from '#/api/infra/file-config';
+import { ActionButtons } from '#/components/action-buttons';
+
+import { formSchema, tableColumns } from './file-config.data';
+
+defineOptions({
+  name: 'InfraFileConfig',
+});
+
+/**
+ * 表格查询表单配置
+ */
+const formOptions = reactive<any>({
+  // 默认展开
+  collapsed: false,
+  schema: formSchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+} as VbenFormProps);
+
+/**
+ * 表格配置
+ */
+const gridOptions = reactive<any>({
+  columns: tableColumns,
+  height: 'auto',
+  checkboxConfig: {
+    reserve: true,
+    highlight: true,
+    // labelField: 'id',
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  proxyConfig: {
+    ajax: {
+      query: async (e, params) => {
+        const data = await getFileConfigPage({
+          pageNo: e.page.currentPage,
+          pageSize: e.page.pageSize,
+          ...params,
+        });
+        return data;
+      },
+    },
+  },
+} as VxeGridProps);
+/**
+ * 表格事件
+ */
+const gridEvents = reactive<any>({});
+
+// 使用表格组件
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+// 使用编辑弹窗组件
+const [EditFormModal, editFormModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./components/edit-form.vue'),
+  ),
+  onClosed: () => {
+    gridApi.reload();
+  },
+});
+
+/**
+ * 新增
+ */
+const handleCreate = () => {
+  editFormModalApi.open();
+};
+
+/**
+ * 编辑
+ * @param row 行数据
+ */
+const handleEdit = (row: Record<string, any>) => {
+  editFormModalApi.setData(row);
+  editFormModalApi.open();
+};
+
+/**
+ * 主配置
+ * @param row 行数据
+ */
+const handleMainConfig = async (row: Record<string, any>) => {
+  const res = await updateFileConfigMaster(row.id);
+  if (res) {
+    message.success('设置成功');
+    gridApi.reload();
+  }
+};
+
+/**
+ * 测试
+ * @param row 行数据
+ */
+const handleTest = async (row: Record<string, any>) => {
+  // 上传中
+  message.loading({
+    content: '测试文件上传中...',
+    key: 'test_file_upload',
+    duration: 0,
+  });
+  try {
+    const res = await testFileConfig(row.id);
+    if (res) {
+      message.success({ content: '测试文件上传成功', key: 'test_file_upload' });
+      // 是否预览测试文件弹窗
+      Modal.confirm({
+        title: '测试文件上传成功',
+        content: '是否预览测试文件',
+        onOk: () => {
+          Modal.success({
+            title: '测试文件',
+            content: h('div', { style: { marginRight: '32px' } }, [
+              h(
+                'p',
+                { style: { marginBottom: '16px' } },
+                `测试文件地址: ${res}`,
+              ),
+              h(Image, { src: res, width: '100%' }),
+            ]),
+          });
+        },
+      });
+    }
+  } catch {
+    message.error({ content: '测试文件上传失败', key: 'test_file_upload' });
+  }
+};
+
+/**
+ * 删除
+ * @param row 行数据
+ */
+const handleDelete = async (row: Record<string, any>) => {
+  try {
+    await deleteFileConfig(row.id);
+    message.success('删除成功');
+    gridApi.reload();
+  } catch {}
+};
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #toolbar-actions>
+        <ActionButtons
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              label: '新增',
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #action="{ row }">
+        <ActionButtons
+          :actions="[
+            {
+              type: 'link',
+              label: '编辑',
+              onClick: () => handleEdit(row),
+            },
+            {
+              type: 'link',
+              label: '主配置',
+              disabled: row.master,
+              popConfirm: {
+                title: '确定要设置为主配置吗？',
+                confirm: () => handleMainConfig(row),
+              },
+            },
+            {
+              type: 'link',
+              label: '测试',
+              popConfirm: {
+                title: '确定要测试吗？',
+                confirm: () => handleTest(row),
+              },
+            },
+            {
+              type: 'link',
+              danger: true,
+              label: '删除',
+              popConfirm: {
+                title: '确定要删除吗？',
+                confirm: () => handleDelete(row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <EditFormModal />
+  </Page>
+</template>

packages/@core/ui-kit/form-ui/src/use-form-context.ts

@@ -43,7 +43,7 @@ export function useFormInitial(
       if (Reflect.has(item, 'defaultValue')) {
         set(initialValues, item.fieldName, item.defaultValue);
       } else if (item.rules && !isString(item.rules)) {
-        set(zodObject, item.fieldName, item.defaultValue);
+        set(zodObject, item.fieldName, item.rules);
       }
     });
 

packages/effects/common-ui/src/components/page/page.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 
+import { useLayoutFooterStyle } from '@vben/hooks';
+
 interface Props {
   title?: string;
   description?: string;
@@ -46,8 +48,9 @@ async function calcContentHeight() {
     return;
   }
   await nextTick();
+  const { getLayoutFooterHeight } = await useLayoutFooterStyle();
   headerHeight.value = headerRef.value?.offsetHeight || 0;
-  footerHeight.value = footerRef.value?.offsetHeight || 0;
+  footerHeight.value = getLayoutFooterHeight() || 0;
   setTimeout(() => {
     shouldAutoHeight.value = true;
   }, 30);
@@ -88,7 +91,12 @@ onMounted(() => {
       </div>
     </div>
 
-    <div :class="contentClass" :style="contentStyle" class="h-full p-4">
+    <div
+      v-if="shouldAutoHeight"
+      :class="contentClass"
+      :style="contentStyle"
+      class="h-full p-4"
+    >
       <slot></slot>
     </div>