preview的peport页面

src/assets/icons/reportDown.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.1384 6.86193C4.87805 6.60158 4.45594 6.60158 4.19559 6.86193C3.93524 7.12228 3.93524 7.54439 4.19559 7.80474L7.52892 11.1381C7.78927 11.3984 8.21138 11.3984 8.47173 11.1381L11.8051 7.80474C12.0654 7.54439 12.0654 7.12228 11.8051 6.86193C11.5447 6.60158 11.1226 6.60158 10.8623 6.86193L8.66699 9.05719L8.66699 2.66667C8.66699 2.29848 8.36852 2 8.00033 2C7.63214 2 7.33366 2.29848 7.33366 2.66667L7.33366 9.05719L5.1384 6.86193Z" fill="white"/>
+<path d="M3.33366 12.6667C2.96547 12.6667 2.66699 12.9651 2.66699 13.3333C2.66699 13.7015 2.96547 14 3.33366 14H12.667C13.0352 14 13.3337 13.7015 13.3337 13.3333C13.3337 12.9651 13.0352 12.6667 12.667 12.6667L3.33366 12.6667Z" fill="white"/>
+</svg>

src/lang/en.ts

@@ -103,11 +103,12 @@ export default {
 		france: 'France',
 		japan: 'Japan',
 		canada: 'Canada',
-		germany: 'Germany'
+		germany: 'Germany',
 	},
 	agent: {
 		copySuccess: 'Text copied to clipboard',
-		copyFaild: 'Copy failed. Your browser may be restricting clipboard access. Please try copying manually.'
+		copyFaild: 'Copy failed. Your browser may be restricting clipboard access. Please try copying manually.',
+		Download: 'Download'
 	},
 
 	// Version Tree

src/lang/zh-cn.ts

@@ -97,12 +97,13 @@ export default {
 		france: '法国',
 		japan: '日本',
 		canada: '加拿大',
-		germany: '德国'
+		germany: '德国',
 	},
 	agent: {
 		copySuccess: '文本已复制到剪贴板',
 		copyFaild:
-			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。'
+			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。',
+		Download: '下载'
 	},
 
 	// Version Tree

src/views/home/VersionTree.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
-import VersionTreeIndex from '@/components/versionTree/index.vue'
+import VersionTreeIndex from '@/views/home/agent/components/versionTree/index.vue'
 
 import GenerateSketch from './generateSketch/index.vue'
 //const props = defineProps({

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

@@ -13,6 +13,30 @@
 				<img :src="LoadingImg" alt="" />
 			</div>
 		</template>
+		<div v-else class="reportBorder">
+			<div class="report">
+				<div v-if="false" class="report-content-null">
+					<img :src="reportNull" alt="" />
+				</div>
+				<div v-else class="report-content">
+					<div class="">
+
+					</div>
+					<div class="downBtnBox">
+						<div class="downBtn">
+							<div class="icon">
+								<SvgIcon name="reportDown" size="16"></SvgIcon>
+							</div>
+							<span>{{ $t('agent.Download') }}</span>
+						</div>
+					</div>
+					<div class="content">
+						# 一级标题   
+					</div>
+				</div>
+			</div>
+			
+		</div>
 	</div>
 </template>
 
@@ -20,6 +44,7 @@
 	import { ref } from 'vue'
 	import Menu from './Menu.vue'
   import LoadingImg from '@/assets/images/sketch-loading.gif'
+  import reportNull from '@/assets/images/reportNull.png'
 
 	const props = withDefaults(
 		defineProps<{
@@ -45,6 +70,8 @@
 
 <style lang="less" scoped>
 	.preview-container {
+		width: 100%;
+		height: 100%;
 		gap: 1.2rem;
 		flex-wrap: wrap;
 		.sketch-item {
@@ -71,12 +98,75 @@
 				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;
-        }
+				padding: 0 0.9rem 0 1.4rem;
+				cursor: pointer;
+				img{
+					width: 1.8rem;
+					height: 1.8rem;
+				}
+			}
+		}
+		.reportBorder{
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			--border-width: 3px;
+			flex: 1;
+			&::before {
+				content: '';
+				position: absolute;
+				background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.3) 1.61%, rgba(255, 207, 144, 0.3) 101.01%);
+				border-radius: 2.3rem;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+				left: -50%;
+				top: -50%;
+				transform: translate(50%, 50%);
+			}
+			.report {
+				background-color: #fff;
+				width: calc(100% - var(--border-width) * 2);
+				height: calc(100% - var(--border-width) * 2);
+				border-radius: 2rem;
+				display: flex;
+				.report-content-null{
+					flex: 1;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				.report-content{
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					.downBtnBox{
+						padding: 2.2rem 5.2rem 0;
+						.downBtn{
+							display: flex;
+							width: 11.2rem;
+							justify-content: center;
+							margin-left: auto;
+							line-height: 3.2rem;
+							border-radius: 5px;
+							background-color: #ff7a51;
+							color: #fff;
+							cursor: pointer;
+							.icon{
+								margin-right: .02rem;
+							}
+							span{
+								font-weight: 500;
+								font-size: 1.2rem;
+							}
+						}
+					}
+					.content{
+						word-break: break-word;
+						white-space: pre-wrap;
+					}
+				}
 			}
 		}
 	}

src/views/home/agent/index.vue

@@ -19,10 +19,10 @@
 	import { ref, computed } from 'vue'
 	import Agent from './components/Agent.vue'
 	import Preview from './components/Preview.vue'
-	import VersionTreeIndex from '@/components/versionTree/index.vue'
+	import VersionTreeIndex from './components/versionTree/index.vue'
 
 	const agentTitle = ref('Retro Sofa Sketch')
-	const previewType = ref<'sketch' | 'report'>('sketch')
+	const previewType = ref<'sketch' | 'report'>('report')
 
 	const versionTreeData = ref({
 		drawer:false,
@@ -40,7 +40,7 @@
 		padding: 0rem 2.3rem 6rem 2.8rem;
 		flex-direction: column;
 		.openVersionTree{
-			padding: 2rem 2.5rem;
+			padding: 2rem 0rem;
 			width: 100%;
 			display: flex;
 			justify-content: flex-end;
@@ -58,7 +58,7 @@
 					position: absolute;
 					inset: -1px;
 					background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.8) 1.61%, rgba(255, 207, 144, 0.8) 101.01%);
-					border-radius: 2rem;
+					border-radius: 2.2rem;
 					z-index: -1;
 				}
 			}
@@ -68,7 +68,7 @@
 			display: flex;
 			flex: 1;
 			justify-content: space-between;
-			overflow: hidden;
+			// overflow: hidden;
 		}
 
 		.c-svg {