diff --git a/core/core-frontend/src/custom-component/de-date/Attr.vue b/core/core-frontend/src/custom-component/de-date/Attr.vue
new file mode 100644
index 0000000000..8311d12ffc
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-date/Attr.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+
+import { storeToRefs } from 'pinia'
+import { ElIcon, ElMessage } from 'element-plus-secondary'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
+import { imgUrlTrans } from '@/utils/imgUtils'
+import eventBus from '@/utils/eventBus'
+import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
+
+withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
+
+const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
+
+const { curComponent } = storeToRefs(dvMainStore)
+
+const fileList = ref([])
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const uploadDisabled = ref(false)
+const files = ref(null)
+const maxImageSize = 15000000
+
+const handlePictureCardPreview = file => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+
+const handleRemove = (_, fileList) => {
+  uploadDisabled.value = false
+  curComponent.value.propValue.url = null
+  fileList.value = []
+  snapshotStore.recordSnapshotCache()
+}
+async function upload(file) {
+  uploadFileResult(file.file, fileUrl => {
+    snapshotStore.recordSnapshotCache()
+    curComponent.value.propValue.url = fileUrl
+  })
+}
+
+const goFile = () => {
+  files.value.click()
+}
+
+const reUpload = e => {
+  const file = e.target.files[0]
+  if (file.size > maxImageSize) {
+    sizeMessage()
+  }
+  uploadFileResult(file, fileUrl => {
+    snapshotStore.recordSnapshotCache()
+    curComponent.value.propValue.url = fileUrl
+    fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
+  })
+}
+
+const sizeMessage = () => {
+  ElMessage.success('图片大小不符合')
+}
+const init = () => {
+  if (curComponent.value.propValue.url) {
+    fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
+  } else {
+    fileList.value = []
+  }
+}
+
+watch(
+  () => curComponent.value.propValue.url,
+  () => {
+    init()
+  }
+)
+
+onMounted(() => {
+  init()
+  eventBus.on('uploadImg', goFile)
+})
+onBeforeUnmount(() => {
+  eventBus.off('uploadImg', goFile)
+})
+</script>
+
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr
+      :themes="themes"
+      :element="curComponent"
+      :background-color-picker-width="197"
+      :background-border-select-width="197"
+    >
+    </CommonAttr>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.de-collapse-style {
+  :deep(.ed-collapse-item__header) {
+    height: 36px !important;
+    line-height: 36px !important;
+    font-size: 12px !important;
+    padding: 0 !important;
+    font-weight: 500 !important;
+
+    .ed-collapse-item__arrow {
+      margin: 0 6px 0 8px;
+    }
+  }
+
+  :deep(.ed-collapse-item__content) {
+    padding: 16px 8px 0;
+  }
+  :deep(.ed-form-item) {
+    display: block;
+    margin-bottom: 8px;
+  }
+  :deep(.ed-form-item__label) {
+    justify-content: flex-start;
+  }
+}
+
+.disabled :deep(.el-upload--picture-card) {
+  display: none;
+}
+
+.avatar-uploader :deep(.ed-upload) {
+  width: 80px;
+  height: 80px;
+  line-height: 90px;
+}
+
+.avatar-uploader :deep(.ed-upload-list li) {
+  width: 80px !important;
+  height: 80px !important;
+}
+
+:deep(.ed-upload--picture-card) {
+  background: #eff0f1;
+  border: 1px dashed #dee0e3;
+  border-radius: 4px;
+
+  .ed-icon {
+    color: #1f2329;
+  }
+
+  &:hover {
+    .ed-icon {
+      color: var(--ed-color-primary);
+    }
+  }
+}
+.img-area {
+  height: 80px;
+  width: 80px;
+  margin-top: 10px;
+  overflow: hidden;
+
+  &.img-area_dark {
+    :deep(.ed-upload-list__item).is-success {
+      border-color: #434343;
+    }
+    :deep(.ed-upload--picture-card) {
+      background: #373737;
+      border-color: #434343;
+      .ed-icon {
+        color: #ebebeb;
+      }
+      &:hover {
+        .ed-icon {
+          color: var(--ed-color-primary);
+        }
+      }
+    }
+  }
+
+  &.img-area_light {
+    :deep(.ed-upload-list__item).is-success {
+      border-color: #dee0e3;
+    }
+  }
+}
+
+.image-hint {
+  color: #8f959e;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+  margin-top: 2px;
+  &.image-hint_dark {
+    color: #757575;
+  }
+}
+
+.re-update-span {
+  cursor: pointer;
+  color: var(--ed-color-primary);
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/de-date/Component.vue b/core/core-frontend/src/custom-component/de-date/Component.vue
new file mode 100644
index 0000000000..1e87c57448
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-date/Component.vue
@@ -0,0 +1,53 @@
+<template>
+  <div style="height: 100%">
+    <time-default
+      v-if="element?.formatInfo?.openMode === '0'"
+      :ref="element.id"
+      :element="element"
+    />
+
+    <time-elec v-if="element?.formatInfo?.openMode === '1'" :ref="element.id" :element="element" />
+
+    <time-simple
+      v-if="element?.formatInfo?.openMode === '2'"
+      :ref="element.id"
+      :element="element"
+    />
+
+    <time-complex
+      v-if="element?.formatInfo?.openMode === '3'"
+      :ref="element.id"
+      :element="element"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, toRefs } from 'vue'
+import { getCurrentInstance, onMounted } from 'vue/dist/vue'
+const props = defineProps({
+  element: {
+    type: Object
+  }
+})
+const { element } = toRefs(props)
+
+
+let currentInstance
+const timeMargin = computed(() => {
+  return element.value.style.time_margin
+})
+
+onMounted(() => {
+  currentInstance = getCurrentInstance()
+})
+
+const chartResize = () => {
+  const dataRefs = currentInstance.proxy
+  nextTick(() => {
+    dataRefs.$refs[element.value.id] &&
+      dataRefs.$refs[element.value.id].resize &&
+      dataRefs.$refs[element.value.id].resize()
+  })
+}
+</script>
diff --git a/core/core-frontend/src/custom-component/de-date/TimeComplex.vue b/core/core-frontend/src/custom-component/de-date/TimeComplex.vue
new file mode 100644
index 0000000000..80d869e4d9
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-date/TimeComplex.vue
@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <canvas :id="'complex_canvas' + element.id" width="500" height="500" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs } from 'vue/dist/vue'
+import { getCurrentInstance, onMounted, reactive } from 'vue'
+
+let milliseconds = 0
+let minutes = 0
+let hour = 0
+let date = ''
+
+const props = defineProps({
+  element: {
+    type: Object
+  }
+})
+const { element } = toRefs(props)
+
+const state = reactive({
+  time: '',
+  date: '',
+  week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+  canvas: null,
+  ctx: null,
+  ctxBack: null,
+  numBack: null,
+  timer: null
+})
+
+const currentTime = () => {
+  state.timer = setInterval(pageInit, 500)
+}
+const initCtx = () => {
+  state.ctx = state.canvas.getContext('2d')
+  state.ctx.strokeStyle = '#7FFFD4'
+  state.ctx.lineWidth = 3
+  state.ctx.shadowBlur = 5
+  state.ctx.shadowColor = '#7FFFD4'
+}
+const initCtxBack = () => {
+  state.ctxBack = state.canvas.getContext('2d')
+  state.ctxBack.lineWidth = 1
+  state.ctxBack.shadowBlur = 0
+  state.ctxBack.shadowColor = '#F0F8FF'
+}
+const initNumBack = () => {
+  state.numBack = state.canvas.getContext('2d')
+}
+const pageInit = () => {
+    showTime()
+    showBack()
+    drawSecPin()
+    drawMinPin()
+    drawHouPin()
+    setPoint()
+    setNum()
+  },
+  setNum = () => {
+    state.numBack.save()
+    state.numBack.translate(250, 250)
+    state.numBack.beginPath()
+    state.numBack.fillStyle = '#7FFFD4'
+    state.numBack.font = '30px Helvetica'
+    for (let i = 0; i < 60; i++) {
+      if (i % 5 === 0) {
+        state.numBack.lineWidth = 5
+        let xPoint = Math.sin((i * 6 * 2 * Math.PI) / 360) * 195
+        let yPoint = -Math.cos((i * 6 * 2 * Math.PI) / 360) * 195
+        state.numBack.fillText(
+          i === 0 ? 12 : i / 5,
+          i === 0 ? -15 : xPoint - 10,
+          i === 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10
+        )
+      }
+    }
+    state.numBack.stroke()
+    state.numBack.closePath()
+    state.numBack.restore()
+  }
+
+const drawSecPin = () => {
+  state.ctxBack.save()
+  state.ctxBack.translate(250, 250)
+  state.ctxBack.rotate((milliseconds / 60) * 2 * Math.PI)
+  state.ctxBack.beginPath()
+  state.ctxBack.strokeStyle = '#AFEEEE'
+  state.ctxBack.lineWidth = 1
+  state.ctxBack.lineJoin = 'bevel'
+  state.ctxBack.miterLimit = 10
+  state.ctxBack.moveTo(0, 30)
+  state.ctxBack.lineTo(3, -175)
+  state.ctxBack.lineTo(13, -165)
+  state.ctxBack.lineTo(0, -210)
+  state.ctxBack.lineTo(-13, -165)
+  state.ctxBack.lineTo(-3, -175)
+  state.ctxBack.lineTo(0, 30)
+  state.ctxBack.stroke()
+  state.ctxBack.closePath()
+  state.ctxBack.restore()
+}
+
+const drawMinPin = () => {
+  state.ctxBack.save()
+  state.ctxBack.translate(250, 250)
+  state.ctxBack.rotate((minutes * 6 * Math.PI) / 180)
+  state.ctxBack.beginPath()
+  state.ctxBack.strokeStyle = '#20B2AA'
+  state.ctxBack.lineWidth = 1
+  state.ctxBack.lineJoin = 'bevel'
+  state.ctxBack.miterLimit = 10
+  state.ctxBack.moveTo(0, 20)
+  state.ctxBack.lineTo(3, -145)
+  state.ctxBack.lineTo(10, -135)
+  state.ctxBack.lineTo(0, -180)
+  state.ctxBack.lineTo(-10, -135)
+  state.ctxBack.lineTo(-3, -145)
+  state.ctxBack.lineTo(0, 20)
+  state.ctxBack.stroke()
+  state.ctxBack.closePath()
+  state.ctxBack.restore()
+}
+
+const drawHouPin = () => {
+  state.ctxBack.save()
+  state.ctxBack.translate(250, 250)
+  state.ctxBack.rotate((hour * 30 * Math.PI) / 180)
+  state.ctxBack.beginPath()
+  state.ctxBack.strokeStyle = '#87CEFA'
+  state.ctxBack.lineWidth = 1
+  state.ctxBack.lineJoin = 'bevel'
+  state.ctxBack.miterLimit = 10
+  state.ctxBack.moveTo(0, 20)
+  state.ctxBack.lineTo(3, -110)
+  state.ctxBack.lineTo(10, -100)
+  state.ctxBack.lineTo(0, -150)
+  state.ctxBack.lineTo(-10, -100)
+  state.ctxBack.lineTo(-3, -110)
+  state.ctxBack.lineTo(0, 20)
+  state.ctxBack.stroke()
+  state.ctxBack.closePath()
+  state.ctxBack.restore()
+}
+
+const setPoint = () => {
+  state.ctxBack.beginPath()
+  state.ctxBack.fillStyle = 'black'
+  state.ctxBack.arc(250, 250, 3, 0, 2 * Math.PI)
+  state.ctxBack.stroke()
+}
+
+const showBack = () => {
+  for (let i = 0; i < 60; i++) {
+    state.ctxBack.save()
+    state.ctxBack.translate(250, 250)
+    state.ctxBack.rotate((i / 60) * 2 * Math.PI)
+    state.ctxBack.beginPath()
+    state.ctxBack.strokeStyle = '#7FFFD4'
+    state.ctxBack.moveTo(0, -250)
+    state.ctxBack.lineWidth = i % 5 === 0 ? 5 : 2
+    state.ctxBack.lineTo(0, -230)
+    state.ctxBack.stroke()
+    state.ctxBack.closePath()
+    state.ctxBack.restore()
+  }
+  state.ctxBack.beginPath()
+  state.ctxBack.arc(250, 250, 230, 0, 2 * Math.PI)
+  state.ctxBack.stroke()
+}
+
+const degToRad = degree => {
+  let result
+  let factor = Math.PI / 180
+  if (degree === 0) {
+    result = 270 * factor
+  } else {
+    result = degree * factor
+  }
+  return result
+}
+
+const showTime = () => {
+  let now = new Date()
+  let today = now.toLocaleDateString()
+  let time = now.toLocaleTimeString()
+  let day = now.getDay()
+  let hrs = now.getHours()
+  let min = now.getMinutes()
+  let sec = now.getSeconds()
+  let mil = now.getMilliseconds()
+  let smoothsec = sec + mil / 1000
+  let smoothmin = min + smoothsec / 60
+  let hours = hrs + smoothmin / 60
+  milliseconds = smoothsec
+  minutes = smoothmin
+  hour = hours
+  switch (day) {
+    case 1:
+      date = '一'
+      break
+    case 2:
+      date = '二'
+      break
+    case 3:
+      date = '三'
+      break
+    case 4:
+      date = '四'
+      break
+    case 5:
+      date = '五'
+      break
+    case 6:
+      date = '六'
+      break
+    case 0:
+      date = '日'
+      break
+  }
+  const gradient = state.ctx.createRadialGradient(250, 250, 5, 250, 250, 300)
+  gradient.addColorStop(0, '#03303a')
+  gradient.addColorStop(1, 'black')
+  state.ctx.fillStyle = gradient
+  state.ctx.fillRect(0, 0, 500, 500)
+  state.ctx.beginPath()
+  state.ctx.strokeStyle = '#87CEFA'
+  state.ctx.arc(250, 250, 215, degToRad(0), degToRad(hours * 30 - 90))
+  state.ctx.stroke()
+  state.ctx.beginPath()
+  state.ctx.strokeStyle = '#20B2AA'
+  state.ctx.arc(250, 250, 220, degToRad(0), degToRad(smoothmin * 6 - 90))
+  state.ctx.stroke()
+  state.ctx.beginPath()
+  state.ctx.strokeStyle = '#AFEEEE'
+  state.ctx.arc(250, 250, 225, degToRad(0), degToRad(smoothsec * 6 - 90))
+  state.ctx.stroke()
+  state.ctx.font = '25px Helvetica Bold'
+  state.ctx.fillStyle = '#7FFFD4'
+  state.ctx.fillText(today + '/星期' + date, 150, 230)
+  state.ctx.font = '23px Helvetica Bold'
+  state.ctx.fillStyle = '#7FFFD4'
+  state.ctx.fillText(time, 190, 280)
+}
+
+onMounted(() => {
+  state.canvas = document.getElementById('complex_canvas' + element.value.id)
+  initCtx()
+  initCtxBack()
+  initNumBack()
+  currentTime()
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/core/core-frontend/src/custom-component/de-date/TimeDefault.vue b/core/core-frontend/src/custom-component/de-date/TimeDefault.vue
new file mode 100644
index 0000000000..eeb29e1cf9
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-date/TimeDefault.vue
@@ -0,0 +1,67 @@
+<template>
+  <div
+    style="display: flex; align-items: center"
+    :style="{ height: containerHeight, margin: timeMargin + 'px' }"
+  >
+    <p style="width: 100%; margin: auto">{{ nowDate }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, onUnmounted, reactive, toRefs } from 'vue'
+
+const props = defineProps({
+  element: {
+    type: Object
+  }
+})
+
+const { element } = toRefs(props)
+const state = reactive({
+  nowDate: '', // 当前日期
+  nowWeek: '',
+  timer: null
+})
+const timeMargin = computed(() => {
+  return element.value.style.time_margin
+})
+
+const containerHeight = computed(() => {
+  return 'calc(100% - ' + element.value.style.time_margin * 2 + 'px)'
+})
+
+const currentTime = () => {
+  state.timer = setInterval(formatDate, 500)
+}
+const formatDate = () => {
+  const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+  let timeFormat = element.value.formatInfo.timeFormat
+  const showWeek = element.value.formatInfo.showWeek
+  const showDate = element.value.formatInfo.showDate
+  const dateFormat = element.value.formatInfo.dateFormat || 'yyyy-MM-dd'
+  if (showDate && dateFormat) {
+    timeFormat = dateFormat + ' ' + timeFormat
+  }
+
+  const date = new Date()
+
+  state.nowDate = date.format(timeFormat)
+
+  if (showWeek) {
+    state.nowWeek = weekArr[date.getDay()]
+    state.nowDate = state.nowDate + ' ' + state.nowWeek
+  }
+}
+
+onMounted(() => {
+  currentTime()
+})
+
+onUnmounted(() => {
+  if (state.timer) {
+    clearInterval(state.timer) // 在Vue实例销毁前，清除时间定时器
+  }
+})
+</script>
+
+<style lang="less" scoped></style>