feat: 新增 clock 小组件

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)
+}

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>

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
+}

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>

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]