perf: 减少不必要的动画，使用预设的字体大小

Author: keleus

src/_locales/cmn-CN.yml

@@ -287,6 +287,8 @@ settings:
   home_adaptive_title_auto_size_desc: 根据网格宽度自动调整标题字号
   home_adaptive_title_font_size: 标题字号
   home_adaptive_title_font_size_desc: 固定的标题字号（像素），开启自适应时不生效
+  video_card_title_font_size: 标题字号
+  video_card_title_font_size_desc: 控制视频卡片标题的字号。
   video_card_author_font_size: UP 信息字号
   video_card_author_font_size_desc: 控制视频卡片上 UP 主昵称的字号。
   video_card_meta_font_size: 标签与时间字号

src/_locales/cmn-TW.yml

@@ -199,6 +199,8 @@ settings:
   home_adaptive_title_auto_size_desc: 依據網格寬度自動調整標題字級
   home_adaptive_title_font_size: 標題字級
   home_adaptive_title_font_size_desc: 固定標題字級（像素），開啟自適應時不生效
+  video_card_title_font_size: 標題字級
+  video_card_title_font_size_desc: 控制影片卡片標題的字級。
   video_card_author_font_size: UP 資訊字級
   video_card_author_font_size_desc: 控制影片卡片上 UP 主名稱的字級。
   video_card_meta_font_size: 標籤與時間字級

src/_locales/en.yml

@@ -256,6 +256,8 @@ settings:
   home_adaptive_title_auto_size_desc: Adjusts title font size based on the grid width
   home_adaptive_title_font_size: Title font size
   home_adaptive_title_font_size_desc: Fixed title font size (px); disabled when auto is on
+  video_card_title_font_size: Title Font Size
+  video_card_title_font_size_desc: Controls the font size of the video card title.
   video_card_author_font_size: UP info font size
   video_card_author_font_size_desc: Controls the font size for uploader names shown on video cards.
   video_card_meta_font_size: Tag & timestamp font size

src/_locales/jyut.yml

@@ -199,6 +199,8 @@ settings:
   home_adaptive_title_auto_size_desc: 根據網格闊度自動調整標題字體大小
   home_adaptive_title_font_size: 標題字體大小
   home_adaptive_title_font_size_desc: 固定標題字體大小（像素），開啟自動時唔生效
+  video_card_title_font_size: 標題字體大小
+  video_card_title_font_size_desc: 控制影片卡片標題嘅字體大小。
   video_card_author_font_size: UP 資訊字體大小
   video_card_author_font_size_desc: 控制影片卡片上 UP 主名稱嘅字體大小。
   video_card_meta_font_size: 標籤同時間字體大小

src/components/HorizontalScrollView.vue

@@ -81,8 +81,9 @@ function handleMouseScroll(event: WheelEvent) {
 </template>
 
 <style lang="scss" scoped>
+/* 简化遮罩渐变：使用3个关键点代替4个，提升性能 */
 .scroll-mask {
-  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, black 40px, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, transparent 100%);
 }
 </style>

src/components/Settings/PluginComponentsAndPages/VideoCard/VideoCard.vue

@@ -168,25 +168,11 @@ function resetColumns() {
         <Radio v-model="settings.showVideoCardRecommendTag" />
       </SettingsItem>
 
-      <SettingsItem :title="$t('settings.home_adaptive_title_auto_size')" :desc="$t('settings.home_adaptive_title_auto_size_desc')">
-        <Radio v-model="settings.homeAdaptiveTitleAutoSize" />
-      </SettingsItem>
-
-      <SettingsItem :title="$t('settings.home_adaptive_title_font_size')" :desc="$t('settings.home_adaptive_title_font_size_desc')">
-        <div flex="~ justify-end" w-full>
-          <Input
-            v-model="settings.homeAdaptiveTitleFontSize"
-            type="number"
-            :min="12"
-            :max="28"
-            flex-1
-            :disabled="settings.homeAdaptiveTitleAutoSize"
-          >
-            <template #suffix>
-              px
-            </template>
-          </Input>
-        </div>
+      <SettingsItem
+        :title="$t('settings.video_card_title_font_size')"
+        :desc="$t('settings.video_card_title_font_size_desc')"
+      >
+        <Select v-model="settings.videoCardTitleFontSize" :options="videoCardFontSizeOptions" w="full" />
       </SettingsItem>
 
       <SettingsItem

src/components/VideoCard/VideoCard.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch, watchEffect } from 'vue'
 
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { useVideoCardSharedStyles } from '~/composables/useVideoCardSharedStyles'
 import { settings } from '~/logic'
 import type { VideoCardLayoutSetting } from '~/logic/storage'
 import { calcCurrentTime, numFormatter } from '~/utils/dataFormatter'
@@ -38,6 +39,9 @@ const layout = computed((): 'modern' | 'old' => {
 const logic = useVideoCardLogic(props)
 const { mainAppRef } = useBewlyApp()
 
+// 使用共享样式（避免每个卡片重复计算）
+const { titleFontSizeClass, titleStyle, authorFontSizeClass, metaFontSizeClass } = useVideoCardSharedStyles()
+
 // Modern layout specific: cover stats calculation
 const statSuffixPattern = /(播放量?|观看|弹幕|点赞|views?|likes?|danmakus?|comments?|回复|人气|转发|分享|[次条人])/gi
 const statSeparatorPattern = /[•·]/g
@@ -144,26 +148,6 @@ const coverStatsStyle = computed(() => {
   return {}
 })
 
-// Title and text sizing
-const DEFAULT_TITLE_LINE_HEIGHT = 1.35
-const CUSTOM_TITLE_LINE_HEIGHT = 1.25
-
-const titleStyle = computed((): Record<string, string | number> => {
-  const { homeAdaptiveTitleAutoSize, homeAdaptiveTitleFontSize } = settings.value
-
-  if (!homeAdaptiveTitleAutoSize && homeAdaptiveTitleFontSize) {
-    return {
-      fontSize: `${homeAdaptiveTitleFontSize}px`,
-      lineHeight: CUSTOM_TITLE_LINE_HEIGHT.toString(),
-      '--bew-title-line-height': CUSTOM_TITLE_LINE_HEIGHT.toString(),
-    }
-  }
-
-  return {
-    '--bew-title-line-height': DEFAULT_TITLE_LINE_HEIGHT.toString(),
-  }
-})
-
 // Highlight tags calculation - 使用查找表优化性能
 const LIKE_RATIO_THRESHOLDS = [
   { view: 1_000_000, ratio: 0.01 },
@@ -276,16 +260,6 @@ function parseDurationStr(durationStr?: string) {
   return seconds
 }
 
-const VIDEO_CARD_FONT_SIZE_MAP = {
-  xs: 'text-xs',
-  sm: 'text-sm',
-  base: 'text-base',
-  lg: 'text-lg',
-} as const
-
-const authorFontSizeClass = computed(() => VIDEO_CARD_FONT_SIZE_MAP[settings.value.videoCardAuthorFontSize] ?? VIDEO_CARD_FONT_SIZE_MAP.sm)
-const metaFontSizeClass = computed(() => VIDEO_CARD_FONT_SIZE_MAP[settings.value.videoCardMetaFontSize] ?? VIDEO_CARD_FONT_SIZE_MAP.xs)
-
 const coverImageUrl = computed(() =>
   props.video ? `${logic.removeHttpFromUrl(props.video.cover)}@672w_378h_1c_!web-home-common-cover` : '',
 )
@@ -397,6 +371,7 @@ provide('getVideoType', () => props.type!)
           :video-url="logic.videoUrl.value"
           :more-btn="moreBtn"
           :show-video-options="logic.showVideoOptions.value"
+          :title-font-size-class="titleFontSizeClass"
           :title-style="titleStyle"
           :author-font-size-class="authorFontSizeClass"
           :meta-font-size-class="metaFontSizeClass"
@@ -442,6 +417,10 @@ provide('getVideoType', () => props.type!)
   /* 防止字体度量变化 */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* 防止骨架屏和真实内容切换时的布局偏移：
+     确保容器在加载过程中保持稳定的最小高度 */
+  min-height: fit-content;
 }
 
 .horizontal-card-cover {

src/components/VideoCard/components/VideoCardCover.vue

@@ -245,13 +245,12 @@ onBeforeUnmount(() => {
     overflow-hidden
     cursor-pointer
     group-hover:z-2
-    style="aspect-ratio: 16 / 9; contain: layout style;"
+    style="aspect-ratio: 16 / 9; contain: layout style; will-change: auto;"
   >
     <!-- Skeleton mode -->
     <div
       v-if="skeleton"
       w-full h-full bg="$bew-skeleton" rounded="$bew-radius"
-      class="animate-pulse"
       style="aspect-ratio: 16 / 9;"
     />
 
@@ -491,18 +490,10 @@ onBeforeUnmount(() => {
   left: 0;
   right: 0;
   bottom: 0;
+  /* 简化渐变：从6层减少到3层，提升性能 */
   background: var(
     --bew-video-card-shadow-gradient,
-    linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.8) 0%,
-      rgba(0, 0, 0, 0.7) 30%,
-      rgba(0, 0, 0, 0.5) 50%,
-      rgba(0, 0, 0, 0.3) 70%,
-      rgba(0, 0, 0, 0.15) 85%,
-      rgba(0, 0, 0, 0.05) 95%,
-      transparent 100%
-    )
+    linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%)
   );
   height: var(--bew-video-card-shadow-height-multiplier, calc(var(--video-card-stats-overlay-scale, 1.4) * 100%));
   border-bottom-left-radius: inherit;

src/components/VideoCard/components/VideoCardInfo.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { settings } from '~/logic'
 import { calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 
 import type { Video } from '../types'
@@ -16,6 +15,7 @@ interface Props {
   videoUrl?: string
   moreBtn: boolean
   showVideoOptions: boolean
+  titleFontSizeClass: string
   titleStyle: Record<string, string | number>
   authorFontSizeClass: string
   metaFontSizeClass: string
@@ -30,7 +30,6 @@ const emit = defineEmits<{
 }>()
 
 const moreBtnRef = ref<HTMLDivElement | null>(null)
-const titleRef = ref<HTMLElement | null>(null)
 
 defineExpose({
   moreBtnRef,
@@ -76,12 +75,12 @@ const primaryTags = computed(() => {
             text="overflow-ellipsis $bew-text-1 lg"
           >
             <!-- 使用与真实文本相同的行高填充，考虑 line-height -->
-            <div w-full bg="$bew-skeleton" rounded-4px class="animate-pulse" style="height: 1em; margin-bottom: calc((var(--bew-title-line-height, 1.35) - 1) * 0.5em);" />
-            <div w="3/4" bg="$bew-skeleton" rounded-4px class="animate-pulse" style="height: 1em;" />
+            <div w-full bg="$bew-skeleton" rounded-4px style="height: 1em; margin-bottom: calc((var(--bew-title-line-height, 1.35) - 1) * 0.5em);" />
+            <div w="3/4" bg="$bew-skeleton" rounded-4px style="height: 1em;" />
           </div>
           <div
             v-if="layout === 'modern'" shrink-0 w-8 h-8 rounded="1/2"
-            bg="$bew-skeleton" class="animate-pulse"
+            bg="$bew-skeleton"
           />
         </div>
 
@@ -93,18 +92,17 @@ const primaryTags = computed(() => {
         >
           <div
             w="34px" h="34px" rounded="1/2" bg="$bew-skeleton" shrink-0
-            class="animate-pulse"
           />
           <div flex="~ col gap-1" w="[calc(100%-50px)]">
             <!-- 作者名称骨架：使用与真实文本相同的字体大小和行高 -->
             <div
-              w="60%" bg="$bew-skeleton" rounded-4px class="animate-pulse"
+              w="60%" bg="$bew-skeleton" rounded-4px
               :class="authorFontSizeClass"
               style="height: 1em;"
             />
             <!-- 标签骨架：使用与真实标签相同的高度，包括 padding -->
             <div
-              w="80%" bg="$bew-skeleton" rounded-4px class="animate-pulse"
+              w="80%" bg="$bew-skeleton" rounded-4px
               :class="metaFontSizeClass"
               style="height: calc(1em + 0.24em);"
             />
@@ -118,7 +116,7 @@ const primaryTags = computed(() => {
           :class="metaFontSizeClass"
         >
           <div
-            w="60px" bg="$bew-skeleton" rounded="$bew-radius" class="animate-pulse"
+            w="60px" bg="$bew-skeleton" rounded="$bew-radius"
             style="height: calc(1em + 0.24em);"
           />
         </div>
@@ -133,7 +131,7 @@ const primaryTags = computed(() => {
             :class="metaFontSizeClass"
           >
             <div
-              bg="$bew-skeleton" rounded="$bew-radius" class="animate-pulse"
+              bg="$bew-skeleton" rounded="$bew-radius"
               lh-6 p="x-2" w="60px"
               style="height: calc(1em + 0.24em);"
             />
@@ -153,9 +151,9 @@ const primaryTags = computed(() => {
               <div
                 v-if="horizontal"
                 w="34px" h="34px" rounded="1/2" bg="$bew-skeleton"
-                shrink-0 m-r-2 class="animate-pulse"
+                shrink-0 m-r-2
               />
-              <div w="100px" bg="$bew-skeleton" rounded-4px class="animate-pulse" style="height: 1em;" />
+              <div w="100px" bg="$bew-skeleton" rounded-4px style="height: 1em;" />
             </div>
 
             <!-- View & Danmaku skeleton -->
@@ -164,7 +162,7 @@ const primaryTags = computed(() => {
                 :class="metaFontSizeClass"
                 text="$bew-text-2"
               >
-                <div w="150px" bg="$bew-skeleton" rounded-4px class="animate-pulse" style="height: 1em; display: inline-block;" />
+                <div w="150px" bg="$bew-skeleton" rounded-4px style="height: 1em; display: inline-block;" />
               </div>
             </div>
 
@@ -175,7 +173,7 @@ const primaryTags = computed(() => {
               :class="metaFontSizeClass"
             >
               <div
-                bg="$bew-skeleton" rounded="$bew-radius" class="animate-pulse"
+                bg="$bew-skeleton" rounded="$bew-radius"
                 lh-6 p="x-2" w="60px"
                 style="height: calc(1em + 0.24em);"
               />
@@ -197,13 +195,12 @@ const primaryTags = computed(() => {
       <div class="group/desc" flex="~ col" :class="layout === 'modern' ? 'gap-2' : ''" w="full" align="items-start">
         <div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
           <h3
-            ref="titleRef"
             :class="[
               video.liveStatus === 1 ? 'keep-one-line' : 'keep-two-lines',
-              { 'bew-title-auto': settings.homeAdaptiveTitleAutoSize },
               layout === 'modern' ? 'video-card-title' : '',
+              titleFontSizeClass,
             ]"
-            text="overflow-ellipsis $bew-text-1 lg"
+            text="overflow-ellipsis $bew-text-1"
             :style="titleStyle"
             cursor="pointer"
             :title="video.title"
@@ -497,13 +494,6 @@ const primaryTags = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.bew-title-auto {
-  /* Auto scale by actual card width (fallback to base grid width)
-     Increase responsiveness and use unitless line-height for better small-size rendering */
-  font-size: clamp(12px, calc((var(--bew-card-width, var(--bew-home-card-min-width, 280px)) / 280) * 20px), 30px);
-  line-height: clamp(1.15, calc(1.1 + (var(--bew-card-width, var(--bew-home-card-min-width, 280px)) / 280) * 0.2), 1.5);
-}
-
 .video-card-title {
   &.keep-two-lines {
     min-height: calc(var(--bew-title-line-height, 1.35) * 2em);

src/composables/useVideoCardSharedStyles.ts

@@ -0,0 +1,54 @@
+/**
+ * 视频卡片共享样式计算（单例模式）
+ * 避免每个卡片重复计算相同的样式
+ */
+
+import { computed } from 'vue'
+
+import { settings } from '~/logic'
+
+// 字体大小映射表（常量，无需重复计算）
+const VIDEO_CARD_FONT_SIZE_MAP = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+  lg: 'text-lg',
+} as const
+
+// 标题行高常量
+const TITLE_LINE_HEIGHT = 1.35
+
+/**
+ * 使用视频卡片共享样式
+ * 所有卡片使用相同的字体大小，避免重复计算
+ */
+export function useVideoCardSharedStyles() {
+  // 标题字体大小类（全局共享，使用4档预设）
+  const titleFontSizeClass = computed(() =>
+    VIDEO_CARD_FONT_SIZE_MAP[settings.value.videoCardTitleFontSize] ?? VIDEO_CARD_FONT_SIZE_MAP.base,
+  )
+
+  // 标题样式（全局共享）
+  const titleStyle = computed((): Record<string, string | number> => {
+    return {
+      '--bew-title-line-height': TITLE_LINE_HEIGHT.toString(),
+    }
+  })
+
+  // 作者字体大小类（全局共享）
+  const authorFontSizeClass = computed(() =>
+    VIDEO_CARD_FONT_SIZE_MAP[settings.value.videoCardAuthorFontSize] ?? VIDEO_CARD_FONT_SIZE_MAP.sm,
+  )
+
+  // 元数据字体大小类（全局共享）
+  const metaFontSizeClass = computed(() =>
+    VIDEO_CARD_FONT_SIZE_MAP[settings.value.videoCardMetaFontSize] ?? VIDEO_CARD_FONT_SIZE_MAP.xs,
+  )
+
+  return {
+    titleFontSizeClass,
+    titleStyle,
+    authorFontSizeClass,
+    metaFontSizeClass,
+  }
+}