优化大屏的UI布局
parent
377f665361
commit
fc72d99ab3
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
Loading…
Reference in New Issue