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

src/renderer/src/components/file-image/index.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
-
 const props = defineProps({
   fileName: {
     type: String,

src/renderer/src/components/upload-dialog/index.vue

@@ -51,7 +51,6 @@ import { ElMessage } from 'element-plus'
 import { resourceType } from '@/utils/resourceDict'
 import { getFileSuffix, getFileName } from '@/utils/ruoyi'
 
-
 const props = defineProps({
   modelValue: {
     type: Boolean,

src/renderer/src/layout/components/Header.vue

@@ -49,12 +49,11 @@ import { ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 
 const userStore = useUserStore()
-const userInfo = userStore.user
 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([
   {
@@ -129,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>

src/renderer/src/utils/request.js

@@ -56,15 +56,9 @@ service.interceptors.request.use(config => {
       const s_data = sessionObj.data;              // 请求数据
       const s_time = sessionObj.time;              // 请求时间
       const interval = 2000;                       // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
-      } else {
       cache.session.setJSON('sessionObj', requestObj)
     }
   }
-  }
   return config
 }, error => {
     console.log(error)

src/renderer/src/views/profile/index.vue

@@ -136,4 +136,8 @@ getUser()
   width: 1em;
   height: 1em;
 }
+.app-container{
+  padding-top: 20px;
+  height: 100%;
+}
 </style>

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 layerPosition = reactive({
+  left: 0,
+  top: 0
+})
+// 大图背景定位(样式)
+const largePosition = reactive({
+  backgroundPositionX: 0,
+  backgroundPositionY: 0
+})
+const cropper = ref(null)
+const { elementX, elementY } = useMouseInElement(cropper)
+//监听是否拖动
+const transform = ref({})
 
 /** 编辑头像 */
 function editCropper() {
@@ -147,15 +164,37 @@ function uploadImg() {
     })
   })
 }
+
 /** 实时预览 */
 function realTime(data) {
   options.previews = data
+  transform.value = Object.assign({}, data.img)
 }
+
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar
   options.visible = false
 }
+watch(transform, () => {
+  // 根据得到数据设置样式数据和是否显示数据
+  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 +225,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>