@zhangqingcq/vgce 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"

package/src/assets/svgs/text-box.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723449312323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4279" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M938.666667 955.733333h-85.333334a17.066667 17.066667 0 0 1-17.066666-17.066666v-17.066667H187.733333v17.066667a17.066667 17.066667 0 0 1-17.066666 17.066666H85.333333a17.066667 17.066667 0 0 1-17.066666-17.066666v-85.333334a17.066667 17.066667 0 0 1 17.066666-17.066666h17.066667V187.733333H85.333333a17.066667 17.066667 0 0 1-17.066666-17.066666V85.333333a17.066667 17.066667 0 0 1 17.066666-17.066666h85.333334a17.066667 17.066667 0 0 1 17.066666 17.066666v17.066667h648.533334V85.333333a17.066667 17.066667 0 0 1 17.066666-17.066666h85.333334a17.066667 17.066667 0 0 1 17.066666 17.066666v85.333334a17.066667 17.066667 0 0 1-17.066666 17.066666h-17.066667v648.533334h17.066667a17.066667 17.066667 0 0 1 17.066666 17.066666v85.333334a17.066667 17.066667 0 0 1-17.066666 17.066666z m-68.266667-34.133333h51.2v-51.2h-51.2v51.2zM102.4 921.6h51.2v-51.2H102.4v51.2z m85.333333-34.133333h648.533334v-34.133334a17.066667 17.066667 0 0 1 17.066666-17.066666h34.133334V187.733333h-34.133334a17.066667 17.066667 0 0 1-17.066666-17.066666V136.533333H187.733333v34.133334a17.066667 17.066667 0 0 1-17.066666 17.066666H136.533333v648.533334h34.133334a17.066667 17.066667 0 0 1 17.066666 17.066666v34.133334zM904.533333 153.6h17.066667V102.4h-51.2v51.2h34.133333zM119.466667 153.6h34.133333V102.4H102.4v51.2h17.066667z" p-id="4280"></path></svg>

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

@@ -944,9 +944,10 @@
 
 <template>
 	<div
+		ref="canvasRef"
 		class="canvas"
+		:style="{ backgroundColor: configStore.svg.background_color, position: 'relative' }"
 		tabindex="0"
-		ref="canvasRef"
 		@drop="dropEvent"
 		@dragenter="dragEnterEvent"
 		@dragover="dragOverEvent"
@@ -957,171 +958,169 @@
 		@keydown="onHandleKeyDown"
 		@mousewheel="onMousewheel"
 	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			:style="{ backgroundColor: configStore.svg.background_color }"
-			width="100%"
-			height="100%"
-		>
-			<defs>
-				<pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
-					<line x1="0" y1="0" x2="0" y2="20" :stroke="configStore.svg.grid_color" />
-					<line x1="10" y1="0" x2="10" y2="20" :stroke="configStore.svg.grid_color" />
-					<line x1="0" y1="0" x2="20" y2="0" :stroke="configStore.svg.grid_color" />
-					<line x1="0" y1="10" x2="20" y2="10" :stroke="configStore.svg.grid_color" />
-				</pattern>
-			</defs>
-			<rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
-			<g
-				:transform="`translate(${svgEditLayoutStore.center_offset.x * configStore.svg.scale},${
-					svgEditLayoutStore.center_offset.y * configStore.svg.scale
-				})rotate(${0})scale(${configStore.svg.scale})`"
-			>
+		<slot name="background" />
+		<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
+			<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+				<defs>
+					<pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+						<line x1="0" y1="0" x2="0" y2="20" :stroke="configStore.svg.grid_color" />
+						<line x1="10" y1="0" x2="10" y2="20" :stroke="configStore.svg.grid_color" />
+						<line x1="0" y1="0" x2="20" y2="0" :stroke="configStore.svg.grid_color" />
+						<line x1="0" y1="10" x2="20" y2="10" :stroke="configStore.svg.grid_color" />
+					</pattern>
+				</defs>
+				<rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
 				<g
-					v-for="(item, index) in globalStore.done_json"
-					:key="item.id"
-					:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
-					v-show="item.display"
-					@mousewheel="stopEvent"
+					:transform="`translate(${svgEditLayoutStore.center_offset.x * configStore.svg.scale},${
+						svgEditLayoutStore.center_offset.y * configStore.svg.scale
+					})rotate(${0})scale(${configStore.svg.scale})`"
 				>
-					<g :class="`${getCommonClass(item)}`">
-						<g
-							: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
-							)})`"
-							@mousedown="onSvgMouseDown(item, index, $event)"
-							@mouseup="onSvgMouseUp(item, index, $event)"
-							@mouseenter="onSvgMouseEnter(item, index, $event)"
-							@mouseleave="onSvgMouseLeave(item, index, $event)"
-							@contextmenu="onSvgContextMenuEvent(item, index, $event)"
-						>
-							<connection-line
-								v-if="item.type === EDoneJsonType.ConnectionLine"
-								:item-info="item"
-								:point-visible="visible_info.connection_line && visible_info.select_item.info?.id == item.id"
-							/>
-							<use
-								v-else-if="item.type === EDoneJsonType.File"
-								:xlink:href="`#svg-${item.name}`"
-								v-bind="prosToVBind(item, ['height', 'width'])"
-								:width="item.props?.width?.val ?? 100"
-								:height="item.props?.height?.val ?? 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)})`"
-							/>
-							<component
-								v-else-if="item.type === EDoneJsonType.CustomSvg"
-								:is="item.tag"
-								v-bind="prosToVBind(item, ['height', 'width'])"
-								:width="item.props?.width?.val ?? 100"
-								:height="item.props?.height?.val ?? 100"
-								:id="item.id"
-								@resize="resizeBox"
+					<g
+						v-for="(item, index) in globalStore.done_json"
+						:key="item.id"
+						:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
+						v-show="item.display"
+						@mousewheel="stopEvent"
+					>
+						<g :class="`${getCommonClass(item)}`">
+							<g
 								: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)})`"
-							/>
-							<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}`"
-								class="foreignObject"
+								})rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
+									item.actual_bound.y +
+									item.actual_bound.height / 2
+								)})`"
+								@mousedown="onSvgMouseDown(item, index, $event)"
+								@mouseup="onSvgMouseUp(item, index, $event)"
+								@mouseenter="onSvgMouseEnter(item, index, $event)"
+								@mouseleave="onSvgMouseLeave(item, index, $event)"
+								@contextmenu="onSvgContextMenuEvent(item, index, $event)"
 							>
+								<connection-line
+									v-if="item.type === EDoneJsonType.ConnectionLine"
+									:item-info="item"
+									:point-visible="visible_info.connection_line && visible_info.select_item.info?.id == item.id"
+								/>
+								<use
+									v-else-if="item.type === EDoneJsonType.File"
+									:xlink:href="`#svg-${item.name}`"
+									v-bind="prosToVBind(item, ['height', 'width'])"
+									:width="item.props?.width?.val ?? 100"
+									:height="item.props?.height?.val ?? 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)})`"
+								/>
 								<component
+									v-else-if="item.type === EDoneJsonType.CustomSvg"
 									:is="item.tag"
-									v-bind="prosToVBind(item)"
+									v-bind="prosToVBind(item, ['height', 'width'])"
+									:width="item.props?.width?.val ?? 100"
+									:height="item.props?.height?.val ?? 100"
 									:id="item.id"
+									@resize="resizeBox"
 									: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 }}
-								</component>
-							</foreignObject>
+								/>
+								<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}`"
+									class="foreignObject"
+								>
+									<component
+										:is="item.tag"
+										v-bind="prosToVBind(item)"
+										: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.tag_slot }}
+									</component>
+								</foreignObject>
 
-							<line
-								v-else-if="item.type === EDoneJsonType.StraightLine"
-								:id="item.id"
-								:x1="item.props.start_x.val"
-								:y1="item.props.start_y.val"
-								:x2="item.props.end_x.val"
-								:y2="item.props.end_y.val"
-								fill="#FF0000"
-								stroke="#FF0000"
-								stroke-width="2"
-							/>
-							<rect
-								v-if="item.config.actual_rect"
-								:id="`rect${item.id}`"
-								fill="black"
-								fill-opacity="0"
-								v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
-								style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
-								:class="{
-									'svg-item-none':
-										!item.selected &&
-										(globalStore.intention == EGlobalStoreIntention.None ||
-											globalStore.intention == EGlobalStoreIntention.Select),
-									'svg-item-move':
-										globalStore.intention == EGlobalStoreIntention.Move &&
-										globalStore.handle_svg_info?.info.id == item.id,
-									'svg-item-select':
-										globalStore.intention == EGlobalStoreIntention.Select &&
-										globalStore.handle_svg_info?.info.id == item.id,
-									'svg-item-in-group': item.selected
-								}"
-							/>
+								<line
+									v-else-if="item.type === EDoneJsonType.StraightLine"
+									:id="item.id"
+									:x1="item.props.start_x.val"
+									:y1="item.props.start_y.val"
+									:x2="item.props.end_x.val"
+									:y2="item.props.end_y.val"
+									fill="#FF0000"
+									stroke="#FF0000"
+									stroke-width="2"
+								/>
+								<rect
+									v-if="item.config.actual_rect"
+									:id="`rect${item.id}`"
+									fill="black"
+									fill-opacity="0"
+									v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
+									style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
+									:class="{
+										'svg-item-none':
+											!item.selected &&
+											(globalStore.intention == EGlobalStoreIntention.None ||
+												globalStore.intention == EGlobalStoreIntention.Select),
+										'svg-item-move':
+											globalStore.intention == EGlobalStoreIntention.Move &&
+											globalStore.handle_svg_info?.info.id == item.id,
+										'svg-item-select':
+											globalStore.intention == EGlobalStoreIntention.Select &&
+											globalStore.handle_svg_info?.info.id == item.id,
+										'svg-item-in-group': item.selected
+									}"
+								/>
 
-							<handle-panel
-								v-if="
-									globalStore.handle_svg_info?.info.id === item.id &&
-									visible_info.handle_panel &&
-									item.type !== EDoneJsonType.ConnectionLine
-								"
-								:item-info="item"
-							/>
-							<connection-panel
-								@contextmenu="onCanvasContextMenuEvent"
-								v-if="
-									!item.selected &&
-									visible_info.select_item.info?.id == item.id &&
-									visible_info.connection_panel &&
-									item.config.have_anchor &&
-									globalStore.intention !== EGlobalStoreIntention.SelectArea &&
-									(globalStore.intention === EGlobalStoreIntention.Select
-										? item.id !== globalStore.handle_svg_info?.info.id
-										: true)
-								"
-								:item-info="item"
-							/>
+								<handle-panel
+									v-if="
+										globalStore.handle_svg_info?.info.id === item.id &&
+										visible_info.handle_panel &&
+										item.type !== EDoneJsonType.ConnectionLine
+									"
+									:item-info="item"
+								/>
+								<connection-panel
+									@contextmenu="onCanvasContextMenuEvent"
+									v-if="
+										!item.selected &&
+										visible_info.select_item.info?.id == item.id &&
+										visible_info.connection_panel &&
+										item.config.have_anchor &&
+										globalStore.intention !== EGlobalStoreIntention.SelectArea &&
+										(globalStore.intention === EGlobalStoreIntention.Select
+											? item.id !== globalStore.handle_svg_info?.info.id
+											: true)
+									"
+									:item-info="item"
+								/>
+							</g>
 						</g>
 					</g>
+					<!--框选-->
+					<rect
+						:x="selectRect.x"
+						:y="selectRect.y"
+						:height="selectRect.height"
+						:width="selectRect.with"
+						stroke="#107cec"
+						fill="#107cec"
+						fill-opacity=".2"
+					/>
 				</g>
-				<!--框选-->
-				<rect
-					:x="selectRect.x"
-					:y="selectRect.y"
-					:height="selectRect.height"
-					:width="selectRect.with"
-					stroke="#107cec"
-					fill="#107cec"
-					fill-opacity=".2"
-				/>
-			</g>
-		</svg>
+			</svg>
+		</div>
 	</div>
 	<!-- 右键菜单 -->
 	<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">

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

@@ -154,7 +154,11 @@
 				<el-main class="middle main">
 					<div class="canvas-main-pc">
 						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
-							<center-panel ref="centerRef" :vueComp="props.vueComp" />
+							<center-panel ref="centerRef" :vueComp="props.vueComp">
+								<template #background>
+									<slot name="background" />
+								</template>
+							</center-panel>
 						</Vue3RulerTool>
 					</div>
 				</el-main>

package/src/components/svg-viewer.vue

@@ -279,83 +279,63 @@
 <template>
 	<div
 		class="canvas"
+		:style="{ backgroundColor: preview_data.config.svg.background_color, position: 'relative' }"
 		@mousedown="onCanvasMouseDown"
 		@mousemove="onCanvasMouseMove"
 		@mouseup="onCanvasMouseUp"
 		@mousewheel="onMousewheel"
 		@contextmenu="preventDefault"
 	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			:style="{ backgroundColor: preview_data.config.svg.background_color }"
-			width="100%"
-			height="100%"
-		>
-			<g
-				:transform="`translate(${preview_data.layout_center.x},${preview_data.layout_center.y})rotate(${0})scale(${
-					preview_data.config.svg.scale
-				})`"
-			>
+		<slot name="background" />
+		<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
+			<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 				<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"
-					:style="getStyle(item)"
-					@click="eventHandle(item, EEventType.Click)"
-					@mousedown="stopEvent"
-					@mousemove="stopEvent"
-					@mouseup="stopEvent"
-					@mousewheel="stopEvent"
+					:transform="`translate(${preview_data.layout_center.x},${preview_data.layout_center.y})rotate(${0})scale(${
+						preview_data.config.svg.scale
+					})`"
 				>
-					<g :class="`${getCommonClass(item)}`">
-						<g
-							: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" />
-							<use
-								v-else-if="item.type === EDoneJsonType.File"
-								:xlink:href="`#svg-${item.name}`"
-								v-bind="prosToVBind(item, ['height', 'width'])"
-								:width="item.props?.width?.val ?? 100"
-								:height="item.props?.height?.val ?? 100"
-								:id="item.id"
+					<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"
+						:style="getStyle(item)"
+						@click="eventHandle(item, EEventType.Click)"
+						@mousedown="stopEvent"
+						@mousemove="stopEvent"
+						@mouseup="stopEvent"
+						@mousewheel="stopEvent"
+					>
+						<g :class="`${getCommonClass(item)}`">
+							<g
 								: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)})`"
-							/>
-							<component
-								v-else-if="item.type === EDoneJsonType.CustomSvg"
-								:is="item.tag"
-								v-bind="prosToVBind(item, ['height', 'width'])"
-								:width="item.props?.width?.val ?? 100"
-								:height="item.props?.height?.val ?? 100"
-								:id="item.id"
-								@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(${-(
-									item.actual_bound.x +
-									item.actual_bound.width / 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}`"
-								class="foreignObject"
+								})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" />
+								<use
+									v-else-if="item.type === EDoneJsonType.File"
+									:xlink:href="`#svg-${item.name}`"
+									v-bind="prosToVBind(item, ['height', 'width'])"
+									:width="item.props?.width?.val ?? 100"
+									:height="item.props?.height?.val ?? 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)})`"
+								/>
 								<component
+									v-else-if="item.type === EDoneJsonType.CustomSvg"
 									:is="item.tag"
-									v-bind="prosToVBind(item)"
+									v-bind="prosToVBind(item, ['height', 'width'])"
+									:width="item.props?.width?.val ?? 100"
+									:height="item.props?.height?.val ?? 100"
 									:id="item.id"
 									@on-change="eventHandle(item, EEventType.Change)"
 									:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
@@ -364,14 +344,33 @@
 										item.actual_bound.x +
 										item.actual_bound.width / 2
 									)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
-									>{{ item.tag_slot }}
-								</component>
-							</foreignObject>
+								/>
+								<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}`"
+									class="foreignObject"
+								>
+									<component
+										:is="item.tag"
+										v-bind="prosToVBind(item)"
+										:id="item.id"
+										@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(${-(
+											item.actual_bound.x +
+											item.actual_bound.width / 2
+										)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+										>{{ item.tag_slot }}
+									</component>
+								</foreignObject>
+							</g>
 						</g>
 					</g>
 				</g>
-			</g>
-		</svg>
+			</svg>
+		</div>
 	</div>
 </template>
 

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	const props = withDefaults(
+		defineProps<{
+			width: number
+			height: number
+			bgColor: string
+			bgOpacity: number
+			borderColor: string
+			borderWidth: number
+			borderRadius: number
+			borderOpacity: number
+		}>(),
+		{
+			width: 250,
+			height: 150,
+			bgColor: '#ffffff',
+			bgOpacity: 50,
+			borderColor: '#000000',
+			borderWidth: 1,
+			borderRadius: 5,
+			borderOpacity: 100
+		}
+	)
+	const styleOut = computed(() => {
+		return {
+			width: (props.width > 0 ? props.width : 0) + 'px',
+			height: (props.height > 0 ? props.height : 0) + 'px',
+			borderRadius: (props.borderRadius > 0 ? props.borderRadius : 0) + 'px'
+		}
+	})
+	const styleBorder = computed(() => {
+		return {
+			border: `${props.borderWidth > 0 ? props.borderWidth : 0}px solid ${props.borderColor}`,
+			borderRadius: (props.borderRadius > 0 ? props.borderRadius : 0) + 'px',
+			opacity: (props.borderOpacity > 0 ? (props.borderOpacity < 100 ? props.borderOpacity : 100) : 0) / 100
+		}
+	})
+	const styleM = computed(() => {
+		return {
+			backgroundColor: props.bgColor,
+			opacity: (props.bgOpacity > 0 ? (props.bgOpacity < 100 ? props.bgOpacity : 100) : 0) / 100,
+			borderRadius: props.borderRadius + 'px'
+		}
+	})
+</script>
+
+<template>
+	<div class="outM" :style="styleOut">
+		<div class="wallI" :style="styleM"></div>
+		<div class="borderB" :style="styleBorder"></div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.outM {
+		position: relative;
+	}
+
+	.borderB,
+	.wallI {
+		height: 100%;
+	}
+
+	.borderB {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+	}
+</style>

package/src/config/index.ts

@@ -1,6 +1,6 @@
 import type { IConfig } from './types'
-import { svg_config } from './svg'
-import { vue_config } from './vue'
+import svg_config from './svg'
+import vue_config from './vue'
 
 import { ElButton, ElTag } from 'element-plus'
 import Progress from '@/config/files/progress.vue'
@@ -11,6 +11,7 @@ import NowTime from '@/config/files/now-time.vue'
 import PieCharts from '@/config/files/pie-charts.vue'
 import LightA from '@/config/files/light-a.vue'
 import ClockA from '@/config/files/clock-a.vue'
+import TextBox from '@/config/files/text-box.vue'
 
 export const vueComp: Record<string, any> = {
 	'svg-text': SvgText,
@@ -22,7 +23,8 @@ export const vueComp: Record<string, any> = {
 	'switch-r': SwitchR,
 	'now-time': NowTime,
 	'light-a': LightA,
-	'clock-a': ClockA
+	'clock-a': ClockA,
+	'text-box': TextBox
 }
 
 export const config: IConfig = [...svg_config, ...vue_config]

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

@@ -1,8 +1,9 @@
 import type { IConfigComponentGroup } from '../../types'
-import { thermometer } from './thermometer'
+import thermometer from './thermometer'
 
-export const animation_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'have_animation',
 	title: '动画SVG',
 	list: [thermometer]
 }
+export default t

package/src/config/svg/animation/thermometer.ts

@@ -1,6 +1,6 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
-export const thermometer: IConfigItem = {
+const t: IConfigItem = {
 	name: 'thermometer',
 	title: '温度计',
 	type: EDoneJsonType.File,
@@ -19,3 +19,4 @@ export const thermometer: IConfigItem = {
 	},
 	events: []
 }
+export default t