From e4b3ebe88bbee8f487c857718a33ac782e6ab963 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Mon, 19 Aug 2024 10:36:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/style.css                    |  27 ++-
 src/assets/style/style.less                   |  15 +-
 src/component/Account/accountEdit.vue         |  20 +-
 src/component/Account/accountHome.vue         |   3 +-
 src/component/Account/accountMessage.vue      | 193 +++++++++++++++++-
 src/component/Account/message/comment.vue     | 189 ++++++++---------
 src/component/Account/message/likeMessage.vue | 115 ++++-------
 src/component/Account/message/newFollow.vue   | 119 ++++-------
 src/component/Account/message/privateChat.vue |  21 +-
 src/component/Account/message/system.vue      |  92 ++++-----
 src/component/Detail/DesignDetailAlter.vue    |   2 +-
 src/component/HomePage/ColorboardUpload.vue   |   4 +-
 src/component/HomePage/Cropper.vue            |   2 +-
 src/component/HomePage/ExportModel.vue        |  73 +++++--
 src/component/HomePage/Generate.vue           |   6 +-
 src/component/HomePage/MoodboardUpload.vue    |  15 +-
 src/component/HomePage/layout.vue             |  96 ++++++++-
 src/component/HomePage/layoutMobile.vue       |  81 +++++++-
 src/component/WorksPage/newScaleImage.vue     |  25 ++-
 src/lang/cn.ts                                |   3 +
 src/lang/en.ts                                |   3 +
 src/store/uploadFile/uploadFile.ts            |   8 +
 src/store/userHabit/userHabit.ts              |  26 ++-
 src/tool/domTurnImg.js                        |  98 ++++-----
 src/tool/guide.js                             |   3 +-
 src/tool/https.js                             |  17 +-
 src/tool/myEvents.js                          |  16 ++
 src/tool/webSocket.js                         |  19 +-
 src/views/HomeMain.vue                        |  36 +++-
 vue.config.js                                 |   2 +-
 30 files changed, 857 insertions(+), 472 deletions(-)
 create mode 100644 src/tool/myEvents.js

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 00642b1c..29fb838c 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -532,6 +532,9 @@ li {
 .ant-modal {
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
+.ant-modal div[aria-hidden="true"] {
+  display: none !important;
+}
 .ant-modal-confirm-confirm .ant-modal-content {
   border-radius: 1rem;
 }
@@ -1285,30 +1288,40 @@ li {
   border: solid 2px rgba(0, 0, 0, 0.55);
   color: #000000;
 }
-.homeMain_heade .ant-badge {
+.homeMain_heade .ant-badge,
+.account_message .ant-badge {
   width: auto;
   height: auto;
 }
-.homeMain_heade sup.ant-scroll-number {
+.homeMain_heade sup.ant-scroll-number,
+.account_message sup.ant-scroll-number {
   height: 2rem;
-  min-height: 2rem;
+  min-height: 5px;
   width: 2rem;
-  min-width: 2rem;
+  min-width: 5px;
   padding: 0;
   font-size: 1.1rem;
+  padding: 0.2rem;
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
-  width: 100%;
+.homeMain_heade sup.ant-scroll-number.ant-badge-dot,
+.account_message sup.ant-scroll-number.ant-badge-dot {
+  width: auto;
+  height: auto;
+}
+.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only,
+.account_message sup.ant-scroll-number .ant-scroll-number-only {
   height: 100%;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.homeMain_heade p.ant-scroll-number-only-unit {
+.homeMain_heade p.ant-scroll-number-only-unit,
+.account_message p.ant-scroll-number-only-unit {
   line-height: 2rem;
   height: 100%;
 }
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index d045d230..d159d053 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -596,6 +596,7 @@ input:focus{
 //弹窗公共样式
 .ant-modal{
 	box-shadow: 0px 0px 6px rgba(0, 0, 0, .2);
+	div[aria-hidden="true"] {display: none !important;}
 	&.ant-modal-confirm{
 		&.ant-modal-confirm-confirm{
 			// top: 50%;
@@ -1428,23 +1429,29 @@ input:focus{
 		color: rgba(0, 0, 0, 1);
 	}
 }
-.homeMain_heade{
+.homeMain_heade,.account_message{
 	.ant-badge{
 		width: auto;
 		height: auto;
 	}
 	sup.ant-scroll-number{
 		height: 2rem;
-		min-height: 2rem;
+		min-height: 5px;
 		width: 2rem;
-		min-width: 2rem;
+		min-width: 5px;
 		padding: 0;
 		font-size: 1.1rem;
+		padding: .2rem;
+		box-sizing: content-box;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		&.ant-badge-dot{
+			width: auto;
+			height: auto;
+		}
 		.ant-scroll-number-only{
-			width: 100%;
+			// width: 100%;
 			height: 100%;
 			font-size: 1.2rem;
 			display: flex;
diff --git a/src/component/Account/accountEdit.vue b/src/component/Account/accountEdit.vue
index bdef2fe5..dd62ae60 100644
--- a/src/component/Account/accountEdit.vue
+++ b/src/component/Account/accountEdit.vue
@@ -27,22 +27,16 @@
 			<img src="../../assets/images/homePage/alipay.svg" alt="">
 		</div>
 		<div class="accountEdit_page_body">
-			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">昵称:</div>
-				<div class="accountEdit_page_body_item_inut">
-					<input type="text">
-				</div>
-			</div>
 			<div class="accountEdit_page_body_item">
 				<div class="accountEdit_page_body_item_name">用户名:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<textarea style="max-height: 200px; min-height: 90px;"></textarea>
+					<input type="text" disabled value="123">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="accountEdit_page_body_item_name">我的签名:</div>
+				<div class="accountEdit_page_body_item_name">邮箱:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text">
+					<input type="text" disabled value="123">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
@@ -77,7 +71,9 @@ export default defineComponent({
 		let Cropper = ref()
 		// provide('exhibitionList',exhibitionList)
 		let handleCropperSuccess = (event:any)=>{
-            let {file, fileData} =event
+			console.log(event);
+			
+            let {file, fileData,base64} =event
 			console.log(file,fileData);
             Cropper.value.closeCropper()
 		}
@@ -157,8 +153,8 @@ export default defineComponent({
 		margin: 0 auto;
 		position: relative;
 		img{
-			width: 20rem;
-			height: 20rem;
+			width: 15rem;
+			height: 15rem;
 			border-radius: 50%;
 		}
 		.accountEdit_page_head_upload{
diff --git a/src/component/Account/accountHome.vue b/src/component/Account/accountHome.vue
index 2c1fadbb..8f4da02a 100644
--- a/src/component/Account/accountHome.vue
+++ b/src/component/Account/accountHome.vue
@@ -9,8 +9,7 @@
 					<div class="content_item_user_left_detail">
 						<div class="modal_title_text">
 							<div>用户名</div>
-							<div class="modal_title_text_intro">个性签名</div>
-							<div class="modal_title_text_assistant">Credits: 2222</div>
+							<div class="modal_title_text_assistant">邮箱: 2222</div>
 						</div>
 						<div class="content_item_user_left_detail_bottom">
 							<div>
diff --git a/src/component/Account/accountMessage.vue b/src/component/Account/accountMessage.vue
index 8d38f22b..39db09dd 100644
--- a/src/component/Account/accountMessage.vue
+++ b/src/component/Account/accountMessage.vue
@@ -6,13 +6,26 @@
 			</div>
 			<div class="account_message_title_setting">设置</div>
 		</div>
-		<a-tabs class="account_message_body" v-model:activeKey="activeKey">
+		<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
+			<a-tab-pane v-for="item in messageList" :key="item.key">
+				<system v-if="item.key == 'system'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></system>
+				<privateChat v-if="item.key == 'privateChat'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></privateChat>
+				<comment v-if="item.key == 'comment'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></comment>
+				<likeMessage v-if="item.key == 'like'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></likeMessage>
+				<newFollow v-if="item.key == 'follow'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></newFollow>
+				<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
+				<template #tab>
+					<a-badge :count="messageSystem.messageType[item.key]" >
+					<span>{{item.title}}</span>
+					</a-badge>
+				</template>
+			</a-tab-pane>
+			
+<!-- 			
 			<a-tab-pane key="1" tab="系统消息">
 				<system ref="system"></system>
 			</a-tab-pane>
-			<!-- <a-tab-pane key="2" tab="私信" force-render>
-				<privateChat ref="privateChat"></privateChat>
-			</a-tab-pane> -->
+		
 			<a-tab-pane key="3" tab="评论">
 				<comment></comment>
 			</a-tab-pane>
@@ -22,12 +35,12 @@
 			<a-tab-pane key="6" tab="新增粉丝">
 				<newFollow ref="newFollow"></newFollow>
 			</a-tab-pane>
-			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
+			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane> -->
 		</a-tabs>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
 import { Https } from "@/tool/https";
 import { useRouter,useRoute } from 'vue-router'
 import { Modal,message } from 'ant-design-vue';
@@ -51,15 +64,106 @@ export default defineComponent({
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
-			activeKey: ref('1'),
+			messageList:[
+				{
+					title:'系统消息',
+					key:'system',
+				},
+				// {
+				// 	title:'私信',
+				// 	key:'privateChat',
+				// },
+				{
+					title:'评论',
+					key:'comment',
+				},{
+					title:'点赞',
+					key:'like',
+				},{
+					title:'新增粉丝',
+					key:'follow',
+				},{
+					title:'客服',
+					key:'service',
+				},
+			],
+			activeKey: '',
+		})
+		let domRefs:any = reactive({
+			system:ref(null),
+			comment:ref(null),
+			like:ref(null),
+			follow:ref(null),
+			service:ref(null)
+		})
+		let messageSystem = computed(()=>{
+			return store.state.UserHabit.messageSystem
 		})
 		// provide('exhibitionList',exhibitionList)
 		let setUserData = ()=>{
 			router.push({path:'/home/account/accountEdit'})
 		}
+		let changeTabs = (key:any)=>{
+			let data = {
+				page:1,
+				size:10,
+				type:key
+			}
+			getHistory(data)
+		}
+		let setReadStatus = (value:any)=>{
+			if(value.isRead == 1)return
+			let data = {
+				type:accountMessage.activeKey,
+				notificationIdList:value.id
+			}
+			Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+				if(rv){
+					console.log(rv);
+					
+					// store.commit('setMessageSystem',rv)
+				}
+			})
+		}
+		let setAllmessage = ()=>{
+			let data = {
+				type:accountMessage.activeKey
+			}
+			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+
+			})
+		}
+		let getHistory = (data:any)=>{
+			nextTick(()=>{
+				let dom = domRefs[data.type][0]
+				if(dom.dataList && dom.dataList.length > 0)return
+				Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
+					if(rv){
+						console.log(domRefs[data.type][0],rv);
+						domRefs[data.type][0].setmessageList(rv)
+					}
+				})
+			})
+
+		}
+		onMounted(()=>{
+			let key = accountMessage.messageList[0].key
+			accountMessage.activeKey = key
+			let data = {
+				page:1,
+				size:10,
+				type:key
+			}
+			getHistory(data)
+		})
         return{
            ...toRefs(accountMessage),
+           ...toRefs(domRefs),
+		   messageSystem,
 		   setUserData,
+		   setReadStatus,
+		   changeTabs,
+		   setAllmessage,
         }
     },
     data(){
@@ -83,8 +187,9 @@ export default defineComponent({
 		}
 	}
 	.account_message_body{
-		padding: 0rem 5rem;
+		padding-bottom: 3rem;
 		:deep(.ant-tabs-nav){
+			padding: 0rem 5rem;
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
 					font-size: 2.4rem;
@@ -107,9 +212,77 @@ export default defineComponent({
 			}
 		}
 		:deep(.ant-tabs-content){
-			min-height: 80rem;
-			padding-bottom: 3rem;
+			height: 80rem;
+			// min-height: 80rem;
+			overflow-y: auto;
 		}
 	}
 }
 </style>
+<style lang="less">
+.account_generalMessage_title{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 2rem 5rem;
+	border-bottom: 1px solid #e9eaec;
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+	border: 1px solid #e9eaec;
+	border-radius: 5px;
+	position: sticky;
+	top: 0;
+	background: #fff;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	.account_generalMessage_title_setting{
+		cursor: pointer;
+	}
+}
+.account_generalMessage_center{
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+    border: 1px solid #e9eaec;
+    border-radius: 5px;
+    padding: 2rem 0;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	.account_generalMessage_item{
+		margin-right: 0;
+		margin-left: 0;
+		display: flex;
+		border-radius: 0px;
+		justify-content: space-between;
+		align-items: center;
+		padding: 2rem 5rem;
+		border: none;
+		border-bottom: 1px solid #e9eaec;
+		box-shadow: none;
+	}
+}
+.account_generalMessage_item{
+	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+	border: 1px solid #e9eaec;
+	border-radius: 5px;
+	padding: 5rem 5rem;
+	margin-right: 5rem;
+	margin-left: 5rem;
+	position: relative;
+	cursor: pointer;
+	.ant-badge{
+		position: absolute;
+		transform: translate(-100%, 100%);
+		top: 0;
+		right: 0;
+	}
+	.account_generalMessage_item_link{
+		color: #39215b;
+		cursor: pointer;
+		font-weight: 600;
+	}
+	.account_generalMessage_item_link:hover{
+		text-decoration: underline;
+	}
+}
+.account_generalMessage_item:hover{
+	background: #efefef;
+}
+</style>
diff --git a/src/component/Account/message/comment.vue b/src/component/Account/message/comment.vue
index d19b295d..06a34746 100644
--- a/src/component/Account/message/comment.vue
+++ b/src/component/Account/message/comment.vue
@@ -1,40 +1,42 @@
 <template>
     <div class="account_comment">
-		<div class="account_comment_title modal_title_text">
-			收到的评论
+		<div class="account_generalMessage_title modal_title_text">
+			<span>收到的评论</span>
+			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
-		<div class="account_comment_center modal_title_text">
-			<div class="account_comment_item">
-				<div class="account_comment_item_right">
-					<div class="account_comment_item_right_img" @click="openOtherUsers">
+		<div class="account_generalMessage_center modal_title_text">
+
+			<div class="account_generalMessage_item">
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img" @click="openOtherUsers">
 						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
 					</div>
-					<div class="account_comment_item_right_title">
-						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
-						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
-						<div class="account_comment_item_right_works modal_title_text_intro">回复作品名</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
 					</div>
 				</div>
-				<div class="account_comment_item_left">
-					<div class="account_comment_item_left_delete modal_title_text_intro">
+				<div class="account_generalMessage_item_left">
+					<div class="account_generalMessage_item_left_delete modal_title_text_intro">
 						<span class="icon iconfont icon-shanchu operate_icon"></span>
 					</div>
 					<div class="modal_title_text_intro">2024-06-05</div>
 				</div>
 			</div>
-			<div class="account_comment_item">
-				<div class="account_comment_item_right">
-					<div class="account_comment_item_right_img">
+			<div class="account_generalMessage_item">
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
 						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
 					</div>
-					<div class="account_comment_item_right_title">
-						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
-						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
-						<div class="account_comment_item_right_works modal_title_text_intro">回复作品名</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
 					</div>
 				</div>
-				<div class="account_comment_item_left">
-					<div class="account_comment_item_left_delete modal_title_text_intro">
+				<div class="account_generalMessage_item_left">
+					<div class="account_generalMessage_item_left_delete modal_title_text_intro">
 						<span class="icon iconfont icon-shanchu operate_icon"></span>
 					</div>
 					<div class="modal_title_text_intro">2024-06-05</div>
@@ -59,7 +61,7 @@ export default defineComponent({
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			followList:ref([
+			dataList:ref([
 				{
 					name:'张三',
 					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
@@ -116,92 +118,67 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_comment{
 	width: 100%;
-	.account_comment_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		.account_comment_title_setting{
-			cursor: pointer;
+	.account_generalMessage_item{
+		.account_generalMessage_item_right{
+			display: flex;
+			align-items: center;
+			margin-right: 1rem;
+			.account_generalMessage_item_right_works{
+				cursor: pointer;
+			}
+			.account_generalMessage_item_right_works:hover{
+				text-decoration: underline;
+			}
+			.account_generalMessage_item_right_img{
+				width: 8rem;
+				height: 8rem;
+				margin-right: 2rem;
+				flex-shrink: 0;
+				cursor: pointer;
+				img{
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+			}
+			.account_generalMessage_item_right_title{
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				.account_generalMessage_item_right_title_center{
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+				}
+				.account_generalMessage_item_right_title_name{
+					font-weight: 600;
+					font-weight: 500;
+					color: #000;
+					span{
+						font-weight: 500;
+						color: #9999aa;
+					}
+				}
+			}
+		}
+		.account_generalMessage_item_left{
+			text-align: right;
+			flex-shrink: 0;
+			.account_generalMessage_item_left_delete{
+				span{
+					cursor: pointer;
+				}
+			}
+			div{
+				padding: .5rem 2rem;
+				border-radius: 4rem;
+			}
 		}
 	}
-	.account_comment_center{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		padding: 2rem 5rem;
-		.account_comment_item{
-			display: flex;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 2rem 0;
-			border-bottom: 1px solid #e9eaec;
-			.account_comment_item_right{
-				display: flex;
-				align-items: center;
-				margin-right: 1rem;
-				.account_comment_item_right_works{
-					cursor: pointer;
-				}
-				.account_comment_item_right_works:hover{
-					text-decoration: underline;
-				}
-				.account_comment_item_right_img{
-					width: 8rem;
-					height: 8rem;
-					margin-right: 2rem;
-					flex-shrink: 0;
-					cursor: pointer;
-					img{
-						width: 100%;
-						height: 100%;
-						border-radius: 50%;
-					}
-				}
-				.account_comment_item_right_title{
-					display: flex;
-					flex-direction: column;
-					align-items: flex-start;
-					.account_comment_item_right_title_center{
-						display: -webkit-box;
-						-webkit-box-orient: vertical;
-						-webkit-line-clamp: 2;
-						overflow: hidden;
-					}
-					.account_comment_item_right_title_name{
-						font-weight: 600;
-						font-weight: 500;
-						color: #000;
-						span{
-							font-weight: 500;
-							color: #9999aa;
-						}
-					}
-				}
-			}
-			.account_comment_item_left{
-				text-align: right;
-				flex-shrink: 0;
-				.account_comment_item_left_delete{
-					span{
-						cursor: pointer;
-					}
-				}
-				div{
-					padding: .5rem 2rem;
-					border-radius: 4rem;
-				}
-			}
-		}
-		.account_comment_item:last-child{
-			margin-bottom: 0;
-			border-bottom: none;
-		}
+	.account_generalMessage_item:last-child{
+		margin-bottom: 0;
+		border-bottom: none;
 	}
 }
 </style>
diff --git a/src/component/Account/message/likeMessage.vue b/src/component/Account/message/likeMessage.vue
index 3100c2a3..861a9aa9 100644
--- a/src/component/Account/message/likeMessage.vue
+++ b/src/component/Account/message/likeMessage.vue
@@ -1,41 +1,26 @@
 <template>
     <div class="account_like">
-		<div class="account_like_title modal_title_text">
-			点赞
+		<div class="account_generalMessage_title modal_title_text">
+			<span>点赞</span>
+			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
-		<div class="account_like_center modal_title_text">
-			<div class="account_like_item">
-				<div class="account_like_item_right">
-					<div class="account_like_item_right_img">
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+				<a-badge :dot="item.isRead == 0"></a-badge>
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
 						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
 					</div>
-					<div class="account_like_item_right_title">
-						<div class="account_like_item_right_title_name">名字 <span>等人攒了你的作品</span></div>
-						<div>作品名字</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="account_generalMessage_item_right_title_name">{{ item.senderUserName }} <span>攒了你的作品</span></div>
+						<div>{{ item.portfolioName }}</div>
 					</div>
 				</div>
-				<div class="account_like_item_left">
-					<div class="account_like_item_left_delete modal_title_text_intro">
+				<div class="account_generalMessage_item_left">
+					<div class="account_generalMessage_item_left_delete modal_title_text_intro">
 						<span class="icon iconfont icon-shanchu operate_icon"></span>
 					</div>
-					<div class="modal_title_text_intro">2024-06-05</div>
-				</div>
-			</div>
-			<div class="account_like_item">
-				<div class="account_like_item_right">
-					<div class="account_like_item_right_img">
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
-					</div>
-					<div class="account_like_item_right_title">
-						<div class="account_like_item_right_title_name">名字 <span>等人攒了你的作品</span></div>
-						<div>作品名字</div>
-					</div>
-				</div>
-				<div class="account_like_item_left">
-					<div class="account_like_item_left_delete modal_title_text_intro">
-						<span class="icon iconfont icon-shanchu operate_icon"></span>
-					</div>
-					<div class="modal_title_text_intro">2024-06-05</div>
+					<div class="modal_title_text_intro">{{ item.createTime }}</div>
 				</div>
 			</div>
 		</div>
@@ -52,25 +37,25 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-    setup() {
+	emits:['setReadStatus','setAllmessage'],
+    setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			followList:ref([
-				{
-					name:'张三',
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-					time:'2024-01-01 12:00:00',
-					content:'关注了你',
-					isRead:false
-				},
-				{
-					name:'李四',
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-				}
-			])
+			dataList:[
+			]
 		})
+		let setmessageList = (data:any)=>{
+			accountMessage.dataList = data.content
+		}
+		let setRead = (item:any)=>{
+			emit('setReadStatus',item)
+			item.isRead = 1
+		}
+		let allRead = ()=>{
+			emit('setAllmessage')
+		}
 		// let ws = new WebSocket('ws://127.0.0.1:3000')
 		// console.log(ws);
 		
@@ -93,6 +78,9 @@ export default defineComponent({
 		})
         return{
            ...toRefs(accountMessage),
+		   setmessageList,
+		   setRead,
+		   allRead
         }
     },
     data(){
@@ -105,36 +93,15 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_like{
 	width: 100%;
-	.account_like_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		.account_like_title_setting{
-			cursor: pointer;
-		}
+	.account_generalMessage_title{
 	}
-	.account_like_center{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		padding: 2rem 5rem;
-		.account_like_item{
-			display: flex;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 2rem 0;
-			border-bottom: 1px solid #e9eaec;
-			.account_like_item_right{
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
 				display: flex;
 				align-items: center;
 				margin-right: 1rem;
-				.account_like_item_right_img{
+				.account_generalMessage_item_right_img{
 					width: 8rem;
 					height: 8rem;
 					margin-right: 2rem;
@@ -146,8 +113,8 @@ export default defineComponent({
 						border-radius: 50%;
 					}
 				}
-				.account_like_item_right_title{
-					.account_like_item_right_title_name{
+				.account_generalMessage_item_right_title{
+					.account_generalMessage_item_right_title_name{
 						font-weight: 600;
 						font-weight: 500;
 						color: #000;
@@ -158,10 +125,10 @@ export default defineComponent({
 					}
 				}
 			}
-			.account_like_item_left{
+			.account_generalMessage_item_left{
 				text-align: right;
 				flex-shrink: 0;
-				.account_like_item_left_delete{
+				.account_generalMessage_item_left_delete{
 					span{
 						cursor: pointer;
 					}
@@ -172,7 +139,7 @@ export default defineComponent({
 				}
 			}
 		}
-		.account_like_item:last-child{
+		.account_generalMessage_item:last-child{
 			margin-bottom: 0;
 			border-bottom: none;
 		}
diff --git a/src/component/Account/message/newFollow.vue b/src/component/Account/message/newFollow.vue
index b25a7014..a9f82ab0 100644
--- a/src/component/Account/message/newFollow.vue
+++ b/src/component/Account/message/newFollow.vue
@@ -1,34 +1,22 @@
 <template>
     <div class="account_newFollow">
-		<div class="account_newFollow_title modal_title_text">
-			新增粉丝
+		<div class="account_generalMessage_title modal_title_text">
+			<span>新增粉丝</span>
+			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
-		<div class="account_newFollow_center modal_title_text">
-			<div class="account_newFollow_item">
-				<div class="account_newFollow_item_right">
-					<div class="account_newFollow_item_right_img">
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+				<a-badge :dot="item.isRead == 0"></a-badge>
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
 						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
 					</div>
-					<div class="account_newFollow_item_right_title">
-						<div class="">名字</div>
-						<div class="modal_title_text_intro">2024-01-01 12:00:00 关注了你</div>
+					<div class="account_generalMessage_item_right_title">
+						<div class="">{{ item.senderUserName }}</div>
+						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
 					</div>
 				</div>
-				<div class="account_newFollow_item_left">
-					<div>回关</div>
-				</div>
-			</div>
-			<div class="account_newFollow_item">
-				<div class="account_newFollow_item_right">
-					<div class="account_newFollow_item_right_img">
-						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
-					</div>
-					<div class="account_newFollow_item_right_title">
-						<div class="">名字</div>
-						<div class="modal_title_text_intro">2024-01-01 12:00:00 关注了你</div>
-					</div>
-				</div>
-				<div class="account_newFollow_item_left">
+				<div class="account_generalMessage_item_left">
 					<div>回关</div>
 				</div>
 			</div>
@@ -46,47 +34,33 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-    setup() {
+	emits:['setReadStatus','setAllmessage'],
+    setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			followList:ref([
-				{
-					name:'张三',
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-					time:'2024-01-01 12:00:00',
-					content:'关注了你',
-					isRead:false
-				},
-				{
-					name:'李四',
-					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-				}
+			dataList:ref([
+				
 			])
 		})
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
-		// console.log(ws);
-		
-		// ws.onopen = ()=>{
-		// 	console.log(222);
-		// 	let data = {
-		// 		cmd:4, 
-		// 		data:{
-		// 			msg:'222'
-		// 		} 
-		// 	}
-		// 	ws.send(JSON.stringify(data))
-		// 	// ws.onmessage = (data)=>{
-		// 	// 	console.log(data); 
-		// 	// }
-		// }
-		// provide('exhibitionList',exhibitionList)
-		
+		let setmessageList = (data:any)=>{
+			accountMessage.dataList = data.content
+		}
+		let setRead = (item:any)=>{
+			emit('setReadStatus',item)
+			item.isRead = 1
+		}
+		let allRead = ()=>{
+			emit('setAllmessage')
+		}
 		onMounted (()=>{
 		})
         return{
            ...toRefs(accountMessage),
+		   setmessageList,
+		   setRead,
+		   allRead
         }
     },
     data(){
@@ -99,35 +73,12 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_newFollow{
 	width: 100%;
-	.account_newFollow_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		.account_newFollow_title_setting{
-			cursor: pointer;
-		}
-	}
-	.account_newFollow_center{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		padding: 2rem 5rem;
-		.account_newFollow_item{
-			display: flex;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 2rem 0;
-			border-bottom: 1px solid #e9eaec;
-			.account_newFollow_item_right{
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
 				display: flex;
 				align-items: center;
-				.account_newFollow_item_right_img{
+				.account_generalMessage_item_right_img{
 					width: 8rem;
 					height: 8rem;
 					margin-right: 2rem;
@@ -139,7 +90,7 @@ export default defineComponent({
 					}
 				}
 			}
-			.account_newFollow_item_left{
+			.account_generalMessage_item_left{
 				div{
 					padding: .5rem 2rem;
 					border-radius: 4rem;
@@ -148,7 +99,7 @@ export default defineComponent({
 				}
 			}
 		}
-		.account_newFollow_item:last-child{
+		.account_generalMessage_item:last-child{
 			margin-bottom: 0;
 			border-bottom: none;
 		}
diff --git a/src/component/Account/message/privateChat.vue b/src/component/Account/message/privateChat.vue
index ac7e55f6..9bdf0865 100644
--- a/src/component/Account/message/privateChat.vue
+++ b/src/component/Account/message/privateChat.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="account_privateChatMessage">
-		<div class="account_privateChatMessage_title modal_title_text">
-			私信
+		<div class="account_generalMessage_title modal_title_text">
+			<span>私信</span>
+			<div class="account_generalMessage_title_setting">全部已读</div>
 		</div>
 		<div class="account_privateChatMessage_content">
 			<div class="content_left">
@@ -243,25 +244,14 @@ export default defineComponent({
 	height: 100%;
 	display: flex;
     flex-direction: column;
-	.account_privateChatMessage_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		.account_privateChatMessage_title_setting{
-			cursor: pointer;
-		}
-	}
 	.account_privateChatMessage_content{
 		flex: 1;
 		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
 		border: 1px solid #e9eaec;
 		border-radius: 5px;
 		display: flex;
+		margin-right: 5rem;
+		margin-left: 5rem;
 		.content_left{
 			width: 20%;
 			border-right: 1px solid #e9eaec;
@@ -277,7 +267,6 @@ export default defineComponent({
 				&.active{
 					background: #e4e5e6;
 				}
-				
 				img{
 					width: 6rem;
 					height: 6rem;
diff --git a/src/component/Account/message/system.vue b/src/component/Account/message/system.vue
index 56ff03b1..34d73853 100644
--- a/src/component/Account/message/system.vue
+++ b/src/component/Account/message/system.vue
@@ -1,20 +1,20 @@
 <template>
     <div class="account_systemMessage">
-		<div class="account_systemMessage_title modal_title_text">
-			系统消息
+		<div class="account_generalMessage_title modal_title_text">
+			<span>系统消息</span>
+			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
-		<div class="account_systemMessage_item modal_title_text">
-			<div class="account_systemMessage_item_title">
-				<div>Open Call for International Young Fashion Talent</div>
-				<div class="modal_title_text_intro">31 Aug 2024</div>
+		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+			<a-badge dot></a-badge>
+			<div class="account_generalMessage_item_title">
+				<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
+				<div class="modal_title_text_intro">{{ item.createTime }}</div>
 			</div>
 			<div class="modal_title_text_intro">
-				10 selected young fashion talent will be mentored by the AiDA development team to learn and explore the possibilities of AiDA. Each selected young fashion talent will create a 4-outfit collection themed “Culture” with AiDA. They will receive full technical support and subsidies for the associated production fee. Selected International/ Mainland young talent will also be able to attend the Culture X AI Internation Fashion Show in Hong Kong that is scheduled on 11 March 2025.
-				<span class="account_systemMessage_item_link">网页链接</span>
+				{{ item.content.content }}
+				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
 			</div>
 		</div>
-		<div></div>
-		<div></div>
     </div>
 </template>
 <script lang="ts">
@@ -28,34 +28,38 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-    setup() {
+	emits:['setReadStatus','setAllmessage'],
+    props:{
+    },
+    setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
-			activeKey: ref('1'),
+			dataList: [],
 		})
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
-		// console.log(ws);
-		
-		// ws.onopen = ()=>{
-		// 	console.log(222);
-		// 	let data = {
-		// 		cmd:4, 
-		// 		data:{
-		// 			msg:'222'
-		// 		} 
-		// 	}
-		// 	ws.send(JSON.stringify(data))
-		// 	// ws.onmessage = (data)=>{
-		// 	// 	console.log(data); 
-		// 	// }
-		// }
+		let setmessageList = (data:any)=>{
+			console.log(data);
+			
+			data.content.forEach((item:any) => {
+				item.content = JSON.parse(item.content)
+			});
+			accountMessage.dataList = data.content
+		}
+		let setRead = (item:any)=>{
+			emit('setReadStatus',item)
+		}
+		let allRead = ()=>{
+			emit('setAllmessage')
+		}
 		// provide('exhibitionList',exhibitionList)
 		
 		onMounted (()=>{
 		})
         return{
            ...toRefs(accountMessage),
+		   setmessageList,
+		   setRead,
+		   allRead
         }
     },
     data(){
@@ -68,37 +72,21 @@ export default defineComponent({
 <style lang="less" scoped>
 .account_systemMessage{
 	width: 100%;
-	.account_systemMessage_title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem 5rem;
-		border-bottom: 1px solid #e9eaec;
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		.account_systemMessage_title_setting{
-			cursor: pointer;
-		}
-	}
-	.account_systemMessage_item{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
-		border: 1px solid #e9eaec;
-		border-radius: 5px;
-		padding: 5rem 5rem;
-		.account_systemMessage_item_title{
+	.account_generalMessage_item{
+		.account_generalMessage_item_title{
 			display: flex;
 			align-items: center;
 			margin-bottom: 2rem;
+			.account_generalMessage_item_title_text{
+				max-width: 80%;
+				white-space: nowrap;      
+				overflow: hidden;          
+				text-overflow: ellipsis;
+			}
 			.modal_title_text_intro{
 				margin-left: 4rem;
 			}
 		}
-		.account_systemMessage_item_link{
-			color: #39215b;
-			cursor: pointer;
-			font-weight: 600;
-		}
 	}
 }
 </style>
diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue
index 340b2224..8670660f 100644
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -230,7 +230,7 @@
 								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
 								</div>
 								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
-								<img src="#" :title="pantongNameList[index]">
+								<img :title="pantongNameList[index]">
 							</div>
 						</div>
 					</div>
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index f68d847a..48539e3c 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -128,7 +128,7 @@
 								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
 								</div>
 								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
-								<img src="#" :title="pantongNameList[index]">
+								<img :title="pantongNameList[index]">
 							</div>
 						</div>
 						<div class="upload_color_btn" :title="isSelectSuccessively?$t('ColorboardUpload.SelectSuccessivelyOnTitle'):$t('ColorboardUpload.SelectSuccessivelyOffTitle')" v-show="selectColorList.length>0">
@@ -150,7 +150,7 @@
                             <span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</span>
                         </div>
 						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
-							<img src="#" :title="pantongName">
+							<img :title="pantongName">
 						</div>
                     </div>
 				</div>
diff --git a/src/component/HomePage/Cropper.vue b/src/component/HomePage/Cropper.vue
index 7e779199..e5749a5a 100644
--- a/src/component/HomePage/Cropper.vue
+++ b/src/component/HomePage/Cropper.vue
@@ -148,7 +148,7 @@ export default defineComponent({
             cropper.getCropData((data:any) => {
             // 转换为File对象
                 let file = base64toFile(data,this.cropperFileData.name);
-                this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
+                this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData,base64:data})
             })
 			
         },
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index a8db87c9..f6487884 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -8,6 +8,7 @@
         :centered="true"
         :closable="false"
         :keyboard="false"
+		:destroyOnClose="true"
     >
         <div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
             <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
@@ -362,8 +363,13 @@ export default defineComponent({
 		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
 		let userlikeGroupId = 0
+
+		let submitCanvasContent = null
         let init = (productData) => {
 			userlikeGroupId = productData.userlikeGroupId
+
+			clearTimeout(submitCanvasContent)
+			
 			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -446,16 +452,42 @@ export default defineComponent({
 					userLikeGroupId:userlikeGroupId
 				}
 				isShowMark.value = true
-				let oldExportCanvas = await new Promise((resolve, reject) => {
-					Https.axiosPost(Https.httpUrls.exportSearch, data)
-					.then((rv) => {
-						resolve(rv)
-					})
-					.catch((rv) => {
+				let oldExportCanvas
+				let localCanvas = localStorage.getItem('canvasContent')
+				let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
+				oldExportCanvas = await new Promise((resolve, reject) => {
+					if(localUserlikeGroupId == userlikeGroupId){
+						Modal.confirm({
+							title: useI18.t('exportModel.jsContent8'),
+							okText: 'Yes',
+							cancelText: 'No',
+							mask:false,
+							centered:true,
+							onOk() {
+								localCanvas = localCanvas?JSON.parse(localCanvas):null
+								resolve(localCanvas)
+							},
+							onCancel(){
+								resolve(null)
+							}
+						});
+					}else{
 						resolve(null)
-					});
+					}
 				})
+				if(!oldExportCanvas){
+					oldExportCanvas = await new Promise((resolve, reject) => {
+						Https.axiosPost(Https.httpUrls.exportSearch, data)
+						.then((rv) => {
+							resolve(rv)
+						})
+						.catch((rv) => {
+							resolve(null)
+						});
+					})
+				}
 				
+				console.log(oldExportCanvas);
                 // arr.forEach((item,index)=>{
                 if(oldExportCanvas){
 					canvasWH.value.height = oldExportCanvas.canvasHeight
@@ -579,6 +611,16 @@ export default defineComponent({
 				updateCanvasState('')//加载完成后记录一下
 				setOperation('move')
 				closeNav.value.tool = true
+				submitCanvasContent = setInterval(()=>{
+					let data = setCanvasContent(true)
+					if(data.objects.length == 0){
+						clearTimeout(submitCanvasContent)
+						return
+					}
+					data.canvasHeight = canvasWH.value.height
+					localStorage.setItem('canvasContent',JSON.stringify(data))
+					localStorage.setItem('userlikeGroupId',userlikeGroupId)
+				},3000)
 				if(driver__.value.driver){
 					driverObj__.moveNext()
 				}
@@ -1864,7 +1906,7 @@ export default defineComponent({
 			publishModal.init(data)
 		}
 		let setSubmit = ()=>{
-			let data = setCanvasContent()
+			let data = setCanvasContent(false)
 			data.canvasHeight = canvasWH.value.height
 			let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
 			let formData = new FormData();
@@ -1875,14 +1917,16 @@ export default defineComponent({
 				message.success(t('exportModel.jsContent7'))
             })
 		}
-		let setCanvasContent = ()=>{
+		let setCanvasContent = (isSaveImg)=>{
 			var json = canvas.toJSON(['imgId','minioUrl']);
 			// console.log(JSON.stringify(json));
-			json.objects.forEach(item=>{
-				if(item.type == 'image'){
-					delete item.src
-				}
-			})
+			if(!isSaveImg){
+				json.objects.forEach(item=>{
+					if(item.type == 'image'){
+						delete item.src
+					}
+				})
+			}
 			return json
 		}
 		let textDataShow = ref(false)
@@ -1921,6 +1965,7 @@ export default defineComponent({
 				]
 			textFontFamilyList.value = arr
 			fontFamily.value = arr[0].value
+			
 		});
         return {
 			toSvg,
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 3071cd00..412c5315 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -13,7 +13,7 @@
 			</div> -->
         </div>
         <div class="input_border" >
-			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',]">
+			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']" >
 				<div class="input_box_btnBox">
 					<div class="upload_item">
 						<div
@@ -87,7 +87,7 @@
 					v-model="searchPictureName"
 				></textarea>
 				<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
-				<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
+				<div v-show="!isGenerate" class="generage_btn started_btn " @click.stop="getgenerate">
 					{{ $t('Generate.Generate') }}
 					<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
 				</div>
@@ -139,7 +139,7 @@
                 </div>
             </div>
         </div> -->
-        <div class="generage_img Guide_1_6"  :style="[isGenerate?'overflow:hidden':'']">
+        <div class="generage_img Guide_1_6"  :style="[isGenerate?'overflow:hidden':'']" :class="[driver__.driver?'showEvents':'']">
             <div
                 class="generage_img_item"
                 v-for="(item, index) in fileList"
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index f22204fc..165baded 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -444,6 +444,7 @@ export default defineComponent({
 			
         },
 		async layout(){
+			
 			if(this.loadingShow)return
 			this.loadingShow = true
 			this.store.commit("setDisposeMoodboard", []);
@@ -469,7 +470,6 @@ export default defineComponent({
 			}else{
 				this.moodb_className = this.moodb_[arr.length-1][random]
 			}
-
 			this.layoutOpen = true
 			 //提交模板
 			// this.loadingShow = true
@@ -493,6 +493,19 @@ export default defineComponent({
 							img.imgUrl = rv.url
 							img.resData = JSON.parse(JSON.stringify(img))
 							this.store.commit("setDisposeMoodboard", img);
+							let obj = {
+								imgStyle:[],
+								domStyle:[],
+								borStyle:[],
+								rototeStyle:[],
+								translateStyle:[],
+								angleTRStyle:[],
+								angleTLStyle:[],
+								angleBRStyle:[],
+								angleBLStyle:[],
+								class:this.moodb_className,
+							}
+							this.store.commit("setDisposeMoodboardPosition", obj);
 							this.loadingShow = false
 						}
 					).catch(rv=>{
diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue
index 98896814..cf990d35 100644
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -125,13 +125,21 @@ export default defineComponent({
 		draggable
     },
     setup(prop) {
+		let store = useStore()
         let layout: any = ref(false);
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
 		let layoutList:any = ref([])
-		const content = ref<HTMLElement | null>(null);
+		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
+		let styleObj = computed(()=>{
+			return store.state.UploadFilesModule.disposeMoodboardPostition
+		})
+		let domObj = {
+			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
+			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
+		}
         return {
             layout,
             templateFileList,
@@ -139,7 +147,9 @@ export default defineComponent({
 			drag,
 			layoutList,
 			content,
-			loadingShow
+			loadingShow,
+			styleObj,
+			domObj,
         };
     },
     data() {
@@ -348,6 +358,20 @@ export default defineComponent({
 				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
 					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
 						if(timeSwitch){
+							if(angle == 0){
+								function getRotationAngle(transformDom:any) {
+								if (!transformDom || transformDom === 'none') return null;
+								let transform = window.getComputedStyle(transformDom).transform;
+								const values = transform?.match(/matrix\(([^)]+)\)/);
+								if (values) {
+									const matrix = values[1].split(',').map(Number);
+									const angle = Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI);
+									return angle >= 0 ? angle : angle + 360; // 确保角度为正值
+								}
+								return null;
+								}
+								angle = getRotationAngle(elParent.firstElementChild);
+							}
 							timeSwitch = false
 							if((e as WheelEvent).deltaY > 0){
 								if(num <= 1){
@@ -571,7 +595,9 @@ export default defineComponent({
 			this.layoutList = parentList
 			
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.moodb_className
+			this.moodbClassName = this.styleObj.class
+			this.initDomStyle()
+			
 		},
 		cancelDsign(){
 			this.layout = false
@@ -604,6 +630,65 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
+		setIndex(arr:any){
+			const nums = arr.map((obj:any) => obj.num);
+			const sortedNums = [...nums].sort((a, b) => a - b);
+			GO.zIndex = sortedNums[sortedNums.length - 1] + 1
+			const numToNewValue = new Map();
+			sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
+			arr.forEach((obj:any) => {
+				obj.num = numToNewValue.get(obj.num);
+			});
+			return arr
+		},
+		initDomStyle(){
+			nextTick(()=>{
+				this.content.forEach((item:any,index:any) => {
+					if(this.styleObj.domStyle[index]){
+						item.classList.add('active')
+						this.initStyle(item,this.styleObj.domStyle[index])
+					}
+					this.domObj.dom.forEach((domName:any,domStyle:any) => {
+						let dom,style
+						if(this.styleObj[this.domObj.domStyle[index]]){
+							style = this.styleObj[this.domObj.domStyle[domStyle]][index]
+						 	dom = item.querySelector(domName)
+							this.initStyle(dom,style)
+						}
+					})
+				});
+			})
+		},
+		clearStyleObj(){
+			this.styleObj.domStyle = []
+			this.domObj.domStyle.forEach((item:any)=>{
+				if(this.styleObj[item])this.styleObj[item] = []
+			})
+		},
+		initStyle(dom:any,style:any){
+			if(!style)return
+			for (const [property, value] of Object.entries(style)) {
+				dom.style.setProperty(property, value);
+			}
+		},
+		setDomStyle(){
+			this.clearStyleObj()
+			this.content.forEach((item:any) => {
+				this.styleObj.domStyle.push(this.setStyle(item.style))
+				this.domObj.dom.forEach((domName:any,index:any) => {
+					let style = this.domObj.domStyle[index]
+					let dom = item.querySelector(domName)
+					this.styleObj[style].push(this.setStyle(dom.style))
+				})
+			});
+		},
+		setStyle(domStyle:any){
+			let style:any = {}
+			for (let property of domStyle) {
+				style[property] = domStyle.getPropertyValue(property);
+			}
+			return style
+		},
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
@@ -628,6 +713,11 @@ export default defineComponent({
 							this.layout = false
 							this.loadingShow = false
 							this.store.commit("setDisposeMoodboard", rv);
+
+							this.setDomStyle()
+							this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+							this.store.commit("setDisposeMoodboardPosition", this.styleObj);
+
 						}
 					).catch(rv=>{
 						this.loadingShow = false
diff --git a/src/component/HomePage/layoutMobile.vue b/src/component/HomePage/layoutMobile.vue
index ae693502..def6a394 100644
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -132,14 +132,22 @@ export default defineComponent({
 		draggable
     },
     setup(prop) {
+		let store = useStore()
         let layout: any = ref(false);
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
 		let layoutList:any = ref([])
-		const content = ref<HTMLElement | null>(null);
+		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
+		let styleObj = computed(()=>{
+			return store.state.UploadFilesModule.disposeMoodboardPostition
+		})
 		let moodItemScale = ref(0)
+		let domObj = {
+			dom:['img','ul','.layoutMobile_rotote','.layoutMobile_translate','.layoutMobile_angle_tr','.layoutMobile_angle_tl','.layoutMobile_angle_br','.layoutMobile_angle_bl'],
+			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
+		}
         return {
             layout,
             templateFileList,
@@ -148,7 +156,9 @@ export default defineComponent({
 			layoutList,
 			content,
 			loadingShow,
-			moodItemScale
+			moodItemScale,
+			styleObj,
+			domObj,
         };
     },
     data() {
@@ -582,7 +592,9 @@ export default defineComponent({
 			this.moodIndex = 0
 
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.moodb_className
+			this.moodbClassName = this.styleObj.class
+			this.initDomStyle()
+
 		},
 		cancelDsign(){
 			this.layout = false
@@ -635,6 +647,65 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
+		setIndex(arr:any){
+			const nums = arr.map((obj:any) => obj.num);
+			const sortedNums = [...nums].sort((a, b) => a - b);
+			GO.zIndex = sortedNums[sortedNums.length - 1] + 1
+			const numToNewValue = new Map();
+			sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
+			arr.forEach((obj:any) => {
+				obj.num = numToNewValue.get(obj.num);
+			});
+			return arr
+		},
+		initDomStyle(){
+			nextTick(()=>{
+				this.content.forEach((item:any,index:any) => {
+					if(this.styleObj.domStyle[index]){
+						item.classList.add('active')
+						this.initStyle(item,this.styleObj.domStyle[index])
+					}
+					this.domObj.dom.forEach((domName:any,domStyle:any) => {
+						let dom,style
+						if(this.styleObj[this.domObj.domStyle[index]]){
+							style = this.styleObj[this.domObj.domStyle[domStyle]][index]
+						 	dom = item.querySelector(domName)
+							this.initStyle(dom,style)
+						}
+					})
+				});
+			})
+		},
+		clearStyleObj(){
+			this.styleObj.domStyle = []
+			this.domObj.domStyle.forEach((item:any)=>{
+				if(this.styleObj[item])this.styleObj[item] = []
+			})
+		},
+		initStyle(dom:any,style:any){
+			if(!style)return
+			for (const [property, value] of Object.entries(style)) {
+				dom.style.setProperty(property, value);
+			}
+		},
+		setDomStyle(){
+			this.clearStyleObj()
+			this.content.forEach((item:any) => {
+				this.styleObj.domStyle.push(this.setStyle(item.style))
+				this.domObj.dom.forEach((domName:any,index:any) => {
+					let style = this.domObj.domStyle[index]
+					let dom = item.querySelector(domName)
+					this.styleObj[style].push(this.setStyle(dom.style))
+				})
+			});
+		},
+		setStyle(domStyle:any){
+			let style:any = {}
+			for (let property of domStyle) {
+				style[property] = domStyle.getPropertyValue(property);
+			}
+			return style
+		},
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
@@ -659,6 +730,10 @@ export default defineComponent({
 							this.layout = false
 							this.loadingShow = false
 							this.store.commit("setDisposeMoodboard", rv);
+
+							this.setDomStyle()
+							this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+							this.store.commit("setDisposeMoodboardPosition", this.styleObj);
 						}
 					).catch(rv=>{
 						this.loadingShow = false
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index ea2c565b..71560bbb 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -49,11 +49,16 @@
 							</div> -->
 							<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
 							<div class="detail_right_user detail_left_right_item">
-								<!-- <div class="detail_right_user_head">
+								<div class="detail_right_user_head">
 									<img v-lazy="scaleImageData?.imgUrl">
-								</div> -->
+
+								</div>
 								<div class="detail_right_user_content">
-									<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
+									<div>
+										<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
+										<div v-if="scaleImageData.isFollow == 0" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
+										<div v-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
+									</div>
 									<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
 									<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
 									<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
@@ -551,6 +556,18 @@ export default defineComponent({
 					}
                 });
 		}
+		let setFollow = () =>{
+			let url = Https.httpUrls.porfolioFollow
+			if(imgData.scaleImageData.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			Https.axiosGet(url, {params:{followeeId:imgData.scaleImageData.accountId}})
+			.then((rv) => {
+				if(imgData.scaleImageData.isFollow == 1){
+					imgData.scaleImageData.isFollow = 0
+				}else{
+					imgData.scaleImageData.isFollow = 1
+				}
+			})
+		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
@@ -584,6 +601,7 @@ export default defineComponent({
 			setComment,
 			setPortfolioLike,
 			setDeleteComment,
+			setFollow,
         };
     },
 	directives:{
@@ -759,6 +777,7 @@ export default defineComponent({
 			flex-direction: row;
 			justify-content: space-between;
 			width: 100%;
+			align-items: flex-start;
 			.scaleImage_chunk_title_Original{
 				color: #39215b;
 				background: #c9a2ff;
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index b6bfe3c0..5285bbec 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -72,6 +72,7 @@ export default {
 		jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
 		jsContent6:'请选择需要超分的图片',
 		jsContent7:'保存成功~',
+		jsContent8:'是否继续编辑',
 	},
 	upgradePlan:{
 		BuyCredlts:'购买积分',
@@ -532,6 +533,8 @@ export default {
 	newScaleImage:{
 		Collection:'系列',
 		SecondaryCreation:'二次创作',
+		Follow:'关注',
+		Unfollow:'取关',
 		CreationTime:'创建时间',
 		UpdateTime:'更新时间',
 		Comment:'评论',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index edcd4d2b..26df38ba 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -73,6 +73,7 @@ export default {
 		jsContent5:'After super-resolution enhancement, the {str} th image you selected has a resolution exceeding 2048, Please choose a lower magnification level.',
 		jsContent6:'Please select the picture that requires upscale',
 		jsContent7:'save successfully',
+		jsContent8:'Whether to continue editing',
 	},
 	upgradePlan:{
 		BuyCredlts:'Buy credits',
@@ -533,6 +534,8 @@ export default {
 	newScaleImage:{
 		Collection:'Collection',
 		SecondaryCreation:'Secondary Creation',
+		Follow:'Follow',
+		Unfollow:'Unfollow',
 		CreationTime:'CreationTime',
 		UpdateTime:'UpdateTime',
 		Comment:'Comment',
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index 724ae4e5..ae1c3b92 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -6,6 +6,7 @@ import GO from '@/tool/GO';
 interface UploadFiles{
 	moodboard:any,
 	disposeMoodboard:any,
+	disposeMoodboardPostition:any,
     moodboardFiles:any,
 	moodboardGenerateFiles:any,
 	moodboardMaterialFiles:any,
@@ -28,6 +29,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
     state:{
 		moodboard:[],
 		disposeMoodboard:[],
+		disposeMoodboardPostition:{},
         moodboardFiles:[],
 		moodboardGenerateFiles:[],
 		moodboardMaterialFiles:[],
@@ -54,6 +56,9 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
 		setDisposeMoodboard(state,files){
 			state.disposeMoodboard = [files]
+        },
+		setDisposeMoodboardPosition(state,files){
+			state.disposeMoodboardPostition = files
         },
 		setMoodboardGenerateFiles(state,files){
 			state.moodboardGenerateFiles = files
@@ -196,6 +201,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         setAllBoardData(state){
             state.allBoardData = {
 				disposeMoodboard:state.disposeMoodboard,
+				disposeMoodboardPostition:state.disposeMoodboardPostition,
                 moodboardFiles:state.moodboard,
                 printboardFiles:state.printboard,
                 colorBoards:state.colorBoards,
@@ -224,6 +230,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
             state.marketingSketchFiles = []
             state.moodTemplateId = ''
 			state.disposeMoodboard = []
+			state.disposeMoodboardPostition = {}
 			// state.showSketchboard = []
         },
 		clearAllId(state){
@@ -242,6 +249,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
         clearMoodTemplateId(state){
 			state.disposeMoodboard = []
+			state.disposeMoodboardPostition = {}
         },
     },
     actions:{
diff --git a/src/store/userHabit/userHabit.ts b/src/store/userHabit/userHabit.ts
index b14a03ef..cbb98f32 100644
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -42,6 +42,7 @@ const userHabit : Module<UserHabit,RootState> = {
 		},
 		messageSystem:{
 			messageNum:4,
+			messageType:{},
 		},
     },
     mutations:{
@@ -77,7 +78,30 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.systemUser.value = -1
 		},
 		setMessageSystem(state,data){
-			state.messageSystem = data
+			let num = 0
+			for (const iterator in data) {
+				num+=data[iterator]
+				if(!state.messageSystem.messageType[iterator]){
+					state.messageSystem.messageType[iterator] = data[iterator]
+				}else{
+					for (const key in state.messageSystem.messageType) {
+						if(key == iterator){
+							state.messageSystem.messageType[key] = data[iterator]
+							break
+						}
+					}
+				}
+			}
+			state.messageSystem.messageNum = num
+		},
+		closeMessageSystem(state,data){
+			if(!data){
+				state.messageSystem.messageNum = 0
+				state.messageSystem.messageType = {}
+			}else{
+
+			}
+			
 		},
        
     },
diff --git a/src/tool/domTurnImg.js b/src/tool/domTurnImg.js
index acf02053..074be9db 100644
--- a/src/tool/domTurnImg.js
+++ b/src/tool/domTurnImg.js
@@ -1,50 +1,37 @@
 import html2canvas from "html2canvas";
 const getJpeg = dom =>{
-		return new Promise(resolve =>{
-			setTimeout(() => {
-				html2canvas(dom,{useCORS: true,}).then(canvas =>{
-					let base64 = canvas.toDataURL('image/jpeg',.9);
-					// let quality = 0.9    // 压缩系数0-1之间
-					let newImage = new Image()
-					newImage.src = base64
-					newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
-					// let imgWidth,
-					// imgHeight
-					// let w = undefined
-					newImage.onload = function () {
-					// w = this.width * 1
-					// imgWidth = this.width
-					// imgHeight = this.height
-					// let canvas = document.createElement('canvas')
-					// let ctx = canvas.getContext('2d')
-					// if (Math.max(imgWidth, imgHeight) > w) {
-					// 	if (imgWidth > imgHeight) {
-					// 	canvas.width = w
-					// 	canvas.height = w * (imgHeight / imgWidth)
-					// 	} else {
-					// 	canvas.height = w
-					// 	canvas.width = w * (imgWidth / imgHeight)
-					// 	}
-					// } else {
-					// 	canvas.width = imgWidth
-					// 	canvas.height = imgHeight
-					// 	quality = 0.6
-					// }
-					// ctx.clearRect(0, 0, canvas.width, canvas.height)
-					// ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImage
-					// let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
-					let fileData = dataURLtoFile(base64);
-					let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名
-					// console.log(smallBase64);
-					// resolve(base64ToFile(fileOfBlob))
-					resolve(fileOfBlob)
-					newImage.remove()
-
-					}
-				})
-			}, 100);
-		})
+	return new Promise(resolve =>{
+		setTimeout(() => {
+			html2canvas(dom,{useCORS: true,}).then(canvas =>{
+				let base64 = canvas.toDataURL('image/jpeg',.9);
+				// let quality = 0.9    // 压缩系数0-1之间
+				let newImage = new Image()
+				newImage.src = base64
+				newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
+				const filename = new Date().toISOString() + '.jpg';
+				resolve(base64ToFile(base64,filename))
+				newImage.remove()
+				// }
+			})
+		}, 100);
+	})
 	
+}
+function base64ToFile(base64,filename) {
+   // 从 Base64 编码中去掉数据类型描述部分
+   const base64Str = base64.replace(/^data:image\/[a-z]+;base64,/, '');
+   // 解码 Base64 字符串
+   const byteCharacters = atob(base64Str);
+   const byteNumbers = new Array(byteCharacters.length);
+   for (let i = 0; i < byteCharacters.length; i++) {
+	   byteNumbers[i] = byteCharacters.charCodeAt(i);
+   }
+   const byteArray = new Uint8Array(byteNumbers);
+   
+   // 创建 File 对象
+   const file = new File([byteArray], filename, { type: 'image/jpeg' }); // 根据需要的类型进行修改
+   console.log(file);
+   return file;
 }
 	//base64转成blob
 function dataURLtoFile(dataURI, type) {
@@ -58,16 +45,15 @@ function dataURLtoFile(dataURI, type) {
 
 //转换
 
-const base64ToFile = urlData =>{
-	const arr = urlData.split(',');
-	const mime = arr[0].match(/:(.*?);/)[1]
-	const bytes = atob(arr[1])
-	let n = bytes.length;
-	const ia = new Uint8Array(n)
-	while (n--){
-		ia[n] = bytes.charCodeAt(n);
-	}
-	return new File([ia],'jpeg',{type:mime})
-
-}
+// const base64ToFile = urlData =>{
+// 	const arr = urlData.split(',');
+// 	const mime = arr[0].match(/:(.*?);/)[1]
+// 	const bytes = atob(arr[1])
+// 	let n = bytes.length;
+// 	const ia = new Uint8Array(n)
+// 	while (n--){
+// 		ia[n] = bytes.charCodeAt(n);
+// 	}
+// 	return new File([ia],'jpeg',{type:mime})
+// }
 export default getJpeg
\ No newline at end of file
diff --git a/src/tool/guide.js b/src/tool/guide.js
index c81fb3ee..dc027d70 100644
--- a/src/tool/guide.js
+++ b/src/tool/guide.js
@@ -119,7 +119,7 @@ function createDriver(){
 		showButtons:false,
 		stagePadding:10,//切口到元素的距离
 		stageRadius:5,//切口圆弧度
-		allowKeyboardControl:false,//控制是否可以键盘控制下一步
+		allowKeyboardControl:true,//控制是否可以键盘控制下一步
 		disableActiveInteraction:false,//是否禁用显示元素的交互
 		overlayOpacity:.4,
 		overlay: true,
@@ -228,7 +228,6 @@ function removeDiv(element){
 }
 
 const openGuide = () =>{
-	return//暂时关闭
 	let isTest = JSON.parse(getCookie('isTest'))
 	let isBeginner = JSON.parse(getCookie('isBeginner'))
 	// console.log(isBeginner);
diff --git a/src/tool/https.js b/src/tool/https.js
index eed2c4bf..955405bd 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -27,7 +27,6 @@ import store from '@/store';
 // }
 let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
 // let httpIp = process.env.NODE_ENV == 'development' ? "https://192.168.1.8:10086" : "";
-// console.log(httpIp,process.env.VUE_APP_BASE_URL,process.env.NODE_ENV);
 
 axios.defaults.baseURL = httpIp;   //配置接口地址
 // console.log(axios.defaults.baseURL);
@@ -250,7 +249,8 @@ export const Https = {
 		getAllUserId:`/api/inquiry/getAllUserId`,//获取所有用户id和Name
 		adminAddUser:`/api/inquiry/addUser`,//添加用户
 		modifyUser:`/api/inquiry/modifyUser`,//修改用户
- 
+		publishSysMessage:`/api/message/publishSysMessage`,//发布系统任务
+		
 
 		getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
 		getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表
@@ -268,6 +268,11 @@ export const Https = {
 		portfolioCommentPage:`/api/portfolio/commentPage`,//作品广场评论列表
 		commentDelete:`/api/portfolio/commentDelete`,//删除评论
 		porfolioDelete:`/api/portfolio/delete`,//删除作品
+		porfolioFollow:`/api/portfolio/follow`,//删除作品
+		porfolioFollow:`/api/portfolio/follow`,//关注
+		porfolioCancelFollow:`/api/portfolio/cancelFollow`,//取消关注
+		porfolioGetFolloweeList:`/api/portfolio/getFolloweeList`,//获取关注列表
+		porfolioGetFollowerList:`/api/portfolio/getFollowerList`,//获取粉丝列表
 		
 		//product生成
 		toProduct:`/api/history/toProduct`,//开始生成
@@ -292,6 +297,14 @@ export const Https = {
 
 		//调查问卷
 		questionnaire:`/api/account/questionnaire`,//保存画布
+
+		//消息系统
+		getUnreadCount:`/api/message/getUnreadCount`,//获取未读消息
+		setReadStatus:`/api/message/setReadStatus`,//设置消息已读
+		getHistoryNotification:`/api/message/getHistoryNotification`,//获取历史消息
+		oneClickRead:`/api/message/oneClickRead`,//全部设为已读
+		
+		
     },
 
     axiosGet(url,config) {
diff --git a/src/tool/myEvents.js b/src/tool/myEvents.js
new file mode 100644
index 00000000..2e854b69
--- /dev/null
+++ b/src/tool/myEvents.js
@@ -0,0 +1,16 @@
+
+class MyEvent{
+	static list = []
+	add(name,call){
+		MyEvent.list.push({name,call})
+	}
+	remove(name,call){
+		MyEvent.list.filter(item=>item.name!=name&&item.call!=call)
+	}
+	emit(name,data){
+		MyEvent.list.forEach(item => {
+			if(item.name == name)item.call(data)
+		});
+	}
+}
+export default new MyEvent()
\ No newline at end of file
diff --git a/src/tool/webSocket.js b/src/tool/webSocket.js
index 84596be7..44b1274f 100644
--- a/src/tool/webSocket.js
+++ b/src/tool/webSocket.js
@@ -1,11 +1,27 @@
+import MyEvent from "@/tool/myEvents";
 class MyWs {
 	constructor() {
 		this.ws = null;
 		// this.ws = new WebSocket();
+		let http = process.env.VUE_APP_BASE_URL.replace(/^https?:\/\//, '')
+		this.messageUrl = http+'/notification'
 	}
 	linkWs(url) {
+		console.log(this.ws && this.ws.readyState == 1);
 		if (this.ws && this.ws.readyState == 1) return
 		this.ws = new WebSocket(url)
+		this.ws.onmessage = (e)=>{
+			try {
+				MyWs.receiveText(JSON.parse(e.data))
+			} catch (error) {
+				console.error('websocket',error)
+			}
+		}
+		console.log(this.ws);
+	}
+	static receiveText(data,call){
+		console.log('receive',data);
+		MyEvent.emit('getMessage',data)
 	}
 	sendMessage(data) {
 		console.log(this);
@@ -43,4 +59,5 @@ class MyWs {
 		}
 	}
 }
-export default new MyWs();
\ No newline at end of file
+
+export default new MyWs()
\ No newline at end of file
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 8d2b90a5..80f3d560 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -149,7 +149,7 @@
     </div>
 </template>
 <script >
-import { defineComponent, createVNode, ref, computed } from "vue";
+import { defineComponent, createVNode, ref, computed, onMounted } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import payOrder from "@/component/Pay/payOrder.vue";
@@ -170,6 +170,7 @@ import { useI18n } from "vue-i18n";
 import { gsap, TweenMax,TweenLite } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import MyWs from "@/tool/webSocket";
+import MyEvent from "@/tool/myEvents";
 export default defineComponent({
     components: {
         VerificationCodeInput,
@@ -182,18 +183,10 @@ export default defineComponent({
 		navRouter,
     },
 	setup(){
-		let url = '127.0.0.1:3000'
-		MyWs.linkWs("ws://"+url)
-		console.log();
-		setTimeout(() => {
-			MyWs.sendMessage('aaaa')
-		}, 3000);
         const store = useStore();
 		const {t} = useI18n()
 		const {locale} = useI18n()
-		MyWs.ws.onmessage = (data)=>{
-			console.log(JSON.parse(data.data),232);
-		}
+		
 		let isTest = ref()
 		let isMurmur = ref()
 		let credits = computed(()=>{
@@ -228,7 +221,28 @@ export default defineComponent({
 		let messageNum = computed(()=>{
 			return store.state.UserHabit.messageSystem.messageNum
 		})
-		store.commit('setMessageSystem',{messageNum:22})
+		let getUnreadCount = ()=>{
+			Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
+				if(rv){
+					store.commit('setMessageSystem',rv)
+				}
+			})
+		}
+		MyWs.linkWs("ws://"+MyWs.messageUrl,'message')
+		let getWsMessage = (data)=>{
+			console.log(data);
+			store.commit('setMessageSystem',...data)
+		}
+		MyEvent.add('getMessage',getWsMessage)
+		// setTimeout(() => {
+		// 	MyWs.sendMessage('aaaa')
+		// }, 3000);
+		// MyWs.ws.onmessage = (data)=>{
+		// 	console.log(JSON.parse(data.data),232);
+		// }
+		onMounted(()=>{
+			getUnreadCount()
+		})
 		return {
 			store,
 			t,
diff --git a/vue.config.js b/vue.config.js
index 7d785355..1012f301 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -19,7 +19,7 @@ module.exports = defineConfig({
     //     changeOrigin: true, //是否允许跨越
     //   }
 		'/api':{
-			target:'http://192.168.1.9:5567',
+			target:'http://192.168.1.7:5567',
 			// target:'https://develop.api.aida.com.hk',
 			changeOrigin:true,
 		},