初始化项目，自 v1.7.1 版本开始

src/components/Backtop/index.ts

@@ -0,0 +1,3 @@
+import Backtop from './src/Backtop.vue'
+
+export { Backtop }

src/components/Backtop/src/Backtop.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ElBacktop } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('backtop')
+</script>
+
+<template>
+  <ElBacktop
+    :class="`${prefixCls}-backtop`"
+    :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
+  />
+</template>

src/components/ConfigGlobal/index.ts

@@ -0,0 +1,3 @@
+import ConfigGlobal from './src/ConfigGlobal.vue'
+
+export { ConfigGlobal }

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useAppStore } from '@/store/modules/app'
+import { setCssVar } from '@/utils'
+import { useDesign } from '@/hooks/web/useDesign'
+import { ElementPlusSize } from '@/types/elementPlus'
+import { useWindowSize } from '@vueuse/core'
+
+const { variables } = useDesign()
+
+const appStore = useAppStore()
+
+const props = defineProps({
+  size: propTypes.oneOf<ElementPlusSize>(['default', 'small', 'large']).def('default')
+})
+
+provide('configGlobal', props)
+
+// 初始化所有主题色
+onMounted(() => {
+  appStore.setCssVarTheme()
+})
+
+const { width } = useWindowSize()
+
+// 监听窗口变化
+watch(
+  () => width.value,
+  (width: number) => {
+    if (width < 768) {
+      !appStore.getMobile ? appStore.setMobile(true) : undefined
+      setCssVar('--left-menu-min-width', '0')
+      appStore.setCollapse(true)
+      appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined
+    } else {
+      appStore.getMobile ? appStore.setMobile(false) : undefined
+      setCssVar('--left-menu-min-width', '64px')
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 多语言相关
+const localeStore = useLocaleStore()
+
+const currentLocale = computed(() => localeStore.currentLocale)
+</script>
+
+<template>
+  <ElConfigProvider
+    :namespace="variables.elNamespace"
+    :locale="currentLocale.elLocale"
+    :message="{ max: 1 }"
+    :size="size"
+  >
+    <slot></slot>
+  </ElConfigProvider>
+</template>

src/components/ContentDetailWrap/index.ts

@@ -0,0 +1,3 @@
+import ContentDetailWrap from './src/ContentDetailWrap.vue'
+
+export { ContentDetailWrap }

src/components/ContentDetailWrap/src/ContentDetailWrap.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { t } = useI18n()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-detail-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+const emit = defineEmits(['back'])
+const offset = ref(85)
+const contentDetailWrap = ref()
+onMounted(() => {
+  offset.value = contentDetailWrap.value.getBoundingClientRect().top
+})
+</script>
+
+<template>
+  <div :class="[`${prefixCls}-container`]" ref="contentDetailWrap">
+    <Sticky :offset="offset">
+      <div
+        :class="[
+          `${prefixCls}-header`,
+          'flex border-bottom-1 h-50px items-center text-center pr-10px'
+        ]"
+      >
+        <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
+          <ElButton @click="emit('back')">
+            <Icon icon="ep:arrow-left" class="mr-5px" />
+            {{ t('common.back') }}
+          </ElButton>
+        </div>
+        <div :class="[`${prefixCls}-header__title`, 'flex flex-1  justify-center']">
+          <slot name="title">
+            <label class="text-16px font-700">{{ title }}</label>
+          </slot>
+        </div>
+        <div :class="[`${prefixCls}-header__right`, 'flex  pl-10px pr-10px']">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    </Sticky>
+    <div style="padding: var(--app-content-padding)">
+      <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
+        <div> <slot></slot> </div>
+      </ElCard>
+    </div>
+  </div>
+</template>

src/components/ContentWrap/index.ts

@@ -0,0 +1,3 @@
+import ContentWrap from './src/ContentWrap.vue'
+
+export { ContentWrap }

src/components/ContentWrap/src/ContentWrap.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+</script>
+
+<template>
+  <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+    <template v-if="title" #header>
+      <div class="flex items-center">
+        <span class="text-16px font-700">{{ title }}</span>
+        <ElTooltip v-if="message" effect="dark" placement="right">
+          <template #content>
+            <div class="max-w-200px">{{ message }}</div>
+          </template>
+          <Icon class="ml-5px" icon="ep:question-filled" :size="14" />
+        </ElTooltip>
+      </div>
+    </template>
+    <div>
+      <slot></slot>
+    </div>
+  </ElCard>
+</template>

src/components/CountTo/index.ts

@@ -0,0 +1,3 @@
+import CountTo from './src/CountTo.vue'
+
+export { CountTo }

src/components/CountTo/src/CountTo.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { isNumber } from '@/utils/is'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('count-to')
+
+const props = defineProps({
+  startVal: propTypes.number.def(0),
+  endVal: propTypes.number.def(2021),
+  duration: propTypes.number.def(3000),
+  autoplay: propTypes.bool.def(true),
+  decimals: propTypes.number.validate((value: number) => value >= 0).def(0),
+  decimal: propTypes.string.def('.'),
+  separator: propTypes.string.def(','),
+  prefix: propTypes.string.def(''),
+  suffix: propTypes.string.def(''),
+  useEasing: propTypes.bool.def(true),
+  easingFn: {
+    type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
+    default(t: number, b: number, c: number, d: number) {
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+    }
+  }
+})
+
+const emit = defineEmits(['mounted', 'callback'])
+
+const formatNumber = (num: number | string) => {
+  const { decimals, decimal, separator, suffix, prefix } = props
+  num = Number(num).toFixed(decimals)
+  num += ''
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? decimal + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  if (separator && !isNumber(separator)) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, '$1' + separator + '$2')
+    }
+  }
+  return prefix + x1 + x2 + suffix
+}
+
+const state = reactive<{
+  localStartVal: number
+  printVal: number | null
+  displayValue: string
+  paused: boolean
+  localDuration: number | null
+  startTime: number | null
+  timestamp: number | null
+  rAF: any
+  remaining: number | null
+}>({
+  localStartVal: props.startVal,
+  displayValue: formatNumber(props.startVal),
+  printVal: null,
+  paused: false,
+  localDuration: props.duration,
+  startTime: null,
+  timestamp: null,
+  remaining: null,
+  rAF: null
+})
+
+const displayValue = toRef(state, 'displayValue')
+
+onMounted(() => {
+  if (props.autoplay) {
+    start()
+  }
+  emit('mounted')
+})
+
+const getCountDown = computed(() => {
+  return props.startVal > props.endVal
+})
+
+watch([() => props.startVal, () => props.endVal], () => {
+  if (props.autoplay) {
+    start()
+  }
+})
+
+const start = () => {
+  const { startVal, duration } = props
+  state.localStartVal = startVal
+  state.startTime = null
+  state.localDuration = duration
+  state.paused = false
+  state.rAF = requestAnimationFrame(count)
+}
+
+const pauseResume = () => {
+  if (state.paused) {
+    resume()
+    state.paused = false
+  } else {
+    pause()
+    state.paused = true
+  }
+}
+
+const pause = () => {
+  cancelAnimationFrame(state.rAF)
+}
+
+const resume = () => {
+  state.startTime = null
+  state.localDuration = +(state.remaining as number)
+  state.localStartVal = +(state.printVal as number)
+  requestAnimationFrame(count)
+}
+
+const reset = () => {
+  state.startTime = null
+  cancelAnimationFrame(state.rAF)
+  state.displayValue = formatNumber(props.startVal)
+}
+
+const count = (timestamp: number) => {
+  const { useEasing, easingFn, endVal } = props
+  if (!state.startTime) state.startTime = timestamp
+  state.timestamp = timestamp
+  const progress = timestamp - state.startTime
+  state.remaining = (state.localDuration as number) - progress
+  if (useEasing) {
+    if (unref(getCountDown)) {
+      state.printVal =
+        state.localStartVal -
+        easingFn(progress, 0, state.localStartVal - endVal, state.localDuration as number)
+    } else {
+      state.printVal = easingFn(
+        progress,
+        state.localStartVal,
+        endVal - state.localStartVal,
+        state.localDuration as number
+      )
+    }
+  } else {
+    if (unref(getCountDown)) {
+      state.printVal =
+        state.localStartVal -
+        (state.localStartVal - endVal) * (progress / (state.localDuration as number))
+    } else {
+      state.printVal =
+        state.localStartVal +
+        (endVal - state.localStartVal) * (progress / (state.localDuration as number))
+    }
+  }
+  if (unref(getCountDown)) {
+    state.printVal = state.printVal < endVal ? endVal : state.printVal
+  } else {
+    state.printVal = state.printVal > endVal ? endVal : state.printVal
+  }
+  state.displayValue = formatNumber(state.printVal!)
+  if (progress < (state.localDuration as number)) {
+    state.rAF = requestAnimationFrame(count)
+  } else {
+    emit('callback')
+  }
+}
+
+defineExpose({
+  pauseResume,
+  reset,
+  start,
+  pause
+})
+</script>
+
+<template>
+  <span :class="prefixCls">
+    {{ displayValue }}
+  </span>
+</template>

src/components/Crontab/index.ts

@@ -0,0 +1,2 @@
+import Crontab from './src/Crontab.vue'
+export { Crontab }

src/components/Crontab/src/Crontab.vue

@@ -0,0 +1,998 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { PropType } from 'vue'
+interface shortcutsType {
+  text: string
+  value: string
+}
+const props = defineProps({
+  modelValue: { type: String, default: '* * * * * ?' },
+  shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] }
+})
+const defaultValue = ref('')
+const dialogVisible = ref(false)
+const getYear = () => {
+  let v: number[] = []
+  let 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(() => {
+  let v = cronValue.second
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_minute = computed(() => {
+  let v = cronValue.minute
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_hour = computed(() => {
+  let v = cronValue.hour
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_day = computed(() => {
+  let v = cronValue.day
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else if (v.type == '4') {
+    return 'L'
+  } else if (v.type == '5') {
+    return '?'
+  } else {
+    return '*'
+  }
+})
+const value_month = computed(() => {
+  let v = cronValue.month
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else {
+    return '*'
+  }
+})
+const value_week = computed(() => {
+  let v = cronValue.week
+  if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.end + '#' + v.loop.start
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : '*'
+  } else if (v.type == '4') {
+    return v.last + 'L'
+  } else if (v.type == '5') {
+    return '?'
+  } else {
+    return '*'
+  }
+})
+const value_year = computed(() => {
+  let v = cronValue.year
+  if (v.type == '-1') {
+    return ''
+  } else if (v.type == '0') {
+    return '*'
+  } else if (v.type == '1') {
+    return v.range.start + '-' + v.range.end
+  } else if (v.type == '2') {
+    return v.loop.start + '/' + v.loop.end
+  } else if (v.type == '3') {
+    return v.appoint.length > 0 ? v.appoint.join(',') : ''
+  } else {
+    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 emit = defineEmits(['update: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(',')
+  }
+  //日
+  if (arr[3] == '*') {
+    cronValue.day.type = '0'
+  } else if (arr[3] == 'L') {
+    cronValue.day.type = '4'
+  } else if (arr[3] == '?') {
+    cronValue.day.type = '5'
+  } else 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 = () => {
+  let 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
+}
+</script>
+<template>
+  <el-input v-model="defaultValue" v-bind="$attrs" class="input-with-select">
+    <template #append>
+      <el-select v-model="select" placeholder="生成器" style="width: 115px">
+        <el-option label="每分钟" value="0 * * * * ?" />
+        <el-option label="每小时" value="0 0 * * * ?" />
+        <el-option label="每天零点" value="0 0 0 * * ?" />
+        <el-option label="每月一号零点" value="0 0 0 1 * ?" />
+        <el-option label="每月最后一天零点" value="0 0 0 L * ?" />
+        <el-option label="每周星期日零点" value="0 0 0 ? * 1" />
+        <el-option
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :label="item.text"
+          :value="item.value"
+        />
+        <el-option label="自定义" value="custom" />
+      </el-select>
+    </template>
+  </el-input>
+
+  <el-dialog
+    title="cron规则生成器"
+    v-model="dialogVisible"
+    :width="580"
+    destroy-on-close
+    append-to-body
+  >
+    <div class="sc-cron">
+      <el-tabs>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.second.type">
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.second.type == '1'">
+              <el-input-number
+                v-model="cronValue.second.range.start"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.second.range.end"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.second.type == '2'">
+              <el-input-number
+                v-model="cronValue.second.loop.start"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              秒开始，每
+              <el-input-number
+                v-model="cronValue.second.loop.end"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              秒执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.second.type == '3'">
+              <el-select v-model="cronValue.second.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.minute.type">
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.minute.type == '1'">
+              <el-input-number
+                v-model="cronValue.minute.range.start"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.minute.range.end"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.minute.type == '2'">
+              <el-input-number
+                v-model="cronValue.minute.loop.start"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              分钟开始，每
+              <el-input-number
+                v-model="cronValue.minute.loop.end"
+                :min="0"
+                :max="59"
+                controls-position="right"
+              />
+              分钟执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.minute.type == '3'">
+              <el-select v-model="cronValue.minute.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.hour.type">
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.hour.type == '1'">
+              <el-input-number
+                v-model="cronValue.hour.range.start"
+                :min="0"
+                :max="23"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.hour.range.end"
+                :min="0"
+                :max="23"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.hour.type == '2'">
+              <el-input-number
+                v-model="cronValue.hour.loop.start"
+                :min="0"
+                :max="23"
+                controls-position="right"
+              />
+              小时开始，每
+              <el-input-number
+                v-model="cronValue.hour.loop.end"
+                :min="0"
+                :max="23"
+                controls-position="right"
+              />
+              小时执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.hour.type == '3'">
+              <el-select v-model="cronValue.hour.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.day.type">
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+                <el-radio-button label="4">本月最后一天</el-radio-button>
+                <el-radio-button label="5">不指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.day.type == '1'">
+              <el-input-number
+                v-model="cronValue.day.range.start"
+                :min="1"
+                :max="31"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.day.range.end"
+                :min="1"
+                :max="31"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.day.type == '2'">
+              <el-input-number
+                v-model="cronValue.day.loop.start"
+                :min="1"
+                :max="31"
+                controls-position="right"
+              />
+              号开始，每
+              <el-input-number
+                v-model="cronValue.day.loop.end"
+                :min="1"
+                :max="31"
+                controls-position="right"
+              />
+              天执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.day.type == '3'">
+              <el-select v-model="cronValue.day.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.month.type">
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.month.type == '1'">
+              <el-input-number
+                v-model="cronValue.month.range.start"
+                :min="1"
+                :max="12"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number
+                v-model="cronValue.month.range.end"
+                :min="1"
+                :max="12"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.month.type == '2'">
+              <el-input-number
+                v-model="cronValue.month.loop.start"
+                :min="1"
+                :max="12"
+                controls-position="right"
+              />
+              月开始，每
+              <el-input-number
+                v-model="cronValue.month.loop.end"
+                :min="1"
+                :max="12"
+                controls-position="right"
+              />
+              月执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.month.type == '3'">
+              <el-select v-model="cronValue.month.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form>
+              <el-form-item label="类型">
+                <el-radio-group v-model="cronValue.week.type">
+                  <el-radio-button label="0">任意值</el-radio-button>
+                  <el-radio-button label="1">范围</el-radio-button>
+                  <el-radio-button label="2">间隔</el-radio-button>
+                  <el-radio-button label="3">指定</el-radio-button>
+                  <el-radio-button label="4">本月最后一周</el-radio-button>
+                  <el-radio-button label="5">不指定</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="范围" v-if="cronValue.week.type == '1'">
+                <el-select v-model="cronValue.week.range.start">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <span style="padding: 0 15px">-</span>
+                <el-select v-model="cronValue.week.range.end">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="间隔" v-if="cronValue.week.type == '2'">
+                第
+                <el-input-number
+                  v-model="cronValue.week.loop.start"
+                  :min="1"
+                  :max="4"
+                  controls-position="right"
+                />
+                周的星期
+                <el-select v-model="cronValue.week.loop.end">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                执行一次
+              </el-form-item>
+              <el-form-item label="指定" v-if="cronValue.week.type == '3'">
+                <el-select v-model="cronValue.week.appoint" multiple style="width: 100%">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="最后一周" v-if="cronValue.week.type == '4'">
+                <el-select v-model="cronValue.week.last">
+                  <el-option
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <el-form>
+            <el-form-item label="类型">
+              <el-radio-group v-model="cronValue.year.type">
+                <el-radio-button label="-1">忽略</el-radio-button>
+                <el-radio-button label="0">任意值</el-radio-button>
+                <el-radio-button label="1">范围</el-radio-button>
+                <el-radio-button label="2">间隔</el-radio-button>
+                <el-radio-button label="3">指定</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="范围" v-if="cronValue.year.type == '1'">
+              <el-input-number v-model="cronValue.year.range.start" controls-position="right" />
+              <span style="padding: 0 15px">-</span>
+              <el-input-number v-model="cronValue.year.range.end" controls-position="right" />
+            </el-form-item>
+            <el-form-item label="间隔" v-if="cronValue.year.type == '2'">
+              <el-input-number v-model="cronValue.year.loop.start" controls-position="right" />
+              年开始，每
+              <el-input-number
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </el-form-item>
+            <el-form-item label="指定" v-if="cronValue.year.type == '3'">
+              <el-select v-model="cronValue.year.appoint" multiple style="width: 100%">
+                <el-option
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="submit()">确 认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.sc-cron:deep(.el-tabs__item) {
+  height: auto;
+  line-height: 1;
+  padding: 0 7px;
+  vertical-align: bottom;
+}
+.sc-cron-num {
+  text-align: center;
+  margin-bottom: 15px;
+  width: 100%;
+}
+.sc-cron-num h2 {
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: normal;
+}
+.sc-cron-num h4 {
+  display: block;
+  height: 32px;
+  line-height: 30px;
+  width: 100%;
+  font-size: 12px;
+  padding: 0 15px;
+  background: var(--el-color-primary-light-9);
+  border-radius: 4px;
+}
+.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
+  background: var(--el-color-primary);
+  color: #fff;
+}
+[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>

src/components/Cropper/index.ts

@@ -0,0 +1,4 @@
+import CropperImage from './src/Cropper.vue'
+import CropperAvatar from './src/CropperAvatar.vue'
+
+export { CropperImage, CropperAvatar }

src/components/Cropper/src/CopperModal.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <Dialog
+      v-model="dialogVisible"
+      :title="t('cropper.modalTitle')"
+      width="800px"
+      maxHeight="380px"
+      :canFullscreen="false"
+    >
+      <div :class="prefixCls">
+        <div :class="`${prefixCls}-left`">
+          <div :class="`${prefixCls}-cropper`">
+            <CropperImage
+              v-if="src"
+              :src="src"
+              height="300px"
+              :circled="circled"
+              @cropend="handleCropend"
+              @ready="handleReady"
+            />
+          </div>
+
+          <div :class="`${prefixCls}-toolbar`">
+            <el-upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
+              <el-tooltip :content="t('cropper.selectImage')" placement="bottom">
+                <XButton preIcon="ant-design:upload-outlined" type="primary" />
+              </el-tooltip>
+            </el-upload>
+            <el-space>
+              <el-tooltip :content="t('cropper.btn_reset')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="ant-design:reload-outlined"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('reset')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_rotate_left')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="ant-design:rotate-left-outlined"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('rotate', -45)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_rotate_right')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="ant-design:rotate-right-outlined"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('rotate', 45)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_scale_x')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="vaadin:arrows-long-h"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('scaleX')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_scale_y')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="vaadin:arrows-long-v"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('scaleY')"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_zoom_in')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="ant-design:zoom-in-outlined"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('zoom', 0.1)"
+                />
+              </el-tooltip>
+              <el-tooltip :content="t('cropper.btn_zoom_out')" placement="bottom">
+                <XButton
+                  type="primary"
+                  preIcon="ant-design:zoom-out-outlined"
+                  size="small"
+                  :disabled="!src"
+                  @click="handlerToolbar('zoom', -0.1)"
+                />
+              </el-tooltip>
+            </el-space>
+          </div>
+        </div>
+        <div :class="`${prefixCls}-right`">
+          <div :class="`${prefixCls}-preview`">
+            <img :src="previewSource" v-if="previewSource" :alt="t('cropper.preview')" />
+          </div>
+          <template v-if="previewSource">
+            <div :class="`${prefixCls}-group`">
+              <el-avatar :src="previewSource" size="large" />
+              <el-avatar :src="previewSource" :size="48" />
+              <el-avatar :src="previewSource" :size="64" />
+              <el-avatar :src="previewSource" :size="80" />
+            </div>
+          </template>
+        </div>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="handleOk">{{ t('cropper.okText') }}</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { useDesign } from '@/hooks/web/useDesign'
+import { dataURLtoBlob } from '@/utils/filt'
+import { useI18n } from 'vue-i18n'
+import type { CropendResult, Cropper } from './types'
+import { propTypes } from '@/utils/propTypes'
+import { CropperImage } from '@/components/Cropper'
+
+const props = defineProps({
+  srcValue: propTypes.string.def(''),
+  circled: propTypes.bool.def(true)
+})
+const emit = defineEmits(['uploadSuccess'])
+const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-am')
+
+const src = ref(props.srcValue)
+const previewSource = ref('')
+const cropper = ref<Cropper>()
+const dialogVisible = ref(false)
+let filename = ''
+let scaleX = 1
+let scaleY = 1
+
+// Block upload
+function handleBeforeUpload(file: File) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  src.value = ''
+  previewSource.value = ''
+  reader.onload = function (e) {
+    src.value = (e.target?.result as string) ?? ''
+    filename = file.name
+  }
+  return false
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64
+}
+
+function handleReady(cropperInstance: Cropper) {
+  cropper.value = cropperInstance
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1
+  }
+  cropper?.value?.[event]?.(arg)
+}
+
+async function handleOk() {
+  const blob = dataURLtoBlob(previewSource.value)
+  emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename })
+}
+function openModal() {
+  dialogVisible.value = true
+}
+function closeModal() {
+  dialogVisible.value = false
+}
+defineExpose({ openModal, closeModal })
+</script>
+<style lang="scss">
+$prefix-cls: #{$namespace}-cropper-am;
+
+.#{$prefix-cls} {
+  display: flex;
+
+  &-left,
+  &-right {
+    height: 340px;
+  }
+
+  &-left {
+    width: 55%;
+  }
+
+  &-right {
+    width: 45%;
+  }
+
+  &-cropper {
+    height: 300px;
+    background: #eee;
+    background-image: linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      ),
+      linear-gradient(
+        45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0
+      );
+    background-position: 0 0, 12px 12px;
+    background-size: 24px 24px;
+  }
+
+  &-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  &-preview {
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group {
+    display: flex;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+</style>

src/components/Cropper/src/Cropper.vue

@@ -0,0 +1,181 @@
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :src="src"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :style="getImageStyle"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { CSSProperties, PropType } from 'vue'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { useDebounceFn } from '@vueuse/core'
+
+type Options = Cropper.Options
+
+const defaultOptions: Options = {
+  aspectRatio: 1,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true
+}
+
+const props = defineProps({
+  src: propTypes.string.def(''),
+  alt: propTypes.string.def(''),
+  circled: propTypes.bool.def(false),
+  realTimePreview: propTypes.bool.def(true),
+  height: propTypes.string.def('360px'),
+  crossorigin: {
+    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+    default: undefined
+  },
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
+})
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError'])
+const attrs = useAttrs()
+const imgElRef = ref<ElRef<HTMLImageElement>>()
+const cropper = ref<Nullable<Cropper>>()
+const isReady = ref(false)
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-image')
+const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80)
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle
+  }
+})
+
+const getClass = computed(() => {
+  return [
+    prefixCls,
+    attrs.class,
+    {
+      [`${prefixCls}--circled`]: props.circled
+    }
+  ]
+})
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${props.height}`.replace(/px/, '') + 'px' }
+})
+
+onMounted(init)
+
+onUnmounted(() => {
+  cropper.value?.destroy()
+})
+
+async function init() {
+  const imgEl = unref(imgElRef)
+  if (!imgEl) {
+    return
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    ready: () => {
+      isReady.value = true
+      realTimeCroppered()
+      emit('ready', cropper.value)
+    },
+    crop() {
+      debounceRealTimeCroppered()
+    },
+    zoom() {
+      debounceRealTimeCroppered()
+    },
+    cropmove() {
+      debounceRealTimeCroppered()
+    },
+    ...props.options
+  })
+}
+
+// Real-time display preview
+function realTimeCroppered() {
+  props.realTimePreview && croppered()
+}
+
+// event: return base64 and width and height information after cropping
+function croppered() {
+  if (!cropper.value) {
+    return
+  }
+  let imgInfo = cropper.value.getData()
+  const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return
+    }
+    let fileReader: FileReader = new FileReader()
+    fileReader.readAsDataURL(blob)
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo
+      })
+    }
+    fileReader.onerror = () => {
+      emit('cropendError')
+    }
+  }, 'image/png')
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas()
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')!
+  const width = sourceCanvas.width
+  const height = sourceCanvas.height
+  canvas.width = width
+  canvas.height = height
+  context.imageSmoothingEnabled = true
+  context.drawImage(sourceCanvas, 0, 0, width, height)
+  context.globalCompositeOperation = 'destination-in'
+  context.beginPath()
+  context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true)
+  context.fill()
+  return canvas
+}
+</script>
+<style lang="scss">
+$prefix-cls: #{$namespace}-cropper-image;
+
+.#{$prefix-cls} {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/components/Cropper/src/CropperAvatar.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="user-info-head" @click="open()">
+    <img :src="sourceValue" v-if="sourceValue" class="img-circle img-lg" alt="avatar" />
+    <el-button :class="`${prefixCls}-upload-btn`" @click="open()" v-if="showBtn">
+      {{ btnText ? btnText : t('cropper.selectImage') }}
+    </el-button>
+    <CopperModal
+      ref="cropperModelRef"
+      @upload-success="handleUploadSuccess"
+      :srcValue="sourceValue"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { useDesign } from '@/hooks/web/useDesign'
+
+import { propTypes } from '@/utils/propTypes'
+import { useI18n } from 'vue-i18n'
+import CopperModal from './CopperModal.vue'
+
+const props = defineProps({
+  width: propTypes.string.def('200px'),
+  value: propTypes.string.def(''),
+  showBtn: propTypes.bool.def(true),
+  btnText: propTypes.string.def('')
+})
+
+const emit = defineEmits(['update:value', 'change'])
+const sourceValue = ref(props.value)
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('cropper-avatar')
+const message = useMessage()
+const { t } = useI18n()
+
+const cropperModelRef = ref()
+
+watchEffect(() => {
+  sourceValue.value = props.value
+})
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v)
+  }
+)
+
+function handleUploadSuccess({ source, data, filename }) {
+  sourceValue.value = source
+  emit('change', { source, data, filename })
+  message.success(t('cropper.uploadSuccess'))
+}
+
+function open() {
+  cropperModelRef.value.openModal()
+}
+function close() {
+  cropperModelRef.value.closeModal()
+}
+defineExpose({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}--cropper-avatar;
+
+.#{$prefix-cls} {
+  display: inline-block;
+  text-align: center;
+
+  &-image-wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &-image-mask {
+    opacity: 0%;
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    border: inherit;
+    background: rgb(0 0 0 / 40%);
+    cursor: pointer;
+    transition: opacity 0.4s;
+
+    ::v-deep(svg) {
+      margin: auto;
+    }
+  }
+
+  &-image-mask:hover {
+    opacity: 4000%;
+  }
+
+  &-upload-btn {
+    margin: 10px auto;
+  }
+}
+.user-info-head {
+  position: relative;
+  display: inline-block;
+}
+.img-circle {
+  border-radius: 50%;
+}
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>

src/components/Cropper/src/types.ts

@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs'
+
+export interface CropendResult {
+  imgBase64: string
+  imgInfo: Cropper.Data
+}
+
+export type { Cropper }

src/components/Descriptions/index.ts

@@ -0,0 +1,3 @@
+import Descriptions from './src/Descriptions.vue'
+
+export { Descriptions }

src/components/Descriptions/src/Descriptions.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { useAppStore } from '@/store/modules/app'
+import { DescriptionsSchema } from '@/types/descriptions'
+
+const appStore = useAppStore()
+
+const mobile = computed(() => appStore.getMobile)
+
+const attrs = useAttrs()
+
+const slots = useSlots()
+
+const props = defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  collapse: propTypes.bool.def(true),
+  columns: propTypes.number.def(1),
+  schema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
+  },
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  }
+})
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('descriptions')
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const getBindItemValue = (item: DescriptionsSchema) => {
+  const delArr: string[] = ['field']
+  const obj = { ...item }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+}
+
+// 折叠
+const show = ref(true)
+
+const toggleClick = () => {
+  if (props.collapse) {
+    show.value = !unref(show)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'bg-[var(--el-color-white)] dark:(bg-[var(--el-bg-color)] border-[var(--el-border-color)] border-1px)'
+    ]"
+  >
+    <div
+      v-if="title"
+      :class="[
+        `${prefixCls}-header`,
+        'h-50px flex justify-between items-center mb-10px border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
+      ]"
+      @click="toggleClick"
+    >
+      <div :class="[`${prefixCls}-header__title`, 'relative font-18px font-bold ml-10px']">
+        <div class="flex items-center">
+          {{ title }}
+          <ElTooltip v-if="message" :content="message" placement="right">
+            <Icon icon="ep:warning" class="ml-5px" />
+          </ElTooltip>
+        </div>
+      </div>
+      <Icon v-if="collapse" :icon="show ? 'ep:arrow-down' : 'ep:arrow-up'" />
+    </div>
+
+    <ElCollapseTransition>
+      <div v-show="show" :class="[`${prefixCls}-content`, 'p-10px']">
+        <ElDescriptions
+          :column="props.columns"
+          border
+          :direction="mobile ? 'vertical' : 'horizontal'"
+          v-bind="getBindValue"
+        >
+          <template v-if="slots['extra']" #extra>
+            <slot name="extra"></slot>
+          </template>
+          <ElDescriptionsItem
+            v-for="item in schema"
+            :key="item.field"
+            min-width="80"
+            v-bind="getBindItemValue(item)"
+          >
+            <template #label>
+              <slot :name="`${item.field}-label`" :label="item.label">{{ item.label }}</slot>
+            </template>
+
+            <template #default>
+              <slot v-if="item.dateFormat">
+                {{
+                  data[item.field] !== null ? dayjs(data[item.field]).format(item.dateFormat) : ''
+                }}
+              </slot>
+              <slot v-else-if="item.dictType">
+                <DictTag :type="item.dictType" :value="data[item.field] + ''" />
+              </slot>
+              <slot v-else :name="item.field" :row="data">{{ data[item.field] }}</slot>
+            </template>
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </div>
+    </ElCollapseTransition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-descriptions;
+
+.#{$prefix-cls}-header {
+  &__title {
+    &::after {
+      position: absolute;
+      top: 3px;
+      left: -10px;
+      width: 4px;
+      height: 70%;
+      background: var(--el-color-primary);
+      content: '';
+    }
+  }
+}
+
+.#{$prefix-cls}-content {
+  :deep(.#{$elNamespace}-descriptions__cell) {
+    width: 0;
+  }
+}
+</style>

src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+import Dialog from './src/Dialog.vue'
+
+export { Dialog }

src/components/Dialog/src/Dialog.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { isNumber } from '@/utils/is'
+
+const slots = useSlots()
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  title: propTypes.string.def('Dialog'),
+  fullscreen: propTypes.bool.def(true),
+  maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
+  width: propTypes.oneOfType([String, Number]).def('40%')
+})
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const isFullscreen = ref(false)
+
+const toggleFull = () => {
+  isFullscreen.value = !unref(isFullscreen)
+}
+
+const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
+
+watch(
+  () => isFullscreen.value,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      const windowHeight = document.documentElement.offsetHeight
+      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
+    } else {
+      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const dialogStyle = computed(() => {
+  return {
+    height: unref(dialogHeight)
+  }
+})
+</script>
+
+<template>
+  <ElDialog
+    v-bind="getBindValue"
+    :fullscreen="isFullscreen"
+    destroy-on-close
+    lock-scroll
+    draggable
+    :width="width"
+    :close-on-click-modal="true"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <slot name="title">
+          {{ title }}
+        </slot>
+        <Icon
+          v-if="fullscreen"
+          class="mr-22px cursor-pointer is-hover mt-2px z-10"
+          :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+          color="var(--el-color-info)"
+          @click="toggleFull"
+        />
+      </div>
+    </template>
+
+    <ElScrollbar :style="dialogStyle">
+      <slot></slot>
+    </ElScrollbar>
+
+    <template v-if="slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+  </ElDialog>
+</template>
+
+<style lang="scss">
+.#{$elNamespace}-dialog__header {
+  margin-right: 0 !important;
+  border-bottom: 1px solid var(--tags-view-border-color);
+}
+
+.#{$elNamespace}-dialog__footer {
+  border-top: 1px solid var(--tags-view-border-color);
+}
+
+.is-hover {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.dark {
+  .#{$elNamespace}-dialog__header {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+
+  .#{$elNamespace}-dialog__footer {
+    border-top: 1px solid var(--el-border-color);
+  }
+}
+</style>

src/components/DictTag/index.ts

@@ -0,0 +1,3 @@
+import DictTag from './src/DictTag.vue'
+
+export { DictTag }

src/components/DictTag/src/DictTag.vue

@@ -0,0 +1,56 @@
+<script lang="tsx">
+import { defineComponent, PropType, ref } from 'vue'
+import { isHexColor } from '@/utils/color'
+import { ElTag } from 'element-plus'
+import { DictDataType, getDictOptions } from '@/utils/dict'
+
+export default defineComponent({
+  name: 'DictTag',
+  props: {
+    type: {
+      type: String as PropType<string>,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      required: true
+    }
+  },
+  setup(props) {
+    const dictData = ref<DictDataType>()
+    const getDictObj = (dictType: string, value: string) => {
+      const dictOptions = getDictOptions(dictType)
+      dictOptions.forEach((dict: DictDataType) => {
+        if (dict.value === value) {
+          if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+            dict.colorType = ''
+          }
+          dictData.value = dict
+        }
+      })
+    }
+    const rederDictTag = () => {
+      if (!props.type) {
+        return null
+      }
+      if (!props.value) {
+        return null
+      }
+      getDictObj(props.type, props.value.toString())
+      return (
+        <ElTag
+          type={dictData.value?.colorType}
+          color={
+            dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
+              ? dictData.value?.cssClass
+              : ''
+          }
+        >
+          {dictData.value?.label}
+        </ElTag>
+      )
+    }
+    return () => rederDictTag()
+  }
+})
+</script>

src/components/Echart/index.ts

@@ -0,0 +1,3 @@
+import Echart from './src/Echart.vue'
+
+export { Echart }

src/components/Echart/src/Echart.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { EChartsOption } from 'echarts'
+import echarts from '@/plugins/echarts'
+import { debounce } from 'lodash-es'
+import 'echarts-wordcloud'
+import { propTypes } from '@/utils/propTypes'
+import { PropType } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { isString } from '@/utils/is'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('echart')
+
+const appStore = useAppStore()
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<EChartsOption>,
+    required: true
+  },
+  width: propTypes.oneOfType([Number, String]).def(''),
+  height: propTypes.oneOfType([Number, String]).def('500px')
+})
+
+const isDark = computed(() => appStore.getIsDark)
+
+const theme = computed(() => {
+  const echartTheme: boolean | string = unref(isDark) ? true : 'auto'
+
+  return echartTheme
+})
+
+const options = computed(() => {
+  return Object.assign(props.options, {
+    darkMode: unref(theme)
+  })
+})
+
+const elRef = ref<ElRef>()
+
+let echartRef: Nullable<echarts.ECharts> = null
+
+const contentEl = ref<Element>()
+
+const styles = computed(() => {
+  const width = isString(props.width) ? props.width : `${props.width}px`
+  const height = isString(props.height) ? props.height : `${props.height}px`
+
+  return {
+    width,
+    height
+  }
+})
+
+const initChart = () => {
+  if (unref(elRef) && props.options) {
+    echartRef = echarts.init(unref(elRef) as HTMLElement)
+    echartRef?.setOption(unref(options))
+  }
+}
+
+watch(
+  () => options.value,
+  (options) => {
+    if (echartRef) {
+      echartRef?.setOption(options)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+const resizeHandler = debounce(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+}, 100)
+
+const contentResizeHandler = async (e: TransitionEvent) => {
+  if (e.propertyName === 'width') {
+    resizeHandler()
+  }
+}
+
+onMounted(() => {
+  initChart()
+
+  window.addEventListener('resize', resizeHandler)
+
+  contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0]
+  unref(contentEl) &&
+    (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeHandler)
+  unref(contentEl) &&
+    (unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler)
+})
+
+onActivated(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+})
+</script>
+
+<template>
+  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
+</template>

src/components/Editor/index.ts

@@ -0,0 +1,8 @@
+import Editor from './src/Editor.vue'
+import { IDomEditor } from '@wangeditor/editor'
+
+export interface EditorExpose {
+  getEditorRef: () => Promise<IDomEditor>
+}
+
+export { Editor }

src/components/Editor/src/Editor.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
+import { propTypes } from '@/utils/propTypes'
+import { isNumber } from '@/utils/is'
+import { ElMessage } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+type InsertFnType = (url: string, alt: string, href: string) => void
+
+const localeStore = useLocaleStore()
+
+const currentLocale = computed(() => localeStore.getCurrentLocale)
+
+i18nChangeLanguage(unref(currentLocale).lang)
+
+const props = defineProps({
+  editorId: propTypes.string.def('wangeEditor-1'),
+  height: propTypes.oneOfType([Number, String]).def('500px'),
+  editorConfig: {
+    type: Object as PropType<IEditorConfig>,
+    default: () => undefined
+  },
+  readonly: propTypes.bool.def(false),
+  modelValue: propTypes.string.def('')
+})
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor>()
+
+const valueHtml = ref('')
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueHtml)) return
+    valueHtml.value = val
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听
+watch(
+  () => valueHtml.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor
+}
+
+// 编辑器配置
+const editorConfig = computed((): IEditorConfig => {
+  return Object.assign(
+    {
+      placeholder: '请输入内容...',
+      readOnly: props.readonly,
+      customAlert: (s: string, t: string) => {
+        switch (t) {
+          case 'success':
+            ElMessage.success(s)
+            break
+          case 'info':
+            ElMessage.info(s)
+            break
+          case 'warning':
+            ElMessage.warning(s)
+            break
+          case 'error':
+            ElMessage.error(s)
+            break
+          default:
+            ElMessage.info(s)
+            break
+        }
+      },
+      autoFocus: false,
+      scroll: true,
+      MENU_CONF: {
+        ['uploadImage']: {
+          server: import.meta.env.VITE_UPLOAD_URL,
+          // 单个文件的最大体积限制，默认为 2M
+          maxFileSize: 5 * 1024 * 1024,
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 10,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: ['image/*'],
+
+          // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+          meta: { updateSupport: 0 },
+          // 将 meta 拼接到 url 参数中，默认 false
+          metaWithUrl: true,
+
+          // 自定义增加 http  header
+          headers: {
+            Accept: '*',
+            Authorization: 'Bearer ' + getAccessToken(),
+            'tenant-id': getTenantId()
+          },
+
+          // 跨域是否传递 cookie ，默认为 false
+          withCredentials: true,
+
+          // 超时时间，默认为 10 秒
+          timeout: 5 * 1000, // 5 秒
+
+          // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
+          fieldName: 'file',
+
+          // 上传之前触发
+          onBeforeUpload(file: File) {
+            console.log(file)
+            return file
+          },
+          // 上传进度的回调函数
+          onProgress(progress: number) {
+            // progress 是 0-100 的数字
+            console.log('progress', progress)
+          },
+          onSuccess(file: File, res: any) {
+            console.log('onSuccess', file, res)
+          },
+          onFailed(file: File, res: any) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+          },
+          onError(file: File, err: any, res: any) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+          },
+          // 自定义插入图片
+          customInsert(res: any, insertFn: InsertFnType) {
+            insertFn(res.data, 'image', res.data)
+          }
+        }
+      },
+      uploadImgShowBase64: true
+    },
+    props.editorConfig || {}
+  )
+})
+const editorStyle = computed(() => {
+  return {
+    height: isNumber(props.height) ? `${props.height}px` : props.height
+  }
+})
+
+// 回调函数
+const handleChange = (editor: IDomEditor) => {
+  emit('change', editor)
+}
+
+// 组件销毁时，及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = unref(editorRef.value)
+  if (editor === null) return
+
+  // 销毁，并移除 editor
+  editor?.destroy()
+})
+
+const getEditorRef = async (): Promise<IDomEditor> => {
+  await nextTick()
+  return unref(editorRef.value) as IDomEditor
+}
+
+defineExpose({
+  getEditorRef
+})
+</script>
+
+<template>
+  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-3000">
+    <!-- 工具栏 -->
+    <Toolbar
+      :editor="editorRef"
+      :editorId="editorId"
+      class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"
+    />
+    <!-- 编辑器 -->
+    <Editor
+      v-model="valueHtml"
+      :editorId="editorId"
+      :defaultConfig="editorConfig"
+      :style="editorStyle"
+      @on-change="handleChange"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>

src/components/Error/index.ts

@@ -0,0 +1,3 @@
+import Error from './src/Error.vue'
+
+export { Error }

src/components/Error/src/Error.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import pageError from '@/assets/svgs/404.svg'
+import networkError from '@/assets/svgs/500.svg'
+import noPermission from '@/assets/svgs/403.svg'
+import { propTypes } from '@/utils/propTypes'
+
+interface ErrorMap {
+  url: string
+  message: string
+  buttonText: string
+}
+
+const { t } = useI18n()
+
+const errorMap: {
+  [key: string]: ErrorMap
+} = {
+  '404': {
+    url: pageError,
+    message: t('error.pageError'),
+    buttonText: t('error.returnToHome')
+  },
+  '500': {
+    url: networkError,
+    message: t('error.networkError'),
+    buttonText: t('error.returnToHome')
+  },
+  '403': {
+    url: noPermission,
+    message: t('error.noPermission'),
+    buttonText: t('error.returnToHome')
+  }
+}
+
+const props = defineProps({
+  type: propTypes.string.validate((v: string) => ['404', '500', '403'].includes(v)).def('404')
+})
+
+const emit = defineEmits(['errorClick'])
+
+const btnClick = () => {
+  emit('errorClick', props.type)
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <div class="text-center">
+      <img width="350" :src="errorMap[type].url" alt="" />
+      <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
+      <div class="mt-20px">
+        <ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton>
+      </div>
+    </div>
+  </div>
+</template>

src/components/Form/index.ts

@@ -0,0 +1,15 @@
+import Form from './src/Form.vue'
+import { ElForm } from 'element-plus'
+import { FormSchema, FormSetPropsType } from '@/types/form'
+
+export interface FormExpose {
+  setValues: (data: Recordable) => void
+  setProps: (props: Recordable) => void
+  delSchema: (field: string) => void
+  addSchema: (formSchema: FormSchema, index?: number) => void
+  setSchema: (schemaProps: FormSetPropsType[]) => void
+  formModel: Recordable
+  getElFormRef: () => ComponentRef<typeof ElForm>
+}
+
+export { Form }

src/components/Form/src/Form.vue

@@ -0,0 +1,302 @@
+<script lang="tsx">
+import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
+import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
+import { componentMap } from './componentMap'
+import { propTypes } from '@/utils/propTypes'
+import { getSlot } from '@/utils/tsxHelper'
+import {
+  setTextPlaceholder,
+  setGridProp,
+  setComponentProps,
+  setItemComponentSlots,
+  initModel,
+  setFormItemSlots
+} from './helper'
+import { useRenderSelect } from './components/useRenderSelect'
+import { useRenderRadio } from './components/useRenderRadio'
+import { useRenderCheckbox } from './components/useRenderCheckbox'
+import { useDesign } from '@/hooks/web/useDesign'
+import { findIndex } from '@/utils'
+import { set } from 'lodash-es'
+import { FormProps } from './types'
+import { Icon } from '@/components/Icon'
+import { FormSchema, FormSetPropsType } from '@/types/form'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('form')
+
+export default defineComponent({
+  name: 'Form',
+  props: {
+    // 生成Form的布局结构数组
+    schema: {
+      type: Array as PropType<FormSchema[]>,
+      default: () => []
+    },
+    // 是否需要栅格布局
+    isCol: propTypes.bool.def(true),
+    // 表单数据对象
+    model: {
+      type: Object as PropType<Recordable>,
+      default: () => ({})
+    },
+    // 是否自动设置placeholder
+    autoSetPlaceholder: propTypes.bool.def(true),
+    // 是否自定义内容
+    isCustom: propTypes.bool.def(false),
+    // 表单label宽度
+    labelWidth: propTypes.oneOfType([String, Number]).def('auto')
+  },
+  emits: ['register'],
+  setup(props, { slots, expose, emit }) {
+    // element form 实例
+    const elFormRef = ref<ComponentRef<typeof ElForm>>()
+
+    // useForm传入的props
+    const outsideProps = ref<FormProps>({})
+
+    const mergeProps = ref<FormProps>({})
+
+    const getProps = computed(() => {
+      const propsObj = { ...props }
+      Object.assign(propsObj, unref(mergeProps))
+      return propsObj
+    })
+
+    // 表单数据
+    const formModel = ref<Recordable>({})
+
+    onMounted(() => {
+      emit('register', unref(elFormRef)?.$parent, unref(elFormRef))
+    })
+
+    // 对表单赋值
+    const setValues = (data: Recordable = {}) => {
+      formModel.value = Object.assign(unref(formModel), data)
+    }
+
+    const setProps = (props: FormProps = {}) => {
+      mergeProps.value = Object.assign(unref(mergeProps), props)
+      outsideProps.value = props
+    }
+
+    const delSchema = (field: string) => {
+      const { schema } = unref(getProps)
+
+      const index = findIndex(schema, (v: FormSchema) => v.field === field)
+      if (index > -1) {
+        schema.splice(index, 1)
+      }
+    }
+
+    const addSchema = (formSchema: FormSchema, index?: number) => {
+      const { schema } = unref(getProps)
+      if (index !== void 0) {
+        schema.splice(index, 0, formSchema)
+        return
+      }
+      schema.push(formSchema)
+    }
+
+    const setSchema = (schemaProps: FormSetPropsType[]) => {
+      const { schema } = unref(getProps)
+      for (const v of schema) {
+        for (const item of schemaProps) {
+          if (v.field === item.field) {
+            set(v, item.path, item.value)
+          }
+        }
+      }
+    }
+
+    const getElFormRef = (): ComponentRef<typeof ElForm> => {
+      return unref(elFormRef) as ComponentRef<typeof ElForm>
+    }
+
+    expose({
+      setValues,
+      formModel,
+      setProps,
+      delSchema,
+      addSchema,
+      setSchema,
+      getElFormRef
+    })
+
+    // 监听表单结构化数组，重新生成formModel
+    watch(
+      () => unref(getProps).schema,
+      (schema = []) => {
+        formModel.value = initModel(schema, unref(formModel))
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    // 渲染包裹标签，是否使用栅格布局
+    const renderWrap = () => {
+      const { isCol } = unref(getProps)
+      const content = isCol ? (
+        <ElRow gutter={20}>{renderFormItemWrap()}</ElRow>
+      ) : (
+        renderFormItemWrap()
+      )
+      return content
+    }
+
+    // 是否要渲染el-col
+    const renderFormItemWrap = () => {
+      // hidden属性表示隐藏，不做渲染
+      const { schema = [], isCol } = unref(getProps)
+
+      return schema
+        .filter((v) => !v.hidden)
+        .map((item) => {
+          // 如果是 Divider 组件，需要自己占用一行
+          const isDivider = item.component === 'Divider'
+          const Com = componentMap['Divider'] as ReturnType<typeof defineComponent>
+          return isDivider ? (
+            <Com {...{ contentPosition: 'left', ...item.componentProps }}>{item?.label}</Com>
+          ) : isCol ? (
+            // 如果需要栅格，需要包裹 ElCol
+            <ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol>
+          ) : (
+            renderFormItem(item)
+          )
+        })
+    }
+
+    // 渲染formItem
+    const renderFormItem = (item: FormSchema) => {
+      // 单独给只有options属性的组件做判断
+      const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
+      const slotsMap: Recordable = {
+        ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
+      }
+      if (
+        item?.component !== 'SelectV2' &&
+        item?.component !== 'Cascader' &&
+        item?.componentProps?.options
+      ) {
+        slotsMap.default = () => renderOptions(item)
+      }
+
+      const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
+      // 如果有 labelMessage，自动使用插槽渲染
+      if (item?.labelMessage) {
+        formItemSlots.label = () => {
+          return (
+            <>
+              <span>{item.label}</span>
+              <ElTooltip placement="right" raw-content>
+                {{
+                  content: () => <span v-html={item.labelMessage}></span>,
+                  default: () => (
+                    <Icon
+                      icon="ep:warning"
+                      size={16}
+                      color="var(--el-color-primary)"
+                      class="ml-2px relative top-1px"
+                    ></Icon>
+                  )
+                }}
+              </ElTooltip>
+            </>
+          )
+        }
+      }
+      return (
+        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
+          {{
+            ...formItemSlots,
+            default: () => {
+              const Com = componentMap[item.component as string] as ReturnType<
+                typeof defineComponent
+              >
+
+              const { autoSetPlaceholder } = unref(getProps)
+
+              return slots[item.field] ? (
+                getSlot(slots, item.field, formModel.value)
+              ) : (
+                <Com
+                  vModel={formModel.value[item.field]}
+                  {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  {...setComponentProps(item)}
+                  style={item.componentProps?.style}
+                  {...(notRenderOptions.includes(item?.component as string) &&
+                  item?.componentProps?.options
+                    ? { options: item?.componentProps?.options || [] }
+                    : {})}
+                >
+                  {{ ...slotsMap }}
+                </Com>
+              )
+            }
+          }}
+        </ElFormItem>
+      )
+    }
+
+    // 渲染options
+    const renderOptions = (item: FormSchema) => {
+      switch (item.component) {
+        case 'Select':
+        case 'SelectV2':
+          const { renderSelectOptions } = useRenderSelect(slots)
+          return renderSelectOptions(item)
+        case 'Radio':
+        case 'RadioButton':
+          const { renderRadioOptions } = useRenderRadio()
+          return renderRadioOptions(item)
+        case 'Checkbox':
+        case 'CheckboxButton':
+          const { renderCheckboxOptions } = useRenderCheckbox()
+          return renderCheckboxOptions(item)
+        default:
+          break
+      }
+    }
+
+    // 过滤传入Form组件的属性
+    const getFormBindValue = () => {
+      // 避免在标签上出现多余的属性
+      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
+      const props = { ...unref(getProps) }
+      for (const key in props) {
+        if (delKeys.indexOf(key) !== -1) {
+          delete props[key]
+        }
+      }
+      return props
+    }
+
+    return () => (
+      <ElForm
+        ref={elFormRef}
+        {...getFormBindValue()}
+        model={props.isCustom ? props.model : formModel}
+        class={prefixCls}
+      >
+        {{
+          // 如果需要自定义，就什么都不渲染，而是提供默认插槽
+          default: () => {
+            const { isCustom } = unref(getProps)
+            return isCustom ? getSlot(slots, 'default') : renderWrap()
+          }
+        }}
+      </ElForm>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.#{$elNamespace}-form.#{$namespace}-form .#{$elNamespace}-row {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+</style>

src/components/Form/src/componentMap.ts

@@ -0,0 +1,55 @@
+import type { Component } from 'vue'
+import {
+  ElCascader,
+  ElCheckboxGroup,
+  ElColorPicker,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElRate,
+  ElSelect,
+  ElSelectV2,
+  ElTreeSelect,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTransfer,
+  ElAutocomplete,
+  ElDivider
+} from 'element-plus'
+import { InputPassword } from '@/components/InputPassword'
+import { Editor } from '@/components/Editor'
+import { UploadImg, UploadImgs, UploadFile } from '@/components/UploadFile'
+import { ComponentName } from '@/types/components'
+
+const componentMap: Recordable<Component, ComponentName> = {
+  Radio: ElRadioGroup,
+  Checkbox: ElCheckboxGroup,
+  CheckboxButton: ElCheckboxGroup,
+  Input: ElInput,
+  Autocomplete: ElAutocomplete,
+  InputNumber: ElInputNumber,
+  Select: ElSelect,
+  Cascader: ElCascader,
+  Switch: ElSwitch,
+  Slider: ElSlider,
+  TimePicker: ElTimePicker,
+  DatePicker: ElDatePicker,
+  Rate: ElRate,
+  ColorPicker: ElColorPicker,
+  Transfer: ElTransfer,
+  Divider: ElDivider,
+  TimeSelect: ElTimeSelect,
+  SelectV2: ElSelectV2,
+  TreeSelect: ElTreeSelect,
+  RadioButton: ElRadioGroup,
+  InputPassword: InputPassword,
+  Editor: Editor,
+  UploadImg: UploadImg,
+  UploadImgs: UploadImgs,
+  UploadFile: UploadFile
+}
+
+export { componentMap }

src/components/Form/src/components/useRenderCheckbox.tsx

@@ -0,0 +1,26 @@
+import { FormSchema } from '@/types/form'
+import { ElCheckbox, ElCheckboxButton } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export const useRenderCheckbox = () => {
+  const renderCheckboxOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType<
+      typeof defineComponent
+    >
+    return item?.componentProps?.options?.map((option) => {
+      const { ...other } = option
+      return (
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
+        </Com>
+      )
+    })
+  }
+
+  return {
+    renderCheckboxOptions
+  }
+}

src/components/Form/src/components/useRenderRadio.tsx

@@ -0,0 +1,26 @@
+import { FormSchema } from '@/types/form'
+import { ElRadio, ElRadioButton } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export const useRenderRadio = () => {
+  const renderRadioOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+    const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType<
+      typeof defineComponent
+    >
+    return item?.componentProps?.options?.map((option) => {
+      const { ...other } = option
+      return (
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
+        </Com>
+      )
+    })
+  }
+
+  return {
+    renderRadioOptions
+  }
+}

src/components/Form/src/components/useRenderSelect.tsx

@@ -0,0 +1,57 @@
+import { FormSchema } from '@/types/form'
+import { ComponentOptions } from '@/types/components'
+import { ElOption, ElOptionGroup } from 'element-plus'
+import { getSlot } from '@/utils/tsxHelper'
+import { Slots } from 'vue'
+
+export const useRenderSelect = (slots: Slots) => {
+  // 渲染 select options
+  const renderSelectOptions = (item: FormSchema) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    return item?.componentProps?.options?.map((option) => {
+      if (option?.options?.length) {
+        return (
+          <ElOptionGroup label={option[labelAlias || 'label']}>
+            {() => {
+              return option?.options?.map((v) => {
+                return renderSelectOptionItem(item, v)
+              })
+            }}
+          </ElOptionGroup>
+        )
+      } else {
+        return renderSelectOptionItem(item, option)
+      }
+    })
+  }
+
+  // 渲染 select option item
+  const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => {
+    // 如果有别名，就取别名
+    const labelAlias = item?.componentProps?.optionsAlias?.labelField
+    const valueAlias = item?.componentProps?.optionsAlias?.valueField
+
+    const { label, value, ...other } = option
+
+    return (
+      <ElOption
+        {...other}
+        label={labelAlias ? option[labelAlias] : label}
+        value={valueAlias ? option[valueAlias] : value}
+      >
+        {{
+          default: () =>
+            // option 插槽名规则，{field}-option
+            item?.componentProps?.optionsSlot
+              ? getSlot(slots, `${item.field}-option`, { item: option })
+              : undefined
+        }}
+      </ElOption>
+    )
+  }
+
+  return {
+    renderSelectOptions
+  }
+}

src/components/Form/src/helper.ts

@@ -0,0 +1,148 @@
+import type { Slots } from 'vue'
+import { getSlot } from '@/utils/tsxHelper'
+import { PlaceholderMoel } from './types'
+import { FormSchema } from '@/types/form'
+import { ColProps } from '@/types/components'
+
+/**
+ *
+ * @param schema 对应组件数据
+ * @returns 返回提示信息对象
+ * @description 用于自动设置placeholder
+ */
+export const setTextPlaceholder = (schema: FormSchema): PlaceholderMoel => {
+  const { t } = useI18n()
+  const textMap = ['Input', 'Autocomplete', 'InputNumber', 'InputPassword']
+  const selectMap = ['Select', 'SelectV2', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
+  if (textMap.includes(schema?.component as string)) {
+    return {
+      placeholder: t('common.inputText')
+    }
+  }
+  if (selectMap.includes(schema?.component as string)) {
+    // 一些范围选择器
+    const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
+    if (
+      twoTextMap.includes(
+        (schema?.componentProps?.type || schema?.componentProps?.isRange) as string
+      )
+    ) {
+      return {
+        startPlaceholder: t('common.startTimeText'),
+        endPlaceholder: t('common.endTimeText'),
+        rangeSeparator: '-'
+      }
+    } else {
+      return {
+        placeholder: t('common.selectText')
+      }
+    }
+  }
+  return {}
+}
+
+/**
+ *
+ * @param col 内置栅格
+ * @returns 返回栅格属性
+ * @description 合并传入进来的栅格属性
+ */
+export const setGridProp = (col: ColProps = {}): ColProps => {
+  const colProps: ColProps = {
+    // 如果有span，代表用户优先级更高，所以不需要默认栅格
+    ...(col.span
+      ? {}
+      : {
+          xs: 24,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12
+        }),
+    ...col
+  }
+  return colProps
+}
+
+/**
+ *
+ * @param item 传入的组件属性
+ * @returns 默认添加 clearable 属性
+ */
+export const setComponentProps = (item: FormSchema): Recordable => {
+  const notNeedClearable = ['ColorPicker']
+  const componentProps: Recordable = notNeedClearable.includes(item.component as string)
+    ? { ...item.componentProps }
+    : {
+        clearable: true,
+        ...item.componentProps
+      }
+  // 需要删除额外的属性
+  delete componentProps?.slots
+  return componentProps
+}
+
+/**
+ *
+ * @param slots 插槽
+ * @param slotsProps 插槽属性
+ * @param field 字段名
+ */
+export const setItemComponentSlots = (
+  slots: Slots,
+  slotsProps: Recordable = {},
+  field: string
+): Recordable => {
+  const slotObj: Recordable = {}
+  for (const key in slotsProps) {
+    if (slotsProps[key]) {
+      // 由于组件有可能重复，需要有一个唯一的前缀
+      slotObj[key] = (data: Recordable) => {
+        return getSlot(slots, `${field}-${key}`, data)
+      }
+    }
+  }
+  return slotObj
+}
+
+/**
+ *
+ * @param schema Form表单结构化数组
+ * @param formModel FormMoel
+ * @returns FormMoel
+ * @description 生成对应的formModel
+ */
+export const initModel = (schema: FormSchema[], formModel: Recordable) => {
+  const model: Recordable = { ...formModel }
+  schema.map((v) => {
+    // 如果是hidden，就删除对应的值
+    if (v.hidden) {
+      delete model[v.field]
+    } else if (v.component && v.component !== 'Divider') {
+      const hasField = Reflect.has(model, v.field)
+      // 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
+      model[v.field] = hasField ? model[v.field] : v.value !== void 0 ? v.value : ''
+    }
+  })
+  return model
+}
+
+/**
+ * @param slots 插槽
+ * @param field 字段名
+ * @returns 返回FormIiem插槽
+ */
+export const setFormItemSlots = (slots: Slots, field: string): Recordable => {
+  const slotObj: Recordable = {}
+  if (slots[`${field}-error`]) {
+    slotObj['error'] = (data: Recordable) => {
+      return getSlot(slots, `${field}-error`, data)
+    }
+  }
+  if (slots[`${field}-label`]) {
+    slotObj['label'] = (data: Recordable) => {
+      return getSlot(slots, `${field}-label`, data)
+    }
+  }
+  return slotObj
+}

src/components/Form/src/types.ts

@@ -0,0 +1,17 @@
+import { FormSchema } from '@/types/form'
+
+export interface PlaceholderMoel {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  rangeSeparator?: string
+}
+
+export type FormProps = {
+  schema?: FormSchema[]
+  isCol?: boolean
+  model?: Recordable
+  autoSetPlaceholder?: boolean
+  isCustom?: boolean
+  labelWidth?: string | number
+} & Recordable

src/components/Highlight/index.ts

@@ -0,0 +1,3 @@
+import Highlight from './src/Highlight.vue'
+
+export { Highlight }

src/components/Highlight/src/Highlight.vue

@@ -0,0 +1,65 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, h, unref } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+export default defineComponent({
+  name: 'Highlight',
+  props: {
+    tag: propTypes.string.def('span'),
+    keys: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    color: propTypes.string.def('var(--el-color-primary)')
+  },
+  emits: ['click'],
+  setup(props, { emit, slots }) {
+    const keyNodes = computed(() => {
+      return props.keys.map((key) => {
+        return h(
+          'span',
+          {
+            onClick: () => {
+              emit('click', key)
+            },
+            style: {
+              color: props.color,
+              cursor: 'pointer'
+            }
+          },
+          key
+        )
+      })
+    })
+
+    const parseText = (text: string) => {
+      props.keys.forEach((key, index) => {
+        const regexp = new RegExp(key, 'g')
+        text = text.replace(regexp, `{{${index}}}`)
+      })
+      return text.split(/{{|}}/)
+    }
+
+    const renderText = () => {
+      if (!slots?.default) return null
+      const node = slots?.default()[0].children
+
+      if (!node) {
+        return slots?.default()[0]
+      }
+
+      const textArray = parseText(node as string)
+      const regexp = /^[0-9]*$/
+      const nodes = textArray.map((t) => {
+        if (regexp.test(t)) {
+          return unref(keyNodes)[t] || t
+        }
+        return t
+      })
+      return h(props.tag, nodes)
+    }
+
+    return () => renderText()
+  }
+})
+</script>

src/components/IFrame/index.ts

@@ -0,0 +1,3 @@
+import IFrame from './src/IFrame.vue'
+
+export { IFrame }

src/components/IFrame/src/IFrame.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  src: propTypes.string.def('')
+})
+const loading = ref(true)
+const height = ref('')
+const frameRef = ref<HTMLElement | null>(null)
+const init = () => {
+  height.value = document.documentElement.clientHeight - 94.5 + 'px'
+  loading.value = false
+}
+onMounted(() => {
+  setTimeout(() => {
+    init()
+  }, 300)
+})
+</script>
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe
+      :src="props.src"
+      style="width: 100%; height: 100%"
+      frameborder="no"
+      scrolling="auto"
+      ref="frameRef"
+    ></iframe>
+  </div>
+</template>

src/components/Icon/index.ts

@@ -0,0 +1,4 @@
+import Icon from './src/Icon.vue'
+import IconSelect from './src/IconSelect.vue'
+
+export { Icon, IconSelect }

src/components/Icon/src/Icon.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import Iconify from '@purge-icons/generated'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('icon')
+
+const props = defineProps({
+  // icon name
+  icon: propTypes.string,
+  // icon color
+  color: propTypes.string,
+  // icon size
+  size: propTypes.number.def(16),
+  // icon svg class
+  svgClass: propTypes.string.def('')
+})
+
+const elRef = ref<ElRef>(null)
+
+const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
+
+const symbolId = computed(() => {
+  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
+})
+
+const getIconifyStyle = computed(() => {
+  const { color, size } = props
+  return {
+    fontSize: `${size}px`,
+    color
+  }
+})
+
+const getSvgClass = computed(() => {
+  const { svgClass } = props
+  return `iconify ${svgClass}`
+})
+
+const updateIcon = async (icon: string) => {
+  if (unref(isLocal)) return
+
+  const el = unref(elRef)
+  if (!el) return
+
+  await nextTick()
+
+  if (!icon) return
+
+  const svg = Iconify.renderSVG(icon, {})
+  if (svg) {
+    el.textContent = ''
+    el.appendChild(svg)
+  } else {
+    const span = document.createElement('span')
+    span.className = 'iconify'
+    span.dataset.icon = icon
+    el.textContent = ''
+    el.appendChild(span)
+  }
+}
+
+watch(
+  () => props.icon,
+  (icon: string) => {
+    updateIcon(icon)
+  }
+)
+</script>
+
+<template>
+  <ElIcon :class="prefixCls" :color="color" :size="size">
+    <svg v-if="isLocal" aria-hidden="true" :class="getSvgClass">
+      <use :xlink:href="symbolId" />
+    </svg>
+
+    <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
+      <span :class="getSvgClass" :data-icon="symbolId"></span>
+    </span>
+  </ElIcon>
+</template>

src/components/Icon/src/IconSelect.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { CSSProperties } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { IconJson } from '@/components/Icon/src/data'
+
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined
+
+const props = defineProps({
+  modelValue: {
+    require: false,
+    type: String
+  }
+})
+const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
+
+const visible = ref(false)
+const inputValue = toRef(props, 'modelValue')
+const iconList = ref(IconJson)
+const icon = ref('add-location')
+const currentActiveType = ref('ep:')
+// 深拷贝图标数据，前端做搜索
+const copyIconList = cloneDeep(iconList.value)
+
+const pageSize = ref(96)
+const currentPage = ref(1)
+
+// 搜索条件
+const filterValue = ref('')
+
+const tabsList = [
+  {
+    label: 'Element Plus',
+    name: 'ep:'
+  },
+  {
+    label: 'Font Awesome 4',
+    name: 'fa:'
+  },
+  {
+    label: 'Font Awesome 5 Solid',
+    name: 'fa-solid:'
+  }
+]
+
+const pageList = computed(() => {
+  if (currentPage.value === 1) {
+    return copyIconList[currentActiveType.value]
+      .filter((v) => v.includes(filterValue.value))
+      .slice(currentPage.value - 1, pageSize.value)
+  } else {
+    return copyIconList[currentActiveType.value]
+      .filter((v) => v.includes(filterValue.value))
+      .slice(
+        pageSize.value * (currentPage.value - 1),
+        pageSize.value * (currentPage.value - 1) + pageSize.value
+      )
+  }
+})
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return (item) => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: 'var(--el-color-primary)',
+        color: 'var(--el-color-primary)'
+      }
+    }
+  }
+})
+
+function handleClick({ props }) {
+  currentPage.value = 1
+  currentActiveType.value = props.name
+  emit('update:modelValue', currentActiveType.value + iconList.value[currentActiveType.value][0])
+  icon.value = iconList.value[currentActiveType.value][0]
+}
+
+function onChangeIcon(item) {
+  icon.value = item
+  emit('update:modelValue', currentActiveType.value + item)
+  visible.value = false
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page
+}
+
+watch(
+  () => {
+    return props.modelValue
+  },
+  () => {
+    if (props.modelValue) {
+      currentActiveType.value = props.modelValue.substring(0, props.modelValue.indexOf(':') + 1)
+      icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1)
+    }
+  }
+)
+watch(
+  () => {
+    return filterValue.value
+  },
+  () => {
+    currentPage.value = 1
+  }
+)
+</script>
+
+<template>
+  <div class="selector">
+    <ElInput v-model="inputValue" @click="visible = !visible">
+      <template #append>
+        <ElPopover
+          :width="350"
+          trigger="click"
+          popper-class="pure-popper"
+          :popper-options="{
+            placement: 'auto'
+          }"
+          :visible="visible"
+        >
+          <template #reference>
+            <div
+              class="w-40px h-32px cursor-pointer flex justify-center items-center"
+              @click="visible = !visible"
+            >
+              <Icon :icon="currentActiveType + icon" />
+            </div>
+          </template>
+
+          <ElInput class="p-2" v-model="filterValue" placeholder="搜索图标" clearable />
+          <ElDivider border-style="dashed" />
+
+          <ElTabs v-model="currentActiveType" @tab-click="handleClick">
+            <ElTabPane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <ElDivider class="tab-divider" border-style="dashed" />
+              <ElScrollbar height="220px">
+                <ul class="flex flex-wrap px-2 ml-2">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :title="item"
+                    class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    :style="iconItemStyle(item)"
+                    @click="onChangeIcon(item)"
+                  >
+                    <Icon :icon="currentActiveType + item" />
+                  </li>
+                </ul>
+              </ElScrollbar>
+            </ElTabPane>
+          </ElTabs>
+          <ElDivider border-style="dashed" />
+
+          <ElPagination
+            small
+            :total="copyIconList[currentActiveType].length as unknown as number"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            background
+            layout="prev, pager, next"
+            class="flex items-center justify-center h-10"
+            @current-change="onCurrentChange"
+          />
+        </ElPopover>
+      </template>
+    </ElInput>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  margin: 1px auto !important;
+}
+
+.tab-divider.el-divider--horizontal {
+  margin: 0 !important;
+}
+
+.icon-item {
+  &:hover {
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+    transition: all 0.4s;
+    transform: scaleX(1.05);
+  }
+}
+
+:deep(.el-tabs__nav-next) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: -5px 0 5px -6px #ccc;
+}
+
+:deep(.el-tabs__nav-prev) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: 5px 0 5px -6px #ccc;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+:deep(.el-tabs__item) {
+  font-size: 12px;
+  font-weight: normal;
+  height: 30px;
+  line-height: 30px;
+}
+
+:deep(.el-tabs__header),
+:deep(.el-tabs__nav-wrap) {
+  margin: 0;
+  position: static;
+}
+</style>

src/components/ImageViewer/index.ts

@@ -0,0 +1,33 @@
+import ImageViewer from './src/ImageViewer.vue'
+import { isClient } from '@/utils/is'
+import { createVNode, render, VNode } from 'vue'
+import { ImageViewerProps } from './src/types'
+
+let instance: Nullable<VNode> = null
+
+export function createImageViewer(options: ImageViewerProps) {
+  if (!isClient) return
+  const {
+    urlList,
+    initialIndex = 0,
+    infinite = true,
+    hideOnClickModal = false,
+    appendToBody = false,
+    zIndex = 2000,
+    show = true
+  } = options
+
+  const propsData: Partial<ImageViewerProps> = {}
+  const container = document.createElement('div')
+  propsData.urlList = urlList
+  propsData.initialIndex = initialIndex
+  propsData.infinite = infinite
+  propsData.hideOnClickModal = hideOnClickModal
+  propsData.appendToBody = appendToBody
+  propsData.zIndex = zIndex
+  propsData.show = show
+
+  document.body.appendChild(container)
+  instance = createVNode(ImageViewer, propsData)
+  render(instance, container)
+}

src/components/ImageViewer/src/ImageViewer.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  urlList: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => []
+  },
+  zIndex: propTypes.number.def(200),
+  initialIndex: propTypes.number.def(0),
+  infinite: propTypes.bool.def(true),
+  hideOnClickModal: propTypes.bool.def(false),
+  appendToBody: propTypes.bool.def(false),
+  show: propTypes.bool.def(false)
+})
+
+const getBindValue = computed(() => {
+  const propsData: Recordable = { ...props }
+  delete propsData.show
+  return propsData
+})
+
+const show = ref(props.show)
+
+const close = () => {
+  show.value = false
+}
+</script>
+
+<template>
+  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" />
+</template>

src/components/ImageViewer/src/types.ts

@@ -0,0 +1,9 @@
+export interface ImageViewerProps {
+  urlList?: string[]
+  zIndex?: number
+  initialIndex?: number
+  infinite?: boolean
+  hideOnClickModal?: boolean
+  appendToBody?: boolean
+  show?: boolean
+}

src/components/Infotip/index.ts

@@ -0,0 +1,3 @@
+import Infotip from './src/Infotip.vue'
+
+export { Infotip }

src/components/Infotip/src/Infotip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { TipSchema } from '@/types/infoTip'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('infotip')
+
+defineProps({
+  title: propTypes.string.def(''),
+  schema: {
+    type: Array as PropType<Array<string | TipSchema>>,
+    required: true,
+    default: () => []
+  },
+  showIndex: propTypes.bool.def(true),
+  highlightColor: propTypes.string.def('var(--el-color-primary)')
+})
+
+const emit = defineEmits(['click'])
+
+const keyClick = (key: string) => {
+  emit('click', key)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]'
+    ]"
+  >
+    <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
+      <Icon icon="ep:warning-filled" :size="22" color="var(--el-color-primary)" />
+      <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span>
+    </div>
+    <div :class="`${prefixCls}__content`">
+      <p v-for="(item, $index) in schema" :key="$index" class="text-14px mt-15px">
+        <Highlight
+          :keys="typeof item === 'string' ? [] : item.keys"
+          :color="highlightColor"
+          @click="keyClick"
+        >
+          {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
+        </Highlight>
+      </p>
+    </div>
+  </div>
+</template>

src/components/InputPassword/index.ts

@@ -0,0 +1,3 @@
+import InputPassword from './src/InputPassword.vue'
+
+export { InputPassword }

src/components/InputPassword/src/InputPassword.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
+import { zxcvbn } from '@zxcvbn-ts/core'
+import type { ZxcvbnResult } from '@zxcvbn-ts/core'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('input-password')
+
+const props = defineProps({
+  // 是否显示密码强度
+  strength: propTypes.bool.def(false),
+  modelValue: propTypes.string.def('')
+})
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueRef)) return
+    valueRef.value = val
+  }
+)
+
+const { configGlobal } = useConfigGlobal()
+
+const emit = defineEmits(['update:modelValue'])
+
+// 设置input的type属性
+const textType = ref<'password' | 'text'>('password')
+
+const changeTextType = () => {
+  textType.value = unref(textType) === 'text' ? 'password' : 'text'
+}
+
+// 输入框的值
+const valueRef = ref(props.modelValue)
+
+// 监听
+watch(
+  () => valueRef.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+
+// 获取密码强度
+const getPasswordStrength = computed(() => {
+  const value = unref(valueRef)
+  const zxcvbnRef = zxcvbn(unref(valueRef)) as ZxcvbnResult
+  return value ? zxcvbnRef.score : -1
+})
+
+const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' : 'ep:view'))
+</script>
+
+<template>
+  <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
+    <ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
+      <template #suffix>
+        <Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
+      </template>
+    </ElInput>
+    <div
+      v-if="strength"
+      :class="`${prefixCls}__bar`"
+      class="relative h-6px mt-10px mb-6px mr-auto ml-auto"
+    >
+      <div :class="`${prefixCls}__bar--fill`" :data-score="getPasswordStrength"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-input-password;
+
+.#{$prefix-cls} {
+  :deep(.#{$elNamespace}-input__clear) {
+    margin-left: 5px;
+  }
+
+  &__bar {
+    background-color: var(--el-text-color-disabled);
+    border-radius: var(--el-border-radius-base);
+
+    &::before,
+    &::after {
+      position: absolute;
+      z-index: 10;
+      display: block;
+      width: 20%;
+      height: inherit;
+      background-color: transparent;
+      border-color: var(--el-color-white);
+      border-style: solid;
+      border-width: 0 5px 0 5px;
+      content: '';
+    }
+
+    &::before {
+      left: 20%;
+    }
+
+    &::after {
+      right: 20%;
+    }
+
+    &--fill {
+      position: absolute;
+      width: 0;
+      height: inherit;
+      background-color: transparent;
+      border-radius: inherit;
+      transition: width 0.5s ease-in-out, background 0.25s;
+
+      &[data-score='0'] {
+        width: 20%;
+        background-color: var(--el-color-danger);
+      }
+
+      &[data-score='1'] {
+        width: 40%;
+        background-color: var(--el-color-danger);
+      }
+
+      &[data-score='2'] {
+        width: 60%;
+        background-color: var(--el-color-warning);
+      }
+
+      &[data-score='3'] {
+        width: 80%;
+        background-color: var(--el-color-success);
+      }
+
+      &[data-score='4'] {
+        width: 100%;
+        background-color: var(--el-color-success);
+      }
+    }
+  }
+
+  &--mini > &__bar {
+    border-radius: var(--el-border-radius-small);
+  }
+}
+</style>

src/components/Qrcode/index.ts

@@ -0,0 +1,3 @@
+import Qrcode from './src/Qrcode.vue'
+
+export { Qrcode }

src/components/Qrcode/src/Qrcode.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { PropType, nextTick, ref, watch, computed, unref } from 'vue'
+import QRCode from 'qrcode'
+import { QRCodeRenderersOptions } from 'qrcode'
+import { cloneDeep } from 'lodash-es'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { isString } from '@/utils/is'
+import { QrcodeLogo } from '@/types/qrcode'
+
+const props = defineProps({
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string.validate((v: string) => ['canvas', 'img'].includes(v)).def('canvas'),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: () => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: ''
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def('')
+})
+
+const emit = defineEmits(['done', 'click', 'disabled-click'])
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('qrcode')
+
+const { toCanvas, toDataURL } = QRCode
+
+const loading = ref(true)
+
+const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null)
+
+const renderText = computed(() => String(props.text))
+
+const wrapStyle = computed(() => {
+  return {
+    width: props.width + 'px',
+    height: props.width + 'px'
+  }
+})
+
+const initQrcode = async () => {
+  await nextTick()
+  const options = cloneDeep(props.options || {})
+  if (props.tag === 'canvas') {
+    // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+    options.errorCorrectionLevel =
+      options.errorCorrectionLevel || getErrorCorrectionLevel(unref(renderText))
+    const _width: number = await getOriginWidth(unref(renderText), options)
+    options.scale = props.width === 0 ? undefined : (props.width / _width) * 4
+    const canvasRef: HTMLCanvasElement | any = await toCanvas(
+      unref(wrapRef) as HTMLCanvasElement,
+      unref(renderText),
+      options
+    )
+    if (props.logo) {
+      const url = await createLogoCode(canvasRef)
+      emit('done', url)
+      loading.value = false
+    } else {
+      emit('done', canvasRef.toDataURL())
+      loading.value = false
+    }
+  } else {
+    const url = await toDataURL(renderText.value, {
+      errorCorrectionLevel: 'H',
+      width: props.width,
+      ...options
+    })
+    ;(unref(wrapRef) as HTMLImageElement).src = url
+    emit('done', url)
+    loading.value = false
+  }
+}
+
+watch(
+  () => renderText.value,
+  (val) => {
+    if (!val) return
+    initQrcode()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+  const canvasWidth = canvasRef.width
+  const logoOptions: QrcodeLogo = Object.assign(
+    {
+      logoSize: 0.15,
+      bgColor: '#ffffff',
+      borderSize: 0.05,
+      crossOrigin: 'anonymous',
+      borderRadius: 8,
+      logoRadius: 0
+    },
+    isString(props.logo) ? {} : props.logo
+  )
+  const {
+    logoSize = 0.15,
+    bgColor = '#ffffff',
+    borderSize = 0.05,
+    crossOrigin = 'anonymous',
+    borderRadius = 8,
+    logoRadius = 0
+  } = logoOptions
+  const logoSrc = isString(props.logo) ? props.logo : props.logo.src
+  const logoWidth = canvasWidth * logoSize
+  const logoXY = (canvasWidth * (1 - logoSize)) / 2
+  const logoBgWidth = canvasWidth * (logoSize + borderSize)
+  const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2
+
+  const ctx = canvasRef.getContext('2d')
+  if (!ctx) return
+
+  // logo 底色
+  canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius)
+  ctx.fillStyle = bgColor
+  ctx.fill()
+
+  // logo
+  const image = new Image()
+  if (crossOrigin || logoRadius) {
+    image.setAttribute('crossOrigin', crossOrigin)
+  }
+  ;(image as any).src = logoSrc
+
+  // 使用image绘制可以避免某些跨域情况
+  const drawLogoWithImage = (image: HTMLImageElement) => {
+    ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth)
+  }
+
+  // 使用canvas绘制以获得更多的功能
+  const drawLogoWithCanvas = (image: HTMLImageElement) => {
+    const canvasImage = document.createElement('canvas')
+    canvasImage.width = logoXY + logoWidth
+    canvasImage.height = logoXY + logoWidth
+    const imageCanvas = canvasImage.getContext('2d')
+    if (!imageCanvas || !ctx) return
+    imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth)
+
+    canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius)
+    if (!ctx) return
+    const fillStyle = ctx.createPattern(canvasImage, 'no-repeat')
+    if (fillStyle) {
+      ctx.fillStyle = fillStyle
+      ctx.fill()
+    }
+  }
+
+  // 将 logo绘制到 canvas上
+  return new Promise((resolve: any) => {
+    image.onload = () => {
+      logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image)
+      resolve(canvasRef.toDataURL())
+    }
+  })
+}
+
+// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+const getOriginWidth = async (content: string, options: QRCodeRenderersOptions) => {
+  const _canvas = document.createElement('canvas')
+  await toCanvas(_canvas, content, options)
+  return _canvas.width
+}
+
+// 对于内容少的QrCode，增大容错率
+const getErrorCorrectionLevel = (content: string) => {
+  if (content.length > 36) {
+    return 'M'
+  } else if (content.length > 16) {
+    return 'Q'
+  } else {
+    return 'H'
+  }
+}
+
+// copy来的方法，用于绘制圆角
+const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+  return (x: number, y: number, w: number, h: number, r: number) => {
+    const minSize = Math.min(w, h)
+    if (r > minSize / 2) {
+      r = minSize / 2
+    }
+    ctx.beginPath()
+    ctx.moveTo(x + r, y)
+    ctx.arcTo(x + w, y, x + w, y + h, r)
+    ctx.arcTo(x + w, y + h, x, y + h, r)
+    ctx.arcTo(x, y + h, x, y, r)
+    ctx.arcTo(x, y, x + w, y, r)
+    ctx.closePath()
+    return ctx
+  }
+}
+
+const clickCode = () => {
+  emit('click')
+}
+
+const disabledClick = () => {
+  emit('disabled-click')
+}
+</script>
+
+<template>
+  <div v-loading="loading" :class="[prefixCls, 'relative inline-block']" :style="wrapStyle">
+    <component :is="tag" ref="wrapRef" @click="clickCode" />
+    <div
+      v-if="disabled"
+      :class="`${prefixCls}--disabled`"
+      class="absolute top-0 left-0 flex w-full h-full items-center justify-center"
+      @click="disabledClick"
+    >
+      <div class="absolute top-[50%] left-[50%] font-bold">
+        <Icon icon="ep:refresh-right" :size="30" color="var(--el-color-primary)" />
+        <div>{{ disabledText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-qrcode;
+
+.#{$prefix-cls} {
+  &--disabled {
+    background: rgba(255, 255, 255, 0.95);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

src/components/Search/index.ts

@@ -0,0 +1,3 @@
+import Search from './src/Search.vue'
+
+export { Search }

src/components/Search/src/Search.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+import { useForm } from '@/hooks/web/useForm'
+import { findIndex } from '@/utils'
+import { cloneDeep } from 'lodash-es'
+import { FormSchema } from '@/types/form'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  // 生成Form的布局结构数组
+  schema: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
+  },
+  // 是否需要栅格布局
+  isCol: propTypes.bool.def(false),
+  // 表单label宽度
+  labelWidth: propTypes.oneOfType([String, Number]).def('auto'),
+  // 操作按钮风格位置
+  layout: propTypes.string.validate((v: string) => ['inline', 'bottom'].includes(v)).def('inline'),
+  // 底部按钮的对齐方式
+  buttomPosition: propTypes.string
+    .validate((v: string) => ['left', 'center', 'right'].includes(v))
+    .def('center'),
+  showSearch: propTypes.bool.def(true),
+  showReset: propTypes.bool.def(true),
+  // 是否显示伸缩
+  expand: propTypes.bool.def(false),
+  // 伸缩的界限字段
+  expandField: propTypes.string.def(''),
+  inline: propTypes.bool.def(true),
+  model: {
+    type: Object as PropType<Recordable>,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['search', 'reset'])
+
+const visible = ref(true)
+
+const newSchema = computed(() => {
+  let schema: FormSchema[] = cloneDeep(props.schema)
+  if (props.expand && props.expandField && !unref(visible)) {
+    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+    if (index > -1) {
+      const length = schema.length
+      schema.splice(index + 1, length)
+    }
+  }
+  if (props.layout === 'inline') {
+    schema = schema.concat([
+      {
+        field: 'action',
+        formItemProps: {
+          labelWidth: '0px'
+        }
+      }
+    ])
+  }
+  return schema
+})
+
+const { register, elFormRef, methods } = useForm({
+  model: props.model || {}
+})
+
+const search = async () => {
+  await unref(elFormRef)?.validate(async (isValid) => {
+    if (isValid) {
+      const { getFormData } = methods
+      const model = await getFormData()
+      emit('search', model)
+    }
+  })
+}
+
+const reset = async () => {
+  unref(elFormRef)?.resetFields()
+  const { getFormData } = methods
+  const model = await getFormData()
+  emit('reset', model)
+}
+
+const bottonButtonStyle = computed(() => {
+  return {
+    textAlign: props.buttomPosition as unknown as 'left' | 'center' | 'right'
+  }
+})
+
+const setVisible = () => {
+  unref(elFormRef)?.resetFields()
+  visible.value = !unref(visible)
+}
+</script>
+
+<template>
+  <Form
+    :is-custom="false"
+    :label-width="labelWidth"
+    hide-required-asterisk
+    :inline="inline"
+    :is-col="isCol"
+    :schema="newSchema"
+    @register="register"
+  >
+    <template #action>
+      <div v-if="layout === 'inline'">
+        <ElButton v-if="showSearch" type="primary" @click="search">
+          <Icon icon="ep:search" class="mr-5px" />
+          {{ t('common.query') }}
+        </ElButton>
+        <ElButton v-if="showReset" @click="reset">
+          <Icon icon="ep:refresh-right" class="mr-5px" />
+          {{ t('common.reset') }}
+        </ElButton>
+        <ElButton v-if="expand" text @click="setVisible">
+          {{ t(visible ? 'common.shrink' : 'common.expand') }}
+          <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
+        </ElButton>
+      </div>
+    </template>
+  </Form>
+
+  <template v-if="layout === 'bottom'">
+    <div :style="bottonButtonStyle">
+      <ElButton v-if="showSearch" type="primary" @click="search">
+        <Icon icon="ep:search" class="mr-5px" />
+        {{ t('common.query') }}
+      </ElButton>
+      <ElButton v-if="showReset" @click="reset">
+        <Icon icon="ep:refresh-right" class="mr-5px" />
+        {{ t('common.reset') }}
+      </ElButton>
+      <ElButton v-if="expand" text @click="setVisible">
+        {{ t(visible ? 'common.shrink' : 'common.expand') }}
+        <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
+      </ElButton>
+    </div>
+  </template>
+</template>

src/components/Sticky/index.ts

@@ -0,0 +1,3 @@
+import Sticky from './src/Sticky.vue'
+
+export { Sticky }

src/components/Sticky/src/Sticky.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { isClient, useEventListener, useWindowSize } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
+const props = defineProps({
+  // 距离顶部或者底部的距离(单位px)
+  offset: propTypes.number.def(0),
+  // 设置元素的堆叠顺序
+  zIndex: propTypes.number.def(999),
+  // 设置指定的class
+  className: propTypes.string.def(''),
+  // 定位方式，默认为(top)，表示距离顶部位置，可以设置为top或者bottom
+  position: {
+    type: String,
+    validator: function (value: string) {
+      return ['top', 'bottom'].indexOf(value) !== -1
+    },
+    default: 'top'
+  }
+})
+const width = ref('auto' as string)
+const height = ref('auto' as string)
+const isSticky = ref(false)
+const refSticky = shallowRef<HTMLElement>()
+const scrollContainer = shallowRef<HTMLElement | Window>()
+const { height: windowHeight } = useWindowSize()
+onMounted(() => {
+  height.value = refSticky.value?.getBoundingClientRect().height + 'px'
+
+  scrollContainer.value = getScrollContainer(refSticky.value!, true)
+  useEventListener(scrollContainer, 'scroll', handleScroll)
+  useEventListener('resize', handleReize)
+  handleScroll()
+})
+onActivated(() => {
+  handleScroll()
+})
+
+const camelize = (str: string): string => {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+const getStyle = (element: HTMLElement, styleName: keyof CSSProperties): string => {
+  if (!isClient || !element || !styleName) return ''
+
+  let key = camelize(styleName)
+  if (key === 'float') key = 'cssFloat'
+  try {
+    const style = element.style[styleName]
+    if (style) return style
+    const computed = document.defaultView?.getComputedStyle(element, '')
+    return computed ? computed[styleName] : ''
+  } catch {
+    return element.style[styleName]
+  }
+}
+const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
+  if (!isClient) return false
+  const key = (
+    {
+      undefined: 'overflow',
+      true: 'overflow-y',
+      false: 'overflow-x'
+    } as const
+  )[String(isVertical)]!
+  const overflow = getStyle(el, key)
+  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
+}
+
+const getScrollContainer = (
+  el: HTMLElement,
+  isVertical: boolean
+): Window | HTMLElement | undefined => {
+  if (!isClient) return
+  let parent = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) return window
+    if (isScroll(parent, isVertical)) return parent
+    parent = parent.parentNode as HTMLElement
+  }
+  return parent
+}
+
+const handleScroll = () => {
+  width.value = refSticky.value!.getBoundingClientRect().width! + 'px'
+  if (props.position === 'top') {
+    const offsetTop = refSticky.value?.getBoundingClientRect().top
+    if (offsetTop !== undefined && offsetTop < props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  } else {
+    const offsetBottom = refSticky.value?.getBoundingClientRect().bottom
+
+    if (offsetBottom !== undefined && offsetBottom > windowHeight.value - props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  }
+}
+const handleReize = () => {
+  if (isSticky.value && refSticky.value) {
+    width.value = refSticky.value.getBoundingClientRect().width + 'px'
+  }
+}
+const sticky = () => {
+  if (isSticky.value) {
+    return
+  }
+  isSticky.value = true
+}
+const reset = () => {
+  if (!isSticky.value) {
+    return
+  }
+  width.value = 'auto'
+  isSticky.value = false
+}
+</script>
+<template>
+  <div :style="{ height: height, zIndex: zIndex }" ref="refSticky">
+    <div
+      :class="className"
+      :style="{
+        top: position === 'top' ? offset + 'px' : '',
+        bottom: position !== 'top' ? offset + 'px' : '',
+        zIndex: zIndex,
+        position: isSticky ? 'fixed' : 'static',
+        width: width,
+        height: height
+      }"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>

src/components/Table/index.ts

@@ -0,0 +1,12 @@
+import Table from './src/Table.vue'
+import { ElTable } from 'element-plus'
+import { TableSetPropsType } from '@/types/table'
+
+export interface TableExpose {
+  setProps: (props: Recordable) => void
+  setColumn: (columnProps: TableSetPropsType[]) => void
+  selections: Recordable[]
+  elTableRef: ComponentRef<typeof ElTable>
+}
+
+export { Table }

src/components/Table/src/Table.vue

@@ -0,0 +1,307 @@
+<script lang="tsx">
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { setIndex } from './helper'
+import { getSlot } from '@/utils/tsxHelper'
+import type { TableProps } from './types'
+import { set } from 'lodash-es'
+import { Pagination, TableColumn, TableSetPropsType, TableSlotDefault } from '@/types/table'
+
+export default defineComponent({
+  name: 'Table',
+  props: {
+    pageSize: propTypes.number.def(10),
+    currentPage: propTypes.number.def(1),
+    // 是否多选
+    selection: propTypes.bool.def(false),
+    // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
+    showOverflowTooltip: propTypes.bool.def(true),
+    // 表头
+    columns: {
+      type: Array as PropType<TableColumn[]>,
+      default: () => []
+    },
+    // 展开行
+    expand: propTypes.bool.def(false),
+    // 是否展示分页
+    pagination: {
+      type: Object as PropType<Pagination>,
+      default: (): Pagination | undefined => undefined
+    },
+    // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+    reserveSelection: propTypes.bool.def(false),
+    // 加载状态
+    loading: propTypes.bool.def(false),
+    // 是否叠加索引
+    reserveIndex: propTypes.bool.def(false),
+    // 对齐方式
+    align: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('center'),
+    // 表头对齐方式
+    headerAlign: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('center'),
+    data: {
+      type: Array as PropType<Recordable[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:pageSize', 'update:currentPage', 'register'],
+  setup(props, { attrs, slots, emit, expose }) {
+    const elTableRef = ref<ComponentRef<typeof ElTable>>()
+
+    // 注册
+    onMounted(() => {
+      const tableRef = unref(elTableRef)
+      emit('register', tableRef?.$parent, elTableRef)
+    })
+
+    const pageSizeRef = ref(props.pageSize)
+
+    const currentPageRef = ref(props.currentPage)
+
+    // useTable传入的props
+    const outsideProps = ref<TableProps>({})
+
+    const mergeProps = ref<TableProps>({})
+
+    const getProps = computed(() => {
+      const propsObj = { ...props }
+      Object.assign(propsObj, unref(mergeProps))
+      return propsObj
+    })
+
+    const setProps = (props: TableProps = {}) => {
+      mergeProps.value = Object.assign(unref(mergeProps), props)
+      outsideProps.value = props
+    }
+
+    const setColumn = (columnProps: TableSetPropsType[], columnsChildren?: TableColumn[]) => {
+      const { columns } = unref(getProps)
+      for (const v of columnsChildren || columns) {
+        for (const item of columnProps) {
+          if (v.field === item.field) {
+            set(v, item.path, item.value)
+          } else if (v.children?.length) {
+            setColumn(columnProps, v.children)
+          }
+        }
+      }
+    }
+
+    const selections = ref<Recordable[]>([])
+
+    const selectionChange = (selection: Recordable[]) => {
+      selections.value = selection
+    }
+
+    expose({
+      setProps,
+      setColumn,
+      selections
+    })
+
+    const pagination = computed(() => {
+      return Object.assign(
+        {
+          small: false,
+          background: true,
+          pagerCount: 5,
+          layout: 'total, sizes, prev, pager, next, jumper',
+          pageSizes: [10, 20, 30, 50, 100],
+          disabled: false,
+          hideOnSinglePage: false,
+          total: 10
+        },
+        unref(getProps).pagination
+      )
+    })
+
+    watch(
+      () => unref(getProps).pageSize,
+      (val: number) => {
+        pageSizeRef.value = val
+      }
+    )
+
+    watch(
+      () => unref(getProps).currentPage,
+      (val: number) => {
+        currentPageRef.value = val
+      }
+    )
+
+    watch(
+      () => pageSizeRef.value,
+      (val: number) => {
+        emit('update:pageSize', val)
+      }
+    )
+
+    watch(
+      () => currentPageRef.value,
+      (val: number) => {
+        emit('update:currentPage', val)
+      }
+    )
+
+    const getBindValue = computed(() => {
+      const bindValue: Recordable = { ...attrs, ...props }
+      delete bindValue.columns
+      delete bindValue.data
+      return bindValue
+    })
+
+    const renderTableSelection = () => {
+      const { selection, reserveSelection, align, headerAlign } = unref(getProps)
+      // 渲染多选
+      return selection ? (
+        <ElTableColumn
+          type="selection"
+          reserveSelection={reserveSelection}
+          align={align}
+          headerAlign={headerAlign}
+          width="50"
+        ></ElTableColumn>
+      ) : undefined
+    }
+
+    const renderTableExpand = () => {
+      const { align, headerAlign, expand } = unref(getProps)
+      // 渲染展开行
+      return expand ? (
+        <ElTableColumn type="expand" align={align} headerAlign={headerAlign}>
+          {{
+            // @ts-ignore
+            default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
+          }}
+        </ElTableColumn>
+      ) : undefined
+    }
+
+    const rnderTreeTableColumn = (columnsChildren: TableColumn[]) => {
+      const { align, headerAlign, showOverflowTooltip } = unref(getProps)
+      return columnsChildren.map((v) => {
+        const props = { ...v }
+        if (props.children) delete props.children
+        return (
+          <ElTableColumn
+            showOverflowTooltip={showOverflowTooltip}
+            align={align}
+            headerAlign={headerAlign}
+            {...props}
+            prop={v.field}
+          >
+            {{
+              default: (data: TableSlotDefault) =>
+                v.children && v.children.length
+                  ? rnderTableColumn(v.children)
+                  : // @ts-ignore
+                    getSlot(slots, v.field, data) ||
+                    v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
+                    data.row[v.field],
+              // @ts-ignore
+              header: getSlot(slots, `${v.field}-header`)
+            }}
+          </ElTableColumn>
+        )
+      })
+    }
+
+    const rnderTableColumn = (columnsChildren?: TableColumn[]) => {
+      const {
+        columns,
+        reserveIndex,
+        pageSize,
+        currentPage,
+        align,
+        headerAlign,
+        showOverflowTooltip
+      } = unref(getProps)
+      return [...[renderTableExpand()], ...[renderTableSelection()]].concat(
+        (columnsChildren || columns).map((v) => {
+          // 自定生成序号
+          if (v.type === 'index') {
+            return (
+              <ElTableColumn
+                type="index"
+                index={
+                  v.index
+                    ? v.index
+                    : (index) => setIndex(reserveIndex, index, pageSize, currentPage)
+                }
+                align={v.align || align}
+                headerAlign={v.headerAlign || headerAlign}
+                label={v.label}
+                width="65px"
+              ></ElTableColumn>
+            )
+          } else {
+            const props = { ...v }
+            if (props.children) delete props.children
+            return (
+              <ElTableColumn
+                showOverflowTooltip={showOverflowTooltip}
+                align={align}
+                headerAlign={headerAlign}
+                {...props}
+                prop={v.field}
+              >
+                {{
+                  default: (data: TableSlotDefault) =>
+                    v.children && v.children.length
+                      ? rnderTreeTableColumn(v.children)
+                      : // @ts-ignore
+                        getSlot(slots, v.field, data) ||
+                        v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
+                        data.row[v.field],
+                  // @ts-ignore
+                  header: () => getSlot(slots, `${v.field}-header`) || v.label
+                }}
+              </ElTableColumn>
+            )
+          }
+        })
+      )
+    }
+
+    return () => (
+      <div v-loading={unref(getProps).loading}>
+        <ElTable
+          // @ts-ignore
+          ref={elTableRef}
+          data={unref(getProps).data}
+          onSelection-change={selectionChange}
+          {...unref(getBindValue)}
+        >
+          {{
+            default: () => rnderTableColumn(),
+            // @ts-ignore
+            append: () => getSlot(slots, 'append')
+          }}
+        </ElTable>
+        {unref(getProps).pagination ? (
+          <ElPagination
+            v-model:pageSize={pageSizeRef.value}
+            v-model:currentPage={currentPageRef.value}
+            class="mt-10px"
+            {...unref(pagination)}
+          ></ElPagination>
+        ) : undefined}
+      </div>
+    )
+  }
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+:deep(.el-button.is-link) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+</style>

src/components/Table/src/helper.ts

@@ -0,0 +1,8 @@
+export const setIndex = (reserveIndex: boolean, index: number, size: number, current: number) => {
+  const newIndex = index + 1
+  if (reserveIndex) {
+    return size * (current - 1) + newIndex
+  } else {
+    return newIndex
+  }
+}

src/components/Table/src/types.ts

@@ -0,0 +1,26 @@
+import { Pagination, TableColumn } from '@/types/table'
+
+export type TableProps = {
+  pageSize?: number
+  currentPage?: number
+  // 是否多选
+  selection?: boolean
+  // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
+  showOverflowTooltip?: boolean
+  // 表头
+  columns?: TableColumn[]
+  // 是否展示分页
+  pagination?: Pagination | undefined
+  // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+  reserveSelection?: boolean
+  // 加载状态
+  loading?: boolean
+  // 是否叠加索引
+  reserveIndex?: boolean
+  // 对齐方式
+  align?: 'left' | 'center' | 'right'
+  // 表头对齐方式
+  headerAlign?: 'left' | 'center' | 'right'
+  data?: Recordable
+  expand?: boolean
+} & Recordable

src/components/Tooltip/index.ts

@@ -0,0 +1,3 @@
+import Tooltip from './src/Tooltip.vue'
+
+export { Tooltip }

src/components/Tooltip/src/Tooltip.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+defineProps({
+  titel: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  icon: propTypes.string.def('ep:question-filled')
+})
+</script>
+<template>
+  <span>{{ titel }}</span>
+  <ElTooltip :content="message" placement="top">
+    <Icon :icon="icon" class="ml-1px relative top-1px" />
+  </ElTooltip>
+</template>

src/components/UploadFile/index.ts

@@ -0,0 +1,5 @@
+import UploadImg from './src/UploadImg.vue'
+import UploadImgs from './src/UploadImgs.vue'
+import UploadFile from './src/UploadFile.vue'
+
+export { UploadImg, UploadImgs, UploadFile }

src/components/UploadFile/src/UploadFile.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="uploadRef"
+      :multiple="props.limit > 1"
+      name="file"
+      v-model="valueRef"
+      v-model:file-list="fileList"
+      :show-file-list="true"
+      :auto-upload="autoUpload"
+      :action="updateUrl"
+      :headers="uploadHeaders"
+      :limit="props.limit"
+      :drag="drag"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="handleFileSuccess"
+      :on-error="excelUploadError"
+      :on-remove="handleRemove"
+      :on-preview="handlePreview"
+      class="upload-file-uploader"
+    >
+      <el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button>
+      <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>
+    </el-upload>
+  </div>
+</template>
+<script setup lang="ts" name="UploadFile">
+import { PropType } from 'vue'
+
+import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus'
+
+const message = useMessage() // 消息弹窗
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<UploadUserFile[]>,
+    required: true
+  },
+  title: propTypes.string.def('文件上传'),
+  updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
+  fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileSize: propTypes.number.def(5), // 大小限制(MB)
+  limit: propTypes.number.def(5), // 数量限制
+  autoUpload: propTypes.bool.def(true), // 自动上传
+  drag: propTypes.bool.def(false), // 拖拽上传
+  isShowTip: propTypes.bool.def(true) // 是否显示提示
+})
+// ========== 上传相关 ==========
+const valueRef = ref(props.modelValue)
+const uploadRef = ref<UploadInstance>()
+const uploadList = ref<UploadUserFile[]>([])
+const fileList = ref<UploadUserFile[]>(props.modelValue)
+const uploadNumber = ref<number>(0)
+const uploadHeaders = ref({
+  Authorization: 'Bearer ' + getAccessToken(),
+  'tenant-id': getTenantId()
+})
+// 文件上传之前判断
+const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
+  if (fileList.value.length >= props.limit) {
+    message.error(`上传文件数量不能超过${props.limit}个!`)
+    return false
+  }
+  let fileExtension = ''
+  if (file.name.lastIndexOf('.') > -1) {
+    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
+  }
+  const isImg = props.fileType.some((type: string) => {
+    if (file.type.indexOf(type) > -1) return true
+    return !!(fileExtension && fileExtension.indexOf(type) > -1)
+  })
+  const isLimit = file.size < props.fileSize * 1024 * 1024
+  if (!isImg) {
+    message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`)
+    return false
+  }
+  if (!isLimit) {
+    message.error(`上传文件大小不能超过${props.fileSize}MB!`)
+    return false
+  }
+  message.success('正在上传文件，请稍候...')
+  uploadNumber.value++
+}
+// 处理上传的文件发生变化
+// const handleFileChange = (uploadFile: UploadFile): void => {
+//   uploadRef.value.data.path = uploadFile.name
+// }
+// 文件上传成功
+const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  const fileListNew = fileList.value
+  fileListNew.pop()
+  fileList.value = fileListNew
+  uploadList.value.push({ name: res.data, url: res.data })
+  if (uploadList.value.length == uploadNumber.value) {
+    fileList.value = fileList.value.concat(uploadList.value)
+    uploadList.value = []
+    uploadNumber.value = 0
+    emit('update:modelValue', listToString(fileList.value))
+  }
+}
+// 文件数超出提示
+const handleExceed: UploadProps['onExceed'] = (): void => {
+  message.error(`上传文件数量不能超过${props.limit}个!`)
+}
+// 上传错误提示
+const excelUploadError: UploadProps['onError'] = (): void => {
+  message.error('导入数据失败，请您重新上传！')
+}
+// 删除上传文件
+const handleRemove = (file) => {
+  const findex = fileList.value.map((f) => f.name).indexOf(file.name)
+  if (findex > -1) {
+    fileList.value.splice(findex, 1)
+    emit('update:modelValue', listToString(fileList.value))
+  }
+}
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+  console.log(uploadFile)
+}
+// 对象转成指定字符串分隔
+const listToString = (list: UploadUserFile[], separator?: string) => {
+  let strs = ''
+  separator = separator || ','
+  for (let i in list) {
+    strs += list[i].url + separator
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+}
+</script>
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+:deep(.upload-file-list .el-upload-list__item) {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+: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;
+}
+</style>

src/components/UploadFile/src/UploadImg.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :action="updateUrl"
+      :id="uuid"
+      :class="['upload', drag ? 'no-border' : '']"
+      :multiple="false"
+      :show-file-list="false"
+      :headers="uploadHeaders"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <template v-if="modelValue">
+        <img :src="modelValue" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="editImg">
+            <Icon icon="ep:edit" />
+            <span>{{ t('action.edit') }}</span>
+          </div>
+          <div class="handle-icon" @click="imgViewVisible = true">
+            <Icon icon="ep:zoom-in" />
+            <span>{{ t('action.detail') }}</span>
+          </div>
+          <div class="handle-icon" @click="deleteImg">
+            <Icon icon="ep:delete" />
+            <span>{{ t('action.del') }}</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <Icon icon="ep:plus" />
+            <!-- <span>请上传图片</span> -->
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer
+      v-if="imgViewVisible"
+      @close="imgViewVisible = false"
+      :url-list="[modelValue]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+import type { UploadProps } from 'element-plus'
+
+import { generateUUID } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+type FileTypes =
+  | 'image/apng'
+  | 'image/bmp'
+  | 'image/gif'
+  | 'image/jpeg'
+  | 'image/pjpeg'
+  | 'image/png'
+  | 'image/svg+xml'
+  | 'image/tiff'
+  | 'image/webp'
+  | 'image/x-icon'
+
+// 接受父组件参数
+const props = defineProps({
+  modelValue: propTypes.string.def(''),
+  updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
+  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+})
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+// 查看图片
+const imgViewVisible = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const deleteImg = () => {
+  emit('update:modelValue', '')
+}
+
+const uploadHeaders = ref({
+  Authorization: 'Bearer ' + getAccessToken(),
+  'tenant-id': getTenantId()
+})
+
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
+  dom && dom.dispatchEvent(new MouseEvent('click'))
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+    message.notifyWarning('上传图片不符合所需的格式！')
+  if (!imgSize) message.notifyWarning(`上传图片大小不能超过 ${props.fileSize}M！`)
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+// 图片上传成功提示
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  emit('update:modelValue', res.data)
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  message.notifyError('图片上传失败，请您重新上传！')
+}
+</script>
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload,
+  .el-upload-dragger {
+    cursor: not-allowed !important;
+    background: var(--el-disabled-bg-color);
+    border: 1px dashed var(--el-border-color-darker) !important;
+    &:hover {
+      border: 1px dashed var(--el-border-color-darker) !important;
+    }
+  }
+}
+.upload-box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: v-bind(width);
+      height: v-bind(height);
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      transition: var(--el-transition-duration-fast);
+      &:hover {
+        border-color: var(--el-color-primary);
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+      .el-upload-dragger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow: hidden;
+        background-color: transparent;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+        }
+      }
+      .el-upload-dragger.is-dragover {
+        background-color: var(--el-color-primary-light-9);
+        border: 2px dashed var(--el-color-primary) !important;
+      }
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .upload-empty {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        line-height: 30px;
+        color: var(--el-color-info);
+        .el-icon {
+          font-size: 28px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+      .upload-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background: rgb(0 0 0 / 60%);
+        opacity: 0;
+        transition: var(--el-transition-duration-fast);
+        .handle-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6%;
+          color: aliceblue;
+          .el-icon {
+            margin-bottom: 40%;
+            font-size: 130%;
+            line-height: 130%;
+          }
+          span {
+            font-size: 85%;
+            line-height: 85%;
+          }
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+  }
+}
+</style>

src/components/UploadFile/src/UploadImgs.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :action="updateUrl"
+      list-type="picture-card"
+      :class="['upload', drag ? 'no-border' : '']"
+      v-model:file-list="fileList"
+      :multiple="true"
+      :limit="limit"
+      :headers="uploadHeaders"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <div class="upload-empty">
+        <slot name="empty">
+          <Icon icon="ep:plus" />
+          <!-- <span>请上传图片</span> -->
+        </slot>
+      </div>
+      <template #file="{ file }">
+        <img :src="file.url" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="handlePictureCardPreview(file)">
+            <Icon icon="ep:zoom-in" />
+            <span>查看</span>
+          </div>
+          <div class="handle-icon" @click="handleRemove(file)">
+            <Icon icon="ep:delete" />
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer
+      v-if="imgViewVisible"
+      @close="imgViewVisible = false"
+      :url-list="[viewImageUrl]"
+    />
+  </div>
+</template>
+<script setup lang="ts" name="UploadImgs">
+import { PropType } from 'vue'
+import { ElNotification } from 'element-plus'
+import type { UploadProps, UploadFile, UploadUserFile } from 'element-plus'
+
+import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+const message = useMessage() // 消息弹窗
+
+type FileTypes =
+  | 'image/apng'
+  | 'image/bmp'
+  | 'image/gif'
+  | 'image/jpeg'
+  | 'image/pjpeg'
+  | 'image/png'
+  | 'image/svg+xml'
+  | 'image/tiff'
+  | 'image/webp'
+  | 'image/x-icon'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<UploadUserFile[]>,
+    required: true
+  },
+  updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
+  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+})
+
+const uploadHeaders = ref({
+  Authorization: 'Bearer ' + getAccessToken(),
+  'tenant-id': getTenantId()
+})
+
+const fileList = ref<UploadUserFile[]>(props.modelValue)
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 上传的文件
+ * */
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+    ElNotification({
+      title: '温馨提示',
+      message: '上传图片不符合所需的格式！',
+      type: 'warning'
+    })
+  if (!imgSize)
+    ElNotification({
+      title: '温馨提示',
+      message: `上传图片大小不能超过 ${props.fileSize}M！`,
+      type: 'warning'
+    })
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+// 图片上传成功
+interface UploadEmits {
+  (e: 'update:modelValue', value: UploadUserFile[]): void
+}
+const emit = defineEmits<UploadEmits>()
+const uploadSuccess = (response, uploadFile: UploadFile) => {
+  if (!response) return
+  uploadFile.url = response.data
+  emit('update:modelValue', fileList.value)
+  message.success('上传成功')
+}
+
+// 删除图片
+const handleRemove = (uploadFile: UploadFile) => {
+  fileList.value = fileList.value.filter(
+    (item) => item.url !== uploadFile.url || item.name !== uploadFile.name
+  )
+  emit('update:modelValue', fileList.value)
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: '图片上传失败，请您重新上传！',
+    type: 'error'
+  })
+}
+
+// 文件数超出提示
+const handleExceed = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+    type: 'warning'
+  })
+}
+
+// 图片预览
+const viewImageUrl = ref('')
+const imgViewVisible = ref(false)
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+  viewImageUrl.value = uploadFile.url!
+  imgViewVisible.value = true
+}
+</script>
+
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+.upload-box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      &:hover {
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+    .el-upload-dragger.is-dragover {
+      background-color: var(--el-color-primary-light-9);
+      border: 2px dashed var(--el-color-primary) !important;
+    }
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width);
+      height: v-bind(height);
+      background-color: transparent;
+      border-radius: v-bind(borderRadius);
+    }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      transition: var(--el-transition-duration-fast);
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
+        .el-icon {
+          margin-bottom: 15%;
+          font-size: 140%;
+        }
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+    .upload-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      line-height: 30px;
+      color: var(--el-color-info);
+      .el-icon {
+        font-size: 28px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: center;
+  }
+}
+</style>

src/components/Verifition/index.ts

@@ -0,0 +1,3 @@
+import Verify from './src/Verify.vue'
+
+export { Verify }

src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -0,0 +1,250 @@
+<template>
+  <div style="position: relative">
+    <div class="verify-img-out">
+      <div
+        class="verify-img-panel"
+        :style="{
+          width: setSize.imgWidth,
+          height: setSize.imgHeight,
+          'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
+          'margin-bottom': vSpace + 'px'
+        }"
+      >
+        <div class="verify-refresh" style="z-index: 3" @click="refresh" v-show="showRefresh">
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <img
+          :src="'data:image/png;base64,' + pointBackImgBase"
+          ref="canvas"
+          alt=""
+          style="width: 100%; height: 100%; display: block"
+          @click="bindingClick ? canvasClick($event) : undefined"
+        />
+
+        <div
+          v-for="(tempPoint, index) in tempPoints"
+          :key="index"
+          class="point-area"
+          :style="{
+            'background-color': '#1abd6c',
+            color: '#fff',
+            'z-index': 9999,
+            width: '20px',
+            height: '20px',
+            'text-align': 'center',
+            'line-height': '20px',
+            'border-radius': '50%',
+            position: 'absolute',
+            top: parseInt(tempPoint.y - 10) + 'px',
+            left: parseInt(tempPoint.x - 10) + 'px'
+          }"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+    <!-- 'height': this.barSize.height, -->
+    <div
+      class="verify-bar-area"
+      :style="{
+        width: setSize.imgWidth,
+        color: barAreaColor,
+        'border-color': barAreaBorderColor,
+        'line-height': barSize.height
+      }"
+    >
+      <span class="verify-msg">{{ text }}</span>
+    </div>
+  </div>
+</template>
+<script type="text/babel" setup>
+/**
+ * VerifyPoints
+ * @description 点选
+ * */
+import { resetSize } from './../utils/util'
+import { aesEncrypt } from './../utils/ase'
+import { getCodeApi, reqCheckApi } from '@/api/login'
+import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+  //弹出式pop，固定fixed
+  mode: {
+    type: String,
+    default: 'fixed'
+  },
+  captchaType: {
+    type: String
+  },
+  //间隔
+  vSpace: {
+    type: Number,
+    default: 5
+  },
+  imgSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '155px'
+      }
+    }
+  },
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '40px'
+      }
+    }
+  }
+})
+
+const { t } = useI18n()
+const { mode, captchaType } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  checkNum = ref(3), //默认需要点击的字数
+  fontPos = reactive([]), //选中的坐标信息
+  checkPosArr = reactive([]), //用户点击的坐标
+  num = ref(1), //点击的记数
+  pointBackImgBase = ref(''), //后端获取到的背景图片
+  poinTextList = reactive([]), //后端返回的点击字体顺序
+  backToken = ref(''), //后端返回的token值
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  tempPoints = reactive([]),
+  text = ref(''),
+  barAreaColor = ref(undefined),
+  barAreaBorderColor = ref(undefined),
+  showRefresh = ref(true),
+  bindingClick = ref(true)
+
+const init = () => {
+  //加载页面
+  fontPos.splice(0, fontPos.length)
+  checkPosArr.splice(0, checkPosArr.length)
+  num.value = 1
+  getPictrue()
+  nextTick(() => {
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
+}
+onMounted(() => {
+  // 禁止拖拽
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+const canvas = ref(null)
+const canvasClick = (e) => {
+  checkPosArr.push(getMousePos(canvas, e))
+  if (num.value == checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
+    //按比例转换坐标值
+    let arr = pointTransfrom(checkPosArr, setSize)
+    checkPosArr.length = 0
+    checkPosArr.push(...arr)
+    //等创建坐标执行完
+    setTimeout(() => {
+      // var flag = this.comparePos(this.fontPos, this.checkPosArr);
+      //发送后端请求
+      var captchaVerification = secretKey.value
+        ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
+        : backToken.value + '---' + JSON.stringify(checkPosArr)
+      let data = {
+        captchaType: captchaType.value,
+        pointJson: secretKey.value
+          ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
+          : JSON.stringify(checkPosArr),
+        token: backToken.value
+      }
+      reqCheckApi(data).then((res) => {
+        if (res.repCode == '0000') {
+          barAreaColor.value = '#4cae4c'
+          barAreaBorderColor.value = '#5cb85c'
+          text.value = t('captcha.success')
+          bindingClick.value = false
+          if (mode.value == 'pop') {
+            setTimeout(() => {
+              proxy.$parent.clickShow = false
+              refresh()
+            }, 1500)
+          }
+          proxy.$parent.$emit('success', { captchaVerification })
+        } else {
+          proxy.$parent.$emit('error', proxy)
+          barAreaColor.value = '#d9534f'
+          barAreaBorderColor.value = '#d9534f'
+          text.value = t('captcha.fail')
+          setTimeout(() => {
+            refresh()
+          }, 700)
+        }
+      })
+    }, 400)
+  }
+  if (num.value < checkNum.value) {
+    num.value = createPoint(getMousePos(canvas, e))
+  }
+}
+//获取坐标
+const getMousePos = function (obj, e) {
+  var x = e.offsetX
+  var y = e.offsetY
+  return { x, y }
+}
+//创建坐标点
+const createPoint = function (pos) {
+  tempPoints.push(Object.assign({}, pos))
+  return num.value + 1
+}
+const refresh = async function () {
+  tempPoints.splice(0, tempPoints.length)
+  barAreaColor.value = '#000'
+  barAreaBorderColor.value = '#ddd'
+  bindingClick.value = true
+  fontPos.splice(0, fontPos.length)
+  checkPosArr.splice(0, checkPosArr.length)
+  num.value = 1
+  await getPictrue()
+  showRefresh.value = true
+}
+
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCodeApi(data)
+  if (res.repCode == '0000') {
+    pointBackImgBase.value = res.repData.originalImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+    poinTextList.value = res.repData.wordList
+    text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
+  } else {
+    text.value = res.repMsg
+  }
+}
+//坐标转换函数
+const pointTransfrom = function (pointArr, imgSize) {
+  var newPointArr = pointArr.map((p) => {
+    let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
+    let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
+    return { x, y }
+  })
+  return newPointArr
+}
+</script>

src/components/Verifition/src/Verify/VerifySlide.vue

@@ -0,0 +1,376 @@
+<template>
+  <div style="position: relative">
+    <div
+      v-if="type === '2'"
+      class="verify-img-out"
+      :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"
+    >
+      <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
+        <img
+          :src="'data:image/png;base64,' + backImgBase"
+          alt=""
+          style="width: 100%; height: 100%; display: block"
+        />
+        <div class="verify-refresh" @click="refresh" v-show="showRefresh">
+          <i class="iconfont icon-refresh"></i>
+        </div>
+        <transition name="tips">
+          <span class="verify-tips" v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'">
+            {{ tipWords }}
+          </span>
+        </transition>
+      </div>
+    </div>
+    <!-- 公共部分 -->
+    <div
+      class="verify-bar-area"
+      :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"
+    >
+      <span class="verify-msg" v-text="text"></span>
+      <div
+        class="verify-left-bar"
+        :style="{
+          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
+          height: barSize.height,
+          'border-color': leftBarBorderColor,
+          transaction: transitionWidth
+        }"
+      >
+        <span class="verify-msg" v-text="finishText"></span>
+        <div
+          class="verify-move-block"
+          @touchstart="start"
+          @mousedown="start"
+          :style="{
+            width: barSize.height,
+            height: barSize.height,
+            'background-color': moveBlockBackgroundColor,
+            left: moveBlockLeft,
+            transition: transitionLeft
+          }"
+        >
+          <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
+          <div
+            v-if="type === '2'"
+            class="verify-sub-block"
+            :style="{
+              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
+              height: setSize.imgHeight,
+              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
+              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight
+            }"
+          >
+            <img
+              :src="'data:image/png;base64,' + blockBackImgBase"
+              alt=""
+              style="width: 100%; height: 100%; display: block; -webkit-user-drag: none"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/babel" setup>
+/**
+ * VerifySlide
+ * @description 滑块
+ * */
+import { aesEncrypt } from './../utils/ase'
+import { resetSize } from './../utils/util'
+import { getCodeApi, reqCheckApi } from '@/api/login'
+
+const props = defineProps({
+  captchaType: {
+    type: String
+  },
+  type: {
+    type: String,
+    default: '1'
+  },
+  //弹出式pop，固定fixed
+  mode: {
+    type: String,
+    default: 'fixed'
+  },
+  vSpace: {
+    type: Number,
+    default: 5
+  },
+  explain: {
+    type: String,
+    default: ''
+  },
+  imgSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '155px'
+      }
+    }
+  },
+  blockSize: {
+    type: Object,
+    default() {
+      return {
+        width: '50px',
+        height: '50px'
+      }
+    }
+  },
+  barSize: {
+    type: Object,
+    default() {
+      return {
+        width: '310px',
+        height: '30px'
+      }
+    }
+  }
+})
+
+const { t } = useI18n()
+const { mode, captchaType, type, blockSize, explain } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), //后端返回的ase加密秘钥
+  passFlag = ref(''), //是否通过的标识
+  backImgBase = ref(''), //验证码背景图片
+  blockBackImgBase = ref(''), //验证滑块的背景图片
+  backToken = ref(''), //后端返回的唯一token值
+  startMoveTime = ref(''), //移动开始的时间
+  endMovetime = ref(''), //移动结束的时间
+  tipWords = ref(''),
+  text = ref(''),
+  finishText = ref(''),
+  setSize = reactive({
+    imgHeight: 0,
+    imgWidth: 0,
+    barHeight: 0,
+    barWidth: 0
+  }),
+  moveBlockLeft = ref(undefined),
+  leftBarWidth = ref(undefined),
+  // 移动中样式
+  moveBlockBackgroundColor = ref(undefined),
+  leftBarBorderColor = ref('#ddd'),
+  iconColor = ref(undefined),
+  iconClass = ref('icon-right'),
+  status = ref(false), //鼠标状态
+  isEnd = ref(false), //是够验证完成
+  showRefresh = ref(true),
+  transitionLeft = ref(''),
+  transitionWidth = ref(''),
+  startLeft = ref(0)
+
+const barArea = computed(() => {
+  return proxy.$el.querySelector('.verify-bar-area')
+})
+const init = () => {
+  if (explain.value === '') {
+    text.value = t('captcha.slide')
+  } else {
+    text.value = explain.value
+  }
+  getPictrue()
+  nextTick(() => {
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
+
+  window.removeEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.removeEventListener('mousemove', function (e) {
+    move(e)
+  })
+
+  //鼠标松开
+  window.removeEventListener('touchend', function () {
+    end()
+  })
+  window.removeEventListener('mouseup', function () {
+    end()
+  })
+
+  window.addEventListener('touchmove', function (e) {
+    move(e)
+  })
+  window.addEventListener('mousemove', function (e) {
+    move(e)
+  })
+
+  //鼠标松开
+  window.addEventListener('touchend', function () {
+    end()
+  })
+  window.addEventListener('mouseup', function () {
+    end()
+  })
+}
+watch(type, () => {
+  init()
+})
+onMounted(() => {
+  // 禁止拖拽
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+//鼠标按下
+const start = (e) => {
+  e = e || window.event
+  if (!e.touches) {
+    //兼容PC端
+    var x = e.clientX
+  } else {
+    //兼容移动端
+    var x = e.touches[0].pageX
+  }
+  startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)
+  startMoveTime.value = +new Date() //开始滑动的时间
+  if (isEnd.value == false) {
+    text.value = ''
+    moveBlockBackgroundColor.value = '#337ab7'
+    leftBarBorderColor.value = '#337AB7'
+    iconColor.value = '#fff'
+    e.stopPropagation()
+    status.value = true
+  }
+}
+//鼠标移动
+const move = (e) => {
+  e = e || window.event
+  if (status.value && isEnd.value == false) {
+    if (!e.touches) {
+      //兼容PC端
+      var x = e.clientX
+    } else {
+      //兼容移动端
+      var x = e.touches[0].pageX
+    }
+    var bar_area_left = barArea.value.getBoundingClientRect().left
+    var move_block_left = x - bar_area_left //小方块相对于父元素的left值
+    if (
+      move_block_left >=
+      barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
+    ) {
+      move_block_left =
+        barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
+    }
+    if (move_block_left <= 0) {
+      move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
+    }
+    //拖动后小方块的left值
+    moveBlockLeft.value = move_block_left - startLeft.value + 'px'
+    leftBarWidth.value = move_block_left - startLeft.value + 'px'
+  }
+}
+
+//鼠标松开
+const end = () => {
+  endMovetime.value = +new Date()
+  //判断是否重合
+  if (status.value && isEnd.value == false) {
+    var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
+    moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
+    let data = {
+      captchaType: captchaType.value,
+      pointJson: secretKey.value
+        ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
+        : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+      token: backToken.value
+    }
+    reqCheckApi(data).then((res) => {
+      if (res.repCode == '0000') {
+        moveBlockBackgroundColor.value = '#5cb85c'
+        leftBarBorderColor.value = '#5cb85c'
+        iconColor.value = '#fff'
+        iconClass.value = 'icon-check'
+        showRefresh.value = false
+        isEnd.value = true
+        if (mode.value == 'pop') {
+          setTimeout(() => {
+            proxy.$parent.clickShow = false
+            refresh()
+          }, 1500)
+        }
+        passFlag.value = true
+        tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s 
+            ${t('captcha.success')}`
+        var captchaVerification = secretKey.value
+          ? aesEncrypt(
+              backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
+              secretKey.value
+            )
+          : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
+        setTimeout(() => {
+          tipWords.value = ''
+          proxy.$parent.closeBox()
+          proxy.$parent.$emit('success', { captchaVerification })
+        }, 1000)
+      } else {
+        moveBlockBackgroundColor.value = '#d9534f'
+        leftBarBorderColor.value = '#d9534f'
+        iconColor.value = '#fff'
+        iconClass.value = 'icon-close'
+        passFlag.value = false
+        setTimeout(function () {
+          refresh()
+        }, 1000)
+        proxy.$parent.$emit('error', proxy)
+        tipWords.value = t('captcha.fail')
+        setTimeout(() => {
+          tipWords.value = ''
+        }, 1000)
+      }
+    })
+    status.value = false
+  }
+}
+
+const refresh = async () => {
+  showRefresh.value = true
+  finishText.value = ''
+
+  transitionLeft.value = 'left .3s'
+  moveBlockLeft.value = 0
+
+  leftBarWidth.value = undefined
+  transitionWidth.value = 'width .3s'
+
+  leftBarBorderColor.value = '#ddd'
+  moveBlockBackgroundColor.value = '#fff'
+  iconColor.value = '#000'
+  iconClass.value = 'icon-right'
+  isEnd.value = false
+
+  await getPictrue()
+  setTimeout(() => {
+    transitionWidth.value = ''
+    transitionLeft.value = ''
+    text.value = explain.value
+  }, 300)
+}
+
+// 请求背景图片和验证图片
+const getPictrue = async () => {
+  let data = {
+    captchaType: captchaType.value
+  }
+  const res = await getCodeApi(data)
+  if (res.repCode == '0000') {
+    backImgBase.value = res.repData.originalImageBase64
+    blockBackImgBase.value = res.repData.jigsawImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+  } else {
+    tipWords.value = res.repMsg
+  }
+}
+</script>

src/components/Verifition/src/Verify/index.ts

@@ -0,0 +1,4 @@
+import VerifySlide from './VerifySlide.vue'
+import VerifyPoints from './VerifyPoints.vue'
+
+export { VerifySlide, VerifyPoints }

src/components/Verifition/src/utils/ase.ts

@@ -0,0 +1,14 @@
+import CryptoJS from 'crypto-js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
+  const key = CryptoJS.enc.Utf8.parse(keyWord)
+  const srcs = CryptoJS.enc.Utf8.parse(word)
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return encrypted.toString()
+}

src/components/Verifition/src/utils/util.ts

@@ -0,0 +1,97 @@
+export function resetSize(vm) {
+  let img_width, img_height, bar_width, bar_height //图片的宽度、高度，移动条的宽度、高度
+  const EmployeeWindow = window as any
+  const parentWidth = vm.$el.parentNode.offsetWidth || EmployeeWindow.offsetWidth
+  const parentHeight = vm.$el.parentNode.offsetHeight || EmployeeWindow.offsetHeight
+  if (vm.imgSize.width.indexOf('%') != -1) {
+    img_width = (parseInt(vm.imgSize.width) / 100) * parentWidth + 'px'
+  } else {
+    img_width = vm.imgSize.width
+  }
+
+  if (vm.imgSize.height.indexOf('%') != -1) {
+    img_height = (parseInt(vm.imgSize.height) / 100) * parentHeight + 'px'
+  } else {
+    img_height = vm.imgSize.height
+  }
+
+  if (vm.barSize.width.indexOf('%') != -1) {
+    bar_width = (parseInt(vm.barSize.width) / 100) * parentWidth + 'px'
+  } else {
+    bar_width = vm.barSize.width
+  }
+
+  if (vm.barSize.height.indexOf('%') != -1) {
+    bar_height = (parseInt(vm.barSize.height) / 100) * parentHeight + 'px'
+  } else {
+    bar_height = vm.barSize.height
+  }
+
+  return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
+}
+
+export const _code_chars = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'p',
+  'q',
+  'r',
+  's',
+  't',
+  'u',
+  'v',
+  'w',
+  'x',
+  'y',
+  'z',
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+]
+export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
+export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

src/components/XButton/index.ts

@@ -0,0 +1,4 @@
+import XButton from './src/XButton.vue'
+import XTextButton from './src/XTextButton.vue'
+
+export { XButton, XTextButton }

src/components/XButton/src/XButton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  loading: propTypes.bool.def(false),
+  preIcon: propTypes.string.def(''),
+  postIcon: propTypes.string.def(''),
+  title: propTypes.string.def(''),
+  type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def(''),
+  link: propTypes.bool.def(false),
+  circle: propTypes.bool.def(false),
+  round: propTypes.bool.def(false),
+  plain: propTypes.bool.def(false),
+  onClick: { type: Function as PropType<(...args) => any>, default: null }
+})
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'preIcon', 'postIcon', 'onClick']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+</script>
+
+<template>
+  <el-button v-bind="getBindValue" @click="onClick">
+    <Icon :icon="preIcon" v-if="preIcon" class="mr-1px" />
+    {{ title ? title : '' }}
+    <Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
+  </el-button>
+</template>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+:deep(.el-button.is-link) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+</style>

src/components/XButton/src/XTextButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { PropType } from 'vue'
+
+const props = defineProps({
+  modelValue: propTypes.bool.def(false),
+  loading: propTypes.bool.def(false),
+  preIcon: propTypes.string.def(''),
+  postIcon: propTypes.string.def(''),
+  title: propTypes.string.def(''),
+  type: propTypes.oneOf(['', 'primary', 'success', 'warning', 'danger', 'info']).def('primary'),
+  circle: propTypes.bool.def(false),
+  round: propTypes.bool.def(false),
+  plain: propTypes.bool.def(false),
+  onClick: { type: Function as PropType<(...args) => any>, default: null }
+})
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'preIcon', 'postIcon', 'onClick']
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+</script>
+
+<template>
+  <el-button link v-bind="getBindValue" @click="onClick">
+    <Icon :icon="preIcon" v-if="preIcon" class="mr-1px" />
+    {{ title ? title : '' }}
+    <Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
+  </el-button>
+</template>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+:deep(.el-button.is-link) {
+  margin-left: 0;
+  padding: 8px 4px;
+}
+</style>

src/components/XModal/index.ts

@@ -0,0 +1,3 @@
+import XModal from './src/XModal.vue'
+
+export { XModal }

src/components/XModal/src/XModal.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+const slots = useSlots()
+
+const props = defineProps({
+  id: propTypes.string.def('model_1'),
+  modelValue: propTypes.bool.def(false),
+  fullscreen: propTypes.bool.def(false),
+  loading: propTypes.bool.def(false),
+  title: propTypes.string.def('弹窗'),
+  width: propTypes.string.def('40%'),
+  height: propTypes.string.def('60%'),
+  minWidth: propTypes.string.def('460'),
+  minHeight: propTypes.string.def('320'),
+  showFooter: propTypes.bool.def(true)
+})
+
+const getBindValue = computed(() => {
+  const attrs = useAttrs()
+  const obj = { ...attrs, ...props }
+  return obj
+})
+</script>
+
+<template>
+  <vxe-modal v-bind="getBindValue" destroy-on-close show-zoom resize transfer>
+    <template v-if="slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <ElScrollbar>
+      <template v-if="slots.default" #default>
+        <slot name="default"></slot>
+      </template>
+    </ElScrollbar>
+    <template v-if="slots.corner" #corner>
+      <slot name="corner"></slot>
+    </template>
+    <template v-if="slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+  </vxe-modal>
+</template>

src/components/XTable/index.ts

@@ -0,0 +1,3 @@
+import XTable from './src/XTable.vue'
+
+export { XTable }

src/components/XTable/src/XTable.vue

@@ -0,0 +1,419 @@
+<template>
+  <VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </VxeGrid>
+</template>
+<script setup lang="ts" name="XTable">
+import { PropType } from 'vue'
+import { SizeType, VxeGridInstance } from 'vxe-table'
+import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+import { XTableProps } from './type'
+import { isBoolean, isFunction } from '@/utils/is'
+
+import download from '@/utils/download'
+
+const { t } = useI18n()
+const message = useMessage() // 消息弹窗
+
+const appStore = useAppStore()
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('x-vxe-table')
+
+const attrs = useAttrs()
+const emit = defineEmits(['register'])
+
+watch(
+  () => appStore.getIsDark,
+  () => {
+    if (appStore.getIsDark == true) {
+      import('./style/dark.scss')
+    }
+    if (appStore.getIsDark == false) {
+      import('./style/light.scss')
+    }
+  },
+  { immediate: true }
+)
+
+const currentSize = computed(() => {
+  let resSize: SizeType = 'small'
+  const appsize = appStore.getCurrentSize
+  switch (appsize) {
+    case 'large':
+      resSize = 'medium'
+      break
+    case 'default':
+      resSize = 'small'
+      break
+    case 'small':
+      resSize = 'mini'
+      break
+  }
+  return resSize
+})
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<XTableProps>,
+    default: () => {}
+  }
+})
+const innerProps = ref<Partial<XTableProps>>()
+
+const getProps = computed(() => {
+  const options = innerProps.value || props.options
+  options.size = currentSize as any
+  options.height = 700
+  getOptionInitConfig(options)
+  getColumnsConfig(options)
+  getProxyConfig(options)
+  getPageConfig(options)
+  getToolBarConfig(options)
+  // console.log(options);
+  return {
+    ...options,
+    ...attrs
+  }
+})
+
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+
+let proxyForm = false
+
+const getOptionInitConfig = (options: XTableProps) => {
+  options.size = currentSize as any
+  options.rowConfig = {
+    isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
+    isHover: true // 当鼠标移到行时，是否要高亮当前行
+  }
+}
+
+// columns
+const getColumnsConfig = (options: XTableProps) => {
+  const { allSchemas } = options
+  if (!allSchemas) return
+  if (allSchemas.printSchema) {
+    options.printConfig = {
+      columns: allSchemas.printSchema
+    }
+  }
+  if (allSchemas.formSchema) {
+    proxyForm = true
+    options.formConfig = {
+      enabled: true,
+      titleWidth: 100,
+      titleAlign: 'right',
+      items: allSchemas.searchSchema
+    }
+  }
+  if (allSchemas.tableSchema) {
+    options.columns = allSchemas.tableSchema
+  }
+}
+
+// 动态请求
+const getProxyConfig = (options: XTableProps) => {
+  const { getListApi, proxyConfig, data, isList } = options
+  if (proxyConfig || data) return
+  if (getListApi && isFunction(getListApi)) {
+    if (!isList) {
+      options.proxyConfig = {
+        seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
+        form: proxyForm, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
+        props: { result: 'list', total: 'total' },
+        ajax: {
+          query: async ({ page, form }) => {
+            let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
+            if (options.params) {
+              queryParams = Object.assign(queryParams, options.params)
+            }
+            if (!options?.treeConfig) {
+              queryParams.pageSize = page.pageSize
+              queryParams.pageNo = page.currentPage
+            }
+            return new Promise(async (resolve) => {
+              resolve(await getListApi(queryParams))
+            })
+          },
+          delete: ({ body }) => {
+            return new Promise(async (resolve) => {
+              if (options.deleteApi) {
+                resolve(await options.deleteApi(JSON.stringify(body)))
+              } else {
+                Promise.reject('未设置deleteApi')
+              }
+            })
+          },
+          queryAll: ({ form }) => {
+            const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
+            return new Promise(async (resolve) => {
+              if (options.getAllListApi) {
+                resolve(await options.getAllListApi(queryParams))
+              } else {
+                resolve(await getListApi(queryParams))
+              }
+            })
+          }
+        }
+      }
+    } else {
+      options.proxyConfig = {
+        seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
+        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
+        props: { result: 'data' },
+        ajax: {
+          query: ({ form }) => {
+            let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
+            if (options?.params) {
+              queryParams = Object.assign(queryParams, options.params)
+            }
+            return new Promise(async (resolve) => {
+              resolve(await getListApi(queryParams))
+            })
+          }
+        }
+      }
+    }
+  }
+  if (options.exportListApi) {
+    options.exportConfig = {
+      filename: options?.exportName,
+      // 默认选中类型
+      type: 'csv',
+      // 自定义数据量列表
+      modes: options?.getAllListApi ? ['current', 'all'] : ['current'],
+      columns: options?.allSchemas?.printSchema
+    }
+  }
+}
+
+// 分页
+const getPageConfig = (options: XTableProps) => {
+  const { pagination, pagerConfig, treeConfig, isList } = options
+  if (isList) return
+  if (treeConfig) {
+    options.treeConfig = options.treeConfig
+    return
+  }
+  if (pagerConfig) return
+  if (pagination) {
+    if (isBoolean(pagination)) {
+      options.pagerConfig = {
+        border: false, // 带边框
+        background: false, // 带背景颜色
+        perfect: false, // 配套的样式
+        pageSize: 10, // 每页大小
+        pagerCount: 7, // 显示页码按钮的数量
+        autoHidden: false, // 当只有一页时自动隐藏
+        pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
+        layouts: [
+          'PrevJump',
+          'PrevPage',
+          'JumpNumber',
+          'NextPage',
+          'NextJump',
+          'Sizes',
+          'FullJump',
+          'Total'
+        ]
+      }
+      return
+    }
+    options.pagerConfig = pagination
+  } else {
+    if (pagination != false) {
+      options.pagerConfig = {
+        border: false, // 带边框
+        background: false, // 带背景颜色
+        perfect: false, // 配套的样式
+        pageSize: 10, // 每页大小
+        pagerCount: 7, // 显示页码按钮的数量
+        autoHidden: false, // 当只有一页时自动隐藏
+        pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
+        layouts: [
+          'Sizes',
+          'PrevJump',
+          'PrevPage',
+          'Number',
+          'NextPage',
+          'NextJump',
+          'FullJump',
+          'Total'
+        ]
+      }
+    }
+  }
+}
+
+// tool bar
+const getToolBarConfig = (options: XTableProps) => {
+  const { toolBar, toolbarConfig, topActionSlots } = options
+  if (toolbarConfig) return
+  if (toolBar) {
+    if (!isBoolean(toolBar)) {
+      console.info(2)
+      options.toolbarConfig = toolBar
+      return
+    }
+  } else if (topActionSlots != false) {
+    options.toolbarConfig = {
+      slots: { buttons: 'toolbar_buttons' }
+    }
+  } else {
+    options.toolbarConfig = {
+      enabled: true
+    }
+  }
+}
+
+// 刷新列表
+const reload = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  g.commitProxy('query')
+}
+
+// 删除
+const deleteData = async (id: string | number) => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  const options = innerProps.value || props.options
+  if (!options.deleteApi) {
+    console.error('未传入delListApi')
+    return
+  }
+  return new Promise(async () => {
+    message.delConfirm().then(async () => {
+      await (options?.deleteApi && options?.deleteApi(id))
+      message.success(t('common.delSuccess'))
+      // 刷新列表
+      reload()
+    })
+  })
+}
+
+// 批量删除
+const deleteBatch = async () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  const rows = g.getCheckboxRecords() || g.getRadioRecord()
+  let ids: any[] = []
+  if (rows.length == 0) {
+    message.error('请选择数据')
+    return
+  } else {
+    rows.forEach((row) => {
+      ids.push(row.id)
+    })
+  }
+  const options = innerProps.value || props.options
+  if (options.deleteListApi) {
+    return new Promise(async () => {
+      message.delConfirm().then(async () => {
+        await (options?.deleteListApi && options?.deleteListApi(ids))
+        message.success(t('common.delSuccess'))
+        // 刷新列表
+        reload()
+      })
+    })
+  } else if (options.deleteApi) {
+    return new Promise(async () => {
+      message.delConfirm().then(async () => {
+        ids.forEach(async (id) => {
+          await (options?.deleteApi && options?.deleteApi(id))
+        })
+        message.success(t('common.delSuccess'))
+        // 刷新列表
+        reload()
+      })
+    })
+  } else {
+    console.error('未传入delListApi')
+    return
+  }
+}
+
+// 导出
+const exportList = async (fileName?: string) => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  const options = innerProps.value || props.options
+  if (!options?.exportListApi) {
+    console.error('未传入exportListApi')
+    return
+  }
+  const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
+  message.exportConfirm().then(async () => {
+    const res = await (options?.exportListApi && options?.exportListApi(queryParams))
+    download.excel(res as unknown as Blob, fileName ? fileName : 'excel.xls')
+  })
+}
+
+// 获取查询参数
+const getSearchData = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
+  return queryParams
+}
+
+// 获取当前列
+const getCurrentColumn = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getCurrentColumn()
+}
+
+// 获取当前选中列，redio
+const getRadioRecord = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getRadioRecord(false)
+}
+
+// 获取当前选中列，checkbox
+const getCheckboxRecords = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getCheckboxRecords(false)
+}
+const setProps = (prop: Partial<XTableProps>) => {
+  innerProps.value = { ...unref(innerProps), ...prop }
+}
+
+defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })
+emit('register', {
+  reload,
+  getSearchData,
+  setProps,
+  deleteData,
+  deleteBatch,
+  exportList,
+  getCurrentColumn,
+  getRadioRecord,
+  getCheckboxRecords
+})
+</script>
+<style lang="scss">
+@import './style/index.scss';
+</style>

src/components/XTable/src/style/dark.scss

@@ -0,0 +1,81 @@
+// 修改样式变量
+//@import 'vxe-table/styles/variable.scss';
+
+/*font*/
+$vxe-font-color: #e5e7eb;
+// $vxe-font-size: 14px !default;
+// $vxe-font-size-medium: 16px !default;
+// $vxe-font-size-small: 14px !default;
+// $vxe-font-size-mini: 12px !default;
+
+/*color*/
+$vxe-primary-color: #409eff !default;
+$vxe-success-color: #67c23a !default;
+$vxe-info-color: #909399 !default;
+$vxe-warning-color: #e6a23c !default;
+$vxe-danger-color: #f56c6c !default;
+$vxe-disabled-color: #bfbfbf !default;
+$vxe-primary-disabled-color: #c0c4cc !default;
+
+/*loading*/
+$vxe-loading-color: $vxe-primary-color !default;
+$vxe-loading-background-color: #1d1e1f !default;
+$vxe-loading-z-index: 999 !default;
+
+/*icon*/
+$vxe-icon-font-family: Verdana, Arial, Tahoma !default;
+$vxe-icon-background-color: #e5e7eb !default;
+
+/*toolbar*/
+$vxe-toolbar-background-color: #1d1e1f !default;
+$vxe-toolbar-button-border: #dcdfe6 !default;
+$vxe-toolbar-custom-active-background-color: #d9dadb !default;
+$vxe-toolbar-panel-background-color: #e5e7eb !default;
+
+$vxe-table-font-color: #e5e7eb;
+$vxe-table-header-background-color: #1d1e1f;
+$vxe-table-body-background-color: #141414;
+$vxe-table-row-striped-background-color: #1d1d1d;
+$vxe-table-row-hover-background-color: #1d1e1f;
+$vxe-table-row-hover-striped-background-color: #1e1e1e;
+$vxe-table-footer-background-color: #1d1e1f;
+$vxe-table-row-current-background-color: #302d2d;
+$vxe-table-column-current-background-color: #302d2d;
+$vxe-table-column-hover-background-color: #302d2d;
+$vxe-table-row-hover-current-background-color: #302d2d;
+$vxe-table-row-checkbox-checked-background-color: #3e3c37 !default;
+$vxe-table-row-hover-checkbox-checked-background-color: #615a4a !default;
+$vxe-table-menu-background-color: #1d1e1f;
+$vxe-table-border-width: 1px !default;
+$vxe-table-border-color: #4c4d4f !default;
+$vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
+$vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
+
+$vxe-form-background-color: #141414;
+
+/*pager*/
+$vxe-pager-background-color: #1d1e1f !default;
+$vxe-pager-perfect-background-color: #262727 !default;
+$vxe-pager-perfect-button-background-color: #a7a3a3 !default;
+
+$vxe-input-background-color: #141414;
+$vxe-input-border-color: #4c4d4f !default;
+
+$vxe-select-option-hover-background-color: #262626 !default;
+$vxe-select-panel-background-color: #141414 !default;
+$vxe-select-empty-color: #262626 !default;
+$vxe-optgroup-title-color: #909399 !default;
+
+/*button*/
+$vxe-button-default-background-color: #262626;
+$vxe-button-dropdown-panel-background-color: #141414;
+
+/*modal*/
+$vxe-modal-header-background-color: #141414;
+$vxe-modal-body-background-color: #141414;
+$vxe-modal-border-color: #3b3b3b;
+
+/*pulldown*/
+$vxe-pulldown-panel-background-color: #262626 !default;
+
+@import 'vxe-table/styles/index.scss';

src/components/XTable/src/style/index.scss

@@ -0,0 +1,6 @@
+// @import 'vxe-table/styles/variable.scss';
+// @import 'vxe-table/styles/modules.scss';
+// @import './theme/light.scss';
+i {
+  border-color: initial;
+}

src/components/XTable/src/style/light.scss

@@ -0,0 +1,16 @@
+// 修改样式变量
+// /*font*/
+// $vxe-font-size: 12px !default;
+// $vxe-font-size-medium: 16px !default;
+// $vxe-font-size-small: 14px !default;
+// $vxe-font-size-mini: 12px !default;
+/*color*/
+$vxe-primary-color: #409eff !default;
+$vxe-success-color: #67c23a !default;
+$vxe-info-color: #909399 !default;
+$vxe-warning-color: #e6a23c !default;
+$vxe-danger-color: #f56c6c !default;
+$vxe-disabled-color: #bfbfbf !default;
+$vxe-primary-disabled-color: #c0c4cc !default;
+
+@import 'vxe-table/styles/index.scss';

src/components/XTable/src/type.ts

@@ -0,0 +1,26 @@
+import { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import type { VxeGridProps, VxeGridPropTypes, VxeTablePropTypes } from 'vxe-table'
+
+export type XTableProps<D = any> = VxeGridProps<D> & {
+  allSchemas?: CrudSchema
+  height?: number // 高度 默认730
+  topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
+  treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
+  isList?: boolean // 是否不带分页的list
+  getListApi?: Function // 获取列表接口
+  getAllListApi?: Function // 获取全部数据接口 用于 vxe 导出
+  deleteApi?: Function // 删除接口
+  deleteListApi?: Function // 批量删除接口
+  exportListApi?: Function // 导出接口
+  exportName?: string // 导出文件夹名称
+  params?: any // 其他查询参数
+  pagination?: boolean | VxeGridPropTypes.PagerConfig // 分页配置参数
+  toolBar?: boolean | VxeGridPropTypes.ToolbarConfig // 右侧工具栏配置参数
+}
+export type XColumns = VxeGridPropTypes.Columns
+
+export type VxeTableColumn = {
+  field: string
+  title?: string
+  children?: VxeTableColumn[]
+} & Recordable

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -0,0 +1,698 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header">
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
+          <el-tooltip effect="light" placement="bottom">
+            <template #content>
+              <div style="color: #409eff">
+                <!-- <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button> -->
+                <XTextButton title="下载为XML文件" @click="downloadProcessAsXml()" />
+                <br />
+
+                <!-- <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button> -->
+                <XTextButton title="下载为SVG文件" @click="downloadProcessAsSvg()" />
+                <br />
+
+                <!-- <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button> -->
+                <XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+              </div>
+            </template>
+            <XButton title="下载文件" preIcon="ep:download" />
+          </el-tooltip>
+          <el-tooltip effect="light">
+            <XButton preIcon="ep:view" title="浏览" />
+            <template #content>
+              <!-- <el-button link @click="previewProcessXML">预览XML</el-button> -->
+              <XTextButton title="预览XML" @click="previewProcessXML" />
+              <br />
+              <!-- <el-button link @click="previewProcessJson">预览JSON</el-button> -->
+              <XTextButton title="预览JSON" @click="previewProcessJson" />
+            </template>
+          </el-tooltip>
+          <el-tooltip
+            v-if="props.simulation"
+            effect="light"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <el-tooltip effect="light" content="向左对齐">
+            <!-- <el-button
+              class="align align-left"
+              icon="el-icon-s-data"
+              @click="elementsAlign('left')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向右对齐">
+            <!-- <el-button
+              class="align align-right"
+              icon="el-icon-s-data"
+              @click="elementsAlign('right')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向上对齐">
+            <!-- <el-button
+              class="align align-top"
+              icon="el-icon-s-data"
+              @click="elementsAlign('top')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向下对齐">
+            <!-- <el-button
+              class="align align-bottom"
+              icon="el-icon-s-data"
+              @click="elementsAlign('bottom')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="水平居中">
+            <!-- <el-button
+              class="align align-center"
+              icon="el-icon-s-data"
+              @click="elementsAlign('center')"
+            /> -->
+            <!-- class="align align-center" -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="垂直居中">
+            <!-- <el-button
+              class="align align-middle"
+              icon="el-icon-s-data"
+              @click="elementsAlign('middle')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <el-tooltip effect="light" content="缩小视图">
+            <!-- <el-button
+              :disabled="defaultZoom < 0.2"
+              icon="el-icon-zoom-out"
+              @click="processZoomOut()"
+            /> -->
+            <XButton
+              preIcon="ep:zoom-out"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </el-tooltip>
+          <el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
+          <el-tooltip effect="light" content="放大视图">
+            <!-- <el-button
+              :disabled="defaultZoom > 4"
+              icon="el-icon-zoom-in"
+              @click="processZoomIn()"
+            /> -->
+            <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重置视图并居中">
+            <!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
+            <XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <el-tooltip effect="light" content="撤销">
+            <!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
+            <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="恢复">
+            <!-- <el-button
+              :disabled="!recoverable"
+              icon="el-icon-refresh-right"
+              @click="processRedo()"
+            /> -->
+            <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重新绘制">
+            <!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
+            <XButton preIcon="ep:refresh" @click="processRestart()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <XButton
+          preIcon="ep:plus"
+          title="保存模型"
+          @click="processSave"
+          :type="props.headerButtonType"
+          :disabled="simulationStatus"
+        />
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        style="display: none"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <XModal title="预览" width="80%" height="90%" v-model="previewModelVisible" destroy-on-close>
+      <!-- append-to-body -->
+      <pre v-highlight>
+            <code class="hljs">
+            <!-- 高亮代码块 -->
+            {{ previewResult }}
+            </code>
+        </pre>
+      <!-- <pre>
+        <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
+      </pre> -->
+    </XModal>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessDesigner">
+// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { ElMessage, ElMessageBox } from 'element-plus'
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate'
+import translationsCN from './plugins/translate/zh'
+// 模拟流转流程
+import tokenSimulation from 'bpmn-js-token-simulation'
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json'
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json'
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json'
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda'
+import activitiModdleExtension from './plugins/extension-moddle/activiti'
+import flowableModdleExtension from './plugins/extension-moddle/flowable'
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+import xml2js from 'fast-xml-parser'
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+const bpmnCanvas = ref()
+const refFile = ref()
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click'
+])
+
+const props = defineProps({
+  value: String, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: String, // 流程 key 标识
+  processName: String, // 流程 name 名字
+  formId: Number, // 流程 form 表单编号
+  translations: {
+    // 自定义的翻译文件
+    type: Object,
+    default: () => {}
+  },
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: {
+    // 自定义moddle
+    type: Object,
+    default: () => {}
+  },
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false
+  },
+  simulation: {
+    type: Boolean,
+    default: true
+  },
+  keyboard: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  events: {
+    type: Array,
+    default: () => ['element.click']
+  },
+  headerButtonSize: {
+    type: String,
+    default: 'small',
+    validator: (value: string) => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
+  },
+  headerButtonType: {
+    type: String,
+    default: 'primary',
+    validator: (value: string) =>
+      ['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
+  }
+})
+
+provide('configGlobal', props)
+let bpmnModeler: any = null
+const defaultZoom = ref(1)
+const previewModelVisible = ref(false)
+const simulationStatus = ref(false)
+const previewResult = ref('')
+const previewType = ref('xml')
+const recoverable = ref(false)
+const revocable = ref(false)
+const additionalModules = computed(() => {
+  console.log(props.additionalModel, 'additionalModel')
+  const Modules: any[] = []
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+      return props.additionalModel || []
+    }
+    return [props.additionalModel]
+  }
+
+  // 插入用户自定义扩展模块
+  if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+    Modules.push(...props.additionalModel)
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel)
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)]
+  }
+  Modules.push(TranslateModule)
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation)
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  console.log(props.prefix, 'props.prefix ')
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension)
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension)
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension)
+  }
+
+  return Modules
+})
+const moddleExtensions = computed(() => {
+  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  console.log(props.moddleExtension, 'props.moddleExtension')
+  console.log(props.prefix, 'props.prefix')
+  const Extensions: any = {}
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (let key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key]
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor
+  }
+  return Extensions
+})
+console.log(additionalModules, 'additionalModules()')
+console.log(moddleExtensions, 'moddleExtensions()')
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  let data = document.getElementById('bpmnCanvas')
+  console.log(data, 'data')
+  console.log(props.keyboard, 'props.keyboard')
+  console.log(additionalModules, 'additionalModules()')
+  console.log(moddleExtensions, 'moddleExtensions()')
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value,
+    moddleExtensions: moddleExtensions.value
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  })
+
+  // bpmnModeler.createDiagram()
+
+  console.log(bpmnModeler, 'bpmnModeler111111')
+  emit('init-finished', bpmnModeler)
+  initModelListeners()
+}
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  console.log(EventBus, 'EventBus')
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event: any) => {
+    EventBus.on(event, function (eventObj) {
+      let eventName = event.replace(/\./g, '-')
+      // eventName.name = eventName
+      let element = eventObj ? eventObj.element : null
+      console.log(eventName, 'eventName')
+      console.log(element, 'element')
+      emit('element-click', element, eventObj)
+      // emit(eventName, element, eventObj)
+    })
+  })
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo()
+      revocable.value = bpmnModeler.get('commandStack').canUndo()
+      let { xml } = await bpmnModeler.saveXML({ format: true })
+      emit('commandStack-changed', event)
+      emit('input', xml)
+      emit('change', xml)
+    } catch (e: any) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`)
+    }
+  })
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
+    emit('canvas-viewbox-changed', { viewbox })
+    const { scale } = viewbox
+    defaultZoom.value = Math.floor(scale * 100) / 100
+  })
+}
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  console.log(xml, 'xml')
+  // 将字符串转换成图显示出来
+  let newId = props.processId || `Process_${new Date().getTime()}`
+  let newName = props.processName || `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    console.log(warnings, 'warnings')
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+  } catch (e: any) {
+    console.error(`[Process Designer Warn]: ${e.message || e}`)
+  }
+}
+
+// 下载流程图到本地
+const downloadProcess = async (type) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await bpmnModeler.saveXML()
+      // 读取异常时抛出异常
+      if (err) {
+        console.error(`[Process Designer Warn ]: ${err.message || err}`)
+      }
+      let { href, filename } = setEncoded(type.toUpperCase(), xml)
+      downloadFunc(href, filename)
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG()
+      // 读取异常时抛出异常
+      if (err) {
+        return console.error(err)
+      }
+      let { href, filename } = setEncoded('SVG', svg)
+      downloadFunc(href, filename)
+    }
+  } catch (e: any) {
+    console.error(`[Process Designer Warn ]: ${e.message || e}`)
+  }
+  // 文件下载方法
+  function downloadFunc(href, filename) {
+    if (href && filename) {
+      let a = document.createElement('a')
+      a.download = filename //指定下载的文件名
+      a.href = href //  URL对象
+      a.click() // 模拟点击
+      URL.revokeObjectURL(a.href) // 释放URL 对象
+    }
+  }
+}
+
+// 根据所需类型进行转码并返回下载地址
+const setEncoded = (type, data) => {
+  const filename = 'diagram'
+  const encodedData = encodeURIComponent(data)
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+    };charset=UTF-8,${encodedData}`,
+    data: data
+  }
+}
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    let xmlStr = this.result
+    createNewDiagram(xmlStr)
+  }
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml')
+}
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn')
+}
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg')
+}
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value
+  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
+}
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo()
+}
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo()
+}
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+// const processZoomTo = (newZoom = 1) => {
+//   if (newZoom < 0.2) {
+//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+//   }
+//   if (newZoom > 4) {
+//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+//   }
+//   defaultZoom = newZoom
+//   bpmnModeler.get('canvas').zoom(newZoom)
+// }
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+}
+const processRestart = () => {
+  recoverable.value = false
+  revocable.value = false
+  createNewDiagram(null)
+}
+const elementsAlign = (align) => {
+  const Align = bpmnModeler.get('alignElements')
+  const Selection = bpmnModeler.get('selection')
+  const SelectedElements = Selection.get()
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐')
+    // alert('请按住 Ctrl 键选择多个元素对齐
+    return
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    Align.trigger(SelectedElements, align)
+  })
+}
+/*-----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml111111')
+    previewResult.value = xml
+    previewType.value = 'xml'
+    previewModelVisible.value = true
+  })
+}
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml')
+
+    // const rootNode = parseXmlString(xml)
+    // console.log(rootNode, 'rootNoderootNode')
+    const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
+    // console.log(rootNodes, 'rootNodesrootNodesrootNodes')
+    // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
+
+    const parser = new xml2js.XMLParser()
+    let jObj = parser.parse(xml)
+    console.log(jObj, 'jObjjObjjObjjObjjObj')
+    // const builder = new xml2js.XMLBuilder(xml)
+    // const xmlContent = builder
+    // console.log(xmlContent, 'xmlContent')
+    // console.log(xml2js, 'convertconvertconvert')
+    previewResult.value = rootNodes.parent?.toJSON() as unknown as string
+    // previewResult.value = jObj
+    // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
+    previewType.value = 'json'
+    previewModelVisible.value = true
+  })
+}
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+const processSave = async () => {
+  console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
+  const { err, xml } = await bpmnModeler.saveXML()
+  console.log(err, 'errerrerrerrerr')
+  console.log(xml, 'xmlxmlxmlxmlxml')
+  // 读取异常时抛出异常
+  if (err) {
+    // this.$modal.msgError('保存模型失败，请重试！')
+    alert('保存模型失败，请重试！')
+    return
+  }
+  // 触发 save 事件
+  emit('save', xml)
+}
+/** 高亮显示 */
+// const highlightedCode = (previewType, previewResult) => {
+//   console.log(previewType, 'previewType, previewResult')
+//   console.log(previewResult, 'previewType, previewResult')
+//   console.log(hljs.highlight, 'hljs.highlight')
+//   const result = hljs.highlight(previewType, previewResult.value || '', true)
+//   return result.value || '&nbsp;'
+// }
+onBeforeMount(() => {
+  console.log(props, 'propspropspropsprops')
+})
+onMounted(() => {
+  initBpmnModeler()
+  createNewDiagram(props.value)
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+</script>

src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessViewer">
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+const props = defineProps({
+  value: {
+    // BPMN XML 字符串
+    type: String,
+    default: ''
+  },
+  prefix: {
+    // 使用哪个引擎
+    type: String,
+    default: 'camunda'
+  },
+  activityData: {
+    // 活动的数据。传递时，可高亮流程
+    type: Array,
+    default: () => []
+  },
+  processInstanceData: {
+    // 流程实例的数据。传递时，可展示流程发起人等信息
+    type: Object,
+    default: () => {}
+  },
+  taskData: {
+    // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
+    type: Array,
+    default: () => []
+  }
+})
+
+provide('configGlobal', props)
+
+const emit = defineEmits(['destroy'])
+
+let bpmnModeler
+
+const xml = ref('')
+const activityLists = ref<any[]>([])
+const processInstance = ref<any>(undefined)
+const taskList = ref<any[]>([])
+const bpmnCanvas = ref()
+// const element = ref()
+const elementOverlayIds = ref<any>(null)
+const overlays = ref<any>(null)
+
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  bpmnModeler = new BpmnViewer({
+    container: bpmnCanvas.value,
+    bpmnRenderer: {}
+  })
+}
+
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  // 将字符串转换成图显示出来
+  let newId = `Process_${new Date().getTime()}`
+  let newName = `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+    // 高亮流程图
+    await highlightDiagram()
+    const canvas = bpmnModeler.get('canvas')
+    canvas.zoom('fit-viewport', 'auto')
+  } catch (e) {
+    console.error(e)
+    // console.error(`[Process Designer Warn]: ${e?.message || e}`);
+  }
+}
+/* 高亮流程图 */
+// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
+const highlightDiagram = async () => {
+  const activityList = activityLists.value
+  if (activityList.length === 0) {
+    return
+  }
+  // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
+  // 再次基础上，增加不同审批结果的颜色等等
+  let canvas = bpmnModeler.get('canvas')
+  let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
+  let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
+  // debugger
+  bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
+    let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
+    if (!activity) {
+      return
+    }
+    if (n.$type === 'bpmn:UserTask') {
+      // 用户任务
+      // 处理用户任务的高亮
+      const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      // 高亮任务
+      canvas.addMarker(n.id, getResultCss(task.result))
+
+      // 如果非通过，就不走后面的线条了
+      if (task.result !== 2) {
+        return
+      }
+      // 处理 outgoing 出线
+      const outgoing = getActivityOutgoing(activity)
+      outgoing?.forEach((nn: any) => {
+        // debugger
+        let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
+        // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
+        if (targetActivity) {
+          canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
+          canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          if (!todoActivity && endActivity.key === n.id) {
+            canvas.addMarker(nn.id, 'highlight')
+            canvas.addMarker(nn.targetRef.id, 'highlight')
+          }
+          if (!activity.endTime) {
+            canvas.addMarker(nn.id, 'highlight-todo')
+            canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+          }
+        }
+      })
+    } else if (n.$type === 'bpmn:ExclusiveGateway') {
+      // 排它网关
+      // 设置【bpmn:ExclusiveGateway】排它网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      // 查找需要高亮的连线
+      let matchNN: any = undefined
+      let matchActivity: any = undefined
+      n.outgoing?.forEach((nn: any) => {
+        let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+        if (!targetActivity) {
+          return
+        }
+        // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
+        //  1. 一个是 UserTask => EndEvent
+        //  2. 一个是 EndEvent
+        // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
+        // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
+        if (!matchActivity || matchActivity.type === 'endEvent') {
+          matchNN = nn
+          matchActivity = targetActivity
+        }
+      })
+      if (matchNN && matchActivity) {
+        canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
+      }
+    } else if (n.$type === 'bpmn:ParallelGateway') {
+      // 并行网关
+      // 设置【bpmn:ParallelGateway】并行网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      n.outgoing?.forEach((nn: any) => {
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
+          // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
+          canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
+        }
+      })
+    } else if (n.$type === 'bpmn:StartEvent') {
+      // 开始节点
+      n.outgoing?.forEach((nn) => {
+        // outgoing 例如说【bpmn:SequenceFlow】连线
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
+          canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
+        }
+      })
+    } else if (n.$type === 'bpmn:EndEvent') {
+      // 结束节点
+      if (!processInstance.value || processInstance.value.result === 1) {
+        return
+      }
+      canvas.addMarker(n.id, getResultCss(processInstance.value.result))
+    } else if (n.$type === 'bpmn:ServiceTask') {
+      //服务任务
+      if (activity.startTime > 0 && activity.endTime === 0) {
+        //进入执行，标识进行色
+        canvas.addMarker(n.id, getResultCss(1))
+      }
+      if (activity.endTime > 0) {
+        // 执行完成，节点标识完成色, 所有outgoing标识完成色。
+        canvas.addMarker(n.id, getResultCss(2))
+        const outgoing = getActivityOutgoing(activity)
+        outgoing?.forEach((out) => {
+          canvas.addMarker(out.id, getResultCss(2))
+        })
+      }
+    }
+  })
+}
+const getActivityHighlightCss = (activity) => {
+  return activity.endTime ? 'highlight' : 'highlight-todo'
+}
+const getResultCss = (result) => {
+  if (result === 1) {
+    // 审批中
+    return 'highlight-todo'
+  } else if (result === 2) {
+    // 已通过
+    return 'highlight'
+  } else if (result === 3) {
+    // 不通过
+    return 'highlight-reject'
+  } else if (result === 4) {
+    // 已取消
+    return 'highlight-cancel'
+  }
+  return ''
+}
+
+const getActivityOutgoing = (activity) => {
+  // 如果有 outgoing，则直接使用它
+  if (activity.outgoing && activity.outgoing.length > 0) {
+    return activity.outgoing
+  }
+  // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
+  const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
+  const outgoing: any[] = []
+  flowElements.forEach((item: any) => {
+    if (item.$type !== 'bpmn:SequenceFlow') {
+      return
+    }
+    if (item.sourceRef.id === activity.key) {
+      outgoing.push(item)
+    }
+  })
+  return outgoing
+}
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  // 注册需要的监听事件
+  EventBus.on('element.hover', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementHover(element)
+  })
+  EventBus.on('element.out', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementOut(element)
+  })
+}
+// 流程图的元素被 hover
+const elementHover = (element) => {
+  element.value = element
+  !elementOverlayIds.value && (elementOverlayIds.value = {})
+  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
+  // 展示信息
+  console.log(activityLists.value, 'activityLists.value')
+  console.log(element.value, 'element.value')
+  const activity = activityLists.value.find((m) => m.key === element.value.id)
+  console.log(activity, 'activityactivityactivityactivity')
+  // if (!activity) {
+  //   return
+  // }
+  if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
+    let html = `<div class="element-overlays">
+            <p>Elemet id: ${element.value.id}</p>
+            <p>Elemet type: ${element.value.type}</p>
+          </div>` // 默认值
+    if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
+      html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
+                  <p>部门：${processInstance.value.startUser.deptName}</p>
+                  <p>创建时间：${parseTime(processInstance.value.createTime)}`
+    } else if (element.value.type === 'bpmn:UserTask') {
+      // debugger
+      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let dataResult = ''
+      optionData.forEach((element) => {
+        if (element.value == task.result) {
+          dataResult = element.label
+        }
+      })
+      html = `<p>审批人：${task.assigneeUser.nickname}</p>
+                  <p>部门：${task.assigneeUser.deptName}</p>
+                  <p>结果：${dataResult}</p>
+                  <p>创建时间：${parseTime(task.createTime)}</p>`
+      // html = `<p>审批人：${task.assigneeUser.nickname}</p>
+      //             <p>部门：${task.assigneeUser.deptName}</p>
+      //             <p>结果：${getIntDictOptions(
+      //               DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      //               task.result
+      //             )}</p>
+      //             <p>创建时间：${parseTime(task.createTime)}</p>`
+      if (task.endTime) {
+        html += `<p>结束时间：${parseTime(task.endTime)}</p>`
+      }
+      if (task.reason) {
+        html += `<p>审批建议：${task.reason}</p>`
+      }
+    } else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
+      if (activity.startTime > 0) {
+        html = `<p>创建时间：${parseTime(activity.startTime)}</p>`
+      }
+      if (activity.endTime > 0) {
+        html += `<p>结束时间：${parseTime(activity.endTime)}</p>`
+      }
+      console.log(html)
+    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let dataResult = ''
+      optionData.forEach((element) => {
+        if (element.value == processInstance.value.result) {
+          dataResult = element.label
+        }
+      })
+      html = `<p>结果：${dataResult}</p>`
+      // html = `<p>结果：${getIntDictOptions(
+      //   DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      //   processInstance.value.result
+      // )}</p>`
+      if (processInstance.value.endTime) {
+        html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
+      }
+    }
+    console.log(html, 'html111111111111111')
+    elementOverlayIds.value[element.value.id] = toRaw(overlays.value).add(element.value, {
+      position: { left: 0, bottom: 0 },
+      html: `<div class="element-overlays">${html}</div>`
+    })
+  }
+}
+// 流程图的元素被 out
+const elementOut = (element) => {
+  toRaw(overlays.value).remove({ element })
+  elementOverlayIds.value[element.id] = null
+}
+const parseTime = (time) => {
+  if (!time) {
+    return null
+  }
+  const format = '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time
+        .replace(new RegExp(/-/gm), '/')
+        .replace('T', ' ')
+        .replace(new RegExp(/\.[\d]{3}/gm), '')
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+onMounted(() => {
+  xml.value = props.value
+  activityLists.value = props.activityData
+  // 初始化
+  initBpmnModeler()
+  createNewDiagram(xml.value)
+  // 初始模型的监听器
+  initModelListeners()
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+
+watch(
+  () => props.value,
+  (newValue) => {
+    xml.value = newValue
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.activityData,
+  (newActivityData) => {
+    activityLists.value = newActivityData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.processInstanceData,
+  (newProcessInstanceData) => {
+    processInstance.value = newProcessInstanceData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.taskData,
+  (newTaskListData) => {
+    taskList.value = newTaskListData
+    createNewDiagram(xml.value)
+  }
+)
+</script>
+
+<style>
+/** 处理中 */
+.highlight-todo.djs-connection > .djs-visual > path {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
+}
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+/** 通过 */
+.highlight.djs-shape .djs-visual > :nth-child(1) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight.djs-shape .djs-visual > :nth-child(2) {
+  fill: green !important;
+}
+.highlight.djs-shape .djs-visual > path {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+.highlight.djs-connection > .djs-visual > path {
+  stroke: green !important;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: green !important; /* color elements as green */
+}
+
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
+  fill: green !important;
+}
+:deep(.highlight.djs-shape .djs-visual > path) {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+:deep(.highlight.djs-connection > .djs-visual > path) {
+  stroke: green !important;
+}
+
+/** 不通过 */
+.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+  fill: red !important;
+}
+.highlight-reject.djs-shape .djs-visual > path {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+.highlight-reject.djs-connection > .djs-visual > path {
+  stroke: red !important;
+}
+
+.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: red !important; /* color elements as green */
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
+  fill: red !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
+  stroke: red !important;
+}
+
+/** 已取消 */
+.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+  fill: grey !important;
+}
+.highlight-cancel.djs-shape .djs-visual > path {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+.highlight-cancel.djs-connection > .djs-visual > path {
+  stroke: grey !important;
+}
+
+.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: grey !important; /* color elements as green */
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
+  fill: grey !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
+  stroke: grey !important;
+}
+
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+  width: 200px;
+}
+</style>

src/components/bpmnProcessDesigner/package/designer/index.ts

@@ -0,0 +1,8 @@
+import MyProcessDesigner from './ProcessDesigner.vue'
+
+MyProcessDesigner.install = function (Vue) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner)
+}
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner

src/components/bpmnProcessDesigner/package/designer/index2.ts

@@ -0,0 +1,8 @@
+import MyProcessViewer from './ProcessViewer.vue'
+
+MyProcessViewer.install = function (Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer)
+}
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer

src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js

@@ -0,0 +1,423 @@
+import { assign, forEach, isArray } from 'min-dash'
+
+import { is } from 'bpmn-js/lib/util/ModelUtil'
+
+import { isExpanded, isEventSubProcess } from 'bpmn-js/lib/util/DiUtil'
+
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
+
+import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil'
+
+import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse'
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider(
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate
+) {
+  config = config || {}
+
+  contextPad.registerProvider(this)
+
+  this._contextPad = contextPad
+
+  this._modeling = modeling
+
+  this._elementFactory = elementFactory
+  this._connect = connect
+  this._create = create
+  this._popupMenu = popupMenu
+  this._canvas = canvas
+  this._rules = rules
+  this._translate = translate
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false)
+  }
+
+  eventBus.on('create.end', 250, function (event) {
+    const context = event.context,
+      shape = context.shape
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return
+    }
+
+    const entries = contextPad.getEntries(shape)
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape)
+    }
+  })
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'popupMenu',
+  'canvas',
+  'rules',
+  'translate',
+  'elementRegistry'
+]
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const contextPad = this._contextPad,
+    modeling = this._modeling,
+    elementFactory = this._elementFactory,
+    connect = this._connect,
+    create = this._create,
+    popupMenu = this._popupMenu,
+    canvas = this._canvas,
+    rules = this._rules,
+    autoPlace = this._autoPlace,
+    translate = this._translate
+
+  const actions = {}
+
+  if (element.type === 'label') {
+    return actions
+  }
+
+  const businessObject = element.businessObject
+
+  function startConnect(event, element) {
+    connect.start(event, element)
+  }
+
+  function removeElement() {
+    modeling.removeElements([element])
+  }
+
+  function getReplaceMenuPosition(element) {
+    const Y_OFFSET = 5
+
+    const diagramContainer = canvas.getContainer(),
+      pad = contextPad.getPad(element).html
+
+    const diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect()
+
+    const top = padRect.top - diagramRect.top
+    const left = padRect.left - diagramRect.left
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET
+    }
+
+    return pos
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+    if (typeof title !== 'string') {
+      options = title
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') })
+    }
+
+    function appendStart(event, element) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+      create.start(event, shape, {
+        source: element
+      })
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+          const shape = elementFactory.createShape(assign({ type: type }, options))
+
+          autoPlace.append(element, shape)
+        }
+      : appendStart
+
+    return {
+      group: 'model',
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    }
+  }
+
+  function splitLaneHandler(count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count)
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true)
+    }
+  }
+
+  if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) && isExpanded(businessObject)) {
+    const childLanes = getChildLanes(element)
+
+    assign(actions, {
+      'lane-insert-above': {
+        group: 'lane-insert-above',
+        className: 'bpmn-icon-lane-insert-above',
+        title: translate('Add Lane above'),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, 'top')
+          }
+        }
+      }
+    })
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: translate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2)
+            }
+          }
+        })
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: translate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3)
+            }
+          }
+        })
+      }
+    }
+
+    assign(actions, {
+      'lane-insert-below': {
+        group: 'lane-insert-below',
+        className: 'bpmn-icon-lane-insert-below',
+        title: translate('Add Lane below'),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, 'bottom')
+          }
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+      assign(actions, {
+        'append.receive-task': appendAction(
+          'bpmn:ReceiveTask',
+          'bpmn-icon-receive-task',
+          translate('Append ReceiveTask')
+        ),
+        'append.message-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-message',
+          translate('Append MessageIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:MessageEventDefinition' }
+        ),
+        'append.timer-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-timer',
+          translate('Append TimerIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:TimerEventDefinition' }
+        ),
+        'append.condition-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-condition',
+          translate('Append ConditionIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
+        ),
+        'append.signal-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-signal',
+          translate('Append SignalIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:SignalEventDefinition' }
+        )
+      })
+    } else if (
+      isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')
+    ) {
+      assign(actions, {
+        'append.compensation-activity': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task',
+          translate('Append compensation activity'),
+          {
+            isForCompensation: true
+          }
+        )
+      })
+    } else if (
+      !is(businessObject, 'bpmn:EndEvent') &&
+      !businessObject.isForCompensation &&
+      !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
+      !isEventSubProcess(businessObject)
+    ) {
+      assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          translate('Append EndEvent')
+        ),
+        'append.gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-none',
+          translate('Append Gateway')
+        ),
+        'append.append-task': appendAction(
+          'bpmn:UserTask',
+          'bpmn-icon-user-task',
+          translate('Append Task')
+        ),
+        'append.intermediate-event': appendAction(
+          'bpmn:IntermediateThrowEvent',
+          'bpmn-icon-intermediate-event-none',
+          translate('Append Intermediate/Boundary Event')
+        )
+      })
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    // Replace menu entry
+    assign(actions, {
+      replace: {
+        group: 'edit',
+        className: 'bpmn-icon-screw-wrench',
+        title: '修改类型',
+        action: {
+          click: function (event, element) {
+            const position = assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y }
+            })
+
+            popupMenu.open(element, 'bpmn-replace', position)
+          }
+        }
+      }
+    })
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:FlowNode',
+      'bpmn:InteractionNode',
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference'
+    ])
+  ) {
+    assign(actions, {
+      'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation'),
+
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate(
+          'Connect using ' +
+            (businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') +
+            'Association'
+        ),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ['bpmn:DataObjectReference', 'bpmn:DataStoreReference'])) {
+    assign(actions, {
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using DataInputAssociation'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, 'bpmn:Group')) {
+    assign(actions, {
+      'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
+    })
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
+
+  if (isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element
+  }
+
+  if (deleteAllowed) {
+    assign(actions, {
+      delete: {
+        group: 'edit',
+        className: 'bpmn-icon-trash',
+        title: translate('Remove'),
+        action: {
+          click: removeElement
+        }
+      }
+    })
+  }
+
+  return actions
+}
+
+// helpers /////////
+
+function isEventType(eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type)
+  let isDefinition = false
+
+  const definitions = eventBo.eventDefinitions || []
+  forEach(definitions, function (def) {
+    if (def.$type === definition) {
+      isDefinition = true
+    }
+  })
+
+  return isType && isDefinition
+}

src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js

@@ -0,0 +1,6 @@
+import CustomContextPadProvider from './contentPadProvider'
+
+export default {
+  __init__: ['contextPadProvider'],
+  contextPadProvider: ['type', CustomContextPadProvider]
+}

src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js

@@ -0,0 +1,24 @@
+export default (key, name, type) => {
+  if (!type) type = 'camunda'
+  const TYPE_TARGET = {
+    activiti: 'http://activiti.org/bpmn',
+    camunda: 'http://bpmn.io/schema/bpmn',
+    flowable: 'http://flowable.org/bpmn'
+  }
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions 
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`
+}

src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json

@@ -0,0 +1,994 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name": "executionListener",
+          "isAbstract": true,
+          "type": "Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["activiti:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "activiti:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "activiti:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}

src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js

@@ -0,0 +1,83 @@
+'use strict'
+
+import { some } from 'min-dash'
+
+// const some = require('min-dash').some
+// const some = some
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity'
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is(element, type) {
+  return element && typeof element.$instanceOf === 'function' && element.$instanceOf(type)
+}
+
+function exists(element) {
+  return element && element.length
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType(element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function ActivitiModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+ActivitiModdleExtension.$inject = ['eventBus']
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed('activiti:FailedJobRetryTimeCycle', propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(newElement.loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')
+    )
+  }
+
+  if (isAllowed('activiti:Connector', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+
+  if (isAllowed('activiti:Field', propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, 'bpmn:MessageEventDefinition')
+  }
+}
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension

src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js

@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from './activitiExtension'
+
+export default {
+  __init__: ['ActivitiModdleExtension'],
+  ActivitiModdleExtension: ['type', activitiExtension]
+}

src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js

@@ -0,0 +1,151 @@
+'use strict'
+
+import { isFunction, isObject, some } from 'min-dash'
+
+// const isFunction = isFunction,
+//   isObject = isObject,
+//   some = some
+// const isFunction = require('min-dash').isFunction,
+//   isObject = require('min-dash').isObject,
+//   some = require('min-dash').some
+
+const WILDCARD = '*'
+
+function CamundaModdleExtension(eventBus) {
+  // eslint-disable-next-line @typescript-eslint/no-this-alias
+  const self = this
+
+  eventBus.on('moddleCopy.canCopyProperty', function (context) {
+    const property = context.property,
+      parent = context.parent
+
+    return self.canCopyProperty(property, parent)
+  })
+}
+
+CamundaModdleExtension.$inject = ['eventBus']
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, 'camunda:InputOutput') && !this.canHostInputOutput(parent)) {
+    return false
+  }
+
+  if (isAny(property, ['camunda:Connector', 'camunda:Field']) && !this.canHostConnector(parent)) {
+    return false
+  }
+
+  if (is(property, 'camunda:In') && !this.canHostIn(parent)) {
+    return false
+  }
+}
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector')
+
+  if (connector) {
+    return true
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode')
+
+  if (!flowNode) {
+    return false
+  }
+
+  if (isAny(flowNode, ['bpmn:StartEvent', 'bpmn:Gateway', 'bpmn:BoundaryEvent'])) {
+    return false
+  }
+
+  return !(is(flowNode, 'bpmn:SubProcess') && flowNode.get('triggeredByEvent'))
+}
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
+
+  if (is(serviceTaskLike, 'bpmn:MessageEventDefinition')) {
+    // only allow on throw and end events
+    return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent')
+  }
+
+  return true
+}
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity')
+
+  if (callActivity) {
+    return true
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return getParent(parent, 'bpmn:IntermediateThrowEvent') || getParent(parent, 'bpmn:EndEvent')
+  }
+
+  return true
+}
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension
+
+// helpers //////////
+
+function is(element, type) {
+  return element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+}
+
+function isAny(element, types) {
+  return some(types, function (t) {
+    return is(element, t)
+  })
+}
+
+function getParent(element, type) {
+  if (!type) {
+    return element.$parent
+  }
+
+  if (is(element, type)) {
+    return element
+  }
+
+  if (!element.$parent) {
+    return
+  }
+
+  return getParent(element.$parent, type)
+}
+
+function isAllowedInParent(property, parent) {
+  // (1) find property descriptor
+  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true
+  }
+
+  // (2) check wether property has parent of allowed type
+  return some(allowedIn, function (type) {
+    return getParent(parent, type)
+  })
+}
+
+function isWildcard(allowedIn) {
+  return allowedIn.indexOf(WILDCARD) !== -1
+}

src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js

@@ -0,0 +1,8 @@
+'use strict'
+
+import extension from './extension'
+
+export default {
+  __init__: ['camundaModdleExtension'],
+  camundaModdleExtension: ['type', extension]
+}