feat: sketch布局

src/views/home/agent/components/Menu.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="menu-wrapper flex space-between">
+		<div class="menu-item"></div>
+		<div class="menu-item"></div>
+		<div class="menu-item"></div>
+	</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+	.menu-wrapper {
+    width: 1.8rem;
+    cursor: pointer;
+		.menu-item {
+			width: 0.4rem;
+			height: 0.4rem;
+			background-color: #000;
+			border-radius: 50%;
+		}
+	}
+</style>

src/views/home/agent/components/Preview.vue

@@ -0,0 +1,83 @@
+<template>
+	<div
+		class="preview-container flex"
+		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
+	>
+		<template v-if="type === 'sketch'">
+			<div class="sketch-item" v-for="item in 12">
+				<Menu class="menu-btn" @click="handleClickMenu" />
+				<div class="edit-btn flex align-center space-between" @click="handleClickEdit">
+					<div>Edit</div>
+					<img src="@/assets/images/arrow-top-right.png" alt="" />
+				</div>
+				<img :src="LoadingImg" alt="" />
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import Menu from './Menu.vue'
+  import LoadingImg from '@/assets/images/sketch-loading.gif'
+
+	const props = withDefaults(
+		defineProps<{
+			type: 'sketch' | 'report'
+		}>(),
+		{
+			type: 'sketch'
+		}
+	)
+
+
+  const handleClickEdit = () => {
+    // 编辑按钮点击逻辑
+    console.log('Edit button clicked')
+  }
+  const handleClickMenu = () => {
+    // 菜单按钮点击逻辑
+    console.log('Menu button clicked')
+  }
+
+
+</script>
+
+<style lang="less" scoped>
+	.preview-container {
+		gap: 1.2rem;
+		flex-wrap: wrap;
+		.sketch-item {
+			position: relative;
+			&,
+			img {
+				width: 21.9rem;
+				height: 21.9rem;
+				border-radius: 1.6rem;
+			}
+			.menu-btn {
+				position: absolute;
+				top: 2.1rem;
+				right: 1.5rem;
+			}
+			.edit-btn {
+				position: absolute;
+				right: 1rem;
+				bottom: 1.1rem;
+				width: 7.8rem;
+				height: 3.59rem;
+				border-radius: 2rem;
+				background-color: #fff;
+				border: 0.2rem solid #e5e5e5;
+				font-family: 'GeneralMedium';
+				font-size: 1.4rem;
+        padding: 0 0.9rem 0 1.4rem;
+        cursor: pointer;
+        img{
+          width: 1.8rem;
+          height: 1.8rem;
+        }
+			}
+		}
+	}
+</style>