chore: 优化样式

Author: OXOYO

src/renderer/components/VirtualList.vue

@@ -16,7 +16,7 @@ const props = defineProps({
     type: Number,
     default: 0
   },
-  gridItems: {
+  gridSize: {
     type: Number,
     default: 1
   },
@@ -50,7 +50,7 @@ const visibleRange = computed(() => {
   // 计算起始索引
   const startRowIndex = Math.floor(currentScrollTop / props.itemHeight)
   const startBufferedRowIndex = Math.max(0, startRowIndex - bufferRows)
-  const start = Math.max(0, startBufferedRowIndex * props.gridItems)
+  const start = Math.max(0, startBufferedRowIndex * props.gridSize)
 
   // 计算可见行数
   const visibleRowCount = Math.ceil(currentWrapperHeight / props.itemHeight)
@@ -62,7 +62,7 @@ const visibleRange = computed(() => {
   // 确保 end 不会是负数
   const end = Math.max(
     0,
-    Math.min(props.items.length - 1, endBufferedRowIndex * props.gridItems - 1)
+    Math.min(props.items.length - 1, endBufferedRowIndex * props.gridSize - 1)
   )
 
   return { start, end }
@@ -90,31 +90,34 @@ const visibleItems = computed(() => {
 // 包装器样式
 const wrapperStyle = computed(() => {
   return {
-    height: `${Math.ceil(props.items.length / props.gridItems) * props.itemHeight}px`,
-    position: 'relative'
+    height: `${Math.ceil(props.items.length / props.gridSize) * props.itemHeight}px`
   }
 })
 
 // 获取项目样式
 const getItemStyle = (item) => {
-  const row = Math.floor(item.index / props.gridItems)
-  const col = item.index % props.gridItems
+  const row = Math.floor(item.index / props.gridSize)
+  const col = item.index % props.gridSize
 
   const gridGap = props.gridGap
 
-  // 计算每项的宽度百分比，考虑间距
-  const totalGapWidth = (props.gridItems - 1) * gridGap
-  const itemWidthPercent = (100 - totalGapWidth) / props.gridItems
+  // 计算总可用宽度和单个项目宽度百分比
+  const totalGap = (props.gridSize - 1) * gridGap
+  const itemWidthPercent = 100 / props.gridSize
+
+  // 计算左侧偏移和宽度，使用更精确的计算方式
+  const left = props.itemWidth
+    ? `${col * (props.itemWidth + gridGap)}px`
+    : `calc(${itemWidthPercent * col}% + ${col * gridGap}px)`
+
+  const width = props.itemWidth
+    ? `${props.itemWidth}px`
+    : `calc(${itemWidthPercent}% - ${(totalGap / props.gridSize).toFixed(4)}px)` // 使用toFixed提高精度
 
   return {
-    position: 'absolute',
     top: `${row * (props.itemHeight + gridGap)}px`,
-    left: props.itemWidth
-      ? `${col * (props.itemWidth + gridGap)}px`
-      : `calc(${col * (100 / props.gridItems)}% + ${col * gridGap}px)`,
-    width: props.itemWidth
-      ? `${props.itemWidth}px`
-      : `calc(${100 / props.gridItems}% - ${props.gridItems > 1 ? totalGapWidth / props.gridItems : 0}px)`,
+    left,
+    width,
     height: `${props.itemHeight}px`
   }
 }
@@ -185,9 +188,9 @@ const scrollToIndex = (index) => {
   // 确保索引有效
   const validIndex = Math.max(0, Math.min(index, props.items.length - 1))
   // 计算行号
-  const row = Math.floor(validIndex / props.gridItems)
+  const row = Math.floor(validIndex / props.gridSize)
   // 计算滚动位置
-  const top = row * props.itemHeight
+  const top = row * (props.itemHeight + props.gridGap)
   // 调用 scrollToTop 方法
   scrollToTop(top)
 }
@@ -220,14 +223,20 @@ defineExpose({
 
   :deep(.el-scrollbar__wrap) {
     overflow-x: hidden;
+    scroll-behavior: smooth;
   }
 }
 
 .virtual-list-wrapper {
+  position: relative;
+  box-sizing: border-box;
   width: 100%;
 }
 
 .virtual-list-item {
+  position: absolute;
   box-sizing: border-box;
+  transform: translateZ(0);
+  will-change: transform;
 }
 </style>

src/renderer/windows/MainWindow/components/ExploreCommon.vue

@@ -2,6 +2,7 @@
 import { h } from 'vue'
 import clipboard from 'clipboardy'
 import UseCommonStore from '@renderer/stores/commonStore.js'
+import UseMenuStore from '@renderer/stores/menuStore.js'
 import UseSettingStore from '@renderer/stores/settingStore.js'
 import UseWordsStore from '@renderer/stores/wordsStore.js'
 import { useTranslation } from 'i18next-vue'
@@ -18,9 +19,11 @@ import { debounce } from '@renderer/utils/index.js'
 
 const { t } = useTranslation()
 const commonStore = UseCommonStore()
+const menuStore = UseMenuStore()
 const settingStore = UseSettingStore()
 const wordsStore = UseWordsStore()
 const { settingData } = storeToRefs(settingStore)
+const { selectedMenu, menuList } = storeToRefs(menuStore)
 const { wordTypeList, wordDrawerVisible } = storeToRefs(wordsStore)
 
 const cardBlockRef = ref(null)
@@ -49,6 +52,31 @@ const props = defineProps({
   menuParams: Object
 })
 
+// 启用的菜单列表
+const enabledMenus = computed(() => {
+  const list = menuList.value.filter((item) => item.placement.includes('sideMenu'))
+  if (
+    !settingData.value ||
+    !Array.isArray(settingData.value?.enabledMenus) ||
+    !settingData.value?.enabledMenus?.length
+  ) {
+    return list
+  }
+  return list.filter((item) => {
+    if (item.canBeEnabled) {
+      return settingData.value.enabledMenus.includes(item.name)
+    }
+    return true
+  })
+})
+
+// 是否启用WordDraw
+const enabledWordDraw = computed(() => {
+  // 词云菜单
+  const WordsMenu = enabledMenus.value.find((item) => item.name === 'Words')
+  return WordsMenu && selectedMenu.value && selectedMenu.value.name === 'Search'
+})
+
 const isExploreMenu = computed(() => {
   return props.menu === 'Explore'
 })
@@ -216,8 +244,8 @@ const gridForm = reactive({
 const cardForm = reactive({
   cardWidth: 225,
   cardHeight: Math.floor(225 * 0.618),
-  gridItems: gridForm.gridSize === 'auto' ? 4 : gridForm.gridSize,
-  gridGap: 10,
+  gridSize: gridForm.gridSize === 'auto' ? 4 : gridForm.gridSize,
+  gridGap: 4,
   buffer: 100
 })
 
@@ -490,7 +518,7 @@ const onTabChange = () => {
   wordFilter.value = ''
 }
 const getWords = () => {
-  if (isSearchMenu.value) {
+  if (enabledWordDraw.value) {
     window.FBW.getWords({
       types: [1, 2],
       size: 1000
@@ -708,24 +736,34 @@ const onSwitchGridSize = async (childVal) => {
 const handleGridSize = (blockWidth = 900, blockHeight = 600) => {
   if (!blockWidth || !blockHeight) return
   const { gridSize, gridHWRatio } = gridForm
+
+  // 减去VirtualList组件的左右margin (10px * 2)
+  const availableWidth = blockWidth - 20
+
   // 批量计算所有需要更新的值
   const updates = {}
   if (gridSize === 'auto') {
     for (let i = 0; i < 10; i++) {
       const size = gridSizeRange.size * Math.pow(1.5, i)
       const minWidth = gridSizeRange.wrapperWidth * Math.pow(1.5, i)
       const maxWidth = gridSizeRange.wrapperWidth * Math.pow(1.5, i + 1)
-      if (blockWidth >= minWidth && blockWidth < maxWidth) {
-        updates.gridItems = size
-        updates.cardWidth = Math.floor(blockWidth / updates.gridItems)
-        updates.cardHeight = Math.floor(updates.cardWidth * gridHWRatio)
+      if (availableWidth >= minWidth && availableWidth < maxWidth) {
+        updates.gridSize = size
+        // 计算总间距并从总宽度中减去
+        const totalGap = (updates.gridSize - 1) * cardForm.gridGap
+        // 使用更精确的计算方法，保留一位小数
+        updates.cardWidth = Math.round(((availableWidth - totalGap) / updates.gridSize) * 10) / 10
+        updates.cardHeight = Math.round(updates.cardWidth * gridHWRatio * 10) / 10
         break
       }
     }
   } else {
-    updates.gridItems = gridSize
-    updates.cardWidth = Math.floor(blockWidth / updates.gridItems)
-    updates.cardHeight = Math.floor(updates.cardWidth * gridHWRatio)
+    updates.gridSize = gridSize
+    // 计算总间距并从总宽度中减去
+    const totalGap = (updates.gridSize - 1) * cardForm.gridGap
+    // 使用更精确的计算方法，保留一位小数
+    updates.cardWidth = Math.round(((availableWidth - totalGap) / updates.gridSize) * 10) / 10
+    updates.cardHeight = Math.round(updates.cardWidth * gridHWRatio * 10) / 10
   }
   // 计算最优缓冲区大小
   updates.buffer = calculateOptimalBuffer(blockHeight, updates.cardHeight)
@@ -735,9 +773,9 @@ const handleGridSize = (blockWidth = 900, blockHeight = 600) => {
     (blockWidth * blockHeight) / (updates.cardWidth * updates.cardHeight)
   )
   // 计算当前卡片大小下，block容器可以包含行
-  const rows = Math.floor(allCardSize / updates.gridItems)
+  const rows = Math.floor(allCardSize / updates.gridSize)
   // 在当前block容器可以包含的行数基础上再加1行，乘以每行grid数量得出新的分页量
-  updates.pageSize = Math.floor((rows + 2) * updates.gridItems)
+  updates.pageSize = Math.floor((rows + 2) * updates.gridSize)
 
   // 一次性应用所有更新，减少重排次数
   Object.assign(cardForm, updates)
@@ -1044,7 +1082,8 @@ const onSyncToWallpaperSetting = async () => {
 
 // 设置为壁纸
 const setAsWallpaperWithDownload = async (item, index) => {
-  const res = await window.FBW.setAsWallpaperWithDownload(toRaw(item))
+  const res = await window.FBW.setAsWallpaperWithDownload(JSON.parse(JSON.stringify(item)))
+
   let options = {}
   if (res && res.success) {
     options.type = 'success'
@@ -1237,7 +1276,7 @@ const onCopyFilePath = (filePath) => {
 
 const onDeleteFile = (item, index) => {
   const onConfirmDeleteFile = async () => {
-    const res = await window.FBW.deleteFile(toRaw(item))
+    const res = await window.FBW.deleteFile(JSON.parse(JSON.stringify(item)))
     let callback
     if (res.success) {
       callback = async () => {
@@ -1503,7 +1542,7 @@ onBeforeUnmount(() => {
     </div>
     <div class="body-block">
       <div
-        v-if="isSearchMenu"
+        v-if="enabledWordDraw"
         :class="{ 'word-drawer': true, 'word-drawer-visible': wordDrawerVisible }"
       >
         <el-tabs v-model="activeWordTab" class="words-tabs" @tab-change="onTabChange">
@@ -1583,7 +1622,7 @@ onBeforeUnmount(() => {
           :items="cardList"
           :item-height="cardForm.cardHeight"
           :item-width="cardForm.cardWidth"
-          :grid-items="cardForm.gridItems"
+          :grid-size="cardForm.gridSize"
           :grid-gap="cardForm.gridGap"
           :buffer="cardForm.buffer"
           key-field="uniqueKey"
@@ -1853,6 +1892,8 @@ onBeforeUnmount(() => {
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  transform: translateZ(0);
+  will-change: transform, opacity;
 
   &:hover {
     background-color: rgba(50, 57, 65, 0.9);
@@ -2092,6 +2133,10 @@ onBeforeUnmount(() => {
     + .card-item-btn {
       margin: 0;
     }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
   }
 }
 

src/renderer/windows/MainWindow/components/SideMenu.vue

@@ -1,8 +1,8 @@
 <script setup>
-import UseSettingStore from '@renderer/stores/settingStore.js'
+import UseCommonStore from '@renderer/stores/commonStore.js'
 import UseMenuStore from '@renderer/stores/menuStore.js'
+import UseSettingStore from '@renderer/stores/settingStore.js'
 import UseWordsStore from '@renderer/stores/wordsStore.js'
-import UseCommonStore from '@renderer/stores/commonStore.js'
 import iconLogo from '@resources/icons/icon_64x64.png'
 import QRCode from 'qrcode'