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-22 08:23:16 +08:00
parent 7c70a7847a
commit 1d4cb8c184
5 changed files with 892 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1008
data/config.json
View File

File diff suppressed because it is too large Load Diff

BIN
public/crown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

1
src/data/mockData.js
View File

@@ -100,7 +100,6 @@ export const validateUser = (username, password) => {
export const initializeData = async () => {
try {
await refreshData();
console.log('数据初始化成功');
} catch (error) {
console.error('数据初始化失败:', error);
}

225
src/views/AdminPanel.vue
View File

@@ -177,6 +177,104 @@
</div>
</div>
<div class="column-widths-section">
<h4 class="text-gold">列宽设置（单位：像素）</h4>
<div class="column-width-item">
<label class="text-gold">排名：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.rank" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">头像：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">姓名：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.name" min="40" max="300" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">业绩：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60"
max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showLevel">
<label class="text-gold">等级：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.level" min="60"
max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showDepartment">
<label class="text-gold">部门：</label>
<select v-model.number="localDisplayConfig.individual.columnWidths.department" class="width-select">
<option :value="1">自动填充</option>
<option value="100">100px</option>
<option value="150">150px</option>
<option value="200">200px</option>
</select>
</div>
<div class="column-width-item">
<label class="text-gold">战区：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.team" min="10" max="300" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showAvatar">
<label class="text-gold">头像：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">奖金：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.bonus" min="60"
max="200" class="width-input">
</div>
</div>
</div>
</div>
<!-- 战区排名显示配置 -->
<div class="config-section">
<h3 class="text-gold">👥 战区排名显示选项</h3>
<div class="config-options">
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.showMemberCount">
<span class="text-gold">显示人数列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.showLeader">
<span class="text-gold">显示队长列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.filterZeroScore">
<span class="text-gold">过滤业绩为0的记录</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">移动端默认显示行数：</span>
<input type="number" v-model.number="localDisplayConfig.team.defaultDisplayRows" min="0" max="50" class="number-input" placeholder="留空或0表示显示所有行">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName" placeholder="输入显示名称"
class="text-input">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
</select>
</label>
</div>
<div class="column-alignment-section">
<h4 style="color: #007bff;">战区排名列表-列对齐设置</h4>
<div class="column-alignment-item">
@@ -232,141 +330,30 @@
<div class="column-widths-section">
<h4 class="text-gold">列宽设置（单位：像素）</h4>
<div class="column-width-item">
<label class="text-gold">排名列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.rank" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">头像列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">姓名列：</label>
<select v-model.number="localDisplayConfig.individual.columnWidths.name" class="width-select">
<option :value="1">自动填充</option>
<option value="100">100px</option>
<option value="150">150px</option>
<option value="200">200px</option>
<option value="250">250px</option>
</select>
</div>
<div class="column-width-item">
<label class="text-gold">业绩列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60"
max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showLevel">
<label class="text-gold">等级列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.level" min="60"
max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showDepartment">
<label class="text-gold">部门列：</label>
<select v-model.number="localDisplayConfig.individual.columnWidths.department" class="width-select">
<option :value="1">自动填充</option>
<option value="100">100px</option>
<option value="150">150px</option>
<option value="200">200px</option>
</select>
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showAvatar">
<label class="text-gold">头像列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
max="200" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">奖金列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.bonus" min="60"
max="200" class="width-input">
</div>
</div>
</div>
</div>
<!-- 战区排名显示配置 -->
<div class="config-section">
<h3 class="text-gold">👥 战区排名显示选项</h3>
<div class="config-options">
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.showMemberCount">
<span class="text-gold">显示人数列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.showLeader">
<span class="text-gold">显示队长列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<input type="checkbox" v-model="localDisplayConfig.team.filterZeroScore">
<span class="text-gold">过滤业绩为0的记录</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">移动端默认显示行数：</span>
<input type="number" v-model.number="localDisplayConfig.team.defaultDisplayRows" min="0" max="50" class="number-input" placeholder="留空或0表示显示所有行">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName" placeholder="输入显示名称"
class="text-input">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
</select>
</label>
</div>
<div class="column-widths-section">
<h4 class="text-gold">列宽设置（单位：像素）</h4>
<div class="column-width-item">
<label class="text-gold">排名列：</label>
<label class="text-gold">排名：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.rank" min="40" max="200"
class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">战区名列：</label>
<select v-model.number="localDisplayConfig.team.columnWidths.name" class="width-select">
<option :value="1">自动填充</option>
<option value="150">150px</option>
<option value="200">200px</option>
<option value="250">250px</option>
<option value="300">300px</option>
</select>
<label class="text-gold">战区名：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.name" min="100" max="400" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">业绩列：</label>
<label class="text-gold">业绩：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.score" min="60" max="200"
class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.team.showMemberCount">
<label class="text-gold">人数列：</label>
<label class="text-gold">人数：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.memberCount" min="60"
max="100" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.team.showLeader">
<label class="text-gold">队长列：</label>
<select v-model.number="localDisplayConfig.team.columnWidths.leader" class="width-select">
<option :value="1">自动填充</option>
<option value="100">100px</option>
<option value="150">150px</option>
<option value="200">200px</option>
</select>
<label class="text-gold">队长：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.leader" min="80" max="250" class="width-input">
</div>
<div class="column-width-item">
<label class="text-gold">奖金列：</label>
<label class="text-gold">奖金：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.bonus" min="60" max="200"
class="width-input">
</div>

35
src/views/BattleRanking.vue
View File

@@ -53,8 +53,7 @@
<img v-if="localDisplayConfig.championLogos?.teamChampion"
:src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军" class="champion-logo"
:style="{ width: localDisplayConfig.championLogos?.teamChampionSize + 'px', height: localDisplayConfig.championLogos?.teamChampionSize + 'px' }">
<span v-else
:style="{ fontSize: localDisplayConfig.championLogos?.teamChampionSize ? (localDisplayConfig.championLogos.teamChampionSize * 0.8) + 'px' : '2rem' }">🏅</span>
<img v-else src="/crown.png" alt="战区冠军" class="champion-logo" />
</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
@@ -105,10 +104,13 @@
<img v-else-if="localDisplayConfig.championLogos?.individualChampion"
:src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
:style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
<span v-else
<div v-else class="champion-log">
<span
:style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
{{ filteredIndividualRankings[0]?.avatar || '👤' }}
</span>
</div>
</div>
<div class="champion-name">
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
@@ -363,18 +365,15 @@ onBeforeMount(async () => {
if (config.displayConfig) {
const configCopy = JSON.parse(JSON.stringify(config.displayConfig));
localDisplayConfig.value = mergeConfig(defaultDisplayConfig, configCopy);
console.log('localDisplayConfig.value =', localDisplayConfig.value);
}
console.log('成功从服务器加载最新数据');
}
} catch (error) {
console.error('加载数据失败:', error);
}
});
// 确保原有onMounted逻辑不被覆盖
// 定义每行默认高度
const tableRowHeight = 50;
// 更新CSS变量，将默认显示行数传递给样式
watch(
@@ -390,13 +389,13 @@ watch(
() => localDisplayConfig.value?.team?.defaultDisplayRows,
(newValue) => {
if (newValue && newValue > 0) {
document.documentElement.style.setProperty('--team-default-height', `calc(60px * ${newValue})`);
document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
document.documentElement.style.setProperty('--team-overflow-y', 'auto');
document.documentElement.style.setProperty('--team-overflow-x', 'auto');
document.documentElement.style.setProperty('--team-scroll-lock', '');
} else {
// 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * 60 + 20;
// 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
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');
@@ -412,8 +411,8 @@ watch(
() => {
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
if (!displayRows || displayRows === 0) {
// 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * 60 + 20;
// 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
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');
@@ -1014,7 +1013,6 @@ onUnmounted(() => {
/* 皇冠动画效果 */
.crown-animation {
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
@@ -1061,6 +1059,7 @@ onUnmounted(() => {
.champion-logo {
object-fit: contain;
max-width: 120px;
}
.avatar-image {
@@ -1140,6 +1139,10 @@ onUnmounted(() => {
/* 响应式设计 */
@media (max-width: 768px) {
/** 皇冠动画 */
.crown-animation {
top: -120px;
}
/* 隐藏倒计时模块 */
.timer-float {
@@ -1759,6 +1762,10 @@ onUnmounted(() => {
white-space: normal !important;
}
.individual-rankings {
margin-top: 60px; /* 增加排名列表的顶部间距 */
}
/* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
.individual-rankings-container .rank-table {
overflow-y: auto;