From eb5402394003df6c9f6dcd62495689b47d53495e Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Fri, 23 Aug 2024 10:19:02 +0800
Subject: [PATCH] fix

---
 .env.dev                                      |   2 +-
 src/assets/style/style.css                    |   7 +-
 src/assets/style/style.less                   |   7 +-
 src/component/Account/account.vue             |  94 +++-
 src/component/Account/accountEdit.vue         |  56 ++-
 src/component/Account/accountFollowFans.vue   | 122 ++++-
 src/component/Account/accountHome.vue         |  20 +-
 src/component/Account/accountMessage.vue      | 158 ++----
 src/component/Account/followFans/fans.vue     | 156 ++++++
 src/component/Account/followFans/follow.vue   | 157 ++++++
 src/component/Account/message/comment.vue     | 144 +++---
 src/component/Account/message/likeMessage.vue | 100 ++--
 src/component/Account/message/newFollow.vue   | 101 +++-
 src/component/Account/message/privateChat.vue |   2 +-
 src/component/Account/message/system.vue      |  77 ++-
 src/component/Account/otherUsers.vue          |  50 +-
 src/component/Administrator/TestClickData.vue |  52 +-
 src/component/Detail/editFrontBack.vue        | 469 ++++++++++++++++++
 src/component/Detail/setDesignItem.vue        |  14 +-
 src/component/Detail/setDesignItem2.vue       |  67 ---
 src/component/Detail/setDesignItemMobile.vue  |   1 +
 src/component/HomePage/Cropper.vue            |   7 +-
 src/component/HomePage/ExportModel.vue        |  25 +-
 src/component/HomePage/productImg.vue         |   3 +
 src/component/WorksPage/newScaleImage.vue     |  40 +-
 .../WorksPage/newScaleImageMobile.vue         |  22 +-
 src/router/index.ts                           |  15 +-
 src/store/userHabit/userHabit.ts              |  15 +-
 src/tool/https.js                             |   3 +-
 src/tool/util.js                              | 103 ++++
 src/views/HomeMain.vue                        |  34 +-
 src/views/HomeRecommend.vue                   |   5 +-
 src/views/HomeView/Works.vue                  |  25 +-
 src/views/LoginPage.vue                       |   7 +
 tsconfig.json                                 |   1 +
 35 files changed, 1709 insertions(+), 452 deletions(-)
 create mode 100644 src/component/Account/followFans/fans.vue
 create mode 100644 src/component/Account/followFans/follow.vue
 create mode 100644 src/component/Detail/editFrontBack.vue

diff --git a/.env.dev b/.env.dev
index dd58044b..51779256 100644
--- a/.env.dev
+++ b/.env.dev
@@ -6,6 +6,6 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 佩佩
-# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index c750b6c3..27ef28c5 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -1300,9 +1300,9 @@ li {
 }
 .homeMain_heade sup.ant-scroll-number,
 .account_message sup.ant-scroll-number {
-  height: 2rem;
+  height: 1.2rem;
   min-height: 5px;
-  width: 2rem;
+  width: 1.2rem;
   min-width: 5px;
   padding: 0;
   font-size: 1.1rem;
@@ -1322,12 +1322,13 @@ li {
   height: 100%;
   font-size: 1.2rem;
   display: flex;
+  transform: scale(0.7);
   align-items: center;
   justify-content: center;
 }
 .homeMain_heade p.ant-scroll-number-only-unit,
 .account_message p.ant-scroll-number-only-unit {
-  line-height: 2rem;
+  line-height: 1.2rem;
   height: 100%;
 }
 .modal_title_text {
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 7534dc75..9010b6bb 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -1437,9 +1437,9 @@ input:focus{
 		height: auto;
 	}
 	sup.ant-scroll-number{
-		height: 2rem;
+		height: 1.2rem;
 		min-height: 5px;
-		width: 2rem;
+		width: 1.2rem;
 		min-width: 5px;
 		padding: 0;
 		font-size: 1.1rem;
@@ -1457,12 +1457,13 @@ input:focus{
 			height: 100%;
 			font-size: 1.2rem;
 			display: flex;
+			transform: scale(.7);
 			align-items: center;
 			justify-content: center;
 		}
 	}
 	p.ant-scroll-number-only-unit{
-		line-height: 2rem;
+		line-height: 1.2rem;
 		height: 100%;
 	}
 }
diff --git a/src/component/Account/account.vue b/src/component/Account/account.vue
index f2f78a77..e7e57273 100644
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 					route:'/home/account/accountMessage',
 					icon:'fi-rr-envelope'
 				},{
-					name:'粉丝&关注',
+					name:'关注&粉丝',
 					route:'/home/account/accountFollowFans',
 					icon:'fi-rr-envelope'
 				},
@@ -147,3 +147,95 @@ export default defineComponent({
 	
 }
 </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;
+		margin-left: auto
+	}
+	.account_generalMessage_title_seach{
+		display: flex;
+		input{
+			padding-left: 1.5rem;
+			font-size: 1.4rem;
+		}
+		.search_icon_block{
+			background: #39215b;
+			color: #fff;
+			padding: .5rem 2rem;
+			font-size: 1.8rem;
+			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;
+}
+.page_loading_box{
+	text-align: center;
+	height: 50px;
+	.page_loading{
+		display: block;
+		width: 50px;
+		height: 50px;
+		margin: 0 auto;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/component/Account/accountEdit.vue b/src/component/Account/accountEdit.vue
index dd62ae60..9d955ea5 100644
--- a/src/component/Account/accountEdit.vue
+++ b/src/component/Account/accountEdit.vue
@@ -4,11 +4,9 @@
 			<div class="upload_item">
 				<div class="upload_file_item">
 					<a-upload
-						:action="uploadUrl + '/api/element/upload'"
 						:capture="null"
 						list-type="picture-card"
 						:before-upload="beforeUpload"
-						:headers="{Authorization:token}"
 						v-model:file-list="fileList"
 						:customRequest="function(){}"
 						:maxCount="1"
@@ -18,29 +16,28 @@
 						<div
 							class="upload_tip_block"
 						>
-							<i class="fi fi-br-upload"></i>
-							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+							<!-- <i class="fi fi-br-upload"></i> -->
+							<img :src="uploadUrl" alt="">
 						</div>
 					</a-upload>
 				</div>
 			</div>
-			<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" disabled value="123">
+					<input type="text" disabled :value="cookieUserInfo.userName">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
 				<div class="accountEdit_page_body_item_name">邮箱:</div>
 				<div class="accountEdit_page_body_item_inut">
-					<input type="text" disabled value="123">
+					<input type="text" disabled :value="cookieUserInfo.email">
 				</div>
 			</div>
 			<div class="accountEdit_page_body_item">
-				<div class="started_btn">
+				<div class="started_btn" @click="setSubmit">
 					Submit
 				</div>
 			</div>
@@ -49,7 +46,7 @@
     </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 { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
@@ -62,19 +59,24 @@ export default defineComponent({
     },
     setup() {
         const store = useStore();
-		let accountHomeData = reactive({
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
+		let accountHomeData:any = reactive({
             cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
-            uploadUrl:'',
+            uploadUrl:userInfo.value?.avatar,
+			uploadFile:undefined,
 			token:'',
 			fileList:[]
 		})
 		let Cropper = ref()
 		// provide('exhibitionList',exhibitionList)
 		let handleCropperSuccess = (event:any)=>{
-			console.log(event);
-			
             let {file, fileData,base64} =event
-			console.log(file,fileData);
+			accountHomeData.fileList[0].status = 'done'
+			accountHomeData.uploadUrl = base64
+			accountHomeData.uploadFile = file
             Cropper.value.closeCropper()
 		}
 		let beforeUpload=(file:any,fileList:any)=>{
@@ -126,13 +128,31 @@ export default defineComponent({
             //     this.fileList.splice(index, 1)
             // }
         }
+		let setSubmit = ()=>{
+			if(!accountHomeData.uploadFile)return
+			let param = new FormData(); 
+			param.append('file',accountHomeData.uploadFile);
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
+			.then((rv)=>{
+				let data = {
+					avatar : rv
+				}
+				store.commit("setUserInfo", data)
+				message.success('提交成功')
+			})
+
+		}
         return{
            ...toRefs(accountHomeData),
+		   userInfo,
+		   cookieUserInfo,
 		   Cropper,
 		   handleCropperSuccess,
 		   beforeUpload,
 		   fileUploadChange,
 		   deletUploadFile,
+		   setSubmit,
         }
     },
     data(){
@@ -156,15 +176,17 @@ export default defineComponent({
 			width: 15rem;
 			height: 15rem;
 			border-radius: 50%;
+			background: #fff;
 		}
 		.accountEdit_page_head_upload{
 			width: auto;
 		}
 		.upload_item{
-			position: absolute;
-			left: 0;
-			transform: translateX(-100%);
+			:deep(.ant-upload-list-picture-card-container){
+				display: none !important;
+			}
 		}
+		
 		margin-bottom: 5rem;
 	}
 	.accountEdit_page_body{
diff --git a/src/component/Account/accountFollowFans.vue b/src/component/Account/accountFollowFans.vue
index 3e0d01be..5f14c9cb 100644
--- a/src/component/Account/accountFollowFans.vue
+++ b/src/component/Account/accountFollowFans.vue
@@ -1,44 +1,110 @@
 <template>
-    <div class="account_message">
-		<div class="account_message_title modal_title_text">
+    <div class="account_followFans">
+		<div class="account_followFans_title modal_title_text">
 			<div class="">
-				消息中心
+				互动
 			</div>
-			<div class="account_message_title_setting">设置</div>
+			<div class="account_followFans_title_setting">设置</div>
 		</div>
-		<a-tabs class="account_message_body" v-model:activeKey="activeKey">
-			<a-tab-pane key="1" tab="系统消息">Content of Tab Pane 1</a-tab-pane>
-			<a-tab-pane key="2" tab="私信" force-render>Content of Tab Pane 2</a-tab-pane>
-			<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
-			<a-tab-pane key="4" 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 class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
+			<a-tab-pane v-for="item in messageList" :key="item.key">
+				<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
+				<fans v-if="item.key == 'fans'" :ref="item.key"></fans>
+				<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="3" tab="评论">
+				<comment></comment>
+			</a-tab-pane>
+			<a-tab-pane key="4" tab="点赞">
+				<likeMessage></likeMessage>
+			</a-tab-pane>
+			<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-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';
 import { useStore } from "vuex";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import follow from '@/component/Account/followFans/follow.vue'
+import fans from '@/component/Account/followFans/fans.vue'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
+		follow,
+		fans,
     },
     setup() {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
-			activeKey: ref('1'),
+			messageList:[
+				{
+					title:'关注的人',
+					key:'follow',
+				},
+				{
+					title:'粉丝',
+					key:'fans',
+				},
+				
+			],
+			activeKey: '',
 		})
-		// provide('exhibitionList',exhibitionList)
-		let setUserData = ()=>{
-			router.push({path:'/home/account/accountEdit'})
+		let domRefs:any = reactive({
+			follow:ref(null),
+			fans:ref(null),
+		})
+		let messageSystem = computed(()=>{
+			return store.state.UserHabit.messageSystem
+		})
+		let changeTabs = (key:any)=>{
 		}
+		let setReadStatus = (value:any)=>{
+			return new Promise((resolve,reject)=>{
+				if(value.isRead == 1)return reject('')
+				let data = {
+					type:accountMessage.activeKey,
+					notificationIdList:value.id
+				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setMessageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
+			})
+			
+		}
+		
+		onMounted(()=>{
+			let key = accountMessage.messageList[0].key
+			accountMessage.activeKey = key
+		})
         return{
            ...toRefs(accountMessage),
-		   setUserData,
+           ...toRefs(domRefs),
+		   messageSystem,
+		   setReadStatus,
+		   changeTabs,
         }
     },
     data(){
@@ -49,22 +115,29 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-.account_message{
+.account_followFans{
 	width: 100%;
-	.account_message_title{
+	.account_followFans_title{
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 2rem 5rem;
 		border-bottom: 1px solid #e9eaec;
-		.account_message_title_setting{
+		.account_followFans_title_setting{
 			cursor: pointer;
 		}
 	}
-	.account_message_body{
-		padding: 0rem 5rem;
+	.account_followFans_body{
+		padding-bottom: 3rem;
 		:deep(.ant-tabs-nav){
+			padding: 0rem 5rem;
 			.ant-tabs-nav-wrap{
+				.ant-tabs-tab-btn{
+					font-size: 2.4rem;
+				}
+				.ant-tabs-tab-btn:active{
+					color: #39215b;
+				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
 						color: #39215b;
@@ -79,6 +152,11 @@ export default defineComponent({
 				background: #39215b;
 			}
 		}
+		:deep(.ant-tabs-content){
+			height: 80rem;
+			// min-height: 80rem;
+			overflow-y: auto;
+		}
 	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/component/Account/accountHome.vue b/src/component/Account/accountHome.vue
index 8f4da02a..ce783fb3 100644
--- a/src/component/Account/accountHome.vue
+++ b/src/component/Account/accountHome.vue
@@ -4,19 +4,19 @@
 			<div class="content_item content_item_user">
 				<div class="content_item_user_left">
 					<div class="content_item_user_left_detail">
-						<img src="../../assets/images/homePage/alipay.svg" alt="">
+						<img :src="userInfo?.avatar" alt="">
 					</div>
 					<div class="content_item_user_left_detail">
 						<div class="modal_title_text">
-							<div>用户名</div>
-							<div class="modal_title_text_assistant">邮箱: 2222</div>
+							<div>{{ cookieUserInfo.userName }}</div>
+							<div class="modal_title_text_assistant"><span>邮箱: </span>{{ cookieUserInfo?.email }}</div>
 						</div>
 						<div class="content_item_user_left_detail_bottom">
 							<div>
-								<span>关注：</span>22
+								<span>关注：</span>{{ userInfo?.followeeCount }}
 							</div>
 							<div>
-								<span>粉丝：</span>22
+								<span>粉丝：</span>{{ userInfo?.followerCount }}
 							</div>
 						</div>
 					</div>
@@ -74,6 +74,14 @@ export default defineComponent({
     setup() {
 		const router = useRouter()
         const store = useStore();
+		let userInfo:any= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
+		let cookieUserInfo = ref(null)
+		if(getCookie('userInfo')){
+			let userInfo:any = getCookie('userInfo')
+			cookieUserInfo.value = JSON.parse(userInfo)
+		}
 		let accountHomeData = reactive({
 		})
 		// provide('exhibitionList',exhibitionList)
@@ -81,6 +89,8 @@ export default defineComponent({
 			router.push({path:'/home/account/accountEdit'})
 		}
         return{
+			userInfo,
+			cookieUserInfo,
            ...toRefs(accountHomeData),
 		   setUserData,
         }
diff --git a/src/component/Account/accountMessage.vue b/src/component/Account/accountMessage.vue
index 39db09dd..8b5bb155 100644
--- a/src/component/Account/accountMessage.vue
+++ b/src/component/Account/accountMessage.vue
@@ -8,11 +8,11 @@
 		</div>
 		<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>
+				<system v-if="item.key == 'system'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></system>
+				<privateChat v-if="item.key == 'privateChat'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></privateChat>
+				<comment v-if="item.key == 'comment'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></comment>
+				<likeMessage v-if="item.key == 'like'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></likeMessage>
+				<newFollow v-if="item.key == 'follow'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></newFollow>
 				<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
 				<template #tab>
 					<a-badge :count="messageSystem.messageType[item.key]" >
@@ -82,10 +82,11 @@ export default defineComponent({
 				},{
 					title:'新增粉丝',
 					key:'follow',
-				},{
-					title:'客服',
-					key:'service',
 				},
+				// {
+				// 	title:'客服',
+				// 	key:'service',
+				// },
 			],
 			activeKey: '',
 		})
@@ -104,57 +105,61 @@ export default defineComponent({
 			router.push({path:'/home/account/accountEdit'})
 		}
 		let changeTabs = (key:any)=>{
-			let data = {
-				page:1,
-				size:10,
-				type:key
-			}
-			getHistory(data)
+			// if(accountMessage.activeKey == 'service')return
 		}
 		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)
+			return new Promise((resolve,reject)=>{
+				if(value.isRead == 1)return reject('')
+				let data = {
+					type:accountMessage.activeKey,
+					notificationIdList:value.id
 				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setMessageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
 			})
+			
 		}
 		let setAllmessage = ()=>{
-			let data = {
-				type:accountMessage.activeKey
-			}
-			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
-
+			return new Promise((resolve,reject)=>{
+				let data = {
+					type:accountMessage.activeKey
+				}
+				Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
+					resolve(rv)
+				}).catch((err)=>{
+					reject(err
+					)
+				})
 			})
 		}
 		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)=>{
+			return new Promise((resolve,reject)=>{
+				data.type = accountMessage.activeKey
+				let url = Https.httpUrls.getHistoryNotification
+				if(data.type == 'follow'){
+					url = Https.httpUrls.porfolioGetFollowerList
+				}
+				Https.axiosPost(url,data).then((rv)=>{
 					if(rv){
-						console.log(domRefs[data.type][0],rv);
-						domRefs[data.type][0].setmessageList(rv)
+						// domRefs[data.type][0].setmessageList(rv,data)
+						console.log(rv);
+						
+						resolve(rv)
 					}
+				}).catch((err)=>{
+					reject(err)
 				})
 			})
-
 		}
 		onMounted(()=>{
 			let key = accountMessage.messageList[0].key
 			accountMessage.activeKey = key
-			let data = {
-				page:1,
-				size:10,
-				type:key
-			}
-			getHistory(data)
 		})
         return{
            ...toRefs(accountMessage),
@@ -164,6 +169,7 @@ export default defineComponent({
 		   setReadStatus,
 		   changeTabs,
 		   setAllmessage,
+		   getHistory,
         }
     },
     data(){
@@ -219,70 +225,4 @@ export default defineComponent({
 	}
 }
 </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/followFans/fans.vue b/src/component/Account/followFans/fans.vue
new file mode 100644
index 00000000..b20ac72c
--- /dev/null
+++ b/src/component/Account/followFans/fans.vue
@@ -0,0 +1,156 @@
+<template>
+    <div class="account_fans">
+		<div class="account_generalMessage_title modal_title_text">
+			<span class="account_generalMessage_title_seach">
+				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
+				<div class="search_icon_block" @click="searchFollowFansList">
+					<i class="icon iconfont icon-sousuo"></i>
+				</div>
+			</span>
+		</div>
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
+						<img :src="item.avatar" alt="">
+					</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_generalMessage_item_left">
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
+				</div>
+			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!getListData.isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
+				<span v-show="getListData.isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+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';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+	// emits:['setReadStatus','setAllmessage'],
+    props:[''],
+    setup(prop,{emit}) {
+		const router = useRouter()
+        const store = useStore();
+		let accountFollofFans:any = reactive({
+			getListData: {
+				page: 1,
+				size: 10,
+				seachContent:'',
+				isNoData: false,
+				isShowMark: false,
+			},
+			dataList:ref([
+				
+			])
+		})
+		let loadingDom:any = ref(null)
+		let searchFollowFansList = ()=>{
+			accountFollofFans.getListData.page = 1
+			getFollowFansList()
+		}
+		let getFollowFansList = ()=>{
+			accountFollofFans.getListData.isShowMark = true
+			let data = accountFollofFans.getListData
+			Https.axiosPost(Https.httpUrls.porfolioGetFollowerList,data).then((rv)=>{
+				if(rv){
+					accountFollofFans.getListData.isShowMark = false
+					if(rv.length == 0) {
+						accountFollofFans.getListData.isNoData = true
+						return
+					}
+					accountFollofFans.dataList = rv
+				}
+			}).catch(() => {
+				accountFollofFans.getListData.isShowMark = false
+				accountFollofFans.getListData.isNoData = true
+			})
+		}
+		
+		onMounted (()=>{
+			accountFollofFans.getListData.isNoData = false
+			accountFollofFans.getListData.page = 0
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountFollofFans.getListData.page+=1
+					getFollowFansList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
+		})
+        return{
+           ...toRefs(accountFollofFans),
+		   searchFollowFansList,
+		   getFollowFansList,
+		   loadingDom,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_fans{
+	width: 100%;
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
+				display: flex;
+				align-items: center;
+				.account_generalMessage_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			.account_generalMessage_item_left{
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+		}
+		.account_generalMessage_item:hover{
+			background: #ffffff;
+		}
+		.account_generalMessage_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>
diff --git a/src/component/Account/followFans/follow.vue b/src/component/Account/followFans/follow.vue
new file mode 100644
index 00000000..c9ebd3b4
--- /dev/null
+++ b/src/component/Account/followFans/follow.vue
@@ -0,0 +1,157 @@
+<template>
+    <div class="account_follow">
+		<div class="account_generalMessage_title modal_title_text">
+			<span class="account_generalMessage_title_seach">
+				<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
+				<div class="search_icon_block" @click="searchFollowFansList">
+					<i class="icon iconfont icon-sousuo"></i>
+				</div>
+			</span>
+		</div>
+		<div class="account_generalMessage_center modal_title_text">
+			<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
+				<a-badge :dot="item.isRead == 0"></a-badge>
+				<div class="account_generalMessage_item_right">
+					<div class="account_generalMessage_item_right_img">
+						<img :src="item.senderUserAvatar" alt="">
+					</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_generalMessage_item_left">
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
+				</div>
+			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!getListData.isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
+				<span v-show="getListData.isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+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';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+	// emits:['setReadStatus','setAllmessage'],
+    props:[''],
+    setup(prop,{emit}) {
+		const router = useRouter()
+        const store = useStore();
+		let accountFollofFans = reactive({
+			getListData: {
+				page: 1,
+				size: 10,
+				seachContent:'',
+				isNoData: false,
+				isShowMark: false,
+			},
+			dataList:ref([
+				
+			])
+		})
+		let loadingDom:any = ref(null)
+		let searchFollowFansList = ()=>{
+			accountFollofFans.getListData.page = 1
+			getFollowFansList()
+		}
+		let getFollowFansList = ()=>{
+			accountFollofFans.getListData.isShowMark = true
+			let data = accountFollofFans.getListData
+			Https.axiosPost(Https.httpUrls.porfolioGetFolloweeList,data).then((rv)=>{
+				if(rv){
+					accountFollofFans.getListData.isShowMark = false
+					if(rv.length == 0) {
+						accountFollofFans.getListData.isNoData = true
+						return
+					}
+					accountFollofFans.dataList = rv
+				}
+			}).catch(() => {
+				accountFollofFans.getListData.isShowMark = false
+				accountFollofFans.getListData.isNoData = true
+			})
+		}
+		
+		onMounted (()=>{
+			accountFollofFans.getListData.isNoData = false
+			accountFollofFans.getListData.page = 0
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountFollofFans.getListData.page+=1
+					getFollowFansList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
+		})
+        return{
+           ...toRefs(accountFollofFans),
+		   searchFollowFansList,
+		   getFollowFansList,
+		   loadingDom,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_follow{
+	width: 100%;
+	.account_generalMessage_center{
+		.account_generalMessage_item{
+			.account_generalMessage_item_right{
+				display: flex;
+				align-items: center;
+				.account_generalMessage_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			.account_generalMessage_item_left{
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+		}
+		.account_generalMessage_item:hover{
+			background: #ffffff;
+		}
+		.account_generalMessage_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>
diff --git a/src/component/Account/message/comment.vue b/src/component/Account/message/comment.vue
index 06a34746..5920e300 100644
--- a/src/component/Account/message/comment.vue
+++ b/src/component/Account/message/comment.vue
@@ -1,46 +1,38 @@
 <template>
     <div class="account_comment">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>收到的评论</span>
+			<!-- <span>收到的评论</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
 
-			<div class="account_generalMessage_item">
+			<div class="account_generalMessage_item" v-for="item in dataList" @click="setRead(item)">
+				<a-badge :dot="item.isRead == 0"></a-badge>
 				<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 class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
+						<img :src="item.avatar" alt="">
 					</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 class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>回复你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
+						<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
 					</div>
 				</div>
 				<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 class="modal_title_text_intro">{{ item.createTime }}</div>
 				</div>
 			</div>
-			<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_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_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 class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
 			</div>
 		</div>
     </div>
@@ -56,56 +48,92 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-    setup() {
+    props:['setReadStatus','setAllmessage','getHistory'],
+    setup(prop,{emit}) {
+		
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			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',
-				}
-			])
+			dataList:[
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		// 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 openOtherUsers = ()=>{
+		let loadingDom:any = ref(null)
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
+		}
+		let setRead = (item:any)=>{
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
+		}
+		let allRead = ()=>{
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let openOtherUsers = (item:any)=>{
 			const routeUrl = router.resolve({
 				path:'/home/otherUsers',
 				query:{
-					id:123
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
+		let openOtherWork = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/works',
+				query:{
+					workId:item.portfolioId
 				}
 			})
 			window.open(routeUrl.href,'_blank')
 		}
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
+		   setmessageList,
+		   setRead,
+		   allRead,
 		   openOtherUsers,
+		   openOtherWork,
+		   loadingDom,
         }
     },
     data(){
diff --git a/src/component/Account/message/likeMessage.vue b/src/component/Account/message/likeMessage.vue
index 861a9aa9..2fc7ac16 100644
--- a/src/component/Account/message/likeMessage.vue
+++ b/src/component/Account/message/likeMessage.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="account_like">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>点赞</span>
+			<!-- <span>点赞</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<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 class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
+						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="account_generalMessage_item_right_title_name">{{ item.senderUserName }} <span>攒了你的作品</span></div>
+						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>攒了你的作品</span></div>
 						<div>{{ item.portfolioName }}</div>
 					</div>
 				</div>
@@ -23,6 +23,15 @@
 					<div class="modal_title_text_intro">{{ item.createTime }}</div>
 				</div>
 			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
 		</div>
     </div>
 </template>
@@ -37,50 +46,83 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
+	// emits:['setReadStatus','setAllmessage'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
 			dataList:[
-			]
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
-			accountMessage.dataList = data.content
+		let loadingDom:any = ref(null)
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
-			item.isRead = 1
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let openOtherUsers = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
 		}
-		// 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)
 		
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   openOtherUsers,
+		   loadingDom,
         }
     },
     data(){
diff --git a/src/component/Account/message/newFollow.vue b/src/component/Account/message/newFollow.vue
index a9f82ab0..0835ad95 100644
--- a/src/component/Account/message/newFollow.vue
+++ b/src/component/Account/message/newFollow.vue
@@ -1,25 +1,35 @@
 <template>
     <div class="account_newFollow">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>新增粉丝</span>
+			<!-- <span>新增粉丝</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<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 class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
+						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.senderUserName }}</div>
+						<div class="">{{ item.userName }}</div>
 						<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
-					<div>回关</div>
+					<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
+					<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
 				</div>
 			</div>
+			<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
+				没有任何信息~
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
 		</div>
     </div>
 </template>
@@ -34,33 +44,96 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
+	// emits:['setReadStatus','setAllmessage'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
-			dataList:ref([
+			dataList:[
 				
-			])
+			],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
-			accountMessage.dataList = data.content
+		let loadingDom:any = ref(null)
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				accountMessage.dataList = rv
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
-			item.isRead = 1
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
+		}
+		let setFollow = (item:any) =>{
+			let url = Https.httpUrls.porfolioFollow
+			if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			Https.axiosGet(url, {params:{followeeId:item.senderId}})
+			.then((rv) => {
+				if(item.isFollow == 1){
+					item.isFollow = 0
+				}else{
+					item.isFollow = 1
+				}
+			})
+		}
+		let openOtherUsers = (item:any)=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:item.senderId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
 		}
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   setFollow,
+		   openOtherUsers,
+		   loadingDom,
         }
     },
     data(){
diff --git a/src/component/Account/message/privateChat.vue b/src/component/Account/message/privateChat.vue
index 9bdf0865..3cb3f10b 100644
--- a/src/component/Account/message/privateChat.vue
+++ b/src/component/Account/message/privateChat.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="account_privateChatMessage">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>私信</span>
+			<!-- <span>私信</span> -->
 			<div class="account_generalMessage_title_setting">全部已读</div>
 		</div>
 		<div class="account_privateChatMessage_content">
diff --git a/src/component/Account/message/system.vue b/src/component/Account/message/system.vue
index 34d73853..8185f675 100644
--- a/src/component/Account/message/system.vue
+++ b/src/component/Account/message/system.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>系统消息</span>
+			<!-- <span>系统消息</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</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>
+			<a-badge :dot="item.isRead == 0"></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>
@@ -15,6 +15,15 @@
 				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
 			</div>
 		</div>
+		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
+			没有任何信息~
+		</div>
+		<div class="page_loading_box" v-show="!isNoData">
+			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+			<span v-show="isShowMark">
+				<a-spin size="large" />
+			</span>
+		</div>
     </div>
 </template>
 <script lang="ts">
@@ -28,38 +37,74 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
-    props:{
-    },
+	// emits:['putListData'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			dataList: [],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
-			console.log(data);
-			
-			data.content.forEach((item:any) => {
-				item.content = JSON.parse(item.content)
-			});
-			accountMessage.dataList = data.content
+		let loadingDom:any = ref(null)
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				rv.content.forEach((item:any) => {
+					item.content = JSON.parse(item.content)
+				});
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
 		}
 		// provide('exhibitionList',exhibitionList)
-		
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   loadingDom,
         }
     },
     data(){
diff --git a/src/component/Account/otherUsers.vue b/src/component/Account/otherUsers.vue
index 061454bb..cc3c3dd8 100644
--- a/src/component/Account/otherUsers.vue
+++ b/src/component/Account/otherUsers.vue
@@ -5,34 +5,34 @@
 		</div>
 		<div class="otherUsers_userDetail">
 			<div class="otherUsers_userDetail_img">
-				<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+				<img :src="userContent.avatar" alt="">
 			</div>
 			<div class="otherUsers_userDetail_center">
 				<div class="otherUsers_userDetail_center_name modal_title_text">
-					<div>用户名</div>
+					<div>{{ userContent.userName }}</div>
 					<div class="userDetail_center_name_left">关注</div>
 				</div>
 				<div class="otherUsers_userDetail_center_data">
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>99999</div>
+						<div>{{ userContent.homepageViewCount }}</div>
 						<span class="modal_title_text_intro">访问量</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>123</div>
+						<div>{{ userContent.portfolioCount }}</div>
 						<span class="modal_title_text_intro">作品</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>999</div>
+						<div>{{ userContent.followerCount }}</div>
 						<span class="modal_title_text_intro">粉丝</span>
 					</div>
 					<div class="userDetail_center_data_item modal_title_text">
-						<div>22</div>
+						<div>{{ userContent.followeeCount }}</div>
 						<span class="modal_title_text_intro">关注</span>
 					</div>
 				</div>
 				<div class="otherUsers_userDetail_center_signature">
 					<div class="modal_title_text">
-						<div class="modal_title_text_intro">个性签名个性签名个性签名</div>
+						<!-- <div class="modal_title_text_intro">个性签名个性签名个性签名</div> -->
 					</div>
 				</div>
 			</div>
@@ -62,28 +62,26 @@ export default defineComponent({
 		const router:any = useRouter()
         const store = useStore();
 		let otherUsers = reactive({
-			userId:'0'
+			userId:'0',
+			userContent:{}
 		})
-		// 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 getUserDetail = (id:any)=>{
+			let data = {
+				id:id
+			}
+			Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
+				if(rv){
+					otherUsers.userContent = rv
+				}
+			})
+			
+		}
+
 		onMounted (()=>{
-			otherUsers.userId = router.currentRoute.value.query?.id
+			otherUsers.userId = router.currentRoute.value.query?.userId
 			// alert()
+			getUserDetail(otherUsers.userId)
+
 		})
         return{
            ...toRefs(otherUsers),
diff --git a/src/component/Administrator/TestClickData.vue b/src/component/Administrator/TestClickData.vue
index 02ad7abf..d6e42e16 100644
--- a/src/component/Administrator/TestClickData.vue
+++ b/src/component/Administrator/TestClickData.vue
@@ -6,7 +6,7 @@
 				<div class="admin_state_item">
 					<span>Start Date:</span>
 					<a-range-picker
-						style="width:280px"
+						style="width:250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
 						:placeholder="[
@@ -24,9 +24,31 @@
 				</div>
 				<div class="admin_state_item">
 					<span>Start Time:</span>
-						<a-time-range-picker style="width:280px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
+						<a-time-range-picker style="width:250px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
 				</div>
-
+				<div class="admin_state_item">
+                    <span>Email:</span>
+                    <input
+                        v-model="email"
+                        placeholder="Please enter email"
+                        @keydown.enter="gettrialList"
+                        type="text"
+                        style="width: 250px"
+                    />
+                </div>
+				<div class="admin_state_item">
+                    <span>User Name:</span>
+                    <a-select
+                        v-model:value="ids"
+                        mode="multiple"
+                        style="width: 250px"
+                        :filter-option="filterOption"
+                        placeholder="Select Item..."
+                        max-tag-count="responsive"
+                        :options="allUserList"
+                        @keydown.enter="gettrialList"
+                    ></a-select>
+                </div>
 			</div>
 			<div class="admin_search">
 				<div class="admin_search_item" @click="searchHistoryList">Search</div>
@@ -178,15 +200,26 @@ export default defineComponent({
             ];
         });
 
+        let allUserList: any = ref([]);
+		let ids = ref([])
+		let email = ref('')
         let dataList: any = ref([]);
         let status: any = ref(0);
+		let filterOption = (input: any, option: any) => {
+            // 使用 option.label 进行搜索
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        };
         return {
             rangePickerValue,
 			rangeTimeValue,
             columns,
             dataList,
+			allUserList,
+			ids,
+			email,
             renameData,
             status,
+			filterOption,
         };
     },
     data() {
@@ -204,6 +237,10 @@ export default defineComponent({
         let historyTable: any = this.$refs.historyTable;
         this.historyTableHeight = historyTable.clientHeight - 200;
         this.gettrialList();
+		let allUserList: any = sessionStorage.getItem("allUserList");
+		if (allUserList) {
+			this.allUserList = JSON.parse(allUserList);
+		}
     },
     methods: {
         //改变页码
@@ -233,9 +270,12 @@ export default defineComponent({
             let endDate: any = this.rangePickerValue[1]
                 ? this.rangePickerValue[1]+' '+endTime
                 : "";
+			let ids = this.ids.join(',')
 			let data = {
 				endTime:endDate,
 				startTime:startDate,
+				ids:ids,
+				email:this.email,
 			}
 			Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
 				if (rv) {
@@ -274,3 +314,9 @@ export default defineComponent({
     },
 });
 </script>
+<style lang="less" scoped>
+.admin_page .admin_table_search .admin_state {
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/editFrontBack.vue b/src/component/Detail/editFrontBack.vue
new file mode 100644
index 00000000..14c676ee
--- /dev/null
+++ b/src/component/Detail/editFrontBack.vue
@@ -0,0 +1,469 @@
+<template>
+	<div class="editFrontBack_center">
+		<div class="exportCanvasBox_center">
+			<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
+				<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
+					<div>新增</div>
+				</div> -->
+				<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+				<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
+				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
+				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
+				<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
+				<div @click="setSubmit">保存</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { Https } from "@/tool/https";
+import { formatTime,segmentImage } from "@/tool/util";
+import { setCookie, getCookie } from "@/tool/cookie";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import allOrder from "@/component/Pay/allOrder.vue";
+import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+		creditsDetail,
+		allOrder,
+    },
+	// emits: ['setSloganData'],
+	props:['patchData','imgDomIndex'],
+    setup(props,{emit}) {
+        let presentState = ref('paypal');
+        let loadingShow = ref(false);
+        let { t } = useI18n();
+        let canvas = reactive({});
+		let ratio = [1,1]
+		let exportWH = 0
+		let imgDomIndex = 0
+		// let a = computed(()=>{
+		// 	console.log(123);
+		// 	return props.patchData
+		// })
+		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
+			imgDomIndex = newVal
+			console.log(newVal,oldVal)
+			console.log(props.patchData);
+			props.patchData.front.imageUrl=  ''
+			init(props.patchData.front[newVal],'')
+		})
+		let canvasBtn = reactive({
+			canvasState:'move',
+			canvasPencilWidth:{
+				pencil:4,
+				eraser:4,
+			},
+			spreadState:false,
+		})
+		let canvasWH = ref(0);
+		
+		let exportUrl = ''
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
+		let canvasState = ref()//存放canvas操作
+		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+		let init = (data,index)=>{
+			loadingShow.value = true
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
+			ratio = [1,1]
+			nextTick(()=>{
+				let canvasBox = document.querySelector(".exportCanvasBox_center");
+				let height = canvasBox.offsetHeight;
+				canvasBox.style.width = height+'px'
+				canvasWH.value = height
+				var canvasDom = document.createElement("canvas");
+				document.addEventListener("keydown", canvasKeyDown);
+				document.addEventListener("keyup", canvasKeyUp);
+				
+
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+				if(oldCanvasDom)oldCanvasDom.remove()
+				if(oldCanvasDom1)oldCanvasDom1.remove()
+				canvasBox.appendChild(canvasDom);
+				let img = new Image();
+				img.onload = function(){
+					let wScale = 1
+					let hScale = 1
+					let styleWidth = Number(data.style.width.split('px')[0])
+					let styleHeight = Number(data.style.height.split('px')[0])
+					if(styleWidth>styleHeight){
+						hScale = styleHeight/styleWidth
+						exportWH = img.width
+					}else{
+						wScale = styleWidth/styleHeight
+						exportWH = img.height
+					}
+					ratio = [wScale,hScale]
+					canvas = new fabric.Canvas(canvasDom, {
+						width: canvasWH.value * wScale,
+						height: canvasWH.value * hScale,
+						isDrawingMode: false, // 开启绘图模式
+					});
+					JSchangeType(canvas,'init')
+					
+					fabric.Object.prototype.cornerSize = 10
+					fabric.Object.prototype.transparentCorners = false 
+					exportUrl = data.imageUrl
+					fabric.Image.fromURL(data.imageUrl, function(img) {
+						// 设置背景图对象的宽度和高度与 canvas 相同
+						img.scaleToWidth(canvas.width);
+						img.scaleToHeight(canvas.height);;
+						img.set({
+							// width: canvas.width,
+							// height: canvas.height,
+							// scaleX:2,
+							// scaleY:1,
+							scaleX: canvas.width / img.width,
+							scaleY: canvas.height / img.height
+						});
+						// 将背景图添加到 canvas 的底层
+						// canvas.add(img);
+						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+						if(!fabric.Object.prototype.controls.deleteControl){
+							JSSetRemoveImage(deleteObj)
+						}else{
+							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+						}
+						updateCanvasState()
+						loadingShow.value = false
+					},{ crossOrigin: "Anonymous" });
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+							console.log(event);
+							if(canvasBtn.canvasState != 'move'){
+							updateCanvasState('mouseUp')
+						}
+					});
+
+					//画布上移动
+					canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.add(brushIndicator)
+					setOperation('pencil')
+					img.remove()
+				}
+				img.src = data.imageUrl
+				
+			})
+        }
+		let canvasKeyDown = (event) => {
+			if(keyDown.indexOf(event.key)>-1){
+			}else{
+				keyDown.push(event.code)
+				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+					historyState('reverse')
+				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
+					historyState('')
+				}
+			}
+		}
+		let canvasKeyUp = (event) =>{
+				keyDown = keyDown.filter(function(item) {
+					return event.code !== item;
+				})
+				
+			}
+		let clearCanvas = ()=>{
+		    canvasBtn.canvasState = 'move'
+		    canvasBtn.spreadState = false
+			document.removeEventListener("keydown", canvasKeyDown);
+			document.removeEventListener("keyup", canvasKeyUp);
+		}
+		let rgba = 'rgba(0, 0, 0, 1)'
+		let brushIndicator = new fabric.Circle({
+			radius:2,
+			fill: 'rgba(0, 0, 0, 0)',
+			stroke: '#000',
+			strokeWidth: 1,
+			originX: 'center',
+			originY: 'center',
+			visible :true,
+			// left: -100,
+			// top: -100,
+			erasable: false,
+		});
+
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				if(!canvas.contains(brushIndicator)){
+					canvas.add(brushIndicator)
+					brushIndicator.set({// left:0,
+						// top:0,
+						radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
+					})
+					canvas.bringToFront(brushIndicator);//设置优先级最高
+				}
+				// brushIndicator.fill = canvasPencilColor.value
+				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+			}
+			canvas.requestRenderAll()
+		}
+		let setOperation = (str)=>{
+			canvasBtn.canvasState = str
+			if(str == 'move'){
+				setMove()
+				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+			}else if(str == 'pencil'){
+				setPencil()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				
+			}else if(str == 'eraser'){
+				setEraser()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+			}
+		}
+		let setMove = ()=>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setPencil = ()=>{
+			canvas.isDrawingMode = true//开启绘画模式
+			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+			canvas.freeDrawingBrush.color = rgba
+			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.isEraser = false
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#fff'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+		}
+		let deleteObj = ()=> {
+			// if(!canvas.getActiveObjects()){
+			// 	return
+			// }
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
+		let setTimeOutWidth
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOutWidth)
+			setTimeOutWidth = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
+			},300)
+		}
+		let updateCanvasState = (str) =>{
+			if(str != 'mouseUp'){
+				canvas.remove(brushIndicator)
+			}
+			const canvasAsJson = JSON.stringify(canvas.toJSON());
+			normalCanvasState.value.push(canvasAsJson);
+		}
+		//撤回
+		let historyState = (str)=> {
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
+				let obj = reverseCanvasState.value.pop()
+				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				canvasState.value = obj 
+				normalCanvasState.value.push(obj);
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
+			}else{
+				return
+			}
+			canvas.loadFromJSON(canvasState.value, () => {});
+		}
+		let setSubmit = ()=>{
+			let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
+			let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
+			let size = {
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+			}
+			segmentImage(mark,full,size).then((rv)=>{
+				console.log(rv);
+
+			})
+			return
+			var allObjects = canvas.getObjects('path');
+			var canvasDom = document.createElement("canvas");
+			let exportCanvas = new fabric.Canvas(canvasDom, {
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+				isDrawingMode: false, // 开启绘图模式
+			});
+			canvas.backgroundImage.clone((back)=>{
+				back.scaleToWidth(exportCanvas.width);
+				back.scaleToHeight(exportCanvas.height);
+				back.set({
+					scaleX: exportCanvas.width / back.width,
+					scaleY: exportCanvas.height / back.height
+				})
+				let scale = exportCanvas.height/canvas.height
+				exportCanvas.backgroundImage = back
+				allObjects.forEach((item,index)=>{
+					// let obj = fabric.util.object.clone(item);
+					if(item.type == 'circle')return
+					let obj 
+					item.clone((cloned)=>{
+						obj = cloned
+					})
+					obj.set(
+						{
+							scaleX:(item.scaleX?item.scaleX:1)*scale,
+							scaleY:(item.scaleY?item.scaleY:1)*scale,
+							left:item.left*scale,
+							top:item.top*scale,
+						}
+					)
+					exportCanvas.add(obj)
+					
+				})
+				let data = exportCanvas.toDataURL('png')
+				cancelDsign()
+				clearCanvas()
+				console.log(data);
+				props.patchData.front[imgDomIndex].imageUrl = data
+					// emit('setSloganData',data)
+				
+			})
+		}
+		let cancelDsign = ()=>{
+			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('keyup', canvasKeyUp);
+		}
+        return {
+            presentState,
+			loadingShow,
+            t,
+			...toRefs(canvasBtn),
+			init,
+			setOperation,
+			setPencilWidth,
+			historyState,
+			setSubmit,
+			cancelDsign,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+    },
+});
+</script>
+<style lang="less" scoped>
+.editFrontBack_center{
+	position: relative;
+	// width: calc(512px / 2);
+	// width: 256px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	// height: calc(512px / 2);
+	margin: 0 auto;
+	.editFrontBack_center_item{
+		// position: relative;
+		background: #fff;
+		position: absolute;
+		
+		display: flex;
+		border: 0.2rem solid #c4c4c4;
+		width: 25rem;
+		border-radius: 4px; /* 设置圆角半径 */
+		flex-wrap: wrap;
+		.editFrontBack_center_btn_item{
+			display: flex;
+			align-items: center;
+			padding: 1rem 0;
+		}
+	}
+	.exportCanvasBox_center{
+		height: 100%;
+		flex: 1;
+		position: relative;
+		margin: 0 auto;
+		overflow: hidden;
+		background: #e6e6e6;
+		// overflow: scroll;
+		.editFrontBack_center_btn{
+			z-index: 2;
+			left: 50%;
+			transform: translate(-50%,-135%);
+			transition: all .3s;
+			padding: 1rem 1.5rem;
+			// position: relative;
+			input{
+				width: 100%;
+				margin-top: 1rem;
+			}
+			.icon-xiala{
+				position: absolute;	
+				width: 2rem;
+				bottom: 0;
+				transform: translate(-50%, 90%);
+				left: 50%;
+				width: 6rem;
+				background: #fff;
+				text-align: center;
+				cursor: pointer;
+				&.icon-xiala::before{
+					transition: all .3s;
+				}
+				&.btnRotate::before{
+					transform: rotate(180deg);
+					display: block;
+				}
+			}
+			i{
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 4rem;
+				height: 4rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+			}
+			&.spread{
+				transform: translate(-50%,0);
+			}
+		}
+		:deep(.canvas-container){
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%,-50%);
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+		}
+	}
+	.exportCanvasBox_center:hover{
+		.editFrontBack_center_btn{
+			transform: translate(-50%,-101%);
+			&.spread{
+				transform: translate(-50%,0);
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index 5c6df0e3..14e125e3 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -41,6 +41,9 @@
 		</div>
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
 	</div>
+	<div class="design_compile_content">
+		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex"></editFrontBack>
+	</div>
 	
 </template>
 
@@ -50,8 +53,12 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
 import { useStore } from "vuex";
 // import { Modal,message } from 'ant-design-vue';
 import { Https } from "@/tool/https";
+import editFrontBack from '@/component/Detail/editFrontBack.vue'
+
 export default defineComponent({
     // props: ["frontBack"],
+	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
+	components:{editFrontBack},
     setup(prop) {
         const store = useStore();
 
@@ -191,8 +198,6 @@ export default defineComponent({
 				}
 				this.printZIndex++
 			})
-			let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
 			body.style = {
 				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
 				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
@@ -520,6 +525,9 @@ export default defineComponent({
 	flex-direction: column;
 	height: 100%;
 	width: 100%;	
+	width: 50%;
+	position: relative;
+	overflow: hidden;
 	.designOpenrtion_centent{
 		// flex: 1;
 		height: 100%;
@@ -530,10 +538,8 @@ export default defineComponent({
 		margin: 0 auto;
 		// overflow: hidden;
 		justify-content: space-between;
-		position: relative;
 		user-select:none;
 		z-index: 2;
-		position: relative;
 		&.active{
 			flex-direction: row;
 		}
diff --git a/src/component/Detail/setDesignItem2.vue b/src/component/Detail/setDesignItem2.vue
index 2924d878..55ca8e60 100644
--- a/src/component/Detail/setDesignItem2.vue
+++ b/src/component/Detail/setDesignItem2.vue
@@ -296,73 +296,6 @@ export default defineComponent({
 		init(){
 			this.setImgSize()
 		},
-		// async setImgSize(){
-		// 	let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-		// 	let front = []
-		// 	let back = []
-		// 	let body
-			
-		// 	designItemDetail.others.forEach((item) => {
-		// 		if(item.type == 'Body'){
-		// 			body = item
-		// 		}
-		// 	});
-		// 	let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
-		// 	let frontIndex = 6
-		// 	let backIndex = 3
-		// 	// let front = 3
-		// 	// let back = 3
-		// 	designItemDetail.clothes.forEach((v,index)=>{
-		// 		for (let i = v.layersObject.length-1; i >= 0; i--) {
-		// 			v.layersObject[i].style = {
-		// 				top:v.layersObject[i].position?.[0]*ratio+'px',
-		// 				left:v.layersObject[i].position?.[1]*ratio+'px',
-		// 				width:v.layersObject[i].imageSize?.[0]*ratio+'px',
-		// 				height:v.layersObject[i].imageSize?.[1]*ratio+'px',
-		// 				// zIndex:zIndex-=1
-		// 			}
-		// 			v.layersObject[i].centers={
-		// 				left:0,
-		// 				top:0,
-		// 			}
-		// 			v.scale = ratio
-		// 			v.layersObject[i].designOpenrtionBtn = false
-		// 			if(v.layersObject[i].imageCategory.indexOf("back") == -1){
-		// 				front[index] = v.layersObject[i]
-		// 				front[index].style.zIndex = v.priority
-		// 				front[index].id = v.id
-		// 			}else{
-		// 				back[index] = v.layersObject[i]
-		// 				back[index].style.zIndex = v.priority
-		// 				back[index].id = v.id
-
-		// 				// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
-		// 			}
-		// 			if(this.printZIndex < v.priority){
-		// 				this.printZIndex = v.priority
-		// 			}
-		// 		}
-		// 		this.printZIndex++
-		// 	})
-		// 	let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
-		// 	body.style = {
-		// 		width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-		// 		height:body.layersObject[0].imageSize?.[1]*ratio+'px',
-		// 	}
-		// 	this.frontBack = {
-		// 		front:front,
-		// 		back:back,
-		// 		body:body,
-		// 	}
-		// 	this.frontBackOld = JSON.parse(JSON.stringify({
-		// 		front:front,
-		// 		back:back,
-		// 		body:body,
-		// 	}))
-		// 	this.setCanvas(this.frontBack)
-		// },
-		
 		
 		//按比设置单件衣服宽高位置
 		async setPostition(url){
diff --git a/src/component/Detail/setDesignItemMobile.vue b/src/component/Detail/setDesignItemMobile.vue
index 978ccef0..99356b23 100644
--- a/src/component/Detail/setDesignItemMobile.vue
+++ b/src/component/Detail/setDesignItemMobile.vue
@@ -47,6 +47,7 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 export default defineComponent({
     // props: ["frontBack"],
+	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
     setup(prop) {
         const store = useStore();
 
diff --git a/src/component/HomePage/Cropper.vue b/src/component/HomePage/Cropper.vue
index e5749a5a..5bf812e9 100644
--- a/src/component/HomePage/Cropper.vue
+++ b/src/component/HomePage/Cropper.vue
@@ -29,7 +29,8 @@
                         :outputSize="option.size"
                         :outputType="option.outputType"
                         :auto-crop="option.autoCrop"
-						:fixedBox="isRound"
+						:fixedBox="!isRound"
+                        :fixed="isRound"
                         :auto-crop-width="option.autoCropWidth"
                         :auto-crop-height="option.autoCropWidth"
                         :center-box="option.centerBox"
@@ -40,8 +41,8 @@
                 <div class="cur_picture_opterate">
                     <div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
                     <div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
-                    <div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
-                    <div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
+                    <div class="cur_picture_opterate_item" @click="changeScale(-.1)"><span class="operate_icon icon_font">-</span></div>
+                    <div class="cur_picture_opterate_item" @click="changeScale(.1)"><span class="operate_icon icon_font">+</span></div>
                     <div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
                 </div>
             </div>
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index 7d8fa630..f1f9068c 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -530,6 +530,9 @@ export default defineComponent({
 												resolve();
 											} else {
 												let itemCanvasImg = allItem.imgUrl;
+												if(item == 'FinalizeImage'){
+													console.log(allItem);
+												}
 												if (key == "likeDesignCollectionList") {
 													
 													itemCanvasImg =
@@ -700,28 +703,12 @@ export default defineComponent({
 			return imgWidth
 		}
 		let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
+			console.log(img,key,data,imgWidth);
 			// data
+			if(key == 'likeDesignCollectionList' || key == 'FinalizeImage')imgWidth = setImageWidth(key,data.designOutfitUrl); 
+
 			let imgId = 0
 			let minioUrl = ''//表示收藏或者generate
-			// if(key == 'likeDesignCollectionList'){
-			// 	imgId = data.designOutfitId
-			// 	minioUrl = data.url
-			// }else if(key == 'upImgFiles'){
-			// 	imgId = data
-			// 	minioUrl = data.url
-			// }else if(key == 'FinalizeImage'){
-			// 	imgId = data.id
-			// 	let url = data.imgUrl.split('?')[0]
-			// 	var match = url.match(/:(\d+)\/(.*)/);
-			// 	minioUrl = match[2]
-			// }else if(key == 'disposeMoodboard'){
-			// 	let url = data.imgUrl.split('?')[0]
-			// 	var match = url.match(/:(\d+)\/(.*)/);
-			// 	minioUrl = match[2]
-			// 	// data.imgUrl
-			// }else{
-			// 	minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
-			// }
 			let imgUrl = data.imgUrl
 			if (key == "likeDesignCollectionList") {
 				imgUrl = data.designOutfitUrl;
diff --git a/src/component/HomePage/productImg.vue b/src/component/HomePage/productImg.vue
index ecb1a7e0..dc5b5831 100644
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -80,6 +80,7 @@
 						<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 							<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
 								<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[driver__.driver?index == 0?driver__.index == 45?'Guide_img showEvents':'hideEvents':'hideEvents':'',item?.isChecked?'active':'']">
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
 							</div>
 						</div>
 						<div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
@@ -97,6 +98,8 @@
 
 								>
 									<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
+									<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
+
 									<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
 										<i class="fi fi-rr-trash"></i>
 									</div> -->
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index 71560bbb..e5b20eb5 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -49,15 +49,15 @@
 							</div> -->
 							<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
 							<div class="detail_right_user detail_left_right_item">
-								<div class="detail_right_user_head">
-									<img v-lazy="scaleImageData?.imgUrl">
+								<div class="detail_right_user_head" @click="openOtherUsers">
+									<img v-lazy="scaleImageData?.avatar">
 
 								</div>
 								<div class="detail_right_user_content">
 									<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 v-if="scaleImageData.isFollow == 0 && userInfo?.userId != scaleImageData?.accountId" style="margin-bottom: 0;" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
+										<div v-else-if="userInfo?.userId != scaleImageData?.accountId" class="started_btn" style="margin-bottom: 0;" @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>
@@ -349,7 +349,6 @@ export default defineComponent({
 		// 	let parent:any = this.$parent
 		// 	parent.likeFile(item,str)
 		// },
-		let getDeatilData = {}
 		let originalGetDetail = ()=>{
 			if(imgData.scaleImageData.jumpable != 1){
 				return message.info(t('newScaleImage.jsContent6'))
@@ -358,8 +357,10 @@ export default defineComponent({
 		}
 		let getDetail = (value:any,str:string)=>{
 			imgData.loadingShow = true
-			let data = value
-			getDeatilData = value
+			// let data = value
+			let data = {
+				id:value.id
+			}
 		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
 				(rv: any) => {
 					imgData.loadingShow = false
@@ -493,7 +494,6 @@ export default defineComponent({
 					imgData.scaleImageData.likeNum += 1
 					imgData.scaleImageData.isLike = 1
 				}
-				// getDetail(getDeatilData,'zan')
 			})
 			.catch((rv) => {
 			});
@@ -568,6 +568,15 @@ export default defineComponent({
 				}
 			})
 		}
+		let openOtherUsers = ()=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					userId:imgData.scaleImageData.accountId
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
@@ -602,6 +611,7 @@ export default defineComponent({
 			setPortfolioLike,
 			setDeleteComment,
 			setFollow,
+			openOtherUsers,
         };
     },
 	directives:{
@@ -744,6 +754,7 @@ export default defineComponent({
 		font-size: 1.6rem;
 		font-weight: 300;
 		color: #535353;
+		text-align: left;
 		// overflow: hidden;
 		// text-overflow: ellipsis;
 		// white-space: nowrap;
@@ -794,14 +805,21 @@ export default defineComponent({
 					}
 				}
 			}
+			.started_btn{
+				margin-top: 1rem;
+				border-radius: 6px;
+				padding: 0 1rem;
+			}
 		}
 		.detail_right_user_head{
 			border-radius: 50%;
 			overflow: hidden;
 			margin-right: var(--margin);
+			flex-shrink: 0;
+			cursor: pointer;
 			img{
-				width: 10rem;
-				height: 10rem;
+				width: 8rem;
+				height: 8rem;
 				object-fit: cover;
 			}
 		}
@@ -1207,7 +1225,7 @@ export default defineComponent({
 			.detail_right_work_detail{
 				.scaleImage_chunk_title_intro{
 					margin-top: calc(var(--padding) / 2);
-					height: auto
+					height: auto;
 				}
 			}
 			
diff --git a/src/component/WorksPage/newScaleImageMobile.vue b/src/component/WorksPage/newScaleImageMobile.vue
index 17e5db93..7f5da808 100644
--- a/src/component/WorksPage/newScaleImageMobile.vue
+++ b/src/component/WorksPage/newScaleImageMobile.vue
@@ -31,11 +31,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">
-									<img v-lazy="scaleImageData?.imgUrl">
-								</div> -->
+								<div class="detail_right_user_head">
+									<img v-lazy="scaleImageData?.avatar">
+								</div>
 								<div class="detail_right_user_content">
-									<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
+									<!-- <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>
@@ -718,6 +723,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;
@@ -734,16 +740,18 @@ export default defineComponent({
 					}
 				}
 			}
-		}
+		} 
 		.detail_right_user_head{
 			border-radius: 50%;
 			overflow: hidden;
 			margin-right: var(--margin);
+			flex-shrink: 0;
 			img{
-				width: 10rem;
-				height: 10rem;
+				width: 7rem;
+				height: 7rem;
 				object-fit: cover;
 			}
+			
 		}
 		.detail_right_user_head:hover{
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 9e1b5951..9086f1cc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -255,15 +255,24 @@ const router = createRouter({
 // 刷新保存数据-
 let state:any = store.state
 window.addEventListener("beforeunload", (e) => {
-	sessionStorage.setItem(
+	localStorage.setItem(
 		"vuex_setSystemUser",
 		JSON.stringify(state.UserHabit.systemUser.value)
 	);
+	localStorage.setItem(
+		"vuex_setUserInfo",
+		JSON.stringify(state.UserHabit.userInfo)
+	);
 });
-var vuex_setSystemUser:any = sessionStorage.getItem("vuex_setSystemUser");
+var vuex_setSystemUser:any = localStorage.getItem("vuex_setSystemUser");
+var vuex_setUserInfo:any = localStorage.getItem("vuex_setUserInfo");
 if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
 	store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
-	sessionStorage.removeItem("vuex_setSystemUser");
+	localStorage.removeItem("vuex_setSystemUser");
+}
+if (vuex_setUserInfo) {
+	store.commit("setUserInfo", JSON.parse(vuex_setUserInfo));
+	localStorage.removeItem("vuex_setSystemUser");
 }
 
 router.beforeEach((to, from, next) => {
diff --git a/src/store/userHabit/userHabit.ts b/src/store/userHabit/userHabit.ts
index cbb98f32..5343137d 100644
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -14,6 +14,7 @@ interface UserHabit{
 	MalePosition:any,
 	Position:any,
 	systemUser:any,
+	userInfo:any,
     messageSystem:any,
 }
 
@@ -39,9 +40,12 @@ const userHabit : Module<UserHabit,RootState> = {
 		Position:[],
 		systemUser:{
 			value : -1
+		},
+		userInfo:{
+
 		},
 		messageSystem:{
-			messageNum:4,
+			messageNum:0,
 			messageType:{},
 		},
     },
@@ -74,8 +78,15 @@ const userHabit : Module<UserHabit,RootState> = {
 		setSystemUser(state,data){
 			state.systemUser.value = data
 		},
+		setUserInfo(state,data){
+			if(!data)return
+			for (const key in data) {
+				state.userInfo[key] = data[key]
+			}
+		},
 		clearSystemUser(state){
 			state.systemUser.value = -1
+			state.userInfo = {}
 		},
 		setMessageSystem(state,data){
 			let num = 0
@@ -97,7 +108,7 @@ const userHabit : Module<UserHabit,RootState> = {
 		closeMessageSystem(state,data){
 			if(!data){
 				state.messageSystem.messageNum = 0
-				state.messageSystem.messageType = {}
+				state.messageSystem.messageType = null
 			}else{
 
 			}
diff --git a/src/tool/https.js b/src/tool/https.js
index 955405bd..a040fe08 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -121,6 +121,7 @@ export const Https = {
         accountLogin:`/api/account/login`, //账号密码登录接口
         getUserLanguage:`/api/account/getUserLanguage`, //获取当前用户语言
         changeUserLanguage:`/api/account/changeUserLanguage`, //切换用户当前语言
+        uploadAvatar:`/api/account/uploadAvatar`, //修改头像
 
         trialUserLogout:`/account/trialUserLogout`, //试用用户退出登录接口
         completeGuidancet:`/api/account/completeGuidance`, //用户指引结束
@@ -303,7 +304,7 @@ export const Https = {
 		setReadStatus:`/api/message/setReadStatus`,//设置消息已读
 		getHistoryNotification:`/api/message/getHistoryNotification`,//获取历史消息
 		oneClickRead:`/api/message/oneClickRead`,//全部设为已读
-		
+		personalHomepage:`/api/account/personalHomepage`,//获取个人主页信息
 		
     },
 
diff --git a/src/tool/util.js b/src/tool/util.js
index 9123d74c..4b52297a 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -428,6 +428,108 @@ const setGradual = (colorObj,colorWidth,colorHeight)=>{
 	const dataURL = canvas.toDataURL('image/jpg');
 	return dataURL
 }
+function segmentImage(markerImage,fullImage,size){
+	return new Promise((resolve, reject) => {
+		const markerCanvas = document.createElement('canvas');
+		const fullCanvas = document.createElement('canvas');
+		const nullCanvas = document.createElement('canvas');
+		const ctx1 = markerCanvas.getContext('2d');
+		const ctx2 = fullCanvas.getContext('2d');
+		const ctx3 = nullCanvas.getContext('2d');
+		let targetMarkerUrl = ''
+		let targetFullUrl = ''
+		const marker = new Image();
+		const full = new Image();
+		marker.width = size.width;
+		marker.height = size.height;
+		full.width = size.width;
+		full.height = size.height;
+		console.log(full);
+		marker.crossOrigin = 'anonymous';
+		full.crossOrigin = 'anonymous';
+		marker.onload = () => {
+			ctx1.drawImage(marker,0,0 ,size.width, size.height);
+			full.onload = () => {
+				ctx2.drawImage(full,0,0, size.width, size.height);
+				segmentImage();
+			};
+		};
+		marker.src = markerImage; 
+		full.src = fullImage;
+		function segmentImage() {
+				
+			const markerData = ctx1.getImageData(0, 0, size.width, size.height);
+			const fullData = ctx2.getImageData(0, 0, size.width, size.height);
+
+			const color1 = { r: 255, g: 0, b: 0 }; // 第一个颜色
+			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
+
+			const threshold = 50; // 颜色匹配的容差
+
+			const isColorMatch = (r, g, b, color) => 
+				Math.abs(r - color.r) < threshold &&
+				Math.abs(g - color.g) < threshold &&
+				Math.abs(b - color.b) < threshold;
+
+			const output1 = ctx3.createImageData(size.width, size.height);
+			const output2 = ctx3.createImageData(size.width, size.height);
+			for (let i = 0; i < markerData.data.length; i += 4) {
+				const r = markerData.data[i];
+				const g = markerData.data[i + 1];
+				const b = markerData.data[i + 2];
+
+				if (isColorMatch(r, g, b, color1)) {
+					// 将完整图像中对应的像素复制到第一个输出图像
+					output1.data[i] = fullData.data[i];
+					output1.data[i + 1] = fullData.data[i + 1];
+					output1.data[i + 2] = fullData.data[i + 2];
+					output1.data[i + 3] = fullData.data[i + 3];
+					
+					// 第二个图像的像素置为透明
+					output2.data[i] = 0;
+					output2.data[i + 1] = 0;
+					output2.data[i + 2] = 0;
+					output2.data[i + 3] = 0;
+				} else if (isColorMatch(r, g, b, color2)) {
+					// 将完整图像中对应的像素复制到第二个输出图像
+					output2.data[i] = fullData.data[i];
+					output2.data[i + 1] = fullData.data[i + 1];
+					output2.data[i + 2] = fullData.data[i + 2];
+					output2.data[i + 3] = fullData.data[i + 3];
+
+					// 第一个图像的像素置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+				} else {
+					// 两个图像的像素都置为透明
+					output1.data[i] = 0;
+					output1.data[i + 1] = 0;
+					output1.data[i + 2] = 0;
+					output1.data[i + 3] = 0;
+
+					output2.data[i] = 0;
+					output2.data[i + 1] = 0;
+					output2.data[i + 2] = 0;
+					output2.data[i + 3] = 0;
+				}
+			}
+			const createImageURL = (imageData) => {
+				const canvas = document.createElement('canvas');
+				canvas.width = size.width;
+				canvas.height = size.height;
+				const ctx = canvas.getContext('2d');
+				ctx.putImageData(imageData, 0, 0);
+				return canvas.toDataURL('image/png');
+			};
+			targetMarkerUrl =createImageURL(output1)
+			targetFullUrl =createImageURL(output2)
+			console.log(targetFullUrl,targetMarkerUrl);
+			resolve({targetMarkerUrl, targetFullUrl})
+		}
+	})
+}
 export {
 	isEmail,
 	getUploadUrl,
@@ -445,4 +547,5 @@ export {
 	murmur,
 	setGradual,
 	calculateGradientCoordinate,
+	segmentImage,
 }
\ No newline at end of file
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 80f3d560..30b57d5e 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -4,20 +4,20 @@
             <div class="homeMain_right_content">
                 <div class="homeMain_user">
 					<div class="homeMain_user_icon" @click="openAccount">
-
+						<img :src="userInfo?.avatar" alt="">
 					</div>
 					<div class="homeMain_user_detail">
 						<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
-						<div v-else class="username">{{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
+						<div v-else class="username">{{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
 						<div class="homeMain_user_detail_item homeMain_user_detail_attention">
 							<div class="attention_item">
 							<!-- 点击事件就用下面的div -->
 							<!-- <div class="attention_item attention_item_active"> -->
-								<div>123</div>
+								<div>{{ userInfo?.followeeCount }}</div>
 								<span>关注</span>
 							</div>
 							<div class="attention_item">
-								<div>321</div>
+								<div>{{ userInfo?.followerCount }}</div>
 								<span>粉丝</span>
 							</div>
 							<div class="attention_item">
@@ -34,7 +34,7 @@
 				</div>
                 <div class="homeMain_user_content">
                     <div v-if="isTest" class="username"><span>/</span> {{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
-                    <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
+                    <div v-else class="username"><span>/</span> {{$t('Header.hello')}}@{{ cookieUserInfo?.userName }}</div>
                     <div
 						v-if="!isMurmur"
 
@@ -110,7 +110,7 @@
 					<i class="fi fi-rs-notebook"></i>
 					<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
 				</div>
-				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo?.userId) >= 0"  :to="`/administrator`">
+				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0"  :to="`/administrator`">
 					<span class="icon iconfont icon-yonghu"></span>
 					<span class="select_item_des">Administrator</span>
 				</router-link>
@@ -186,7 +186,9 @@ export default defineComponent({
         const store = useStore();
 		const {t} = useI18n()
 		const {locale} = useI18n()
-		
+		let userInfo= computed(()=>{
+			return store.state.UserHabit.userInfo
+		})
 		let isTest = ref()
 		let isMurmur = ref()
 		let credits = computed(()=>{
@@ -245,6 +247,7 @@ export default defineComponent({
 		})
 		return {
 			store,
+			userInfo,
 			t,
 			locale,
 			isTest,
@@ -267,7 +270,7 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             time: 60, //60秒倒计时
             timer: 0,
-            userInfo: {},
+            cookieUserInfo: {},
             timerOperate: null,
             numTime: 30,
             timerSec: null,
@@ -303,13 +306,13 @@ export default defineComponent({
         this.isTest =JSON.parse(isTest)
         let isMurmur = getCookie('isMurmur')//获取是否是试用用户
         this.isMurmur =JSON.parse(isMurmur)
-        this.userInfo = JSON.parse(getCookie("userInfo"));
-        if (!this.userInfo) {
+        this.cookieUserInfo = JSON.parse(getCookie("userInfo"));
+        if (!this.cookieUserInfo) {
             this.$router.replace("/");
         } else {
-            this.accountIsLogin(this.userInfo);
+            this.accountIsLogin(this.cookieUserInfo);
         }
-        this.isHaveBindEmail = this.userInfo?.email ? true : false;
+        this.isHaveBindEmail = this.cookieUserInfo?.email ? true : false;
 		if(!this.isMurmur){
 			this.operateClick();
 			document.addEventListener("click", this.operateClick);
@@ -447,7 +450,7 @@ export default defineComponent({
         //登出
         async logout() {
             let data = {
-                userId: this.userInfo.userId,
+                userId: this.cookieUserInfo.userId,
             };
 			let isTest = getCookie('isTest')
 			// console.log(getCookie("token"));
@@ -636,6 +639,11 @@ export default defineComponent({
 				background-color: #000;
 				border-radius: 50%;
 				cursor: pointer;
+				img{
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
 				// transition: all .3s;
 			}
 			.homeMain_user_detail{
diff --git a/src/views/HomeRecommend.vue b/src/views/HomeRecommend.vue
index 46aa5fb5..a4a47310 100644
--- a/src/views/HomeRecommend.vue
+++ b/src/views/HomeRecommend.vue
@@ -123,7 +123,10 @@ export default defineComponent({
 			// console.log(getCookie("token"));
 			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 				clonAllCookie();
-			});
+			}).catch((err) => {
+				clonAllCookie();
+			})
+			;
 		}
 		let goHome = ()=>{
 			router.push('/home');
diff --git a/src/views/HomeView/Works.vue b/src/views/HomeView/Works.vue
index 74d00c03..61319391 100644
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -39,7 +39,7 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
 import newScaleImageMobile from "@/component/WorksPage/newScaleImageMobile.vue";
 import { useI18n } from "vue-i18n";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
-
+import { useRouter,useRoute } from 'vue-router'
 import Falls from "@/component/WorksPage/Falls.vue";
 export default defineComponent({
     components: {
@@ -63,6 +63,7 @@ export default defineComponent({
 		 },
 	},
     setup(prop) {
+		const router = useRouter()
 		let filter:any = reactive({
 			worksSelect: 'all',
 			isNull:true,
@@ -161,9 +162,9 @@ export default defineComponent({
 			let data = filter.getListDate
 			if(filter.isShowMark && !filter.isNoData)return
 			filter.isShowMark = true
-			// if(prop.otherUsers){
-			// 	console.log(prop.userId);
-			// }
+			if(prop.otherUsers){
+				data.accountId = prop.userId
+			}
 			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                 .then((rv) => {
 					if(data.page == 1 && rv.content.length == 0){
@@ -230,6 +231,12 @@ export default defineComponent({
 			nextTick(()=>{
 				setPorfolioDom()
 			})
+			let data = {
+				id:router.currentRoute.value.query?.workId
+			}
+			if(data.id){
+				getImgScale(data)
+			}
 		})
         return {
 			...toRefs(filter),
@@ -302,15 +309,7 @@ export default defineComponent({
 		@media (max-width: 768px) {
 			background: #fff;
 		}
-		.page_loading_box{
-			text-align: center;
-			height: 50px;
-			.page_loading{
-				display: block;
-				width: 50px;
-				height: 50px;
-			}
-		}
+		
 		>img{
 			position: relative;
 			left: 50%;
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index cf789d35..82480117 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -478,6 +478,13 @@ export default defineComponent({
                         setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
                         setCookie("userInfo", JSON.stringify(rv));
 						this.store.commit("setSystemUser", rv.systemUser)
+						let obj:any = {
+							avatar : rv.avatar,
+							followeeCount : rv.followeeCount,
+							followerCount : rv.followerCount,
+						}
+						
+						this.store.commit("setUserInfo", obj)
 						if(rv.systemUser == 0){
 							this.turnToHomePage('/Square');
 						}else{
diff --git a/tsconfig.json b/tsconfig.json
index a92202d6..8330a406 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,6 +39,7 @@
     "tests/**/*.ts",
     "tests/**/*.tsx",
     "src/**/*.js",
+    "src/**/*.svg",
   ],
   "exclude": [
     "node_modules"