yg-yygl 0.0.1

package/src/views/file/file-config/file-config-form.vue

@@ -0,0 +1,592 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type { FileConfig } from '../../../api/file-config';
+
+import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+
+import { Form } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createFileConfig,
+  getFileConfigById,
+  testConnection,
+  updateFileConfig,
+} from '../../../api/file-config';
+
+interface Props {
+  editData?: FileConfig | null;
+}
+
+const props = defineProps<Props>();
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref();
+
+// 存储器类型选项
+const storageTypeOptions = [
+  { label: '本地磁盘', value: 'local' },
+  { label: 'SFTP 服务器', value: 'sftp' },
+  { label: 'MinIO 对象存储', value: 'minio' },
+];
+
+// Path Style 选项
+const pathStyleOptions = [
+  { label: '禁用', value: 0 },
+  { label: '启用', value: 1 },
+];
+
+// 公开访问选项
+const publicAccessOptions = [
+  { label: '私有', value: 0 },
+  { label: '公开', value: 1 },
+];
+
+// 校验 URL 格式
+const isValidURL = (url: string) => {
+  return URL.canParse(url);
+};
+
+// 校验 S3 bucket 名称
+const isValidS3Bucket = (bucket: string) => {
+  if (bucket.length < 3 || bucket.length > 63) return false;
+  const reg = /^[a-z0-9][a-z0-9-]*[a-z0-9]$/;
+  return reg.test(bucket);
+};
+
+// 校验 IP 地址格式
+const isValidIP = (ip: string) => {
+  const reg =
+    /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+  return reg.test(ip);
+};
+
+// 校验域名格式
+const isValidDomain = (domain: string) => {
+  const reg = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
+  return reg.test(domain);
+};
+
+// 表单初始值
+const iniFormValues = reactive({
+  id: undefined as string | undefined,
+  configName: '',
+  configRemark: '',
+  storageType: 'local',
+  customDomain: '',
+  isPrimary: 0,
+  // 本地磁盘和SFTP字段
+  basePath: '',
+  // SFTP 字段
+  host: '',
+  port: 22,
+  username: '',
+  password: '',
+  // MinIO 字段
+  endpoint: '',
+  bucketName: '',
+  accessKey: '',
+  accessSecret: '',
+  pathStyle: 0,
+  publicAccess: 0,
+  region: '',
+});
+
+// 获取当前表单值
+const formData = computed(() => {
+  return formRef.value?.getValues();
+});
+
+// 本地磁盘字段配置
+const localDiskFields: FormItemConfig[] = [
+  {
+    prop: 'basePath',
+    label: '基础路径',
+    type: 'input',
+    required: true,
+    placeholder: String.raw`请输入基础路径（mac/linux 使用 /，windows 使用 \）`,
+    rules: [
+      { required: true, message: '请填写基础路径' },
+      { max: 255, message: '基础路径长度不能超过 255 个字符' },
+    ],
+  },
+];
+
+// SFTP 字段配置
+const sftpFields: FormItemConfig[] = [
+  {
+    prop: 'basePath',
+    label: '基础路径',
+    type: 'input',
+    required: true,
+    placeholder: '请输入SFTP服务器上的工作目录',
+    rules: [
+      { required: true, message: '请填写基础路径' },
+      { max: 255, message: '基础路径长度不能超过 255 个字符' },
+    ],
+  },
+  {
+    prop: 'host',
+    label: '主机地址',
+    type: 'input',
+    required: true,
+    placeholder: '请输入服务器地址（IP或域名）',
+    rules: [
+      { required: true, message: '请填写主机地址' },
+      { max: 255, message: '主机地址长度不能超过 255 个字符' },
+      {
+        validator: ((_rule: any, value: string, callback: any) => {
+          if (!value) { callback(); return; }
+          if (!isValidIP(value) && !isValidDomain(value)) {
+            callback(new Error('请输入有效的 IP 地址或域名'));
+            return;
+          }
+          callback();
+        }) as any,
+      },
+    ],
+  },
+  {
+    prop: 'port',
+    label: '主机端口',
+    type: 'number',
+    required: true,
+    props: {
+      min: 1,
+      max: 65_535,
+      placeholder: '请输入主机端口',
+    },
+    rules: [
+      { required: true, message: '请填写主机端口' },
+      {
+        validator: ((_rule: any, value: number, callback: any) => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('主机端口必须为整数'));
+            return;
+          }
+          if (value < 1 || value > 65_535) {
+            callback(new Error('主机端口范围应为 1-65_535'));
+            return;
+          }
+          callback();
+        }) as any,
+      },
+    ],
+  },
+  {
+    prop: 'username',
+    label: '用户名',
+    type: 'input',
+    required: true,
+    placeholder: '请输入登录账号',
+    rules: [
+      { required: true, message: '请填写用户名' },
+      { max: 100, message: '用户名长度不能超过 100 个字符' },
+    ],
+  },
+  {
+    prop: 'password',
+    label: '密码',
+    type: 'input',
+    required: true,
+    props: {
+      type: 'password',
+      'show-password': true,
+    },
+    placeholder: '请输入登录密码',
+    rules: [
+      { required: true, message: '请填写密码' },
+      { max: 100, message: '密码长度不能超过 100 个字符' },
+    ],
+  },
+];
+
+// MinIO 字段配置
+const minioFields: FormItemConfig[] = [
+  {
+    prop: 'endpoint',
+    label: '节点地址',
+    type: 'input',
+    required: true,
+    placeholder: '请输入MinIO服务器地址',
+    rules: [
+      { required: true, message: '请填写节点地址' },
+      { max: 255, message: '节点地址长度不能超过 255 个字符' },
+      {
+        validator: ((_rule: any, value: string, callback: any) => {
+          if (!value) { callback(); return; }
+          if (!isValidURL(value)) {
+            callback(new Error('请输入有效的 URL 地址'));
+            return;
+          }
+          callback();
+        }) as any,
+      },
+    ],
+  },
+  {
+    prop: 'bucketName',
+    label: '存储桶名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入存储桶名称',
+    rules: [
+      { required: true, message: '请填写存储桶名称' },
+      {
+        validator: ((_rule: any, value: string, callback: any) => {
+          if (!value) { callback(); return; }
+          if (value.length < 3 || value.length > 63) {
+            callback(new Error('存储桶长度应为 3-63 个字符'));
+            return;
+          }
+          if (!isValidS3Bucket(value)) {
+            callback(new Error('存储桶只能包含小写字母、数字和中划线，且不能以中划线开头或结尾'));
+            return;
+          }
+          callback();
+        }) as any,
+      },
+    ],
+  },
+  {
+    prop: 'accessKey',
+    label: '访问密钥',
+    type: 'input',
+    required: true,
+    placeholder: '请输入访问密钥ID',
+    rules: [
+      { required: true, message: '请填写访问密钥' },
+      { max: 100, message: '访问密钥长度不能超过 100 个字符' },
+    ],
+  },
+  {
+    prop: 'accessSecret',
+    label: '访问密钥秘钥',
+    type: 'input',
+    required: true,
+    props: {
+      type: 'password',
+      'show-password': true,
+    },
+    placeholder: '请输入访问密钥Secret',
+    rules: [
+      { required: true, message: '请填写访问密钥秘钥' },
+      { max: 100, message: '访问密钥秘钥长度不能超过 100 个字符' },
+    ],
+  },
+  {
+    prop: 'pathStyle',
+    label: 'Path Style',
+    type: 'radio',
+    options: pathStyleOptions,
+  },
+  {
+    prop: 'publicAccess',
+    label: '公开访问',
+    type: 'radio',
+    options: publicAccessOptions,
+  },
+  {
+    prop: 'region',
+    label: '区域',
+    type: 'input',
+    required: false,
+    placeholder: '请填写区域（一般仅AWS需要填写）',
+    rules: [
+      {
+        validator: ((_rule: any, value: string, callback: any) => {
+          if (!value) { callback(); return; }
+          if (value.length > 50) {
+            callback(new Error('区域长度不能超过 50 个字符'));
+            return;
+          }
+          if (!/^[a-z0-9-]+$/i.test(value)) {
+            callback(new Error('区域只能包含字母、数字和中划线'));
+            return;
+          }
+          callback();
+        }) as any,
+      },
+    ],
+  },
+];
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => {
+  const baseItems: FormItemConfig[] = [
+    {
+      prop: 'configName',
+      label: '配置名',
+      type: 'input',
+      placeholder: '请输入配置名',
+      rules: [
+        { required: true, message: '请填写配置名' },
+        { max: 50, message: '配置名长度不能超过 50 个字符' },
+        {
+          pattern: /^[\u4E00-\u9FA5\w-]+$/,
+          message: '配置名只能包含中文、英文、数字、下划线和中划线',
+        },
+      ],
+    },
+    {
+      prop: 'configRemark',
+      label: '备注',
+      type: 'textarea',
+      placeholder: '请输入备注信息',
+      rules: [{ max: 200, message: '备注长度不能超过 200 个字符' }],
+    },
+    {
+      prop: 'storageType',
+      label: '存储器',
+      type: 'select',
+      options: storageTypeOptions,
+      rules: [{ required: true, message: '请选择存储器' }],
+      props: {
+        disabled: isEdit.value,
+      },
+    },
+    {
+      prop: 'customDomain',
+      label: '自定义域名',
+      type: 'input',
+      placeholder: '请输入自定义域名，为空时使用默认域名',
+      rules: [
+        { max: 255, message: '自定义域名长度不能超过 255 个字符' },
+        {
+          validator: (_rule: any, value: string, callback: any) => {
+            if (!value) {
+              callback();
+              return;
+            }
+            if (!/^https?:\/\/.+/.test(value)) {
+              callback(new Error('自定义域名格式不正确，请以 http:// 或 https:// 开头'));
+              return;
+            }
+            callback();
+          },
+        } as any,
+      ],
+    },
+  ];
+
+  // 根据存储类型添加对应字段
+  const storageType = iniFormValues.storageType;
+  switch (storageType) {
+    case 'local': {
+      baseItems.push(...localDiskFields);
+      break;
+    }
+    case 'minio': {
+      baseItems.push(...minioFields);
+      break;
+    }
+    case 'sftp': {
+      baseItems.push(...sftpFields);
+      break;
+    }
+  }
+
+  return baseItems;
+});
+
+// 存储器切换时：清空动态字段，设置端口默认值
+let isInitializing = false;
+const clearDynamicFields = () => {
+  // 清空所有动态字段
+  iniFormValues.basePath = '';
+  iniFormValues.host = '';
+  iniFormValues.username = '';
+  iniFormValues.password = '';
+  iniFormValues.endpoint = '';
+  iniFormValues.bucketName = '';
+  iniFormValues.accessKey = '';
+  iniFormValues.accessSecret = '';
+  iniFormValues.pathStyle = 0;
+  iniFormValues.publicAccess = 0;
+  iniFormValues.region = '';
+  iniFormValues.port = 22;
+};
+
+// 表单字段变更回调
+const handleFieldChange = (prop: string, value: any) => {
+  if (prop === 'storageType' && !isInitializing) {
+    iniFormValues.storageType = value;
+    const currentValues = formRef.value?.getValues();
+    clearDynamicFields();
+    nextTick(() => {
+      formRef.value?.setValues({
+        ...iniFormValues,
+        configName: currentValues?.configName ?? '',
+        configRemark: currentValues?.configRemark ?? '',
+        customDomain: currentValues?.customDomain ?? '',
+      });
+    });
+  }
+};
+
+// 当前存储类型提示文本
+const storageTypeTip = computed(() => {
+  const storageType = iniFormValues.storageType;
+  switch (storageType) {
+    case 'local': {
+      return '需确保目录存在且有读写权限';
+    }
+    case 'minio': {
+      return '公开时文件可匿名访问，私有需签名URL';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+// 初始化表单数据
+const initFormData = async () => {
+  const res = await getFileConfigById(props.editData?.id!);
+  if (res) {
+    isInitializing = true;
+    Object.assign(iniFormValues, {
+      id: res.id,
+      configName: res.configName || '',
+      configRemark: res.configRemark || '',
+      storageType: res.storageType || 'local',
+      customDomain: res.customDomain || '',
+      isPrimary: res.isPrimary || 0,
+      basePath: res.basePath || '',
+      host: res.host || '',
+      port: res.port ?? 22,
+      username: res.username || '',
+      password: res.password || '',
+      endpoint: res.endpoint || '',
+      bucketName: res.bucketName || '',
+      accessKey: res.accessKey || '',
+      accessSecret: res.accessSecret || '',
+      pathStyle: res.pathStyle ?? 0,
+      publicAccess: res.publicAccess ?? 0,
+      region: res.region || '',
+    });
+    formRef.value?.setValues(iniFormValues);
+    await nextTick();
+    isInitializing = false;
+  }
+};
+
+// 表单验证（Form.validate 返回 boolean 而非抛异常，需检查返回值）
+const safeValidate = async (): Promise<boolean> => {
+  formRef.value?.clearValidate();
+  const result = await formRef.value?.validate();
+  return !!result;
+};
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    const valid = await safeValidate();
+    if (!valid) {
+      return false;
+    }
+
+    loading.value = true;
+
+    const formValues = formRef.value.getValues();
+    const submitData = {
+      ...formValues,
+      id: iniFormValues.id,
+    };
+
+    await (isEdit.value
+      ? updateFileConfig(submitData)
+      : createFileConfig(submitData));
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch {
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 测试连接
+const handleTestConnection = async () => {
+  try {
+    const valid = await safeValidate();
+    if (!valid) {
+      return;
+    }
+
+    const storageType = formData.value?.storageType;
+    const config: Record<string, any> = { storageType };
+    switch (storageType) {
+      case 'local': {
+        config.basePath = formData.value?.basePath;
+        break;
+      }
+      case 'minio': {
+        config.endpoint = formData.value?.endpoint;
+        config.bucketName = formData.value?.bucketName;
+        config.accessKey = formData.value?.accessKey;
+        config.accessSecret = formData.value?.accessSecret;
+        config.pathStyle = formData.value?.pathStyle;
+        config.publicAccess = formData.value?.publicAccess;
+        config.region = formData.value?.region;
+        break;
+      }
+      case 'sftp': {
+        config.basePath = formData.value?.basePath;
+        config.host = formData.value?.host;
+        config.port = formData.value?.port;
+        config.username = formData.value?.username;
+        config.password = formData.value?.password;
+        break;
+      }
+    }
+
+    const res = await testConnection(config);
+    // requestClient 已自动解包 data 字段，res 直接是后端返回的 data 值
+    if (typeof res === 'string' && res) {
+      ElMessage.success(res);
+    } else {
+      ElMessage.success('测试成功！配置可用。');
+    }
+  } catch (error) {
+    console.error('测试连接失败:', error);
+  }
+};
+
+onMounted(() => {
+  if (props.editData?.id) {
+    initFormData();
+  }
+});
+
+// 暴露方法供父组件调用
+defineExpose({
+  handleSubmit,
+  handleTestConnection,
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <Form
+      ref="formRef"
+      :items="formItems"
+      :initial-values="iniFormValues"
+      :show-actions="false"
+      label-width="auto"
+      @field-change="handleFieldChange"
+    />
+
+    <!-- 存储类型提示 -->
+    <div
+      v-if="storageTypeTip"
+      class="text-udp-text-color-placeholder mb-5 ml-auto mt-2.5 text-xs"
+    >
+      {{ storageTypeTip }}
+    </div>
+  </div>
+</template>