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

ui: 调整到符合游戏风格

Browse Source
This commit is contained in:
ZF Sun
2025-11-12 09:37:10 +08:00
parent 58ad47d124
commit 1e221550cf
3 changed files with 600 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/AdminPanel.vue
View File

@@ -2,10 +2,10 @@
<div class="admin-panel">
<!-- 登录界面 -->
<div v-if="!isLoggedIn" class="login-container">
<div class="login-form">
<h2 class="login-title">🔐 管理员登录</h2>
<div class="login-form card-game">
<h2 class="game-title">🔐 管理员登录</h2>
<div class="form-group">
<label for="username">用户名:</label>
<label for="username" class="text-gold">用户名:</label>
<input
id="username"
v-model="loginForm.username"
@@ -15,7 +15,7 @@
/>
</div>
<div class="form-group">
<label for="password">密码:</label>
<label for="password" class="text-gold">密码:</label>
<input
id="password"
v-model="loginForm.password"
@@ -24,8 +24,8 @@
class="form-input"
/>
</div>
<button @click="login" class="login-btn">登录</button>
<button @click="goToHome" class="home-btn">返回首页</button>
<button @click="login" class="btn-game">登录</button>
<button @click="goToHome" class="btn-game-secondary">返回首页</button>
<div v-if="loginError" class="error-message">{{ loginError }}</div>
</div>
</div>
@@ -33,11 +33,11 @@
<!-- 管理界面 --><div v-else class="management-container">
<!-- 顶部导航 -->
<div class="top-nav">
<h1 class="nav-title">📊 百人大战管理系统</h1>
<h1 class="game-title">📊 百人大战管理系统</h1>
<div class="nav-actions">
<span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
<button @click="handleRefreshData" class="refresh-btn" style="margin-right: 10px;">刷新数据</button>
<button @click="logout" class="logout-btn">退出登录</button>
<button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button>
<button @click="logout" class="btn-game-secondary">退出登录</button>
</div>
</div>
@@ -47,16 +47,16 @@
v-for="tab in tabs"
:key="tab.key"
@click="currentTab = tab.key"
:class="['tab-btn', { active: currentTab === tab.key }]"
:class="['btn-game', { active: currentTab === tab.key }]"
>{{ tab.label }}</button>
</div>
<!-- 内容区域 --><div class="tab-content">
<!-- 结束时间设置 --><div v-if="currentTab === 'endTime'" class="end-time-content">
<h2 class="config-title">⏰ 百人大战结束时间设置</h2>
<h2 class="game-subtitle">⏰ 百人大战结束时间设置</h2>
<div class="time-setting-section">
<div class="config-item">
<label class="checkbox-label">
<label class="checkbox-label text-gold">
<span>结束日期：</span>
<input
type="date"
@@ -77,25 +77,25 @@
</label>
</div>
<div class="config-item">
<span class="info-text">提示：设置的结束时间将用于动态计算并显示"距离结束还有多少时间"</span>
<span class="info-text text-gold">提示：设置的结束时间将用于动态计算并显示"距离结束还有多少时间"</span>
</div>
</div>
</div>
<!-- 显示配置管理 --><div v-if="currentTab === 'config'" class="config-content">
<h2 class="config-title">⚙️ 显示配置管理</h2>
<h2 class="game-subtitle">⚙️ 显示配置管理</h2>
<!-- 个人排名显示配置 -->
<div class="config-section">
<h3>👤 个人排名显示选项</h3>
<h3 class="text-gold">👤 个人排名显示选项</h3>
<div class="config-options">
<div class="config-item">
<label class="checkbox-label">
<label class="checkbox-label text-gold">
<input
type="checkbox"
v-model="localDisplayConfig.individual.showLevel"
>
<span>显示等级列</span>
<span class="text-gold">显示等级列</span>
</label>
</div>
<div class="config-item">
@@ -104,19 +104,19 @@
type="checkbox"
v-model="localDisplayConfig.individual.showDepartment"
>
<span>显示部门列</span>
<span class="text-gold">显示部门列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>签单金额列显示名称：</span>
<span class="text-gold">签单金额列显示名称：</span>
<input type="text" v-model="localDisplayConfig.individual.scoreColumn.displayName"
placeholder="输入显示名称" class="text-input">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>签单金额显示样式：</span>
<span class="text-gold">签单金额显示样式：</span>
<select v-model="localDisplayConfig.individual.scoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
@@ -125,17 +125,17 @@
</div>
<div class="column-widths-section">
<h4>列宽设置（单位：像素）</h4>
<h4 class="text-gold">列宽设置（单位：像素）</h4>
<div class="column-width-item">
<label>排名列：</label>
<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>头像列：</label>
<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>姓名列：</label>
<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>
@@ -145,15 +145,15 @@
</select>
</div>
<div class="column-width-item">
<label>签单金额列：</label>
<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>等级列：</label>
<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>部门列：</label>
<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>
@@ -162,7 +162,7 @@
</select>
</div>
<div class="column-width-item">
<label>奖金列：</label>
<label class="text-gold">奖金列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.bonus" min="60" max="200" class="width-input">
</div>
</div>
@@ -171,7 +171,7 @@
<!-- 战队排名显示配置 -->
<div class="config-section">
<h3>👥 战队排名显示选项</h3>
<h3 class="text-gold">👥 战队排名显示选项</h3>
<div class="config-options">
<div class="config-item">
<label class="checkbox-label">
@@ -179,7 +179,7 @@
type="checkbox"
v-model="localDisplayConfig.team.showMemberCount"
>
<span>显示人数列</span>
<span class="text-gold">显示人数列</span>
</label>
</div>
<div class="config-item">
@@ -188,19 +188,19 @@
type="checkbox"
v-model="localDisplayConfig.team.showLeader"
>
<span>显示队长列</span>
<span class="text-gold">显示队长列</span>
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span>签单金额列显示名称：</span>
<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>签单金额显示样式：</span>
<span class="text-gold">签单金额显示样式：</span>
<select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
@@ -209,13 +209,13 @@
</div>
<div class="column-widths-section">
<h4>列宽设置（单位：像素）</h4>
<h4 class="text-gold">列宽设置（单位：像素）</h4>
<div class="column-width-item">
<label>排名列：</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>战队名列：</label>
<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>
@@ -225,15 +225,15 @@
</select>
</div>
<div class="column-width-item">
<label>签单金额列：</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>人数列：</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>队长列：</label>
<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>
@@ -242,7 +242,7 @@
</select>
</div>
<div class="column-width-item">
<label>奖金列：</label>
<label class="text-gold">奖金列：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.bonus" min="60" max="200" class="width-input">
</div>
</div>
@@ -252,8 +252,8 @@
<!-- 个人排名管理 --><div v-if="currentTab === 'individual'" class="rank-content">
<div class="management-header">
<h2>👤 个人排名管理</h2>
<button @click="showAddIndividual = true" class="add-btn">➕ 添加人员</button>
<h2 class="game-subtitle">👤 个人排名管理</h2>
<button @click="showAddIndividual = true" class="btn-game">➕ 添加人员</button>
</div>
<div class="rank-table">
<div class="table-header">
@@ -278,8 +278,8 @@
<span v-if="displayConfig.individual.showDepartment" class="dept-col">{{ item.department }}</span>
<span class="bonus-col">¥{{ item.bonus }}</span>
<span class="action-col">
<button @click="editIndividual(item)" class="edit-btn">✏️ 编辑</button>
<button @click="deleteIndividual(item.id)" class="delete-btn">🗑️ 删除</button>
<button @click="editIndividual(item)" class="btn-game-secondary">✏️ 编辑</button>
<button @click="deleteIndividual(item.id)" class="btn-game-secondary">🗑️ 删除</button>
</span>
</div>
</div>
@@ -287,8 +287,8 @@
<!-- 战队排名管理 --><div v-if="currentTab === 'team'" class="rank-content">
<div class="management-header">
<h2>👥 战队排名管理</h2>
<button @click="showAddTeam = true" class="add-btn">➕ 添加战队</button>
<h2 class="game-subtitle">👥 战队排名管理</h2>
<button @click="showAddTeam = true" class="btn-game">➕ 添加战队</button>
</div>
<div class="rank-table">
<div class="table-header">
@@ -313,8 +313,8 @@
<span v-if="displayConfig.team.showLeader" class="leader-col">{{ item.leader }}</span>
<span class="bonus-col">¥{{ item.bonus }}</span>
<span class="action-col">
<button @click="editTeam(item)" class="edit-btn">✏️ 编辑</button>
<button @click="deleteTeam(item.id)" class="delete-btn">🗑️ 删除</button>
<button @click="editTeam(item)" class="btn-game-secondary">✏️ 编辑</button>
<button @click="deleteTeam(item.id)" class="btn-game-secondary">🗑️ 删除</button>
</span>
</div>
</div>
@@ -322,9 +322,9 @@
<!-- 奖金设置 -->
<div v-if="currentTab === 'bonus'" class="bonus-config-content">
<h2 class="config-title">🎯 奖金设置</h2>
<h2 class="game-subtitle">🎯 奖金设置</h2>
<div class="config-section">
<h3>🏆 奖金规则配置</h3>
<h3 class="text-gold">🏆 奖金规则配置</h3>
<div class="bonus-rules-list">
<div
v-for="(rule, index) in localBonusRules"
@@ -333,38 +333,38 @@
>
<div class="rule-form">
<div class="form-group">
<label>名次范围:</label>
<label class="text-gold">名次范围:</label>
<input v-model="rule.rank" type="text" class="form-input" placeholder="如: 1-3">
</div>
<div class="form-group">
<label>规则描述:</label>
<label class="text-gold">规则描述:</label>
<input v-model="rule.description" type="text" class="form-input" placeholder="如: 前三名">
</div>
<div class="form-group">
<label>个人奖励:</label>
<label class="text-gold">个人奖励:</label>
<input v-model="rule.individualBonus" type="text" class="form-input" placeholder="如: ¥10000, ¥8000, ¥5000">
</div>
<div class="form-group">
<label>团队奖励:</label>
<label class="text-gold">团队奖励:</label>
<input v-model="rule.teamBonus" type="text" class="form-input" placeholder="如: ¥50000, ¥30000, ¥20000">
</div>
<div class="form-actions">
<button @click="deleteBonusRule(index)" class="delete-btn">🗑️ 删除</button>
<button @click="deleteBonusRule(index)" class="btn-game-secondary">🗑️ 删除</button>
</div>
</div>
</div>
<button @click="addBonusRule" class="add-btn" style="margin-top: 20px;">➕ 添加奖金规则</button>
<button @click="addBonusRule" class="btn-game" style="margin-top: 20px;">➕ 添加奖金规则</button>
</div>
</div>
</div>
<!-- 战鼓配置 -->
<div v-if="currentTab === 'drum'" class="drum-config-content">
<h2 class="config-title">🥁 战鼓配置管理</h2>
<h2 class="game-subtitle">🥁 战鼓配置管理</h2>
<!-- 音效配置 -->
<div class="config-section">
<h3>🔊 音效配置</h3>
<h3 class="text-gold">🔊 音效配置</h3>
<div class="config-options">
<div class="config-item">
<label class="checkbox-label">