合并代码

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 {
+.homeMain_heade sup.ant-scroll-number.ant-badge-dot,
-  width: 100%;
+.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%;
 }

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;

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;
+			width: 15rem;
-			height: 20rem;
+			height: 15rem;
 			border-radius: 50%;
 		}
 		.accountEdit_page_head_upload{

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">邮箱: 2222</div>
-							<div class="modal_title_text_assistant">Credits: 2222</div>
 						</div>
 						<div class="content_item_user_left_detail_bottom">
 							<div>

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;
+			height: 80rem;
-			padding-bottom: 3rem;
+			// 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>

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_generalMessage_center modal_title_text">
-			<div class="account_comment_item">
+
-				<div class="account_comment_item_right">
+			<div class="account_generalMessage_item">
-					<div class="account_comment_item_right_img" @click="openOtherUsers">
+				<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_generalMessage_item_right_title">
-						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
-						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_generalMessage_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_works modal_title_text_intro">回复作品名</div>
 					</div>
 				</div>
-				<div class="account_comment_item_left">
+				<div class="account_generalMessage_item_left">
-					<div class="account_comment_item_left_delete modal_title_text_intro">
+					<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_generalMessage_item">
-				<div class="account_comment_item_right">
+				<div class="account_generalMessage_item_right">
-					<div class="account_comment_item_right_img">
+					<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_generalMessage_item_right_title">
-						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
-						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_generalMessage_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_works modal_title_text_intro">回复作品名</div>
 					</div>
 				</div>
-				<div class="account_comment_item_left">
+				<div class="account_generalMessage_item_left">
-					<div class="account_comment_item_left_delete modal_title_text_intro">
+					<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{
+	.account_generalMessage_item{
-		display: flex;
+		.account_generalMessage_item_right{
-		align-items: center;
+			display: flex;
-		justify-content: space-between;
+			align-items: center;
-		padding: 2rem 5rem;
+			margin-right: 1rem;
-		border-bottom: 1px solid #e9eaec;
+			.account_generalMessage_item_right_works{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+				cursor: pointer;
-		border: 1px solid #e9eaec;
+			}
-		border-radius: 5px;
+			.account_generalMessage_item_right_works:hover{
-		.account_comment_title_setting{
+				text-decoration: underline;
-			cursor: pointer;
+			}
+			.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{
+	.account_generalMessage_item:last-child{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		margin-bottom: 0;
-		border: 1px solid #e9eaec;
+		border-bottom: none;
-		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;
-		}
 	}
 }
 </style>

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_generalMessage_center modal_title_text">
-			<div class="account_like_item">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
-				<div class="account_like_item_right">
+				<a-badge :dot="item.isRead == 0"></a-badge>
-					<div class="account_like_item_right_img">
+				<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_generalMessage_item_right_title">
-						<div class="account_like_item_right_title_name">名字 <span>等人攒了你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.senderUserName }} <span>攒了你的作品</span></div>
-						<div>作品名字</div>
+						<div>{{ item.portfolioName }}</div>
 					</div>
 				</div>
-				<div class="account_like_item_left">
+				<div class="account_generalMessage_item_left">
-					<div class="account_like_item_left_delete modal_title_text_intro">
+					<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 class="modal_title_text_intro">{{ item.createTime }}</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>
 			</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([
+			dataList:[
-				{
+			]
-					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',
-				}
-			])
 		})
+		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{
+	.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;
-		.account_like_title_setting{
-			cursor: pointer;
-		}
 	}
-	.account_like_center{
+	.account_generalMessage_center{
-		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		.account_generalMessage_item{
-		border: 1px solid #e9eaec;
+			.account_generalMessage_item_right{
-		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{
 				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_generalMessage_item_right_title{
-					.account_like_item_right_title_name{
+					.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;
 		}

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_generalMessage_center modal_title_text">
-			<div class="account_newFollow_item">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
-				<div class="account_newFollow_item_right">
+				<a-badge :dot="item.isRead == 0"></a-badge>
-					<div class="account_newFollow_item_right_img">
+				<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="account_generalMessage_item_right_title">
-						<div class="">名字</div>
+						<div class="">{{ item.senderUserName }}</div>
-						<div class="modal_title_text_intro">2024-01-01 12:00:00 关注了你</div>
+						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
 					</div>
 				</div>
-				<div class="account_newFollow_item_left">
+				<div class="account_generalMessage_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>回关</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([
+			dataList: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',
-				}
 			])
 		})
-		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		let setmessageList = (data:any)=>{
-		// console.log(ws);
+			accountMessage.dataList = data.content
-		
+		}
-		// ws.onopen = ()=>{
+		let setRead = (item:any)=>{
-		// 	console.log(222);
+			emit('setReadStatus',item)
-		// 	let data = {
+			item.isRead = 1
-		// 		cmd:4, 
+		}
-		// 		data:{
+		let allRead = ()=>{
-		// 			msg:'222'
+			emit('setAllmessage')
-		// 		} 
+		}
-		// 	}
-		// 	ws.send(JSON.stringify(data))
-		// 	// ws.onmessage = (data)=>{
-		// 	// 	console.log(data); 
-		// 	// }
-		// }
-		// provide('exhibitionList',exhibitionList)
-		
 		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{
+	.account_generalMessage_center{
-		display: flex;
+		.account_generalMessage_item{
-		align-items: center;
+			.account_generalMessage_item_right{
-		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{
 				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;
 		}

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;

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_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
-			<div class="account_systemMessage_item_title">
+			<a-badge dot></a-badge>
-				<div>Open Call for International Young Fashion Talent</div>
+			<div class="account_generalMessage_item_title">
-				<div class="modal_title_text_intro">31 Aug 2024</div>
+				<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.
+				{{ item.content.content }}
-				<span class="account_systemMessage_item_link">网页链接</span>
+				<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')
+		let setmessageList = (data:any)=>{
-		// console.log(ws);
+			console.log(data);
-		
+			
-		// ws.onopen = ()=>{
+			data.content.forEach((item:any) => {
-		// 	console.log(222);
+				item.content = JSON.parse(item.content)
-		// 	let data = {
+			});
-		// 		cmd:4, 
+			accountMessage.dataList = data.content
-		// 		data:{
+		}
-		// 			msg:'222'
+		let setRead = (item:any)=>{
-		// 		} 
+			emit('setReadStatus',item)
-		// 	}
+		}
-		// 	ws.send(JSON.stringify(data))
+		let allRead = ()=>{
-		// 	// ws.onmessage = (data)=>{
+			emit('setAllmessage')
-		// 	// 	console.log(data); 
+		}
-		// 	// }
-		// }
 		// 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{
+	.account_generalMessage_item{
-		display: flex;
+		.account_generalMessage_item_title{
-		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{
 			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>

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>

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>

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})
             })
 			
         },

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) => {
+				let oldExportCanvas
-					Https.axiosPost(Https.httpUrls.exportSearch, data)
+				let localCanvas = localStorage.getItem('canvasContent')
-					.then((rv) => {
+				let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
-						resolve(rv)
+				oldExportCanvas = await new Promise((resolve, reject) => {
-					})
+					if(localUserlikeGroupId == userlikeGroupId){
-					.catch((rv) => {
+						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(!isSaveImg){
-				if(item.type == 'image'){
+				json.objects.forEach(item=>{
-					delete item.src
+					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,

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"

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=>{

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

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

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;

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:'评论',

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',

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:{

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{
+
+			}
+			
 		},
        
     },

src/tool/domTurnImg.js

@@ -1,50 +1,37 @@
 import html2canvas from "html2canvas";
 const getJpeg = dom =>{
-		return new Promise(resolve =>{
+	return new Promise(resolve =>{
-			setTimeout(() => {
+		setTimeout(() => {
-				html2canvas(dom,{useCORS: true,}).then(canvas =>{
+			html2canvas(dom,{useCORS: true,}).then(canvas =>{
-					let base64 = canvas.toDataURL('image/jpeg',.9);
+				let base64 = canvas.toDataURL('image/jpeg',.9);
-					// let quality = 0.9    // 压缩系数0-1之间
+				// let quality = 0.9    // 压缩系数0-1之间
-					let newImage = new Image()
+				let newImage = new Image()
-					newImage.src = base64
+				newImage.src = base64
-					newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
+				newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
-					// let imgWidth,
+				const filename = new Date().toISOString() + '.jpg';
-					// imgHeight
+				resolve(base64ToFile(base64,filename))
-					// let w = undefined
+				newImage.remove()
-					newImage.onload = function () {
+				// }
-					// w = this.width * 1
+			})
-					// imgWidth = this.width
+		}, 100);
-					// 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);
-		})
 	
+}
+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 base64ToFile = urlData =>{
-	const arr = urlData.split(',');
+// 	const arr = urlData.split(',');
-	const mime = arr[0].match(/:(.*?);/)[1]
+// 	const mime = arr[0].match(/:(.*?);/)[1]
-	const bytes = atob(arr[1])
+// 	const bytes = atob(arr[1])
-	let n = bytes.length;
+// 	let n = bytes.length;
-	const ia = new Uint8Array(n)
+// 	const ia = new Uint8Array(n)
-	while (n--){
+// 	while (n--){
-		ia[n] = bytes.charCodeAt(n);
+// 		ia[n] = bytes.charCodeAt(n);
-	}
+// 	}
-	return new File([ia],'jpeg',{type:mime})
+// 	return new File([ia],'jpeg',{type:mime})
-
+// }
-}
 export default getJpeg

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);

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) {

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()

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();
+
+export default new MyWs()

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,

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,
 		},