feat: sketch布局

.env.development

@@ -1,4 +1,4 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 # VITE_APP_URL = http://18.167.251.121:10095
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = http://192.168.31.118:8080
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com

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>

src/views/home/agent/index.vue

@@ -1,14 +1,19 @@
 <template>
 	<div class="agent-wrapper flex space-between">
 		<Agent :title="agentTitle" />
-		<div class="preview-wrapper">preview</div>
+		<div class="preview-wrapper">
+			<Preview :type="previewType" />
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import Agent from './components/Agent.vue'
+	import Preview from './components/Preview.vue'
+
 	const agentTitle = ref('Retro Sofa Sketch')
+	const previewType = ref<'sketch' | 'report'>('sketch')
 </script>
 
 <style lang="less" scoped>
@@ -24,7 +29,6 @@
 
 		.preview-wrapper {
 			width: 91.2rem;
-			background-color: #f5f5f5;
 		}
 	}
 </style>