WeWork/vs100
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ZF Sun
2025-11-25 09:32:07 +08:00
parent cb7a91d245
commit ede3e0d850
7 changed files with 405 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/AdminPanel.vue
View File

@@ -554,6 +554,51 @@
</div>
</div>
<!-- 总战绩标题图像配置 -->
<div class="config-section">
<h3 class="text-gold">📊 总战绩标题图像配置</h3>
<div class="subtitle-image-section">
<div class="logo-preview">
<div v-if="localDisplayConfig.subtitleImage?.src" class="logo-image-container">
<img :src="localDisplayConfig.subtitleImage.src" alt="总战绩标题图像" class="logo-preview-image">
</div>
<div v-else class="logo-placeholder">
<span>未上传图像</span>
</div>
</div>
<div class="upload-controls">
<input type="file" accept="image/*" @change="(e) => handleSubtitleImageUpload(e)"
class="logo-input">
<button v-if="localDisplayConfig.subtitleImage.src" @click="clearSubtitleImage()"
class="btn-clear">
清除图像
</button>
</div>
<div class="size-controls">
<div class="size-control">
<label class="text-gold">图像宽度：</label>
<input type="number" v-model.number="localDisplayConfig.subtitleImage.width" min="1" max="1000"
class="width-input" placeholder="输入宽度（像素）">
<span class="size-unit">px</span>
</div>
<div class="size-control">
<label class="text-gold">图像高度：</label>
<input type="number" v-model.number="localDisplayConfig.subtitleImage.height" min="1" max="1000"
class="width-input" placeholder="输入高度（像素）">
<span class="size-unit">px</span>
</div>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">替代文本：</span>
<input type="text" v-model="localDisplayConfig.subtitleImage.alt"
class="text-input" placeholder="输入图像替代文本">
</label>
</div>
<p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x60像素，文件大小不超过2MB</p>
</div>
</div>
<!-- 皇冠配置 -->
<div class="config-section">
<h3 class="text-gold">👑 英雄冠军皇冠配置</h3>
@@ -996,6 +1041,54 @@ const clearChampionLogo = (type) => {
championLogos.value[type] = '';
};
// 处理总战绩标题图像上传
const handleSubtitleImageUpload = async (event) => {
const file = event.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
if (response.ok) {
const data = await response.json();
// 确保subtitleImage对象存在
if (!localDisplayConfig.value.subtitleImage) {
localDisplayConfig.value.subtitleImage = {};
}
// 清除旧的文件（如果是上传的文件）
if (localDisplayConfig.value.subtitleImage.src && localDisplayConfig.value.subtitleImage.src.startsWith('/uploads/')) {
const oldFilename = localDisplayConfig.value.subtitleImage.src.split('/').pop();
fetch(`/api/upload/${oldFilename}`, { method: 'DELETE' })
.catch(error => console.error('删除旧文件失败:', error));
}
// 设置新的图像路径
localDisplayConfig.value.subtitleImage.src = data.filePath;
} else {
console.error('上传失败:', response.status);
}
} catch (error) {
console.error('上传文件时出错:', error);
}
};
// 清除总战绩标题图像
const clearSubtitleImage = () => {
if (localDisplayConfig.value.subtitleImage?.src && localDisplayConfig.value.subtitleImage.src.startsWith('/uploads/')) {
const filename = localDisplayConfig.value.subtitleImage.src.split('/').pop();
fetch(`/api/upload/${filename}`, { method: 'DELETE' })
.catch(error => console.error('删除文件失败:', error));
}
// 重置为默认图像
localDisplayConfig.value.subtitleImage = localDisplayConfig.value.subtitleImage || {};
localDisplayConfig.value.subtitleImage.src = '/completed_performance.png';
};
// 刷新数据
const handleRefreshData = () => {
try {

203
src/views/BattleRanking.vue
View File

@@ -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;