From c64c770f544154f8209cd2fc2c944961adb0892b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 25 Sep 2025 17:05:26 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=E3=80=90ele=E3=80=91=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20CronTab=20CRON=20=E8=A1=A8=E8=BE=BE=E5=BC=8F?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=BB=84=E4=BB=B6=E3=80=81JOB=20=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cron-tab/cron-tab.vue      | 1152 +++++++++++++++++
 apps/web-ele/src/components/cron-tab/index.ts |    1 +
 apps/web-ele/src/views/infra/job/data.ts      |   12 +-
 3 files changed, 1162 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-ele/src/components/cron-tab/cron-tab.vue
 create mode 100644 apps/web-ele/src/components/cron-tab/index.ts

diff --git a/apps/web-ele/src/components/cron-tab/cron-tab.vue b/apps/web-ele/src/components/cron-tab/cron-tab.vue
new file mode 100644
index 000000000..6aacf8503
--- /dev/null
+++ b/apps/web-ele/src/components/cron-tab/cron-tab.vue
@@ -0,0 +1,1152 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSelect,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+defineOptions({ name: 'Crontab' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?',
+  },
+  shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+interface shortcutsType {
+  text: string;
+  value: string;
+}
+
+const defaultValue = ref('');
+const dialogVisible = ref(false);
+const getYear = () => {
+  const v: number[] = [];
+  const y = new Date().getFullYear();
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i);
+  }
+  return v;
+};
+const cronValue = reactive({
+  second: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  minute: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  hour: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  day: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  month: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  week: {
+    type: '5',
+    range: {
+      start: '2',
+      end: '3',
+    },
+    loop: {
+      start: 0,
+      end: '2',
+    },
+    last: '2',
+    appoint: [] as string[],
+  },
+  year: {
+    type: '-1',
+    range: {
+      start: getYear()[0],
+      end: getYear()[1],
+    },
+    loop: {
+      start: getYear()[0],
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+});
+const data = reactive({
+  second: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  minute: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  hour: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+  ],
+  day: [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
+    '25',
+    '26',
+    '27',
+    '28',
+    '29',
+    '30',
+    '31',
+  ],
+  month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  week: [
+    {
+      value: '1',
+      label: '周日',
+    },
+    {
+      value: '2',
+      label: '周一',
+    },
+    {
+      value: '3',
+      label: '周二',
+    },
+    {
+      value: '4',
+      label: '周三',
+    },
+    {
+      value: '5',
+      label: '周四',
+    },
+    {
+      value: '6',
+      label: '周五',
+    },
+    {
+      value: '7',
+      label: '周六',
+    },
+  ],
+  year: getYear(),
+});
+
+const value_second = computed(() => {
+  const v = cronValue.second;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_minute = computed(() => {
+  const v = cronValue.minute;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_hour = computed(() => {
+  const v = cronValue.hour;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_day = computed(() => {
+  const v = cronValue.day;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return 'L';
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_month = computed(() => {
+  const v = cronValue.month;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_week = computed(() => {
+  const v = cronValue.week;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.end}#${v.loop.start}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return `${v.last}L`;
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_year = computed(() => {
+  const v = cronValue.year;
+  switch (v.type) {
+    case '-1': {
+      return '';
+    }
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+watch(
+  () => cronValue.week.type,
+  (val) => {
+    if (val !== '5') {
+      cronValue.day.type = '5';
+    }
+  },
+);
+watch(
+  () => cronValue.day.type,
+  (val) => {
+    if (val !== '5') {
+      cronValue.week.type = '5';
+    }
+  },
+);
+watch(
+  () => props.modelValue,
+  () => {
+    defaultValue.value = props.modelValue;
+  },
+);
+onMounted(() => {
+  defaultValue.value = props.modelValue;
+});
+const select = ref();
+watch(
+  () => select.value,
+  () => {
+    if (select.value === 'custom') {
+      open();
+    } else {
+      defaultValue.value = select.value;
+      emit('update:modelValue', defaultValue.value);
+    }
+  },
+);
+const open = () => {
+  set();
+  dialogVisible.value = true;
+};
+const set = () => {
+  defaultValue.value = props.modelValue;
+  let arr = (props.modelValue || '* * * * * ?').split(' ');
+  // 简单检查
+  if (arr.length < 6) {
+    ElMessage.warning('cron表达式错误，已转换为默认表达式');
+    arr = '* * * * * ?'.split(' ');
+  }
+
+  // 秒
+  if (arr[0] === '*') {
+    cronValue.second.type = '0';
+  } else if (arr[0]!.includes('-')) {
+    cronValue.second.type = '1';
+    cronValue.second.range.start = Number(arr[0]!.split('-')[0]);
+    cronValue.second.range.end = Number(arr[0]!.split('-')[1]);
+  } else if (arr[0]!.includes('/')) {
+    cronValue.second.type = '2';
+    cronValue.second.loop.start = Number(arr[0]!.split('/')[0]);
+    cronValue.second.loop.end = Number(arr[0]!.split('/')[1]);
+  } else {
+    cronValue.second.type = '3';
+    cronValue.second.appoint = arr[0]!.split(',');
+  }
+  // 分
+  if (arr[1] === '*') {
+    cronValue.minute.type = '0';
+  } else if (arr[1]!.includes('-')) {
+    cronValue.minute.type = '1';
+    cronValue.minute.range.start = Number(arr[1]!.split('-')[0]);
+    cronValue.minute.range.end = Number(arr[1]!.split('-')[1]);
+  } else if (arr[1]!.includes('/')) {
+    cronValue.minute.type = '2';
+    cronValue.minute.loop.start = Number(arr[1]!.split('/')[0]);
+    cronValue.minute.loop.end = Number(arr[1]!.split('/')[1]);
+  } else {
+    cronValue.minute.type = '3';
+    cronValue.minute.appoint = arr[1]!.split(',');
+  }
+  // 小时
+  if (arr[2] === '*') {
+    cronValue.hour.type = '0';
+  } else if (arr[2]!.includes('-')) {
+    cronValue.hour.type = '1';
+    cronValue.hour.range.start = Number(arr[2]!.split('-')[0]);
+    cronValue.hour.range.end = Number(arr[2]!.split('-')[1]);
+  } else if (arr[2]!.includes('/')) {
+    cronValue.hour.type = '2';
+    cronValue.hour.loop.start = Number(arr[2]!.split('/')[0]);
+    cronValue.hour.loop.end = Number(arr[2]!.split('/')[1]);
+  } else {
+    cronValue.hour.type = '3';
+    cronValue.hour.appoint = arr[2]!.split(',');
+  }
+  // 日
+  switch (arr[3]) {
+    case '*': {
+      cronValue.day.type = '0';
+
+      break;
+    }
+    case '?': {
+      cronValue.day.type = '5';
+
+      break;
+    }
+    case 'L': {
+      cronValue.day.type = '4';
+
+      break;
+    }
+    default: {
+      if (arr[3]!.includes('-')) {
+        cronValue.day.type = '1';
+        cronValue.day.range.start = Number(arr[3]!.split('-')[0]);
+        cronValue.day.range.end = Number(arr[3]!.split('-')[1]);
+      } else if (arr[3]!.includes('/')) {
+        cronValue.day.type = '2';
+        cronValue.day.loop.start = Number(arr[3]!.split('/')[0]);
+        cronValue.day.loop.end = Number(arr[3]!.split('/')[1]);
+      } else {
+        cronValue.day.type = '3';
+        cronValue.day.appoint = arr[3]!.split(',');
+      }
+    }
+  }
+  // 月
+  if (arr[4] === '*') {
+    cronValue.month.type = '0';
+  } else if (arr[4]!.includes('-')) {
+    cronValue.month.type = '1';
+    cronValue.month.range.start = Number(arr[4]!.split('-')[0]);
+    cronValue.month.range.end = Number(arr[4]!.split('-')[1]);
+  } else if (arr[4]!.includes('/')) {
+    cronValue.month.type = '2';
+    cronValue.month.loop.start = Number(arr[4]!.split('/')[0]);
+    cronValue.month.loop.end = Number(arr[4]!.split('/')[1]);
+  } else {
+    cronValue.month.type = '3';
+    cronValue.month.appoint = arr[4]!.split(',');
+  }
+  // 周
+  if (arr[5] === '*') {
+    cronValue.week.type = '0';
+  } else if (arr[5] === '?') {
+    cronValue.week.type = '5';
+  } else if (arr[5]!.includes('-')) {
+    cronValue.week.type = '1';
+    cronValue.week.range.start = arr[5]!.split('-')[0]!;
+    cronValue.week.range.end = arr[5]!.split('-')[1]!;
+  } else if (arr[5]!.includes('#')) {
+    cronValue.week.type = '2';
+    cronValue.week.loop.start = Number(arr[5]!.split('#')[1]);
+    cronValue.week.loop.end = arr[5]!.split('#')[0]!;
+  } else if (arr[5]!.includes('L')) {
+    cronValue.week.type = '4';
+    cronValue.week.last = arr[5]!.split('L')[0]!;
+  } else {
+    cronValue.week.type = '3';
+    cronValue.week.appoint = arr[5]!.split(',');
+  }
+  // 年
+  if (!arr[6]) {
+    cronValue.year.type = '-1';
+  } else if (arr[6] === '*') {
+    cronValue.year.type = '0';
+  } else if (arr[6].includes('-')) {
+    cronValue.year.type = '1';
+    cronValue.year.range.start = Number(arr[6].split('-')[0]);
+    cronValue.year.range.end = Number(arr[6].split('-')[1]);
+  } else if (arr[6].includes('/')) {
+    cronValue.year.type = '2';
+    cronValue.year.loop.start = Number(arr[6].split('/')[1]);
+    cronValue.year.loop.end = Number(arr[6].split('/')[0]);
+  } else {
+    cronValue.year.type = '3';
+    cronValue.year.appoint = arr[6].split(',');
+  }
+};
+const submit = () => {
+  const year = value_year.value ? ` ${value_year.value}` : '';
+  defaultValue.value = `${value_second.value} ${value_minute.value} ${
+    value_hour.value
+  } ${value_day.value} ${value_month.value} ${value_week.value}${year}`;
+  emit('update:modelValue', defaultValue.value);
+  dialogVisible.value = false;
+};
+
+const inputChange = () => {
+  emit('update:modelValue', defaultValue.value);
+};
+</script>
+<template>
+  <ElInput
+    v-model="defaultValue"
+    class="input-with-select"
+    v-bind="$attrs"
+    @input="inputChange"
+  >
+    <template #append>
+      <ElSelect v-model="select" placeholder="生成器" style="width: 115px">
+        <ElOption label="每分钟" value="0 * * * * ?" />
+        <ElOption label="每小时" value="0 0 * * * ?" />
+        <ElOption label="每天零点" value="0 0 0 * * ?" />
+        <ElOption label="每月一号零点" value="0 0 0 1 * ?" />
+        <ElOption label="每月最后一天零点" value="0 0 0 L * ?" />
+        <ElOption label="每周星期日零点" value="0 0 0 ? * 1" />
+        <ElOption
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :label="item.text"
+          :value="item.value"
+        />
+        <ElOption label="自定义" value="custom" />
+      </ElSelect>
+    </template>
+  </ElInput>
+
+  <ElDialog
+    v-model="dialogVisible"
+    :width="580"
+    append-to-body
+    destroy-on-close
+    title="cron规则生成器"
+  >
+    <div class="sc-cron">
+      <ElTabs>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.second.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.second.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <ElInputNumber
+                v-model="cronValue.second.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.second.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.minute.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.minute.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <ElInputNumber
+                v-model="cronValue.minute.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.minute.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.hour.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.hour.range.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <ElInputNumber
+                v-model="cronValue.hour.loop.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.hour.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.day.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+                <ElRadioButton value="4">本月最后一天</ElRadioButton>
+                <ElRadioButton value="5">不指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.day.range.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <ElInputNumber
+                v-model="cronValue.day.loop.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              天执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.day.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.month.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.month.range.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <ElInputNumber
+                v-model="cronValue.month.loop.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.month.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElForm>
+              <ElFormItem label="类型">
+                <ElRadioGroup v-model="cronValue.week.type">
+                  <ElRadioButton value="0">任意值</ElRadioButton>
+                  <ElRadioButton value="1">范围</ElRadioButton>
+                  <ElRadioButton value="2">间隔</ElRadioButton>
+                  <ElRadioButton value="3">指定</ElRadioButton>
+                  <ElRadioButton value="4">本月最后一周</ElRadioButton>
+                  <ElRadioButton value="5">不指定</ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '1'" label="范围">
+                <ElSelect v-model="cronValue.week.range.start">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+                <span style="padding: 0 15px">-</span>
+                <ElSelect v-model="cronValue.week.range.end">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '2'" label="间隔">
+                第
+                <ElInputNumber
+                  v-model="cronValue.week.loop.start"
+                  :max="4"
+                  :min="1"
+                  controls-position="right"
+                />
+                周的星期
+                <ElSelect v-model="cronValue.week.loop.end">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+                执行一次
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '3'" label="指定">
+                <ElSelect
+                  v-model="cronValue.week.appoint"
+                  multiple
+                  style="width: 100%"
+                >
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '4'" label="最后一周">
+                <ElSelect v-model="cronValue.week.last">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </ElForm>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.year.type">
+                <ElRadioButton value="-1">忽略</ElRadioButton>
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.year.range.start"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.year.range.end"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.year.loop.start"
+                controls-position="right"
+              />
+              年开始，每
+              <ElInputNumber
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.year.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+
+    <template #footer>
+      <ElButton @click="dialogVisible = false">取 消</ElButton>
+      <ElButton type="primary" @click="submit()">确 认</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.sc-cron:deep(.el-tabs__item) {
+  height: auto;
+  padding: 0 7px;
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.sc-cron-num {
+  width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.sc-cron-num h2 {
+  margin-bottom: 15px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.sc-cron-num h4 {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
+  background: var(--el-color-primary-light-9);
+  border-radius: 4px;
+}
+
+.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
+  color: #fff;
+  background: var(--el-color-primary);
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: var(--el-color-white);
+}
+
+.input-with-select .el-input-group__prepend {
+  background-color: var(--el-fill-color-blank);
+}
+</style>
diff --git a/apps/web-ele/src/components/cron-tab/index.ts b/apps/web-ele/src/components/cron-tab/index.ts
new file mode 100644
index 000000000..8f4baae59
--- /dev/null
+++ b/apps/web-ele/src/components/cron-tab/index.ts
@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';
diff --git a/apps/web-ele/src/views/infra/job/data.ts b/apps/web-ele/src/views/infra/job/data.ts
index 78b3b187e..e2acb01aa 100644
--- a/apps/web-ele/src/views/infra/job/data.ts
+++ b/apps/web-ele/src/views/infra/job/data.ts
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -11,6 +11,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { ElTimeline, ElTimelineItem } from 'element-plus';
 
+import { CronTab } from '#/components/cron-tab';
 import { DictTag } from '#/components/dict-tag';
 
 /** 新增/修改的表单 */
@@ -57,12 +58,11 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'cronExpression',
       label: 'CRON 表达式',
-      component: 'Input',
+      component: markRaw(CronTab),
       componentProps: {
         placeholder: '请输入 CRON 表达式',
       },
       rules: 'required',
-      // TODO @芋艿：未来支持动态的 CRON 表达式选择
     },
     {
       fieldName: 'retryCount',
@@ -71,6 +71,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试次数。设置为 0 时，不进行重试',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -81,6 +83,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -91,6 +95,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入监控超时时间，单位：毫秒',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
     },
   ];
-- 
Gitee


From f0fbaf45f461774405d69da2097487841efe4a7d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 26 Sep 2025 10:52:30 +0800
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=E3=80=90ele=E3=80=91=E9=87=8D?=
 =?UTF-8?q?=E6=96=B0=E5=B0=81=E8=A3=85=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/file-upload.vue     | 447 +++++++++---------
 .../src/components/upload/use-upload.ts       |  29 +-
 apps/web-ele/src/views/infra/file/data.ts     |   2 +-
 .../src/views/infra/file/modules/form.vue     |  73 +--
 4 files changed, 269 insertions(+), 282 deletions(-)

diff --git a/apps/web-ele/src/components/upload/file-upload.vue b/apps/web-ele/src/components/upload/file-upload.vue
index 39b6d529d..43bee52d7 100644
--- a/apps/web-ele/src/components/upload/file-upload.vue
+++ b/apps/web-ele/src/components/upload/file-upload.vue
@@ -1,261 +1,282 @@
 <script lang="ts" setup>
 import type {
   UploadFile,
-  UploadProgressEvent,
-  UploadRequestOptions,
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
   UploadUserFile,
 } from 'element-plus';
 
-import type { AxiosResponse } from '@vben/request';
+import { ref, watch } from 'vue';
 
-import type { AxiosProgressEvent } from '#/api/infra/file';
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
 
-import { ref, toRefs, watch } from 'vue';
+import { ElButton, ElLink, ElMessage, ElUpload } from 'element-plus';
 
-import { CloudUpload } from '@vben/icons';
-import { $t } from '@vben/locales';
-import { isFunction, isObject, isString } from '@vben/utils';
-
-import { ElButton, ElMessage, ElUpload } from 'element-plus';
-
-import { checkFileType } from './helper';
-import { UploadResultStatus } from './typing';
-import { useUpload, useUploadType } from './use-upload';
+import { useUpload } from './use-upload';
 
 defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
-    // 根据后缀，或者其他
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
+    autoUpload?: boolean;
     directory?: string;
     disabled?: boolean;
-    helpText?: string;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
+    drag?: boolean;
+    fileSize?: number;
+    fileType?: string[];
+    isShowTip?: boolean;
+    limit?: number;
+    modelValue: string | string[];
   }>(),
   {
-    value: () => [],
-    directory: undefined,
-    disabled: false,
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => [],
-    multiple: false,
-    api: undefined,
-    resultField: '',
-    showDescription: false,
+    fileType: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileSize: 5, // 大小限制(MB)
+    limit: 5, // 数量限制
+    autoUpload: true, // 自动上传
+    drag: false, // 拖拽上传
+    isShowTip: true, // 是否显示提示
+    disabled: false, // 是否禁用上传组件 ==> 非必传（默认为 false）
+    directory: undefined, // 上传目录 ==> 非必传（默认为 undefined）
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-const isInnerOperate = ref<boolean>(false);
-const { getStringAccept } = useUploadType({
-  acceptRef: accept,
-  helpTextRef: helpText,
-  maxNumberRef: maxNumber,
-  maxSizeRef: maxSize,
-});
 
+const emit = defineEmits(['update:modelValue']);
+
+// ========== 上传相关 ==========
+const uploadRef = ref<UploadInstance>();
+const uploadList = ref<UploadUserFile[]>([]);
 const fileList = ref<UploadUserFile[]>([]);
-const isLtMsg = ref<boolean>(true); // 文件大小错误提示
-const isActMsg = ref<boolean>(true); // 文件类型错误提示
-const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0);
 
-watch(
-  () => props.value,
-  (v) => {
-    if (isInnerOperate.value) {
-      isInnerOperate.value = false;
-      return;
-    }
-    let value: string[] = [];
-    if (v) {
-      if (Array.isArray(v)) {
-        value = v;
-      } else {
-        value.push(v);
-      }
-      fileList.value = value
-        .map((item, i) => {
-          if (item && isString(item)) {
-            return {
-              uid: -i,
-              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: UploadResultStatus.DONE,
-              url: item,
-            } as UploadUserFile;
-          } else if (item && isObject(item)) {
-            const file = item as Record<string, any>;
-            return {
-              uid: file.uid || -i,
-              name: file.name || '',
-              status: UploadResultStatus.DONE,
-              url: file.url,
-              response: file.response,
-              percentage: file.percentage,
-              size: file.size,
-            } as UploadUserFile;
-          }
-          return null;
-        })
-        .filter(Boolean) as UploadUserFile[];
-    }
-    if (!isFirstRender.value) {
-      emit('change', value);
-      isFirstRender.value = false;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
+const { uploadUrl, httpRequest }: any = useUpload(props.directory);
 
-const handleRemove = async (file: UploadFile) => {
-  if (fileList.value) {
-    const index = fileList.value.findIndex((item) => item.uid === file.uid);
-    index !== -1 && fileList.value.splice(index, 1);
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-    emit('delete', file);
-  }
+/** httpRequest 适配 ele */
+const httpRequest0 = (options: UploadRequestOptions) => {
+  return httpRequest(options.file);
 };
 
-const beforeUpload = async (file: File) => {
-  const fileContent = await file.text();
-  emit('returnText', fileContent);
-  const { maxSize, accept } = props;
-  const isAct = checkFileType(file, accept);
-  if (!isAct) {
-    ElMessage.error($t('ui.upload.acceptUpload', [accept]));
-    isActMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isActMsg.value = true), 1000);
+// 文件上传之前判断
+const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
+  if (fileList.value.length >= props.limit) {
+    ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
     return false;
   }
-  const isLt = file.size / 1024 / 1024 > maxSize;
-  if (isLt) {
-    ElMessage.error($t('ui.upload.maxSizeMultiple', [maxSize]));
-    isLtMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isLtMsg.value = true), 1000);
+  let fileExtension = '';
+  // eslint-disable-next-line unicorn/prefer-includes
+  if (file.name.lastIndexOf('.') > -1) {
+    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
+  }
+  const isImg = props.fileType.some((type: string) => {
+    // eslint-disable-next-line unicorn/prefer-includes
+    if (file.type.indexOf(type) > -1) return true;
+    // eslint-disable-next-line unicorn/prefer-includes
+    return !!(fileExtension && fileExtension.indexOf(type) > -1);
+  });
+  const isLimit = file.size < props.fileSize * 1024 * 1024;
+  if (!isImg) {
+    ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`);
+    return false;
+  }
+  if (!isLimit) {
+    ElMessage.error(`上传文件大小不能超过${props.fileSize}MB!`);
     return false;
   }
+  ElMessage.success('正在上传文件，请稍候...');
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
   return true;
 };
 
-async function customRequest(options: UploadRequestOptions) {
-  let { api } = props;
-  if (!api || !isFunction(api)) {
-    api = useUpload(props.directory).httpRequest;
+// 文件上传成功
+const handleFileSuccess: UploadProps['onSuccess'] = (url: any): void => {
+  ElMessage.success('上传成功');
+  // 删除自身
+  const index = fileList.value.findIndex((item: any) => item.response === url);
+  fileList.value.splice(index, 1);
+  uploadList.value.push({ name: url, url });
+  if (uploadList.value.length === uploadNumber.value) {
+    fileList.value.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+    emitUpdateModelValue();
   }
-  try {
-    // 上传文件
-    const progressEvent: AxiosProgressEvent = (e) => {
-      const percent = Math.trunc((e.loaded / e.total!) * 100);
-      const progressEvent: UploadProgressEvent = {
-        percent,
-        total: e.total || 0,
-        loaded: e.loaded || 0,
-        lengthComputable: true,
-        target: e.event.target as EventTarget,
-        bubbles: false,
-        cancelBubble: false,
-        cancelable: false,
-        composed: false,
-        currentTarget: e.event.target as EventTarget,
-        defaultPrevented: false,
-        eventPhase: 0,
-        isTrusted: true,
-        returnValue: true,
-        srcElement: e.event.target as EventTarget,
-        timeStamp: Date.now(),
-        type: 'progress',
-        composedPath: () => [],
-        initEvent: () => {},
-        preventDefault: () => {},
-        stopImmediatePropagation: () => {},
-        stopPropagation: () => {},
-        NONE: 0,
-        CAPTURING_PHASE: 1,
-        AT_TARGET: 2,
-        BUBBLING_PHASE: 3,
-      };
-      options.onProgress!(progressEvent);
-    };
-    const res = await api?.(options.file, progressEvent);
-    options.onSuccess!(res);
-    ElMessage.success($t('ui.upload.uploadSuccess'));
-
-    // 更新文件
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-  } catch (error: any) {
-    console.error(error);
-    options.onError!(error);
+};
+// 文件数超出提示
+const handleExceed: UploadProps['onExceed'] = (): void => {
+  ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
+};
+// 上传错误提示
+const excelUploadError: UploadProps['onError'] = (): void => {
+  ElMessage.error('导入数据失败，请您重新上传！');
+  // 上传失败时减少计数器，避免后续上传被阻塞
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+};
+// 删除上传文件
+const handleRemove = (file: UploadFile) => {
+  const index = fileList.value.map((f) => f.name).indexOf(file.name);
+  if (index !== -1) {
+    fileList.value.splice(index, 1);
+    emitUpdateModelValue();
   }
-}
+};
+const handlePreview: UploadProps['onPreview'] = (_) => {
+  // console.log(uploadFile);
+};
 
-function getValue() {
-  const list = (fileList.value || [])
-    .filter((item) => item?.status === UploadResultStatus.DONE)
-    .map((item: any) => {
-      if (item?.response && props?.resultField) {
-        return item?.response;
-      }
-      return item?.url || item?.response?.url || item?.response;
-    });
-  // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
-  if (props.maxNumber === 1) {
-    return list.length > 0 ? list[0] : '';
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  (val: string | string[]) => {
+    if (!val) {
+      fileList.value = []; // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      return;
+    }
+
+    fileList.value = []; // 保障数据为空
+    // 情况1：字符串
+    if (isString(val)) {
+      fileList.value.push(
+        ...val.split(',').map((url) => ({
+          // eslint-disable-next-line unicorn/prefer-string-slice
+          name: url.substring(url.lastIndexOf('/') + 1),
+          url,
+        })),
+      );
+      return;
+    }
+    // 情况2：数组
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url,
+      })),
+    );
+  },
+  { immediate: true, deep: true },
+);
+// 发送文件链接列表更新
+const emitUpdateModelValue = () => {
+  // 情况1：数组结果
+  let result: string | string[] = fileList.value.map((file) => file.url!);
+  // 情况2：逗号分隔的字符串
+  if (props.limit === 1 || isString(props.modelValue)) {
+    result = result.join(',');
   }
-  return list;
-}
+  emit('update:modelValue', result);
+};
 </script>
-
 <template>
-  <div>
+  <div v-if="!disabled" class="upload-file">
     <ElUpload
-      v-bind="$attrs"
+      ref="uploadRef"
       v-model:file-list="fileList"
-      :accept="getStringAccept"
+      :action="uploadUrl"
+      :auto-upload="autoUpload"
       :before-upload="beforeUpload"
-      :http-request="customRequest"
       :disabled="disabled"
-      :limit="maxNumber"
-      :multiple="multiple"
-      list-type="text"
+      :drag="drag"
+      :http-request="httpRequest0"
+      :limit="props.limit"
+      :multiple="props.limit > 1"
+      :on-error="excelUploadError"
+      :on-exceed="handleExceed"
+      :on-preview="handlePreview"
       :on-remove="handleRemove"
+      :on-success="handleFileSuccess"
+      :show-file-list="true"
+      class="upload-file-uploader"
+      name="file"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
-        <ElButton>
-          <CloudUpload />
-          {{ $t('ui.upload.upload') }}
-        </ElButton>
-      </div>
-      <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
-        {{ getStringAccept }}
-      </div>
+      <ElButton type="primary">
+        <IconifyIcon icon="ep:upload-filled" />
+        选取文件
+      </ElButton>
+      <template v-if="isShowTip" #tip>
+        <div style="font-size: 8px">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </div>
+        <div style="font-size: 8px">
+          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
+        </div>
+      </template>
+      <template #file="row">
+        <div class="flex items-center">
+          <span>{{ row.file.name }}</span>
+          <div class="ml-10px">
+            <ElLink
+              :href="row.file.url"
+              :underline="false"
+              download
+              target="_blank"
+              type="primary"
+            >
+              下载
+            </ElLink>
+          </div>
+          <div class="ml-10px">
+            <ElButton link type="danger" @click="handleRemove(row.file)">
+              删除
+            </ElButton>
+          </div>
+        </div>
+      </template>
     </ElUpload>
   </div>
+
+  <!-- 上传操作禁用时 -->
+  <div v-if="disabled" class="upload-file">
+    <div
+      v-for="(file, index) in fileList"
+      :key="index"
+      class="file-list-item flex items-center"
+    >
+      <span>{{ file.name }}</span>
+      <div class="ml-10px">
+        <ElLink
+          :href="file.url"
+          :underline="false"
+          download
+          target="_blank"
+          type="primary"
+        >
+          下载
+        </ElLink>
+      </div>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+:deep(.upload-file-list .el-upload-list__item) {
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
+}
+
+:deep(.el-upload-list__item-file-name) {
+  max-width: 250px;
+}
+
+:deep(.upload-file-list .ele-upload-list__item-content) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+:deep(.ele-upload-list__item-content-action .el-link) {
+  margin-right: 10px;
+}
+
+.file-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>
diff --git a/apps/web-ele/src/components/upload/use-upload.ts b/apps/web-ele/src/components/upload/use-upload.ts
index 52f723be8..2f46f9e98 100644
--- a/apps/web-ele/src/components/upload/use-upload.ts
+++ b/apps/web-ele/src/components/upload/use-upload.ts
@@ -79,17 +79,17 @@ export function useUploadType({
 }
 
 // TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
-export const useUpload = (directory?: string) => {
+export function useUpload(directory?: string) {
   // 后端上传地址
   const uploadUrl = getUploadUrl();
   // 是否使用前端直连上传
   const isClientUpload =
     UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
   // 重写ElUpload上传方法
-  const httpRequest = async (
+  async function httpRequest(
     file: File,
     onUploadProgress?: AxiosProgressEvent,
-  ) => {
+  ) {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -113,20 +113,20 @@ export const useUpload = (directory?: string) => {
       // 模式二：后端上传
       return uploadFile({ file, directory }, onUploadProgress);
     }
-  };
+  }
 
   return {
     uploadUrl,
     httpRequest,
   };
-};
+}
 
 /**
  * 获得上传 URL
  */
-export const getUploadUrl = (): string => {
+export function getUploadUrl(): string {
   return `${apiURL}/infra/file/upload`;
-};
+}
 
 /**
  * 创建文件信息
@@ -134,7 +134,10 @@ export const getUploadUrl = (): string => {
  * @param vo 文件预签名信息
  * @param file 文件
  */
-function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
   const fileVO = {
     configId: vo.configId,
     url: vo.url,
@@ -148,10 +151,18 @@ function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
 }
 
 /**
- * 生成文件名称
+ * 生成文件名称（使用算法SHA256）
  *
  * @param file 要上传的文件
  */
 async function generateFileName(file: File) {
+  // // 读取文件内容
+  // const data = await file.arrayBuffer();
+  // const wordArray = CryptoJS.lib.WordArray.create(data);
+  // // 计算SHA256
+  // const sha256 = CryptoJS.SHA256(wordArray).toString();
+  // // 拼接后缀
+  // const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
+  // return `${sha256}${ext}`;
   return file.name;
 }
diff --git a/apps/web-ele/src/views/infra/file/data.ts b/apps/web-ele/src/views/infra/file/data.ts
index 56d583134..3e97d47fd 100644
--- a/apps/web-ele/src/views/infra/file/data.ts
+++ b/apps/web-ele/src/views/infra/file/data.ts
@@ -9,7 +9,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'file',
       label: '文件上传',
-      component: 'Upload',
+      component: 'FileUpload',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },
diff --git a/apps/web-ele/src/views/infra/file/modules/form.vue b/apps/web-ele/src/views/infra/file/modules/form.vue
index 558c8ae4d..1135c4ad7 100644
--- a/apps/web-ele/src/views/infra/file/modules/form.vue
+++ b/apps/web-ele/src/views/infra/file/modules/form.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { UploadRawFile } from 'element-plus';
-
 import { useVbenModal } from '@vben/common-ui';
-
-import { ElMessage, ElUpload } from 'element-plus';
+import { isEmpty } from '@vben/utils';
 
 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({
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+});
+
+const [Form] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
@@ -25,64 +25,19 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
+  handleValuesChange: (values) => {
+    if (isEmpty(values)) {
       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();
-    }
+    // 上传成功关闭 modal
+    modalApi.close();
+    emit('success');
   },
 });
-
-/** 上传前 */
-function beforeUpload(file: UploadRawFile) {
-  // TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
-  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 title="上传文件">
+    <Form class="mx-4" />
   </Modal>
 </template>
-- 
Gitee


From 8229ca1335489a0120b4f3dbaf5dd8ded0d3a3e4 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 26 Sep 2025 11:12:32 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=E3=80=90ele=E3=80=91=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ele/src/views/infra/codegen/modules/preview-code.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
index de4486fc1..f9e3df646 100644
--- a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
@@ -7,7 +7,7 @@ import type { InfraCodegenApi } from '#/api/infra/codegen';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Copy } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
 import { ElMessage, ElTabPane, ElTabs, ElTree } from 'element-plus';
@@ -291,8 +291,7 @@ const [Modal, modalApi] = useVbenModal({
             </div>
           </ElTabPane>
           <template #add-icon>
-            <!-- TODO @芋艿：这里会报错； -->
-            <Copy />
+            <IconifyIcon icon="ant-design:copy-twotone" />
           </template>
         </ElTabs>
       </div>
-- 
Gitee