@zhangqingcq/vgce 0.0.26 → 0.0.28

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

@@ -13,13 +13,13 @@
 	} from 'element-plus'
 	import 'element-plus/dist/index.css'
 	import 'animate.css'
-	import TopPanel from '@/components/svg-editor/top-panel/index.vue'
-	import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
-	import CenterPanel from '@/components/svg-editor/center-panel/index.vue'
-	import RightPanel from '@/components/svg-editor/right-panel/index.vue'
-	import ExportJson from '@/components/svg-editor/export-json/index.vue'
-	import ImportJson from '@/components/svg-editor/import-json/index.vue'
-	import Vue3RulerTool from '@/components/vue3-ruler-tool/index.vue'
+	import TopPanel from '@/components/svg-editor/top-panel.vue'
+	import LeftPanel from '@/components/svg-editor/left-panel.vue'
+	import CenterPanel from '@/components/svg-editor/center-panel.vue'
+	import RightPanel from '@/components/svg-editor/right-panel.vue'
+	import ExportJson from '@/components/svg-editor/export-json.vue'
+	import ImportJson from '@/components/svg-editor/import-json.vue'
+	import Vue3RulerTool from '@/components/vue3-ruler-tool.vue'
 	import { EVisibleConfKey } from '@/components/svg-editor/types'
 	import type { IVisibleConf, IDataModel } from '@/components/svg-editor/types'
 	import type { IConfig } from '@/config/types'
@@ -33,6 +33,7 @@
 	import { fileRead, fileWrite } from '@/utils/file-read-write'
 	import { useEditPrivateStore } from '@/stores/system'
 
+	//todo 优化自带组件使用体验
 	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
 		saveFile: false
 	})

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

@@ -4,7 +4,7 @@
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
-	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+	import SvgAnalysis from '@/components/svg-analysis.vue'
 	import { EGlobalStoreIntention } from '@/stores/global/types'
 	import { prosToVBind } from '@/utils'
 
@@ -53,7 +53,7 @@
 						:title="svg_item.title"
 					>
 						<el-icon :size="35" class="flex items-center">
-							<svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item)" />
+							<svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item, ['width', 'height', 'maxHeight'])" />
 						</el-icon>
 					</div>
 				</div>

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

@@ -9,7 +9,7 @@
 		title: '编辑'
 	})
 	const open = ref(false)
-	const emits = defineEmits(['update:modelValue'])
+	const emits = defineEmits(['update:modelValue', 'close'])
 
 	const content = computed({
 		get() {
@@ -31,7 +31,7 @@
 <template>
 	<div>
 		<el-button @click="open = true">···</el-button>
-		<el-dialog class="modal-full" v-model="open" :title="props.title" width="60%">
+		<el-dialog class="modal-full" v-model="open" :title="props.title" width="60%" @close="emits('close')">
 			<v-ace-editor
 				v-model:value="content"
 				:lang="props.lang"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
 	import { common_animate_list } from '@/components/config'
-	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+	import SvgAnalysis from '@/components/svg-analysis.vue'
 
 	const props = defineProps<{ val: string }>()
 	const emits = defineEmits(['updateCommonAniVal'])

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

@@ -14,15 +14,25 @@
 	import { getStringWidth } from '@/utils'
 	import CodeEditModal from '@/components/svg-editor/right-panel/code-edit-modal.vue'
 
+	const emit = defineEmits(['change'])
 	const props = withDefaults(defineProps<{ objInfo?: IConfigItemProps; hide?: string[]; code?: boolean }>(), {
 		objInfo: () => ({}),
 		hide: () => [],
 		code: false
 	})
+
+	function propsChangeHandle(e: any) {
+		let t: any = window.setTimeout(function () {
+			emit('change', e)
+			clearTimeout(t)
+			t = null
+		}, 200)
+	}
 </script>
 
 <template>
 	<div v-for="(attr_item, key) in props.objInfo" :key="key">
+		<!--表单项上显示的灰色值-->
 		<el-form-item v-if="props.code" class="props-row" size="small">
 			<template #label>
 				<el-tooltip
@@ -45,6 +55,7 @@
 			</el-tooltip>
 			<span v-else>{{ attr_item.val }}</span>
 		</el-form-item>
+		<!--props-->
 		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(key)) < 0">
 			<el-select
 				v-if="attr_item.type === EConfigItemPropsType.Select"
@@ -52,6 +63,7 @@
 				placeholder="Select"
 				size="small"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			>
 				<el-option v-for="item in attr_item.options" :key="item.value" :label="item.label" :value="item.value" />
 			</el-select>
@@ -59,11 +71,13 @@
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
@@ -71,21 +85,25 @@
 				autosize
 				type="textarea"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
+				@change="propsChangeHandle"
 			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
+				@close="propsChangeHandle"
 			/>
 		</el-form-item>
 	</div>
@@ -101,4 +119,8 @@
 	.props-popper {
 		max-width: 350px;
 	}
+	sdf {
+		color: rgb(245, 247, 250);
+		background-color: rgb(92, 184, 122);
+	}
 </style>

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

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

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

@@ -22,10 +22,10 @@
 	import { moveAnchors, numberArray, setSvgActualInfo } from '@/utils'
 	import type { IDoneJson } from '@/stores/global/types'
 	import { EGlobalStoreIntention } from '@/stores/global/types'
-	import DynamicElFormItem from './dynamic-el-form-item.vue'
-	import CommonAnimate from './common-animate.vue'
-	import ComponentTree from '@/components/svg-editor/component-tree/index.vue'
-	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+	import DynamicElFormItem from './right-panel/dynamic-el-form-item.vue'
+	import CommonAnimate from './right-panel/common-animate.vue'
+	import ComponentTree from '@/components/svg-editor/component-tree.vue'
+	import SvgAnalysis from '@/components/svg-analysis.vue'
 	import List from '@/components/svg-editor/right-panel/list.vue'
 	import Condition from '@/components/svg-editor/right-panel/condition.vue'
 	import CodeEditModal from '@/components/svg-editor/right-panel/code-edit-modal.vue'
@@ -92,14 +92,24 @@
 		}
 	}
 
-	const changHandle = () => {
-		if (globalStore.handle_svg_info) {
-			const done_json = globalStore.done_json[globalStore.handle_svg_info.index]
-			nextTick(function () {
-				setSvgActualInfo(done_json)
+	/**
+	 * 右侧属性更改，改变画布中对应组件
+	 * @param cur 当前值
+	 * @param pre 之前的值
+	 * @param resize 是否重新获取边框大小
+	 */
+	const changHandle = (cur: any, pre: any, resize?: boolean) => {
+		nextTick(function () {
+			if (globalStore.handle_svg_info) {
+				const done_json = globalStore.done_json[globalStore.handle_svg_info.index]
+				if (resize) {
+					setSvgActualInfo(done_json, resize)
+				} else {
+					setSvgActualInfo(done_json)
+				}
 				moveAnchors(done_json)
-			})
-		}
+			}
+		})
 	}
 </script>
 
@@ -199,10 +209,10 @@
 				<el-form-item label="Y坐标" size="small">
 					<el-input-number v-model="globalStore.handle_svg_info!.info.y" @change="changHandle" />
 				</el-form-item>
-				<el-form-item label="X缩放" size="small">
+				<el-form-item label="X缩放" size="small" v-show="globalStore.handle_svg_info?.info?.config.can_zoom">
 					<el-input-number v-model="globalStore.handle_svg_info!.info.scale_x" @change="changHandle" />
 				</el-form-item>
-				<el-form-item label="Y缩放" size="small">
+				<el-form-item label="Y缩放" size="small" v-show="globalStore.handle_svg_info?.info?.config.can_zoom">
 					<el-input-number v-model="globalStore.handle_svg_info!.info.scale_y" @change="changHandle" />
 				</el-form-item>
 				<el-form-item label="旋转" size="small">
@@ -215,34 +225,40 @@
 		</el-tab-pane>
 		<el-tab-pane label="数据" name="data">
 			<el-form label-width="90px" label-position="left">
+				<!--ID-->
 				<el-form-item label="ID" size="small">
 					<el-input v-model="globalStore.handle_svg_info!.info.id" />
 				</el-form-item>
-				<div
-					v-for="(e, k) of globalStore.handle_svg_info!.info.state"
-					: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>
-
-					<el-form-item
-						v-if="k === 'OnOff'"
-						:label="globalStore.handle_svg_info!.info.state?.OnOff!.title"
-						size="small"
-					>
-						<el-switch v-model="globalStore.handle_svg_info!.info.state!.OnOff!.default"></el-switch>
-					</el-form-item>
-				</div>
-
+				<!--state-->
+				<el-form-item class="props-row" label="state" size="small" v-if="globalStore.handle_svg_info?.info?.state">
+					{{ globalStore.handle_svg_info!.info!.defaultState }}
+				</el-form-item>
+				<el-form-item v-if="globalStore.handle_svg_info?.info?.state" label="状态" size="small">
+					<el-select v-model="globalStore.handle_svg_info!.info!.defaultState" placeholder="Select" size="small">
+						<el-option
+							v-for="(e, k) of globalStore.handle_svg_info!.info.state"
+							:key="'state' + String(k)"
+							:label="e.label"
+							:value="k"
+						/>
+					</el-select>
+				</el-form-item>
+				<!--文字插槽-->
 				<div v-if="globalStore.handle_svg_info!.info?.hasOwnProperty('tag_slot')">
 					<el-form-item class="props-row" label="tag_slot" size="small">
 						{{ globalStore.handle_svg_info!.info.tag_slot }}
 					</el-form-item>
 					<el-form-item label="文字插槽" size="small">
-						<el-input v-model="globalStore.handle_svg_info!.info.tag_slot" />
+						<el-input v-model="globalStore.handle_svg_info!.info.tag_slot" @input="changHandle($event, null, true)" />
 					</el-form-item>
 				</div>
-				<dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
+				<!--props-->
+				<dynamic-el-form-item
+					:obj-info="globalStore.handle_svg_info!.info.props"
+					code
+					@change="changHandle($event, null, true)"
+				/>
+				<!--连线动画效果-->
 				<el-form-item
 					:label="globalStore.handle_svg_info!.info.animations.type.title"
 					size="small"

package/src/components/svg-editor/{top-panel/index.vue → top-panel.vue}

@@ -4,10 +4,10 @@
 	import { useGlobalStore } from '@/stores/global'
 	import { useEditPrivateStore } from '@/stores/system'
 	import { ElIcon, ElDivider, ElDialog, ElScrollbar } from 'element-plus'
-	import SvgAnalysis from '../../svg-analysis/index.vue'
+	import SvgAnalysis from '../svg-analysis.vue'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
-	import { EVisibleConfKey } from '../types'
-	import type { IDataModel } from '../types'
+	import { EVisibleConfKey } from './types'
+	import type { IDataModel } from './types'
 	import { EGlobalStoreIntention } from '@/stores/global/types'
 
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
@@ -167,6 +167,14 @@
 			<div class="font-bold mb-10px text-15px guide-title">标尺辅助线</div>
 			<div>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线，将标尺辅助线拖动到标尺区域即可删除标尺辅助线</div>
 			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
+			<div class="font-bold mb-10px text-15px guide-title">组件尺寸</div>
+			<div
+				><p>
+					大多数组件可以通过选中组件然后拖动交互点或在右侧‘外观’栏改变外形尺寸，或通过右侧‘数据’栏直接或间接改变外形尺寸；</p
+				>
+				<p>少数特殊组件仅可通过右侧'数据'栏直接或间接改变外形尺寸</p></div
+			>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">连线样式</div>
 			<div
 				>在右侧‘连线’栏可以统一配置连线样式，配置后先增加的线会应用新样式，之前的线样式不变，如需改变，可选中线手动更改或删除重画

package/src/components/{svg-viewer/index.vue → svg-viewer.vue}

@@ -6,7 +6,7 @@
 	import { getCommonClass, prosToVBind, setArrItemByID, valFormat } from '@/utils'
 
 	import { EDoneJsonType, EEventAction, EEventType } from '@/config/types'
-	import ConnectionLine from '@/components/svg-editor/connection-line/index.vue'
+	import ConnectionLine from '@/components/svg-editor/connection-line.vue'
 
 	import { vueComp } from '@/config'
 	import type { IDataModel } from '@/components/svg-editor/types'
@@ -151,10 +151,10 @@
 		}
 		return { cursor: t ? 'pointer' : 'default' }
 	}
-	const eventHandle = (root: IDoneJson) => {
+	const eventHandle = (root: IDoneJson, type: EEventType) => {
 		if (root.events?.length > 0) {
 			for (let e of root.events) {
-				if (e.type === EEventType.Click || e.type === EEventType.Change) {
+				if (e.type === type) {
 					if (e.condition && e.condition.type !== 'None') {
 						if (e.condition.type === 'Relation' && e.condition.Relation && e.condition.Relation.relation) {
 							const k = e.condition.Relation.key
@@ -188,6 +188,8 @@
 								continue
 							}
 
+							console.log(t, e)
+
 							for (let a of e.attrs) {
 								if (t.state && t.state.hasOwnProperty(a.key)) {
 									t.state[a.key].default = valFormat(a.val)
@@ -276,7 +278,7 @@
 					:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
 					v-show="item.display"
 					:style="getStyle(item)"
-					@click="eventHandle(item)"
+					@click="eventHandle(item, EEventType.Click)"
 				>
 					<g :class="`${getCommonClass(item)}`">
 						<g
@@ -309,7 +311,7 @@
 								width="100"
 								height="100"
 								:id="item.id"
-								@on-change="eventHandle(item)"
+								@on-change="eventHandle(item, EEventType.Change)"
 								: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(${-(
@@ -326,7 +328,7 @@
 									:is="item.tag"
 									v-bind="prosToVBind(item)"
 									:id="item.id"
-									@on-change="eventHandle(item)"
+									@on-change="eventHandle(item, EEventType.Change)"
 									: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(${-(

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

@@ -1,48 +1,48 @@
-<template>
-	<el-table v-bind="table_props">
-		<el-table-column v-for="item in props.colConfig" :key="item.prop" v-bind="item"></el-table-column>
-	</el-table>
-</template>
-<script setup lang="ts">
-	import { ElTable, ElTableColumn } from 'element-plus'
-
-	const props = withDefaults(
-		defineProps<{
-			colConfig: ICol[]
-			data: any[]
-			height: number
-			maxHeight: number
-			stripe: boolean
-			border: boolean
-			size: string
-			fit: boolean
-			operateDisplay: boolean
-			selectionData: any[]
-		}>(),
-		{
-			colConfig: () => [],
-			data: () => [],
-			stripe: false,
-			border: false,
-			fit: false,
-			operateDisplay: false,
-			selectionData: () => []
-		}
-	)
-	const table_props = ref({})
-	watchEffect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { colConfig, ...temp_props } = props
-		table_props.value = temp_props
-	})
-
-	interface ICol {
-		prop: string
-		label: string
-		width: string
-		fixed: string | boolean
-		sortable: boolean
-		'show-overflow-tooltip': boolean
-	}
-</script>
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+	import { ElTable, ElTableColumn } from 'element-plus'
+
+	const props = withDefaults(
+		defineProps<{
+			colConfig: ICol[]
+			data: any[]
+			height?: number
+			maxHeight?: number
+			stripe?: boolean
+			border?: boolean
+			size?: string
+			fit?: boolean
+			operateDisplay?: boolean
+			selectionData?: any[]
+		}>(),
+		{
+			colConfig: () => [],
+			data: () => [],
+			height: 200,
+			stripe: false,
+			border: false,
+			fit: false,
+			operateDisplay: false,
+			selectionData: () => []
+		}
+	)
+	const table_props = ref({})
+	watchEffect(() => {
+		const { colConfig, ...temp_props } = props
+		table_props.value = temp_props
+	})
+
+	interface ICol {
+		prop: string
+		label: string
+		width: string
+		fixed: string | boolean
+		sortable: boolean
+		'show-overflow-tooltip': boolean
+	}
+</script>
+
+<template>
+	<el-table v-bind="table_props">
+		<el-table-column v-for="item in props.colConfig" :key="item.prop" v-bind="item"></el-table-column>
+	</el-table>
+</template>

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

@@ -1,52 +1,71 @@
-<script setup lang="ts">
-	const props = defineProps({
-		fontColor: {
-			type: String,
-			default: '#000000'
-		}
-	})
-	const now_date = ref(new Date())
-	const timer = ref()
-	const date = computed(() => {
-		const year = now_date.value.getFullYear()
-		const month = now_date.value.getMonth() + 1
-		const day = now_date.value.getDate()
-		const time = year.toString() + '年' + month.toString() + '月' + day.toString() + '日'
-		return time
-	})
-	const week = computed(() => {
-		const d = now_date.value.getDay()
-		const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-		const time = weekday[d]
-		return time
-	})
-	const time = computed(() => {
-		const hour = now_date.value.getHours()
-		const minute = now_date.value.getMinutes()
-		const second = now_date.value.getSeconds()
-		const time =
-			(hour < 10 ? '0' + hour.toString() : hour.toString()) +
-			':' +
-			(minute < 10 ? '0' + minute.toString() : minute.toString()) +
-			':' +
-			(second < 10 ? '0' + second.toString() : second.toString())
-		return time
-	})
-	onMounted(() => {
-		timer.value = setInterval(() => {
-			now_date.value = new Date() // 修改数据date
-		}, 500)
-	})
-	onUnmounted(() => {
-		clearInterval(timer.value)
-	})
-</script>
-<template>
-	<div>
-		<div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ date }}</div>
-		<div class="flex mt-5px">
-			<div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ week }}</div>
-			<div class="text-12px font-bold ml-5px" :style="{ color: props.fontColor }">{{ time }}</div>
-		</div>
-	</div>
-</template>
+<script setup lang="ts">
+	const props = defineProps<{
+		width: number
+		fontFamily: string
+		color: string
+		fontSize: number
+		bold: boolean
+	}>()
+
+	const styles = computed(() => ({
+		fontFamily: props.fontFamily,
+		color: props.color,
+		fontSize: props.fontSize + 'px',
+		fontWeight: props.bold ? 'bold' : 'normal'
+	}))
+
+	const now_date = ref(new Date())
+	const timer = ref()
+	const date = computed(() => {
+		const year = now_date.value.getFullYear()
+		const month = now_date.value.getMonth() + 1
+		const day = now_date.value.getDate()
+		return year.toString() + '年' + month.toString() + '月' + day.toString() + '日'
+	})
+	const week = computed(() => {
+		const d = now_date.value.getDay()
+		const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+		return weekday[d]
+	})
+	const time = computed(() => {
+		const hour = now_date.value.getHours()
+		const minute = now_date.value.getMinutes()
+		const second = now_date.value.getSeconds()
+		return (
+			(hour < 10 ? '0' + hour.toString() : hour.toString()) +
+			':' +
+			(minute < 10 ? '0' + minute.toString() : minute.toString()) +
+			':' +
+			(second < 10 ? '0' + second.toString() : second.toString())
+		)
+	})
+
+	onMounted(() => {
+		timer.value = setInterval(() => {
+			now_date.value = new Date() // 修改数据date
+		}, 500)
+	})
+	onUnmounted(() => {
+		clearInterval(timer.value)
+	})
+</script>
+<template>
+	<div class="now-time" :style="{ width: props.width + 'px' }">
+		<div :style="styles">{{ date }}</div>
+		<div class="flex mt-5px">
+			<div :style="styles">{{ week }}</div>
+			<div :style="styles">{{ time }}</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.now-time {
+		min-height: 40px;
+		min-width: 100px;
+		color: #c54e6a;
+
+		.flex {
+			justify-content: space-between;
+		}
+	}
+</style>