From 73e59919ee66175d2ae6788a12ef0fe5b46ac1dc Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 11 Feb 2026 17:27:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20sketch=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |   2 +-
 src/assets/images/arrow-top-right.png       | Bin 0 -> 212 bytes
 src/views/home/agent/components/Menu.vue    |  22 ++++++
 src/views/home/agent/components/Preview.vue |  83 ++++++++++++++++++++
 src/views/home/agent/index.vue              |   8 +-
 5 files changed, 112 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/arrow-top-right.png
 create mode 100644 src/views/home/agent/components/Menu.vue
 create mode 100644 src/views/home/agent/components/Preview.vue

diff --git a/.env.development b/.env.development
index c77c0df..885391e 100644
--- a/.env.development
+++ b/.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
diff --git a/src/assets/images/arrow-top-right.png b/src/assets/images/arrow-top-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..b181e81be17178cba3d89a2d7e5b79a622ed2438
GIT binary patch
literal 212
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5Khx92F{Fa=?Zk_m4F)`{^B*wuJ>trHpw{<5
zqi=z<MOWSe=@;5cQzlKD<n+>=zwZ*uJ9P(DY2SqHm*Qs3FDYo({gd-$+dt*E6HfTZ
zS6yWG`qxn@o_nItLApqJ)dUekpC9Wa&+55oE&ae0xl~N%yN_2b&{76ZS3j3^P6<r_
D-^N9j

literal 0
HcmV?d00001

diff --git a/src/views/home/agent/components/Menu.vue b/src/views/home/agent/components/Menu.vue
new file mode 100644
index 0000000..254871d
--- /dev/null
+++ b/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>
diff --git a/src/views/home/agent/components/Preview.vue b/src/views/home/agent/components/Preview.vue
new file mode 100644
index 0000000..e33b305
--- /dev/null
+++ b/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>
diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index f92a8b9..cdd17ae 100644
--- a/src/views/home/agent/index.vue
+++ b/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>