From 385d6ed25e69eca537f298b334b29b5cb6ae1f2d Mon Sep 17 00:00:00 2001
From: yangws <1607839436@qq.com>
Date: Thu, 18 Jul 2024 15:34:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/renderer/src/views/profile/index.vue      | 10 ++-
 src/renderer/src/views/profile/userAvatar.vue | 69 ++++++++++++++++++-
 3 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e1d11d9..7ae26ab 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.11.0",
     "crypto-js": "^4.2.0",
     "electron-dl-manager": "^3.0.0",
     "electron-updater": "^6.1.7",
diff --git a/src/renderer/src/views/profile/index.vue b/src/renderer/src/views/profile/index.vue
index bb44111..54e3ae2 100644
--- a/src/renderer/src/views/profile/index.vue
+++ b/src/renderer/src/views/profile/index.vue
@@ -81,7 +81,7 @@
     </el-row>
   </div>
 </template>
-  
+
   <script setup name="Profile">
 import { UserFilled, Cellphone, Message, Suitcase, Avatar, Calendar } from '@element-plus/icons-vue'
 import { ref, reactive } from 'vue'
@@ -107,7 +107,7 @@ function getUser() {
 
 getUser()
 </script>
-  
+
   <style lang="scss" scoped>
 .clearfix {
   text-align: left;
@@ -136,4 +136,8 @@ getUser()
   width: 1em;
   height: 1em;
 }
-</style>
\ No newline at end of file
+.app-container{
+  padding-top: 20px;
+  height: 100%;
+}
+</style>
diff --git a/src/renderer/src/views/profile/userAvatar.vue b/src/renderer/src/views/profile/userAvatar.vue
index 1c289a4..a495bd6 100644
--- a/src/renderer/src/views/profile/userAvatar.vue
+++ b/src/renderer/src/views/profile/userAvatar.vue
@@ -26,7 +26,7 @@
         </el-col>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
           <div class="avatar-upload-preview">
-            <el-image style="width: 100px; height: 100px" :src="options.previews.url" :style="options.previews.img"/>
+            <div v-show="show" class="large" :style="[{backgroundImage:`url(${options.img})`},largePosition]"></div>
           </div>
         </el-col>
       </el-row>
@@ -67,12 +67,13 @@
 
   <script setup>
 import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
-import { ref, reactive, getCurrentInstance } from 'vue'
+import {ref, reactive, getCurrentInstance, watch} from 'vue'
 import 'vue-cropper/dist/index.css'
 import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
 import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
+import { useMouseInElement } from '@vueuse/core'
 
 const userStore = useUserStore()
 const { proxy } = getCurrentInstance()
@@ -91,6 +92,22 @@ const options = reactive({
   outputType: 'png', // 默认生成截图为PNG格式
   previews: {} //预览数据
 })
+// 是否显示遮罩和大图
+const show = ref(false)
+//监听是否拖动
+const random = ref('')
+// 遮罩的坐标(样式)
+const layerPosition = reactive({
+  left: 0,
+  top: 0
+})
+// 大图背景定位(样式)
+const largePosition = reactive({
+  backgroundPositionX: 0,
+  backgroundPositionY: 0
+})
+const cropper = ref(null)
+const { elementX, elementY } = useMouseInElement(cropper)
 
 /** 编辑头像 */
 function editCropper() {
@@ -147,15 +164,41 @@ function uploadImg() {
     })
   })
 }
+
 /** 实时预览 */
 function realTime(data) {
   options.previews = data
+  random.value = getRandomValue()
+}
+// 生成一个随机数的函数监听滑动的改变
+const getRandomValue = () => {
+  return Math.random()
 }
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar
+  console.log(userStore.avatar,'userStore.avatar')
   options.visible = false
 }
+watch(random, () => {
+  // 根据得到数据设置样式数据和是否显示数据
+  show.value = true
+  // 计算坐标
+  const position = { x: 0, y: 0 }
+
+  if (elementX.value < 100) position.x = 0
+  else if (elementX.value > 300) position.x = 200
+  else position.x = elementX.value - 100
+
+  if (elementY.value < 100) position.y = 0
+  else if (elementY.value > 300) position.y = 200
+  else position.y = elementY.value - 100
+  // 给样式赋值
+  layerPosition.left = position.x + 'px'
+  layerPosition.top = position.y + 'px'
+  largePosition.backgroundPositionX = -2 * position.x + 'px'
+  largePosition.backgroundPositionY = -2 * position.y + 'px'
+},{deep:true})
 </script>
 
   <style lang='scss' scoped>
@@ -186,4 +229,26 @@ function closeDialog() {
   height: 120px;
   width: auto;
 }
+.avatar-upload-preview {
+  position:relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative; /* 设置相对定位 */
+  left: 10px; /* 向右偏移10像素 */
+}
+.large {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 500px;
+  height: 450px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  background-repeat: no-repeat;
+  background-size: 800px 800px;
+  background-color: #f8f8f8;
+}
 </style>

From acf0018a9c928d95a6eec4694d05ba2380726390 Mon Sep 17 00:00:00 2001
From: yangws <1607839436@qq.com>
Date: Thu, 18 Jul 2024 15:41:31 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/views/profile/userAvatar.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/views/profile/userAvatar.vue b/src/renderer/src/views/profile/userAvatar.vue
index a495bd6..b27e59f 100644
--- a/src/renderer/src/views/profile/userAvatar.vue
+++ b/src/renderer/src/views/profile/userAvatar.vue
@@ -94,8 +94,6 @@ const options = reactive({
 })
 // 是否显示遮罩和大图
 const show = ref(false)
-//监听是否拖动
-const random = ref('')
 // 遮罩的坐标(样式)
 const layerPosition = reactive({
   left: 0,
@@ -108,6 +106,8 @@ const largePosition = reactive({
 })
 const cropper = ref(null)
 const { elementX, elementY } = useMouseInElement(cropper)
+//监听是否拖动
+const transform = ref({})
 
 /** 编辑头像 */
 function editCropper() {
@@ -168,19 +168,16 @@ function uploadImg() {
 /** 实时预览 */
 function realTime(data) {
   options.previews = data
-  random.value = getRandomValue()
-}
-// 生成一个随机数的函数监听滑动的改变
-const getRandomValue = () => {
-  return Math.random()
+  transform.value = Object.assign({}, data.img)
 }
+
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar
   console.log(userStore.avatar,'userStore.avatar')
   options.visible = false
 }
-watch(random, () => {
+watch(transform, () => {
   // 根据得到数据设置样式数据和是否显示数据
   show.value = true
   // 计算坐标

From bdc67a6a0e66a73f3ed386b0e6014b0604fb68c7 Mon Sep 17 00:00:00 2001
From: yangws <1607839436@qq.com>
Date: Thu, 18 Jul 2024 16:00:46 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E6=9B=B4=E6=94=B9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=9A=84=E5=90=8C=E6=97=B6=E6=9B=B4=E6=94=B9=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/layout/components/Header.vue | 5 ++++-
 src/renderer/src/views/profile/userAvatar.vue | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/layout/components/Header.vue b/src/renderer/src/layout/components/Header.vue
index c63f241..32b5059 100644
--- a/src/renderer/src/layout/components/Header.vue
+++ b/src/renderer/src/layout/components/Header.vue
@@ -53,7 +53,7 @@ const { ipcRenderer } = window.electron || {}
 const isMaxSize = ref(false)
 const router = useRouter()
 const currentRoute = ref('')
-const userImg = new URL(userStore.user.avatar, import.meta.url)
+const userImg = ref(new URL(userStore.user.avatar, import.meta.url))
 
 const menus = ref([
   {
@@ -128,6 +128,9 @@ const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
 }
+watch(()=> userStore.avatar,() => {
+  userImg.value = userStore.avatar;
+},{deep:true})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/src/views/profile/userAvatar.vue b/src/renderer/src/views/profile/userAvatar.vue
index b27e59f..c8c0be7 100644
--- a/src/renderer/src/views/profile/userAvatar.vue
+++ b/src/renderer/src/views/profile/userAvatar.vue
@@ -174,7 +174,6 @@ function realTime(data) {
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar
-  console.log(userStore.avatar,'userStore.avatar')
   options.visible = false
 }
 watch(transform, () => {