@zhangqingcq/vgce 0.0.31 → 0.0.33

package/src/config/files/clock-a.vue

@@ -1,51 +1,74 @@
 <script lang="ts" setup>
-	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
-	const nowTime = ref(new Date())
-	const s = nowTime.value.getSeconds()
-	const m = nowTime.value.getMinutes()
-	const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
+	const props = withDefaults(
+		defineProps<{
+			id: string
+			centerColor: string
+			secondsColor: string
+			circleColor: string
+			minutesColor: string
+			hoursColor: string
+			scaleColor: string
+			backgroundColor: string
+			borderColor: string
+		}>(),
+		{
+			id: '',
+			centerColor: '#EBF257',
+			secondsColor: '#E83E24',
+			circleColor: '#F45AFC',
+			minutesColor: '#50E68E',
+			hoursColor: '#9A36E7',
+			scaleColor: '#4942CF',
+			backgroundColor: '#ffffff',
+			borderColor: '#B3A7FF'
+		}
+	)
+	const nowTime = new Date(Number(window.sessionStorage.getItem('editorLoadTime') || '0'))
+	const s = nowTime.getSeconds() + 1
+	const m = nowTime.getMinutes()
+	const h = Math.floor((nowTime.getHours() + (m + s / 60) / 60) * 30)
 </script>
 <template>
 	<g :id="props.id">
 		<symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
-			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF" />
-			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF" />
+			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" :fill="props.borderColor" />
+			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" :fill="props.backgroundColor" />
 			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
-				fill="#2D416C"
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
+				:fill="props.minutesColor"
 			>
 				<animateTransform
 					attributeName="transform"
 					attributeType="XML"
 					type="rotate"
-					:from="`${-45 + h} 512.3 506.3`"
-					:to="`${315 + h} 512.3 506.3`"
-					dur="43200s"
+					:from="`${45 + m * 6} 512.3 506.3`"
+					:to="`${405 + m * 6} 512.3 506.3`"
+					dur="3600s"
 					repeatCount="indefinite"
 				/>
 			</path>
 			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
-				fill="#365087"
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+				:fill="props.hoursColor"
 			>
 				<animateTransform
 					attributeName="transform"
 					attributeType="XML"
 					type="rotate"
-					:from="`${45 + m * 6} 512.3 506.3`"
-					:to="`${405 + m * 6} 512.3 506.3`"
-					dur="3600s"
+					:from="`${-45 + h} 512.3 506.3`"
+					:to="`${315 + h} 512.3 506.3`"
+					dur="43200s"
 					repeatCount="indefinite"
 				/>
 			</path>
-			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087" />
+			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" :fill="props.circleColor" />
 			<path
 				d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
-				fill="#2D416C"
+				:fill="props.scaleColor"
 			/>
 			<path
 				d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
-				fill="#C11B16"
+				:fill="props.secondsColor"
 			>
 				<animateTransform
 					attributeName="transform"
@@ -57,7 +80,7 @@
 					repeatCount="indefinite"
 				/>
 			</path>
-			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#fff" />
+			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" :fill="props.centerColor" />
 		</symbol>
 		<use :xlink:href="`#${props.id}clock-a-n`" width="100" height="100" />
 	</g>

package/src/config/svg/custom/clock-a.ts

@@ -1,4 +1,4 @@
-import { EDoneJsonType } from '@/config/types'
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
 export const clock_a: IConfigItem = {
@@ -12,7 +12,48 @@ export const clock_a: IConfigItem = {
 		actual_rect: true
 	},
 	display: true,
-	props: {},
+	props: {
+		centerColor: {
+			title: '针顶颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#EBF257'
+		},
+		secondsColor: {
+			title: '秒针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#E83E24'
+		},
+		circleColor: {
+			title: '针圈颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#F45AFC'
+		},
+		minutesColor: {
+			title: '分针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#50E68E'
+		},
+		hoursColor: {
+			title: '时针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#9A36E7'
+		},
+		scaleColor: {
+			title: '刻度颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#4942CF'
+		},
+		backgroundColor: {
+			title: '表盘颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#ffffff'
+		},
+		borderColor: {
+			title: '裱框颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#B3A7FF'
+		}
+	},
 	common_animations: {
 		val: '',
 		delay: 'delay-0s',

package/src/utils/index.ts

@@ -4,16 +4,34 @@ import type { IConfigItem } from '@/config/types'
 import { EDoneJsonType } from '@/config/types'
 import type { IDoneJson, IPointCoordinate } from '@/stores/global/types'
 import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
-import { straight_line_system } from '@/components/config'
 import { useGlobalStore } from '@/stores/global'
 import { pinia } from '@/hooks'
 import { useConfigStore } from '@/stores/config'
 import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 import { kebabCase } from 'lodash-es'
+import { vueComp } from '@/config'
 
 export const stopEvent = (e: any) => {
 	e.stopPropagation()
 }
+export const preventDefault = (e: any) => {
+	e.preventDefault()
+}
+
+export function componentsRegister() {
+	//注册所有组件
+	const instance = getCurrentInstance()
+	for (let key in vueComp) {
+		if (!instance?.appContext?.components.hasOwnProperty(key) && vueComp.hasOwnProperty(key)) {
+			instance?.appContext?.app.component(key, vueComp[key])
+		}
+	}
+}
+
+export function setEditorLoadTime() {
+	//记录编辑器加载到浏览器的时间，有些组件需要用这个时间
+	window.sessionStorage.setItem('editorLoadTime', new Date().getTime().toString())
+}
 
 /**
  * 生成随机字符串