@zhangqingcq/vgce 0.1.8 → 0.1.10

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const clock_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'clock-a',
 	title: '时钟',
 	tag: 'clock-a',
@@ -62,3 +62,4 @@ export const clock_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,11 +1,12 @@
 import type { IConfigComponentGroup } from '../../types'
-import { svg_text } from './svg-text'
-import { switch_r } from './switch-r'
-import { light_a } from '@/config/svg/custom/light'
-import { clock_a } from '@/config/svg/custom/clock-a'
+import svg_text from './svg-text'
+import switch_r from './switch-r'
+import light_a from '@/config/svg/custom/light'
+import clock_a from '@/config/svg/custom/clock-a'
 
-export const custom_svg_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'custom_svg_group',
 	title: 'SVG组件',
 	list: [svg_text, switch_r, light_a, clock_a]
 }
+export default t

package/src/config/svg/custom/light.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const light_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'light',
 	tag: 'light-a',
 	title: '灯',
@@ -37,3 +37,4 @@ export const light_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/svg-text.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_text: IConfigItem = {
+const t: IConfigItem = {
 	name: 'svg-text',
 	title: '文字',
 	tag: 'svg-text',
@@ -81,3 +81,4 @@ export const svg_text: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/switch-r.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const switch_r: IConfigItem = {
+const t: IConfigItem = {
 	name: 'switch-r',
 	title: '开关',
 	tag: 'switch-r',
@@ -27,3 +27,4 @@ export const switch_r: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/index.ts

@@ -1,12 +1,8 @@
 import type { IConfigComponentGroup } from '../types'
-import { stateful_group } from './stateful'
-import { stateless_group } from './stateless'
-import { animation_group } from './animation'
-import { custom_svg_group } from './custom'
+import stateful_group from './stateful'
+import stateless_group from './stateless'
+import animation_group from './animation'
+import custom_svg_group from './custom'
 
-export const svg_config: IConfigComponentGroup[] = Object.seal([
-	stateless_group,
-	stateful_group,
-	animation_group,
-	custom_svg_group
-])
+const t: IConfigComponentGroup[] = Object.seal([stateless_group, stateful_group, animation_group, custom_svg_group])
+export default t

package/src/config/svg/stateful/alert-light.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_alert_light: IConfigItem = {
+const t: IConfigItem = {
 	name: 'alert-light',
 	title: '警示灯',
 	type: EDoneJsonType.File,
@@ -31,3 +31,4 @@ export const svg_alert_light: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,8 +1,9 @@
 import type { IConfigComponentGroup } from '../../types'
-import { svg_alert_light } from './alert-light'
+import svg_alert_light from './alert-light'
 
-export const stateful_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'stateful',
 	title: '状态SVG',
 	list: [svg_alert_light]
 }
+export default t

package/src/config/svg/stateless/bot-2.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_bot_2: IConfigItem = {
+const t: IConfigItem = {
 	name: 'bot-2',
 	title: '2号机',
 	type: EDoneJsonType.File,
@@ -31,3 +31,4 @@ export const svg_bot_2: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateless/bot-9.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_bot_9: IConfigItem = {
+const t: IConfigItem = {
 	name: 'bot-9',
 	title: '9号机',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_bot_9: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_hamburger: IConfigItem = {
+const t: IConfigItem = {
 	name: 'hamburger',
 	title: '汉堡',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_hamburger: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_hotpot: IConfigItem = {
+const t: IConfigItem = {
 	name: 'hotpot',
 	title: '火锅',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_hotpot: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,11 +1,12 @@
 import type { IConfigComponentGroup } from '@/config/types'
-import { svg_bot_2 } from './bot-2'
-import { svg_bot_9 } from './bot-9'
-import { svg_hotpot } from './hotpot'
-import { svg_hamburger } from './hamburger'
+import svg_bot_2 from './bot-2'
+import svg_bot_9 from './bot-9'
+import svg_hotpot from './hotpot'
+import svg_hamburger from './hamburger'
 
-export const stateless_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'stateless',
 	title: '静态SVG',
 	list: [svg_hamburger, svg_hotpot, svg_bot_2, svg_bot_9]
 }
+export default t

package/src/config/vue/component/button.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const el_button: IConfigItem = {
+const t: IConfigItem = {
 	name: 'el-button',
 	tag: 'el-button',
 	title: '按钮',
@@ -55,3 +55,4 @@ export const el_button: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/common-table.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const common_table: IConfigItem = {
+const t: IConfigItem = {
 	name: 'common-table',
 	title: '通用表格',
 	tag: 'common-table',
@@ -127,3 +127,4 @@ export const common_table: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/index.ts

@@ -1,13 +1,15 @@
 import type { IConfigComponentGroup } from '@/config/types'
 
-import { el_button } from './button'
-import { common_table } from './common-table'
-import { now_time } from './now-time'
-import { el_tag } from './tag'
-import { progress_a } from './progress'
+import el_button from './button'
+import common_table from './common-table'
+import now_time from './now-time'
+import el_tag from './tag'
+import progress_a from './progress'
+import textBox from './text-box'
 
-export const components: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'custom-vue',
 	title: 'VUE组件',
-	list: [el_button, progress_a, common_table, now_time, el_tag]
+	list: [el_button, progress_a, common_table, now_time, el_tag, textBox]
 }
+export default t

package/src/config/vue/component/now-time.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const now_time: IConfigItem = {
+const t: IConfigItem = {
 	name: 'now-time',
 	title: '当前时间',
 	tag: 'now-time',
@@ -61,3 +61,4 @@ export const now_time: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/progress.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const progress_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'progress-a',
 	tag: 'progress-a',
 	title: '进度条',
@@ -27,3 +27,4 @@ export const progress_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/tag.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const el_tag: IConfigItem = {
+const t: IConfigItem = {
 	name: 'el-tag',
 	tag: 'el-tag',
 	title: '标签',
@@ -44,3 +44,4 @@ export const el_tag: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/text-box.ts

@@ -0,0 +1,66 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+const t: IConfigItem = {
+	name: 'text-box',
+	title: '文字背景框',
+	tag: 'text-box',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: false,
+		have_anchor: false,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		width: {
+			title: '宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 250
+		},
+		height: {
+			title: '高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 150
+		},
+		bgColor: {
+			title: '背景颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#000000'
+		},
+		bgOpacity: {
+			title: '背景透明度(%)',
+			type: EConfigItemPropsType.InputNumber,
+			val: 1
+		},
+		borderColor: {
+			title: '边框颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#cccccc'
+		},
+		borderWidth: {
+			title: '边框宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 1
+		},
+		borderRadius: {
+			title: '边框圆角',
+			type: EConfigItemPropsType.InputNumber,
+			val: 5
+		},
+		borderOpacity: {
+			title: '边框透明度(%)',
+			type: EConfigItemPropsType.InputNumber,
+			val: 100
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}
+
+export default t

package/src/config/vue/echarts/index.ts

@@ -1,8 +1,9 @@
 import type { IConfigComponentGroup } from '@/config/types'
-import { pie_charts } from './pie-charts'
+import pie_charts from './pie-charts'
 
-export const echarts_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'echarts',
 	title: '图表',
 	list: [pie_charts]
 }
+export default t

package/src/config/vue/echarts/pie-charts.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const pie_charts: IConfigItem = {
+const t: IConfigItem = {
 	name: 'pie-charts',
 	tag: 'pie-charts',
 	title: '饼图',
@@ -58,3 +58,4 @@ export const pie_charts: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/index.ts

@@ -1,5 +1,6 @@
 import type { IConfigComponentGroup } from '../types'
-import { components } from './component'
-import { echarts_group } from './echarts'
+import components from './component'
+import echarts_group from './echarts'
 
-export const vue_config: IConfigComponentGroup[] = Object.seal([components, echarts_group])
+const t: IConfigComponentGroup[] = Object.seal([components, echarts_group])
+export default t

package/src/views/EditorS.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-	import SvgEditor from '@/components/svg-editor/index.vue'
-	import { useStore } from '@/stores/main'
-	import type { IDataModel } from '@/components/svg-editor/types'
-	import Preview from './Preview.vue'
-
-	const store = useStore()
-
-	const previewShow = ref(false)
-	function previewHandle(d: IDataModel) {
-		store.data = d
-		nextTick(function () {
-			previewShow.value = true
-		})
-	}
-</script>
-
-<template>
-	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
-	<Preview v-if="previewShow" @back="previewShow = false" />
-</template>
+<script setup lang="ts">
+	import SvgEditor from '@/components/svg-editor/index.vue'
+	import { useStore } from '@/stores/main'
+	import type { IDataModel } from '@/components/svg-editor/types'
+	import Preview from './Preview.vue'
+
+	const store = useStore()
+
+	const previewShow = ref(false)
+	function previewHandle(d: IDataModel) {
+		store.data = d
+		nextTick(function () {
+			previewShow.value = true
+		})
+	}
+</script>
+
+<template>
+	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
+	<Preview v-if="previewShow" @back="previewShow = false" />
+</template>

package/src/views/Preview.vue

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-	import SvgViewer from '@/components/svg-viewer.vue'
-	import { ElButton } from 'element-plus'
-	import { ArrowLeftBold } from '@element-plus/icons-vue'
-	import { useStore } from '@/stores/main'
-
-	const emit = defineEmits(['back'])
-	const store = useStore()
-
-	function back() {
-		emit('back')
-	}
-</script>
-
-<template>
-	<div class="previewPage">
-		<svg-viewer :data="store.data" />
-		<el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
-	</div>
-</template>
-
-<style lang="less" scoped>
-	.previewPage {
-		position: fixed;
-		z-index: 1000;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-
-		.backBtn {
-			position: absolute;
-			top: 20px;
-			right: 30px;
-			z-index: 100;
-		}
-	}
-</style>
+<script setup lang="ts">
+	import SvgViewer from '@/components/svg-viewer.vue'
+	import { ElButton } from 'element-plus'
+	import { ArrowLeftBold } from '@element-plus/icons-vue'
+	import { useStore } from '@/stores/main'
+
+	const emit = defineEmits(['back'])
+	const store = useStore()
+
+	function back() {
+		emit('back')
+	}
+</script>
+
+<template>
+	<div class="previewPage">
+		<svg-viewer :data="store.data" />
+		<el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.previewPage {
+		position: fixed;
+		z-index: 1000;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+
+		.backBtn {
+			position: absolute;
+			top: 20px;
+			right: 30px;
+			z-index: 100;
+		}
+	}
+</style>