diff --git a/src/assets/images/chart/decorates/clock.png b/src/assets/images/chart/decorates/clock.png
new file mode 100644
index 00000000..7ab6d718
Binary files /dev/null and b/src/assets/images/chart/decorates/clock.png differ
diff --git a/src/packages/components/Decorates/Mores/Clock/config.ts b/src/packages/components/Decorates/Mores/Clock/config.ts
new file mode 100644
index 00000000..a29bfaa2
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/Clock/config.ts
@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ClockConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+ border: 6,
+ color: '#ffffff',
+ bgColor: '#20b7af',
+ borderColor: '#ffffff'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = ClockConfig.key
+ public chartConfig = cloneDeep(ClockConfig)
+ public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Decorates/Mores/Clock/config.vue b/src/packages/components/Decorates/Mores/Clock/config.vue
new file mode 100644
index 00000000..c762b163
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/Clock/config.vue
@@ -0,0 +1,33 @@
+<template>
+ <CollapseItem name="时钟" expanded>
+ <SettingItemBox name="表盘">
+ <SettingItem name="背景色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
+ </SettingItem>
+ <SettingItem name="边框色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+ </SettingItem>
+ <SettingItem name="边框大小">
+ <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="指针">
+ <SettingItem name="颜色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+ </SettingItem>
+ </SettingItemBox>
+ </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+ optionData: {
+ type: Object as PropType<typeof option>,
+ required: true
+ }
+})
+</script>
diff --git a/src/packages/components/Decorates/Mores/Clock/index.ts b/src/packages/components/Decorates/Mores/Clock/index.ts
new file mode 100644
index 00000000..52c63130
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/Clock/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/clock.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ClockConfig: ConfigType = {
+ key: 'Clock',
+ chartKey: 'VClock',
+ conKey: 'VCClock',
+ title: '时钟',
+ category: ChatCategoryEnum.MORE,
+ categoryName: ChatCategoryEnumName.MORE,
+ package: PackagesCategoryEnum.DECORATES,
+ image
+}
diff --git a/src/packages/components/Decorates/Mores/Clock/index.vue b/src/packages/components/Decorates/Mores/Clock/index.vue
new file mode 100644
index 00000000..d71bbd36
--- /dev/null
+++ b/src/packages/components/Decorates/Mores/Clock/index.vue
@@ -0,0 +1,124 @@
+<template>
+ <div style="position: relative">
+ <svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`">
+ <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
+ <feOffset in="blur" dx="2.5" dy="2.5" />
+ </filter>
+
+ <!-- 表盘 -->
+ <g>
+ <circle
+ id="shadow"
+ style="fill: rgba(0, 0, 0, 0.1)"
+ cx="100"
+ cy="100"
+ r="87"
+ filter="url(#innerShadow)"
+ ></circle>
+ <circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
+ </g>
+
+ <!-- 指针 -->
+ <g>
+ <line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line">
+ <animateTransform
+ attributeName="transform"
+ attributeType="XML"
+ type="rotate"
+ dur="43200s"
+ repeatCount="indefinite"
+ :from="`${hoursAngle} 100 100`"
+ :to="`${hoursAngle + 360} 100 100`"
+ />
+ </line>
+ <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line">
+ <animateTransform
+ attributeName="transform"
+ attributeType="XML"
+ type="rotate"
+ dur="3600s"
+ repeatCount="indefinite"
+ :from="`${minuteAngle} 100 100`"
+ :to="`${minuteAngle + 360} 100 100`"
+ />
+ </line>
+ <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line">
+ <animateTransform
+ attributeName="transform"
+ attributeType="XML"
+ type="rotate"
+ dur="60s"
+ repeatCount="indefinite"
+ :from="`${secAngle} 100 100`"
+ :to="`${secAngle + 360} 100 100`"
+ />
+ </line>
+ </g>
+
+ <!-- 中心圆点 -->
+ <circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle>
+
+ <!-- 刻度线 -->
+ <line
+ x1="100"
+ y1="30"
+ x2="100"
+ y2="40"
+ class="clock-line"
+ :transform="`rotate(${((num + 1) * 360) / 12} 100 100)`"
+ v-for="num in 12"
+ :key="`line_${num + 1}`"
+ ></line>
+ </svg>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+ chartConfig: {
+ type: Object as PropType<CreateComponentType>,
+ required: true
+ }
+})
+
+let { border, color, bgColor, borderColor } = toRefs(props.chartConfig.option)
+
+// const border = ref(10)
+// const bgColor = ref('#20b7af')
+
+const date = new Date()
+const hoursAngle = (360 * date.getHours()) / 12 + date.getMinutes() / 2
+const minuteAngle = (360 * date.getMinutes()) / 60
+const secAngle = (360 * date.getSeconds()) / 60
+
+// watch(
+// () => props.chartConfig.option,
+// () => {
+// option.dataset = props.chartConfig.option.dataset
+// },
+// {
+// immediate: true,
+// deep: true
+// }
+// )
+</script>
+
+<style lang="scss" scoped>
+svg {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+.clock-border {
+ stroke: v-bind('borderColor');
+ stroke-width: v-bind('border+"px"');
+ fill: v-bind('bgColor');
+}
+.clock-line {
+ stroke: v-bind('color') !important;
+}
+</style>
diff --git a/src/packages/components/Decorates/Mores/index.ts b/src/packages/components/Decorates/Mores/index.ts
index 61863aa2..9aff3b7d 100644
--- a/src/packages/components/Decorates/Mores/index.ts
+++ b/src/packages/components/Decorates/Mores/index.ts
@@ -1,4 +1,5 @@
import { NumberConfig } from './Number/index'
import { TimeCommonConfig } from './TimeCommon/index'
+import { ClockConfig } from './Clock/index'
-export default [TimeCommonConfig, NumberConfig]
+export default [TimeCommonConfig, NumberConfig, ClockConfig]