画布功能卡片

src/assets/icons/angle.svg

@@ -0,0 +1,9 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="6.78125" height="6.78125" fill="url(#pattern0_16_10027)"/>
+<defs>
+<pattern id="pattern0_16_10027" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_16_10027" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_16_10027" width="128" height="128" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAN2AAADdgF91YLMAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAThQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR/EwCQAAAGd0Uk5TAAECBAUGBwoLDA8QEhUXGRocIiUnLC03PEBCRkdJS0xOVFZXWV1hYmdobnF1enyAgYKDhoeLjY+QkpSVmp6go6anr7S1uLq7wcTGx8jKy8zN0NPV19zg5+rr7vDx8vP09vf6+/z9/seyqosAAAGbSURBVHja7dhVUwNBEATgJri7uwR3lwDBggZ3OZz5//8Aqd17DpLqKqr7KbszV9+83GYTQFEURVH+eRpiiZkqHh+Zs488dtD8RfvKTSnXN+sh+zZG9q2T7J/lcv2gluzXyZcvX758+fLly5cvX758+fLly5cvX758+fLl/y/fJsm+PdZwfbPTPK5vtkT2zaJk34Iqih/Ewo9HOZz3fz1cLHDOn+KLcFnP8IHGN7/epvjAVLjTRPGRfeC3khQfqLz3m20UH5gIX8UMio+iW7/fTvGBEV84iVB8FFz7UhfFB4Z8bYPjI//KFZ8KKT4wmNav5RTun0XPrr7K8YFN1/CQx/HRl7ajIMX7f8mr64lzfGDLNd3lcHz0+7YWjo9yfzEZ5fjAoWtcIfnwzYckPzwMA5KPVt9cxvFR8bfX8+///xB5cO29HB84cv3TJB9x98Da3/q2PZti9t0Dl7M/z0x/9ecAMePlZRzoNGqi2OcOkMQ9d4AA59wBjjHAHWAYWGb6iUwgq3l+Z+9H2d37XXbj3Wn9ha0oiqIoqeUdwmrKD1GdTTcAAAAASUVORK5CYII="/>
+</defs>
+</svg>

src/views/canvas/components/card.vue

@@ -24,6 +24,9 @@
 	import ColorPalette from './cards/color-palette.vue'
 	import ToVideo from './cards/to-video.vue'
 	import To3DModel from './cards/to-3d-model.vue'
+	import AddPrint from './cards/add-print.vue'
+	import ToCAD from './cards/to-cad.vue'
+
 	import EditMaterial from './cards/edit-material.vue'
 	const components = [
 		{
@@ -51,10 +54,15 @@
 			title: 'To 3D Model',
 			component: To3DModel
 		},
+		{
+			type: 'to-cad',
+			title: 'To CAD',
+			component: ToCAD
+		},
 		{
 			type: 'add-print',
 			title: 'Add Print',
-			component: SceneComposition
+			component: AddPrint
 		},
 		{
 			type: 'edit-material',

src/views/canvas/components/cards/add-print.vue

@@ -0,0 +1,116 @@
+<template>
+	<!-- 添加印花 -->
+	<div class="add-print">
+		<p class="label">Print</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Settings</p>
+		<div class="settings">
+			<div>
+				<p class="label">Angle</p>
+				<my-input
+					v-model="data.setting.angle"
+					type="number"
+					after="°"
+					:min="-180"
+					:max="180"
+					icon="angle"
+					icon-size="8"
+				/>
+			</div>
+			<div>
+				<span class="label">Scale</span>
+				<slider
+					:min="1"
+					:max="1000"
+					:tipFormatter="(v) => `${v}%`"
+					v-model="data.setting.scale"
+				/>
+			</div>
+			<div>
+				<span class="label">Gap X</span>
+				<slider
+					:min="0"
+					:max="1000"
+					:tipFormatter="(v) => `${v}px`"
+					v-model="data.setting.gap.x"
+				/>
+			</div>
+			<div>
+				<span class="label">Gap Y</span>
+				<slider
+					:min="0"
+					:max="1000"
+					:tipFormatter="(v) => `${v}px`"
+					v-model="data.setting.gap.y"
+				/>
+			</div>
+			<div>
+				<span class="label">Offset</span>
+				<offset-tool v-model="data.setting.offset" :show-dish="false" />
+			</div>
+			<div class="offset">
+				<offset-tool v-model="data.setting.offset" :show-input="false" />
+			</div>
+		</div>
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	import myInput from '../tools/my-input.vue'
+	import offsetTool from '../tools/offset-tool.vue'
+	import slider from '../tools/slider.vue'
+
+	const data = reactive({
+		prompt: '',
+		setting: {
+			angle: 0,
+			scale: 100,
+			gap: {
+				x: 0,
+				y: 0
+			},
+			offset: {
+				x: 50,
+				y: 50
+			}
+		},
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.add-print {
+		> .settings {
+			margin: 0 1.1rem;
+			> div {
+				display: flex;
+				align-items: center;
+				margin-bottom: 1rem;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				&.offset {
+					justify-content: center;
+				}
+				> .label {
+					width: 5.5rem;
+					font-size: 1rem;
+				}
+				&:not(.offset) > div {
+					flex: 1;
+				}
+				> .slider {
+					--slider-thumb-color1: #000;
+					--slider-thumb-color2: #eee;
+				}
+			}
+		}
+	}
+</style>

src/views/canvas/components/cards/color-palette.vue

@@ -37,6 +37,7 @@
 
 <style lang="less" scoped>
 	.color-palette {
+		min-height: 14rem;
 		> .color-list {
 			display: flex;
 			flex-wrap: wrap;

src/views/canvas/components/cards/edit-material.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../my-textarea.vue'
-	import uploadFile from '../upload-file.vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
 	const data = reactive({
 		prompt: '',
 		file: null

src/views/canvas/components/cards/scene-composition.vue

@@ -1,13 +1,86 @@
 <template>
 	<!-- 场景构图 -->
-	<div class="scene-composition"></div>
+	<div class="scene-composition">
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+		<p class="label">Choose Style</p>
+		<div class="style-list">
+			<div
+				class="item"
+				v-for="v in styleList"
+				:key="v.value"
+				:class="{ active: data.styles.includes(v.value) }"
+				@click="onClickStyle(v.value)"
+			>
+				<span class="icon"><svg-icon name="add" color="#0D0D0D" size="8" /></span>
+				<span class="label">{{ v.label }}</span>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { computed, ref, reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	const styleList = ref([
+		{ label: 'Colorful', value: 'Colorful' },
+		{ label: 'Minimalist', value: 'Minimalist' },
+		{ label: 'Modernist', value: 'Modernist' },
+		{ label: 'Bauhaus', value: 'Bauhaus' },
+		{ label: 'Mintage', value: 'Mintage' },
+		{ label: 'Industrial', value: 'Industrial' },
+		{ label: 'Futuristic', value: 'Futuristic' },
+		{ label: 'Elegant', value: 'Elegant' },
+		{ label: 'Organic', value: 'Organic' },
+		{ label: 'Calm', value: 'Calm' },
+		{ label: 'Abstract', value: 'Abstract' },
+		{ label: 'Kitsch-core', value: 'Kitsch-core' },
+		{ label: 'Sophisticated', value: 'Sophisticated' },
+		{ label: 'Maximalism', value: 'Maximalism' },
+		{ label: 'Clean', value: 'Clean' },
+		{ label: 'Bright Colors', value: 'Bright Colors' },
+		{ label: 'Luxurious', value: 'Luxurious' },
+		{ label: 'Bold Colors', value: 'Bold Colors' },
+		{ label: 'Brutalism', value: 'Brutalism' }
+	])
+	const data = reactive({
+		prompt: '',
+		styles: ['Colorful', 'Modernist']
+	})
+	const onClickStyle = (value: string) => {
+		if (data.styles.includes(value)) {
+			data.styles = data.styles.filter((v) => v !== value)
+		} else {
+			data.styles.push(value)
+		}
+	}
+	defineExpose({ data })
 </script>
 
 <style lang="less" scoped>
 	.scene-composition {
+		> .style-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.829rem 0.55rem;
+			> .item {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0.5rem 0.7rem;
+				font-family: Medium;
+				border-radius: 2rem;
+				font-size: 0.829rem;
+				border: 0.05rem solid #e4e4e7;
+				color: #000;
+				> .icon {
+					margin-right: 0.4rem;
+				}
+				&.active {
+					border-color: #0095ff;
+					background-color: rgba(0, 149, 255, 0.05);
+				}
+			}
+		}
 	}
 </style>

src/views/canvas/components/cards/to-3d-model.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../my-textarea.vue'
-	import uploadFile from '../upload-file.vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
 	const data = reactive({
 		prompt: '',
 		file: null

src/views/canvas/components/cards/to-cad.vue

@@ -0,0 +1,26 @@
+<template>
+	<!-- 转CAD -->
+	<div class="to-cad">
+		<p class="label">3D Model</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-cad {
+	}
+</style>

src/views/canvas/components/cards/to-real-style.vue

@@ -3,6 +3,16 @@
 	<div class="to-real-style">
 		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<div class="shortcut-list">
+			<div
+				class="item"
+				v-for="v in shortcutList"
+				:key="v.value"
+				@click="data.prompt = v.value"
+			>
+				{{ v.label }}
+			</div>
+		</div>
 		<p class="label">Size</p>
 		<pixel-ratio-selection v-model="data.pixelRatio" />
 	</div>
@@ -10,9 +20,30 @@
 
 <script setup lang="ts">
 	import { computed, ref, reactive, onMounted } from 'vue'
-	import myTextarea from '../my-textarea.vue'
-	import pixelRatioSelection from '../pixel-ratio-selection.vue'
-
+	import myTextarea from '../tools/my-textarea.vue'
+	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
+	const shortcutList = ref([
+		{
+			label: 'Change the...',
+			value: 'Change the...'
+		},
+		{
+			label: 'Bright Colors...',
+			value: 'Bright Colors...'
+		},
+		{
+			label: 'Make the...',
+			value: 'Make the...'
+		},
+		{
+			label: 'Imagine...',
+			value: 'Imagine...'
+		},
+		{
+			label: 'Wood Materials with...',
+			value: 'Wood Materials with...'
+		}
+	])
 	const data = reactive({
 		prompt: '',
 		pixelRatio: '1:1',
@@ -24,5 +55,20 @@
 
 <style lang="less" scoped>
 	.to-real-style {
+		> .shortcut-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1rem 0.4rem;
+			> .item {
+				display: flex;
+				align-items: center;
+				padding: 0.5rem 0.3rem;
+				font-family: Medium;
+				border-radius: 0.3rem;
+				font-size: 1rem;
+				border: 0.05rem solid #e4e4e7;
+				background: #f0f0f0;
+			}
+		}
 	}
 </style>

src/views/canvas/components/cards/to-video.vue

@@ -27,9 +27,9 @@
 
 <script setup lang="ts">
 	import { reactive, ref } from 'vue'
-	import myTextarea from '../my-textarea.vue'
-	import uploadFile from '../upload-file.vue'
-	import pixelRatioSelection from '../pixel-ratio-selection.vue'
+	import myTextarea from '../tools/my-textarea.vue'
+	import uploadFile from '../tools/upload-file.vue'
+	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
 	const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
 	const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
 	const data = reactive({

src/views/canvas/components/tools/my-input.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="my-input">
+		<span class="decorate"></span>
+		<span v-show="icon" class="icon">
+			<svg-icon :name="icon" :size="iconSize" />
+		</span>
+		<span v-show="before" class="before">{{ before }}</span>
+		<input v-bind="attrs" :value="modelValue" @input="onInput" />
+		<span v-show="after" class="after">{{ after }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, useAttrs, watch } from 'vue'
+	const props = defineProps({
+		modelValue: { type: [String, Number] },
+		icon: { default: '', type: String },
+		iconSize: { default: '10', type: [Number, String] },
+		before: { default: '', type: String },
+		after: { default: '', type: String }
+	})
+	const attrs = useAttrs()
+	const emit = defineEmits(['update:modelValue', 'input'])
+	const onInput = (e) => {
+		var value = e.target.value
+		if (attrs.type === 'number') value = Number(value)
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+</script>
+<style scoped lang="less">
+	.my-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border: 1px solid rgba(230, 230, 231, 1);
+		border-radius: 0.17rem;
+		height: 1.7rem;
+		padding: 0 0.4rem 0 0.2rem;
+		> .decorate {
+			width: 0.2rem;
+			background-color: rgba(230, 230, 231, 1);
+			border-radius: 0.3rem;
+			height: 85%;
+			margin-right: 0.4rem;
+		}
+		> .iconfont {
+			font-size: 1rem;
+			color: #000;
+			margin-right: 0.2rem;
+		}
+		> .before {
+			font-size: 1rem;
+			color: #000;
+			margin-right: 0.2rem;
+		}
+		> .after {
+			font-size: 1rem;
+			color: #000;
+			margin-left: 0.1rem;
+		}
+		> input {
+			font-size: 1rem;
+			width: 0;
+			flex: 1;
+			text-align: right;
+			outline: none;
+			border: none;
+			background-color: transparent;
+			padding: 0;
+			-moz-appearance: textfield; /* Firefox */
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+		}
+	}
+</style>

src/views/canvas/components/tools/offset-tool.vue

@@ -0,0 +1,217 @@
+<template>
+	<div class="offset-tool">
+		<div class="input" v-show="showInput">
+			<my-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
+			<my-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
+		</div>
+		<div
+			class="dish"
+			@mousedown="mousedown"
+			@touchstart="mousedown"
+			ref="dishRef"
+			v-show="showDish"
+		>
+			<img src="/src/assets/images/icon/xyz.png" />
+			<span class="ball" :style="ballStyle"></span>
+			<span class="tip x">X: {{ left }}%</span>
+			<span class="tip y">Y: {{ top }}%</span>
+			<span class="line x"></span>
+			<span class="line y"></span>
+			<span class="line z" :style="lineZStyle"></span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch, computed } from 'vue'
+	import MyInput from './my-input.vue'
+	const props = defineProps({
+		modelValue: { type: Object },
+		showInput: {
+			type: Boolean,
+			default: true
+		},
+		showDish: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	// 工具的实际坐标 -100 ~ 100
+	const top = ref(Math.round(props.modelValue.y))
+	const left = ref(Math.round(props.modelValue.x))
+
+	// 原点的坐标 0 ~ 100
+	const ballStyle = computed(() => ({
+		top: 50 + top.value / 2 + '%',
+		left: 50 + left.value / 2 + '%'
+	}))
+	watch(
+		() => props.modelValue.x,
+		(v) => (left.value = v)
+	)
+	watch(
+		() => props.modelValue.y,
+		(v) => (top.value = v)
+	)
+	const dishRef = ref<HTMLDivElement>()
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (!dishRef.value) return
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return
+			const rect = dishRef.value.getBoundingClientRect()
+			const X = e.clientX || (e as TouchEvent).touches[0].clientX
+			const Y = e.clientY || (e as TouchEvent).touches[0].clientY
+			var x = ((X - rect.left) / rect.width) * 100
+			var y = ((Y - rect.top) / rect.height) * 100
+			if (x < 0) x = 0
+			if (x > 100) x = 100
+			if (y < 0) y = 0
+			if (y > 100) y = 100
+			left.value = Math.round((x - 50) * 2)
+			top.value = Math.round((y - 50) * 2)
+			onInput()
+		}
+		mousemove(e)
+		const mouseup = () => {
+			onChange()
+			document.removeEventListener('mousemove', mousemove)
+			document.removeEventListener('touchmove', mousemove)
+			document.removeEventListener('mouseup', mouseup)
+			document.removeEventListener('touchend', mouseup)
+		}
+		document.addEventListener('mousemove', mousemove)
+		document.addEventListener('touchmove', mousemove)
+		document.addEventListener('mouseup', mouseup)
+		document.addEventListener('touchend', mouseup)
+	}
+	const onInput = () => {
+		const value = {
+			x: left.value,
+			y: top.value
+		}
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	var changeTime: any = null
+	const onChange = () => {
+		clearTimeout(changeTime)
+		changeTime = setTimeout(() => {
+			const value = {
+				x: left.value,
+				y: top.value
+			}
+			emit('update:modelValue', value)
+			emit('change', value)
+		}, 500)
+	}
+	const lineZStyle = computed(() => ({
+		'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
+		width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
+	}))
+	// 计算角度
+	function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y1 - y2
+		let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
+		return angle
+	}
+	// 计算距离
+	function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y2 - y1
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+		return distance
+	}
+</script>
+
+<style scoped lang="less">
+	.offset-tool {
+		position: relative;
+		> .input {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> * {
+				flex: 1;
+				margin-right: 1rem;
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+		> .dish {
+			width: 11.5rem;
+			height: 11.5rem;
+			border: 0.1rem solid #eaeaea;
+			border-radius: 0.34rem;
+			cursor: pointer;
+			position: relative;
+			background-color: #f6f6f6;
+			margin-top: 2rem;
+			> * {
+				position: absolute;
+				pointer-events: none;
+				user-select: none;
+			}
+			> img {
+				width: 1.2rem;
+				height: 1.2rem;
+				bottom: 0.35rem;
+				right: 0.35rem;
+			}
+			> .ball {
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 0.85rem;
+				height: 0.85rem;
+				border: 0.1rem solid #fff;
+				background-color: #333;
+				border-radius: 50%;
+				box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
+			}
+			> .tip {
+				font-size: 0.85rem;
+				color: #000;
+				line-height: 2.4rem;
+				&.x {
+					top: 50%;
+					right: 0%;
+					transform: translate(100%, -50%);
+					padding-left: 6px;
+				}
+				&.y {
+					top: 0%;
+					left: 50%;
+					transform: translate(-50%, -100%);
+				}
+			}
+			> .line {
+				border-color: #d9d9d9;
+				border-style: dashed;
+				border-width: 0;
+				width: 0;
+				height: 0;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				&.x {
+					width: 100%;
+					border-top-width: 0.1rem;
+				}
+				&.y {
+					height: 100%;
+					border-left-width: 0.1rem;
+				}
+				&.z {
+					width: 50%;
+					border-top-width: 0.1rem;
+					border-color: #454754;
+					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
+					transform-origin: left center;
+				}
+			}
+		}
+	}
+</style>

src/views/canvas/components/tools/slider.vue

@@ -0,0 +1,172 @@
+<template>
+	<div class="slider" :disabled="disabled">
+		<div
+			class="input-range"
+			:style="{
+				'--progress': (value - props.min) / (props.max - props.min)
+			}"
+		>
+			<span class="tip">{{ props.tipFormatter(value) }}</span>
+			<input
+				type="range"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+		<div class="input" v-show="isInput">
+			<my-input
+				type="number"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from 'vue'
+	import MyInput from './my-input.vue'
+	const props = defineProps({
+		modelValue: { type: Number },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		tipFormatter: {
+			type: Function,
+			default: (v) => v
+		},
+		isInput: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	watch(
+		() => props.modelValue,
+		(v) => {
+			value.value = v
+		}
+	)
+	const value = ref(props.modelValue)
+	const onInput = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('input', v)
+	}
+	const onChange = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+</script>
+
+<style scoped lang="less">
+	.slider {
+		position: relative;
+		display: flex;
+		align-items: center;
+		--input-thumb-size: 0.8rem;
+		--backcolor1: var(--slider-thumb-color1, #4285f4);
+		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
+		&:hover {
+			> .input-range > .tip {
+				display: block;
+			}
+		}
+		> .input-range {
+			position: relative;
+			flex: 2;
+			display: flex;
+			> input {
+				width: 100%;
+				-webkit-appearance: none;
+				appearance: none;
+				height: 0.339rem;
+				border-radius: 0.3rem;
+				outline: none;
+				background: linear-gradient(
+					to right,
+					var(--backcolor1) 0%,
+					var(--backcolor1) calc(var(--progress) * 100%),
+					var(--backcolor2) calc(var(--progress) * 100%),
+					var(--backcolor2) 100%
+				);
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none;
+					appearance: none;
+					width: var(--input-thumb-size);
+					height: var(--input-thumb-size);
+					border-radius: 50%;
+					background: var(--backcolor1); /* 蓝色滑块 */
+					cursor: pointer;
+					transition: all 0.2s;
+					box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
+				}
+				&::-webkit-slider-thumb:hover {
+					transform: scale(1.1);
+				}
+			}
+			> .tip {
+				position: absolute;
+				font-size: 1rem;
+				pointer-events: none;
+				user-select: none;
+				color: #666;
+				top: calc(var(--input-thumb-size) / -2 - 0.35rem);
+				left: calc(
+					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
+				);
+				transform: translate(-50%, -100%);
+				background-color: rgba(0, 0, 0, 0.7);
+				color: white;
+				padding: 0.3rem 0.5rem;
+				border-radius: 0.4rem;
+				font-size: 1rem;
+				white-space: nowrap;
+				pointer-events: none;
+				display: none;
+				&::after {
+					content: '';
+					position: absolute;
+					top: 97%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 0;
+					height: 0;
+					border-left: 0.5rem solid transparent;
+					border-right: 0.5rem solid transparent;
+					border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
+				}
+			}
+		}
+		> .input {
+			flex: 1;
+			margin-left: 1rem;
+			> input {
+				border-radius: 0.3rem;
+				width: 100%;
+			}
+		}
+	}
+</style>

src/views/canvas/index.vue

@@ -5,6 +5,7 @@
 		<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>
@@ -25,6 +26,7 @@
 
 <style lang="less" scoped>
 	.canvas {
+		overflow-y: auto;
 		background-color: #fcf8f1;
 		display: flex;
 		flex-wrap: wrap;