zhuhao_dev #43

Merged
zhuhao merged 4 commits from zhuhao_dev into main 2024-07-18 16:32:41 +08:00
7 changed files with 76 additions and 17 deletions
Showing only changes of commit 243561e656 - Show all commits

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -56,13 +56,7 @@ 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)
}
cache.session.setJSON('sessionObj', requestObj)
}
}
return config

View File

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

View File

@ -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>