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/assets/images/chart/decorates/decorates06.png b/src/assets/images/chart/decorates/decorates06.png new file mode 100644 index 00000000..87442069 Binary files /dev/null and b/src/assets/images/chart/decorates/decorates06.png differ diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.ts b/src/packages/components/Decorates/Decorates/Decorates03/config.ts index 1543ddb8..5874b2bd 100644 --- a/src/packages/components/Decorates/Decorates/Decorates03/config.ts +++ b/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) } diff --git a/src/packages/components/Decorates/Decorates/Decorates06/config.ts b/src/packages/components/Decorates/Decorates/Decorates06/config.ts new file mode 100644 index 00000000..f07b18c3 --- /dev/null +++ b/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) +} diff --git a/src/packages/components/Decorates/Decorates/Decorates06/config.vue b/src/packages/components/Decorates/Decorates/Decorates06/config.vue new file mode 100644 index 00000000..464e71c4 --- /dev/null +++ b/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> diff --git a/src/packages/components/Decorates/Decorates/Decorates06/index.ts b/src/packages/components/Decorates/Decorates/Decorates06/index.ts new file mode 100644 index 00000000..3d779c2e --- /dev/null +++ b/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 +} diff --git a/src/packages/components/Decorates/Decorates/Decorates06/index.vue b/src/packages/components/Decorates/Decorates/Decorates06/index.vue new file mode 100644 index 00000000..d221d4fe --- /dev/null +++ b/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> diff --git a/src/packages/components/Decorates/Decorates/index.ts b/src/packages/components/Decorates/Decorates/index.ts index ddecd0ed..0d9d4604 100644 --- a/src/packages/components/Decorates/Decorates/index.ts +++ b/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 ] 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..e37f1b2c --- /dev/null +++ b/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> 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]