@zhangqingcq/vgce 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -62,29 +62,31 @@
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.1",
-    "element-plus": "^2.3.7",
+    "element-plus": "^2.3.8",
     "lodash": "^4.17.21",
     "mqtt": "^4.3.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-echarts": "^6.5.1",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.2",
     "vue3-ace-editor": "^2.2.2"
   },
   "devDependencies": {
     "@tsconfig/node18": "^2.0.1",
-    "@types/node": "^18.16.8",
+    "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/tsconfig": "^0.4.0",
     "less": "^4.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "3.0.0",
-    "typescript": "~5.1.6",
-    "vite": "4.3.9",
+    "typescript": "~5.0.4",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.3.9",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.9.0",
-    "vue-tsc": "^1.8.4",
+    "vue-tsc": "^1.6.5",
     "windicss": "^3.5.6"
   },
   "engines": {

package/src/App.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
-	import { RouterView } from 'vue-router'
-</script>
+<script setup lang="ts"></script>
 
 <template>
 	<RouterView />

package/src/components/svg-analysis/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
-
 	const props = withDefaults(defineProps<{ name: string; props?: object }>(), { props: () => ({}) })
 	const symbolId = computed(() => `#svg-${props.name}`)
 </script>

package/src/components/svg-editor/center-panel/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'

package/src/components/svg-editor/component-tree/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-	import { ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
 	import { ElTree } from 'element-plus'

package/src/components/svg-editor/connection-panel/index.vue

@@ -5,7 +5,6 @@
 	import type { ISystemStraightLine } from '@/components/config/types'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
-	import { ref } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'

package/src/components/svg-editor/export-json/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { onMounted, ref } from 'vue'
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 	import { pinia } from '@/hooks'

package/src/components/svg-editor/handle-panel/index.vue

@@ -2,7 +2,6 @@
 <script lang="ts" setup>
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
-	import { ref } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'

package/src/components/svg-editor/import-json/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 

package/src/components/svg-editor/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
 	import {
 		ElContainer,
 		ElHeader,

package/src/components/svg-editor/left-panel/index.vue

@@ -1,6 +1,5 @@
 <!--左侧工具栏-->
 <script lang="ts" setup>
-	import { ref } from 'vue'
 	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'

package/src/components/svg-editor/right-panel/code-edit-modal.vue

@@ -2,7 +2,6 @@
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 	import { ElButton, ElDialog } from 'element-plus'
-	import { computed, ref } from 'vue'
 
 	const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
 		modelValue: () => ({}),

package/src/components/svg-editor/right-panel/common-animate.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 	import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
-	import { ref, watch } from 'vue'
 	import { common_animate_list } from '@/components/config'
 	import SvgAnalysis from '@/components/svg-analysis/index.vue'
 

package/src/components/svg-editor/right-panel/condition.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
 	import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus/es'
 	import type { ICondition } from '@/config/types'
 	import { EConditionType } from '@/config/types'

package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue

@@ -59,22 +59,22 @@
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-input-number>
+			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-input>
+			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-color-picker>
+			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-switch>
+			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
 				v-model="attr_item.val"

package/src/components/svg-editor/right-panel/index.vue

@@ -14,7 +14,6 @@
 		ElTabPane,
 		ElTabs
 	} from 'element-plus'
-	import { ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'
@@ -248,7 +247,7 @@
 				</el-form-item>
 				<div
 					v-for="(e, k) in globalStore.handle_svg_info!.info.state"
-					:key="'state' + k"
+					:key="'state' + String(k)"
 					v-if="globalStore.handle_svg_info!.info.state"
 				>
 					<el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>

package/src/components/svg-editor/right-panel/list.vue

@@ -2,7 +2,6 @@
 	import type { IAttrItem } from '@/config/types'
 	import { ElIcon, ElInput } from 'element-plus'
 	import SvgAnalysis from '@/components/svg-analysis/index.vue'
-	import { computed } from 'vue'
 
 	const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
 		modelValue: () => [

package/src/components/svg-viewer/index.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-	import { getCurrentInstance, onMounted, onBeforeUnmount, reactive } from 'vue'
+<script setup lang='ts'>
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
@@ -16,6 +15,7 @@
 
 	import { sub, close } from '@/utils/mqtt-net'
 
+	const emit = defineEmits(['on-message'])
 	//注册所有组件
 	const instance = getCurrentInstance()
 	Object.keys(vueComp).forEach((key: string) => {
@@ -27,45 +27,51 @@
 	const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
 		canvasDrag: true
 	})
-	const preview_data = reactive(
-		props.data ?? {
-			layout_center: {
-				x: 0,
-				y: 0
-			},
-			config: {
-				svg: {
-					background_color: '#fff',
-					scale: 1,
-					position_center: {
-						x: -333,
-						y: -113
-					},
-					svg_position_center: {
-						x: 50,
-						y: 50
-					}
+	const preview_data = reactive(props.data ?? {
+		layout_center: {
+			x: 0,
+			y: 0
+		},
+		config: {
+			svg: {
+				background_color: '#fff',
+				scale: 1,
+				position_center: {
+					x: -333,
+					y: -113
 				},
-				net: { mqtt: { url: '', user: '', pwd: '', topics: '' } }
+				svg_position_center: {
+					x: 50,
+					y: 50
+				}
 			},
-			done_json: []
-		}
-	)
+			net: {
+				mqtt: {
+					url: '',
+					user: '',
+					pwd: '',
+					topics: ''
+				}
+			}
+		},
+		done_json: []
+	})
 	const globalStore = useGlobalStore(pinia)
 
 	const onCanvasMouseMove = (e: MouseEvent) => {
 		//如果鼠标不是按下状态 连线除外
-		if (
-			globalStore.mouse_info.state != EMouseInfoState.Down &&
-			globalStore.intention !== EGlobalStoreIntention.Connection
-		) {
+		if (globalStore.mouse_info.state != EMouseInfoState.Down && globalStore.intention !==
+			EGlobalStoreIntention.Connection) {
 			return
 		}
 		if (!props.canvasDrag) {
 			console.log(props.canvasDrag)
 			return
 		}
-		const { clientX, clientY } = e
+		const {
+			clientX,
+			clientY
+		} = e
 		globalStore.mouse_info.new_position_x =
 			globalStore.mouse_info.now_position_x + clientX - globalStore.mouse_info.position_x
 		globalStore.mouse_info.new_position_y =
@@ -96,7 +102,10 @@
 	}
 	const onCanvasMouseDown = (e: MouseEvent) => {
 		console.log('onCanvasMouseDown', e)
-		const { clientX, clientY } = e
+		const {
+			clientX,
+			clientY
+		} = e
 		//点击画布 未选中组件 拖动画布
 		globalStore.intention = EGlobalStoreIntention.MoveCanvas
 		globalStore.setMouseInfo({
@@ -109,16 +118,12 @@
 			new_position_y: preview_data.layout_center.y
 		})
 	}
-	const getActualBoundScale = (
-		actual_bound: {
-			x: number
-			y: number
-			width: number
-			height: number
-		},
-		scale_x: number,
-		scale_y: number
-	) => {
+	const getActualBoundScale = (actual_bound: {
+		x: number
+		y: number
+		width: number
+		height: number
+	}, scale_x: number, scale_y: number) => {
 		return {
 			x: actual_bound.x - (actual_bound.width / 2) * scale_x + actual_bound.width / 2,
 			y: actual_bound.y - (actual_bound.height / 2) * scale_y + actual_bound.height / 2,
@@ -158,7 +163,8 @@
 										break
 									}
 								}
-							} else {
+							}
+							else {
 								t = root
 							}
 
@@ -169,12 +175,14 @@
 							for (let a of e.attrs) {
 								if (t.state && t.state.hasOwnProperty(a.key)) {
 									t.state[a.key].default = valFormat(a.val)
-								} else if (t.props.hasOwnProperty(a.key)) {
+								}
+								else if (t.props.hasOwnProperty(a.key)) {
 									t.props[a.key].val = valFormat(a.val)
 								}
 							}
 						}
-					} else if (e.action === EEventAction.JavaScript) {
+					}
+					else if (e.action === EEventAction.JavaScript) {
 						const t = new Function(e.scripts)
 						t()
 					}
@@ -215,6 +223,11 @@
 			sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)
 				console.log(message.toString())
+				//暂时先暴露给外部，让用户自己处理消息，后期功能会补上
+				emit('on-message', {
+					topics,
+					message
+				})
 			})
 		}
 	}
@@ -225,81 +238,81 @@
 </script>
 
 <template>
-	<div class="canvas" @mousedown="onCanvasMouseDown" @mousemove="onCanvasMouseMove" @mouseup="onCanvasMouseUp">
+	<div class='canvas' @mousedown='onCanvasMouseDown' @mousemove='onCanvasMouseMove' @mouseup='onCanvasMouseUp'>
 		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			:style="{ backgroundColor: preview_data.config.svg.background_color }"
-			width="100%"
-			height="100%"
+			xmlns='http://www.w3.org/2000/svg'
+			:style='{ backgroundColor: preview_data.config.svg.background_color }'
+			width='100%'
+			height='100%'
 		>
 			<g
-				:transform="`translate(${preview_data.config.svg.position_center.x + preview_data.layout_center.x},${
+				:transform='`translate(${preview_data.config.svg.position_center.x + preview_data.layout_center.x},${
 					preview_data.config.svg.position_center.y + preview_data.layout_center.y
-				})rotate(${0})scale(${preview_data.config.svg.scale})`"
+				})rotate(${0})scale(${preview_data.config.svg.scale})`'
 			>
 				<g
-					v-for="item in preview_data.done_json"
-					:key="item.id"
-					:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
-					v-show="item.display"
-					@click="eventHandle(item)"
+					v-for='item in preview_data.done_json'
+					:key='item.id'
+					:transform='`translate(${item.x},${item.y})rotate(0)scale(1)`'
+					v-show='item.display'
+					@click='eventHandle(item)'
 				>
-					<g :class="`${getCommonClass(item)}`">
+					<g :class='`${getCommonClass(item)}`'>
 						<g
-							:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+							:transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 								item.actual_bound.y + item.actual_bound.height / 2
 							})rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
 								item.actual_bound.y +
 								item.actual_bound.height / 2
-							)})`"
+							)})`'
 						>
-							<connection-line v-if="item.type === EDoneJsonType.ConnectionLine" :item-info="item" />
+							<connection-line v-if='item.type === EDoneJsonType.ConnectionLine' :item-info='item' />
 							<use
-								v-else-if="item.type === EDoneJsonType.File"
-								:xlink:href="`#svg-${item.name}`"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
-								:id="item.id"
-								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+								v-else-if='item.type === EDoneJsonType.File'
+								:xlink:href='`#svg-${item.name}`'
+								v-bind='prosToVBind(item)'
+								width='100'
+								height='100'
+								:id='item.id'
+								:transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 									item.actual_bound.y + item.actual_bound.height / 2
 								}) scale(${item.scale_x},${item.scale_y}) translate(${-(
 									item.actual_bound.x +
 									item.actual_bound.width / 2
-								)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+								)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
 							/>
 							<component
-								v-else-if="item.type === EDoneJsonType.CustomSvg"
-								:is="item.tag"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
-								:id="item.id"
-								@on-change="eventHandle(item)"
-								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+								v-else-if='item.type === EDoneJsonType.CustomSvg'
+								:is='item.tag'
+								v-bind='prosToVBind(item)'
+								width='100'
+								height='100'
+								:id='item.id'
+								@on-change='eventHandle(item)'
+								:transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 									item.actual_bound.y + item.actual_bound.height / 2
 								}) scale(${item.scale_x},${item.scale_y}) translate(${-(
 									item.actual_bound.x +
 									item.actual_bound.width / 2
-								)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+								)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
 							/>
 							<foreignObject
-								v-else-if="item.type === EDoneJsonType.Vue"
-								v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
-								:id="`foreign-object${item.id}`"
+								v-else-if='item.type === EDoneJsonType.Vue'
+								v-bind='getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)'
+								:id='`foreign-object${item.id}`'
 							>
 								<component
-									:is="item.tag"
-									v-bind="prosToVBind(item)"
-									:id="item.id"
-									@on-change="eventHandle(item)"
-									:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+									:is='item.tag'
+									v-bind='prosToVBind(item)'
+									:id='item.id'
+									@on-change='eventHandle(item)'
+									:transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 										item.actual_bound.y + item.actual_bound.height / 2
 									}) scale(${item.scale_x},${item.scale_y}) translate(${-(
 										item.actual_bound.x +
 										item.actual_bound.width / 2
-									)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-									>{{ item.tag_slot }}
+									)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
+								>{{ item.tag_slot }}
 								</component>
 							</foreignObject>
 						</g>
@@ -310,7 +323,7 @@
 	</div>
 </template>
 
-<style lang="less" scoped>
+<style lang='less' scoped>
 	.canvas {
 		width: 100%;
 		height: 100vh;

package/src/components/vue3-ruler-tool/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 

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

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-	import { ref } from 'vue'
-
 	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
 	const nowTime = ref(new Date())
 	const s = nowTime.value.getSeconds()

package/src/config/files/common-table.vue

@@ -4,7 +4,6 @@
 	</el-table>
 </template>
 <script setup lang="ts">
-	import { ref, watchEffect } from 'vue'
 	import { ElTable, ElTableColumn } from 'element-plus'
 
 	const props = withDefaults(

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { watch } from 'vue'
-
 	const props = withDefaults(defineProps<{ id: string; isOpen: boolean }>(), {
 		id: '',
 		isOpen: false

package/src/config/files/now-time.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed, onMounted, ref, onUnmounted } from 'vue'
 	const props = defineProps({
 		fontColor: {
 			type: String,

package/src/config/files/pie-charts.vue

@@ -4,7 +4,6 @@
 	import { PieChart } from 'echarts/charts'
 	import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 	import VChart, { THEME_KEY } from 'vue-echarts'
-	import { watch, provide, reactive } from 'vue'
 	use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
 
 	provide(THEME_KEY, 'dark')

package/src/config/files/progress.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import { ElProgress } from 'element-plus'
 	import type { ProgressColor } from 'element-plus'
-	import { watch } from 'vue'
 
 	const colors: ProgressColor[] = [
 		{

package/src/config/files/svg-text.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	// 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
-	import { nextTick, watch } from 'vue'
-
 	const emit = defineEmits(['resize'])
 
 	const props = defineProps({

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { watch } from 'vue'
-
 	const props = defineProps({
 		id: {
 			type: String,

package/src/config/svg/stateless/index.ts

@@ -6,9 +6,5 @@ import { svg_bot_2 } from './bot-2'
 export const stateless_group: IConfigComponentGroup = {
 	groupType: 'stateless',
 	title: '静态图标',
-	list: [
-		alternator_svg_file,
-		svg_house,
-		svg_bot_2
-	]
+	list: [alternator_svg_file, svg_house, svg_bot_2]
 }

package/src/config/types.ts

@@ -37,7 +37,7 @@ export interface IAnimations {
 }
 
 export interface IConfigItemProps {
-	[key: string]: {
+	[key: keyof any]: {
 		title: string
 		type: EConfigItemPropsType
 		val: any
@@ -77,7 +77,7 @@ interface IDoneJsonConfig {
 }
 
 export interface IConfigItemState {
-	OnOff?: {
+	[k: keyof any]: {
 		title: string
 		default: false
 		props: { [key: string]: { openVal: any; closeVal: any } }

package/src/hooks.ts

@@ -1,5 +1,4 @@
 import type { IDataModel } from '@/components/svg-editor/types'
-import { createPinia } from 'pinia'
 import { useConfigStore } from '@/stores/config'
 import { useGlobalStore } from '@/stores/global'
 import type { IDoneJson } from '@/stores/global/types'

package/src/index.ts

@@ -8,7 +8,5 @@ import 'virtual:windi.css'
 import 'virtual:svg-icons-register'
 import './assets/main.less'
 
-import SvgEditor from '@/components/svg-editor/index.vue'
-import SvgViewer from '@/components/svg-viewer/index.vue'
-
-export { SvgEditor, SvgViewer }
+export { default as SvgEditor } from '@/components/svg-editor/index.vue'
+export { default as SvgViewer } from '@/components/svg-viewer/index.vue'

package/src/main.ts

@@ -1,4 +1,3 @@
-import { createApp } from 'vue'
 import { pinia } from '@/hooks'
 
 import App from './App.vue'

package/src/stores/config/index.ts

@@ -1,4 +1,3 @@
-import { defineStore } from 'pinia'
 import { objectDeepClone } from '@/utils'
 import { connection_line_system } from '@/components/config'
 

package/src/stores/global/index.ts

@@ -1,5 +1,3 @@
-import { defineStore } from 'pinia'
-import { nextTick } from 'vue'
 import { config } from '@/config'
 import type { IConfigItem } from '@/config/types'
 import { isOfType, objectDeepClone, setSvgActualInfo } from '@/utils'