chore: 动态计算英雄排名表格高度

2025-11-25 09:32:07 +08:00
parent cb7a91d245
commit ede3e0d850
7 changed files with 405 additions and 173 deletions
--- a/src/views/BattleRanking.vue
+++ b/src/views/BattleRanking.vue
@@ -44,10 +44,12 @@
    <!-- 第四部分：总战绩 -->
    <section class="total-score-section card-game">
      <div class="total-score-container">
-        <h2 class="game-subtitle">总战绩</h2>
+        <div class="game-subtitle total-score-total-title">
+          <img src="/completed_performance.png" alt="总战绩" class="total-score-total-image">
+        </div>
        <div class="total-score-content">
          <div class="total-score-item">
-            <span class="score-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
+            <span class="score-value total-score-total-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
          </div>
        </div>
      </div>
@@ -224,6 +226,12 @@ function createDefaultDisplayConfig() {
      individualChampion: '',
      individualChampionSize: 60
    },
+    subtitleImage: {
+      src: '/completed_performance.png',
+      width: 200,
+      height: 60,
+      alt: '总战绩'
+    },
    individual: {
      scoreColumn: {
        displayName: '业绩',
@@ -237,7 +245,7 @@ function createDefaultDisplayConfig() {
      showBonus: false,
      showTeam: true, // 默认显示战区列
      showAvatar: false, // 默认不显示头像列
-      defaultDisplayRows: 10, // 默认显示10行
+      defaultDisplayRows: 0, // 默认显示所有行
      filterZeroScore: false, // 默认不过滤业绩为0的记录
      columnWidths: {
        team: 120 // 默认战区列宽
@@ -419,30 +427,75 @@ onBeforeMount(async () => {
  }
 });

-// 定义每行默认高度
-const tableRowHeight = 50;
+// 定义英雄排名表中每行默认高度
+const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
+const tableIndividualRowHeight = 34.5; // 其他行高度px
+const tableIndividualReserveHeight = 20; // 保留空间高度px
+
+

 // 更新CSS变量，将默认显示行数传递给样式
 watch(
  () => localDisplayConfig.value?.individual?.defaultDisplayRows,
-  (newRows) => {
-    document.documentElement.style.setProperty('--default-display-rows', newRows);
+  (newValue) => {
+    if (newValue && newValue > 0) {
+      const otherRowsHeight = (newValue - 3) * tableIndividualRowHeight;
+      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+      document.documentElement.style.setProperty('--individual-overflow-y', 'auto');
+      document.documentElement.style.setProperty('--individual-overflow-x', 'auto');
+      document.documentElement.style.setProperty('--individual-scroll-lock', '');
+    } else {
+      // 根据实际数据条数计算高度
+      const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
+      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+      document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
+      document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
+      document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
+    }
  },
  { immediate: true }
 );

+// 当英雄排名数据变化时，重新计算高度（如果当前是显示所有行模式）
+watch(
+  () => filteredIndividualRankings.value.length,
+  () => {
+    console.log('filteredIndividualRankings.value.length', filteredIndividualRankings.value.length);
+    const displayRows = localDisplayConfig.value?.individual?.defaultDisplayRows;
+    if (!displayRows || displayRows === 0) {
+      // 根据实际数据条数计算高度
+      const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
+      const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
+      document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
+      document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
+      document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
+      document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
+    }
+  }
+);
+
+// 定义战区排名表中每行默认高度
+const tableTeamTopThreeHeight = 3 * 48; // 前三名高度px
+const tableTeamRowHeight = 48; // 其他行高度px
+const tableTeamReserveHeight = 20; // 保留空间高度px
+
 // 添加监听以同步战区排名默认显示行数配置到CSS变量
 watch(
  () => localDisplayConfig.value?.team?.defaultDisplayRows,
  (newValue) => {
    if (newValue && newValue > 0) {
-      document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
+      const otherRowsHeight = (newValue - 3) * tableTeamRowHeight;
+      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
+      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'auto');
      document.documentElement.style.setProperty('--team-overflow-x', 'auto');
      document.documentElement.style.setProperty('--team-scroll-lock', '');
    } else {
-      // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
-      const actualHeight = teamRankings.value.length * tableRowHeight + 20;
+      // 根据实际数据条数计算高度
+      const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
+      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -458,8 +511,9 @@ watch(
  () => {
    const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
    if (!displayRows || displayRows === 0) {
-      // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
-      const actualHeight = teamRankings.value.length * tableRowHeight + 20;
+      // 根据实际数据条数计算高度
+      const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
+      const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
      document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
      document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
      document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -468,6 +522,24 @@ watch(
  }
 );

+// 监听冠军字体大小配置变化，更新CSS变量
+watch(
+  () => localDisplayConfig.value?.championLogos,
+  (newConfig) => {
+    if (newConfig) {
+      // 设置战区冠军字体大小
+      if (newConfig.teamChampionFontSize) {
+        document.documentElement.style.setProperty('--team-champion-font-size', newConfig.teamChampionFontSize + 'rem');
+      }
+      // 设置英雄冠军字体大小
+      if (newConfig.individualChampionFontSize) {
+        document.documentElement.style.setProperty('--individual-champion-font-size', newConfig.individualChampionFontSize + 'rem');
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+
 // 确保奖金规则有默认值
 const displayBonusRules = computed(() => {
  return Array.isArray(bonusRules) && bonusRules.length > 0
@@ -1132,11 +1204,16 @@ onUnmounted(() => {
 }

 .champion-name {
-  font-size: 1.8rem;
+  font-size: var(--individual-champion-font-size, 1.8rem);
  font-weight: bold;
  color: gold;
 }

+/* 战区冠军名称特殊样式 */
+.team-champion .champion-name {
+  font-size: var(--team-champion-font-size, 1.8rem);
+}
+
 /* 基础样式 */
 :root {
  --gold-primary: #ffd700;
@@ -1195,6 +1272,11 @@ onUnmounted(() => {

 /* 响应式设计 */
@media (max-width: 768px) {
+  .total-score-total-image {
+    width: 320px;
+  }
+
+
  /** 皇冠动画 */
  .crown-animation {
    top: -120px;
@@ -1655,8 +1737,6 @@ onUnmounted(() => {
 .rank-table {
  border-radius: 10px;
  overflow: hidden;
-  min-height: 480px;
-  max-height: 480px;
  overflow-y: auto;
  position: relative;
  margin-top: 0.8rem;
@@ -1817,10 +1897,26 @@ onUnmounted(() => {
 }

 .score-value {
-  font-size: 3.6rem;
+  font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
  font-weight: bold;
-  color: var(--gold-primary);
-  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+  color: #fff2c4;
+  text-shadow: 
+    0 0 10px rgba(255, 215, 0, 0.5),
+    0 0 20px rgba(255, 215, 0, 0.3),
+    1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.total-score-total-value {
+  margin-top: -40px;
+}
+
+/* 战区冠军分数特殊样式 */
+.team-champion .score-value {
+  font-size: calc(var(--team-champion-font-size, 1.8rem) * 2);
+  text-shadow: 
+    0 0 15px rgba(255, 215, 0, 0.7),
+    0 0 30px rgba(255, 215, 0, 0.4),
+    2px 2px 3px rgba(0, 0, 0, 0.9);
 }

 /* 照片容器样式 */
@@ -1838,6 +1934,12 @@ onUnmounted(() => {
 }

@media (max-width: 768px) {
+
+    .total-score-total-title {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
    
    /* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
    .team-rankings-container .rank-table {
@@ -1871,17 +1973,37 @@ onUnmounted(() => {
      margin-top: 60px; /* 增加排名列表的顶部间距 */
    }
    
-    /* 英雄排名容器设置 - 显示所有行，与战区排名保持一致 */
+    /* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
    .individual-rankings-container .rank-table {
-      overflow-y: hidden;
-      overflow-x: auto; /* 允许水平滚动 */
      position: relative;
-      height: auto !important; /* 自动高度，显示所有行 */
+      min-height: auto;
+      /* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
+      height: var(--individual-default-height, auto) !important;
+      overflow-y: var(--individual-overflow-y, hidden);
+      overflow-x: var(--individual-overflow-x, auto);
      /* 隐藏滚动条 */
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
+    /* 当设置了滚动锁定时，禁止所有滚动 */
+    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
+      overflow-y: hidden !important;
+      overflow-x: hidden !important;
+      height: var(--individual-default-height, auto) !important;
+      min-width: auto !important;
+      width: 100% !important;
+    }
+    
+    /* 确保表格内容在锁定模式下正确显示 */
+    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
+    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
+      min-width: auto !important;
+      width: 100% !important;
+      overflow-x: visible !important;
+      white-space: normal !important;
+    }
+    
    /* 移动端非前三名字体放大 */
    .team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
    .individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
@@ -2101,19 +2223,30 @@ onUnmounted(() => {
    display: none;
  }
  
-  /* 英雄排名列表设置 - 显示所有行 */
-  .individual-rankings-container .rank-table {
-    overflow-x: hidden !important;
-    /* 禁止横向滚动 */
-    overflow-y: hidden !important;
-    /* 不允许纵向滚动，显示所有行 */
-    height: auto !important;
-    /* 确保英雄排名列表隐藏滚动条 */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    display: flex;
-    flex-direction: column;
-  }
+  /* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
+    .individual-rankings-container .rank-table {
+      overflow-x: hidden !important;
+      /* 禁止横向滚动 */
+      height: var(--individual-default-height, auto) !important;
+      overflow-y: var(--individual-overflow-y, auto) !important;
+      /* 确保英雄排名列表隐藏滚动条 */
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* 当设置了滚动锁定时，禁止所有滚动 */
+    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container {
+      overflow: visible !important;
+      height: auto !important;
+    }
+    
+    :root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
+      overflow: hidden !important;
+      white-space: nowrap;
+      display: block;
+    }
  
  .individual-rankings-container .rank-table::-webkit-scrollbar {
    display: none;