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

chore: init

Browse Source
This commit is contained in:
ZF Sun
2025-11-11 14:15:40 +08:00
commit 867beb5de7
17 changed files with 3144 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

799
src/views/AdminPanel.vue Normal file
View File

@@ -0,0 +1,799 @@
<template>
<div class="admin-panel">
<!-- 登录界面 -->
<div v-if="!isLoggedIn" class="login-container">
<div class="login-form">
<h2 class="login-title">🔐 管理员登录</h2>
<div class="form-group">
<label for="username">用户名:</label>
<input
id="username"
v-model="loginForm.username"
type="text"
placeholder="请输入用户名"
class="form-input"
/>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input
id="password"
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
class="form-input"
/>
</div>
<button @click="login" class="login-btn">登录</button>
<div v-if="loginError" class="error-message">{{ loginError }}</div>
</div>
</div>
<!-- 管理界面 --><div v-else class="management-container">
<!-- 顶部导航 --><div class="top-nav">
<h1 class="nav-title">📊 百人大战管理系统</h1>
<div class="nav-actions">
<span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
<button @click="logout" class="logout-btn">退出登录</button>
</div>
</div>
<!-- 功能选项卡 --><div class="tabs">
<button
v-for="tab in tabs"
:key="tab.key"
@click="currentTab = tab.key"
:class="['tab-btn', { active: currentTab === tab.key }]"
>{{ tab.label }}</button>
</div>
<!-- 内容区域 --><div class="tab-content">
<!-- 个人排名管理 --><div v-if="currentTab === 'individual'" class="rank-content">
<div class="management-header">
<h2>👤 个人排名管理</h2>
<button @click="showAddIndividual = true" class="add-btn">➕ 添加人员</button>
</div>
<div class="rank-table">
<div class="table-header">
<span class="rank-col">排名</span>
<span class="name-col">姓名</span>
<span class="score-col">得分</span>
<span class="level-col">等级</span>
<span class="dept-col">部门</span>
<span class="bonus-col">奖金</span>
<span class="action-col">操作</span>
</div>
<div
v-for="(item, index) in localIndividualRankings"
:key="item.id"
class="table-row"
:class="{ 'highlight': index === 0 }"
>
<span class="rank-col">{{ index + 1 }}</span>
<span class="name-col">{{ item.name }}</span>
<span class="score-col">{{ item.score }}</span>
<span class="level-col" :class="`level-${item.level}`">{{ item.level }}</span>
<span 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>
</span>
</div>
</div>
</div>
<!-- 战队排名管理 --><div v-if="currentTab === 'team'" class="rank-content">
<div class="management-header">
<h2>👥 战队排名管理</h2>
<button @click="showAddTeam = true" class="add-btn">➕ 添加战队</button>
</div>
<div class="rank-table">
<div class="table-header">
<span class="rank-col">排名</span>
<span class="name-col">战队名称</span>
<span class="score-col">总分</span>
<span class="member-col">人数</span>
<span class="leader-col">队长</span>
<span class="bonus-col">奖金</span>
<span class="action-col">操作</span>
</div>
<div
v-for="(item, index) in localTeamRankings"
:key="item.id"
class="table-row"
:class="{ 'highlight': index === 0 }"
>
<span class="rank-col">{{ index + 1 }}</span>
<span class="name-col">{{ item.name }}</span>
<span class="score-col">{{ item.totalScore }}</span>
<span class="member-col">{{ item.memberCount }}人</span>
<span 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>
</span>
</div>
</div>
</div>
</div>
<!-- 保存按钮 --><div class="save-section">
<button @click="saveData" class="save-btn">💾 保存所有数据</button>
<button @click="goBack" class="back-btn">🏠 返回首页</button>
</div>
</div>
<!-- 添加/编辑个人对话框 --><div v-if="showAddIndividual || showEditIndividual" class="modal-overlay">
<div class="modal">
<h3 class="modal-title">{{ editingIndividual ? '编辑人员' : '添加人员' }}</h3>
<form @submit.prevent="saveIndividual">
<div class="form-group">
<label>姓名:</label>
<input v-model="individualForm.name" type="text" required class="form-input">
</div>
<div class="form-group">
<label>得分:</label>
<input v-model.number="individualForm.score" type="number" required class="form-input">
</div>
<div class="form-group">
<label>等级:</label>
<select v-model="individualForm.level" class="form-input">
<option value="SSS">SSS</option>
<option value="SS">SS</option>
<option value="S">S</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div class="form-group">
<label>部门:</label>
<input v-model="individualForm.department" type="text" required class="form-input">
</div>
<div class="form-group">
<label>奖金:</label>
<input v-model.number="individualForm.bonus" type="number" required class="form-input">
</div>
<div class="form-actions">
<button type="submit" class="confirm-btn">确定</button>
<button type="button" @click="cancelEditIndividual" class="cancel-btn">取消</button>
</div>
</form>
</div>
</div>
<!-- 添加/编辑战队对话框 --><div v-if="showAddTeam || showEditTeam" class="modal-overlay">
<div class="modal">
<h3 class="modal-title">{{ editingTeam ? '编辑战队' : '添加战队' }}</h3>
<form @submit.prevent="saveTeam">
<div class="form-group">
<label>战队名称:</label>
<input v-model="teamForm.name" type="text" required class="form-input">
</div>
<div class="form-group">
<label>总分:</label>
<input v-model.number="teamForm.totalScore" type="number" required class="form-input">
</div>
<div class="form-group">
<label>人数:</label>
<input v-model.number="teamForm.memberCount" type="number" required class="form-input">
</div>
<div class="form-group">
<label>队长:</label>
<input v-model="teamForm.leader" type="text" required class="form-input">
</div>
<div class="form-group">
<label>奖金:</label>
<input v-model.number="teamForm.bonus" type="number" required class="form-input">
</div>
<div class="form-actions">
<button type="submit" class="confirm-btn">确定</button>
<button type="button" @click="cancelEditTeam" class="cancel-btn">取消</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {
individualRankings,
teamRankings,
systemUsers,
saveIndividualRankings,
saveTeamRankings
} from '../data/mockData.js';
const router = useRouter();
// 登录相关
const isLoggedIn = ref(false);
const loginForm = reactive({
username: '',
password: ''
});
const loginError = ref('');
const currentUser = ref({});
// 标签页相关
const tabs = [
{ key: 'individual', label: '个人排名' },
{ key: 'team', label: '战队排名' }
];
const currentTab = ref('individual');
// 本地数据副本
const localIndividualRankings = ref([...individualRankings]);
const localTeamRankings = ref([...teamRankings]);
// 对话框状态
const showAddIndividual = ref(false);
const showEditIndividual = ref(false);
const editingIndividual = ref(null);
const showAddTeam = ref(false);
const showEditTeam = ref(false);
const editingTeam = ref(null);
// 表单数据
const individualForm = reactive({
id: null,
name: '',
score: 0,
level: 'A',
avatar: '⭐',
department: '',
completedTasks: 0,
bonus: 0
});
const teamForm = reactive({
id: null,
name: '',
totalScore: 0,
memberCount: 5,
level: 'A',
leader: '',
completedTasks: 0,
bonus: 0
});
// 登录
const login = () => {
const user = systemUsers.find(
u => u.username === loginForm.username && u.password === loginForm.password
);
if (user) {
isLoggedIn.value = true;
currentUser.value = user;
loginError.value = '';
} else {
loginError.value = '用户名或密码错误';
}
};
// 登出
const logout = () => {
isLoggedIn.value = false;
currentUser.value = {};
loginForm.username = '';
loginForm.password = '';
};
// 返回首页
const goBack = () => {
router.push('/');
};
// 保存数据
const saveData = () => {
// 按分数重新排序
localIndividualRankings.value.sort((a, b) => b.score - a.score);
localTeamRankings.value.sort((a, b) => b.totalScore - a.totalScore);
// 调用保存方法
saveIndividualRankings(localIndividualRankings.value);
saveTeamRankings(localTeamRankings.value);
alert('数据保存成功！');
};
// 添加/编辑个人
const editIndividual = (item) => {
editingIndividual.value = item;
Object.assign(individualForm, item);
showEditIndividual.value = true;
};
const saveIndividual = () => {
if (editingIndividual.value) {
// 编辑现有人员
const index = localIndividualRankings.value.findIndex(
i => i.id === individualForm.id
);
if (index !== -1) {
localIndividualRankings.value[index] = { ...individualForm };
}
} else {
// 添加新人员
individualForm.id = Date.now();
localIndividualRankings.value.push({ ...individualForm });
}
cancelEditIndividual();
};
const cancelEditIndividual = () => {
showAddIndividual.value = false;
showEditIndividual.value = false;
editingIndividual.value = null;
resetIndividualForm();
};
const resetIndividualForm = () => {
individualForm.id = null;
individualForm.name = '';
individualForm.score = 0;
individualForm.level = 'A';
individualForm.avatar = '⭐';
individualForm.department = '';
individualForm.completedTasks = 0;
individualForm.bonus = 0;
};
// 删除个人
const deleteIndividual = (id) => {
if (confirm('确定要删除这个人员吗？')) {
localIndividualRankings.value = localIndividualRankings.value.filter(
item => item.id !== id
);
}
};
// 添加/编辑战队
const editTeam = (item) => {
editingTeam.value = item;
Object.assign(teamForm, item);
showEditTeam.value = true;
};
const saveTeam = () => {
if (editingTeam.value) {
// 编辑现有战队
const index = localTeamRankings.value.findIndex(
i => i.id === teamForm.id
);
if (index !== -1) {
localTeamRankings.value[index] = { ...teamForm };
}
} else {
// 添加新战队
teamForm.id = Date.now();
localTeamRankings.value.push({ ...teamForm });
}
cancelEditTeam();
};
const cancelEditTeam = () => {
showAddTeam.value = false;
showEditTeam.value = false;
editingTeam.value = null;
resetTeamForm();
};
const resetTeamForm = () => {
teamForm.id = null;
teamForm.name = '';
teamForm.totalScore = 0;
teamForm.memberCount = 5;
teamForm.level = 'A';
teamForm.leader = '';
teamForm.completedTasks = 0;
teamForm.bonus = 0;
};
// 删除战队
const deleteTeam = (id) => {
if (confirm('确定要删除这个战队吗？')) {
localTeamRankings.value = localTeamRankings.value.filter(
item => item.id !== id
);
}
};
</script>
<style scoped>
.admin-panel {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
/* 登录界面 */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
.login-form {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
min-width: 300px;
}
.login-title {
color: #667eea;
text-align: center;
margin-bottom: 30px;
font-size: 1.8rem;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #666;
font-weight: bold;
}
.form-input {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-input:focus {
outline: none;
border-color: #667eea;
}
.login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.3s;
}
.login-btn:hover {
transform: translateY(-2px);
}
.error-message {
color: #e74c3c;
text-align: center;
margin-top: 15px;
}
/* 管理界面 */
.management-container {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.top-nav {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-title {
margin: 0;
font-size: 1.8rem;
}
.nav-actions {
display: flex;
align-items: center;
gap: 20px;
}
.welcome-text {
font-size: 1.1rem;
}
.logout-btn {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid white;
padding: 8px 20px;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s;
}
.logout-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
/* 标签页 */
.tabs {
display: flex;
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
.tab-btn {
flex: 1;
padding: 15px;
border: none;
background: none;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
}
.tab-btn.active {
background: white;
color: #667eea;
border-bottom: 3px solid #667eea;
}
.tab-content {
padding: 30px;
}
/* 管理内容 */
.management-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.management-header h2 {
color: #495057;
margin: 0;
}
.add-btn {
background: linear-gradient(45deg, #28a745, #20c997);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s;
}
.add-btn:hover {
transform: translateY(-2px);
}
/* 表格样式 */
.rank-table {
border-radius: 10px;
overflow: hidden;
border: 1px solid #dee2e6;
}
.table-header {
background: linear-gradient(45deg, #6c757d, #adb5bd);
color: white;
display: grid;
grid-template-columns: 60px 1fr 80px 80px 100px 80px 120px;
padding: 15px 10px;
font-weight: bold;
}
.team-rankings .table-header {
grid-template-columns: 60px 1fr 80px 60px 100px 80px 120px;
}
.table-row {
display: grid;
grid-template-columns: 60px 1fr 80px 80px 100px 80px 120px;
padding: 15px 10px;
border-bottom: 1px solid #dee2e6;
transition: background-color 0.3s;
}
.team-rankings .table-row {
grid-template-columns: 60px 1fr 80px 60px 100px 80px 120px;
}
.table-row:hover {
background-color: #f8f9fa;
}
.table-row.highlight {
background: linear-gradient(135deg, #ffd32a, #ff7979);
color: white;
}
/* 等级样式 */
.level-SSS {
color: #ffd700;
font-weight: bold;
}
.level-SS {
color: #c0c0c0;
font-weight: bold;
}
.level-S {
color: #cd7f32;
font-weight: bold;
}
.level-A {
color: #4caf50;
font-weight: bold;
}
.level-B {
color: #2196f3;
font-weight: bold;
}
/* 操作按钮 */
.action-col {
display: flex;
gap: 5px;
}
.edit-btn,
.delete-btn {
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: transform 0.3s;
}
.edit-btn {
background: #ffc107;
color: #212529;
}
.delete-btn {
background: #dc3545;
color: white;
}
.edit-btn:hover,
.delete-btn:hover {
transform: scale(1.05);
}
/* 保存部分 */
.save-section {
padding: 30px;
text-align: center;
background: #f8f9fa;
display: flex;
justify-content: center;
gap: 20px;
}
.save-btn,
.back-btn {
padding: 12px 30px;
border: none;
border-radius: 30px;
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.3s;
}
.save-btn {
background: linear-gradient(45deg, #17a2b8, #138496);
color: white;
}
.back-btn {
background: linear-gradient(45deg, #6c757d, #5a6268);
color: white;
}
.save-btn:hover,
.back-btn:hover {
transform: scale(1.05);
}
/* 模态框 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
min-width: 400px;
}
.modal-title {
color: #667eea;
text-align: center;
margin-bottom: 20px;
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.confirm-btn,
.cancel-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: transform 0.3s;
}
.confirm-btn {
background: linear-gradient(45deg, #28a745, #20c997);
color: white;
}
.cancel-btn {
background: linear-gradient(45deg, #6c757d, #5a6268);
color: white;
}
.confirm-btn:hover,
.cancel-btn:hover {
transform: translateY(-2px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.top-nav {
flex-direction: column;
gap: 15px;
}
.table-header,
.table-row {
font-size: 0.8rem;
}
.action-col {
flex-direction: column;
}
.modal {
min-width: auto;
margin: 20px;
}
}
</style>