深度画布工具栏

src/assets/icons/dc/dui.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.84125 5.40854L8.06875 0.172916C8.18375 0.0576386 8.31264 0 8.45542 0C8.59833 0 8.7275 0.0575006 8.84292 0.172501C8.9582 0.287501 9.01583 0.416458 9.01583 0.559375C9.01583 0.70243 8.9582 0.831667 8.84292 0.947084L3.30604 6.47583C3.16924 6.61264 3.01083 6.68104 2.83083 6.68104C2.65083 6.68104 2.49243 6.61264 2.35563 6.47583L0.172917 4.30125C0.0576393 4.18625 0 4.05736 0 3.91458C0 3.77167 0.0575 3.6425 0.1725 3.52708C0.2875 3.41181 0.416458 3.35417 0.559375 3.35417C0.702431 3.35417 0.831667 3.41181 0.947083 3.52708L2.84125 5.40854Z" fill="black"/>
+</svg>

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -2,14 +2,31 @@
 	<div class="header-tools">
 		<template v-for="(v, i) in tools" :key="i">
 			<span class="line" v-if="v.type === 'line'"></span>
-			<span
-				v-else
-				class="icon"
-				@click="onClickTool(v)"
-				:class="{ active: v.name === tool, disabled: v.disabled }"
-			>
-				<svg-icon :name="v.icon" :size="v.iconSize" />
-			</span>
+			<div v-else class="item">
+				<span
+					class="icon"
+					@click="onClickTool(v)"
+					:class="{
+						active: v.name === tool,
+						disabled: v.disabled
+					}"
+				>
+					<svg-icon :name="v.icon" :size="v.iconSize" />
+				</span>
+				<span class="more" v-if="v.child" @click="onClickMore(v)">
+					<svg-icon name="dc-down_arrow2" size="7" />
+				</span>
+				<div v-if="v.child" class="child" v-show="v.showChild">
+					<div v-for="(v_, i_) in v.child" :key="i_" @click="onClickTool(v_, v)">
+						<span v-show="tool === v_.name" class="dui">
+							<svg-icon name="dc-dui" size="9" />
+						</span>
+						<span class="icon"><svg-icon :name="v_.icon" :size="v_.iconSize" /></span>
+						<span class="label">{{ v_.label }}</span>
+						<span class="tip">{{ v_.tip }}</span>
+					</div>
+				</div>
+			</div>
 		</template>
 		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="12" /></span>
@@ -50,64 +67,65 @@
 	const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
 	const activeLayerId = computed(() => layerManager.activeID.value)
 	const tools = ref([
-		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) },
-		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18, disabled: ref(false) },
-		{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18, disabled: ref(false) },
-		{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18, disabled: ref(false) },
-		{
-			name: OperationType.IMAGE,
-			icon: 'dc-image',
-			iconSize: 17,
-			disabled: ref(false),
-			on: () => onImageClick()
-		},
-		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
+		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16 },
+		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18 },
+		{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18 },
+		{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18 },
+		{ icon: 'dc-image', iconSize: 17, on: () => onImageClick() },
+		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16 },
 		{
 			name: OperationType.RECTANGLE,
 			icon: 'dc-rectangle',
 			iconSize: 16,
-			disabled: ref(false)
-		},
-		{
-			name: OperationType.LINE,
-			icon: 'dc-line',
-			iconSize: 16,
-			disabled: ref(false)
-		},
-		{
-			name: OperationType.ARROW,
-			icon: 'dc-arrow',
-			iconSize: 16,
-			disabled: ref(false)
-		},
-		{
-			name: OperationType.ELLIPSE,
-			icon: 'dc-ellipse',
-			iconSize: 16,
-			disabled: ref(false)
-		},
-		{
-			name: OperationType.TRIANGLE,
-			icon: 'dc-triangle',
-			iconSize: 16,
-			disabled: ref(false)
-		},
-		{
-			name: OperationType.STAR,
-			icon: 'dc-star',
-			iconSize: 16,
-			disabled: ref(false)
+			showChild: false,
+			child: [
+				{
+					name: OperationType.RECTANGLE,
+					label: 'Rectangle',
+					icon: 'dc-rectangle',
+					iconSize: 13
+				},
+				{
+					name: OperationType.LINE,
+					label: 'Line',
+					icon: 'dc-line',
+					iconSize: 10
+				},
+				{
+					name: OperationType.ARROW,
+					label: 'Arrow',
+					icon: 'dc-arrow',
+					iconSize: 11
+				},
+				{
+					name: OperationType.ELLIPSE,
+					label: 'Ellipse',
+					icon: 'dc-ellipse',
+					iconSize: 15
+				},
+				{
+					name: OperationType.TRIANGLE,
+					label: 'Polygon',
+					icon: 'dc-triangle',
+					iconSize: 14
+				},
+				{
+					name: OperationType.STAR,
+					label: 'Star',
+					icon: 'dc-star',
+					iconSize: 15
+				}
+			]
 		},
+
 		{ type: 'line' },
 		{
-			name: OperationType.UNDO,
 			icon: 'dc-undo',
 			iconSize: 18,
 			disabled: isUndo,
 			on: () => stateManager.undoState()
 		},
 		{
-			name: OperationType.REDO,
 			icon: 'dc-redo',
 			iconSize: 18,
 			disabled: isRedo,
@@ -128,13 +146,21 @@
 			on: () => onDeleteActiveLayer()
 		}
 	])
-	const onClickTool = (tool: any) => {
-		if (tool.disabled?.value) return
-		if (tool.on) {
-			tool.on()
-		} else {
-			toolManager.setTool(tool.name)
+	const onClickTool = (v: any, parent?: any) => {
+		if (v.disabled?.value) return
+		if (parent) {
+			parent.name = v.name
+			parent.icon = v.icon
+			parent.iconSize = v.iconSize * 1.23
 		}
+		tools.value.forEach((v) => v.hasOwnProperty('showChild') && (v.showChild = false))
+		v.on ? v.on() : toolManager.setTool(v.name)
+	}
+	const onClickMore = (v: any) => {
+		tools.value.forEach((item) => {
+			if (item.hasOwnProperty('showChild') && item.name !== v.name) item.showChild = false
+		})
+		v.showChild = !v.showChild
 	}
 	const onImageClick = async () => {
 		const layer = await importLocalImage(false)
@@ -182,22 +208,81 @@
 			border-radius: 0.2rem;
 			margin: 0 0.6rem;
 		}
-		> .icon {
-			cursor: pointer;
+		> .item {
+			position: relative;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 3rem;
-			height: 3rem;
-			--svg-icon-color: #000;
-			border-radius: 0.4rem;
-			&:not(.disabled).active,
-			&:not(.disabled):hover {
-				background-color: #ebebeb;
+			> span {
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				--svg-icon-color: #000;
+				border-radius: 0.4rem;
+				height: 3rem;
+				&:not(.disabled).active,
+				&:not(.disabled):hover {
+					background-color: #ebebeb;
+				}
+				&.disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
 			}
-			&.disabled {
-				opacity: 0.5;
-				cursor: not-allowed;
+			> .icon {
+				width: 3rem;
+			}
+			> .more {
+				width: 1.1rem;
+			}
+			> .child {
+				cursor: pointer;
+				position: absolute;
+				min-width: 21rem;
+				top: calc(100% + 2rem);
+				left: 0;
+				padding: 0.6rem 0;
+				border: 0.1remx solid #d9d9d9;
+				background-color: #fff;
+				border-radius: 1.2rem;
+				box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+				> div {
+					height: 3.2rem;
+					display: flex;
+					align-items: center;
+					// justify-content: center;
+					gap: 0.8rem;
+					position: relative;
+					padding: 0 1.6rem;
+					> .dui {
+						position: absolute;
+						left: 1.5rem;
+						transform: translateX(-50%);
+					}
+					> .icon {
+						width: 2rem;
+						height: 2rem;
+						margin-left: 0.8rem;
+					}
+					> .label {
+						flex: 1;
+						font-size: 1.4rem;
+						color: #000;
+					}
+					> .tip {
+						font-size: 1.3rem;
+						color: rgba(13, 13, 13, 0.65);
+					}
+					&:not(.disabled).active,
+					&:not(.disabled):hover {
+						background-color: #ebebeb;
+					}
+					&.disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+					}
+				}
 			}
 		}
 		> button {

src/components/Canvas/DepthCanvas/tools/layerHelper.js

@@ -29,7 +29,6 @@ export const OperationType = {
 	PAN: "pan", // 拖拽模式
 	DRAW: "draw", // 绘画模式
 	ERASER: "eraser", // 橡皮擦模式
-	IMAGE: "image",// 图片工具模式
 	SELECTBOX: "selectbox",// 选择框工具模式
 
 	RECTANGLE: "rectangle",// 矩形工具模式
@@ -39,11 +38,7 @@ export const OperationType = {
 	TRIANGLE: "triangle",// 三角形工具模式
 	STAR: "star",// 五角星工具模式
 
-
-
 	TEXT: "text",// 文字工具模式
-	UNDO: "undo",// 撤销工具模式
-	REDO: "redo",// 重做工具模式
 };
 
 // 所有操作模式类型列表