From fc72d99ab33a8f871295c84dfc2680b9ab557308 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 11 Mar 2022 21:36:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=A7=E5=B1=8F=E7=9A=84UI?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/App.vue | 11 +---------- src/renderer/assets/styles/index.less | 6 +++--- src/renderer/components/base/VirtualizedList.vue | 9 +++++++-- .../components/material/OnlineList/useList.js | 5 +++-- src/renderer/utils/index.js | 11 +++++++++++ src/renderer/views/Download.vue | 7 ++++--- .../views/list/components/MusicList/useList.js | 5 +++-- 7 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index c8654519..969cea6f 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -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() { diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less index c7eb2e4c..b1fc72bb 100644 --- a/src/renderer/assets/styles/index.less +++ b/src/renderer/assets/styles/index.less @@ -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; } } diff --git a/src/renderer/components/base/VirtualizedList.vue b/src/renderer/components/base/VirtualizedList.vue index a53d4000..598b8bf4 100644 --- a/src/renderer/components/base/VirtualizedList.vue +++ b/src/renderer/components/base/VirtualizedList.vue @@ -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, }) diff --git a/src/renderer/components/material/OnlineList/useList.js b/src/renderer/components/material/OnlineList/useList.js index 5e579091..28e723f8 100644 --- a/src/renderer/components/material/OnlineList/useList.js +++ b/src/renderer/components/material/OnlineList/useList.js @@ -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 = () => { diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index 41727547..bcc16e18 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -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 +} diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue index 8cab80bc..1ce8564c 100644 --- a/src/renderer/views/Download.vue +++ b/src/renderer/views/Download.vue @@ -36,10 +36,10 @@ div(:class="$style.download")