优化大屏的UI布局

pull/930/merge
lyswhut 2022-03-11 21:36:33 +08:00
parent 377f665361
commit fc72d99ab3
7 changed files with 32 additions and 22 deletions

View File

@ -17,16 +17,7 @@
import { useRefGetter, watch, onMounted } from '@renderer/utils/vueTools'
import useApp from '@renderer/core/useApp'
import { isFullscreen } from '@renderer/core/share'
const getFontSizeWithScreen = screenWidth => {
return screenWidth <= 1440
? 16
: screenWidth <= 1920
? 18
: screenWidth <= 2560
? 20
: screenWidth <= 2560 ? 20 : 22
}
import { getFontSizeWithScreen } from '@renderer/utils'
export default {
setup() {

View File

@ -102,7 +102,7 @@ table {
flex: none;
padding: 0 6px;
position: relative;
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 13px;
line-height: 16px;
vertical-align: middle;
@ -223,13 +223,13 @@ input, textarea {
border-radius: 3px;
background-color: @color-scrollbar-thumb;
// background-color: rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
transition: background-color 0.4s ease;
}
&::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
background-color: @color-scrollbar-thumb-hover;
// background-color: rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
transition: background-color 0.4s ease;
}
}

View File

@ -224,14 +224,19 @@ export default {
height: props.list.length * props.itemHeight + 'px',
}))
watch(() => props.itemHeight, updateView)
watch(() => props.list, (list) => {
const handleReset = list => {
cachedList = Array(list.length)
startIndex = -1
endIndex = -1
nextTick(() => {
updateView()
})
}
watch(() => props.itemHeight, () => {
handleReset(props.list)
})
watch(() => props.list, (list) => {
handleReset(list)
}, {
deep: true,
})

View File

@ -1,5 +1,6 @@
import { computed, useRefGetter, watch, ref, onBeforeUnmount } from '@renderer/utils/vueTools'
import { windowSizeList } from '@common/config'
import { windowSizeList, isFullscreen } from '@renderer/core/share'
import { getFontSizeWithScreen } from '@renderer/utils'
const useKeyEvent = ({ handleSelectAllData }) => {
const keyEvent = {
@ -49,7 +50,7 @@ export default ({ props }) => {
const setting = useRefGetter('setting')
let lastSelectIndex = -1
const listItemHeight = computed(() => {
return parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize) / 16 * 37
return Math.ceil((isFullscreen.value ? getFontSizeWithScreen() : parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize)) * 2.3)
})
const removeAllSelect = () => {

View File

@ -560,3 +560,14 @@ export const saveStrToFile = (path, str) => new Promise((resolve, reject) => {
const fileNameRxp = /[\\/:*?#"<>|]/g
export const filterFileName = name => name.replace(fileNameRxp, '')
export const getFontSizeWithScreen = (screenWidth = window.innerWidth) => {
return screenWidth <= 1440
? 16
: screenWidth <= 1920
? 18
: screenWidth <= 2560
? 20
: screenWidth <= 2560 ? 20 : 22
}

View File

@ -36,10 +36,10 @@ div(:class="$style.download")
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { checkPath, openDirInExplorer, openUrl } from '@renderer/utils'
import { checkPath, openDirInExplorer, openUrl, getFontSizeWithScreen } from '@renderer/utils'
import musicSdk from '@renderer/utils/music'
import path from 'path'
import { windowSizeList } from '@renderer/core/share'
import { windowSizeList, isFullscreen } from '@renderer/core/share'
import { playInfo, playMusicInfo } from '@renderer/core/share/player'
import { downloadList, downloadStatus } from '@renderer/core/share/download'
@ -51,6 +51,7 @@ export default {
playInfo,
downloadList,
downloadStatus,
isFullscreen,
}
},
data() {
@ -181,7 +182,7 @@ export default {
]
},
listItemHeight() {
return parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize) / 16 * 37
return Math.ceil((this.isFullscreen ? getFontSizeWithScreen() : parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize)) * 2.3)
},
},
watch: {

View File

@ -1,5 +1,6 @@
import { computed, watch, ref, onBeforeUnmount } from '@renderer/utils/vueTools'
import { windowSizeList } from '@renderer/core/share'
import { windowSizeList, isFullscreen } from '@renderer/core/share'
import { getFontSizeWithScreen } from '@renderer/utils'
const useKeyEvent = ({ handleSelectAllData }) => {
const keyEvent = {
@ -48,7 +49,7 @@ export default ({ list, setting }) => {
let lastSelectIndex = -1
const listItemHeight = computed(() => {
return parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize) / 16 * 37
return Math.ceil((isFullscreen.value ? getFontSizeWithScreen() : parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize)) * 2.3)
})
const removeAllSelect = () => {