fix

src/assets/icons/dui.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5369 3.30968C10.8031 3.49116 10.8718 3.85407 10.6903 4.12025L6.3153 10.5369C6.21745 10.6804 6.06073 10.7729 5.88779 10.7891C5.71485 10.8053 5.54368 10.7436 5.42085 10.6208L2.79585 7.99579C2.56805 7.76798 2.56805 7.39864 2.79585 7.17083C3.02366 6.94302 3.39301 6.94302 3.62081 7.17083L5.74798 9.298L9.72637 3.46303C9.90786 3.19685 10.2708 3.12819 10.5369 3.30968Z" fill="#0D0D0D" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/dropdown-menu.vue

@@ -11,9 +11,13 @@
 					:key="item.value"
 					:disabled="item.value === modelValue"
 					@click="onItemClick(item.value)"
-					style="--el-font-size-base: 1.4rem; --el-text-color-regular: #000"
 				>
-					<span>{{ item.label }}</span>
+					<div class="menu-item">
+						<span class="label">{{ item.label }}</span>
+						<span class="icon" v-show="item.value === modelValue">
+							<svg-icon name="dui" size="14" color="#000" />
+						</span>
+					</div>
 				</el-dropdown-item>
 			</el-dropdown-menu>
 		</template>
@@ -61,4 +65,17 @@
 			margin-left: 1.6rem;
 		}
 	}
+	.menu-item {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		font-size: 1.4rem;
+		color: #000;
+		> .label {
+			margin-right: auto;
+		}
+		> .icon {
+			margin-left: 1.6rem;
+		}
+	}
 </style>

src/views/canvas/index.vue

@@ -1,24 +1,64 @@
 <template>
 	<div class="canvas">
-		<card type="to-real-style" />
-		<card type="scene-composition" />
-		<card type="color-palette" />
-		<card type="to-video" />
-		<card type="to-3d-model" />
-		<card type="to-cad" />
-		<card type="add-print" />
-		<card type="edit-material" />
+		<div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
+			<div
+				class="canvas-content"
+				:style="{
+					top: `${data.y}px`,
+					left: `${data.x}px`,
+					transform: `scale(${data.scale})`
+				}"
+			>
+				<card type="to-real-style" />
+				<card type="scene-composition" />
+				<card type="color-palette" />
+				<card type="to-video" />
+				<card type="to-3d-model" />
+				<card type="to-cad" />
+				<card type="add-print" />
+				<card type="edit-material" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
 	import { useGlobalStore } from '@/stores'
-	import { useRouter, useRoute } from 'vue-router'
-	const router = useRouter()
-	const route = useRoute()
 	const globalStore = useGlobalStore()
+	const data = reactive({
+		x: 100,
+		y: 200,
+		scale: 1
+	})
+	const canvasMain = ref<HTMLDivElement>()
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 1) return
+		const ox = data.x
+		const oy = data.y
+		const X = e.clientX
+		const Y = e.clientY
+		const onMouseMove = (e: MouseEvent) => {
+			const dx = e.clientX - X
+			const dy = e.clientY - Y
+			data.x = ox + dx
+			data.y = oy + dy
+		}
+		const onMouseUp = (e: MouseEvent) => {
+			document.removeEventListener('mousemove', onMouseMove)
+			document.removeEventListener('mouseup', onMouseUp)
+		}
+		document.addEventListener('mousemove', onMouseMove)
+		document.addEventListener('mouseup', onMouseUp)
+	}
+	const onMouseWheel = (e: WheelEvent) => {
+		var delta = e.deltaY
+		var scale = data.scale - delta / 1000
+		if (scale < 0.2) scale = 0.2
+		if (scale > 10) scale = 10
+		data.scale = scale
+	}
 	onMounted(() => {
 		globalStore.setHomeLeftNavCollapse(true)
 	})
@@ -26,13 +66,29 @@
 
 <style lang="less" scoped>
 	.canvas {
-		overflow-y: auto;
+		// overflow-y: auto;
+		// display: flex;
+		// flex-wrap: wrap;
+		// align-content: flex-start;
+		// align-items: flex-start;
+		// padding: 2rem;
+		// gap: 2rem;
 		background-color: #fcf8f1;
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		align-items: flex-start;
-		padding: 2rem;
-		gap: 2rem;
+		position: relative;
+		overflow: hidden;
+		> .canvas-main {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			> .canvas-content {
+				position: absolute;
+				width: auto;
+				height: auto;
+				display: flex;
+				align-items: flex-start;
+				gap: 5rem;
+				transform-origin: top left;
+			}
+		}
 	}
 </style>

src/views/home/setting/index.vue

@@ -85,6 +85,7 @@
 			> div {
 				width: 16.4rem;
 				height: 3.4rem;
+				margin-bottom: 0.3rem;
 				display: flex;
 				align-items: center;
 				// justify-content: center;

src/views/login/login.vue

@@ -102,7 +102,6 @@
 			verificationCode: code
 		})
 			.then((res) => {
-				console.log(res)
 				if (res) {
 					userInfoStore.setToken(res)
 					userInfoStore.setUserInfo({