!59 feat: 新增 标题装饰 和 时钟 组件

Merge pull request !59 from dodu/dev-clock

src/packages/components/Decorates/Decorates/Decorates03/config.ts

@@ -2,16 +2,18 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates03Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '我是标题',
   textColor: '#fff',
   textSize: 32,
-  colors: ['#1dc1f5', '#1dc1f5'],
+  colors: ['#1dc1f5', '#1dc1f5']
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates03Config.key
+  public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
   public chartConfig = cloneDeep(Decorates03Config)
   public option = cloneDeep(option)
 }

src/packages/components/Decorates/Decorates/Decorates06/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates06Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1DC1F533', '#1DC1F5FF'],
+  dataset: '我是标题',
+  textColor: '#fff',
+  textSize: 32
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates06Config.key
+  public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
+  public chartConfig = cloneDeep(Decorates06Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Decorates/Decorates06/config.vue

@@ -0,0 +1,42 @@
+<template>
+  <CollapseItem name="内容" expanded>
+    <SettingItemBox name="文字" alone>
+      <SettingItem>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="样式" expanded>
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colors" :key="index">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colors[index]"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.colors[index] = option.colors[index]"> 恢复默认 </n-button>
+      </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/Decorates/Decorates06/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates06.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates06Config: ConfigType = {
+  key: 'Decorates06',
+  chartKey: 'VDecorates06',
+  conKey: 'VCDecorates06',
+  title: '装饰-06',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Decorates/Decorates06/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="go-border-06">
+    <svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
+      <polygon class="stroke fill" :points="`15.5 6.5 20.5 0.5 50.5 0.5 55.5 6.5 15.5 6.5`" />
+      <polygon
+        class="stroke fill"
+        :points="`15.5 ${h - 6.5} 20.5 ${h - 0.5} 50.5 ${h - 0.5} 55.5 ${h - 6.5} 15.5 ${h - 6.5}`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`${w - 15.5} 6.5 ${w - 20.5} 0.5 ${w - 50.5} 0.5 ${w - 55.5} 6.5 ${w - 15.5} 6.5`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`${w - 15.5} ${h - 6.5} ${w - 20.5} ${h - 0.5} ${w - 50.5} ${h - 0.5} ${w - 55.5} ${h - 6.5} ${
+          w - 15.5
+        } ${h - 6.5}`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`15.5 6.5 0.5 ${h / 2} 15.5 ${h - 6.5} ${w - 15.5} ${h - 6.5} ${w - 0.5} ${h / 2} ${
+          w - 15.5
+        } 6.5 15.5 6.5`"
+      />
+      <polyline class="stroke fill-none" :points="`20.5 14.5 8.5 ${h / 2} 20.5 ${h - 14.5}`" />
+      <polyline class="stroke fill-none" :points="`${w - 20.5} 14.5 ${w - 8.5} ${h / 2} ${w - 20.5} ${h - 14.5}`" />
+    </svg>
+    <span class="text">{{ dataset }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const id = getUUID()
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dataset, textSize, textColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-06') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+
+  .text {
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
+}
+</style>

src/packages/components/Decorates/Decorates/index.ts

@@ -3,6 +3,7 @@ import { Decorates02Config } from './Decorates02/index'
 import { Decorates03Config } from './Decorates03/index'
 import { Decorates04Config } from './Decorates04/index'
 import { Decorates05Config } from './Decorates05/index'
+import { Decorates06Config } from './Decorates06/index'
 
 export default [
   Decorates01Config,
@@ -10,4 +11,5 @@ export default [
   Decorates03Config,
   Decorates04Config,
   Decorates05Config,
+  Decorates06Config
 ]

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,102 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+let { border, color, bgColor, borderColor } = toRefs(props.chartConfig.option)
+
+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
+</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]