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

chore: PC 端基本页面完成

Browse Source
This commit is contained in:
ZF Sun
2025-11-13 08:21:46 +08:00
parent d6ee43e48b
commit e5010b6ea3
4 changed files with 92 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/config.json
View File

@@ -341,7 +341,7 @@
"showLevel": false, "showLevel": false,
"showDepartment": false, "showDepartment": false,
"scoreColumn": { "scoreColumn": {
"displayName": "签单金额", "displayName": "业绩",
"displayStyle": "amount" "displayStyle": "amount"
}, },
"columnWidths": { "columnWidths": {
@@ -358,7 +358,7 @@
"showMemberCount": false, "showMemberCount": false,
"showLeader": false, "showLeader": false,
"totalScoreColumn": { "totalScoreColumn": {
"displayName": "签单金额", "displayName": "业绩",
"displayStyle": "amount" "displayStyle": "amount"
}, },
"columnWidths": { "columnWidths": {

2
src/router/index.js
View File

@@ -7,7 +7,7 @@ const routes = [
path: '/', path: '/',
name: 'BattleRanking', name: 'BattleRanking',
component: BattleRanking, component: BattleRanking,
meta: { title: '百人大战排行榜' } meta: { title: '百日大战排行榜' }
}, },
{ {
path: '/admin', path: '/admin',

20
src/views/AdminPanel.vue
View File

@@ -33,7 +33,7 @@
<!-- 管理界面 --><div v-else class="management-container"> <!-- 管理界面 --><div v-else class="management-container">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<div class="top-nav"> <div class="top-nav">
<h1 class="game-title">📊 百人大战管理系统</h1> <h1 class="game-title">📊 百日大战管理系统</h1>
<div class="nav-actions"> <div class="nav-actions">
<span class="welcome-text">欢迎您，{{ currentUser.username }}！</span> <span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
<button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button> <button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button>
@@ -53,7 +53,7 @@
<!-- 内容区域 --><div class="tab-content" style="max-height: calc(100vh - 200px); overflow-y: auto;"> <!-- 内容区域 --><div class="tab-content" style="max-height: calc(100vh - 200px); overflow-y: auto;">
<!-- 结束时间设置 --><div v-if="currentTab === 'endTime'" class="end-time-content"> <!-- 结束时间设置 --><div v-if="currentTab === 'endTime'" class="end-time-content">
<h2 class="game-subtitle">⏰ 百人大战结束时间设置</h2> <h2 class="game-subtitle">⏰ 百日大战结束时间设置</h2>
<div class="time-setting-section"> <div class="time-setting-section">
<div class="config-item"> <div class="config-item">
<label class="checkbox-label text-gold"> <label class="checkbox-label text-gold">
@@ -109,14 +109,14 @@
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="checkbox-label"> <label class="checkbox-label">
<span class="text-gold">签单金额列显示名称：</span> <span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.individual.scoreColumn.displayName" <input type="text" v-model="localDisplayConfig.individual.scoreColumn.displayName"
placeholder="输入显示名称" class="text-input"> placeholder="输入显示名称" class="text-input">
</label> </label>
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="checkbox-label"> <label class="checkbox-label">
<span class="text-gold">签单金额显示样式：</span> <span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.individual.scoreColumn.displayStyle" class="select-input"> <select v-model="localDisplayConfig.individual.scoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option> <option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option> <option value="number">普通数字</option>
@@ -145,7 +145,7 @@
</select> </select>
</div> </div>
<div class="column-width-item"> <div class="column-width-item">
<label class="text-gold">签单金额列：</label> <label class="text-gold">业绩列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60" max="200" class="width-input"> <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60" max="200" class="width-input">
</div> </div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showLevel"> <div class="column-width-item" v-if="localDisplayConfig.individual.showLevel">
@@ -193,14 +193,14 @@
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="checkbox-label"> <label class="checkbox-label">
<span class="text-gold">签单金额列显示名称：</span> <span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName" <input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName"
placeholder="输入显示名称" class="text-input"> placeholder="输入显示名称" class="text-input">
</label> </label>
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="checkbox-label"> <label class="checkbox-label">
<span class="text-gold">签单金额显示样式：</span> <span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input"> <select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option> <option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option> <option value="number">普通数字</option>
@@ -225,7 +225,7 @@
</select> </select>
</div> </div>
<div class="column-width-item"> <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"> <input type="number" v-model.number="localDisplayConfig.team.columnWidths.score" min="60" max="200" class="width-input">
</div> </div>
<div class="column-width-item" v-if="localDisplayConfig.team.showMemberCount"> <div class="column-width-item" v-if="localDisplayConfig.team.showMemberCount">
@@ -627,7 +627,7 @@
<input v-model="individualForm.name" type="text" required class="form-input"> <input v-model="individualForm.name" type="text" required class="form-input">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>签单金额:</label> <label>业绩:</label>
<input v-model.number="individualForm.score" type="number" required class="form-input"> <input v-model.number="individualForm.score" type="number" required class="form-input">
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -665,7 +665,7 @@
<input v-model="teamForm.name" type="text" required class="form-input"> <input v-model="teamForm.name" type="text" required class="form-input">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>签单金额:</label> <label>业绩:</label>
<input v-model.number="teamForm.totalScore" type="number" required class="form-input"> <input v-model.number="teamForm.totalScore" type="number" required class="form-input">
</div> </div>
<div class="form-group"> <div class="form-group">

147
src/views/BattleRanking.vue
View File

@@ -50,76 +50,72 @@
</section> </section>
<!-- 冠军模块 -->
<section class="champion-section card-game">
<!-- 左侧：战区冠军 -->
<div class="team-champion">
<div class="team-logo">
🏅
</div>
<div class="champion-title">战区冠军</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<!-- 右侧：个人冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</div>
<div class="champion-title">个人冠军</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
</div>
</div>
</section>
<!-- 第四部分：排名明细 --> <!-- 第四部分：排名明细 -->
<section class="rankings-section card-game"> <section class="rankings-section card-game">
<div class="rankings-container"> <div class="rankings-container">
<!-- 战区排名 --> <!-- 战区排名 -->
<div class="team-rankings"> <div class="team-rankings">
<h2 class="game-subtitle">👥 战区排名</h2> <!-- 战区冠军 -->
<div class="rank-table"> <div class="team-champion">
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }"> <div class="team-logo">
<span class="rank-col">排名</span> 🏅
<span class="name-col">战区名称</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">人数</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">队长</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">奖金</span>
</div> </div>
<div <div class="champion-name">
v-for="(item, index) in teamRankings" {{ teamRankings[0]?.name || '暂无冠军' }}
:key="item.id" </div>
class="table-row" </div>
:style="{ 'grid-template-columns': teamGridTemplate }" <div class="team-rankings-container">
:class="{ <h2 class="game-subtitle">👥 战区排名</h2>
'top-three': index < 3, <div class="rank-table">
'highlight': index === 0 <div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
}" <span class="rank-col">排名</span>
> <span class="name-col">战区名称</span>
<span class="rank-col">{{ index + 1 }}</span> <span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
<span class="name-col">{{ item.name }}</span> <span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">人数</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' + item.totalScore : item.totalScore }}</span> <span v-if="localDisplayConfig.team?.showLeader" class="leader-col">队长</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">{{ item.memberCount }}人</span> <span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">奖金</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">{{ item.leader }}</span> </div>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">¥{{ item.bonus }}</span> <div
v-for="(item, index) in teamRankings"
:key="item.id"
class="table-row"
:style="{ 'grid-template-columns': teamGridTemplate }"
:class="{
'top-three': index < 3,
'highlight': index === 0
}"
>
<span class="rank-col">{{ index + 1 }}</span>
<span class="name-col">{{ item.name }}</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' + item.totalScore : item.totalScore }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">{{ item.memberCount }}人</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">{{ item.leader }}</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="individual-rankings"> <div class="individual-rankings">
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<!-- 英雄排名 --> <!-- 英雄排名 -->
<h2 class="game-subtitle">👤 英雄排名</h2> <div class="individual-rankings-container">
<div class="rank-table"> <h2 class="game-subtitle">👤 英雄排名</h2>
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }"> <div class="rank-table">
<span class="rank-col">排名</span> <div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
<span class="avatar-col">头像</span> <span class="rank-col">排名</span>
<span class="name-col">姓名</span> <span class="avatar-col">头像</span>
<span class="name-col">姓名</span>
<span v-if="localDisplayConfig.individual?.showTeam" class="team-col">{{ localDisplayConfig.individual?.teamColumn?.displayName || '战区' }}</span> <span v-if="localDisplayConfig.individual?.showTeam" class="team-col">{{ localDisplayConfig.individual?.teamColumn?.displayName || '战区' }}</span>
<span class="score-col">{{ localDisplayConfig.individual?.scoreColumn?.displayName || '业绩' }}</span> <span class="score-col">{{ localDisplayConfig.individual?.scoreColumn?.displayName || '业绩' }}</span>
<span v-if="localDisplayConfig.individual?.showLevel" class="level-col">等级</span> <span v-if="localDisplayConfig.individual?.showLevel" class="level-col">等级</span>
@@ -146,6 +142,7 @@
<span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">¥{{ item.bonus }}</span> <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -831,32 +828,36 @@ onUnmounted(() => {
.team-champion, .team-champion,
.individual-champion { .individual-champion {
flex: 1; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center; text-align: center;
padding: 15px; padding: 15px;
margin-bottom: 10px;
} }
.team-logo { .team-logo {
font-size: 2.5rem; font-size: 2rem;
margin-bottom: 10px; margin-bottom: 5px;
display: inline-block; display: inline-block;
color: gold; color: gold;
} }
.individual-avatar { .individual-avatar {
font-size: 2.5rem; font-size: 2rem;
margin-bottom: 10px; margin-bottom: 5px;
display: inline-block; display: inline-block;
} }
.champion-title { .champion-title {
font-size: 1rem; font-size: 0.9rem;
color: #999; color: #999;
margin-bottom: 5px; margin-bottom: 3px;
} }
.champion-name { .champion-name {
font-size: 1.3rem; font-size: 1.1rem;
font-weight: bold; font-weight: bold;
color: gold; color: gold;
} }
@@ -1313,18 +1314,28 @@ onUnmounted(() => {
gap: 15px; gap: 15px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
background: none;
border: none;
} }
.individual-rankings, .individual-rankings,
.team-rankings { .team-rankings {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
flex: 1; flex: 1;
min-width: 350px; min-width: 350px;
max-width: 550px; max-width: 550px;
} }
/* 为指定的容器添加背景和边框 */
.team-rankings-container,
.individual-rankings-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.5);
padding: 15px;
}
.section-title { .section-title {
color: #d63031; color: #d63031;
text-align: center; text-align: center;