@zhangqingcq/vgce 0.0.20 → 0.0.21

package/src/components/svg-editor/right-panel/bind-anchor.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+	import { ELineBindAnchors } from '@/components/config/types'
+	import { useGlobalStore } from '@/stores/global'
+	import { pinia } from '@/hooks'
+	import { EDoneJsonType } from '@/config/types'
+	import { ElFormItem, ElSwitch, ElSelect, ElOption, ElInputNumber } from 'element-plus'
+	import { moveAnchors, setSvgActualInfo } from '@/utils'
+
+	const globalStore = useGlobalStore(pinia)
+
+	const emit = defineEmits(['update:modelValue'])
+	const props = defineProps<{ modelValue?: { target_id: string; type: ELineBindAnchors } | null; title: string }>()
+
+	const switchValue = computed({
+		get() {
+			return props.modelValue !== null
+		},
+		set(v: boolean) {
+			let t: any = null
+			if (v) {
+				t = {
+					target_id: '',
+					type: ''
+				}
+			}
+			emit('update:modelValue', t)
+		}
+	})
+
+	const _targetId = computed({
+		get() {
+			return props.modelValue?.target_id ?? undefined
+		},
+		set(v) {
+			let t: any = null
+			if (switchValue.value) {
+				t = {
+					target_id: v,
+					type: _type.value
+				}
+			}
+			emit('update:modelValue', t)
+		}
+	})
+
+	const _type = computed({
+		get() {
+			return props.modelValue?.type ?? undefined
+		},
+		set(v) {
+			let t: any = null
+			if (switchValue.value) {
+				t = {
+					target_id: _targetId.value,
+					type: v
+				}
+			}
+			emit('update:modelValue', t)
+		}
+	})
+
+	const _targets = computed(() =>
+		globalStore.done_json
+			.filter((e: Record<string, any>) => e.type !== EDoneJsonType.ConnectionLine)
+			.map((e: Record<string, any>) => ({
+				label: e.title,
+				value: e.id
+			}))
+	)
+
+	const _types = [
+		{
+			label: '上锚点',
+			value: ELineBindAnchors.TopCenter
+		},
+		{
+			label: '右锚点',
+			value: ELineBindAnchors.Right
+		},
+		{
+			label: '下锚点',
+			value: ELineBindAnchors.BottomCenter
+		},
+		{
+			label: '左锚点',
+			value: ELineBindAnchors.Left
+		}
+	]
+
+	function changHandle() {
+		nextTick(function () {
+			if (switchValue.value && props.modelValue?.target_id && props.modelValue?.type && globalStore.handle_svg_info) {
+				let done_json: any = null
+				for (let e of globalStore.done_json) {
+					if (e.id === props.modelValue.target_id) {
+						done_json = e
+					}
+				}
+				if (done_json) {
+					setSvgActualInfo(done_json)
+					moveAnchors(done_json)
+				}
+			}
+		})
+	}
+</script>
+
+<template>
+	<el-form-item :label="props.title" size="small">
+		<el-switch v-model="switchValue" @change="changHandle" />
+	</el-form-item>
+	<el-form-item label="绑定对象" size="small" v-if="switchValue">
+		<el-select v-model="_targetId" @change="changHandle">
+			<el-option v-for="t of _targets" :key="t.value" :label="t.label" :value="t.value" />
+		</el-select>
+	</el-form-item>
+	<el-form-item label="绑定位置" size="small" v-if="switchValue">
+		<el-select v-model="_type" @change="changHandle">
+			<el-option v-for="t of _types" :key="t.value" :label="t.label" :value="t.value" />
+		</el-select>
+	</el-form-item>
+</template>
+
+<style lang="less" scoped></style>

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

@@ -3,7 +3,7 @@
 	import '@/components/ace-edit'
 	import { ElButton, ElDialog } from 'element-plus'
 
-	const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
+	const props = withDefaults(defineProps<{ modelValue: any; lang?: string; title?: string }>(), {
 		modelValue: () => ({}),
 		lang: 'json',
 		title: '编辑'

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

@@ -36,7 +36,7 @@
 				<span v-else>{{ key }}</span>
 			</template>
 			<el-tooltip
-				:content="attr_item.val"
+				:content="JSON.stringify(attr_item.val)"
 				v-if="getStringWidth(String(attr_item.val)) > 145"
 				placement="left"
 				popper-class="props-popper"
@@ -65,6 +65,13 @@
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
 			/>
+			<el-input
+				v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
+				v-model="attr_item.val"
+				autosize
+				type="textarea"
+				:disabled="Boolean(attr_item?.disabled)"
+			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
 				v-model="attr_item.val"

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 	import {
+		ElButton,
 		ElCollapse,
 		ElCollapseItem,
 		ElColorPicker,
@@ -14,25 +15,28 @@
 		ElTabPane,
 		ElTabs
 	} from 'element-plus'
+	import { Aim } from '@element-plus/icons-vue'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'
-	import { numberArray } from '@/utils'
-	import { EGlobalStoreIntention } from '@/stores/global/types'
+	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 List from '@/components/svg-editor/right-panel/list.vue'
 	import Condition from '@/components/svg-editor/right-panel/condition.vue'
-	import { ElButton } from 'element-plus'
 	import CodeEditModal from '@/components/svg-editor/right-panel/code-edit-modal.vue'
-	import { EConditionType, EEventAction, EEventType } from '@/config/types'
 	import type { IEventsItem } from '@/config/types'
+	import { EConditionType, EDoneJsonType, EEventAction, EEventType } from '@/config/types'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+	import BindAnchor from '@/components/svg-editor/right-panel/bind-anchor.vue'
 
 	const configStore = useConfigStore(pinia)
 	const globalStore = useGlobalStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 
 	const activeName = ref('page')
 	const activeNameB = ref('style')
@@ -80,6 +84,23 @@
 	const deleteE = (i: number) => {
 		globalStore.handle_svg_info?.info?.events!.splice(i, 1)
 	}
+
+	const resetCanvas = () => {
+		svgEditLayoutStore.center_offset = {
+			x: 0,
+			y: 0
+		}
+	}
+
+	const changHandle = () => {
+		if (globalStore.handle_svg_info) {
+			const done_json = globalStore.done_json[globalStore.handle_svg_info.index]
+			nextTick(function () {
+				setSvgActualInfo(done_json)
+				moveAnchors(done_json)
+			})
+		}
+	}
 </script>
 
 <template>
@@ -89,23 +110,52 @@
 				<el-form-item label="背景色" size="small">
 					<el-color-picker v-model="configStore.svg.background_color" />
 				</el-form-item>
-				<el-form-item label="x原点" size="small">
-					<el-input-number v-model="configStore.svg.position_center.x" />
+				<el-form-item label="画布" size="small">
+					<el-button size="small" @click="resetCanvas" :icon="Aim">重置位置</el-button>
 				</el-form-item>
-				<el-form-item label="y原点" size="small">
-					<el-input-number v-model="configStore.svg.position_center.y" />
+				<el-form-item label="X轴偏移" size="small">
+					<el-input-number v-model="svgEditLayoutStore.center_offset.x" />
 				</el-form-item>
-				<el-form-item label="网格" size="small">
-					<el-switch v-model="configStore.svg.grid" />
+				<el-form-item label="Y轴偏移" size="small">
+					<el-input-number v-model="svgEditLayoutStore.center_offset.y" />
+				</el-form-item>
+				<el-form-item label="缩放" size="small">
+					<el-input-number v-model="configStore.svg.scale" :step="0.1" step-strictly />
 				</el-form-item>
 				<el-form-item label="标尺" size="small">
 					<el-switch v-model="configStore.svg.ruler" />
 				</el-form-item>
-				<el-form-item label="缩放" size="small">
-					<el-input-number v-model="configStore.svg.scale" :step="0.1" step-strictly />
+				<el-form-item label="网格" size="small">
+					<el-switch v-model="configStore.svg.grid" />
+				</el-form-item>
+				<el-form-item label="网格颜色" size="small" v-if="configStore.svg.grid">
+					<el-color-picker v-model="configStore.svg.grid_color" />
 				</el-form-item>
 			</el-form>
 		</el-tab-pane>
+		<el-tab-pane label="连线" name="line">
+			<el-form label-width="60px" label-position="left" v-if="configStore.connection_line.props">
+				<dynamic-el-form-item :obj-info="configStore.connection_line.props" :hide="['point_position']" />
+			</el-form>
+			<el-form label-width="60px" label-position="left" v-if="configStore.connection_line.animations">
+				<el-form-item :label="configStore.connection_line.animations.type.title" size="small">
+					<el-select v-model="configStore.connection_line.animations.type.val" placeholder="Select" size="small">
+						<el-option
+							v-for="item in configStore.connection_line.animations.type.options"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+						/>
+					</el-select>
+				</el-form-item>
+
+				<dynamic-el-form-item
+					:obj-info="configStore.connection_line.animations"
+					v-if="configStore.connection_line.animations.type.val !== 'None'"
+					:hide="['type', 'repeatCount']"
+				/>
+			</el-form>
+		</el-tab-pane>
 		<el-tab-pane label="通信" name="net">
 			<el-collapse v-model="netActive">
 				<el-collapse-item name="MQTT">
@@ -129,14 +179,6 @@
 				</el-collapse-item>
 			</el-collapse>
 		</el-tab-pane>
-		<el-tab-pane label="连线" name="line">
-			<el-form label-width="60px" label-position="left" v-if="configStore.connection_line.props">
-				<dynamic-el-form-item :obj-info="configStore.connection_line.props" :hide="['point_position']" />
-			</el-form>
-			<el-form label-width="60px" label-position="left" v-if="configStore.connection_line.animations">
-				<dynamic-el-form-item :obj-info="configStore.connection_line.animations" />
-			</el-form>
-		</el-tab-pane>
 		<el-tab-pane label="结构" name="tree">
 			<component-tree />
 		</el-tab-pane>
@@ -151,17 +193,68 @@
 				<el-form-item label="标题" size="small">
 					<el-input v-model="globalStore.handle_svg_info!.info.title" />
 				</el-form-item>
-				<el-form-item label="x坐标" size="small">
-					<el-input-number v-model="globalStore.handle_svg_info!.info.x" />
+				<el-form-item label="X坐标" size="small">
+					<el-input-number v-model="globalStore.handle_svg_info!.info.x" @change="changHandle" />
+				</el-form-item>
+				<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="y坐标" size="small">
-					<el-input-number v-model="globalStore.handle_svg_info!.info.y" />
+				<el-form-item label="X缩放" size="small">
+					<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-input-number v-model="globalStore.handle_svg_info!.info.scale_y" @change="changHandle" />
+				</el-form-item>
+				<el-form-item label="旋转" size="small">
+					<el-input-number v-model="globalStore.handle_svg_info!.info.rotate" @change="changHandle" />
 				</el-form-item>
 				<el-form-item label="显示" size="small">
 					<el-switch v-model="globalStore.handle_svg_info!.info.display" />
 				</el-form-item>
 			</el-form>
 		</el-tab-pane>
+		<el-tab-pane label="数据" name="data">
+			<el-form label-width="90px" label-position="left">
+				<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) in 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>
+
+				<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-form-item>
+				</div>
+				<dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
+				<bind-anchor
+					v-if="globalStore.handle_svg_info?.info.type === EDoneJsonType.ConnectionLine"
+					v-model="globalStore.handle_svg_info!.info!.bind_anchors!.start"
+					title="绑定起点"
+				/>
+				<bind-anchor
+					v-if="globalStore.handle_svg_info?.info.type === EDoneJsonType.ConnectionLine"
+					v-model="globalStore.handle_svg_info!.info!.bind_anchors!.end"
+					title="绑定终点"
+				/>
+			</el-form>
+		</el-tab-pane>
 		<el-tab-pane label="事件" name="event">
 			<el-button type="primary" style="width: 100%" @click="addEvent">添加事件</el-button>
 			<el-collapse v-model="eventsActive">
@@ -240,38 +333,6 @@
 				</el-form-item>
 			</el-form>
 		</el-tab-pane>
-		<el-tab-pane label="数据" name="data">
-			<el-form label-width="90px" label-position="left">
-				<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) in 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>
-
-				<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-form-item>
-				</div>
-				<dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
-			</el-form>
-		</el-tab-pane>
 		<el-tab-pane label="结构" name="tree">
 			<component-tree />
 		</el-tab-pane>

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

@@ -3,12 +3,14 @@
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'
 	import { useEditPrivateStore } from '@/stores/system'
-	import { ElIcon, ElDivider } from 'element-plus'
+	import { ElIcon, ElDivider, ElDialog, ElScrollbar } from 'element-plus'
 	import SvgAnalysis from '../../svg-analysis/index.vue'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 	import { EVisibleConfKey } from '../types'
 	import type { IDataModel } from '../types'
 	import { EGlobalStoreIntention } from '@/stores/global/types'
+	import { VAceEditor } from 'vue3-ace-editor'
+	import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
 
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const globalStore = useGlobalStore(pinia)
@@ -35,13 +37,30 @@
 		}
 		emits('onSave', data_model)
 	}
+
+	const open = ref(false)
+
+	const connection_line = computed({
+		get: () => globalStore.intention === EGlobalStoreIntention.Connection,
+		set(v: any) {
+			globalStore.intention = v ? EGlobalStoreIntention.Connection : EGlobalStoreIntention.None
+			if (v) {
+				globalStore.setHandleSvgInfo(null)
+			}
+		}
+	})
 </script>
 
 <template>
 	<div class="flex justify-between" style="width: 100%">
-		<div class="flex items-center justify-between" style="width: 220px">
-			<div class="flex items-center"><span class="logo-title">组态编辑器</span></div>
-			<el-icon :size="24" class="bt-Icon" @click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav">
+		<div class="flex items-center justify-between" style="width: 250px">
+			<div class="flex items-center"><span class="logo-title">Svg Editor</span></div>
+			<el-icon
+				:size="24"
+				class="bt-Icon"
+				@click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav"
+				:title="svgEditLayoutStore.left_nav ? '隐藏左侧菜单' : '显示左侧菜单'"
+			>
 				<svg-analysis v-if="svgEditLayoutStore.left_nav" name="menu-unfold" />
 				<svg-analysis v-else name="menu-fold" />
 			</el-icon>
@@ -50,65 +69,79 @@
 			<div class="flex items-center">
 				<el-icon
 					title="撤销 ctrl+z"
-					:size="20"
+					:size="24"
 					:class="`${editPrivateStore.getTopBtnUndoStatus ? 'bt-Icon' : 'icon-disable'} ml-20px`"
 					@click="() => editPrivateStore.topUndoBtnClick()"
 				>
-					<svg-analysis name="undo" />
+					<svg-analysis :name="editPrivateStore.getTopBtnUndoStatus ? 'undo' : 'undo-gray'" />
 				</el-icon>
 				<el-icon
 					title="重做 ctrl+shift+z"
 					:class="`${editPrivateStore.getTopBtnRedoStatus ? 'bt-Icon' : 'icon-disable'} ml-5px`"
-					:size="20"
+					:size="24"
 					@click="() => editPrivateStore.topRedoBtnClick()"
 				>
-					<svg-analysis name="redo" />
+					<svg-analysis :name="editPrivateStore.getTopBtnRedoStatus ? 'redo' : 'redo-gray'" />
 				</el-icon>
 				<el-divider direction="vertical"></el-divider>
 				<el-icon
 					title="清空 ctrl+delete"
-					:class="`${globalStore.done_json.length > 0 ? 'bt-Icon' : 'icon-disable'}`"
-					:size="20"
+					:class="globalStore.done_json.length > 0 ? 'bt-Icon' : 'icon-disable'"
+					:size="24"
 					@click="onDeleteBtnClick"
 				>
-					<svg-analysis name="delete" />
+					<svg-analysis :name="globalStore.done_json.length > 0 ? 'delete' : 'delete-gray'" />
 				</el-icon>
 				<el-divider direction="vertical" />
 				<el-icon
 					title="导入数据模型"
 					class="bt-Icon"
-					:size="20"
+					:size="24"
 					@click="emits('changeVisible', EVisibleConfKey.ImportJson, true)"
 				>
 					<svg-analysis name="import" />
 				</el-icon>
 				<el-icon
 					title="导出数据模型"
-					:size="20"
+					:size="24"
 					class="bt-Icon ml-5px"
 					@click="emits('changeVisible', EVisibleConfKey.ExportJson, true)"
 				>
 					<svg-analysis name="export" />
 				</el-icon>
+				<el-divider direction="vertical" />
+				<el-icon
+					title="创建连线"
+					class="bt-Icon"
+					:class="{ active: connection_line }"
+					:size="24"
+					@click="connection_line = !connection_line"
+				>
+					<svg-analysis :name="connection_line ? 'line-active' : 'line'" />
+				</el-icon>
+				<el-divider direction="vertical" />
+				<el-icon title="说明" class="bt-Icon" :size="24" @click="open = !open">
+					<svg-analysis name="question" />
+				</el-icon>
 				<!-- <el-divider direction="vertical"></el-divider>
-        <el-icon title="组合" class="bt-Icon" :size="20">
+        <el-icon title="组合" class="bt-Icon" :size="24">
           <svg-analysis name="group"/>
         </el-icon>
         <el-divider direction="vertical"></el-divider>
-        <el-icon title="取消组合" class="bt-Icon" :size="20">
+        <el-icon title="取消组合" class="bt-Icon" :size="24">
           <svg-analysis name="ungroup"/>
         </el-icon>
         <el-divider direction="vertical"></el-divider>
-        <el-icon title="锁定" class="bt-Icon" :size="20">
+        <el-icon title="锁定" class="bt-Icon" :size="24">
           <svg-analysis name="lock"/>
         </el-icon> -->
 			</div>
 			<div class="flex items-center mr-20px">
-				<el-icon title="返回" class="bt-Icon" :size="20" @click="emits('onReturn')">
+				<el-icon title="返回" class="bt-Icon" :size="24" @click="emits('onReturn')">
 					<svg-analysis name="return" />
 				</el-icon>
 				<el-divider direction="vertical"></el-divider>
-				<el-icon title="保存" class="bt-Icon" :size="20" @click="onSaveClick">
+				<el-icon title="保存" class="bt-Icon" :size="24" @click="onSaveClick">
 					<svg-analysis name="save" />
 				</el-icon>
 				<el-divider direction="vertical"></el-divider>
@@ -117,23 +150,74 @@
 				</el-icon>
 			</div>
 		</div>
-		<div class="flex items-center" style="width: 220px">
-			<el-icon :size="24" class="bt-Icon" @click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav">
+		<div class="flex items-center" style="width: 250px">
+			<el-icon
+				:size="24"
+				class="bt-Icon"
+				@click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav"
+				:title="svgEditLayoutStore.right_nav ? '隐藏右侧菜单' : '显示右侧菜单'"
+			>
 				<svg-analysis v-if="svgEditLayoutStore.right_nav" name="menu-fold" />
 				<svg-analysis v-else name="menu-unfold" />
 			</el-icon>
 		</div>
 	</div>
+	<el-dialog v-model="open" title="使用说明" width="60%" class="guide-dialog">
+		<el-scrollbar max-height="60vh">
+			<div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
+			<div>鼠标按住左键可以框选，也可以按住ctrl+鼠标左键点图形进行多选</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>右键画布然后拖动即可，右侧面板‘图纸’栏可微调或重置位置</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>使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</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>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线，将标尺辅助线拖动到标尺区域即可删除标尺辅助线</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
+				>在右侧‘连线’栏可以统一配置连线样式，配置后先增加的线会应用新样式，之前的线样式不变，如需改变，可选中线手动更改或删除重画</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>画线的时候按住ctrl即可画竖线，按住shift即可画横线</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 style="padding-bottom: 14px">
+				若线段绑定了锚点，移动线段，绑定的锚点不会移动。若是想将线段整体移动，需要先选中线段，在右侧‘数据’栏里解除绑定
+			</div>
+		</el-scrollbar>
+	</el-dialog>
 </template>
 
 <style scoped lang="less">
 	.logo-title {
-		font-size: 15px;
-		font-weight: 600;
+		font-size: 16px;
+		color: #555;
+		font-weight: 500;
+	}
+
+	.guide-title {
+		color: #99a;
 	}
 
-	.icon-disable {
-		cursor: not-allowed;
-		color: #ccc;
+	.el-divider {
+		border-color: #f1f1f5;
+	}
+</style>
+<style lang="less">
+	.guide-dialog {
+		.el-dialog__header {
+			background-color: #f1f1f5;
+			margin-right: 0;
+			padding-right: 16px;
+		}
+		.el-dialog__body {
+			padding-top: 0;
+			padding-bottom: 8px;
+			padding-right: 8px;
+		}
 	}
 </style>